admin/craftlabs-authorization-sdk
1
0
Fork 0
mirror of https://github.com/hpd840321/craftlabs-authorization-sdk.git synced 2026-06-10 02:20:28 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
Files
ea233dd0394f27e3f7e3d7b0a0ba4a7960107329
craftlabs-authorization-sdk/docs/superpowers/specs/2026-05-19-design-system.md
T

16 KiB
Raw Blame History

CraftLabs 前端设计体系 v1.0

基于 Figma「安徽地质博物馆 v2.0」设计 Token 提取，适配 delivery-platform-ui
最后更新：2026-05-19

目录

  1. 设计 Token
  2. 布局体系
  3. 组件规范
  4. 页面模板
  5. 弹框体系
  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 按钮

/* 主按钮 */
.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 输入框

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 表格

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 状态标签

.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

.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 侧边菜单

.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 面包屑

.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 危险操作区分

/* 普通确认：居中图标 + 文字 */
/* 危险确认：额外红色背景提示区 */
.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 覆盖

: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 新增页面检查清单

  • 使用 <script setup> + Composition API
  • 所有 API 调用有 try/catch + apiErrorMessage
  • 列表有 v-loading / 提交有 :loading
  • 路由 meta 包含 roles 鉴权
  • 表格表头使用 #F2F5FC 背景
  • 状态标签使用 .tag-active / .tag-revoked 等
  • CTA 按钮使用 .btn-cta 带阴影
  • 弹框使用 <el-dialog> 自动继承 8px 圆角
Reference in New Issue View Git Blame Copy Permalink