feat(frontend): 构建前端 MVP，实现完整 UI 框架与 mock 数据层

- 安装 zustand + react-router-dom 依赖
- 修复 Vite 代理配置，添加 /auth 路由转发
- 实现 API 封装层（client.ts 统一 fetch、auth.ts 真实调用）
- 实现 mock 数据层（mock.ts 模拟 WebSocket 管线进度）
- 实现 4 个 zustand stores（auth/project/task/generation）
- 实现 5 个组件（StyleSelector/PromptEditor/GenerateForm/ProgressBar/AssetPreview）
- 实现 5 个页面（Login/Register/Project/Generate/Result）
- 实现路由含 ProtectedRoute 守卫
- 添加暗色主题全局样式
- 更新前端文档与 API 文档

docs/frontend.md

@@ -21,19 +21,24 @@ frontend/src/
 ├── App.tsx                   # 根组件 + 路由配置
 ├── api/                      # API 封装层
 │   ├── client.ts             # fetch 封装：baseURL、统一错误处理、响应解包
-│   ├── project.ts            # 工程 CRUD + 风格 GET/PUT
-│   ├── generate.ts           # POST /generate、GET /tasks/:taskId、GET /tasks/:taskId/assets
+│   ├── auth.ts               # 注册/登录（真实后端调用）
+│   ├── project.ts            # 工程 CRUD + 风格 GET/PUT（mock 切换）
+│   ├── generate.ts           # POST /generate、GET /tasks/:taskId、GET /tasks/:taskId/assets（mock 切换）
+│   ├── mock.ts               # Mock 数据 + 模拟 WebSocket 管线进度
 │   └── types.ts              # API 请求/响应类型定义（Task、Asset、Style、PipelineProgress 等）
 ├── stores/                   # zustand stores
+│   ├── auth.ts               # 用户认证状态（login/register/logout/loadFromStorage）
 │   ├── project.ts            # 当前工程（id、风格、任务列表）
 │   ├── task.ts               # 当前任务草稿（用户文本、素材类型、任务风格覆盖、技术参数）
 │   └── generation.ts         # 生成状态（taskId、进度、阶段、结果、错误）
 ├── pages/                    # 页面级组件
+│   ├── LoginPage.tsx         # 登录页
+│   ├── RegisterPage.tsx      # 注册页
 │   ├── ProjectPage.tsx       # 工程首页：工程风格配置 + 任务列表
 │   ├── GeneratePage.tsx      # 生成页：提示词构建 + 提交
 │   └── ResultPage.tsx        # 结果页：素材预览 + 下载 + 元数据
 ├── components/               # 可复用组件
-│   ├── StyleSelector.tsx     # 风格选择器
+│   ├── StyleSelector.tsx     # 风格选择器（CSS Modules）
 │   ├── PromptEditor.tsx      # 三段式提示词编辑器
 │   ├── GenerateForm.tsx      # 生成表单
 │   ├── ProgressBar.tsx       # 管线进度条（显示当前阶段 + 重试状态）
@@ -43,10 +48,25 @@ frontend/src/
 │   └── useProjectStyle.ts    # 工程风格加载/保存
 ├── router/                   # 路由定义
 │   └── index.tsx
+├── styles/                   # 全局样式
+│   └── global.css            # 暗色主题 CSS 变量 + reset
 └── utils/                    # 工具函数
-    └── style.ts              # 风格合并逻辑（与后端保持一致的 merge 算法）
+    └── style.ts              # 风格合并逻辑 + 风格键分类定义
 ```
 
+## 实现状态
+
+| 模块 | 状态 | 说明 |
+|------|------|------|
+| API 封装层 | [x] | client.ts 统一 fetch 封装，auth.ts 真实调用，project/generate 使用 mock |
+| Mock 层 | [x] | mock.ts 提供 mock 数据 + 模拟 WebSocket 管线进度 |
+| 认证流程 | [x] | 注册/登录/退出/token 持久化，真实后端对接 |
+| zustand stores | [x] | auth/project/task/generation 四个 store |
+| 页面 | [x] | 5 个页面全部实现（Login/Register/Project/Generate/Result） |
+| 组件 | [x] | StyleSelector/PromptEditor/GenerateForm/ProgressBar/AssetPreview |
+| 路由 | [x] | 含 ProtectedRoute 守卫 |
+| WebSocket | [ ] | 当前使用 mock 模拟，待后端实现后切换为真实 WS |
+
 ## 路由规划
 
 | 路径 | 页面 | 说明 |