设计规范
布局
4 基准 / 8 节奏的间距、四个尺寸类别、外壳尺寸、七个页面模板、三档密度、响应式表格与官网布局。
单位与间距
px，4 基准 / 8 节奏：
| 令牌 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| px | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 64 | 80 |
组件内部间距用 1–4，组件之间用 4–6，区块之间用 8–12，官网区块用 16–20。
尺寸类别（按窗口宽度）
| 类别 | 宽度 | 导航 | 栅格列 | 页边距 | 栏间距 | 主操作 |
|---|---|---|---|---|---|---|
| 紧凑 compact | < 640 | 顶栏 + 抽屉（左侧 304） | 4 | 16 | 12 | 收进页头图标按钮或底部操作栏 |
| 中等 medium | 640–1023 | 顶栏 + 抽屉（覆盖） | 8 | 24 | 16 | 页头右侧 |
| 展开 expanded | 1024–1279 | 侧栏 256，可收成轨 72 | 12 | 32 | 20 | 页头右侧 |
| 宽屏 large | ≥ 1280 | 侧栏 256；内容最大 1440 居中 | 12 | 40 | 24 | 页头右侧 |
代码断点对应 Tailwind：sm 640、lg 1024、xl 1280（md 768 只用于局部排版，如环形图与图例并排）。
外壳尺寸
| 部件 | 尺寸 |
|---|---|
| 侧栏 | 256（展开）/ 72（轨）；台面底、无右边线；导航项高 36、r-sm |
| 抽屉导航 | 304，覆盖层 4 |
| 顶栏 | 60（紧凑 56）；滚动前透明 |
| 手机底部操作栏 | 64 + 底部安全区 |
| 内容区 | 最大 1440；阅读型内容 68ch / 720 |
| 页头 | 大标题（title-lg）+ 一句说明；操作在右；页头到内容 24 |
┌─────────────┬──────────────────────────────────────────────┐
│ 侧栏 256 │ 顶栏 60（滚动前透明，滚动后磨砂 + elev-1） │
│ 台面 canvas ├──────────────────────────────────────────────┤
│ 品牌 │ 页头：大标题 · 说明 [筛选] [主操作] │
│ 导航 36 │ ↕ 24 │
│ 当前项=平板 │ 内容（最大 1440，页边距 32/40） │
│ 配额卡 │ │
└─────────────┴──────────────────────────────────────────────┘页面模板
每个后台页面从下列七个模板之一开始。
① 总览 Overview
数据总览、分析首页。指标卡最小宽 200；卡片间距 = --gap。
页头 ─────────────────────────────── [站点] [时间范围]
[指标][指标][指标][指标] ← 4 列；中等 2 列；紧凑 2 列
[主图表 8 列 ][占比 4 列 ] ← 中等以下单列
[列表 4][列表 4][列表 4] ← 中等以下单列
[全宽表格卡]② 列表 Collection
文章、站点、订单。紧凑类别下行变卡片（见响应式表格）。
页头 ─────────────────────────────────────── [主操作]
[搜索 ⌕][筛选 Chip …][排序] [视图切换]
┌ 列表表格（全宽，表头 32，行 52）─────────────┐
│ ☐ 标题 状态 负责人 更新时间 ⋯ │
└──────────────────────────────────────────────┘
分页（右） 批量栏（选中后自底部升起）③ 详情 Detail
文章详情、站点详情。
← 返回 / 面包屑
[图标块 44] 对象名（title-lg）[状态徽标] [次操作][主操作]
[分段：概览 | 版本 | 分发 | 日志] ← ≤ 4 个视图用分段，更多用标签页
┌ 主区 8 列 ──────────────┐┌ 侧区 4 列 ────┐
│ 内容卡片 ││ 分组列表：属性 │
└─────────────────────────┘└──────────────┘④ 设置 Settings
中等以下左侧导航变成顶部分段或下拉。
页头
┌ 左侧分组导航 220 ┐┌ 内容 最大 720 ──────────────┐
│ 常规 ││ 分组列表（surface + r-lg） │
│ 成员 ││ [图标块] 名称 值 › │
│ 计费 … ││ 分组列表 … │
└──────────────────┘└────────────────────────────┘
保存栏（有改动时自底部升起）⑤ 编辑器 Editor
文章编辑。编辑器隐藏侧栏（全屏外壳）；中等以下检查器变底部弹层。
顶栏：← 文章名 · 保存中… / 已保存 10:32 [预览][提交审核]
┌ 编辑画布 最大 720 居中 ─────────────┐┌ 检查器 320（可收起）┐
│ 标题 ││ SEO / GEO / 发布 │
│ 正文 ││ AI 建议（色散边） │
└────────────────────────────────────┘└───────────────────┘⑥ 向导 Flow
建站、接入、首单。
步骤：① 基本信息 ── ② 域名 ── ③ 主题 ── ④ 完成
┌ 单列 最大 560 居中 ─────────┐
│ 表单 │
└─────────────────────────────┘
[上一步] [下一步]（右下，主光只给下一步）⑦ 空 / 首次 Empty
放在卡片或内容区中央，上下留白 ≥ 48；不用插画。
[图标块 64，领域色]
标题（title）
一句说明（ink-2，≤ 2 行）
[主操作] 文字链接：了解更多密度（data-density）
| 令牌 | 舒适 comfortable | 默认 default | 紧凑 compact |
|---|---|---|---|
| 用于 | 官网、站群 | 用户端 | 管理端 |
--control 控件高 | 40 | 36 | 32 |
--row 行高 | 56 | 52 | 44 |
--pad 卡片内边距 | 24 | 20 | 16 |
--gap 卡片间距 | 24 | 20 | 16 |
--section 区块间距 | 40 | 32 | 24 |
data-density可作用于页面的一部分（如管理端的某个宽表格）。- 触控设备（
pointer: coarse）--control最小 44，不随密度变小。
响应式表格
| 规则 | 说明 |
|---|---|
| 列优先级 | P1 永远显示（名称、主数值）；P2 ≥ md（768）；P3 ≥ xl（1280） |
| 紧凑类别 | 行变卡片：名称一行、状态徽标在右、次要信息两列 caption |
| 截断 | 名称列弹性截断（truncate + 悬停提示完整内容）；数字列不截断 |
| 三张列表卡并排 | 只保留 2–3 个数字列，其余列 2xl（1536）以下隐藏 |
| 横向滚动 | 只在管理端宽表格允许，且首列固定 |
官网布局
- 内容最大 1200；页边距
max(16px, 安全区)，≥ 720 时 32。 - 区块上下内边距
clamp(56px, 8vw, 104px)；区块标题 40 / 48 + 引言 18 / 30，最大 68ch。 - Hero 只放一个主张与一个主操作；折射插图是 Hero 唯一的色散元素。