# Requirements Document

## Introduction

本文档定义了将 PncyssD 目录下的原型页面按照 course-web 项目规范进行重构的需求。PncyssD 是一个"人生轨迹"应用原型，包含登录、引导注册、仪表盘等核心页面。重构目标是将原生 ES Modules + Tailwind CSS 的实现迁移到 React + Vite 架构，同时保持原有的视觉设计风格和后端接口调用逻辑。

## Glossary

- **PncyssD_App**: 原型应用，包含登录、引导、仪表盘等页面的原生 JavaScript 实现
- **Course_Web**: 目标项目，使用 React + Vite + Tailwind CSS 的现代前端架构
- **Glassmorphism**: 玻璃拟态设计风格，使用模糊背景和半透明效果
- **Onboarding_Flow**: 引导流程，包含5个步骤的用户信息采集
- **Dashboard**: 仪表盘页面，包含生命长河、爽文剧本、实现路径三个功能模块
- **AI_Service**: AI 服务接口，用于生成分析、剧本和路径规划

## Requirements

### Requirement 1: 登录页面重构

**User Story:** As a 用户, I want 通过手机号验证码登录系统, so that 我可以安全地访问我的人生轨迹数据。

#### Acceptance Criteria

1. WHEN 用户访问登录页面 THEN THE PncyssD_App SHALL 显示玻璃拟态风格的登录卡片，包含标题"欢迎回来"和副标题"开启你的数字生命档案"
2. WHEN 用户输入手机号 THEN THE PncyssD_App SHALL 验证手机号格式为11位数字
3. WHEN 用户点击获取验证码按钮 THEN THE PncyssD_App SHALL 调用后端 `/auth/sms-code` 接口发送验证码
4. WHEN 验证码发送成功 THEN THE PncyssD_App SHALL 显示60秒倒计时并禁用获取按钮
5. WHEN 用户输入正确的验证码并点击登录 THEN THE PncyssD_App SHALL 调用后端 `/auth/login` 接口进行验证
6. WHEN 登录成功 THEN THE PncyssD_App SHALL 保存 token 到 localStorage 并跳转到引导页面
7. IF 登录失败 THEN THE PncyssD_App SHALL 显示错误提示信息
8. THE PncyssD_App SHALL 在登录按钮上显示"开启旅程"文字和橙色渐变样式

### Requirement 2: 引导流程页面重构

**User Story:** As a 新用户, I want 通过分步骤的引导流程填写个人信息, so that 系统可以了解我并提供个性化服务。

#### Acceptance Criteria

1. THE PncyssD_App SHALL 提供5个步骤的引导流程：基本信息、童年记忆、开心经历、低谷时光、未来愿景
2. WHEN 用户进入步骤1 THEN THE PncyssD_App SHALL 显示"你是谁？"标题和昵称、性别、MBTI、星座、兴趣爱好输入字段
3. WHEN 用户进入步骤2 THEN THE PncyssD_App SHALL 显示"那段纯真的时光"标题和童年记忆的日期、描述输入字段
4. WHEN 用户进入步骤3 THEN THE PncyssD_App SHALL 显示"光芒闪耀的时刻"标题和开心经历的日期、描述输入字段
5. WHEN 用户进入步骤4 THEN THE PncyssD_App SHALL 显示"在暗夜中潜行"标题和低谷时光的日期、描述输入字段
6. WHEN 用户进入步骤5 THEN THE PncyssD_App SHALL 显示"未来想成为谁？"标题和未来愿景、理想生活状态输入字段
7. WHEN 用户点击下一步 THEN THE PncyssD_App SHALL 保存当前步骤数据并切换到下一步骤
8. WHEN 用户点击返回 THEN THE PncyssD_App SHALL 返回上一步骤并保留已填写数据
9. THE PncyssD_App SHALL 在页面底部显示步骤指示器，当前步骤高亮显示
10. WHEN 用户完成所有步骤并点击"开启人生" THEN THE PncyssD_App SHALL 调用后端接口保存用户资料并跳转到仪表盘
11. THE PncyssD_App SHALL 在记忆描述字段下方显示灵感标签（如：秋千、晚霞、糖果等），点击可快速插入文字

### Requirement 3: 仪表盘页面重构

**User Story:** As a 已登录用户, I want 在仪表盘中管理我的人生轨迹数据, so that 我可以回顾过去、创造未来。

#### Acceptance Criteria

1. THE PncyssD_App SHALL 显示左侧导航栏，包含"生命长河"、"爽文剧本"、"实现路径"三个导航项
2. THE PncyssD_App SHALL 在导航栏顶部显示用户头像、昵称和 MBTI/星座信息
3. WHEN 用户点击导航项 THEN THE PncyssD_App SHALL 切换到对应的内容视图并高亮当前导航项
4. THE PncyssD_App SHALL 在导航栏底部显示音乐播放控制按钮和重置数据按钮
5. WHEN 用户点击用户头像区域 THEN THE PncyssD_App SHALL 显示用户菜单弹窗

### Requirement 4: 生命长河视图重构

**User Story:** As a 用户, I want 记录和查看我的人生重要事件, so that 我可以回顾和反思我的人生轨迹。

#### Acceptance Criteria

