控制面板技能

仪表盘技能

生成一个单屏管理/分析仪表盘。

工作流程

1. 读取上方的 active DESIGN.md。颜色、字体、间距、组件样式均来自该文件。不要自行发明新的设计令牌。
2. 分类根据需求明确仪表盘监控的内容（销售、流量、使用量、事件、运维等）。生成具体、可信的指标名称和数值——不要使用“指标 A / 指标 B”这类占位符。
3. 布局所需的区域：
   • 左侧边栏（220–260px）：顶部放置品牌标识，6–8 个带图标的导航链接，激活状态使用设计系统的强调色。
   • 顶部栏：左侧为页面标题，右侧为搜索输入框和用户头像/状态。
   • 主区域：
     • 第 1 行：3–4 个 KPI 卡片（标签 + 大数字 + 环比变化）。
     • 第 2 行：一个主图表（全宽或 2/3 宽度）——使用内联 SVG 的折线图/柱状图/面积图绘制，数据基于真实感数字。
     • 第 3 行：一个次要图表或表格（最近事件、热门条目等）。
4. 编写一个自包含的 HTML 文档：
   • 从 <!doctype html> 到 </html>，CSS 放在一个内联 <style> 块中。
   • 使用 CSS Grid 实现整体布局，卡片内部使用 Flexbox。
   • 语义化 HTML：<aside>、<header>、<main>、<section>。
   • 为每个逻辑区域添加 data-od-id="slug" 属性，以便于评论模式。
5. 图表：仅使用内联 SVG，不依赖任何 JS 库。折线图使用约 10 条 <polyline> 并带细微的面积填充。柱状图使用 N 个 <rect>，填充色为设计系统强调色。轴标签使用浅色文字、较小字号。
6. 自检：
   • 所有颜色均来自 DESIGN.md 中的设计令牌。
   • 强调色最多使用两次（侧边栏激活状态 + 一个图表高亮）。
   • 侧边栏和顶部栏固定；主区域独立滚动。
   • 密度与设计系统的情绪匹配——宽松的设计系统使用更多内边距，紧凑的设计系统（如交易、加密货币）减少行间距。

输出约定

在 <artifact> 标签内输出：

<artifact identifier="dashboard-slug" type="text/html" title="仪表盘标题">
<!doctype html>
<html>...</html>
</artifact>

在 artifact 之前有一句说明，之后不附加任何内容。