openyida 2026.9.20 → 2026.9.21
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/README.md +1 -1
- package/lib/app/application-style.js +3 -1
- package/lib/app/theme-from-design.js +38 -13
- package/lib/app/update-app.js +63 -13
- package/lib/core/command-manifest.js +32 -20
- package/lib/core/locales/en.js +17 -0
- package/lib/core/locales/zh.js +17 -0
- package/lib/core/sample.js +17 -14
- package/lib/design-plan/confirmation.js +13 -0
- package/lib/design-plan/design-plan.js +44 -2
- package/lib/design-plan/entry-navigation.js +10 -2
- package/lib/design-plan/init.js +11 -7
- package/lib/design-plan/materialize.js +62 -43
- package/lib/design-plan/normalize.js +13 -14
- package/lib/design-plan/parallel.js +62 -13
- package/lib/design-plan/patch.js +21 -7
- package/lib/design-plan/rebase.js +60 -0
- package/lib/design-plan/themes.js +16 -1
- package/lib/design-plan/validate.js +6 -1
- package/lib/design-plan/visual-policy.js +18 -4
- package/lib/samples/openyida-scaffold/canvas-form-drawer.canvas.jsx +3 -3
- package/lib/samples/openyida-scaffold/canvas-nav/mixed.jsx +6 -4
- package/lib/samples/openyida-scaffold/canvas-nav/shared.jsx +5 -5
- package/lib/samples/openyida-scaffold/canvas-nav/side.jsx +1 -2
- package/lib/samples/openyida-scaffold/canvas-nav/sidebar.jsx +1 -1
- package/lib/samples/openyida-scaffold/canvas-nav/top.jsx +5 -4
- package/package.json +1 -1
- package/yida-skills/SKILL.md +2 -2
- package/yida-skills/references/yida-api.md +4 -0
- package/yida-skills/skills/yida-app/SKILL.md +12 -4
- package/yida-skills/skills/yida-app/references/entry-navigation.md +11 -9
- package/yida-skills/skills/yida-app/workflow/plan/step-4-deliver.md +1 -1
- package/yida-skills/skills/yida-app/workflow/plan/workflow.md +11 -4
- package/yida-skills/skills/yida-app/workflow/step-2-design.md +3 -3
- package/yida-skills/skills/yida-app/workflow/step-3-create-or-reuse-app.md +2 -2
- package/yida-skills/skills/yida-app/workflow/step-8-publish-navigation.md +3 -3
- package/yida-skills/skills/yida-app/workflow/step-9-output-finish.md +3 -2
- package/yida-skills/skills/yida-canvas-custom-page/SKILL.md +2 -2
- package/yida-skills/skills/yida-canvas-custom-page/references/canvas-style-implementation-guide.md +1 -1
- package/yida-skills/skills/yida-canvas-custom-page/references/canvas-theme-provider.md +1 -1
- package/yida-skills/skills/yida-canvas-custom-page/references/data-bridge-guide.md +140 -1
- package/yida-skills/skills/yida-canvas-custom-page/references/navigation-and-entry-guide.md +1 -1
- package/yida-skills/skills/yida-canvas-custom-page/scripts/canvas-theme-provider.template.jsx +1 -1
- package/yida-skills/skills/yida-canvas-data-binding/SKILL.md +7 -0
- package/yida-skills/skills/yida-create-form-page/SKILL.md +1 -1
- package/yida-skills/skills/yida-design/SKILL.md +5 -3
- package/yida-skills/skills/yida-design/references/application-style-library.md +22 -7
- package/yida-skills/skills/yida-design/references/application-theme-consistency.md +45 -5
- package/yida-skills/skills/yida-design/references/ask-human-interaction-contract.md +1 -1
- package/yida-skills/skills/yida-design/references/native-form-styles.md +1 -1
- package/yida-skills/skills/yida-design/references/navigation-decision.md +6 -4
- package/yida-skills/skills/yida-design/references/theme/app-custom-theme-template.css +62 -0
- package/yida-skills/skills/yida-design/references/theme-selection.md +10 -9
- package/yida-skills/skills/yida-design/references/visual-decision-engine.md +1 -1
- package/yida-skills/skills/yida-design/scripts/validate_design_themes.py +35 -9
- package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/SKILL.md +13 -3
- package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/references/build-plan-compact-schema.md +4 -2
- package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/references/build-plan-schema.md +4 -2
- package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/references/visual-design.md +3 -1
- package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/references/visual-theme-selection.md +15 -17
- package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/scripts/render_build_plan.py +2 -0
- package/yida-skills/skills/yida-design/templates/design-themes/README.md +15 -10
- package/yida-skills/skills/yida-design/templates/design-themes/app-amber/app_theme.css +224 -83
- package/yida-skills/skills/yida-design/templates/design-themes/app-amber/design.md +69 -14
- package/yida-skills/skills/yida-design/templates/design-themes/app-editorial/app_theme.css +224 -83
- package/yida-skills/skills/yida-design/templates/design-themes/app-editorial/design.md +69 -14
- package/yida-skills/skills/yida-design/templates/design-themes/app-executive/app_theme.css +244 -103
- package/yida-skills/skills/yida-design/templates/design-themes/app-executive/design.md +68 -13
- package/yida-skills/skills/yida-design/templates/design-themes/app-finance/app_theme.css +223 -82
- package/yida-skills/skills/yida-design/templates/design-themes/app-finance/design.md +68 -13
- package/yida-skills/skills/yida-design/templates/design-themes/app-glass/app_theme.css +225 -84
- package/yida-skills/skills/yida-design/templates/design-themes/app-glass/design.md +69 -14
- package/yida-skills/skills/yida-design/templates/design-themes/app-graphite/app_theme.css +244 -103
- package/yida-skills/skills/yida-design/templates/design-themes/app-graphite/design.md +68 -13
- package/yida-skills/skills/yida-design/templates/design-themes/app-line/app_theme.css +224 -83
- package/yida-skills/skills/yida-design/templates/design-themes/app-line/design.md +69 -14
- package/yida-skills/skills/yida-design/templates/design-themes/app-neon/app_theme.css +244 -103
- package/yida-skills/skills/yida-design/templates/design-themes/app-neon/design.md +68 -13
- package/yida-skills/skills/yida-design/templates/design-themes/app-nordic/app_theme.css +236 -89
- package/yida-skills/skills/yida-design/templates/design-themes/app-nordic/design.md +74 -14
- package/yida-skills/skills/yida-design/templates/design-themes/app-paper/app_theme.css +224 -83
- package/yida-skills/skills/yida-design/templates/design-themes/app-paper/design.md +68 -13
- package/yida-skills/skills/yida-design/templates/design-themes/app-platinum/app_theme.css +223 -82
- package/yida-skills/skills/yida-design/templates/design-themes/app-platinum/design.md +68 -13
- package/yida-skills/skills/yida-design/templates/design-themes/app-plum/app_theme.css +224 -83
- package/yida-skills/skills/yida-design/templates/design-themes/app-plum/design.md +68 -13
- package/yida-skills/skills/yida-design/templates/design-themes/app-pop/app_theme.css +240 -89
- package/yida-skills/skills/yida-design/templates/design-themes/app-pop/design.md +76 -14
- package/yida-skills/skills/yida-design/templates/design-themes/app-sage/app_theme.css +224 -83
- package/yida-skills/skills/yida-design/templates/design-themes/app-sage/design.md +69 -14
- package/yida-skills/skills/yida-design/templates/design-themes/app-teal/app_theme.css +224 -83
- package/yida-skills/skills/yida-design/templates/design-themes/app-teal/design.md +68 -13
- package/yida-skills/skills/yida-design/templates/design-themes/app-terminal/app_theme.css +254 -107
- package/yida-skills/skills/yida-design/templates/design-themes/app-terminal/design.md +74 -14
- package/yida-skills/skills/yida-design/templates/design-themes/app-ticket/app_theme.css +233 -88
- package/yida-skills/skills/yida-design/templates/design-themes/app-ticket/design.md +73 -14
- package/yida-skills/skills/yida-design/templates/design-themes/app-wire/app_theme.css +224 -83
- package/yida-skills/skills/yida-design/templates/design-themes/app-wire/design.md +69 -14
- package/yida-skills/skills/yida-design/templates/design-themes/basic-tokens.json +2 -1
- package/yida-skills/skills/yida-design/templates/design-themes/dark-inset-hairline/app_theme.css +690 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{dark-inset-hairline.md → dark-inset-hairline/design.md} +103 -58
- package/yida-skills/skills/yida-design/templates/design-themes/dark-inset-hairline/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/dark-rail-fine-lines/app_theme.css +691 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{dark-rail-fine-lines.md → dark-rail-fine-lines/design.md} +102 -50
- package/yida-skills/skills/yida-design/templates/design-themes/dark-rail-fine-lines/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/dark-rail-signal-panels/app_theme.css +696 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{dark-rail-signal-panels.md → dark-rail-signal-panels/design.md} +62 -12
- package/yida-skills/skills/yida-design/templates/design-themes/dark-rail-signal-panels/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/free-creative/app_theme.css +278 -115
- package/yida-skills/skills/yida-design/templates/design-themes/free-creative/design.md +57 -10
- package/yida-skills/skills/yida-design/templates/design-themes/graphite-bevel-grid/app_theme.css +692 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{graphite-bevel-grid.md → graphite-bevel-grid/design.md} +60 -10
- package/yida-skills/skills/yida-design/templates/design-themes/graphite-bevel-grid/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/hairline-shared-bands/app_theme.css +691 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{hairline-shared-bands.md → hairline-shared-bands/design.md} +62 -12
- package/yida-skills/skills/yida-design/templates/design-themes/hairline-shared-bands/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/hairline-soft-blocks/app_theme.css +691 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{hairline-soft-blocks.md → hairline-soft-blocks/design.md} +57 -9
- package/yida-skills/skills/yida-design/templates/design-themes/hairline-soft-blocks/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/index.json +141 -48
- package/yida-skills/skills/yida-design/templates/design-themes/ink-glow-soft-panels/app_theme.css +701 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{ink-glow-soft-panels.md → ink-glow-soft-panels/design.md} +58 -8
- package/yida-skills/skills/yida-design/templates/design-themes/ink-glow-soft-panels/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/inset-frame-pixel-rhythm/app_theme.css +691 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{inset-frame-pixel-rhythm.md → inset-frame-pixel-rhythm/design.md} +59 -9
- package/yida-skills/skills/yida-design/templates/design-themes/inset-frame-pixel-rhythm/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/outlined-texture-duotone/app_theme.css +698 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{outlined-texture-duotone.md → outlined-texture-duotone/design.md} +62 -12
- package/yida-skills/skills/yida-design/templates/design-themes/outlined-texture-duotone/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/soft-inset-surfaces/app_theme.css +691 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{soft-inset-surfaces.md → soft-inset-surfaces/design.md} +59 -11
- package/yida-skills/skills/yida-design/templates/design-themes/soft-inset-surfaces/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/soft-outline-rhythm/app_theme.css +690 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{soft-outline-rhythm.md → soft-outline-rhythm/design.md} +60 -26
- package/yida-skills/skills/yida-design/templates/design-themes/soft-outline-rhythm/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/soft-rail-bold-band/app_theme.css +698 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{soft-rail-bold-band.md → soft-rail-bold-band/design.md} +99 -49
- package/yida-skills/skills/yida-design/templates/design-themes/soft-rail-bold-band/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/soft-spectral-panels/app_theme.css +692 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{soft-spectral-panels.md → soft-spectral-panels/design.md} +63 -13
- package/yida-skills/skills/yida-design/templates/design-themes/soft-spectral-panels/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/warm-canvas-contrast-panels/app_theme.css +711 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{warm-canvas-contrast-panels.md → warm-canvas-contrast-panels/design.md} +60 -10
- package/yida-skills/skills/yida-design/templates/design-themes/warm-canvas-contrast-panels/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/design-themes/warm-rail-muted-panels/app_theme.css +692 -0
- package/yida-skills/skills/yida-design/templates/design-themes/{warm-rail-muted-panels.md → warm-rail-muted-panels/design.md} +98 -50
- package/yida-skills/skills/yida-design/templates/design-themes/warm-rail-muted-panels/form-layout.json +13 -0
- package/yida-skills/skills/yida-design/templates/navigation-styles.json +769 -0
- package/yida-skills/skills/yida-design/workflow/output-design.md +5 -5
- package/yida-skills/skills/yida-design/workflow/step-2-theme-system.md +5 -3
- package/yida-skills/skills/yida-design/workflow/step-6-handoff.md +1 -1
- package/yida-skills/skills/yida-form-permission/SKILL.md +6 -0
- package/yida-skills/skills/yida-nav-shell/SKILL.md +1 -1
- package/yida-skills/skills/yida-nav-shell/references/nav-shell-patterns.md +6 -0
- package/yida-skills/skills/yida-page-config/SKILL.md +9 -0
- package/yida-skills/skills/yida-prd/SKILL.md +1 -0
- package/yida-skills/skills/yida-prd/workflow/output-prd.md +2 -2
- package/yida-skills/skills/yida-prd/workflow/step-2-information-architecture.md +1 -1
- package/yida-skills/skills/yida-requirement-analysis/references/experience-groups.md +45 -9
- package/yida-skills/skills/yida-requirement-analysis/references/handoff.md +5 -5
- package/yida-skills/skills/yida-requirement-analysis/workflow/prepare-brief.md +17 -4
- package/yida-skills/skills-index.json +2 -2
|
@@ -1,21 +1,34 @@
|
|
|
1
1
|
# 应用风格模板与自由创意
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
先决定应用的整体设计语言,再让导航、应用框架、首页、自定义页面、提交/编辑表单与记录详情共同使用它。按 [导航与应用框架](application-theme-consistency.md#导航与应用框架) 同时设计表面、状态、边界、形状、文字和间距。模板提供可执行的起点;**自由创意是同等可用的独立路径**,从业务推演,不要求先匹配模板。已有应用沿用其设计,不为单页重选风格。
|
|
4
4
|
|
|
5
5
|
## 找到和导出
|
|
6
6
|
|
|
7
|
-
`openyida design-plan catalog --json` 返回模板 `themes` 与独立的 `creativeOption
|
|
7
|
+
`openyida design-plan catalog --json` 返回模板 `themes` 与独立的 `creativeOption`。全部 34 个主题入口统一采用三文件目录,均可用 `application-style` 导出;其中 18 套应用风格与自由创意仍保留 `collection: application-styles` 分类。目录元数据提供完整设计、CSS 和原生布局的相对路径,可直接定位对应文件。
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
openyida sample yida-design application-style --style-id app-executive --output prd/my-app/style-start
|
|
11
11
|
openyida sample yida-design application-style --style-id free-creative --output prd/my-app/creative-start
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
每套导出 `design.md`、`app_theme.css`、`form-layout.json
|
|
14
|
+
每套导出 `design.md`、`app_theme.css`、`form-layout.json`;目标目录中任一同名文件已存在时,CLI 报错并保留原文件。每份 `design.md` 同时包含自定义页面的逐页设计引导,以及表单的组件位置、布局、样式、状态和响应式引导。设计与 CSS 中的品牌颜色保留占位:`--color-brand1-6` 使用 `{{PRIMARY_COLOR}}`,`--color-brand1-1` 按主色生成悬停色,其余品牌档位保持同源。项目占位符与空字段布局是项目化起点;使用时替换真实项目内容、完成最终设计并生成项目主题与表单布局。上传主题时使用项目实际生成的 CSS 路径,`app-theme.css` 与 `app_theme.css` 均可。
|
|
15
|
+
|
|
16
|
+
## 命令与参数
|
|
17
|
+
|
|
18
|
+
| 步骤 | 命令与参数 | 输入与结果 |
|
|
19
|
+
| --- | --- | --- |
|
|
20
|
+
| 查询主题 | `openyida design-plan catalog --json` | 从 `themes[].themeId` 或 `creativeOption.themeId` 取值 |
|
|
21
|
+
| 导出三文件 | `openyida sample yida-design application-style --style-id <themeId> --output <目录>` | `--style-id` 必填,支持目录中的全部主题;`--output` 缺省为当前目录下 `.cache/samples/application-style` |
|
|
22
|
+
| 生成或更新 CSS | `openyida sample yida-design app-theme --design-file <design.md> --output <CSS路径>` | 设计中的品牌色和派生颜色先填成实际值;同路径更新保留自定义 CSS,并维护旁边的 `<CSS路径>.tokens.md` 更新记录 |
|
|
23
|
+
| 绑定应用 | `openyida update-app <appType> --theme-file <CSS路径> --nav-theme <light或dark> --layout <side或top或l_shape> --show-app-nav` | 上传后分别核对主题和导航回读,再检查页面实际效果;应用级自绘导航改用 `--hide-app-nav` |
|
|
24
|
+
|
|
25
|
+
`--style-id` 只用于三文件导出,`--design-file` 只用于主题生成。`--var KEY=VALUE` 用于其他代码示例的占位替换;应用主题的品牌色和导航值写入 `design.md`。`app-theme` 的 `--output` 缺省为 `.cache/samples/app-theme.css`;省略 `--design-file` 会用公共模板重置目标 CSS。三文件导出中的占位 CSS 先经过主题生成,再上传。
|
|
26
|
+
|
|
27
|
+
`--nav-theme` 选择平台导航明暗,`--layout` 选择结构。平台兼容参数还接受 `white` / `gray`,正式设计使用模板派生的 `light` / `dark`。菜单圆角、普通/悬停/选中边框、选中阴影、项高、内距与间距是[导航 token](application-theme-consistency.md#导航与应用框架),在 Fast 的设计 token 或 Plan 的 `visualStyle.tokens` 中填写。CLI 读取设计文件后生成消费样式;这些值没有单独的命令行开关。较早的 CSS 在设计提供菜单边框 token 后会补齐缺失的菜单形状规则。四种差异明显的组合及访问态验收方式见[案例经验](application-theme-consistency.md#导航形状与密度的案例经验)。
|
|
15
28
|
|
|
16
29
|
## 主题明暗双轴
|
|
17
30
|
|
|
18
|
-
`contentTone` 表示页面画布、卡片、表单、详情、自定义页面和浮层采用浅色或暗色界面;`navTheme`
|
|
31
|
+
`contentTone` 表示页面画布、卡片、表单、详情、自定义页面和浮层采用浅色或暗色界面;`navTheme` 表示平台导航框架采用浅色或深色。两者是独立维度;命名模板从模板元数据派生导航明暗,自由创意由项目明确设计并配套导航 Token。两者独立选择:深色导航可以搭配浅色内容,浅色导航也可以搭配暗色内容。模板名中的“深色侧栏”描述 `navTheme`,应用整体明暗以 `contentTone` 为准。
|
|
19
32
|
|
|
20
33
|
## 18 个应用方向
|
|
21
34
|
|
|
@@ -44,9 +57,9 @@ openyida sample yida-design application-style --style-id free-creative --output
|
|
|
44
57
|
|
|
45
58
|
## Fast 与 Plan 如何消费
|
|
46
59
|
|
|
47
|
-
- **Fast**:选定方向后导出一套起点,按唯一输出契约补成最终 `design.md
|
|
60
|
+
- **Fast**:选定方向后导出一套起点,按唯一输出契约补成最终 `design.md`;保留模板已有的 `applicationStyle` 消费标记,删除模板 `themeId`,填入真实项目、颜色、页面与引用,完成 `check-design`。然后运行 `openyida sample yida-design app-theme --design-file <design.md> --output <app_theme.css>`。共享生成器会携带这组应用风格的语义类配方,后续重生成保留配方之外的自定义 CSS。
|
|
48
61
|
- **Plan**:`design-plan init` 使用目录中的 `themeId`(`--theme-id`),项目差异放 `visualStyle.tokens`,各页布局写入已有逐页设计。CLI 物化时生成正式 `design.md` 与返回路径中的 `app-theme.css`;文件名沿用 Plan 契约,不另生成第二份应用主题。
|
|
49
|
-
- **实现**:应用级上传一次项目 CSS
|
|
62
|
+
- **实现**:应用级上传一次项目 CSS。导航读取完整的 `tokens.application-global.appearance.navigation`,平台导航保留原变量消费关系,自定义导航由组件明确引用。Canvas 读取设计里的 Token,并可使用 `.oyd-style-workspace`、`.oyd-style-intro`、`.oyd-style-section`;框架、表单和详情应用同一主题。自定义页面落实具体构图。
|
|
50
63
|
- **表单**:先在 `design.md` 写清各区域使用的组件、列比例、间距、长字段整行和移动端重排。`form-layout.json` 提供字段与分栏的初始结构;在各列填入 PRD 字段,并按设计调整布局。`--theme compact` 等参数只设置密度,应用 CSS 负责视觉样式。
|
|
51
64
|
|
|
52
65
|
表单支持在顶部、左侧、主体、右侧和字段之间放置 Tab、按钮组、图片或图形、标题与 `Divider`、分栏、状态区、辅助内容和字段。各组件分别负责导航切换、操作入口、视觉焦点、状态反馈、内容组织或数据采集。普通业务分组和章节分隔使用 `Divider`,横向字段组合使用 `ColumnContainer`。
|
|
@@ -71,8 +84,10 @@ Plan 将下列对象写入 `visualStyle.creativeDirection`;Fast 写入最终
|
|
|
71
84
|
|
|
72
85
|
Plan 的 `visualStyle.tokens` 必须显式提供:画布 `--pod-page-bg-color`、表面 `--pod-card-bg-color`、文字 `--color-text1-4`、控件 `--form-element-medium-corner` / `--form-element-medium-height`、底栏 `--pod-page-footer-bg-color` / `--pod-sticky-footer-box-shadow`,以及自定义页面 `--oyd-content-width` / `--oyd-content-padding` / `--oyd-field-gap` / `--oyd-heading-font` / `--oyd-heading-size` / `--oyd-rule-style`。其余角色同样按完整设计配套,数据管理外层底栏与按钮内层分别决定。Fast 将这些值写入设计的 Token 分组。缺少决策或关键值时生成器报错,不自动选一套模板。
|
|
73
86
|
|
|
87
|
+
自由创意还需显式写入 [六个基础导航色](application-theme-consistency.md#导航与应用框架) 与 `navTheme`,并按业务布局设计框架、菜单形状、文字、间距及状态。Fast 与 Plan 使用同一完整主题文件。
|
|
88
|
+
|
|
74
89
|
## 验收与维护
|
|
75
90
|
|
|
76
91
|
看应用整体,覆盖导航、自定义页、提交、编辑、详情、数据管理内嵌、抽屉和移动端,核对正文/底栏对齐、背景连续、hover/focus、禁用/错误和窄屏布局。应用主题与表单组件树共同作为验收基线。
|
|
77
92
|
|
|
78
|
-
|
|
93
|
+
维护既有主题时修改对应目录的 `design.md` 与 `form-layout.json`;维护导航时修改 `templates/navigation-styles.json`,维护应用风格预设时修改 `templates/application-styles.json` 与共用配方,再运行 `node scripts/build-application-styles.js`;随后运行模板、Plan/Fast、原生布局测试及 `check:skills`。该脚本仅用于仓库维护,应用搭建使用上述 CLI。
|
|
@@ -1,6 +1,45 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 应用各页面共用主题
|
|
2
2
|
|
|
3
|
-
Fast、Plan 和单页开发使用同一条链路:设计源文件 → `design.md` 的 token → `app-theme.css` →
|
|
3
|
+
Fast、Plan 和单页开发使用同一条链路:设计源文件 → `design.md` 的 token → `app-theme.css` → 导航、应用框架、原生表单、记录详情与自定义页面。页面代码负责布局、业务交互和局部装饰,基础配色与组件风格统一读取应用主题。
|
|
4
|
+
|
|
5
|
+
## 导航与应用框架
|
|
6
|
+
|
|
7
|
+
设计应用时,同时确定导航、应用框架、提交与编辑表单、记录详情、自定义页面的视觉关系。导航负责说明应用身份、业务层级和当前位置;框架负责组织内容宽度、背景与滚动区域。它们与业务内容共用字体、形状、间距和状态语言,各区域按用途选择表面与强调程度。
|
|
8
|
+
|
|
9
|
+
先按 [导航决策](navigation-decision.md) 确定菜单、层级、顺序、默认页面及顶部、侧边或 L 型布局,再将外观写入主题。三个设置各管一件事:`navigationType` / `layoutDirection` 表示入口组织和布局,`navTheme` 表示导航明暗模式,导航 token 表示实际颜色、边界、形状、文字与间距。业务布局保持已确认的选择;主题模板为该布局提供视觉样式。
|
|
10
|
+
|
|
11
|
+
| 设计对象 | 写清的内容 | 与其他页面的关系 |
|
|
12
|
+
| --- | --- | --- |
|
|
13
|
+
| 导航和框架表面 | 导航背景、应用外衬、内容画布及交界处的边框、阴影 | 分清应用外衬、页面、卡片与表单的背景层次 |
|
|
14
|
+
| 菜单状态 | 默认、悬停、选中的文字、图标、背景和标记;实际实现中的焦点、禁用与展开状态 | 选中态表达当前位置,按钮表达操作,分别保证可读性 |
|
|
15
|
+
| 形状与边界 | 菜单项圆角、边框、选中标记、分组分隔及阴影 | 与表单控件、详情数据框和内容容器使用同一套形状规则 |
|
|
16
|
+
| 文字与间距 | 菜单字体、字号、字重、行高、项高、内距和分组间距 | 与页面标题、字段标签、正文和数据密度协调 |
|
|
17
|
+
| 布局与交互 | 导航占位或叠加、内容宽度、滚动、折叠及窄屏菜单 | 按 [连续性规则](page-continuity.md) 保持内容对齐与往返状态 |
|
|
18
|
+
|
|
19
|
+
命名模板在 `tokens.application-global.appearance.navigation` 提供完整导航 token,并提供对应 `navTheme`。这组变量是导航外观的唯一取值来源,覆盖基础六色,以及模板定义的页头、Logo、分组、搜索、弹层、菜单尺寸、文字、工具按钮、顶部选中线和 L 型框架等角色。项目保留这组变量及其消费规则,将主色和已确认的项目差异合入同一主题;浅色导航可以呈现暖纸、柔绿、雾紫或精密线框,深色导航也按模板保留自己的材质、边界和选中方式。`light` / `dark` 用于选择平台导航模式,具体外观以主题 token 为准。
|
|
20
|
+
|
|
21
|
+
`free-creative` 按业务独立设计上述关系,并在设计源中显式填写导航明暗与六个基础导航色:导航背景、菜单文字、悬停文字、选中文字、悬停背景和选中背景;其余导航变量按实际设计补齐。变量名以 [基础变量契约](../templates/design-themes/basic-tokens.json) 和当前模板为准,平台变量保留原名,扩展变量说明实际消费位置。项目用到的形状、文字与间距也写入 token,正文解释怎样使用。
|
|
22
|
+
|
|
23
|
+
平台导航由应用主题及已有平台消费关系实现;自定义导航读取同一份导航 token,并在自身组件内实现形状、布局与交互。只有自定义组件实际引用、或经过核实的平台选择器使用的变量才会改变外观。自定义菜单的聚焦、折叠、拖拽与返回等交互按 `yida-nav-shell` 实现;导航隐藏、权限和页面范围沿用 PRD。
|
|
24
|
+
|
|
25
|
+
菜单形状使用 `--pod-nav-menu-item-radius`;普通、悬停、选中边框分别使用 `--pod-nav-menu-item-border`、`--pod-nav-menu-item-hover-border`、`--pod-nav-menu-item-selected-border`。三项边框由 OpenYida 主题 CSS 的导航选择器消费,覆盖侧栏、L 型侧栏和顶部菜单。边框填写完整 CSS 值,例如 `none`、`1px solid #AAB7AE`、`3px double #A7744D`;各状态保持同一宽度,避免文字位置跳动。选中阴影继续使用 `--pod-nav-menu-item-selected-shadow`,可与边框组合。验收时查看菜单的实际圆角、线宽、线型和选中标记,分别核对侧栏与顶栏。
|
|
26
|
+
|
|
27
|
+
Fast 在 `design.md` 的第 2.2 节说明最终导航与框架规则,token 写入 frontmatter;Plan 在 `visualStyle.tokens` 保存项目差异,由 CLI 生成同一设计与主题文件。导航 token 随应用主题一次生成、上传和校验,各页继续消费同一份主题。
|
|
28
|
+
|
|
29
|
+
### 导航形状与密度的案例经验
|
|
30
|
+
|
|
31
|
+
比较导航时,把圆角、三态边框、选中阴影、菜单高度、内距和间距作为一组设计。先让菜单轮廓和疏密有清楚的区别,再配合颜色与文字层级。下面四种做法已用于案例应用,并沉淀到对应主题的设计与 CSS;它们提供外观参考,顶部、侧边或 L 型布局仍由业务入口决定。
|
|
32
|
+
|
|
33
|
+
| 风格 | 轮廓与选中方式 | 密度与框架 |
|
|
34
|
+
| --- | --- | --- |
|
|
35
|
+
| 波普印刷 | 方角、3px 粗墨线,黑底黄字搭配 5px 粉色硬阴影 | 顶部菜单 44px,间距 16px,68px 顶栏给菜单和阴影留空 |
|
|
36
|
+
| 北欧云白 | 999px 胶囊,2px 透明边框预留位置,选中深绿底白字与轻阴影 | 菜单 52px,内距 12px 18px,间距 14px,柔绿侧栏保持舒展 |
|
|
37
|
+
| 复古票据 | 方角、5px 棕色双线,浅纸底选中项配 4px 硬阴影 | 菜单 50px,内距 10px 14px,间距 14px,双线和纸张层次延续到内容 |
|
|
38
|
+
| 终端像素 | 方角、1px 虚线,暗底亮字,左右各 5px 内阴影标记当前位置 | 菜单 36px、间距 4px,紧凑顶栏与侧栏延续日志节奏 |
|
|
39
|
+
|
|
40
|
+
项目调整时,把具体取值写回设计源,正文说明选择理由和消费位置。品牌色继续使用项目输入;装饰阴影、纸张底色和边框色按各自角色配套。Fast 修改 `design.md`,Plan 修改 `visualStyle.tokens` 后重新生成;维护公共模板时,同时修改导航维护源、生成三文件和索引摘要。项目覆盖某个值后,以生成的项目取值表为准。
|
|
41
|
+
|
|
42
|
+
验收先看访问态的数据管理页,再看自定义页、提交页和详情页:普通、悬停、选中状态的边框都应可辨;选中状态遇到悬停仍保持当前位置标记。粗边框采用 border-box,并检查内层行高、文字居中和点击区域。外阴影需有周围留白,内阴影保持文字可读;长菜单名、折叠菜单和窄屏也要检查。应用 `/admin` 是开发配置后台,业务使用者看到的导航在访问态验收。
|
|
4
43
|
|
|
5
44
|
## 平台基础变量是应用主题基础框架
|
|
6
45
|
|
|
@@ -22,11 +61,12 @@ Fast、Plan 和单页开发使用同一条链路:设计源文件 → `design.m
|
|
|
22
61
|
| --- | --- |
|
|
23
62
|
| 应用主色及交互色阶 | Plan 的 `forUser.colorStrategy.primaryColor`;Fast 的品牌 token |
|
|
24
63
|
| 页面底、卡片底、文字、填充、边界、全局字体和圆角 | 已有平台语义 token,原生页和自定义页共同消费 |
|
|
64
|
+
| 导航、应用框架与菜单状态 | 完整导航 token 与框架变量,按 [导航与应用框架](#导航与应用框架) 记录消费位置 |
|
|
25
65
|
| 原生表单控件、提交页背景及详情页只读字段数据框 | [原生表单变量、详情只读态与背景分层](native-form-styles.md),沿用同一主题生成链路 |
|
|
26
66
|
| 平台没有对应角色的色彩、字体、材质、尺寸、动效和组件状态 | 项目扩展 token,由主题 CSS 提供,使用者显式引用 |
|
|
27
67
|
| 分栏、大标题位置、封面构图、单页纹理 | 页面设计与页面代码;需共享或随主题变化的参数引用扩展 token |
|
|
28
68
|
|
|
29
|
-
例如主色为墨黑 `#1B1B1B`,并已确认奶油画布、暖白面板、橙红装饰标签时,Plan 在 `visualStyle.tokens` 写入以下项目差异;Fast 将同样的变量写入 `design.md.tokens`
|
|
69
|
+
例如主色为墨黑 `#1B1B1B`,并已确认奶油画布、暖白面板、橙红装饰标签时,Plan 在 `visualStyle.tokens` 写入以下项目差异;Fast 将同样的变量写入 `design.md.tokens` 对应分组。这个例子只展示当前项目的内容配色,导航仍按完整应用设计配套。选中项阴影由 `--pod-nav-menu-item-selected-shadow` 独立控制。
|
|
30
70
|
|
|
31
71
|
```json
|
|
32
72
|
{
|
|
@@ -104,7 +144,7 @@ antd 控件按 Canvas 技能接入 `CanvasThemeProvider`,由适配层读取当
|
|
|
104
144
|
|
|
105
145
|
## 验证主题是否真正一致
|
|
106
146
|
|
|
107
|
-
1.
|
|
147
|
+
1. **设计与文件**:逐项对照已确认的导航、框架、主色、页面底、面板、文字、字体及特色强调,确认它们出现在生成的主题 token 中,页面用的是同一角色。导航明暗与模板或自由创意决策一致,导航状态、形状与密度保留本项目设计。文件名叫 `app_theme.css` 或 `app-theme.css` 不影响契约,以本次输出路径为准。
|
|
108
148
|
2. **绑定**:`themeVerification.verified=true` 仅证明应用设置绑定了主题资源。`iframePropagation` 是配置字段,不是当前页面主题加载的检测结果;不能凭它为 `false` 就断言 Canvas 收不到变量,更不能据此改成固定色盘。
|
|
109
|
-
3.
|
|
149
|
+
3. **运行态**:检查实际导航及其默认、悬停和选中状态,并对照应用框架、原生列表、提交/编辑表单、记录详情、自定义页及实际存在的抽屉。逐类检查实际存在的页面,核对主题资源、容器计算变量、背景、文字、形状、间距和主操作;iframe 单独检查其文档。变量缺失查资源加载与作用域,变量正确但外观不对查页面硬编码与样式覆盖。
|
|
110
150
|
4. **交付**:原生页共享其组件支持的配色、字体、圆角等主题能力;杂志封面、分栏与特色版式只在有相应布局实现的页面出现。没有运行态证据时明确标记“主题已绑定,跨页面视觉待验证”,不能用编译成功、资源齐全或 fallback 看起来正确代替验收。
|
|
@@ -152,7 +152,7 @@ Fast / Plan 是面向用户的模式名称,仅在首轮澄清后的模式路
|
|
|
152
152
|
|
|
153
153
|
首轮澄清结束后,编排按 [模式路由](design-mode.md) 处理尚未明确的执行方式,并按 [导航决策](navigation-decision.md) 由 AI 确定平台导航或自定义导航及布局。导航没有独立选择或确认轮,用户主动指定时沿用;Plan 将 AI 建议随整体方案展示。`intake.confirmed` 仅表示需求澄清完成,不表示方案获批。
|
|
154
154
|
|
|
155
|
-
视觉方向与后续映射统一写入 brief 的 `visualSelection
|
|
155
|
+
视觉方向与后续映射统一写入 brief 的 `visualSelection`;Plan 没有明确完整视觉方向时,必须使用“应用设计风格”交互展示共用规则生成的三套候选。未选候选不进入有效范围,失效推导同步移除。
|
|
156
156
|
|
|
157
157
|
## 搭建计划展示
|
|
158
158
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# 表单样式与提交页背景
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
表单通过平台已有变量表达不同风格。按 [整体主题规则](application-theme-consistency.md#导航与应用框架) 将提交、编辑和记录详情与导航、应用框架、自定义页面一起设计,补齐控件、标签、分组、背景和状态。先沿用选中主题,再按填写场景确定具体值,同类表单保持一致。
|
|
4
4
|
|
|
5
5
|
## 应用风格先于表单选型
|
|
6
6
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# 平台导航与自定义导航决策
|
|
2
2
|
|
|
3
|
-
首轮需求澄清完成后读取本文。Fast 与 Plan 均由 AI 根据 brief 中的有效任务和入口建议确定导航方式、布局和菜单样式;入口尚待判断时,先按 [
|
|
3
|
+
首轮需求澄清完成后读取本文。Fast 与 Plan 均由 AI 根据 brief 中的有效任务和入口建议确定导航方式、布局和菜单样式;入口尚待判断时,先按 [判断是否分前后台](../../yida-requirement-analysis/references/experience-groups.md) 补齐。
|
|
4
4
|
|
|
5
5
|
## 先判断入口,再分别选择菜单
|
|
6
6
|
|
|
7
7
|
- 服务前台:默认在一个自定义页面内完成已选任务,并设计自己的菜单;只有一个任务时可不设菜单。用户明确要求使用原生页面时优先沿用。
|
|
8
|
-
-
|
|
8
|
+
- 业务后台或不分前后台的系统:按操作效率选择自定义页面或宜搭原生页面;默认由平台导航组织跨模块入口。自定义页面只实现业务内容,同任务分类使用页内 Tab,不因此再生成一套管理菜单。
|
|
9
9
|
- 首页承载按 [首页按任务选择](../../yida-requirement-analysis/references/experience-groups.md#首页按任务选择) 决定:可用门户式业务工作台或直接进入原生业务页;驾驶舱需要独立的分析任务依据。
|
|
10
10
|
- 为每个入口写出用户、任务、访问方式和菜单,并按下表确定配置范围。
|
|
11
11
|
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
执行时按 [导航壳配置](../../yida-nav-shell/SKILL.md#必做配置) 应用对应范围,并打开各入口链接验证实际效果。
|
|
19
19
|
|
|
20
|
-
按 [访问态入口契约](../../yida-app/references/entry-navigation.md#每个入口都确定首页与菜单顺序)
|
|
20
|
+
按 [访问态入口契约](../../yida-app/references/entry-navigation.md#每个入口都确定首页与菜单顺序) 保存每个业务入口的菜单顺序、默认页面及首屏任务。平台导航与自定义导航都必须落实排序;管理端不强制创建首页,前台页面不自动进入管理菜单。隐藏设置、入口路径、实际默认页面和权限分别验证。
|
|
21
21
|
|
|
22
22
|
## 应用工作区的选择依据
|
|
23
23
|
|
|
@@ -25,6 +25,8 @@
|
|
|
25
25
|
2. 已有业务应用的局部增改沿用现有导航;显式窄范围按 `explicitScope.allowInferredResources=false` 执行,只处理用户指定的资源和设置。
|
|
26
26
|
3. 新建完整应用默认采用宜搭原生导航,组织表单、审批、数据管理等业务入口。只有明确的应用级品牌菜单或特殊导航交互需求时才采用自定义导航,并在 `reason` 写明具体需求依据。保留筛选、分页、草稿或做同任务 Tab 不是替换平台导航的理由。
|
|
27
27
|
|
|
28
|
+
菜单与布局明确后,按 [导航与应用框架](application-theme-consistency.md#导航与应用框架) 将外观纳入整体应用设计。模板提供导航 token 和导航明暗,业务规划决定菜单结构和布局;前台、后台、表单、详情与自定义页面保持同一设计语言。
|
|
29
|
+
|
|
28
30
|
## 根据场景确定导航布局
|
|
29
31
|
|
|
30
32
|
AI 在已确定的导航方式内,结合业务模块数量、层级、切换频率、内容宽度和目标设备确定布局;用户已明确布局或提供参考时优先沿用。
|
|
@@ -40,7 +42,7 @@ AI 在已确定的导航方式内,结合业务模块数量、层级、切换
|
|
|
40
42
|
|
|
41
43
|
## 方案讨论与确认
|
|
42
44
|
|
|
43
|
-
|
|
45
|
+
导航作为业务方案的一部分说明:例如“客户在前台预约,员工通过后台菜单维护商品、资讯和处理预约”。默认方案明确时不另设“平台还是自绘”的强制技术选择题;用户主动讨论或明确选择时,保留其要求并说明影响范围。
|
|
44
46
|
|
|
45
47
|
- Plan:在整体方案中展示各入口的导航归属与管理页只实现业务内容的边界,随整体方案确认;已展示方案的导航归属发生实质变更时,按现有修订与确认流程处理。
|
|
46
48
|
- Fast:说明并实施已记录的选择,不新增导航审批环节;保留既有明确要求和局部修改范围。
|
|
@@ -334,8 +334,12 @@
|
|
|
334
334
|
--pod-nav-menu-item-height: 36px;
|
|
335
335
|
--pod-nav-menu-item-padding: 8px;
|
|
336
336
|
--pod-nav-menu-item-radius: var(--pod-sm-border-radius, 8px);
|
|
337
|
+
--pod-nav-menu-item-border: none;
|
|
338
|
+
--pod-nav-menu-item-hover-border: var(--pod-nav-menu-item-border);
|
|
339
|
+
--pod-nav-menu-item-selected-border: var(--pod-nav-menu-item-border);
|
|
337
340
|
--pod-nav-menu-font-size: 14px;
|
|
338
341
|
--pod-nav-menu-item-selected-font-weight: 400;
|
|
342
|
+
--pod-nav-menu-item-selected-shadow: none;
|
|
339
343
|
--pod-nav-menu-line-height: 20px;
|
|
340
344
|
--pod-nav-menu-icon-size: 16px;
|
|
341
345
|
--pod-nav-menu-arrow-icon-size: 12px;
|
|
@@ -374,6 +378,22 @@ body.pod-premium.page-type-submit .vc-shell-without-nav.pod-premium {
|
|
|
374
378
|
background-size: cover;
|
|
375
379
|
}
|
|
376
380
|
|
|
381
|
+
/* 原生详情属于内容区,独立页面和抽屉内都沿用内容画布与前景。 */
|
|
382
|
+
body.pod-premium.page-type-detail .vc-shell-without-nav.pod-premium {
|
|
383
|
+
background-color: var(--pod-page-bg-color, var(--color-white, #fff));
|
|
384
|
+
--pod-theme-text-color: var(--color-text1-4, #202020);
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
/* 详情顶栏的独立图标使用内容文字色,保留按钮自身的禁用状态。 */
|
|
388
|
+
body.pod-premium.page-type-detail .top-banner-area
|
|
389
|
+
.next-yida-button-iconOnly:not([disabled]):not(.disabled) .next-icon {
|
|
390
|
+
color: var(--color-text1-3, #737373);
|
|
391
|
+
}
|
|
392
|
+
body.pod-premium.page-type-detail .top-banner-area
|
|
393
|
+
.next-yida-button-iconOnly:not([disabled]):not(.disabled):hover .next-icon {
|
|
394
|
+
color: var(--color-text1-4, #202020);
|
|
395
|
+
}
|
|
396
|
+
|
|
377
397
|
/* 按实际底栏类型适配 PC 固定提交栏,不按有无导航判断。
|
|
378
398
|
* 排除 DATA_MANAGE 和容器内 sticky 模式;抽屉提交标记按平台规则优先。
|
|
379
399
|
* 管理页、旧主题、移动端继续由各自布局负责占位。 */
|
|
@@ -523,3 +543,45 @@ body.pod-premium.page-type-submit
|
|
|
523
543
|
--pod-nav-action-bg-hover-color: rgba(255, 255, 255, 0.12);
|
|
524
544
|
--pod-nav-action-bg-active-color: rgba(255, 255, 255, 0.16);
|
|
525
545
|
}
|
|
546
|
+
|
|
547
|
+
/* openyida-navigation-shape:start */
|
|
548
|
+
/* Side/L navigation and top tabs share the same theme-defined menu shape.
|
|
549
|
+
* Border widths stay constant between states; border-box keeps row height stable. */
|
|
550
|
+
.pod-premium .deep-shell-nav-menu-content .next-nav-item,
|
|
551
|
+
.pod-premium .deep-shell-nav-tab-list .next-nav-item {
|
|
552
|
+
box-sizing: border-box;
|
|
553
|
+
border-radius: var(--pod-nav-menu-item-radius, 8px);
|
|
554
|
+
border: var(--pod-nav-menu-item-border, none);
|
|
555
|
+
}
|
|
556
|
+
/* Native inner rows also have a fixed minimum height. Fit them inside the
|
|
557
|
+
* bordered item instead of letting a thick outline push content below it. */
|
|
558
|
+
.vc-shell.pod-premium .next-nav.next-line.next-ver.deep-shell-nav-menu-content:not(.next-icon-only) .next-nav-item.next-menu-item > .next-menu-item-inner,
|
|
559
|
+
.vc-shell.pod-premium .next-shell-header .next-shell-navigation .next-nav.next-line.next-hoz.deep-shell-nav-tab-list .next-nav-item.next-menu-item > .next-menu-item-inner {
|
|
560
|
+
box-sizing: border-box;
|
|
561
|
+
height: 100% !important;
|
|
562
|
+
min-height: 0 !important;
|
|
563
|
+
}
|
|
564
|
+
.pod-premium .deep-shell-nav-menu-content .next-nav-item:hover,
|
|
565
|
+
.pod-premium .deep-shell-nav-tab-list .next-nav-item:hover {
|
|
566
|
+
border: var(--pod-nav-menu-item-hover-border, var(--pod-nav-menu-item-border, none));
|
|
567
|
+
}
|
|
568
|
+
/* Platform top tabs use transparent backgrounds and zero margin !important.
|
|
569
|
+
* Match the header scope so theme surfaces and spacing can reveal their shape. */
|
|
570
|
+
.vc-shell.pod-premium .next-shell-header .next-shell-navigation .next-nav.next-line.next-hoz.deep-shell-nav-tab-list .next-nav-item.next-menu-item {
|
|
571
|
+
margin-inline: calc(var(--pod-nav-menu-gap, 8px) / 2) !important;
|
|
572
|
+
}
|
|
573
|
+
.vc-shell.pod-premium .next-shell-header .next-shell-navigation .next-nav.next-line.next-hoz.deep-shell-nav-tab-list .next-nav-item.next-menu-item:hover {
|
|
574
|
+
background: var(--pod-nav-menu-bg-hover-color) !important;
|
|
575
|
+
color: var(--pod-nav-item-text-hover-color) !important;
|
|
576
|
+
}
|
|
577
|
+
.vc-shell.pod-premium .next-shell-header .next-shell-navigation .next-nav.next-line.next-hoz.deep-shell-nav-tab-list .next-nav-item.next-menu-item.next-selected {
|
|
578
|
+
background: var(--pod-nav-menu-bg-selected-color) !important;
|
|
579
|
+
color: var(--pod-nav-item-text-selected-color) !important;
|
|
580
|
+
}
|
|
581
|
+
/* Selected state wins over hover, retaining the original inset-shadow marker. */
|
|
582
|
+
.pod-premium .deep-shell-nav-menu-content .next-nav-item.next-selected,
|
|
583
|
+
.pod-premium .deep-shell-nav-tab-list .next-nav-item.next-selected {
|
|
584
|
+
border: var(--pod-nav-menu-item-selected-border, var(--pod-nav-menu-item-border, none));
|
|
585
|
+
box-shadow: var(--pod-nav-menu-item-selected-shadow, none);
|
|
586
|
+
}
|
|
587
|
+
/* openyida-navigation-shape:end */
|
|
@@ -13,7 +13,7 @@ Fast、Plan 和单页设计共用 [主题索引](../templates/design-themes/inde
|
|
|
13
13
|
> AI 补齐
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
将“简洁、专业”等描述落实为导航、应用框架、表单、记录详情和自定义页面的表面层次、边界强度、形状分工、文字节奏、色彩强调和组件状态。行业、颜色、主题名称或“有图表/表格/右栏”等公共组件不能单独决定主题。索引摘要用“深色/浅色导航”和“深色/浅色内容界面”自然描述明暗关系;默认选择浅色内容主题,已明确暗色、夜间或同等视觉要求时选择对应暗色内容主题。导航明暗采用最终主题模板的 `navTheme`,用户明确的导航明暗作为主题筛选约束,不在主题选定后独立猜测或覆盖。
|
|
17
17
|
|
|
18
18
|
## 先读摘要,再读选中主题
|
|
19
19
|
|
|
@@ -21,7 +21,7 @@ Fast、Plan 和单页设计共用 [主题索引](../templates/design-themes/inde
|
|
|
21
21
|
2. 对照摘要中的表面、轮廓、形状、文字、强调方式及偏离风险,选择最符合当前视觉要求的主题。不按关键词数量打分,不维护另一套权重或风格注册表。
|
|
22
22
|
3. 保留摘要中的适用条件。图表、量表、记录栈等仅按真实内容启用;没有某种内容不代表主题不适用,也不能为体现风格新增业务模块。未写明的实现细节留到主题确定后处理。
|
|
23
23
|
4. 选定后通过该索引记录的 `templatePath`,相对 `yida-design/` 读取一份完整主题。沿用已确认选择,不再重新推荐;用户要求比较时,按所在流程完成选择后再读全文。
|
|
24
|
-
5.
|
|
24
|
+
5. 项目要求与主题核心特征冲突时,可以选择自由创意,也可重新匹配摘要中的其他主题;品牌色等允许的项目输入不构成更换主题的理由。用户明确的导航明暗与候选主题 `navTheme` 冲突时,改选符合要求的主题,不覆盖模板的导航明暗。
|
|
25
25
|
|
|
26
26
|
主题 ID、模板路径和候选比较保留在内部实施记录;Plan 写 `visualStyle.internal.selectedTheme`,Fast 沿用 brief 的视觉选择。最终文档正文和用户可见方案只写当前项目的视觉效果、配色和使用理由,不展示模板路径或内部选择过程;design.md frontmatter 只保留 applicationStyle 配方版本与模式,不携带模板身份。
|
|
27
27
|
|
|
@@ -29,13 +29,13 @@ Fast、Plan 和单页设计共用 [主题索引](../templates/design-themes/inde
|
|
|
29
29
|
|
|
30
30
|
比较过程只使用索引摘要,遵守上述完整模板读取边界。
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
Fast 与 Plan 使用下面同一套三方向生成规则和候选字段,不得分别发明候选。已有明确完整风格、可信品牌规范、参考材料或应用主题时直接在其范围内完善构图与细节,不生成无意义的替代项;否则恰好生成三套完整方向:两个命名模板方向和一个独立自由创意方向。
|
|
33
33
|
|
|
34
|
-
1.
|
|
35
|
-
2.
|
|
36
|
-
3.
|
|
34
|
+
1. **形成三套方向**:第一套以最直接、稳妥的业务解法为参照,另外两套围绕相同业务任务发展更有表现力但仍可实现的方案。每套都写 `directionId`、`directionLabel`、`description`、`recommendationReason`、`themeId`、`primaryColor` 和 `primaryColorName`;导航结构沿用业务规划,命名模板的导航明暗不作为候选输入;自由创意选定后按项目设计明确填写导航明暗与配套 Token。
|
|
35
|
+
2. **保证真实差异**:每个方向在构图、字体层级、表面层次、色彩关系中至少两项有明显差异;用已有内容建立重点,保留字段、操作、权限和状态。三套方向分别绑定三个不同的合法主题,其中第三项使用 free-creative 独立推演,主题索引摘要负责说明导航和内容界面的明暗。
|
|
36
|
+
3. **按流程选择**:Fast 在内部比较三套方向并选择更适合的一套;Plan 在用户没有明确完整风格时必须展示同样三套方向并通过 `ask_human` 选择。
|
|
37
37
|
4. **把质感写成具体做法**:说明主次区域、数字与标题层级、背景与容器关系、间距与对齐、主操作与状态色的用法。高级感来自这些细节的一致性;表格、批量操作和异常识别保持清晰高效。
|
|
38
|
-
5. **一次交接**:将选定风格及业务理由写入 `visualDirection.description`,主色、背景和强调色的关系写入 `colorStrategy.usage`;AI 决定标记 `ai_default
|
|
38
|
+
5. **一次交接**:将选定风格及业务理由写入 `visualDirection.description`,主色、背景和强调色的关系写入 `colorStrategy.usage`;AI 决定标记 `ai_default`。比较在本轮规划内完成,后续直接复用。Fast 只对用户展示选定风格和适用场景;Plan 在无明确完整风格时展示三套候选并请用户选择。
|
|
39
39
|
|
|
40
40
|
主色优先采用用户要求、品牌和参考图中的依据。缺少明确依据时,结合使用环境和整体构图确定配色;业务类型用于判断任务和密度,具体颜色由本项目设计确定。已确认的主色可以保留,创意也可通过构图、层级和材质表达。
|
|
41
41
|
|
|
@@ -43,8 +43,8 @@ Fast、Plan 和单页设计共用 [主题索引](../templates/design-themes/inde
|
|
|
43
43
|
|
|
44
44
|
| 流程 | 选择与执行 |
|
|
45
45
|
| --- | --- |
|
|
46
|
-
| Fast |
|
|
47
|
-
| Plan | 按 [Plan 视觉候选规则](../sub_skill/yida-design-plan/references/visual-theme-selection.md)
|
|
46
|
+
| Fast | 按上面的共用规则生成三套方向,在内部选出推荐项并写入 brief;命名模板读取选中模板,自由创意独立编写设计与 Token,直接维护项目 `design.md`,不增加方案确认步骤 |
|
|
47
|
+
| Plan | 按 [Plan 视觉候选规则](../sub_skill/yida-design-plan/references/visual-theme-selection.md) 展示同一组三套方向(两个模板方向和一个独立自由创意选项);没有明确完整风格时固定通过 `ask_human` 选择;由 CLI 派生项目文档 |
|
|
48
48
|
| 单页设计 | 先读当前应用 `design.md` 和主题证据;沿用已确认主题,只补当前页面。尚无主题契约且需选型时读取同一索引,保持现有业务功能与应用主题 |
|
|
49
49
|
|
|
50
50
|
## 将主题写成项目设计
|
|
@@ -55,6 +55,7 @@ Fast、Plan 和单页设计共用 [主题索引](../templates/design-themes/inde
|
|
|
55
55
|
- `tokens.application-global` 提供平台与页面共享的基础变量;保留 `tokens.custom-page` 中已有的独立页面语义变量,不能清空。分组仅用于组织,CSS 变量取递归叶子的原名。
|
|
56
56
|
- 字号、字重、行高与间距的默认值及 Tooltip 等基础契约按 [基础变量契约](../templates/design-themes/basic-tokens.json) 执行;组件选择哪些变量、圆角档位、表面和留白节奏由选中主题决定。
|
|
57
57
|
- 品牌色与整体氛围按 [主题与 token](../workflow/step-2-theme-system.md) 和 [用户配色优先级](../workflow/output-design.md#用户配色与模板的优先级) 处理。保留主题中可复用的层次、形状与组件机制,不能以固定灰阶覆盖用户整体配色。
|
|
58
|
+
- 导航按 [整体主题规则](application-theme-consistency.md#导航与应用框架) 保留完整 token、状态和消费关系;命名模板的导航明暗随模板派生,自由创意明确设计。
|
|
58
59
|
- 页面任务和布局来自当前业务事实,主题负责呈现。没有真实内容支撑的图形、指标、侧栏或特色配方不启用;同一应用通过页面局部变体保持统一基础语言。
|
|
59
60
|
- 按[指标卡与按钮配色](application-theme-consistency.md#指标卡与按钮配色)决定信息和操作的主次,将搭配写入项目组件规则。按钮和指标可用与品牌不同但协调的颜色;主题里的深色面板、近黑按钮都是可选表达,不能覆盖项目配色决定。
|
|
60
61
|
- 按 [视觉结构配方](visual-scaffold-recipes.md) 把真实区块映射为页面布局与八项设计要点,按 [页面质量门禁](page-quality-gates.md) 写验收条件。配方是交接辅助,不能覆盖主题节奏或生成新的业务模块。
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
2. 不依赖 `fonts.googleapis.com`。使用主题字体角色与可用系统字体回退,中文字体可用 `-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif`;远程字体仅使用已验证的 `g.alicdn.com` 资源。
|
|
9
9
|
3. 数据页、列表、工具和详情以业务内容与操作为主,装饰不干扰信息阅读。
|
|
10
10
|
4. 本文件不产出 JSX,也不替代 `design.md`;实现阶段读取项目设计与实现技能。
|
|
11
|
-
5.
|
|
11
|
+
5. 默认浅色内容画布;暗色需要用户明确要求或已确认方向。导航和内容界面的明暗分别描述,导航明暗采用所选主题模板的 `navTheme`,不因深色导航把内容画布一并变暗。
|
|
12
12
|
|
|
13
13
|
## 五项应用检查
|
|
14
14
|
|
|
@@ -202,23 +202,36 @@ def validate(skill_root: Path) -> list[str]:
|
|
|
202
202
|
errors.append(f"{label} contentTone 必须是 light 或 dark")
|
|
203
203
|
if theme.get("navTheme") not in {"light", "dark"}:
|
|
204
204
|
errors.append(f"{label} navTheme 必须是 light 或 dark")
|
|
205
|
+
if not isinstance(theme.get("navigationSummary"), str) or not theme["navigationSummary"].strip():
|
|
206
|
+
errors.append(f"{label} navigationSummary 必须说明导航与应用整体风格的关系")
|
|
205
207
|
if not isinstance(theme_id, str) or not re.fullmatch(r"[a-z][a-z0-9]*(?:-[a-z0-9]+)*", theme_id):
|
|
206
208
|
errors.append(f"{label} themeId 格式非法")
|
|
207
209
|
continue
|
|
208
|
-
if template_path
|
|
210
|
+
if template_path != f"templates/design-themes/{theme_id}/design.md":
|
|
209
211
|
errors.append(f"{label} templatePath 必须指向公共主题目录中的同名模板")
|
|
210
212
|
continue
|
|
211
213
|
full_path = (skill_root / template_path).resolve()
|
|
212
|
-
if full_path.parent
|
|
214
|
+
if full_path.parent != (template_dir / theme_id).resolve():
|
|
213
215
|
errors.append(f"{label} templatePath 不得越出公共主题目录")
|
|
214
216
|
continue
|
|
215
|
-
if theme.get("
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
217
|
+
if theme.get("mode") not in ("template", "creative"):
|
|
218
|
+
errors.append(f"{label} mode 必须是 template 或 creative")
|
|
219
|
+
for field, filename in (("cssTemplatePath", "app_theme.css"), ("formLayoutPath", "form-layout.json")):
|
|
220
|
+
expected = f"templates/design-themes/{theme_id}/{filename}"
|
|
221
|
+
if theme.get(field) != expected or not (skill_root / expected).is_file():
|
|
222
|
+
errors.append(f"{label} 缺少配对资产 {field}: {expected}")
|
|
223
|
+
if full_path.parent.is_dir() and {p.name for p in full_path.parent.iterdir()} != {"design.md", "app_theme.css", "form-layout.json"}:
|
|
224
|
+
errors.append(f"{label} 主题目录必须只包含 design.md、app_theme.css、form-layout.json 三个文件")
|
|
225
|
+
try:
|
|
226
|
+
css = (full_path.parent / "app_theme.css").read_text(encoding="utf-8")
|
|
227
|
+
for name, pattern in (("--color-brand1-6", r"\{\{PRIMARY_COLOR\}\}"), ("--color-brand1-1", r"<生成实际色值:--color-brand1-6 [^;\n]+>")):
|
|
228
|
+
if not re.search(r"^\s*" + re.escape(name) + r":\s*" + pattern + r";", css, re.M):
|
|
229
|
+
errors.append(f"{label} app_theme.css {name} 必须保留项目颜色占位")
|
|
230
|
+
layout = json.loads((full_path.parent / "form-layout.json").read_text(encoding="utf-8"))
|
|
231
|
+
if not isinstance(layout, list) or not layout:
|
|
232
|
+
errors.append(f"{label} form-layout.json 必须是非空组件数组")
|
|
233
|
+
except (OSError, ValueError) as exc:
|
|
234
|
+
errors.append(f"{label} 主题配对资产不可读:{exc}")
|
|
222
235
|
try:
|
|
223
236
|
text = full_path.read_text(encoding="utf-8")
|
|
224
237
|
frontmatter = parse_frontmatter(text)
|
|
@@ -227,6 +240,19 @@ def validate(skill_root: Path) -> list[str]:
|
|
|
227
240
|
continue
|
|
228
241
|
if frontmatter.get("themeId") != theme_id:
|
|
229
242
|
errors.append(f"{template_path} 的 themeId 与索引不一致")
|
|
243
|
+
if theme.get("mode") != "creative":
|
|
244
|
+
nav_theme = frontmatter.get("themeProfile", {}).get("navTheme", frontmatter.get("navTheme"))
|
|
245
|
+
if nav_theme not in {"light", "dark"}:
|
|
246
|
+
errors.append(f"{template_path} 的 navTheme 必须是 light 或 dark")
|
|
247
|
+
style_summary = theme.get("styleSummary", "")
|
|
248
|
+
nav_match = re.search(r"(深色|浅色)导航", style_summary)
|
|
249
|
+
content_match = re.search(r"(深色|浅色)内容界面", style_summary)
|
|
250
|
+
if not nav_match or not content_match:
|
|
251
|
+
errors.append(f"{label} styleSummary 必须用自然语言说明深色或浅色导航,以及深色或浅色内容界面")
|
|
252
|
+
elif nav_theme in {"light", "dark"} and nav_match.group(1) != {"light": "浅色", "dark": "深色"}[nav_theme]:
|
|
253
|
+
errors.append(f"{label} styleSummary 的导航明暗与主题模板 navTheme 不一致")
|
|
254
|
+
if theme.get("navTheme") != nav_theme:
|
|
255
|
+
errors.append(f"{label} navTheme 与主题模板不一致")
|
|
230
256
|
validate_tokens(frontmatter, text, template_path, contract, errors)
|
|
231
257
|
headings = re.findall(r"^## (.+)$", text, re.M)
|
|
232
258
|
if headings != list(REQUIRED_HEADINGS):
|
|
@@ -13,7 +13,7 @@ description: Plan 模式的视觉设计分支。基于需求选择视觉方向
|
|
|
13
13
|
|
|
14
14
|
输入为共享的 `.cache/openyida/<项目名>/requirement-brief.json`。
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
已有明确的完整视觉方向、可信品牌规范、参考材料或应用主题时直接采用。除此之外,按[设计方向比较](../../references/theme-selection.md#设计方向比较)生成恰好三套完整方向(两个模板方向和一个独立自由创意选项),并按[视觉方向选择](references/visual-theme-selection.md)交给 `yida-app` 通过 `ask_human` 统一呈现;不再以“用户是否主动要求比较”作为触发条件。用户确认主题前只读主题索引中的精简风格摘要,不读取候选模板全文;确认后写入一致的 `visualDirection`、`selectedTheme`、`colorStrategy` 和导航结构,再读取选中的一份完整模板;模板方向的导航明暗由模板 `navTheme` 派生;自由创意按业务独立编写设计决策、导航明暗和 Token,不要求匹配模板。
|
|
17
17
|
|
|
18
18
|
## 阶段二:完成页面视觉应用
|
|
19
19
|
|
|
@@ -21,10 +21,20 @@ description: Plan 模式的视觉设计分支。基于需求选择视觉方向
|
|
|
21
21
|
|
|
22
22
|
1. 读取 CLI 返回的 `authoring-context.md` 与 [紧凑计划契约](references/build-plan-compact-schema.md),沿用 pageId 和 sceneKey。
|
|
23
23
|
2. 为每个真实自定义页填写 `firstScreenFocus`、`layout`、`primaryAction`、`responsive` 与 `acceptanceChecks`;前四项为具体非空说明,验收为非空字符串数组。公共主题不能代替这些决定。纯原生表单应用不增加虚构页记录。
|
|
24
|
-
3.
|
|
24
|
+
3. 按 [整体主题规则](../../references/application-theme-consistency.md#导航与应用框架) 核对导航、应用框架、原生表单、记录详情与自定义页面的配色、形状、文字、间距和状态。每项必须保留 `visualMemoryApplications` 数组;没有匹配的主题记忆点时填写 `[]`,不要省略或写成字符串。按实际内容补页面局部差异与素材策略。完整主题由 CLI 注入,复杂组件定制时再读模板对应章节。
|
|
25
25
|
4. 全局和局部 token 遵守 [基础变量契约](../../templates/design-themes/basic-tokens.json),明确项目差异写 `visualStyle.tokens`,主色写 `forUser.colorStrategy.primaryColor`;沿用主题的字号、间距和组件圆角。
|
|
26
26
|
5. CLI 按 [公共输出契约](../../workflow/output-design.md) 生成 frontmatter、anchor 索引和五章正文,并调用同一 `check-design` 校验。缺少逐页决定时只保留可预览草稿,补齐后再生成最终产物;旧计划同样不得以继承主题套话补过门槛。
|
|
27
27
|
|
|
28
|
-
用户选择整体暗色或黑色主题时,按 [暗色主题浮层适配](../../references/theme/theme-token-presets.md#暗色主题浮层适配) 补齐 `visualStyle.tokens
|
|
28
|
+
用户选择整体暗色或黑色主题时,按 [暗色主题浮层适配](../../references/theme/theme-token-presets.md#暗色主题浮层适配) 补齐 `visualStyle.tokens`;内容界面明暗与导航明暗分别描述,导航明暗仍由所选主题模板确定。
|
|
29
29
|
|
|
30
30
|
首版提交前,将基础视觉与 `pageApplications` 一次补齐到已有 `visual.json`。仅超大需求需要中间展示时才按 [按模块更新方案](../../../yida-app/workflow/incremental-preview.md) 提交。主流程负责生成方案、展示和确认,主题 CSS 使用 CLI 返回的 `outputs.theme`。
|
|
31
|
+
|
|
32
|
+
## 校验失败时定点修复
|
|
33
|
+
|
|
34
|
+
遇到 `DESIGN_PLAN_PAGE_BINDINGS_REQUIRED` 时,保留现有计划和预览,按以下顺序修复:
|
|
35
|
+
|
|
36
|
+
1. **定位**:读取错误 `details.issues` 中每项的 `sourcePath`、`path` 和 `code`,修改对应源文件。若问题来自 `business.json`,先按已确认需求修正页面事实,再核对视觉绑定。
|
|
37
|
+
2. **修改**:以 `business.json` 的 `facts.pages.customPageDetails` 为准,让 `visual.json` 的 `facts.visualStyle.forUser.pageApplications` 与自定义页一一对应;原生表单和数据模型不加入。按 `missing_page` 补项、`unexpected_page` 移除多余绑定、`duplicate_page` 合并重复项;按 `expected_array`、`expected_object`、`expected_nonempty_string` 修正指定字段。每项 `visualMemoryApplications` 必须为数组,无适用内容填 `[]`。
|
|
38
|
+
3. **回读并重试**:确认修改已写入源文件,再重试原 `materialize` 命令。写入失败、跳过或结果未知时,先回读核实,不能仅凭发起过工具调用认定修复完成。
|
|
39
|
+
|
|
40
|
+
修复仅涉及错误字段,保留 `build-plan.json`、`business.json`、`visual.json` 和已有预览;不因字段校验失败删除目录、重新 `init`、重写整份 PRD 或扩大需求范围。
|
|
@@ -94,7 +94,7 @@ CLI 校验源事实,使用预置模板整批生成 `prd.md`、`design.md` 和
|
|
|
94
94
|
"forUser": {
|
|
95
95
|
"visualDirection": {"label":"清晰柔和","description":"突出待办与业务状态,浅色界面搭配暖棕色重点操作","source":"user_selected"},
|
|
96
96
|
"colorStrategy": {"primaryColor":"#6F4E37","primaryColorName":"暖棕色","source":"user_selected","usage":"暖棕浅底、白色卡片与品牌焦点协调"},
|
|
97
|
-
"navigationStyle": {"structure":"side","tone":"light","source":"user_selected","selectionReason":"
|
|
97
|
+
"navigationStyle": {"structure":"side","tone":"light","toneSource":"theme_derived","source":"user_selected","selectionReason":"沿用已选的左侧导航;浅色导航由主题模板派生"},
|
|
98
98
|
"iconSystem": {"library":"lucide-react","mappings":{"新建采购":"Plus"}},
|
|
99
99
|
"pageApplications": [
|
|
100
100
|
{"pageId":"page-1","primaryAction":"列表标题右侧的新建采购按钮打开原生采购表单,成功后刷新列表","firstScreenFocus":"先看到待处理采购数量与最紧急记录,主操作紧邻列表标题","layout":"顶部单行筛选与主操作,下方连续采购列表;必要提示放列表右侧窄栏,列表随记录自然增长","responsive":"窄屏筛选换行,提示移到列表下方,表格保留关键列并允许横向滚动","acceptanceChecks":["首屏可找到待处理记录与新建采购操作","窄屏主操作和错误恢复入口可用"],"visualMemoryApplications":[{"name":"摘要拼接组","renderPolicy":"prd_match_only","target":"采购待办摘要","reason":"页面已有并列的待办状态"}]}
|
|
@@ -106,7 +106,7 @@ CLI 校验源事实,使用预置模板整批生成 `prd.md`、`design.md` 和
|
|
|
106
106
|
}
|
|
107
107
|
```
|
|
108
108
|
|
|
109
|
-
- 已选主题取当前上下文;主色为 6 位 HEX。导航 structure
|
|
109
|
+
- 已选主题取当前上下文;主色为 6 位 HEX。导航 `structure` 为模型维护的 top/side;`tone` 为 CLI 从所选主题模板 `navTheme` 派生的 light/dark,并带 `toneSource=theme_derived`,模型不得修改。导航与内容界面的明暗分开记录。
|
|
110
110
|
- 每个实际自定义页使用相同 pageId,最终物化前必须填写 firstScreenFocus、layout、primaryAction、responsive 四项具体说明和 acceptanceChecks 非空字符串数组;内容须具体到当前页,不能只写继承主题。纯原生页无需增加记录。
|
|
111
111
|
- 视觉记忆点按适用条件绑定真实区块,无匹配时保留空数组。草稿缺逐页决定可预览,最终产物拒绝缺项;旧计划沿用同一规则,补齐后再物化。
|
|
112
112
|
- `visualStyle.evidence/constraints` 保留实际视觉依据和约束。
|
|
@@ -158,3 +158,5 @@ PRD 实施交接中的 `pages[].navigationPolicy` 与 `pageSpecHandoff` 同级
|
|
|
158
158
|
## 可选字段 patch 与完成校验
|
|
159
159
|
|
|
160
160
|
CLI 集中返回可独立检查的问题及字段路径,再执行完整业务、主题和 HTML 校验。按问题清单一次补齐源事实后重试;草稿空值表示待规划,全部校验通过才写入派生产物。仅做诊断时使用 `--check`。
|
|
161
|
+
|
|
162
|
+
自由创意(`free-creative`)没有模板导航默认值:在 `navigationStyle.tone` 明确填写项目设计的 `light` 或 `dark`,CLI 标记 `toneSource=project_defined`;此路径可通过 patch 调整 tone,并同步配套导航 Token。命名模板仍按模板派生导航明暗。
|
package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/references/build-plan-schema.md
CHANGED
|
@@ -317,10 +317,10 @@
|
|
|
317
317
|
| constraints | 保留 brandColors、preferredTone、forbiddenColors、avoidPatterns、referenceMaterials、accessibilityLevel |
|
|
318
318
|
| forUser.visualDirection | 已选方向的 label、description、source |
|
|
319
319
|
| forUser.colorStrategy | 项目主色、来源与用法;格式沿用紧凑契约 |
|
|
320
|
-
| forUser.navigationStyle | structure=top/side
|
|
320
|
+
| forUser.navigationStyle | structure=top/side 由业务导航决定;tone=light/dark 与 toneSource=theme_derived 由 CLI 从所选主题模板派生;另含 source、selectionReason |
|
|
321
321
|
| internal.selectedTheme | themeId、source、customText;label、templatePath 和 summary 由主题索引补齐 |
|
|
322
322
|
| forUser.themeProfile | 由选中主题 token、正文规则和项目视觉选择派生的只读摘要 |
|
|
323
|
-
| forUser.pageApplications | 按 pageId 对应实际页面;最终物化必填 firstScreenFocus/primaryAction/layout/responsive 非空字符串与 acceptanceChecks
|
|
323
|
+
| forUser.pageApplications | 按 pageId 对应实际页面;最终物化必填 firstScreenFocus/primaryAction/layout/responsive 非空字符串与 acceptanceChecks 非空字符串数组,按需补局部差异;visualMemoryApplications 必须为数组,无适用项填 [];记忆点含 name、renderPolicy、target、reason |
|
|
324
324
|
| forUser.iconSystem | 可选,library 为 lucide-react 或 @ant-design/icons,mappings 记录实际语义到具体组件;沿用 brief,未配置才用默认空映射 |
|
|
325
325
|
| forUser.assetStrategy | 页面图片用途、槽位与缺口,沿用[素材交接契约](../../../../yida-image-assets/references/manifest-contract.md);保留 materialStatus、pages、missingAssets、notes |
|
|
326
326
|
| forUser 的各项 Summary、styleSource、designMdReady | 从主题、项目选择和生成状态派生;已有项目差异保留 |
|
|
@@ -348,3 +348,5 @@
|
|
|
348
348
|
### 紧凑区块输入(schemaVersion 2.0)
|
|
349
349
|
|
|
350
350
|
`blocks` 支持按优先顺序填写 `{name,purpose}` 数组,两项均为非空文本,每个区块只使用这两个键。CLI 将其转换为区块说明,并在省略时派生 contentPriority 和 contentRichness.contentLayers;明确填写的内容原样保留。旧版字符串数组继续沿用原字段。业务验收条件写入 execution.acceptanceCriteria,与按资源生成的通用检查合并去重。
|
|
351
|
+
|
|
352
|
+
自由创意(`free-creative`)没有模板导航默认值:在 `navigationStyle.tone` 明确填写项目设计的 `light` 或 `dark`,CLI 标记 `toneSource=project_defined`;此路径可通过 patch 调整 tone,并同步配套导航 Token。命名模板仍按模板派生导航明暗。
|
package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/references/visual-design.md
CHANGED
|
@@ -45,7 +45,7 @@ PRD 决定页面任务、操作和内容优先级;主题决定这些内容如
|
|
|
45
45
|
|
|
46
46
|
颜色推导与 Fast 相同,直接使用所选主题的公式和项目 token,不增加 Plan 专用染色规则。应用根渐变写 `--pod-app-root-bg-image`;单页渐变与装饰在页面设计中说明作用区域,按 [背景规则](../../../workflow/output-design.md#背景颜色渐变与图片) 实现。
|
|
47
47
|
|
|
48
|
-
|
|
48
|
+
整体配色与主题的冲突按公共输出契约处理。导航和内容界面的明暗分别描述,导航明暗采用所选主题模板的 `navTheme`,既定入口范围保持不变;前台与后台可改变表达强度,但共享基础变量、字体、状态和组件语言。无法保留已选主题核心特征时回到主题选择,不在页面阶段另建主题。
|
|
49
49
|
|
|
50
50
|
## 物化与交接
|
|
51
51
|
|
|
@@ -54,3 +54,5 @@ CLI 校验主题绑定、解析变量与项目覆盖,生成正文五章,将
|
|
|
54
54
|
`build-plan.json`、PRD、设计与 HTML 对应同一 revision。CLI 调用公共 `check-design` 检查格式、变量和引用后,主题 CSS 使用返回的 `outputs.theme`。页面实现只读取最终 PRD 与 design.md;HTML 按 [展示规范](../assets/README.md#需求确认内容范围) 呈现整体风格、主色、导航与需用户补充的素材,详细逐页视觉规则保留在 design.md。
|
|
55
55
|
|
|
56
56
|
页面任务变化时同步逐页应用,主题差异变化时更新 tokens;旧输出不能手改后假装与当前计划一致。普通页面设计不重新发起一轮视觉选择提问,只有新证据造成已选方向冲突时才回到选择阶段。
|
|
57
|
+
|
|
58
|
+
自由创意(`free-creative`)没有模板导航默认值:在 `navigationStyle.tone` 明确填写项目设计的 `light` 或 `dark`,CLI 标记 `toneSource=project_defined`;此路径可通过 patch 调整 tone,并同步配套导航 Token。命名模板仍按模板派生导航明暗。
|