@teamix-evo/skills 0.12.1 → 0.13.0

package/src/teamix-evo-design-opentrek/pages/list-page/_shared/item-card-spec.md

@@ -1,5 +1,8 @@
 # 业务卡片三件套完整规格（ItemCard / CardGrid / CardActionBar）
 
+> **实物组件**: `@teamix-evo/biz-ui` → [`ListCard`](../../../../../../biz-ui/variants/opentrek/list-card/list-card.tsx)
+> AI 生成页面时**必须优先使用 ListCard 组件**（P0 业务组件），仅当 ListCard props 无法覆盖需求时才按本 spec 用原子件拼装（P2 兜底）。
+
 > 本文件自 v7.3 起从 `rules/card-component.json` 下沉至此。`common-components.json` 中 ItemCard/CardGrid/CardActionBar 的 `specRef` 指向本文件。
 > 三件套用于列表页卡片视图；未来如 Dashboard / Workspace / Overview 需要复用，可直接引用本文件。
 > **规范唯一来源** — 禁止在其他文件中重复定义卡片三件套的 variants/slots/states/tokens。
@@ -18,14 +21,14 @@
 | 维度 | 选项 | 默认 | 说明 |
 |------|------|------|------|
 | density | minimal / standard / complex | standard | 信息密度，按选型矩阵决定 |
-| iconStyle | avatar / tile | avatar | avatar=32×32 圆角（pure-card / standard-card）；tile=40×40 大方块（view-toggle） |
+| iconStyle | avatar / tile | avatar | avatar=28×28 圆角（pure-card / standard-card）；tile=40×40 大方块（view-toggle） |
 | titleFontSize | 14px / 16px | — | iconStyle=avatar → 14px/500；iconStyle=tile → 16px/500 |
 
 **iconStyle.avatar 详细**：
-- size: 32×32（常规/复杂）/ 24×24（极简）
-- shape: 圆角矩形 `var(--input-radius)`
+- size: 28×28（常规/复杂）/ 24×24（极简）
+- shape: 圆角矩形 `var(--radius-md)` (8px)
 - fallback: 首字母色块 + Glossy 光泽（见 §1.6）
-- **UI 组件库引用**: `components/avatar` → `Avatar` (size='default'=32px / size='sm'=24px) + `AvatarFallback`
+- **UI 组件库引用**: `components/avatar` → `Avatar` (size='default'=28px / size='sm'=24px) + `AvatarFallback`
 
 **iconStyle.tile 详细**：
 - size: 40×40
@@ -38,15 +41,15 @@
 | Slot | minimal | standard | complex | 元素与样式 | UI 组件库引用 |
 |------|---------|----------|---------|-----------|--------------|
 | **CardTitleRow** | 必需 | 必需 | 必需 | icon + title + [badge] + [statusDot] | `Avatar` + `CardTitle` + `Badge` / `Tag` |
-| **CardDescriptionRow** | 禁止 | 必需 | 必需 | text（standard: 12px/lineClamp 1；complex: 14px/lineClamp 2）；color: `var(--gray-tertiary)` | `CardDescription` |
+| **CardDescriptionRow** | 禁止 | 必需 | 必需 | text（standard: 12px/lineClamp 1；complex: 14px/lineClamp 2）；color: `var(--muted-foreground)` | `CardDescription` |
 | **CardFieldRow** | 禁止 | 0-2 行（可选） | 2-4 行（可选） | fieldIcon(12×12) + fieldLabel(12px) + fieldValue(14px standard / 12px complex) | 内联 span 元素 |
 | **CardSupplementaryRow** | 1 行（必需） | 0-1 行（可选） | 1 行（必需） | 元信息：创建人/时间/地域；icon(12×12) + label(12px) + value(12px) | 内联 span + `Tooltip` |
 | **CardActionBar** | 必需 | 必需 | 必需 | 通过 slot 引用（见 §3） | 组合组件 |
 
 **CardTitleRow 元素**：
-- icon: minimal=24×24；standard=Avatar 32×32(avatar) / Icon 40×40(tile)；complex=Avatar 32×32；borderRadius `var(--input-radius)`；flex-shrink 0
+- icon: minimal=24×24；standard=Avatar 28×28(avatar) / Icon 40×40(tile)；complex=Avatar 28×28；borderRadius `var(--radius-md)`；flex-shrink 0
   - **UI 组件库引用**: `components/avatar` → `Avatar` + `AvatarFallback`
-- title: 由 variants.titleFontSize 决定；font-weight 500；color `var(--gray-primary)`；单行 truncate
+- title: 由 variants.titleFontSize 决定；font-weight 500；color `var(--foreground)`；单行 truncate
   - **UI 组件库引用**: `components/card` → `CardTitle`
 - **subName**（可选）: 12px / 400 / `var(--gray-tertiary)`；margin-top 2px 紧贴 title 下方；用于英文标识（如 "code-generator"/"self-improvement"）
   - **UI 组件库引用**: 原生 `<span>` 或 `components/typography` → `Text`
@@ -74,8 +77,8 @@
 **CardFieldRow 元素与行内状态指示器**：
 - fieldIcon（可选）: 12-14px inline icon；color `var(--gray-tertiary)`
   - **UI 组件库引用**: lucide-react 图标（12px size）
-- fieldLabel: 12px / `var(--gray-tertiary)` / 后跟中文冒号 "："
-- fieldValue: 12px / `var(--gray-secondary)`（纯文本）
+- fieldLabel: 12px / `var(--muted-foreground)` / 后跟中文冒号 "："
+- fieldValue: 12px / `var(--muted-foreground)`（纯文本）
 - **inlineStatus**（可选，替代 fieldValue）: 带色彩和图标的状态值
   - **UI 组件库引用**: `components/tag` → `Tag` (variant='borderless', size='sm') 或内联 span
 
