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