Implementation Plan: Life Script Frontend

Overview

本实现计划将 PncyssD 原型设计完整还原为基于 React + Tailwind CSS + Radix UI 的现代化前端应用。采用增量开发方式，从项目初始化开始，逐步构建基础组件、页面和功能模块。

Tasks

1. 项目初始化与基础配置
- 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
- 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
2. 基础UI组件开发
- 2.1 创建 Background 组件
  - 实现动态流体背景（渐变 + 浮动模糊圆 + 纹理叠加）
  - 添加 animate-float 和 animate-float-delayed 动画
  - Requirements: 1.1
- 2.2 创建 GlassCard 组件
  - 实现毛玻璃卡片样式（backdrop-filter, 边框, 阴影）
  - 支持 variant 属性（default, highlight, ai）
  - Requirements: 1.2
- 2.3 创建 GlassButton 组件
  - 实现毛玻璃按钮样式
  - 支持 variant（default, primary, icon）和 loading 状态
  - Requirements: 1.2
- 2.4 创建 GlassInput 和 GlassTextarea 组件
  - 实现毛玻璃输入框样式
  - 支持 label、placeholder、focus 状态
  - Requirements: 1.2
- 2.5 创建 GlassSelect 组件
  - 实现毛玻璃下拉选择框
  - 支持 options 数组配置
  - Requirements: 1.2
- 2.6 创建 Modal 组件
  - 使用 Radix UI Dialog 实现
  - 添加暗色遮罩和模糊效果
  - Requirements: 11.1, 11.2, 11.3, 11.4, 11.5
- 2.7 创建 Loader 组件
  - 实现加载动画（旋转圆环 + 文字）
  - Requirements: 10.2
- 2.8 创建 PromptTag 组件
  - 实现灵感标签样式和点击交互
  - Requirements: 3.7
3. Checkpoint - 基础组件完成
- 确保所有基础 UI 组件正确渲染
- 验证样式与原型一致
[-] 4. 状态管理实现
- 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
5. 布局组件开发
- 5.1 创建 Header 组件
  - 实现固定定位头部
  - 添加 logo 和用户按钮
  - Requirements: 1.4
- 5.2 创建 Sidebar 组件
  - 实现导航分组（回溯过去、创造未来）
  - 添加导航项激活状态
  - 添加底部引用文字
  - Requirements: 4.1, 4.2, 4.5
[-] 6. 登录页面实现
- 6.1 创建 LoginPage 组件
  - 实现登录表单布局（手机号、验证码、登录按钮）
  - 添加标题和协议文字
  - Requirements: 2.1, 2.2, 2.7
- 6.2 实现验证码倒计时逻辑
  - 创建 useCountdown hook
  - 实现 60 秒倒计时和按钮状态切换
  - Requirements: 2.3
- 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. 入站流程实现
- 8.1 创建 OnboardingPage 组件框架
  - 实现 5 步骤容器布局
  - 添加进度指示器
  - 添加导航按钮（返回、继续）
  - Requirements: 3.1, 3.10, 3.11
- 8.2 实现步骤 1 - 基础信息
  - 创建表单字段（称呼、性别、MBTI、星座、兴趣爱好）
  - Requirements: 3.2
- 8.3 实现步骤 2-4 - 记忆采集
  - 创建通用记忆步骤组件
  - 添加日期选择器和文本区域
  - 集成灵感标签（童年、开心、低谷）
  - Requirements: 3.3, 3.4, 3.5, 3.7
- 8.4 实现步骤 5 - 未来愿景
  - 创建愿景和理想生活文本区域
  - Requirements: 3.6
- 8.5 实现步骤间数据保存
  - 在步骤切换时保存表单数据到 store
  - Requirements: 3.8
- 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 步骤流程正常工作
- 验证数据保存和跳转
10. 仪表盘框架实现
- 10.1 创建 DashboardPage 组件
  - 实现 Grid 布局（侧边栏 3/12 + 内容区 9/12）
  - 集成 Header 和 Sidebar
  - Requirements: 4.1, 4.2, 4.4
- 10.2 实现视图切换逻辑
  - 添加导航点击处理
  - 实现视图切换动画
  - Requirements: 4.3, 4.6
[-] 11. 生命长河视图实现
- 11.1 创建 TimelineView 组件
  - 实现标题和添加按钮
  - 实现空状态显示
  - Requirements: 5.1, 5.2
- 11.2 实现事件卡片列表
  - 创建时间线样式（点 + 连接线）
  - 实现事件卡片（标题、日期、内容、AI反馈）
  - 按时间倒序排列
  - Requirements: 5.3, 5.4
- 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. 爽文剧本视图实现
- 13.1 创建 ScriptView 组件框架
  - 实现两栏布局（设置面板 + 剧本展示）
  - Requirements: 6.1
- 13.2 实现角色设定卡片
  - 显示用户信息（昵称、星座、MBTI、爱好）
  - 添加修改人设按钮
  - Requirements: 6.2
- 13.3 实现创作需求表单
  - 添加主题输入框
  - 添加风格下拉选择（7种风格）
  - 添加篇幅下拉选择（3种篇幅）
  - Requirements: 6.3, 6.4, 6.5
- 13.4 实现剧本生成功能
  - 集成 AI 剧本生成调用
  - 保存生成的剧本到 store
  - Requirements: 6.6
- 13.5 实现历史卷轴列表
  - 显示历史剧本列表
  - 实现点击选择功能
  - Requirements: 6.7, 6.8
- 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. 实现路径视图实现
- 15.1 创建 PathView 组件
  - 实现无剧本时的提示状态
  - 实现有剧本时的生成界面
  - Requirements: 7.1, 7.2
- 15.2 实现路径生成功能
  - 集成 AI 路径生成调用
  - 保存路径到 store
  - Requirements: 7.3
- 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. 用户资料模态框实现
- 16.1 创建 ProfileModal 组件
  - 实现查看模式（头像、昵称、统计）
  - Requirements: 8.1, 8.2
- 16.2 实现编辑模式
  - 添加可编辑字段
  - 实现保存和取消功能
  - Requirements: 8.3, 8.4, 8.5
- 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 - 核心功能完成
- 确保所有视图正常工作
- 验证用户资料功能
18. AI 服务集成
- 18.1 创建 AI Service 模块
  - 封装 OpenRouter API 调用
  - 实现 analyzeLifeEvent 方法
  - 实现 generateEpicScript 方法
  - 实现 generatePath 方法
  - Requirements: 5.6, 6.6, 7.3
- 18.2 实现错误处理
  - 添加 try-catch 错误捕获
  - 返回默认错误消息
  - Requirements: 5.7
19. 响应式设计优化
- 19.1 实现移动端适配
  - 调整视图容器高度和圆角
  - 隐藏导航文字标签
  - 调整 Grid 列配置
  - Requirements: 12.1, 12.2, 12.3, 12.4
- 19.2 实现断点样式
  - 添加 768px 断点媒体查询
  - 调整内边距和间距
  - Requirements: 1.5, 1.6
20. 页面过渡动画
- 20.1 实现页面切换动画
  - 使用 Framer Motion 实现淡入淡出
  - 添加加载器显示
  - Requirements: 10.1, 10.2
- 20.2 实现视图切换动画
  - 添加透明度和位移动画
  - 配置 cubic-bezier 缓动
  - Requirements: 10.3, 10.4, 10.5
21. 路由配置
- 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

10 KiB Raw Blame History Unescape Escape

Implementation Plan: Life Script Frontend

Overview

Tasks

Notes

10 KiB

Raw Blame History