# Deppon Template 设计规范
> **版本**：与 `@deppon/deppon-template` 源码同步
> **适用范围**：基于 `@deppon/deppon-ui`（Element Plus）+ `@deppon/deppon-template` 的中后台业务系统
> **可视化预览**：同目录 [`design-spec.html`](./design-spec.html)（浏览器直接打开）
---
## 1. 设计原则
| 原则 | 说明 |
| ---------------- | ------------------------------------------------------------------------------ |
| **企业蓝主色** | 以 `#1957FF` 为品牌主色，贯穿按钮、链接、菜单激活态、表格选中态 |
| **信息密度适中** | 正文 14px，表头/标题适度加粗，适配长时间操作的 B 端场景 |
| **壳层分层清晰** | ProLayout 提供顶栏 / 侧栏 / 页签 / 主内容区，毛玻璃 + 圆角壳层 |
| **Token 可配置** | 通过 `:root` CSS 变量与 ProLayout 主题抽屉统一换肤，禁止在业务组件内硬编码色值 |
| **组件分层** | 基础交互走 `@deppon/deppon-ui`；列表/表单/布局走 `@deppon/deppon-template` |
---
## 2. 色彩系统
### 2.1 品牌主色（Primary）
| Token | 默认值 | 用途 |
| ---------------------------- | -------------------- | ------------------------------ |
| `--el-color-primary` | `#1957FF` | 主按钮、链接、选中态、焦点边框 |
| `--el-color-primary-light-3` | `rgb(94, 137, 255)` | Hover 衍生 |
| `--el-color-primary-light-5` | `rgb(140, 171, 255)` | 次要强调 |
| `--el-color-primary-light-7` | `rgb(186, 205, 255)` | 浅色背景块 |
| `--el-color-primary-light-8` | `rgb(209, 221, 255)` | 菜单折叠激活背景 |
| `--el-color-primary-light-9` | `rgb(232, 238, 255)` | 下拉选中背景、Tag 激活底 |
| `--pro-layout-accent` | `#1957FF` | 布局强调色（与 primary 联动） |
| `--pro-layout-accent-dark` | `#0F52E6` | 折叠菜单激活文字 |
| `--pro-layout-accent-soft` | `#E8EEFF` | 侧栏折叠项激活渐变起点 |
| `--pro-layout-accent-muted` | `#D1DDFF` | 侧栏折叠项激活渐变终点 |
主色变更时调用 `applyPrimaryColorDerivatives()`，自动衍生 Element 色阶与布局 accent 色。
### 2.2 功能色（Element Plus 语义色）
| 类型 | 典型 Token | 默认参考 | 场景 |
| ------------ | -------------------- | --------- | -------------------------- |
| 成功 Success | `--el-color-success` | `#67C23A` | 操作成功、完成状态 |
| 警告 Warning | `--el-color-warning` | `#E6A23C` | 风险提示、待处理 |
| 危险 Danger | `--el-color-danger` | `#F56C6C` | 删除、校验错误、表格错误行 |
| 信息 Info | `--el-color-info` | `#909399` | 辅助说明 |
表格错误行专用：`--pro-table-row-error-bg: #FFF5F5`；单元格警示：`--pro-table-cell-red-color: #F56C6C`。
### 2.3 文字色
| Token | 默认值 | 层级 |
| --------------------------------- | ------------------ | ------------------------ |
| `--el-text-color-primary` | `rgba(0,0,0,0.88)` | 标题、表格正文、输入值 |
| `--el-text-color-regular` | `rgba(0,0,0,0.6)` | 菜单、表单标签、次要正文 |
| `--el-text-color-placeholder` | `rgba(0,0,0,0.25)` | 占位符、菜单组标题 |
| `--pro-form-label-color` | `rgba(0,0,0,0.88)` | ProForm 标签 |
| `--pro-form-label-readonly-color` | `rgba(0,0,0,0.45)` | 只读表单标签 |
| `--pro-layout-text` | `#0F172A` | 布局主文字 |
| `--pro-layout-text-muted` | `#64748B` | 布局次要文字 |
### 2.4 背景与边框
| Token | 默认值 | 用途 |
| --------------------------------- | ------------------ | ------------------------ |
| `--el-bg-color` | `#FFFFFF` | 卡片、表格、弹窗内容区 |
| `--el-bg-color-page` | `#F4F4F4` | 页面底色 |
| `--pro-layout-main-bg` | `#F8FAFC` | ProLayout 主内容区 |
| `--el-fill-color-light` | `#F4F4F4` | Hover 填充、禁用输入背景 |
| `--pro-bg-disabled-color` | `#F4F4F4` | 禁用控件背景 |
| `--el-border-color-lighter` | `#EBEEF5` | 常规分割线 |
| `--el-border-color-extra-light` | `#F0F2F5` | 顶栏下拉菜单边框 |
| `--el-card-border-color` | `rgba(0,0,0,0.2)` | 卡片描边 |
| `--pro-table-border-color` | `rgba(0,0,0,0.08)` | 表格边框 |
| `--pro-table-border-bottom-color` | `#F3F4F5` | 表格行底部分割 |
### 2.5 布局壳层
| Token | 默认值 |
| --------------------------- | ------------------------------------------------------------------------------- |
| `--pro-layout-header-bg` | `rgba(255,255,255,0.88)` |
| `--pro-layout-sider-bg` | `rgba(255,255,255,0.92)` |
| `--pro-layout-tags-bar-bg` | `rgba(248,250,252,0.92)` |
| `--pro-layout-shell-radius` | `16px` |
| Shell 背景 | `linear-gradient(135deg, #f1f5f9 0%, #f8fafc 45%, rgba(238,242,255,0.55) 100%)` |
| Shell 阴影 | `0 1px 3px rgba(15,23,42,0.06), 0 12px 40px -8px rgba(15,23,42,0.12)` |
### 2.6 阴影
| Token | 默认值 | 用途 |
| -------------------------- | ------------------ | ----------------- |
| `--pro-shadow-color` | `rgba(0,0,0,0.1)` | Dialog |
| `--pro-shadow-color-light` | `rgba(0,0,0,0.08)` | 顶栏下拉、Popover |
| `--pro-shadow-color-sider` | `rgba(0,0,0,0.12)` | 侧栏 |
| `--pro-shadow-color-btn` | `rgba(0,0,0,0.15)` | 按钮悬浮 |
---
## 3. 字体与排版
### 3.1 字体族
| Token | 字体 | 场景 |
| ----------------------------------- | -------------------------------------------------------- | -------------------------- |
| `--pro-font-family` | **AlibabaSans**（`@deppon/deppon-assets`） | 全局正文、表单、表格、菜单 |
| `--pro-font-family-logo` | **JDLangZhengTi** | Logo、表格区块标题 |
| `--pro-layout-top-menu-font-family` | DM Sans, 圆体, PingFang SC, 微软雅黑, system-ui | 顶栏水平菜单（可选） |
| 回退栈 | `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, …` | 未加载品牌字体时 |
**引入方式**（项目 `App.vue`）：
```less
@import '@deppon/deppon-assets/dist/css/fonts.css';
```
### 3.2 字号与字重
| 层级 | 字号 | 字重 | 示例场景 |
| -------------- | ---- | ------- | --------------------------------- |
| Logo 文案 | 18px | 700 | `pro-layout__header-logo-text` |
| 页面/区块标题 | 16px | 400–500 | `pro-form-title`、Dialog 标题 |
| 正文（默认） | 14px | 400 | 表单、表格、菜单、按钮 |
| 表头单元格 | 14px | 600 | `el-table th .cell` |
| 表格工具栏标题 | 14px | 600 | `table-header-title`（Logo 字体） |
| 菜单组标题 | 11px | 400 | `pro-layout__menu-group-title` |
| 顶栏 Badge | 10px | 500 | 消息角标 |
**全局基准**：`--el-font-size: 14px`，`html/body/#app` 默认 14px / 400。
### 3.3 行高
- 菜单项 / 顶栏：`line-height: 60px`（顶栏高度配套）
- 正文组件：跟随 Element Plus 默认（约 1.5）
- 页签标签：`line-height: normal`
---
## 4. 间距与圆角
### 4.1 间距刻度（推荐 4px 网格）
| 尺寸 | 值 | 典型用途 |
| ---- | ---- | --------------------------------- |
| xs | 4px | 下拉菜单项间距、Popper 内边距 |
| sm | 8px | 列设置图标间距、Dialog 圆角配套 |
| md | 12px | 表格工具栏右侧 gap |
| base | 16px | 表单标题下边距、菜单 base padding |
| lg | 20px | Dialog / 表格 header padding |
| xl | 24px | 顶栏菜单水平 padding |
### 4.2 圆角
| 元素 | 圆角 |
| ------------------------------------------ | ------------------------- |
| 全局基础 `--el-border-radius-base` | **8px** |
| ProLayout 壳层 `--pro-layout-shell-radius` | **16px** |
| Dialog `el-dialog` | **8px** |
| 顶栏下拉菜单 | **8px**（菜单项 **4px**） |
| 菜单 Popup | **15px** |
| Badge | **7px**（高度 14px 胶囊） |
### 4.3 布局尺寸（ProLayout）
| 区域 | 参考尺寸 |
| ------------------------------------- | ------------------------ |
| 顶栏高度 | 60px（菜单 line-height） |
| 页签栏最小高度 | 40px |
| 侧栏 Logo 区宽度 | 140px（max 28vw） |
| 顶栏激活指示条 | 28×3px |
| 折叠菜单项字符标 | 20×20px |
| 滚动条宽度 `--pro-el-scrollbar-width` | 9px（列设置等区域 6px） |
---
## 5. 基础组件（@deppon/deppon-ui）
> 样式以 Element Plus 为准，主题色由 `:root` 中 `--el-*` 覆盖。
### 5.1 按钮 Button
| 类型 | 说明 |
| ------------------- | ------------------------------- |
| Primary | 实心主色 `#1957FF`，白字 |
| Default | 白底灰边，常规文字色 |
| Plain / Text / Link | 按 Element 规范，主色描边或文字 |
| Danger | 红色系，用于删除等破坏性操作 |
| 尺寸 | 高度参考 |
| ------- | -------- |
| large | 40px |
| default | 32px |
| small | 24px |
**状态**：Normal → Hover（primary light）→ Active → Disabled（`--pro-bg-disabled-color` 背景 + placeholder 色文字）。
### 5.2 表单控件
| 控件 | 规范要点 |
| --------------------------- | ----------------------------------------------------------------------------- |
| Input / Select / DatePicker | 宽 100% 填满 `el-form-item`；字号 14px；焦点主色边框 |
| 标签 `el-form-item__label` | 14px；ProForm 区块标题 16px primary 色 |
| 禁用态 `disabled` | 仍渲染输入框；背景 `--pro-bg-disabled-color`；有值 `--el-disabled-text-color` |
| 校验错误 | 边框/阴影 `--el-color-danger`；错误文案 `#F56C6C` |
| 下拉项 | 默认 regular 色；选中 `--pro-select-dropdown-item-selected-color` |
#### 5.2.1 编辑态 vs 只读态（总览）
ProForm 支持**表单级** `mode` 与**字段级** `columns[].mode`（字段未设置时继承表单级）。只读**默认**为纯文本样式；需要带框时显式开启 `read-style-as-edit`。
| 维度 | 编辑态 `mode: 'edit'`（默认） | 只读态 `mode: 'read'`（默认纯文本） | 带框只读（`mode: 'read'` + `read-style-as-edit`） |
| -------- | ------------------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------------- |
| 内容区 | `el-input` / `el-select` / `el-date-editor` 等控件 | 纯文本 `span.field-readonly-content`，无输入框边框 | **同编辑态控件**，`disabled`，保留边框；布局同详情左对齐 |
| 标签文案 | `客户名称` | `客户名称:`（自动追加英文冒号） | `客户名称:`（与详情一致） |
| 标签颜色 | `--pro-form-label-color` | `--pro-form-label-readonly-color` | `--pro-form-label-color`（与编辑态一致） |
| 标签布局 | 固定 `labelWidth`（默认）；`:edit-style-as-readonly` 可左对齐 | 宽度自适应、左对齐 | 宽度自适应、左对齐（与详情一致） |
| 必填星号 | 按 `required` / `rules` 显示 | **不显示** | **不显示** |
| 校验 | 执行 `rules` | **不校验** | **不校验** |
| 空值 | placeholder | `emptyText`，默认 **`-`** | disabled 占位（如「不可输入」） |
**语义约定**：
- **默认只读**：`` 或字段 `mode: 'read'` → 纯文本（历史样式）。
- **带框不可编辑**：在只读基础上加 `:read-style-as-edit="true"`。
- **单字段禁用但仍像表单**：字段 `disabled` / `fieldProps.disabled`（可编辑页内局部禁用）。
#### 5.2.2 只读态排版与溢出
| 行为 | 说明 |
| ---------------- | -------------------------------------------------------------------------- |
| 短文本 | 纯文本只读：正常换行；`word-wrap: break-word` |
| 长文本溢出 | 纯文本只读：容器加 `pro-readonly-overflow-container`，单行省略 + Tooltip |
| 前缀/后缀 | 与编辑态一致：`fieldProps.prefix` / `suffix` |
| 范围 `textRange` | 纯文本：`起始 - 结束`；带框只读：同编辑态范围控件 disabled |
| 全局开关 | ProForm `enable-readonly-overflow-tooltip`（纯文本只读溢出，默认 `false`） |
#### 5.2.3 页面级切换（推荐模式）
整表只读/编辑由业务状态驱动，**优先使用表单级 `mode`**（见 `site` 客户高级表单、合同详情示例）：
```ts
const isReadonly = ref(false);
```
```vue
```
也可用字段映射：
```ts
const columns = computed(() => {
const base = [
/* ... */
];
if (isReadonly.value) {
return base.map(col => ({ ...col, mode: 'read' as const }));
}
return base;
});
```
典型入口：**卡片头「编辑 / 取消 / 保存」**、详情页 `sourceType=detail`、审批只读节点。
#### 5.2.4 扩展能力
| 配置 | 作用 |
| ------------------------------------- | ---------------------------------------------------------------------------- |
| 表单级 `mode: 'read' \| 'edit'` | 整表默认模式；`read` 默认纯文本只读 |
| `readStyleAsEdit` | `true` 时只读为详情同款左对齐 + 带框禁用控件；默认 `false`（纯文本） |
| `isReadonlyEditable: true` | 页面虽为只读，**该字段仍为编辑态**（如详情页只允许改「备注」）；保留校验规则 |
| `editStyleAsReadonly`（ProForm prop） | `true` 时编辑态沿用左对齐自适应布局；默认 `false`，需显式开启 |
| `valueEnum` | 纯文本只读时将枚举值映射为展示文案（select / 字典字段） |
| 单字段 `mode: 'read'` | 同一表单内部分字段只读、部分可编（混合态，默认纯文本） |
### 5.3 反馈
| 组件 | 样式要点 |
| ---------------------- | ----------------------------------------------------------------------------------- |
| Message / Notification | Element 语义色 + 14px 正文 |
| Dialog（ProDialog） | 圆角 8px；header `20px 20px 10px`；body `10px 20px 20px`；阴影 `--pro-shadow-color` |
| Drawer | 设置抽屉用于主题，与布局 Token 联动 |
---
## 6. 业务组件（@deppon/deppon-template）
### 6.1 ProLayout — 管理台壳层
**布局模式**：`classic` | `columns` | `transverse` | `defaults`（默认 `classic`）
| 模块 | 行为与样式 |
| ------------- | ------------------------------------------------------------------ |
| 顶栏 | 半透明白底；Logo 18px 京东朗正体；用户区 14px primary 色 |
| 侧栏菜单 | 14px；hover/active 主色；折叠态激活：渐变背景 + 左侧 3px accent 条 |
| 顶栏菜单 | 无下划线风格；下拉 8px 圆角 + light 阴影 |
| 页签 TagsView | 14px；激活项主色文字；关闭图标 placeholder → regular |
| 主内容 | `#F8FAFC` 底；壳层 16px 圆角 |
**主题能力**：右下角设置 FAB → 布局模式 / 暗色 / 固定头 / 页签 / 颜色分组（见 `PRO_LAYOUT_COLOR_SETTING_GROUPS`）。
### 6.2 ProForm — 表单
- 支持查询条（inline）、分组标题、折叠展开（主色文字按钮）
- 字段渲染委托 **ProField**（text / select / date / tag 等）
- 与 `el-form` 校验规则一致；**编辑/只读**见下文
#### 6.2.1 状态机与数据流
```
┌─────────────────┐
用户点击「编辑」 │ │
─────────────────►│ ProForm.mode │
│ = 'edit' │
└────────┬────────┘
│
┌──────────────┼──────────────┐
▼ ▼ ▼
ProForm getLogicalMode ProField
el-form-item (含 isReadonly mode='edit'
校验 rules Editable 例外) 渲染控件
│ │ │
│ ▼ │
│ mode='read' │
│ 无 rules │
│ 默认：纯文本 │
│ readStyleAsEdit │
│ → edit+disabled │
└──────────────┴──────────────┘
```
| ProForm 能力 | 编辑态 | 只读态（默认纯文本） |
| ---------------------------------- | ----------------------------------- | ------------------------------------------ |
| `mode`（表单级） | `'edit'`（默认） | `'read'` → 纯文本 |
| `columns[].mode` | 省略或 `'edit'` | `'read'` → 纯文本；可 `isReadonlyEditable` |
| `read-style-as-edit` | — | `true` 时改为带框禁用控件（默认 `false`） |
| `columns[].rules` | 生效 | 忽略（`isReadonlyEditable` 除外） |
| `columns[].required` | 控制星号 | 不展示星号 |
| `disabled`（表单级） | 所有控件禁用样式 | 与 `mode` 独立 |
| `edit-style-as-readonly` | `true` 时左对齐自适应；默认 `false` | — |
| `enable-readonly-overflow-tooltip` | — | 长文本点击 Tooltip（纯文本只读） |
#### 6.2.2 场景与交互约定
| 场景 | 推荐状态 | 顶栏/底部操作 |
| ---------------- | --------------------------------------------------------------- | ----------------------------------- |
| 列表页查询条 | 始终编辑 | 查询 / 重置 |
| 新建页 | 编辑 | 保存 / 取消 |
| 详情页默认 | 表单 `mode="read"`（纯文本）；需要带框再加 `read-style-as-edit` | **编辑** → 切编辑态；保存后回到只读 |
| 审批中 | 表单 `mode="read"` + 少量 `isReadonlyEditable` | 通过 / 驳回 |
| 工作流可编辑节点 | 编辑 | 提交 |
| 弹窗内子表单 | 随父页；详情弹窗默认 `mode="read"` | 确定 / 取消 |
**切换编辑态时**：建议 `setFieldsValue` 保留已加载数据；从只读切回编辑不必重新请求，除非业务要求刷新。
**提交校验**：仅编辑态执行 `validate()`；只读页提交前应拦截或先进入编辑态。
#### 6.2.3 columns 配置示例
```ts
// 推荐：表单级 mode 切换详情 / 编辑（默认纯文本只读）
//
// 需要带框不可编辑时：
//
// 混合态：大部分纯文本只读，备注可改
const columns = [
{ name: 'custName', label: '客户名称', valueType: 'text', mode: 'read' },
{ name: 'remark', label: '备注', valueType: 'textarea', mode: 'edit' },
];
// 整表详情只读，但「联系电话」仍可改
//
const columns = allFields.map(col => (col.name === 'mobile' ? { ...col, isReadonlyEditable: true } : col));
```
#### 6.2.4 与 ProTable 只读的关系
| 组件 | 只读控制 | 说明 |
| ---------- | --------------------------------------------------- | ------------------------------- |
| ProForm | 表单级 `mode="read"` 或 `columns[].mode === 'read'` | 独立表单区块 |
| ProTable | `readonly` prop 或行编辑 `getRowReadonly` | 单元格内 ProField `mode='read'` |
| 三态详情页 | 主表 ProForm `mode="read"` + 子表 `row-edit` | 保存前对子表 `validate` |
子表行编辑时：非编辑行单元格为只读文本，样式与 ProForm 纯文本只读正文一致（14px primary 色值）。
### 6.3 ProTable — 数据表格
| 元素 | 规范 |
| ----------------- | ---------------------------------------------------------------- |
| 表头 | 背景 `#F4F4F4`；文字 14px/600；色 `--pro-table-th-color-primary` |
| 单元格 | 14px/400；色 `--pro-table-td-color-primary` |
| 行 Hover / 当前行 | `--pro-table-selected-bg-color` / `#F5F7FA` |
| 错误行 | 背景 `#FFF5F5` |
| 工具栏 | 左右分栏；图标按钮 18px；列设置/密度/全屏 |
| 分页 | 14px；每页条数 Select 固定宽 128px |
**模式**：只读列表 / 行编辑 `row-edit` / 单元格编辑 `editable` / 展开嵌套子表。
### 6.4 ProDialog — 弹窗
- 基于 `el-dialog`，统一圆角与内边距
- 支持内置 ProForm 或自定义 body 插槽
- 关闭图标 20×20，fill-opacity 0.4 → hover 0.8
### 6.5 ProField — 字段原子
`mode` 默认 `'edit'`；`'update'` 与 `'edit'` 渲染相同。只读统一走 `mode === 'read'` 分支。
| valueType | 编辑态 | 只读态展示 |
| ------------------------- | ------------------------ | ----------------------------------------- |
| `text` / `password` | `el-input` | 文本；支持 prefix/suffix |
| `textarea` | `el-input type=textarea` | 多行文本（可换行） |
| `textRange` | 双输入框 + 分隔符 | `前缀 值 - 值 后缀`，分段 Tooltip |
| `textArray` | 多行 label + input 列表 | 只读列表：标签 + 值 + 后缀 |
| `select` | `el-select` | `valueEnum` 映射后的文案 |
| `area` | `el-cascader` 省市区 | 完整路径文本，`area-readonly-text` 可省略 |
| `date` / `dateTime` | `el-date-picker` | 按 `format` 格式化后的字符串 |
| `dateRange` / `timeRange` | range 编辑器 | 起止日期文本 |
| `tagInput` | 输入 + 标签列表 | 标签拼接或 `emptyText` |
**只读正文样式**：14px / `--el-text-color-primary`；类名 `field-readonly-content`。
**空值**：`emptyText` 默认 `'-'`，与编辑态 placeholder 区分。
```vue
```
### 6.6 ProIframe — 内嵌页
- 用于壳层内 iframe 子应用
- 详见 [pro-iframe.md](./pro-iframe.md)
---
## 7. 页面模板
### 7.1 列表查询页（上查下表）
```
┌─────────────────────────────────────────┐
│ ProLayout 顶栏 + 侧栏 + 页签 │
├─────────────────────────────────────────┤
│ ProForm（inline 查询条，可折叠） │
├─────────────────────────────────────────┤
│ ProTable（工具栏 + 表格 + 分页） │
└─────────────────────────────────────────┘
```
### 7.2 新建 / 详情 / 工作流合一页
- 顶栏标题随 `sourceType` 切换
- ProForm 只读/编辑模式
- 子表 ProTable 行编辑
- 底栏统一提交 / 审批按钮
### 7.3 多卡片高级表单
- 多块 `el-card` + `pro-form`
- 卡片头自定义操作（只读切换、保存等）
### 7.4 Dashboard
- ProLayout 主区内栅格卡片 + 图表（色板沿用 primary 及 light 色阶）
---
## 8. 主题配置指南
### 8.1 项目入口（推荐）
在 `App.vue` 的 `:root` 中维护变量（与 `site/src/App.vue` 保持一致），示例：
```css
:root {
--el-color-primary: #1957ff !important;
--pro-font-family: AlibabaSans !important;
--pro-font-family-logo: JDLangZhengTi !important;
/* …其余 --pro-* / --el-* 见 site/src/App.vue */
}
```
### 8.2 ProLayout 运行时换肤
```ts
import {
applyProLayoutGlobalColors,
applyProLayoutThemeToElement,
DEFAULT_PRO_LAYOUT_GLOBAL_COLORS,
} from '@deppon/deppon-template';
// 全局
applyProLayoutGlobalColors({ 'el-color-primary': '#1957ff' });
// 单实例布局根节点
applyProLayoutThemeToElement(layoutEl, { accent: '#1957ff', mainBg: '#f8fafc' });
```
### 8.3 持久化
`ProLayout` 的 `theme-persist` + `theme-persist-key` 将配置写入 `localStorage`。
---
## 9. 移动端说明
中后台主场景为 **桌面 Web（≥1280px）**。移动端 H5 请使用 **`@deppon/deppon-design`**（Vant 封装），不与本规范混用同一套 Pro 组件。
| 端 | 包 | 设计基准 |
| --------- | --------------------------- | --------------------------------- |
| PC 管理台 | deppon-template + deppon-ui | 本规范 |
| 移动 H5 | deppon-design | Vant 4 默认主题，可单独定义品牌色 |
---
## 10. 交付物清单
| 文件 | 说明 |
| ----------------------------------------- | ------------------------------------- |
| `docs/design-spec.md` | 本文档（研发/设计共读） |
| `docs/design-spec.html` | 可视化色板与组件预览 |
| `site/src/App.vue` | CSS 变量唯一事实来源（monorepo 演示） |
| `src/pro-layout/proLayoutGlobalColors.ts` | 默认色常量与设置分组 |
| `src/styles/index.less` | 组件级样式覆写 |
---
## 11. 变更记录
| 日期 | 说明 |
| ---------- | --------------------------------------------------- |
| 2026-05-26 | 初版：基于 deppon-template 2.x 源码与 site 主题整理 |
| 2026-05-26 | 补充表单编辑态 / 只读态、混合态与 ProField 只读展示 |