---
name: cockpit-page-builder
description: "生成驾驶舱(数据看板)静态HTML页面。基于元粟V5设计规范和PRD指标规范，使用ECharts CDN。不要用于一般HTML页面生成或Vue组件开发。"
version: "3.1.0"
---

# Cockpit Page Builder / 驾驶舱页面构建器

## Summary / 摘要

**Input:** Cockpit role view + V5 layout/indicator docs + 元粟V5设计规范 → **Output:** Self-contained static HTML with ECharts charts, V5 Design Token CSS variables, responsive breakpoints, and JavaScript interaction logic.

## When to Activate / 触发条件

- **ZH:** "驾驶舱HTML", "静态页面", "看板原型", "cockpit", "数据看板", "驾驶舱", "董事长看板"
- **EN:** "cockpit html", "dashboard prototype", "static cockpit", "chairman dashboard"

## Workflow / 工作流程

### Step 1: Load Design Context / 加载设计上下文
Read design docs to confirm target role and accessible indicator/component scope.

**Required docs / 必读文档:**
- `prd/驾驶舱-完备需求分析-终版-V5.md`
- `prd/驾驶舱-V5-布局交互设计文档.md`
- **`references/opespro-v5-design-spec.md`** — 元粟 V5.0 设计规范执行摘要（颜色Token、布局铁律、KPI卡片模式、状态标签、禁止事项）

### Step 2: Confirm Page Structure / 确认页面结构
Output ASCII wireframe per `references/layout-structure.md`.

### Step 3: Prepare Data / 准备数据
Mock data per PRD V5 §3 indicators.

### Step 4: Generate HTML / 生成页面
Output single self-contained HTML file. **Must comply with both cockpit Iron Laws AND V5 Design Token rules below.**

### Step 5: Verify / 验证
Check: semantic tags, ARIA attributes, responsive breakpoints, V5 Design Token compliance, state coverage.

---

## V5 Design Token Iron Laws / V5 设计令牌铁律 (NEW in v3.1)

| # | Rule / 规则 | Detail / 详情 |
|---|-------------|---------------|
| DT-1 | 颜色全用 CSS 变量 | 所有颜色必须定义为 `:root` CSS 变量，禁止硬编码 `#xxx` |
| DT-2 | 仅用7级间距 | `gap/padding` 仅用 4/8/12/16/24/32/48，禁止其他值 |
| DT-3 | 仅 Flexbox | 禁止 CSS Grid（模式B），用 Flex 模拟栅格 |
| DT-4 | 单位仅 px | 禁止 %/vw/vh/rem/em/calc() |
| DT-5 | 圆角仅2级 | `--radius-sm: 2px`(按钮/标签), `--radius-md: 8px`(卡片/模块) |
| DT-6 | 阴影仅2级 | `--shadow-header`(标题栏), `--shadow-modal`(弹窗)，无其他阴影 |
| DT-7 | 标题竖线装饰 | 所有模块标题前用 `2px` 品牌色竖线 `::before`，禁止图标 |
| DT-8 | 标题下方无边框 | 所有标题区域 `border-bottom: none`，仅靠间距分隔 |
| DT-9 | 数字用 D-DIN 字体 | 所有 KPI 数值、金额使用 `D-DIN`，系统无则 CDN 加载 |
| DT-10 | ECharts 用 V5 色系 | 图表颜色必须来自 V5 色系（11色 ECharts + 13色 图表参照），禁止随机色 |

## Cockpit Iron Laws / 驾驶舱铁律

| # | Rule / 规则 | Detail / 详情 |
|---|-------------|---------------|
| 1 | ECharts CDN only | echarts@5.5.0 CDN 为唯一外部依赖 |
| 2 | IDX-xxx IDs | KPI 数据必须使用 PRD V5 的 IDX-xxx 格式 |
| 3 | COMP-xxx IDs | 每个组件容器标记 V5 组件 ID |
| 4 | ECharts for charts | 环形/柱状/折线→ECharts；表格→纯HTML |
| 5 | `function` keyword | 所有 JS 用 `function` 关键字，定义在调用前 |
| 6 | Dynamic breadcrumbs | 面包屑由 JS 运行时创建，非静态HTML |
| 7 | Return `()=>void` | updateBreadcrumb/ drilldownBreadcrumb 必须返回 `()=>void` |
| 8 | NO drawer/slide-in | 详情导航用 `<a href="detail.html?...">` 链接 |

