129 lines
7.9 KiB
Markdown
129 lines
7.9 KiB
Markdown
# OneOS V2 复杂台账列个性化设计说明
|
||
|
||
日期：2026-07-26
|
||
状态：已完成产品需求与设计方案确认
|
||
|
||
## 1. 背景与目标
|
||
|
||
车辆资产页已经具备表格列宽调整、显示列选择和显示顺序调整能力，但 OneOS V2 设计规范尚未覆盖这些交互。本次将三项能力上升为所有复杂台账页面的通用规则，并以车辆资产页作为标准示例。
|
||
|
||
目标用户包括使用 OneOS V2 复杂台账的 PC/Web 用户，以及按规范设计、开发和验收台账页面的团队。用户的核心任务是根据当前工作内容调整列宽、选择显示列、排列列顺序，并在需要时恢复默认配置。
|
||
|
||
## 2. 范围
|
||
|
||
### 2.1 包含
|
||
|
||
- PC/Web 复杂台账表格的列宽拖拽调整。
|
||
- 可选业务列的显示与隐藏。
|
||
- 可选业务列的显示顺序调整。
|
||
- 单列宽度恢复和完整配置恢复默认。
|
||
- 按“用户 + 台账页面”保存和恢复配置。
|
||
- 鼠标、键盘和读屏操作规则。
|
||
- 配置加载、保存失败及表格字段变更时的兼容处理。
|
||
- 浅色和暗色主题下的状态表现。
|
||
|
||
### 2.2 不包含
|
||
|
||
- 不新增或改变车辆资产页的业务字段。
|
||
- 不改变复杂台账的筛选、分页、导入、导出或行内操作逻辑。
|
||
- H5 单列卡片列表不提供列宽、列显隐和列排序操作。
|
||
- 不跨台账复用列配置，也不在不同账号之间共享配置。
|
||
|
||
## 3. 规范组织
|
||
|
||
采用“分章主规则 + 总览摘要 + 交叉引用”的组织方式：
|
||
|
||
- `src/resources/design-system/DESIGN.md`：增加强制原则摘要，声明复杂台账必须提供列宽、列显隐、列排序和恢复默认能力。
|
||
- `src/resources/design-system/chapters/03-components.md`：承载完整组件与交互规则。
|
||
- `src/resources/design-system/chapters/06-accessibility.md`：承载焦点、键盘替代、读屏播报规则。
|
||
- `src/resources/design-system/chapters/02-layout.md`：说明 PC/Web 表格适用范围、H5 卡片排除规则及表格横向滚动关系。
|
||
- 车辆资产页作为标准实现示例被引用，本次不修改其业务功能。
|
||
|
||
## 4. 信息架构与组件关系
|
||
|
||
列个性化由两类入口组成：
|
||
|
||
1. 表头分隔线上的列宽调节把手，负责单列宽度调整和单列宽度恢复。
|
||
2. 台账工具栏中的“列设置”按钮，打开设置弹层，集中处理列显隐、列顺序和完整恢复默认。
|
||
|
||
列设置弹层包含标题、恢复默认入口、列项目列表、取消和确认操作。每个可选业务列包含显隐复选框、拖拽把手及键盘上移/下移操作；固定列显示固定标识和限制说明。
|
||
|
||
## 5. 列宽调整
|
||
|
||
- 表头分隔线提供约 `12px` 的可操作命中区。默认仅显示细分隔线，悬停、聚焦或拖动时用主题主色增强。
|
||
- 拖动过程实时预览列宽，鼠标释放时结束调整并触发保存。
|
||
- 普通业务列宽度限制为 `90–480px`。
|
||
- 首个核心识别列建议限制为 `120–360px`；具体默认宽度由字段内容决定。
|
||
- 达到最小或最大边界后停止变化，不允许列宽无限缩小或撑宽。
|
||
- 双击调节把手只恢复当前列的默认宽度。
|
||
- 末尾操作列不提供调节把手，宽度由设计者依据操作组件规范固定。
|
||
- 表格容器仍遵守局部横向滚动规则，列宽个性化不得造成整页横向滚动。
|
||
|
||
## 6. 列显隐与列顺序
|
||
|
||
- “列设置”位于复杂台账工具栏，使用图标按钮并提供文字提示和无障碍名称。
|
||
- 设置弹层内，复选框控制列显隐，拖拽把手控制列顺序。
|
||
- 设置弹层中的修改先保存在临时状态；点击“确认”后一次应用并保存，点击“取消”不改变当前列表。
|
||
- “全选/全不选”只影响可选业务列，不影响固定列。
|
||
- 首个核心识别列必须显示、不可换序，但允许在规定范围内调宽。
|
||
- 末尾操作列必须显示、不可换序、不可调宽。
|
||
- 其他业务列可以显示或隐藏、调整顺序和调整列宽。
|
||
- 可选业务列只能在两端固定列之间排序，不能越过固定列。
|
||
|
||
## 7. 恢复默认
|
||
|
||
- 双击表头调节把手恢复当前列的默认宽度。
|
||
- 列设置弹层中的“恢复默认”同时恢复列宽、显隐和顺序。
|
||
- 完整恢复不使用危险确认弹窗。用户触发后先在弹层中预览默认布局，点击“确认”后应用并保存；点击“取消”保留原配置。
|
||
|
||
## 8. 保存、加载与兼容
|
||
|
||
- 保存范围为“用户 + 台账页面”，建议存储键包含 `userId + ledgerId + schemaVersion`。
|
||
- 配置至少包含 `columnWidths`、`visibleColumns` 和 `columnOrder`。
|
||
- 列宽在拖动结束后保存；列显隐和列顺序在弹层确认后保存。
|
||
- 保存过程不得阻塞台账浏览和操作。
|
||
- 再次进入同一台账时自动恢复该用户的配置。
|
||
- 初始化时先建立规范默认配置，再合并已保存配置，降低加载期间的布局跳动。
|
||
- 新增字段按设计者定义的默认显隐状态和默认位置插入。
|
||
- 已删除字段自动忽略，不能导致整份用户配置失效。
|
||
- 配置损坏、版本不兼容或加载失败时回退默认配置并轻提示，不阻塞台账数据加载。
|
||
- 保存失败时保留当前会话内的配置，并提示“当前设置暂未同步，下次进入可能恢复默认”。
|
||
- H5 卡片列表忽略 PC 列配置，但不得删除已经保存的 PC 配置。
|
||
|
||
## 9. 无障碍与键盘
|
||
|
||
- “列设置”按钮提供明确的 `aria-label`、展开状态和弹层关联。
|
||
- 打开弹层后焦点进入弹层，关闭后回到触发按钮；按 `Esc` 可关闭。
|
||
- 列宽调节把手可聚焦。方向键每次调整 `8px`，`Shift + 方向键` 每次调整 `24px`，`Home` 恢复当前列默认宽度。
|
||
- 读屏实时播报列名和当前宽度。
|
||
- 列排序除拖拽外，必须提供“上移/下移”按钮；到达边界或属于固定列时禁用并说明原因。
|
||
- 显隐复选框必须与列名关联。固定列控件禁用，并以文字说明不可隐藏。
|
||
- 拖动、排序、恢复默认、保存成功和保存失败均通过 `aria-live="polite"` 播报，不能只依赖颜色传达状态。
|
||
- 所有可聚焦控件使用主题 Focus Token；视觉分隔线可以为 `2–3px`，但操作命中区不得随之缩小。
|
||
|
||
## 10. 视觉与主题
|
||
|
||
- 列宽把手、焦点、选中和拖拽目标状态全部消费 OneOS V2 主题 Token，不使用硬编码品牌色。
|
||
- 浅色和暗色主题均需保持表头分隔线、焦点和拖拽状态的可辨识度。
|
||
- 固定列通过文字或图标加文字说明，不只使用灰色或禁用色表达限制。
|
||
- 列设置弹层沿用 OneOS V2 Web 浮层、复选框、按钮和间距规范，不新增独立视觉体系。
|
||
|
||
## 11. 验收标准
|
||
|
||
- 鼠标可在边界内实时调整所有允许调宽的列。
|
||
- 键盘可完成等价调宽，并能恢复单列默认宽度。
|
||
- 用户可显示或隐藏所有可选业务列。
|
||
- 用户可通过拖拽以及上移/下移按钮调整所有可选业务列顺序。
|
||
- 两类固定列始终遵守显示、换序和调宽限制。
|
||
- 取消设置不改变当前列表；确认后一次应用并保存。
|
||
- 双击把手只恢复当前列；“恢复默认”恢复列宽、显隐和顺序。
|
||
- 同一用户重新进入同一台账时恢复配置，不同用户或不同台账之间互不影响。
|
||
- 新增或删除字段后，历史配置仍可正常合并和使用。
|
||
- 配置加载或保存失败时台账仍可操作，并给出符合规范的轻提示。
|
||
- H5 卡片列表不出现任何列控制入口，且不会清除 PC 配置。
|
||
- 浅色、暗色主题以及键盘焦点、读屏播报均通过验收。
|
||
|
||
## 12. 标准示例
|
||
|
||
`src/prototypes/vehicle-management/components/ListView.tsx` 中的车辆资产台账作为交互参考，已经展示表头调宽把手、双击恢复、列设置入口、列显隐和列拖拽排序。规范落地时以本文确认的通用边界为准，尤其需要补足持久化、键盘替代、最大宽度和保存失败处理等通用要求。
|