openyida 2026.9.21 → 2026.9.22-beta.2

package/yida-skills/skills/yida-design/templates/design-themes/hairline-shared-bands/design.md

@@ -1,362 +0,0 @@
----
-name: "{{PROJECT_NAME}}"
-description: "近黑画布与平整暗面板以单层细描边、小圆角和稳定对齐构成秩序；并列指标可共享外框，以短竖线分组，色彩集中于变化读数、分类比例和离散等级标记。"
-themeId: hairline-shared-bands
-navTheme: dark
-tokens:
-  application-global:
-    appearance: # 应用外观：应用背景、内容表面与完整导航设计
-      surfaces: # 应用背景与内容表面
-        "--pod-app-root-bg-color": "#070707" # neutral-gray；应用根背景及加载兜底
-        "--pod-app-root-bg-image": "none" # 应用根背景图；支持 none、完整 url("...") 或 CSS 渐变，只作用于根节点
-        "--pod-page-bg-color": "#070707" # neutral-gray；近黑页面画布
-        "--pod-card-bg-color": "#111111" # neutral-gray；平整卡片、表单与详情主面
-        "--pod-table-cell-color": "var(--pod-card-bg-color)" # 表格正文单元格背景；跟随卡片背景
-      navigation:
-        "--pod-shell-theme-bg-color": "#111111"
-        "--pod-nav-item-text-color": "#B0B0B0"
-        "--pod-nav-item-text-hover-color": "#E0E0E0"
-        "--pod-nav-item-text-selected-color": "#F0F0F0"
-        "--pod-nav-menu-bg-hover-color": "#191919"
-        "--pod-nav-menu-bg-selected-color": "#191919"
-        "--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": "2px"
-        "--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": "4px"
-        "--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": "4px"
-        "--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": "34px"
-        "--pod-nav-menu-item-radius": "0px"
-        "--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": "4px"
-        "--pod-shell-lshape-border-radius": "4px"
-    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% + #FFFFFF 96%，sRGB 逐通道混合>" # 品牌派生浅色
-      "--color-brand1-5": "<生成实际色值：--color-brand1-6 38% + #171717 62%，sRGB 逐通道混合>" # 品牌派生深色
-      "--color-brand1-6": "{{PRIMARY_COLOR}}" # 唯一主题主色种子；按项目输入实例化，不保留固定色相兜底
-      "--color-brand1-9": "<生成实际色值：--color-brand1-6 76% + #000000 24%，sRGB 逐通道混合>" # 品牌交互元素激活或按下
-      "--color-brand1-10": "<生成实际色值：--color-brand1-6 26% + #242424 74%，sRGB 逐通道混合>" # 品牌禁用
-      "--color-line1-1": "#2D2D2D" # neutral-gray；内部分隔与弱辅助网格
-      "--color-line1-2": "#404040" # neutral-gray；面板、控件与浮层常规边界
-      "--color-fill1-1": "#111111" # neutral-gray；搜索及输入基础面、中性悬停及弱填充；靠边界与所在表面区分
-      "--color-fill1-2": "#282828" # neutral-gray；中性按下及选中
-      "--color-fill1-3": "#353535" # neutral-gray；较重填充与进度轨道
-      "--color-fill1-5": "#282828" # neutral-gray；下拉、弹窗、抽屉及数据读数表面
-      "--color-fill1-10": "#262626" # neutral-gray；固定深色 Tooltip 背景，不随品牌或明暗主题变化
-      "--color-text1-5": "#FFFFFF" # neutral-gray；固定 Tooltip 反色文字，与 --color-fill1-10 配套
-      "--color-text1-4": "#EAEAEA" # neutral-gray；标题、主文案与核心数字
-      "--color-text1-10": "#BEBEBE" # neutral-gray；表头与 placeholder
-      "--color-text1-3": "#A6A6A6" # neutral-gray；辅助说明、坐标和元信息
-      "--color-text1-2": "#696969" # neutral-gray；仅禁用文字
-      "--color-text1-1": "#414141" # neutral-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: # 按组件用途选择 Token；修改数值会同步影响所有引用该 Token 的组件
-      # 调整风格时保留用途映射；常规圆角增大更圆润、减小更利落，各数值档位保持递增
-      "--corner-zero": "0px" # 连续拼接和无圆角区域
-      "--corner-1": "2px" # 细刻度端点、小标签与图例色块
-      "--corner-2": "4px" # 输入、菜单项和常规矩形按钮
-      "--corner-3": "6px" # 浮层、气泡和弹窗
-      "--corner-4": "8px" # 面板内独立信息子区
-      "--corner-5": "10px" # 卡片、表单主容器与抽屉
-      "--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-filter-trigger-bg": "#232323" # neutral-gray；填充式时间筛选触发器，比搜索和普通输入略亮
-      "--oyd-on-accent-light": "#FFFFFF" # neutral-gray；自绘品牌操作的浅色前景，实施推断；与基础表面和 Tooltip 分开
-      "--oyd-chart-series-1": "var(--color-brand1-6)" # 主题主数据系列；共享主色来源，独立于品牌交互状态
-      "--oyd-chart-series-2": "#F16A70" # 独立珊瑚红数据分类，非平台错误色
-      "--oyd-chart-series-3": "#FFA361" # 独立橙色数据分类，非平台警告色
-      "--oyd-chart-series-4": "#F0DF3C" # 独立黄色数据分类
-      "--oyd-chart-series-5": "#EAEAEA" # neutral-gray；独立浅灰数据分类
-      "--oyd-chart-series-6": "#83BFDF" # 独立蓝色数据分类
-    typography:
-      "--oyd-font-size-metric": "24px" # 重点数值独立规格，推断
-      "--oyd-font-weight-metric": 500
-      "--oyd-font-lineheight-metric": 1.25
----
-
-# {{PROJECT_NAME}} design.md
-
-## 1. 风格摘要
-
-**细框共容器 · Hairline Shared Bands**
-
-近黑画布与略亮的平整暗面板，通过单层细线和小圆角区分。文字采用短标签、醒目数值、灰色说明的层次；同组信息尽量共用外框，靠间距、对齐和局部短分隔线建立秩序。颜色收束在变化量、真实分类和少量品牌点缀，不扩散到整张卡片。
-
-| 核心特征 | 可见表现 | 主要偏离风险 |
-| --- | --- | --- |
-| 小圆角与单线围合 | 平整暗底，边缘轻薄明确，普通面板无强阴影 | 大圆角气泡、玻璃模糊、双重倒角和高亮描边会改变机制 |
-| 共容器的并列信息 | 多项指标共享外框，短竖线只分隔组内内容，不形成嵌套卡片 | 给每项再加独立外框，或预设固定指标数量 |
-| 稳定对齐与低装饰记录 | 名称、数值和说明靠列与留白区分；表格、活动记录与所在面板同底 | 斑马底、头像盒、彩色行卡与过密网格挤占信息空间 |
-| 局部色彩编码 | 分类带、变化量、微趋势及等级短刻度提供信号 | 将所有增量染绿、所有负值染红，或把分类色当作状态色 |
-
-表面、边界、文字和对齐规则适用于普通表单、列表与详情。共享指标带、组成比例和等级刻度均按内容启用，不要求每页出现图表或采用固定上下布局。
-
-## 2. 页面视觉系统
-
-YAML 是变量值事实源，正文规定消费关系。局部线宽和未展示的状态为实施推断；图片物理像素不直接决定 CSS 字号和控件尺寸。
-
-### 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` | `--color-line1-2`、`--corner-5`；默认无外投影 |
-| 同组信息与内部分段 | 沿用所在面板，不默认创建新表面；必要弱填充使用 `--color-fill1-1` | `--color-line1-1` 局部短线或留白，避免逐字段套框 |
-| 表格表头及正文 | 均可沿用内容面；正文消费 `--pod-table-cell-color`，单向跟随卡片；表头前景 `--color-text1-10` | 优先留白对齐，必要行分隔使用 `--color-line1-1`，无默认斑马底 |
-| 下拉、气泡、弹出日历、弹窗和导航弹出层 | `--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`、`--color-line1-2`、必要时 `--shadow-1` |
-| 简短 Tooltip | 固定 `--color-fill1-10` 与 `--color-text1-5` 配对 | `--corner-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-1`；状态文字使用有依据的平台语义，不能因主题预设“健康”。标题到主体间距 `--s-6`，已有页面操作自然排列在尾部，空间不足时换行。
-
-面板以短标题和必要信息提示图标定位，尾部放真实的时间筛选或操作。短拉丁标签可采用大写及轻微字距，建议 0.03em（推断）；中文保持正常字形，不靠缩小字号或额外图标制造层级。没有说明或操作时不留空位。
-
-### 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-10` |
-| 表格 | `--font-size-table` / `--font-weight-table` / `--font-lineheight-table` | 表头 `--color-text1-10`，正文 `--color-text1-4` |
-| 图例、分组说明与元信息 | `--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-6`，主要面板间距 `--s-5` 至 `--s-6`，面板内边距 `--s-5`。组内信息用 `--s-3` 至 `--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-6` 使用珊瑚红、橙、黄、浅灰和蓝的独立分类配色。它们表达序列或分类身份，不预设六类业务，也不等于成功、警告或错误。纯分类使用稳定映射；真正的风险、异常和反馈状态沿用平台已有语义，不新建同义状态 Token。平台变量名未知时保留语义说明，不编造接口。
-
-变化方向与好坏分别判断：箭头和正负号反映实际增减，状态颜色反映业务影响。数量、变化量、比例和等级须明确区分；减少风险可能是改善，增加完成耗时可能是恶化，不能仅按数字符号决定红绿。
-
-图标统一细线家族，建议 16–18 CSS px、线宽 1.5 CSS px（推断），普通图标跟随文字。活动记录的对象名称可用有明确含义的分类色或实际链接色，不逐行随机着色。
-
-表面不加纹理、玻璃或光晕。微趋势可在真实曲线与基线之间使用对应序列颜色向透明的面积渐变，顶部建议不透明度 14%、底部 0（推断），只作用于绘图区。状态趋势只有业务语义一致时使用平台状态色，不靠背景曲线装饰空数据。
-
-## 3. 基础组件表达
-
-组件按真实需求出现。未列出的组件按任务结构、表面层级、文字角色、形状与状态推导，不新增同义变量。
-
-### 面板、操作与输入
-
-面板沿用 2.1 的平整暗面与小圆角外框，标题与实际辅助操作同排，正文通过留白衔接。信息提示图标必须有对应解释；没有说明时不保留无效图标。
-
-普通中性按钮采用 `--color-fill1-1` 或透明底、`--color-text1-4` 前景、`--color-line1-2` 边界及 `--corner-2`；较重填充使用 `--color-fill1-3`。面板尾部的填充式时间筛选触发器使用 `--oyd-filter-trigger-bg` 与 `--color-text1-10`，形成比搜索框稍亮的紧凑矩形；展开后的菜单仍使用 pop-up 表面。
-
-需要品牌主操作时，背景使用 `--color-brand1-6`，前景使用 `--oyd-on-accent-light`；悬停与按下仅切换相应 Brand 背景档，保留同一浅色前景（补全组件的实施推断）。`--color-white` 仅承担全应用基础表面。
-
-按钮高度按用途选 `--s-7` 至 `--s-10`，默认 `--s-8`，小型辅助操作可用 `--s-7`；输入与筛选选 `--s-8` 至 `--s-10`，默认 `--s-8`。输入基础面始终为 `--color-fill1-1`，文字 `--color-text1-4`，placeholder `--color-text1-10`，边界 `--color-line1-2`，圆角 `--corner-2`；不借用卡片或 pop-up 背景。
-
-搜索中的快捷键标识、时间选择器和更多菜单只在功能可用时出现。表单标签与输入间隔 `--s-2`，字段间隔 `--s-4`，分组间隔 `--s-6`；辅助说明保持正常可读前景，错误说明使用平台错误语义。
-
-### 数值、表格与活动记录
-
-数值单元采用短标签、主值、单位或基期说明的阅读顺序。变化量紧邻相关主值，明确比较对象和时间窗口；缺少基期时不显示增长率。计数为实际非负数量，只有净变化才可出现正负号；频率、间隔、耗时和比例采用各自正确单位。
-
-普通表格正文背景使用 `--pod-table-cell-color`，单向引用 `--pod-card-bg-color`。表头可沿用同一表面，以 `--color-text1-10` 区分；无默认斑马纹、纵网格或逐行盒装背景。行内上下留白 `--s-2` 至 `--s-3`，列间 `--s-4`，以对齐为主、必要弱横线为辅。文本左对齐，数值右对齐，同列单位一致。
-
-存在变化列时，列名说明它是变化量，不能把负数显示为总失败次数等绝对计数。记录按真实唯一标识区分，不照抄重复示例，也不因名称相同就删除合法记录。名称较长时由页面任务确定换行或缩略，必要信息仍有可读入口。
-
-活动列表采用小型中性动作图标、摘要、真实对象名称及行尾结果。只有对象确有类别或链接含义时才着色；彩色对象名称保持既定分类前景，并用直接名称和色标说明分类。长对象名可缩略，但不能以无效链接或随机语法色替代真实含义。尾部数量、单位、增减和状态分工明确，不能仅凭“新增”就染成成功色。
-
-### 基础图形与状态
-
-图例、标签、图形及可读明细同源。微曲线只用于真实有序序列，面积以实际基线为界；隐藏坐标的紧凑微图仍需在说明或读数中提供周期、单位与比较口径。缺失不等于零，不为保留走势伪造采样点。
-
-饼图仅用于互斥、同单位、可加总的部分与整体；扇区角度、百分比、图例数量和总量统一计算。扇区内文字沿用设计稿配对；空间不足时移到图外或图例，不按主题色自动切换黑白字。仅比较无加总关系的类别时使用普通条形或表格。
-
-普通进度使用 `--color-fill1-3` 轨道，需要明确当前量、目标与有效范围；完成部分按真实业务选择品牌或平台状态色。等级只能按明确的离散规则表达，不能把类别、完成度和等级混在同一条刻度上。
-
-| 状态 | 视觉表达 |
-| --- | --- |
-| 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` 与相应禁用填充；禁用操作不保留高亮 hover，水印色不用于正常说明 |
-| Error / Warning / Success / Info | 平台既有状态色配文字和必要图标，不复制同义页面变量 |
-| Loading / Empty | 中性占位或明确空状态，不渲染虚构计数、比例与趋势 |
-
-局部颜色过渡建议 120–160 ms（推断）；没有持续闪烁、扫描光带或整卡放大。覆盖层内输入和选中项各自消费基础、悬停与选中角色。
-
-### 表单组件与版式结构
-
-表单使用与自定义页面相同的应用全局样式，字体、色彩、表面、边界、圆角、密度和状态延续本主题。表单支持在顶部、左侧、主体、右侧和字段之间组合 Tab/切换、按钮组/操作入口、图片/图形、状态区、标题与 `Divider`、`ColumnContainer`、辅助内容和业务字段。各组件承担导航、操作、视觉焦点、反馈、层级、节奏、装饰或采集作用。普通业务分组和章节分隔使用 `Divider`，横向字段组合使用 `ColumnContainer`。每张表单在项目 `design.md` 写清组件位置与作用、列比例、标签位置、字段与章节间距、底栏、详情延续和窄屏重排。
-
-## 4. 特色表达配方
-
-### R1 短竖线分组的共享指标带
-
-**适用内容：** 存在一组需要并列浏览的真实指标，且它们具有明确的口径和查看价值；各项可以量纲不同，但不能依靠相同微图高度暗示可直接比较。
-
-**继承基础：** 使用基础面板、数值单元及微图规则，共用 `--pod-card-bg-color` 外壳，不为每项再设置卡片背景。
-
-**特殊组合：** 各项以短标签、主值、变化和基期组成小组，相邻组之间使用 `--color-line1-1` 短竖线，上下留出 `--s-4` 空隙，组间左右各留 `--s-5`（推断）。已有微趋势可置于数值一侧；已有等级可在另一侧用简短等级文字表达。外框只有一层，分隔线不贯穿到外边缘；每组数值与辅助说明对齐，标签不因大写而缩小。
-
-组数、分配宽度及折行顺序由项目确定，单项较长时可拥有更宽空间。窄屏转成顺序排列时，竖线相应变为短横线或留白，不让内容挤在固定多列内。
-
-**无匹配时：** 只有单个指标时使用普通数值单元；彼此无关联的内容采用独立面板。没有微序列或等级时省略该部分，不因配方补造数据，也不预设顶部三项或底部四项。
-
-### R2 组成比例带与对齐清单
-
-**适用内容：** 存在互斥、完整、同口径的组成项及已知总量，需要同时展示整体构成与精确数据。
-
-**继承基础：** 采用基础数据与表格对齐规则，颜色使用真实类别映射；若类别具有风险或反馈语义，遵循平台状态色，否则使用独立数据调色板。
-
-**特殊组合：** 面板中放一条连续的横向组成带，下方清单按“色块与类别、百分比、数量”稳定对齐。仅整体外端使用 `--corner-1`，内部接缝清晰不胶囊化。每段宽度按真实数量 / 总量计算；分隔线在边界上绘制，不额外增加段宽。像素取整采用最大余数法分配，保证各段总宽恰等于可用宽度。
-
-百分比由同一份真实数量计算，不能从截图估宽或从舍入值反推数量。显示比例合计因舍入略偏离完整总量时采用统一舍入说明或保总和的展示算法，不能静默改动真实数量。清单最后一列始终是同一单位的数量，不混入另一组百分比。若面板还有综合分数，明确其算法和独立含义，不将分数当作某一类别占比。
-
-**无匹配时：** 类别重叠或总量未知时采用普通清单；缺失类别须明确显示未知或说明未覆盖部分，不强行归一化。总量为零时显示空状态；微小组成项由清单精确呈现，不设置夸大比例的最小段宽。
-
-### R3 标签与离散等级刻度
-
-**适用内容：** 真实指标具有有序等级、明确阈值或离散评价规则，需要简短说明当前处于哪一级。
-
-**继承基础：** 使用数值单元、语义颜色与说明规则，未点亮刻度消费较重中性填充 `--color-fill1-3`；共用表达独立于其他配方。
-
-**特殊组合：** 等级名称上置，下方排列等宽短横格，颜色与名称表示同一等级。若采用累计点亮编码，设有效等级序号为 k、总级数为 N，则点亮前 k 格，剩余 N − k 格保持轨道色；顺序及“较多是否较优”由真实规则说明，不自动认为高数值更好。刻度建议高 4 CSS px、格间距 2 CSS px（推断），外露端点使用 `--corner-1`。
-
-该刻度只表示等级，不表示精确完成百分比。不同指标各有阈值时，在实际说明中区分；同一等级体系的颜色和序号保持一致。平台已经定义的成功、警告或错误等级沿其语义使用，单纯分类不强行赋予好坏。
-
-**无匹配时：** 没有有序等级或阈值时只显示已有文字／数值；未知等级明确标注，不画成最低等级。若数据实际是连续进度，回到基础进度表达，不按美观随意点亮刻度。
-
-## 5. 项目应用与调整规则
-
-### 变量与项目换色
-
-YAML 是已声明变量的唯一事实源。全局变量供原生及自定义页消费，本模板的扩展包含填充式筛选触发器、操作前景、数据色与重点数值规格。递归提取以 `--` 开头的标量叶子，分组名不拼入变量名；不重复定义，平台基础与项目扩展均在主题中声明，可无环引用，并按实际设计补充变量。
-
-需求决定内容与操作，平台约束决定可用能力，主题规定视觉机制。原生导航仅配置开放六色，自绘导航沿用项目已选结构；配方不覆盖数据含义、自然内容增长或平台限制。
-
-- 色彩来源：{{COLOR_SOURCE}}。
-- 品牌种子为 `{{PRIMARY_COLOR}}`。无输入时从项目已选品牌或明确的色彩来源确定并记录，不保留固定色相兜底；用户给定种子不静默替换。
-- 七个 Brand Token 按 YAML 比例计算：将种子与基底解析为 8 位 sRGB，每通道取 round(a × seed + b × base)，a + b = 1，限制在 0–255 后输出六位十六进制。直接混合编码后的 sRGB，不执行线性光转换；项目文档替换全部生成标记。
-- 品牌浅色与深色保留品牌派生语义，需要主题色的外观角色可引用。主数据系列随主色重算；中性灰、其余独立分类及平台状态保留自身语义。导航六项保留既定配对，不随主色自动改写内容 Text、Fill 或 pop-up。
-- 内容、导航及 pop-up 保留设计稿确定的明暗模式，换主色只更新主题关联值。
-- 文字和按钮按设计稿确定的底色、前景及状态配对使用；不按主色亮度自动挑选黑白前景、反转明暗或修改中性色值。主题派生保持既定比例，用户品牌种子不被静默替换。
-
-局部推断可按平台能力微调，保留单线小圆角面板、低装饰记录与同组共容器的关系。字号和间距沿用全局固定档位；分类、等级和趋势的颜色映射必须由真实内容确定。
-
-### 项目页面设计
-
-仅为实际页面填写以下确定结果：
-
-- **页面内容：** 页面名称、任务、真实信息与操作，以及必要口径、单位和基期。
-- **首屏印象：** 第一视觉焦点、主次关系和整体感受，并说明构图、文字层级、局部颜色与留白的具体安排。
-- **布局安排：** 区块位置、宽度、列数、高度、对齐与必要等高对象，明确窄屏顺序；不默认共享带的位置和指标数量。
-- **视觉表达：** 每个区域的表面、组件与文字角色；使用配方时注明编号、位置及数据条件。
-- **标志性时刻：** 一处明确静态画面或关键反馈，说明位置或触发条件、具体表现及任务价值。
-
-首屏焦点与标志性时刻可来自同一处。素材来源、缺口处理及平台限制直接写在对应页面，不沿用示例产品、记录、人物、计数或领域名词；最终方案给出具体安排，不留下未完成决定。
-
-{{PAGE_APPLICATIONS}}
-
-### 页面设计验收
-
-只检查该页实际采用的内容；尚未渲染的页面保留为待执行要求。
-
-- [ ] **首屏印象：** 焦点和内容主次符合方案，颜色集中于有明确意义的数据与交互。
-- [ ] **布局安排：** 分区、列数、比例、高度、对齐及窄屏顺序符合方案，共享带折行后仍保持清楚分组。
-- [ ] **风格表达：** 平整暗面、小圆角、单线轮廓与低装饰记录成立；数量、比例、增减、等级和趋势的编码一致可读。
-- [ ] **标志性时刻：** 指定画面或反馈在对应位置或条件下出现，服务真实任务，不依赖示例数据、随机刻度或不可用操作。

package/yida-skills/skills/yida-design/templates/design-themes/hairline-shared-bands/form-layout.json

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