114 lines
5.1 KiB
Markdown
114 lines
5.1 KiB
Markdown
# OneOS V2 全局列表操作列调整设计
|
||
|
||
## 背景
|
||
|
||
车辆资产列表当前把全部行操作收进自建“更多”菜单,不符合 OneOS V2 使用公共 `OperationActions` 的要求。现行全局规范又将“查看详情”定义为低频浏览动作,默认收入“更多”,与本次确认的“双外置”方向不一致。
|
||
|
||
本次调整同时修正规范与车辆资产页:将“查看 / 详情”定义为稳定的首要入口,与常用工作流动作共同外置;低频管理、历史与危险操作保留在“更多”菜单。
|
||
|
||
## 目标与范围
|
||
|
||
### 目标用户
|
||
|
||
使用 OneOS V2 台账的运营人员、业务经办人和管理员。
|
||
|
||
### 核心任务
|
||
|
||
用户在扫描列表时,可以直接进入详情或执行最常用的工作流动作,不必先打开菜单。
|
||
|
||
### 本次范围
|
||
|
||
- 更新 OneOS V2 全局 `OperationActions` 规范。
|
||
- 同步公共组件说明、组件行为和相关设计系统引用。
|
||
- 将车辆资产列表迁移到公共 `OperationActions`。
|
||
- 保留车辆资产页现有的查看详情、编辑和设置运维负责人能力。
|
||
|
||
### 不在范围内
|
||
|
||
- 不修改车辆资产的信息架构、筛选、列结构和详情页。
|
||
- 不新增业务权限或后端接口。
|
||
- 不批量迁移所有历史台账;全局规则用于后续迁移和新页面。
|
||
|
||
## 全局操作分级
|
||
|
||
操作列外置动作最多两个,固定按下列顺序显示:
|
||
|
||
1. 查看类入口:`查看`、`详情`或`查看详情`。
|
||
2. 一个常用工作流动作:`编辑`、`处理`或`处置`。
|
||
|
||
其余动作进入“更多”菜单:
|
||
|
||
- 低频管理:设置或修改负责人、转交等。
|
||
- 留痕与历史:查看记录、操作记录、历史日志等。
|
||
- 高风险操作:撤回、终止、删除等。
|
||
|
||
“查看记录”表示历史或留痕查询,继续视为低频动作;它不等同于进入当前业务对象的“查看详情”。
|
||
|
||
## 显示规则
|
||
|
||
```text
|
||
[查看/详情] [编辑/处理/处置] [⋮ 更多]
|
||
固定首位 最多一个 按需显示
|
||
```
|
||
|
||
- 只读台账仅外置“查看 / 详情”。
|
||
- 没有查看入口时,可外置最多两个常用工作流动作。
|
||
- 没有更多动作时,不显示省略号按钮。
|
||
- 没有任何可用操作时显示 `-`。
|
||
- 权限过滤在布局分配前完成,避免空菜单或占位按钮。
|
||
- 操作列不换行,PC 建议宽度为 `148–184px`,按外置文案长度在页面级固定。
|
||
- H5 继续遵循 44×44px 最小触控热区。
|
||
|
||
## 车辆资产页落地
|
||
|
||
车辆资产列表每行使用:
|
||
|
||
- 外置一:`查看`,进入车辆详情页。
|
||
- 外置二:`编辑`,打开现有车辆编辑流程。
|
||
- 更多:`设置运维负责人`。
|
||
|
||
操作顺序在所有行保持一致。无运维管理权限时,“更多”菜单不显示;若编辑权限也不可用,则只保留“查看”。
|
||
|
||
车辆页删除自建 `ActionsMoreMenu` 及其专属菜单皮肤,改用 `src/common/OperationActions.tsx` 和 `src/common/vm-operation-actions.css`。业务回调保持不变。
|
||
|
||
## 组件与文档同步
|
||
|
||
需要保持下列内容一致:
|
||
|
||
- `src/resources/design-system/DESIGN.md` §3.16
|
||
- `src/resources/design-system/chapters/03-components.md`
|
||
- `src/prototypes/vm-shared/DESIGN.md`
|
||
- `src/common/operation-actions-spec.md`
|
||
- `src/common/OperationActions.tsx`
|
||
- `src/common/vm-operation-actions.css`
|
||
|
||
公共组件应把详情类 `view` 动作放到外侧首位,把“查看记录 / 操作记录”等历史型动作分入更多菜单。`splitOperationActions` 需区分详情入口与历史记录,不能再把两者合并为同一低频类别。
|
||
|
||
## 交互与无障碍
|
||
|
||
- “更多”触发器使用 `MoreHorizontal` 图标,`aria-label="更多操作"`。
|
||
- 菜单支持点击外部和 `Escape` 关闭,并沿用公共组件的键盘与焦点行为。
|
||
- 外置操作具有可见的悬停和键盘焦点状态。
|
||
- 冻结操作列中的菜单不得被表格行、滚动容器或相邻单元格遮挡。
|
||
- 危险操作需要保留公共组件的危险态表达,不与普通动作混排。
|
||
|
||
## 验收标准
|
||
|
||
- 全局主规范、章节规范、共享规范和公共组件说明不存在冲突表述。
|
||
- 公共组件默认按“查看在前、工作流动作在后、更多按需”渲染。
|
||
- 车辆资产页显示“查看、编辑、更多”,顺序和样式符合全局规范。
|
||
- 查看详情、编辑、设置运维负责人沿用原有业务行为。
|
||
- 权限受限时不显示未授权动作,也不出现空“更多”按钮。
|
||
- 操作列在桌面端不换行,菜单不被表格遮挡。
|
||
- 键盘可以聚焦并触发所有可见操作,`Escape` 可以关闭菜单。
|
||
- 相关自动化测试、类型检查和构建通过;通过浏览器检查桌面宽度及窄视口表现。
|
||
|
||
## 测试策略
|
||
|
||
- 为公共 `OperationActions` 补充或更新渲染顺序、只读状态、无更多动作和权限过滤测试。
|
||
- 为 `splitOperationActions` 覆盖详情类与历史记录类的分类差异。
|
||
- 为车辆资产列表覆盖三个动作的存在性和回调触发。
|
||
- 运行项目现有测试、类型检查和构建。
|
||
- 在本地浏览器验证操作列宽度、冻结层级、菜单遮挡、悬停与键盘焦点。
|
||
|