eafonyang
11 KiB
11 KiB
Luxsin CMS Dashboard — Design System Specification
Version: 1.0
Style: Glassmorphism + Dimensional Layering + Dark Mode OLED
Scope: Vue 3 + Element Plus SPA (内部管理系统)
1. Design Philosophy
Luxsin CMS Dashboard 采用三层融合设计语言，将登录页的精致玻璃美学统一到全站：
| 层级 | 风格 | 占比 | 职责 |
|---|---|---|---|
| 主风格 | Glassmorphism | 60% | 半透明毛玻璃表面、backdrop-filter 模糊、微弱边框光晕 |
| 辅助风格 | Dimensional Layering | 25% | 4 级 elevation 空间层级，通过阴影和浮起建立信息层次 |
| 辅助风格 | Dark Mode OLED | 15% | 深空黑底色保障对比度，焦点 ring 反馈，minimal glow |
Design Principles
- Glass everywhere — 侧栏、顶栏、卡片、表格、对话框、输入框全部使用半透明玻璃
- Depth through layers — 4 级 elevation (bg → content → floating → overlay) 建立空间秩序
- Contrast first — 所有文本确保 WCAG AA (4.5:1)，关键文本 AAA (7:1)
- Consistency over creativity — 统一 Token 驱动，不做页面级定制
2. Color System
2.1 Primitives (不可变)
/* 基础色板 */
--lux-space-900: #020617;
--lux-space-800: #0a0e14; /* 页面底色 */
--lux-space-700: #0f172a; /* 输入框底色 */
--lux-space-600: #1e293b; /* 卡片底色 */
--lux-space-500: #334155;
--lux-space-400: #475569;
--lux-space-300: #94a3b8; /* muted text */
--lux-space-200: #cbd5e1;
--lux-space-100: #e2e8f0; /* strong text */
/* 品牌色 */
--lux-cyan: #38bdf8; /* 主品牌 */
--lux-cyan-light: #7dd3fc;
--lux-cyan-glow: rgba(56, 189, 248, 0.25);
--lux-indigo: #6366f1;
--lux-violet: #7c3aed;
2.2 Semantic Tokens
/* 页面 */
--lux-page-bg: #0a0e14;
--lux-page-gradient: radial-gradient(ellipse 120% 90% at 50% -15%, #1a2840 0%, #0d1117 48%, #0a0e14 100%);
/* 文本 */
--lux-text-strong: #e2e8f0; /* 标题、重要文本 — 对比度 13.5:1 */
--lux-text-body: #cbd5e1; /* 正文 — 对比度 10.2:1 */
--lux-text-muted: #94a3b8; /* 辅助文本 — 对比度 5.8:1 */
--lux-text-dim: #64748b; /* 最弱文本 — 对比度 3.5:1 (仅装饰性) */
/* 玻璃表面 */
--lux-glass-bg-card: rgba(30, 41, 59, 0.55); /* 卡片 */
--lux-glass-bg-table: rgba(30, 41, 59, 0.45); /* 表格 */
--lux-glass-bg-input: rgba(15, 23, 42, 0.45); /* 输入框 */
--lux-glass-bg-dialog: rgba(30, 41, 59, 0.72); /* 对话框 */
--lux-glass-bg-sidebar: rgba(15, 23, 42, 0.60); /* 侧栏 */
--lux-glass-bg-header: rgba(30, 41, 59, 0.75); /* 顶栏 */
--lux-glass-bg-tab: rgba(30, 41, 59, 0.35); /* 标签页 */
/* 玻璃边框 */
--lux-glass-border: rgba(255, 255, 255, 0.08);
--lux-glass-border-hover: rgba(255, 255, 255, 0.14);
--lux-glass-border-focus: rgba(56, 189, 248, 0.45);
/* 模糊强度 */
--lux-blur-sm: blur(8px);
--lux-blur-md: blur(14px);
--lux-blur-lg: blur(20px);
--lux-blur-xl: blur(24px);
2.3 Elevation Shadows
/* 4级 Elevation */
--lux-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.18); /* 卡片 resting */
--lux-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.25); /* 卡片 hover / 浮起 */
--lux-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.35); /* 弹出层 */
--lux-shadow-4: 0 25px 50px rgba(0, 0, 0, 0.50); /* 对话框 overlay */
/* 品牌 glow (焦点态) */
--lux-glow-cyan: 0 0 0 3px rgba(56, 189, 248, 0.15), 0 0 0 1px rgba(56, 189, 248, 0.45) inset;
3. Typography
Font Stack
--lux-font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
--lux-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
Scale
| Token | Size | Weight | Use |
|---|---|---|---|
--lux-text-hero |
24px | 700 | 首页欢迎标题 |
--lux-text-h1 |
18px | 700 | 页面标题、卡片标题 |
--lux-text-h2 |
16px | 600 | 子标题、对话框标题 |
--lux-text-body |
14px | 400 | 正文、表格单元格 |
--lux-text-sm |
13px | 400 | 辅助文本、分页 |
--lux-text-xs |
12px | 500 | 标签、徽章、脚注 |
Letter Spacing
- 标题:
-0.02em - 正文:
0 - 大写标签:
0.03em
4. Spacing
--lux-space-1: 4px;
--lux-space-2: 8px;
--lux-space-3: 12px;
--lux-space-4: 16px;
--lux-space-5: 20px;
--lux-space-6: 24px;
--lux-space-8: 32px;
--lux-space-10: 40px;
--lux-space-12: 48px;
5. Border Radius
--lux-radius-sm: 8px; /* 标签、小按钮 */
--lux-radius-md: 10px; /* 输入框、下拉菜单 */
--lux-radius-lg: 14px; /* 卡片、搜索栏 */
--lux-radius-xl: 18px; /* 对话框 */
--lux-radius-2xl: 24px; /* 登录卡片 */
--lux-radius-pill: 999px; /* 徽章、圆形按钮 */
6. Elevation System (Dimensional Layering)
| Level | Z-index | Surface | Use |
|---|---|---|---|
| L0 — Background | 0 | 页面渐变 + 光球 | 宇宙底色装饰层 |
| L1 — Content | 1 | 玻璃卡片 (blur 14–20px) | 搜索栏、表格卡片、首页卡片 |
| L2 — Floating | 10–100 | 侧栏、顶栏、TabsView | 导航/定位组件 |
| L3 — Overlay | 2000+ | 对话框、下拉菜单 | Teleport 弹出层 |
7. Component Specifications
7.1 Card (el-card)
背景: var(--lux-glass-bg-card)
模糊: var(--lux-blur-lg) [20px]
边框: 1px solid var(--lux-glass-border)
圆角: var(--lux-radius-lg) [14px]
阴影: var(--lux-shadow-1)
hover 阴影: var(--lux-shadow-2)
padding: 20px (body), 16px 20px (header)
7.2 Table (el-table)
表头背景: rgba(15, 23, 42, 0.65) + blur(14px)
行背景: transparent (卡片底色透出)
hover 行: rgba(56, 189, 248, 0.06)
边框色: rgba(255, 255, 255, 0.06)
文字: var(--lux-text-body)
表头文字: var(--lux-text-muted)
圆角: 12px (overflow hidden)
7.3 Dialog (el-dialog, Teleport)
背景: var(--lux-glass-bg-dialog) + blur(24px)
边框: 1px solid var(--lux-glass-border)
圆角: var(--lux-radius-xl) [18px]
阴影: var(--lux-shadow-4) + inset glow
header: 1px solid rgba(255, 255, 255, 0.08) 底分割
7.4 Input (el-input, el-select)
背景: var(--lux-glass-bg-input)
圆角: var(--lux-radius-md) [10px]
边框: 1px solid var(--lux-glass-border)
focus: 1px solid var(--lux-glass-border-focus) + var(--lux-glow-cyan)
placeholder: var(--lux-text-dim)
7.5 Button — Primary
背景: linear-gradient(135deg, #38bdf8, #22d3ee)
文字: #fff
圆角: var(--lux-radius-md) [10px]
阴影: 0 4px 12px rgba(56, 189, 248, 0.25)
hover 阴影: 0 6px 16px rgba(56, 189, 248, 0.35)
7.6 Sidebar
背景: var(--lux-glass-bg-sidebar)
模糊: var(--lux-blur-lg) [18px]
宽度: 64px (collapsed) / 220px (expanded)
边框右: 1px solid rgba(255, 255, 255, 0.08)
z-index: 100 (L2)
active item: gradient bg rgba(56,189,248,0.22) → rgba(99,102,241,0.14)
+ 1px inset border rgba(56,189,248,0.25)
7.7 Header
背景: var(--lux-glass-bg-header)
模糊: var(--lux-blur-md) [14px]
高度: 44px
圆角: 10px
边框: 1px solid var(--lux-glass-border)
阴影: var(--lux-shadow-1)
7.8 TabsView
inactive: rgba(30, 41, 59, 0.35) 背景, 无模糊
active: rgba(30, 41, 59, 0.55) + 上方 2px cyan 指示条
圆角: 10px
gap: 4px
7.9 Pagination
背景: transparent
active: #38bdf8 实心背景 + white text + 8px radius
hover: cyan 文字
7.10 Tag (el-tag)
圆角: 8px
背景: rgba 半透明 (继承 Element Plus type 色 at 15% alpha)
7.11 Dropdown Menu
背景: rgba(30, 41, 59, 0.82) + blur(18px)
边框: 1px solid var(--lux-glass-border)
圆角: 10px
hover item: rgba(56, 189, 248, 0.12)
8. Motion
/* 过渡时间 */
--lux-duration-fast: 0.15s; /* hover 状态切换 */
--lux-duration-normal: 0.25s; /* 展开/折叠 */
--lux-duration-slow: 0.35s; /* 页面切换 */
/* 缓动 */
--lux-ease: ease;
--lux-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
Key Transitions
- 卡片 hover:
transform: translateY(-2px)+ shadow 加深, 0.15s - 侧栏展开/折叠: width 64→220px, 0.30s ease
- 对话框进出: Element Plus 默认 fade + scale (不覆盖)
- 输入框 focus: box-shadow ring 0.2s ease
9. Accessibility
| 项目 | 标准 |
|---|---|
| 正文文本对比度 | WCAG AA ≥ 4.5:1 (实际 #e2e8f0 on #0a0e14 = 13.5:1) |
| 辅助文本对比度 | WCAG AA ≥ 4.5:1 (实际 #94a3b8 on #1e293b = 5.8:1) |
| 焦点指示 | 3px cyan glow ring (box-shadow) |
| 触摸目标 | 按钮 ≥ 32×32px, 输入框高度 ≥ 32px |
| 半透明文本 | 不低于 rgba(255,255,255,0.55) |
10. Bug Fixes (Pre-refactoring)
| 文件 | 问题 | 修复 |
|---|---|---|
views/brand/index.vue |
.title { color: #333 } 深色背景不可见 |
→ #e2e8f0 |
views/blacklist/index.vue |
.title { color: #333 } |
→ #e2e8f0 |
views/ota-target-device/index.vue |
.title { color: #333 } |
→ #e2e8f0 |
11. File Impact Map
| 文件 | 改动类型 | 改动范围 |
|---|---|---|
styles/lux-theme.css |
主改 | Token 扩展 + 全组件玻璃化 (~60% 改动) |
components/TabsView.vue |
样式 | 玻璃标签页样式 |
views/home/index.vue |
样式 | 首页卡片玻璃化 |
views/brand/index.vue |
样式+bug | 列表页玻璃化 + 修复 .title |
views/model/index.vue |
样式 | 列表页玻璃化 |
views/ota/index.vue |
样式 | 列表页玻璃化 |
views/blacklist/index.vue |
样式+bug | 列表页玻璃化 + 修复 .title |
views/ota-target-device/index.vue |
样式+bug | 列表页玻璃化 + 修复 .title |
views/share-code/log.vue |
样式 | 列表页玻璃化 |
views/system/users/index.vue |
样式 | 列表页玻璃化 |
views/login/index.vue |
无改动 | 已是标杆实现 |
layout/index.vue |
无改动 | 已是玻璃化实现 |
12. Implementation Phases
- Token 扩展 — lux-theme.css 新增 glass/elevation/spacing 变量
- Bug 修复 — 3 个文件
.title颜色修复 - 卡片玻璃化 —
.el-card改为半透明 + blur - 表格玻璃化 —
.el-table透明底 + 半透明表头 - 输入框玻璃化 —
.el-input/.el-select玻璃输入 - 对话框玻璃化 —
.el-dialog玻璃面板 - 按钮/标签/分页 — 统一 glass 风格
- TabsView 玻璃化 — 标签栏玻璃标签
- 列表页 scoped 样式 — 各页面
.title/.card-header统一 - 首页增强 — 快捷入口卡片 + 今日新增卡片玻璃化
- 下拉菜单/消息框 — 弹出层玻璃化