1. THE PncyssD_App SHALL 显示"生命长河"标题和"记录足迹"按钮
2. WHEN 用户点击"记录足迹"按钮 THEN THE PncyssD_App SHALL 显示事件录入弹窗，包含标题、时间、详情输入字段
3. WHEN 用户提交事件 THEN THE PncyssD_App SHALL 调用 AI 服务分析事件并生成疗愈反馈
4. THE PncyssD_App SHALL 以时间线形式展示所有已记录的事件，每个事件卡片包含标题、时间、内容和 AI 洞察
5. WHILE 事件列表为空 THEN THE PncyssD_App SHALL 显示空状态提示"此间尚无回响，等待你执笔..."
6. THE PncyssD_App SHALL 按时间倒序排列事件列表

### Requirement 5: 爽文剧本视图重构

**User Story:** As a 用户, I want 基于我的人设生成个性化的人生剧本, so that 我可以获得激励和方向感。

#### Acceptance Criteria

1. THE PncyssD_App SHALL 在左侧显示角色设定卡片，展示用户的昵称、星座、MBTI、兴趣爱好
2. THE PncyssD_App SHALL 提供剧本主题输入框和叙事风格、篇幅选择器
3. WHEN 用户点击"开启天命编撰"按钮 THEN THE PncyssD_App SHALL 调用 AI 服务生成剧本内容
4. WHILE 剧本生成中 THEN THE PncyssD_App SHALL 显示加载状态"编撰中..."
5. THE PncyssD_App SHALL 在右侧显示生成的剧本内容，使用章节标题格式化显示
6. THE PncyssD_App SHALL 在左侧显示历史卷轴列表，点击可切换查看不同剧本
7. WHILE 无剧本生成 THEN THE PncyssD_App SHALL 显示空状态提示

### Requirement 6: 实现路径视图重构

**User Story:** As a 用户, I want 将剧本转化为可执行的行动计划, so that 我可以一步步实现我的人生目标。

#### Acceptance Criteria

1. IF 用户未生成剧本 THEN THE PncyssD_App SHALL 显示提示"先生成剧本，方能洞察路径"并提供跳转按钮
2. WHEN 用户已有剧本 THEN THE PncyssD_App SHALL 显示"实现路径"标题和"开启人生导航"按钮
3. WHEN 用户点击"开启人生导航"按钮 THEN THE PncyssD_App SHALL 调用 AI 服务基于剧本生成行动路径
4. THE PncyssD_App SHALL 以阶段卡片形式展示路径，每个阶段包含序号、标题和具体建议
5. WHEN 路径已生成 THEN THE PncyssD_App SHALL 将按钮文字改为"重新推演"

### Requirement 7: 用户资料管理重构

**User Story:** As a 用户, I want 查看和编辑我的个人资料, so that 我可以保持信息的准确性。

#### Acceptance Criteria

1. WHEN 用户点击用户头像 THEN THE PncyssD_App SHALL 显示用户资料弹窗
2. THE PncyssD_App SHALL 在弹窗中显示用户头像、昵称、MBTI、星座、生命足迹数量、天命卷轴数量
3. WHEN 用户点击"编辑资料"按钮 THEN THE PncyssD_App SHALL 切换到编辑模式，显示可编辑的表单字段
4. WHEN 用户保存修改 THEN THE PncyssD_App SHALL 调用后端接口更新用户资料
5. WHEN 用户点击"清除数据并退出"按钮 THEN THE PncyssD_App SHALL 确认后清除本地存储并刷新页面

### Requirement 8: 视觉设计规范

**User Story:** As a 用户, I want 体验一致的视觉设计风格, so that 我可以获得沉浸式的使用体验。

#### Acceptance Criteria

1. THE PncyssD_App SHALL 使用深色背景配色方案，主色调为 `#0a0c10` 到 `#1a1c2c`
2. THE PncyssD_App SHALL 使用橙色 `#FFAB91` 作为强调色
3. THE PncyssD_App SHALL 使用玻璃拟态效果（backdrop-blur、半透明背景、细边框）
4. THE PncyssD_App SHALL 使用 Noto Sans SC 和 Noto Serif SC 字体
5. THE PncyssD_App SHALL 在背景中显示动态渐变光晕效果
6. THE PncyssD_App SHALL 使用圆角 32px 的卡片设计
7. THE PncyssD_App SHALL 使用平滑的页面切换动画（淡入淡出、上下滑动）

### Requirement 9: 响应式布局

**User Story:** As a 用户, I want 在不同设备上都能正常使用应用, so that 我可以随时随地记录我的人生轨迹。

#### Acceptance Criteria

1. THE PncyssD_App SHALL 在移动端显示汉堡菜单按钮，点击展开侧边导航
2. THE PncyssD_App SHALL 在移动端将仪表盘布局调整为单列显示
3. THE PncyssD_App SHALL 在移动端调整卡片圆角为 20px
4. THE PncyssD_App SHALL 在移动端隐藏导航项的文字标签，只显示图标

### Requirement 10: 数据持久化

**User Story:** As a 用户, I want 我的数据能够被安全保存, so that 我不会丢失我的人生记录。

#### Acceptance Criteria

1. THE PncyssD_App SHALL 使用 localStorage 存储用户数据，key 为 `lifeTrajectory_v3_data`
2. THE PncyssD_App SHALL 在数据变更时自动保存到 localStorage
3. THE PncyssD_App SHALL 在页面加载时从 localStorage 恢复数据
4. THE PncyssD_App SHALL 在登录成功后同步数据到后端服务器
5. IF localStorage 存储失败 THEN THE PncyssD_App SHALL 显示存储空间不足的提示