page-structure.md 2.7 KB

页面结构规范

整体布局

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


二、顶部导航标签栏

自定义实现的多标签页导航,位于页面内容区上方。

核心规则

  1. 导航栏只有一行,水平排列所有已打开的页面标签

  2. 标签文字与页面标题一致(取自菜单配置中的 label 字段)

  3. 首页标签永远存在,不可关闭,不显示关闭按钮

  4. 其他标签:鼠标悬浮时显示关闭按钮(X),不悬浮时隐藏关闭按钮

  5. 点击标签切换到对应页面

  6. 右键菜单:右键点击任意标签,弹出上下文菜单,包含:

    • 关闭所有(除首页外全部关闭)

    • 关闭其他(关闭除当前标签和首页外的所有标签)

    • 关闭左侧(关闭当前标签左侧所有可关闭标签)

    • 关闭右侧(关闭当前标签右侧所有可关闭标签)

  7. 标签过多时支持左右滚动

实现要点

  • 使用 antd 的 Tabs 组件 或 自定义 div 实现

  • 右键菜单使用 antd 的 Dropdown 组件

  • 标签状态通过 React Context 全局管理


三、页面内容区

布局规范

  • 菜单、导航栏固定不滚动

  • 分页组件固定在页面底部,不随列表滚动

  • 列表区域内部滚动,表头固定

滚动实现

  • 整个内容区使用 height: 100vh; overflow: hidden

  • 列表 Table 使用 scroll={{ x, y: 'calc(100vh - 300px)' }} 实现内部滚动