--- name: yida-data-manage-ui description: 宜搭数据管理页美化方法：从用户目标推导线条、容器、页签、操作层级、表头、配色、列强调和布局变化，定位实际 token 与局部 CSS，自由组合而非套固定风格。用于当前数据管理页换风格、突出操作或关键列、修复视觉异常，以及已授权的自定义管理页；保留数据、权限和业务动作。 --- # 数据管理页 UI 提升 本技能沉淀的是**怎么改**，不是风格清单。先理解用户希望更容易看到什么、完成什么，再选择需要改变的视觉维度。可以产生未被命名、未收录的新样式；不要求先选 style ID，不要求运行配方生成器。已有明确风格、参考或方案授权时直接沿用，不重复选型；只有用户要求预览时展示方案，并区分示意与实际结果。 字段显隐、字段顺序、列宽、冻结列、默认筛选及多视图配置使用 `yida-form-view` 的原生配置命令；不要用 CSS 隐藏字段、改虚拟表格几何或重建列表来实现。 ## 1. 定位当前页面与约束 从访问 URL、应用导航和浏览器定位 appType、formUuid、viewUuid。详情页 URL 不等于列表入口。用 `get-schema`、`list-forms` 和实际 DOM 核对原生/自定义类型、真实字段 ID、主题和源码；不能只看截图猜选择器。没有迁移要求时保留承载方式。 记录数据源、字段映射、查询/筛选/排序/分页、动作及目标 URL、权限、提交和详情打开方式。美化不重建表单、不造模拟数据、不改变这些业务行为。旧/未知主题不能自动升级。 查看普通、悬浮、选中、禁用、加载和空状态，以及窄容器、横向滚动、固定列与浮层。先指出具体问题：例如“新增与导出权重相同”“深色表头文字继承正文色”“操作列表头没有跟随背景”，而不是直接指定某套皮肤。 ## 2. 推导可组合的调整方向 读 [调整维度与取舍](references/style-decisions.md)，按当前问题选择一项或多项组合。用户只改一处时不扩大范围；要求差异明显时，从页签、操作层级、边界、表头、容器关系等多个维度设计变化，不只换颜色。 - 操作优先：突出实际主操作、分组次操作、保留批量状态及危险操作语义。 - 阅读/对照优先：调整线条、隔行区分、文字层级、数字对齐；虚拟行高仍由组件计算。 - 关键列优先：按真实字段定向修改表头、底色、字重或标签，见 [列级强调](references/column-emphasis.md)。默认无侧边竖线，不伪造可点击性。 - 颜色变化：按钮、链接、勾选、分页和各交互状态成套考虑，沿用应用视觉语言。 - 应用壳随页面变化：仅在用户要求时扩展 CSS 作用范围，验证离开页面后恢复。 - 自定义管理页：仅在已有自定义承载或用户授权时设计，见 [布局方法](references/custom-layouts.md)；布局、配色与数据任务分别决定，不绑定固定风格。 ## 3. 找到真正生效的 token / CSS 读 [token、选择器与局部改写](references/token-and-css.md)。CLI 可离线查询同类实施线索，无须风格编号： ```bash 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 --output-dir /before --json ``` 基于快照中的完整主题 CSS 创建新 candidate 文件，保留无关字节；将本轮局部规则放在可识别的 app/form 注释区块中，后续只维护该区块。沿用已有受管块时，先看生成标记及原参数，避免被下一次配方生成覆盖。只改一列时不重建整页样式。没有原主题文件时按主题技能核对当前设置和恢复边界，不用局部补丁覆盖整个应用主题。 发布前比较最新线上配置和备份，审查选择器范围、级联、主题模式和图标等非目标设置。只有已授权 UI 差异可发布： ```bash openyida update-app --theme-file /candidate.css openyida app-theme snapshot --output-dir /after --json openyida app-theme restore --snapshot /before/snapshot.json --expected-current /after/snapshot.json --check --json ``` `--check` 只检查恢复，不执行恢复。发布结果不明先回读，不盲目重试。自定义页按其 Canvas/JSX 流程维护源码、编译及发布，页面源码与 Schema 单独备份；应用主题快照不能替代页面备份。 ## 5. 验证变化而非配方名 - 表头文字、排序图标、复选框、横滚空白区和固定操作列顶部连续且可读；固定列外壳不能遮住表头。 - 页签无多余全宽空框；操作区有明确主次，不重复堆叠卡片、胶囊和投影。 - 行与操作对齐，横滚、列显隐、分页、勾选和筛选有效。正常、hover、选中与区域选中可区分，禁用语义保留。 - 原有新增/详情等入口可打开；验证不提交业务数据、不执行删除。 - 宽屏与窄容器检查换行、裁切及滚动；默认单页修改检查邻页无变化。联动应用壳时同标签切页并返回，检查恢复。 - 保存发布回读、实际截图及恢复证据；说明未实测尺寸或状态，不能把生成成功当视觉验收。用户明确要求恢复时执行恢复，不继续叠加风格。