eafonyang
359 lines
11 KiB
Markdown
359 lines
11 KiB
Markdown
# 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
|
||
|
||
1. **Glass everywhere** — 侧栏、顶栏、卡片、表格、对话框、输入框全部使用半透明玻璃
|
||
2. **Depth through layers** — 4 级 elevation (bg → content → floating → overlay) 建立空间秩序
|
||
3. **Contrast first** — 所有文本确保 WCAG AA (4.5:1)，关键文本 AAA (7:1)
|
||
4. **Consistency over creativity** — 统一 Token 驱动，不做页面级定制
|
||
|
||
---
|
||
|
||
## 2. Color System
|
||
|
||
### 2.1 Primitives (不可变)
|
||
|
||
```css
|
||
/* 基础色板 */
|
||
--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
|
||
|
||
```css
|
||
/* 页面 */
|
||
--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
|
||
|
||
```css
|
||
/* 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
|
||
|
||
```css
|
||
--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
|
||
|
||
```css
|
||
--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
|
||
|
||
```css
|
||
--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
|
||
|
||
```css
|
||
/* 过渡时间 */
|
||
--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
|
||
|
||
1. **Token 扩展** — lux-theme.css 新增 glass/elevation/spacing 变量
|
||
2. **Bug 修复** — 3 个文件 `.title` 颜色修复
|
||
3. **卡片玻璃化** — `.el-card` 改为半透明 + blur
|
||
4. **表格玻璃化** — `.el-table` 透明底 + 半透明表头
|
||
5. **输入框玻璃化** — `.el-input` / `.el-select` 玻璃输入
|
||
6. **对话框玻璃化** — `.el-dialog` 玻璃面板
|
||
7. **按钮/标签/分页** — 统一 glass 风格
|
||
8. **TabsView 玻璃化** — 标签栏玻璃标签
|
||
9. **列表页 scoped 样式** — 各页面 `.title`/`.card-header` 统一
|
||
10. **首页增强** — 快捷入口卡片 + 今日新增卡片玻璃化
|
||
11. **下拉菜单/消息框** — 弹出层玻璃化
|