人生轨迹功能模块补充

2025-12-22 14:50:14 +08:00
parent fa57938a9d
commit cd6d995d5a
48 changed files with 5359 additions and 316 deletions
@@ -0,0 +1,405 @@
+# Design Document: PncyssD 页面重构
+
+## Overview
+
+本设计文档描述了将 PncyssD 原型页面重构为 course-web 项目规范的 React 组件的技术方案。重构将保持原有的视觉设计风格（深色主题、玻璃拟态、橙色强调色）和后端接口调用逻辑，同时采用 React + Vite + Tailwind CSS 的现代前端架构。
+
+## Architecture
+
+### 整体架构
+
+```
+PncyssD/                          →    course-web/src/
+├── index.html                         ├── main.jsx (入口)
+├── index.js (App 入口)                ├── App.jsx (路由控制)
+├── state.js (状态管理)                ├── utils/store.js (已存在)
+├── login.js (登录页)                  ├── pages/LoginPage.jsx (重构)
+├── onboarding.js (引导页)             ├── pages/OnboardingPage.jsx (重构)
+├── dashboard.js (仪表盘)              ├── pages/DashboardPage.jsx (重构)
+├── components.js (UI组件)             ├── components/ui/*.jsx (复用)
+├── api.js (AI服务)                    ├── utils/aiLogic.js (重构)
+└── style.css (样式)                   └── index.css (合并样式)
+```
+
+### 页面流程
+
+```mermaid
+stateDiagram-v2
+    [*] --> LandingPage: 首次访问
+    LandingPage --> LoginPage: 点击登录
+    LoginPage --> OnboardingPage: 登录成功(新用户)
+    LoginPage --> DashboardPage: 登录成功(老用户)
+    OnboardingPage --> DashboardPage: 完成引导
+    DashboardPage --> TimelineView: 默认视图
+    DashboardPage --> ScriptView: 点击爽文剧本
+    DashboardPage --> PathView: 点击实现路径
+```
+
+## Components and Interfaces
+
+### 1. 登录页面组件 (LoginPage.jsx)
+
+```jsx
+/**
+ * 登录页面组件
+ * 提供手机号验证码登录功能
+ */
+interface LoginPageProps {
+  onLoginSuccess: () => void;  // 登录成功回调
+  onBack: () => void;          // 返回首页回调
+}
+
+// 内部状态
+interface LoginState {
+  phone: string;           // 手机号
+  code: string;            // 验证码
+  countdown: number;       // 倒计时秒数
+  loading: boolean;        // 登录中状态
+  error: string;           // 错误信息
+}
+```
+
+### 2. 引导页面组件 (OnboardingPage.jsx)
+
+```jsx
+/**
+ * 引导流程页面组件
+ * 5步骤用户信息采集
+ */
+interface OnboardingPageProps {
+  onFinish: () => void;  // 完成引导回调
+}
+
+// 步骤数据结构
+interface OnboardingFormData {
+  // Step 1: 基本信息
+  nickname: string;
+  gender: 'male' | 'female' | 'secret';
+  zodiac: string;
+  mbti: string;
+  hobbies: string[];
+  
+  // Step 2-4: 人生记忆
+  history: {
+    childhood: { date: string; content: string };
+    peak: { date: string; content: string };
+    valley: { date: string; content: string };
+  };
+  
+  // Step 5: 未来愿景
+  futureVision: string;
+}
+
+// 灵感标签配置
+const INSPIRATION_TAGS = {
+  childhood: ['秋千', '晚霞', '糖果', '奔跑', '蝉鸣', '雨后泥土', '旧书包', '风筝'],
+  peak: ['海浪', '拥抱', '掌声', '晨曦', '破土而出', '默契', '星空', '释放'],
+  valley: ['落叶', '雨伞', '长廊', '深呼吸', '自愈', '沉潜', '坚韧', '等待', '破茧']
+};
+```
+
+### 3. 仪表盘页面组件 (DashboardPage.jsx)
+
+```jsx
+/**
+ * 仪表盘页面组件
+ * 包含导航栏和内容区域
+ */
+interface DashboardState {
+  activeTab: 'timeline' | 'script' | 'path';
+  isMobileMenuOpen: boolean;
+  isUserMenuOpen: boolean;
+  isMusicPlaying: boolean;
+}
+
+// 导航项配置
+const NAV_ITEMS = [
+  { id: 'timeline', icon: BookOpen, label: '生命长河' },
+  { id: 'script', icon: Film, label: '爽文剧本' },
+  { id: 'path', icon: Map, label: '实现路径' }
+];
+```
+
+### 4. 生命长河视图组件 (TimelineView.jsx)
+
+```jsx
+/**
+ * 生命长河视图组件
+ * 时间线形式展示人生事件
+ */
+interface LifeEvent {
+  id: number;
+  title: string;
+  time: string;
+  content: string;
+  aiFeedback: string;
+}
+
+interface TimelineViewProps {
+  events: LifeEvent[];
+  onAddEvent: (event: Omit<LifeEvent, 'id' | 'aiFeedback'>) => Promise<void>;
+}
+```
+
+### 5. 爽文剧本视图组件 (ScriptView.jsx)
+
+```jsx
+/**
+ * 爽文剧本视图组件
+ * AI生成个性化剧本
+ */
+interface Script {
+  id: number;
+  theme: string;
+  style: string;
+  length: string;
+  content: string;
+  date: string;
+}
+
+interface ScriptParams {
+  theme: string;
+  style: '都市' | '古风' | '爱情' | '科幻' | '喜剧' | '悬疑' | '恐怖';
+  length: '短' | '中' | '长';
+}
+
+interface ScriptViewProps {
+  scripts: Script[];
+  selectedScriptId: number | null;
+  userProfile: UserProfile;
+  onGenerateScript: (params: ScriptParams) => Promise<void>;
+  onSelectScript: (id: number) => void;
+  onSwitchToPath: () => void;
+}
+```
+
+### 6. 实现路径视图组件 (PathView.jsx)
+
+```jsx
+/**
+ * 实现路径视图组件
+ * 将剧本转化为行动计划
+ */
+interface PathStep {
+  title: string;
+  content: string;
+}
+
+interface PathViewProps {
+  selectedScript: Script | null;
+  path: PathStep[] | null;
+  onGeneratePath: () => Promise<void>;
+  onSwitchToScript: () => void;
+}
+```
+
+### 7. 用户菜单组件 (UserMenu.jsx)
+
+```jsx
+/**
+ * 用户菜单弹窗组件
+ * 查看和编辑用户资料
+ */
+interface UserMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onLogout: () => void;
+}
+
+interface UserMenuState {
+  isEditing: boolean;
+  editData: Partial<UserProfile>;
+}
+```
+
+## Data Models
+
+### Store 数据结构
+
+```javascript
+const STORE_SCHEMA = {
+  onboardingComplete: false,        // 是否完成引导
+  audioMuted: true,                 // 音乐是否静音
+  userProfile: {
+    nickname: "",
+    gender: "secret",
+    zodiac: "",
+    mbti: "",
+    hobbies: [],
+    history: {
+      childhood: { date: "", content: "" },
+      peak: { date: "", content: "" },
+      valley: { date: "", content: "" }
+    },
+    futureVision: ""
+  },
+  lifeTimeline: [],                 // 生命事件列表
+  generatedScripts: [],             // 生成的剧本列表
+  paths: [],                        // 实现路径列表
+  selectedScriptId: null,           // 当前选中的剧本ID
+  selectedPath: null                // 当前选中的路径
+};
+```
+
+### API 接口
+
+```javascript
+// 认证接口 (保持不变)
+POST /auth/sms-code?phone={phone}  // 发送验证码
+POST /auth/login                    // 登录
+  Body: { phone, smsCode }
+  Response: { accessToken }
+
+// 用户资料接口 (保持不变)
+GET  /user/profile                  // 获取用户资料
+POST /user/profile                  // 创建用户资料
+PUT  /user/profile                  // 更新用户资料
+
+// AI 服务接口 (OpenRouter)
+POST https://openrouter.ai/api/v1/chat/completions
+  Headers: { Authorization: Bearer {API_KEY} }
+  Body: { model, messages }
+```
+
+## Correctness Properties
+
+*A property is a characteristic or behavior that should hold true across all valid executions of a system-essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
+
+### Property 1: 手机号格式验证
+
+*For any* 输入字符串，手机号验证函数应当仅对11位数字且以1开头的字符串返回 true，对其他所有输入返回 false。
+
+**Validates: Requirements 1.2**
+
+### Property 2: 步骤导航数据完整性
+
+*For any* 引导流程中的步骤切换操作（前进或后退），用户在各步骤填写的数据应当被完整保留，不会因为步骤切换而丢失。
+
+**Validates: Requirements 2.7, 2.8**
+
+### Property 3: 导航视图切换一致性
+
+*For any* 仪表盘导航项点击操作，当前激活的视图应当与点击的导航项对应，且导航项的高亮状态应当正确反映当前视图。
+
+**Validates: Requirements 3.3**
+
+### Property 4: 事件列表渲染完整性
+
+*For any* 生命事件数组，时间线视图应当渲染所有事件，且每个事件卡片应当包含标题、时间、内容和 AI 洞察四个字段。
+
+**Validates: Requirements 4.4**
+
+### Property 5: 事件时间排序正确性
+
+*For any* 包含多个事件的生命事件数组，时间线视图应当按时间倒序排列事件，即最新的事件显示在最前面。
+
+**Validates: Requirements 4.6**
+
+### Property 6: 数据持久化往返一致性
+
+*For any* 有效的用户数据对象，保存到 localStorage 后再读取，应当得到与原始数据等价的对象。
+
+**Validates: Requirements 10.1, 10.2, 10.3**
+
+## Error Handling
+
+### 网络错误处理
+
+```javascript
+// API 调用统一错误处理
+try {
+  const response = await request.post('/auth/login', data);
+  // 处理成功响应
+} catch (error) {
+  if (error.response) {
+    // 服务器返回错误
+    showToast(error.response.data.message || '请求失败');
+  } else if (error.request) {
+    // 网络错误
+    showToast('网络连接异常，请检查网络设置');
+  } else {
+    // 其他错误
+    showToast('发生未知错误');
+  }
+}
+```
+
+### 表单验证错误
+
+```javascript
+// 表单验证规则
+const VALIDATION_RULES = {
+  phone: {
+    required: true,
+    pattern: /^1[3-9]\d{9}$/,
+    message: '请输入正确的手机号'
+  },
+  code: {
+    required: true,
+    length: 6,
+    message: '请输入6位验证码'
+  },
+  nickname: {
+    required: true,
+    maxLength: 20,
+    message: '昵称不能为空且不超过20字'
+  }
+};
+```
+
+### 存储错误处理
+
+```javascript
+// localStorage 存储错误处理
+try {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+} catch (error) {
+  if (error.name === 'QuotaExceededError') {
+    showToast('存储空间不足，部分数据可能无法保存');
+  }
+}
+```
+
+## Testing Strategy
+
+### 单元测试
+
+使用 Vitest 进行单元测试，覆盖以下场景：
+
+1. **工具函数测试**
+   - 手机号格式验证函数
+   - 数据序列化/反序列化函数
+   - 日期格式化函数
+
+2. **组件渲染测试**
+   - 各页面组件的基本渲染
+   - 条件渲染逻辑（空状态、加载状态）
+   - 用户交互响应
+
+3. **状态管理测试**
+   - Store 的 CRUD 操作
+   - 数据持久化逻辑
+
+### 属性测试
+
+使用 fast-check 进行属性测试，验证以下属性：
+
+1. **Property 1**: 手机号验证 - 生成各种字符串测试验证函数
+2. **Property 2**: 步骤导航 - 生成随机步骤切换序列测试数据保留
+3. **Property 5**: 事件排序 - 生成随机事件数组测试排序正确性
+4. **Property 6**: 数据持久化 - 生成随机数据对象测试往返一致性
+
+### 测试配置
+
+```javascript
+// vitest.config.js
+export default {
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.js']
+  }
+};
+
+// 属性测试最小迭代次数: 100
+```
@@ -0,0 +1,149 @@
+# Requirements Document
+
+## Introduction
+
+本文档定义了将 PncyssD 目录下的原型页面按照 course-web 项目规范进行重构的需求。PncyssD 是一个"人生轨迹"应用原型，包含登录、引导注册、仪表盘等核心页面。重构目标是将原生 ES Modules + Tailwind CSS 的实现迁移到 React + Vite 架构，同时保持原有的视觉设计风格和后端接口调用逻辑。
+
+## Glossary
+
+- **PncyssD_App**: 原型应用，包含登录、引导、仪表盘等页面的原生 JavaScript 实现
+- **Course_Web**: 目标项目，使用 React + Vite + Tailwind CSS 的现代前端架构
+- **Glassmorphism**: 玻璃拟态设计风格，使用模糊背景和半透明效果
+- **Onboarding_Flow**: 引导流程，包含5个步骤的用户信息采集
+- **Dashboard**: 仪表盘页面，包含生命长河、爽文剧本、实现路径三个功能模块
+- **AI_Service**: AI 服务接口，用于生成分析、剧本和路径规划
+
+## Requirements
+
+### Requirement 1: 登录页面重构
+
+**User Story:** As a 用户, I want 通过手机号验证码登录系统, so that 我可以安全地访问我的人生轨迹数据。
+
+#### Acceptance Criteria
+
+1. WHEN 用户访问登录页面 THEN THE PncyssD_App SHALL 显示玻璃拟态风格的登录卡片，包含标题"欢迎回来"和副标题"开启你的数字生命档案"
+2. WHEN 用户输入手机号 THEN THE PncyssD_App SHALL 验证手机号格式为11位数字
+3. WHEN 用户点击获取验证码按钮 THEN THE PncyssD_App SHALL 调用后端 `/auth/sms-code` 接口发送验证码
+4. WHEN 验证码发送成功 THEN THE PncyssD_App SHALL 显示60秒倒计时并禁用获取按钮
+5. WHEN 用户输入正确的验证码并点击登录 THEN THE PncyssD_App SHALL 调用后端 `/auth/login` 接口进行验证
+6. WHEN 登录成功 THEN THE PncyssD_App SHALL 保存 token 到 localStorage 并跳转到引导页面
+7. IF 登录失败 THEN THE PncyssD_App SHALL 显示错误提示信息
+8. THE PncyssD_App SHALL 在登录按钮上显示"开启旅程"文字和橙色渐变样式
+
+### Requirement 2: 引导流程页面重构
+
+**User Story:** As a 新用户, I want 通过分步骤的引导流程填写个人信息, so that 系统可以了解我并提供个性化服务。
+
+#### Acceptance Criteria
+
+1. THE PncyssD_App SHALL 提供5个步骤的引导流程：基本信息、童年记忆、开心经历、低谷时光、未来愿景
+2. WHEN 用户进入步骤1 THEN THE PncyssD_App SHALL 显示"你是谁？"标题和昵称、性别、MBTI、星座、兴趣爱好输入字段
+3. WHEN 用户进入步骤2 THEN THE PncyssD_App SHALL 显示"那段纯真的时光"标题和童年记忆的日期、描述输入字段
+4. WHEN 用户进入步骤3 THEN THE PncyssD_App SHALL 显示"光芒闪耀的时刻"标题和开心经历的日期、描述输入字段
+5. WHEN 用户进入步骤4 THEN THE PncyssD_App SHALL 显示"在暗夜中潜行"标题和低谷时光的日期、描述输入字段
+6. WHEN 用户进入步骤5 THEN THE PncyssD_App SHALL 显示"未来想成为谁？"标题和未来愿景、理想生活状态输入字段
+7. WHEN 用户点击下一步 THEN THE PncyssD_App SHALL 保存当前步骤数据并切换到下一步骤
+8. WHEN 用户点击返回 THEN THE PncyssD_App SHALL 返回上一步骤并保留已填写数据
+9. THE PncyssD_App SHALL 在页面底部显示步骤指示器，当前步骤高亮显示
+10. WHEN 用户完成所有步骤并点击"开启人生" THEN THE PncyssD_App SHALL 调用后端接口保存用户资料并跳转到仪表盘
+11. THE PncyssD_App SHALL 在记忆描述字段下方显示灵感标签（如：秋千、晚霞、糖果等），点击可快速插入文字
+
+### Requirement 3: 仪表盘页面重构
+
+**User Story:** As a 已登录用户, I want 在仪表盘中管理我的人生轨迹数据, so that 我可以回顾过去、创造未来。
+
+#### Acceptance Criteria
+
+1. THE PncyssD_App SHALL 显示左侧导航栏，包含"生命长河"、"爽文剧本"、"实现路径"三个导航项
+2. THE PncyssD_App SHALL 在导航栏顶部显示用户头像、昵称和 MBTI/星座信息
+3. WHEN 用户点击导航项 THEN THE PncyssD_App SHALL 切换到对应的内容视图并高亮当前导航项
+4. THE PncyssD_App SHALL 在导航栏底部显示音乐播放控制按钮和重置数据按钮
+5. WHEN 用户点击用户头像区域 THEN THE PncyssD_App SHALL 显示用户菜单弹窗
+
+### Requirement 4: 生命长河视图重构
+
+**User Story:** As a 用户, I want 记录和查看我的人生重要事件, so that 我可以回顾和反思我的人生轨迹。
+
+#### Acceptance Criteria
+
+1. THE PncyssD_App SHALL 显示"生命长河"标题和"记录足迹"按钮
+2. WHEN 用户点击"记录足迹"按钮 THEN THE PncyssD_App SHALL 显示事件录入弹窗，包含标题、时间、详情输入字段
+3. WHEN 用户提交事件 THEN THE PncyssD_App SHALL 调用 AI 服务分析事件并生成疗愈反馈
+4. THE PncyssD_App SHALL 以时间线形式展示所有已记录的事件，每个事件卡片包含标题、时间、内容和 AI 洞察
+5. WHILE 事件列表为空 THEN THE PncyssD_App SHALL 显示空状态提示"此间尚无回响，等待你执笔..."
+6. THE PncyssD_App SHALL 按时间倒序排列事件列表
+
+### Requirement 5: 爽文剧本视图重构
+
+**User Story:** As a 用户, I want 基于我的人设生成个性化的人生剧本, so that 我可以获得激励和方向感。
+
+#### Acceptance Criteria
+
+1. THE PncyssD_App SHALL 在左侧显示角色设定卡片，展示用户的昵称、星座、MBTI、兴趣爱好
+2. THE PncyssD_App SHALL 提供剧本主题输入框和叙事风格、篇幅选择器
+3. WHEN 用户点击"开启天命编撰"按钮 THEN THE PncyssD_App SHALL 调用 AI 服务生成剧本内容
+4. WHILE 剧本生成中 THEN THE PncyssD_App SHALL 显示加载状态"编撰中..."
+5. THE PncyssD_App SHALL 在右侧显示生成的剧本内容，使用章节标题格式化显示
+6. THE PncyssD_App SHALL 在左侧显示历史卷轴列表，点击可切换查看不同剧本
+7. WHILE 无剧本生成 THEN THE PncyssD_App SHALL 显示空状态提示
+
+### Requirement 6: 实现路径视图重构
+
+**User Story:** As a 用户, I want 将剧本转化为可执行的行动计划, so that 我可以一步步实现我的人生目标。
+
+#### Acceptance Criteria
+
+1. IF 用户未生成剧本 THEN THE PncyssD_App SHALL 显示提示"先生成剧本，方能洞察路径"并提供跳转按钮
+2. WHEN 用户已有剧本 THEN THE PncyssD_App SHALL 显示"实现路径"标题和"开启人生导航"按钮
+3. WHEN 用户点击"开启人生导航"按钮 THEN THE PncyssD_App SHALL 调用 AI 服务基于剧本生成行动路径
+4. THE PncyssD_App SHALL 以阶段卡片形式展示路径，每个阶段包含序号、标题和具体建议
+5. WHEN 路径已生成 THEN THE PncyssD_App SHALL 将按钮文字改为"重新推演"
+
+### Requirement 7: 用户资料管理重构
+
+**User Story:** As a 用户, I want 查看和编辑我的个人资料, so that 我可以保持信息的准确性。
+
+#### Acceptance Criteria
+
+1. WHEN 用户点击用户头像 THEN THE PncyssD_App SHALL 显示用户资料弹窗
+2. THE PncyssD_App SHALL 在弹窗中显示用户头像、昵称、MBTI、星座、生命足迹数量、天命卷轴数量
+3. WHEN 用户点击"编辑资料"按钮 THEN THE PncyssD_App SHALL 切换到编辑模式，显示可编辑的表单字段
+4. WHEN 用户保存修改 THEN THE PncyssD_App SHALL 调用后端接口更新用户资料
+5. WHEN 用户点击"清除数据并退出"按钮 THEN THE PncyssD_App SHALL 确认后清除本地存储并刷新页面
+
+### Requirement 8: 视觉设计规范
+
+**User Story:** As a 用户, I want 体验一致的视觉设计风格, so that 我可以获得沉浸式的使用体验。
+
+#### Acceptance Criteria
+
+1. THE PncyssD_App SHALL 使用深色背景配色方案，主色调为 `#0a0c10` 到 `#1a1c2c`
+2. THE PncyssD_App SHALL 使用橙色 `#FFAB91` 作为强调色
+3. THE PncyssD_App SHALL 使用玻璃拟态效果（backdrop-blur、半透明背景、细边框）
+4. THE PncyssD_App SHALL 使用 Noto Sans SC 和 Noto Serif SC 字体
+5. THE PncyssD_App SHALL 在背景中显示动态渐变光晕效果
+6. THE PncyssD_App SHALL 使用圆角 32px 的卡片设计
+7. THE PncyssD_App SHALL 使用平滑的页面切换动画（淡入淡出、上下滑动）
+
+### Requirement 9: 响应式布局
+
+**User Story:** As a 用户, I want 在不同设备上都能正常使用应用, so that 我可以随时随地记录我的人生轨迹。
+
+#### Acceptance Criteria
+
+1. THE PncyssD_App SHALL 在移动端显示汉堡菜单按钮，点击展开侧边导航
+2. THE PncyssD_App SHALL 在移动端将仪表盘布局调整为单列显示
+3. THE PncyssD_App SHALL 在移动端调整卡片圆角为 20px
+4. THE PncyssD_App SHALL 在移动端隐藏导航项的文字标签，只显示图标
+
+### Requirement 10: 数据持久化
+
+**User Story:** As a 用户, I want 我的数据能够被安全保存, so that 我不会丢失我的人生记录。
+
+#### Acceptance Criteria
+
+1. THE PncyssD_App SHALL 使用 localStorage 存储用户数据，key 为 `lifeTrajectory_v3_data`
+2. THE PncyssD_App SHALL 在数据变更时自动保存到 localStorage
+3. THE PncyssD_App SHALL 在页面加载时从 localStorage 恢复数据
+4. THE PncyssD_App SHALL 在登录成功后同步数据到后端服务器
+5. IF localStorage 存储失败 THEN THE PncyssD_App SHALL 显示存储空间不足的提示
@@ -0,0 +1,173 @@
+# Implementation Plan: PncyssD 页面重构
+
+## Overview
+
+本实现计划将 PncyssD 原型页面按照 course-web 项目规范进行重构。采用渐进式重构策略，按页面顺序逐一重构，确保每个页面完成后可独立运行和测试。
+
+## Tasks
+
+- [x] 1. 项目准备和基础设施
+  - [x] 1.1 更新 store.js 数据结构
+    - 添加 PncyssD 所需的数据字段（selectedScriptId, selectedPath 等）
+    - 确保与现有 course-web 数据结构兼容
+    - _Requirements: 10.1, 10.2, 10.3_
+  - [x] 1.2 编写数据持久化属性测试
+    - **Property 6: 数据持久化往返一致性**
+    - **Validates: Requirements 10.1, 10.2, 10.3**
+  - [x] 1.3 创建 AI 服务模块
+    - 在 utils/aiLogic.js 中添加 analyzeLifeEvent、generateEpicScript、generatePath 函数
+    - 保持与原 PncyssD/api.js 相同的 API 调用逻辑
+    - _Requirements: 4.3, 5.3, 6.3_
+
+- [x] 2. 登录页面重构
+  - [x] 2.1 重构 LoginPage.jsx 组件
+    - 实现手机号验证码登录表单
+    - 添加玻璃拟态卡片样式
+    - 实现验证码倒计时功能
+    - 调用后端 /auth/sms-code 和 /auth/login 接口
+    - _Requirements: 1.1, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8_
+  - [x] 2.2 编写手机号验证属性测试
+    - **Property 1: 手机号格式验证**
+    - **Validates: Requirements 1.2**
+  - [x] 2.3 Checkpoint - 验证登录页面功能
+    - 确保登录流程正常工作，验证码发送和登录成功跳转
+
+- [x] 3. 引导流程页面重构
+  - [x] 3.1 重构 OnboardingPage.jsx 步骤1（基本信息）
+    - 实现"你是谁？"步骤
+    - 添加昵称、性别、MBTI、星座、兴趣爱好输入字段
+    - 实现步骤指示器组件
+    - _Requirements: 2.1, 2.2, 2.9_
+  - [x] 3.2 重构 OnboardingPage.jsx 步骤2-4（人生记忆）
+    - 实现童年记忆、开心经历、低谷时光三个步骤
+    - 添加日期选择器和文本描述输入
+    - 实现灵感标签功能（点击插入文字）
+    - _Requirements: 2.3, 2.4, 2.5, 2.11_
+  - [x] 3.3 重构 OnboardingPage.jsx 步骤5（未来愿景）
+    - 实现"未来想成为谁？"步骤
+    - 添加未来愿景和理想生活状态输入
+    - 实现完成引导并保存数据到后端
+    - _Requirements: 2.6, 2.10_
+  - [x] 3.4 实现步骤导航逻辑
+    - 实现下一步/返回按钮功能
+    - 确保步骤切换时数据保留
+    - _Requirements: 2.7, 2.8_
+  - [x] 3.5 编写步骤导航属性测试
+    - **Property 2: 步骤导航数据完整性**
+    - **Validates: Requirements 2.7, 2.8**
+  - [x] 3.6 Checkpoint - 验证引导流程功能
+    - 确保5个步骤正常切换，数据正确保存
+
+- [x] 4. 仪表盘页面重构
+  - [x] 4.1 重构 DashboardPage.jsx 布局结构
+    - 实现左侧导航栏 + 右侧内容区域布局
+    - 添加用户信息卡片（头像、昵称、MBTI/星座）
+    - 实现导航项切换和高亮状态
+    - _Requirements: 3.1, 3.2, 3.3_
+  - [x] 4.2 编写导航切换属性测试
+    - **Property 3: 导航视图切换一致性**
+    - **Validates: Requirements 3.3**
+  - [x] 4.3 实现音乐播放控制和重置功能
+    - 添加音乐播放/暂停按钮
+    - 添加重置数据按钮（确认后清除 localStorage）
+    - _Requirements: 3.4_
+  - [x] 4.4 实现移动端响应式布局
+    - 添加汉堡菜单按钮
+    - 实现侧边栏抽屉效果
+    - _Requirements: 9.1_
+  - [x] 4.5 Checkpoint - 验证仪表盘布局
+    - 确保导航切换正常，响应式布局正确
+
+- [x] 5. 生命长河视图重构
+  - [x] 5.1 重构 TimelineView.jsx 组件
+    - 实现时间线布局和事件卡片样式
+    - 添加"记录足迹"按钮和事件录入弹窗
+    - 实现空状态显示
+    - _Requirements: 4.1, 4.2, 4.5_
+  - [x] 5.2 实现事件提交和 AI 分析
+    - 调用 AI 服务分析事件并生成疗愈反馈
+    - 保存事件到 Store
+    - _Requirements: 4.3_
+  - [x] 5.3 实现事件列表渲染和排序
+    - 按时间倒序排列事件
+    - 渲染事件卡片（标题、时间、内容、AI 洞察）
+    - _Requirements: 4.4, 4.6_
+  - [x] 5.4 编写事件列表属性测试
+    - **Property 4: 事件列表渲染完整性**
+    - **Validates: Requirements 4.4**
+  - [x] 5.5 编写事件排序属性测试
+    - **Property 5: 事件时间排序正确性**
+    - **Validates: Requirements 4.6**
+  - [x] 5.6 Checkpoint - 验证生命长河功能
+    - 确保事件录入、AI 分析、列表显示正常
+
+- [x] 6. 爽文剧本视图重构
+  - [x] 6.1 重构 ScriptView.jsx 左侧面板
+    - 实现角色设定卡片（显示用户信息）
+    - 添加剧本主题输入框
+    - 添加叙事风格和篇幅选择器
+    - 实现历史卷轴列表
+    - _Requirements: 5.1, 5.2, 5.6_
+  - [x] 6.2 实现剧本生成功能
+    - 调用 AI 服务生成剧本
+    - 实现加载状态显示
+    - 保存剧本到 Store
+    - _Requirements: 5.3, 5.4_
+  - [x] 6.3 重构 ScriptView.jsx 右侧面板
+    - 实现剧本内容展示（章节格式化）
+    - 实现空状态显示
+    - 实现剧本切换功能
+    - _Requirements: 5.5, 5.7_
+  - [x] 6.4 Checkpoint - 验证爽文剧本功能
+    - 确保剧本生成、显示、切换正常
+
+- [x] 7. 实现路径视图重构
+  - [x] 7.1 重构 PathView.jsx 组件
+    - 实现无剧本时的提示状态
+    - 添加"开启人生导航"按钮
+    - _Requirements: 6.1, 6.2_
+  - [x] 7.2 实现路径生成功能
+    - 调用 AI 服务基于剧本生成路径
+    - 实现阶段卡片展示
+    - 实现按钮文字切换（开启/重新推演）
+    - _Requirements: 6.3, 6.4, 6.5_
+  - [x] 7.3 Checkpoint - 验证实现路径功能
+    - 确保路径生成和显示正常
+
+- [x] 8. 用户资料管理重构
+  - [x] 8.1 重构 UserMenu.jsx 组件
+    - 实现用户资料弹窗
+    - 显示用户头像、昵称、MBTI、星座
+    - 显示生命足迹数量和天命卷轴数量
+    - _Requirements: 7.1, 7.2_
+  - [x] 8.2 实现资料编辑功能
+    - 实现编辑模式切换
+    - 调用后端接口更新用户资料
+    - _Requirements: 7.3, 7.4_
+  - [x] 8.3 实现退出登录功能
+    - 实现确认弹窗
+    - 清除 localStorage 并刷新页面
+    - _Requirements: 7.5_
+  - [x] 8.4 Checkpoint - 验证用户资料管理功能
+    - 确保查看、编辑、退出功能正常
+
+- [x] 9. 最终集成和测试
+  - [x] 9.1 更新 App.jsx 路由逻辑
+    - 整合所有重构的页面组件
+    - 确保页面跳转逻辑正确
+  - [x] 9.2 样式优化和一致性检查
+    - 确保所有页面使用统一的视觉风格
+    - 检查响应式布局在各设备上的表现
+    - _Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7_
+  - [x] 9.3 Final Checkpoint - 完整功能验收
+    - 运行所有测试确保通过
+    - 手动测试完整用户流程
+
+## Notes
+
+- All tasks are required for complete implementation
+- Each task references specific requirements for traceability
+- Checkpoints ensure incremental validation
+- Property tests validate universal correctness properties
+- Unit tests validate specific examples and edge cases
+- 后端接口调用逻辑保持不变，仅重构前端组件