From f0366ccc4793edb788f7ccf64fdfbfa1b10604ee Mon Sep 17 00:00:00 2001 From: huangping Date: Tue, 19 May 2026 10:14:56 +0800 Subject: [PATCH] feat(web): add visual design system page (colors, typography, layout, components, dialog, pages) --- .../public/design-system.html | 369 ++++++++++++++++++ 1 file changed, 369 insertions(+) create mode 100644 web/delivery-platform-ui/public/design-system.html diff --git a/web/delivery-platform-ui/public/design-system.html b/web/delivery-platform-ui/public/design-system.html new file mode 100644 index 0000000..353b966 --- /dev/null +++ b/web/delivery-platform-ui/public/design-system.html @@ -0,0 +1,369 @@ + + + + +CraftLabs 设计体系 v1.0 + + + +
+

CraftLabs 设计体系 v1.0

+

基于 Figma「安徽地质博物馆 v2.0」Token · 适配 delivery-platform-ui · 2026-05-19

+
+ + + +
+ + +
+

🎨 色彩系统

+

品牌色

+
+
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 + 导航 + 搜索 + 🔔³ + ⚙️ + 👤
+
+
Sidebar
232px
白底
11项
+
+
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 +
+ +

侧边菜单

+
+
+
业务管理
+
📊 工作台
+
🛡️ 许可证管理
+
📨 Callback 收件箱
+
集成配置
+
🌐 集成环境
+
+
+ 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详情
+
+
+
+ +
+ CraftLabs Design System v1.0 · 2026-05-19 · 文档: docs/superpowers/specs/2026-05-19-design-system.md +
+
+ + + +