TimingBar 请求瀑布
横向请求阶段瀑布图，每段一个 phase。
基础用法
数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。
配色取自 --viz-1..8 token，色盲友好。
<CfTimingBar ... /><CfTimingBar ... />真实瀑布场景
3 个并发 HTTP 请求的 timing 拼接：DNS / Connect / TLS / Wait / Receive 各色。
GET /v1/me · 264ms
GET /v1/orders (cached) · 220ms
POST /v1/charges · 480ms
<CfTimingBar :phases="phases" /><CfTimingBar phases={phases} />API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
phases | TimingPhase[] | — | { label, start, end, colorIndex? }[]（ms） |
showAxis | boolean | true | 底部段标签 |
labelMode | 'auto' | 'all' | 'none' | 'auto' | 段标签显示策略，默认自动避让重叠 |
反馈与讨论
TimingBar 请求瀑布 的讨论