@teamix-evo/skills 0.5.0 → 0.6.0

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

@@ -0,0 +1,100 @@
+# 对比型详情页 (comparison-detail)
+
+> 路由自 `../SKILL.md`
+> 布局模式: 模式B
+> 核心组件: PageHeader(面包屑) + 双栏/多栏 DescriptionList
+> PageHeader 规范: `../../../rules/page-header-spec.md`
+
+---
+
+## 1. 识别关键词
+
+`"对比"` / `"比较"` / `"差异"` / `"版本对比"` / `"规格对比"`
+
+## 2. 核心特征
+
+- 双栏或多栏 DescriptionList 并列对照
+- 高亮差异项（字段值不同时标记）
+- 适用场景：版本对比、规格对比、配置变更前后对照
+
+## 3. 标准布局骨架
+
+```
+PageContainer
+  ↓
+ContentWrapper
+  ↓
+Card(白卡容器)
+  ├─ PageHeader (面包屑模式)
+  │  └─ 配置管理 > 版本对比
+  │     [应用版本B] [返回]
+  │
+  ├─ ComparisonHeader — 对比标题栏
+  │  └─ [版本 A (当前)] vs [版本 B (待应用)]
+  │
+  ├─ DescriptionList (双栏对照模式)
+  │  ┌───────────────────┬───────────────────┐
+  │  │ 字段名    版本 A  │ 字段名    版本 B  │
+  │  ├───────────────────┼───────────────────┤
+  │  │ 实例规格  2C4G    │ 实例规格  4C8G ★  │  ← 差异高亮
+  │  │ 存储空间  100GB   │ 存储空间  200GB ★ │
+  │  │ 网络类型  VPC     │ 网络类型  VPC     │  ← 相同项
+  │  │ 备份策略  自动    │ 备份策略  手动 ★  │
+  │  └───────────────────┴───────────────────┘
+  │
+  └─ (无 Footer)
+```
+
+## 4. 必需组件
+
+| 组件 | 说明 |
+|------|------|
+| PageHeader | 面包屑模式 |
+| DescriptionList | 双栏对照展示 |
+| DescriptionItem | 键值对单元 |
+
+## 5. 条件组件
+
+| 组件 | 条件 | 说明 |
+|------|------|------|
+| Badge | 标记差异项 | “已变更” 标识 |
+| Tooltip | 字段悬浮提示 | — |
+| Alert | 变更影响说明 | 顶部警告 |
+| ConfigDiff | 配置文件级对比 | 代码级 diff 展示（详规格见 `resource-detail.md` §7） |
+
+## 6. 差异高亮规则
+
+| 场景 | 视觉处理 |
+|------|----------|
+| 字段值不同 | 变更后值使用 `hsl(var(--primary))` 颜色 + 右侧 ★ 标记 |
+| 字段新增 | 背景 `hsl(var(--success-bg))` + Badge "新增" |
+| 字段删除 | 文字 `hsl(var(--destructive))` + 删除线 |
+| 字段相同 | 默认样式，无特殊标记 |
+
+## 7. 交互规范
+
+| 操作 | 触发方式 | 行为 |
+|------|---------|------|
+| 应用变更 | 点击 PageHeader "应用版本B" | Dialog 确认 → 执行变更 |
+| 返回 | 点击面包屑/返回按钮 | 返回原页面 |
+| 仅查看差异 | Toggle 开关 | 隐藏相同项，仅显示差异行 |
+| 展开详情 | 点击 DescriptionItem | 展开字段变更说明 |
+
+## 8. 嵌套约束
+
+| 父子关系 | 状态 | 说明 |
+|----------|------|------|
+| Card → DescriptionList(双栏) | ✅ ALLOW | 并列对照 |
+| Card → ConfigDiff | ✅ ALLOW | 代码级 diff |
+| DescriptionList → DescriptionList | ❌ FORBID | 不嵌套 |
+
+## 9. 验证清单
+
+> 通用检查项见 `../../../docs/validation-workflow.md`。此处仅列出对比型详情模式差异项。
+
+| 验证项 | 检查点 | 目标 |
+|--------|--------|------|
+| PageHeader | 面包屑模式合规（见 `rules/page-header-spec.md`） | 15 项全部通过 |
+| 双栏对齐 | 两栏宽度相等，字段名对齐 | 正确 |
+| 差异高亮 | 变更项有明确视觉标识 | 正确 |
+| 仅差异视图 | Toggle 后隐藏相同项 | 正确 |

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

