前端重构实现

2025-12-22 16:38:06 +08:00
parent cd6d995d5a
commit 26574e3db7
54 changed files with 8976 additions and 0 deletions
@@ -0,0 +1,292 @@
+# Implementation Plan: Life Script Frontend
+
+## Overview
+
+本实现计划将 PncyssD 原型设计完整还原为基于 React + Tailwind CSS + Radix UI 的现代化前端应用。采用增量开发方式，从项目初始化开始，逐步构建基础组件、页面和功能模块。
+
+## Tasks
+
+- [x] 1. 项目初始化与基础配置
+  - [x] 1.1 初始化 Vite + React 项目
+    - 在 life-script 目录创建 Vite React 项目
+    - 安装核心依赖：react-router-dom, zustand, framer-motion, @radix-ui/react-dialog, lucide-react, axios
+    - 配置 Tailwind CSS 和自定义主题色
+    - _Requirements: 1.1, 1.2, 1.3_
+  - [x] 1.2 配置全局样式和字体
+    - 添加 Noto Serif SC 和 Noto Sans SC 字体
+    - 创建 CSS 变量定义（glass-bg, glass-border, accent-orange, accent-blue）
+    - 配置 Tailwind 自定义动画（float, float-delayed）
+    - _Requirements: 1.2, 1.3_
+
+- [x] 2. 基础UI组件开发
+  - [x] 2.1 创建 Background 组件
+    - 实现动态流体背景（渐变 + 浮动模糊圆 + 纹理叠加）
+    - 添加 animate-float 和 animate-float-delayed 动画
+    - _Requirements: 1.1_
+  - [x] 2.2 创建 GlassCard 组件
+    - 实现毛玻璃卡片样式（backdrop-filter, 边框, 阴影）
+    - 支持 variant 属性（default, highlight, ai）
+    - _Requirements: 1.2_
+  - [x] 2.3 创建 GlassButton 组件
+    - 实现毛玻璃按钮样式
+    - 支持 variant（default, primary, icon）和 loading 状态
+    - _Requirements: 1.2_
+  - [x] 2.4 创建 GlassInput 和 GlassTextarea 组件
+    - 实现毛玻璃输入框样式
+    - 支持 label、placeholder、focus 状态
+    - _Requirements: 1.2_
+  - [x] 2.5 创建 GlassSelect 组件
+    - 实现毛玻璃下拉选择框
+    - 支持 options 数组配置
+    - _Requirements: 1.2_
+  - [x] 2.6 创建 Modal 组件
+    - 使用 Radix UI Dialog 实现
+    - 添加暗色遮罩和模糊效果
+    - _Requirements: 11.1, 11.2, 11.3, 11.4, 11.5_
+  - [x] 2.7 创建 Loader 组件
+    - 实现加载动画（旋转圆环 + 文字）
+    - _Requirements: 10.2_
+  - [x] 2.8 创建 PromptTag 组件
+    - 实现灵感标签样式和点击交互
+    - _Requirements: 3.7_
+
+- [x] 3. Checkpoint - 基础组件完成
+  - 确保所有基础 UI 组件正确渲染
+  - 验证样式与原型一致
+
+- [-] 4. 状态管理实现
+  - [x] 4.1 创建 Zustand Store
+    - 定义完整的 AppState 接口
+    - 实现 save、load、updateRegistration、addLifeEvent、addScript、setPath、clear 方法
+    - 配置 localStorage 持久化中间件
+    - _Requirements: 9.1, 9.2, 9.3, 9.4_
+  - [ ] 4.2 编写状态持久化属性测试
+    - **Property 1: State Persistence Round-Trip**
+    - **Validates: Requirements 9.1, 9.2, 9.4**
+  - [ ] 4.3 编写损坏状态恢复属性测试
+    - **Property 9: Corrupted State Recovery**
+    - **Validates: Requirements 9.5**
+
+- [x] 5. 布局组件开发
+  - [x] 5.1 创建 Header 组件
+    - 实现固定定位头部
+    - 添加 logo 和用户按钮
+    - _Requirements: 1.4_
+  - [x] 5.2 创建 Sidebar 组件
+    - 实现导航分组（回溯过去、创造未来）
+    - 添加导航项激活状态
+    - 添加底部引用文字
+    - _Requirements: 4.1, 4.2, 4.5_
+
+- [-] 6. 登录页面实现
+  - [x] 6.1 创建 LoginPage 组件
+    - 实现登录表单布局（手机号、验证码、登录按钮）
+    - 添加标题和协议文字
+    - _Requirements: 2.1, 2.2, 2.7_
+  - [x] 6.2 实现验证码倒计时逻辑
+    - 创建 useCountdown hook
+    - 实现 60 秒倒计时和按钮状态切换
+    - _Requirements: 2.3_
+  - [x] 6.3 实现登录验证逻辑
+    - 验证手机号格式（11位数字）
+    - 验证验证码（888888）
+    - 成功后跳转到 Onboarding
+    - _Requirements: 2.4, 2.5, 2.6_
+  - [ ] 6.4 编写登录验证属性测试
+    - **Property 2: Login Validation and Navigation**
+    - **Validates: Requirements 2.3, 2.4, 2.5, 2.6**
+
+- [ ] 7. Checkpoint - 登录功能完成
+  - 确保登录流程正常工作
+  - 验证状态持久化
+
+- [-] 8. 入站流程实现
+  - [x] 8.1 创建 OnboardingPage 组件框架
+    - 实现 5 步骤容器布局
+    - 添加进度指示器
+    - 添加导航按钮（返回、继续）
+    - _Requirements: 3.1, 3.10, 3.11_
+  - [x] 8.2 实现步骤 1 - 基础信息
+    - 创建表单字段（称呼、性别、MBTI、星座、兴趣爱好）
+    - _Requirements: 3.2_
+  - [x] 8.3 实现步骤 2-4 - 记忆采集
+    - 创建通用记忆步骤组件
+    - 添加日期选择器和文本区域
+    - 集成灵感标签（童年、开心、低谷）
+    - _Requirements: 3.3, 3.4, 3.5, 3.7_
+  - [x] 8.4 实现步骤 5 - 未来愿景
+    - 创建愿景和理想生活文本区域
+    - _Requirements: 3.6_
+  - [x] 8.5 实现步骤间数据保存
+    - 在步骤切换时保存表单数据到 store
+    - _Requirements: 3.8_
+  - [x] 8.6 实现完成跳转
+    - 完成步骤 5 后跳转到 Dashboard
+    - _Requirements: 3.9_
+  - [ ] 8.7 编写入站步骤进度属性测试
+    - **Property 3: Onboarding Step Progression**
+    - **Validates: Requirements 3.1, 3.8, 3.10, 3.11**
+  - [ ] 8.8 编写灵感标签追加属性测试
+    - **Property 4: Inspiration Tag Appending**
+    - **Validates: Requirements 3.7**
+
+- [ ] 9. Checkpoint - 入站流程完成
+  - 确保 5 步骤流程正常工作
+  - 验证数据保存和跳转
+
+- [x] 10. 仪表盘框架实现
+  - [x] 10.1 创建 DashboardPage 组件
+    - 实现 Grid 布局（侧边栏 3/12 + 内容区 9/12）
+    - 集成 Header 和 Sidebar
+    - _Requirements: 4.1, 4.2, 4.4_
+  - [x] 10.2 实现视图切换逻辑
+    - 添加导航点击处理
+    - 实现视图切换动画
+    - _Requirements: 4.3, 4.6_
+
+- [-] 11. 生命长河视图实现
+  - [x] 11.1 创建 TimelineView 组件
+    - 实现标题和添加按钮
+    - 实现空状态显示
+    - _Requirements: 5.1, 5.2_
+  - [x] 11.2 实现事件卡片列表
+    - 创建时间线样式（点 + 连接线）
+    - 实现事件卡片（标题、日期、内容、AI反馈）
+    - 按时间倒序排列
+    - _Requirements: 5.3, 5.4_
+  - [x] 11.3 实现添加事件模态框
+    - 创建事件表单（标题、日期、内容）
+    - 集成 AI 分析调用
+    - 显示加载状态
+    - _Requirements: 5.5, 5.6, 5.7_
+  - [ ] 11.4 编写时间线事件排序属性测试
+    - **Property 5: Timeline Event Ordering**
+    - **Validates: Requirements 5.3, 5.4**
+
+- [ ] 12. Checkpoint - 时间线功能完成
+  - 确保事件添加和显示正常
+  - 验证 AI 分析集成
+
+- [-] 13. 爽文剧本视图实现
+  - [x] 13.1 创建 ScriptView 组件框架
+    - 实现两栏布局（设置面板 + 剧本展示）
+    - _Requirements: 6.1_
+  - [x] 13.2 实现角色设定卡片
+    - 显示用户信息（昵称、星座、MBTI、爱好）
+    - 添加修改人设按钮
+    - _Requirements: 6.2_
+  - [x] 13.3 实现创作需求表单
+    - 添加主题输入框
+    - 添加风格下拉选择（7种风格）
+    - 添加篇幅下拉选择（3种篇幅）
+    - _Requirements: 6.3, 6.4, 6.5_
+  - [x] 13.4 实现剧本生成功能
+    - 集成 AI 剧本生成调用
+    - 保存生成的剧本到 store
+    - _Requirements: 6.6_
+  - [x] 13.5 实现历史卷轴列表
+    - 显示历史剧本列表
+    - 实现点击选择功能
+    - _Requirements: 6.7, 6.8_
+  - [x] 13.6 实现剧本内容展示
+    - 显示选中剧本内容
+    - 格式化【标题】高亮
+    - 实现空状态显示
+    - _Requirements: 6.9, 6.10_
+  - [ ] 13.7 编写剧本生成和选择属性测试
+    - **Property 6: Script Generation and Selection**
+    - **Validates: Requirements 6.6, 6.7, 6.8, 6.9, 6.10**
+
+- [ ] 14. Checkpoint - 剧本功能完成
+  - 确保剧本生成和选择正常
+  - 验证历史记录功能
+
+- [-] 15. 实现路径视图实现
+  - [x] 15.1 创建 PathView 组件
+    - 实现无剧本时的提示状态
+    - 实现有剧本时的生成界面
+    - _Requirements: 7.1, 7.2_
+  - [x] 15.2 实现路径生成功能
+    - 集成 AI 路径生成调用
+    - 保存路径到 store
+    - _Requirements: 7.3_
+  - [x] 15.3 实现路径步骤展示
+    - 创建编号卡片样式（蓝色主题）
+    - 显示阶段标题和建议
+    - 添加交错动画
+    - _Requirements: 7.4, 7.5, 7.6_
+  - [ ] 15.4 编写路径生成条件显示属性测试
+    - **Property 7: Path Generation Conditional Display**
+    - **Validates: Requirements 7.1, 7.2, 7.3, 7.4, 7.5**
+
+- [-] 16. 用户资料模态框实现
+  - [x] 16.1 创建 ProfileModal 组件
+    - 实现查看模式（头像、昵称、统计）
+    - _Requirements: 8.1, 8.2_
+  - [x] 16.2 实现编辑模式
+    - 添加可编辑字段
+    - 实现保存和取消功能
+    - _Requirements: 8.3, 8.4, 8.5_
+  - [x] 16.3 实现清除数据功能
+    - 添加确认对话框
+    - 清除 localStorage 并刷新
+    - _Requirements: 8.6_
+  - [ ] 16.4 编写模态框开关行为属性测试
+    - **Property 8: Modal Open/Close Behavior**
+    - **Validates: Requirements 8.1, 8.3, 8.5, 11.4**
+
+- [ ] 17. Checkpoint - 核心功能完成
+  - 确保所有视图正常工作
+  - 验证用户资料功能
+
+- [x] 18. AI 服务集成
+  - [x] 18.1 创建 AI Service 模块
+    - 封装 OpenRouter API 调用
+    - 实现 analyzeLifeEvent 方法
+    - 实现 generateEpicScript 方法
+    - 实现 generatePath 方法
+    - _Requirements: 5.6, 6.6, 7.3_
+  - [x] 18.2 实现错误处理
+    - 添加 try-catch 错误捕获
+    - 返回默认错误消息
+    - _Requirements: 5.7_
+
+- [x] 19. 响应式设计优化
+  - [x] 19.1 实现移动端适配
+    - 调整视图容器高度和圆角
+    - 隐藏导航文字标签
+    - 调整 Grid 列配置
+    - _Requirements: 12.1, 12.2, 12.3, 12.4_
+  - [x] 19.2 实现断点样式
+    - 添加 768px 断点媒体查询
+    - 调整内边距和间距
+    - _Requirements: 1.5, 1.6_
+
+- [x] 20. 页面过渡动画
+  - [x] 20.1 实现页面切换动画
+    - 使用 Framer Motion 实现淡入淡出
+    - 添加加载器显示
+    - _Requirements: 10.1, 10.2_
+  - [x] 20.2 实现视图切换动画
+    - 添加透明度和位移动画
+    - 配置 cubic-bezier 缓动
+    - _Requirements: 10.3, 10.4, 10.5_
+
+- [x] 21. 路由配置
+  - [x] 21.1 配置 React Router
+    - 设置路由：/, /onboarding, /dashboard
+    - 添加路由守卫（登录检查）
+    - _Requirements: 2.5, 3.9_
+
+- [ ] 22. Final Checkpoint - 项目完成
+  - 确保所有功能正常工作
+  - 验证响应式设计
+  - 确保所有测试通过
+
+## Notes
+
+- All tasks are required for comprehensive testing
+- 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