# CraftLabs 前端设计体系 v1.0 > 基于 Figma「安徽地质博物馆 v2.0」设计 Token 提取，适配 delivery-platform-ui > 最后更新：2026-05-19 --- ## 目录 1. [设计 Token](#1-设计-token) 2. [布局体系](#2-布局体系) 3. [组件规范](#3-组件规范) 4. [页面模板](#4-页面模板) 5. [弹框体系](#5-弹框体系) 6. [实施指南](#6-实施指南) --- ## 1. 设计 Token ### 1.1 色彩 | Token | 值 | 用途 | |-------|-----|------| | `--color-brand` | `#2C3E6B` | 主色：按钮、链接、选中态、表头文字 | | `--color-brand-hover` | `#3D5A99` | 主色悬停 | | `--color-brand-light` | `#F2F5FC` | 主色淡化：表头背景、选中背景 | | `--color-page-bg` | `#EAEFFA` | 页面底色 | | `--color-card-bg` | `#FFFFFF` | 卡片/面板/弹窗背景 | | `--color-text-primary` | `#303133` | 主要文字：标题、正文 | | `--color-text-secondary` | `#606266` | 次要文字：标签、说明 | | `--color-text-placeholder` | `#909399` | 占位/辅助文字 | | `--color-text-disabled` | `#C0C4CC` | 禁用/图标 | | `--color-border` | `#E8ECF1` | 通用边框：卡片、表格 | | `--color-border-input` | `#E0E3E8` | 输入框边框 | | `--color-success` | `#1A7A3A` | 成功文字 | | `--color-success-bg` | `#E6F7EE` | 成功背景 | | `--color-success-border` | `#A8E6C1` | 成功边框 | | `--color-danger` | `#F56C6C` | 危险/错误 | | `--color-danger-bg` | `#FEF0F0` | 危险背景 | | `--color-warning` | `#E6A23C` | 警告 | | `--color-warning-bg` | `#FDF6EC` | 警告背景 | | `--color-badge` | `#D54941` | 通知红点 | | `--color-search-bg` | `#F8F9FB` | 搜索框背景 | #### 色板速查 ``` 品牌色 #2C3E6B ████████ ████████ ████████ 页面底色 #EAEFFA ████████ ████████ 卡片白 #FFFFFF ████████ ████████ ████████ 表头蓝 #F2F5FC ████████ 成功绿 #E6F7EE ████████ 危险红 #FEF0F0 ████████ 警告橙 #FDF6EC ████████ Badge红 #D54941 ████████ ``` ### 1.2 字体 | 层级 | 字号 | 字重 | 颜色 | 场景 | |------|:--:|:--:|------|------| | H1 页面标题 | 22px | 700 | `--color-text-primary` | 页面主标题 | | H2 区块标题 | 20px | 700 | `--color-text-primary` | 卡片标题 | | H3 子标题 | 16px | 600 | `--color-text-primary` | 弹框标题 | | Body 正文 | 14px | 400 | `--color-text-primary` | 表格内容、菜单 | | Body-Secondary | 13px | 400 | `--color-text-secondary` | 标签、说明 | | Caption | 12px | 400 | `--color-text-placeholder` | 时间、统计小字 | | Code/Mono | 12px | 400 | `--color-text-primary` | 许可证ID、SN编码 | | Badge | 10-11px | 600 | `#FFFFFF` | 通知数字、标签 | **字体族**：`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif` ### 1.3 间距 | Token | 值 | 用途 | |-------|:--:|------| | `--space-xs` | 4px | 图标与文字间距 | | `--space-sm` | 8px | 按钮组间距、筛选条件间距 | | `--space-md` | 12px | 卡片间距、统计卡间距 | | `--space-lg` | 16px | 表单项间距、内容区上下内边距 | | `--space-xl` | 20px | 内容区左右内边距、弹框内边距 | | `--space-xxl` | 24px | 页面区块间距 | ### 1.4 圆角 | Token | 值 | 场景 | |-------|:--:|------| | `--radius-sm` | 4px | 输入框、按钮、标签 | | `--radius-md` | 6px | 卡片、搜索框、菜单项 | | `--radius-lg` | 8px | 弹框 | ### 1.5 阴影 | Token | 值 | 场景 | |-------|-----|------| | `--shadow-card` | `0 1px 2px rgba(0,0,0,.03)` | 卡片默认 | | `--shadow-card-hover` | `0 4px 12px rgba(0,0,0,.06)` | 卡片悬停 | | `--shadow-btn` | `0 2px 6px rgba(44,62,107,.2)` | CTA 主按钮 | | `--shadow-dialog` | `0 8px 40px rgba(0,0,0,.15)` | 弹框 | | `--overlay` | `rgba(0,0,0,.45)` | 弹框遮罩 | --- ## 2. 布局体系 ### 2.1 整体框架 ``` ┌──────────────────────────────────────────────────────────┐ │ Header 60px │ │ Logo [导航1] [导航2] 🔍搜索 🔔³ ⚙️ 👤用户名 │ ├────────┬─────────────────────────────────────────────────┤ │Sidebar │ Breadcrumb 46px │ │232px │ 授权运营 › 当前页面 │ │ ├─────────────────────────────────────────────────┤ │ 菜单 │ │ │ │ 分组 │ Tree Panel 280px │ Main Content │ │ │ (可选) │ (自适应) │ │ 11项 │ │ │ │ │ │ │ │v0.1.0 │ │ │ └────────┴────────────────────┴────────────────────────────┘ ``` ### 2.2 尺寸规范 | 元素 | 尺寸 | 说明 | |------|:--:|------| | Header 高度 | 60px | 固定，含 Logo + 导航 + 搜索 + 通知 + 用户 | | Sidebar 宽度 | 232px | 白色底色，菜单项高 42-50px | | Sidebar 菜单项 | 42-88px | 主菜单 50px，子菜单 42px，分组标题 88px | | Breadcrumb 高度 | 46px | 内容区顶部，含当前路径 | | Tree Panel 宽度 | 280px | 许可证/客户页可选，含搜索框 | | Content 内边距 | 20px(左右) / 16px(上下) | 统一页面内边距 | | 卡片间距 | 12px | 统计卡 / 内容卡之间 | ### 2.3 页面类型 | 类型 | Tree Panel | 用途 | 示例页面 | |------|:--:|------|---------| | 标准列表页 | ❌ | 全宽卡片 + 筛选栏 + 表格 | 客户管理、合同管理、交付管理 | | Tree + 列表页 | ✅(280px) | 左侧层级导航 + 右侧列表 | 许可证管理 | | 工作台 | ❌ | 统计卡片 + 图表 + 待办 | 首页 Dashboard | | 详情页 | ❌ | 详情卡片 + 操作按钮 | 合同详情、交付详情 | | 只读列表 | ❌ | 简单表格 | 集成环境、产品线 | ### 2.4 路由命名 | 模块 | 路径 | 页面 | |------|------|------| | 工作台 | `/` | HomeView | | 客户管理 | `/customers` | CustomersView | | 合同管理 | `/contracts` | ContractsView | | 交付管理 | `/deliveries` | DeliveriesView | | 许可 SN | `/licenses/sn` | LicenseSnListView | | 许可证管理 | `/licenses` | LicenseList | | Callback | `/callbacks` | CallbackInboxView | | 集成环境 | `/integration/environments` | — | | 产品线 | `/integration/product-lines` | — | --- ## 3. 组件规范 ### 3.1 按钮 ```css /* 主按钮 */ .btn-primary { background: #2C3E6B; color: #fff; border: none; border-radius: 4px; padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; } .btn-primary:hover { background: #3D5A99; } /* CTA 按钮（带阴影） */ .btn-cta { background: #2C3E6B; color: #fff; border: none; border-radius: 4px; padding: 7px 16px; box-shadow: 0 2px 6px rgba(44,62,107,.2); font-size: 13px; font-weight: 500; cursor: pointer; } /* 取消/次要按钮 */ .btn-cancel { background: #fff; color: #606266; border: 1px solid #E0E3E8; border-radius: 4px; padding: 8px 20px; font-size: 14px; } /* 危险按钮 */ .btn-danger { background: #F56C6C; color: #fff; border: none; border-radius: 4px; padding: 8px 20px; font-size: 14px; } ``` | 类型 | 背景 | 用途 | |------|------|------| | Primary | `#2C3E6B` | 查询、保存、签发 | | CTA | `#2C3E6B` + shadow | 创建/新建操作 | | Cancel | `#FFFFFF` + border | 取消、关闭 | | Danger | `#F56C6C` | 删除、吊销 | | Link | transparent + `#2C3E6B` | 详情、编辑 | ### 3.2 输入框 ```css input, .input { border: 1px solid #E0E3E8; border-radius: 4px; padding: 7px 12px; font-size: 13px; color: #303133; } input:focus { border-color: #2C3E6B; } input::placeholder { color: #C0C4CC; } /* 搜索框 */ .search-box { border: 1px solid #E0E3E8; border-radius: 6px; padding: 4px 10px; background: #F8F9FB; display: flex; align-items: center; gap: 6px; } ``` ### 3.3 表格 ```css table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { padding: 10px 12px; text-align: left; font-weight: 600; font-size: 12px; color: #2C3E6B; background: #F2F5FC; border-bottom: 1px solid #E8ECF1; white-space: nowrap; } tbody td { padding: 9px 12px; border-bottom: 1px solid #F2F5FC; } tr:hover td { background: #F8F9FB; } ``` ### 3.4 状态标签 ```css .tag { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 500; } .tag-active { background: #E6F7EE; color: #1A7A3A; border: 1px solid #A8E6C1; } .tag-revoked { background: #FEF0F0; color: #F56C6C; border: 1px solid #FBC4C4; } .tag-pending { background: #FDF6EC; color: #E6A23C; border: 1px solid #F5DAB1; } .tag-expired { background: #f4f4f5; color: #909399; border: 1px solid #e9e9eb; } ``` ### 3.5 通知 Badge ```css .badge { position: absolute; top: -2px; right: -5px; width: 16px; height: 16px; background: #D54941; border-radius: 50%; font-size: 10px; color: #fff; line-height: 16px; text-align: center; font-weight: 600; } ``` ### 3.6 侧边菜单 ```css .sidebar { width: 232px; background: #fff; border-right: 1px solid #E8ECF1; } .menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 14px; color: #606266; border-right: 3px solid transparent; cursor: pointer; } .menu-item:hover { background: #F2F5FC; color: #2C3E6B; } .menu-item.active { background: #F2F5FC; color: #2C3E6B; font-weight: 600; border-right-color: #2C3E6B; } .menu-section-label { padding: 6px 20px; font-size: 11px; color: #C0C4CC; text-transform: uppercase; font-weight: 600; } ``` ### 3.7 面包屑 ```css .breadcrumb { height: 46px; display: flex; align-items: center; padding: 0 20px; gap: 6px; font-size: 13px; background: #fff; border-bottom: 1px solid #E8ECF1; } .breadcrumb .sep { color: #C0C4CC; } .breadcrumb .current { color: #2C3E6B; font-weight: 600; } ``` --- ## 4. 页面模板 ### 4.1 标准列表页 ``` ┌─────────────────────────────────────────┐ │ 统计卡片 (4列可选) │ │ [总XX] [活跃] [已吊销] [已过期] │ ├─────────────────────────────────────────┤ │ [🔍搜索框] [状态下拉] [查询] [+ 新建] │ ├─────────────────────────────────────────┤ │ 表格 │ │ ID │ 名称 │ 关联 │ 状态 │ 时间 │ 操作 │ │ ... │ ├─────────────────────────────────────────┤ │ 共XX条 ‹ 1 2 › │ └─────────────────────────────────────────┘ ``` **对应文件**：`CustomersView.vue`、`ContractsView.vue`、`DeliveriesView.vue` ### 4.2 Tree + 列表页（许可证管理） ``` ┌──────────┬──────────────────────────────┐ │ 🔍搜索 │ 统计卡片 │ │ │ [47] [38] [6] [3] │ │ ▸ 项目A ├──────────────────────────────┤ │ ▸ 项目B │ [🔍] [类型▼] [状态▼] [查询] │ │ ▸ 项目C │ [+ 签发许可证] │ │ ├──────────────────────────────┤ │ │ 表格 │ │ │ 许可证ID │ 租户 │ 产品 │ ... │ │ │ ... │ └──────────┴──────────────────────────────┘ ``` **对应文件**：`LicenseList.vue` ### 4.3 工作台 ``` ┌──────────────────────────────────────────┐ │ [总许可证] [活跃终端] [待处理] [本月签发] │ ├──────────────────────┬───────────────────┤ │ 📊 许可证签发趋势 │ ⚠️ 待处理事项 │ │ (柱状图) │ · Callback 待处理 │ │ │ · 许可证将到期 │ │ │ · 终端额度满 │ └──────────────────────┴───────────────────┘ ``` **对应文件**：`HomeView.vue`（待完善为仪表盘） --- ## 5. 弹框体系 ### 5.1 基础规范 ``` ┌─────────────────────────────────┐ │ 标题 ✕ 关闭 │ ← Header: padding 16px/20px ├─────────────────────────────────┤ ← 圆角: 8px │ │ 阴影: 0 8px 40px rgba(0,0,0,.15) │ 表单内容区 │ ← Body: padding 20px │ │ 表单项间距: 16px │ label: [______________] │ 标签色: #606266 │ │ ├─────────────────────────────────┤ │ [取消] [确认/签发] │ ← Footer: gap 10px, 右对齐 └─────────────────────────────────┘ 遮罩: rgba(0,0,0,.45) 动画: scale(.96→1) + opacity 200ms 关闭按钮: 28×28, hover #F2F5FC ``` ### 5.2 类型规格 | 类型 | 宽度 | Header | 内容布局 | Footer | |------|:--:|--------|---------|--------| | 签发表单 | 560px | 标题+关闭 | 6+ 字段 + 特性复选框 | 取消+签发 | | 新建/编辑 | 480px | 标题+关闭 | 2-4 字段 | 取消+保存 | | 详情查看 | 480-520px | 标题+关闭 | KV 对(标签100px) | 关闭(+操作) | | 确认删除 | 420px | — | 居中图标+说明 | 取消+删除(红) | | 危险操作 | 420px | — | 红色危险提示区 | 取消+确认(红) | ### 5.3 危险操作区分 ```css /* 普通确认：居中图标 + 文字 */ /* 危险确认：额外红色背景提示区 */ .danger-zone { background: #FEF0F0; border: 1px solid #FBC4C4; border-radius: 4px; padding: 10px 12px; color: #F56C6C; font-size: 12px; } ``` --- ## 6. 实施指南 ### 6.1 Element Plus CSS 覆盖 ```css :root { /* 核心 3 行 */ --el-color-primary: #2C3E6B; --el-bg-color-page: #EAEFFA; --el-border-radius-base: 6px; /* 扩展 */ --el-color-primary-light-3: #3D5A99; --el-color-primary-light-9: #D6DFF0; --el-color-success: #1A7A3A; --el-color-danger: #F56C6C; --el-table-header-bg-color: #F2F5FC; --el-table-header-text-color: #2C3E6B; --el-dialog-border-radius: 8px; --el-overlay-color-lighter: rgba(0,0,0,.45); } ``` ### 6.2 文件对照 | 设计 Token | 实现文件 | |-----------|---------| | 全局变量 | `src/theme.css` | | 整体布局 | `src/layout/MainLayout.vue` | | 路由+鉴权 | `src/router/index.js` | | 认证状态 | `src/stores/auth.js` | | API 封装 | `src/api/platform.js` | | 许可证页 | `src/views/LicenseList.vue` | | 设计对比 | `src/views/LayoutCompareView.vue` | | Demo | `public/design-demo.html` | ### 6.3 新增页面检查清单 - [ ] 使用 `