@@ -92,8 +95,8 @@
 ```css
 /* CardFieldRow inline-status */
 .field-row { display: flex; align-items: center; gap: 4px; font-size: 12px; }
-.field-row__label { color: var(--gray-tertiary); white-space: nowrap; }
-.field-row__value { color: var(--gray-secondary); }
+.field-row__label { color: var(--muted-foreground); white-space: nowrap; }
+.field-row__value { color: var(--muted-foreground); }
 .field-row__status { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
 .field-row__status--success { color: var(--success); }
 .field-row__status--warning { color: var(--warning); }
@@ -118,20 +121,21 @@
 
 ### 1.5 states（卡片整体状态）
 
+> ⚠️ 已与 `ListCard` 实物组件对齐（v7.5+），hover 为渐变边框非 breathing 动画。
+
 | state | border | background | shadow | actionBar |
 |-------|--------|------------|--------|-----------|
-| default | 1px solid `var(--gray-border)` | `var(--card)` | none | 由 actionBarMode 决定：hover-* 隐藏 / always-visible 常驻 |
-| hover | 1px solid `var(--primary)` + breathing | `var(--card)` | `var(--shadow-sm)` | 可见 |
-| focus | 2px solid `var(--primary)` | `var(--card)` | `var(--shadow-sm)` | 可见 |
+| idle | 1px solid `var(--gray-border)` | `var(--card)` | none | 由 footerMode 决定 |
+| hovered | 渐变 primary 边框 `bg-gradient-to-r from-primary/60 to-primary` + padding-border 技巧 | `var(--card)` | `shadow-[0_4px_8px_0_rgba(0,0,0,0.08)]` | 可见 |
+| selected | outline 2px solid `var(--primary)` | `var(--card)` | none | 隐藏 |
 | disabled | 1px solid `var(--gray-border)` | `var(--gray-fill)` | none | 隐藏 |
-| **selected** | **2px solid `var(--primary)`** | **`var(--card)`** | **none** | 隐藏 |
 
-**hover.breathingBorder CSS**：
-```css
-@keyframes breathing { 0%,100% { opacity:0.5 } 50% { opacity:1 } }
-.card-hover-breathing { animation: breathing 2s ease-in-out infinite; }
+**hovered 边框实现**（ListCard 渐变边框方案）：
+```html
+<div class="rounded-xl bg-gradient-to-r from-primary/60 to-primary p-px">
+  <div class="rounded-[calc(var(--radius-xl)-1px)] bg-card ...">内容</div>
+</div>
 ```
-应用在 hover 状态下的 border。
 
 **clickBehavior**：
 - 卡片主体点击：跳转 DetailPage 或进入编辑
@@ -149,11 +153,11 @@
 3. avatar 字段为空 → `name.charAt(0)` hash 到预设色 + 首字母 → 使用 `AvatarFallback`
 
 **blockStyle**：
-- size: 32×32
-- borderRadius: `var(--input-radius)`
+- size: 28×28 (h-7 w-7)
+- borderRadius: `var(--radius-md)` (8px / rounded-md)
 - textColor: `#fff`
 - fontWeight: 600
-- fontSize: 14px
+- fontSize: 13px
 - content: `name.charAt(0).toUpperCase()`
 
 **glossy 光泽 CSS**（色块右侧叠加半透明白色渐变）：
@@ -178,17 +182,19 @@
 
 ### 1.8 tokens（设计 token 映射）
 
+> ⚠️ 以下值已与 `ListCard` 实物组件对齐（v7.5+）。
+
 | 用途 | token |
 |------|-------|
 | background | `--card` |
-| border | `--gray-border` |
-| borderHover | `--primary` |
-| shadowHover | `--shadow-sm` |
-| radius | `--radius-lg` (12px) |
-| iconRadius | `--input-radius` (8px) |
-| titleColor | `--gray-primary` |
-| fieldColor | `--gray-secondary` |
-| descColor | `--gray-tertiary` |
+| border | `--gray-border`（idle）/ 渐变 primary（hovered）/ `outline 2px --primary`（selected） |
+| shadowHover | `shadow-[0_4px_8px_0_rgba(0,0,0,0.08)]` |
+| radius | `--radius-xl` (16px / rounded-xl) |
+| iconSize | 28×28 (h-7 w-7) |
+| iconRadius | `--radius-md` (8px / rounded-md) |
+| titleColor | `--foreground` (text-foreground) |
+| fieldColor | `--muted-foreground` |
+| descColor | `--muted-foreground` |
 | disabledBg | `--gray-fill` |
 | transitionDuration | `--duration-normal` (200ms) |
 | transitionEasing | `--easing-ease` |
@@ -255,10 +261,13 @@
 
 ## 3. CardActionBar（卡片操作栏）
 
+> ⚠️ ListCard 实物组件中操作栏使用 `ButtonGroup` + `variant="link"` 按钮实现（非 slidebar），且通过 `footerMode` 控制显隐。以下规格保留 spec 原始设计意图供 P2 兜底拼装参考。
+
 - **level**: MOLECULAR
 - **layer**: business
 - **shadcnImpl**: null
-- **UI 组件库引用**: 组合使用 `components/button` → `Button` (variant='ghost', size='sm') + `components/dropdown-menu` → `DropdownMenu`（溢出操作）+ `components/separator` → `Separator`（按钮间分隔）
+- **ListCard 实现**: `ButtonGroup` + `Button variant="link" size="sm"`，间隔由 ButtonGroup 自带 gap 管理，无 border-right 分隔
+- **P2 拼装引用**: 组合使用 `components/button` → `Button` (variant='ghost', size='sm') + `components/separator` → `Separator`（按钮间分隔）
 - **场景**：ItemCard 底部的操作栏 — 滑条式 (SlideBar) 设计，白底 + 主要文字色 + 等分宽度（v7.3.1 从主色底调整为白底以提升可读性与表单化一致性）。
 
 ### 3.1 props

package/src/teamix-evo-design-opentrek/pages/list-page/patterns/card-list-opentrek.md

