@teamix-evo/skills 0.12.0 → 0.13.0

package/src/teamix-evo-design-opentrek/rules/design-tokens.json

@@ -270,18 +270,12 @@
       {
         "id": "terminal",
         "comment": "终端 / 代码块",
-        "vars": [
-          "--color-terminal",
-          "--color-terminal-foreground"
-        ]
+        "vars": ["--color-terminal", "--color-terminal-foreground"]
       },
       {
         "id": "font-family",
         "comment": "Font Family / 字体族（v7.8.4 新增）\nbody 必须使用 var(--font-sans)，代码片段使用 var(--font-mono)\n禁止在页面中硬编码 font-family 堆栈",
-        "vars": [
-          "--font-sans",
-          "--font-mono"
-        ]
+        "vars": ["--font-sans", "--font-mono"]
       },
       {
         "id": "typography",
@@ -321,9 +315,7 @@
       {
         "id": "layout-frame",
         "comment": "Layout Frame Width",
-        "vars": [
-          "--layout-sidebar-width"
-        ]
+        "vars": ["--layout-sidebar-width"]
       },
       {
         "id": "table-cell",
@@ -347,17 +339,12 @@
       {
         "id": "page-header",
         "comment": "Page Header",
-        "vars": [
-          "--page-header-height",
-          "--breadcrumb-height"
-        ]
+        "vars": ["--page-header-height", "--breadcrumb-height"]
       },
       {
         "id": "action-toolbar",
         "comment": "ActionToolbar",
-        "vars": [
-          "--action-toolbar-search-combo-gap"
-        ]
+        "vars": ["--action-toolbar-search-combo-gap"]
       },
       {
         "id": "radius",
@@ -1919,11 +1906,7 @@
         },
         "columns": {
           "default": 2,
-          "options": [
-            2,
-            3,
-            4
-          ],
+          "options": [2, 3, 4],
           "multiColumnGap": "64px（列与列间的水平间距）",
           "responsive": {
             ">=1200px": "使用配置列数",
@@ -1984,7 +1967,7 @@
         "value": "1rem",
         "note": "16px",
         "name": "text-base",
-        "usage": "Sidebar 品牌区文字、小标题、卡片标题、区块标题",
+        "usage": "小标题、卡片标题、区块标题",
         "weight": {
           "medium": "500",
           "black": "900 (仅 Sidebar 品牌区)"
@@ -1995,7 +1978,7 @@
         "value": "1.125rem",
         "note": "18px",
         "name": "text-lg",
-        "usage": "页面主标题（PageHeader）、概览统计大数字",
+        "usage": "页面主标题、PageHeader 面包屑层级",
         "weight": {
           "medium": "500"
         }
@@ -2408,13 +2391,8 @@
       "collapsedState": {
         "padding": "12px 10px 16px",
         "justifyContent": "center",
-        "hidden": [
-          "username",
-          "moreButton"
-        ],
-        "visible": [
-          "avatar"
-        ],
+        "hidden": ["username", "moreButton"],
+        "visible": ["avatar"],
         "note": "收起态详细规范见 collapseBehavior.footer"
       }
     },

package/src/teamix-evo-design-opentrek/rules/page-frame.json

@@ -1,241 +1,245 @@
 {
-  "version": "1.2",
-  "description": "页面框架规范 — 定义所有页面类型的框架级属性（Sidebar含品牌区/Breadcrumb/返回按钮），子技能自动继承，无需重复声明。TopNavigation 已移除，品牌标识下沉至 Sidebar 顶部。",
+  "version": "2.0",
+  "description": "页面框架规范 v2.0 — 定义 OpenTrek 页面骨架层级、组件 API、页面模式与关键约束。基于 PageShell + OpSidebar + OpPageContainer 范式，子技能自动继承框架组件。",
+
+  "skeletonLayers": {
+    "description": "骨架分层定义 — 从外到内的组件嵌套层级",
+    "L0": { "component": "PageShell", "role": "全屏视口壳，管理 sidebar + content 布局拓扑", "props": ["sidebar", "children", "background"] },
+    "L1": { "component": "OpSidebar", "role": "品牌头 + 多段导航 + 贴底分组 + 用户区", "props": ["brand", "navSections", "bottomSections", "footer"] },
+    "L2": { "component": "OpPageContainer", "role": "灰底 + 大白卡容器，header 固顶 + children 内滚", "props": ["header", "children"] },
+    "L3": { "component": "PageHeader", "role": "页头：面包屑 / 标题 / 描述 / 操作按钮", "props": ["children"] },
+    "nestingOrder": "PageShell(background='muted') > [OpSidebar + SidebarInset] > OpPageContainer(header=PageHeader) > 业务内容"
+  },
+
   "frameLevels": {
     "L0": {
       "name": "无导航页",
-      "topNavigation": false,
       "sidebar": false,
       "breadcrumb": false,
-      "backButton": false,
       "layout": "SINGLE_COL",
-      "pageTypes": [
-        "ResultPage",
-        "ExceptionPage",
-        "WelcomePage"
-      ],
-      "description": "无全局导航、无侧边栏、无面包屑的独立页面"
+      "pageTypes": ["ResultPage", "ExceptionPage", "WelcomePage"],
+      "description": "无 Sidebar、无面包屑的独立页面。OpPageContainer 全宽渲染。"
     },
     "L1": {
       "name": "主页面",
-      "topNavigation": false,
       "sidebar": true,
       "breadcrumb": false,
-      "backButton": false,
-      "layout": "TWO_COL | SINGLE_COL",
-      "pageTypes": [
-        "ListPage",
-        "Dashboard",
-        "OverviewPage",
-        "WorkspacePage",
-        "KanbanPage"
-      ],
-      "description": "Sidebar（含Logo+产品名），使用页头业务组件的标题基础组件模式。适用于 ListPage、Dashboard、OverviewPage。Sidebar 仅在 TWO_COL 布局时显示，SINGLE_COL 布局时 Sidebar 隐藏。"
+      "layout": "TWO_COL",
+      "pageTypes": ["ListPage", "Dashboard", "OverviewPage", "WorkspacePage", "KanbanPage"],
+      "description": "OpSidebar（含品牌区）+ OpPageContainer，PageHeader 使用标题模式（仅显示页面标题，无面包屑）。",
+      "headerMode": "title"
     },
     "L2": {
       "name": "子页面",
-      "topNavigation": false,
       "sidebar": true,
       "breadcrumb": true,
-      "backButton": false,
-      "layout": "TWO_COL | SINGLE_COL",
-      "pageTypes": [
-        "DetailPage",
-        "FormPage",
-        "WizardPage"
-      ],
-      "description": "Sidebar（含Logo+产品名），使用页头业务组件的面包屑基础组件模式。面包屑父级项可点击返回上一级。适用于 DetailPage、FormPage、WizardPage。Sidebar 仅在 TWO_COL 布局时显示，SINGLE_COL 布局时 Sidebar 隐藏."
+      "layout": "TWO_COL",
+      "pageTypes": ["DetailPage", "FormPage", "WizardPage"],
+      "description": "OpSidebar（含品牌区）+ OpPageContainer，PageHeader 使用面包屑模式（父级可点击返回）。禁止同时展示标题组件。",
+      "headerMode": "breadcrumb"
     }
   },
-  "pageAreaOrder": "Sidebar(Logo+Name) → PageContainer → ContentWrapper → Card(白卡容器) → [Breadcrumb + PageHeader] → [ActionToolbar] → [内容区] → [Pagination]",
+
+  "componentAPI": {
+    "description": "框架组件 TypeScript 接口定义，供 AI 生成代码时参照。",
+    "PageShell": {
+      "import": "@/components/page-shell",
+      "props": {
+        "sidebar": "ReactNode — 左侧 slot，通常传入 OpSidebar",
+        "children": "ReactNode — 主区内容，通常传入 SidebarInset > OpPageContainer",
+        "background": "'background' | 'muted' | 'card' | 'sidebar' | 'accent' — 默认 'background'，OpenTrek 固定用 'muted'"
+      }
+    },
+    "OpSidebar": {
+      "import": "@/components/business/op-sidebar",
+      "props": {
+        "brand": "ReactNode — 品牌头（默认 OpenTrek logo）",
+        "brandCollapsed": "ReactNode — 折叠态品牌 icon",
+        "headerAction": "ReactNode — 品牌行右侧操作槽（如 SidebarTrigger）",
+        "navSections": "OpSidebarNavSection[] — 必填，主导航多段",
+        "bottomSections": "OpSidebarNavSection[] — 贴底分组（mt-auto 推至底部）",
+        "footer": "ReactNode — 底部 slot（用户区）",
+        "collapsible": "'icon' | 'offcanvas' | 'none' — 默认 'icon'",
+        "variant": "'sidebar' | 'floating' | 'inset' — 默认 'sidebar'"
+      },
+      "subTypes": {
+        "OpSidebarNavSection": "{ label?: string; items: OpSidebarNavItem[] }",
+        "OpSidebarNavItem": "{ id: string; title: string; icon?: ReactNode; href?: string; isActive?: boolean; badge?: ReactNode; children?: SubItem[]; popoverContent?: ReactNode }"
+      }
+    },
+    "OpPageContainer": {
+      "import": "@/components/business/op-page-container",
+      "props": {
+        "header": "ReactNode — 页头 slot，通常传入 <PageHeader>",
+        "children": "ReactNode — 主区内容（内滚区域）"
+      },
+      "renderStructure": "div.py-5.pr-5(无左padding) > div.rounded-2xl.bg-card.px-6.pt-5.pb-6 > [header(flex-shrink-0)] + [children(overflow-y-auto.-mx-6.px-6)]"
+    },
+    "PageHeader": {
+      "import": "@/components/page-header",
+      "subComponents": [
+        "PageHeader — 根容器 header.relative.flex.flex-col.gap-2",
+        "PageHeaderNav — 导航层（面包屑 + 右侧链接）",
+        "PageHeaderContent — 主内容区（左右双列）",
+        "PageHeaderHeading — 标题行（支持 goBack / onBack）",
+        "PageHeaderTitle — 标题文字（支持 tooltip）",
+        "PageHeaderDescription — 描述文字",
+        "PageHeaderActions — 操作按钮区",
+        "PageHeaderFooter — 底部区域"
+      ]
+    }
+  },
+
+  "pagePatterns": {
+    "description": "5 种标准页面使用范式，每种定义适用场景和组合骨架。",
+    "l1-title": {
+      "name": "L1 标题模式",
+      "applies": ["ListPage", "Dashboard", "OverviewPage", "WorkspacePage"],
+      "skeleton": "<OpPageContainer header={<PageHeader><PageHeaderContent><PageHeaderHeading><PageHeaderTitle>页面标题</PageHeaderTitle></PageHeaderHeading><PageHeaderActions>操作按钮</PageHeaderActions></PageHeaderContent></PageHeader>}>{Tabs? → 列表/卡片 → 分页}</OpPageContainer>"
+    },
+    "l2-breadcrumb-detail": {
+      "name": "L2 面包屑模式 — 详情页",
+      "applies": ["DetailPage"],
+      "skeleton": "<OpPageContainer header={<PageHeader><PageHeaderNav><Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink>父级列表</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator/><BreadcrumbItem><BreadcrumbPage>当前资源名</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb></PageHeaderNav></PageHeader>}><OpDetailHeader>...</OpDetailHeader>{详情内容/Tabs}</OpPageContainer>",
+      "constraints": ["禁止同时展示 PageHeaderTitle", "OpDetailHeader 在 children 区域，不在 header slot"]
+    },
+    "l2-breadcrumb-form": {
+      "name": "L2 面包屑模式 — 表单页",
+      "applies": ["FormPage", "WizardPage"],
+      "skeleton": "<OpPageContainer header={<PageHeader><PageHeaderNav><Breadcrumb>父级 → 新建 XXX</Breadcrumb></PageHeaderNav></PageHeader>}>{Form 表单}</OpPageContainer>",
+      "constraints": ["禁止同时展示 PageHeaderTitle"]
+    },
+    "tabs-shell": {
+      "name": "Tabs 壳页面",
+      "applies": ["ListPage (多 Tab 入口)"],
+      "skeleton": "<OpPageContainer header={<PageHeader><PageHeaderContent><PageHeaderHeading><PageHeaderTitle>模块标题</PageHeaderTitle></PageHeaderHeading></PageHeaderContent></PageHeader>}><Tabs><TabsList>...</TabsList><TabsContent className='mt-4 flex-1'>...</TabsContent></Tabs></OpPageContainer>"
+    },
+    "fullscreen-editor": {
+      "name": "全屏编辑器页",
+      "applies": ["画布设计", "代码编辑"],
+      "skeleton": "<div className='h-screen w-screen'>{全屏编辑器内容}</div>",
+      "constraints": ["独立路由，不包裹 PageShell/OpSidebar/OpPageContainer"]
+    }
+  },
+
+  "detailHeader": {
+    "description": "详情页顶部信息区块 — OpDetailHeader 组合结构与视觉规范",
+    "component": "OpDetailHeader",
+    "import": "@/components/business/op-detail-header",
+    "structure": "OpDetailHeader(CSS Grid auto 1fr auto) > [AvatarIcon|AvatarLetter] + [Body(Title+Description)] + [Actions] + [Meta(col-span-full)]",
+    "visualSpec": {
+      "root": "CSS Grid: auto 1fr auto / items-start / gap-x-3 (12px)",
+      "avatar": "48x48, grid col 1, rounded-lg",
+      "title": "text-base (16px) / font-medium / text-foreground, 后缀 gap-2 可放 Tag",
+      "description": "text-xs / text-muted-foreground / mt-2 / line-clamp-2",
+      "actions": "grid col 3 / flex / gap-2",
+      "metaFlex": "col-span-full / text-xs / mt-4 / mb-6 / gap-x-20 (80px) / gap-y-3",
+      "metaGrid": "col-span-full / text-xs / mt-4 / mb-6 / grid-cols-4 / gap-y-3"
+    },
+    "metaLayoutSelection": {
+      "lte5items": "OpDetailHeaderMeta（固定间距 Flex）",
+      "gt5items": "OpDetailHeaderMetaGrid（Grid 均分）"
+    },
+    "avatarPresets": {
+      "AvatarLetter": "标识型实体（Agent/Skill）— 48x48 彩色方块 + 首字母 + 渐变高光",
+      "AvatarIcon": "工具型实体（评估器/评测集/报告）— 48x48 底色 + 图标"
+    }
+  },
+
+  "keyConstraints": [
+    { "id": "KC-1", "rule": "灰底白卡范式", "detail": "OpPageContainer 的 bg-card rounded-2xl 是 OpenTrek 产品决策，所有业务页面必须遵循" },
+    { "id": "KC-2", "rule": "无左 padding", "detail": "OpPageContainer 左侧不设 padding，由 sidebar 右边距自然形成间距" },
+    { "id": "KC-3", "rule": "header 固顶", "detail": "PageHeader 区域 flex-shrink-0，不随内容滚动" },
+    { "id": "KC-4", "rule": "children 内滚", "detail": "内容区 overflow-y-auto，负外边距 -mx-6 px-6 保持滚动条不侵入白卡边距" },
+    { "id": "KC-5", "rule": "面包屑层级互斥", "detail": "仅 L2 页面显示面包屑；L1 页面仅显示标题。两者禁止同时出现。" },
+    { "id": "KC-6", "rule": "sidebar 无右边框", "detail": "op 范式中 sidebar 直接贴 muted 灰底，不需要分割线" }
+  ],
+
   "pageSkeleton": {
-    "description": "各框架级别的页面骨架图。仅展示框架组件占位，不包含业务内容区细节（内容区骨架见子技能 SKILL.md）。",
+    "description": "各框架级别的页面骨架图，使用实际组件名。",
     "L0": {
       "label": "无导航页",
-      "ascii": "┌───────────────────────────────────┐\n│       PageContainer (全宽)          │\n│       ContentWrapper                │\n│  ┌─ Card(白卡容器) ──────────────┐  │\n│  │  [PageHeader]                 │  │\n│  │  [ActionToolbar]              │  │\n│  │  [内容区]                      │  │\n│  │  [Pagination]                 │  │\n│  └───────────────────────────────┘  │\n└───────────────────────────────────┘",
-      "annotation": "无 TopNavigation / Sidebar / Breadcrumb。适用于 ResultPage、ExceptionPage、WelcomePage。所有内容放在 Card 白卡容器内."
+      "ascii": "┌──────────────────────────────────────┐\n│  OpPageContainer (全宽, 无 Sidebar)   │\n│  ┌─ bg-card rounded-2xl ──────────┐  │\n│  │  [PageHeader]                   │  │\n│  │  [ActionToolbar]                │  │\n│  │  [内容区]                        │  │\n│  │  [Pagination]                   │  │\n│  └─────────────────────────────────┘  │\n└──────────────────────────────────────┘"
     },
     "L1": {
       "label": "主页面",
-      "ascii": "┌────────┬──────────────────────────────────────┐\n│Sidebar │  PageContainer                       │\n│Logo    │  ┌─ ContentWrapper ────────────────┐ │\n│+Name   │  │  ┌─ Card(白卡容器) ───────────┐ │ │\n│(240px) │  │  │  [PageHeader: 标题组件]    │ │ │\n│        │  │  │  [ActionToolbar]           │ │ │\n│        │  │  │  [DataTable/CardGrid]      │ │ │\n│        │  │  │  [Pagination]              │ │ │\n│        │  │  └────────────────────────────┘ │ │\n│        │  └─────────────────────────────────┘ │\n└────────┴──────────────────────────────────────┘",
-      "annotation": "Sidebar（顶部Logo+产品名）+ PageHeader（标题基础组件模式，无返回能力）+ ContentWrapper + Card白卡容器。适用于 ListPage、Dashboard、OverviewPage。Sidebar 仅在 TWO_COL 布局时显示，SINGLE_COL 布局时 Sidebar 隐藏。"
+      "ascii": "┌─ PageShell(bg=muted) ────────────────────────────┐\n│ ┌─ OpSidebar ─┐  ┌─ SidebarInset ─────────────┐ │\n│ │ Brand       │  │  ┌─ OpPageContainer ──────┐ │ │\n│ │ navSections │  │  │ PageHeader: 标题模式   │ │ │\n│ │ bottomSects │  │  │ [ActionToolbar]        │ │ │\n│ │ footer      │  │  │ [DataTable/CardGrid]   │ │ │\n│ │             │  │  │ [Pagination]           │ │ │\n│ └─────────────┘  │  └────────────────────────┘ │ │\n│                   └─────────────────────────────┘ │\n└───────────────────────────────────────────────────┘"
     },
     "L2": {
       "label": "子页面",
-      "ascii": "┌────────┬──────────────────────────────────────┐\n│Sidebar │  PageContainer                       │\n│Logo    │  ┌─ ContentWrapper ────────────────┐ │\n│+Name   │  │  ┌─ Card(白卡容器) ───────────┐ │ │\n│(240px) │  │  │  [PageHeader: 面包屑组件]  │ │ │\n│        │  │  │  [ActionToolbar]           │ │ │\n│        │  │  │  [内容组件]                │ │ │\n│        │  │  │  [Pagination]              │ │ │\n│        │  │  └────────────────────────────┘ │ │\n│        │  └─────────────────────────────────┘ │\n└────────┴──────────────────────────────────────┘",
-      "annotation": "Sidebar（顶部Logo+产品名）+ PageHeader（面包屑基础组件模式，父级项点击返回）。PageHeader 必须在白卡容器内顶部渲染。使用面包屑基础组件模式时禁止展示标题基础组件（Breadcrumb 已承载导航与页面标识）。适用于 DetailPage、FormPage、WizardPage。Sidebar 仅在 TWO_COL 布局时显示，SINGLE_COL 布局时 Sidebar 隐藏."
+      "ascii": "┌─ PageShell(bg=muted) ────────────────────────────┐\n│ ┌─ OpSidebar ─┐  ┌─ SidebarInset ─────────────┐ │\n│ │ Brand       │  │  ┌─ OpPageContainer ──────┐ │ │\n│ │ navSections │  │  │ PageHeader: 面包屑模式 │ │ │\n│ │ bottomSects │  │  │ [OpDetailHeader]       │ │ │\n│ │ footer      │  │  │ [内容/Tabs]            │ │ │\n│ │             │  │  │ [Pagination]           │ │ │\n│ └─────────────┘  │  └────────────────────────┘ │ │\n│                   └─────────────────────────────┘ │\n└───────────────────────────────────────────────────┘"
     }
   },
+
   "universalComponents": {
-    "description": "子技能自动继承的框架组件，SKILL.md 中无需再声明这些组件的存在性。",
+    "description": "子技能自动继承的框架组件。详细规格见 common-components.json 对应条目。",
     "sidebar": {
-      "inheritLevel": [
-        "L1",
-        "L2"
-      ],
-      "condition": "layout 为 TWO_COL 时显示；SINGLE_COL 时隐藏",
-      "specRef": "rules/sidebar-spec.md",
-      "spec": {
-        "width": "240px（= --layout-sidebar-width，详见 design-tokens.json sidebarRules.width.expanded）",
-        "collapsedWidth": "68px（详见 design-tokens.json sidebarRules.width.collapsed）",
-        "containerBorder": "禁止右侧外边框（详见 design-tokens.json sidebarRules.colors.container.border: none）",
-        "header": {
-          "description": "Sidebar 顶部品牌区域，替代原 TopNavigation 的 Logo+ProductName。禁止底部边框（与下方菜单区无分割线，通过背景色一致实现视觉区分）。",
-          "height": "56px",
-          "padding": "0 16px",
-          "elements": [
-            "Logo Icon (20x20)",
-            "ProductName (text-xl, font-black, 20px, 间距 4px)"
-          ],
-          "collapsedState": {
-            "description": "收起态：显示折叠 Logo(30x30px)，隐藏 ProductName。hover Logo 显示展开 icon(14x14px, #717376)，点击展开 sidebar。",
-            "padding": "0 12px",
-            "justifyContent": "center",
-            "detail": "详见 design-tokens.json sidebarRules.collapseBehavior.header"
-          },
-          "backgroundColor": "var(--sidebar)",
-          "borderBottom": "none（禁止底部边框/分割线）"
-        },
-        "menuLevels": {
-          "max": 3,
-          "variants": {
-            "threeLevel": "默认变体：group-label + main-item + sub-item，适用信息架构需要 3 层归类的场景（顶层按业务域 / 模块分组、中层主导航、底层细分功能）",
-            "twoLevel": "新增变体：main-item + sub-item，去掉分组标题，适用信息架构只有 2 层归类的场景（顶层主导航、底层细分功能，主菜单项同语义层级）",
-            "selectionPrinciple": "以信息架构层级深度为准，与菜单项个数无关"
-          },
-          "detail": "详细定义见 design-tokens.json sidebarRules.structure.variants"
-        },
+      "inheritLevel": ["L1", "L2"],
+      "condition": "TWO_COL 布局时显示；SINGLE_COL/fullscreen 时隐藏",
+      "specRef": "rules/common-components.json → OpSidebar",
+      "component": "OpSidebar",
+      "keySummary": {
+        "expandedWidth": "240px",
+        "collapsedWidth": "68px",
+        "noBorderRight": true,
         "menuItemHeight": "40px",
-        "l2Indent": "16px",
-        "selectedState": {
-          "indicator": "灰色背景 var(--sidebar-active)",
-          "background": "var(--sidebar-active)"
-        },
-        "colorTokens": {
-          "background": "var(--sidebar)",
-          "foreground": "var(--sidebar-foreground)",
-          "activeBg": "var(--sidebar-active)",
-          "activeFg": "var(--sidebar-active-foreground)",
-          "hoverBg": "var(--sidebar-hover)",
-          "groupText": "var(--sidebar-group)",
-          "itemText": "var(--sidebar-item)",
-          "itemTextMuted": "var(--sidebar-item-muted)",
-          "accentBg": "var(--sidebar-accent)",
-          "accentFg": "var(--sidebar-accent-foreground)",
-          "border": "var(--sidebar-border)",
-          "ring": "var(--sidebar-ring)"
-        },
-        "collapseBehavior": {
-          "width": "68px",
-          "menuItem": "40x40px 居中于 34px 中轴线，gap: 0，flex-shrink: 0",
-          "overflow": "visible（容器）+ overflow-y: auto（content）",
-          "flyout": "hover 右侧弹出子菜单浮层，z-index: 200",
-          "alignment": "所有可见元素视觉中心对齐于 x = 34px",
-          "detail": "详见 design-tokens.json sidebarRules.collapseBehavior"
-        },
         "responsive": "768px 断点折叠为抽屉（Sheet 模式）"
-      },
-      "reference": "common-components.json Sidebar"
+      }
     },
     "breadcrumb": {
-      "inheritLevel": [
-        "L2"
-      ],
-      "specRef": "rules/page-header-spec.md",
-      "spec": {
+      "inheritLevel": ["L2"],
+      "specRef": "rules/common-components.json → PageHeader",
+      "keySummary": {
         "maxLevels": 4,
-        "maxItemWidth": "160px",
-        "clickableParent": true,
-        "lastItemClickable": false,
-        "semantics": "反映系统层级（非用户浏览路径）"
-      },
-      "visualSpecSummary": {
-        "containerHeight": "64px",
         "fontSize": "18px (var(--font-size-2xl))",
-        "fontWeight": "500",
+        "fontWeight": 500,
         "gap": "4px",
-        "separatorIcon": "ChevronRight 20px",
-        "separatorColor": "hsl(var(--muted-foreground))",
-        "parentColor": "hsl(var(--gray-secondary))",
-        "currentColor": "hsl(var(--gray-title))",
-        "detailSpec": "rules/page-header-spec.md §3 面包屑模式"
+        "separator": "ChevronRight SVG 20px",
+        "clickableParent": true,
+        "lastItemClickable": false
       },
       "constraints": [
-        {
-          "rule": "使用面包屑基础组件模式时，禁止展示标题基础组件",
-          "scope": ["L2"],
-          "pageTypes": ["FormPage", "DetailPage"],
-          "rationale": "面包屑已承载导航和页面标识功能，不再需要额外的标题组件。PageHeader 区域仅保留 Breadcrumb，不渲染 Title 元素。"
-        }
-      ],
-      "reference": "common-components.json Breadcrumb"
+        "使用面包屑模式时禁止展示标题组件（L1/L2 互斥）",
+        "面包屑反映系统层级（非用户浏览路径）",
+        "PageHeader 必须在白卡容器内顶部渲染"
+      ]
     }
   },
-  "responsiveFrameRules": {
-    "description": "各断点下的框架级响应式行为，子技能只定义内容区响应式变化。",
-    "DesktopXL": {
-      "breakpoint": "≥1920px",
-      "sidebar": "展开（240px，详见 design-tokens.json sidebarRules）",
-      "sidebarHeader": "Logo + ProductName 完整显示"
-    },
-    "Desktop": {
-      "breakpoint": "1200px - 1919px",
-      "sidebar": "可收起（68px，详见 design-tokens.json sidebarRules.width.collapsed），用户可控",
-      "sidebarHeader": "收起时仅显示 Logo Icon，ProductName 隐藏"
-    },
-    "Tablet": {
-      "breakpoint": "768px - 1199px",
-      "sidebar": "强制折叠为抽屉（Overlay 模式），点击触发显示",
-      "sidebarHeader": "抽屉内完整显示",
-      "note": "表格横滚、DescriptionList 列数降级由子技能定义"
-    },
-    "Mobile": {
-      "breakpoint": "<768px",
-      "sidebar": "隐藏，提示使用桌面端",
-      "sidebarHeader": "隐藏"
-    }
-  },
-  "layoutSelectionRules": {
-    "description": "页面选择 SINGLE_COL / TWO_COL 的判断逻辑。",
-    "rules": [
-      {
-        "condition": "页面需要分类导航（左侧树/分类筛选）",
-        "layout": "TWO_COL"
-      },
-      {
-        "condition": "页面需要 Tab 分类的资源详情页（Tab 内有关联资源列表）",
-        "layout": "TWO_COL"
-      },
-      {
-        "condition": "纯内容展示（列表/表单/详情）无分类导航需求",
-        "layout": "SINGLE_COL"
-      },
-      {
-        "condition": "表单页（FormPage）",
-        "layout": "SINGLE_COL（默认）| TWO_COL（有步骤导航时）"
-      },
-      {
-        "condition": "Dashboard / 仪表板",
-        "layout": "SINGLE_COL 或 GRID"
-      }
+
+  "layoutVariants": {
+    "description": "页面布局变体定义。",
+    "standard": {
+      "name": "标准布局",
+      "composition": "PageShell(bg=muted) + OpSidebar + SidebarInset + OpPageContainer",
+      "background": "灰底(muted) + 白卡(bg-card)",
+      "applies": "所有业务管理页面（列表/详情/表单/Dashboard）"
+    },
+    "fullscreen": {
+      "name": "全屏独立",
+      "composition": "无 PageShell 包裹",
+      "background": "自定义",
+      "applies": "画布编辑器、设计器、代码编辑器"
+    },
+    "selectionRules": [
+      { "condition": "页面需要分类导航（左侧树/分类筛选）", "layout": "TWO_COL (standard)" },
+      { "condition": "纯内容展示（列表/表单/详情）无分类导航", "layout": "TWO_COL (standard)" },
+      { "condition": "Dashboard / 仪表板", "layout": "TWO_COL (standard)" },
+      { "condition": "画布/代码编辑等全屏场景", "layout": "fullscreen" }
     ]
   },
+
+  "responsiveFrameRules": {
+    "description": "各断点下的框架级响应式行为。",
+    "DesktopXL": { "breakpoint": ">=1920px", "sidebar": "展开 240px" },
+    "Desktop": { "breakpoint": "1200-1919px", "sidebar": "可收起 68px，用户可控" },
+    "Tablet": { "breakpoint": "768-1199px", "sidebar": "强制折叠为抽屉（Overlay 模式）" },
+    "Mobile": { "breakpoint": "<768px", "sidebar": "隐藏，提示使用桌面端" }
+  },
+
   "frameToSubtypeMapping": {
     "description": "页面子类型与框架级别的映射，覆盖 pageTypes 的默认 L 级分配。",
-    "listPage": {
-      "defaultFrame": "L1",
-      "override": {
-        "drawer": "L0（嵌入 Sheet 内的弹窗列表，无框架组件）"
-      }
-    },
-    "detailPage": {
-      "defaultFrame": "L2"
-    },
-    "formPage": {
-      "defaultFrame": "L2",
-      "override": {
-        "dialogForm": "L0（弹窗表单，由全局状态管理）"
-      }
-    }
+    "listPage": { "defaultFrame": "L1", "override": { "drawer": "L0（嵌入 Sheet 内的弹窗列表）" } },
+    "detailPage": { "defaultFrame": "L2" },
+    "formPage": { "defaultFrame": "L2", "override": { "dialogForm": "L0（弹窗表单）" } }
   }
-}
+}