6.9 KiB
6.9 KiB
Implementation Plan: PncyssD 页面重构
Overview
本实现计划将 PncyssD 原型页面按照 course-web 项目规范进行重构。采用渐进式重构策略，按页面顺序逐一重构，确保每个页面完成后可独立运行和测试。
Tasks
-
1. 项目准备和基础设施
- 1.1 更新 store.js 数据结构
- 添加 PncyssD 所需的数据字段（selectedScriptId, selectedPath 等）
- 确保与现有 course-web 数据结构兼容
- Requirements: 10.1, 10.2, 10.3
- 1.2 编写数据持久化属性测试
- Property 6: 数据持久化往返一致性
- Validates: Requirements 10.1, 10.2, 10.3
- 1.3 创建 AI 服务模块
- 在 utils/aiLogic.js 中添加 analyzeLifeEvent、generateEpicScript、generatePath 函数
- 保持与原 PncyssD/api.js 相同的 API 调用逻辑
- Requirements: 4.3, 5.3, 6.3
- 1.1 更新 store.js 数据结构
-
2. 登录页面重构
- 2.1 重构 LoginPage.jsx 组件
- 实现手机号验证码登录表单
- 添加玻璃拟态卡片样式
- 实现验证码倒计时功能
- 调用后端 /auth/sms-code 和 /auth/login 接口
- Requirements: 1.1, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8
- 2.2 编写手机号验证属性测试
- Property 1: 手机号格式验证
- Validates: Requirements 1.2
- 2.3 Checkpoint - 验证登录页面功能
- 确保登录流程正常工作，验证码发送和登录成功跳转
- 2.1 重构 LoginPage.jsx 组件
-
3. 引导流程页面重构
- 3.1 重构 OnboardingPage.jsx 步骤1（基本信息）
- 实现"你是谁？"步骤
- 添加昵称、性别、MBTI、星座、兴趣爱好输入字段
- 实现步骤指示器组件
- Requirements: 2.1, 2.2, 2.9
- 3.2 重构 OnboardingPage.jsx 步骤2-4（人生记忆）
- 实现童年记忆、开心经历、低谷时光三个步骤
- 添加日期选择器和文本描述输入
- 实现灵感标签功能（点击插入文字）
- Requirements: 2.3, 2.4, 2.5, 2.11
- 3.3 重构 OnboardingPage.jsx 步骤5（未来愿景）
- 实现"未来想成为谁？"步骤
- 添加未来愿景和理想生活状态输入
- 实现完成引导并保存数据到后端
- Requirements: 2.6, 2.10
- 3.4 实现步骤导航逻辑
- 实现下一步/返回按钮功能
- 确保步骤切换时数据保留
- Requirements: 2.7, 2.8
- 3.5 编写步骤导航属性测试
- Property 2: 步骤导航数据完整性
- Validates: Requirements 2.7, 2.8
- 3.6 Checkpoint - 验证引导流程功能
- 确保5个步骤正常切换，数据正确保存
- 3.1 重构 OnboardingPage.jsx 步骤1（基本信息）
-
4. 仪表盘页面重构
- 4.1 重构 DashboardPage.jsx 布局结构
- 实现左侧导航栏 + 右侧内容区域布局
- 添加用户信息卡片（头像、昵称、MBTI/星座）
- 实现导航项切换和高亮状态
- Requirements: 3.1, 3.2, 3.3
- 4.2 编写导航切换属性测试
- Property 3: 导航视图切换一致性
- Validates: Requirements 3.3
- 4.3 实现音乐播放控制和重置功能
- 添加音乐播放/暂停按钮
- 添加重置数据按钮（确认后清除 localStorage）
- Requirements: 3.4
- 4.4 实现移动端响应式布局
- 添加汉堡菜单按钮
- 实现侧边栏抽屉效果
- Requirements: 9.1
- 4.5 Checkpoint - 验证仪表盘布局
- 确保导航切换正常，响应式布局正确
- 4.1 重构 DashboardPage.jsx 布局结构
-
5. 生命长河视图重构
- 5.1 重构 TimelineView.jsx 组件
- 实现时间线布局和事件卡片样式
- 添加"记录足迹"按钮和事件录入弹窗
- 实现空状态显示
- Requirements: 4.1, 4.2, 4.5
- 5.2 实现事件提交和 AI 分析
- 调用 AI 服务分析事件并生成疗愈反馈
- 保存事件到 Store
- Requirements: 4.3
- 5.3 实现事件列表渲染和排序
- 按时间倒序排列事件
- 渲染事件卡片（标题、时间、内容、AI 洞察）
- Requirements: 4.4, 4.6
- 5.4 编写事件列表属性测试
- Property 4: 事件列表渲染完整性
- Validates: Requirements 4.4
- 5.5 编写事件排序属性测试
- Property 5: 事件时间排序正确性
- Validates: Requirements 4.6
- 5.6 Checkpoint - 验证生命长河功能
- 确保事件录入、AI 分析、列表显示正常
- 5.1 重构 TimelineView.jsx 组件
-
6. 爽文剧本视图重构
- 6.1 重构 ScriptView.jsx 左侧面板
- 实现角色设定卡片（显示用户信息）
- 添加剧本主题输入框
- 添加叙事风格和篇幅选择器
- 实现历史卷轴列表
- Requirements: 5.1, 5.2, 5.6
- 6.2 实现剧本生成功能
- 调用 AI 服务生成剧本
- 实现加载状态显示
- 保存剧本到 Store
- Requirements: 5.3, 5.4
- 6.3 重构 ScriptView.jsx 右侧面板
- 实现剧本内容展示（章节格式化）
- 实现空状态显示
- 实现剧本切换功能
- Requirements: 5.5, 5.7
- 6.4 Checkpoint - 验证爽文剧本功能
- 确保剧本生成、显示、切换正常
- 6.1 重构 ScriptView.jsx 左侧面板
-
7. 实现路径视图重构
- 7.1 重构 PathView.jsx 组件
- 实现无剧本时的提示状态
- 添加"开启人生导航"按钮
- Requirements: 6.1, 6.2
- 7.2 实现路径生成功能
- 调用 AI 服务基于剧本生成路径
- 实现阶段卡片展示
- 实现按钮文字切换（开启/重新推演）
- Requirements: 6.3, 6.4, 6.5
- 7.3 Checkpoint - 验证实现路径功能
- 确保路径生成和显示正常
- 7.1 重构 PathView.jsx 组件
-
8. 用户资料管理重构
- 8.1 重构 UserMenu.jsx 组件
- 实现用户资料弹窗
- 显示用户头像、昵称、MBTI、星座
- 显示生命足迹数量和天命卷轴数量
- Requirements: 7.1, 7.2
- 8.2 实现资料编辑功能
- 实现编辑模式切换
- 调用后端接口更新用户资料
- Requirements: 7.3, 7.4
- 8.3 实现退出登录功能
- 实现确认弹窗
- 清除 localStorage 并刷新页面
- Requirements: 7.5
- 8.4 Checkpoint - 验证用户资料管理功能
- 确保查看、编辑、退出功能正常
- 8.1 重构 UserMenu.jsx 组件
-
9. 最终集成和测试
- 9.1 更新 App.jsx 路由逻辑
- 整合所有重构的页面组件
- 确保页面跳转逻辑正确
- 9.2 样式优化和一致性检查
- 确保所有页面使用统一的视觉风格
- 检查响应式布局在各设备上的表现
- Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7
- 9.3 Final Checkpoint - 完整功能验收
- 运行所有测试确保通过
- 手动测试完整用户流程
- 9.1 更新 App.jsx 路由逻辑
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
- 后端接口调用逻辑保持不变，仅重构前端组件