# 亮色主题切换 V2 — 玻璃质感重做方案

**起因**：V1（commit `f0f47e8`）实现了变量层切换，但浅色实际效果不达标。用户反馈：
1. **LandingPage 没切换**（V1 我强制 `data-theme="dark"` 保留品牌 → 是错的，应当浅色化）
2. **玻璃质感全丢**（深色态毛玻璃 → 浅色态变成"灰色色块"，没有透光感）
3. 首页毫无品牌氛围，admin 页面"平"但能用，整体不够"高级"

V1 没有真正复刻 GitBook / Linear / Vercel 的浅色玻璃语言 —— 只做了"颜色反相"，没做"质感转译"。V2 就是补这一课。

---

## 一、参考样本深度分析

### 1.1 GitBook 首页（用户提供截图 1）

**主视觉构成（自下而上）：**

| 层级 | 实现 | 视觉作用 |
|---|---|---|
| Page bg | 纯白 `#ffffff`（含极轻微暖调） | 干净画布 |
| 装饰层 | 大块**鲜橙色 3D 漩涡环**（局部出血，从画面左下穿过） | 给玻璃面提供"穿透色源" |
| 玻璃窗口 | 半透明白卡 + backdrop-filter blur + 1px subtle border | mock 的 Acme Help Center |
| 内容 | 实体白卡（含 icon 状态色 / 按钮） | 信息层 |
| Hero 文字 | 黑灰文字 + 黑色 pill 按钮 | 顶层 CTA |

**关键观察 — 玻璃窗口边缘**：

橙色漩涡明显**穿透**到窗口左上角内部（在文字内容下方依稀可见橙色被柔化的色斑）。这就是 `backdrop-filter: blur(30+px) saturate(180%)` 的标志性效果 —— 后景颜色被高斯模糊吃掉细节但保留色相，配合饱和度提升保持视觉冲击。

**Top banner（公告 chip）**：
- `bg: 浅米/桃 rgba(255, 245, 235, 1) ≈ #fff5eb`
- `border: 1px solid rgba(255, 180, 130, 0.4)` — 暖橙色边
- `text: #1a1a1a` 深近黑
- 圆角 9999px(pill)

