布局Layout

桌面页面骨架

• 侧栏 sidebar 224，background 灰底，可收起到 56（只留图标）。
• 顶栏 topbar 48，不吸顶除非内容区独立滚动。主按钮在顶栏右侧——桌面端主操作在右上是对的，移动端才不是。
• 内容区左右边距 space-6 24，最大宽 content-max 1280；超宽屏居中留白，不拉伸表格。
• 详情用侧滑面板 panel 480 从右侧推入，列表不动。
• AI 助理常驻右下角悬浮入口，展开为 400 宽面板；从零生成切全屏。

栅格

桌面 12 栏、槽 space-6 24；指标行按 4 栏或 5 栏等分；表单弹窗内 2 栏，字段间 space-5 20。不做 24 栏——这套语言的页面都是「一个主面板」结构，栅格主要管指标行与表单。

断点

名	宽	变化
sm	< 640	移动端：侧栏 → 底部 tab / 抽屉；表格 → 64 高行卡片；主按钮固定底部
md	640–1023	平板：侧栏收起为图标栏；指标行 2 栏
lg	1024–1279	桌面：完整侧栏；指标 4 栏
xl	≥ 1280	内容区到上限，两侧留白

尺寸体系

控件高度只有六档，每档绑定字号、图标尺寸、左右内距和圆角。组件只暴露一个 size，不要自己写高度或给图标单独配尺寸——图标跟档位走。

档	高度	字号	图标	左右内距	圆角	用在哪
xs	24	12	12	8	radius-sm	表格行内小按钮、芯片旁的图标按钮
sm	32	13	14	10	radius-sm	工具行、次要操作、Segmented、菜单项、侧栏项
md	36	13（按钮）/ 15（输入）	14	12	radius-md	桌面默认：按钮、输入框、选择器
lg	40	14	16	14	radius-md	页面级主按钮、办公型移动端
xl	48	17	18	16	radius-md	现场端输入框（描边 1.5）、办公型移动端主按钮
field	56	17	20	24	radius-md	现场端按钮、触控下限；通宽固定底部

产品页默认 md 36，营销页（官网）默认 lg 40——官网原型的按钮 10 × 18 内距正好是 40 高，输入框也是 40。哪些组件吃哪些档：Button 全部六档；Input / Textarea / Select 用 sm–xl（没有 xs、field）；Segmented 用 sm / md / lg；Tabs 固定 40；StatusPill 固定 22；Avatar 22 / 28 / 36；菜单项与侧栏项固定 32；表格行 44（桌面）/ 64（现场）；Toast 40；BatchBar 44。

图标单独出现（不在控件里）时四档：14 芯片内 · 16 表格与菜单 · 20 导航与按钮旁（默认）· 24 空状态与移动端 tab。

密度

只有一档。不做「紧凑 / 舒适」切换——桌面端本身已经是紧凑档（14px 正文、44 行高），现场端是另一套尺寸而不是另一档密度。

间距的用法

关系	用
图标与文字、芯片内	space-1 4 / space-2 8
按钮内距、单元格内距	space-3 12
页边距、卡片内距、控件之间	space-4 16
表单字段之间	space-5 20
区块之间、弹窗内距、内容区边距	space-6 24
大区块	space-8 32
空状态留白	space-12 48

层级

z-dropdown 10 → z-sticky 20 → z-float 30 → z-overlay 40 → z-dialog 50。五层到头；确认框之上不再有任何东西（所以弹窗里不能再弹窗）。