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


