mirror of
https://github.com/hpd840321/craftlabs-authorization-sdk.git
synced 2026-06-10 02:20:28 +08:00
135 lines
4.1 KiB
Markdown
135 lines
4.1 KiB
Markdown
# 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 | 细节打磨 |
|