# 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 灰色系**，辅以玻璃拟态效果和微动效，整体风格干净、专业、现代。