# Dbm Frontend Design

> DBM 前端的排版与交互设计规范，包含设计令牌（间距、字号、颜色）、四类页面骨架的判定与实现范式、 列表页、工具箱提单页、详情页、弹窗侧滑、按钮体系的具体取值。 新建或修改页面、组件、样式时使用， 或当用户询问页面布局、容器留白、按钮规范、弹窗宽度、字号配色、交互模式时使用。

- Skill: `tencentblueking/dbm-frontend-design` (Agent Skill, multi-file: 14 files)
- Install (CLI): `npx skillmds@latest add tencentblueking/dbm-frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tencentblueking/dbm-frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tencentblueking (https://skillmd.com/u/tencentblueking)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tencentblueking/dbm-frontend-design

---


# DBM 前端排版与交互规范

本规范只沉淀可复用的设计取值与交互模式（间距、尺寸、色值、结构、流程），不涉及具体项目的组件实现。

**动手前先按场景读对应参考文件**，本文件只放每次都必须遵守的内容。

## 场景路由

| 要做的事                                | 读这个文件                         |
| --------------------------------------- | ---------------------------------- |
| 新建 HTML 页面（**必须先复制骨架**）    | [assets/page-frame.html](assets/page-frame.html) |
| 新建页面、算容器高度、页面类型判定      | [layout.md](layout.md)             |
| 表格列表页（集群 / 实例 / 单据 / 资源） | [list-page.md](list-page.md)       |
| 工具箱提单页（表单 + 可编辑表格）       | [toolbox-page.md](toolbox-page.md) |
| 详情页、详情面板、KV 信息展示           | [detail-page.md](detail-page.md)   |
| 弹窗、侧滑、气泡确认、消息提示          | [overlay.md](overlay.md)           |
| 按钮主题、文案、位置                    | [button.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 | 详情摘要栏底、表头背景           |

## 全站铁律

1. **空值渲染 `--`**，不要空字符串、不要 `N/A`、不要 `0`。
2. **所有文案必须走国际化**，不得硬编码中文。
3. **footer 主按钮 min-width 88px**，按钮间距 8px，主按钮在左。
4. **危险色按钮只给不可逆操作**（删除、终止）。保持稀缺，稀缺性即语义。
5. **行内操作用文字链接按钮**，不要用实心按钮。
6. **涉及资源变更的操作必须接入权限控制**，无权限置灰并引导申请。
7. **禁用按钮必须配 tooltip** 说明禁用原因。
8. **非全屏页面不要再加 24px 内边距**，框架已给 `20px 24px 0`，会叠加成 44px。
9. **HTML 原型交付为单个独立文件**，不允许 iconfont/、logo 等附带资源。图标字体取 woff 转 base64 内联且只保留页面用到的图标规则，图片转 base64 data URI，内联后删除复制出来的资源文件。

## 自检清单

改完页面后逐条核对：

- [ ] 间距只用了 8 / 16 / 20 / 24
- [ ] 字号只用了 12 / 14 / 16
- [ ] 颜色全部来自语义色板，无新增色值
- [ ] 空值都渲染成 `--`
- [ ] 文案都走了国际化
- [ ] footer 主按钮最小宽 88px，按钮间距 8px
- [ ] 敏感操作接了权限控制
- [ ] 页面骨架归属于四类之一，没有自创结构
- [ ] HTML 原型是单个独立文件，字体 / 图标 / 图片已全部内联，无附带资源