AirSpark/UI-Design-System.md

# Air Spark — UI Design System v0.3

> 2026-03-04 | 经 ui-ux-pro-max skill 审查优化

---

## 1. 设计风格定位

**核心关键词**：Liquid Glass · Cinematic Dark · AI Native · Premium Tool

参考方向：Apple visionOS 2 液态玻璃 + TopNow 极简科技感
视觉目标：让非技术用户一眼觉得"很贵"，专业用户觉得"很懂行"

**ui-ux-pro-max 风格匹配**：Liquid Glass（Score: Best Match）
- Best For: Premium SaaS, creative platforms, branding experiences
- 注意事项：Performance ⚠ Moderate-Poor（需做 `prefers-reduced-motion` 降级）、Accessibility ⚠ Text contrast（需保证 4.5:1）

---

## 2. 色彩系统

### 背景层
| Token | 值 | 用途 |
|-------|----|------|
| `--bg-base` | `#07070f` | 主背景（深空黑） |
| `--bg-surface` | `#0d0d1a` | 表面层 |
| `--bg-elevated` | `#12121f` | 抬升层（卡片底） |

### 玻璃层
| Token | 值 | 用途 |
|-------|----|------|
| `--glass-01` | `rgba(255,255,255,0.04)` | 最轻玻璃 |
| `--glass-02` | `rgba(255,255,255,0.07)` | 标准玻璃卡片 |
| `--glass-03` | `rgba(255,255,255,0.12)` | 高亮玻璃（hover） |
| `--glass-border` | `rgba(255,255,255,0.10)` | 玻璃描边 |
| `--glass-border-bright` | `rgba(255,255,255,0.20)` | 高亮描边 |

### 品牌 & 强调色
| Token | 值 | 用途 |
|-------|----|------|
| `--accent-primary` | `#6c63ff` | 紫色（AI / 创意 / 主 CTA） |
| `--accent-blue` | `#3b82f6` | 蓝色（进行中状态） |
| `--accent-glow` | `rgba(108,99,255,0.25)` | 紫色光晕 |

### 状态色
| 状态 | 颜色 | Tailwind | 含义 |
|------|------|----------|------|
| pending | 灰 | `gray-600` | 队列中 |
| running | 蓝 + 脉冲 | `blue-500` + `animate-pulse` | 生成中 |
| completed | 绿 | `emerald-500` | 完成 |
| failed | 红 | `red-500` | 失败 |
| waiting | 琥珀 | `amber-500` | 等待人工确认 |

### 文字
| Token | 值 | 用途 |
|-------|----|------|
| `--text-primary` | `#f1f0ff` | 主文字（微紫色调） |
| `--text-secondary` | `#8b8ea8` | 次要文字 |
| `--text-muted` | `#4c4f6b` | 弱化文字 |

---

## 3. 玻璃效果规格（CSS）

```css
/* 标准玻璃卡片 */
.glass-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 8px 32px rgba(0,0,0,0.4),
    0 1px 0 rgba(255,255,255,0.12) inset;
}

/* 激活/聚焦卡片（带品牌光晕）*/
.glass-card--active {
  border-color: rgba(108, 99, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(108,99,255,0.2) inset,
    0 8px 40px rgba(0,0,0,0.5),
    0 0 24px rgba(108,99,255,0.15);
}

/* 主 CTA 按钮 */
.btn-primary {
  background: linear-gradient(135deg, #6c63ff 0%, #5b54f0 100%);
  box-shadow: 0 0 20px rgba(108,99,255,0.4), 0 4px 12px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 14px 32px;
}
```

### Tailwind 实现片段

```tsx
// 玻璃卡片
<div className="bg-white/[0.06] backdrop-blur-2xl border border-white/10 rounded-2xl
  shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_8px_32px_rgba(0,0,0,0.4)]
  ring-1 ring-inset ring-white/5">

// 主 CTA 按钮（确认类）
<button className="bg-gradient-to-br from-violet-500 to-violet-700
  shadow-[0_0_20px_rgba(139,92,246,0.4),0_4px_12px_rgba(0,0,0,0.3)]
  border border-white/15 rounded-xl px-8 py-4
  text-white font-semibold text-base
  hover:shadow-[0_0_30px_rgba(139,92,246,0.6)] transition-all duration-200
  active:scale-[0.98] cursor-pointer">

// 生成中状态格子（蓝·脉冲）
<div className="bg-blue-500/20 border border-blue-400/40 rounded-lg animate-pulse
  ring-1 ring-blue-400/30">

// 完成状态格子
<div className="bg-emerald-500/15 border border-emerald-400/30 rounded-lg">

// 失败状态格子
<div className="bg-red-500/15 border border-red-400/30 rounded-lg">
```

### 固定层叠规范（Fixed Overlay）

