@teamix-evo/skills 0.12.0 → 0.13.0

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

@@ -27,11 +27,11 @@ description: >
 | 子类型ID | 识别关键词 | 路由到 | 布局模式 | 核心组件 |
 |----------|-----------|--------|----------|----------|
 | standard | "列表"/"表格"/"查询" | → `patterns/standard-list.md`；OpenTrek 业务规则 → `patterns/standard-list-opentrek.md` | 模式D | DataTable + Pagination |
-| l2-sidebar | "分类"/"分组"/"左侧树" | → 本文件 §8.1 | 模式D + Sidebar | Sidebar(240px) + DataTable |
+| l2-sidebar | "分类"/"分组"/"左侧树" | → 本文件 §8.1 | 模式D + OpSidebar | OpSidebar(240px) + DataTable |
 | expandable | "展开"/"子项"/"详情" | → 本文件 §8.2 | 模式D | DataTable(行内展开) |
 | drawer | "弹窗列表"/"选择器" | → 本文件 §8.3 | 模式D (Sheet内) | DataTable ⊂ Sheet |
 | **pure-card** | "纯卡片"/"卡片管理"/"智能体列表" | → `patterns/card-list.md` | 模式A-CARD | CardGrid + ItemCard + CardActionBar |
-| **standard-card** | "卡片列表"/"分类卡片"/"资源卡片" | → `patterns/card-list.md` | 模式D-CARD (TWO_COL) | Sidebar + CardGrid + ItemCard + CardActionBar |
+| **standard-card** | "卡片列表"/"分类卡片"/"资源卡片" | → `patterns/card-list.md` | 模式D-CARD (TWO_COL) | OpSidebar + CardGrid + ItemCard + CardActionBar |
 | **view-toggle** | "视图切换"/"列表卡片切换" | → `patterns/card-list.md` | 模式D + ViewToggle | ViewToggle + CardGrid/DataTable + ItemCard(tile) |
 | advanced-filter | "高级筛选"/"更多条件" | → 本文件 §8.4 | 模式D+ | AdvancedFilterPanel + DataTable |
 
@@ -56,11 +56,11 @@ description: >
 | 属性 | 值 | 说明 |
 |------|-----|------|
 | layout.type | TWO_COL / SINGLE_COL | 见 `rules/page-frame.json` layoutSelectionRules |
-| layout.frame | L1 | 列表页为 L1 级页面，自动继承 Sidebar（含Logo+产品名）。无面包屑。 |
+| layout.frame | L1 | 列表页为 L1 级页面，自动继承 OpSidebar（含Logo+产品名）。无面包屑。 |
 | responsive | Desktop ≥1200px(完整), Tablet 768-1199px(横滚), Mobile <768px(不推荐) |
 | pagination.default | 标准列表 10 条/页, 纯卡片 12 条/页 |
 
-> **框架组件自动继承**：Sidebar 的存在性由 `rules/page-frame.json` 统一管理，子技能只定义内容区组件。L1 级页面自动包含：Sidebar（顶部Logo+产品名），无面包屑。
+> **框架组件自动继承**：OpSidebar 的存在性由 `rules/page-frame.json` 统一管理，子技能只定义内容区组件。L1 级页面自动包含：OpSidebar（顶部Logo+产品名），无面包屑。
 
 ---
 
@@ -74,7 +74,7 @@ description: >
 | ActionToolbar | — | ORGANISM | top | 操作工具栏，单行 flex(flex-wrap:nowrap)，左侧创建按钮 + 右侧搜索工具 |
 | Pagination | — | MOLECULAR | bottom | 分页控件 |
 
-> **框架级组件**（自动继承，无需在此声明）：Sidebar 由 `rules/page-frame.json` 统一管理，L1 级页面自动包含。
+> **框架级组件**（自动继承，无需在此声明）：OpSidebar 由 `rules/page-frame.json` 统一管理，L1 级页面自动包含。
 > 注：DataTable 为 standard/l2/expandable/drawer/view-toggle 的必需组件；CardGrid 为 standard-card/pure-card/view-toggle 的必需组件。
 
 ### 禁止组件
@@ -83,7 +83,7 @@ description: >
 |------|------|------|
 | Form(ORGANISM) | 禁止直接出现在内容区 | 表单应通过 Dialog/Sheet/FormPage 触发 |
 | Chart(ORGANISM) | 禁止出现在标准列表页 | 图表属于 Dashboard |
