happy-life-star/.kiro/specs/life-script-frontend/tasks.md

# 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