固定定位元素（navbar、sidebar、modal）滚动时会与页面内容重叠。
为保持"半透不全透"的高级感，统一使用 **bg-base 色 + 高不透明度 + blur**，而非纯 glass-card：

| 元素 | 背景 | 模糊 | 边框 |
|------|------|------|------|
| **Navbar** | `rgba(7, 7, 15, 0.85)` | `blur(20px) saturate(180%)` | `border-b border-white/[0.06]` |
| **Sidebar** | `rgba(7, 7, 15, 0.80)` | `blur(16px) saturate(160%)` | `border-r border-white/[0.06]` |
| **Modal backdrop** | `rgba(0, 0, 0, 0.60)` | `blur(8px)` | 无 |
| **Modal panel** | `rgba(13, 13, 26, 0.92)` | `blur(24px) saturate(180%)` | `border border-white/[0.08]` |

**核心原则**：
- 背景色取自 `--bg-base` 或 `--bg-surface`，不透明度 **≥ 0.80**（保证可读）
- 搭配 `backdrop-filter: blur` 让底层内容产生柔和虚化（高级感来源）
- 不使用纯 `glass-card`（0.06 不透明度太低，重叠时文字会模糊）

```tsx
// Navbar 标准写法
<nav className="fixed top-0 left-0 right-0 z-30 border-b border-white/[0.06]"
  style={{
    background: 'rgba(7, 7, 15, 0.85)',
    backdropFilter: 'blur(20px) saturate(180%)',
    WebkitBackdropFilter: 'blur(20px) saturate(180%)',
  }}>
```

---

## 4. 字体系统

| 用途 | 字体 | CSS 变量 | 字重 | 备注 |
|------|------|----------|------|------|
| 大标题 / Display | Space Grotesk | `--font-heading` | 700 | 科技感，棱角干净（skill "Tech Startup" 首选） |
| 标题 H1-H3 | Space Grotesk | `--font-heading` | 600-700 | |
| 正文 / UI 文字 | DM Sans | `--font-body` | 400-600 | 几何感更强，比 Inter 更 premium，与 Space Grotesk 配合更和谐 |
| 代码 / ID / 时码 | JetBrains Mono | `--font-mono` | 400 | 技术细节标注 |
| **中文文字** | **Noto Sans SC（思源黑体）** | `--font-cn` | 400-700 | Google Fonts 免费中文字体，与 DM Sans 风格匹配 |

> **中文 fallback 策略**：英文字体栈末尾统一追加 `"Noto Sans SC"` 作为 fallback，中文字符自动命中。
> 需要纯中文排版时使用 `--font-cn`（`"Noto Sans SC", "DM Sans", sans-serif`）。

**Google Fonts 导入：**
```css
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
```

**CSS 变量（globals.css `@theme inline`）：**
```css
--font-heading: "Space Grotesk", "Noto Sans SC", sans-serif;
--font-body: "DM Sans", "Noto Sans SC", sans-serif;
--font-mono: "JetBrains Mono", monospace;
--font-cn: "Noto Sans SC", "DM Sans", sans-serif;
```

字号阶梯：
- Display: 48px / 700 / letter-spacing: -0.02em
- H1: 32px / 700 / -0.01em
- H2: 24px / 600
- H3: 18px / 600
- Body: 15px / 400 / line-height: 1.6
- Small: 13px / 400
- Mono: 13px / 400

**关键规则：**
- 所有字体必须加 `font-display: swap`，避免 FOIT（Flash of Invisible Text）
- Body 文字 line-height: 1.6，行宽上限 65-75 字符

---

## 5. 图标 & 视觉元素

| 规则 | 标准 |
|------|------|
| 图标库 | **Lucide Icons**（SVG，统一 24x24 viewBox，Tailwind `w-5 h-5` 或 `w-6 h-6`） |
| 禁止 Emoji | 不使用 emoji 作为 UI 图标，全部用 SVG |
| 品牌 Logo | 从 Simple Icons 获取官方 SVG |
| Hover 状态 | 只用 color/opacity/shadow 过渡，不用 scale（避免布局偏移） |
| 交互元素 | 所有可点击元素加 `cursor-pointer` |

---

## 6. z-index 管理

| 层级 | z-index | 用途 |
|------|---------|------|
| 基础内容 | `0` | 正常文档流 |
| 浮动卡片 | `10` | 弹出面板、dropdown |
| Sticky 步骤条 | `20` | 流水线步骤条 |
| 顶部导航栏 | `30` | 全局导航 |
| 模态框遮罩 | `40` | Modal overlay |
| 模态框内容 | `50` | Modal content |
| Toast 通知 | `60` | 全局提示 |

---

## 7. 页面结构

### 7.1 整体布局