-| PageContainer | 禁止嵌套 | 见 `rules/layout-rules.json` |
+| PageContainer / OpPageContainer | 禁止嵌套 | 见 `rules/page-frame.json` |
 | 内联编辑 | 禁止 | 编辑应通过 Sheet/Dialog/FormPage |
 | 拖拽排序 | 禁止 | 表格数据为服务端排序 |
 | 无限滚动 | 禁止 | B2B 管理场景需精确分页 |
@@ -104,7 +104,7 @@ description: >
 
 > 注意：Table 首列内容 X = Card 外缘 + 40px，与 PageHeader / ActionToolbar / Pagination 起始线**不对齐**（这是设计预期）。
 
-Card 白卡容器：`padding: 0 var(--card-padding-x)` （上下 0 / 左右 20px）。注意：`--card-padding-x` (20px) 独立于 `--page-container-padding` (16px)，后者为 PageContainer 外层间距。
+Card 白卡容器：`padding: 0 var(--card-padding-x)` （上下 0 / 左右 20px）。注意：`--card-padding-x` (20px) 独立于 OpPageContainer 外层间距（py-5 pr-5，各 20px）。OpenTrek 使用 `OpPageContainer`（`components/business/op-page-container`）内置白卡替代手动 Card 包裹。
 
 | 组件 | 水平 padding | 起始线 X 坐标 | 说明 |
 |------|---------------|-----------------|------|
@@ -159,9 +159,9 @@ Card 白卡容器：`padding: 0 var(--card-padding-x)` （上下 0 / 左右 20px
 
 ---
 
-## 5.2 ContentCard 表面规则 v7.6【硬约束】
+## 5.2 ContentCard / OpPageContainer 表面规则 v7.6【硬约束】
 
-内容区大卡片容器（ContentCard 作为白卡容器使用时）表面规则：
+内容区大卡片容器（OpPageContainer 内置白卡）表面规则：
 
 | 属性 | v7.5 及之前 | **v7.6（当前）** |
 |------|-------------|----------------|
@@ -205,24 +205,23 @@ Card 白卡容器：`padding: 0 var(--card-padding-x)` （上下 0 / 左右 20px
 
 | 父子关系 | 状态 | 说明 |
 |----------|------|------|
-| PageContainer → ContentWrapper | ALLOW | 右侧内容大容器（必需） |
-| ContentWrapper → Card(白卡容器) | ALLOW | 白色卡片容器，包裹所有业务内容（必需） |
-| Card(白卡容器) → PageHeader | ALLOW | 标准结构 |
-| Card(白卡容器) → ActionToolbar | ALLOW | 操作工具栏 |
-| Card(白卡容器) → DataTable | ALLOW | 核心组件 |
-| Card(白卡容器) → CardGrid | ALLOW | 卡片列表 |
-| Card(白卡容器) → ViewToggle | ALLOW | 视图切换 |
-| Card(白卡容器) → AdvancedFilterPanel | ALLOW | 高级筛选面板 |
-| Card(白卡容器) → Pagination | ALLOW | 分页控件 |
-| ContentWrapper → PageHeader / ActionToolbar / DataTable / CardGrid / Pagination | FORBID | 业务组件必须经过白卡容器包裹 |
-| Card(白卡容器) → Card(白卡容器) | FORBID | 白卡容器为单例，禁止嵌套 |
+| PageShell → OpSidebar + OpPageContainer | ALLOW | OpenTrek 标准页面框架（必需） |
+| OpPageContainer → PageHeader | ALLOW | 标准结构（header slot） |
+| OpPageContainer → ActionToolbar | ALLOW | 操作工具栏（children） |
+| OpPageContainer → DataTable | ALLOW | 核心组件 |
+| OpPageContainer → CardGrid | ALLOW | 卡片列表 |
+| OpPageContainer → ViewToggle | ALLOW | 视图切换 |
+| OpPageContainer → AdvancedFilterPanel | ALLOW | 高级筛选面板 |
+| OpPageContainer → Pagination | ALLOW | 分页控件 |
+| 跳过 OpPageContainer 直接挂载业务组件 | FORBID | 业务组件必须经过 OpPageContainer 包裹 |
+| OpPageContainer → OpPageContainer | FORBID | 页面容器为单例，禁止嵌套 |
 | ActionToolbar → SearchCombo | ALLOW | 搜索组合 |
 | CardGrid → ItemCard | ALLOW | 业务卡片（v7.3 起详见 `patterns/card-list.md` §9.1） |
 | ItemCard → CardActionBar | ALLOW | 卡片操作栏，三态：hover-slidebar / hover-fade / always-visible（v7.3 详见 `patterns/card-list.md` §9.3） |
 | DataTable → Pagination | ALLOW | 分页控件 |
 | DataTable → Dialog | WARN | 确认弹窗由全局状态管理 |
 | DataTable → Form | FORBID | 表格内不应直接嵌套完整表单 |
