openyida 2026.9.30 → 2026.10.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/yida-skills/skills/yida-canvas-data-binding/SKILL.md +6 -0
- package/yida-skills/skills/yida-design/SKILL.md +4 -2
- package/yida-skills/skills/yida-design/references/page-quality-gates.md +4 -0
- package/yida-skills/skills/yida-design/references/task-driven-visual-design.md +59 -0
- package/yida-skills/skills/yida-design/references/theme-selection.md +13 -1
- package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/references/visual-theme-selection.md +5 -5
- package/yida-skills/skills/yida-design/templates/design-themes/app-amber/app_theme.css +32 -32
- package/yida-skills/skills/yida-design/templates/design-themes/app-amber/design.md +40 -32
- package/yida-skills/skills/yida-design/templates/design-themes/index.json +4 -4
- package/yida-skills/skills/yida-design/workflow/output-design.md +2 -0
- package/yida-skills/skills/yida-design/workflow/step-2-theme-system.md +1 -1
- package/yida-skills/skills/yida-design/workflow/step-4-wireframe-interaction.md +2 -0
- package/yida-skills/skills/yida-design/workflow/step-5-visual-states.md +1 -0
- package/yida-skills/skills/yida-image-assets/SKILL.md +3 -1
- package/yida-skills/skills/yida-image-assets/references/manifest-contract.md +2 -0
- package/yida-skills/skills/yida-prd/SKILL.md +2 -0
package/package.json
CHANGED
|
@@ -25,6 +25,12 @@ description: 自定义页面真实数据接入技能。用于在使用 `YidaCode
|
|
|
25
25
|
- `mode=form` 读取宜搭表单数据时，默认调用 `window.__OPENYIDA_YIDA_API__.searchFormDatas(params)`，它底层来自官方 `this.utils.yida.searchFormDatas(params)`。发布层同一个桥也同步 `this.utils.yida` 的表单、流程、表单设计与运行态方法，例如 `saveFormData`、`updateFormData`、`startProcessInstance`、`getProcessInstances`、`request`、`searchUserList`。参数至少包含 `formUuid`、`currentPage`、`pageSize` 和 `searchFieldJson`，`pageSize` 一般显式写 `50`，字段 ID 必须来自真实 schema。
|
|
26
26
|
- 只有 yida JS-API 桥不存在时，才允许降级同源直连 `/dingtalk/web/<appType>/v1/form/searchFormDatas.json`。直连请求必须带 `credentials: 'include'`，并从 `window.g_config`、`window.pageConfig`、`window.__YIDA__`、meta 或同源 cookie 读取 CSRF，同时写入 `_csrf_token` query 和 `global_csrf_token` 请求头。`/query/form/searchFormDatas.json` 不是可用表单数据端点。
|
|
27
27
|
|
|
28
|
+
## 业务记录图片
|
|
29
|
+
|
|
30
|
+
页面需要展示真实对象图片时，按[任务驱动的视觉设计](../yida-design/references/task-driven-visual-design.md)绑定真实图片/附件字段。先读 Schema 与实际返回样本，确认值是地址、对象还是附件数组后再映射，不猜字段 ID 或返回结构；列表与详情使用相同记录 ID 关联图片。图片来自关联对象表时优先使用已有联查或批量查询能力，避免每行单独请求；当前接口不支持时只读取当前页所需对象并限制并发，不拉全库。
|
|
31
|
+
|
|
32
|
+
图片地址沿用平台或数据源支持的访问方式，保留访问权限，不把鉴权信息拼入公开 URL。缺失或加载失败时局部降级，不让图片失败清空已取得的业务数据、不自动换成网络同类对象图。图片字段随筛选、分页和刷新一起更新；固定页面素材继续走素材清单，二者不混用。
|
|
33
|
+
|
|
28
34
|
## dataBinding 契约
|
|
29
35
|
|
|
30
36
|
`page-spec.json` 或生成命令中优先携带 `dataBinding`。没有真实数据时只能标记为 `seed`，不能声称已经接入线上数据。
|
|
@@ -14,13 +14,15 @@ description: >
|
|
|
14
14
|
|
|
15
15
|
导航默认沿用平台样式，像连续目录一样排列。只调整需要改变的颜色、尺寸和状态；边框、阴影可不设置，不要把每个菜单项做成输入框、按钮或卡片。改完后打开实际的数据管理页和业务页面检查，见 [导航形状与密度的案例经验](references/application-theme-consistency.md#导航形状与密度的案例经验)。
|
|
16
16
|
|
|
17
|
+
所有页面按[任务驱动的视觉设计](references/task-driven-visual-design.md)从主要任务和信息关系推导表达、构图与视觉重点，主动判断图片的识别、解释和氛围价值，再确定密度与降级。
|
|
18
|
+
|
|
17
19
|
固定主题只写一套 token。CLI 让全局与平台 light、dark、white、gray 选择器共用同一个声明块，不为 is-light/is-dark 另配颜色。`navTheme` 按设计保存为应用配置，不能按主题名称猜测。
|
|
18
20
|
|
|
19
21
|
配色要按“文字＋所在背景”成对设计。正文、说明、表单标签、详情和搜索必须清楚；禁用色不能用于正常提示，品牌色不能直接当通用文字色。大面积画布和导航控制亮度、饱和度，强色留给局部重点。`check-design` 和带设计文件的主题生成会拦截已知低于 4.5:1 的文字组合，返回具体角色和 token；修复设计源后再生成，不自动改色。JSON 中 `paletteContrast.unresolved` 非空表示尚未确认，复杂颜色、图片与渐变仍需浏览器检查。
|
|
20
22
|
|
|
21
23
|
**品牌变量必须完整，导航装饰可以省略。** `design.md` 提供 PC 品牌色阶 `--color-brand1-1/2/3/5/6/9/10`，CLI 同时生成移动端 `--color-brand-1`、`--color-brand-2`、`--color-brand-3`、`--color-brand-4`。最终 CSS 必须在全局 `:root` 中提供这 11 个可用颜色；移动端映射不必在 design.md 重复填写。生成和上传都会检查缺失、无效颜色及循环引用。报错时修复设计后重新生成，不能只替换主色后上传模板。
|
|
22
24
|
|
|
23
|
-
确定风格前，按[设计方向比较](references/theme-selection.md#设计方向比较)
|
|
25
|
+
确定风格前，按[设计方向比较](references/theme-selection.md#设计方向比较)以第一直觉为参照，发展两个在构图和信息表达上有实质差异的方向，按任务适配性选择，在当前规划轮次内选定。已有明确视觉要求时，在其范围内完善设计。
|
|
24
26
|
|
|
25
27
|
向用户说明设计时，写风格和适用场景：“设计主题风格为轻盈媒体栅格，适合产品展示型品牌官网。”风格名称与场景按当前项目填写；建议阶段使用“建议采用……风格”。
|
|
26
28
|
|
|
@@ -75,7 +77,7 @@ Fast、Plan 和单页设计使用相同的 UI 设计规则、主题变量和质
|
|
|
75
77
|
4. **同应用页面入口归导航**：同应用页面优先放入平台导航或导航分组；自定义页内容区放当前页动作、原生表单新建/查看、外部链接和跨应用资源。
|
|
76
78
|
5. **表单入口响应式**：新增/提交页 URL 默认使用页面级隐藏导航的 `submission/{formUuid}?isRenderNav=false`；详情页 URL 默认使用 `formDetail/{formUuid}?formInstId={formInstId}&navConfig.layout=1180&isRenderNav=false`，且 `formInstId` 必须来自真实数据记录并优先取 `row.formInstId`；PC 端默认在侧边抽屉中用 iframe 承载宜搭原生表单，抽屉默认半屏 `50vw`，提交页和详情页使用同一宽度规则；移动端整页或新页打开。
|
|
77
79
|
6. **主题文件**：主题目录统一包含设计、CSS、表单布局三个文件，导出和生成参数见 [命令与参数](references/application-style-library.md#命令与参数)。Plan 使用 CLI 返回的 `outputs.theme`；Fast 和已有主题调整按 [主题文件生成与更新](workflow/output-design.md#cli-token-契约fast--plan-共用) 执行。按 [共用主题规则](references/application-theme-consistency.md) 将已选风格落实为 token，并核对生成的 CSS。修改变量要回到设计源后重新生成、上传；仅 CLI 未覆盖且已核实选择器的样式覆盖可在 CSS 末尾小范围追加，不另写脚本生成或重写主题文件。
|
|
78
|
-
7. **默认主题先做业务判断**：工作台、门户、列表、详情、普通看板和数据大屏默认都是浅底 / light 模式，但主色不固定为 `podBlue` 或 #1677ff
|
|
80
|
+
7. **默认主题先做业务判断**：工作台、门户、列表、详情、普通看板和数据大屏默认都是浅底 / light 模式，但主色不固定为 `podBlue` 或 #1677ff；先按主要任务、使用频率和信息密度判断适配性，再结合品牌证据和视觉目标做色彩判断；行业名词不能直接决定配色或材质，主题色可以是任意合法 CSS 颜色。只有用户明确说暗色/深色/夜间/高对比时才用深色沉浸。
|
|
79
81
|
8. **页面布局要到可实现粒度**：每个页面至少写清顶部/左侧/主体/右侧/底部区域、核心组件、信息密度、主操作位置、PC/移动端差异和空/载/错态。
|
|
80
82
|
9. **页面丰富度建议**：工作台沿用 PRD 已确定的内容和业务关系。综合工作台参考 8-10 个有独立业务价值的区块，不作为硬门槛；按任务覆盖和信息增量衡量丰富度，不用重复记录、入口或装饰凑数。区块依据信息关系采用不同且合适的表现形式，不要求每块换一种组件。
|
|
81
83
|
10. **工作台禁低密大卡片套路**：工作台 / 业务首页不能用“标题 + 4 个等宽大 KPI 白卡 + 图标快捷卡 + 大空态白卡”撑首屏。按已确定的业务内容和信息关系安排主视图、分析区、操作区及快捷入口，不指定统一列表组合或固定双栏。空态保留该视图所需的上下文与可执行下一步，不铺大块空白卡片。
|
|
@@ -89,6 +89,10 @@
|
|
|
89
89
|
- 卡片、列表、图表和右侧上下文的容器形态要有差异，不能全部是同一种白卡片。
|
|
90
90
|
- 已确定玻璃材质时保持半透明关系；其他主题中的渐变可以搭配主题指定的实色表面。
|
|
91
91
|
|
|
92
|
+
## 业务图片与场景门禁
|
|
93
|
+
|
|
94
|
+
所有页面按[任务驱动的视觉设计](task-driven-visual-design.md)检查：图片是否帮助识别实际对象，记录与图片是否匹配，有图/缺图/加载失败时主操作是否完整，图片是否挤占关键数字。固定素材和动态记录图片分别走素材清单与数据绑定，不以装饰图数量判断完成度。没有图片不自动判失败，但有可用图片且能帮助识别、解释或传达氛围却全部忽略时应说明任务依据；用网络或生成图片冒充真实对象照片不通过。
|
|
95
|
+
|
|
92
96
|
## 6. 双文件输出门禁
|
|
93
97
|
|
|
94
98
|
每个完整应用设计必须输出两份文件：
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# 从任务和内容推导视觉设计
|
|
2
|
+
|
|
3
|
+
Fast、Plan 和已有页面优化共用这套推导方法。先读取真实需求、角色、内容、数据与已有视觉证据，再决定页面的表达方式。行业名和应用名不直接对应某个主题、布局或图片数量。已有页面优化保留业务功能，缺失的业务事实交回 PRD，不通过装饰补造内容。
|
|
4
|
+
|
|
5
|
+
## 1. 先确定用户在本页要完成什么
|
|
6
|
+
|
|
7
|
+
每页先明确：用户首先需要认出什么、判断什么、完成哪个动作，以及完成动作前必须看见哪些信息。多任务页面确定一个主任务，其余作为上下文或次要入口。用一句具体描述写入现有的页面任务与首屏焦点，不另建问卷或配置字段。
|
|
8
|
+
|
|
9
|
+
例如，同一个对象可以有不同页面：选择对象时重视识别和比较，处理记录时重视状态与动作，查看详情时重视证据与上下文。不能因为它们属于同一个应用，就都生成相同的表格、卡片或大标题。
|
|
10
|
+
|
|
11
|
+
## 2. 按信息关系选择表达
|
|
12
|
+
|
|
13
|
+
以下是推导依据，可以在同一页面组合，不是互斥页面类型，也不是固定布局模板。
|
|
14
|
+
|
|
15
|
+
| 用户需要理解的关系 | 优先考虑的表达 | 取舍依据 |
|
|
16
|
+
| --- | --- | --- |
|
|
17
|
+
| 识别对象、区分外观 | 图片与名称/标识组合、图文列表、详情主图 | 外观是否有助识别？有无可信素材？仅靠文字已足够时可不用图片 |
|
|
18
|
+
| 对比多个对象或数值 | 对齐表格、比较列、紧凑列表 | 保留统一单位、口径和属性位置；缩略图辅助识别，不挤占比较字段 |
|
|
19
|
+
| 判断变化、分布与构成 | 趋势图、分布图、构成图及简短解释 | 必须有对应数据维度和足够数据；单个数值不强行画趋势 |
|
|
20
|
+
| 推进任务与处理异常 | 按优先级或状态组织的任务列表、动作区、必要时状态分栏 | 当前状态、责任与下一步清楚；状态数量和操作频率决定布局 |
|
|
21
|
+
| 理解过程、关系与证据 | 时间线、主从详情、关联信息、文档或图片预览 | 按因果、时间或对象关系组织，不拆成互不相关的装饰卡 |
|
|
22
|
+
| 感受品牌、理解故事或场景 | 大图与文字构图、章节节奏、案例展示 | 图片能承载含义、氛围或信任；首屏仍要清楚传达目的和下一步 |
|
|
23
|
+
|
|
24
|
+
先写内容之间的关系，再选容器。相同属性的记录保持对齐，紧密关联的信息共享容器，不相关层次用间距、细线或表面变化区分。内容少时收敛宽度与高度，内容多时通过主次、筛选与渐进展开控制密度。
|
|
25
|
+
|
|
26
|
+
## 3. 主动判断图片的价值
|
|
27
|
+
|
|
28
|
+
不能把“业务页”理解成只能有表格，也不能把“好看”理解成必须有大图。对现有内容主动判断三种价值：图片是否帮助识别对象、提供证据或解释、传达需要的品牌与场景感。存在价值且有可靠来源时，将图片融入内容构图；没有价值时，用文字节奏、图表、对齐与层次完成设计。
|
|
29
|
+
|
|
30
|
+
图片的尺寸由信息职责决定：辅助识别用缩略图，外观比较给足辨识面积，证据支持按需放大，叙事或品牌内容可以成为主视觉。不要把全部图片缩成小图标，也不要把辅助图片放大成横幅。移除图片后若用户判断完全不受影响，且它也不承担明确的氛围目标，应重新考虑它是否值得占据首屏。
|
|
31
|
+
|
|
32
|
+
### 真实记录图片与固定素材
|
|
33
|
+
|
|
34
|
+
- 真实对象的照片、附件或证据走数据绑定，核对对象 ID 与图片关系；不能用相似搜索图或生成图冒充实际对象。缺少字段时记录缺口，业务模型变动由 PRD 按授权范围处理。
|
|
35
|
+
- 动态记录图片不逐行创建静态 slot，不在源码中硬编码一组照片。仅有动态图片时 `assetStrategy.pages[].imageNeed=none`、`slots=[]` 表示没有固定素材采集任务；数据来源和图片表现仍写入数据绑定与设计正文。
|
|
36
|
+
- 固定页面素材走现有 `assetStrategy` 与 `yida-image-assets`，说明用途、来源、尺寸、裁切与缺图降级。示意图明确标注；允许无图降级用 beneficial，确实不可缺少才用 required。
|
|
37
|
+
- 图片容器预留比例；需要完整轮廓时用 contain，场景构图可用 cover 并核对焦点。缩略图与详情图按当前显示尺寸选择，非首屏按需加载。
|
|
38
|
+
- 缺图或失败时保留对象名称及关键属性，局部降级并收敛空区域。图片 alt、放大预览、键盘操作和移动端阅读顺序随内容设计；图片加载不阻塞主任务。
|
|
39
|
+
|
|
40
|
+
## 4. 将内容组织成有重点的画面
|
|
41
|
+
|
|
42
|
+
选定主题后，在同一套视觉语言内为每页安排明确的主次，不把换色作为设计完成。
|
|
43
|
+
|
|
44
|
+
1. **首屏焦点**：用户第一眼看哪里、第二眼看哪里、在哪里行动。焦点可以是对象、关键变化、待处理事项、标题或主视觉，依任务决定；避免所有卡片、按钮和标题一样重。
|
|
45
|
+
2. **构图比例**：按内容长短和关系确定主次区、列宽和信息顺序，视觉重心与主要任务一致。不要先铺等宽卡片再填内容。
|
|
46
|
+
3. **表面层次**：画布、导航、主内容、浮层的明度与色温协调，用必要的色差、边界或留白区分；避免大面积同色发闷，也避免无依据的冷暖割裂。
|
|
47
|
+
4. **色彩面积**：区分环境底色、正文、强调与状态。品牌色的面积由用户视觉目标和内容决定，不能同时把导航、文字、卡片和主操作都染成强色。
|
|
48
|
+
5. **排版节奏**：标题、核心数值、正文、元信息有可辨层级；同类信息对齐，组内紧凑、组间清楚。密度随阅读、比较或操作任务变化。
|
|
49
|
+
6. **视觉特征**：从已有内容发展一处有意义的特色，例如对象图文组合、关键变化对比或连贯的章节排版。特色服务当前任务，不靠增加业务模块、随机装饰或重复大卡片制造丰富感。
|
|
50
|
+
|
|
51
|
+
已有品牌或明确风格时在其范围内完成这些决策，不自动统一成浅色商务风。没有独立图片的页面也应通过构图和排版成立。
|
|
52
|
+
|
|
53
|
+
## 5. 交接具体决策并验证
|
|
54
|
+
|
|
55
|
+
复用逐页设计的任务、首屏焦点、布局、组件、动作、状态、响应式和验收八项要点。写清“选用什么表达、为什么适合、在当前内容上怎样实现”，避免只有“高级、简洁、丰富、统一主题”等形容词。动态图片归数据绑定，固定素材归清单，颜色与表面归同一份主题 Token，不重复造配置。
|
|
56
|
+
|
|
57
|
+
设计完成后先自查三件事：用户能否一眼理解本页目的；最重要的信息与动作是否突出；图片和装饰是否值得占据当前位置。不能通过时回改具体布局或表现，不只换主题名称。
|
|
58
|
+
|
|
59
|
+
实现后检查真实截图：首屏视觉重心、信息对齐、素材与对象对应、颜色面积、文字可读性，以及有图/缺图、空数据、长内容和窄屏状态。同时验证筛选、批量处理和详情入口等原有操作。原生页使用已支持的字段与配置，不通过全局 CSS 强造结构。只有文档规则或本地示意时，明确真实生成效果仍待验收。
|
|
@@ -15,6 +15,18 @@ Fast、Plan 和单页设计共用 [主题索引](../templates/design-themes/inde
|
|
|
15
15
|
|
|
16
16
|
将“简洁、专业”等描述落实为导航、应用框架、表单、记录详情和自定义页面的表面层次、边界强度、形状分工、文字节奏、色彩强调和组件状态。行业、颜色、主题名称或“有图表/表格/右栏”等公共组件不能单独决定主题。索引摘要用“深色/浅色导航”和“深色/浅色内容界面”自然描述明暗关系；默认选择浅色内容主题，已明确暗色、夜间或同等视觉要求时选择对应暗色内容主题。导航明暗采用最终主题模板的 `navTheme`，用户明确的导航明暗作为主题筛选约束，不在主题选定后独立猜测或覆盖。
|
|
17
17
|
|
|
18
|
+
## 高频管理场景的适配判断
|
|
19
|
+
|
|
20
|
+
先判断用户每天做什么，再判断行业气质。高频查阅、比较与处理任务，首先比较数字扫描、筛选与批量操作、状态辨认以及原生表格和表单的连续使用体验。行业与对象名称不等于用户要求奶油、咖啡、复古或大面积暖黄。
|
|
21
|
+
|
|
22
|
+
没有明确品牌或整体配色要求时，优先用低饱和近白画布、清楚的内容面、中性正文和局部品牌强调建立层次；主色仍由项目决定，不固定为蓝色。命名模板的纸纹、黄底、金棕导航或大面积彩色表面必须有任务或视觉证据支持，不能因“更有表现力”自动胜出。用户明确要求这些风格时予以保留，并保证文字、状态和表格可读。
|
|
23
|
+
|
|
24
|
+
比较方向时，`recommendationReason` 说明它如何支持当前高频任务；`visualDirection.description` 说明导航、内容和主操作的层次，`colorStrategy.usage` 区分大面积背景、中性文字和局部强调。沿用现有字段，不另造评分体系。通用示例的颜色、主题排列顺序和预览色都不是默认推荐。
|
|
25
|
+
|
|
26
|
+
按[任务驱动的视觉设计](task-driven-visual-design.md)推导信息表达与图片价值。同一对象的展示、比较、处理和回顾需要不同表现，行业相同不代表页面结构或材质相同。
|
|
27
|
+
|
|
28
|
+
验收同时查看原生数据管理页、提交/详情页及自定义页；检查平台外层导航与应用侧栏是否冲突、选中项是否压过主操作、搜索与分组是否过重。表格无记录、无空态提示、字段截断和横向滚动分别检查，不能把这些结构与数据问题都归因于主题或用换色掩盖。
|
|
29
|
+
|
|
18
30
|
## 先读摘要，再读选中主题
|
|
19
31
|
|
|
20
32
|
1. 比较前只读取索引的 `themes[].styleSummary`，也可用 `openyida design-plan catalog --json` 获取同一摘要。主题名称用于识别，不代替摘要中的视觉事实；不预读候选模板全文。
|
|
@@ -31,7 +43,7 @@ Fast、Plan 和单页设计共用 [主题索引](../templates/design-themes/inde
|
|
|
31
43
|
|
|
32
44
|
Fast 与 Plan 使用下面同一套三方向生成规则和候选字段，不得分别发明候选。已有明确完整风格、可信品牌规范、参考材料或应用主题时直接在其范围内完善构图与细节，不生成无意义的替代项；否则恰好生成三套完整方向：两个命名模板方向和一个独立自由创意方向。
|
|
33
45
|
|
|
34
|
-
1.
|
|
46
|
+
1. **形成三套方向**：第一套以最直接、稳妥的业务解法为参照，另外两套围绕相同业务任务发展具有不同层次和构图的可实现方案；不因装饰更多或色彩更强就优先推荐。每套都写 `directionId`、`directionLabel`、`description`、`recommendationReason`、`themeId`、`primaryColor` 和 `primaryColorName`；导航结构沿用业务规划，命名模板的导航明暗不作为候选输入；自由创意选定后按项目设计明确填写导航明暗与配套 Token。
|
|
35
47
|
2. **保证真实差异**：每个方向在构图、字体层级、表面层次、色彩关系中至少两项有明显差异；用已有内容建立重点，保留字段、操作、权限和状态。三套方向分别绑定三个不同的合法主题，其中第三项使用 free-creative 独立推演，主题索引摘要负责说明导航和内容界面的明暗。
|
|
36
48
|
3. **按流程选择**：Fast 在内部比较三套方向并选择更适合的一套；Plan 在用户没有明确完整风格时必须展示同样三套方向并通过 `ask_human` 选择。
|
|
37
49
|
4. **把质感写成具体做法**：说明主次区域、数字与标题层级、背景与容器关系、间距与对齐、主操作与状态色的用法。高级感来自这些细节的一致性；表格、批量操作和异常识别保持清晰高效。
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
|
|
31
31
|
## 候选结构与约束
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
生成三项选择：两个具体视觉方向，加一项“自由创意：根据业务重新推演”。用户已明确风格时直接沿用，无需重选。具体方向包含。下列尖括号是待填写字段，必须按当前项目替换；示例不提供默认颜色：
|
|
34
34
|
|
|
35
35
|
```json
|
|
36
36
|
{
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"directionLabel": "关系洞察型",
|
|
39
39
|
"description": "以客户上下文和跟进节奏为视觉主线，层级柔和但关键动作清晰。",
|
|
40
40
|
"themeId": "<有效索引记录，仅内部>",
|
|
41
|
-
"primaryColor": "
|
|
42
|
-
"primaryColorName": "
|
|
41
|
+
"primaryColor": "<项目实际主色色值>",
|
|
42
|
+
"primaryColorName": "<项目实际主色名称>",
|
|
43
43
|
"contentTone": "light",
|
|
44
44
|
"recommendationReason": "适合需要持续查看关系历史和推进状态的日常工作。"
|
|
45
45
|
}
|
|
@@ -116,8 +116,8 @@
|
|
|
116
116
|
},
|
|
117
117
|
"colorStrategy": {
|
|
118
118
|
"source": "user_selected",
|
|
119
|
-
"primaryColor": "
|
|
120
|
-
"primaryColorName": "
|
|
119
|
+
"primaryColor": "<项目实际主色色值>",
|
|
120
|
+
"primaryColorName": "<项目实际主色名称>",
|
|
121
121
|
"usage": "用于主操作、关键焦点和选中状态",
|
|
122
122
|
"confidence": "high"
|
|
123
123
|
},
|
|
@@ -51,18 +51,18 @@
|
|
|
51
51
|
--color-brand-4: var(--color-brand1-9);
|
|
52
52
|
|
|
53
53
|
/* 边界、填充与文字颜色 */
|
|
54
|
-
--color-line1-1:
|
|
55
|
-
--color-line1-2:
|
|
56
|
-
--color-fill1-1:
|
|
57
|
-
--color-fill1-2:
|
|
54
|
+
--color-line1-1: #EEEBE5;
|
|
55
|
+
--color-line1-2: #E7E3DB;
|
|
56
|
+
--color-fill1-1: #F7F6F3;
|
|
57
|
+
--color-fill1-2: #F0EDE7;
|
|
58
58
|
--color-fill1-3: <生成实际色值：--color-brand1-6 8% + #CCCCCC 92%，sRGB 逐通道混合>;
|
|
59
59
|
--color-fill1-5: <生成实际色值：--color-brand1-6 2% + #FEFEFE 98%，sRGB 逐通道混合>;
|
|
60
60
|
--color-fill1-6: var(--color-text1-3);
|
|
61
61
|
--color-fill1-10: #262626;
|
|
62
62
|
--color-text1-5: #FFFFFF;
|
|
63
|
-
--color-text1-4:
|
|
63
|
+
--color-text1-4: #292823;
|
|
64
64
|
--color-text1-10: var(--color-text1-3);
|
|
65
|
-
--color-text1-3:
|
|
65
|
+
--color-text1-3: #6F6B63;
|
|
66
66
|
--color-text1-2: <生成实际色值：--color-brand1-6 4% + #868686 96%，sRGB 逐通道混合>;
|
|
67
67
|
--color-text1-1: <生成实际色值：--color-brand1-6 4% + #CCCCCC 96%，sRGB 逐通道混合>;
|
|
68
68
|
|
|
@@ -113,10 +113,10 @@
|
|
|
113
113
|
--shadow-3: 0px 10px 28px -2px rgba(0, 0, 0, 0.24);
|
|
114
114
|
|
|
115
115
|
/* 应用基础表面 */
|
|
116
|
-
--pod-app-root-bg-color: #
|
|
116
|
+
--pod-app-root-bg-color: #F6F5F2;
|
|
117
117
|
--pod-app-root-bg-image: none;
|
|
118
|
-
--pod-page-bg-color: #
|
|
119
|
-
--pod-card-bg-color: #
|
|
118
|
+
--pod-page-bg-color: #F6F5F2;
|
|
119
|
+
--pod-card-bg-color: #FFFFFF;
|
|
120
120
|
--pod-table-cell-color: var(--pod-card-bg-color);
|
|
121
121
|
--color-white: var(--pod-card-bg-color);
|
|
122
122
|
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
--pod-shell-content-container-margin: 0px;
|
|
132
132
|
--pod-shell-content-container-border: none;
|
|
133
133
|
--pod-shell-content-container-bg-color: transparent;
|
|
134
|
-
--pod-shell-theme-bg-color: #
|
|
134
|
+
--pod-shell-theme-bg-color: #FCFBF8;
|
|
135
135
|
|
|
136
136
|
/* 页面容器 */
|
|
137
137
|
--pod-page-surface-padding: 0px;
|
|
@@ -226,14 +226,14 @@
|
|
|
226
226
|
|
|
227
227
|
/* 导航：菜单、搜索与浮层 */
|
|
228
228
|
--pod-nav-search-height: var(--pod-nav-platform-row-height, 32px);
|
|
229
|
-
--pod-nav-search-border-color:
|
|
229
|
+
--pod-nav-search-border-color: #E7E3DB;
|
|
230
230
|
--pod-nav-search-menu-gap: 8px;
|
|
231
231
|
--pod-nav-menu-panel-search-padding-top: 8px;
|
|
232
232
|
--pod-nav-menu-panel-top: 12px;
|
|
233
233
|
--pod-nav-menu-panel-after-collapse-top: 40px;
|
|
234
234
|
--pod-nav-menu-item-height: 36px;
|
|
235
235
|
--pod-nav-menu-item-padding: 8px;
|
|
236
|
-
--pod-nav-menu-item-radius:
|
|
236
|
+
--pod-nav-menu-item-radius: 6px;
|
|
237
237
|
--pod-nav-menu-item-border: none;
|
|
238
238
|
--pod-nav-menu-item-hover-border: var(--pod-nav-menu-item-border);
|
|
239
239
|
--pod-nav-menu-item-selected-border: var(--pod-nav-menu-item-border);
|
|
@@ -253,19 +253,19 @@
|
|
|
253
253
|
--pod-nav-menu-fade-height: 32px;
|
|
254
254
|
--pod-nav-sub-divider-left: 16px;
|
|
255
255
|
--pod-nav-sub-indent: 24px;
|
|
256
|
-
--pod-nav-sub-divider-color: #
|
|
257
|
-
--pod-nav-menu-bg-hover-color: #
|
|
256
|
+
--pod-nav-sub-divider-color: #E7E3DB;
|
|
257
|
+
--pod-nav-menu-bg-hover-color: #F3F1EC;
|
|
258
258
|
--pod-nav-tab-line-hover-color: var(--color-brand1-6, rgba(155, 136, 121, 1));
|
|
259
259
|
--pod-nav-tab-line-selected-color: var(--color-brand1-6, rgba(155, 136, 121, 1));
|
|
260
|
-
--pod-nav-search-bg-color:
|
|
261
|
-
--pod-nav-search-bg-hover-color:
|
|
262
|
-
--pod-nav-search-bg-active-color:
|
|
263
|
-
--pod-nav-search-placeholder-color:
|
|
260
|
+
--pod-nav-search-bg-color: #FFFFFF;
|
|
261
|
+
--pod-nav-search-bg-hover-color: #FFFFFF;
|
|
262
|
+
--pod-nav-search-bg-active-color: #FFFFFF;
|
|
263
|
+
--pod-nav-search-placeholder-color: #6F6B63;
|
|
264
264
|
--pod-nav-search-text-color: var(--pod-nav-item-text-hover-color, var(--color-text1-4, #202020));
|
|
265
265
|
--pod-nav-search-icon-color: var(--pod-nav-item-text-color, var(--color-text1-4, #202020));
|
|
266
266
|
--pod-nav-search-border-hover-color: var(--color-brand1-6, rgba(155, 136, 121, 1));
|
|
267
267
|
--pod-nav-search-border-active-color: var(--color-brand1-6, rgba(155, 136, 121, 1));
|
|
268
|
-
--pod-nav-menu-bg-selected-color:
|
|
268
|
+
--pod-nav-menu-bg-selected-color: var(--color-brand1-2);
|
|
269
269
|
--pod-nav-popup-bg-color: var(--pod-shell-theme-bg-color);
|
|
270
270
|
|
|
271
271
|
/* 导航：主题表面、文字与状态 */
|
|
@@ -273,25 +273,25 @@
|
|
|
273
273
|
--pod-nav-page-white-bg-color: rgba(246, 247, 247, 1);
|
|
274
274
|
--pod-nav-page-padding: var(--pod-lg-gap-pad-margin, 16px);
|
|
275
275
|
--pod-nav-avater-border-radius: 6px;
|
|
276
|
-
--pod-nav-item-text-color: #
|
|
277
|
-
--pod-nav-item-text-hover-color: #
|
|
276
|
+
--pod-nav-item-text-color: #454139;
|
|
277
|
+
--pod-nav-item-text-hover-color: #292823;
|
|
278
278
|
--pod-nav-item-text-disabled-color: rgba(24, 28, 31, 0.24);
|
|
279
|
-
--pod-page-header-bg-color:
|
|
279
|
+
--pod-page-header-bg-color: #FFFFFF;
|
|
280
280
|
--pod-theme-text-color: var(--pod-nav-item-text-color, var(--color-text1-4, #202020));
|
|
281
281
|
--pod-page-header-text-color: var(--pod-theme-text-color, var(--color-text1-4, #202020));
|
|
282
|
-
--pod-nav-item-text-selected-color:
|
|
282
|
+
--pod-nav-item-text-selected-color: var(--color-brand1-5);
|
|
283
283
|
|
|
284
284
|
/* 原生表单：编辑态字段 */
|
|
285
285
|
--form-element-medium-corner: 3px;
|
|
286
286
|
--form-element-medium-height: 34px;
|
|
287
287
|
--form-element-medium-font-size: 14px;
|
|
288
|
-
--input-bg-color: #
|
|
288
|
+
--input-bg-color: #FFFFFF;
|
|
289
289
|
--input-border-width: 1px;
|
|
290
|
-
--input-border-color: #
|
|
290
|
+
--input-border-color: #E7E3DB;
|
|
291
291
|
--input-hover-border-color: var(--color-brand1-6);
|
|
292
292
|
--input-focus-border-color: var(--color-brand1-6);
|
|
293
|
-
--input-focus-bg-color: #
|
|
294
|
-
--yida-form-content-bgcolor: #
|
|
293
|
+
--input-focus-bg-color: #FFFFFF;
|
|
294
|
+
--yida-form-content-bgcolor: #FFFFFF;
|
|
295
295
|
--pod-form-label-color: var(--color-text1-4);
|
|
296
296
|
--form-top-label-margin-b: 8px;
|
|
297
297
|
--yida-help-tips-color: #878f95;
|
|
@@ -304,7 +304,7 @@
|
|
|
304
304
|
--pod-field-preview-min-height: 32px;
|
|
305
305
|
--pod-field-preview-padding: 8px 12px;
|
|
306
306
|
--pod-field-preview-gap: 4px;
|
|
307
|
-
--pod-field-preview-bg-color: #
|
|
307
|
+
--pod-field-preview-bg-color: #FFFFFF;
|
|
308
308
|
--pod-field-preview-border-radius: 3px;
|
|
309
309
|
--pod-field-preview-indicator-color: var(--color-fill1-3);
|
|
310
310
|
--pod-field-preview-shadow: none;
|
|
@@ -317,15 +317,15 @@
|
|
|
317
317
|
--pod-formView-stickyFooter: 0 0 var(--pod-page-border-radius, 20px)
|
|
318
318
|
var(--pod-page-border-radius, 20px);
|
|
319
319
|
--pod-formView-stickyFooter-border: none;
|
|
320
|
-
--pod-formView-stickyFooter-border-top: 1px solid #
|
|
320
|
+
--pod-formView-stickyFooter-border-top: 1px solid #E7E3DB;
|
|
321
321
|
--pod-inDrawer-stickyFooter-border: none;
|
|
322
322
|
--pod-inDrawer-stickyFooter-border-top: 0.5px solid
|
|
323
323
|
var(--color-line1-1, #efefef);
|
|
324
|
-
--pod-formView-stickyFooter-bg-color: #
|
|
324
|
+
--pod-formView-stickyFooter-bg-color: #F6F5F2;
|
|
325
325
|
--pod-formView-stickyFooter-box-shadow: none;
|
|
326
326
|
--pod-formView-stickyFooter-height: 56px;
|
|
327
327
|
--pod-formView-stickyFooter-bottom: 8px;
|
|
328
|
-
--pod-page-footer-bg-color: #
|
|
328
|
+
--pod-page-footer-bg-color: #FFFFFF;
|
|
329
329
|
--pod-page-footer-border-radius: 3px;
|
|
330
330
|
|
|
331
331
|
/* 数据管理与表格 */
|
|
@@ -397,7 +397,7 @@
|
|
|
397
397
|
--pod-mxl-gap-pad-margin: 20px;
|
|
398
398
|
--pod-xxl-gap-pad-margin: 24px;
|
|
399
399
|
--pod-full-raduis: var(--corner-semicircle);
|
|
400
|
-
--input-hover-bg-color: #
|
|
400
|
+
--input-hover-bg-color: #FFFFFF;
|
|
401
401
|
--oyd-page-bg: var(--pod-page-bg-color);
|
|
402
402
|
--oyd-surface: var(--pod-card-bg-color);
|
|
403
403
|
--oyd-canvas-image: var(--pod-app-root-bg-image);
|
|
@@ -1,58 +1,64 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: "{{PROJECT_NAME}}"
|
|
3
|
-
description: "
|
|
3
|
+
description: "三列短字段、项目名跨列、子表整行；暖雾白画布、纯白内容面、暖灰细边与局部琥珀强调的紧凑清单。适合设备工单与现场服务。"
|
|
4
4
|
themeId: "app-amber"
|
|
5
5
|
tokens:
|
|
6
6
|
application-global:
|
|
7
7
|
appearance:
|
|
8
8
|
surfaces:
|
|
9
|
-
"--pod-app-root-bg-color": "#
|
|
9
|
+
"--pod-app-root-bg-color": "#F6F5F2"
|
|
10
10
|
"--pod-app-root-bg-image": "none"
|
|
11
|
-
"--pod-page-bg-color": "#
|
|
12
|
-
"--pod-card-bg-color": "#
|
|
11
|
+
"--pod-page-bg-color": "#F6F5F2"
|
|
12
|
+
"--pod-card-bg-color": "#FFFFFF"
|
|
13
13
|
"--pod-table-cell-color": "var(--pod-card-bg-color)"
|
|
14
14
|
navigation:
|
|
15
|
-
"--pod-nav-sub-divider-color": "#
|
|
16
|
-
"--pod-shell-theme-bg-color": "#
|
|
17
|
-
"--pod-nav-item-text-color": "#
|
|
18
|
-
"--pod-nav-item-text-hover-color": "#
|
|
19
|
-
"--pod-nav-item-text-selected-color": "
|
|
20
|
-
"--pod-nav-menu-bg-hover-color": "#
|
|
21
|
-
"--pod-nav-menu-bg-selected-color": "
|
|
22
|
-
"--pod-nav-menu-item-radius": "
|
|
15
|
+
"--pod-nav-sub-divider-color": "#E7E3DB"
|
|
16
|
+
"--pod-shell-theme-bg-color": "#FCFBF8"
|
|
17
|
+
"--pod-nav-item-text-color": "#454139"
|
|
18
|
+
"--pod-nav-item-text-hover-color": "#292823"
|
|
19
|
+
"--pod-nav-item-text-selected-color": "var(--color-brand1-5)"
|
|
20
|
+
"--pod-nav-menu-bg-hover-color": "#F3F1EC"
|
|
21
|
+
"--pod-nav-menu-bg-selected-color": "var(--color-brand1-2)"
|
|
22
|
+
"--pod-nav-menu-item-radius": "6px"
|
|
23
23
|
"--pod-nav-menu-item-selected-font-weight": "600"
|
|
24
24
|
"--pod-nav-menu-gap": "4px"
|
|
25
25
|
"--pod-nav-popup-bg-color": "var(--pod-shell-theme-bg-color)"
|
|
26
|
+
"--pod-nav-search-bg-color": "#FFFFFF"
|
|
27
|
+
"--pod-nav-search-bg-hover-color": "#FFFFFF"
|
|
28
|
+
"--pod-nav-search-bg-active-color": "#FFFFFF"
|
|
29
|
+
"--pod-nav-search-border-color": "#E7E3DB"
|
|
30
|
+
"--pod-nav-search-placeholder-color": "#6F6B63"
|
|
31
|
+
"--pod-page-header-bg-color": "#FFFFFF"
|
|
26
32
|
native-form:
|
|
27
33
|
"--form-element-medium-corner": "3px"
|
|
28
34
|
"--form-element-medium-height": "34px"
|
|
29
35
|
"--form-element-medium-font-size": "14px"
|
|
30
|
-
"--input-bg-color": "#
|
|
36
|
+
"--input-bg-color": "#FFFFFF"
|
|
31
37
|
"--input-border-width": "1px"
|
|
32
|
-
"--input-border-color": "#
|
|
38
|
+
"--input-border-color": "#E7E3DB"
|
|
33
39
|
"--input-hover-border-color": "var(--color-brand1-6)"
|
|
34
40
|
"--input-focus-border-color": "var(--color-brand1-6)"
|
|
35
|
-
"--input-hover-bg-color": "#
|
|
36
|
-
"--input-focus-bg-color": "#
|
|
41
|
+
"--input-hover-bg-color": "#FFFFFF"
|
|
42
|
+
"--input-focus-bg-color": "#FFFFFF"
|
|
37
43
|
"--pod-form-label-color": "var(--color-text1-4)"
|
|
38
44
|
"--form-top-label-margin-b": "8px"
|
|
39
45
|
"--yida-divider-secondary-color": "var(--color-brand1-2)"
|
|
40
|
-
"--yida-form-content-bgcolor": "#
|
|
46
|
+
"--yida-form-content-bgcolor": "#FFFFFF"
|
|
41
47
|
"--pod-page-content-max-width": "1140px"
|
|
42
48
|
"--pod-page-border-radius": "3px"
|
|
43
|
-
"--pod-page-footer-bg-color": "#
|
|
49
|
+
"--pod-page-footer-bg-color": "#FFFFFF"
|
|
44
50
|
"--pod-page-footer-border-radius": "3px"
|
|
45
51
|
"--pod-sticky-footer-box-shadow": "none"
|
|
46
|
-
"--pod-formView-stickyFooter-bg-color": "#
|
|
52
|
+
"--pod-formView-stickyFooter-bg-color": "#F6F5F2"
|
|
47
53
|
"--pod-formView-stickyFooter-box-shadow": "none"
|
|
48
54
|
"--pod-formView-stickyFooter-border": "none"
|
|
49
|
-
"--pod-formView-stickyFooter-border-top": "1px solid #
|
|
55
|
+
"--pod-formView-stickyFooter-border-top": "1px solid #E7E3DB"
|
|
50
56
|
"--pod-formView-stickyFooter-height": "56px"
|
|
51
57
|
"--pod-formView-stickyFooter-bottom": "8px"
|
|
52
58
|
"--pod-field-preview-min-height": "32px"
|
|
53
59
|
"--pod-field-preview-padding": "8px 12px"
|
|
54
60
|
"--pod-field-preview-gap": "4px"
|
|
55
|
-
"--pod-field-preview-bg-color": "#
|
|
61
|
+
"--pod-field-preview-bg-color": "#FFFFFF"
|
|
56
62
|
"--pod-field-preview-border-radius": "3px"
|
|
57
63
|
"--pod-field-preview-indicator-color": "var(--color-fill1-3)"
|
|
58
64
|
"--pod-field-preview-shadow": "none"
|
|
@@ -67,18 +73,18 @@ tokens:
|
|
|
67
73
|
"--color-brand1-6": "{{PRIMARY_COLOR}}"
|
|
68
74
|
"--color-brand1-9": "<生成实际色值：--color-brand1-6 76% + #000000 24%，sRGB 逐通道混合>"
|
|
69
75
|
"--color-brand1-10": "<生成实际色值：--color-brand1-6 26% + #202020 74%，sRGB 逐通道混合>"
|
|
70
|
-
"--color-line1-1": "
|
|
71
|
-
"--color-line1-2": "
|
|
72
|
-
"--color-fill1-1": "
|
|
73
|
-
"--color-fill1-2": "
|
|
76
|
+
"--color-line1-1": "#EEEBE5"
|
|
77
|
+
"--color-line1-2": "#E7E3DB"
|
|
78
|
+
"--color-fill1-1": "#F7F6F3"
|
|
79
|
+
"--color-fill1-2": "#F0EDE7"
|
|
74
80
|
"--color-fill1-3": "<生成实际色值：--color-brand1-6 8% + #CCCCCC 92%，sRGB 逐通道混合>"
|
|
75
81
|
"--color-fill1-5": "<生成实际色值：--color-brand1-6 2% + #FEFEFE 98%，sRGB 逐通道混合>"
|
|
76
82
|
"--color-fill1-6": "var(--color-text1-3)" # 弱图标与辅助操作 glyph 前景色
|
|
77
83
|
"--color-fill1-10": "#262626"
|
|
78
84
|
"--color-text1-5": "#FFFFFF"
|
|
79
|
-
"--color-text1-4": "
|
|
85
|
+
"--color-text1-4": "#292823"
|
|
80
86
|
"--color-text1-10": "var(--color-text1-3)"
|
|
81
|
-
"--color-text1-3": "
|
|
87
|
+
"--color-text1-3": "#6F6B63"
|
|
82
88
|
"--color-text1-2": "<生成实际色值：--color-brand1-6 4% + #868686 96%，sRGB 逐通道混合>"
|
|
83
89
|
"--color-text1-1": "<生成实际色值：--color-brand1-6 4% + #CCCCCC 96%，sRGB 逐通道混合>"
|
|
84
90
|
typography:
|
|
@@ -152,7 +158,7 @@ themeProfile:
|
|
|
152
158
|
|
|
153
159
|
**琥珀工单**
|
|
154
160
|
|
|
155
|
-
|
|
161
|
+
三列短字段、项目名跨列、子表整行；暖雾白画布、纯白内容面、暖灰细边与局部琥珀强调的紧凑清单。适合设备工单与现场服务。
|
|
156
162
|
|
|
157
163
|
导航、应用框架、自定义页面、表单、编辑与详情共用这一套视觉语言。业务内容来自 PRD，按实际行业、页面标题和数据设计。色彩来源：{{COLOR_SOURCE}}；主色由 {{PRIMARY_COLOR}} 实例化，品牌悬停色按同源占位说明生成；模板不固定项目品牌色。
|
|
158
164
|
|
|
@@ -160,13 +166,15 @@ themeProfile:
|
|
|
160
166
|
|
|
161
167
|
### 2.1 表面、区块与层次
|
|
162
168
|
|
|
169
|
+
画布为低饱和暖雾白，导航为更亮的象牙白，表格、表单与页头为纯白；边框和表头使用同温度暖灰，不以冷蓝灰衬托琥珀。普通菜单与正文不染棕，搜索框不复用菜单悬停底。
|
|
170
|
+
|
|
163
171
|
正文、字段标签和详情值使用内容文字色，说明与占位文字使用辅助文字色；品牌色用于局部操作和数据强调，不把整页文字染成主色。
|
|
164
172
|
|
|
165
|
-
|
|
173
|
+
三列短字段、项目名跨列、子表整行。暖雾白画布、纯白内容面、暖灰细边与局部琥珀强调的紧凑清单。画布消费 --oyd-page-bg，内容消费 --oyd-surface，文字消费 --oyd-ink，边界消费 --oyd-border。内容最大宽度 --oyd-content-width，内距 --oyd-content-padding；宽屏不放大成空白 KPI 卡。
|
|
166
174
|
|
|
167
175
|
### 2.2 应用导航
|
|
168
176
|
|
|
169
|
-
|
|
177
|
+
象牙白导航采用炭灰文字、轻圆角与暖灰分隔，白底搜索框与菜单分层；选中项使用项目品牌浅底与深色文字，琥珀只强调当前入口和主操作。
|
|
170
178
|
|
|
171
179
|
常驻导航优先沿用平台原始样式，通过主题文字、背景与字重区分状态。菜单 border、box-shadow 是可选覆盖，没有明确用途就不声明；不为了统一风格给每项加框或投影。普通入口融入同一侧栏，按连续目录组织；分组靠留白与文字层级，不把导航复制成输入框、独立按钮或卡片堆叠。内容卡片、主按钮和表单可以使用更强的形状与材质，同一主题不意味着所有组件装饰强度相同。业务确有触控或特殊展示需求时，在本 design.md 调整并验收，不在运行时限制项目自定义值。
|
|
172
180
|
|
|
@@ -190,7 +198,7 @@ themeProfile:
|
|
|
190
198
|
|
|
191
199
|
### 2.5 自定义页面设计
|
|
192
200
|
|
|
193
|
-
自定义页面以 三列短字段、项目名跨列、子表整行 组织真实业务内容，以 工单编号与薄型摘要带 建立标题与首屏焦点，并用
|
|
201
|
+
自定义页面以 三列短字段、项目名跨列、子表整行 组织真实业务内容，以 工单编号与薄型摘要带 建立标题与首屏焦点，并用 暖雾白画布、纯白内容面、暖灰细边与局部琥珀强调的紧凑清单 统一页面表面。页面根据 PRD 安排标题与操作区、状态摘要、筛选、主要内容、上下文信息和反馈区；列表、表格、图表、详情抽屉和表单入口只在业务需要时出现。宽度、列数、高度和滚动方式按内容增长确定，移动端按阅读与操作顺序重排。
|
|
194
202
|
|
|
195
203
|
每个自定义页面逐页写清页面任务、首屏焦点、布局、表面与组件、主操作、状态、响应式和验收。状态覆盖加载、空、错误和无权限反馈及恢复动作；页面使用全局主题 token 落实当前风格，并为键盘焦点、纯图标按钮、非颜色状态表达和 reduced motion 提供可执行规则。
|
|
196
204
|
|
|
@@ -222,7 +230,7 @@ themeProfile:
|
|
|
222
230
|
|
|
223
231
|
### 材质与信息密度
|
|
224
232
|
|
|
225
|
-
|
|
233
|
+
暖雾白画布、纯白内容面、暖灰细边与局部琥珀强调的紧凑清单。三列短字段、项目名跨列、子表整行。图表、图片、时间线只为真实内容出现；没有媒体时以排版与章节构图成立，不为“丰富”捏造指标或入口。
|
|
226
234
|
|
|
227
235
|
## 5. 项目应用与调整规则
|
|
228
236
|
|
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
"cssTemplatePath": "templates/design-themes/app-paper/app_theme.css",
|
|
211
211
|
"formLayoutPath": "templates/design-themes/app-paper/form-layout.json",
|
|
212
212
|
"previewPrimaryColor": "#745338",
|
|
213
|
-
"styleSummary": "浅色导航，浅色内容界面。窄幅纵向阅读与按日期组织的清单；暖纸面、虚线章节、柔和纸张阴影。适合服务登记、档案与内容策划。"
|
|
213
|
+
"styleSummary": "浅色导航，浅色内容界面。窄幅纵向阅读与按日期组织的清单；暖纸面、虚线章节、柔和纸张阴影。适合服务登记、档案与内容策划。 适用于阅读和叙事为主的页面；高频比较、批量处理不默认采用，行业名称不是选用依据。"
|
|
214
214
|
},
|
|
215
215
|
{
|
|
216
216
|
"themeId": "app-sage",
|
|
@@ -401,12 +401,12 @@
|
|
|
401
401
|
"collection": "application-styles",
|
|
402
402
|
"contentTone": "light",
|
|
403
403
|
"navTheme": "light",
|
|
404
|
-
"navigationSummary": "
|
|
404
|
+
"navigationSummary": "象牙白导航采用炭灰文字、轻圆角与暖灰分隔，白底搜索框与菜单分层；选中项使用项目品牌浅底与深色文字，琥珀只强调当前入口和主操作。",
|
|
405
405
|
"templatePath": "templates/design-themes/app-amber/design.md",
|
|
406
406
|
"cssTemplatePath": "templates/design-themes/app-amber/app_theme.css",
|
|
407
407
|
"formLayoutPath": "templates/design-themes/app-amber/form-layout.json",
|
|
408
|
-
"previewPrimaryColor": "#
|
|
409
|
-
"styleSummary": "
|
|
408
|
+
"previewPrimaryColor": "#8A5A20",
|
|
409
|
+
"styleSummary": "浅色导航，浅色内容界面。三列短字段、项目名跨列、子表整行；暖雾白画布、纯白内容面、暖灰细边与局部琥珀强调的紧凑清单。适合设备工单与现场服务。"
|
|
410
410
|
},
|
|
411
411
|
{
|
|
412
412
|
"themeId": "app-graphite",
|
|
@@ -124,6 +124,8 @@ frontmatter 对应 `components.button.anchor: "#component-button"`、`sceneRecip
|
|
|
124
124
|
|
|
125
125
|
## 图片素材与图标
|
|
126
126
|
|
|
127
|
+
动态记录图片写入真实数据绑定和设计正文，不为每条记录分配静态素材槽位。仅有动态图片时素材策略使用 `imageNeed: none` 与空 slots，含义是无静态采集任务；页面仍按记录渲染图片。固定素材才进入下方清单，详见[任务驱动的视觉设计](../references/task-driven-visual-design.md)。
|
|
128
|
+
|
|
127
129
|
`assetStrategy.pages[]` 按 [素材清单契约](../../yida-image-assets/references/manifest-contract.md) 记录图片等级与槽位；槽位含用途、数量、比例、尺寸、焦点、填充方式和生成许可。无图片需求的实际页面记录 `imageNeed: none`。保持 frontmatter 单行 JSON 兼容 `--design design.md`，不能只保留槽位数量；有需求时交给 `yida-image-assets`。
|
|
128
130
|
|
|
129
131
|
`iconSystem.mappings` 只登记实际业务动作、状态、导航和空态使用的具体组件名称。图标尺寸、描边和容器规则放在正文；Canvas 按选中库 import，旧平台 JSX 则按已验证的运行时加载方式使用。不能用 emoji、CSS 图形、字母占位、Unicode、临时 SVG 或 iconfont 绕过图标规范；无法稳定加载时去掉非必要图标或使用已验证资源。
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
| 3 | `business-inferred` | 无明确主题证据，需要根据行业、品牌气质、业务情绪和视觉目标推导 | 设计任意合法的自定义品牌色盘，写应用主题 token 和文件交付方案 |
|
|
22
22
|
|
|
23
23
|
|
|
24
|
-
1.
|
|
24
|
+
1. 先判断主要任务、使用频率、信息密度与终端，再结合品牌证据和视觉目标判断业务气质。高频管理按[场景适配判断](../references/theme-selection.md#高频管理场景的适配判断)设计；行业名词不能直接决定配色、材质或布局。
|
|
25
25
|
2. 在 `design.md` 中记录主题色、`navTheme`、`logoSource` 和业务已确定的 `layoutDirection`。命名模板继承导航差异 token（未声明项沿用平台绑定） 和模板派生的 `navTheme`；自由创意明确设计两者。按 [导航与应用框架](../references/application-theme-consistency.md#导航与应用框架) 将导航外观与各类页面一起写入主题。
|
|
26
26
|
3. 主题文件按 [生成与更新规则](output-design.md#cli-token-契约fast--plan-共用) 准备；Plan 复用已生成的主题 CSS。
|
|
27
27
|
4. 主题 CSS 生成后读取并核对目标 token；需要修改变量时回到设计源文件，再通过 CLI 生成并重新上传。只有 CLI 未覆盖且已核实选择器的样式覆盖，才在现有 CSS 末尾小范围追加。按 [共用主题规则](../references/application-theme-consistency.md) 处理，不另写脚本生成或重写主题文件。
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
- 按主题统一按钮、输入、卡片、表格、标签、浮层与抽屉；组件规则在第 3 章配显式 anchor，frontmatter 仅登记位置。
|
|
26
26
|
- 相关组件覆盖 default/hover/active/focus/disabled/loading/selected/error；页面补充空态、无权限、无数据及恢复动作。表单验证和成功/失败提示沿用平台语义与原生能力。
|
|
27
|
+
- 图片按[任务驱动的视觉设计](../references/task-driven-visual-design.md)主动判断识别、解释或氛围价值，再确定视觉面积和构图；真实记录图片与固定素材分别走数据绑定和素材清单。
|
|
27
28
|
- 图片需求按实际页面标为 required/beneficial/none，需要时交给 `yida-image-assets`；记录用途、槽位、比例、尺寸、焦点、填充方式与生成许可。官网、品牌页和强视觉展示页需要真实或已授权生成的图片，素材暂缺时记录 draft 和缺口。
|
|
28
29
|
- 图标使用 `iconSystem.library` 与 `iconSystem.mappings`，具体尺寸与描边规则放正文；不以 emoji、CSS 图形、字母或临时 SVG 代替图标组件。
|
|
29
30
|
- 动效写 reduced motion 降级；状态表达不只依赖颜色，图标操作提供标签，交互保持键盘可达。
|
|
@@ -34,13 +34,15 @@ CLI 的 `assetTasks` 是派发输入，后台执行能力来自宿主。仅支
|
|
|
34
34
|
|
|
35
35
|
## 1. 确定哪些页面需要图片
|
|
36
36
|
|
|
37
|
+
先按[任务驱动的视觉设计](../yida-design/references/task-driven-visual-design.md)区分动态业务图片和固定素材。真实对象图片走字段绑定，不逐行建 slot、不搜相似图片替代、不下载全库图片；仅有动态图片时静态素材策略可为 none。下面的采集流程只处理固定素材。
|
|
38
|
+
|
|
37
39
|
按 `assetStrategy.pages[].pageId` 找页面，按 `slotId` 找图片位置。
|
|
38
40
|
|
|
39
41
|
| imageNeed | 怎么做 |
|
|
40
42
|
| --- | --- |
|
|
41
43
|
| `required` | 准备设计要求的图片；缺必需图片时该页保持草稿 |
|
|
42
44
|
| `beneficial` | 有图片位置就准备，没有则跳过 |
|
|
43
|
-
| `none` |
|
|
45
|
+
| `none` | 无固定图片采集任务；按设计使用排版、图标、图表，已有业务图片继续由数据绑定渲染 |
|
|
44
46
|
|
|
45
47
|
设计缺失时交回 `yida-design` 补齐。每个位置一个 `slotId`、一张图，`count` 省略或填 `1`。
|
|
46
48
|
|
|
@@ -17,6 +17,8 @@ assetStrategy: {"pages":[{"pageId":"home","imageNeed":"required","slots":[{"slot
|
|
|
17
17
|
- `generationAllowed=false` 只接受真实素材。
|
|
18
18
|
- `imageNeed=none` 省略 slots 时 CLI 补空数组；required/beneficial 页面显式填写 slots。Plan 生成方案时即校验位置、用途和尺寸；required 页面空 slots 时保持 draft。
|
|
19
19
|
|
|
20
|
+
动态记录图片由真实字段绑定，不进入静态槽位清单；只含动态图片的页面使用 `imageNeed=none`、`slots=[]`，并在设计正文与数据绑定中记录图片来源和无图降级。`none` 仅表示没有固定素材采集任务，不能据此删除业务图片。详见[任务驱动的视觉设计](../../yida-design/references/task-driven-visual-design.md)。
|
|
21
|
+
|
|
20
22
|
## 输入草稿
|
|
21
23
|
|
|
22
24
|
```json
|
|
@@ -32,6 +32,8 @@ description: 基于整理好的需求事实编写或修改业务 PRD，负责业
|
|
|
32
32
|
- 每个 display 页面提供 `pageSpecHandoff`，包含场景、区块、数据来源、主操作，以及指向对应 `design.md` 的 `designFile` / `designRefs`。视觉细则由 `yida-design` 维护。
|
|
33
33
|
- 导航结构、菜单顺序和默认入口由业务任务确定；导航外观与应用框架、表单、记录详情和自定义页面交给 `yida-design` 统一设计。PRD 保留整体风格摘要与设计引用，完整 token 和消费规则只在 `design.md` 维护。
|
|
34
34
|
|
|
35
|
+
任务涉及对象识别、证据或外观比较时，核对真实图片/附件字段与对象的关联，将其纳入已有数据来源与字段映射；没有字段时记录缺口，不凭美化新增字段。图文呈现与无图降级交给[任务驱动的视觉设计](../yida-design/references/task-driven-visual-design.md)，不把网络示意图当作真实对象资料。
|
|
36
|
+
|
|
35
37
|
## 按需参考
|
|
36
38
|
|
|
37
39
|
- [应用结构](references/app/blueprint.md)：规划资源与页面关系。
|