```
┌──────────────── 顶部导航栏（玻璃，fixed）────────────────┐
│  [⚡ Air Spark]    项目名 / 集数          [设置] [成员]  │
└──────────────────────────────────────────────────────────┘

┌──────────── 流水线步骤条（横向，sticky）─────────────────┐
│  ①剧本 ══► ②规划 ══► ③人设 ══► ④分镜 ══► ⑤切分 ══► ⑥生成 ══► ⑦剪辑  │
│  ✓完成    ✓完成   ⚠待确认  ○待机    ○待机    ○待机    ○待机  │
└──────────────────────────────────────────────────────────┘

┌──────────────── 当前阶段主内容区 ───────────────────────┐
│  [阶段标题]                                              │
│  [内容区域 — 根据阶段变化]                              │
│  [底部 CTA 区域]                                        │
└──────────────────────────────────────────────────────────┘

┌──────── 系统日志（可折叠，默认收起）────────────────────┐
│  ▶ 系统日志                                    [展开]  │
└──────────────────────────────────────────────────────────┘
```

### 7.2 Pipeline View — 主流水线页

```
┌─────────────────────────────────────────────────────────────────────────┐
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░  [⚡ Air Spark]     T仔的上班日记 / EP01           [设置] [成员]  ░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│                                                                         │
│  ┌──────────────── 流水线进度条 ──────────────────────────────────┐   │
│  │  ①剧本 ══► ②规划 ══► ③人设 ══► ④分镜 ══► ⑤切分 ══► ⑥生成 ══► ⑦剪辑│   │
│  │  ✓完成    ✓完成   ⚠待确认  ○待机    ○待机    ○待机    ○待机  │   │
│  └────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│  ┌──────────────────── 当前阶段内容区 ────────────────────────────┐   │
│  │                                                                  │   │
│  │   【Stage 3 — 人设图审核】                                      │   │
│  │                                                                  │   │
│  │   ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐          │   │
│  │   │░░░░░░░░░│  │░░░░░░░░░│  │░░░░░░░░░│  │░░░░░░░░░│          │   │
│  │   │  T仔    │  │  特特   │  │  班长   │  │  路人甲  │         │   │
│  │   │ 人设三视│  │ 人设三视│  │ 人设三视│  │ ⚠生成失败│         │   │
│  │   │ [✓ 通过]│  │ [✓ 通过]│  │ [✓ 通过]│  │ [↻ 重跑] │         │   │
│  │   └─────────┘  └─────────┘  └─────────┘  └─────────┘          │   │
│  │                                                                  │   │
│  │   ┌──────────────────────────────────────────────────────┐     │   │
│  │   │  ⚠ 路人甲生成失败，重跑后可确认                      │     │   │
│  │   │                                                        │     │   │
│  │   │      [ 等待路人甲重跑完成... ]  ← CTA 灰色禁用        │     │   │
│  │   └──────────────────────────────────────────────────────┘     │   │
│  └──────────────────────────────────────────────────────────────────┘  │
│                                                                         │
│  ┌── 日志（可折叠）─────────────────────────────────────────────────┐  │
│  │  ▶ 系统日志                                               [展开]│  │
│  └─────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────┘
```

---

## 8. Stage 6 — 视频生成进度界面

```
┌─────────────────────────────────────────────────────────────────────────┐
│  【Stage 6 — 视频生成中】                        已完成 18 / 32 片段   │
│                                                                          │
│  ████████████████████░░░░░░░░░░░░░░░░░  56%    预计剩余 ~8 分钟        │
│                                                                          │
│  ┌──────────────────────── 片段状态网格 ────────────────────────────┐  │
│  │                                                                    │  │
│  │  ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐       │  │
│  │  │ 01 │ │ 02 │ │ 03 │ │ 04 │ │ 05 │ │ 06 │ │ 07 │ │ 08 │       │  │
│  │  │ ✓  │ │ ✓  │ │ ✓  │ │ ✓  │ │ ✓  │ │ ✓  │ │ ✓  │ │ ✗  │       │  │
│  │  │ 绿  │ │ 绿  │ │ 绿  │ │ 绿  │ │ 绿  │ │ 绿  │ │ 绿  │ │ 红  │       │  │
│  │  └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘       │  │
│  │                                                                    │  │
│  │  ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐       │  │
│  │  │ 09 │ │ 10 │ │ 11 │ │ 12 │ │ 13 │ │ 14 │ │ 15 │ │ 16 │       │  │
│  │  │ ✓  │ │ ✓  │ │ ✓  │ │ ✓  │ │ ●  │ │ ●  │ │ ●  │ │ ●  │       │  │
│  │  │ 绿  │ │ 绿  │ │ 绿  │ │ 绿  │ │蓝脉│ │蓝脉│ │蓝脉│ │蓝脉│       │  │
│  │  └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘       │  │
│  │                                                                    │  │
│  │  ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ...                          │  │
│  │  │ 17 │ │ 18 │ │ 19 │ │ 20 │ │ 21 │                              │  │
│  │  │ ●  │ │ ●  │ │ ○  │ │ ○  │ │ ○  │                              │  │
│  │  │蓝脉│ │蓝脉│ │ 灰  │ │ 灰  │ │ 灰  │                              │  │
│  │  └────┘ └────┘ └────┘ └────┘ └────┘                              │  │
│  │                                                                    │  │
│  │  图例：  ✓绿 完成   ●蓝 生成中(脉冲)   ○灰 队列中   ✗红 失败    │  │
│  └────────────────────────────────────────────────────────────────┘   │
│                                                                          │
│  ┌─── 失败片段处理 ──────────────────────────────────────────────────┐  │
│  │  ⚠ 片段08 — 生成失败（重试3次后超时）   [编辑提示词] [↻ 重跑]  │  │
│  └──────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────┘
```