-| Sidebar → DescriptionList | FORBID | 描述列表不应嵌套在侧边栏 |
+| OpSidebar → DescriptionList | FORBID | 描述列表不应嵌套在侧边栏 |
 
 ---
 
@@ -342,14 +341,14 @@ pointer-events: none;
 
 ### 8.1 L2 导航列表 (l2-sidebar)
 
-> 布局模式: 模式D + Sidebar(TWO_COL) | 核心差异: 左侧 240px 分类导航 + 右侧标准列表
+> 布局模式: 模式D + OpSidebar(TWO_COL) | 核心差异: 左侧 240px 分类导航 + 右侧标准列表
 
 #### 布局骨架
 
 ```
 ┌──────────┬──────────────────────────────────────────────┤
 │          │  PageHeader + ActionToolbar + DataTable      │
-│  Sidebar │  + BulkActionBar + Pagination                │
+│  OpSidebar │  + BulkActionBar + Pagination                │
 │ (240px)  │  (同标准列表页完整结构)                        │
 │          │                                              │
 │ [分类A]  │                                              │
@@ -365,17 +364,17 @@ pointer-events: none;
 | 维度 | 标准列表 | L2 导航列表 |
 |------|----------|-------------|
 | 布局 | SINGLE_COL / TWO_COL | **TWO_COL** |
-| Sidebar | 可选 | **必需** |
+| OpSidebar | 可选 | **必需** |
 
-> Sidebar 收起/展开、交互规范、色彩全部引用 `rules/design-tokens.json` sidebarRules。
+> OpSidebar 收起/展开、交互规范、色彩全部引用 `rules/design-tokens.json` sidebarRules。
 
-#### Sidebar 交互规范
+#### OpSidebar 交互规范
 
 | 交互 | 行为 |
 |------|------|
 | 点击分类 | 刷新右侧列表数据，保持当前页码 |
 | 展开/收起 | 切换子分类列表，动画过渡 |
-| 收起 Sidebar | 宽度缩至 68px，仅显示图标 |
+| 收起 OpSidebar | 宽度缩至 68px，仅显示图标 |
 | 选中态 | 灰色背景 `var(--sidebar-active)` |
 | 手风琴 | 打开一个分组自动关闭其他分组 |
 | 收起态 Tooltip | Hover 显示节点名称 |
@@ -388,7 +387,7 @@ pointer-events: none;
 
 | 验证项 | 检查点 | 目标 |
 |--------|--------|------|
-| Sidebar 规格 | 展开240px / 收起68px | 正确 |
+| OpSidebar 规格 | 展开240px / 收起68px | 正确 |
 | 分类选中态 | 灰色背景 `var(--sidebar-active)` | 正确 |
 | 分类切换 | 右侧列表刷新 | 正确 |
 | 计数徽章 | 每项右侧灰色 12px | 正确 |
@@ -480,7 +479,7 @@ pointer-events: none;
 
 | 维度 | 标准列表 | 抽屉中列表 |
 |------|----------|-----------|
-| 容器 | PageContainer | **Sheet** |
+| 容器 | OpPageContainer | **Sheet** |
 | 触发方式 | 直接访问 URL | **点击按钮/链接打开 Sheet** |
 | 选择返回 | 跳转页面 | **选择后点击确定关闭 Sheet，返回选中数据** |
 | 宽度 | 全宽/自适应 | **固定宽度 (600-900px)** |
@@ -521,7 +520,7 @@ pointer-events: none;
 
 ```
 ┌──────────┬──────────────────────────────────────────────┤
