@teamix-evo/skills 0.10.2 → 0.11.1

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

@@ -0,0 +1,318 @@
+# OpenTrek 标准列表页业务规则
+
+> 路由自 [standard-list.md](./standard-list.md)
+> 本文件基于 OpenTrek DEV 平台实际页面截图沉淀，定义 DataTable 标准列表页的页面级组合规则。
+> 所有 UI 组件引用均指向 `packages/ui/src/components/`，开发时必须从该路径导入。
+> 通用列表规则（padding/操作列/状态-操作模式）见 [../SKILL.md](../SKILL.md) §5-§7。
+
+---
+
+## 1. 页面模式速查表
+
+| 模式 ID | 名称 | 典型页面 | 核心结构 |
+|---------|------|----------|----------|
+| **OT-STD-1** | Tab 导航标准列表 | 上架CoWorker / 内置资产 / 评测集 / 评测任务 / 元数据管理 | Tabs + ActionToolbar + DataTable + Pagination |
+| **OT-STD-2** | 简单标准列表 | 操作记录 / Trace追踪 | ActionToolbar + DataTable + Pagination（无 Tabs） |
+| **OT-STD-3** | 查询面板标准列表 | 内置服务 > 模型接入 | QueryPanel(可折叠) + ActionToolbar(简化) + DataTable + Pagination |
+
+---
+
+## 2. OT-STD-1：Tab 导航标准列表
+
+> 典型页面：上架CoWorker（数字员工/知识库/Skills/模型服务上架）、内置资产（内置Skills/内置评测集/内置评估器）、评测集（空间/内置）、评测任务（独立任务/自动化任务）、元数据管理（Skills标签/知识库元数据）
+
+### 布局骨架
+
+```
+┌─ PageShell (components/page-shell) ──────────────────────────────────────┐
+│ sidebar: Sidebar (components/sidebar)                                     │
+│ children:                                                                 │
+│ ┌─ ContentCard (components/card → Card + CardContent) ──────────────┐   │
+│ │ PageHeader (components/page-header → PageHeader + PageHeaderHeading)│   │
+│ │   标题: "上架CoWorker" / "内置资产" / "评测集" / "元数据管理"            │   │
+│ │                                                                    │   │
+│ │ Tabs (components/tabs → Tabs + TabsList[variant='line'] + TabsTrigger)│ │
+│ │   [数字员工上架 | 知识库上架 | Skills上架 | 模型服务上架]                  │   │
+│ │   [内置Skills | 内置评测集 | 内置评估器]                               │   │
+│ │                                                                    │   │
+│ │ TabsContent:                                                       │   │
+│ │   ActionToolbar (flex, nowrap):                                    │   │
+│ │     .left-actions:                                                 │   │
+│ │       Button (variant='default', color='primary') "+ 上架模型"       │   │
+│ │     .search-combo (margin-left: 20px):                             │   │
+│ │       Input placeholder="搜索模型服务展示名称"                          │   │
+│ │     .right-tools:                                                  │   │
+│ │       [Select "全部类型 ▼"] *可选                                    │   │
+│ │       [ToggleGroup 状态筛选] *可选                                   │   │
+│ │                                                                    │   │
+│ │   DataTable (components/data-table):                               │   │
+│ │     thead: 列标题行                                                  │   │
+│ │     tbody: 数据行 × N                                               │   │
+│ │                                                                    │   │
+│ │   Pagination (components/pagination):                              │   │
+│ │     共 50 条  每页显示: [10 ▼]  [‹] [1] [2] [3] [4] [5] [›]        │   │
+│ └────────────────────────────────────────────────────────────────────┘   │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+### Tab 行为规范
+
+| 规则 | 说明 |
+|------|------|
+| variant | `TabsList` 使用 `variant='line'`（下划线样式），禁止使用 `default`/`card` |
+| 位置 | Tabs 紧接 PageHeader 下方，ActionToolbar 之上 |
+| 切换行为 | 切换 Tab 时重置 DataTable 数据和分页到第 1 页 |
+| 独立配置 | 每个 TabsContent 拥有独立的 ActionToolbar + DataTable + Pagination |
+| 只读 Tab | 内置/公共数据 Tab 可隐藏创建按钮，仅保留搜索 |
+
+### 读写权限差异
+
+| Tab 类型 | 创建按钮 | 操作列 | 示例 |
+|----------|----------|--------|------|
+| 空间/可编辑 | ✅ 显示 | 详情 + 编辑 + 删除 | 空间评测集 |
+| 内置/只读 | ❌ 隐藏 | 仅"详情" | 内置评测集 |
+
+---
+
+## 3. OT-STD-2：简单标准列表
+
+> 典型页面：操作记录、Trace追踪（审计/日志类页面，无 Tabs）
+
+### 布局骨架
+
+```
+┌─ PageShell ──────────────────────────────────────────────────────────────┐
+│ sidebar: Sidebar                                                          │
+│ ┌─ ContentCard ──────────────────────────────────────────────────────┐   │
+│ │ PageHeader: "操作记录" / "Trace追踪"                                  │   │
+│ │                                                                    │   │
+│ │ ActionToolbar (flex, nowrap):                                      │   │
+│ │   .left-actions:                                                   │   │
+│ │     [Button (primary)] "回流评测集" *如有特殊操作                       │   │
+│ │   筛选组合 (多个筛选控件并排):                                          │   │
+│ │     [Select "全部菜单 ▼"] [Select "最近7天 ▼"]                        │   │
+│ │     [Input "请输入"] [🔍] [DateRangePicker "开始日期 - 结束日期 📅"]     │   │
+│ │   .search-combo:                                                   │   │
+│ │     Input placeholder="搜索操作项、操作人..."                           │   │
+│ │                                                                    │   │
+│ │ DataTable + Pagination                                             │   │
+│ └────────────────────────────────────────────────────────────────────┘   │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+### 与 OT-STD-1 差异
+
+| 维度 | OT-STD-1 | OT-STD-2 |
+|------|----------|----------|
+| Tabs | ✅ 必需 | ❌ 无 |
+| 创建按钮 | 通常有 | 通常无（只读日志） |
+| 筛选复杂度 | SearchCombo + 0-1 个 Select | 多筛选控件组合（Select + Input + DateRange） |
+| 典型场景 | CRUD 管理 | 审计/日志/追踪 |
+
+---
+
+## 4. OT-STD-3：查询面板标准列表
+
+> 典型页面：内置服务 > 模型接入（筛选条件 ≥ 3 个，使用持久化查询面板）
+
+### 布局骨架
+
+```
+┌─ PageShell ──────────────────────────────────────────────────────────────┐
+│ sidebar: Sidebar                                                          │
+│ ┌─ ContentCard ──────────────────────────────────────────────────────┐   │
+│ │ PageHeader: "内置服务"                                                │   │
+│ │ Tabs: [沙箱管理 | 消息渠道管理 | 数据源管理 | 模型接入]                     │   │
+│ │                                                                    │   │
+│ │ QueryPanel (bordered card, padding 16px):                          │   │
+│ │   ┌────────────────────────────────────────────────────────┐      │   │
+│ │   │ [Input] [Input] [Input] [Input] [Select "全部 ▼"]      │      │   │
+│ │   │                    [🔍查询] [↻重置] [∧折叠]             │      │   │
+│ │   └────────────────────────────────────────────────────────┘      │   │
+│ │                                                                    │   │
+│ │ ActionToolbar (简化):                                              │   │
+│ │   .left-actions: Button (primary) "+ 接入模型"                      │   │
+│ │                                                                    │   │
+│ │ DataTable + Pagination                                             │   │
+│ └────────────────────────────────────────────────────────────────────┘   │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+### QueryPanel 规范
+
+| 规则 | 说明 |
+|------|------|
+| 容器 | 灰色背景面板（`bg-muted/50`），rounded-lg，padding 16px 20px |
+| 布局 | 输入项一行排列，每行最多 5 个控件，grid 或 flex wrap |
+| 操作按钮 | 行尾对齐：[查询(primary)] [重置(outline)] [折叠(ghost)] |
+| 折叠行为 | 点击"折叠"收起面板仅保留简要描述或完全隐藏；点击"展开"恢复 |
+| 位置 | Tabs 下方、ActionToolbar 上方 |
+| 与 §8.4 差异 | §8.4 通过 ActionToolbar 内"高级筛选"按钮触发；OT-STD-3 为始终可见面板 |
+
+---
+
+## 5. ActionToolbar 变体矩阵
+
+| 变体 | 结构 | 典型页面 |
+|------|------|----------|
+| **A: Primary + Search + Select** | `[+创建] [SearchInput🔍] [Select▼]` | 上架CoWorker > 模型服务上架 |
+| **B: Primary + Desc + Search(右)** | `[+新建] "说明文本..." [SearchInput🔍→右侧]` | 元数据管理 > Skills标签 |
+| **C: Primary + Search + StatusToggle(右)** | `[+新建] [SearchInput🔍] ‖ [全部│成功│失败│进行中│终止│排队中]` | 评测任务 > 独立任务 |
+| **D: Primary + Multi-filter** | `[回流评测集] [Select▼] [Select▼] [Input🔍] [DateRange📅]` | Trace追踪 |
+| **E: Search-only** | `[SearchInput🔍]` | 评测集 > 内置评测集（只读） |
+| **F: Primary + Search** | `[+新建] [SearchInput🔍]` | 评测集 > 空间评测集 |
+
+### 变体 B: 说明文本规范
+
+- 位置：紧跟 Primary 按钮右侧，字体 `text-sm text-muted-foreground`
+- 不可交互，仅作为页面用途说明
+- Search 使用 `margin-left: auto` 推到右侧
+
+### 变体 C: StatusToggle 规范
+
+- 组件：`components/toggle-group` → `ToggleGroup`(type='single') + `ToggleGroupItem`
+- 位置：`.right-tools` 内，`margin-left: auto` 推到右侧
+- 选中态：`variant='outline'`，选中项高亮（`bg-primary text-primary-foreground` 或底部指示线）
+- 选项来源：业务状态枚举 + "全部"（默认选中）
+- 交互：切换后立即筛选 DataTable，重置分页到第 1 页
+
+### 变体 D: 多筛选组合规范
+
+- 筛选控件直接并排在 ActionToolbar 中（非独立 QueryPanel）
+- 适用条件：筛选项 2-4 个且均为简单控件（Select/Input/DateRange）
+- 间距：控件间 gap = 8px
+- DateRangePicker：`components/date-picker` → `DateRangePicker`，格式 "YYYY-MM-DD"
+
+---
+
+## 6. 列数据类型规范
+
+| 类型 ID | 显示形式 | 组件/样式 | 示例 |
+|---------|----------|-----------|------|
+| **text** | 普通文本 | `text-sm` | "数据处理"、"admin" |
+| **bold-link** | 加粗可点击文本 | `font-medium text-primary cursor-pointer` | 通用问答评测集 |
+| **mono-code** | 等宽字体 ID | `font-mono text-sm` | bK5nP7qR2t、tr_2026yiea2mqu |
+| **subtitle** | 主文本 + 灰色副标题 | 主: `text-sm`; 副: `text-xs text-muted-foreground` | qwen3.6-plus ↵ 阿里云百炼 |
+| **status-dot** | 圆点 + 状态文本 | `Badge`(variant='dot') 或自定义: `●` 8px + 文本 | ● 启用 |
+| **status-badge** | 彩色圆角徽章 | `Tag`(variant='status', status='success/warning/info/default') | 成功(绿) / 进行中(蓝) / 排队中(灰) |
+| **count-icon** | 数字+单位+信息图标 | `text-sm` + `Tooltip` 包裹的 ⓘ 图标 | 13个 ⓘ |
+| **user-format** | 姓名 (username) | `text-sm`: "姓名" + `text-muted-foreground`: "(username)" | 张明 (zhangming) |
+| **datetime** | 日期时间 | `text-sm tabular-nums` | 2024-08-05 10:00:00 |
+| **json-preview** | JSON 内容截断 | `font-mono text-xs truncate max-w-[400px]` | {"message":{"text":"..."}} |
+| **action-link** | 操作链接（蓝色） | `text-primary cursor-pointer text-sm` | 操作日志 / Span分析 |
+| **destructive-link** | 危险操作链接（红色） | `text-destructive cursor-pointer text-sm` | 删除 |
+
+---
+
+## 7. 操作列模式
+
+| 模式 | 操作项 | 适用场景 | 示例页面 |
+|------|--------|----------|----------|
+| **单操作-危险** | `删除`(red) | 仅删除权限 | 上架CoWorker > 模型服务 |
+| **单操作-链接** | `操作日志`(blue) / `Span分析`(blue) | 审计/追踪类 | 操作记录 / Trace追踪 |
+| **双操作** | `编辑` + `删除`(red) | 简单 CRUD | 元数据管理 > Skills标签 |
+| **三操作** | `详情` + `编辑` + `删除`(red) | 完整 CRUD | 内置资产、空间评测集 |
+| **三操作-状态** | `查看` + `编辑` + `停用`(blue) | 含状态切换 | 内置服务 > 模型接入 |
+| **状态驱动** | 操作随行状态变化 | 异步任务管理 | 评测任务 |
+| **只读** | `详情`(blue) | 内置/共享数据 | 内置评测集 |
+
+### 状态驱动操作矩阵（评测任务示例）
+
+| 行状态 | 可用操作 | 说明 |
+|--------|----------|------|
+| 成功 | 详情 + 评测报告 + 删除(red) | 完成态，支持查看报告和清理 |
+| 进行中 | 详情 + 终止 | 运行态，支持中断 |
+| 排队中 | 详情 + 终止 | 等待态，支持取消 |
+| 失败 | 详情 + 删除(red) | 异常态，支持查看和清理 |
+
+---
+
+## 8. 分页模式
+
+| 模式 | 结构 | 适用场景 |
+|------|------|----------|
+| **标准分页** | `共 N 条  每页显示: [10▼]  [‹] [1] [2] [3] [4] [5] [›]` | 数据量 ≤ 100 页 |
+| **省略分页** | `共 N 条  每页显示: [10▼]  [‹] [1] [2] ... [50] [›]` | 数据量 > 5 页，中间用省略号 |
+| **隐藏分页** | 不显示 Pagination | 数据量 ≤ 1 页（默认每页条数） |
+
+### 省略规则
+
+- 总页数 ≤ 7：全部显示，无省略
+- 总页数 > 7：显示首页 + 当前页±1 + 末页，中间用 `...` 省略
+- 省略号不可点击，仅作视觉占位
+
+---
+
+## 9. Checkbox 批量操作（评测任务模式）
+
+| 规则 | 说明 |
+|------|------|
+| 触发 | DataTable 首列为 Checkbox 列 |
+| 表头 Checkbox | 三态：未选(空) / 半选(横线) / 全选(勾选) |
+| 行 Checkbox | 二态：未选 / 选中 |
+| 选中行高亮 | `bg-muted/50` 背景 |
+| 适用模式 | 仅 OT-STD-1 且有批量操作需求时启用 |
+
+> 批量操作栏行为详见 [standard-list.md](./standard-list.md) §5。
+
+---
+
+## 10. 页面级组件清单
+
+| 区域 | UI 组件库引用 | 用途 |
+|------|--------------|------|
+| 页面框架 | `components/page-shell` → `PageShell` | L1 级页面壳 |
+| 侧边导航 | `components/sidebar` → `Sidebar` + `SidebarContent` + `SidebarMenu` | 左侧导航 |
+| 白卡容器 | `components/card` → `Card` + `CardContent` | 内容区白色容器 |
+| 页面标题 | `components/page-header` → `PageHeader` + `PageHeaderHeading` | 标题 18px/500 |
+| Tab 切换 | `components/tabs` → `Tabs` + `TabsList`(variant='line') + `TabsTrigger` + `TabsContent` | 子视图切换 |
+| 主操作按钮 | `components/button` → `Button`(variant='default', color='primary') | "+ 新建XXX" |
+| 搜索输入 | `components/input` → `Input` | 搜索框 |
+| 下拉筛选 | `components/select` → `Select` + `SelectTrigger` + `SelectContent` + `SelectItem` | 下拉选择 |
+| 状态筛选 | `components/toggle-group` → `ToggleGroup`(type='single') + `ToggleGroupItem` | 状态切换筛选 |
+| 日期范围 | `components/date-picker` → `DateRangePicker` | 日期区间筛选 |
+| 数据表格 | `components/data-table` → `DataTable` | 数据展示 |
+| 复选框 | `components/checkbox` → `Checkbox` | 行选择/批量操作 |
+| 分页 | `components/pagination` → `Pagination` + `PaginationContent` + `PaginationItem` | 底部分页 |
+| 状态标签 | `components/tag` → `Tag`(variant='status') | 状态展示 |
+| 状态徽章 | `components/badge` → `Badge` | 状态圆点 |
+| 提示 | `components/tooltip` → `Tooltip` + `TooltipTrigger` + `TooltipContent` | 列标题 ⓘ 说明 |
+| 确认弹窗 | `components/alert-dialog` → `AlertDialog` | 删除确认 |
+| 提示消息 | `components/sonner` → `toast` | 操作反馈 |
+
+---
+
+## 11. 页面映射表（截图 → 模式）
+
+| 页面名称 | 模式 | Toolbar 变体 | 操作列模式 | 特殊列类型 |
+|----------|------|-------------|-----------|-----------|
+| 上架CoWorker > 模型服务上架 | OT-STD-1 | A | 单操作-危险 | subtitle |
+| 元数据管理 > Skills标签 | OT-STD-1 | B | 双操作 | count-icon |
+| 内置服务 > 模型接入 | OT-STD-3 | QueryPanel | 三操作-状态 | status-dot |
+| 内置资产 > 内置评测集 | OT-STD-1 | F | 三操作 | bold-link, mono-code |
+| 操作记录 | OT-STD-2 | D(简化) | 单操作-链接 | user-format |
+| Trace追踪 | OT-STD-2 | D | 单操作-链接 | mono-code, json-preview |
+| 评测任务 > 独立任务 | OT-STD-1 | C | 状态驱动 | status-badge, checkbox |
+| 评测集 > 内置评测集 | OT-STD-1 | E | 只读 | bold-link |
+| 评测集 > 空间评测集 | OT-STD-1 | F | 三操作 | bold-link |
+
+---
+
+## 12. 验证清单
+
+| 验证项 | 检查点 | 目标 |
+|--------|--------|------|
+| 模式匹配 | 页面结构与模式 ID（OT-STD-1/2/3）一致 | 100% |
+| Tab variant | 使用 `variant='line'`，非 default | 正确 |
+| Tab 切换 | 切换时重置 DataTable + 分页 | 正确 |
+| 只读 Tab | 内置数据 Tab 无创建按钮，操作列仅"详情" | 正确 |
+| Toolbar 变体 | 变体结构与矩阵匹配（§5） | 正确 |
+| StatusToggle | ToggleGroup(type='single')，选中即筛选 | 正确 |
+| QueryPanel | 折叠/展开正常，查询/重置功能完整 | 正确 |
+| 列数据类型 | 列渲染方式与类型规范（§6）一致 | 正确 |
+| 操作列模式 | 操作项与模式矩阵（§7）匹配 | 正确 |
+| 状态驱动操作 | 不同行状态显示不同操作项 | 正确 |
+| 分页省略 | 总页数 > 7 时正确使用省略号 | 正确 |
+| 组件引用 | 所有组件从 `packages/ui/src/components/` 导入 | 100% |
+| 危险操作样式 | "删除"链接使用 `text-destructive` | 正确 |
+| 说明文本 | 变体 B 的说明文本使用 `text-muted-foreground` | 正确 |

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

@@ -2,25 +2,18 @@
 
 > ⚠️ **Prerequisites**: 你必须已在 [generation-flow.md](../generation-flow.md) Step 2 确认页面类型为 **Dashboard**，并由 Step 3 引导到这里。
 
-> AI 实操路径:Step 2(页面类型识别)判定为 Dashboard 后,本文档接管。生成频次低于 ListPage / FormPage / DetailPage,当前为最小规范,后续按 list-page.md / form-page.md 体例扩充。
+> **完整规范已迁移**：本文件为索引概览，完整生成规范见 [`../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)。
 
 ---
 
-## 1. 标准结构
-
-```text
-┌────────────────────────────────────────────┐
-│ PageHeader: 概览        [今日 ▼] [刷新]    │
-├────────────────────────────────────────────┤
-│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐        │
-│ │订单数│ │待办数│ │成交额│ │完成率│  ← StatCards
-│ │ 1024 │ │   3  │ │¥12.3K│ │ 68%  │        │
-│ └──────┘ └──────┘ └──────┘ └──────┘        │
-├────────────────────────────────────────────┤
-│ 业务趋势                   最近异常         │
-│ [Chart 折线图]            [Timeline]        │
-└────────────────────────────────────────────┘
-```
+## 1. 子类型速查
+
+| 子类型ID | 识别关键词 | 核心组件 |
+|----------|-----------|----------|
+| overview | "概览"/"总览"/"监控首页"/"仪表板"/"指标监控" | TimeToolbar + StatCardRow + ChartPanel(multi) |
+| metric-detail | "观测"/"明细指标"/"性能监控" | Breadcrumb + FilterBar + ChartGrid |
+| realtime | "实时"/"实时监控" | TimeToolbar + LiveChart + AlertTimeline |
 
 ---