openyida 2026.9.21 → 2026.9.22-beta.2

package/yida-skills/skills/yida-design/templates/design-themes/warm-canvas-contrast-panels/design.md

@@ -1,408 +0,0 @@
----
-name: "{{PROJECT_NAME}}"
-description: "主题色微染浅灰画布承托平整白色圆角卡片，顶部导航和双行摘要形成清楚层级；普通指标以浅色和局部强调区分主次，深色面板按内容与配色需要选用，胶囊操作、细横条和数据色与整页协调。"
-themeId: warm-canvas-contrast-panels
-navTheme: light
-tokens:
-  application-global:
-    appearance:
-      surfaces:
-        "--pod-app-root-bg-color": "var(--color-brand1-3)" # 主题色极浅变体；应用根背景
-        "--pod-app-root-bg-image": "none" # 应用根背景无图
-        "--pod-page-bg-color": "var(--color-brand1-3)" # 主题色极浅变体；页面画布
-        "--pod-card-bg-color": "#FFFFFF" # neutral-gray；普通卡片、表单与详情表面
-        "--pod-table-cell-color": "var(--pod-card-bg-color)" # 表格正文跟随卡片表面
-      navigation:
-        "--pod-shell-theme-bg-color": "var(--color-brand1-3)"
-        "--pod-nav-item-text-color": "#595959"
-        "--pod-nav-item-text-hover-color": "var(--color-brand1-5)"
-        "--pod-nav-item-text-selected-color": "var(--color-brand1-5)"
-        "--pod-nav-menu-bg-hover-color": "var(--color-brand1-2)"
-        "--pod-nav-menu-bg-selected-color": "var(--color-brand1-3)"
-        "--pod-nav-menu-item-selected-shadow": "none"
-        "--pod-page-header-bg-color": "var(--pod-shell-theme-bg-color)"
-        "--pod-nav-l-sub-main-bg-color": "var(--pod-shell-theme-bg-color)"
-        "--pod-nav-top-main-border-width": "1px"
-        "--pod-nav-top-main-border-color": "#DEDEDE"
-        "--pod-nav-top-tab-indicator-width": "0px"
-        "--pod-nav-logo-text": "var(--pod-nav-item-text-hover-color)"
-        "--pod-nav-logo-bg": "var(--pod-nav-menu-bg-selected-color)"
-        "--pod-nav-logo-icon": "var(--pod-nav-item-text-selected-color)"
-        "--pod-nav-logo-border": "1px solid #DEDEDE"
-        "--pod-nav-logo-border-radius": "8px"
-        "--pod-nav-sub-divider-color": "#DEDEDE"
-        "--pod-nav-item-text-disabled-color": "rgba(24,28,31,.30)"
-        "--pod-nav-l-container-bg": "var(--pod-shell-theme-bg-color)"
-        "--pod-nav-l-group-label-color": "var(--pod-nav-item-text-color)"
-        "--pod-nav-l-search-border-color": "#DEDEDE"
-        "--pod-nav-popup-bg-color": "var(--pod-shell-theme-bg-color)"
-        "--pod-nav-popup-border-radius": "8px"
-        "--pod-nav-popup-shadow": "0 8px 24px rgba(24,28,31,.10)"
-        "--pod-nav-tab-line-hover-color": "var(--pod-nav-item-text-hover-color)"
-        "--pod-nav-tab-line-selected-color": "var(--pod-nav-item-text-hover-color)"
-        "--pod-nav-search-bg-color": "var(--pod-nav-menu-bg-hover-color)"
-        "--pod-nav-search-bg-hover-color": "var(--pod-nav-menu-bg-hover-color)"
-        "--pod-nav-search-bg-active-color": "var(--pod-nav-menu-bg-hover-color)"
-        "--pod-nav-search-placeholder-color": "var(--pod-nav-item-text-color)"
-        "--pod-nav-search-text-color": "var(--pod-nav-item-text-hover-color)"
-        "--pod-nav-search-icon-color": "var(--pod-nav-item-text-color)"
-        "--pod-nav-search-border-color": "#DEDEDE"
-        "--pod-nav-search-border-hover-color": "var(--pod-nav-item-text-hover-color)"
-        "--pod-nav-search-border-active-color": "var(--pod-nav-item-text-hover-color)"
-        "--pod-nav-action-icon-color": "var(--pod-nav-item-text-color)"
-        "--pod-nav-action-border-color": "#DEDEDE"
-        "--pod-nav-action-border": "1px solid #DEDEDE"
-        "--pod-nav-action-bg-hover-color": "var(--pod-nav-menu-bg-hover-color)"
-        "--pod-nav-action-bg-active-color": "var(--pod-nav-menu-bg-hover-color)"
-        "--pod-nav-menu-item-height": "42px"
-        "--pod-nav-menu-item-radius": "16px"
-        "--pod-nav-menu-item-border": "none"
-        "--pod-nav-menu-item-hover-border": "none"
-        "--pod-nav-menu-item-selected-border": "none"
-        "--pod-nav-menu-font-size": "14px"
-        "--pod-nav-menu-item-selected-font-weight": "500"
-        "--pod-nav-menu-line-height": "20px"
-        "--pod-nav-menu-gap": "8px"
-        "--pod-shell-lshape-border-radius": "8px"
-    colors:
-      "--color-white": "var(--pod-card-bg-color)" # 全应用基础表面，跟随内容明暗；不承担反色文字或固定亮面职责
-      "--color-brand1-1": "<生成实际色值：--color-brand1-6 88% + #FFFFFF 12%，sRGB 逐通道混合>" # 品牌交互悬停
-      "--color-brand1-2": "<生成实际色值：--color-brand1-6 12% + #FFFFFF 88%，sRGB 逐通道混合>" # 平台预留品牌浅色
-      "--color-brand1-3": "<生成实际色值：--color-brand1-6 4% + #F4F4F4 96%，sRGB 逐通道混合>" # 主题色极浅变体；保持浅画布层级
-      "--color-brand1-5": "<生成实际色值：--color-brand1-6 38% + #171717 62%，sRGB 逐通道混合>" # 品牌派生深色
-      "--color-brand1-6": "{{PRIMARY_COLOR}}" # 唯一品牌种子；由项目输入与 {{COLOR_SOURCE}} 确定，不设固定兜底色
-      "--color-brand1-9": "<生成实际色值：--color-brand1-6 76% + #000000 24%，sRGB 逐通道混合>" # 品牌交互按下
-      "--color-brand1-10": "<生成实际色值：--color-brand1-6 26% + #FFFFFF 74%，sRGB 逐通道混合>" # 品牌交互禁用
-      "--color-line1-1": "<生成实际色值：--color-brand1-6 3% + #EEEEEE 97%，sRGB 逐通道混合>" # theme-gray；主题色微染弱分隔
-      "--color-line1-2": "<生成实际色值：--color-brand1-6 4% + #DEDEDE 96%，sRGB 逐通道混合>" # theme-gray；主题色微染控件边界
-      "--color-fill1-1": "#FFFFFF" # neutral-gray；输入默认表面与中性悬停角色
-      "--color-fill1-2": "<生成实际色值：--color-brand1-6 2% + #F7F7F7 98%，sRGB 逐通道混合>" # theme-gray；主题色微染按下、选中和内部摘要底面
-      "--color-fill1-3": "<生成实际色值：--color-brand1-6 4% + #F0F0F0 96%，sRGB 逐通道混合>" # theme-gray；主题色微染重填充和轨道
-      "--color-fill1-5": "#FFFFFF" # neutral-gray；下拉、浮层、气泡、抽屉、弹窗及数据读数
-      "--color-fill1-10": "#262626" # neutral-gray；固定短 Tooltip 深底
-      "--color-text1-5": "#FFFFFF" # neutral-gray；短 Tooltip 固定反色文字
-      "--color-text1-4": "<生成实际色值：--color-brand1-6 6% + #171717 94%，sRGB 逐通道混合>" # theme-gray；主题色微染主文字，保持深色可读性
-      "--color-text1-10": "<生成实际色值：--color-brand1-6 6% + #666666 94%，sRGB 逐通道混合>" # theme-gray；主题色微染表头与必要说明
-      "--color-text1-3": "<生成实际色值：--color-brand1-6 5% + #808080 95%，sRGB 逐通道混合>" # theme-gray；主题色微染辅助文字
-      "--color-text1-2": "<生成实际色值：--color-brand1-6 4% + #ADADAD 96%，sRGB 逐通道混合>" # theme-gray；仅禁用文字
-      "--color-text1-1": "<生成实际色值：--color-brand1-6 4% + #D3D3D3 96%，sRGB 逐通道混合>" # theme-gray；仅水印文字
-    typography:
-      "--font-family-base": "Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
-      "--font-size-subhead": "18px"
-      "--font-weight-subhead": 500
-      "--font-lineheight-subhead": 1.3
-      "--font-size-body-2": "16px"
-      "--font-weight-body-2": 500
-      "--font-lineheight-body-2": 1.45
-      "--font-size-body-1": "14px"
-      "--font-weight-body-1": 400
-      "--font-lineheight-body-1": 1.5
-      "--font-size-table": "13px"
-      "--font-weight-table": 400
-      "--font-lineheight-table": 1.45
-      "--font-size-caption": "12px"
-      "--font-weight-caption": 400
-      "--font-lineheight-caption": 1.4
-    spacing:
-      "--s-1": 4px
-      "--s-2": 8px
-      "--s-3": 12px
-      "--s-4": 16px
-      "--s-5": 20px
-      "--s-6": 24px
-      "--s-7": 28px
-      "--s-8": 32px
-      "--s-9": 36px
-      "--s-10": 40px
-    rounded:
-      "--corner-zero": 0px # 贴边拼接、表格和完整媒体边缘
-      "--corner-1": 4px # 小图形、复选框与柱形端角
-      "--corner-2": 8px # 输入和菜单项
-      "--corner-3": 12px # 浮层、气泡、弹窗
-      "--corner-4": 16px # 内部摘要容器和组合信息块
-      "--corner-5": 20px # 一级卡片、表单容器、抽屉和媒体外轮廓
-      "--corner-circle": 50% # 头像、圆形工具、图例圆点
-      "--corner-semicircle": 500px # 胶囊按钮、标签、进度条及阶段短条圆头
-    shadow:
-      "--shadow-1": "0px 2px 4px 0px rgba(0, 0, 0, 0.12)"
-      "--shadow-2": "0px 4px 20px -1px rgba(0, 0, 0, 0.16)"
-      "--shadow-3": "0px 10px 28px -2px rgba(0, 0, 0, 0.24)"
-  custom-page:
-    colors:
-      "--oyd-page-bg": "var(--pod-page-bg-color)" # 全局页面背景单向桥接
-      "--oyd-on-action-color": "#FFFFFF" # 操作前景底稿；按项目按钮实际背景核对对比度后调整
-      "--oyd-presentation-bg": "<生成实际色值：--color-brand1-6 35% + #FFFFFF 65%，sRGB 逐通道混合>" # 主题色浅变体；仅明确需要的展示衬底
-      "--oyd-hero-bg-start": "<生成实际色值：--color-brand1-6 40% + #101010 60%，sRGB 逐通道混合>" # 主题色深色指标表面左上端
-      "--oyd-hero-bg-end": "<生成实际色值：--color-brand1-6 22% + #101010 78%，sRGB 逐通道混合>" # 主题色深色指标表面右下端
-      "--oyd-hero-text": "#FFFFFF" # neutral-gray；深色指标前景
-      "--oyd-hero-muted": "<生成实际色值：#FFFFFF 68% + --oyd-hero-bg-start 32%，sRGB 逐通道混合>" # 深色指标辅助文字，保持设计稿原有浅深关系
-      "--oyd-chart-context-on-dark": "rgba(255, 255, 255, 0.20)" # 深色图表普通柱，独立数据视觉角色
-      "--oyd-chart-focus": "<生成实际色值：--color-brand1-6 50% + #FFFFFF 50%，sRGB 逐通道混合>" # 主题色明亮变体；当前数据焦点，不是成功状态
-      "--oyd-task-bg": "<生成实际色值：--color-brand1-6 8% + #141414 92%，sRGB 逐通道混合>" # 主题色低比例微染；近黑任务表面
-      "--oyd-task-text": "#FFFFFF" # neutral-gray；深任务面板前景
-      "--oyd-task-muted": "<生成实际色值：--color-brand1-6 5% + #B5B5B5 95%，sRGB 逐通道混合>" # theme-gray；任务面板辅助前景
-      "--oyd-task-line": "rgba(255, 255, 255, 0.10)" # 深任务面板内部边界
-      "--oyd-task-control-border": "<生成实际色值：--color-brand1-6 8% + #6B6B6B 92%，sRGB 逐通道混合>" # theme-gray；任务复选框边界，保持原有明度层级
-      "--oyd-task-hover": "rgba(255, 255, 255, 0.06)" # 深任务面板局部悬停叠色
-      "--oyd-action-ink": "<生成实际色值：--color-brand1-6 12% + #141414 88%，sRGB 逐通道混合>" # 可选近黑操作表面，仅明确采用该配色时消费
-      "--oyd-action-ink-hover": "<生成实际色值：--color-brand1-6 18% + #292929 82%，sRGB 逐通道混合>" # 可选近黑操作悬停，与其背景成组使用
-      "--oyd-data-light": "<生成实际色值：--color-brand1-6 35% + #FFFFFF 65%，sRGB 逐通道混合>" # 有序数据浅档
-      "--oyd-data-mid": "<生成实际色值：--color-brand1-6 70% + #FFFFFF 30%，sRGB 逐通道混合>" # 有序数据中浅档
-      "--oyd-data-primary": "<生成实际色值：--color-brand1-6 100% + #FFFFFF 0%，sRGB 逐通道混合>" # 主要数据及有定义的完成量
-      "--oyd-data-deep": "<生成实际色值：--color-brand1-6 70% + #000000 30%，sRGB 逐通道混合>" # 有序数据深档；非按钮按下色
-      "--oyd-data-ink": "<生成实际色值：--color-brand1-6 12% + #141414 88%，sRGB 逐通道混合>" # 主题色有序数据最深档；职责独立于按钮
-    typography:
-      "--oyd-font-size-display": "36px" # 独立总览摘要；按产品尺度推断，不替代普通页面标题
-      "--oyd-font-weight-display": 600
-      "--oyd-font-lineheight-display": 1.15
-      "--oyd-letterspacing-display": "-0.04em"
-      "--oyd-font-size-metric": "36px" # 普通独立指标；按产品尺度推断
-      "--oyd-font-weight-metric": 600
-      "--oyd-font-lineheight-metric": 1.1
-      "--oyd-font-size-hero-value": "48px" # 唯一重点指标；按产品尺度推断
-      "--oyd-font-weight-hero-value": 600
-      "--oyd-font-lineheight-hero-value": 1.1
----
-
-# {{PROJECT_NAME}} design.md
-
-## 1. 风格摘要
-
-**浅色画布 · 明暗对比面板（warm-canvas-contrast-panels）**
-
-主题色微染浅灰画布上排列大圆角白色面板，卡片依靠填色和留白形成边界，几乎没有投影。顶部导航与画布融为一体，文字成为页首的主要焦点；需要强调时，以少量主题色深色变体面板或近黑任务面板打破白卡节奏。操作是轮廓清楚的胶囊形，数据以细横条和紧凑图例表达。主题色明亮变体只用于特定数据焦点，避免全页争抢注意力。
-
-| 核心特征 | 可见表现 | 主要偏离风险 |
-| --- | --- | --- |
-| 微染色画布与白卡 | 主题色浅底、白卡、大圆角、较宽留白；色差承担边界 | 将微染画布改为无层级同色底、厚边框或重阴影卡片网格 |
-| 顶部导航与文字主导页首 | 横向导航选中用细下划线；已有总览可用两行较大文字 | 添加并不存在的侧栏，或把所有页面标题都放大成宣传语 |
-| 两类深面板各有用途 | 主题色深色变体表现核心数据，近黑承载需要优先处理的任务 | 全部卡片改深色，或把任务面板误当全局深色模式 |
-| 胶囊操作与轻量图形 | 与所在表面协调的主按钮、轮廓次按钮、细圆头横条和小标签 | 胶囊按钮一律近黑，或按钮、卡片、输入与图形统一成一种圆角和粗细 |
-| 单点明亮强调 | 当前数据柱与相关小标志使用主题色明亮变体，其余数据降低对比 | 将数据焦点色当作通用交互色或成功色或给每根柱都着重强调 |
-
-主题描述可迁移的视觉规则，不预设业务领域、菜单、卡片数量或页面矩阵。没有指标、媒体或待办的页面，通过浅色画布、白色平整容器、克制文字与胶囊操作即可体现主题。
-
-## 2. 页面视觉系统
-
-### 2.1 表面、区块与层次
-
-普通面板用底色差异与间距分层，不依赖阴影。深色表面是局部内容选择，各自拥有可读前景，不向邻近表单、菜单或弹层扩散。以下线宽和局部图形参数属于实施推断，不按图片导出倍率放大界面。
-
-| 对象 | 背景与前景 | 边界、形状与阴影 |
-| --- | --- | --- |
-| 应用根背景、页面画布 | `--pod-app-root-bg-color` 与 `--pod-page-bg-color`；自定义页通过 `--oyd-page-bg` 桥接 | 平整主题色微染浅灰，根背景图由 `--pod-app-root-bg-image` 控制且只作用于根节点 |
-| 普通卡片、表单主容器、详情面板 | `--pod-card-bg-color` 配 `--color-text1-4` | `--corner-5`，默认无投影、无显著描边；需要明确轮廓时用 1px `--color-line1-1` |
-| 表格正文 | `--pod-table-cell-color` | 连续白面，拼接边使用 `--corner-zero`，按需加细横线 |
-| 内部说明块、中性按下与选中 | `--color-fill1-2`；主文字或辅助文字按层级选择 | 内部摘要可用 `--corner-4`，不要复制外容器的大圆角和阴影 |
-| 轨道、未完成阶段和较重中性填充 | `--color-fill1-3` | 圆头按具体图形选用，不承担状态好坏含义 |
-| 深色指标面板 | `--oyd-hero-bg-start` 至 `--oyd-hero-bg-end`，前景用 `--oyd-hero-text`，说明用 `--oyd-hero-muted` | `--corner-5`，无投影；仅局部低幅度渐变 |
-| 深色任务面板 | `--oyd-task-bg`、`--oyd-task-text`、`--oyd-task-muted` | `--corner-5`，内部边线用 `--oyd-task-line`；无投影 |
-| 下拉、浮层、气泡、弹窗、弹出日历、导航弹出层 | `--color-fill1-5`；前景用 `--color-text1-4` 与 `--color-text1-10` | `--corner-3`；小浮层可用 `--shadow-1`，模态弹窗可用 `--shadow-2` |
-| 抽屉 | `--color-fill1-5`，前景配套浅色表面 | 露出角用 `--corner-5`，贴边处直角；必要时用 `--shadow-2` |
-| 图表读数浮卡 | `--color-fill1-5`，正文用主文字，色点对应真实序列 | `--corner-3`、`--shadow-1`；从深色图表弹出也保持独立白面 |
-| 短 Tooltip | `--color-fill1-10` 配 `--color-text1-5` | 固定深底浅字，`--corner-3`；不与数据浮卡混为一种表面 |
-
-普通卡片、重点指标卡和任务卡均不使用阴影档位；`--shadow-3` 保留为完整平台变量，本主题无默认使用对象。页面不是一张必须有外部留边的海报。仅项目明确需要展示衬底时使用 `--oyd-presentation-bg`，并在逐页设计中确定外围间距与应用边界；日常业务视口不强制套厚实的有色外框。
-
-### 2.2 应用导航
-
-微染浅灰导航接续画布，宽松菜单和柔圆轮廓与大面板呼应，当前入口使用深色文字与细指示线。
-
-菜单轮廓使用 --pod-nav-menu-item-radius、--pod-nav-menu-item-border、--pod-nav-menu-item-hover-border、--pod-nav-menu-item-selected-border。侧栏和顶部菜单共用轮廓，各状态保持相同边框宽度，文字位置稳定；具体数值以本项目 Token 为准。
-
-导航与应用框架、表单、自定义页面和详情页共用设计语言。先按业务入口安排菜单、分组、搜索、品牌区与常用操作，再一起确定导航与正文的明暗、表面、字体、边界、圆角和密度。平台导航使用真实页面菜单；自绘导航按同一套导航 Token 实现。命名模板沿用自身 navTheme，换主色保持导航明暗与内容画布；需要另一导航明暗时改选主题，自由创意按项目明确设计。
-
-导航底色使用 --pod-shell-theme-bg-color；普通、悬停和选中文字分别使用 --pod-nav-item-text-color、--pod-nav-item-text-hover-color、--pod-nav-item-text-selected-color；悬停和选中背景使用 --pod-nav-menu-bg-hover-color、--pod-nav-menu-bg-selected-color。图标跟随对应文字状态，当前入口同时用背景或字重表达。
-
-菜单高度、圆角与间距使用 --pod-nav-menu-item-height、--pod-nav-menu-item-radius、--pod-nav-menu-gap；搜索、品牌区、分组、操作和弹出菜单使用 navigation 分组中的对应 Token。弹出菜单的底色、文字与搜索状态成组配套，导航与内容可以分别选择明暗。选中项使用 --pod-nav-menu-item-selected-shadow：none 关闭额外标记，完整 box-shadow 值可表达左、右或底部内阴影，不占据菜单布局空间；该 Token 独立于导航明暗。菜单高度、文字行高、内距和框架留白一起调整，给外阴影、长标题与键盘焦点留出空间。
-
-桌面检查菜单、搜索、选中态与表单的协调；折叠后保留可识别图标和入口名称；窄屏保持菜单可展开、当前页面可定位、键盘焦点可见。提交、编辑、详情与自定义页都沿用这一导航设计。
-
-### 2.3 页面标题与操作
-
-普通页面标题使用全局标题规格。页面确有日期、问候或工作总览摘要时，可采用独立展示排版：第一行近黑，第二行用 `--color-text1-3` 降低强调，两行共同形成文字焦点。第二行必须来自真实摘要，不为填满布局增加工作量、成交数或宣传文案。
-
-页首已有操作放在摘要另一侧，以胶囊按钮成组排列，视觉上对齐摘要末行。主要动作按整页搭配选择操作强调色，次要动作用中性轮廓；背景已有强色时按组件规则调整前景和边界。同组间隔为 `--s-2` 或 `--s-3`。空间不足时将完整操作组移到文字下方，保持文字自然换行，不强行压缩成单行。
-
-内容标题与主要区块之间使用 `--s-6` 或 `--s-8`。卡片头部常采用低强调短标签，附属计数或已有更多操作位于另一侧；真正的分组标题仍使用清楚的正文标题规格。英文短标签可使用约 0.04em 字距（推断），中文不强制全角拉开或模拟英文大写。
-
-### 2.4 排版、间距与形状
-
-使用 `--font-family-base`，不假定识别出截图的准确字族。常规 UI 规格保持固定；总览展示和独立数字使用页面层角色，不反向放大所有页面文字。
-
-| 文字角色 | 字号、字重与行高 | 使用方式 |
-| --- | --- | --- |
-| 普通页面标题 | `--font-size-subhead`、`--font-weight-subhead`、`--font-lineheight-subhead` | 主文字色，适用于表单、列表和详情等常规标题 |
-| 卡片标题、对象名称 | `--font-size-body-2`、`--font-weight-body-2`、`--font-lineheight-body-2` | 主文字色；深色面板使用配套前景 |
-| 正文、按钮、输入 | `--font-size-body-1`、`--font-weight-body-1`、`--font-lineheight-body-1` | 说明按重要性降为辅助文字，避免所有正文都低对比 |
-| 表格与对齐明细 | `--font-size-table`、`--font-weight-table`、`--font-lineheight-table` | 表头用 `--color-text1-10`，主要值用主文字色 |
-| 短标签、日期、单位和元信息 | `--font-size-caption`、`--font-weight-caption`、`--font-lineheight-caption` | `--color-text1-3`；关键解释提高至 `--color-text1-10` |
-| 独立双行总览 | `--oyd-font-size-display`、`--oyd-font-weight-display`、`--oyd-font-lineheight-display` | 字距用 `--oyd-letterspacing-display`，只用于真实总览摘要 |
-| 普通独立指标 | `--oyd-font-size-metric`、`--oyd-font-weight-metric`、`--oyd-font-lineheight-metric` | 数值比标签明显突出，不放大附属变化值 |
-| 唯一重点指标 | `--oyd-font-size-hero-value`、`--oyd-font-weight-hero-value`、`--oyd-font-lineheight-hero-value` | 深色数据卡中使用反色，避免多处争夺最高层级 |
-
-数值使用等宽数字特性；货币、小数精度和日期按项目地区格式确定。数值与单位基线对齐，变化和比较口径保持近邻；空值、真实零值及不适用不能混淆。
-
-页面外侧留白使用 `--s-6` 或 `--s-8`，卡片间距使用 `--s-4` 或 `--s-5`；卡片内边距使用 `--s-5` 或 `--s-6`，内部信息组之间使用 `--s-4`，短标签与关联内容之间使用 `--s-2`。大块和小块可按真实信息优先级混排，不要求每页复刻相同网格、列数或跨列方式。
-
-形状依职责选择：卡片与媒体外轮廓用 `--corner-5`，内部说明块用 `--corner-4`，浮层用 `--corner-3`，输入和菜单用 `--corner-2`，复选框与小图形用 `--corner-1`。头像与圆形工具用 `--corner-circle`；按钮、紧凑标签和横条圆头用 `--corner-semicircle`。表格与媒体拼接面按需要使用 `--corner-zero`，不让每个单元格继承外卡片圆角。
-
-### 2.5 色彩、图标与点缀
-
-品牌色由项目输入确定；操作色、指标色与画布一起搭配，可以采用协调的辅助色。下列混色公式只为选用深色面板或近黑操作时提供底稿，不是通用配色算法：高比例暗灰会让不同品牌色都接近黑色，因此不能用它代替用户选择的明亮、浅彩或其他颜色关系。明确选用深色渐变时，方向约为 135°，限制在该面板内部。
-
-`--oyd-chart-focus` 是由品牌种子派生的数据焦点色，只在当前或选中类别以及直接关联的短标志中使用，不代表成功、开启或全站主要操作。普通深底柱使用 `--oyd-chart-context-on-dark`，两者必须仍以标签与数据值可辨识。
-
-有序横条可依需要使用 `--oyd-data-light`、`--oyd-data-mid`、`--oyd-data-primary`、`--oyd-data-deep`、`--oyd-data-ink`，这是品牌派生、职责独立的数据色系，不等于固定五个业务阶段。未完成轨道使用 `--color-fill1-3`。风险、逾期、错误、成功与信息沿用平台既有语义色；陶土橙式提醒只在平台定义的相应风险语义下出现，不作为随机分类装饰。
-
-内容图标采用统一细描边家族，尺寸以 `--s-4` 或 `--s-5` 为主，线宽约 1.5px（推断）。一般图标直接随文字显示；搜索、通知等已有工具有独立圆形点击边界。卡片不为每个标题额外增加图标盒。
-
-媒体使用真实内容图片，色彩可以丰富，但限定在已有媒体区域。没有合适素材时采用纯文字摘要或明确占位，不生成看似真实的业务照片。除了重点数据面的低幅渐变，页面不使用玻璃模糊、发光、噪声纹理或额外背景插画。
-
-## 3. 基础组件表达
-
-本部分描述组件存在时的表达，不是必须具备的组件清单。未列出的组件按任务结构、表面、文字、形状与状态推导，不新建同义变量。
-
-### 卡片、说明与标签
-
-普通卡片保持白面、大圆角和无阴影；不同任务通过位置和宽度建立主次，不给每张卡片都加深色标题条。局部说明块使用 `--color-fill1-2` 与 `--corner-4`，文字保持正常可读密度。短元信息标签使用轻中性填充与胶囊外形，状态标签另用平台语义，不能把标签当作未经证实的评分或匹配结果。
-
-普通指标摘要沿用卡片底和正文色，重点可用与画布协调的浅彩底、数字或图标强调，不要求与按钮同色。需要更强的明暗对比时再按页面设计选择深色指标或任务面板，配套前景并说明使用理由；“有指标”或“有待办”本身不构成使用深色的理由。不要将普通指标整排放进近黑任务容器，普通列表和表单继续使用白色表面。
-
-### 按钮、链接与输入
-
-主要胶囊操作先按画布、指标、图片和导航的配色选择背景：可用品牌色、协调的辅助色或中性色，前景使用项目核对过的 `--oyd-on-action-color`。选择品牌色时消费 `--color-brand1-6`，选择近黑时消费 `--oyd-action-ink`；其他搭配复用或补充项目操作变量，并成组定义状态，亮底不能直接假定白字可读。轮廓次按钮使用所在浅表面与清楚的细边框，刷新、筛选和详情保持中性。页首强调次按钮可用主文字色描边，白卡内部次按钮使用 `--color-line1-2`。文本入口使用清晰的链接色并配明确文字，可带小箭头，不为所有跳转添加实底。
-
-按钮高度按角色使用 `--s-7` 至 `--s-10`，常规操作用 `--s-8` 或 `--s-9`，更突出的主要操作使用 `--s-10`。小型行内操作可用 `--s-7`，但不缩小全局字体。图标与文字间隔使用 `--s-2`；顶栏圆形工具宽高相等，其他纯图标入口根据所属组件保留合适轮廓。
-
-输入默认表面使用 `--color-fill1-1`，不引用同为白色的卡片或 pop-up 背景。高度使用 `--s-8` 至 `--s-10`，圆角使用 `--corner-2`，边框使用 `--color-line1-2`，placeholder 使用 `--color-text1-10`。筛选弹层使用独立白色覆盖层，不继承近黑筛选按钮的底色。
-
-### 连续横条、离散阶段与图表
-
-连续横条表达数量、比例或进度时，轨道使用 `--color-fill1-3`，长度必须对应真实数据与明确尺度；多行比较保持同一分母或同一最大值，标签和末端数字沿固定轴对齐。条高可约 6–8px（推断），圆头用 `--corner-semicircle`。不能因为某类别在流程上靠后就任意缩短其数量条。
-
-离散阶段条按真实阶段数绘制短段，段间用 `--s-1` 留缝，已完成与未到达阶段清楚区分；等长短段只代表阶段顺序，不代表时长、金额或完成百分比。风险阶段需额外文字解释。阶段列标题与对应段轴线对齐，内容较长时由项目方案确定布局，不把截图中的阶段数固化。
-
-趋势图可弱化网格与轴，只在无需复杂精确比较时采用极简柱形；仍保留周期标签和可读数值入口。普通柱基线一致，当前类别以独立焦点色突出。图表颜色不引用品牌 hover、active 或 disabled 色，轴、数据位置、提示框、单位和比较口径必须同源。缺失数据不是零，不能绘制随机柱填满空白。
-
-### 明细、日程与任务列表
-
-普通表格使用 `--pod-table-cell-color`，通过 `var(--pod-card-bg-color)` 跟随卡片表面；表头可用 `--color-fill1-2` 与 `--color-text1-10`。默认只有浅横分隔线，行内垂直留白使用 `--s-3` 或 `--s-4`，避免重网格或每行独立浮卡。
-
-有时间关系的明细可排列为时间、状态点、名称及下一行说明；时间与名称保持固定对齐，状态点须有真实含义及文字说明。没有时间字段时不套用日程造型。已有头像、对象名和元信息以紧凑横向结构呈现，不添加虚构个人资料。
-
-近黑任务列表使用专属前景和边线。复选框轮廓使用 `--oyd-task-control-border`，小圆角用 `--corner-1`，未选状态保持空心；已完成状态使用项目既有完成规则，并同步更新对应文字。截止时间和真实逾期信息位于末端，按平台状态色在深底上的可读变体表达。普通任务不能因为位于深卡就自动被标为风险。
-
-### 状态与交互反馈
-
-| 状态 | 视觉处理 |
-| --- | --- |
-| Hover | 中性浅控件保持 `--color-fill1-1` 并加深边界或文字；近黑按钮用 `--oyd-action-ink-hover`；品牌交互用 `--color-brand1-1`；深任务行可用 `--oyd-task-hover` |
-| Active / pressed | 中性浅控件使用 `--color-fill1-2`，近黑按钮保持实底并减弱高光，品牌操作用 `--color-brand1-9`；不改变尺寸 |
-| Selected | 顶部自绘导航用专用选中色与细下划线；普通集合用浅中性底和清楚标记，数据焦点仅在相应图表使用主题色焦点 |
-| Focus | 约 2px 品牌色外轮廓及可见间隔（推断）；深面板使用能与底色区分的浅色轮廓 |
-| Disabled | 使用 `--color-text1-2` 或 `--color-brand1-10`；近黑主按钮禁用时退为中性表面与禁用文字，不保留强烈可操作暗示 |
-| Error / warning / success / info | 沿用平台语义色及自身表面的可读前景，配必要文字；不将数据焦点色或近黑自动解释为某类状态 |
-| Loading / empty | 骨架使用 `--color-fill1-3`，深表面可用配套低对比占位；空态用说明和已有操作，不填充假数值或图片 |
-
-状态过渡可用约 120–180ms 的颜色和透明度变化（推断），不默认弹跳、卡片上浮或持续数字滚动。输入、焦点、禁用、加载和完成反馈是按基础风格推导的实现规则，实际交互需在页面阶段验证。
-
-### 表单组件与版式结构
-
-表单使用与自定义页面相同的应用全局样式，字体、色彩、表面、边界、圆角、密度和状态延续本主题。表单支持在顶部、左侧、主体、右侧和字段之间组合 Tab/切换、按钮组/操作入口、图片/图形、状态区、标题与 `Divider`、`ColumnContainer`、辅助内容和业务字段。各组件承担导航、操作、视觉焦点、反馈、层级、节奏、装饰或采集作用。普通业务分组和章节分隔使用 `Divider`，横向字段组合使用 `ColumnContainer`。每张表单在项目 `design.md` 写清组件位置与作用、列比例、标签位置、字段与章节间距、底栏、详情延续和窄屏重排。
-
-## 4. 特色表达配方
-
-### R1 深色关键指标与单点亮柱
-
-**适用内容：** 一项需要优先理解的真实指标具有时间序列；目标达成标签只在存在明确目标与计算口径时显示。
-
-**继承基础：** 深色指标表面、关键数值排版、极简趋势图和数据焦点规则。
-
-**特殊组合：** 顶部用低强调标签与已有目标标记，中部放反色大数值和简短比较说明，下方放共同基线的柱形序列。普通柱使用半透明浅色，唯一当前或选中柱使用 `--oyd-chart-focus`，对应周期标签同步强调。与该数据直接相关的小胶囊可复用焦点色文字，胶囊底面为白色约 8% 的深表面叠色（推断），不扩展到其他卡片。
-
-**无匹配时：** 缺少趋势则只呈普通指标，没有目标则省略目标标志；没有核心指标时不生成深色数据卡，不为造型新增金额或月份。
-
-### R2 细横条的阶段数量比较
-
-**适用内容：** 实际对象处于若干定义明确的有序类别或阶段，需要比较各类别数量。
-
-**继承基础：** 连续横条、数据阶梯色系、标签与数值对齐规则。
-
-**特殊组合：** 先用一个主要计数概括总体，再按实际顺序逐行排列类别名、细横条和末端数值。色彩由浅到深表达顺序，长度仍由数量决定，两种编码不能互相替代。补充的热度、异常或其他子集计数必须有独立定义，不能仅通过颜色猜测。
-
-**无匹配时：** 无顺序的类别采用合适的独立分类表达，不强行套递进色；类别只有一项时回到普通计数或进度。阶段数不固定，不能因为有五档颜色就创建五个阶段。
-
-### R3 多记录的离散阶段条
-
-**适用内容：** 多条真实记录共享同一组有序步骤，需要比较各自推进位置。
-
-**继承基础：** 离散阶段、任务明细对齐、微染色轨道及状态语义规则。
-
-**特殊组合：** 每行左侧放主要值与对象说明，中部沿同一列轴排列圆头短段，右侧显示当前状态及日期；底部或顶部对齐真实步骤名称。已完成段用 `--oyd-data-primary`，未到达段用中性轨道色；真实风险以平台语义色定位到对应阶段，并保留说明，不能把整行已完成段一概改成告警色。
-
-**无匹配时：** 无公共流程时使用普通记录列表；连续百分比使用连续进度，不任意切段。没有风险或日期字段时不补造对应内容。
-
-### R4 近黑任务面板
-
-**适用内容：** 有一组需要集中处理的真实待办或跟进事项，并且深色面板能帮助识别其优先级。
-
-**继承基础：** 深色任务表面、复选框、专属前景和列表分隔规则。
-
-**特殊组合：** 面板标题与实际紧迫项计数分置两侧，记录使用空心复选框、主任务名、次级说明和末端时间。逾期文字与计数可使用平台风险语义在深底上的暖色表达；未逾期项保留中性。条目之间仅用很淡的横线分隔，任务面板与主题色深色指标面板通过品牌占比、明度和职责区分。
-
-**无匹配时：** 普通静态内容使用白色列表，不加复选框；没有紧迫项则省略逾期计数。若不提供完成操作，只呈清楚的状态，不能用可勾选造型伪装交互。
-
-### R5 横向媒体摘要与双层操作
-
-**适用内容：** 一个真实对象具有可识别的图片、摘要和已有查看或下一步操作。
-
-**继承基础：** 白色大圆角面板、真实媒体、文字层级、元信息胶囊与按钮主次规则。
-
-**特殊组合：** 图片与内容在同一横向容器中拼接，图片沿外轮廓裁切；文字区依次放名称与关键值、摘要及少量元信息标签，操作区排列主次分明的胶囊。图上角标只有在对象确有相应标识时出现。实际图片比例、区块宽度和窄屏顺序在项目方案中确定，避免以固定图片高度截断内容。
-
-**无匹配时：** 缺少真实媒体则转为文字摘要，缺少次动作则只保留已有主动作；不生成无关图片、虚构徽标或与对象无关的标签。
-
-## 5. 项目应用与调整规则
-
-### 变量、平台与规则优先级
-
-YAML 是变量值的唯一事实源，正文规定消费关系。全局变量供原生与自定义页面使用，本模板的扩展包含独立深色内容表面、数据色、展示衬底与数值排版。按分组递归读取以 `--` 开头的标量叶子，分组名称不拼入变量名；平台基础与项目扩展均在主题中声明，可无环引用，并按实际设计补充变量。
-
-原生导航只配置开放的六项颜色，项目确定自绘顶部导航时才实现下划线、工具和间距。导航明暗不决定内容明暗；局部深色指标与任务卡不改变白色覆盖层、输入或抽屉。阴影、表面和前景按各自角色消费，不能因某处同色就互相借用。
-
-需求决定页面、操作和内容，平台约束限定能力，主题规定视觉表达。配方不能覆盖自然内容增长、真实数据语义和明确平台限制。状态按平台既有语义接入，未提供接口名称时不编造变量。
-
-### 品牌色、深色表面与数据色实例化
-
-- 色彩来源：{{COLOR_SOURCE}}。
-- `{{PRIMARY_COLOR}}` 为唯一品牌种子，由项目输入及色彩来源确定，不在模板中提供固定兜底色。所有带主题色倾向的画布、导航、文字、边界、重点表面、操作和图形都直接或间接引用该种子。
-- 品牌七档分别保留悬停、平台预留浅色、派生浅色、派生深色、主色、按下与禁用语义。种子、基底、比例以 YAML 为准，需要主题色的导航和背景直接引用对应品牌浅深变体，同时保留各自职责。
-- sRGB 混合逐通道采用 `round(A通道 × A占比 + B通道 × B占比)`，通道为 0–255，占比之和为 100%，输出六位十六进制；不使用线性光转换。依赖其他生成色的变量先解析上游实际色值，再计算自身值。
-- 深色指标两端由品牌种子与暗色基底混合，辅助文字再由实际表面与白色生成。换色时沿用已确定的白色主前景、辅助文字比例和深色表面层级，只替换品牌来源，不额外重配明暗。
-- 主按钮和指标的配色与整页协调，颜色按各自角色选择；模板派生色可按项目设计调整，前景按实际底面配套。数据色系通过独立角色消费，不引用交互悬停或按下变量；主题色焦点不代替成功状态。平台状态继续按浅、深表面分别配套可读文字。
-- 导航六色成组独立确定。项目换品牌时，须同时重新确认画布、边界、导航与文字的关系，不能只替换一项导致背景与前景失配。
-- 实例化时替换占位符并计算所有生成标记，沿用设计稿确定的文字、背景和各交互状态配对；标签、边界及文字层级按本模板保持。
-
-### 项目页面设计
-
-只为实际需求中的页面填写确定结果，不复制参考中的品牌、姓名、领域对象、金额、菜单数量或固定卡片矩阵。每页包含：
-
-- **页面内容：** 页面名称、主要任务、真实字段、数据与已有操作。
-- **首屏印象：** 第一焦点及形成它的文字、明暗、留白与构图；有真实总览才使用双行展示文字。
-- **布局安排：** 实际区块位置、主次、宽度、列数、高度、对齐与窄屏顺序；明确哪些卡片跨列或等高，哪些随内容增长。
-- **视觉表达：** 各区域使用的表面、组件与状态；采用配方时写出编号及位置，不存在的深卡、媒体或图表直接省略。
-- **标志性时刻：** 一处具体静态构图或真实交互反馈，交代位置、条件、表现及其任务价值，可与首屏焦点相同。
-
-素材来源、缺图处理与特殊约束写入对应页面；仅使用真实或已授权的业务图像和身份素材。需要主题色派生展示衬底时明确用途及留边参数，否则应用使用完整视口。项目方案给出确定布局与颜色结果，不以“根据内容决定”代替决策，也不为了应用配方新增业务。
-
-{{PAGE_APPLICATIONS}}
-
-### 页面设计验收
-
-以下用于后续实际页面验收，尚未渲染时保持未勾选。
-
-- [ ] **首屏印象：** 焦点与主次符合方案，浅色画布、白卡和实际采用的深色面板形成清楚层级，数据焦点没有扩散为全站强调。
-- [ ] **布局安排：** 区块位置、宽度、列数、高度、对齐和窄屏顺序符合逐页方案，媒体与文字内容未被不合理裁切。
-- [ ] **风格表达：** 平整白面、大圆角、胶囊操作和文字层级成立；连续数值、离散阶段、状态及数据焦点各有清楚含义。
-- [ ] **标志性时刻：** 指定画面或交互反馈在对应条件出现，帮助理解真实信息或完成操作，没有借装饰暗示不存在的数据或功能。

package/yida-skills/skills/yida-design/templates/design-themes/warm-canvas-contrast-panels/form-layout.json

@@ -1,13 +0,0 @@
-[
-  {
-    "type": "ColumnContainer",
-    "layout": "12",
-    "columnGap": "16px",
-    "rowGap": "16px",
-    "display": "VERTICAL",
-    "mobileRowGap": "16px",
-    "children": [
-      []
-    ]
-  }
-]