@@ -25,9 +25,9 @@
 
 ```
 ┌─ PageShell (components/page-shell) ──────────────────────────────────────┐
-│ sidebar: Sidebar (components/sidebar)                                     │
+│ sidebar: OpSidebar (components/business/op-sidebar)                       │
 │ children:                                                                 │
-│ ┌─ ContentCard (components/card → Card + CardContent) ──────────────┐   │
+│ ┌─ OpPageContainer (components/business/op-page-container) ─────────┐   │
 │ │ PageHeader (components/page-header → PageHeader + PageHeaderHeading)│   │
 │ │   标题: "评估器" / "知识库" / "Skills Hub" / "智能体"                    │   │
 │ │                                                                    │   │
@@ -74,8 +74,8 @@
 | 区域 | UI 组件库引用 | 用途 | 必需 |
 |------|--------------|------|------|
 | 页面框架 | `components/page-shell` → `PageShell` | L1 级页面壳，sidebar + children | ✅ |
-| 侧边导航 | `components/sidebar` → `Sidebar` + `SidebarContent` + `SidebarMenu` + `SidebarMenuItem` + `SidebarMenuButton` | 左侧导航菜单 | ✅ (TWO_COL) |
-| 白卡容器 | `components/card` → `Card` + `CardContent` | 内容区白色容器 | ✅ |
+| 侧边导航 | `components/business/op-sidebar` → `OpSidebar` | 左侧导航（OpenTrek 整装侧边栏） | ✅ (TWO_COL) |
+| 页面容器 | `components/business/op-page-container` → `OpPageContainer` | 灰底 + 白卡容器 | ✅ |
 | 页面标题 | `components/page-header` → `PageHeader` + `PageHeaderHeading` | 标题 18px/500 | ✅ |
 | Tab 切换 | `components/tabs` → `Tabs` + `TabsList`(variant='line') + `TabsTrigger` + `TabsContent` | 子视图切换 | ✅ |
 | 主操作按钮 | `components/button` → `Button`(variant='default', color='primary') | "+ 新建XXX" | ✅ |
@@ -85,7 +85,7 @@
 | 筛选标签 | `components/tag` → `CheckableTag` + `CheckableTagGroup` | 多分类筛选 | 可选 |
 | 下拉筛选 | `components/select` → `Select` + `SelectTrigger` + `SelectContent` + `SelectItem` | 下拉选择 "全部 ▼" | 可选 |
 | 卡片网格 | CSS Grid (item-card-spec §2) | 承载 ItemCard | ✅ |
-| 业务卡片 | `components/card` → `Card` + `CardHeader` + `CardTitle` + `CardDescription` + `CardContent` + `CardFooter` | 单个数据项 | ✅ |
+| 业务卡片 | `components/business/list-card` → `ListCard` | 单个数据项卡片（三态边框 + hover 操作栏） | ✅ |
 | 卡片头像 | `components/avatar` → `Avatar` + `AvatarFallback` | 首字母色块 / 图标 | ✅ |
 | 状态标签 | `components/tag` → `Tag`(variant='status') | 启用/禁用/正常/有风险 | 按业务 |
 | 版本标签 | `components/badge` → `Badge`(variant='secondary') | v1.0.0 等版本信息 | 按业务 |
@@ -267,9 +267,9 @@
 
 ```
 ┌─ PageShell (components/page-shell) ──────────────────────────────────────┐
-│ sidebar: Sidebar (components/sidebar)                                     │
+│ sidebar: OpSidebar (components/business/op-sidebar)                       │
 │ children:                                                                 │
-│ ┌─ ContentCard (components/card → Card + CardContent) ──────────────┐   │
+│ ┌─ OpPageContainer (components/business/op-page-container) ─────────┐   │
 │ │ Breadcrumb (components/breadcrumb → Breadcrumb + BreadcrumbItem):  │   │
 │ │   记忆体 > 空间共用                                                  │   │
 │ │                                                                    │   │
@@ -345,9 +345,9 @@
 
 ```
 ┌─ PageShell (components/page-shell) ──────────────────────────────────────┐
-│ sidebar: Sidebar (components/sidebar)                                     │
+│ sidebar: OpSidebar (components/business/op-sidebar)                       │
 │ children:                                                                 │
-│ ┌─ ContentCard (components/card → Card + CardContent) ──────────────┐   │
+│ ┌─ OpPageContainer (components/business/op-page-container) ─────────┐   │
 │ │ PageHeader (components/page-header):                               │   │
 │ │   标题: "记忆体"                                                     │   │
 │ │                                                                    │   │
@@ -381,7 +381,7 @@
 
 ## 5. ActionToolbar 组合规则
 
-> 基于 `../_shared/search-combo-spec.md` 通用规则，本节补充 OpenTrek 页面中 ActionToolbar 的实际组合方式。
+> 基于 `common-components.json` → SearchCombo 通用规则，本节补充 OpenTrek 页面中 ActionToolbar 的实际组合方式。
 
 ### 5.1 DOM 结构
 

package/src/teamix-evo-design-opentrek/pages/list-page/patterns/card-list.md

@@ -3,7 +3,7 @@
 > 路由自 `../SKILL.md`
 > 覆盖三种卡片视图子类型：**pure-card** / **standard-card** / **view-toggle**
 > 核心组件：**CardGrid** > **ItemCard** × N → **CardActionBar**
-> 全局规则继承：[L1 框架](../../../rules/page-frame.json) / [布局模式](../../../rules/layout-rules.json) / [CRUD 流转](../../../rules/page-flow.json) / [SearchCombo](../_shared/search-combo-spec.md)
+> 全局规则继承：[L1 框架](../../../rules/page-frame.json) / [CRUD 流转](../../../rules/page-flow.json) / SearchCombo（见 common-components.json）
 > **业务卡片三件套（ItemCard/CardGrid/CardActionBar）完整规格** → [_shared/item-card-spec.md](../_shared/item-card-spec.md)
 > **OpenTrek 业务页面组合规则** → [card-list-opentrek.md](./card-list-opentrek.md)
 
@@ -13,7 +13,7 @@
 
 | 术语 | 定位 | 别名 | 规范来源 |
 |------|------|------|------|
-| **ContentCard** | 页面主内容**白色容器**，padding 24px，每页**单例** | 白卡容器 / shadcn-Card | `rules/component-specs.json` C7-Card |
+| **ContentCard** | 页面主内容**白色容器**（由 `OpPageContainer` 内置白卡承载），每页**单例** | 白卡容器 / OpPageContainer 内卡 | `components/business/op-page-container` |
 | **ItemCard** | CardGrid 内的**单个数据项卡片**，可重复 N 次 | 业务卡片 / 卡片视图列表项 | [item-card-spec.md §1](../_shared/item-card-spec.md) |
 
 > **规则**：本 pattern 及任何引用本 pattern 的文档，禁止只写 "Card"，必须显式使用 `ContentCard` 或 `ItemCard` 区分。
@@ -27,7 +27,7 @@
 | 触发关键词 | "纯卡片"/"卡片管理"/"智能体列表" | "卡片列表"/"分类卡片"/"资源卡片" | "视图切换"/"列表卡片切换" |
 | layout.type | SINGLE_COL | TWO_COL | TWO_COL |
 | layout 模式 | 模式A-CARD | 模式D-CARD | 模式D + ViewToggle |
-| Sidebar | 无 | **有 (240px)** | **有 (240px)** |
+| OpSidebar | 无 | **有 (240px)** | **有 (240px)** |
 | ViewToggle (ToggleGroup 复用) | 无 | 无 | **必需，ActionToolbar 右侧 Tab 样式** |
 | ItemCard.density | minimal / standard / complex（按信息量选） | 同 pure-card | 仅 **standard** |
 | ItemCard.iconStyle | **avatar**（32×32 圆角） | **avatar** | **tile**（40×40 大方块） |
@@ -41,12 +41,12 @@
 
 ---
 
-## 2. 通用布局骨架（三个子类型共享，差异仅 Sidebar / ViewToggle）
+## 2. 通用布局骨架（三个子类型共享，差异仅 OpSidebar / ViewToggle）
 
 ```