## V5 Layout Rules / V5 布局规则 (NEW in v3.1)

### KPI 数值卡模式

```css
.kpi-card {
  display: flex; flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: none; border: none;
  min-width: 0;
}
.kpi-card .label {
  font-size: 14px; color: var(--color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-card .value {
  font-size: 26px; font-weight: 700;
  font-family: 'D-DIN', sans-serif;
  color: var(--color-brand);
  white-space: nowrap;
}
```

**禁止**：趋势箭头、百分比涨跌、迷你折线图(sparkline)、描边(border)。

**KPI 布局**：`flex-wrap:wrap`，≤8个=1行、9-15个=2行、≥16个=3行，平均分布。

### 模块标题装饰

```css
.module-title {
  display: flex; align-items: center; gap: 8px;
  border-bottom: none; /* 禁止横线 */
}
.module-title::before {
  content: ''; display: block;
  width: 2px; height: 18px;
  border-radius: 2px;
  background: var(--color-brand);
  flex-shrink: 0;
}
```

### 状态标签颜色映射

| 状态 | 文字色 | 背景色 |
|------|--------|--------|
| 流程中/进行中 | `#397dff` | `rgba(57,125,255,0.1)` |
| 已完成/成功 | `#67c23a` | `rgba(103,194,58,0.1)` |
| 已终止/报错 | `#ee0a24` | `rgba(238,10,36,0.1)` |
| 待处理/警告 | `#e6a23c` | `rgba(230,162,60,0.1)` |
| 审批中 | `#f9822b` | `rgba(249,130,43,0.1)` |

### 业务数据格式

- **金额**：千分位 + ≥1亿"亿"/≥1万"万" + 右对齐
- **日期**：`YYYY-MM-DD`，日期时间 `YYYY-MM-DD HH:mm`
- **表格列顺序**：主标识(可点击)→业务状态(标签)→金额(右对齐)→负责人→时间→操作(最右)

## Red Flags / 禁止事项 (Updated v3.1)

| Flag | Condition / 条件 | Action / 动作 |
|------|------------------|---------------|
| INPUT-01 | PRD docs missing | 🔴 Abort |
| INPUT-02 | Role not specified | 🔴 Abort |
| DT-01 | 颜色硬编码(非 CSS 变量) | 🔴 强制改为 CSS 变量 |
| DT-02 | 非标间距值(非7级之一) | 🔴 强制改为标准间距 |
| DT-03 | CSS Grid 使用 | 🔴 强制改为 Flexbox |
| DT-04 | KPI 卡片含趋势箭头/折线图 | 🔴 移除趋势元素 |
| DT-05 | 标题前用了图标(非竖线) | 🔴 改为竖线 `::before` |
| DT-06 | 标题下方有横线 | 🔴 移除 `border-bottom` |
| DT-07 | ECharts 颜色非 V5 色系 | 🔴 改为 V5 11+13 色系 |
| EXEC-02 | COMP-xxx missing | 🔴 Force label |
| EXEC-03 | Static breadcrumbs | 🔴 Must be JS-generated |
| EXEC-04 | Drawer/slide-in detected | 🔴 Abort |
| EXEC-05 | ECharts not loaded | 🔴 Abort |
| OUTPUT-01 | Semantic tags missing | 🔴 Add header/section/nav/main |

🔴 = abort / 🟡 = warn+tag

## State Coverage / 状态覆盖 (NEW v3.1)

每页必须包含：
- **加载态**：骨架屏 `skeleton` 或 `loading` spinner
- **空态**：无数据占位卡片
- **错误态**：错误提示 toast/通知栏
- **禁用态**：按钮 `opacity:0.5 + cursor:not-allowed`（非仅透明度降低）
- **成功反馈**：操作成功 toast(2-3秒自动消失)

## Auto-Review Checklist / 自检清单 (Updated v3.1)

