@teamix-evo/skills 0.4.0 → 0.6.0

package/src/teamix-evo-design-opentrek/rules/common-components.json

@@ -0,0 +1,924 @@
+{
+  "version": "4.0",
+  "description": "页面通用业务组件注册表。以 name 为唯一标识，子技能通过组件名引用。v4.0: 移除 G-C 编号系统，合并双层架构，shadcn 实现层不再独立注册。",
+  "shadcnComponents": "@teamix-evo/ui 组件通过 shadcnComponent 字段直接引用组件名（如 \"Button\"、\"Dialog\"），不再独立注册条目。完整 shadcn 组件列表见 src/atoms/*.md + src/composites/*.md。",
+  "components": [
+    {
+      "name": "TopNavigation",
+      "nameZh": "全局导航栏",
+      "level": "ORGANISM",
+      "universal": true,
+      "description": "全局导航栏，所有页面必需。包含Logo+产品名称(12px/500)、搜索框(胶囊形152px/border-radius:16px)、用户图标按钮组。高度48px，固定顶部。背景色为固定值#141414（非设计系统token）。Logo区域177px宽。无环境选择器。",
+      "layer": "business",
+      "children": [
+        "Logo",
+        "ProductName",
+        "SearchBar",
+        "UserMenu"
+      ],
+      "props": {
+        "fixed": "boolean, 默认true",
+        "height": "number, 默认48",
+        "backgroundColor": "string, 默认#141414(非设计系统token)"
+      },
+      "shadcnComponent": null
+    },
+    {
+      "name": "Sidebar",
+      "nameZh": "侧边导航",
+      "level": "ORGANISM",
+      "universal": true,
+      "layer": "business",
+      "description": "左侧导航，TWO_COL布局必需。包含品牌区（Logo+产品名）和导航分组菜单。展开宽度240px，收起宽度68px（详见 design-tokens.json sidebarRules）。768px响应式折叠为抽屉。色彩全部引用 --sidebar-* token。容器禁止任何外边框（右侧/底部分割线），品牌区与菜单区之间无分割线。",
+      "children": [
+        "NavGroup",
+        "MenuItem"
+      ],
+      "props": {
+        "collapsed": "boolean, 默认false",
+        "mode": "\"inline\" | \"vertical\"",
+        "width": "number, 默认240（收起态68，详见 design-tokens.json sidebarRules）"
+      },
+      "shadcnComponent": "Sidebar",
+      "shadcnRef": "boundaries.md(I2)"
+    },
+    {
+      "name": "Breadcrumb",
+      "nameZh": "面包屑基础组件",
+      "level": "MOLECULAR",
+      "universal": false,
+      "layer": "business",
+      "description": "面包屑基础组件，作为 PageHeader(PageHeader) 的内部子组件使用。不独立渲染，由 PageHeader 根据页面级别选择调用。提供层级路径展示，父级项可点击返回上一级。仅在 L2 二级页面时由 PageHeader 调用。",
+      "children": [],
+      "props": {
+        "items": "array, 面包屑项数组 [{label, onClick}]"
+      },
+      "visualSpec": {
+        "itemFontSize": "18px（与标题同字号）",
+        "itemFontWeight": "500 (medium)",
+        "parentItem": {
+          "color": "hsl(var(--gray-secondary))",
+          "hover": "hsl(var(--gray-primary))",
+          "clickable": true,
+          "note": "父级项本身即可点击返回上一级"
+        },
+        "currentItem": {
+          "color": "hsl(var(--gray-title))",
+          "clickable": false,
+          "note": "最后一项不可点击（cursor-default）"
+        },
+        "separator": {
+          "icon": "ChevronRight",
+          "size": "20px (w-5 h-5)",
+          "color": "hsl(var(--muted-foreground))"
+        },
+        "itemGap": "4px (gap-1)",
+        "note": "面包屑基础组件与标题基础组件不可同时出现，由 PageHeader 统一管控"
+      },
+      "shadcnComponent": "Breadcrumb"
+    },
+    {
+      "name": "PageHeader",
+      "nameZh": "页头业务组件",
+      "level": "ORGANISM",
+      "universal": true,
+      "layer": "business",
+      "description": "页头业务组件，所有页面必需。统一封装标题基础组件和面包屑基础组件，根据页面级别自动选择展示形态。L1一级页面使用标题基础组件，L2二级页面使用面包屑基础组件。必须在白卡容器内顶部渲染。",
+      "visualSpec": {
+        "height": "64px (h-16)",
+        "padding": "0 (水平对齐由 Card.paddingX = var(--card-padding-x) = 20px 提供；禁止重复设置）",
+        "background": "transparent (默认态无底色)",
+        "border": "无 (默认态无底边框)"
+      },
+      "modes": {
+        "titleMode": {
+          "level": "L1",
+          "internalComponent": "标题基础组件",
+          "scenario": "一级页面（管理列表页、概览页、仪表板）",
+          "spec": {
+            "titleSize": "18px",
+            "titleWeight": "500 (medium)",
+            "titleLineHeight": "36px",
+            "titleColor": "--gray-title",
+            "note": "显示页面标题文字，无返回能力"
+          }
+        },
+        "breadcrumbMode": {
+          "level": "L2",
+          "internalComponent": "面包屑基础组件",
+          "scenario": "二级页面（详情页、独占式配置页）",
+          "spec": {
+            "containerHeight": "64px (h-16)",
+            "containerPadding": "0（水平对齐由 Card.paddingX = var(--card-padding-x) = 20px 提供）",
+            "itemFontSize": "18px（与标题同字号）",
+            "itemFontWeight": "500 (medium)",
+            "parentItem": {
+              "color": "hsl(var(--gray-secondary))",
+              "hover": "hsl(var(--gray-primary))",
+              "clickable": true,
+              "note": "父级项可点击返回上一级"
+            },
+            "currentItem": {
+              "color": "hsl(var(--gray-title))",
+              "clickable": false
+            },
+            "separator": {
+              "icon": "ChevronRight",
+              "size": "20px",
+              "color": "hsl(var(--muted-foreground))"
+            },
+            "itemGap": "4px"
+          }
+        }
+      },
+      "breadcrumbVisualSpec": {
+        "description": "面包屑导航视觉规范。引用 design-tokens.json typographyTokens 和 colorMapping。",
+        "itemFontSize": "18px（与标题同字号）",
+        "itemFontWeight": "500 (medium)",
+        "parentItem": {
+          "color": "hsl(var(--gray-secondary))",
+          "hover": "hsl(var(--gray-primary))",
+          "clickable": true,
+          "note": "父级项本身即可点击返回"
+        },
+        "currentItem": {
+          "color": "hsl(var(--gray-title))",
+          "clickable": false,
+          "note": "最后一项不可点击（cursor-default）"
+        },
+        "separator": {
+          "icon": "ChevronRight",
+          "size": "20px (w-5 h-5)",
+          "color": "hsl(var(--muted-foreground))"
+        },
+        "itemGap": "4px (gap-1)",
+        "constraint": "有面包屑时禁止同时显示 showBack 返回箭头。面包屑父级项本身即可点击返回。"
+      },
+      "stickyBehavior": {
+        "description": "PageHeader 的 sticky 行为由白卡容器层包裹实现，不在 PageHeader 组件内部实现。",
+        "position": "PageHeader 必须在 Card 白卡容器内顶部，由 Card 的滚动容器包裹 sticky 外壳",
+        "wrapper": "sticky top-0 z-10 flex-shrink-0 (由 Card 滚动容器层包裹)",
+        "defaultBg": "transparent (默认态无底色)",
+        "scrollBg": "hsl(var(--card)) (scrollTop > 0 时切换为白色背景)",
+        "transition": "禁用（即时切换，避免半透明穿透）",
+        "width": "负 margin calc(var(--wc-pad-x) * -1) 撑满容器，抵消容器 padding"
+      },
+      "forbidden": [
+        "子页面内自建 header（破坏全局一致性）",
+        "PageHeader 放在 Card 白卡容器外部（必须在白卡内顶部渲染）",
+        "标题基础组件与面包屑基础组件同时出现（PageHeader 根据页面级别二选一）",
+        "跳过 PageHeader 直接使用标题基础组件或面包屑基础组件（必须由 PageHeader 统一管控）",
+        "默认态添加底色/下边框/阴影",
+        "页头下方添加分割线/hr/section-divider（组件间距通过 padding/margin 控制，不使用分隔元素）",
+        "style={{ fontSize: '18px' }} 等字面量写法",
+        "h-[64px] 等硬编码高度（Tailwind scale 已覆盖）",
+        "sticky 外壳加 transition（半透明阶段内容穿透）"
+      ],
+      "children": [
+        "Title",
+        "Description",
+        "ActionGroup",
+        "Breadcrumb"
+      ],
+      "props": {
+        "title": "string, 页面标题（L1 一级页面使用）",
+        "breadcrumbs": "array, 面包屑项 [{label, onClick}]（L2 二级页面使用）",
+        "description": "string, 页面描述（可选，默认不显示）",
+        "actions": "node, 右侧操作按钮组"
+      },
+      "relatedSpec": "完整约束见 pages/detail-page/SKILL.md §4.0",
+      "shadcnComponent": null
+    },
+    {
+      "name": "Pagination",
+      "nameZh": "分页控件",
+      "level": "MOLECULAR",
+      "universal": true,
+      "layer": "business",
+      "description": "分页控件，ListPage必需。默认每页10条（可选5/10/20/50），显示\"共N条\"。",
+      "children": [],
+      "props": {
+        "defaultPageSize": "number, 默认10",
+        "pageSizeOptions": [
+          "5",
+          "10",
+          "20",
+          "50"
+        ],
+        "showTotal": "boolean, 显示\"共N条\"",
+        "showSizeChanger": "boolean, 显示每页条数选择器"
+      },
+      "shadcnComponent": "Pagination"
+    },
+    {
+      "name": "Dialog",
+      "nameZh": "弹窗/确认框",
+      "level": "ORGANISM",
+      "universal": true,
+      "layer": "business",
+      "description": "弹窗/确认框，所有页面可选。用于删除确认、二次确认、表单弹窗。由全局状态管理，不作为页面结构嵌套。",
+      "children": [],
+      "props": {
+        "title": "string, 弹窗标题",
+        "visible": "boolean, 是否可见",
+        "maskClosable": "boolean, 点击遮罩是否关闭",
+        "footer": "array, 底部按钮数组"
+      },
+      "shadcnComponent": "Dialog",
+      "shadcnRef": "boundaries.md(C2), rules/styling.json(S7)"
+    },
+    {
+      "name": "Sheet",
+      "nameZh": "侧滑面板",
+      "level": "ORGANISM",
+      "universal": true,
+      "layer": "business",
+      "description": "侧滑面板，所有页面可选。用于高级筛选、详情抽屉、表单抽屉。由全局状态管理。",
+      "children": [],
+      "props": {
+        "title": "string, 面板标题",
+        "visible": "boolean, 是否可见",
+        "placement": "\"right\" | \"left\" | \"top\" | \"bottom\"",
+        "width": "number, 默认320"
+      },
+      "shadcnComponent": "Sheet",
+      "shadcnRef": "boundaries.md(C2), rules/styling.json(S7)"
+    },
+    {
+      "name": "Button",
+      "nameZh": "按钮",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "按钮，所有页面通用。包含主按钮、默认按钮、文本按钮、链接按钮。实际实现使用 shadcn-Button (shadcn-Button)。",
+      "children": [],
+      "props": {
+        "type": "\"primary\" | \"default\" | \"text\" | \"link\"",
+        "text": "string, 按钮文字",
+        "icon": "string, 图标名称",
+        "disabled": "boolean, 是否禁用",
+        "loading": "boolean, 加载状态"
+      },
+      "shadcnComponent": "Button",
+      "shadcnRef": "boundaries.md(I1-I2,C4)"
+    },
+    {
+      "name": "Tag",
+      "nameZh": "标签",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "标签/状态标识，ListPage/DetailPage常用。用于状态、分类、标签展示。实际实现使用 shadcn-Badge (shadcn-Badge)。",
+      "children": [],
+      "props": {
+        "color": "string, 颜色",
+        "text": "string, 标签文字"
+      },
+      "shadcnComponent": "Badge",
+      "shadcnRef": "rules/styling.json(S8), boundaries.md(C12)"
+    },
+    {
+      "name": "Badge",
+      "nameZh": "徽章",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "徽章/状态指示，ListPage/DetailPage常用。用于运行状态、通知数量。",
+      "children": [],
+      "props": {
+        "status": "\"success\" | \"processing\" | \"error\" | \"default\" | \"warning\"",
+        "text": "string, 状态文字"
+      },
+      "shadcnComponent": "Badge",
+      "shadcnRef": "rules/styling.json(S8), boundaries.md(C12)"
+    },
+    {
+      "name": "Select",
+      "nameZh": "下拉选择器",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "下拉选择器，QueryFilter/Form通用。用于下拉选项、筛选条件。",
+      "children": [],
+      "props": {
+        "options": "array, 选项数组",
+        "placeholder": "string, 占位文字",
+        "mode": "\"single\" | \"multiple\" | \"tags\""
+      },
+      "shadcnComponent": "Select",
+      "shadcnRef": "boundaries.md(C1)"
+    },
+    {
+      "name": "Input",
+      "nameZh": "输入框",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "输入框，QueryFilter/Form通用。用于文本输入、搜索。",
+      "children": [],
+      "props": {
+        "placeholder": "string, 占位文字",
+        "type": "\"text\" | \"password\" | \"search\" | \"number\"",
+        "prefix": "string, 前缀图标",
+        "allowClear": "boolean, 允许清除"
+      },
+      "shadcnComponent": "Input",
+      "shadcnRef": "patterns/form-page.md §6.4 + boundaries.md(FF1-FF4)"
+    },
+    {
+      "name": "Tooltip",
+      "nameZh": "悬浮提示",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "悬浮提示，操作列通用。用于ID显示、长文本展开、操作说明。",
+      "children": [],
+      "props": {
+        "title": "string, 提示内容",
+        "placement": "\"top\" | \"bottom\" | \"left\" | \"right\""
+      },
+      "shadcnComponent": "Tooltip",
+      "shadcnRef": "rules/styling.json(S7)"
+    },
+    {
+      "name": "Separator",
+      "nameZh": "分割线",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "分割线，详情/表单通用。用于信息分组、区块分隔。实际实现使用 shadcn-Separator (shadcn-Separator)。",
+      "children": [],
+      "props": {
+        "type": "\"horizontal\" | \"vertical\"",
+        "variant": "\"line\" | \"dashed\""
+      },
+      "shadcnComponent": "Separator",
+      "shadcnRef": "boundaries.md(C10)"
+    },
+    {
+      "name": "Empty",
+      "nameZh": "空状态",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "空状态，ListPage/DetailPage边界。用于空数据、无权限、无关联数据。",
+      "children": [],
+      "props": {
+        "description": "string, 空状态描述",
+        "image": "string, 空状态图片",
+        "children": "node, 自定义操作按钮"
+      },
+      "shadcnComponent": "Empty",
+      "shadcnRef": "boundaries.md(C8)"
+    },
+    {
+      "name": "Spinner",
+      "nameZh": "加载状态",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "加载状态，所有页面边界。用于数据加载中、异步操作等待。实际实现使用 shadcn-Skeleton (shadcn-Skeleton)。",
+      "children": [],
+      "props": {
+        "spinning": "boolean, 是否加载",
+        "indicator": "node, 自定义指示器"
+      },
+      "shadcnComponent": "Skeleton",
+      "shadcnRef": "boundaries.md(C11)"
+    },
+    {
+      "name": "Alert",
+      "nameZh": "警告提示",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "警告提示，表单/操作前提示。用于危险操作预警、重要信息告知。",
+      "children": [],
+      "props": {
+        "type": "\"info\" | \"success\" | \"warning\" | \"error\"",
+        "message": "string, 提示消息",
+        "showIcon": "boolean, 显示图标",
+        "closable": "boolean, 允许关闭"
+      },
+      "shadcnComponent": "Alert",
+      "shadcnRef": "boundaries.md(C7)"
+    },
+    {
+      "name": "Sonner",
+      "nameZh": "全局提示",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "全局提示，操作反馈通用。用于成功/失败/警告/信息toast提示。实际实现使用 shadcn-Sonner (shadcn-Sonner/sonner)。",
+      "children": [],
+      "props": {
+        "type": "\"success\" | \"error\" | \"warning\" | \"info\"",
+        "content": "string, 提示内容",
+        "duration": "number, 显示时长(ms), 默认3000"
+      },
+      "shadcnComponent": "Sonner",
+      "shadcnRef": "boundaries.md(C9)"
+    },
+    {
+      "name": "SearchCombo",
+      "nameZh": "搜索组合",
+      "level": "ORGANISM",
+      "universal": false,
+      "layer": "business",
+      "description": "下拉维度选择 + 文本输入的组合搜索控件，位于 ActionToolbar 右侧。容器式 border，内部 select + divider + input + button。",
+      "children": [
+        "SearchDimension",
+        "SearchDivider",
+        "SearchInput",
+        "SearchButton"
+      ],
+      "props": {
+        "dimensions": "array, 搜索维度选项",
+        "defaultDimension": "string, 默认维度",
+        "placeholder": "string, 输入框占位符"
+      },
+      "specRef": "pages/list-page/_shared/search-combo-spec.md"
+    },
+    {
+      "name": "ContextSwitcher",
+      "nameZh": "全局上下文切换器",
+      "level": "ORGANISM",
+      "universal": false,
+      "layer": "business",
+      "description": "全局上下文切换器（组织/资源集），位于 TopNavigation 右侧（用户菜单前）。切换后影响全局数据范围。",
+      "children": [],
+      "props": {
+        "type": "\"organization\" | \"resourceSet\"",
+        "value": "string, 当前选中项",
+        "placeholder": "string, 未选中时占位文本",
+        "loading": "boolean, 加载中状态",
+        "onChange": "(value: string) => void"
+      },
+      "placement": "TopNavigation 右侧，用户图标前，与用户图标间距 16px"
+    },
+    {
+      "name": "Steps",
+      "nameZh": "步骤条",
+      "level": "MOLECULAR",
+      "universal": false,
+      "layer": "business",
+      "description": "流程步骤条组件，用于多步骤向导/表单的进度指示。WizardPage 核心组件。",
+      "children": [
+        "StepIndicator",
+        "StepLabel",
+        "StepConnector"
+      ],
+      "props": {
+        "current": "number, 当前步骤（从1开始）",
+        "total": "number, 总步数",
+        "orientation": "horizontal | vertical",
+        "status": "array, 每步状态 [inactive, active, completed]"
+      },
+      "componentRef": "rules/component-specs.json C27-Steps",
+      "relatedPageType": "WizardPage",
+      "examples": "page-rule-examples/wizard-form-page.html",
+      "shadcnComponent": "Steps"
+    },
+    {
+      "name": "ItemCard",
+      "nameZh": "业务卡片",
+      "aliases": [
+        "业务卡片",
+        "卡片视图列表项"
+      ],
+      "level": "ORGANISM",
+      "universal": false,
+      "layer": "business",
+      "description": "业务卡片组件（别名：业务卡片 / 卡片视图列表项）— 卡片视图列表的单条数据项。支持三种信息密度（minimal/standard/complex）× 两种图标变体（avatar/tile）。与白卡容器 ContentCard(shadcn-Card) 严格区分（参见 card-list.md §0 术语区分）。",
+      "children": [
+        "CardTitleRow",
+        "CardDescriptionRow",
+        "CardFieldRow",
+        "CardSupplementaryRow",
+        "CardActionBar(CardActionBar)"
+      ],
+      "props": {
+        "density": "'minimal' | 'standard' | 'complex'，信息密度",
+        "iconStyle": "'avatar' | 'tile'，标题区图标变体",
+        "data": "object, 数据项（与 products/{产品}/cards.json slot 映射）",
+        "actions": "Array<{ label, onClick, destructive? }>"
+      },
+      "specRef": "pages/list-page/patterns/card-list.md §9.1",
+      "relatedPageType": "ListPage(pure-card / standard-card / view-toggle), Dashboard, Workspace, Overview",
+      "shadcnComponent": "Card",
+      "shadcnRef": "boundaries.md(C3), rules/styling.json(S1)"
+    },
+    {
+      "name": "CardGrid",
+      "nameZh": "卡片网格",
+      "level": "ORGANISM",
+      "universal": false,
+      "layer": "business",
+      "description": "卡片网格容器 — 承载多个 ItemCard，使用 CSS Grid auto-fill + minmax 自动响应式列数。minWidth 必须使用 design-token：var(--card-grid-min-compact|standard|feature|comfortable)，禁止硬编码。preset 仅决定列宽，不耦合分页/排序等列表行为。",
+      "children": [
+        "ItemCard(ItemCard)"
+      ],
+      "props": {
+        "preset": "'compact' | 'standard' | 'feature' | 'comfortable'，列宽预设（v7.2 重命名）",
+        "minWidth": "string, 最小列宽 token（var(--card-grid-min-*)），由 preset 自动映射",
+        "gap": "number, 卡片间距，默认 16",
+        "alignContent": "'start'，防止卡片拉伸"
+      },
+      "specRef": "pages/list-page/patterns/card-list.md §9.2",
+      "shadcnComponent": null
+    },
+    {
+      "name": "CardActionBar",
+      "nameZh": "卡片操作栏",
+      "level": "MOLECULAR",
+      "universal": false,
+      "layer": "business",
+      "description": "ItemCard 底部的操作栏 — 收敛为三种模式：hover-slidebar（白底 + translateY 滑入，standard/complex 默认）、hover-fade（visibility/opacity 淡入，minimal 默认）、always-visible（始终显示，可选）。v7.3.1 背景从主色底调为白底（var(--card)），文字为主要文字色（var(--gray-primary)），destructive 仅文字使用 var(--destructive)。模式由 ItemCard.density 自动映射，亦可由 pattern 显式覆盖。",
+      "children": [],
+      "props": {
+        "actions": "Array<{ label, onClick, destructive? }>",
+        "mode": "'hover-slidebar' | 'hover-fade' | 'always-visible'（v7.2 三态收敛）",
+        "rows": "1 | 2，complex 模式可分行"
+      },
+      "specRef": "pages/list-page/patterns/card-list.md §9.3",
+      "shadcnComponent": null
+    },
+    {
+      "name": "DescriptionList",
+      "nameZh": "描述列表",
+      "level": "ORGANISM",
+      "universal": false,
+      "layer": "business",
+      "description": "详情页核心展示组件 — 键值对列表容器，支持 2/3/4 列布局，响应式降级（768px 以下降为 2 列）。内部按 ListSection 分组，分组间通过 border-top 分隔。label 使用 var(--gray-secondary) 色值，value 使用 var(--gray-primary)。",
+      "children": [
+        "ListSection",
+        "DescriptionItem(DescriptionItem)"
+      ],
+      "props": {
+        "columns": "2 | 3 | 4，列数，默认 2",
+        "labelWidth": "string, label 固定宽度，默认 auto（由最长 label 决定）",
+        "layout": "'horizontal' | 'vertical'，label 与 value 的排列方向",
+        "bordered": "boolean, 是否显示边框网格，默认 false"
+      },
+      "specRef": "pages/detail-page/SKILL.md §5",
+      "shadcnComponent": null
+    },
+    {
+      "name": "DescriptionItem",
+      "nameZh": "描述项",
+      "level": "ATOMIC",
+      "universal": false,
+      "layer": "business",
+      "description": "DescriptionList 内的最小展示单元 — 单个键值对。支持 6 种交互模式：默认只读、可复制（点击 icon 复制到剪贴板）、可编辑（点击切换为 inline Input）、链接跳转（蓝色 + 下划线）、状态展示（Badge 颜色）、悬浮提示（Tooltip 展开长文本）。",
+      "children": [],
+      "props": {
+        "label": "string, 字段名",
+        "value": "string | ReactNode, 字段值",
+        "copyable": "boolean, 可复制",
+        "editable": "boolean, 可行内编辑",
+        "link": "string, 点击跳转 URL",
+        "tooltip": "string, 悬浮提示完整内容",
+        "span": "number, 占据列数（用于跨列展示）"
+      },
+      "specRef": "pages/detail-page/SKILL.md §6.1",
+      "shadcnComponent": null
+    },
+    {
+      "name": "InfoCard",
+      "nameZh": "摘要信息卡",
+      "level": "ORGANISM",
+      "universal": false,
+      "layer": "business",
+      "description": "详情页顶部摘要卡片 — 展示资源核心指标/状态的快速概览区。与 ContentCard(shadcn-Card) 的区别：InfoCard 是语义化业务组件（承载摘要信息），ContentCard 是通用白卡容器（承载页面内容）。内部可嵌套 DescriptionList(DescriptionList) 或 ChartPanel(ChartPanel)（摘要区监控图表）。【v7.6 表面规则】两种实现模式：（A）独立 Card 容器模式：跟随主卡 ContentCard—border: none + box-shadow: var(--shadow-sm) + border-radius: var(--radius-lg) + background: hsl(var(--card))；（B）嵌入主卡内的分组区块模式：仅采用 padding + border-bottom 分隔，不设置 box-shadow / border-radius / background。详见 pages/detail-page/SKILL.md §6.5.3。",
+      "children": [
+        "DescriptionList(DescriptionList)",
+        "ChartPanel(ChartPanel)"
+      ],
+      "props": {
+        "title": "string, 卡片标题（如'基本信息'/'监控'）",
+        "collapsible": "boolean, 是否支持折叠，默认 false",
+        "defaultCollapsed": "boolean, 默认是否折叠"
+      },
+      "specRef": "pages/detail-page/SKILL.md §4",
+      "shadcnComponent": "Card",
+      "shadcnRef": "boundaries.md(C3), rules/styling.json(S1)"
+    },
+    {
+      "name": "CopyableText",
+      "nameZh": "可复制文本",
+      "level": "ATOMIC",
+      "universal": true,
+      "layer": "business",
+      "description": "可复制文本原子组件 — 文本内容 + 末尾复制图标，整体点击即复制到剪贴板并触发 Sonner 反馈。可裸用于表格单元格、DescriptionItem 值位、面板任意 ID/IP/资源名展示。区别于 DescriptionItem(DescriptionItem) 的 mode=copyable：CopyableText 是更细粒度的原子，可在任何上下文复用，不依赖 DescriptionList 父容器。",
+      "children": [],
+      "props": {
+        "value": "string, 实际复制的文本内容",
+        "display": "string, 可选 — 自定义展示文本（默认 = value）",
+        "onCopySuccess": "function, 复制成功回调（可选）"
+      },
+      "visualSpec": {
+        "layout": "inline-flex; gap: 4px; align-items: center",
+        "icon": "Copy（lucide）, size: 14px (ic-sm)",
+        "iconColor": "hsl(var(--gray-tertiary))",
+        "iconHoverColor": "hsl(var(--gray-primary))",
+        "cursor": "pointer",
+        "feedback": "Sonner '已复制' 1500ms 自动消失（使用 sonner）"
+      },
+      "forbidden": [
+        "硬编码图标颜色（必须用 --gray-tertiary token）",
+        "省略 Sonner 反馈（无反馈用户无法确认是否复制成功）",
+        "在 DescriptionItem 内重复套 CopyableText（应直接用 DescriptionItem.mode=copyable）"
+      ],
+      "specRef": "pages/detail-page/SKILL.md",
+      "shadcnComponent": null
+    },
+    {
+      "name": "StatusBadge",
+      "nameZh": "状态徽章（带圆点）",
+      "level": "MOLECULAR",
+      "universal": true,
+      "layer": "business",
+      "description": "带前置圆点的状态徽章 — 用于资源运行态、开关态等强语义状态展示。区别于通用 Badge(shadcn-Card/shadcn-Badge)：StatusBadge 强制带前置 dot，颜色语义与 status 一一映射，不接受自由色值。基于 shadcn-Badge(shadcn-Badge) 扩展。",
+      "children": [],
+      "props": {
+        "status": "'success' | 'warning' | 'error' | 'info' | 'neutral'",
+        "label": "string, 状态文字（如'运行中'/'已停止'/'已开启'）"
+      },
+      "visualSpec": {
+        "dotSize": "6px",
+        "dotMarginRight": "6px",
+        "colorMap": {
+          "success": "hsl(var(--success))",
+          "warning": "hsl(var(--warning))",
+          "error": "hsl(var(--destructive))",
+          "info": "hsl(var(--info))",
+          "neutral": "hsl(var(--gray-tertiary))"
+        },
+        "badgeBg": "语义色 / 8 透明度（如 success bg = hsl(var(--success) / 0.08)）",
+        "badgeText": "语义色实色"
+      },
+      "forbidden": [
+        "使用任意自由色值（必须从 status 枚举映射）",
+        "省略 dot（无 dot 应使用 Badge 组件）"
+      ],
+      "specRef": "pages/detail-page/SKILL.md",
+      "shadcnComponent": "Badge",
+      "shadcnRef": "rules/styling.json(S8), boundaries.md(C12)"
+    },
+    {
+      "name": "StatCard",
+      "nameZh": "统计卡（三段式）",
+      "level": "ORGANISM",
+      "universal": true,
+      "layer": "business",
+      "description": "统计卡片 — 三段式 label / value / subtitle 展示单一指标。用于详情页概览区、Dashboard、模型 API 概览、消费者概览等聚合数值展示场景。表面规范跟随 v7.6 ContentCard：border: none + box-shadow: var(--shadow-sm) + border-radius: var(--radius-lg) + background: hsl(var(--card))。多张 StatCard 必须放在 OverviewStatGrid(OverviewStatGrid) 内。",
+      "children": [],
+      "props": {
+        "label": "string, 顶部指标名（如'MCP 服务总数'）",
+        "value": "string | number, 中部主指标值",
+        "subtitle": "string, 底部副标题（如英文名 'MCP Services'）",
+        "trend": "object, 可选 — 趋势 { direction: 'up'|'down', delta: string }",
+        "onClick": "function, 可选 — 点击跳转到对应资源列表"
+      },
+      "visualSpec": {
+        "padding": "16px 20px",
+        "labelFontSize": "var(--font-size-base)",
+        "labelColor": "hsl(var(--gray-secondary))",
+        "valueFontSize": "28px",
+        "valueFontWeight": "600 (semibold)",
+        "valueColor": "hsl(var(--gray-title))",
+        "subtitleFontSize": "var(--font-size-sm)",
+        "subtitleColor": "hsl(var(--gray-tertiary))",
+        "verticalGap": "4px"
+      },
+      "forbidden": [
+        "添加 border（v7.6 surface 禁止 border）",
+        "使用 var(--shadow-md) 或更深阴影（仅 --shadow-sm）",
+        "硬编码 value 字号（除 28px 外的尺寸需先扩展 design-tokens）"
+      ],
+      "specRef": "pages/detail-page/SKILL.md",
+      "shadcnComponent": "Card",
+      "shadcnRef": "boundaries.md(C3), rules/styling.json(S1)"
+    },
+    {
+      "name": "OverviewStatGrid",
+      "nameZh": "统计卡网格容器",
+      "level": "MOLECULAR",
+      "universal": true,
+      "layer": "business",
+      "description": "StatCard(StatCard) 的响应式网格容器 — 自动按 columns 配置排列多张统计卡。常见配置：4 列（标准）/ 6 列（密集）/ auto-fill minmax(180px, 1fr)（自适应）。",
+      "children": [
+        "StatCard(StatCard)"
+      ],
+      "props": {
+        "columns": "number | 'auto', 列数（默认 4）；'auto' 走 minmax 策略",
+        "gap": "string, 卡片间距（默认 var(--card-padding-x) = 20px）",
+        "minItemWidth": "string, columns='auto' 时的最小宽度（默认 180px）"
+      },
+      "visualSpec": {
+        "display": "grid",
+        "gridTemplateColumns": "repeat(var(--columns), 1fr) 或 repeat(auto-fill, minmax(var(--min-item-width), 1fr))",
+        "gap": "20px"
+      },
+      "forbidden": [
+        "使用 flex-wrap 实现（无法保证等高等宽）",
+        "在 StatCard 之间插入分割线"
+      ],
+      "specRef": "pages/detail-page/SKILL.md",
+      "shadcnComponent": null
+    },
+    {
+      "name": "ParameterTable",
+      "nameZh": "参数表格",
+      "level": "ORGANISM",
+      "universal": true,
+      "layer": "business",
+      "description": "API 参数结构化表格 — 展示请求/响应/Header 参数，支持嵌套展开（最多 3 级，每级缩进 24px），按 type 着色（string/number/boolean/object/array），必填标红。参数 > 30 时默认折叠选填参数 + '展示全部'。是 API 文档详情页核心组件。",
+      "children": [],
+      "props": {
+        "variant": "'request' | 'response' | 'header'，决定列集（请求/Header 含'必填'，响应不含）",
+        "data": "Array<Param>，参数树形数据（含 name/type/required/description/children）",
+        "maxNestLevel": "number，默认 3，最大嵌套层级",
+        "collapseOptional": "boolean，参数 > 30 时是否折叠选填"
+      },
+      "componentRef": "rules/component-specs.json C30-ParameterTable",
+      "specRef": "pages/detail-page/patterns/api-doc-detail.md",
+      "relatedPageType": "DetailPage(api-doc)",
+      "shadcnComponent": null
+    },
+    {
+      "name": "MetricCard",
+      "nameZh": "指标卡",
+      "level": "MOLECULAR",
+      "universal": true,
+      "layer": "business",
+      "description": "单指标数值展示卡 — 标题 + 数值 + 单位 + 趋势箭头，可选底部 sparkline 迷你图。高度 96px，padding 16px 20px，背景 hsl(var(--gray-muted))，圆角 var(--radius-md)。横排默认 grid 4 列 gap 12px，≤1200px 降为 2 列，≤768px 降为 1 列。监控页/Dashboard/概览页通用。",
+      "children": [],
+      "props": {
+        "title": "string，指标名（如'请求总量'/'成功率'）",
+        "value": "string | number，主数值",
+        "unit": "string，单位（紧跟数值）",
+        "trend": "{ direction: 'up' | 'down' | 'flat', delta: string }",
+        "sparkline": "number[]，可选 — 底部迷你趋势图数据",
+        "variant": "'default' | 'with-sparkline' | 'compact'"
+      },
+      "componentRef": "rules/component-specs.json C31-MetricCard",
+      "specRef": "pages/detail-page/patterns/monitor-detail.md",
+      "relatedPageType": "DetailPage(monitor), Dashboard, Overview",
+      "shadcnComponent": null
+    },
+    {
+      "name": "ChartPanel",
+      "nameZh": "图表面板",
+      "level": "ORGANISM",
+      "universal": true,
+      "layer": "business",
+      "description": "图表容器面板 — 封装 shadcn-Chart(shadcn-Chart)/Recharts，支持折线/柱状/面积图。全宽单图高度 280px，Grid 内 220px。标题栏 14px/500 + 右侧操作（导出/全屏）。网格线虚线、坐标轴文字 11px。Grid 布局默认 2 列 gap 16px。是 InfoCard 摘要区监控图、监控详情页 ChartPanel Grid、Dashboard 图表区的统一实现。",
+      "children": [
+        "ChartTitle",
+        "ChartLegend",
+        "ChartBody"
+      ],
+      "props": {
+        "variant": "'line' | 'bar' | 'area'",
+        "data": "Array<DataPoint>",
+        "size": "'full' | 'grid'，决定高度（280px / 220px）",
+        "loading": "boolean，骨架屏占位",
+        "empty": "boolean，居中'暂无数据'+图表图标"
+      },
+      "componentRef": "rules/component-specs.json C32-ChartPanel",
+      "specRef": "pages/detail-page/patterns/monitor-detail.md",
+      "relatedPageType": "DetailPage(monitor), DetailPage(resource).InfoCard, Dashboard",
+      "shadcnComponent": null
+    },
+    {
+      "name": "AlertList",
+      "nameZh": "告警列表",
+      "level": "ORGANISM",
+      "universal": true,
+      "layer": "business",
+      "description": "告警事件列表 — 按严重度（Critical=红/Warning=橙/Info=蓝）分级展示，条目最小高度 56px，左侧 20px 圆点 + 标题 + 时间 + 描述（最多 2 行）。条目间用 border-bottom 分隔，无间距。右侧 hover 显示'确认'按钮（Ghost）。空态展示'暂无告警，系统运行正常 ✓'。",
+      "children": [
+        "AlertItem"
+      ],
+      "props": {
+        "items": "Array<{ id, severity: 'critical'|'warning'|'info', title, timestamp, description }>",
+        "variant": "'default' | 'compact'，紧凑模式隐藏描述行（高度 40px）",
+        "onAcknowledge": "(id) => void，点击确认按钮回调"
+      },
+      "componentRef": "rules/component-specs.json C33-AlertList",
+      "specRef": "pages/detail-page/patterns/monitor-detail.md",
+      "relatedPageType": "DetailPage(monitor), Dashboard",
+      "shadcnComponent": null
+    },
+    {
+      "name": "TimeRangeSelector",
+      "nameZh": "时间范围选择器",
+      "level": "MOLECULAR",
+      "universal": true,
+      "layer": "business",
+      "description": "时间范围快捷选择 — SegmentedControl 样式连续按钮组，预设 1h/6h/24h/7d/30d，高度 32px，选中态背景 hsl(var(--primary)) 文字白色。最右侧可选日历图标，点击弹出 DateRangePicker 自定义范围。位置：PageHeader 右侧，与刷新按钮同行。切换时触发全局数据刷新。",
+      "children": [],
+      "props": {
+        "value": "string，当前选中预设（如 '24h'）或 { start, end } 自定义范围",
+        "presets": "string[]，预设列表，默认 ['1h','6h','24h','7d','30d']",
+        "withCustom": "boolean，是否显示自定义范围日历图标",
+        "onChange": "(value) => void"
+      },
+      "componentRef": "rules/component-specs.json C34-TimeRangeSelector",
+      "specRef": "pages/detail-page/patterns/monitor-detail.md",
+      "relatedPageType": "DetailPage(monitor), Dashboard",
+      "shadcnComponent": "ToggleGroup",
+      "shadcnRef": "patterns/form-page.md §6.4(F4)"
+    },
+    {
+      "name": "CodeBlock",
+      "nameZh": "代码块",
+      "level": "ORGANISM",
+      "universal": true,
+      "layer": "business",
+      "description": "代码/配置片段只读展示 — 等宽字体 13px/1.6（SF Mono/Fira Code），背景 hsl(var(--gray-muted))，圆角 var(--radius-md)，padding 16px。最小高度 120px，最大 480px。支持行号（宽 40px）、复制按钮（右上角 hover 显示）、collapsible 折叠（超长内容渐变遮罩 + '展开全部(N行)'）、multi-language（顶部语言 Tab）。API 文档详情页核心组件，也用于任何代码/配置/日志展示场景。",
+      "children": [],
+      "props": {
+        "language": "string，语法高亮语言（json/yaml/javascript/curl/...）",
+        "code": "string，代码内容",
+        "lineNumbers": "boolean，是否显示行号",
+        "copyable": "boolean，是否显示复制按钮，默认 true",
+        "variant": "'default' | 'collapsible' | 'multi-language'",
+        "maxLines": "number，collapsible 模式下折叠阈值"
+      },
+      "componentRef": "rules/component-specs.json C26-CodeBlock",
+      "specRef": "pages/detail-page/patterns/api-doc-detail.md",
+      "relatedPageType": "DetailPage(api-doc), DetailPage(resource), Settings",
+      "shadcnComponent": null
+    },
+    {
+      "name": "ConfigDiff",
+      "nameZh": "配置对比",
+      "level": "ORGANISM",
+      "universal": true,
+      "layer": "business",
+      "description": "配置版本双栏对比展示 — 标记新增（绿底 hsl(152 82% 96%)）/删除（红底 hsl(0 72% 96%)）/未变行。最大高度 600px，等宽字体 13px/1.6。split 双栏并排（默认，左旧右新各 50%，同步滚动）/ inline 单栏合并标记两种模式。768px 自动切换为 inline。底部统计 '+N行 / -M行'。",
+      "children": [
+        "DiffHeader",
+        "DiffPane",
+        "DiffStats"
+      ],
+      "props": {
+        "oldValue": "string，旧版本代码/配置",
+        "newValue": "string，新版本代码/配置",
+        "language": "string，语法高亮语言",
+        "mode": "'split' | 'inline'，默认 'split'",
+        "syncScroll": "boolean，split 模式下双栏同步滚动，默认 true"
+      },
+      "componentRef": "rules/component-specs.json C27-ConfigDiff",
+      "specRef": "pages/detail-page/patterns/resource-detail.md",
+      "relatedPageType": "DetailPage(resource), DetailPage(comparison)",
+      "shadcnComponent": null
+    },
+    {
+      "name": "VersionHistory",
+      "nameZh": "版本历史",
+      "level": "ORGANISM",
+      "universal": true,
+      "layer": "business",
+      "description": "版本变更时间线 — 展示版本记录与回滚操作。条目最小高度 56px（紧凑模式 40px），左侧 8px 圆点（当前版本 primary 色 / 历史版本 gray-line 色）+ 1px 连接线。条目含版本号(14px/500) + 时间戳(12px/muted) + 变更摘要(12px)。hover 显示'回滚到此版本'按钮（Ghost，触发 Dialog 确认）。当前版本带 Badge'当前'(primary)。点击条目展开变更详情或触发版本对比。",
+      "children": [
+        "VersionItem",
+        "VersionDot",
+        "VersionLine"
+      ],
+      "props": {
+        "versions": "Array<{ id, label, timestamp, author, summary, isCurrent }>",
+        "variant": "'default' | 'compact'，紧凑模式隐藏变更摘要",
+        "onSelect": "(id) => void，点击条目回调",
+        "onRollback": "(id) => void，回滚按钮回调（应触发 Dialog 二次确认）"
+      },
+      "componentRef": "rules/component-specs.json C28-VersionHistory",
+      "specRef": "pages/detail-page/patterns/resource-detail.md",
+      "relatedPageType": "DetailPage(resource), DetailPage(comparison)",
+      "shadcnComponent": null
+    },
+    {
+      "name": "ApiEndpoint",
+      "nameZh": "API 端点卡",
+      "level": "MOLECULAR",
+      "universal": true,
+      "layer": "business",
+      "description": "API 端点信息概览卡 — 高度 48px，padding 0 16px，背景 hsl(var(--gray-muted))，圆角 var(--radius-md)。HTTP 方法着色（GET=蓝/POST=绿/PUT=橙/DELETE=红/PATCH=紫，12px/600）+ 等宽字体路径(14px/500) + 状态标签（published=success / draft=muted / deprecated=destructive）。路径右侧 hover 显示复制图标（复制完整 URL）。可选 with-base-url 变体显示 baseUrl 灰色前缀 + path 主色。是 API 文档详情页必需组件。",
+      "children": [],
+      "props": {
+        "method": "'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'",
+        "path": "string，API 路径",
+        "baseUrl": "string，可选 — 基础 URL 前缀",
+        "status": "'published' | 'draft' | 'deprecated'",
+        "copyable": "boolean，是否显示复制按钮，默认 true",
+        "onClick": "() => void，可选 — 跳转到 API 调试"
+      },
+      "componentRef": "rules/component-specs.json C29-ApiEndpoint",
+      "specRef": "pages/detail-page/patterns/api-doc-detail.md",
+      "relatedPageType": "DetailPage(api-doc)",
+      "shadcnComponent": null
+    }
+  ]
+}