80 行
4.0 KiB
Markdown
80 行
4.0 KiB
Markdown
# 设计方案：页面右上角操作区
|
|
|
|
## 统一模型
|
|
|
|
页面分三层放动作：
|
|
|
|
1. **页面标题右上角**
|
|
- 只放页面级主操作。
|
|
- 最多一个主按钮 + 一个 `更多`。
|
|
- 主按钮必须是用户来到该页面最自然的创建/发起动作。
|
|
|
|
2. **列表工具栏 / 筛选区右侧**
|
|
- 放筛选、范围、导出、刷新、统计、批量、测试数据开关。
|
|
- 这些动作影响列表视图或当前查询范围，不是页面主操作。
|
|
- 默认只露出一到两个高频动作；导出、到期列表、测试数据、关联跳转等低频动作收进 `更多` 或高级筛选，避免工具栏形成第二排常驻按钮。
|
|
|
|
3. **行操作 / 详情操作区**
|
|
- 放 `查看详情`、`处理`、`继续编辑`、`查看进度`、`作废`、`归档` 等对象级动作。
|
|
- 风险动作必须在详情页或确认弹窗内完成。
|
|
|
|
## 右上角按钮规则
|
|
|
|
- 0 个按钮：工作台、待我处理、通知、只读记录页默认允许没有标题右侧按钮。
|
|
- 1 个按钮：有明确创建/发起动作的页面，只保留主按钮。
|
|
- 2 个按钮：主按钮 + `更多`。仅当存在必要页面级低频动作。
|
|
- 禁止 3 个及以上标题右侧按钮。
|
|
- 禁止把 `筛选`、`刷新`、`导出`、`显示测试数据` 直接放在标题右侧。
|
|
- 禁止为了视觉对齐给无主操作页面硬塞按钮。
|
|
|
|
## 页面应用
|
|
|
|
- `报销`：标题右上角 `新建报销`；统计/导出/范围切换在列表工具栏。
|
|
- `采购`：标题右上角 `新建采购`；筛选在列表工具栏。
|
|
- `合同`：标题右上角 `新增合同`；到期、导出、筛选进入列表工具栏/更多。
|
|
- `项目`：标题右上角 `新建项目`；合同入口和测试数据开关不在标题右上角。
|
|
- `资产`：标题右上角 `新增资产` + `更多`；更多内放扫码查找、资产分类。
|
|
- `付款`：标题右上角 `新建批次`；刷新在列表工具栏。
|
|
- `应付账款`：标题右上角无主按钮；刷新、导出在列表工具栏。
|
|
- `票据`：标题右上角 `上传票据` + `更多`；更多内放绑定和导出。
|
|
|
|
## 其他必须统一的页面规则
|
|
|
|
1. **命名规则**
|
|
菜单、页面标题、面包屑/返回入口使用同一个短名。业务对象内部可以叫 `采购申请`，但一级菜单和列表页标题统一叫 `采购`。
|
|
|
|
2. **标题区文案**
|
|
标题区只放标题、必要标签和主操作。默认不放副标题，不解释页面用途。
|
|
|
|
3. **筛选区**
|
|
状态切换优先用 tabs/chips；高频筛选一行展示；高级筛选统一由 `筛选` 打开。筛选入口属于列表工具栏，不属于页面标题区。
|
|
|
|
4. **列表工具区**
|
|
列表工具栏右侧只保留高频范围切换、`筛选` 或一个 `更多`。低频导出、到期、测试数据、关联跳转、排障动作不常驻外露。
|
|
|
|
5. **列表区**
|
|
所有业务列表保持单列首屏，不自动展开详情。表格列顺序统一为身份、业务关系、金额/日期、状态、操作。
|
|
|
|
6. **空状态**
|
|
空状态只说明当前筛选没有数据，并给一个真实下一步。不要写教学式流程说明。
|
|
|
|
7. **更多菜单**
|
|
`更多` 用于低频、导出、管理、排障或非主路径动作。浮层必须右对齐，不能被表格、卡片或滚动容器遮挡。
|
|
|
|
8. **详情与编辑**
|
|
详情页操作在右侧状态/操作面板；编辑页操作在底部或表单结尾固定区域。不要把详情操作塞回列表页标题右上角。
|
|
|
|
9. **权限**
|
|
无权限动作默认隐藏。配置缺失时才展示边界说明和配置入口。
|
|
|
|
10. **移动端**
|
|
移动端使用底部主操作和 `更多`，不复刻 PC 顶部多按钮。
|
|
|
|
## 实施策略
|
|
|
|
优先小步改造，不引入大 UI 框架：
|
|
|
|
1. 在现有 `WorkspaceHeader` / `PageHeader` 上继续使用 `actions`，先完成页面迁移。
|
|
2. 增加一个轻量共享 `HeaderActionGroup` 或等价模式，约束一主一更多。
|
|
3. 更新设计规范和 E2E 断言，防止新页面继续把多个工具塞到标题右侧。
|