← 所有版型

时段钟 <PeakClock />

24 小时圆环，用强调色标出 1–4 个时段（高峰、维护窗口），中心写时区；右边图例和 2–4 条说明逐条出现。

版型與風格的說明目前僅提供簡體中文。

在範例簡報中查看 →

分組: AI · 一天里的时段
元件: PeakClock · #peak-clock
互動: 每按一次 → 出现一条说明

適合

高峰 / 闲时定价、限流时段、维护窗口
时段跨午夜或分成几段，用表格不直观

不適合

要看一天里的数值变化：用 LineChart
跨多天的日程：用 Gantt

內容上限

1	windows 1–4 段，小时为 0–24 的数字
2	zone ≤ 8 个字符
3	onLabel、offLabel 各 ≤ 6 字
4	notes 2–4 条：title ≤ 10 字，body ≤ 40 字

欄位

欄位	型別
`kicker` · 必填	`string`	标题上方的小节名，2–8 字
`title` · 必填	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`windows` · 必填	`{ from, to }[]`	高亮时段
`zone` · 必填	`string`	时区
`onLabel`	`string`	高亮时段名，默认“高峰”
`offLabel`	`string`	其余时段名
`notes` · 必填	`{ title, body }[]`	说明，每条一个 build 步骤

範例程式碼

<PeakClock kicker="高峰时段" title="每天两段高峰" windows={[{ from: 1, to: 4 }, { from: 6, to: 10 }]} zone="UTC" notes={[{ title: '高峰时段', body: '…' }, …]} />