openyida 2026.9.21 → 2026.9.22-beta.2

package/yida-skills/skills/yida-design/templates/design-themes/inset-frame-pixel-rhythm/design.md

@@ -1,404 +0,0 @@
----
-name: "{{PROJECT_NAME}}"
-description: "微染灰底框包裹白色内面板，以细描边、浅双轮廓和紧凑留白建立层次；无衬线正文搭配等宽标题与数字，主题色操作、低饱和彩色状态，以及按需启用的主题色阶像素矩阵和纤细柱线。"
-themeId: inset-frame-pixel-rhythm
-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": "#FFFFFF" # neutral-gray；内容区白色画布
-        "--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": "#FFFFFF"
-        "--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": "34px"
-        "--pod-nav-menu-item-radius": "2px"
-        "--pod-nav-menu-item-border": "1px solid #A6A6A6"
-        "--pod-nav-menu-item-hover-border": "1px solid #737373"
-        "--pod-nav-menu-item-selected-border": "1px solid var(--color-brand1-5)"
-        "--pod-nav-menu-font-size": "14px"
-        "--pod-nav-menu-item-selected-font-weight": "600"
-        "--pod-nav-menu-line-height": "20px"
-        "--pod-nav-menu-gap": "4px"
-        "--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 3% + #F6F6F6 97%，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 2% + #EFEFEF 98%，sRGB 逐通道混合>" # theme-gray；主题色微染弱分隔线
-      "--color-line1-2": "<生成实际色值：--color-brand1-6 3% + #DEDEDE 97%，sRGB 逐通道混合>" # theme-gray；主题色微染控件边界
-      "--color-fill1-1": "<生成实际色值：--color-brand1-6 3% + #F6F6F6 97%，sRGB 逐通道混合>" # theme-gray；输入基础表面和中性悬停
-      "--color-fill1-2": "<生成实际色值：--color-brand1-6 4% + #EEEEEE 96%，sRGB 逐通道混合>" # theme-gray；中性按下与选中
-      "--color-fill1-3": "<生成实际色值：--color-brand1-6 5% + #DCDCDC 95%，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": "#252525" # neutral-gray；正文、标题和核心数字
-      "--color-text1-10": "#666666" # neutral-gray；表头、标签和 placeholder
-      "--color-text1-3": "#737373" # neutral-gray；二级说明与坐标轴
-      "--color-text1-2": "#ADADAD" # neutral-gray；仅禁用态
-      "--color-text1-1": "#D6D6D6" # 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:
-      "--corner-zero": 0px # 拼接面、表格内部单元格
-      "--corner-1": 3px # 复选框、键帽和小型图标底盒
-      "--corner-2": 8px # 输入、普通按钮、方形图标按钮、自绘菜单项
-      "--corner-3": 10px # 独立浮层和白色内面板
-      "--corner-4": 12px # 局部组合容器和组合工具条
-      "--corner-5": 14px # 卡片外框、主要面板、抽屉外轮廓
-      "--corner-circle": 8px # 圆形状态点与圆形更多操作
-      "--corner-semicircle": 8px # 状态胶囊、分段控件和已确定的胶囊筛选
-    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-brand-light": "#FFFFFF" # neutral-gray；品牌深底浅色前景，不借用基础表面色
-      "--oyd-frame-bg": "<生成实际色值：--color-brand1-6 3% + #F6F6F6 97%，sRGB 逐通道混合>" # theme-gray；面板底框与标题带，独立于输入职责
-      "--oyd-chart-series-main": "var(--color-brand1-6)" # 品牌关联主数据序列，独立于按钮状态
-      "--oyd-chart-series-compare": "<生成实际色值：--color-brand1-6 14% + #FFFFFF 86%，sRGB 逐通道混合>" # 品牌派生浅色对照序列，配线型和标签
-      "--oyd-chart-cell-empty": "#F5F5F5" # neutral-gray；无数据含义的像素网格背景，非零值或缺失值
-    typography:
-      "--oyd-font-family-mono": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace" # 等宽实现替代，推断；中文回退全局字体
-      "--oyd-font-size-metric": "28px" # 独立核心数值展示，推断；不改普通页面标题
-      "--oyd-font-weight-metric": 600
-      "--oyd-font-lineheight-metric": 1.2
-    shadow:
-      "--oyd-shadow-panel-rim": "0px 0px 0px 2px rgba(45, 45, 45, 0.025), 0px 1px 3px 0px rgba(45, 45, 45, 0.04)" # neutral-gray；局部浅轮廓，推断；不产生明显悬浮感
-      "--oyd-shadow-inner-keyline": "inset 0px 0px 0px 1px rgba(255, 255, 255, 0.45)" # 深色主按钮内部细亮边，推断
----
-
-# {{PROJECT_NAME}} design.md
-
-## 1. 风格摘要
-
-**微染灰嵌框 · 像素节奏（inset-frame-pixel-rhythm）**
-
-白色内容画布承载紧凑的信息区块，微染灰导航与面板底框提供柔和边界。白色内面板像薄片嵌在浅灰底托中，主要依靠色差、细线与极浅轮廓区分层次。深色用于关键文字，主题色用于主要操作，无衬线正文和等宽数字形成清楚的阅读分工；少量状态色只落在必要的图标、数字和标签上。
-
-| 核心特征 | 可见表现 | 主要偏离风险 |
-| --- | --- | --- |
-| 微染灰底框与白色内面 | 标题带、底部附属信息或外缘露出微染灰，主体保持白色 | 全部改成同色大白卡，或把微染灰铺满正文，都会削弱层次 |
-| 细描边与浅双轮廓 | 容器有轻微套边，浅阴影贴近边缘，内外圆角各有尺度 | 厚重投影、宽亮边和大面积凹凸效果会让界面变得臃肿 |
-| 无衬线叙述与等宽数据 | 正文自然阅读；数值、少量英文区块名与表头呈技术化节奏 | 全页等宽字体、过密大写字母或过大的标题会破坏信息主次 |
-| 独立浅色导航与克制强调 | 微染灰导航中以白色菜单面标识当前项；主要动作主题色，其余操作细框 | 将绿色状态误作品牌色，或用大面积彩色选中块覆盖导航 |
-| 有条件的主题色阶图形节奏 | 真实图表可采用方格柱形、细圆头柱线和点状辅助线 | 将像素矩阵变成全屏装饰，或为保留图形而增加虚构数据 |
-
-页面结构与内容由需求决定。普通表单、列表、详情页可以仅通过前四项特征呈现主题；数据图形只在具备相应数据与阅读任务时启用。尺寸、替代字体和未展示的交互状态属于实现推断，不按图片导出像素扩大全局规格。
-
-## 2. 页面视觉系统
-
-### 2.1 表面、区块与层次
-
-层次顺序为“白色画布 → 微染灰分组底框 → 白色内容面”。微染灰主要出现在边框外缘、标题带和附属信息区，不覆盖整页内容。表单或列表采用单层白色面板时，仍通过微染灰分组标题、细边界与留白延续主题。
-
-| 对象 | 背景变量 | 边界、圆角与阴影 | 前景与用途 |
-| --- | --- | --- | --- |
-| 应用根背景 | `--pod-app-root-bg-color`、`--pod-app-root-bg-image` | 不叠加装饰纹理 | 仅负责应用根节点及加载兜底，背景图不传递给控件 |
-| 页面画布 | `--pod-page-bg-color`；自定义页消费 `--oyd-page-bg` | 默认无外框与阴影 | 正文使用 `--color-text1-4`，靠边距组织内容 |
-| 面板外框、标题带与附属信息带 | `--oyd-frame-bg` | 外轮廓 `--corner-5`；按需要露出窄边，无厚阴影 | 标题使用 `--color-text1-10`，辅助说明使用 `--color-text1-3` |
-| 一级卡片、表单与详情主体 | `--pod-card-bg-color` | `--color-line1-1` 细边；独立卡片用 `--corner-5`，嵌入内面用 `--corner-3`；可用 `--oyd-shadow-panel-rim` | 主要内容使用 `--color-text1-4` |
-| 表格正文 | `--pod-table-cell-color` | 单元格使用 `--corner-zero`，行间 `--color-line1-1` | 保持列连续，不将每行改造成独立卡片 |
-| 输入与筛选控件 | `--color-fill1-1` | `--color-line1-2`、`--corner-2`；默认无浮起阴影 | 值用 `--color-text1-4`，placeholder 用 `--color-text1-10` |
-| 中性按下或选中区 | `--color-fill1-2` | 以色差配合必要边界 | 不作为主数据序列填充 |
-| 较重填充与进度轨道 | `--color-fill1-3` | 不附加厚描边 | 仅承担结构或进度底轨，不表示某种业务状态 |
-| 下拉、气泡、弹出日历、弹窗与导航弹出层 | `--color-fill1-5` | `--color-line1-2`、`--corner-3`；小浮层用 `--shadow-1`，大弹窗按遮挡层级用 `--shadow-2` | 主文字 `--color-text1-4`，说明 `--color-text1-3`；内部菜单项仍用 `--corner-2` |
-| 抽屉 | `--color-fill1-5` | 外露角用 `--corner-5`，贴边用 `--corner-zero`；`--shadow-2` | 配白色表面自己的前景，不沿用导航前景 |
-| 图表读数浮层 | `--color-fill1-5` | `--color-line1-2`、`--corner-3`、`--shadow-1` | 时间或分类标题可用 `--oyd-frame-bg` 浅带；值用 `--color-text1-4`，图例保留序列颜色 |
-| 简短 Tooltip | `--color-fill1-10` | `--corner-3`；内容紧凑 | 固定配对 `--color-text1-5`，与白色数据读数浮层分开 |
-
-普通描边使用细单线；宽度按 1 CSS px 实现属于推断。内面与外框间可露出约 2 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 角色，说明文字另用正文或 caption。标题与主要内容之间采用 `--s-5`，操作之间采用 `--s-2`。
-
-页面包含面包屑或全局工具栏时，置于独立白色页头，用底部分割线与内容区分开。面包屑的前级是二级文字，当前位置是一级文字。全局搜索可用微染灰输入表面，通知等工具用小圆角方形按钮；这些是已有页头内容的表达，不构成新增导航的理由。
-
-主要动作以品牌实底建立锚点，普通新增、筛选或次级操作保留细框浅面。窄宽度下标题在前、已有操作在后换行，保持各自自然宽度和文字可读性；没有说明、面包屑或操作时直接收回对应空间。
-
-### 2.4 排版、间距与形状
-
-全局无衬线字体与字号基线固定。等宽气质用于数据和少量短标题，不能替换长正文的阅读字体；实际源字体未确定，`--oyd-font-family-mono` 是实现替代，中文内容回退 `--font-family-base`。
-
-| 文字角色 | 字体及大小 | 字重与行高 | 颜色与细节 |
-| --- | --- | --- | --- |
-| 普通页面标题 | `--font-family-base`、`--font-size-subhead` | `--font-weight-subhead`、`--font-lineheight-subhead` | `--color-text1-4`，不以展示数字规格放大标题 |
-| 强调正文、重要对象名称 | `--font-family-base`、`--font-size-body-2` | `--font-weight-body-2`、`--font-lineheight-body-2` | `--color-text1-4` |
-| 正文、按钮与输入值 | `--font-family-base`、`--font-size-body-1` | `--font-weight-body-1`、`--font-lineheight-body-1` | 正文使用 `--color-text1-4`，说明按二级语义 |
-| 面板短标题 | `--font-size-body-1`；短英文可用 `--oyd-font-family-mono` | `--font-weight-body-1`、`--font-lineheight-body-1` | `--color-text1-10`；英文可大写，中文保持自然字形 |
-| 表格正文与表头 | `--font-size-table`；正文用 `--font-family-base` | `--font-weight-table`、`--font-lineheight-table` | 正文 `--color-text1-4`；表头 `--color-text1-10`，短英文可等宽 |
-| 说明、单位、坐标与状态标签 | `--font-family-base`、`--font-size-caption` | `--font-weight-caption`、`--font-lineheight-caption` | `--color-text1-3`；状态前景按平台语义 |
-| 独立核心数值 | `--oyd-font-family-mono`、`--oyd-font-size-metric` | `--oyd-font-weight-metric`、`--oyd-font-lineheight-metric` | `--color-text1-4`，单位另用 caption，不整体加粗放大 |
-
-金额、数量和百分比采用等宽数字（`tabular-nums`）；同列对齐统一。表格中的数值仍使用表格字号，只替换字体及数字特性。千分位、货币符号、精度和负号按真实格式一致呈现，不复制示例数值。短英文标题的字距可略放松至 0.02em（推断），长标题与中文不强制拉开。
-
-间距节奏以 `--s-6` 作为常规页面留白，以 `--s-4` 或 `--s-5` 分隔相邻区块。面板正文常用 `--s-4` 至 `--s-6`，标题带常用水平 `--s-4`、垂直 `--s-3`；标签与值用 `--s-2`，图标与文字用 `--s-2`，紧邻的小符号可用 `--s-1`。狭窄页面可将外边距收至 `--s-4`，不通过缩小全局字号强塞内容。
-
-圆角按用途分工：大面板用 `--corner-5`，白色内面用 `--corner-3`，组合控件外壳用 `--corner-4`，输入、菜单与常规按钮用 `--corner-2`。`--corner-semicircle` 仅用于状态胶囊、分段选择和明确采用胶囊外形的筛选器；方形图标按钮保留小圆角。圆形点使用 `--corner-circle`，拼接边保持 `--corner-zero`。
-
-不把整个应用包在模拟浏览器的大圆角边框里。页面宽度、列数、区块高度、等高范围及窄屏顺序属于逐页构图，在第五部分确定。
-
-### 2.5 色彩、图标与点缀
-
-品牌由项目输入确定，`--color-brand1-6` 及其派生色控制主要操作、图形与焦点反馈。偏色框架、边界和填充以较低品牌占比生成，白色内容保持中性。`--color-brand1-3`、`--color-brand1-5` 保留主题色浅深语义，可由需要该主题色的导航与根背景角色引用。
-
-成功状态、具有明确正向含义的变化和在线标记沿用平台成功色；待处理或需注意状态沿用警告色，失败与错误沿用错误色。状态色优先作用于小图标和短文字，保留白色标签底；不以大片绿黄底色铺满整行。数值增加是否有利由业务解释，不能只因大于零就使用成功色。
-
-图表以 `--oyd-chart-series-main` 和 `--oyd-chart-series-compare` 对照，两者是数据序列角色，不是可用/禁用状态。无额外分类时不引入彩虹色盘；需要更多真实分类时，由项目定义可区分的独立分类色或纹理，不复用状态色随机上色。
-
-图标选用一套轮廓清晰的线性家族，推断以 16–20 CSS px、约 1.5 CSS px 线宽为实现范围。普通导航图标和字段图标直接放在表面上；主要入口标识、独立图标按钮或提示条中的功能图标才配置细框底盒。在线点、图例点和信息点保持小尺度，不能变成大面积装饰。
-
-主体无大面积渐变、玻璃模糊、噪点纹理或装饰插画。深色主按钮可用 `--oyd-shadow-inner-keyline` 形成一圈细内亮边；这类局部材质不扩散到每个控件。头像和标识只采用项目提供的真实素材，没有素材时使用中性占位或姓名缩写，不把示例人物和品牌写入模板。
-
-## 3. 基础组件表达
-
-这些规则描述组件存在时如何呈现，不要求每个项目全部采用。未列组件按“任务结构 → 表面层次 → 文字角色 → 控件形状 → 状态表达”推导。
-
-### 3.1 面板与分组
-
-面板可以由微染灰外框、标题带、白色内容面和可选附属信息带组成。标题与信息图标在同一基线上，已有更多操作放在另一端；信息图标使用二级前景，不与标题争夺注意力。正文较多时通过行间距和分组线组织，避免一字段一卡片。
-
-只有真实存在的说明、比较数据或操作才占用附属带。没有标题或附属信息时收回对应区域，保留白面与细边即可。面板随内容自然增长，不普遍设置固定高度、强制等高或内部滚动。
-
-### 3.2 按钮、选择器与图标操作
-
-| 类型 | 默认表达 | 状态变化 |
-| --- | --- | --- |
-| 主按钮 | `--color-brand1-6` 实底，前景固定使用 `--oyd-on-brand-light`；`--corner-2`，可加细内亮边 | 悬停 `--color-brand1-1`，按下 `--color-brand1-9`，禁用按 `--color-brand1-10` 与禁用前景配对 |
-| 次级按钮 | `--color-white` 白底，`--color-line1-2` 细框，`--color-text1-4`，`--corner-2` | 悬停 `--color-fill1-1`，按下 `--color-fill1-2`，不出现夸张升起 |
-| 方形图标按钮 | 同次级按钮，水平垂直留白均衡 | 沿用中性状态，图标保持居中 |
-| 圆形更多操作 | 已有标题带内的轻圆底，使用 `--corner-circle`，视觉强度低于主按钮 | 悬停加强底面，打开的菜单使用覆盖层规则 |
-| 分段选择 | `--color-fill1-1` 胶囊轨道；内部选中段 `--color-white` 白面、细框、`--oyd-shadow-panel-rim` | 当前段通过白面与深色文字识别，选中后的按下反馈用 `--color-fill1-2` |
-| 相邻组合筛选 | 同高控件共享外轮廓，内部细分割 | 拼接处用 `--corner-zero`，只在最外侧保留外角 |
-
-按钮高度按角色选 `--s-7`、`--s-8`、`--s-9`、`--s-10`；常规页面操作优先 `--s-9`，紧凑表内操作可用 `--s-7` 或 `--s-8`。同组操作统一高度。选中分段的白面是该组合控件的特定结构，不能使所有中性选中控件都改用白底。
-
-### 3.3 输入、搜索与筛选
-
-输入默认使用 `--color-fill1-1`、`--color-line1-2` 和 `--corner-2`；搜索图标、日期图标和展开箭头使用二级前景，输入值保持一级前景。不要借用卡片或 pop-up 背景作为输入角色，即使某个主题中两者颜色相同。
-
-高度限于 `--s-8`、`--s-9`、`--s-10` 三档，与相邻按钮对齐。前置标签、输入和帮助说明构成明确的垂直层次；placeholder 不替代必要标签。存在快捷键提示时采用微小键帽表达，没有真实快捷键则省略。
-
-聚焦可采用品牌细外轮廓与清楚边界，推断使用约 2 CSS px 的外圈；前景、轮廓和衬底沿用既定配对。校验错误使用平台错误边界和错误说明，同时保留正常文字可读性。日期面板、选择项菜单等弹出内容使用独立覆盖层。
-
-### 3.4 表格与独立记录列表
-
-表格置于连续白色内面，正文单元格消费 `--pod-table-cell-color`，跟随 `--pod-card-bg-color`；表头可直接使用同一白面，通过 `--color-text1-10`、短等宽标题和底部分割线区分，不使用厚重深色表头。
-
-筛选搜索和已有新增操作可放在表格上方的微染灰标题带。表内通过 `--color-line1-1` 横向分隔，不增加密集竖线或强烈斑马纹。单元格推断采用垂直 `--s-3`、水平 `--s-4` 留白；行高由内容与控件自然形成，多行内容不被强制压成同高一行。
-
-数值列采用等宽数字并统一右对齐，文本列左对齐；排序标记弱于表头文字。复选框采用 `--corner-1` 和轻边界；行操作可用小圆角方形更多按钮。只有已有的批量选择、排序或行操作才出现对应控件。
-
-状态标签为白底细框胶囊，平台语义色作用于图标和短文字。退回、归档等中性业务状态使用可读的二级文字，不直接套用禁用色；只有该行确实不可交互时使用禁用表达。表格底部不做遮蔽数据的渐隐效果。
-
-独立记录列表沿用相同排版和分隔节奏，但可采用“主文本 + 辅助信息 + 已有操作”的行布局；不为对齐表格强行分列，也不将具有连续比较任务的表格改为散卡片。
-
-### 3.5 图形、图例与读数
-
-主序列、比较序列、网格背景分别使用三个独立图表 Token。坐标文字用 `--color-text1-3`，辅助线可用 `--color-line1-2` 的低强度点线；减少轴框，不用粗网格压过数据。浅色序列在图例中可加细边点，读数保留名称与数值，避免仅凭灰度识别类别。
-
-图例名称、图形、读数和可读数据入口来自同一份数据。日期范围、聚合方式、单位与比较口径必须一致，读数显示真实精度；缺失不能当作零，零值也不能画成虚构的最小实心柱。灰色背景网格不代表任何数据。
-
-数据读数浮层继承第二部分的白底、浅标题带、细框与轻阴影；每行以小图例、名称、数值形成列对齐。存在定位需要时可配竖向细虚线及小圆点，圆点中心沿用序列色。浮层只在项目确定的选择、聚焦或指向条件下出现，不默认永久遮挡图形；具体触发方式属于实现推断。
-
-### 3.6 状态与反馈
-
-| 状态 | 表达 |
-| --- | --- |
-| Hover | 中性控件使用 `--color-fill1-1`，品牌控件使用品牌悬停色；只增强当前目标 |
-| Active | 中性控件使用 `--color-fill1-2`，品牌控件使用品牌按下色，避免整块面板位移 |
-| Focus | 清楚的品牌外轮廓与边界，不靠细微阴影单独表示焦点 |
-| Selected | 常规中性选择使用 `--color-fill1-2`；导航使用专用六色映射；分段选择使用白色选中面 |
-| Disabled | `--color-text1-2` 配浅表面，品牌按钮采用品牌禁用派生色；只用于实际不可操作对象 |
-| Error / Warning / Success / Info | 使用平台既有语义，配短文字或图标；不新增同义状态 Token |
-| Loading | 中性结构占位保持原布局，不填入随机数字或虚构曲线 |
-| Empty / No results | 在原内容区保留简短可读说明；有真实可执行操作才提供按钮，不保留假图表 |
-
-未展示状态按以上规则推断实现。动效只服务于表面状态和浮层显隐，推断采用短暂、轻微的颜色或透明度过渡，不放大容器、弹跳卡片或持续闪动图标。
-
-### 表单组件与版式结构
-
-表单使用与自定义页面相同的应用全局样式，字体、色彩、表面、边界、圆角、密度和状态延续本主题。表单支持在顶部、左侧、主体、右侧和字段之间组合 Tab/切换、按钮组/操作入口、图片/图形、状态区、标题与 `Divider`、`ColumnContainer`、辅助内容和业务字段。各组件承担导航、操作、视觉焦点、反馈、层级、节奏、装饰或采集作用。普通业务分组和章节分隔使用 `Divider`，横向字段组合使用 `ColumnContainer`。每张表单在项目 `design.md` 写清组件位置与作用、列比例、标签位置、字段与章节间距、底栏、详情延续和窄屏重排。
-
-## 4. 特色表达配方
-
-### R1 微染灰底托指标卡
-
-**适用内容：** 存在一个核心数值，并有明确的单位、时间口径或真实比较信息。卡片数量来自实际指标，不预设固定数量。
-
-**继承基础：** 面板、数值排版、状态色和图表表达继承第二、三部分。
-
-**特殊组合：** 白色上层内面承载短标签和等宽核心数值，微染灰外框向下延伸为附属信息带；单位以小字号贴近数值，比较说明在底带中对齐。存在真实短时间序列时，可在数值旁放置稀疏的纤细微型柱线。同一序列消费 `--oyd-chart-series-main`；仅在已定义当前或选中点时保留该点的完整序列色，其余真实数据点可降至约 15% 不透明度（推断），形成浅淡线中单点突出。这只是点的强调关系，不代表不同类别或禁用状态；未定义重点时维持同等强度。只有业务确有第二个比较序列，才采用基础图表的双序列配色。变化数字只在业务上确有正向或负向意义时使用相应语义色；底带的箭头与说明保持弱于主数值。
-
-**无匹配时：** 没有比较数据就不保留比较底带；没有序列就省略微图。只有一般文本时使用基础面板，不补造趋势箭头或同比值。
-
-### R2 主题色阶像素矩阵图
-
-**适用内容：** 同一量纲下的离散时间或分类序列，能够明确给出轴域、单元高度和聚合口径；适合展示整体节奏。只有数据确实允许相加时才使用堆叠表达。
-
-**继承基础：** 采用基础图表的序列、坐标、读数规则，以及面板与标题排版。
-
-**特殊组合：** 图形由小方格构成，方格间留窄白缝；底层空格使用 `--oyd-chart-cell-empty`，有值部分按序列映射深色或品牌浅色。推断以 7–10 CSS px 方格、约 2 CSS px 间隔作为初始视觉参数，实际网格密度按可用尺寸和数据量确定；同一图内单元尺度一致，不通过随机格子模拟曲线。按真实轴域确定每格数值容量，顶部不足一格可使用准确的部分填充，读数保留原值。
-
-需要观察某一时点时，在对应列上叠加细虚线和小圆点，白色读数浮层列出该时点的系列值；当前轴标签可加强字色。背景空格、比较序列和缺失数据必须可区分，图例仅包含真实序列。
-
-**无匹配时：** 数据过密、包含无法妥善表达的负值、序列不可相加或任务要求高精度比较时，使用常规折线、分组柱形或数据表，继承相同主题色阶和表面规则。没有序列则不渲染矩阵，也不把它当作普通卡片的背景纹理。
-
-### R3 纤细圆头对照柱线
-
-**适用内容：** 有共同刻度与基线的少量时间点或分类值，存在单个序列或定义清楚的比较序列，且可通过细柱线完成比较。
-
-**继承基础：** 采用基础图表、图例和读数规则，不依赖其他配方。
-
-**特殊组合：** 用细长圆头柱线替代宽柱，主序列为品牌色、比较序列为品牌浅色；推断以 3–4 CSS px 柱线宽为起点，保持充分横向留白。辅助线为低强度横向点线，标签简洁，减少边框。若两序列为相同维度的独立比较，优先并列；只有真实的“实际值/目标值”关系才允许在同一轴位重叠，并让图例或读数明确解释。不要从视觉上重叠的高低线推导可加总关系。
-
-**无匹配时：** 过多分类或浅灰序列难以辨认时改用更清楚的基础图表或数据表。只有一个序列时不生成浅色参照柱；微型展示没有坐标时必须仍有明确口径和可读取数值的入口。
-
-### R4 内嵌轻提示操作条
-
-**适用内容：** 区块内部存在真实可执行的辅助操作、提示或分析入口，且与该区块当前内容直接相关。
-
-**继承基础：** 使用面板层次、按钮与图标底盒、正文和覆盖层规则。
-
-**特殊组合：** 在白色内容面中嵌入低高度微染灰浅条，采用 `--oyd-frame-bg`、细边界和 `--corner-4`。左侧小白底图标盒，中间一行或自然换行的短说明，尾部已有进入动作以轻量箭头表达；整条的视觉强度低于页面主按钮，不变成彩色促销横幅。
-
-**无匹配时：** 没有实际入口则省略整条；只有说明时使用普通说明文本，并移除箭头和可点击外观。文案中的能力必须已实际存在，不因这种视觉组合新增功能。
-
-## 5. 项目应用与调整规则
-
-### 变量与平台边界
-
-YAML 是变量值的唯一事实源；正文只说明角色和消费关系。全局变量供应用与页面使用，`custom-page` 在本模板中包含外框表面、图形序列、数据字体和局部轮廓等独立语义。递归读取两类分组中以双连字符开头的标量叶子，分组名不拼入变量名；平台基础与项目扩展均在主题中声明，可无环引用，并按实际设计补充变量。
-
-`--pod-table-cell-color` 单向引用 `--pod-card-bg-color`，`--oyd-page-bg` 单向引用 `--pod-page-bg-color`。页面层的微染灰底框与全局微染灰输入当前具有相近外观，但用途独立：改变输入不会自动改变面板结构。
-
-需求决定内容与操作，平台约束限定可实现的结构，主题定义视觉语言。原生导航仅应用六项配色，额外套边和自绘菜单细节只在项目确定自绘导航时使用。涉及原生组件时以开放接口为限；不因主题要求破坏原有结构或虚构状态色接口。没有明确变量名的成功、警告、错误、信息状态沿用平台语义。
-
-圆角和局部材质遵循本主题，字体 16 项和间距 10 项保持全局基线。正文标为推断的局部参数可在实际渲染时微调，但不能改变微染灰/白色层次、细边界和排版分工。自然内容增长优先于固定高度或图形装饰。
-
-### 品牌色与数据色实例化
-
-- 色彩来源：{{COLOR_SOURCE}}。
-- `{{PRIMARY_COLOR}}` 是唯一品牌种子，由项目输入与色彩来源确定，不设固定兜底色；不把平台状态色当作品牌。
-- 七个品牌 Token 按 YAML 的种子、基底和权重生成。对每个 sRGB 编码通道，以 `round(seed × 种子比例 + base × 基底比例)` 计算，比例之和为 1，再输出不透明十六进制颜色；不混入 HSL 调色或额外伽马变换。
-- `--color-brand1-1`、`--color-brand1-9`、`--color-brand1-10` 分别服务悬停、按下、禁用；`--color-brand1-2` 保留平台已有消费关系；`--color-brand1-3`、`--color-brand1-5` 只承担品牌派生浅色和深色语义。项目文档将所有生成标记转换为实际色值后再使用。
-- 用户指定的种子不静默替换。主按钮沿用浅色前景，各状态、文字和背景按设计稿已确定的明暗关系配对，不额外选择黑白前景或改写明度层级。
-- 根背景、导航主题色角色、面板底框、输入填充与偏色线条都关联品牌种子，混合基底只使用无色相灰。标注 `neutral-gray` 的中性表面、文字和轮廓保持固定；导航按自己的品牌引用与中性值成组解析，不借用内容 Text/Fill。
-- 品牌数据序列、像素背景和平台状态语义分别维护。项目新增分类色时写清类别映射，不让分类、状态与品牌因同色而混淆。
-
-### 项目页面设计
-
-仅对实际需求中的页面写出确定结果，不继承示例业务、人物、数据、菜单数量或固定看板结构。每页包含以下内容，实例化后不保留尚未决定的布局选项：
-
-- **页面内容：** 页面名称、阅读或操作任务、实际内容、真实数据来源及已有操作。
-- **首屏印象：** 明确第一眼的关注点，以及白面与微染灰底框、字重和留白如何引导视线；不要求所有页面都出现大数字。
-- **布局安排：** 明确实际区块的位置、宽度、列数、主次、高度策略、需要等高的对象、对齐关系和窄屏顺序。仅在内容需要时设置双列、指标区或表格。
-- **视觉表达：** 给出每个区块使用的表面、文字与组件规则；实际采用配方时标明编号及位置，缺乏数据条件时明确采用的基础替代形式。
-- **标志性时刻：** 确定一处静态构图或真实反馈，例如白色内容嵌入微染灰标题框的清楚边界，或图形定位后出现浅标题带读数浮层；写清位置、出现条件及任务价值。
-
-素材来源、缺失处理和特殊平台约束直接写入相关页面。首屏焦点与标志性时刻可以是同一个静态画面；不为表现配方增加额外业务模块。
-
-{{PAGE_APPLICATIONS}}
-
-### 页面设计验收
-
-以下仅作为实际页面渲染后的验收要求，文档阶段不视为已完成。
-
-- [ ] **首屏印象：** 焦点、内容主次和整体感受符合页面方案；深色强调集中在关键文字与操作，状态色不扩散为整页主色。
-- [ ] **布局安排：** 分区、比例、列数、高度策略和对齐符合实际页面方案；窄屏重排保持内容顺序，不以缩小全局字体维持原列数。
-- [ ] **风格表达：** 微染灰底框、白色内面、细边与排版分工在本页采用的组件上成立；普通表单或列表也保有主题辨识度，图表序列和业务状态仍可辨认。
-- [ ] **标志性时刻：** 指定静态画面或交互反馈在约定位置、条件下出现，读数与真实数据一致，并帮助理解信息或完成操作。

package/yida-skills/skills/yida-design/templates/design-themes/inset-frame-pixel-rhythm/form-layout.json

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