openyida 2026.9.19 → 2026.9.21

package/yida-skills/skills/yida-design/templates/design-themes/free-creative/design.md

@@ -0,0 +1,238 @@
+---
+name: "{{PROJECT_NAME}}"
+description: "从任务频率和内容拓扑推导工作区；从品牌与使用环境自主决定材质。不从命名模板选择，必须提交独立推演依据。"
+themeId: "free-creative"
+tokens:
+  application-global:
+    appearance:
+      surfaces:
+        "--pod-app-root-bg-color": "#f6f6f6"
+        "--pod-app-root-bg-image": "none"
+        "--pod-page-bg-color": "#f6f6f6"
+        "--pod-card-bg-color": "#ffffff"
+        "--pod-table-cell-color": "var(--pod-card-bg-color)"
+      navigation:
+        "--pod-shell-theme-bg-color": "#FFFFFF"
+        "--pod-nav-item-text-color": "#404040"
+        "--pod-nav-item-text-hover-color": "#171717"
+        "--pod-nav-item-text-selected-color": "#FFFFFF"
+        "--pod-nav-menu-bg-hover-color": "#F0F0F0"
+        "--pod-nav-menu-bg-selected-color": "#303030"
+        "--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": "#CCCCCC"
+        "--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 #CCCCCC"
+        "--pod-nav-logo-border-radius": "4px"
+        "--pod-nav-sub-divider-color": "#CCCCCC"
+        "--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": "#CCCCCC"
+        "--pod-nav-popup-bg-color": "var(--pod-shell-theme-bg-color)"
+        "--pod-nav-popup-border-radius": "4px"
+        "--pod-nav-popup-shadow": "none"
+        "--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": "#CCCCCC"
+        "--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": "#CCCCCC"
+        "--pod-nav-action-border": "1px solid #CCCCCC"
+        "--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": "40px"
+        "--pod-nav-menu-item-radius": "4px"
+        "--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": "4px"
+      native-form:
+        "--form-element-medium-corner": "4px"
+        "--form-element-medium-height": "36px"
+        "--form-element-medium-font-size": "14px"
+        "--input-bg-color": "#ffffff"
+        "--input-border-width": "1px"
+        "--input-border-color": "#cccccc"
+        "--input-hover-border-color": "var(--color-brand1-6)"
+        "--input-focus-border-color": "var(--color-brand1-6)"
+        "--input-hover-bg-color": "#ffffff"
+        "--input-focus-bg-color": "#ffffff"
+        "--pod-form-label-color": "#242424"
+        "--form-top-label-margin-b": "8px"
+        "--yida-form-content-bgcolor": "#ffffff"
+        "--pod-page-content-max-width": "1000px"
+        "--pod-page-border-radius": "4px"
+        "--pod-page-footer-bg-color": "#ffffff"
+        "--pod-page-footer-border-radius": "4px"
+        "--pod-sticky-footer-box-shadow": "none"
+        "--pod-formView-stickyFooter-bg-color": "#f6f6f6"
+        "--pod-formView-stickyFooter-box-shadow": "none"
+        "--pod-formView-stickyFooter-border": "none"
+        "--pod-formView-stickyFooter-border-top": "1px solid #cccccc"
+        "--pod-formView-stickyFooter-height": "56px"
+        "--pod-formView-stickyFooter-bottom": "8px"
+        "--pod-field-preview-min-height": "32px"
+        "--pod-field-preview-padding": "8px 12px"
+        "--pod-field-preview-gap": "4px"
+        "--pod-field-preview-bg-color": "#ffffff"
+        "--pod-field-preview-border-radius": "4px"
+        "--pod-field-preview-indicator-color": "var(--color-fill1-3)"
+        "--pod-field-preview-shadow": "none"
+        "--pod-field-preview-text-color": "#242424"
+        "--pod-field-preview-line-height": "20px"
+    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% + #202020 74%，sRGB 逐通道混合>"
+      "--color-line1-1": "#cccccc"
+      "--color-line1-2": "#cccccc"
+      "--color-fill1-1": "#f6f6f6"
+      "--color-fill1-2": "#f6f6f6"
+      "--color-fill1-3": "#cccccc"
+      "--color-fill1-5": "#ffffff"
+      "--color-fill1-10": "#262626"
+      "--color-text1-5": "#FFFFFF"
+      "--color-text1-4": "#242424"
+      "--color-text1-10": "#242424"
+      "--color-text1-3": "#242424"
+      "--color-text1-2": "#858781"
+      "--color-text1-1": "#cccccc"
+    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": "4px"
+      "--corner-3": "4px"
+      "--corner-4": "4px"
+      "--corner-5": "4px"
+      "--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:
+    "--oyd-page-bg": "var(--pod-page-bg-color)"
+    "--oyd-surface": "var(--pod-card-bg-color)"
+    "--oyd-canvas-image": "var(--pod-app-root-bg-image)"
+    "--oyd-ink": "var(--color-text1-4)"
+    "--oyd-border": "var(--color-line1-2)"
+    "--oyd-accent": "var(--color-brand1-6)"
+    "--oyd-radius": "4px"
+    "--oyd-content-width": "1000px"
+    "--oyd-content-padding": "24px"
+    "--oyd-field-gap": "20px"
+    "--oyd-section-gap": "40px"
+    "--oyd-heading-font": "var(--font-family-base)"
+    "--oyd-heading-size": "32px"
+    "--oyd-rule-style": "solid"
+    "--oyd-layout-columns": "minmax(0, 12fr)"
+    "--oyd-surface-shadow": "none"
+applicationStyle:
+  recipe: "application-style-v1"
+  mode: "creative"
+---
+# {{PROJECT_NAME}} design.md
+
+## 1. 风格摘要
+
+自由创意从业务任务、用户、品牌、内容结构和使用环境独立推演。导航、应用框架、自定义页面、表单和详情页共用最终确定的构图、字体、材质、密度与状态语言。
+
+## 2. 页面视觉系统
+
+### 2.1 表面、区块与层次
+
+根据真实内容确定画布、内容面、边界、留白和信息层级。主次区域通过宽度、位置、表面和排版建立关系；每个容器都承载明确内容，不为丰富版式增加空卡片或虚构数据。
+
+### 2.2 应用导航
+
+按业务入口确定导航结构和明暗，菜单来自真实页面范围。主色 {{PRIMARY_COLOR}}；色彩来源 {{COLOR_SOURCE}}。导航与正文使用同一应用全局样式；在 themeProfile 中分别填写 contentTone 与 navTheme。
+
+先决定品牌区、菜单分组、搜索和常用操作如何服务当前业务，再与应用框架、表单、自定义页和详情一起确定表面、边界、圆角、字体、密度和选中表达。在 navigation 分组填写项目自己的导航底色、普通文字、悬停文字、选中文字、悬停背景、选中背景六项 Token，并配套搜索、弹层、分组、操作、菜单高度与圆角。文件中的基础值是编写骨架，交付时用项目设计值替换。窄屏和折叠后保持菜单可展开、当前页面可定位、键盘焦点可见。
+
+### 2.3 页面标题与操作
+
+标题说明当前页面任务，主操作靠近作用对象，辅助操作保持清楚的层级。标题、说明、操作、筛选和状态摘要按首屏任务排列，不复制示例标题、指标或标签。
+
+### 2.4 布局和移动端
+
+根据阅读顺序、操作频率、内容宽度和增长方式确定单列、多列、侧栏或分区。窄屏按阅读与操作顺序重排，工具栏允许换行，宽表格提供横向滚动，抽屉和表单入口保留明确返回路径。
+
+### 2.5 自定义页面设计
+
+自定义页面按 PRD 组织标题与操作区、状态摘要、筛选、主要内容、上下文信息和反馈区；列表、表格、图表、详情抽屉和表单入口只在业务需要时出现。每个自定义页面逐页写清页面任务、首屏焦点、布局、表面与组件、主操作、状态、响应式和验收。
+
+## 3. 基础组件表达
+
+### 自定义页面组件与交互
+
+页面标题、筛选、主操作、状态摘要、列表、表格、图表、详情抽屉和表单入口按真实任务组合。默认、hover、active、focus、loading、empty、error、disabled 和 selected 状态使用同一套表面、边界、文字与状态语义，并为键盘焦点、纯图标按钮、非颜色状态表达和 reduced motion 提供可执行规则。
+
+`YidaCodeCanvas` 页面在 `YidaComp` 内消费已声明的应用主题 token。页面局部 CSS 只负责当前组件的布局和特色表达；应用全局样式统一作用于应用框架、表单、详情页和自定义页面等。
+
+### 表单组件与版式结构
+
+表单支持在顶部、左侧、主体、右侧和字段之间组合 Tab/切换、按钮组/操作入口、图片/图形、状态区、标题与 Divider、分栏、辅助内容和字段。各组件分别承担导航、操作、视觉焦点、反馈、层级、节奏、装饰或采集作用。普通业务分组和章节分隔使用 Divider，横向字段组合使用 ColumnContainer。表单延续应用全局字体、色彩、表面、边界、圆角、密度和状态。
+
+### 组件状态与详情延续
+
+输入、按钮、选择、表格和浮层使用已确定的尺寸、边界、表面和文字角色。错误、警告、禁用和只读使用独立语义；详情页保持与编辑表单相同的章节顺序、信息层级和响应式规则。详情页只读字段的数据框使用 --pod-field-preview-bg-color、--pod-field-preview-border-radius、--pod-field-preview-shadow、--pod-field-preview-indicator-color、--pod-field-preview-text-color、--form-element-medium-font-size、--pod-field-preview-gap、--pod-field-preview-line-height、--pod-field-preview-min-height 和 --pod-field-preview-padding，并与表单控件、卡片和页面画布使用同一套设计值。
+
+## 4. 特色表达配方
+
+由真实任务确定表单与页面的组件区域、章节、图表和记录集合。左侧栏可组合 Tab、按钮、图片或其他表单组件。每个指标、组件和装饰文案都服务于具体业务，并写清启用条件与窄屏处理。
+
+## 5. 项目应用与调整规则
+
+每个实际自定义页面逐页写清页面任务、首屏焦点、布局、表面与组件、主操作、状态、响应式和验收。表单额外写清顶部、左侧、主体、右侧和字段之间使用的组件、各组件作用、列比例、标签位置、字段与章节间距、底栏、详情延续和窄屏重排。form-layout.json 提供字段与分栏的初始结构；编辑已有表单时保留现有组件。交付时核对实际页面、表单与 design.md。
+
+{{PAGE_APPLICATIONS}}

package/yida-skills/skills/yida-design/templates/design-themes/free-creative/form-layout.json

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