8.5 KiB
8.5 KiB
Team API Console 设计系统文档
一、技术栈
| 类别 | 技术 | 版本 |
|---|---|---|
| 框架 | Vue 3 | 3.5.32 |
| 类型系统 | TypeScript | 6.0.2 |
| 构建工具 | Vite | 6.4.1 |
| UI 组件库 | Arco Design Vue | 2.57.0 |
| 状态管理 | Pinia | 3.0.4 |
| 路由 | Vue Router | 5.0.4 |
| HTTP 客户端 | Axios | 1.14.0 |
| 图表 | ECharts + Vue ECharts | 6.0.0 / 8.0.1 |
二、配色方案（核心）
主色系 — Teal 青绿色
主色: #0d9488 (Teal-600)
主色悬浮: #0f766e (Teal-700)
主色浅底: #f0fdfa (Teal-50)
主色渐变: linear-gradient(135deg, #14b8a6, #0d9488)
主色辉光: 0 0 20px rgba(13, 148, 136, 0.2)
Arco 主题色阶
--color-primary-1: #f0fdfa (最浅)
--color-primary-2: #99f6e4
--color-primary-3: #5eead4
--color-primary-4: #2dd4bf
--color-primary-5: #14b8a6 (中)
--color-primary-6: #0d9488 (默认主色)
--color-primary-7: #0f766e (深)
语义色
成功: #10b981 (Green-500)
警告: #f59e0b (Amber-500)
危险: #ef4444 (Red-500)
信息: #06b6d4 (Cyan-500)
文字色（亮色模式）
主文字: #1e293b (Slate-800)
次文字: #475569 (Slate-600)
辅助文字: #94a3b8 (Slate-400)
最弱文字: #cbd5e1 (Slate-300)
背景色（亮色模式）
页面底色: #f8fafc (Slate-50)
卡片底色: #ffffff
次级底色: #f1f5f9 (Slate-100)
玻璃态底色: rgba(255, 255, 255, 0.8)
边框色
主边框: #e2e8f0 (Slate-200)
轻边框: #f1f5f9 (Slate-100)
侧边栏
背景: #0f172a (Slate-900)
激活态: rgba(13, 148, 136, 0.15)
文字: rgba(255, 255, 255, 0.7)
激活文字: #ffffff
分隔线: rgba(255, 255, 255, 0.06)
统计卡片渐变色
Teal: linear-gradient(135deg, #0d9488, #14b8a6)
Green: linear-gradient(135deg, #10b981, #34d399)
Orange: linear-gradient(135deg, #f59e0b, #fbbf24)
Cyan: linear-gradient(135deg, #06b6d4, #22d3ee)
Purple: linear-gradient(135deg, #8b5cf6, #a78bfa)
Red: linear-gradient(135deg, #ef4444, #f87171)
暗色模式关键色
页面底色: #020617 (Slate-950)
卡片底色: #0f172a (Slate-900)
次级底色: #1e293b (Slate-800)
主文字: #f1f5f9
次文字: #cbd5e1
边框: #1e293b
暗色模式 Arco 覆盖
--color-bg-1: #0f172a
--color-bg-2: #020617
--color-bg-3: #1e293b
--color-bg-4: #1e293b
--color-bg-5: #334155
--color-text-1: #f1f5f9
--color-text-2: #cbd5e1
--color-text-3: #64748b
--color-text-4: #475569
--color-border: #1e293b
--color-border-2: #334155
--color-fill-2: #1e293b
--color-fill-3: #334155
三、阴影系统
默认: 0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)
悬浮: 0 8px 24px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03)
卡片: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06)
按钮: 0 4px 12px rgba(13,148,136,0.3)
按钮悬浮: 0 6px 16px rgba(13,148,136,0.4)
暗色默认: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15)
暗色悬浮: 0 8px 24px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15)
暗色卡片: 0 1px 3px rgba(0,0,0,0.15)
四、圆角系统
默认: 10px (--ta-radius)
大圆角: 14px (--ta-radius-lg)
超大圆角: 20px (--ta-radius-xl)
五、字体
字体族: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif
Logo: 16px / 700
页面标题: 20px / 700
卡片标题: 18px / 600
菜单分组: 11px / 600 (大写)
菜单项: 13px / 500
正文: 13-15px / 400
统计数值: 24px / 700
表格头: 13px / 600
六、布局结构
┌─────────────────────────────────────────────┐
│ 侧边栏 (220px, 可折叠至 64px) │ 主内容区 │
│ │ (flex: 1) │
│ ┌───────────────────────────┐ │ │
│ │ Logo (56px高) │ │ padding: │
│ ├───────────────────────────┤ │ 24px │
│ │ 菜单分组 │ │ │
│ │ · 概览 │ │ 卡片布局 │
│ │ · 资源管理 │ │ 间距:16px │
│ │ · 财务中心 │ │ │
│ │ · 安全审计 │ │ │
│ │ · 系统 │ │ │
│ ├───────────────────────────┤ │ │
│ │ 底部: 主题切换/用户/折叠 │ │ │
│ └───────────────────────────┘ │ │
└─────────────────────────────────────────────┘
侧边栏菜单项样式
内边距: 8px 12px
圆角: 8px
图标与文字间距: 10px
激活态背景: rgba(13, 148, 136, 0.15)
激活态文字色: #5eead4
页面背景装饰
radial-gradient(at 40% 20%, rgba(13, 148, 136, 0.04) 0px, transparent 50%),
radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.03) 0px, transparent 50%),
radial-gradient(at 0% 60%, rgba(13, 148, 136, 0.02) 0px, transparent 50%)
七、玻璃拟态 (Glassmorphism)
背景: rgba(255, 255, 255, 0.8) (亮色) / rgba(15, 23, 42, 0.85) (暗色)
边框: rgba(255, 255, 255, 0.3)
模糊: 16px (--ta-glass-blur)
八、动效系统
过渡
缓动曲线: cubic-bezier(0.4, 0, 0.2, 1)
快速: 0.15s
正常: 0.2s
慢速: 0.25s
动画
fadeIn — 透明度渐入
slideUp — 向上滑入 + 渐入
slideDown — 向下滑入 + 渐入
scaleIn — 缩放 + 渐入
glow — 脉冲辉光效果
float — 浮动光球 (8s 循环)
cardAppear — 卡片入场 (0.5s)
九、自定义滚动条
宽度: 6px
轨道: transparent
滑块(常态): rgba(148, 163, 184, 0.4)
滑块(悬浮): rgba(100, 116, 139, 0.5)
圆角: 3px
十、选中态
背景: rgba(13, 148, 136, 0.15)
文字: #042f2e
十一、图表配色 (ECharts)
分布图调色板: #165DFF, #0fc6c2, #f7ba1e, #f76560, #722ed1,
#3491fa, #00b42a, #ff7d00, #eb2f96, #86909c
质量概览:
成功: #00b42a
失败: #f53f3f
十二、登录页专用色
背景
linear-gradient(135deg, #020617 0%, #0f172a 30%, #042f2e 60%, #0f172a 100%)
浮动光球
光球1: rgba(13, 148, 136, 0.12) — 300px
光球2: rgba(6, 182, 212, 0.08) — 250px
光球3: rgba(20, 184, 166, 0.06) — 200px
登录卡片
背景: rgba(255, 255, 255, 0.9)
模糊: 24px
圆角: 20px
阴影: 0 8px 32px rgba(0, 0, 0, 0.2)
品牌图标
渐变: linear-gradient(135deg, #14b8a6, #0d9488)
阴影: 0 4px 16px rgba(13, 148, 136, 0.4)
十三、卡片增强样式
圆角: 10px
边框: 无 (borderless)
阴影: 微阴影 + 悬浮抬升
悬浮效果: box-shadow 加深 + 轻微上移
过渡: cubic-bezier(0.4, 0, 0.2, 1) 0.25s
十四、表格增强样式
表头背景: 灰色底色
行悬浮: Teal 淡色底
单元格边框: 底部边框
十五、按钮增强样式
主按钮: Teal 渐变背景 + 辉光阴影
悬浮态: 阴影加深 + 轻微上移
按下态: scale(0.97)
十六、输入框聚焦态
边框色: #0d9488 (Teal)
辉光阴影: 0 0 0 3px rgba(13, 148, 136, 0.1)
十七、标签 (Tag) 样式
圆角: 6px
内边距: 2px 10px
字号: 12px
十九、设计特征总结
| 特征 | 描述 |
|---|---|
| 风格 | 现代简约 Dashboard，玻璃拟态 + 柔和阴影 |
| 主色调 | Teal 青绿 (#0d9488)，搭配 Slate 灰色系 |
| 动效 | 入场动画 (fadeIn/slideUp/scaleIn)，悬浮抬升，脉冲辉光 |
| 圆角 | 10px 默认，柔和但不圆润 |
| 暗色模式 | 完整支持，Slate-950 为底色 |
| 侧边栏 | 深色 Slate-900 背景，激活项带 Teal 半透明底色 |
| 卡片 | 无边框 + 微阴影 + 悬浮抬升效果 |
| 按钮 | 主按钮使用 Teal 渐变 + 辉光阴影 |
核心设计语言：Teal (#0d9488) + Slate 灰色系，辅以玻璃拟态效果和微动效，整体风格干净、专业、现代。