@@ -0,0 +1,190 @@
+# 监控详情页 (monitor-detail)
+
+> 路由自 `../SKILL.md`
+> 布局模式: 模式B + C 组合
+> 核心组件: MetricCard + ChartPanel + AlertList + TimeRangeSelector
+> PageHeader 规范: `../../../rules/page-header-spec.md`
+
+---
+
+## 1. 识别关键词
+
+`"监控"` / `"指标"` / `"性能"` / `"告警"` / `"Metrics"` / `"Dashboard"`
+
+## 2. 核心特征
+
+- MetricCard 指标卡（请求量/成功率/延迟/Token消耗）
+- ChartPanel 图表面板（折线图/柱状图/面积图）
+- AlertList 告警列表
+- TimeRangeSelector 时间范围选择
+- **代表场景**：实例监控、模型调用监控、MCP 监控、服务健康度
+
+## 3. 标准布局骨架
+
+```
+PageContainer
+  ↓
+ContentWrapper
+  ↓
+Card(白卡容器)
+  ├─ PageHeader (面包屑模式)
+  │  └─ 实例管理 > 实例详情 > 监控
+  │     [TimeRangeSelector] [⟳ 刷新]
+  │
+  ├─ MetricCard Row (× 4)
+  │  └─ [请求总量 12.5K ↑23%] [成功率 99.2% ↑] [平均延迟 128ms ↓] [Token消耗 1.2M ↑]
+  │
+  ├─ ChartPanel — 全宽请求趋势图
+  │  └─ 折线图: X=时间 Y=请求数
+  │
+  ├─ Tabs
+  │  ├─ 性能指标
+  │  │   └─ ChartPanel Grid (2×2)
+  │  │      ├─ 延迟分布(柱状图)
+  │  │      ├─ 吞吐量(折线图)
+  │  │      ├─ 错误率(面积图)
+  │  │      └─ Token 消耗(折线图)
+  │  ├─ 告警记录
+  │  │   └─ AlertList — 告警列表 + 严重度标识
+  │  └─ 调用明细
+  │      └─ DataTable — 最近调用记录(时间/模型/状态/延迟/Token)
+  │
+  └─ (无 Footer)
+```
+
+## 4. 必需组件
+
+| 组件 | 引用 | 说明 |
+|------|------|------|
+| PageHeader | — | 面包屑模式 |
+| MetricCard | — | 关键指标数值展示 |
+| ChartPanel | — | 图表容器 |
+| TimeRangeSelector | — | 时间范围快捷选择 |
+
+## 5. 条件组件
+
+| 组件 | 引用 | 条件 | 说明 |
+|------|------|------|------|
+| Tabs | — | 多维度监控时 | 性能指标/告警/调用明细 |
+| AlertList | — | 有告警功能时 | 告警事件列表 |
+| DataTable | — | 仅在 Tab 内 | 调用明细表 |
+| Badge | — | 状态标识 | — |
+| Tooltip | — | 数据点提示 | — |
+| Skeleton | — | 加载态 | — |
+
+## 6. 嵌套约束
+
+| 父子关系 | 状态 | 说明 |
+|----------|------|------|
+| Card → MetricCard Row | ✅ ALLOW | 紧跟 PageHeader 之后，横排 |
+| Card → ChartPanel | ✅ ALLOW | 全宽图表 |
+| Tabs → ChartPanel Grid | ✅ ALLOW | Tab 内 2×2 图表网格 |
+| Tabs → AlertList | ✅ ALLOW | Tab 内告警列表 |
+| Tabs → DataTable | ✅ ALLOW | Tab 内调用明细表 |
+| MetricCard → ChartPanel | ❌ FORBID | MetricCard 为原子卡片 |
+| ChartPanel → ChartPanel | ❌ FORBID | 不可嵌套 |
+
+## 7. 交互规范
+
+| 操作 | 触发方式 | 行为 |
+|------|---------|------|
+| 切换时间范围 | 点击 TimeRangeSelector | 全页数据刷新（MetricCard + Chart + AlertList） |
+| 刷新数据 | 点击刷新按钮 | 当前时间范围内全量刷新 |
+| 图表缩放 | 拖拽选区 / 滚轮 | 局部放大时间段 |
+| 查看告警详情 | 点击 AlertList 条目 | 展开告警详情(Sheet 或内联展开) |
+| 确认告警 | 点击确认按钮 | Dialog 确认 → 告警状态变更 |
+| 导出数据 | 点击图表右上角导出 | 导出 CSV/PNG |
+
+## 8. 边界情况
+
+| 场景 | 处理方式 |
+|------|----------|
+| 无监控数据 | ChartPanel 展示 Empty + "等待数据上报" |
+| 数据加载中 | MetricCard 骨架屏 + ChartPanel Skeleton |
+| 时间范围无数据 | 图表展示空折线 + "所选时间段无数据" |
+| 告警列表为空 | AlertList 展示 "暂无告警，一切正常 ✓" |
+| 指标异常 | MetricCard 值变红 + 闪烁提示 |
+| 图表数据点过多 | 自动聚合（1h→分钟级, 7d→小时级） |
+
+---
+
+## 9. 专用业务组件规格
+
+### MetricCard — 指标数据卡
+
+| 属性 | 规格 |
+|------|------|
+| **用途** | 单个关键指标数值展示 |
+| **卡片尺寸** | flex: 1, 最小宽度 200px, 高度 96px |
+| **内边距** | 16px 20px |
+| **背景** | `hsl(var(--gray-muted))` |
+| **圆角** | `var(--radius-md)` = 8px |
+| **标题** | 12px/400, `hsl(var(--muted-foreground))` |
+| **数值** | 24px/600, `hsl(var(--gray-primary))` |
+| **单位** | 14px/400, `hsl(var(--muted-foreground))`，紧跟数值 |
+| **趋势箭头** | ↑=`hsl(var(--success))`, ↓=`hsl(var(--destructive))`, →=`hsl(var(--muted-foreground))` |
+| **趋势百分比** | 12px，颜色同箭头 |
+| **迷你图(sparkline)** | 底部可选，高度 24px，线宽 1.5px，颜色同趋势 |
+| **横排布局** | `display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px` |
+| **响应式** | ≤1200px: repeat(2, 1fr)，≤768px: 1fr |
+
+### ChartPanel — 图表面板
+
+| 属性 | 规格 |
+|------|------|
+| **用途** | 图表容器（折线图/柱状图/面积图） |
+| **容器高度** | 全宽单图 280px，Grid 内 220px |
+| **内边距** | 16px |
+| **背景** | transparent（继承 Card 背景） |
+| **圆角** | `var(--radius-md)` = 8px（有背景时） |
+| **标题栏** | 上方，14px/500 标题 + 右侧操作（导出/全屏） |
+| **坐标轴文字** | 11px, `hsl(var(--muted-foreground))` |
+| **网格线** | `hsl(var(--gray-line))`, 虚线, 0.5px |
+| **折线颜色** | `hsl(var(--primary))` 主线，多线时从调色板取 |
+| **Loading 态** | Skeleton 占位，脉冲动画 |
+| **Empty 态** | 居中 "暂无数据" + 图表图标 |
+| **Grid 布局** | `display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px` |
+
+### AlertList — 告警列表
+
+| 属性 | 规格 |
+|------|------|
+| **用途** | 告警事件列表展示 |
+| **条目高度** | 最小 56px |
+| **条目内边距** | 12px 16px |
+| **条目间距** | 无间距，用 border-bottom 分隔 |
+| **严重度图标** | 左侧 20px 圆点 — Critical=`hsl(var(--destructive))`红, Warning=`hsl(var(--warning))`橙, Info=`hsl(var(--primary))`蓝 |
+| **标题** | 13px/500, `hsl(var(--gray-primary))` |
+| **时间** | 12px/400, `hsl(var(--muted-foreground))` |
+| **描述** | 12px/400, `hsl(var(--gray-secondary-foreground))`，最多 2 行 |
+| **操作** | 右侧 "确认" 按钮(Ghost)，hover 显示 |
+| **空态** | "暂无告警，系统运行正常" + 绿色 ✓ 图标 |
+
+### TimeRangeSelector — 时间范围选择器
+
+| 属性 | 规格 |
+|------|------|
+| **用途** | 时间范围快捷选择 + 自定义范围 |
+| **容器形式** | SegmentedControl 样式(连续按钮组) |
+| **高度** | 32px |
+| **预设选项** | 1h / 6h / 24h / 7d / 30d |
+| **选项字号** | 12px/500 |
+| **选中态** | 背景 `hsl(var(--primary))`, 文字白色 |
+| **未选中态** | 背景 transparent, 文字 `hsl(var(--gray-secondary-foreground))` |
+| **圆角** | `var(--radius-md)` = 8px（外层），内部按钮无圆角（首尾除外） |
+| **自定义范围** | 最右侧日历图标，点击弹出 DateRangePicker |
+| **位置** | PageHeader 右侧，与刷新按钮同行 |
+
+## 10. 验证清单
+
+> 通用检查项见 `../../../docs/validation-workflow.md`。此处仅列出监控详情模式差异项。
+
+| 验证项 | 检查点 | 目标 |
+|--------|--------|------|
+| PageHeader | 面包屑模式合规（见 `rules/page-header-spec.md`） | 15 项全部通过 |
+| MetricCard 横排 | grid 4列布局，gap 12px | 正确 |
+| TimeRangeSelector | PageHeader 右侧，SegmentedControl 样式 | 正确 |
+| ChartPanel Grid | 2×2 网格，gap 16px | 正确 |
+| 时间切换联动 | 切换后全页数据刷新 | 正确 |
+| 告警严重度 | Critical=红, Warning=橙, Info=蓝 | 正确 |
+| 空态处理 | 无数据时各组件正确降级 | 正确 |

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

