dashboard

仪表板技能

制作单屏管理 / 分析仪表板。

工作流

1. 阅读当前的 DESIGN.md（已在上方注入）。颜色、字体、间距和组件样式都以此为准。不要自行发明新令牌。
2. 分类简述中仪表板监控的内容（销售、流量、使用情况、事件、运维等）。生成具体且合理的指标名称和值，不要使用“指标 A / 指标 B”之类的占位符。
3. 布局所需区域：
   • 左侧边栏（220–260px）：顶部放置品牌标志，设置 6–8 个带图标的导航链接，活动状态使用 DS 强调色。
   • 顶部栏：左侧显示页面标题，右侧显示搜索输入框和用户头像 / 状态。
   • 主区域：
     • 第 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> 组成，并使用 DS 强调色填充。轴标签应采用较浅的样式（弱化的文本、更小的字号）。
6. 自查：
   • 所有颜色都来自 DESIGN.md 令牌。
   • 强调色最多使用两次（侧边栏活动状态 + 一个图表高亮）。
   • 侧边栏和顶部栏保持固定；主区域独立滚动。
   • 密度应符合 DS 风格——轻盈的 DS 使用更多内边距，紧凑的 DS（交易、加密货币）则收紧行距。

输出要求

在 <artifact> 标签之间输出：

<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>

在产物之前写一个句子，之后不写任何内容。