feat(prototype+miniprogram): 完善设计系统规范 v3.8.0 + 创建微信小程序

.env.example

@@ -8,16 +8,15 @@ GEMINI_API_KEY="YOUR_GEMINI_API_KEY"
 # Used for self-referential links, OAuth callbacks, and API endpoints.
 APP_URL="YOUR_APP_URL"
 
-# Firebase Configuration (Required)
-# Get these values from Firebase Console > Project Settings > General > Your apps
-# See: https://firebase.google.com/docs/web/setup#config-object
+# Supabase Configuration (Required)
+# Get these values from Supabase Dashboard > Project Settings > API
+# See: https://supabase.com/docs/guides/api#api-url-and-keys
 
-NEXT_PUBLIC_FIREBASE_PROJECT_ID="your-project-id"
-NEXT_PUBLIC_FIREBASE_APP_ID="your-app-id"
-NEXT_PUBLIC_FIREBASE_API_KEY="your-api-key"
-NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="your-project.firebaseapp.com"
-NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="your-project.appspot.com"
-NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="123456789"
+NEXT_PUBLIC_SUPABASE_URL="https://your-project-ref.supabase.co"
+NEXT_PUBLIC_SUPABASE_ANON_KEY="your-anon-public-key"
+
+# Optional: Service role key for server-side operations (keep secret)
+# SUPABASE_SERVICE_ROLE_KEY="your-service-role-key"
 
 # Optional: Google Analytics Measurement ID
-# NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"
+# NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"

.trae/documents/arch.md

@@ -1,4 +1,8 @@
-## 1. Architecture Design
+# Architecture Design
+
+> **路径**: `/workspace/.trae/documents/arch.md`
+> **版本**: v4.0.0
+> **更新日期**: 2026-07-06
 
 ```mermaid
 graph TB
@@ -9,8 +13,8 @@ graph TB
     D[Tailwind CSS]
   end
   subgraph External Services
-    E[Firebase Auth]
-    F[Firestore Database]
+    E[Supabase Auth]
+    F[Supabase Database]
   end
   A --> B
   B --> C
@@ -19,19 +23,23 @@ graph TB
 ```
 
 ## 2. Technology Description
-- **Frontend**: Next.js 15 (App Router) + React 19 + TypeScript 5 + Tailwind CSS 4
+
+- **Frontend**: Next.js 14 (App Router) + React 18 + TypeScript 5 + Tailwind CSS 3
 - **Initialization Tool**: `create-next-app`
-- **State Management**: Zustand (lightweight, signal-friendly)
-- **Auth & Database**: Firebase (Auth + Firestore)
+- **State Management**: Zustand (模块化 stores)
+- **Auth & Database**: Supabase (Auth + Database)
 - **Animations**: Framer Motion
 - **Icons**: Lucide React
 
 ## 3. Route Definitions
-| Route | Purpose |
-|-------|---------|
-| / | Home/Configurator main page |
-| /configurator | Bike configuration workspace |
+
+| Route    | Purpose                      |
+| -------- | ---------------------------- |
+| /        | Home/Configurator main page  |
+| /about   | About page                   |
+| /faq     | FAQ page                     |
 | /library | Saved configurations library |
+| /login   | Login/Signup page            |
 
 ## 4. Data Model
 
