11 KiB

Raw Blame History

主框架页面设计规范

Nex Design 主框架布局设计文档

概述

主框架页面是应用的基础布局结构，包含侧边菜单栏、顶部导航栏和内容区域。本文档详细说明了主框架的设计规范、交互逻辑和实现要点。

页面结构

┌─────────────────────────────────────────────────────┐
│                    顶部导航栏 (64px)                   │
├──────────┬──────────────────────────────────────────┤
│          │                                          │
│  侧边栏   │          内容区域                         │
│ (200px)  │      (可向下滚动)                         │
│          │                                          │
│          │                                          │
└──────────┴──────────────────────────────────────────┘

1. 侧边栏 (Sider)

1.1 基础规范

属性	展开状态	收起状态
宽度	200px	64px
背景色	#001529 (深色)	#001529
位置	固定左侧	固定左侧
层级	z-index: 10	z-index: 10

1.2 Logo 区域

设计规范：

高度：64px
背景：rgba(255, 255, 255, 0.05)
底部边框：1px solid rgba(255, 255, 255, 0.05)
内边距：12px 16px
对齐：居中

展开状态：

显示完整 Logo（logo-full.png）
Logo 高度：40px，宽度自适应

收起状态：

显示方形 Logo（logo-small.png）
Logo 尺寸：40px × 40px
圆角：8px

1.3 菜单系统

菜单层级

支持两级菜单结构：

一级菜单：带图标，可展开/收起
二级菜单：文字列表，可带徽章标识

菜单数据格式

[
  {
    "key": "overview",
    "label": "概览",
    "icon": "DashboardOutlined",
    "path": "/overview"
  },
  {
    "key": "certificate",
    "label": "证书管理",
    "icon": "SafetyCertificateOutlined",
    "children": [
      {
        "key": "ssl-cert",
        "label": "SSL证书管理",
        "path": "/certificate/ssl"
      }
    ]
  }
]

菜单状态

正常状态：

背景色：透明
文字颜色：rgba(255, 255, 255, 0.65)

悬停状态：

背景色：rgba(184, 23, 141, 0.2)
文字颜色：#fff

选中状态：

背景色：#b8178d (品牌主色)
文字颜色：#fff
左侧边框：3px solid #b8178d

展开状态：

二级菜单背景：rgba(0, 0, 0, 0.15)
二级菜单内边距：左侧 48px

徽章系统

支持在菜单项上显示徽章标识：

HOT 徽章：
- 背景色：#ff4d4f (红色)
- 文字：白色
- 尺寸：18px 高度，圆角 9px
NEW 徽章：
- 背景色：#52c41a (绿色)
- 文字：白色
- 尺寸：18px 高度，圆角 9px

注意：收起状态下徽章自动隐藏。

收起状态行为

仅显示一级菜单图标
鼠标悬停时不展开子菜单
点击跳转到该分类的默认页面

1.4 滚动条样式

宽度：6px
轨道：透明
滑块：rgba(255, 255, 255, 0.2)
滑块悬停：rgba(255, 255, 255, 0.3)
圆角：3px

2. 顶部导航栏 (Header)

2.1 基础规范

属性	值
高度	64px
背景色	#ffffff
阴影	0 1px 4px rgba(0, 21, 41, 0.08)
位置	sticky，top: 0
层级	z-index: 9
内边距	0 24px

2.2 左侧区域

折叠按钮：

图标尺寸：18px
颜色：rgba(0, 0, 0, 0.65)
悬停色：#b8178d (品牌主色)
悬停背景：rgba(0, 0, 0, 0.03)
内边距：8px
圆角：4px
功能：切换侧边栏展开/收起状态

工作台标识：

字号：14px
字重：500 (Medium)
颜色：rgba(0, 0, 0, 0.88)
左侧间距：16px

2.3 右侧区域

从左到右依次包含：

搜索框
- 宽度：200px
- 高度：32px
- 圆角：16px (胶囊形)
- 占位文字："搜索..."
- 前缀图标：SearchOutlined
帮助图标
- 图标：QuestionCircleOutlined
- 尺寸：16px
- 颜色：rgba(0, 0, 0, 0.65)
- 悬停色：#b8178d
功能链接（ICP 备案、企业、支持）
- 字号：14px
- 颜色：rgba(0, 0, 0, 0.65)
- 悬停色：#b8178d
- 悬停背景：rgba(0, 0, 0, 0.03)
- 内边距：4px 8px
- 圆角：4px
工单图标
- 图标：SettingOutlined
- 样式同帮助图标
消息中心
- 图标：BellOutlined
- 带徽章：Badge count={5}
- 徽章位置：右上角，offset: [-3, 3]
- 徽章尺寸：small
用户信息
- 头像：32px × 32px 圆形
- 用户名：14px，Medium 字重
- 颜色：rgba(0, 0, 0, 0.88)
- 整体内边距：4px 8px
- 悬停背景：rgba(0, 0, 0, 0.03)
- 点击显示下拉菜单

间距：各元素之间间距 16-20px

3. 内容区域 (Content)

3.1 基础规范

属性	值
背景色	#f5f5f5
内边距	24px
高度	calc(100vh - 64px)
滚动	overflow-y: auto

3.2 内容容器

最大宽度：根据业务需求，建议 1200-1600px
内边距：24px
背景色：根据内容类型，卡片为 #fff

3.3 滚动行为

仅内容区域可滚动
顶部导航栏和侧边栏保持固定
滚动条样式与全局一致