-┌─[Sidebar]*─────────┬─────────────────────────────────────────┤
-│                    │  PageContainer → ContentWrapper          │
-│  * pure-card 无    │  ┌─ ContentCard (白卡容器) ──────────┐  │
+┌─[OpSidebar]*──────┬─────────────────────────────────────────┤
+│                    │  OpPageContainer                        │
+│  * pure-card 无    │  ┌─ 内置白卡 (bg-card rounded-2xl) ────┐  │
 │                    │  │ PageHeader (标题 18px/500)              │  │
 │                    │  │ ActionToolbar:                       │  │
 │                    │  │   [创建] [导入]                       │  │
@@ -65,8 +65,8 @@
 └────────────────────┴─────────────────────────────────────────┘
 ```
 
-> Sidebar 由 [`page-frame.json`](../../../rules/page-frame.json) L1 自动继承（TWO_COL 显示 / SINGLE_COL 隐藏），本 pattern 不重复声明。
-> ContentCard 内左右对齐遵循 [分层 padding 模型 v7.5](../SKILL.md#5-1-card-内左右对齐稳定规则硬约束)（Card.paddingX 20px 唯一来源）。
+> Sidebar 由 [`page-frame.json`](../../../rules/page-frame.json) L1 自动继承（TWO_COL 显示 / SINGLE_COL 隐藏），本 pattern 不重复声明。OpenTrek 使用 `OpSidebar`（`components/business/op-sidebar`）。
+> OpPageContainer 内白卡的 `p-6`（24px）统一提供内边距，对齐 [分层 padding 模型 v7.5](../SKILL.md#5-1-card-内左右对齐稳定规则硬约束)。
 
 ### 2.1 ActionToolbar 布局细则（截图实证补充）
 
@@ -100,14 +100,14 @@
 
 | 组件 | 来源规范 | UI 组件库引用 | 子类型适用 |
 |------|----------|--------------|------------|
-| Sidebar | rules/page-frame.json (L1 框架自动继承) | `components/sidebar` | standard-card / view-toggle |
-| ContentCard | rules/component-specs.json C7-Card | `components/card` → `Card` + `CardContent` | 全部 |
+| Sidebar | rules/page-frame.json (L1 框架自动继承) | `components/business/op-sidebar` → `OpSidebar` | standard-card / view-toggle |
+| ContentCard | OpPageContainer 内置白卡 | `components/business/op-page-container` → `OpPageContainer` | 全部 |
 | PageHeader | rules/common-components.json | `components/page-header` → `PageHeader` + `PageHeaderHeading` | 全部 |
 | ActionToolbar | — | 组合组件（见 [opentrek §5.2](./card-list-opentrek.md#52-组件引用清单)） | 全部 |
-| SearchCombo | _shared/search-combo-spec.md | `components/input` → `Input` + `components/select` → `Select` | 全部 |
+| SearchCombo | common-components.json → SearchCombo | `components/input` → `Input` + `components/select` → `Select` | 全部 |
 | ToggleGroup（胶囊筛选 / ViewToggle 复用） | rules/common-components.json | `components/toggle-group` → `ToggleGroup` + `ToggleGroupItem` | 全部 |
 | **CardGrid** | [item-card-spec.md §2](../_shared/item-card-spec.md#2-cardgrid卡片网格) | CSS Grid 实现（无对应 UI 组件） | 全部 |
-| **ItemCard** × N | [item-card-spec.md §1](../_shared/item-card-spec.md#1-itemcard业务卡片) | `components/card` → `Card` + `CardHeader` + `CardContent` + `CardFooter` | 全部 |
+| **ItemCard** × N | [item-card-spec.md §1](../_shared/item-card-spec.md#1-itemcard业务卡片) | `components/business/list-card` → `ListCard` | 全部 |
 | **CardActionBar** | [item-card-spec.md §3](../_shared/item-card-spec.md#3-cardactionbar卡片操作栏) | 组合组件 | 全部 |
 | Pagination | rules/common-components.json | `components/pagination` → `Pagination` + 子组件 | 全部 |
 | DataTable | _shared/column-meta-rules.md + action-column-spec.md | `components/data-table` | view-toggle 切换列表视图时 |
@@ -132,14 +132,13 @@
 
 | 父子关系 | 状态 | 适用子类型 |
 |----------|------|----------|
-| ContentWrapper → ContentCard | ALLOW | 全部 |
-| ContentCard → PageHeader / ActionToolbar / CardGrid / Pagination | ALLOW | 全部 |
-| ContentCard → DataTable + BulkActionBar | ALLOW | view-toggle（与 CardGrid 同级，切换可见） |
+| OpPageContainer → PageHeader / ActionToolbar / CardGrid / Pagination | ALLOW | 全部 |
+| OpPageContainer → DataTable + BulkActionBar | ALLOW | view-toggle（与 CardGrid 同级，切换可见） |
 | ActionToolbar → SearchCombo / ToggleGroup / ViewToggle | ALLOW | 全部（ViewToggle 仅 view-toggle） |
-| **CardGrid → ItemCard** | ALLOW | 全部 |
+| **CardGrid → ItemCard (ListCard)** | ALLOW | 全部 |
 | **ItemCard → CardActionBar** | ALLOW（slot 引用） | 全部 |
-| ContentWrapper → CardGrid 直挂 | FORBID | 必须经 ContentCard 包裹 |
-| ContentCard → ContentCard | FORBID | 白卡容器为单例 |
+| OpPageContainer 外直挂 CardGrid | FORBID | 必须经 OpPageContainer 包裹 |
+| OpPageContainer → OpPageContainer | FORBID | 页面容器为单例 |
 | ItemCard → ItemCard | FORBID | 业务卡片禁止嵌套 |
 | CardGrid → 任何非 ItemCard 子节点 | FORBID | Grid 仅承载业务卡片 |
 
@@ -171,13 +170,13 @@
 - [ ] CardActionBar.mode ∈ {hover-slidebar, hover-fade, always-visible} 三态之一
 - [ ] CardActionBar position: absolute（不撑开卡片高度）
 - [ ] 危险操作（删除）使用 var(--destructive) 底色 + 始终最后位置
-- [ ] ContentCard 内左右对齐遵循分层 padding 模型 v7.5（20px 唯一来源）
+- [ ] OpPageContainer 内白卡 `p-6`（24px）统一提供内边距，遵循分层 padding 模型 v7.5
 
 ### 子类型差异项
 
 | 验证项 | pure-card | standard-card | view-toggle |
 |--------|-----------|---------------|-------------|
-| layout | SINGLE_COL | TWO_COL + Sidebar | TWO_COL + Sidebar |
+| layout | SINGLE_COL | TWO_COL + OpSidebar | TWO_COL + OpSidebar |
 | ViewToggle 存在性 | ❌ | ❌ | ✅ Tab 样式 |
 | ItemCard.iconStyle | avatar | avatar | tile |
 | 标题字号 | 14px | 14px | 16px |
@@ -246,8 +245,9 @@
 | 组件路径 | 导出组件 | 在卡片列表页中的用途 |
 |----------|----------|-------------------|
 | `components/page-shell` | `PageShell` | L1 级页面壳（header + sidebar + children） |
-| `components/sidebar` | `Sidebar`, `SidebarProvider`, `SidebarContent`, `SidebarHeader`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupLabel`, `SidebarGroupContent`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton`, `SidebarMenuSub`, `SidebarMenuSubItem`, `SidebarMenuSubButton`, `SidebarSeparator`, `useSidebar` | 左侧导航菜单 |
-| `components/card` | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter` | ContentCard 白卡容器 + ItemCard 业务卡片 |
+| `components/business/op-sidebar` | `OpSidebar` | 左侧导航（OpenTrek 整装侧边栏，内置 SidebarProvider） |
+| `components/business/op-page-container` | `OpPageContainer` | 灰底 + 内置白卡页面容器（header + children） |
+| `components/business/list-card` | `ListCard`, `CardStatusBadge` | ItemCard 业务卡片（三态边框 + hover 操作栏） |
 | `components/page-header` | `PageHeader`, `PageHeaderNav`, `PageHeaderContent`, `PageHeaderHeading`, `PageHeaderDescription`, `PageHeaderActions`, `PageHeaderFooter` | 页面标题区域 |
 | `components/button` | `Button`, `buttonVariants` | 创建/导入/辅助操作按钮 |
 | `components/input` | `Input`, `inputVariants` | 搜索输入框 |