-│  Sidebar │  PageHeader: 标题(18px/medium)                   │
+│  OpSidebar │  PageHeader: 标题(18px/medium)                   │
 │          │  ActionToolbar: [创建] + [搜索🔍] [高级筛选▾]    │
 │          │  ┌─── AdvancedFilterPanel ───────────────┐   │
 │          │  │ 条件1: [Select] [Input]               │   │
@@ -562,11 +561,11 @@ pointer-events: none;
 - 筛选条件清空后，FilterTag 区域隐藏（display: none）
 - 支持"清空全部"操作
 
-#### 与 PageContainer 模式对照
+#### 与 OpPageContainer 模式对照
 
 高级筛选列表使用 **模式D+**：
 ```
-PageContainer → ContentWrapper → PageHeader + ActionToolbar + AdvancedFilterPanel(可展开) + DataTable + BulkActionBar + Pagination
+PageShell → OpSidebar + OpPageContainer → PageHeader + ActionToolbar + AdvancedFilterPanel(可展开) + DataTable + BulkActionBar + Pagination
 ```
 
 #### 验证差异项
@@ -588,7 +587,7 @@ PageContainer → ContentWrapper → PageHeader + ActionToolbar + AdvancedFilter
 | 共享规则 | 路径 | 被引用子类型 |
 |----------|------|-------------|
 | 表格列元规则 | `_shared/column-meta-rules.md` | standard, l2-sidebar, expandable, drawer, view-toggle（列表视图） |
-| SearchCombo 规范 | `_shared/search-combo-spec.md` | 全部子类型 |
+| SearchCombo 规范 | `rules/common-components.json` → SearchCombo | 全部子类型 |
 | 业务卡片三件套规格 | `_shared/item-card-spec.md` | pure-card, standard-card, view-toggle |
 
 > v7.9 变更：操作列规范（原 `_shared/action-column-spec.md`）和状态-操作模式（原 `_shared/state-action-pattern.md`）已合并到本文件 §6、§7。
@@ -619,7 +618,7 @@ PageContainer → ContentWrapper → PageHeader + ActionToolbar + AdvancedFilter
 
 - **读取路径**：见根技能 `../../SKILL.md` §4.5 四阶段读取决策树
   - 阶段①：`page-types.json` + `business-mapping.json`
-  - 阶段②：`page-frame.json` + `layout-rules.json` + `page-flow.json` + `_shared/search-combo-spec.md`；卡片子类型追加读取 `patterns/card-list.md`；OpenTrek 标准列表追加读取 `patterns/standard-list-opentrek.md`
+  - 阶段②：`page-frame.json` + `page-flow.json` + `common-components.json`（SearchCombo）；卡片子类型追加读取 `patterns/card-list.md`；OpenTrek 标准列表追加读取 `patterns/standard-list-opentrek.md`
   - 阶段②.5：`products/{产品}/columns.json` + `states.json`
   - 阶段③（生成 HTML 时）：`design-tokens.json` + `design-tokens.css` + `styling.json` + `../../boundaries.md` + `../../foundations.md`
 
@@ -635,8 +634,8 @@ PageContainer → ContentWrapper → PageHeader + ActionToolbar + AdvancedFilter
 
 | 检查项 | 检查点 | 目标 |
 |--------|--------|------|
-| 嵌套结构 | PageContainer → ContentWrapper → Card(白卡容器) → PageHeader/ActionToolbar/DataTable/Pagination | 100% |
-| Card 内左右对齐 | 非 Table 组件 padding = 0（由 Card.paddingX 20px 提供）；Table 首末列 paddingX = 20px | 100% |
+| 嵌套结构 | PageShell → OpSidebar + OpPageContainer → PageHeader/ActionToolbar/DataTable/Pagination | 100% |
+| Card 内左右对齐 | 非 Table 组件 padding = 0（由 OpPageContainer 内白卡 p-6 提供）；Table 首末列 paddingX = 20px | 100% |
 | 必需组件 | PageHeader、ActionToolbar、Pagination + 子类型组件 | 100% |
 | 禁止组件 | 无内联编辑、拖拽排序、无限滚动、悬浮操作栏、右键菜单 | 0 个 |
 | 操作可用性 | 状态-操作矩阵匹配（§7） | 所有状态正确 |

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" |