openyida 2026.9.21 → 2026.9.22-beta.2

package/yida-skills/skills/yida-design/templates/design-themes/soft-spectral-panels/design.md

@@ -1,391 +0,0 @@
----
-name: "{{PROJECT_NAME}}"
-description: "近黑画布托起稍亮的主题暗面大圆角面板，品牌实心交互与细线图形形成轻柔对比；数据焦点仅局部发亮，主题同色阶与独立酸黄、暗红序列共同区分真实数据。"
-themeId: soft-spectral-panels
-navTheme: dark
-tokens:
-  application-global:
-    appearance: # 应用外观：应用背景、内容表面与完整导航设计
-      surfaces: # 应用背景与内容表面
-        "--pod-app-root-bg-color": "#000000" # neutral-gray；近黑壳层及内容挂载前底色
-        "--pod-app-root-bg-image": "none" # 应用根背景图；支持 none、完整 url("...") 或 CSS 渐变，只作用于根节点
-        "--pod-page-bg-color": "#000000" # neutral-gray；近黑内容画布，保留卡片间隙
-        "--pod-card-bg-color": "var(--color-brand1-5)" # 稍亮于画布的主题深色表面；不关联品牌禁用状态
-        "--pod-table-cell-color": "var(--pod-card-bg-color)" # 表格正文单元格背景；跟随卡片背景
-      navigation:
-        "--pod-shell-theme-bg-color": "#000000"
-        "--pod-nav-item-text-color": "var(--color-brand1-2)"
-        "--pod-nav-item-text-hover-color": "var(--color-brand1-3)"
-        "--pod-nav-item-text-selected-color": "#111111"
-        "--pod-nav-menu-bg-hover-color": "var(--color-brand1-5)"
-        "--pod-nav-menu-bg-selected-color": "var(--color-brand1-6)"
-        "--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": "#353535"
-        "--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 #353535"
-        "--pod-nav-logo-border-radius": "8px"
-        "--pod-nav-sub-divider-color": "#353535"
-        "--pod-nav-item-text-disabled-color": "rgba(255,255,255,.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": "#353535"
-        "--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(0,0,0,.24)"
-        "--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": "#353535"
-        "--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": "#353535"
-        "--pod-nav-action-border": "1px solid #353535"
-        "--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": "999px"
-        "--pod-nav-menu-item-border": "1px solid transparent"
-        "--pod-nav-menu-item-hover-border": "1px solid var(--color-brand1-6)"
-        "--pod-nav-menu-item-selected-border": "1px solid var(--color-brand1-6)"
-        "--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 18% + #A4A4A4 82%，sRGB 逐通道混合>" # 品牌浅灰变体；保留设计稿普通导航文字的灰浅层级
-      "--color-brand1-3": "<生成实际色值：--color-brand1-6 4% + #FFFFFF 96%，sRGB 逐通道混合>" # 品牌派生浅色
-      "--color-brand1-5": "<生成实际色值：--color-brand1-6 12% + #000000 88%，sRGB 逐通道混合>" # 品牌派生深色；在近黑画布上形成可辨的主题暗面
-      "--color-brand1-6": "{{PRIMARY_COLOR}}" # 唯一主题主色种子；按项目输入实例化，不保留固定色相兜底
-      "--color-brand1-9": "<生成实际色值：--color-brand1-6 76% + #000000 24%，sRGB 逐通道混合>" # 品牌交互元素激活或按下
-      "--color-brand1-10": "<生成实际色值：--color-brand1-6 6% + #080808 94%，sRGB 逐通道混合>" # 品牌交互元素禁用；不承接内容卡片或数据图形
-      "--color-line1-1": "<生成实际色值：--color-brand1-6 8% + #0E0E0E 92%，sRGB 逐通道混合>" # 主题派生灰；细弱面板轮廓、行分隔与辅助网格
-      "--color-line1-2": "<生成实际色值：--color-brand1-6 10% + #181818 90%，sRGB 逐通道混合>" # 主题派生灰；控件及浮层边界，不形成亮灰描框
-      "--color-fill1-1": "<生成实际色值：--color-brand1-6 6% + #080808 94%，sRGB 逐通道混合>" # 主题派生灰；输入基础、中性悬停及弱填充，保留独立控件职责
-      "--color-fill1-2": "<生成实际色值：--color-brand1-6 8% + #0D0D0D 92%，sRGB 逐通道混合>" # 主题派生灰；中性按下及选中
-      "--color-fill1-3": "<生成实际色值：--color-brand1-6 10% + #0E0E0E 90%，sRGB 逐通道混合>" # 主题派生灰；较重填充、快捷键底盒与进度轨道
-      "--color-fill1-5": "<生成实际色值：--color-brand1-6 12% + #131313 88%，sRGB 逐通道混合>" # 主题派生灰；比卡片略亮的下拉、弹窗、抽屉和数据读数浮层
-      "--color-fill1-10": "#262626" # neutral-gray；固定深色 Tooltip 背景，不随品牌或明暗主题变化
-      "--color-text1-5": "#FFFFFF" # neutral-gray；固定 Tooltip 反色文字，与 --color-fill1-10 配套
-      "--color-text1-4": "<生成实际色值：--color-brand1-6 6% + #F7F7F7 94%，sRGB 逐通道混合>" # 主题派生近白；标题、核心数字与正文
-      "--color-text1-10": "<生成实际色值：--color-brand1-6 8% + #CECECE 92%，sRGB 逐通道混合>" # 主题派生浅灰；表头与 placeholder
-      "--color-text1-3": "<生成实际色值：--color-brand1-6 10% + #B8B8B8 90%，sRGB 逐通道混合>" # 主题派生浅灰；辅助说明、单位与坐标
-      "--color-text1-2": "<生成实际色值：--color-brand1-6 10% + #737373 90%，sRGB 逐通道混合>" # 主题派生灰；仅禁用文字
-      "--color-text1-1": "<生成实际色值：--color-brand1-6 8% + #484848 92%，sRGB 逐通道混合>" # 主题派生灰；仅水印文字
-    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: # 按组件用途选择 Token；修改数值会同步影响所有引用该 Token 的组件
-      # 调整风格时保留用途映射；常规圆角增大更圆润、减小更利落，各数值档位保持递增
-      "--corner-zero": "0px" # 连续拼接与贴边区域
-      "--corner-1": "4px" # 微型方块、图例色块及小标签
-      "--corner-2": "8px" # 输入、按钮和菜单项
-      "--corner-3": "12px" # 浮层、气泡与弹窗
-      "--corner-4": "16px" # 组内独立媒体或信息子区
-      "--corner-5": "24px" # 卡片、表单主容器和抽屉
-      "--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-accent-color": "<生成实际色值：--color-brand1-6 4% + #0D0D0D 96%，sRGB 逐通道混合>" # 主题派生近黑；设计稿中亮底操作的固定深色前景
-      "--oyd-chart-series-1": "<生成实际色值：--color-brand1-6 22% + #E3E3E3 78%，sRGB 逐通道混合>" # 主题派生浅色数据系列，保持独立数据角色
-      "--oyd-chart-series-2": "<生成实际色值：--color-brand1-6 62% + #2A2A2A 38%，sRGB 逐通道混合>" # 主题中明度数据系列，弱于实心操作，不借用交互状态
-      "--oyd-chart-series-3": "#D6EB3A" # 独立酸黄数据序列，不等于成功或警告
-      "--oyd-chart-series-4": "#A9666E" # 独立低饱和红数据序列，不等于错误
-      "--oyd-chart-focus": "<生成实际色值：--color-brand1-6 42% + #FFFFFF 58%，sRGB 逐通道混合>" # 主题派生读数光点，不表示额外数据类别
-      "--oyd-heat-low": "<生成实际色值：--color-brand1-6 7% + #0D0D0D 93%，sRGB 逐通道混合>" # 主题派生测量尺度低端，非 disabled
-      "--oyd-heat-high": "<生成实际色值：--color-brand1-6 46% + #000000 54%，sRGB 逐通道混合>" # 主题派生测量尺度高端；保持低于品牌按钮的明度，非 selected
-      "--oyd-missing-pattern": "<生成实际色值：--color-brand1-6 10% + #757575 90%，sRGB 逐通道混合>" # 主题派生灰；缺失斜纹前景，非零值或数值高低
-    typography:
-      "--oyd-font-size-metric": "28px" # 独立重点数值，推断
-      "--oyd-font-weight-metric": 500
-      "--oyd-font-lineheight-metric": 1.2
----
-
-# {{PROJECT_NAME}} design.md
-
-## 1. 风格摘要
-
-**柔光深面 · Soft Spectral Panels**
-
-近黑画布与独立配色的导航构成壳层，稍亮的主题暗面托起大圆角面板，边界轻薄，内部留白稳定。文字以灰白建立主次，品牌实心控件采用亮底深字。需要读数时，细定位线、浅色节点与很小的光晕形成局部焦点；其他区域保持平整安静。
-
-| 核心特征 | 可见表现 | 主要偏离风险 |
-| --- | --- | --- |
-| 低饱和主题暗面层次 | 近黑壳层与稍亮的主题内容卡分开，弱轮廓围合圆润大面板 | 高比例主色铺满背景或抹平表面明暗差，会破坏层次 |
-| 大面柔圆、控件紧凑 | 外卡圆角明显，输入和操作小圆角，图形在面板内充分展开 | 所有对象使用同一圆角，或让每条记录独立成卡，会削弱形状分工 |
-| 品牌操作与稀疏数据亮色 | 主要交互使用品牌底和既定深色前景，酸黄与暗红只标真实数据系列 | 把数据色解释成成功／错误，或将整张卡填成品牌渐变 |
-| 读数处的局部亮点 | 光点、细竖线与小读数气泡强调一个确定位置 | 大范围霓虹、持续呼吸动画或多处同时发光，会破坏注意力层级 |
-
-表面、文字、形状与操作规则在普通表单、列表和详情中也应成立。多曲线、微图、矩阵、时间条和媒体说明仅在有相应内容时启用，不以保留画面为理由新增数据或功能。
-
-## 2. 页面视觉系统
-
-YAML 维护变量值，正文维护角色关系。主题暗面、偏色灰和同色图形均从主色与无色相灰基底生成；无色相中性值标注 `neutral-gray`，独立分类色保留明确的数据角色。局部尺寸和未展示的状态是实施推断，不以图像导出倍率改变全局字体。
-
-### 2.1 表面、区块与层次
-
-| 对象 | 背景及前景 | 边界、圆角与阴影 |
-| --- | --- | --- |
-| 应用根背景 | `--pod-app-root-bg-color` 与 `--pod-app-root-bg-image`；背景图只作用于根节点 | 默认近黑无背景图；外部绿光、模糊背景和展示留白不进入应用 |
-| 页面画布 | `--pod-page-bg-color`；自定义页用 `--oyd-page-bg` 单向桥接 | 贴边部分用 `--corner-zero`，以留白分区 |
-| 一级卡片、表单与详情主容器 | `--pod-card-bg-color`；主前景 `--color-text1-4`，说明 `--color-text1-3` | `--corner-5`，`--color-line1-1` 细轮廓，无明显外投影 |
-| 内部分段与辅助面 | 优先沿用所在表面，必要弱填充使用 `--color-fill1-1` | 留白或 `--color-line1-1` 分隔；独立子区最多使用 `--corner-4`，不无限套卡 |
-| 表格表头与正文 | 表头弱填充 `--color-fill1-1`、文字 `--color-text1-10`；正文 `--pod-table-cell-color` 跟随卡片 | 内部保持连续拼接，只在外壳保留圆角 |
-| 下拉、气泡、弹出日历、弹窗和导航弹出层 | `--color-fill1-5`；主文字 `--color-text1-4`、说明 `--color-text1-3` | `--corner-3`、`--color-line1-2`；小浮层用 `--shadow-1`，弹窗用 `--shadow-2` |
-| 抽屉 | `--color-fill1-5` 及配套内容前景 | 外露角 `--corner-5`，贴边角归零；`--color-line1-2`、`--shadow-2` |
-| 图表读数卡 | `--color-fill1-5`；数值 `--color-text1-4`、单位／时间 `--color-text1-3` | 通常 `--corner-3`；仅单行短读数可用 `--corner-semicircle`，必要时 `--shadow-1` |
-| 短 Tooltip | 固定 `--color-fill1-10` 与 `--color-text1-5` 配对 | `--corner-3`，与图表读数卡分开消费 |
-
-画布与面板保留明确层差：页面为近黑，导航独立配色，卡片用品牌深色变体，读数浮层再略亮一档。卡片内部的图形直接绘在该表面上，不另铺黑色绘图区；搜索框保留自己的深色填充，快捷键底盒用 `--color-fill1-3`。
-
-边界建议 1 CSS px（推断），只在暗面边缘形成细弱轮廓。表面层次依靠色差与轮廓，不借助玻璃模糊、双重倒角或大面积光晕；`--shadow-3` 保留为平台档位，主题默认不启用。根背景不继承到卡片、表格和输入。
-
-### 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 页面标题与操作
-
-标题区与黑色画布连成一体，不强制再包卡。页面标题沿用 subhead 规格，搜索与已有主操作按阅读顺序排列，组内间距 `--s-3` 至 `--s-4`；缺少标题、搜索或状态时不留空壳。
-
-已有并列的短摘要可在页头用细线和留白分组，轮廓可采用轻微弧肩连接（推断）；它们仍是信息区，不因造型近似 Tab 就暗示切换行为。已有实时提示可用短胶囊承载状态点与文字，状态必须来自真实数据，不能自动把红色点解释成实时或成功。
-
-空间不足时摘要与操作换行，保持标题优先。面板标题使用普通图标与文字，尾部更多、筛选和图例只服务实际内容；图例和动作不能互相混淆。
-
-### 2.4 排版、间距与形状
-
-全局采用 `--font-family-base`，中文回退到可用系统无衬线。数值启用等宽数字特性，保持单位与精度一致；普通文本不改为等宽字体。
-
-| 角色 | 字号 / 字重 / 行高 | 前景 |
-| --- | --- | --- |
-| 页面标题 | `--font-size-subhead` / `--font-weight-subhead` / `--font-lineheight-subhead` | `--color-text1-4` |
-| 面板标题与重要名称 | `--font-size-body-2` / `--font-weight-body-2` / `--font-lineheight-body-2` | `--color-text1-4` |
-| 正文、字段标签与操作 | `--font-size-body-1` / `--font-weight-body-1` / `--font-lineheight-body-1` | 主要内容 `--color-text1-4`，说明 `--color-text1-3` |
-| 表格 | `--font-size-table` / `--font-weight-table` / `--font-lineheight-table` | 正文 `--color-text1-4`，表头 `--color-text1-10` |
-| 元信息、图例、单位与坐标 | `--font-size-caption` / `--font-weight-caption` / `--font-lineheight-caption` | `--color-text1-3`，不降为禁用灰 |
-| 重点指标 | `--oyd-font-size-metric` / `--oyd-font-weight-metric` / `--oyd-font-lineheight-metric` | `--color-text1-4` |
-
-页面边距使用 `--s-5` 至 `--s-6`，卡片之间 `--s-4`，独立区段之间 `--s-6`；普通卡片内边距 `--s-5`，内容紧凑时使用 `--s-4`。标题与主体间隔 `--s-4`，同组信息间隔 `--s-2`，连续两行元信息之间 `--s-1`。视觉密度通过布局和留白调整，不缩小固定字体。
-
-外卡、表单容器用 `--corner-5`，独立媒体或内部子区用 `--corner-4`，浮层用 `--corner-3`，输入、按钮与普通菜单用 `--corner-2`，微型方块和图例用 `--corner-1`。头像与圆点用 `--corner-circle`；周期标签、单行读数和真实需要的圆按钮可用 `--corner-semicircle`，其他对象不一律胶囊化。
-
-各页的列数、比例、高度与必要等高对象由第五部分确定；内容自然增长，不要求统一卡片高度或独立内部滚动。
-
-### 2.5 色彩、图标与点缀
-
-品牌种子用于主要操作、必要交互焦点、主题暗面、偏色灰及主题图形。表面使用低比例主色混合无色相基底，控制染色强度；按钮固定采用设计稿确定的深色前景。
-
-`--oyd-chart-series-1`、`--oyd-chart-series-2` 是品牌同源的数据浅色与中间色；`--oyd-chart-series-3`、`--oyd-chart-series-4` 是独立酸黄与低饱和红分类色。它们不等于四个固定业务类别，也不等于信息、成功或错误。图例、线条、点与读数在同一系列内保持一致，线型可辅助辨识。更多系列需要项目另行确定可区分映射，不循环套色。
-
-成功、错误、警告与信息反馈使用平台已有语义；尚无平台变量名时只描述语义，不在页面层复制同义状态色。`--oyd-chart-focus` 仅定位当前读数，不能充当额外序列。
-
-热力尺度使用 `--oyd-heat-low` 至 `--oyd-heat-high`，实心单元保持低于品牌操作的明度，独立于交互 hover、selected、disabled；`--oyd-missing-pattern` 表示项目已明确的缺失编码，不能等同于零值。
-
-图标采用同一家族的细线轮廓，建议 18–20 CSS px、线宽 1.5 CSS px（推断）；导航主图标可适度增大。一般不设底盒，只有已成组的媒体元信息等内容可采用弱填充小盒。
-
-局部光晕仅围绕当前读数点：使用 `--oyd-chart-focus` 的低透明叠色，建议不透明度 16%、扩散半径 6 CSS px（推断），不沿整条曲线持续发光。面积微图可在曲线与真实基线之间以本序列色从 12% 透明度向 0 渐隐（推断），裁切在绘图区。没有数据的背景不增加随机曲线、点阵、网格或光效。
-
-## 3. 基础组件表达
-
-本节规定组件存在时的表达，不构成必须拥有的组件清单。未列出的组件按任务结构、表面、文字、控件形状和状态推导。
-
-### 面板、数值与微图
-
-面板继承大圆角与弱轮廓；标题用线图标和文字清晰定位，已有图例或辅助动作在尾部排列。主体保留稳定内边距，不让曲线或图片压住文字。数值单元由名称、主要读数和口径说明组成，图形与数字顺序服从实际内容，不要求每张卡布局相同。
-
-微图只能编码真实的小规模序列：连续观测可用折线或面积线，阶梯线用于分段恒定或离散切换，短柱用于离散数量，点阵须说明每点的计量或分组方式。没有对应序列时只显示数值和说明；不为凑图形新增数据类别或伪造走势。
-
-变化量必须有真实基期，正负号、箭头与文案方向一致。占比须明确分子分母、是否互斥以及舍入策略；超过百分之百的增长率或倍数不能当作有上限的参与率。标题汇总与图内量纲不同但确有业务关系时分别标注，不能用百分比读数冒充计数坐标上的值。
-
-### 按钮、输入与表单
-
-| 组件 | 表达规则 |
-| --- | --- |
-| 主操作 | 背景 `--color-brand1-6`，自绘前景固定使用 `--oyd-on-accent-color`；常态、悬停和按下均保持设计稿的亮底深字关系，原生按钮沿用同一配对 |
-| 中性操作 | 背景 `--color-fill1-1` 或透明，前景 `--color-text1-4`，边界 `--color-line1-2`；需要较重填充时用 `--color-fill1-3` |
-| 图标操作 | 与相邻文本动作同尺度，常规 `--corner-2`；仅真正圆形操作使用 `--corner-semicircle` |
-| 输入、搜索、筛选与选择器 | 基础背景 `--color-fill1-1`，输入文字 `--color-text1-4`，placeholder `--color-text1-10`，边界 `--color-line1-2`，圆角 `--corner-2` |
-| 多行输入 | 沿用输入角色，按内容增长；工具区与正文以 `--s-3` 留白分开 |
-
-按钮高度按用途选 `--s-7` 至 `--s-10`，普通操作为 `--s-8`；输入与筛选选 `--s-8` 至 `--s-10`，默认 `--s-9`。输入不借用卡片或 pop-up 背景；显示快捷键提示时必须有对应真实能力，不能照抄示例键位。
-
-表单标签贴近输入，间距 `--s-2`，字段间隔 `--s-4`，独立分组间隔 `--s-6`。说明用正常可读的辅助前景，错误信息采用平台错误语义；大外壳内部不逐字段包成新卡片。
-
-### 表格、列表与信息单元
-
-表格正文消费 `--pod-table-cell-color`，通过 `var(--pod-card-bg-color)` 跟随卡片；表头背景 `--color-fill1-1`，前景 `--color-text1-10`。使用弱横分隔线，内部单元格保持连续比较，不逐格大圆角。行内上下留白 `--s-3`，左右 `--s-4`，文本左对齐、数值右对齐；仅对真实可排序列显示排序标识。
-
-独立列表采用主文案、必要的次行信息与细分隔，允许自然换行。确有图片或头像时才使用对应素材；没有时使用清楚的文本或中性标识。含多个属性的信息单元可将图标、字段名与数值排成短行，小图标底使用 `--color-fill1-1`，不要增加一组彩色盒。
-
-普通状态标签采用平台状态色与文字，小范围填充或描边即可；全行染色、每条记录独立投影和大面积品牌标签不属于默认表达。
-
-### 图形与交互状态
-
-图例、图形、读数与可读明细来自同一数据源；每条系列的颜色和线型保持稳定。轴刻度按真实数值有序排列，倒置坐标仅在真实任务要求且明确标识时采用。时间轴使用有效日期、明确时区和统计区间；时间筛选变化必须同时更新数据、轴与摘要。
-
-序列曲线可用不产生额外极值的平滑插值，离散变化仍保留阶梯或折线。非焦点系列可以降低视觉重量，但不能把有效数据淡到不可辨；必要时通过线型、直接标签和选择反馈加强区分，不绘制伪造背景曲线。
-
-基础进度轨道使用 `--color-fill1-3`，完成区域使用符合真实语义的品牌或平台状态色；需有有效目标和当前量，不能拿热力尺度或 hover 色替代进度角色。
-
-| 状态 | 表达 |
-| --- | --- |
-| Hover | 中性透明对象用 `--color-fill1-1`，已有同底色控件加强文字或边界；品牌按钮用 `--color-brand1-1` |
-| Active | 中性对象用 `--color-fill1-2`，品牌按钮用 `--color-brand1-9`；不改变布局 |
-| Focus | 清楚的品牌轮廓，建议线宽 2 CSS px、偏移 2 CSS px（推断）；控件焦点不借用图表光点语义 |
-| Selected | 中性选中用 `--color-fill1-2` 配合文字或勾选；需要明确实心强调的周期选择使用品牌底和既定深色前景；导航使用独立六色 |
-| Disabled | `--color-text1-2` 及对应禁用表面，品牌操作用品牌禁用角色；禁用态不保留可操作高亮 |
-| Error / Warning / Success / Info | 平台状态前景、图标和文字共同表达；酸黄与暗红图表色不自动承担这些含义 |
-| Loading / Empty / Missing | 中性占位或明确说明；缺失样本与零值区分，不用随机数据填图 |
-
-轻量颜色过渡建议 120–180 ms（推断）。图表定位点在有效选择发生时出现，不持续呼吸；普通卡片不悬浮缩放。覆盖层内的输入、悬停和选中仍消费各自角色，不直接继承导航配色。
-
-### 表单组件与版式结构
-
-表单使用与自定义页面相同的应用全局样式，字体、色彩、表面、边界、圆角、密度和状态延续本主题。表单支持在顶部、左侧、主体、右侧和字段之间组合 Tab/切换、按钮组/操作入口、图片/图形、状态区、标题与 `Divider`、`ColumnContainer`、辅助内容和业务字段。各组件承担导航、操作、视觉焦点、反馈、层级、节奏、装饰或采集作用。普通业务分组和章节分隔使用 `Divider`，横向字段组合使用 `ColumnContainer`。每张表单在项目 `design.md` 写清组件位置与作用、列比例、标签位置、字段与章节间距、底栏、详情延续和窄屏重排。
-
-## 4. 特色表达配方
-
-### R1 曲线定位线与局部读数
-
-**适用内容：** 真实有序序列需要查看某一时点或类别的值，且选择位置与数据项存在明确映射；多序列比较需有共同横轴与兼容量纲。
-
-**继承基础：** 采用第三部分图形规则、2.5 的序列色与主题局部光点、2.1 的数据读数表面。
-
-**特殊组合：** 从选定横轴位置绘制细竖向定位线，交点保留原系列颜色，并以 `--oyd-chart-focus` 小圆环或光点强调。读数卡靠近交点，显示系列、实际值、单位和时点；当前横轴标签可用品牌色短胶囊呼应。折线建议 1.5–2 CSS px、定位线 1 CSS px、焦点外径 6 CSS px（推断）。读数较多时使用正常浮层，不强塞进单行胶囊；线与点不改变真实图形几何。
-
-选择变化时光点、定位线、横轴标签、读数和相关摘要同步更新。左右移动标记仅在实际支持移动选择时出现，不把静态图表做成虚假滑块。多序列交点不同，浮层须分别标识对应系列，不将焦点颜色当成新系列。
-
-**无匹配时：** 无交互需求时保留普通图形与可读标签；无法映射到真实值时不显示精确读数。缺失点显示缺失，禁止自动补成零或从曲线造型反推数据。
-
-### R2 共用时间轴的区间条
-
-**适用内容：** 有真实起止时间和类别，需跨对象或周期比较状态占用、持续时间或活动区间。
-
-**继承基础：** 使用基础图形与文字规则、2.5 的系列调色板，承载面保持统一主题暗面。
-
-**特殊组合：** 每行在同一时间轴上放置实际区间条，条高建议 `--s-4`，行间留白 `--s-2`（推断），外露角使用 `--corner-1`。起止位置由时间戳映射，横向长度表达时长；颜色只表示类别，不再同时编码相同的时长值。所有行使用相同时间范围，空白代表无区间时需有明确说明。
-
-仅在真实数据是可相加的组成量时，项目才将该区域确定为堆叠横条；此时轴单位改成实际数量，颜色、图例、总量和条长统一，不再保留时间刻度。区间图与堆叠图是不同数据任务，实例化必须选定一种。重叠区间用可辨的分轨或实际任务所需方式表达，不能顺次拼接伪造成持续时间。
-
-**无匹配时：** 只有总量而无时间区间时使用普通条形或数值列表；类别不互斥时不能画成组成堆叠。不能为保持图形外观把消息数、百分比与小时放在同一条轴上。
-
-### R3 有缺失标记的测量矩阵
-
-**适用内容：** 两个明确维度构成网格，每个交叉单元有同口径测量值，且数据能够区分已测零值、未知和不适用。
-
-**继承基础：** 使用第三部分数据规则、2.5 的热力色阶和缺失纹理，单元使用 `--corner-1`。
-
-**特殊组合：** 方形或近方形单元等距排列，间距建议 `--s-1`（推断）。在明确的共同数值域 [a,b] 且 b > a 下，t = clamp((值 − a) / (b − a), 0, 1)，在 `--oyd-heat-low` 和 `--oyd-heat-high` 间按 t 做编码后 sRGB 逐通道线性插值。图例显示真实范围和单位；越界值在明细说明，不隐瞒截色处理。不同页面需要比较时共用尺度，不能逐行自行归一化。
-
-斜纹表示缺失是本主题的可选实施推断，只有项目采用此含义时才启用：以 `--oyd-missing-pattern` 在卡片底上绘制约 135°、线宽 1 CSS px、周期 4 CSS px 的纹理，并在图例明确“无数据”。已测零值使用真实数值尺度，不能同样画斜纹；不适用需另有清楚标记。当前单元可用品牌轮廓和读数卡高亮，但不改变原数值填充。
-
-轴标签有序、与筛选周期一致，小时需保持同一时间制度并注明时区；不能一边选择周，一边仍展示含义未变的月份轴。稀疏数据不靠重复填充方格制造密度。
-
-**无匹配时：** 无共同单位、无完整维度关系或不支持缺失判断时使用列表或普通分类图；数据全同值时显示明确的单值图例，不对零宽数值域执行插值。平台无法表达斜纹时用明确的缺失符号与图例，不退化为“零值同色”。
-
-### R4 融入面板的媒体说明
-
-**适用内容：** 实际对象具有可用图片与需要展示的相关属性，并有明确的查看或后续动作。
-
-**继承基础：** 沿用面板圆角、信息单元、正文层级与按钮表达，不依赖任何图表配方。
-
-**特殊组合：** 图片和说明位于同一个主题暗面容器，图片裁切与外壳圆角一致，文本区按标题、属性短行、已有动作排列。素材具备透明背景或可融入深底时，可让主体直接接近卡片底面；使用正常照片时采用合适裁切，不强行抠图或虚构人物。属性以小图标、字段名和数值组织，主操作使用品牌底及既定的 `--oyd-on-accent-color` 深色前景。
-
-图片比例、左右顺序、裁切焦点及窄屏重排在项目页设计中确定，文字不得被图片压住。素材本身的色彩可保留，不能为匹配主题给整页叠加光雾。不要沿用示例人物、姓名、活动主题或评分。
-
-**无匹配时：** 无图片时使用普通信息面板，不添加虚构肖像；只有图片而无相关内容时按实际媒体任务设计，不凑属性。无真实动作时不显示演示按钮，也不为了配方新增媒体板块。
-
-## 5. 项目应用与调整规则
-
-### 变量与项目换色
-
-YAML 是已声明变量的唯一数值来源。全局变量供原生与自定义页消费，本模板的扩展包含独立亮底前景、图表序列、读数点、热力尺度、缺失纹理及重点数值规格。递归读取以 `--` 开头的标量叶子，分组名不拼入变量名；不重复定义，平台基础与项目扩展均在主题中声明，可无环引用，并按实际设计补充变量。
-
-需求决定内容，平台约束限定能力，主题规定视觉表达。原生导航仅配置六色，自绘导航沿用已确定结构；条件配方不能覆盖真实内容增长、测量口径或平台限制。
-
-- 色彩来源：{{COLOR_SOURCE}}。
-- 品牌种子为 `{{PRIMARY_COLOR}}`。没有品牌输入时从项目已选品牌或明确的色彩来源确定并记录，不保留固定色相兜底；用户给定种子不静默替换。
-- 品牌派生公式以 YAML 为准：将种子与基底解析为 8 位 sRGB，逐通道取 round(a × seed + b × base)，a + b = 1，限制为 0–255 后输出六位十六进制。直接混合编码后的 sRGB，不执行线性光转换；项目文档替换全部生成标记。
-- 七个 Brand Token 保留各自用途；appearance 的主题角色引用对应浅深变体。卡片使用 `--color-brand1-5` 的深色变体，由 `--pod-card-bg-color` 承接表面职责；`--color-brand1-10` 仅服务品牌禁用状态。近黑画布保持中性，导航使用项目配色，主题暗面、偏色灰、同色数据序列、焦点和热力尺度随主色重算；酸黄、暗红分类及平台状态保留自身语义。
-- 导航六项保持独立角色并通过 Brand 引用同步主题色，不引用内容 Text／Fill。基础表面 `--color-white`、内容表面和 pop-up 保留暗色模式及既定前景，导航沿用本模板 navTheme 对应的成组配色；换主色不自动改换明暗模式。
-- 文字、导航和品牌操作保留设计稿的底色、前景与状态配对，不按主色亮度自动挑选黑白前景、反转明暗或修改中性色值。图形保留直接读数、线型和边界等既定表达，主题派生仅按 YAML 的固定比例生成。
-
-局部推断参数可按平台能力调整，保留低饱和主题暗底、大圆角、实心品牌交互与局部读数亮点的关系。字号和间距沿全局固定档位；不得为图形丰富度补造曲线、日期、媒体或业务指标。
-
-### 项目页面设计
-
-仅为实际页面填写确定结果：
-
-- **页面内容：** 页面名称、任务、真实信息、操作及必要数据口径。
-- **首屏印象：** 第一视觉焦点、主次关系及整体感受，并说明构图、主题暗面、留白与局部强调的具体安排。
-- **布局安排：** 区块位置、宽度、列数、高度、对齐及必要等高对象，明确窄屏顺序；不预设五张指标卡、多图拼板或固定媒体位置。
-- **视觉表达：** 各区块采用的表面、文字和组件规则；选择配方时注明编号、位置及满足的内容条件。
-- **标志性时刻：** 一处明确静态画面或关键反馈，说明位置或触发条件、视觉表现及任务价值。
-
-首屏印象与标志性时刻可来自同一处。素材来源、缺口处理、裁切安排及平台限制直接写在对应页面；最终方案给出具体选择，不留下未完成决定。
-
-{{PAGE_APPLICATIONS}}
-
-### 页面设计验收
-
-仅验收该页采用的内容，未渲染的页面保留为待执行要求。
-
-- [ ] **首屏印象：** 焦点与主次符合方案，主题暗面、大圆角和局部亮色共同服务主要任务。
-- [ ] **布局安排：** 分区、比例、列数、高度、对齐及窄屏顺序符合方案，长文本与媒体互不遮挡。
-- [ ] **风格表达：** 细边界、文字层级和交互色成立；数据单位、比例、时间及尺度一致，缺失值可与零值区分。
-- [ ] **标志性时刻：** 指定画面或反馈在约定位置或条件下出现，定位线、读数、图形或媒体均关联真实内容，不依赖伪造数据或装饰性交互。

package/yida-skills/skills/yida-design/templates/design-themes/soft-spectral-panels/form-layout.json

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