150 lines
9.2 KiB
Markdown
150 lines
9.2 KiB
Markdown
# 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 显示存储空间不足的提示
|