@@ -0,0 +1,148 @@
+# 资源详情页 (resource-detail)
+
+> 路由自 `../SKILL.md`
+> 布局模式: 模式B + C 组合（Card 分组 + Tabs 分组）
+> 核心组件: PageHeader(面包屑) + InfoCard + DescriptionList + Tabs
+> PageHeader 规范: `../../../rules/page-header-spec.md`
+
+---
+
+## 1. 识别关键词
+
+`"实例详情"` / `"资源"` / `"详情"` / `"查看"` / `"信息"`
+
+## 2. 核心特征
+
+- InfoCard 顶部摘要（组织/资源集/创建人/创建时间）
+- ChartPanel 监控概览（可选；规格遵循 monitor-detail.md §9）
+- Tabs 多维度信息切换（实例详情/监控/云盘/安全组/快照等）
+- DescriptionList 结构化键值对展示
+- 操作按钮组（编辑/删除/续费/更多）
+
+## 3. 标准布局骨架（含 Sidebar）
+
+```
+┌──────────┬──────────────────────────────────────────────┐
+│          │  PageContainer                               │
+│  Sidebar │  ┌─ Card(白卡容器) ───────────────────────┐ │
+│          │  │  PageHeader (仅面包屑，禁止标题)        │ │
+│          │  │  实例与镜像 > 实例列表 > 实例详情        │ │
+│          │  │            [创建镜像] [续费] [更多] [×]  │ │
+│          │  │  InfoCard ─ 基本信息                     │ │
+│          │  │  组织 | 资源集 | 创建人 | 创建时间        │ │
+│          │  │  InfoCard ─ 监控                         │ │
+│          │  │  [CPU使用率折线图] [内存使用率折线图]     │ │
+│          │  │  Tabs                                     │ │
+│          │  │  [实例详情] [监控] [云盘] [安全组] [快照] │ │
+│          │  │  DescriptionList ─ 基本信息               │ │
+│          │  │  架构: X86      地域: cn-beijing          │ │
+│          │  │  实例ID: i-xxx  实例名称: test-ecs        │ │
+│          │  │  实例规格: ecs.c6.large  状态: 运行中     │ │
+│          │  │  DescriptionList ─ 配置信息               │ │
+│          │  │  vCPU: 2      内存: 4 GiB                │ │
+│          │  │  系统盘: 高效云盘 40GiB  OS: Linux 3...   │ │
+│          │  │  DescriptionList ─ 网络信息               │ │
+│          │  │  VPC: vpc-xxx  交换机: vsw-xxx           │ │
+│          │  │  私有IP: 172.16.x.x  EIP: eip-xxx        │ │
+│          │  └────────────────────────────────────────┘ │
+└──────────┴──────────────────────────────────────────────┘
+```
+
+## 4. 简洁模式（无 Sidebar）
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  ┌─ Card(白卡容器) ──────────────────────────────────┐  │
+│  │  PageHeader (仅面包屑，禁止标题)                    │  │
+│  │  用户列表 > 张三                  [编辑] [删除]    │  │
+│  │  DescriptionList (column: 2)                        │  │
+│  │  姓名: 张三    邮箱: zhangsan@example.com           │  │
+│  │  角色: 管理员  状态: 启用                           │  │
+│  │  创建时间: 2026-01-15  更新时间: 2026-04-20         │  │
+│  └───────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────┘
+```
+
+## 5. 必需组件
+
+| 组件 | 引用 | 位置 | 说明 |
+|------|------|------|------|
+| PageHeader | — | top | 面包屑模式 + 操作按钮组 |
+| DescriptionList | — | center | 核心展示组件，支持 2/3/4 列 |
+| DescriptionItem | — | center | 单个键值对单元 |
+
+## 6. 条件组件
+
+| 组件 | 引用 | 条件 | 说明 |
+|------|------|------|------|
+| InfoCard | — | 需展示摘要信息 | 顶部摘要（组织/资源集/创建人） |
+| Tabs | — | 信息分多类展示 | 实例详情/监控/云盘等 Tab |
+| ChartPanel | — | 资源详情页监控区 | CPU/内存/网络监控图表（详规格见 `monitor-detail.md` §9） |
+| StatCard | — | 详情页概览区 | 三段式统计卡（label/value/subtitle） |
+| OverviewStatGrid | — | 多张 StatCard | StatCard 响应式网格容器 |
+
+## 7. 专用业务组件
+
+### ConfigDiff — 配置对比
+
+| 属性 | 规格 |
+|------|------|
+| **用途** | 两个配置版本的 diff 对比展示 |
+| **模式** | inline(单栏标记差异) / split(双栏并排) |
+| **默认模式** | split |
+| **容器高度** | 自适应内容，最大 600px（超出滚动） |
+| **添加行背景** | `hsl(var(--success-bg))` |
+| **删除行背景** | `hsl(0 72% 96%)` (浅红) |
+| **行号** | 双栏各自独立行号 |
+| **顶部信息栏** | 左=旧版本号+时间，右=新版本号+时间，高度 36px |
+| **字体** | monospace, 13px |
+| **统计栏** | 底部显示 "+N行 / -M行" |
+
+### VersionHistory — 版本历史
+
+| 属性 | 规格 |
+|------|------|
+| **用途** | 版本变更时间线，支持回滚操作 |
+| **布局** | 垂直时间线（左侧圆点 + 连线 + 右侧内容） |
+| **时间线圆点** | 8px 圆，当前版本=`hsl(var(--primary))`，历史=`hsl(var(--gray-line))` |
+| **连线** | 1px solid `hsl(var(--gray-line))`，圆点间距 |
+| **条目高度** | 最小 56px |
+| **条目内容** | 版本号(14px/500) + 操作人 + 时间(12px/--muted-foreground) + 变更摘要 |
+| **回滚按钮** | hover 时显示，Ghost 样式，12px "回滚到此版本" |
+| **当前版本标记** | Badge "当前" (primary 色) |
+| **紧凑模式** | compact=true 时条目高度 40px，隐藏变更摘要 |
+
+## 8. 嵌套约束（资源详情页特有）
+
+| 父子关系 | 状态 | 说明 |
+|----------|------|------|
+| Card → InfoCard | ✅ ALLOW | 摘要卡片 |
+| Card → Tabs | ✅ ALLOW | 分类 Tab |
+| InfoCard → DescriptionList | ✅ ALLOW | 摘要区基本信息 |
+| InfoCard → ChartPanel | ✅ ALLOW | 摘要区监控图表（详规格见 monitor-detail.md §9） |
+| Tabs → TabPane → DescriptionList | ✅ ALLOW | Tab 内展示详情 |
+| Tabs → TabPane → DataTable | ✅ ALLOW | Tab 内展示关联资源列表 |
+
+## 9. 与 PageContainer 模式对照
+
+资源详情页使用 **模式B（Card 分组）+ 模式C（Tabs 分组）组合**：
+```
+PageContainer → ContentWrapper → Card → PageHeader(面包屑模式) + InfoCard + Tabs → TabPane[DescriptionList]
+```
+简洁详情页退化为 **模式B**：
+```
+PageContainer → ContentWrapper → Card → PageHeader(面包屑模式) + DescriptionList
+```
+
+## 10. 验证清单
+
+> 通用检查项见 `../../../docs/validation-workflow.md`。此处仅列出资源详情模式差异项。
+
+| 验证项 | 检查点 | 目标 |
+|--------|--------|------|
+| PageHeader | 面包屑模式合规（见 `rules/page-header-spec.md`） | 15 项全部通过 |
+| InfoCard 表面 | 独立 Card 模式跟随 v7.6；嵌入模式仅 padding + border-bottom | 正确 |
+| ChartPanel | 资源页嵌入监控图表时遵循 monitor-detail.md §9 规格 | 正确 |
+| DescriptionList | 列数(默认2)、字段截断+Tooltip、空值"-"占位 | 正确 |
+| Tab 切换 | 懒加载、URL hash 同步、Empty 状态 | 正确 |
+| 返回约定 | 面包屑父级项可点击返回 + 关闭按钮(×) | 正确 |