整体页面分为三大块:左侧菜单、顶部导航标签栏、右侧页面内容区。使用 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)' }} 实现内部滚动