yida-data-manage-ui · diff
git:20261014.6f7366f to git:20261014.83674cf
41 added, 41 removed. Audit A to A.
---
name: yida-data-manage-ui
- description: 宜搭数据管理页美化与操作体验提升。用于“当前数据管理页换一种风格”“列表只保留横线”“突出新增、筛选、批量操作”“数据管理页看着奇怪”，支持列级强调、突出客户名称列、状态列改成标签，也支持明确要求用自定义页面管理简单数据。保留数据、权限和业务动作，不把换风格当作重建表单。
+ description: 宜搭数据管理页美化方法：从用户目标推导线条、容器、页签、操作层级、表头、配色、列强调和布局变化，定位实际 token 与局部 CSS，自由组合而非套固定风格。用于当前数据管理页换风格、突出操作或关键列、修复视觉异常，以及已授权的自定义管理页；保留数据、权限和业务动作。
---
# 数据管理页 UI 提升
- 先区分任务是原生数据管理页，还是已存在/明确要求新增的自定义管理页；没有迁移要求时保留承载方式。本技能负责这一类局部视觉任务，不转入完整应用搭建，也不把业务数据查询或字段修改误判为美化。
+ 本技能沉淀的是**怎么改**，不是风格清单。先理解用户希望更容易看到什么、完成什么，再选择需要改变的视觉维度。可以产生未被命名、未收录的新样式；不要求先选 style ID，不要求运行配方生成器。已有明确风格、参考或方案授权时直接沿用，不重复选型；只有用户要求预览时展示方案，并区分示意与实际结果。
- ## 1. 确认对象和问题
+ ## 1. 定位当前页面与约束
- 从当前访问 URL、应用导航和浏览器实际页面定位 appType、formUuid、viewUuid。详情页 URL 不代表目标列表，须从记录对应表单找到真实数据管理入口。无法确定对象才询问用户。
+ 从访问 URL、应用导航和浏览器定位 appType、formUuid、viewUuid。详情页 URL 不等于列表入口。用 `get-schema`、`list-forms` 和实际 DOM 核对原生/自定义类型、真实字段 ID、主题和源码；不能只看截图猜选择器。没有迁移要求时保留承载方式。
- - 通过 `get-schema` 和 `list-forms` 核对目标、字段、原生/自定义类型，读取当前主题与源码。旧/未知主题能力不能自动升级。
- - 查看表头、页签、主/辅操作、筛选区、勾选状态、分页、详情浮层和窄容器；截图里的异常需在实际 DOM 核实，不依赖截图猜字段 ID。
- - 记录业务契约：数据源、字段映射、查询/筛选/排序/分页、动作和 URL、权限、提交逻辑。**美化不新增模拟记录、不重建表单、不改权限，也不更换详情打开方式。**
- - 原生虚拟表格的行高、top、transform、滚动高度归组件计算。不能只用 CSS 增加单元格 padding/height，造成文本和操作列错行。
+ 记录数据源、字段映射、查询/筛选/排序/分页、动作及目标 URL、权限、提交和详情打开方式。美化不重建表单、不造模拟数据、不改变这些业务行为。旧/未知主题不能自动升级。
- ## 2. 从用户目标推导变化
+ 查看普通、悬浮、选中、禁用、加载和空状态，以及窄容器、横向滚动、固定列与浮层。先指出具体问题：例如“新增与导出权重相同”“深色表头文字继承正文色”“操作列表头没有跟随背景”，而不是直接指定某套皮肤。
- 读取 [意图与样式选择](references/style-decisions.md)。默认维持应用主题，变化要落实到结构，不只换主色。
+ ## 2. 推导可组合的调整方向
- | 用户表达 | 执行方向 |
- | --- | --- |
- | 换一种风格、差异大一点 | 对比当前页，至少改变两个维度：线条、容器、页签、操作栏、表头、视觉层级；保留字段和操作 |
- | 只要横线、无边框 | 只改表格边界；同步复选框表头、固定列、悬浮/选中状态，避免短双线 |
- | 重在操作、突出新增/筛选/批量处理 | `--focus actions`，提高已有主操作对比度，明确左右工具分组，强化可执行行入口；危险操作仍独立使用危险色，不添加不存在的操作 |
- | 突出某列、列级强调、状态列改成标签 | `--emphasize-field` 强化表头、浅底色与字重，默认无侧边竖线；`--tag-field` 将下拉字段统一标签化，详见 [列级强调](references/column-emphasis.md) |
- | 颜色实验 | 按钮正常/悬浮/禁用、勾选、链接、分页、表头文字成对变化，不能只改背景 |
- | 页面切换时整个应用跟着变 | 明确应用壳联动范围后使用 `--follow-shell`；由一份应用 CSS 随原生导航选中态生效，不能由页面 JS 改 body/父级 |
- | 用自定义页做简单数据管理 | 读取 [自定义管理布局](references/custom-layouts.md)，复用真实数据源、权限与动作；不默认将原生页迁移 |
+ 读 [调整维度与取舍](references/style-decisions.md)，按当前问题选择一项或多项组合。用户只改一处时不扩大范围；要求差异明显时，从页签、操作层级、边界、表头、容器关系等多个维度设计变化，不只换颜色。
- 用一句话说明观察到的问题和具体调整。已有明确风格/参考/当前方案授权时直接落实，不重复发起风格选择；若缺少决定性偏好或涉及扩展到应用壳、迁移承载、改变业务，先澄清相应范围。用户明确要求预览时展示带“示意/实际”标记的方案；不得把示意当已发布结果。
+ - 操作优先：突出实际主操作、分组次操作、保留批量状态及危险操作语义。
+ - 阅读/对照优先：调整线条、隔行区分、文字层级、数字对齐；虚拟行高仍由组件计算。
+ - 关键列优先：按真实字段定向修改表头、底色、字重或标签，见 [列级强调](references/column-emphasis.md)。默认无侧边竖线，不伪造可点击性。
+ - 颜色变化：按钮、链接、勾选、分页和各交互状态成套考虑，沿用应用视觉语言。
+ - 应用壳随页面变化：仅在用户要求时扩展 CSS 作用范围，验证离开页面后恢复。
+ - 自定义管理页：仅在已有自定义承载或用户授权时设计，见 [布局方法](references/custom-layouts.md)；布局、配色与数据任务分别决定，不绑定固定风格。
- ## 3. 备份、生成和发布
+ ## 3. 找到真正生效的 token / CSS
- 先读 [备份和恢复](../yida-design/sub_skill/ui-improve/references/backup-and-restore.md)。应用 CSS 是全局资源，但新规则默认只作用于指定原生数据管理页。不能上传只有局部规则的文件，覆盖已有全应用样式。
+ 读 [token、选择器与局部改写](references/token-and-css.md)。CLI 可离线查询同类实施线索，无须风格编号：
```bash
- openyida data-manage-style list --json
+ openyida data-manage-style guide --json
+ ```
+
+ 按“目标 → 生效节点/状态 → 现有 token → 最小 CSS 补充”工作。优先在目标页面作用域覆盖平台已有 token；缺少消费点时写可解释的局部 CSS。用 DevTools 的 computed style 核实来源、继承和优先级；声明变量但没有组件消费，不算完成。
+
+ 默认页级；列级调整进一步收窄到真实 fieldId。不能为了命中当前页改全局 `:root`、无范围 `.next-btn` 或所有 `div`，不能使用哈希 class。原生表格行高、top、transform、定位和滚动高度属于虚拟布局，不能靠 CSS 装饰改写。
+
+ `data-manage-style list/generate` 仅为可选的历史配方参考。只有它与目标匹配且本来就希望套用整块配方时才用；`--focus actions`、`--emphasize-field` 等也只是该生成器的快捷能力。自由设计直接在最新完整主题上编写有范围的 CSS，不必先生成最接近的配方再堆叠覆盖。已有配方内部 `--lab-native-*` 不是平台标准 token。
+
+ ## 4. 备份、最小改动与发布
+
+ 先按 [备份和恢复](../yida-design/sub_skill/ui-improve/references/backup-and-restore.md) 核实恢复能力：
+
+ ```bash
openyida app-theme snapshot <appType> --output-dir <run>/before --json
- openyida data-manage-style generate --app <appType> --form <formUuid> --style horizontal --base-css <run>/before/theme.css --output <run>/candidate.css --focus actions --json
```
- - `generate` 仅本地生成，不登录、不改 Schema、不上传。必须基于最新应用 CSS。若尚无主题 CSS，先用 `yida-design` 生成完整主题并核对已有配置的恢复能力，不向命令塞入占位文件。
- - `--field-id <真实字段ID>` 可重复；取自 `get-schema` 和实际 DOM，供隐藏导航的 iframe 定位。尽量覆盖所有可见业务列，避免隐藏第一列后样式丢失。无 field-id 时只支持有平台选中导航的入口；不得声称 iframe 已适配。
- - CLI 生成的是已验证 DOM 的样式配方，版本或 DOM 不一致时先现场核对，不能靠猜测私有 class 补丁。使用语义属性和稳定容器，不写哈希 class。
- - 仅当用户要求页面切换时联动导航/外壳才增加 `--follow-shell`。它依赖平台选中菜单，不适用于无导航 iframe 中的全壳联动。
- - 同页再次生成只替换该 app/form 的标记区块；其他页和原主题字节保留。输出必须是新文件。既有手写/第三方规则可能覆盖新配方，必须审查级联与页面效果；不要清除不属于本次的规则。
- - 在发布前比较本轮快照和当前配置。只允许已授权 UI 差异，保留主题模式、图标、数据和导航结构；旧/未知主题遵守 `update-app` 的明确授权规则。
+ 基于快照中的完整主题 CSS 创建新 candidate 文件，保留无关字节；将本轮局部规则放在可识别的 app/form 注释区块中，后续只维护该区块。沿用已有受管块时，先看生成标记及原参数，避免被下一次配方生成覆盖。只改一列时不重建整页样式。没有原主题文件时按主题技能核对当前设置和恢复边界，不用局部补丁覆盖整个应用主题。
+ 发布前比较最新线上配置和备份，审查选择器范围、级联、主题模式和图标等非目标设置。只有已授权 UI 差异可发布：
+
```bash
openyida update-app <appType> --theme-file <run>/candidate.css
openyida app-theme snapshot <appType> --output-dir <run>/after --json
openyida app-theme restore <appType> --snapshot <run>/before/snapshot.json --expected-current <run>/after/snapshot.json --check --json
```
- 发布失败或结果不明先回读，不能盲目重试。`--check` 不执行恢复；用户要求恢复时再按备份文档执行精确恢复。自定义页按对应 Canvas/JSX 技能维护、编译、发布，源码与 Schema 另行备份，主题快照不替代页面备份。
-
- ## 4. 实际页面验收
+ `--check` 只检查恢复，不执行恢复。发布结果不明先回读，不盲目重试。自定义页按其 Canvas/JSX 流程维护源码、编译及发布，页面源码与 Schema 单独备份；应用主题快照不能替代页面备份。
- 逐项记录实际检查，不能把 CLI 成功当视觉验收：
+ ## 5. 验证变化而非配方名
- - 表头内部标签、排序图标和复选框在深/浅背景可读；暗色表头不能继承浅色正文 token。字段表头之外还须覆盖横滚承载层和右侧操作占位表头，背景与底线完整连续；占位层没有字段标记，不能只检查 header-cell 或依赖哈希 class。固定操作列外层跨越表头，应保持透明，避免正文底色遮挡表头。
- - 页签不出现空的全宽大外框；工具区不堆叠卡片/胶囊；主按钮突出但不挤占工具和业务字段。
- - 固定列、选择列与正文行保持对齐；横滚后最后一列和操作仍可达，分页不遮挡。
- - 搜索、筛选、显示列、排序、勾选、分页以及原有详情/新增入口保留。测试打开即可，不提交业务数据或执行删除。
- - 宽屏与窄容器检查工具换行及横滚；原生虚拟表格不强制改为普通流。未实测尺寸明确标记待验证。
- - 若启用 `--follow-shell`，通过同一标签页导航切换验证主题随页生效且离开后恢复；默认单页修改检查邻页无变化。
- - 核对发布 CSS/Schema 和业务契约，保存真实截图与恢复证据，简短返回访问入口和已完成变化。用户不满意且明确要求恢复时执行恢复，不继续叠加新风格。
+ - 表头文字、排序图标、复选框、横滚空白区和固定操作列顶部连续且可读；固定列外壳不能遮住表头。
+ - 页签无多余全宽空框；操作区有明确主次，不重复堆叠卡片、胶囊和投影。
+ - 行与操作对齐，横滚、列显隐、分页、勾选和筛选有效。正常、hover、选中与区域选中可区分，禁用语义保留。
+ - 原有新增/详情等入口可打开；验证不提交业务数据、不执行删除。
+ - 宽屏与窄容器检查换行、裁切及滚动；默认单页修改检查邻页无变化。联动应用壳时同标签切页并返回，检查恢复。
+ - 保存发布回读、实际截图及恢复证据；说明未实测尺寸或状态，不能把生成成功当视觉验收。用户明确要求恢复时执行恢复，不继续叠加风格。