package/src/teamix-evo-design-opentrek/pages/list-page/patterns/standard-list-opentrek.md

@@ -25,9 +25,9 @@
 
 ```
 ┌─ PageShell (components/page-shell) ──────────────────────────────────────┐
-│ sidebar: Sidebar (components/sidebar)                                     │
+│ sidebar: OpSidebar (components/business/op-sidebar)                       │
 │ children:                                                                 │
-│ ┌─ ContentCard (components/card → Card + CardContent) ──────────────┐   │
+│ ┌─ OpPageContainer (components/business/op-page-container) ─────────┐   │
 │ │ PageHeader (components/page-header → PageHeader + PageHeaderHeading)│   │
 │ │   标题: "上架CoWorker" / "内置资产" / "评测集" / "元数据管理"            │   │
 │ │                                                                    │   │
@@ -82,8 +82,8 @@
 
 ```
 ┌─ PageShell ──────────────────────────────────────────────────────────────┐
-│ sidebar: Sidebar                                                          │
-│ ┌─ ContentCard ──────────────────────────────────────────────────────┐   │
+│ sidebar: OpSidebar                                                          │
+│ ┌─ OpPageContainer ────────────────────────────────────────────────────┐   │
 │ │ PageHeader: "操作记录" / "Trace追踪"                                  │   │
 │ │                                                                    │   │
 │ │ ActionToolbar (flex, nowrap):                                      │   │
