页面结构规范
整体布局
整体页面分为三大块:左侧菜单、顶部导航标签栏、右侧页面内容区。使用 antd 的 Layout 组件实现。
一、左侧菜单
使用 antd 的 Layout.Sider + Menu 组件。
结构要求
- 顶部:系统名称区,展示 "PC后台" 字样,居中显示,高度 56px
- 中部:三级菜单区,使用 antd Menu 的
items 配置,支持展开/折叠
- 一级菜单:如"销售中心"、"采购中心"、"仓储中心"
- 二级菜单:如"商品销售"、"销售退货"
- 三级菜单:如"订单列表"、"退货单列表"(点击三级菜单才打开页面)
- 底部:固定定位,高度 60px,展示"个人中心"和"消息中心"图标入口
菜单样式规范
| 层级 |
字号 |
字重 |
选中效果 |
| 一级菜单 |
15px |
500 |
主题色 #FF6B00 |
| 二级菜单 |
14px |
400 |
主题色 #FF6B00 |
| 三级菜单 |
13px |
400 |
主题色 #FF6B00 |
菜单配置
集中管理在 router/index.jsx,包含菜单结构和路由映射。详见 menu-config.md。
二、顶部导航标签栏
自定义实现的多标签页导航,位于页面内容区上方。
核心规则
- 导航栏只有一行,水平排列所有已打开的页面标签
- 标签文字与页面标题一致(取自菜单配置中的
label 字段)
- 首页标签永远存在,不可关闭,不显示关闭按钮
- 其他标签:鼠标悬浮时显示关闭按钮(X),不悬浮时隐藏关闭按钮
- 点击标签切换到对应页面
- 右键菜单:右键点击任意标签,弹出上下文菜单,包含:
- 关闭所有(除首页外全部关闭)
- 关闭其他(关闭除当前标签和首页外的所有标签)
- 关闭左侧(关闭当前标签左侧所有可关闭标签)
- 关闭右侧(关闭当前标签右侧所有可关闭标签)
- 标签过多时支持左右滚动
实现要点
- 使用 antd 的
Tabs 组件 或 自定义 div 实现
- 右键菜单使用 antd 的
Dropdown 组件
- 标签状态通过 React Context 全局管理
三、页面内容区
布局规范
- 菜单、导航栏固定不滚动
- 分页组件固定在页面底部,不随列表滚动
- 列表区域内部滚动,表头固定
滚动实现
- 整个内容区使用
height: 100vh; overflow: hidden
- 列表 Table 使用
scroll={{ x, y: 'calc(100vh - 300px)' }} 实现内部滚动