### 基础项
1. ECharts CDN `<script>` present (echarts@5.5.0)
2. Every KPI card has `data-indicator="IDX-xxx"`
3. Every chart container has `data-component="COMP-xxx"`
4. All `function` declarations before calls
5. Breadcrumbs dynamically created
6. Four breakpoints: XL/MD/SM/XS
7. ARIA: aria-label/role correct

### V5 设计令牌 (NEW)
8. 所有颜色来自 `:root` CSS 变量（grep `#` → 0）
9. 间距仅用 4/8/12/16/24/32/48（grep 其他 px 值 → 0）
10. 无 `display: grid`（grep grid → 0）
11. KPI 数值用 D-DIN 字体
12. 标题前用竖线 `::before`（无图标 emoji）
13. 标题下无 `border-bottom`
14. ECharts 颜色用 V5 11+13 色系
15. 无趋势箭头/迷你折线图在 KPI 卡片内
16. 含加载态、空态、错误态、禁用态

## Component & Indicator IDs / 组件和指标 ID

| Component ID | Name / 名称 | Type / 类型 |
|-------------|------|------|
| COMP-DOUGHNUT-01 | 投资阶段分布 | Doughnut |
| COMP-BAR-V-01 | 子公司对比 | Bar |
| COMP-LINE-01 | 投资趋势 | Line |
| COMP-TABLE-01 | 项目明细 | Table |
| BREADCRUMB-A-01 | Tab筛选路径 | Breadcrumb |
| BREADCRUMB-B-01 | 组件下钻路径 | Breadcrumb |
| KPI-CARD-GRID-01 | KPI卡片区 | Grid |

| Indicator ID | Name / 名称 | Roles / 角色 |
|-------------|------|-------|
| IDX-001 | 累计投资规模 | R1/R2/R3 |
| IDX-002 | 投资项目数 | R1/R2/R3 |
| IDX-003 | 在管资产规模 | R1/R2 |
| IDX-004 | 累计退出金额 | R1/R2 |
| IDX-005 | AUM基金规模 | R1 |

---

## V12 Production Patterns / V12 生产模式

### 1. KPI Card 3-Mode → `references/kpi-card-templates.md`
Three modes: `.kpi-card-fold` (compact), `.kpi-card-detail` (expanded), `.kpi-card-drawer`.

### 2. Ring Chart Single-Filter → `references/echarts-configs.md`
Click sector isolate, click again restore.

### 3. Mini-Card Grid → `references/kpi-card-templates.md`
`grid-template-columns: repeat(auto-fit, minmax(130px, 1fr))`

### 4. Breadcrumb Accumulation → `references/interaction-patterns.md`
Append via `drillPath.slice()` + `drillPath.push()`.

### 5. Chart-to-Chart Linkage → `references/echarts-configs.md`
Mutual refresh via `window.__cockpitCharts`.

### 6. Time Range Selector → `references/interaction-patterns.md`
Dual year-month dropdowns with "至今".

### 7. CSS Arrow → `references/kpi-card-templates.md`
`::after { content: '›'; }` 90° rotation.

### 8. Drawer Optimization → `references/kpi-card-templates.md`
520px, rounded left corners, `pointer-events: auto` overlay.

---

## Reference Files / 参考文件

| File / 文件 | Contents / 内容 |
|-------------|-----------------|
| `references/opespro-v5-design-spec.md` | **NEW** 元粟 V5.0 设计规范执行摘要（Token/布局/KPI/标签/禁止项） |
| `references/kpi-card-templates.md` | KPI 卡片 HTML/CSS、三模式系统、迷你卡片网格 |
| `references/echarts-configs.md` | ECharts 环形/柱状/折线配置、图表联动 |
| `references/layout-structure.md` | Zone 0-3 布局、CSS 变量、线框图模板 |
| `references/layout-structure-v2.md` | V2 增强布局 |
| `references/interaction-patterns.md` | 面包屑模板+JS、交互规则、时间选择器 |

**V5 Design Docs:**
- `prd/驾驶舱-完备需求分析-终版-V5.md`
- `prd/驾驶舱-V5-布局交互设计文档.md`