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，成功跳转主页，账号锁定时展示剩余冷却时间