← 全部模板

服务器机柜 <ServerRack />

一台深色机柜，4–8 个机位各写一个服务，指示灯闪烁；右侧 1–3 条要点。逐条展开时机位一个个通电。

在示例演示里查看 →

分组: 机制 · 跑在哪里
组件: ServerRack · #server-rack
交互: 每按一次 → 一个机位通电

适合

说明同一台机器或节点上运行哪些服务
基础设施、部署架构的直观示意

不适合

要讲层级关系：用 ArchLayers
要讲服务之间的调用：用 FlowDiagram

内容上限

1	units 4–8 个：name ≤ 10 字，tag ≤ 12 个字符
2	points 1–3 条，每条 ≤ 36 字
3	label ≤ 12 个字符

字段

字段	类型
`kicker` · 必填	`string`	标题上方的小节名，2–8 字
`title` · 必填	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`units` · 必填	`{ name, tag? }[]`	机位，每个一步
`points`	`string[]`	要点
`label`	`string`	机柜上方小字

示例代码

<ServerRack kicker="怎么工作" title="每台服务器都跑全部服务" units={[{ name: 'DNS', tag: 'dns' }, …]} points={['…']} />