# CraftLabs 设计规范 v1.0

> 基于 Figma「安徽地质博物馆 v2.0」设计 Token → delivery-platform-ui 映射评估
> 审核日期: 2026-05-18

---

## 1. 色彩系统

| Token | Figma | 当前 | 评估 |
|-------|-------|------|:--:|
| 页面底色 | `#EAEFFA` | `#f0f2f5` | ⚠️ 建议调整 |
| 卡片面板 | `#FFFFFF` | `#FFFFFF` | ✅ 一致 |
| 主色 | `#2C3E6B` | `#409EFF` | ⚠️ 可选项 |
| 正文文字 | `#000000` | `#303133` | ✅ 可接受 |
| 辅助文字 | `#313131` | `#909399` | ⚠️ 调整 |
| 表头背景 | `#F2F5FC` | `#f5f7fa` | ✅ 可接受 |
| 成功色 | `#E6F7EE/#1A7A3A` | `#f0f9eb/#67c23a` | ✅ 可接受 |
| 警告色 | — | `#E6A23C` | ✅ 默认 |
| 错误色 | `#D54941` | `#F56C6C` | ✅ 可接受 |
| 通知 Badge | `#D54941` | el-badge | ⚠️ 自定义 |
| 边框线 | `#D6DFF0/#E8ECF1` | `#EBEEF5` | ✅ 接近 |
| 侧边栏底 | `#FFFFFF` | `#001529` | 🔴 需修改 |

### CSS 变量建议

```css
:root {
  --color-page-bg:       #EAEFFA;
  --color-card-bg:        #FFFFFF;
  --color-primary:        #2C3E6B;
  --color-primary-hover:  #3D5A99;
  --color-text-primary:   #303133;
  --color-text-secondary: #606266;
  --color-border:         #E8ECF1;
  --color-th-bg:          #F2F5FC;
  --color-success:        #1A7A3A;
  --color-success-bg:     #E6F7EE;
  --color-danger:         #F56C6C;
  --color-danger-bg:      #FEF0F0;
  --color-warning:        #E6A23C;
  --color-badge:          #D54941;
}
```

---

## 2. 布局结构

| 元素 | Figma (px) | 当前 (px) | 评估 |
|------|-----------|----------|:--:|
| Header 高度 | 60 | auto | 🔴 固定 60px |
| Sidebar 宽度 | 232 | 220 | ✅ 可忽略 |
| Sidebar 底色 | `#FFFFFF` | `#001529` 深色 | 🔴 改白色 |
| 面包屑 | 46 | 无 | 🔴 加 el-breadcrumb |
| 左侧 Tree | 280 | 无 | 🔴 许可证页加 el-tree |
| 内容内边距 | 20 | 16-20 | ✅ 一致 |
| 搜索栏 | Header+Tree | Card header | ⚠️ Header 加全站搜索 |
| 卡片 | 6px 圆角+border | 4px 无边框 | ⚠️ 调整 |

---

## 3. 弹框规范

| 类型 | 宽度 | 圆角 | 关键特征 |
|------|:--:|:--:|------|
| 签发许可证 | 560px | 8px | 完整表单 + 特性开关 |
| 新建/编辑 | 480px | 8px | 简化表单 |
| 详情查看 | 480px | 8px | 标签(100px) + 值 |
| 许可证详情 | 520px | 8px | monospace ID + 虚线框 |
| 确认/吊销 | 420px | 8px | 危险色背景 `#FEF0F0` |

```
通用弹框 Token:
- 圆角: 8px
- 阴影: 0 8px 40px rgba(0,0,0,.15)
- Header: padding 16px/20px
- Body: padding 20px
- Footer: gap 10px, 按钮右对齐
- 遮罩: rgba(0,0,0,.45)
- 动画: scale(.96→1) 200ms
- 关闭按钮: 28x28, hover 背景 #F2F5FC
```

---

## 4. 组件

| 组件 | Figma Token | 当前 | 建议 |
|------|-----------|------|------|
| 主按钮 | `#2C3E6B` + shadow | `#409EFF` | 改色 + shadow |
| 表格表头 | `#F2F5FC` / `#2C3E6B` bold | 默认 | 改淡蓝底+深蓝字 |
| 状态标签 | `#E6F7EE/#1A7A3A` | el-tag | 微调色值 |
| 通知 Badge | `#D54941` 20x20 | el-badge | 自定义颜色 |
| 输入框 | focus `#2C3E6B` | focus `#409EFF` | 改 focus 色 |
| 搜索框 | `#F8F9FB` 6px radius | el-input | 加圆角+背景 |
| 侧边菜单 | 白底+蓝选中 | 深色底 | 🔴 改白色方案 |

---

## 5. 字体排版

| 层级 | Figma | 当前 | 评估 |
|------|-------|------|:--:|
| 页面标题 | — | 16px bold | ✅ 增 22px 级 |
| 正文 | 14px `#000000` | 14px `#303133` | ✅ |
| 辅助 | 13px `#313131` | 13px `#909399` | ⚠️ `#606266` |
| 表头 | 12px `#2C3E6B` bold | 默认 | ⚠️ 改色 |
| 代码/ID | — | 12px monospace | ✅ |

---

## 6. 实施方案

### Element Plus CSS 变量覆盖（3 行核心）

```css
:root {
  --el-color-primary: #2C3E6B;
  --el-bg-color-page: #EAEFFA;
  --el-border-radius-base: 6px;
}
```

### 工作量估算

| 优先级 | 项目 | 工作量 | 影响 |
|:--:|------|:--:|------|
| P0 | 色彩 CSS 变量覆盖 | 30min | 全局风格统一 |
| P0 | 侧边栏白色方案 | 1h | 视觉对齐 |
| P1 | 面包屑 + Tree | 3h | 导航体验 |
| P1 | Header 搜索+通知 | 2h | 运营效率 |
| P2 | 弹框规范统一 | 2h | 交互一致 |
| P2 | 组件 Token 细化 | 1h | 细节打磨 |