CraftLabs 设计体系 v1.0

🎨 色彩系统

品牌色

Brand / Primary

#2C3E6B

按钮、链接、选中态、表头

Brand Hover

#3D5A99

主色悬停态

Brand Light

#F2F5FC

表头背景、选中背景、hover

背景 & 表面

Page Background

#EAEFFA

全局页面底色

Card / Surface

#FFFFFF

卡片、弹窗、菜单背景

Search / Input BG

#F8F9FB

搜索框、输入框背景

文字色

Text Primary

#303133

标题、正文

Text Secondary

#606266

标签、说明

Text Placeholder

#909399

占位符、辅助

Text Disabled

#C0C4CC

禁用态、图标

语义色

Success #1A7A3A

bg: #E6F7EE / border: #A8E6C1

活跃状态、成功

Danger #F56C6C

bg: #FEF0F0 / border: #FBC4C4

吊销、删除

Warning #E6A23C

bg: #FDF6EC / border: #F5DAB1

待处理、警告

Badge / Notification

#D54941

通知红点、NEW标记

边框色

Border General

#E8ECF1

卡片、表格、菜单边框

Border Input

#E0E3E8

输入框边框

🔤 字体排版

H1 · 22px / 700

页面主标题 Page Title

H2 · 20px / 700

区块标题 Section Title

H3 · 16px / 600

弹框标题 Dialog Title

Body · 14px / 400

正文内容，表格数据，菜单项文字。The quick brown fox jumps over the lazy dog.

Secondary · 13px / 400 · #606266

次要文字，标签说明，表单标签文字。

Caption · 12px / 400 · #909399

时间戳、统计数字辅助、页脚信息。

Code/Mono · 12px / 400 · monospace

01JQNX...a1b2 · SN-2026-A1B2C · kp_2026_q2

字体族

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

📏 间距 & 圆角 & 阴影

间距

4px 图标文字间距
8px 按钮/筛选间距
12px 卡片/统计卡间距
16px 表单/内容上下
20px 内容左右/弹框内
24px 区块间距

圆角

4px 输入框/按钮

6px 卡片/搜索框

8px 弹框

阴影

卡片: 0 1px 2px

CTA按钮: 0 2px 6px

弹框: 0 8px 40px

📐 布局体系

Header · 60px 固定 · Logo + 导航 + 搜索 + 🔔³ + ⚙️ + 👤

Breadcrumb · 46px · 授权运营 › 当前页面

Tree
280px
(可选)

Main Content · 自适应
内边距: 20px左右 / 16px上下

尺寸速查

      Header: 60px · Sidebar: 232px · Breadcrumb: 46px
Tree: 280px · Content pad: 20px/16px
Card gap: 12px · Form gap: 16px
    

页面类型

标准列表: 全宽卡片+筛选+表格
Tree+列表: 左侧280px树+右侧列表
工作台: 统计卡片+图表+待办
详情: 卡片+操作按钮
只读: 简单表格

🧩 组件

按钮

输入框 & 搜索

🔍

状态标签

活跃待处理已吊销已过期

通知 Badge

🔔3 Header 通知红点 · 16px · #D54941

侧边菜单

232px 宽 · 白底
菜单高 42-50px
选中: #F2F5FC 底
右边框 3px #2C3E6B
分组标签 11px
底部版本号

面包屑

授权运营›许可证管理

🪟 弹框体系

签发许可证 · 560px

布局: 6表单字段 + 特性复选框
Footer: 取消(左) + 签发(右)
圆角: 8px · 内边距: 20px
表单间距: 16px

详情查看 · 480-520px

布局: 标签(100px右对齐) + 值
Footer: 关闭(+吊销按钮,红色)
许可证ID: monospace 字体

新建/编辑 · 480px

布局: 2-4表单字段
Footer: 取消+保存

确认/吊销 · 420px

危险操作区分:
红色背景提示区 #FEF0F0
确认按钮: 红色 #F56C6C
内容: 居中图标+说明

📄 页面模板

标准列表页

        ┌──────────────────────────┐

        │ [统计卡1][统计卡2][...]    │

        ├──────────────────────────┤

        │ [🔍搜索][▼下拉] [查询][+新建]│

        ├──────────────────────────┤

        │ 表格: ID│名称│状态│操作   │

        │ ...                      │

        ├──────────────────────────┤

        │          共XX条 ‹1 2 3›  │

        └──────────────────────────┘

客户管理 / 合同管理 / 交付管理 / 许可SN

Tree + 列表页

        ┌───────┬──────────────┐

        │ 🔍搜索 │ [统计卡...]   │

        │ ▸ 项目A│ [筛选+签发]   │

        │ ▸ 项目B│ 表格...      │

        │ ▸ 项目C│              │

        └───────┴──────────────┘

许可证管理（280px Tree面板）

工作台 Dashboard

        ┌──────────────────────────┐

        │ [总许可证][活跃][待处理][...]│

        ├───────────┬──────────────┤

        │ 📊 趋势图  │ ⚠️ 待办列表   │

        │           │ · 许可证到期  │

        │           │ · Callback   │

        └───────────┴──────────────┘

详情页

        ┌──────────────────────────┐

        │ 详情卡片                  │

        │ 标签: 值                  │

        │ 标签: 值                  │

        │ ...                      │

        │          [编辑] [删除]    │

        └──────────────────────────┘

合同详情 / 交付详情 / SN详情