---
description: "一张页面里最底层的原子零件：状态/标签用 chip 表意，字段/键值用 metadata list 平铺，配额/百分比走 progress，指标 + 涨跌 + sparkline 上 stat 瓦片"
---

# 数据展示件（Chip / 元数据 / 进度 / 统计瓦片）

一张页面里最底层的原子零件：状态/标签用 chip 表意，字段/键值用 metadata list 平铺，配额/百分比走 progress，指标 + 涨跌 + sparkline 上 stat 瓦片。真实版这些原子会被表格单元格、详情面板、图表页大量复用；demo 把它们摆到同一面墙上，方便一次看清所有语义色和亮暗表现。

<iframe src="/skills/dashboard/assets/demo-data-display.html"
        style="width:100%;height:680px;border:1px solid #8884;border-radius:10px"
        loading="lazy" title="形状 demo：数据展示件"></iframe>

试这几下：

- 点右上角 **切到暗色 / 亮色** —— 主题瞬时切换，所有原子跟着 CSS 变量走，色差与对比保持一致
- 点标签上的 **×** 移除单个标签；输入框回车/**添加**新增；空到没有时不塌陷，替换成虚线空态占位
- **清空** —— 破坏性动作先弹确认；成功后 toast + 出现空态
- 进度区 **重新采样** —— 随机改数值，颜色按阈值切换：<80% 绿 / 80–95% 橙 / ≥95% 红
- 看 Stat 瓦片：涨跌决定 delta 文本颜色与 sparkline 描边色（涨绿跌红）

## 规矩

- **纯展示、无数据获取**：所有原子只吃 props / 子节点，不发请求、不管状态。demo 用内存数据陈列，真实版由表格单元格 / 详情面板 / 图表页把 fetch 好的字段传进来
- **颜色全走 CSS 变量**：Chip / Progress / Stat 的语义色（good / warn / danger / muted）都绑到令牌，同一份 JSX 在亮暗主题里直接跟随；不硬编码颜色。demo 用 `<html data-theme>` 覆盖 demo.css 的 `prefers-color-scheme` 演示切换
- **语义色 status → 颜色映射统一**：活跃 / <80% / 涨 → `--chip-on-*`；警告 / 80–95% → `--chip-warn-*`；停用 / ≥95% / 跌 → `--danger`
- **空槽给占位**：TagList 空数组渲染 `—`（真实版）或虚线空态块（demo），从不塌陷；所有数字用 `tabular-nums` 对齐
- **每次变更 toast**，破坏性操作（清空标签）先过确认弹窗；这些原子本身无副作用，但 demo 沿用同一交互规矩

> 蓝本：`add-data-display.md`[^add-data-display]（open-dashboard @ `aa9815f`，MIT，Invariants 已消化进上面「规矩」）

??? abstract "demo 源码：`assets/demo-data-display.html`（自包含、未压缩）"

    ```html
    --8<-- "skills/dashboard/assets/demo-data-display.html"
    ```

[^add-data-display]: [`add-data-display.md`](https://github.com/ahpxex/open-dashboard/blob/aa9815f426e9520841c4aa15a341bfd9f866091f/.claude/skills/add-component/references/add-data-display.md)，2026-07-28 读。