4. 响应式适配

4.1 断点规则

断点	行为
< 768px	侧边栏默认收起，通过遮罩层展开
≥ 768px	侧边栏可正常展开/收起
≥ 1200px	建议默认展开侧边栏

4.2 移动端优化

侧边栏改为抽屉模式 (Drawer)
顶部搜索框宽度减小或移至下拉菜单
功能链接收起至"更多"菜单
用户信息简化显示

5. 主题配色

5.1 品牌主色

基于 NEX Logo 的紫红色：

--primary-color: #b8178d;
--primary-hover: #9c1477;
--primary-active: #801161;

5.2 辅助色

蓝色（信息色）：#1677ff
绿色（成功）：#52c41a
红色（错误/警告）：#ff4d4f
橙色（警告）：#faad14

5.3 中性色

--text-primary: rgba(0, 0, 0, 0.88);
--text-secondary: rgba(0, 0, 0, 0.65);
--text-tertiary: rgba(0, 0, 0, 0.45);
--bg-primary: #ffffff;
--bg-secondary: #fafafa;
--bg-tertiary: #f5f5f5;
--border-color: #d9d9d9;

6. 交互规范

6.1 侧边栏折叠

触发方式：

点击顶部折叠按钮
可选：在设置中保存用户偏好

动画：

过渡时间：200ms
缓动函数：ease-in-out
影响元素：侧边栏宽度、Logo、菜单文字

状态保持：

使用 localStorage 保存用户折叠状态
页面刷新后保持用户选择

6.2 菜单导航

展开逻辑：

点击一级菜单展开/收起二级菜单
默认展开当前路由所在的菜单组
支持手风琴模式（可选）

高亮逻辑：

根据当前路由自动高亮对应菜单项
二级菜单选中时，一级菜单也显示激活状态

跳转方式：

使用 React Router 进行路由跳转
支持浏览器前进/后退

6.3 用户下拉菜单

菜单项：

个人中心
账户设置
分割线
退出登录

交互：

点击用户信息区域展开
点击菜单项执行对应操作
点击外部区域关闭

7. 代码实现

7.1 组件结构

MainLayout/
├── MainLayout.jsx      # 主布局组件
├── MainLayout.css      # 布局样式
├── AppSider.jsx        # 侧边栏组件
├── AppSider.css        # 侧边栏样式
├── AppHeader.jsx       # 顶部栏组件
├── AppHeader.css       # 顶部栏样式
└── index.js           # 导出文件

7.2 菜单数据配置

菜单数据独立维护在 src/constants/menuData.json，便于更新和管理。

7.3 关键技术点

状态管理：
- collapsed 状态通过 props 传递
- 菜单展开状态 (openKeys) 在 AppSider 内部管理
路由集成：
- 使用 useNavigate 进行路由跳转
- 使用 useLocation 获取当前路由
图标映射：
- 通过 iconMap 对象将字符串转换为图标组件
主题定制：
- 在 src/main.jsx 中配置 Ant Design 主题
- 使用 ConfigProvider 包裹应用

8. 示例页面

8.1 概览页 (Overview)

作为主框架的示例页面，展示了：

统计卡片布局
图表展示
数据可视化
响应式栅格系统

详细设计见：概览页设计文档

9. 可访问性

9.1 键盘导航

支持 Tab 键在可交互元素间切换
支持 Enter 键激活菜单项
支持方向键在菜单间导航

9.2 语义化标签

使用 nav 标签包裹导航菜单
使用 header 标签包裹顶部栏
使用 main 标签包裹主内容区

9.3 对比度

所有文本与背景对比度 ≥ 4.5:1
图标与背景对比度 ≥ 3:1

10. 性能优化

10.1 懒加载

页面组件使用 React.lazy 懒加载
减少首屏加载时间

10.2 防抖优化

搜索框输入使用防抖处理
窗口大小变化使用节流处理

10.3 虚拟滚动

菜单项较多时考虑虚拟滚动
长列表使用虚拟化技术

11. 开发指南

11.1 添加新菜单

编辑 src/constants/menuData.json
添加菜单项配置
如需新图标，在 AppSider.jsx 的 iconMap 中添加映射
创建对应的页面组件
在 App.jsx 中添加路由

11.2 自定义主题

编辑 src/main.jsx 中的 theme 配置
修改 tailwind.config.js 中的颜色系统
更新 src/styles/globals.css 中的 CSS 变量

11.3 扩展功能

添加面包屑导航
添加页签 (Tabs) 功能
添加全局设置抽屉
添加主题切换（亮色/暗色）

12. 常见问题

Q1: 如何修改侧边栏默认展开状态？

在 MainLayout.jsx 中修改 collapsed 的初始值：

const [collapsed, setCollapsed] = useState(false) // false 为展开

Q2: 如何添加三级菜单？

当前设计仅支持两级菜单。如需三级菜单，需要：

修改 menuData.json 数据结构
修改 AppSider.jsx 中的 getMenuItems 函数
考虑 UI 空间和用户体验

Q3: 如何实现菜单权限控制？

建议：

在菜单数据中添加 roles 或 permissions 字段
在渲染菜单前根据用户权限过滤
在路由层面也要做权限校验

版本记录

版本	日期	说明
1.0.0	2024-11-04	初始版本，完成主框架设计

维护者: Nex Design Team 最后更新: 2024-11-04

11 KiB Raw Blame History Unescape Escape