openyida 2026.9.21 → 2026.9.22-beta.2

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.
Files changed (334) hide show
  1. package/README.md +14 -20
  2. package/bin/yida.js +6 -11
  3. package/lib/app/app-list.js +3 -7
  4. package/lib/app/canvas-compile.js +12 -22
  5. package/lib/app/check-prd-completeness.js +0 -7
  6. package/lib/app/create-app.js +1 -4
  7. package/lib/app/create-form/args.js +12 -37
  8. package/lib/app/create-form/batch.js +11 -86
  9. package/lib/app/create-form.js +86 -193
  10. package/lib/app/create-page.js +17 -84
  11. package/lib/app/custom-theme.js +0 -11
  12. package/lib/app/form-field-validator.js +41 -26
  13. package/lib/app/form-open-guard.js +10 -97
  14. package/lib/app/get-form-config.js +0 -1
  15. package/lib/app/inline-css-guard.js +31 -1
  16. package/lib/app/services/form-compiler.js +4 -2
  17. package/lib/app/theme-from-design.js +41 -144
  18. package/lib/app/theme-presets.js +1 -1
  19. package/lib/app/update-app.js +13 -63
  20. package/lib/asset/ai-image.js +9 -59
  21. package/lib/asset/asset-cmd.js +7 -18
  22. package/lib/asset/asset-plan.js +9 -102
  23. package/lib/asset/asset-resolve.js +10 -55
  24. package/lib/asset/asset-status.js +4 -5
  25. package/lib/asset/host-capabilities.js +2 -11
  26. package/lib/asset/url-verify.js +4 -19
  27. package/lib/auth/dws-sync.js +148 -0
  28. package/lib/auth/token-auth.js +73 -9
  29. package/lib/auth/token-store.js +50 -0
  30. package/lib/connector/connector-test.js +5 -19
  31. package/lib/connector/contract.js +1 -3
  32. package/lib/core/agent-capabilities.js +16 -19
  33. package/lib/core/command-manifest.js +40 -329
  34. package/lib/core/locales/en.js +17 -74
  35. package/lib/core/locales/zh.js +16 -73
  36. package/lib/core/redact.js +10 -15
  37. package/lib/core/sample.js +30 -72
  38. package/lib/core/utils.js +4 -0
  39. package/lib/design-plan/design-plan.js +4 -51
  40. package/lib/design-plan/init.js +26 -121
  41. package/lib/design-plan/materialize.js +348 -451
  42. package/lib/design-plan/normalize.js +29 -74
  43. package/lib/design-plan/parallel.js +16 -71
  44. package/lib/design-plan/patch.js +16 -63
  45. package/lib/design-plan/preview.js +8 -6
  46. package/lib/design-plan/validate.js +11 -71
  47. package/lib/process/create-process.js +50 -84
  48. package/lib/samples/openyida-scaffold/canvas-form-drawer.canvas.jsx +90 -20
  49. package/lib/samples/openyida-scaffold/canvas-nav/content.jsx +13 -93
  50. package/lib/samples/openyida-scaffold/canvas-nav/data.jsx +18 -100
  51. package/lib/samples/openyida-scaffold/canvas-nav/mixed.jsx +4 -6
  52. package/lib/samples/openyida-scaffold/canvas-nav/shared.jsx +5 -5
  53. package/lib/samples/openyida-scaffold/canvas-nav/side.jsx +2 -1
  54. package/lib/samples/openyida-scaffold/canvas-nav/sidebar.jsx +1 -1
  55. package/lib/samples/openyida-scaffold/canvas-nav/top.jsx +9 -15
  56. package/lib/samples/yida-canvas-table-form/table-form-batch-submit.canvas.jsx +83 -9
  57. package/lib/samples/yida-rechart/trend-combo.canvas.jsx +87 -14
  58. package/package.json +1 -3
  59. package/scripts/postinstall.js +3 -3
  60. package/yida-skills/SKILL.md +16 -19
  61. package/yida-skills/references/official-example-schema-patterns.md +1 -1
  62. package/yida-skills/references/yida-api.md +0 -4
  63. package/yida-skills/skills/yida-app/SKILL.md +23 -46
  64. package/yida-skills/skills/yida-app/workflow/parallel-work.md +6 -15
  65. package/yida-skills/skills/yida-app/workflow/plan/step-1-understand.md +1 -1
  66. package/yida-skills/skills/yida-app/workflow/plan/step-2-confirm.md +1 -1
  67. package/yida-skills/skills/yida-app/workflow/plan/step-4-deliver.md +15 -29
  68. package/yida-skills/skills/yida-app/workflow/plan/workflow.md +11 -29
  69. package/yida-skills/skills/yida-app/workflow/step-1-resource-context.md +2 -4
  70. package/yida-skills/skills/yida-app/workflow/step-2-design.md +9 -23
  71. package/yida-skills/skills/yida-app/workflow/step-3-create-or-reuse-app.md +4 -6
  72. package/yida-skills/skills/yida-app/workflow/step-4-forms-processes.md +4 -15
  73. package/yida-skills/skills/yida-app/workflow/step-6-main-page.md +4 -6
  74. package/yida-skills/skills/yida-app/workflow/step-7-page-code.md +9 -15
  75. package/yida-skills/skills/yida-app/workflow/step-8-publish-navigation.md +11 -25
  76. package/yida-skills/skills/yida-app/workflow/step-9-output-finish.md +28 -68
  77. package/yida-skills/skills/yida-canvas-custom-page/SKILL.md +43 -42
  78. package/yida-skills/skills/yida-canvas-custom-page/references/canvas-style-implementation-guide.md +44 -60
  79. package/yida-skills/skills/yida-canvas-custom-page/references/canvas-theme-provider.md +50 -72
  80. package/yida-skills/skills/yida-canvas-custom-page/references/component-library-guide.md +1 -13
  81. package/yida-skills/skills/yida-canvas-custom-page/references/data-bridge-guide.md +1 -140
  82. package/yida-skills/skills/yida-canvas-custom-page/references/navigation-and-entry-guide.md +72 -101
  83. package/yida-skills/skills/yida-canvas-custom-page/references/page-generation-guide.md +32 -35
  84. package/yida-skills/skills/yida-canvas-custom-page/scripts/build-canvas-theme.js +3 -29
  85. package/yida-skills/skills/yida-canvas-custom-page/scripts/canvas-theme-provider.template.jsx +6 -69
  86. package/yida-skills/skills/yida-canvas-data-binding/SKILL.md +0 -26
  87. package/yida-skills/skills/yida-create-app/SKILL.md +0 -2
  88. package/yida-skills/skills/yida-create-form-page/SKILL.md +58 -72
  89. package/yida-skills/skills/yida-create-form-page/references/advanced-form-modes.md +5 -5
  90. package/yida-skills/skills/yida-create-form-page/references/association-form-field.md +4 -4
  91. package/yida-skills/skills/yida-create-form-page/references/batch-forms.md +5 -6
  92. package/yida-skills/skills/yida-create-form-page/references/field-definition-guide.md +19 -7
  93. package/yida-skills/skills/yida-create-form-page/references/form-field-properties.md +44 -62
  94. package/yida-skills/skills/yida-create-page/SKILL.md +6 -14
  95. package/yida-skills/skills/yida-create-process/SKILL.md +2 -13
  96. package/yida-skills/skills/yida-custom-page/SKILL.md +0 -2
  97. package/yida-skills/skills/yida-custom-page/references/design-system.md +1 -1
  98. package/yida-skills/skills/yida-dashboard/SKILL.md +4 -5
  99. package/yida-skills/skills/yida-data-management/SKILL.md +2 -4
  100. package/yida-skills/skills/yida-data-management/references/data-format-guide.md +4 -4
  101. package/yida-skills/skills/yida-design/SKILL.md +14 -29
  102. package/yida-skills/skills/yida-design/references/app/blueprint.md +70 -0
  103. package/yida-skills/skills/yida-design/references/app/navigation-patterns.md +43 -0
  104. package/yida-skills/skills/yida-design/references/app/role-journey.md +30 -0
  105. package/yida-skills/skills/yida-design/references/ask-human-interaction-contract.md +42 -67
  106. package/yida-skills/skills/yida-design/references/asset-workflow.md +2 -6
  107. package/yida-skills/skills/yida-design/references/design-mode.md +4 -4
  108. package/yida-skills/skills/yida-design/references/page-quality-gates.md +38 -26
  109. package/yida-skills/skills/yida-design/references/style-design-selection.md +137 -0
  110. package/yida-skills/skills/yida-design/references/style-designs/_design-md-template.md +185 -0
  111. package/yida-skills/skills/yida-design/references/style-designs/aqua-service-progress-dashboard.md +242 -0
  112. package/yida-skills/skills/yida-design/references/style-designs/blue-insight-operations-dashboard.md +243 -0
  113. package/yida-skills/skills/yida-design/references/style-designs/blue-productivity-insight-workbench.md +242 -0
  114. package/yida-skills/skills/yida-design/references/style-designs/command-filter-card-console.md +304 -0
  115. package/yida-skills/skills/yida-design/references/style-designs/contrast-command-analytics-workbench.md +261 -0
  116. package/yida-skills/skills/yida-design/references/style-designs/dark-stage-analytic-dashboard.md +369 -0
  117. package/yida-skills/skills/yida-design/references/style-designs/filterable-card-catalog.md +354 -0
  118. package/yida-skills/skills/yida-design/references/style-designs/green-timeline-progress-workbench.md +250 -0
  119. package/yida-skills/skills/yida-design/references/style-designs/registry.md +117 -0
  120. package/yida-skills/skills/yida-design/references/style-designs/soft-analytic-workbench.md +348 -0
  121. package/yida-skills/skills/yida-design/references/style-designs/soft-blue-grid-analytic-dashboard.md +658 -0
  122. package/yida-skills/skills/yida-design/references/style-designs/soft-bordered-analytic-workbench.md +385 -0
  123. package/yida-skills/skills/yida-design/references/style-designs/soft-curated-filter-gallery.md +300 -0
  124. package/yida-skills/skills/yida-design/references/style-designs/soft-modular-analytic-workbench.md +404 -0
  125. package/yida-skills/skills/yida-design/references/style-designs/soft-progress-analytics-workbench.md +382 -0
  126. package/yida-skills/skills/yida-design/references/style-designs/soft-timeline-analytics-workbench.md +367 -0
  127. package/yida-skills/skills/yida-design/references/style-designs/teal-rail-analytics-workbench.md +341 -0
  128. package/yida-skills/skills/yida-design/references/theme/app-custom-theme-template.css +432 -350
  129. package/yida-skills/skills/yida-design/references/visual-decision-engine.md +143 -19
  130. package/yida-skills/skills/yida-design/references/visual-scaffold-recipes.md +27 -15
  131. package/yida-skills/skills/yida-design/sub_skill/page-design/SKILL.md +0 -4
  132. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/SKILL.md +8 -22
  133. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/assets/README.md +10 -14
  134. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/assets/build-plan-template.html +4 -9
  135. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/references/build-plan-compact-schema.md +27 -49
  136. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/references/build-plan-schema.md +154 -33
  137. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/references/visual-design.md +127 -48
  138. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/references/visual-theme-selection.md +51 -37
  139. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/scripts/render_build_plan.py +48 -43
  140. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/scripts/validate_design_themes.py +190 -0
  141. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/README.md +98 -0
  142. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/airy-media-grid.md +339 -0
  143. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/airy-modular-clarity.md +348 -0
  144. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/airy-structured-clarity.md +344 -0
  145. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/ambient-halo-layered.md +345 -0
  146. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/dark-focus-layered.md +355 -0
  147. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/dark-luminous-modular.md +377 -0
  148. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/deep-stage-duotone.md +352 -0
  149. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/hairline-runway-clarity.md +389 -0
  150. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/high-contrast-modular.md +364 -0
  151. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/index.json +329 -0
  152. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/interlocked-vivid-modules.md +348 -0
  153. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/matrix-grid-focus.md +345 -0
  154. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/media-rail-inspector.md +379 -0
  155. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/mist-layered-signal.md +347 -0
  156. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/modular-rail-signal.md +352 -0
  157. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/mono-grid-signal.md +386 -0
  158. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/ribbon-ledger-lift.md +384 -0
  159. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/segmented-meter-clarity.md +388 -0
  160. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/split-rail-precision.md +341 -0
  161. package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/status-framed-media-grid.md +361 -0
  162. package/yida-skills/skills/yida-design/workflow/output-design.md +375 -117
  163. package/yida-skills/skills/yida-design/workflow/output-prd.md +185 -0
  164. package/yida-skills/skills/yida-design/workflow/step-1-read-brief.md +1 -1
  165. package/yida-skills/skills/yida-design/workflow/step-2-theme-system.md +29 -33
  166. package/yida-skills/skills/yida-design/workflow/step-4-wireframe-interaction.md +1 -3
  167. package/yida-skills/skills/yida-design/workflow/step-5-visual-states.md +106 -22
  168. package/yida-skills/skills/yida-design/workflow/step-6-handoff.md +22 -15
  169. package/yida-skills/skills/yida-form-permission/SKILL.md +0 -6
  170. package/yida-skills/skills/yida-image-assets/SKILL.md +50 -73
  171. package/yida-skills/skills/yida-image-assets/references/manifest-contract.md +52 -82
  172. package/yida-skills/skills/yida-image-assets/references/source-policy.md +15 -14
  173. package/yida-skills/skills/yida-integration/SKILL.md +0 -1
  174. package/yida-skills/skills/yida-login/SKILL.md +0 -2
  175. package/yida-skills/skills/yida-nav-group/SKILL.md +2 -4
  176. package/yida-skills/skills/yida-nav-shell/SKILL.md +12 -36
  177. package/yida-skills/skills/yida-nav-shell/references/nav-shell-patterns.md +136 -79
  178. package/yida-skills/skills/yida-page-config/SKILL.md +4 -13
  179. package/yida-skills/skills/yida-prd/SKILL.md +3 -5
  180. package/yida-skills/skills/yida-prd/references/app/blueprint.md +4 -4
  181. package/yida-skills/skills/yida-prd/references/app/navigation-patterns.md +3 -6
  182. package/yida-skills/skills/yida-prd/references/app/role-journey.md +3 -5
  183. package/yida-skills/skills/yida-prd/references/plan-content.md +0 -4
  184. package/yida-skills/skills/yida-prd/workflow/output-prd.md +11 -18
  185. package/yida-skills/skills/yida-prd/workflow/plan-business.md +4 -4
  186. package/yida-skills/skills/yida-prd/workflow/step-2-information-architecture.md +8 -11
  187. package/yida-skills/skills/yida-publish-page/SKILL.md +1 -9
  188. package/yida-skills/skills/yida-requirement-analysis/SKILL.md +39 -10
  189. package/yida-skills/skills/yida-requirement-analysis/workflow/prepare-brief.md +71 -40
  190. package/yida-skills/skills-index.json +16 -36
  191. package/lib/app/application-entry-urls.js +0 -31
  192. package/lib/app/application-style.js +0 -69
  193. package/lib/app/canvas-icon-exports.json +0 -6160
  194. package/lib/app/canvas-icon-guard.js +0 -87
  195. package/lib/app/canvas-navigation-guard.js +0 -84
  196. package/lib/app/canvas-path-guard.js +0 -78
  197. package/lib/app/canvas-theme-guard.js +0 -184
  198. package/lib/app/form-data-response-guard.js +0 -57
  199. package/lib/asset/asset-execution.js +0 -79
  200. package/lib/core/css-structure.js +0 -37
  201. package/lib/design/check-design.js +0 -51
  202. package/lib/design/document.js +0 -458
  203. package/lib/design/icon-contrast.js +0 -85
  204. package/lib/design/page-content.js +0 -11
  205. package/lib/design-plan/artifact-updates.js +0 -117
  206. package/lib/design-plan/confirmation.js +0 -13
  207. package/lib/design-plan/entry-navigation.js +0 -97
  208. package/lib/design-plan/navigation-policy.js +0 -38
  209. package/lib/design-plan/rebase.js +0 -60
  210. package/lib/design-plan/themes.js +0 -101
  211. package/lib/design-plan/visual-policy.js +0 -42
  212. package/lib/samples/openyida-scaffold/canvas-admin-entry.jsx +0 -62
  213. package/lib/samples/openyida-scaffold/canvas-navigation.jsx +0 -56
  214. package/lib/samples/openyida-scaffold/canvas-view-state.jsx +0 -74
  215. package/yida-skills/skills/yida-app/references/entry-navigation.md +0 -193
  216. package/yida-skills/skills/yida-canvas-custom-page/references/view-state-recovery.md +0 -52
  217. package/yida-skills/skills/yida-canvas-data-binding/references/business-action-permissions.md +0 -31
  218. package/yida-skills/skills/yida-design/references/application-style-library.md +0 -93
  219. package/yida-skills/skills/yida-design/references/application-theme-consistency.md +0 -150
  220. package/yida-skills/skills/yida-design/references/native-form-styles.md +0 -208
  221. package/yida-skills/skills/yida-design/references/navigation-decision.md +0 -53
  222. package/yida-skills/skills/yida-design/references/page-continuity.md +0 -42
  223. package/yida-skills/skills/yida-design/references/theme/application-style-recipes.css +0 -58
  224. package/yida-skills/skills/yida-design/references/theme-selection.md +0 -67
  225. package/yida-skills/skills/yida-design/scripts/validate_design_themes.py +0 -302
  226. package/yida-skills/skills/yida-design/templates/application-styles.json +0 -398
  227. package/yida-skills/skills/yida-design/templates/design-themes/README.md +0 -73
  228. package/yida-skills/skills/yida-design/templates/design-themes/app-amber/app_theme.css +0 -748
  229. package/yida-skills/skills/yida-design/templates/design-themes/app-amber/design.md +0 -274
  230. package/yida-skills/skills/yida-design/templates/design-themes/app-amber/form-layout.json +0 -15
  231. package/yida-skills/skills/yida-design/templates/design-themes/app-editorial/app_theme.css +0 -748
  232. package/yida-skills/skills/yida-design/templates/design-themes/app-editorial/design.md +0 -274
  233. package/yida-skills/skills/yida-design/templates/design-themes/app-editorial/form-layout.json +0 -14
  234. package/yida-skills/skills/yida-design/templates/design-themes/app-executive/app_theme.css +0 -748
  235. package/yida-skills/skills/yida-design/templates/design-themes/app-executive/design.md +0 -274
  236. package/yida-skills/skills/yida-design/templates/design-themes/app-executive/form-layout.json +0 -13
  237. package/yida-skills/skills/yida-design/templates/design-themes/app-finance/app_theme.css +0 -748
  238. package/yida-skills/skills/yida-design/templates/design-themes/app-finance/design.md +0 -274
  239. package/yida-skills/skills/yida-design/templates/design-themes/app-finance/form-layout.json +0 -14
  240. package/yida-skills/skills/yida-design/templates/design-themes/app-glass/app_theme.css +0 -748
  241. package/yida-skills/skills/yida-design/templates/design-themes/app-glass/design.md +0 -274
  242. package/yida-skills/skills/yida-design/templates/design-themes/app-glass/form-layout.json +0 -14
  243. package/yida-skills/skills/yida-design/templates/design-themes/app-graphite/app_theme.css +0 -748
  244. package/yida-skills/skills/yida-design/templates/design-themes/app-graphite/design.md +0 -274
  245. package/yida-skills/skills/yida-design/templates/design-themes/app-graphite/form-layout.json +0 -14
  246. package/yida-skills/skills/yida-design/templates/design-themes/app-line/app_theme.css +0 -748
  247. package/yida-skills/skills/yida-design/templates/design-themes/app-line/design.md +0 -274
  248. package/yida-skills/skills/yida-design/templates/design-themes/app-line/form-layout.json +0 -13
  249. package/yida-skills/skills/yida-design/templates/design-themes/app-neon/app_theme.css +0 -748
  250. package/yida-skills/skills/yida-design/templates/design-themes/app-neon/design.md +0 -274
  251. package/yida-skills/skills/yida-design/templates/design-themes/app-neon/form-layout.json +0 -14
  252. package/yida-skills/skills/yida-design/templates/design-themes/app-nordic/app_theme.css +0 -754
  253. package/yida-skills/skills/yida-design/templates/design-themes/app-nordic/design.md +0 -279
  254. package/yida-skills/skills/yida-design/templates/design-themes/app-nordic/form-layout.json +0 -13
  255. package/yida-skills/skills/yida-design/templates/design-themes/app-paper/app_theme.css +0 -748
  256. package/yida-skills/skills/yida-design/templates/design-themes/app-paper/design.md +0 -274
  257. package/yida-skills/skills/yida-design/templates/design-themes/app-paper/form-layout.json +0 -13
  258. package/yida-skills/skills/yida-design/templates/design-themes/app-platinum/app_theme.css +0 -748
  259. package/yida-skills/skills/yida-design/templates/design-themes/app-platinum/design.md +0 -274
  260. package/yida-skills/skills/yida-design/templates/design-themes/app-platinum/form-layout.json +0 -14
  261. package/yida-skills/skills/yida-design/templates/design-themes/app-plum/app_theme.css +0 -748
  262. package/yida-skills/skills/yida-design/templates/design-themes/app-plum/design.md +0 -274
  263. package/yida-skills/skills/yida-design/templates/design-themes/app-plum/form-layout.json +0 -14
  264. package/yida-skills/skills/yida-design/templates/design-themes/app-pop/app_theme.css +0 -758
  265. package/yida-skills/skills/yida-design/templates/design-themes/app-pop/design.md +0 -281
  266. package/yida-skills/skills/yida-design/templates/design-themes/app-pop/form-layout.json +0 -14
  267. package/yida-skills/skills/yida-design/templates/design-themes/app-sage/app_theme.css +0 -748
  268. package/yida-skills/skills/yida-design/templates/design-themes/app-sage/design.md +0 -274
  269. package/yida-skills/skills/yida-design/templates/design-themes/app-sage/form-layout.json +0 -14
  270. package/yida-skills/skills/yida-design/templates/design-themes/app-teal/app_theme.css +0 -748
  271. package/yida-skills/skills/yida-design/templates/design-themes/app-teal/design.md +0 -274
  272. package/yida-skills/skills/yida-design/templates/design-themes/app-teal/form-layout.json +0 -14
  273. package/yida-skills/skills/yida-design/templates/design-themes/app-terminal/app_theme.css +0 -754
  274. package/yida-skills/skills/yida-design/templates/design-themes/app-terminal/design.md +0 -279
  275. package/yida-skills/skills/yida-design/templates/design-themes/app-terminal/form-layout.json +0 -14
  276. package/yida-skills/skills/yida-design/templates/design-themes/app-ticket/app_theme.css +0 -752
  277. package/yida-skills/skills/yida-design/templates/design-themes/app-ticket/design.md +0 -278
  278. package/yida-skills/skills/yida-design/templates/design-themes/app-ticket/form-layout.json +0 -13
  279. package/yida-skills/skills/yida-design/templates/design-themes/app-wire/app_theme.css +0 -748
  280. package/yida-skills/skills/yida-design/templates/design-themes/app-wire/design.md +0 -274
  281. package/yida-skills/skills/yida-design/templates/design-themes/app-wire/form-layout.json +0 -14
  282. package/yida-skills/skills/yida-design/templates/design-themes/basic-tokens.json +0 -118
  283. package/yida-skills/skills/yida-design/templates/design-themes/dark-inset-hairline/app_theme.css +0 -690
  284. package/yida-skills/skills/yida-design/templates/design-themes/dark-inset-hairline/design.md +0 -382
  285. package/yida-skills/skills/yida-design/templates/design-themes/dark-inset-hairline/form-layout.json +0 -13
  286. package/yida-skills/skills/yida-design/templates/design-themes/dark-rail-fine-lines/app_theme.css +0 -691
  287. package/yida-skills/skills/yida-design/templates/design-themes/dark-rail-fine-lines/design.md +0 -380
  288. package/yida-skills/skills/yida-design/templates/design-themes/dark-rail-fine-lines/form-layout.json +0 -13
  289. package/yida-skills/skills/yida-design/templates/design-themes/dark-rail-signal-panels/app_theme.css +0 -696
  290. package/yida-skills/skills/yida-design/templates/design-themes/dark-rail-signal-panels/design.md +0 -378
  291. package/yida-skills/skills/yida-design/templates/design-themes/dark-rail-signal-panels/form-layout.json +0 -13
  292. package/yida-skills/skills/yida-design/templates/design-themes/free-creative/app_theme.css +0 -689
  293. package/yida-skills/skills/yida-design/templates/design-themes/free-creative/design.md +0 -238
  294. package/yida-skills/skills/yida-design/templates/design-themes/free-creative/form-layout.json +0 -13
  295. package/yida-skills/skills/yida-design/templates/design-themes/graphite-bevel-grid/app_theme.css +0 -692
  296. package/yida-skills/skills/yida-design/templates/design-themes/graphite-bevel-grid/design.md +0 -375
  297. package/yida-skills/skills/yida-design/templates/design-themes/graphite-bevel-grid/form-layout.json +0 -13
  298. package/yida-skills/skills/yida-design/templates/design-themes/hairline-shared-bands/app_theme.css +0 -691
  299. package/yida-skills/skills/yida-design/templates/design-themes/hairline-shared-bands/design.md +0 -362
  300. package/yida-skills/skills/yida-design/templates/design-themes/hairline-shared-bands/form-layout.json +0 -13
  301. package/yida-skills/skills/yida-design/templates/design-themes/hairline-soft-blocks/app_theme.css +0 -691
  302. package/yida-skills/skills/yida-design/templates/design-themes/hairline-soft-blocks/design.md +0 -409
  303. package/yida-skills/skills/yida-design/templates/design-themes/hairline-soft-blocks/form-layout.json +0 -13
  304. package/yida-skills/skills/yida-design/templates/design-themes/index.json +0 -464
  305. package/yida-skills/skills/yida-design/templates/design-themes/ink-glow-soft-panels/app_theme.css +0 -701
  306. package/yida-skills/skills/yida-design/templates/design-themes/ink-glow-soft-panels/design.md +0 -379
  307. package/yida-skills/skills/yida-design/templates/design-themes/ink-glow-soft-panels/form-layout.json +0 -13
  308. package/yida-skills/skills/yida-design/templates/design-themes/inset-frame-pixel-rhythm/app_theme.css +0 -691
  309. package/yida-skills/skills/yida-design/templates/design-themes/inset-frame-pixel-rhythm/design.md +0 -404
  310. package/yida-skills/skills/yida-design/templates/design-themes/inset-frame-pixel-rhythm/form-layout.json +0 -13
  311. package/yida-skills/skills/yida-design/templates/design-themes/outlined-texture-duotone/app_theme.css +0 -698
  312. package/yida-skills/skills/yida-design/templates/design-themes/outlined-texture-duotone/design.md +0 -389
  313. package/yida-skills/skills/yida-design/templates/design-themes/outlined-texture-duotone/form-layout.json +0 -13
  314. package/yida-skills/skills/yida-design/templates/design-themes/soft-inset-surfaces/app_theme.css +0 -691
  315. package/yida-skills/skills/yida-design/templates/design-themes/soft-inset-surfaces/design.md +0 -372
  316. package/yida-skills/skills/yida-design/templates/design-themes/soft-inset-surfaces/form-layout.json +0 -13
  317. package/yida-skills/skills/yida-design/templates/design-themes/soft-outline-rhythm/app_theme.css +0 -690
  318. package/yida-skills/skills/yida-design/templates/design-themes/soft-outline-rhythm/design.md +0 -455
  319. package/yida-skills/skills/yida-design/templates/design-themes/soft-outline-rhythm/form-layout.json +0 -13
  320. package/yida-skills/skills/yida-design/templates/design-themes/soft-rail-bold-band/app_theme.css +0 -698
  321. package/yida-skills/skills/yida-design/templates/design-themes/soft-rail-bold-band/design.md +0 -394
  322. package/yida-skills/skills/yida-design/templates/design-themes/soft-rail-bold-band/form-layout.json +0 -13
  323. package/yida-skills/skills/yida-design/templates/design-themes/soft-spectral-panels/app_theme.css +0 -692
  324. package/yida-skills/skills/yida-design/templates/design-themes/soft-spectral-panels/design.md +0 -391
  325. package/yida-skills/skills/yida-design/templates/design-themes/soft-spectral-panels/form-layout.json +0 -13
  326. package/yida-skills/skills/yida-design/templates/design-themes/warm-canvas-contrast-panels/app_theme.css +0 -711
  327. package/yida-skills/skills/yida-design/templates/design-themes/warm-canvas-contrast-panels/design.md +0 -408
  328. package/yida-skills/skills/yida-design/templates/design-themes/warm-canvas-contrast-panels/form-layout.json +0 -13
  329. package/yida-skills/skills/yida-design/templates/design-themes/warm-rail-muted-panels/app_theme.css +0 -692
  330. package/yida-skills/skills/yida-design/templates/design-themes/warm-rail-muted-panels/design.md +0 -383
  331. package/yida-skills/skills/yida-design/templates/design-themes/warm-rail-muted-panels/form-layout.json +0 -13
  332. package/yida-skills/skills/yida-design/templates/navigation-styles.json +0 -769
  333. package/yida-skills/skills/yida-requirement-analysis/references/experience-groups.md +0 -79
  334. package/yida-skills/skills/yida-requirement-analysis/references/handoff.md +0 -68