---

## 9. 人工确认交互规范

### 核心原则
> 确认时清场噪音，只留一个决策。CTA 状态变化（灰→绿）有动画。确认后 3 秒防误触。

### Stage 1 — 剧本确认

```
对话区（主体）
  ↓ 剧本满意后底部出现确认栏

┌──────────────────────────────────────────────────────────┐
│  ✅ 剧本已就绪 — 共 8 场景，预估 4 分 20 秒              │
│                                                            │
│  ╔══════════════════════════════════════════════════╗    │
│  ║        确认剧本，启动流水线  ▶                    ║    │  ← 大按钮，紫色发光
│  ╚══════════════════════════════════════════════════╝    │
│                                                            │
│  [继续修改剧本]                                           │  ← 小字次级操作
└──────────────────────────────────────────────────────────┘
```

### Stage 3 — 人设确认

- 每张图独立操作：`[✓ 通过]` / `[↻ 重跑]`
- 支持单张图 `[编辑提示词后重跑]`
- 底部汇总 CTA：所有图通过 → 按钮从灰色变绿色发光 → 可点击
- 点击确认后：按钮显示 "3s 后启动..." + `[取消]` 防误触

### 自动阶段（Stage 2/4/5）

- **骨架屏优先**：超过 300ms 的异步操作，显示 Skeleton 占位（不是空白）
- 进度文字（"正在规划场景结构..."）+ 预估时间
- 完成后自动高亮 CTA 或自动推进（取决于流水线模式）
- 无需用户操作，只展示状态

**Skeleton 实现：**
```tsx
// 骨架屏卡片
<div className="bg-white/[0.04] rounded-2xl animate-pulse">
  <div className="h-40 bg-white/[0.06] rounded-t-2xl" />
  <div className="p-4 space-y-3">
    <div className="h-4 bg-white/[0.08] rounded w-3/4" />
    <div className="h-3 bg-white/[0.06] rounded w-1/2" />
  </div>
</div>
```

---

## 10. 动效规范

| 场景 | 时长 | Easing |
|------|------|--------|
| 卡片 hover | 150ms | ease-out |
| CTA 状态变化（灰→绿） | 300ms | ease-in-out |
| 片段格子状态更新 | 200ms | ease-out |
| 步骤条推进动画 | 400ms | ease-in-out |
| 页面切换 | 250ms | ease-in-out |
| 脉冲动画（running 状态） | 1500ms | ease-in-out，循环 |
| 玻璃形变动效（Liquid Glass） | 400-600ms | cubic-bezier(0.16, 1, 0.3, 1) |

**性能降级（必须）：**
```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
```

**Tailwind 实现：**
```tsx
// 所有动画组件加上 motion-safe 前缀
<div className="motion-safe:animate-pulse ..." />
<div className="motion-safe:transition-all motion-safe:duration-200 ..." />
```

**规则：**
- 微交互：150-300ms（hover、click 反馈）
- 状态变化：300-400ms（步骤推进、CTA 变化）
- 液态玻璃：400-600ms（morphing、blur 变化）
- 装饰动画仅用于 loading，不用于静态元素
- 所有 animation 用 `transform` 和 `opacity`，不用 `width`/`height`/`top`/`left`

---

## 11. 无障碍 & 可用性规范（CRITICAL）

| 规则 | 标准 |
|------|------|
| 文字对比度 | 主文字 `#f1f0ff` on `#07070f` = **18.5:1** ✅ 远超 WCAG AAA |
| 次要文字对比度 | `#8b8ea8` on `#07070f` = **6.2:1** ✅ 超 AA |
| 弱化文字对比度 | `#4c4f6b` on `#07070f` = **3.1:1** ⚠ 仅用于装饰性标注，不用于关键信息 |
| Focus 焦点环 | 所有交互元素：`focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-2 focus-visible:ring-offset-[#07070f]` |
| 键盘导航 | Tab 顺序 = 视觉顺序；步骤条、片段网格支持方向键导航 |
| 按钮最小尺寸 | 44×44px 点击区域（移动端和桌面端均适用） |
| 颜色不作为唯一标识 | 状态除颜色外，必须有图标/文字辅助（✓/●/○/✗ + 文字标签） |
| aria-label | 图标按钮（设置、重跑、展开）必须有 aria-label |
| 表单标签 | 所有 input 必须关联 `<label>` |

