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 文档

frontend/src/components/StyleSelector.tsx

@@ -0,0 +1,38 @@
+import { STYLE_CATEGORIES } from '../utils/style'
+import styles from './StyleSelector.module.css'
+
+interface StyleSelectorProps {
+  value: Record<string, string>
+  onChange: (key: string, value: string) => void
+  compact?: boolean
+}
+
+export default function StyleSelector({
+  value,
+  onChange,
+  compact,
+}: StyleSelectorProps) {
+  return (
+    <div className={`${styles.container} ${compact ? styles.compact : ''}`}>
+      {STYLE_CATEGORIES.map(cat => (
+        <div key={cat.key} className={styles.category}>
+          <span className={styles.label}>{cat.label}</span>
+          <div className={styles.options}>
+            {cat.options.map(opt => (
+              <button
+                key={opt.value}
+                type="button"
+                className={`${styles.pill} ${
+                  value[cat.key] === opt.value ? styles.pillActive : ''
+                }`}
+                onClick={() => onChange(cat.key, opt.value)}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}