@@ -41,13 +49,13 @@ graph TB
 erDiagram
   USER ||--o{ CONFIGURATION : saves
   CONFIGURATION ||--|{ CONFIG_COMPONENT : contains
-  
+
   USER {
     string id PK
     string email
     string displayName
   }
-  
+
   CONFIGURATION {
     string id PK
     string userId FK
@@ -58,7 +66,7 @@ erDiagram
     timestamp createdAt
     timestamp updatedAt
   }
-  
+
   CONFIG_COMPONENT {
     string id PK
     string category
@@ -77,7 +85,8 @@ erDiagram
 ```typescript
 // src/types/index.ts
 export type BikeType = 'Road' | 'MTB' | 'Fold';
-export type ComponentCategory = 'Frame' | 'Drivetrain' | 'Wheelset' | 'Suspension' | 'Cockpit' | 'Tires';
+export type ComponentCategory =
+  'Frame' | 'Drivetrain' | 'Wheelset' | 'Suspension' | 'Cockpit' | 'Tires';
 
 export interface ConfigComponent {
   id: string;
@@ -126,35 +135,78 @@ export interface ConfigState {
 │   ├── app/
 │   │   ├── layout.tsx          # Root layout
 │   │   ├── page.tsx            # Home/Configurator
+│   │   ├── about/
+│   │   │   └── page.tsx        # About page
+│   │   ├── faq/
+│   │   │   └── page.tsx        # FAQ page
 │   │   ├── library/
 │   │   │   └── page.tsx        # Saved configs
+│   │   ├── login/
+│   │   │   └── page.tsx        # Login/Signup
 │   │   └── globals.css
 │   ├── components/
 │   │   ├── configurator/
 │   │   │   ├── BikeTypeSelector.tsx
 │   │   │   ├── BuildList.tsx
 │   │   │   ├── ComponentSelector.tsx
+│   │   │   ├── ComponentDetailModal.tsx
+│   │   │   ├── ComparePanel.tsx
+│   │   │   ├── CostBreakdownChart.tsx
+│   │   │   ├── RecommendedConfigs.tsx
+│   │   │   ├── ShareModal.tsx
 │   │   │   └── SummaryPanel.tsx
 │   │   ├── layout/
 │   │   │   ├── Navbar.tsx
-│   │   │   └── Sidebar.tsx
+│   │   │   └── Footer.tsx
+│   │   ├── sections/
+│   │   │   ├── Hero.tsx
+│   │   │   ├── Features.tsx
+│   │   │   ├── Pricing.tsx
+│   │   │   └── Cta.tsx
 │   │   └── ui/
 │   │       ├── Button.tsx
 │   │       ├── Card.tsx
-│   │       └── Modal.tsx
+│   │       ├── Modal.tsx
+│   │       ├── ErrorBoundary.tsx
+│   │       ├── LoadingScreen.tsx
+│   │       ├── Skeleton.tsx
+│   │       ├── ThemeToggle.tsx
+│   │       ├── OnboardingGuide.tsx
+│   │       ├── SupportModal.tsx
+│   │       └── ...shadcn components
 │   ├── lib/
-│   │   ├── store.ts            # Zustand store
-│   │   ├── firebase.ts         # Firebase client
-│   │   ├── constants.ts        # App constants
-│   │   └── utils.ts
+│   │   ├── stores/            # Zustand stores (模块化)
+│   │   │   ├── config-store.ts
+│   │   │   ├── config-ui-store.ts
+│   │   │   ├── compare-store.ts
+│   │   │   └── user-store.ts
+│   │   ├── i18n/              # 国际化
+│   │   │   ├── index.ts
+│   │   │   ├── en.ts
+│   │   │   └── zh-CN.ts
+│   │   ├── data/              # 模块化数据
+│   │   │   ├── index.ts
+│   │   │   ├── component-details.ts
+│   │   │   ├── component-alternatives.ts
+│   │   │   └── details/
+│   │   ├── supabase.ts        # Supabase client
+│   │   ├── supabase-service.ts # Supabase service
+│   │   ├── constants.ts       # App constants
+│   │   ├── recommended-configs.ts
+│   │   ├── utils.ts
+│   │   └── toast.ts
 │   ├── hooks/
 │   │   ├── useBikeConfig.ts
-│   │   └── useFirebaseAuth.ts
+│   │   └── useSupabaseAuth.ts
 │   └── types/
 │       └── index.ts
-├── public/                     # Static assets (unchanged)
-├── next.config.js
+├── public/                     # Static assets
+├── supabase/
+│   └── migrations/             # Supabase migrations
+├── next.config.mjs
 ├── tailwind.config.ts
+├── tsconfig.json
+├── vitest.config.ts
 └── package.json
 ```
 
@@ -164,9 +216,13 @@ export interface ConfigState {
 - ✅ Set up Next.js project structure
 - ✅ Migrate TypeScript types
 - ✅ Port constants and default component data
-- ✅ Set up Firebase in Next.js
+- ✅ Set up Supabase in Next.js
 - ✅ Build UI components
-- ✅ Implement state management with Zustand
+- ✅ Implement state management with Zustand (模块化 stores)
 - ✅ Add animation effects with Framer Motion
 - ✅ Update deployment configs (EdgeOne/Vercel)
 - ✅ Test and verify build
+- ✅ Add About/FAQ/Login pages
+- ✅ Add sections components (Hero/Features/Pricing/Cta)
+- ✅ Implement i18n system with type safety
+- ✅ Add Supabase migrations

.trae/documents/prd.md

@@ -1,49 +1,77 @@
-# Veloform 自行车配置器原型 - 产品需求文档
+# Veloform 自行车配置器 - 产品需求文档
+
+> **路径**: `/workspace/.trae/documents/prd.md`
+> **版本**: v4.0.0
+> **更新日期**: 2026-07-06
 
 ## 1. 产品概述
 
-Veloform 是一个高端自行车配置器原型，展示用户如何通过直观的界面定制公路车、山地车和折叠车。原型聚焦于深色主题美学、流畅动画和极致的用户体验。
+Veloform 是一个高端自行车配置器，展示用户如何通过直观的界面定制公路车、山地车和折叠车。采用 Next.js 14 + React 18 + Supabase 技术栈，支持深色/浅色主题切换和完整的国际化支持（EN/ZH-CN）。
 
 ## 2. 核心功能
 
 ### 2.1 车型切换
+
 - 公路车 (Road)、山地车 (MTB)、折叠车 (Fold) 三种车型
 - 平滑过渡动画
 - 视觉反馈
 
 ### 2.2 组件配置系统
+
 - 车架、传动系统、轮组、操控组件、轮胎等核心组件
 - 组件选择模态框
 - 价格和重量实时更新
+- 组件详情查看
 
 ### 2.3 配置管理
+
 - 添加/删除组件
 - 组件替换
 - 配置保存与重置
+- 配置比较功能
+- 配置分享功能
 
 ### 2.4 汇总面板
+
 - 总成本计算
 - 预估重量
 - 配置概览
 
+### 2.5 配置库
+
+- 保存的配置列表
+- 配置加载功能
+- 配置删除功能
+
 ## 3. UI/UX 设计
 
 ### 3.1 视觉风格
-- 深色主题 (#09090b)
-- 渐变背景效果
-- 毛玻璃质感
-- 主色调 (#3b82f6)
-- 强调色 (#f97316)
 
-### 3.2 字体选择
-- 标题：Space Grotesk
-- 正文：Inter
+- Apple 设计风格
+- 主色调 #0071e3（Apple Blue）
+- 强调色 #34c759（Apple Green）
+- 深色/浅色主题切换
+
+### 3.2 字体系统
+
+- 标题：Clash Display
+- 正文：Satoshi
+- Variable Font 格式优化加载
 
 ### 3.3 动画效果
+
+- 动画时长 ≤400ms
 - 页面加载动画
 - 组件选择动画
 - 价格变化动画
 - 悬停效果
+- Reduced Motion 支持
+
+### 3.4 国际化
+
+- 支持 EN 和 ZH-CN
+- 类型安全的翻译系统
+- 编译时键验证
 
 ## 4. 响应式设计
 
@@ -53,15 +81,29 @@ Veloform 是一个高端自行车配置器原型，展示用户如何通过直
 
 ## 5. 交互流程
 
-1. 用户进入首页 → 看到车型选择器
+1. 用户进入首页 → 看到车型选择器和 Hero 区块
 2. 选择车型 → 加载对应组件
 3. 点击"选择组件" → 打开组件选择器
 4. 选择组件 → 更新配置和价格
 5. 查看汇总面板 → 完成配置
+6. 可选择保存配置到配置库
 
 ## 6. 技术实现
 
-- 纯 HTML/CSS/JavaScript
-- CSS Grid 和 Flexbox 布局
-- CSS 动画和过渡
-- 原生 JavaScript 交互
+- **框架**: Next.js 14 (App Router) + React 18
+- **状态管理**: Zustand（模块化 stores）
+- **样式**: Tailwind CSS + CSS 变量
+- **动画**: Framer Motion
+- **后端**: Supabase（Auth + Database）
+- **国际化**: 类型安全 i18n 系统
+- **测试**: Vitest + Testing Library
+
+## 7. 页面列表
+
+| 页面    | 路径       | 说明          |
+| ------- | ---------- | ------------- |
+| 首页    | `/`        | 配置器主页面  |
+| Library | `/library` | 保存的配置库  |
+| About   | `/about`   | 关于页面      |
+| FAQ     | `/faq`     | 常见问题页面  |
+| Login   | `/login`   | 登录/注册页面 |