yida-data-manage-ui git:20261014.6f7366fA

Immutable. This exact content never changes and is served at /api/v1/blob/7685a2758044efb3.

---
name: yida-data-manage-ui
description: 宜搭数据管理页美化与操作体验提升。用于“当前数据管理页换一种风格”“列表只保留横线”“突出新增、筛选、批量操作”“数据管理页看着奇怪”，支持列级强调、突出客户名称列、状态列改成标签，也支持明确要求用自定义页面管理简单数据。保留数据、权限和业务动作，不把换风格当作重建表单。
---

# 数据管理页 UI 提升

先区分任务是原生数据管理页，还是已存在/明确要求新增的自定义管理页；没有迁移要求时保留承载方式。本技能负责这一类局部视觉任务，不转入完整应用搭建，也不把业务数据查询或字段修改误判为美化。

## 1. 确认对象和问题

从当前访问 URL、应用导航和浏览器实际页面定位 appType、formUuid、viewUuid。详情页 URL 不代表目标列表，须从记录对应表单找到真实数据管理入口。无法确定对象才询问用户。

- 通过 `get-schema` 和 `list-forms` 核对目标、字段、原生/自定义类型，读取当前主题与源码。旧/未知主题能力不能自动升级。
- 查看表头、页签、主/辅操作、筛选区、勾选状态、分页、详情浮层和窄容器；截图里的异常需在实际 DOM 核实，不依赖截图猜字段 ID。
- 记录业务契约：数据源、字段映射、查询/筛选/排序/分页、动作和 URL、权限、提交逻辑。**美化不新增模拟记录、不重建表单、不改权限，也不更换详情打开方式。**
- 原生虚拟表格的行高、top、transform、滚动高度归组件计算。不能只用 CSS 增加单元格 padding/height，造成文本和操作列错行。

## 2. 从用户目标推导变化

读取 [意图与样式选择](references/style-decisions.md)。默认维持应用主题，变化要落实到结构，不只换主色。

| 用户表达 | 执行方向 |
| --- | --- |
| 换一种风格、差异大一点 | 对比当前页，至少改变两个维度：线条、容器、页签、操作栏、表头、视觉层级；保留字段和操作 |
| 只要横线、无边框 | 只改表格边界；同步复选框表头、固定列、悬浮/选中状态，避免短双线 |
| 重在操作、突出新增/筛选/批量处理 | `--focus actions`，提高已有主操作对比度，明确左右工具分组，强化可执行行入口；危险操作仍独立使用危险色，不添加不存在的操作 |
| 突出某列、列级强调、状态列改成标签 | `--emphasize-field` 强化表头、浅底色与字重，默认无侧边竖线；`--tag-field` 将下拉字段统一标签化，详见 [列级强调](references/column-emphasis.md) |
| 颜色实验 | 按钮正常/悬浮/禁用、勾选、链接、分页、表头文字成对变化，不能只改背景 |
| 页面切换时整个应用跟着变 | 明确应用壳联动范围后使用 `--follow-shell`；由一份应用 CSS 随原生导航选中态生效，不能由页面 JS 改 body/父级 |
| 用自定义页做简单数据管理 | 读取 [自定义管理布局](references/custom-layouts.md)，复用真实数据源、权限与动作；不默认将原生页迁移 |

用一句话说明观察到的问题和具体调整。已有明确风格/参考/当前方案授权时直接落实，不重复发起风格选择；若缺少决定性偏好或涉及扩展到应用壳、迁移承载、改变业务，先澄清相应范围。用户明确要求预览时展示带“示意/实际”标记的方案；不得把示意当已发布结果。

## 3. 备份、生成和发布

先读 [备份和恢复](../yida-design/sub_skill/ui-improve/references/backup-and-restore.md)。应用 CSS 是全局资源，但新规则默认只作用于指定原生数据管理页。不能上传只有局部规则的文件，覆盖已有全应用样式。

```bash
openyida data-manage-style list --json
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` 的明确授权规则。

```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. 实际页面验收

逐项记录实际检查，不能把 CLI 成功当视觉验收：

- 表头内部标签、排序图标和复选框在深/浅背景可读；暗色表头不能继承浅色正文 token。字段表头之外还须覆盖横滚承载层和右侧操作占位表头，背景与底线完整连续；占位层没有字段标记，不能只检查 header-cell 或依赖哈希 class。固定操作列外层跨越表头，应保持透明，避免正文底色遮挡表头。
- 页签不出现空的全宽大外框；工具区不堆叠卡片/胶囊；主按钮突出但不挤占工具和业务字段。
- 固定列、选择列与正文行保持对齐；横滚后最后一列和操作仍可达，分页不遮挡。
- 搜索、筛选、显示列、排序、勾选、分页以及原有详情/新增入口保留。测试打开即可，不提交业务数据或执行删除。
- 宽屏与窄容器检查工具换行及横滚；原生虚拟表格不强制改为普通流。未实测尺寸明确标记待验证。
- 若启用 `--follow-shell`，通过同一标签页导航切换验证主题随页生效且离开后恢复；默认单页修改检查邻页无变化。
- 核对发布 CSS/Schema 和业务契约，保存真实截图与恢复证据，简短返回访问入口和已完成变化。用户不满意且明确要求恢复时执行恢复，不继续叠加新风格。