---

## 12. 交付前质检清单

### 视觉质量
- [ ] 无 emoji 作为图标（全部 Lucide SVG）
- [ ] 所有图标来自同一套图标库，尺寸一致
- [ ] Hover 状态不引起布局偏移
- [ ] 玻璃卡片在深色背景上有足够可见度

### 交互
- [ ] 所有可点击元素有 `cursor-pointer`
- [ ] Hover 有明确视觉反馈（150-300ms 过渡）
- [ ] Focus 焦点环对键盘用户可见
- [ ] 异步操作 > 300ms 时显示 Skeleton 骨架屏

### 性能
- [ ] `prefers-reduced-motion` 降级已实现
- [ ] 图片使用 WebP + lazy loading
- [ ] 字体 `font-display: swap`
- [ ] 重组件使用 `next/dynamic` 动态导入
- [ ] Bundle 分析通过（`@next/bundle-analyzer`）

### 响应式
- [ ] 375px / 768px / 1024px / 1440px 四档断点测试
- [ ] 无横向滚动条
- [ ] 固定导航栏不遮挡内容（留 padding-top）

---

## 13. 间距系统

基于 4px 基础单位，所有间距从以下阶梯中选取：

| Token | 值 | 用途 |
|-------|-----|------|
| `space-1` | 4px | 图标与文字间距、紧凑元素内间距 |
| `space-2` | 8px | 相关元素组内间距（如标签+输入框） |
| `space-3` | 12px | 卡片内边距（紧凑型）、列表项间距 |
| `space-4` | 16px | 标准卡片内边距、表单字段间距 |
| `space-6` | 24px | 卡片内边距（宽松型）、区块间距 |
| `space-8` | 32px | Section 之间的间距 |
| `space-12` | 48px | 大区块间距 |
| `space-16` | 64px | 页面级 section 间距 |

**核心原则：**
- 同组元素用 `space-2` ~ `space-3`（紧密关联）
- 不同组件之间用 `space-6` ~ `space-8`（视觉分隔）
- 页面容器统一 `px-6`（24px 左右内边距）、`max-w-7xl mx-auto`

```tsx
// Tailwind 对照
<div className="p-4">      // space-4 = 16px
<div className="p-6">      // space-6 = 24px
<div className="gap-3">    // space-3 = 12px
<div className="mb-8">     // space-8 = 32px
<section className="mb-16"> // space-16 = 64px（页面级）
```

---

## 14. 圆角系统

| Token | 值 | 用途 |
|-------|-----|------|
| `radius-sm` | 6px | 小元素（tag、badge、输入框） |
| `radius-md` | 8px | 按钮、小卡片、下拉菜单 |
| `radius-lg` | 12px | 中型卡片、CTA 按钮 |
| `radius-xl` | 16px | 主内容卡片（glass-card 默认） |
| `radius-2xl` | 24px | 大面板、模态框 |
| `radius-full` | 9999px | 头像、圆形按钮、pill tag |

```tsx
// Tailwind 对照
rounded-md    // 6px → tag, badge, input
rounded-lg    // 8px → 按钮
rounded-xl    // 12px → CTA
rounded-2xl   // 16px → glass-card
rounded-3xl   // 24px → modal
rounded-full  // pill
```

**核心原则：**
- 嵌套元素的子级圆角 = 父级圆角 - 父级内边距（避免嵌套圆角溢出）
- 同层级元素圆角保持一致

---

## 15. 表单元素

### Input / Textarea

```css
.form-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.form-input:focus {
  outline: none;
  border-color: rgba(108, 99, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input--error {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
```

### Tailwind 实现

```tsx
// 标准输入框
<input className="w-full bg-white/[0.04] border border-white/10 rounded-lg
  px-4 py-3 text-[15px] text-text-primary placeholder:text-text-muted
  focus:outline-none focus:border-accent/50 focus:ring-3 focus:ring-accent/15
  transition-all duration-200" />

// 错误状态
<input className="... border-red-500/50 focus:ring-red-500/12" />

// 多行输入（剧本对话）
<textarea className="w-full bg-white/[0.04] border border-white/10 rounded-lg
  px-4 py-3 text-[15px] text-text-primary placeholder:text-text-muted
  focus:outline-none focus:border-accent/50 focus:ring-3 focus:ring-accent/15
  transition-all duration-200 resize-none min-h-[120px]" />

// Label
<label className="block text-sm font-medium text-text-secondary mb-2">
```

### Select / Dropdown

