Dashboard UI 重做

把一个"只有表格和数字"的运维页，改成外部使用者愿意看、看得懂、能下钻的数据看板。

适用：内部数据页要拿去给外部人看 / 用户嫌简陋 / KPI + 趋势 + 列表类的页面。 不适用：营销落地页（没有数据）、已有严格设计系统只能微调的页面、纯原生 App 页面。

铁律

1. 先看数据，再谈设计。 不跑一遍真实数据，不做任何图表选型。
2. 一套 token 定死，全程不改色温。
3. 每处动效都要能说出它解释了哪层信息，说不出的删掉。
4. 不引任何外部 CDN / 字体 / 图库（CSP 与离线都安全，插画图标全部手写 SVG）。
5. 动画不是内容。 必须有 prefers-reduced-motion 分支，必须有"若干秒后强制显示"的兜底。
6. 交付前必须截图逐张看。 代码里看不出标签被裁 1px、移动端图表被压扁、头像字母被高光盖住——这些只有截图能发现。

工作流

0. 定位与读代码（5 分钟）

找到真实的工程目录（不要假设在仓库里；先 find/grep 确认），读三样东西：

• 数据构建函数（buildReport / getStats / SQL）——搞清楚每个字段的口径
• 服务端（鉴权、CSP、缓存、路由）——决定能不能加 <script>、能不能引外部资源
• 现有页面渲染代码——只为了知道有哪些数据可用，视觉部分全部丢掉

1. 数据盘点（不可跳过）

跑一次数据构建，把真实规模打出来：

const r = buildReport(dir);
console.log(r.totals);                       // 总量
console.log(r.daily.map(d => d.date + ':' + d.commands).join(' '));  // 时间分布
console.log(r.tasks.map(t => t.status));     // 状态分布
console.log(r.people.map(p => [p.name, p.tasks, p.commands]));        // 每行"厚度"

用数字决定设计，而不是凭想象：

2. 定受众与三个问题

写下一句话："这页给<谁>看，他多久看一次，看完要做什么决定。"

然后列出这一页必须回答的三个问题，通常就是：

1. 整体怎么样？（KPI + 健康度）
2. 什么时候不对劲？（趋势 + 分布）
3. 是谁 / 哪件事 / 卡在哪？（名单 + 明细 + 错误）

3. 信息架构

按"回答问题"排，不按"数据表"排。参考骨架（按需增减，别硬套）：

顶栏（品牌 + 锚点导航 + 快照时间 + 刷新 + 主题 + 退出）
Hero（一句话说清这页是什么 + 3-4 个元信息 chip + 一张插画）
KPI（4 张主指标 + 1 条 6 项副指标带）
趋势（30 天面积图，可切指标） | 任务状态环形图
使用者（卡片网格 → 点击出抽屉）
任务（状态筛选 + 搜索 + 列表行）
链路（来源链接 + 最近错误）
页脚（口径说明 + 快照时间）

区块标题旁放数量 pill（7 位、12 个），比空标题有信息量。

4. 视觉系统

从 assets/tokens.css 复制 token 块，先定完再写组件。要点：

• 品牌渐变（如蓝 → 紫）+ 一个语义绿，是最不容易翻车的组合
• 语义色只表达状态：正常绿 / 未恢复橙 / 阻塞红 / 已确认蓝，不要拿来做装饰
• 三档圆角（22 / 16 / 11）+ 三档阴影（s / m / l），全局只用这三档
• 玻璃卡片：background: color-mix(in srgb, var(--surface) …) + backdrop-filter: blur(14px)
• 背景：2-3 个大半径径向渐变光斑 + 一层 56px 网格（mask-image 渐隐），比纯色高级且不喧闹
• 深浅主题用 [data-theme="dark"] 覆盖同名变量，组件里不写任何 if dark

组件配方（KPI 卡、图表卡、环形卡、用户卡、列表行、抽屉、空状态、chip）见 references/design-system.md。

5. 插画与图标

• 插画：手写一张 520×390 左右的 SVG，内容是"这个产品在干什么"的隐喻（看板就画设计画布 + 悬浮状态卡 + 光标），2-3 层前后关系 + 1 个地面阴影，2-3 个四角星点缀。用 CSS @keyframes 做 5-9px 的上下浮动，不同元素不同周期，不要同步。
• 图标：一个 <symbol> sprite 内联在 HTML 里，stroke-width: 1.7、round 端点、24×24 网格，页面上用 <svg class="i"><use href="#i-users"/></svg>。不要每个图标单独写一遍 SVG。
• 头像不用图片：按 client id hash 取渐变 + 取名字首字母，永不加载失败。

6. 动效

按 references/motion.md 里的片段实现，时长基准：

7. 自测

node scripts/verify-ui.mjs http://127.0.0.1:5199 --token=xxx --out=.shots

脚本会跑桌面 1440 / 移动 390 / 深色三档，点一遍筛选、搜索、抽屉、图表 hover，然后断言：pageerror 为 0、横向溢出为 0、没有未显示的入场区块、没有残留的 0 值，最后把截图落到 .shots/。

然后必须逐张打开截图看，按 references/verification.md 的清单找问题。

8. 交付

部署是可选的：用户没要求发布就不要发布（改了文件 ≠ 要上线）。需要发布时见 references/deploy.md，其中记录了单端口服务、静态资源指纹、CSP 三个必踩的坑。

提交前自检

• 数据盘点跑过，图表选型能对应到真实分布
• 深浅两套主题都截图看过，没有硬编码色
• 390px 宽下无横向滚动，卡片单列，图表不矮于 200px
• 空数据 / 空列表 / 超长文本 三种边界都有像样的样子
• 控制台 0 报错（鉴权类的 401 除外，属预期）
• 键盘可达：Tab 能到卡片，Esc 能关抽屉，/ 能聚焦搜索
• 页脚写清了数据口径与快照时间

资源

• assets/tokens.css —— 直接的 token 起点（浅/深双主题 + 背景光斑）
• references/design-system.md —— 布局节奏、8 个组件的配方、语义色映射
• references/motion.md —— 可直接复制的动效与图表代码（含单调插值）
• references/verification.md —— 断言清单 + 截图能抓到的典型问题
• references/deploy.md —— 可选：单端口发布、资源指纹、CSP 与网关坑
• scripts/verify-ui.mjs —— 浏览器自动化自测脚本