循环图 <Cycle />

左侧一个环，3–6 个阶段按顺时针排在环上，一个强调色小点沿环转动；中心写一个数字或词；右侧逐项解释。

Template and style descriptions are currently available in Chinese only.

Group: 机制 · 首尾相接的阶段
Component: Cycle · #cycle
Interaction: 阶段依次弹出，强调色小点沿环持续转动；悬停阶段时图标格轻转。

Good for

阶段会循环往复：开发周期、增长飞轮、复盘闭环
想强调“最后一步会喂回第一步”

Avoid when

阶段只走一遍、不回到起点：用 FlowDiagram 或 StepTrack
阶段超过 6 个：合并相近阶段

Content limits

1	nodes 3–6 个，从顶部开始顺时针
2	title ≤ 8 个字符（显示在环旁）；body ≤ 36 字；tag ≤ 14 个字符
3	hub.value ≤ 6 个字符；hub.caption ≤ 12 字
4	focus 最多 1 个

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`nodes` · required	`{ icon, title, body, tag? }[]`	阶段
`hub` · required	`{ value, caption }`	环中心
`focus`	`number`	要强调的阶段

Example

<Cycle
  kicker="增长飞轮"
  title="AARRR：五个环节，首尾相接"
  hub={{ value: 'AARRR', caption: 'Dave McClure，2007' }}
  nodes={[
    { icon: 'search', title: '获客', tag: 'Acquisition', body: '客户从哪些渠道第一次接触到产品。' },
    { icon: 'bolt', title: '激活', tag: 'Activation', body: '第一次用就得到价值。' },
    { icon: 'refresh', title: '留存', tag: 'Retention', body: '客户持续回来使用。' },
  ]}
  focus={1}
  source="Dave McClure · Startup Metrics for Pirates（2007）"
/>