@@ -119,8 +119,8 @@
 
 ```
 ┌─ PageShell ──────────────────────────────────────────────────────────────┐
-│ sidebar: Sidebar                                                          │
-│ ┌─ ContentCard ──────────────────────────────────────────────────────┐   │
+│ sidebar: OpSidebar                                                          │
+│ ┌─ OpPageContainer ────────────────────────────────────────────────────┐   │
 │ │ PageHeader: "内置服务"                                                │   │
 │ │ Tabs: [沙箱管理 | 消息渠道管理 | 数据源管理 | 模型接入]                     │   │
 │ │                                                                    │   │
@@ -262,8 +262,8 @@
 | 区域 | UI 组件库引用 | 用途 |
 |------|--------------|------|
 | 页面框架 | `components/page-shell` → `PageShell` | L1 级页面壳 |
-| 侧边导航 | `components/sidebar` → `Sidebar` + `SidebarContent` + `SidebarMenu` | 左侧导航 |
-| 白卡容器 | `components/card` → `Card` + `CardContent` | 内容区白色容器 |
+| 侧边导航 | `components/business/op-sidebar` → `OpSidebar` | 左侧导航（OpenTrek 整装侧边栏） |
+| 页面容器 | `components/business/op-page-container` → `OpPageContainer` | 灰底 + 白卡容器 |
 | 页面标题 | `components/page-header` → `PageHeader` + `PageHeaderHeading` | 标题 18px/500 |
 | Tab 切换 | `components/tabs` → `Tabs` + `TabsList`(variant='line') + `TabsTrigger` + `TabsContent` | 子视图切换 |
 | 主操作按钮 | `components/button` → `Button`(variant='default', color='primary') | "+ 新建XXX" |

package/src/teamix-evo-design-opentrek/pages/list-page/patterns/standard-list.md

@@ -9,7 +9,7 @@
 ```
 ┌──────────┬──────────────────────────────────────────────┤
 │          │  PageHeader                                  │
-│  Sidebar │  标题(18px/medium) [描述*] + [了解更多 12px]          │
+│  OpSidebar │  标题(18px/medium) [描述*] + [了解更多 12px]          │
 │          │  ─────────────────────────                   │
 │          │  ActionToolbar (单行 flex, nowrap)            │
 │          │  [创建] [批量创建]    [全部▼][输入...]🔍 [刷新]   │
@@ -26,7 +26,7 @@
 └──────────┴──────────────────────────────────────────────┘
 ```
 
-> 注: Sidebar 非必需，有 L2 导航需求时采用 TWO_COL，否则 SINGLE_COL。
+> 注: OpSidebar 非必需，有 L2 导航需求时采用 TWO_COL，否则 SINGLE_COL。
 
 ## 2. 必需组件（补充）
 
@@ -74,7 +74,7 @@
 
 ### SearchCombo CSS 实现
 
-> 详细 CSS 规范见 `../_shared/search-combo-spec.md`（容器样式、状态、内部元素）。
+> 详细规范见 `common-components.json` → SearchCombo（容器样式、状态、内部元素）。
 
 ### 搜索与筛选交互
 
@@ -165,17 +165,17 @@
 - 列定义读 `products/polar-db/columns.json`（11列：集群ID/名称/状态/数据库类型/地域/规格/节点数/存储空间/连接地址/到期时间/资源组）
 - 状态机读 `products/polar-db/states.json`（5种状态：运行中/已停止/创建中/变配中/释放中）
 
-## 10. 与 PageContainer 模式对照
+## 10. 与 OpPageContainer 模式对照
 
-> 布局模式定义见 `../../../rules/layout-rules.json`
+> 布局模式定义见 `../../../rules/page-frame.json`
 
 标准列表页使用 **模式D（复合模式）**：
 ```
-PageContainer → ContentWrapper → PageHeader + ActionToolbar + DataTable + BulkActionBar + Pagination
+PageShell → OpSidebar + OpPageContainer → PageHeader + ActionToolbar + DataTable + BulkActionBar + Pagination
 ```
 当不需要筛选时退化为 **模式B**：
 ```