> **禁止使用原生 `<select>`**——弹出菜单无法自定义样式（白底，破坏暗色主题）。
> 必须使用自定义 dropdown 组件。

```tsx
// 触发按钮
<button className="w-full bg-white/[0.04] border border-white/10 rounded-lg
  px-4 py-3 text-[15px] text-text-primary text-left flex items-center justify-between
  cursor-pointer transition-all duration-200
  // 展开时：
  border-accent/50 ring-3 ring-accent/15">
  {selectedValue}
  <ChevronsUpDown className="w-4 h-4 text-text-muted" />
</button>

// 下拉面板（absolute, z-20）
<div className="absolute z-20 mt-1 w-full rounded-lg border border-white/10 overflow-hidden"
  style={{ background: 'rgba(13, 13, 26, 0.95)', backdropFilter: 'blur(20px)' }}>
  // 选项
  <button className="w-full px-4 py-2.5 text-[15px] text-left
    text-text-primary hover:bg-white/[0.06]
    // 选中态：text-accent bg-accent/10">
</div>
```

### 表单规则
- Label 在 input 上方，间距 `mb-2`（8px）
- 字段之间间距 `space-y-4`（16px）
- 错误信息在字段下方，`text-sm text-red-400 mt-1`
- 必填标识用 `*` + `text-red-400`，不用颜色作为唯一标识
- 所有 input 必须有关联 `<label>`（无障碍要求）

---

## 16. Toast 通知

### 类型与样式

| 类型 | 图标 | 左边框色 | 用途 |
|------|------|---------|------|
| **success** | `Check` (Lucide) | `emerald-500` | 操作成功、保存完成 |
| **error** | `X` (Lucide) | `red-500` | 操作失败、API 错误 |
| **warning** | `AlertTriangle` | `amber-500` | 需要注意、即将超时 |
| **info** | `Info` (Lucide) | `blue-500` | 提示信息、状态更新 |

### 行为规范
- 位置：屏幕右下角，距底 24px、距右 24px
- 多条堆叠：从下往上，间距 8px
- 自动消失：success/info = 4s，warning = 6s，error = 不自动消失（需手动关闭）
- 进入动画：从右侧滑入 + fade in（250ms, ease-out）
- 退出动画：向右滑出 + fade out（200ms, ease-in）

### Tailwind 实现

```tsx
// Toast 容器
<div className="fixed bottom-6 right-6 z-60 flex flex-col-reverse gap-2">

// 单条 Toast
<div className="glass-card px-4 py-3 flex items-start gap-3 min-w-[320px] max-w-[420px]
  border-l-3 border-l-emerald-500
  animate-[slideInRight_250ms_ease-out]">
  <Check className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
  <div className="flex-1">
    <p className="text-sm font-medium text-text-primary">保存成功</p>
    <p className="text-xs text-text-secondary mt-0.5">剧本已保存为正式版本</p>
  </div>
  <button className="text-text-muted hover:text-text-secondary cursor-pointer"
    aria-label="关闭通知">
    <X className="w-4 h-4" />
  </button>
</div>
```

---

## 17. 空状态

当列表/内容区域无数据时，统一显示空状态占位。

### 结构

```
┌──────────────────────────────────────┐
│                                      │
│          [Lucide 图标 48px]          │
│                                      │
│         主标题（简短描述）            │
│      副标题（下一步指引）            │
│                                      │
│        [ 主操作按钮 ]                │
│                                      │
└──────────────────────────────────────┘
```

### 场景预设

| 场景 | 图标 | 主标题 | CTA |
|------|------|--------|-----|
| 项目列表为空 | `FolderPlus` | 还没有项目 | 创建第一个项目 |
| 资产库为空 | `ImagePlus` | 暂无资产 | 在流水线中生成 |
| 剧集列表为空 | `Film` | 还没有剧集 | 添加第一集 |
| 搜索无结果 | `SearchX` | 没有找到匹配项 | 试试其他关键词 |
| 视频片段为空 | `VideoOff` | 暂无视频片段 | 运行 Stage 6 生成 |

### Tailwind 实现

```tsx
<div className="flex flex-col items-center justify-center py-16 text-center">
  <div className="w-12 h-12 rounded-2xl bg-white/[0.04] flex items-center justify-center mb-4">
    <FolderPlus className="w-6 h-6 text-text-muted" />
  </div>
  <h3 className="font-[family-name:var(--font-heading)] text-lg font-semibold text-text-primary mb-1">
    还没有项目
  </h3>
  <p className="text-sm text-text-secondary mb-6">
    创建你的第一个动画项目，开始 AI 创作之旅
  </p>
  <button className="bg-gradient-to-br from-violet-500 to-violet-700
    border border-white/15 rounded-xl px-6 py-2.5
    text-sm text-white font-medium
    hover:shadow-[0_0_20px_rgba(139,92,246,0.4)] transition-all duration-200
    cursor-pointer">
    创建项目
  </button>
</div>
```

