8bc5aa6979
build_campaign_timeline flattens a campaign's child Runs into offset-sorted
per-Run entries (distinct from the report's 12-bucket aggregation), reusing a
shared _run_window_offset口径 so both views place a run identically. Exposes
GET /campaigns/{id}/timeline and the api.ts type/call. (v0.6 ticket 06)
14 lines
1.4 KiB
Markdown
14 lines
1.4 KiB
Markdown
# 08 — 共享横向时间轴组件（预制）
|
||
|
||
**What to build:** 一个可复用的只读横向时间轴展示组件，作为②计划预览与④过程时间轴的共同底座。它接受「一条代表窗口的水平轴长度 + 一组带窗口偏移的标记」，把标记按偏移定位在轴上，支持按分类键（如场景 id）稳定分配颜色、每个标记可带角标/计数、hover 显示自定义内容、标记可点击回调。组件本身不关心数据来自计划条目还是子 Run —— 两个调用方各自把领域数据适配成「带偏移的标记数组」。这是本批唯一较有设计含量的前端接缝，先把输入接口设计干净。
|
||
|
||
**Blocked by:** 无 —— 可立即开始（纯展示组件，做一个 Storybook 式的本地示例即可自证）。
|
||
|
||
**Status:** ready-for-agent
|
||
|
||
- [ ] 定义组件输入接口：`windowSeconds`（轴长度）+ `markers: { key, offsetSeconds, colorKey, label?, badge?, tooltip, onClick? }[]`。
|
||
- [ ] 轴渲染：按窗口长度画刻度（如按小时/自适应），标记按 `offsetSeconds` 定位，越界 clamp 到轴端。
|
||
- [ ] 颜色：按 `colorKey` 稳定分配（同一 key 同色），图例可选。
|
||
- [ ] 交互：hover 显 `tooltip`、点击触发 `onClick`。
|
||
- [ ] 视觉与设计 token（`tokens.ts`）一致；`npx tsc --noEmit` + `npm run build` 通过；本地示例页/临时挂载验证渲染。
|