admin/dashboard/DESIGN.md

# 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. **下拉菜单/消息框** — 弹出层玻璃化