-PageContainer → ContentWrapper → PageHeader + DataTable + BulkActionBar + Pagination
+PageShell → OpSidebar + OpPageContainer → PageHeader + DataTable + BulkActionBar + Pagination
 ```
 
 ## 11. 验证清单
@@ -184,7 +184,7 @@ PageContainer → ContentWrapper → PageHeader + DataTable + BulkActionBar + Pa
 
 | 验证项 | 检查点 | 目标 |
 |--------|--------|------|
-| **Card.paddingX 外侧提供** | Card 白卡容器 `padding: 0 var(--card-padding-x)` (左右 20px)；PageHeader / ActionToolbar / BulkActionBar / Pagination 的水平 padding 全部 = 0 | **必须 100% 一致**，非 Table 子组件重复设置 paddingX 即为违反 |
+| **OpPageContainer 内白卡 paddingX** | OpPageContainer 内置白卡 `p-6`（24px）；PageHeader / ActionToolbar / BulkActionBar / Pagination 的水平 padding 全部 = 0 | **必须 100% 一致**，非 Table 子组件重复设置 paddingX 即为违反 |
 | **Table 分层 padding v7.5** | 中间列 th/td paddingX = 12px（列间距 24px）；首列 padding-left = **20px**；末列 padding-right = **20px**；首列内容 X = Card 外缘 + 40；末列右缘 X = Card 右缘 - 40；唯一可接受模式：`px-3 first:pl-5 last:pr-5` | 100% |
 | 表格列 | 列数、类型、宽度、对齐、排序、固定匹配规范 | 全部匹配 |
 | 列显隐 | 条件列(监控/可用区/组织)按规则显隐 | 正确 |

package/src/teamix-evo-design-opentrek/patterns/color-mapping.md

@@ -1,6 +1,6 @@
 # Color Mapping — OpenTrek v4.1 语义色映射表
 
-> ⚠️ **Prerequisites**: 你必须由 [generation-flow.md](../generation-flow.md) Step 6（视觉填充）引导到这里，或在翻新路径中处理色彩替换时使用。
+> ⚠️ **Prerequisites**: 你必须由 [workflow.md](../workflow.md) Step 6（视觉填充）引导到这里，或在翻新路径中处理色彩替换时使用。
 
 > AI 在写组件代码时**只**消费下表中的 CSS 变量名，**不**直接写色值。Token 真值见 `tokens/tokens.theme.css`，本文件仅做语义到 token 名的映射。
 
@@ -83,7 +83,7 @@
 
 ## 6. Sidebar / Topbar 命名空间
 
-详见 [sidebar-spec.md §3](../rules/sidebar-spec.md#3-颜色映射v41-品牌化)。**不**使用主色槽（`--color-primary` 等），全部走 `--color-sidebar-*` / `--color-topbar-*`。
+详见 `common-components.json` → OpSidebar 及 `design-tokens.json` → sidebarRules。**不**使用主色槽（`--color-primary` 等），全部走 `--color-sidebar-*` / `--color-topbar-*`。
 
 ---
 

package/src/teamix-evo-design-opentrek/patterns/dashboard.md

@@ -1,6 +1,6 @@
 # Dashboard — 数据概览与监控页
 
-> ⚠️ **Prerequisites**: 你必须已在 [generation-flow.md](../generation-flow.md) Step 2 确认页面类型为 **Dashboard**，并由 Step 3 引导到这里。
+> ⚠️ **Prerequisites**: 你必须已在 [workflow.md](../workflow.md) Step 2 确认页面类型为 **Dashboard**，并由 Step 3 引导到这里。
 
 > **完整规范已迁移**：本文件为索引概览，完整生成规范见 [`../pages/dashboard-page/SKILL.md`](../pages/dashboard-page/SKILL.md)。
 > OpenTrek 业务规则见 [`../pages/dashboard-page/patterns/dashboard-opentrek.md`](../pages/dashboard-page/patterns/dashboard-opentrek.md)。

package/src/teamix-evo-design-opentrek/patterns/detail-page.md

@@ -15,7 +15,7 @@ description: >
 > **生成页面时必须读取**：
 > - `../pages/detail-page/SKILL.md` — 子技能入口（子类型列表 + 属性模型）
 > - `../pages/detail-page/patterns/{subtype}.md` — 完整骨架 + DOM 结构 + CSS 约束（resource / monitor / api-doc / comparison）
-> - `../rules/page-header-spec.md` — PageHeader L2 面包屑硬约束
+> - `../rules/common-components.json` → PageHeader — L2 面包屑硬约束
 >
 > 本文件仅用于：(1) 了解详情页子类型概览 (2) 快速判断属于哪个子类型
 
@@ -50,10 +50,10 @@ description: >
 | 属性 | 值 | 说明 |
 |------|-----|------|
 | layout.type | TWO_COL / SINGLE_COL | 见 `rules/page-frame.json` layoutSelectionRules |
-| layout.frame | L2 | 详情页为 L2 级页面，自动继承 Sidebar + PageHeader 面包屑模式 |
+| layout.frame | L2 | 详情页为 L2 级页面，自动继承 OpSidebar + PageHeader 面包屑模式 |
 | responsive | 768px 侧边栏折叠为抽屉，DescriptionList 列数从 4 降为 2 |
 
-> **框架组件自动继承**：Sidebar、PageHeader 由 `rules/page-frame.json` 统一管理，L2 级页面自动继承。
+> **框架组件自动继承**：OpSidebar、PageHeader 由 `rules/page-frame.json` 统一管理，L2 级页面自动继承。
 
 ---
 
@@ -63,7 +63,7 @@ description: >
 
 | 组件 | 引用 | 层级 | 位置 | 说明 |
 |------|------|------|------|------|
-| PageHeader | — | ORGANISM | top | 面包屑模式 + 操作按钮组（详见 `../rules/page-header-spec.md`） |
+| PageHeader | — | ORGANISM | top | 面包屑模式 + 操作按钮组（详见 `common-components.json` → PageHeader） |
 | DescriptionList | — | ORGANISM | center | 核心展示组件，支持 2/3/4 列布局 |
 | DescriptionItem | — | ATOMIC | center | 单个键值对单元，6 种交互模式 |
 
@@ -94,7 +94,7 @@ description: >
 | Form (ORGANISM) | 禁止在主内容区 | 编辑应通过 Sheet/Dialog/FormPage |
 | DataTable | 禁止在主内容区 | 关联数据通过 Tabs 子面板展示 |
 | Chart (ORGANISM) | 禁止替代 DescriptionList | 监控通过 ChartPanel，详见 patterns/monitor-detail.md |
-| PageContainer | 禁止嵌套 | 见 layout-rules.json |
+| PageContainer | 禁止嵌套 | 见 page-frame.json |
 | QueryFilter | 禁止出现 | 详情页无筛选需求 |
 
 ---
@@ -116,7 +116,7 @@ description: >
 | Tabs → TabPane → DescriptionList | ALLOW | Tab 内展示详情 |
 | Tabs → TabPane → DataTable | ALLOW | Tab 内展示关联资源 |
 | PageHeader → ActionGroup | ALLOW | 操作按钮组 |
-| Sidebar → DescriptionList | FORBID | 描述列表不应在侧边栏 |
+| OpSidebar → DescriptionList | FORBID | 描述列表不应在侧边栏 |
 
 > 子类型特有嵌套约束见对应 `patterns/*.md`。
 
@@ -232,7 +232,7 @@ description: >
 
 | 共享规则 | 路径 | 被引用子类型 |
 |----------|------|-------------|
-| PageHeader L1 标题 / L2 面包屑强约束 | `../rules/page-header-spec.md` | 全部 |
+| PageHeader L1 标题 / L2 面包屑强约束 | `../rules/common-components.json` → PageHeader | 全部 |
 
 ---
 
@@ -240,7 +240,7 @@ description: >
 
 - **读取路径**：见根技能 `../../SKILL.md` §4.5 三阶段读取决策树
   - 阶段①：`page-types.json` + `business-mapping.json`
-  - 阶段②：`page-frame.json` + `layout-rules.json` + `page-flow.json`；匹配子类型后追加 `patterns/{子类型}.md`
+  - 阶段②：`page-frame.json` + `page-flow.json`；匹配子类型后追加 `patterns/{子类型}.md`
   - 阶段③（生成 HTML 时）：`design-tokens.json` + `design-tokens.css` + `component-specs.json` + `styling.json` + `../boundaries.md` + `../foundations.md`
 
 > `rules/design-tokens.css` 是设计 Token 唯一真相源：生成 HTML 原型时需将 :root 变量块嵌入 `<style>`；React/TSX 需确保已 `@import` 引入。
@@ -256,7 +256,7 @@ description: >
 | 必需组件 | PageHeader、DescriptionList、DescriptionItem | 100% |
 | 嵌套约束 | PageContainer → ContentWrapper → Card → PageHeader + 内容 | 无违规 |
 | 禁止组件 | 无内联表单、DataTable 主内容区、QueryFilter | 0 个 |
-| PageHeader | 面包屑模式合规（`../rules/page-header-spec.md` 15 项） | 全部通过 |
+| PageHeader | 面包屑模式合规（`common-components.json` → PageHeader.generationChecklist 16 项） | 全部通过 |
 | ContentCard 表面 (v7.6) | 无 1px border + shadow = var(--shadow-sm) | 0 违规 |
 | InfoCard 表面 (v7.6) | 模式 A 跟随主卡；模式 B 仅 padding + border-bottom | 0 违规 |
 | Card 间距 (v7.5) | padding = 0 var(--card-padding-x) = 20px | 正确 |

package/src/teamix-evo-design-opentrek/patterns/form-page.md

@@ -49,12 +49,12 @@ description: >
 | 属性            | 值                                               | 说明                                                                                                             |
 | --------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
 | layout.type     | SINGLE_COL / GRID                                | 简单表单 SINGLE_COL，多列表单 GRID                                                                               |
-| layout.frame    | L2                                               | 表单页为 L2 级页面，自动继承 Sidebar（含 Logo+产品名），PageHeader 使用面包屑基础组件模式                        |
+| layout.frame    | L2                                               | 表单页为 L2 级页面，自动继承 OpSidebar（含 Logo+产品名），PageHeader 使用面包屑基础组件模式                        |
 | responsive      | Desktop: 单列/多列, Tablet: 单列, Mobile: 不推荐 |
 | form.layout     | SINGLE_COL(默认), TWO_COL(多字段), SECTION(分区) |
 | submit.position | bottom                                           | flex 布局，所有行动点居右排列（justify-content: flex-end），按钮从左到右顺序：取消 → 上一步（如有）→ 下一步/提交 |
 
-> **框架组件自动继承**：Sidebar、Breadcrumb 由 `rules/page-frame.json` 统一管理，L2 级页面自动包含。弹窗表单（Dialog/FormPage）为 L0 级，无框架组件。
+> **框架组件自动继承**：OpSidebar、Breadcrumb 由 `rules/page-frame.json` 统一管理，L2 级页面自动包含。弹窗表单（Dialog/FormPage）为 L0 级，无框架组件。
 
 ## 4. 标准布局骨架
 
@@ -226,7 +226,7 @@ description: >
 | Form       | FieldGroup | ORGANISM | center | 表单容器，替代 div + space-y-\* |
 | SubmitBar  | —          | ORGANISM | bottom | 提交操作栏，底部固定            |
 
-> **框架级组件**（自动继承，无需在此声明）：Sidebar、Breadcrumb 由 `rules/page-frame.json` 统一管理，L2 级页面自动包含。弹窗表单（Dialog 内）为 L0 级，无框架组件。
+> **框架级组件**（自动继承，无需在此声明）：OpSidebar、Breadcrumb 由 `rules/page-frame.json` 统一管理，L2 级页面自动包含。弹窗表单（Dialog 内）为 L0 级，无框架组件。
 
 ### 可选组件
 
@@ -257,7 +257,7 @@ description: >
 | ----------------- | ------------------------ | ------------------------------------------- |
 | DataTable         | 禁止出现在表单页主内容区 | 如需选择关联数据，用 Dialog + DataTable     |
 | Chart             | 禁止出现在表单页         | 图表属于 Dashboard                          |
-| PageContainer     | 禁止嵌套                 | 见 `rules/layout-rules.json`                |
+| PageContainer     | 禁止嵌套                 | 见 `rules/page-frame.json`                  |
 | ListPage          | 禁止嵌套                 | 表单页是页面级组件                          |
 | 内联 Input        | 禁止不在 Field 内        | 所有 Input 必须在 FieldGroup → Field 内(F1) |
 | 原始 div 表单布局 | 禁止                     | 用 FieldGroup + Field 替代(F1)              |
@@ -348,7 +348,7 @@ description: >
 
 ### 6.5 与 PageContainer 模式对照
 
-> 布局模式定义见 `rules/layout-rules.json`
+> 布局模式定义见 `rules/page-frame.json`
 
 表单页使用 **模式 A（直接内容）或模式 B（Card 分组）**：
 
@@ -367,7 +367,7 @@ PageContainer → ContentWrapper → Breadcrumb + PageHeader + Card[FieldGroup]
 
 - **读取路径**：见根技能 `../../SKILL.md` §4.5 三阶段读取决策树
   - 阶段 ①：`page-types.json` + `business-mapping.json`
-  - 阶段 ②：`page-frame.json` + `layout-rules.json` + `page-flow.json`
+  - 阶段 ②：`page-frame.json` + `page-flow.json`
   - 阶段 ③（生成 HTML 时）：`design-tokens.json` + `design-tokens.css` + `styling.json` + `../boundaries.md` + `../foundations.md`（表单布局精确规格见本文 §8）
 
 > `rules/design-tokens.css` 是设计 Token 的唯一真相源（:root 变量定义）：生成 HTML 原型时需将 :root 变量块嵌入页面 `<style>` 标签；生成 React/TSX 需确保项目已通过 `@import` 引入该 CSS 文件。