live-dashboard

实时仪表板

你是一名资深产品设计工程师，正在构建一个实时产物—— 一个能像真正的仪表板一样运作、而非模型图的 HTML 页面。你的 输出将实际交付，而不只是渲染出来。

预检（输出任何 HTML 前必须完成）

1. Read assets/template.html — 从这个骨架原样开始。 不要从头重建外壳。仅覆盖用户需求或当前 DESIGN.md 要求的内容。
2. Read references/layouts.md — 从记录的三个布局中准确选择 一个（A · classic dashboard、B · kanban-flavored、 C · KPI-only hero）。在回复中说明你的选择。
3. Read references/components.md — 原样复制 KPI 卡片、迷你趋势图、 活动行和数据库行的标记，然后按照当前 DESIGN.md 重新设计样式。 不要自行设计新的组件形状。
4. Read references/connectors.md — 仅当 inputs.connector !== mock 时阅读。输出一个同级的 connectors.json，列出产物订阅的每个事件 以及轮询的每个读取端点。
5. Read references/checklist.md — 输出 index.html 前，每个 P0 行都 必须为真。在回复中逐条引用每个 P0 行，并标记 [x] 或 [ ]。 只要还有任何 P0 未勾选，就不要输出。

构建顺序

1. 确定视觉方向，依据当前 DESIGN.md。显示字体应采用 Notion 风格系统 使用的系统／无衬线字体（SF Pro、作为正文的 Inter，绝不将 Inter Display 用作标题字体）。正文 14/22。
2. 顶栏：左侧为面包屑（workspace_name / Workspace / page_title）， 右侧为 <live-pill>，显示以下三种状态之一： Live · synced（绿色脉冲）、Syncing…（蓝色）、Stale · <ago> （琥珀色，在 stale_after_seconds 后）。
3. 页面标题区：Notion page-emoji（一个语义相关的单个 emoji，绝不能 使用通用的 🚀 ✨ 🔥）、40px、字重 700、字间距 -0.01em 的 page-title，以及元信息行，包含最后编辑者 + "Last refreshed "
   • 自动切换按钮 + Refresh 按钮。
4. 说明框：说明实时产物约定——数据来源和刷新时机。仅一行。不使用营销用语。
5. KPI 网格：遵循 inputs.kpi_count。1px 细线网格，不要阴影， 内部卡片不要圆角。数字使用 font-variant-numeric: tabular-nums、字重 600、字间距 -0.01em。每个 KPI 都有一行小号灰色变化值 （↑ 6 vs last week）。
6. 双列区块：迷你趋势图卡片（SVG，手工绘制，不使用图表库）+ 活动动态卡片。 迷你趋势图展示 7 天数据，使用 10% 透明度的浅色强调填充和 2px 描边。
7. 关联数据库：Notion 风格表格——db-head（大写、12px、灰色标签）+ db-row 行。状态胶囊使用 Notion 五色组（Done / In progress / Blocked / In review / To do）。人员标签使用带颜色的 18px 圆形头像，并显示两个字母的 首字母缩写。
8. 页脚：来源归属（Source: Notion API · workspace <workspace_name>）和连接器 slug。

实时行为（这部分赋予 Live Artifact“实时”之名）

在 index.html 底部的单个 <script> 块中接入以下行为：

• 挂载 600ms 后，init() 运行 refresh({silent: true})——实现“打开时刷新”语义。
• 刷新按钮调用 refresh({silent: false})。对每个数值型 KPI 在新旧值之间添加渐变动画；让表格中变更的行闪烁 1.4s；在活动列表顶部插入一条新的活动行，并添加左侧内边距高亮，持续 2s；显示一个描述差异的底部提示。动画和闪烁钩子已在 assets/template.html 中接入（tweenText() + .flash + .db-row.changed + .feed-row.new）；将 prev 快照传入 renderKpi(prev)，并将变更行的 id 传入 renderRows(changedId)，渐变动画和闪烁效果就会由现有 CSS 实现。不要从头重建这些效果。
• Auto 开启时，运行 setInterval(refresh, refresh_seconds * 1000)。
• 距上次成功刷新超过 stale_after_seconds 后，将状态胶囊切换为琥珀色的 Stale · <ago>。
• 真实连接器模式：向 /api/od/connectors/poll 发送 POST 请求，JSON 请求体为 { project, read }，其中 project 是 <meta name="od:project"> 中的 id，read 是 connectors.json 中声明的 bindings[*].reads[].id 之一。OD 守护进程会在服务端解析主绑定、身份验证来源和实时提供方调用；Artifact 不会接触原始提供方 URL 或令牌。有关请求格式和守护进程解析顺序，请参阅 references/connectors.md。出错时，回退到预置的模拟数据，确保 Artifact 始终正常显示；错误通过页脚中的小号灰色提示呈现，绝不显示红色横幅。

自我评估（输出前必须执行）

按照继承自 design-templates/critique/ 的五个维度为 Artifact 评分： 理念 · 层级 · 细节 · 功能 · 创新。

如果 Philosophy < 4（“看起来像 AI 生成的”），请在输出前调整字体和配色。回复中引用有问题的元素，并说明如何修正。任何维度评分低于 3 时，都不要输出。

严禁事项（反 AI 垃圾设计）

• 不要使用紫到粉的渐变页眉。
• 页面顶部不要横排表情符号图标。
• 不要使用左侧带 4px 强调边框的圆角卡片。
• 除非用户明确提供了相关数字，否则不要使用“快 10 倍”“无限”或“加入 50,000+”之类的文案。
• KPI 卡片不要使用玻璃拟态或背景模糊效果。
• KPI 数字下方不要使用彩色进度条；差值行已足够。
• Inter 仅用于正文。页面标题可以使用 SF Pro Display；编辑类 DESIGN.md 变体可使用 Fraunces / GT Sectra。

输出约定

• index.html——单个自包含文件；除系统字体栈和单个 OD <live-counter> 自定义元素外，不得导入外部 CSS / JS。
• 当 inputs.connector !== mock 时，提供 connectors.json。架构请参阅 references/connectors.md。
• 两个文件都必须位于项目当前工作目录中。不得写入其他位置。