# 页面结构规范

## 整体布局

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

<br>