craftlabs-authorization-sdk/docs/superpowers/specs/2026-05-18-design-spec.md

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 变量建议

: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 行核心）

: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	细节打磨