dashboard

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Dashboard Skill

Produce a single-screen admin / analytics dashboard.

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

Workflow

工作流程

Read the active DESIGN.md (injected above). Colors, typography, spacing, component styling all come from it. Do not invent new tokens.
Classify what the dashboard monitors (sales, traffic, usage, incidents, ops, etc.) from the brief. Generate specific, plausible metric names and values — no "Metric A / Metric B" placeholders.
Lay out the required regions:
- Left sidebar (220–260px): brand mark at top, 6–8 nav links with icons, active state uses the DS accent.
- Top bar: page title on the left, search input + user avatar / status on the right.
- Main:
  - Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).
  - Row 2: one primary chart (full width or 2/3) — render as an inline SVG line / bar / area chart drawn from real-looking numbers.
  - Row 3: one secondary chart or table (recent events, top items, etc.).
Write one self-contained HTML document:
- ```
<!doctype html>
```
  through
```
</html>
```
  , CSS in one inline
```
<style>
```
  block.
- CSS Grid for the overall layout; Flexbox inside cards.
- Semantic HTML:
```
<aside>
```
  ,
```
<header>
```
  ,
```
<main>
```
  ,
```
<section>
```
  .
- Tag each logical region with
```
data-od-id="slug"
```
  for comment mode.
Charts: inline SVG only, no JS libraries. A line chart is ~10 lines of
```
<polyline>
```
with a subtle area fill. A bar chart is N
```
<rect>
```
s with DS-accent fill. Label axes lightly (muted text, smaller scale).
Self-check:
- Every color comes from DESIGN.md tokens.
- Accent used at most twice (sidebar active + one chart highlight).
- Sidebar + top bar are sticky; main scrolls independently.
- Density matches the DS mood — airy DSes get more padding, dense DSes (trading, crypto) tighten rows.

读取当前DESIGN.md（已注入上方）。颜色、排版、间距、组件样式均来自该文件，请勿创建新的样式标记。
分类：从需求中明确仪表盘监控的内容（销售、流量、使用情况、事件、运维等）。生成具体且合理的指标名称和数值——禁止使用“指标A/指标B”这类占位符。
布局所需区域：
- 左侧侧边栏（220–260px）：顶部放置品牌标识，6–8个带图标导航链接，激活状态使用设计系统（DS）强调色。
- 顶部栏：左侧显示页面标题，右侧为搜索输入框+用户头像/状态。
- 主内容区：
  - 第一行：3–4个KPI卡片（标签+大数值+与上期对比的变化量）。
  - 第二行：一个主图表（全屏或占2/3宽度）——使用看起来真实的数值渲染为内嵌SVG折线/柱状/面积图。
  - 第三行：一个次要图表或表格（近期事件、热门项目等）。
编写独立的HTML文档：
- 包含
```
<!doctype html>
```
  到
```
</html>
```
  ，CSS代码放在一个内嵌
```
<style>
```
  块中。
- 整体布局使用CSS Grid；卡片内部使用Flexbox。
- 使用语义化HTML：
```
<aside>
```
  、
```
<header>
```
  、
```
<main>
```
  、
```
<section>
```
  。
- 为每个逻辑区域添加
```
data-od-id="slug"
```
  属性，用于评论模式。
图表：仅使用内嵌SVG，不使用JS库。折线图约10行
```
<polyline>
```
代码，带轻微填充区域；柱状图为N个
```
<rect>
```
，填充设计系统（DS）强调色。坐标轴使用浅色、小字号文本标注。
自我检查：
- 所有颜色均来自DESIGN.md的样式标记。
- 强调色最多使用两次（侧边栏激活状态+一个图表高亮）。
- 侧边栏和顶部栏固定；主内容区可独立滚动。
- 密度匹配设计系统（DS）风格——宽松风格的设计系统增加内边距，紧凑风格（交易、加密货币类）则缩小行间距。

Output contract

输出约定

Emit between

<artifact>

tags:

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

One sentence before the artifact, nothing after.

在

<artifact>

标签内输出：

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

标签前写一句话，标签后无内容。