人生轨迹功能模块补充

2025-12-22 14:50:14 +08:00
parent fa57938a9d
commit cd6d995d5a
48 changed files with 5359 additions and 316 deletions
@@ -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
+- 后端接口调用逻辑保持不变，仅重构前端组件