tencentblueking DBM 前端排版与交互规范
本规范只沉淀可复用的设计取值与交互模式（间距、尺寸、色值、结构、流程），不涉及具体项目的组件实现。
动手前先按场景读对应参考文件，本文件只放每次都必须遵守的内容。
场景路由
| 要做的事 | 读这个文件 |
|---|---|
| 新建 HTML 页面（必须先复制骨架） | assets/page-frame.html |
| 新建页面、算容器高度、页面类型判定 | layout.md |
| 表格列表页（集群 / 实例 / 单据 / 资源） | list-page.md |
| 工具箱提单页（表单 + 可编辑表格） | toolbox-page.md |
| 详情页、详情面板、KV 信息展示 | detail-page.md |
| 弹窗、侧滑、气泡确认、消息提示 | overlay.md |
| 按钮主题、文案、位置 | button.md |
四类页面骨架
系统只有 4 种页面骨架，新页面必须归入其中一种，不要发明第五种。
| 骨架 | 判定条件 | 顶层结构 | 底部操作 |
|---|---|---|---|
| 列表页 | 展示可筛选的集合 | 操作区 + 表格 + 分页 | 无，操作在行内或批量区 |
| 工具箱提单页 | 提交一次性变更单据 | 提示条 + 表单表格 | 固定底栏 52px：提交 + 重置 |
| 详情页 | 只读展示单个实体 | 灰底摘要栏 + 卡片栈 / Tab | 固定底栏：克隆 / 撤销等 |
| 配置管理页 | 少量记录的 CRUD | 操作区 + 表格 + 侧滑表单 | 侧滑 footer：提交 + 取消 |
设计令牌
间距只有 8 / 16 / 20 / 24
不要出现 10 / 12 / 18 这类中间值。
| 值 | 用途 |
|---|---|
| 8px | 按钮之间、图标与文字之间 |
| 16px | 操作区与表格之间、卡片之间 |
| 20px | 顶部提示条与表单之间 |
| 24px | 页面左右内边距、Tab 容器 |
| 88px | footer 主按钮 min-width |
| 52px | 顶栏 / 面包屑 / 固定底栏统一高度 |
| 2px | 全站唯一圆角 |
字号只有 12 / 14 / 16
| 字号 | 用途 |
|---|---|
| 12px | 内容区基准：表格、表单 label、详情 KV、Tag |
| 14px | 全局默认、部分按钮、工具箱页标题 |
| 16px | 详情主标题（集群域名、单据类型）、面包屑标题 |
全局默认 14px，但内容区组件（表格、表单 label、复选框、下拉框）统一压到 12px。业务页面实际是 12px 的系统，新写的内容区文字默认按 12px 走。
颜色
禁止引入语义之外的新色值。
| 语义 | 色值 | 用途 |
|---|---|---|
| 主色 | #3a84ff | 链接、主按钮、选中态、hover 图标 |
| 辅助文字 | #979ba5 | 辅助文字、详情 label、meta 信息 |
| 正文 | #63656e | 默认正文、表格正文 |
| 弱文字 | #c4c6cc | 禁用文字、离线行、图标默认态 |
| 标题 | #313238 | 标题、详情 value、加粗 label |
| 边框分割 | #dcdee5 | 边框、分割线、滚动条 thumb |
| 危险 | #ea3636 | 删除 / 终止按钮、校验错误 |
| 成功 | #2dcb56 | 状态点、NEW 标签 |
| 警告 | #ff9c01 | 提示条、已禁用标签 |
| 浅灰底 | #f5f7fa | 内容区背景、说明块背景 |
| 深灰底 | #f0f1f5 | 详情摘要栏底、表头背景 |
全站铁律
- 空值渲染
--，不要空字符串、不要N/A、不要0。 - 所有文案必须走国际化，不得硬编码中文。
- footer 主按钮 min-width 88px，按钮间距 8px，主按钮在左。
- 危险色按钮只给不可逆操作（删除、终止）。保持稀缺，稀缺性即语义。
- 行内操作用文字链接按钮，不要用实心按钮。
- 涉及资源变更的操作必须接入权限控制，无权限置灰并引导申请。
- 禁用按钮必须配 tooltip 说明禁用原因。
- 非全屏页面不要再加 24px 内边距，框架已给
20px 24px 0，会叠加成 44px。 - HTML 原型交付为单个独立文件，不允许 iconfont/、logo 等附带资源。图标字体取 woff 转 base64 内联且只保留页面用到的图标规则，图片转 base64 data URI，内联后删除复制出来的资源文件。
自检清单
改完页面后逐条核对：
- 间距只用了 8 / 16 / 20 / 24
- 字号只用了 12 / 14 / 16
- 颜色全部来自语义色板，无新增色值
- 空值都渲染成
-- - 文案都走了国际化
- footer 主按钮最小宽 88px，按钮间距 8px
- 敏感操作接了权限控制
- 页面骨架归属于四类之一，没有自创结构
- HTML 原型是单个独立文件，字体 / 图标 / 图片已全部内联，无附带资源