**Top nav**：
- 完全无背景框（白底裸链接）
- 链接 `Geist 14-15px weight 510, color #171717`
- "Login" 纯文字链接
- "Get a demo" — 浅灰 pill (bg #ffffff + border `#e5e7eb` + dark text)
- "Start for free" — **纯黑 pill** (`#000` 或 `#0a0a0a` + 白字)

### 1.2 Framer 玻璃 demo（用户提供 URL，已下载分析）

**关键画面**：

```
白底 #ffffff
   |
   ├── 装饰层：鲜橙色 3D 漩涡 #ff5a3c~#ff8a5c
   |   （主体出血在左下，光晕扩散到中部）
   |
   ├── 玻璃大卡（圆角 ~24px）
   │      ├── bg: rgba(255, 255, 255, ~0.55-0.70)
   │      ├── backdrop-filter: blur(40px) saturate(180%)
   │      ├── 顶部内描边白色 inset highlight rgba(255,255,255,0.5)
   │      ├── 外阴影 0 8px 32px rgba(0,0,0,0.06) + 0 1px 2px rgba(0,0,0,0.08)
   │      └── border: 1px solid rgba(255,255,255,0.7)
   |
   ├── 内嵌实体白卡 × 4（mini squares 圆角 ~14px）
   │      ├── bg: 纯 #ffffff（不透明）
   │      ├── 1px shadow border rgba(0,0,0,0.06)
   │      └── 中心 icon 深灰 #1a1a1a~#404040
   |
   └── 玻璃 suggestion bar（圆角 ~14px）
          └── 相同玻璃配方，更窄
```

**玻璃配方拆解**（这是浅色版必须复刻的核心）：

| 属性 | 值 | 作用 |
|---|---|---|
| `background` | `rgba(255, 255, 255, 0.60)` | 半透明白 — **关键**，让后景穿透 |
| `backdrop-filter` | `blur(40px) saturate(180%)` | 高斯模糊后景 + 提饱和保色相 |
| `-webkit-backdrop-filter` | 同上 | Safari 兼容 |
| `border` | `1px solid rgba(255, 255, 255, 0.7)` | 玻璃高光边缘 |
| `box-shadow` | `0 8px 32px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08)` | 深度（外阴影） |
| `box-shadow inset` | `inset 0 1px 0 rgba(255,255,255,0.5)` | 顶边内高光 |
| `border-radius` | `16-24px` | 流畅曲率 |

**没有装饰层就没有玻璃**：在 Framer 图里，**橙色漩涡是玻璃成立的前提**。如果把橙色去掉，整张图变成"白卡片堆白底"，看不出玻璃。

### 1.3 GitBook 工作台（用户提供截图 3）

**功能页（非营销页）的浅色处理 — 截然不同**：

| 层级 | 实现 |
|---|---|
| Page bg | 纯白 `#ffffff` 完全无装饰 |
| Sidebar | 极淡灰 `#fafafa~#fbfbfb`，右侧 1px border `#ebebeb`（**不是玻璃**，纯实体面） |
| 内容卡片 | 实体白 `#ffffff` + 1px shadow border `rgba(0,0,0,0.08)` + 12px radius |
| Active nav 项 | 浅灰药丸 `rgba(0,0,0,0.05)` + 深字 |
| CTA 按钮 | 视情况：黑色实体 / 浅灰 ghost / 品牌色（magenta `#d946ef` "Upgrade"） |
| 文字 | `#171717` 主 / `#525252` 次 / `#888` 提示 |

**没有装饰、没有玻璃**。这是 Vercel/Linear-app 的"无干扰"语言。原因：功能页要看数据，不要分散注意力。

### 1.4 综合洞察

**GitBook 采用双语言系统**：

| 场景 | 语言 | 标志 |
|---|---|---|
| Marketing / Hero / Landing | **玻璃 + 装饰层** | 鲜彩漩涡、frosted card、品牌冲击 |
| App / Functional | **平面 + 阴影边** | 纯白、Vercel-style 卡片、零装饰 |

**V1 的根错**：把这两种场景一视同仁地用同一套 var 覆盖。结果 LandingPage 失去了玻璃语言，admin 页又勉强能看。V2 必须分双语言处理。

---

## 二、V1 的具体技术错误

回顾 `index.css` `[data-theme="light"]` 的关键问题：

```css
/* V1 写的（错误） */
--color-bg-card: rgba(0, 0, 0, 0.05);     /* 黑透明 → 看起来是"灰色色块"，不是玻璃 */
--color-bg-hover: rgba(0, 0, 0, 0.07);    /* 同上 */
--color-sidebar-bg: rgba(243, 244, 246, 0.92); /* 几乎不透明的浅灰 */
--color-aurora-1: transparent;             /* 极光完全关掉 */
--color-aurora-2: transparent;
--color-aurora-3: transparent;
/* + LandingPage 强制 data-theme="dark" */
```

**症结**：玻璃质感的三要素 ——
1. **后景必须有色彩**（否则 blur 没东西可糊）
2. **表面必须是 _白_ 透明而非 _黑_ 透明**（视觉上是"亮起来"不是"暗下去"）
3. **必须有 backdrop-filter blur + saturate**

V1 三个都没满足。

---

## 三、V2 设计原则

### 原则 1 — 双语言架构

在 `[data-theme="light"]` 内进一步区分两类 token：

```
GLASS 类（透明白 + blur，用于 sidebar / modal overlay / banner / dropdown）
  ↓
SOLID 类（实体白 + 边 + 阴影，用于 admin 卡片 / 表格行 / 数据展示）
```

V1 的 `--color-bg-card` 混用 → V2 拆分：
- `--color-bg-card`: **实体白** `#ffffff`（解决 admin 卡片用例）
- `--color-bg-glass`: **半透明白** `rgba(255,255,255,0.65)`（解决 sidebar / 横幅 / 弹窗）— **新增 var**

### 原则 2 — 装饰层必须保留

V1 的错：浅色直接 `display: none` 关掉 aurora。

V2：浅色保留 aurora，但用**浅色友好色板**（pastel 紫蓝粉，0.18-0.30 alpha 范围）。
- 给 LandingPage 玻璃 modal 提供"穿透色源"
- 给所有 backdrop-filter 表面提供视觉支撑
- 主体内容区域（admin / 生成页）通过 z-index + bg `#fafafa` 把 aurora 挡掉，保持平面感
- **关键**：aurora 在 light 下颜色比 dark 略淡（0.18-0.30 vs dark 的 0.35-0.60），避免刺眼

### 原则 3 — 主页面 bg 用 `#fafafa` 不是纯白

理由：
- 玻璃 card 即使透明 `rgba(255,255,255,0.65)`，叠在纯白 bg 上视觉差异 < 2%，看不出玻璃边缘
- 用 `#fafafa` 给玻璃卡留出"白比页面更白"的差异空间
- 同时让实体白卡 `#ffffff` 在页面上有清晰轮廓
- Vercel 自己用的也是 `#fafafa`（Gray 50）做 surface tinting

### 原则 4 — backdrop-filter 标准化为 `blur(24-32px) saturate(180%)`

V1 现有的 backdrop-filter 散落在 13 个 module.css 里，blur 强度从 12px 到 30px 不一。V2 标准化：

| 表面类别 | blur | saturate |
|---|---|---|
| Sidebar / 横幅 | `blur(16px)` | `saturate(160%)` |
| Modal panel (Login / VideoDetail.infoPanel) | `blur(24px)` | `saturate(180%)` |
| Hero / Landing 玻璃大卡 | `blur(40px)` | `saturate(180%)` |
| Dropdown / Select 弹层 | `blur(12px)` | `saturate(140%)` |
| Toast / Tooltip | `blur(12px)` | `saturate(140%)` |

### 原则 5 — 玻璃边缘必有 inset highlight

GitBook / Framer 的玻璃面 _上沿_ 都有微妙的白色内高光（`box-shadow: inset 0 1px 0 rgba(255,255,255,0.5)`），让边缘"亮起来"，是 frosted glass 的视觉标志。V1 完全没做。V2 加。

---

## 四、V2 完整浅色色板（变更对照表）

### 4.1 Page / 装饰层（核心变更）

| Token | V1 | **V2** | 说明 |
|---|---|---|---|
| `--color-bg-page` | `#fafafa` | `#fafafa`（不变） | 仍是 Vercel Gray 50 |
| `--color-aurora-1` | `transparent` | `rgba(180, 167, 255, 0.22)` | 浅紫，给玻璃穿透色 |
| `--color-aurora-2` | `transparent` | `rgba(167, 200, 255, 0.20)` | 浅蓝青 |
| `--color-aurora-3` | `transparent` | `rgba(255, 200, 180, 0.18)` | 浅桃（新增暖调，参考 GitBook 橙） |
| `--color-cursor-glow` | `rgba(80,72,204,0.04)` | `rgba(80, 72, 204, 0.06)` | 微调更可见 |
| `--color-grid-line` | `rgba(0,0,0,0.025)` | `rgba(0,0,0,0.025)` | 不变 |
| 移除 | `[data-theme="light"] .aurora-bg { display: none }` | **删掉这条规则** | 让 aurora 在 light 下也显示 |

### 4.2 玻璃面 token（关键新增 + 改写）

| Token | V1 | **V2** | 说明 |
|---|---|---|---|
| `--color-bg-glass` | _不存在_ | `rgba(255, 255, 255, 0.65)` | **新增**。专给 sidebar / banner / modal glass 用 |
| `--color-bg-glass-strong` | _不存在_ | `rgba(255, 255, 255, 0.80)` | **新增**。需要更不透明的玻璃（dropdown / tooltip） |
| `--color-bg-modal-glass` | `rgba(255,255,255,0.92)` | `rgba(255, 255, 255, 0.85)` | 微调，留一点透气 |
| `--color-sidebar-bg` | `rgba(243,244,246,0.92)` | `rgba(255, 255, 255, 0.65)` | 真正变成玻璃 |
| `--color-bg-sidebar` | 同上 | 同上 | 同上 |
| `--color-bg-input-bar` | `#ffffff` | `rgba(255, 255, 255, 0.85)` | 输入条玻璃化 |
| `--color-bg-dropdown` | `rgba(255,255,255,0.96)` | `rgba(255, 255, 255, 0.85)` | dropdown 玻璃化 |
| `--color-inset-highlight` | `rgba(0,0,0,0.04)` | `rgba(255, 255, 255, 0.50)` | **修正方向** —— 玻璃顶边白高光 |
| `--color-inset-highlight-strong` | `rgba(0,0,0,0.06)` | `rgba(255, 255, 255, 0.70)` | 同上 |

### 4.3 实体卡片 token

| Token | V1 | **V2** | 说明 |
|---|---|---|---|
| `--color-bg-card` | `rgba(0,0,0,0.05)` | `#ffffff`（实体纯白） | admin 卡片实体化 |
| `--color-bg-hover` | `rgba(0,0,0,0.07)` | `rgba(0, 0, 0, 0.04)` | 行 hover 仍走黑透明（行内不是玻璃） |
| `--color-bg-upload` | `rgba(0,0,0,0.03)` | `#ffffff` | upload 区也实体化 |
| `--color-bg-row-hover` | _未定义_ | `rgba(0, 0, 0, 0.03)` | **新增**。表格行 hover 专用 |

### 4.4 边框 token

| Token | V1 | **V2** | 说明 |
|---|---|---|---|
| `--color-border-card` | `rgba(0,0,0,0.10)` | `rgba(0, 0, 0, 0.08)` | 学 Vercel 阴影边 |
| `--color-border-input-bar` | `rgba(0,0,0,0.12)` | `rgba(0, 0, 0, 0.10)` | 同上 |
| `--color-border-modal` | `#e5e7eb` | `rgba(0, 0, 0, 0.06)` | 改为半透明，玻璃边更自然 |
| `--color-border-modal-soft` | `rgba(0,0,0,0.08)` | `rgba(0, 0, 0, 0.05)` | 微弱 |
| `--color-border-glass-edge` | _不存在_ | `rgba(255, 255, 255, 0.70)` | **新增**。玻璃面外边白高光 |
| `--color-border-soft` | `rgba(0,0,0,0.06)` | `rgba(0, 0, 0, 0.05)` | 微调 |
| `--color-border-row` | `rgba(0,0,0,0.05)` | `rgba(0, 0, 0, 0.06)` | 行分割线略明显 |

### 4.5 阴影 token（玻璃深度感）

| Token | V1 | **V2** | 说明 |
|---|---|---|---|
| `--color-shadow-modal` | `rgba(0,0,0,0.10)` | `rgba(0, 0, 0, 0.08)` | 玻璃外阴影更柔 |
| `--color-shadow-dropdown` | `rgba(0,0,0,0.08)` | `rgba(0, 0, 0, 0.10)` | dropdown 阴影 |
| `--shadow-card-light` | _不存在_ | `0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06)` | **新增**。Vercel-style multi-layer 阴影。给实体卡 |
| `--shadow-glass-light` | _不存在_ | `0 8px 32px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5)` | **新增**。给玻璃面（含 inset highlight） |

### 4.6 文字 token

| Token | V1 | **V2** | 说明 |
|---|---|---|---|
| `--color-text-primary` | `#171823` | `#171717`（Vercel Black） | 去紫调，纯近黑更"高级" |
| `--color-text-secondary` | `#6b6e85` | `#525252`（Gray 600） | Vercel 灰阶 |
| `--color-text-tertiary` | `#9ca3af` | `#888` (Gray 500) | 同上 |
| `--color-text-quaternary` | `#cbd5e1` | `#a3a3a3` (Gray 400) | 同上 |
| `--color-text-disabled` | `#cbd5e1` | `#a3a3a3` | 同上 |
| `--color-text-on-glass` | `rgba(0,0,0,0.75)` | `rgba(23, 23, 23, 0.85)` | 玻璃上的字偏纯黑 |

### 4.7 状态色（V2 不变，V1 加深 18% 仍然合理）

主色 `#5048cc` / 信息 `#0099cc` / 成功 `#00a37e` / 危险 `#d63a2a` / 警告 `#d4860a` —— 保持 V1。

### 4.8 装饰 chip（参考 GitBook 公告 chip）

新增一组 var 给"暖调强调"用（公告横幅 / Trial banner / "新版上线" pill）：

| Token | **V2 新值** | 用途 |
|---|---|---|
| `--color-chip-warm-bg` | `#fff5eb` | 暖米色 chip 背景 |
| `--color-chip-warm-border` | `rgba(255, 180, 130, 0.40)` | 暖橙色边 |
| `--color-chip-warm-text` | `#1a1a1a` | chip 黑字 |

（深色态下：`bg: rgba(255, 200, 130, 0.10)`, `border: rgba(255, 200, 130, 0.25)`, `text: #f1f0ff`）

---

## 五、LandingPage 浅色化重做

### 5.1 移除 `data-theme="dark"` 强制

```diff
// web/src/pages/LandingPage.tsx
- <div className={styles.page} data-theme="dark">
+ <div className={styles.page}>
```

让 LandingPage 跟随全局主题切换。

### 5.2 LandingPage.module.css 全 var 化

V1 跳过了这文件（21 处硬编码颜色保留）。V2 全部接入 var，浅色按下表：

| 元素 | DARK 现状 | LIGHT 新值 |
|---|---|---|
| `.page` bg | `#000` | `var(--color-bg-page)` (`#fafafa`) |
| `.title` color | `#f1f0ff` | `var(--color-text-primary)` (`#171717`) |
| `.tagline` color | `rgba(255,255,255,0.5)` | `var(--color-text-on-glass-soft)` (浅色下：`rgba(23,23,23,0.50)`) |
| `.btnPrimary` bg | `rgba(120,220,200,0.12)` | `var(--color-mint-accent-bg)` (浅色下 teal `rgba(13,148,136,0.10)`) |
| `.btnPrimary` border | `rgba(120,220,200,0.3)` | `var(--color-mint-accent-border)` |
| `.btnPrimary .btnName` color | `#7edcc8` | `var(--color-mint-accent)` (浅色下 `#0d9488` teal 深色) |
| `.btnPrimary:hover` bg | `rgba(120,220,200,0.22)` | `var(--color-mint-accent-bg-hover)` |
| `.btnGhost` bg | `rgba(255,255,255,0.05)` | `var(--color-bg-glass-strong)` (`rgba(255,255,255,0.80)`) |
| `.btnGhost` border | `rgba(255,255,255,0.1)` | `var(--color-border-card)` (`rgba(0,0,0,0.08)`) |
| `.btnGhost .btnName` color | `rgba(255,255,255,0.7)` | `var(--color-text-primary)` |
| `.btnSub` color | `rgba(120,220,200,0.5)` | teal 浅色下 `rgba(13,148,136,0.65)` |
| `.btnSubGhost` color | `rgba(255,255,255,0.35)` | `var(--color-text-tertiary)` |
| `.easter` color | `rgba(255,255,255,0.06)` | `rgba(0,0,0,0.06)` |
| `.easter:hover` color | `rgba(255,255,255,0.25)` | `rgba(0,0,0,0.25)` |
| `.sparkOverlay` bg | `rgba(0,0,0,0.5)` | `var(--color-overlay-soft)` (浅色 `rgba(0,0,0,0.18)`) |
| `.sparkOverlay` backdrop-filter | `blur(30px)` | 不变（深浅都好用） |
| `.sparkTitle` color | `#ffffff` | `var(--color-text-primary)` |
| `.sparkSub` color | `rgba(255,255,255,0.5)` | `var(--color-text-secondary)` |
| `.musicBtn` color | `rgba(255,255,255,0.2)` | `var(--color-text-quaternary)` |
| `.musicBtn:hover` color | `rgba(255,255,255,0.5)` | `var(--color-text-tertiary)` |

### 5.3 AuroraCanvas 浅色化

`web/src/components/AuroraCanvas.tsx` 当前硬编码了 5 个 orbs 的 RGB 颜色（126,220,200 青 / 108,99,255 紫 / 59,130,246 蓝 / 167,139,250 浅紫 / 34,211,238 亮青）。

V2 改造：
1. 在 `index.css` 新增 `--orb-color-1` ~ `--orb-color-5`（深色保持原色，浅色变 pastel）
2. AuroraCanvas 改成读 CSS var（用 `c()` helper 或直接 `getComputedStyle`）
3. 每次 theme 切换时重启动画循环（通过 `useThemeStore` 订阅 + useEffect cleanup）

或者更简单：浅色下保留 AuroraCanvas，但**降低主体 alpha**（dark `0.28` → light `0.12` 之类），保留品牌氛围又不刺眼。

### 5.4 LoginModal 玻璃化

V1 LoginModal 在浅色下用了：
- bg: `var(--color-bg-modal-elevated)` = `#ffffff`
- border: `var(--color-border-modal-soft)` = `rgba(0,0,0,0.06)`

V2 升级为真正的玻璃：
- bg: `var(--color-bg-modal-glass)` = `rgba(255,255,255,0.85)`
- backdrop-filter: `blur(24px) saturate(180%)`（已有）
- 加 inset highlight: `box-shadow: ..., inset 0 1px 0 var(--color-inset-highlight)`
- 加 multi-layer shadow: `box-shadow: var(--shadow-glass-light)`

---

## 六、其他玻璃面升级清单

按"已有 backdrop-filter 但浅色没玻璃感"扫描，13 个文件需要逐一升级：

| 文件 | 现状 | V2 调整 |
|---|---|---|
| `Sidebar.module.css` | `bg: var(--color-sidebar-bg)` + `backdrop-filter: blur(16px) saturate(160%)` | bg 变成新的 `--color-bg-glass`（浅色透白）；保留 backdrop-filter |
| `AnnouncementBanner.module.css` | linear-gradient + backdrop-filter | gradient 在浅色下改用 chip-warm-bg；keep blur |
| `AnnouncementModal.module.css` | overlay + 内卡 | overlay 浅色变 `rgba(0,0,0,0.20)`；内卡变玻璃 |
| `VideoDetailModal.module.css` `.infoPanel` | `bg: var(--color-bg-upload)` + `backdrop-filter: blur(24px) saturate(180%)` | bg 改 `--color-bg-glass`；加 inset highlight |
| `VideoDetailModal.module.css` `.detailModal` (TeamsPage 类似) | `bg: var(--color-bg-modal-glass)` | 已经是玻璃 token，V2 调 alpha 即可 |
| `GenerationCard.module.css` | 部分卡片有 backdrop-filter | 用 glass token |
| `PromptInput.module.css` | mention dropdown | 浅色用 `--color-bg-dropdown` 玻璃 |
| `LoginModal.module.css` | (见 5.4) | 玻璃化 |
| `ForceChangePasswordModal.module.css` | 同 LoginModal | 玻璃化 |
| `Toast.module.css` | 浮层 | 玻璃 `blur(12px) saturate(140%)` |
| `Select.module.css` | 下拉 | 同上 |
| `Dropdown.module.css` | 下拉 | 同上 |
| `DatePicker.module.css` | 弹层 | 同上 |
| `TeamsPage.module.css` `.detailModal` | 玻璃弹窗 | 调 alpha + 加 inset highlight |

---

## 七、Admin 页面"实体白 + 影边"统一

V2 在 admin 页保留 Vercel 风格（不要全玻璃，那会丢失数据焦点），但调整：

1. **Stat 卡片 / 表格 wrapper**：
   - bg: `var(--color-bg-card)` = 浅色下变 `#ffffff` 纯白
   - box-shadow: `var(--shadow-card-light)` = `0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06)`
   - border: `1px solid var(--color-border-card)` = `rgba(0,0,0,0.08)`

2. **表格行 hover**：
   - bg: `var(--color-bg-row-hover)`（新 var）= `rgba(0,0,0,0.03)`

3. **active 导航项**：
   - bg: `var(--color-sidebar-active)` = `rgba(0,0,0,0.06)` 浅灰药丸
   - text: `var(--color-primary)` 主色（V1 浅色 `#5048cc`）

---

## 八、实施步骤（推荐顺序）

```
Phase A — 基础设施（不改可见效果）
  A.1  index.css [data-theme="light"] 全部按 §4 改值
  A.2  index.css :root 新增 --color-bg-glass / --color-bg-glass-strong / --color-bg-row-hover /
        --color-border-glass-edge / --color-chip-warm-* / --shadow-card-light / --shadow-glass-light 
        七组新 var（深浅各一套）
  A.3  删掉 [data-theme="light"] .aurora-bg { display: none }
  A.4  调 aurora RGB 值（CSS var），让浅色 aurora 是 pastel
  A.5  AuroraCanvas.tsx 接入 CSS var（或保留硬编码 + 在浅色下额外降 alpha）

Phase B — LandingPage 浅色化
  B.1  移除 data-theme="dark"
  B.2  LandingPage.module.css 全部硬编码颜色 → var（约 21 处）
  B.3  跑截图：登录页应该浅色 + LoginModal 玻璃 + AuroraCanvas pastel

Phase C — 玻璃面升级
  C.1  Sidebar 用新 --color-bg-glass
  C.2  VideoDetailModal.infoPanel 用新 glass
  C.3  AnnouncementModal / LoginModal / ForceChangePasswordModal 用新 glass + inset highlight
  C.4  Toast / Dropdown / Select / DatePicker 加 saturate(140%)，浅色用 --color-bg-glass-strong
  C.5  AnnouncementBanner gradient 在浅色下改 chip-warm-bg（CSS 限制无法 var-内 alpha，
        所以这一项要写双套独立规则：[data-theme="dark"] .banner { ... } + [data-theme="light"] .banner { ... }）

Phase D — Admin 实体卡升级
  D.1  全局加 box-shadow: var(--shadow-card-light) 给 .statCard / .tableWrapper / .chartSection
  D.2  全局检查 .table tr:hover 用 --color-bg-row-hover
  D.3  Sidebar active 项加确认浅色下视觉

Phase E — 视觉校准
  E.1  跑 Playwright 24 张截图
  E.2  对照 GitBook / Framer 验收
  E.3  逐页迭代 alpha / shadow / blur 数值

Phase F — 兼容性 / 回归
  F.1  tsc + vitest
  F.2  完成报告 → 亮色主题切换V2-完成报告.md
  F.3  本地 commit dev（不 push）
```

---

## 九、关键验收点

完工后跑截图,对比这些视觉特征:

- [ ] LandingPage 浅色：白底 + pastel aurora 隐约可见 + LoginModal 是**透明白玻璃**（能看见 aurora 透过来）
- [ ] LoginModal 顶边有微妙白色 inset highlight
- [ ] 生成页 Sidebar 浅色是**透明白玻璃**（能看见后景内容隐约透过）
- [ ] VideoDetailModal infoPanel 浅色：玻璃白板 + 主视频区可见
- [ ] AnnouncementModal 弹窗：玻璃白卡 + overlay 是 _淡黑_ 不是 _重黑_
- [ ] Admin 仪表盘 / 团队管理：纯白卡片 + 1px 阴影边 + 多层柔阴影，类似 GitBook 工作台
- [ ] 公告横幅 / Trial / "新版上线" pill：暖米色 chip 风格
- [ ] ECharts tooltip / 网格 / 轴在浅色下清晰可读
- [ ] 主色按钮 #5048cc 在白底上对比度通过 WCAG AA
- [ ] 切换按钮（月亮/太阳）位置 + hover 颜色都没问题

---

## 十、风险点

1. **backdrop-filter 性能**：Safari + Chrome 都需要 GPU 合成层。同屏 10+ 玻璃面可能掉帧。当前项目最多 5-6 个同屏玻璃，可接受。如果发现 < 60fps，把 Toast / Dropdown 这种小弹层退回实体。

2. **AuroraCanvas 浅色刺眼**：pastel 色板可能在某些浅色下仍然觉得"花"。fallback 方案：浅色下整个 AuroraCanvas 用 `opacity: 0.5` 整体压一档。

3. **打印 / 截图工具兼容性**：backdrop-filter 在某些 PDF/截图引擎不渲染，玻璃会变成纯实体。Playwright headless Chromium 是 OK 的。

4. **半透明色叠加导致文字对比度变化**：玻璃面上的文字（如 LoginModal "AirDrama" 标题）背景从 dark 切到 light 时对比度差异巨大。已经在 §4.6 用 `--color-text-on-glass` 调整，但实际跑下来可能还要再调。

5. **AnnouncementBanner gradient var 限制**：CSS gradient 不能在 var() 上加自定义 alpha。要么写两条独立 `[data-theme]` 规则，要么改成 `background-image: linear-gradient(rgb(from var(--xxx) r g b / 0.10), ...)` 用新 `rgb(from ...)` 函数（Chrome 119+ 支持，需要查兼容性）。保险起见用两条独立规则。

---

## 十一、工作量估算

| 阶段 | 工作量 | 备注 |
|---|---|---|
| Phase A | 1 小时 | index.css 改写 + 新 var |
| Phase B | 1 小时 | LandingPage + AuroraCanvas |
| Phase C | 1.5 小时 | 13 个玻璃面挨个调（可派 2-3 个 sub-agent 并行） |
| Phase D | 0.5 小时 | admin 实体卡 |
| Phase E | 1 小时 | 截图 + 视觉迭代 |
| Phase F | 0.5 小时 | tsc / vitest / commit |
| **合计** | **5.5 小时（AI 连续）** | 比 V1 多 1.5 小时，因为多了一轮迭代 |

---

## 十二、与 V1 的差异总览

| 维度 | V1 | V2 |
|---|---|---|
| 浅色 page bg | `#fafafa` | `#fafafa` (不变) |
| 浅色 aurora | `display: none` | pastel 紫蓝桃 0.18-0.30 |
| LandingPage | 强制 `data-theme="dark"` | 跟随主题切换 |
| 浅色 card bg | `rgba(0,0,0,0.05)` 黑透明 | **拆分**：实体 `#fff` (admin 卡) vs 玻璃 `rgba(255,255,255,0.65)` (sidebar/modal) |
| backdrop-filter | 散落各处，无统一 | 五档标准化（Sidebar/Modal/Hero/Dropdown/Toast） |
| Inset highlight | 无 | 玻璃顶边白高光 `rgba(255,255,255,0.50)` |
| 阴影 | 单层 `--color-shadow-modal` | 双层 `--shadow-card-light` + `--shadow-glass-light` |
| 文字主色 | `#171823` 微紫 | `#171717` Vercel Black |
| 暖调 chip | 无 | 新增 `--color-chip-warm-*` |
| AuroraCanvas | 浅色硬编码不变（深色配色） | 接入 CSS var 或浅色态降 alpha |

---

## 参考资料

- GitBook 主站：https://www.gitbook.com/（用户提供截图 × 3）
- Framer 玻璃 demo 图：https://framerusercontent.com/images/FTmA5L2PDssA4gAib6edPamSM.webp（已本地分析）
- Linear 浅色方案：https://linear.app/（design-linear-app skill 已加载）
- Vercel Geist：https://vercel.com/design/geist（design-vercel skill 已加载）
- WCAG 对比度：https://webaim.org/resources/contrastchecker/
- CSS `rgb(from var() ...)` 兼容性：https://caniuse.com/css-relative-colors

---

## Critical Files

修改：
- `web/src/index.css` — `[data-theme="light"]` 块大改 + 新增 ~7 个 var
- `web/src/pages/LandingPage.tsx` — 移除 `data-theme="dark"` 强制
- `web/src/pages/LandingPage.module.css` — 21 处颜色 → var
- `web/src/components/AuroraCanvas.tsx` — orbs RGB 接入 var 或加 theme-aware alpha
- 13 个 module.css 文件玻璃面调整（详见 §6）

不动：
- 后端
- TS 业务逻辑
- 现有 var 命名（仅微调值）

---

**预期效果（V2 完成后）**：

- 登录页：纯白 + 微妙 pastel aurora + 透明白玻璃 LoginModal + 暖橙公告 chip
- 生成页：透明白玻璃 Sidebar + 主视频区实体白卡 + 玻璃 modal
- 后台仪表盘：Vercel-style 纯白卡 + 多层阴影 + 主色按钮
- 整体感受：和 GitBook / Linear / Vercel 同语言，不再是"色块版深色取反"