### 规则
- 图标用 `text-muted` 色（不要太抢眼）
- 主标题简短（≤10 字）
- 副标题给出明确的下一步指引
- 必须有 CTA 按钮引导操作（除"搜索无结果"外）

---

## 18. 响应式断点

> MVP 优先桌面端（1024px+），移动端后续规划。

| 断点 | Tailwind 前缀 | 宽度 | 用途 |
|------|--------------|------|------|
| Mobile | 默认（无前缀） | < 768px | 未来适配 |
| Tablet | `md:` | ≥ 768px | 简单适配（单栏布局） |
| Desktop | `lg:` | ≥ 1024px | 主设计目标 |
| Wide | `xl:` | ≥ 1280px | 宽屏优化 |
| Ultra-wide | `2xl:` | ≥ 1536px | 超宽屏留白控制 |

### 布局适配规则

| 元素 | < 768px | 768px+ | 1024px+ | 1280px+ |
|------|---------|--------|---------|---------|
| **导航栏** | 汉堡菜单 | 完整导航 | 完整导航 | 完整导航 |
| **内容容器** | `px-4` | `px-6` | `max-w-6xl mx-auto` | `max-w-7xl mx-auto` |
| **审核卡片网格** | 1 列 | 2 列 | 3 列 | 4 列 |
| **片段状态网格** | 4 列 | 6 列 | 8 列 | 8 列 |
| **Pipeline Stepper** | 纵向列表 | 横向滚动 | 横向完整 | 横向完整 |

### 核心原则
- **Mobile-first 写法**：默认写移动端样式，用 `md:` `lg:` 向上覆盖
- 内容区 `max-w-7xl`（1280px），超宽屏两侧自然留白
- 卡片网格用 `grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`
- 固定导航栏高度不变（h-16 = 64px），所有断点保持一致
- 文字不缩放（最小 body 15px），只调整布局

---

## 19. Badge / Tag

### 状态 Badge（方角）

用于流水线阶段状态、任务状态等系统状态标识。

```tsx
// 结构：icon + 文字，圆角 rounded-md，带边框
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md
  text-xs font-medium bg-emerald-500/15 text-emerald-400 border border-emerald-400/20">
  <Check className="w-3 h-3" /> Completed
</span>
```

| 状态 | 背景 | 文字 | 边框 |
|------|------|------|------|
| completed | `emerald-500/15` | `emerald-400` | `emerald-400/20` |
| running | `blue-500/15` | `blue-400` | `blue-400/20` |
| waiting | `amber-500/15` | `amber-400` | `amber-400/20` |
| failed | `red-500/15` | `red-400` | `red-400/20` |
| pending | `white/[0.06]` | `text-secondary` | `white/10` |

### 内容 Tag（圆角 pill）

用于 Skill 标签、剧集标签等内容分类。

```tsx
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full
  text-xs font-medium bg-accent/15 text-accent border border-accent/20">
  <Hash className="w-3 h-3" /> screenplay-skill
</span>
```

---

## 20. Avatar

### 尺寸

| 尺寸 | Tailwind | 用途 |
|------|----------|------|
| SM | `w-8 h-8 text-xs` | 紧凑列表、评论 |
| MD | `w-10 h-10 text-sm` | 默认（导航栏、成员列表） |
| LG | `w-12 h-12 text-base` | 个人资料 |
| XL | `w-16 h-16 text-lg` | 设置页头像 |

### 样式

```tsx
// 带字母（首选）
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-violet-500 to-accent-blue
  flex items-center justify-center text-sm font-semibold text-white">
  T
</div>

// 空白 fallback
<div className="w-10 h-10 rounded-full bg-white/[0.06] border border-white/10
  flex items-center justify-center">
  <User className="w-5 h-5 text-text-muted" />
</div>

// 在线状态指示
<div className="relative">
  {/* avatar */}
  <div className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full
    bg-emerald-500 border-2 border-bg-base" />
</div>

// Avatar Group（重叠）
<div className="flex -space-x-2">
  {avatars.map((a, i) => (
    <div key={i} className="... border-2 border-bg-base" />
  ))}
  <div className="... bg-white/[0.08] text-xs text-text-secondary">+3</div>
</div>
```

---

## 21. Breadcrumb

```tsx
<nav aria-label="Breadcrumb" className="flex items-center gap-2 text-sm">
  <a className="text-text-secondary hover:text-text-primary transition-colors cursor-pointer">
    Projects
  </a>
  <ChevronRight className="w-3.5 h-3.5 text-text-muted" />
  <a className="text-text-secondary hover:text-text-primary transition-colors cursor-pointer">
    T仔的上班日记
  </a>
  <ChevronRight className="w-3.5 h-3.5 text-text-muted" />
  <span className="text-text-primary font-medium">Pipeline</span>
</nav>
```

