174 lines
6.9 KiB
Markdown
174 lines
6.9 KiB
Markdown
# 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
|
||
- 后端接口调用逻辑保持不变，仅重构前端组件
|