--- name: dashboard description: | 管理 / 分析仪表盘，单文件自包含 HTML。固定左侧边栏，顶部栏含用户/搜索，主区域为 KPI 卡片网格和一到两个图表。当需求提到"仪表盘"、"后台"、"分析"、"控制面板"时使用。 triggers: - "dashboard" - "admin panel" - "analytics" - "control panel" - "后台" - "管理后台" - "仪表盘" - "数据看板" - "监控面板" platform: desktop preview: type: html entry: index.html --- # 仪表盘模板生成一个单屏管理 / 分析仪表盘。 ## 工作流程 1. **确定设计令牌** —— 颜色、排版、间距、组件样式都来自此。不要发明新令牌。使用六个 `:root` 变量：`--bg`、`--surface`、`--fg`、`--muted`、`--border`、`--accent`。 2. **分类**仪表盘监控的内容（销售、流量、使用量、事件、运维等）。生成具体、合理的指标名称和数值 —— 不要 "指标 A / 指标 B" 占位符。 3. **布局**所需区域： - **左侧边栏**（220-260px）：顶部品牌标记，6-8 个带图标的导航链接，活跃状态使用强调色。 - **顶部栏**：左侧页面标题，右侧搜索输入 + 用户头像 / 状态。 - **主区域**： - 第 1 行：3-4 个 KPI 卡片（标签 + 大数字 + 较上期变化）。 - 第 2 行：一个主图表（全宽或 2/3）—— 渲染为内联 SVG 折线 / 柱状 / 面积图，使用真实感数字。 - 第 3 行：一个次图表或表格（最近事件、热门项目等）。 4. **编写**一个自包含 HTML 文档： - `` 到 ``，CSS 放在一个内联 `

``` ## KPI 卡片模式 ```html

总营收 ¥128,430 ↑ 12.4% 较上月

``` ## 内联 SVG 折线图模式 ```html ``` ## 自检清单 ### P0 — 必须通过 - [ ] 所有颜色来自 `:root` 令牌，无原始 hex。 - [ ] 强调色最多用两次（侧边栏活跃 + 一个图表高亮）。 - [ ] 侧边栏和顶部栏固定（`position: sticky` 或 `fixed`），主区域独立滚动。 - [ ] KPI 数字使用等宽字体（`.num` 类）。 - [ ] 无占位符文案 —— 每个指标名称和数值都具体、合理。 - [ ] 图表是内联 SVG，无外部 JS 库。 - [ ] 每个主要区域有 `data-od-id`。 ### P1 — 应该通过 - [ ] KPI 卡片显示变化趋势（↑/↓ + 百分比）。 - [ ] 侧边栏导航有活跃状态高亮。 - [ ] 表格/列表有悬停状态。 - [ ] 响应式：小屏下侧边栏可折叠或隐藏。 ## 输出约定将完成的 HTML 通过 `design_preview(html=...)` 预览。写完后一段简短摘要。