# 首页流体画布设计

## 概述

首页定位为纯粹的视觉体验，不承载信息。全屏 WebGL 流体画布，鼠标/触摸交互产生扰动，中央展示 "Dash" 品牌文字。首屏即全部，无下方内容区。

## 布局

```
┌──────────────────────────────────────────┐
│                                          │
│          Nav (透明浮层，固定顶部)          │
│                                          │
│              ┌─────────────┐             │
│              │   流体画布    │             │
│              │  (全屏 Canvas) │             │
│              │             │             │
│              │    Dash     │             │
│              │  (中央文字)   │             │
│              │             │             │
│              └─────────────┘             │
│                                          │
└──────────────────────────────────────────┘
```

- Canvas 铺满整个视口 (100vw × 100vh)，位于所有内容之下 (z-index: 0)
- 中央文字固定居中，z-index 高于 Canvas
- 无滚动内容，无 footer（首页专属）

## 流体画布

### 色彩

- 底色：cream `#faf9f5`，占画布大部分面积
- 主流动层：coral `#cc785c`，混入少量 amber `#e8a55a`
- 点缀暗部：dark navy `#181715`，偶尔出现如墨滴
- 所有颜色 smooth blending，无硬边界

### 交互

- 鼠标移动 → 光标周围流体扰动，模拟手指划过水面
- 扰动强度正比于鼠标速度：快速 = 大波纹，缓慢 = 细微涟漪
- 鼠标静止 → 流体缓慢自主流动，不完全静止
- 触摸设备 → 触摸点产生扰动

### 中央文字

- 内容："Dash"
- 字体：Liu Jian Mao Cao（草书），字号约 120-160px
- 颜色：cream `#faf9f5`
- 位置：居中固定，始终在 Canvas 之上

### 技术方案

- WebGL + Three.js + custom fragment shader 实现流体模拟
- Canvas 分辨率适配 devicePixelRatio
- 移动端降级为简化粒子系统（~200 粒子），触摸滑动产生扰动
- 加载态：纯 cream 背景 + coral 色呼吸动画点，Canvas 就绪后淡入

## 导航栏 (TopNav)

### 首页行为

- 背景透明，去掉 border-bottom
- 文字颜色使用 `on-dark` 风格（cream 偏白），确保在流体背景上可读
- Logo 保持 Liu Jian Mao Cao 字体
- 离开首页（导航到其他页面）恢复正常 cream 底 + hairline border

### 实现方式

- 通过 route 判断是否在首页 (`route.path === '/'`)
- 首页：添加 `transparent` modifier class
- 非首页：默认样式

## 响应式

| 断点 | 行为 |
|------|------|
| 桌面 (>1024px) | 全 WebGL 流体，120-160px 字号 |
| 平板 (768-1024px) | WebGL 流体，100-120px 字号 |
| 移动 (<768px) | 粒子系统降级，80-100px 字号 |

## 组件分解

### 1. FluidCanvas.vue

WebGL Canvas 组件，负责：
- Three.js 场景初始化与销毁
- Shader uniform 更新（鼠标位置、时间）
- 窗口 resize 适配
- 移动端检测与降级切换

### 2. HomeHero.vue

首页内容层，负责：
- 居中 "Dash" 文字
- 文字淡入动画（Canvas 就绪后触发）

### 3. TopNav 改动

- 新增 `transparent` prop 或 composable 判断首页
- 首页样式覆盖：透明背景、无边框、文字颜色调整为 `on-dark`

## 不在范围内

- 首页下方内容区域（明确不需要）
- 向下滚动提示（明确不需要）
- 音效
- 流体录制/截图功能