**规则：**
- 最后一级为当前页面，用 `text-primary font-medium`，不可点击
- 分隔符用 `ChevronRight`（Lucide），`text-muted`
- 必须有 `aria-label="Breadcrumb"` 的 `<nav>` 包裹

---

## 22. Tab / Segmented Control

### Underline Tabs

```tsx
<div className="flex border-b border-white/10">
  <button className={`px-4 py-3 text-sm font-medium relative cursor-pointer
    ${active ? "text-accent" : "text-text-secondary hover:text-text-primary"}`}>
    {label}
    {active && <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent rounded-full" />}
  </button>
</div>
```

### Segmented Control（Pill 风格）

```tsx
<div className="inline-flex bg-white/[0.04] rounded-lg p-1 border border-white/[0.06]">
  <button className={`px-4 py-2 rounded-md text-sm font-medium cursor-pointer
    ${active ? "bg-accent/20 text-accent shadow-sm" : "text-text-secondary hover:text-text-primary"}`}>
    {label}
  </button>
</div>
```

**规则：**
- Tab 切换内容区域，不跳转页面
- 激活态下划线/背景色用 accent
- 所有 tab 按钮加 `cursor-pointer`

---

## 23. Danger Button

破坏性操作（删除项目、清空资产）专用按钮。

```tsx
// 默认 Danger（轻量，用于非终极操作）
<button className="bg-red-500/15 border border-red-400/30 rounded-xl px-6 py-3
  text-[15px] font-medium text-red-400 hover:bg-red-500/25 transition-colors cursor-pointer
  flex items-center gap-2">
  <Trash2 className="w-4 h-4" /> Delete Project
</button>

// 确认 Danger（实心红色，用于二次确认后的终极操作）
<button className="bg-red-600 border border-red-500 rounded-xl px-6 py-3
  text-[15px] font-medium text-white hover:bg-red-700 transition-colors cursor-pointer">
  Confirm Delete
</button>
```

**规则：**
- 破坏性操作必须先弹 Modal 确认，再执行
- 默认展示轻量 danger（红色文字 + 透明底），确认时切换为实心红底
- Focus ring 用 `ring-red-400`

---

## 24. Search Input

```tsx
<div className="relative">
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
  <input type="text" placeholder="Search projects, episodes..."
    className="w-full bg-white/[0.04] border border-white/10 rounded-lg
    pl-10 pr-4 py-3 text-[15px] text-text-primary placeholder:text-text-muted
    focus:outline-none focus:border-accent/50 focus:ring-3 focus:ring-accent/15
    transition-all duration-200" />
</div>
```

**规则：**
- 搜索图标左侧内嵌，`left-3`，输入区域 `pl-10`
- 图标用 `text-muted`，输入时不变色
- 与标准 input 共享 focus 样式

---

## 25. Tooltip

```tsx
// 使用 CSS group/hover，无需 JS
<div className="group relative">
  <button className="p-2.5 rounded-xl glass-card hover:bg-white/[0.12]
    transition-colors cursor-pointer" aria-label="Settings">
    <Settings className="w-5 h-5 text-text-secondary" />
  </button>
  <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2
    px-3 py-1.5 rounded-lg text-xs font-medium text-text-primary whitespace-nowrap
    opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none
    border border-white/10"
    style={{ background: 'rgba(13, 13, 26, 0.95)', backdropFilter: 'blur(12px)' }}>
    Project Settings
    {/* 箭头 */}
    <div className="absolute top-full left-1/2 -translate-x-1/2
      w-2 h-2 rotate-45 border-b border-r border-white/10"
      style={{ background: 'rgba(13, 13, 26, 0.95)' }} />
  </div>
</div>
```

**位置变体：**
- Top: `bottom-full mb-2` + 箭头 `top-full border-b border-r`
- Right: `left-full ml-2` + 箭头 `right-full border-l border-b`
- Bottom: `top-full mt-2` + 箭头 `bottom-full border-t border-l`
- Left: `right-full mr-2` + 箭头 `left-full border-r border-t`

**规则：**
- 背景用 Fixed Overlay 规范：`rgba(13, 13, 26, 0.95)` + `blur(12px)`
- 纯 CSS 实现（`group-hover:opacity-100`），无需 JS 状态
- `pointer-events-none` 防止 tooltip 干扰点击
- 图标按钮必须同时有 `aria-label`（tooltip 仅视觉增强，不替代无障碍）

---

## 26. 待确认项

- [ ] Stage 7 时间轴编辑器的具体 UI 细节（片段缩略图、拖拽交互、波形显示）
- [ ] 移动端适配策略（内部工具优先级低，先做 1024px+ 桌面端）
- [ ] 浅色模式：当前纯暗色，MVP 不做浅色切换