# 06-UI交互规范

## 一、整体布局

### 1.1 页面框架

采用 Ant Design `Layout` 组合骨架：顶部 `Header` 放 logo / 全局菜单 / 用户信息；左侧 `Sider` 放可折叠的多级菜单（通过 `Menu` 组件渲染，菜单项数据由后端模块树接口返回）；右侧 `Content` 放业务内容区，顶部为面包屑（`Breadcrumb`），下方为页面主体。整体根节点用 `ConfigProvider` 注入主题与中文 `locale`。

### 1.2 布局参数

| 参数 | 默认值 | 说明 |
|---|---|---|
| Header 高度 | 56 px | 固定置顶，z-index 高于 Content |
| Sider 展开宽度 | 224 px | 多级菜单展开时 |
| Sider 折叠宽度 | 64 px | 仅显示 Icon |
| Content 内边距 | 16 px | 上下左右 |
| 最小分辨率 | 1280 × 720 | ERP 桌面端为主，不做 H5 适配 |

## 二、标准页面类型

ERP 业务以 CRUD 为主，统一为 3 类标准页：列表页、表单页、详情页。模块管理因含树形结构，额外保留树形管理页。

### 2.1 列表页

固定布局：`PageHeader` 标题区 → 顶部操作区（"新建"等主按钮 + 批量操作） → 搜索栏（`Form` 折叠展开） → 数据表格（`Table` + 行操作列） → 底部分页（`Pagination`，默认每页 20 条，可选 10 / 20 / 50 / 100）。

### 2.2 表单页

新增 / 编辑统一用 `Drawer`（从右侧滑出，宽度 520 px）承载，避免页面跳转打断列表上下文。校验时机：失焦校验 + 提交前完整校验（`Form.useForm` + `rules`）。提交按钮固定在 Drawer 底部，左侧"取消"右侧"确定"。

### 2.3 详情页

独立路由页面，顶部用 `Descriptions` 展示基本信息（2 列布局），下方用 `Tabs` 切换"基本信息 / 关联记录 / 操作日志"等分组。详情页只读，编辑跳回列表页 Drawer。

### 2.4 树形管理页

模块管理使用：左侧 `Tree` 展示模块层级（含搜索框），右侧根据选中节点展示详情/编辑表单。新增子节点通过节点上的"+"按钮触发，删除走二次确认。

## 三、通用交互规则

### 3.1 操作反馈

- 成功：`message.success`，2 秒自动消失
- 失败 / 业务错误：`message.error`，展示后端 `msg` 字段
- 危险操作（删除 / 禁用 / 重置密码）：`Modal.confirm` 二次确认，确认按钮 `danger`
- 长耗时按钮：进入请求即 `loading=true`，请求完成（成功或失败）才解除

### 3.2 数据展示

- 空状态：`Empty`，附主操作按钮（如"新建第一条"）
- 加载：`Spin` 包裹内容区，最小展示 300 ms 避免闪烁
- 异常：网络/服务异常用 `Result` 组件，附"重试"按钮

### 3.3 权限控制（前端）

- 菜单级：登录后调 `/auth/menu` 拉模块树，前端按返回数据渲染 `Menu`
- 按钮级：组件读取 `useUser().permissions` 判断操作按钮显隐
- 路由级：`PrivateRoute` 高阶组件包装受保护路由，未登录或无权限重定向至 `/403`
- 所有权限规则与后端 RBAC 保持一致，前端不做"最终判定"，只做"友好屏蔽"，后端依然校验

## 四、主题与颜色

基于 Ant Design 5 的 design token 体系，使用 `ConfigProvider.theme` 全局注入：

| Token | 默认值 | 说明 |
|---|---|---|
| colorPrimary | #1677ff | 主色（按钮、链接、选中态） |
| colorSuccess | #52c41a | 成功反馈 |
| colorWarning | #faad14 | 警告反馈 |
| colorError | #ff4d4f | 错误反馈、危险操作 |
| borderRadius | 4 | 全局圆角 |
| fontSize | 14 | 默认字号 |

## 五、页面清单

### module_mod 模块管理

- **模块管理树** (`/sys/modules`)
  - 类型: 树形管理页
  - 对应 REQ: REQ-MOD-001 / REQ-MOD-002 / REQ-MOD-003 / REQ-MOD-004
  - 入口菜单: 系统设置 → 模块管理
  - 主要交互: 左侧模块树（搜索框 + 树节点） + 右侧 Drawer 表单（新增 / 编辑）；节点上"+"新增子模块、删除走二次确认；REQ-MOD-004 的查询关键字直接绑定左侧树搜索框

### module_usr 用户管理

- **用户列表页** (`/sys/users`)
  - 类型: 列表页
  - 对应 REQ: REQ-USR-001 / REQ-USR-002 / REQ-USR-003
  - 入口菜单: 系统设置 → 用户管理
  - 主要交互: 顶部搜索栏（查询字段 + 匹配方式 + 查询值） + Table（含序号 / 用户名 / 员工名 / 用户号 / 部门 / 用户类型 / 语言 / 作废 / 登录日期 / 制单人 / 制单日期 / 操作列） + 分页；新建 / 编辑用 Drawer，权限组用 Checkbox 表格选择

- **登录页** (`/login`)
  - 类型: 表单页
  - 对应 REQ: REQ-USR-004
  - 入口菜单: 未登录默认重定向至此
  - 主要交互: 用户名 + 密码 + 版本（下拉，默认"标准版"）；提交后调 `POST /api/usr/auth/login`，成功跳转主页，账号锁定时展示剩余冷却时间