@@ -0,0 +1,382 @@
1
+ ---
2
+ version: alpha
3
+ template_type: visual_dna_preset
4
+ name: soft-progress-analytics-workbench
5
+ design_id: soft-progress-analytics-workbench
6
+ design_status: draft
7
+ description: "适用于进度追踪、周期分析、任务概览和明细管理的柔和浅色分析工作台视觉 DNA。"
8
+ scenes: [dashboard, workbench, operations_overview, progress_tracking, data_table_page]
9
+ density: medium-high
10
+ layout: left_metric_stack_right_timeline_chart_table
11
+ tone: [soft, analytical, structured, precise, calm]
12
+ tags: [light_dashboard, progress_overview, timeline_panel, trend_chart, refined_table]
13
+ avoid: [marketing_landing_page, immersive_big_screen, media_gallery, single_long_form, text_heavy_portal]
14
+ selection:
15
+ best_for: [工作台首页, 进度追踪页, 周期分析页, 运营概览页, 明细管理页]
16
+ user_intent: [快速判断整体状态, 追踪阶段节点, 对比周期趋势, 检索明细记录]
17
+ visual_tone: [浅底留白, 柔和圆角, 小面积高饱和强调色, 精细数据组件, 清爽有序]
18
+ avoid_for: [强品牌叙事, 暗色沉浸展示, 单一表单录入, 内容阅读页, 图片优先页面]
19
+ policies:
20
+ prd_first: true
21
+ content_neutral: true
22
+ no_source_locked_content: true
23
+ quick_actions_rendered_by_prd: true
24
+ theme_can_change_hue_not_dna: true
25
+ visual_dna:
26
+ - id: left_priority_metric_stack
27
+ name: 左侧优先级指标栈
28
+ confidence: observed
29
+ hooks: [summary_card, metric_grid, large_number, icon_badge, decorative_progress_texture]
30
+ invariant: [左侧窄列承载最高优先级摘要和 2x2 小指标, 摘要卡高度明显大于普通指标卡, 摘要卡使用强调色底和超大数字形成首要视觉层级, 普通指标卡保持白底轻描边并通过小图标建立节奏]
31
+ variable: [指标数量, 指标名称, 数值格式, 环比说明, 图标语义, 默认强调色]
32
+ - id: floating_milestone_timeline
33
+ name: 浮动里程碑时间轴
34
+ confidence: observed
35
+ hooks: [date_strip, active_date_marker, dotted_axis, staggered_node_cards, selected_node_card]
36
+ invariant: [顶部使用紧凑时间选择条, 内容区放在浅色描边大圆角容器内, 当前时间或当前节点使用垂直虚线对齐, 节点卡片可错落分布但必须服从网格对齐, 选中节点以小面积强调色填充]
37
+ variable: [时间粒度, 节点数量, 节点标题, 附加说明, 图标或头像占位, 操作入口]
38
+ - id: crafted_trend_panel
39
+ name: 精制轻网格趋势面板
40
+ confidence: observed
41
+ hooks: [line_chart, hollow_markers, dotted_secondary_series, tooltip_card, range_selector]
42
+ invariant: [趋势面板使用白底大圆角和标题栏分层, 主序列用强调色折线和空心圆点, 辅助序列使用浅灰虚线弱化, tooltip 使用深色浮层与细分图例提升质感]
43
+ variable: [指标维度, 时间范围, 序列数量, 坐标标签, tooltip 内容, 主题色]
44
+ - id: rounded_utility_detail_table
45
+ name: 圆角工具化明细表
46
+ confidence: observed
47
+ hooks: [search_input, sortable_header, checkbox_column, status_pill, iconized_cell]
48
+ invariant: [底部明细区是横向宽面板, 标题与搜索或筛选控件同层, 表头使用浅灰底和细分隔线, 行高稳定, 首列支持选择, 状态用胶囊标签和点状信号表达]
49
+ variable: [列定义, 行数据, 筛选控件, 状态集合, 单元格图标, 批量操作]
50
+ - id: soft_micro_detail_rhythm
51
+ name: 柔和微细节节奏
52
+ confidence: observed
53
+ hooks: [subtle_border, soft_shadow, icon_circle, pill_control, vertical_accent_bar]
54
+ invariant: [所有信息块依靠浅边框、轻阴影和圆角建立层次, 图标放在浅描边圆形容器中, 被强调的列表项或节点使用短竖条或胶囊态提示, 页面不得依赖厚重色块堆叠]
55
+ variable: [图标库, 操作数量, 状态语义, 强调色相, 文案长度]
56
+ theme_adaptation:
57
+ accepts_theme_color: true
58
+ strategy: replace_hue_preserve_visual_mechanism
59
+ input: theme_color
60
+ replace_tokens: [tokens.colors.brand, tokens.colors.brand-strong, tokens.colors.brand-soft, tokens.colors.focus-ring]
61
+ derive_tokens: [tokens.colors.chart-primary, tokens.colors.chart-primary-soft, tokens.colors.status-positive, tokens.colors.surface-accent, tokens.colors.timeline-active]
62
+ preserve_tokens: [tokens.colors.bg-page, tokens.colors.surface, tokens.colors.surface-muted, tokens.colors.text-primary, tokens.colors.text-secondary, tokens.colors.text-tertiary, tokens.colors.border-subtle, tokens.colors.shadow-color]
63
+ rules:
64
+ - theme_color_only_changes_accent_hue
65
+ - do_not_tint_page_background
66
+ - do_not_turn_neutral_cards_into_colored_cards
67
+ - keep_accent_usage_small_area
68
+ - preserve_white_panels_soft_borders_and_large_radius
69
+ tokens:
70
+ colors:
71
+ bg-page: "#F6F7F5"
72
+ surface: "#FFFFFF"
73
+ surface-muted: "#F2F4F3"
74
+ surface-accent: "#EAF8F2"
75
+ text-primary: "#101722"
76
+ text-secondary: "#5B6472"
77
+ text-tertiary: "#8B95A1"
78
+ border-subtle: "#E3E8E5"
79
+ border-accent-soft: "#CFEFE1"
80
+ brand: "#1FB975"
81
+ brand-strong: "#13A463"
82
+ brand-soft: "#DFF7EC"
83
+ focus-ring: "#8BE0B8"
84
+ chart-primary: "#20B875"
85
+ chart-primary-soft: "#DDF5EA"
86
+ chart-secondary: "#CDD6D2"
87
+ status-positive: "#22B879"
88
+ status-warning: "#F0A92E"
89
+ status-danger: "#E35D5D"
90
+ shadow-color: "rgba(16, 23, 34, 0.06)"
91
+ typography:
92
+ fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
93
+ page-title: { fontSize: 30, fontWeight: 700, lineHeight: 1.2, letterSpacing: 0 }
94
+ panel-title: { fontSize: 18, fontWeight: 700, lineHeight: 1.3, letterSpacing: 0 }
95
+ metric-label: { fontSize: 15, fontWeight: 650, lineHeight: 1.35, letterSpacing: 0 }
96
+ metric-number: { fontSize: 44, fontWeight: 700, lineHeight: 1.05, letterSpacing: 0 }
97
+ hero-number: { fontSize: 64, fontWeight: 700, lineHeight: 1, letterSpacing: 0 }
98
+ body: { fontSize: 15, fontWeight: 500, lineHeight: 1.45, letterSpacing: 0 }
99
+ caption: { fontSize: 13, fontWeight: 500, lineHeight: 1.35, letterSpacing: 0 }
100
+ spacing:
101
+ page-x-desktop: 24
102
+ page-y-desktop: 32
103
+ grid-gap: 16
104
+ panel-x: 24
105
+ panel-y: 22
106
+ card-gap: 14
107
+ table-cell-x: 20
108
+ rounded:
109
+ panel: 20
110
+ summary: 20
111
+ card: 16
112
+ control: 14
113
+ pill: 999
114
+ icon: 999
115
+ shadow:
116
+ panel: "0 1px 2px rgba(16, 23, 34, 0.04), 0 12px 28px rgba(16, 23, 34, 0.04)"
117
+ floating: "0 10px 24px rgba(16, 23, 34, 0.08)"
118
+ layout_stability:
119
+ grid_align_items: stretch
120
+ panel_display: flex-column
121
+ panel_height: "100%"
122
+ overflow_policy: internal_scroll_or_truncate
123
+ spacing_policy: parent_gap_only
124
+ equal_height_rule: same_row_panels_align
125
+ fixed_height_tokens:
126
+ summary_card: 270px
127
+ metric_card: 168px
128
+ timeline_panel: 360px
129
+ trend_panel: 300px
130
+ table_row: 64px
131
+ table_header: 56px
132
+ quality_anchors:
133
+ - id: oversized_priority_summary
134
+ name: 大号优先摘要与进度纹理
135
+ required_when: PRD 提供一个最高优先级状态、总览结果或主指标
136
+ rule: 摘要卡使用强调色底、超大数字、低透明纹理和局部进度弧,普通指标卡不得抢夺主摘要层级。
137
+ - id: staggered_milestone_timeline
138
+ name: 错落里程碑时间轴
139
+ required_when: PRD 包含日程、阶段、流程、周期节点或状态迁移
140
+ rule: 时间条、当前线、节点卡片和选中态必须共同出现;节点可错落,但边缘、基线和间距需要严格对齐。
141
+ - id: crafted_chart_tooltip
142
+ name: 精制图表浮层
143
+ required_when: PRD 包含趋势、周期对比、进度走势或多序列分析
144
+ rule: 图表需要空心节点、浅网格、辅助虚线序列和深色 tooltip,不能只放默认折线。
145
+ - id: utility_table_shell
146
+ name: 工具化明细表壳
147
+ required_when: PRD 包含记录列表、检索、排序、筛选或状态追踪
148
+ rule: 明细区必须有圆角面板、搜索或筛选工具、浅灰表头、稳定行高、状态胶囊和 hover/focus 状态。
149
+ - id: micro_icon_alignment
150
+ name: 微图标与状态对齐
151
+ required_when: PRD 包含指标卡、列表项、节点项、状态项或操作入口
152
+ rule: 小图标置于浅描边圆形容器内,尺寸与文本基线对齐;状态除了颜色,还需要点、竖条、胶囊或文本补充。
153
+ quality_floor:
154
+ target: polished_sample_level
155
+ avoid_default_admin_feel: true
156
+ requires_visible_micro_detail: true
157
+ minimum_craft_signals: [precise_alignment, stable_panel_heights, subtle_borders, soft_shadow, refined_table_header, chart_tooltip, active_state_texture]
158
+ components:
159
+ card:
160
+ surface: tokens.colors.surface
161
+ rounded: tokens.rounded.card
162
+ border: "1px solid tokens.colors.border-subtle"
163
+ shadow: tokens.shadow.panel
164
+ summary_card:
165
+ surface: tokens.colors.brand
166
+ rounded: tokens.rounded.summary
167
+ text: "#FFFFFF"
168
+ texture: low_opacity_progress_arc_or_line_pattern
169
+ metric_card:
170
+ surface: tokens.colors.surface
171
+ minHeight: 168
172
+ icon: circular_subtle_outline
173
+ numberScale: metric-number
174
+ timeline_node:
175
+ height: 76
176
+ rounded: tokens.rounded.card
177
+ border: "1px solid tokens.colors.border-subtle"
178
+ selectedSurface: tokens.colors.brand
179
+ activeRail: tokens.colors.timeline-active
180
+ chart:
181
+ height: 230
182
+ lineStyle: smooth_with_hollow_points
183
+ tooltip: dark_compact_card
184
+ table:
185
+ headerHeight: 56
186
+ rowHeight: 64
187
+ headerSurface: tokens.colors.surface-muted
188
+ statusStyle: pill_with_dot
189
+ input:
190
+ height: 48
191
+ rounded: tokens.rounded.control
192
+ border: "1px solid tokens.colors.border-subtle"
193
+ modules:
194
+ quick_actions:
195
+ confidence: inferred
196
+ render_policy: prd_only
197
+ placement: independent_section_after_summary_or_before_detail
198
+ item_count: 4-8
199
+ item_shape: compact_icon_label_tile
200
+ primary_metrics:
201
+ confidence: observed
202
+ layout: left_column_summary_plus_2x2_metric_grid
203
+ timeline:
204
+ confidence: observed
205
+ render_policy: prd_only
206
+ placement: upper_right_primary_panel
207
+ trend_panel:
208
+ confidence: observed
209
+ render_policy: prd_only
210
+ placement: middle_or_upper_right_after_timeline
211
+ detail_table:
212
+ confidence: observed
213
+ render_policy: prd_only
214
+ placement: full_width_bottom_panel
215
+ ---
216
+
217
+ # Soft Progress Analytics Workbench DESIGN.md
218
+
219
+ > front matter 是给流程和生成器读取的结构化配置;人工评审优先阅读下方正文。若两者冲突,风格选择、换色策略和 token 数值以前面的 YAML 为准,使用边界和业务取舍以正文为准。
220
+
221
+ ## 1. 快速理解
222
+
223
+ 这是一个柔和浅色、信息密度中高、强调进度与周期判断的分析工作台视觉 DNA。它用左侧优先级指标栈建立首屏判断,用右侧时序节点和趋势面板承接分析,再用底部工具化明细表完成检索与下钻。
224
+
225
+ PRD 决定内容、模块和业务优先级;DESIGN.md 只决定这些内容如何被视觉化。默认强调色可以被主题色替换,但只能替换小面积强调色、图表主序列、focus ring 和状态辅助色,不能改变浅底、白色面板、柔和边框、稳定网格和精致微细节。最终界面必须像手工打磨的数据产品,而不是默认后台套路。
226
+
227
+ ## 2. 使用边界
228
+
229
+ 适合用于需要同时承载摘要、进度、趋势和明细的工作台、看板、周期分析页、阶段追踪页和列表管理页。它特别适合“先判断状态,再看时序,再进入记录”的任务路径。
230
+
231
+ 不适合强品牌叙事、沉浸式大屏、单一长表单、内容阅读页或图片优先页面。如果 PRD 没有时序、阶段、节点或周期语义,不要强行渲染时间轴;可以保留同样的面板层级、圆角、边框和留白,把右上区替换为 PRD 要求的主内容面板。
232
+
233
+ 禁止复用任何视觉材料中的具体业务字段、示例数据、对象名、机构名、分类名或页面专属文案。槽位名称只表示视觉承载方式,不表示必须创造对应业务内容。
234
+
235
+ ## 3. 设计风格选择与换色逻辑
236
+
237
+ 选择该风格时,先判断 PRD 是否有以下信息拓扑:一个高优先级总览、多个辅助指标、可按时间或阶段理解的节点、可视化趋势,以及需要检索或排序的明细记录。若这些结构中的三项以上成立,该风格通常优先级较高。
238
+
239
+ 主题色只改写 `brand`、`brand-strong`、`brand-soft`、`focus-ring`、图表主序列、选中节点和状态辅助色。页面背景、白色面板、中性文字、浅边框、阴影、圆角尺度、面板等高、图表轻网格、底部明细表壳都必须保持。
240
+
241
+ 不要把默认绿色理解成视觉 DNA。真正的 DNA 是浅底白面板、小面积高饱和强调、左侧优先摘要、右侧浮动节点、精制趋势图和工具化明细表之间的层级关系。
242
+
243
+ ## 4. 视觉 DNA
244
+
245
+ ### 左侧优先级指标栈
246
+
247
+ 不可变机制是左侧窄列承载最重要的总览摘要和 2x2 辅助指标。摘要卡面积最大、颜色最强、数字最大;普通指标卡保持白底和轻描边,只用小图标、数字和辅助说明表达层级。
248
+
249
+ 可变部分是指标数量、指标名称、图标语义和数值格式。主题色替换后,摘要卡和正向变化文本使用新主题色,普通指标卡仍然是白底。缺失该机制时,页面会失去首屏判断重心,容易变成平均用力的普通卡片网格。
250
+
251
+ ### 浮动里程碑时间轴
252
+
253
+ 不可变机制是顶部时间选择条、浅描边内容容器、当前线和节点卡片共同形成时间或阶段感。节点可以错落摆放,但错落不是自由布局,必须对齐到稳定列、稳定行和统一间距。选中节点使用小面积强调色,不把整个面板染色。
254
+
255
+ 可变部分是时间粒度、节点数量、节点内容和节点操作。如果 PRD 没有时间语义,不要硬套该组件;可以把同一视觉空间用于阶段列表、状态流或其他主内容面板。
256
+
257
+ ### 精制轻网格趋势面板
258
+
259
+ 不可变机制是白底大圆角面板、标题栏分层、主折线空心节点、浅灰辅助虚线和深色 tooltip。图表区域应有稳定高度,坐标标签清晰但克制,hover 时通过细竖线、点位高亮和浮层展示细节。
260
+
261
+ 可变部分是指标维度、时间范围、序列数量和 tooltip 内容。主题色只替换主折线与高亮节点;辅助线、网格线和中性标签保持低对比。
262
+
263
+ ### 圆角工具化明细表
264
+
265
+ 不可变机制是底部宽面板承载记录,标题与搜索或筛选工具同层,表头使用浅灰底和细分隔线,行高稳定,状态使用胶囊标签和点状信号。明细表是工作台的落地层,不能像裸表格一样直接贴在页面背景上。
266
+
267
+ 可变部分是列定义、筛选方式、状态集合和单元格内容。没有表格数据时,可以替换为同等品质的列表、队列或空状态面板,但仍保留圆角壳、工具栏、分隔线和稳定高度。
268
+
269
+ ### 柔和微细节节奏
270
+
271
+ 不可变机制是浅边框、轻阴影、圆形图标容器、胶囊控件、短竖条和状态点形成统一节奏。页面的精致度来自这些小信号的持续一致,而不是更多颜色或更厚重阴影。
272
+
273
+ 可变部分是具体图标、状态语义和操作数量。缺失微细节时,界面会变得扁平、粗糙,难以达到高品质数据产品的观感。
274
+
275
+ ## 5. 视觉品质基线
276
+
277
+ `oversized_priority_summary` 在 PRD 提供主指标或核心状态时必须落地。摘要卡需要超大数字、强调色底、低透明进度纹理和充足留白,普通指标卡只能作为辅助层级。
278
+
279
+ `staggered_milestone_timeline` 在 PRD 提供阶段、周期、日程或状态迁移时必须落地。时间条、当前线、节点卡和选中态是一个整体,不要只做横向卡片列表。
280
+
281
+ `crafted_chart_tooltip` 在 PRD 提供趋势或周期对比时必须落地。图表不能只使用库默认样式,至少要有空心节点、辅助虚线、浅网格、hover 竖线和深色 tooltip。
282
+
283
+ `utility_table_shell` 在 PRD 提供记录列表、检索、排序或筛选时必须落地。明细表需要标题栏、工具区、圆角外壳、浅灰表头、状态胶囊和稳定行高。
284
+
285
+ `micro_icon_alignment` 在指标卡、节点卡、状态项或操作入口中都应持续出现。图标必须与文本基线对齐,状态不能只依赖颜色,还要用点、竖条、胶囊或文字补充。
286
+
287
+ ## 6. 布局规则
288
+
289
+ 推荐桌面结构:
290
+
291
+ ```text
292
+ page_shell
293
+ page_identity
294
+ main_grid
295
+ left_metric_column
296
+ primary_summary
297
+ metric_grid
298
+ right_analysis_column
299
+ timeline_or_primary_panel
300
+ trend_or_supporting_panel
301
+ detail_panel
302
+ ```
303
+
304
+ 这些槽位不是业务要求。PRD 没有的模块不要补;如果某个槽位不存在,用同等视觉品质的 PRD 内容替换,或让相邻模块自然扩展。
305
+
306
+ 主 grid 使用两列布局:左列约 35%,右列约 65%,列间距 16-20px。左列内部为摘要卡 + 2x2 指标卡;右列上方适合时序或主内容面板,下方适合趋势或辅助分析面板;底部明细面板横跨全宽。
307
+
308
+ 布局稳定性硬规则:
309
+
310
+ - 主 grid 使用 `align-items: stretch`。
311
+ - 同一行面板必须等高。
312
+ - 面板使用 `height: 100%`、`min-width: 0`、`min-height: 0`、`display: flex`、`flex-direction: column`。
313
+ - 图表、时间轴、表格行必须有稳定高度,禁止由内容自由撑开。
314
+ - 长文本使用截断、折叠或内部滚动,不能撑破父级。
315
+ - 区块间距由父级 `gap` 管理,不用零散 margin 拼页面。
316
+
317
+ ## 7. PRD 槽位映射
318
+
319
+ | PRD 内容类型 | 推荐视觉槽位 | 使用规则 |
320
+ | --- | --- | --- |
321
+ | 页面身份、标题、全局操作 | `page_identity` | 顶部只保留必要标题和操作,避免占用过高首屏空间。 |
322
+ | 最高优先级状态或总览 | `primary_summary` | 使用强调色摘要卡;没有主指标时不要伪造大数字。 |
323
+ | 多个辅助指标 | `primary_metrics` | 使用 2x2 或 2xn 白底指标卡,图标在圆形容器中。 |
324
+ | 阶段、日程、周期、节点 | `timeline` | 使用时间选择条、当前线、节点卡和选中态;没有时间语义则替换为主内容面板。 |
325
+ | 趋势、走势、周期对比 | `trend_panel` | 使用精制折线或等价图表;没有图表数据时替换为高品质摘要列表。 |
326
+ | 记录、对象、任务、明细 | `detail_table` | 使用圆角表格壳、搜索筛选、浅灰表头和状态胶囊。 |
327
+ | 常用操作入口 | `quick_actions` | 只在 PRD 明确需要时渲染,作为独立区块,不塞进表格工具栏。 |
328
+ | 空数据或加载失败 | `empty_or_error_state` | 放在对应面板内部,保持圆角、图标、说明和操作的精致度。 |
329
+
330
+ ## 8. 组件规则
331
+
332
+ 卡片和面板使用白色表面、1px 浅边框、20px 左右圆角和极轻阴影。面板内部用标题栏和内容区分层,标题栏高度稳定,右侧控件使用胶囊形态。
333
+
334
+ 指标组件必须建立数字层级。主摘要数字可达到 56-68px,普通指标数字约 40-48px;小标题和辅助说明保持 13-15px。指标卡内图标使用 32-40px 圆形浅描边容器。
335
+
336
+ 时间轴节点卡高度保持 72-84px。默认节点为白底轻边框,选中节点为强调色底;节点左侧可使用短竖条增强状态感。节点内图标、标题、说明和更多操作必须在同一基线系统内对齐。
337
+
338
+ 图表容器高度固定,折线可以平滑但不夸张。主序列使用 2.5-3px 线宽和空心节点;辅助序列使用 1.5-2px 浅灰虚线;tooltip 使用深色小浮层,包含标题、图例点和值,不遮挡关键走势。
339
+
340
+ 表格面板必须包含稳定工具区。搜索框高度 48px,圆角 14px,左侧图标和 placeholder 对齐;表头高度 56px,行高 64px。状态标签使用胶囊、浅底、边框和状态点,hover 行使用极浅背景。
341
+
342
+ 按钮和控件只在命令明确时使用文字按钮;翻页、更多、排序、搜索、筛选等优先使用图标或图标加文本。纯图标按钮必须有 tooltip 或可访问标签。loading、empty、error、disabled、selected、hover、focus 状态都需要定义。
343
+
344
+ 快捷入口若由 PRD 要求,应作为独立区块出现,使用紧凑图标加短标签的 tile,不要塞进表格标题栏、侧栏尾部或图表角落。
345
+
346
+ ## 9. 响应式与可访问性
347
+
348
+ 桌面端保持左右两列和底部全宽明细;中等宽度下可把左侧指标栈和右侧分析列改为上下堆叠,但每个面板仍保留稳定高度;移动端按 `primary_summary`、`primary_metrics`、`timeline_or_primary_panel`、`trend_panel`、`detail_panel` 顺序纵向排列。
349
+
350
+ 表格在窄屏可转为横向滚动、卡片列表或字段摘要行,具体由 PRD 和数据复杂度决定。触控目标不小于 44px,输入和按钮的 focus ring 使用主题色派生但保持 2px 可见轮廓。
351
+
352
+ 状态表达不能只依赖颜色,必须配合文本、点、竖条、图标或胶囊。图表 hover 信息在触控设备上应支持点击固定或摘要展示。若用户启用 reduced motion,图表和节点切换只保留轻微透明度变化,不做大幅位移动画。
353
+
354
+ ## 10. 禁止项
355
+
356
+ - 禁止复制具体业务内容、示例数据、字段名、对象名、机构名、分类名或页面专属文案。
357
+ - 禁止让 DESIGN.md 覆盖 PRD 的内容、功能、模块和业务优先级决策。
358
+ - 禁止把输入主题色铺满页面背景、普通指标卡或大面积中性面板。
359
+ - 禁止把默认强调色误当成视觉 DNA。
360
+ - 禁止做成默认后台质感:裸表格、等权卡片、默认图表、粗糙阴影、随机圆角都不合格。
361
+ - 禁止瀑布流、自由高度卡片、无固定高度图表容器和零散 margin 拼接。
362
+ - 禁止长文本撑破节点卡、表格行、面板标题栏或搜索框。
363
+ - 禁止状态只靠颜色区分。
364
+
365
+ ## 11. Agent 使用提示
366
+
367
+ 先读 PRD,确认实际内容、模块、优先级和数据形态;再读取主题色输入,仅替换强调色 token 和派生状态色;最后套用该视觉 DNA。不要为了满足槽位而凭空创建 PRD 没有的指标、时间轴、图表、快捷入口或明细表。
368
+
369
+ 实现时优先保证结构稳定:左右主 grid、等高面板、固定图表高度、稳定表格行高、内部滚动和文本截断。每个落地模块都要带有可见微细节:浅边框、轻阴影、圆形图标容器、状态胶囊、图表 tooltip、hover/focus 状态。编码结果必须达到 `quality_floor.target`,不能停留在默认组件库拼装。
370
+
371
+ ## 12. 交付自检清单
372
+
373
+ - 内容、字段、模块和文案是否全部来自 PRD。
374
+ - 是否保留左侧优先级指标栈、时序节点、精制趋势面板、工具化明细表和微细节节奏中的适用 DNA。
375
+ - 主题色是否只改写强调色、图表主序列、状态辅助色和 focus ring。
376
+ - 页面背景、白色面板、中性文字、浅边框、圆角和稳定网格是否未被主题色污染。
377
+ - 所有同排面板是否等高,图表、时间轴、表格行是否有稳定高度。
378
+ - 长内容是否使用截断、折叠或内部滚动。
379
+ - 表格是否有工具区、浅灰表头、稳定行高、状态胶囊和 hover/focus 状态。
380
+ - 图表是否有空心节点、辅助序列、浅网格和深色 tooltip。
381
+ - 纯图标按钮是否有 tooltip 或可访问标签。
382
+ - 移动端、键盘 focus、非纯颜色状态表达和 reduced motion 是否达标。