187 lines
11 KiB
Markdown
187 lines
11 KiB
Markdown
# Requirements Document
|
|
|
|
## Introduction
|
|
|
|
本项目旨在将 PncyssD 原型设计完整还原为一个基于 React + Tailwind CSS + Headless UI/Radix UI 的现代化前端应用。该应用是一款结合数字疗愈美学与人工智能的人生管理工具，包含登录、深度入站（Onboarding）、仪表盘（Dashboard）三大核心模块，以及生命长河（Timeline）、爽文剧本（Script）、实现路径（Path）三个功能视图。
|
|
|
|
## Glossary
|
|
|
|
- **System**: 人生轨迹前端应用系统
|
|
- **User**: 使用该应用的终端用户
|
|
- **Login_Page**: 登录页面组件
|
|
- **Onboarding_Flow**: 深度入站流程组件
|
|
- **Dashboard**: 仪表盘主界面组件
|
|
- **Timeline_View**: 生命长河视图组件
|
|
- **Script_View**: 爽文剧本视图组件
|
|
- **Path_View**: 实现路径视图组件
|
|
- **Glass_Card**: 毛玻璃卡片UI组件
|
|
- **Glass_Button**: 毛玻璃按钮UI组件
|
|
- **Glass_Input**: 毛玻璃输入框UI组件
|
|
- **Modal**: 模态弹窗组件
|
|
- **State_Manager**: 状态管理模块
|
|
- **AI_Service**: AI服务调用模块
|
|
|
|
## Requirements
|
|
|
|
### Requirement 1: 全局视觉主题与布局
|
|
|
|
**User Story:** As a user, I want to experience a consistent dark-themed glassmorphism UI, so that I can enjoy a visually cohesive and calming digital healing aesthetic.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE System SHALL render a dynamic fluid background with gradient colors (#1a1c2c, #0a0c10, #2d1b10) and floating blur elements
|
|
2. THE System SHALL apply glassmorphism styling (backdrop-filter blur, semi-transparent backgrounds, subtle borders) to all card components
|
|
3. THE System SHALL use Noto Serif SC for headings and Noto Sans SC for body text
|
|
4. THE System SHALL maintain a fixed header with logo and navigation elements
|
|
5. THE System SHALL support responsive layouts for mobile (< 768px) and desktop viewports
|
|
6. WHEN the viewport width is less than 768px, THE System SHALL adjust card border-radius and hide navigation text labels
|
|
|
|
### Requirement 2: 登录页面
|
|
|
|
**User Story:** As a user, I want to log in using my phone number and verification code, so that I can access my personal life trajectory data.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN the user is not logged in, THE Login_Page SHALL display a centered glass card with phone input, verification code input, and login button
|
|
2. THE Login_Page SHALL display the title "欢迎回来" with subtitle "开启你的数字生命档案"
|
|
3. WHEN the user clicks the "获取" button with a valid 11-digit phone number, THE System SHALL start a 60-second countdown and display simulated verification code sent message
|
|
4. IF the user clicks "获取" with an invalid phone number, THEN THE System SHALL display an error alert
|
|
5. WHEN the user submits correct phone number and verification code (888888), THE System SHALL transition to the onboarding flow
|
|
6. IF the user submits incorrect credentials, THEN THE System SHALL display a validation error message
|
|
7. THE Login_Page SHALL display terms agreement text at the bottom
|
|
|
|
### Requirement 3: 深度入站流程 (Onboarding)
|
|
|
|
**User Story:** As a new user, I want to complete a 5-step onboarding process, so that I can set up my personal profile and life memories.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE Onboarding_Flow SHALL consist of exactly 5 sequential steps with progress indicator dots
|
|
2. WHEN on step 1, THE System SHALL display form fields for: 称呼, 性别, MBTI, 星座, 兴趣爱好
|
|
3. WHEN on step 2, THE System SHALL display "童年记忆" section with date picker, text area, and inspiration tags (秋千, 晚霞, 糖果, etc.)
|
|
4. WHEN on step 3, THE System SHALL display "开心的经历" section with date picker, text area, and inspiration tags (海浪, 拥抱, 掌声, etc.)
|
|
5. WHEN on step 4, THE System SHALL display "沮丧与低谷" section with date picker, text area, and inspiration tags (落叶, 雨伞, 长廊, etc.)
|
|
6. WHEN on step 5, THE System SHALL display "未来想成为谁" section with vision and ideal life text areas
|
|
7. WHEN the user clicks an inspiration tag, THE System SHALL append the tag text to the corresponding text area
|
|
8. THE System SHALL save form data to state when navigating between steps
|
|
9. WHEN the user completes step 5 and clicks "开启人生", THE System SHALL transition to the dashboard
|
|
10. THE System SHALL display "返回" button on steps 2-5 and hide it on step 1
|
|
11. THE System SHALL update progress indicator to highlight current step with orange color and expanded width
|
|
|
|
### Requirement 4: 仪表盘布局
|
|
|
|
**User Story:** As a logged-in user, I want to access a dashboard with sidebar navigation, so that I can switch between different life management views.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE Dashboard SHALL display a sidebar with navigation items: 生命长河, 爽文剧本, 实现路径
|
|
2. THE Dashboard SHALL group navigation items under "回溯过去" and "创造未来" sections
|
|
3. WHEN the user clicks a navigation item, THE System SHALL highlight it with active state styling and load the corresponding view
|
|
4. THE Dashboard SHALL display a user profile button in the header
|
|
5. THE Dashboard SHALL display an inspirational quote at the bottom of the sidebar
|
|
6. THE System SHALL apply smooth fade transitions when switching between views
|
|
|
|
### Requirement 5: 生命长河视图 (Timeline)
|
|
|
|
**User Story:** As a user, I want to record and view my life events on a timeline, so that I can reflect on my past experiences with AI-powered insights.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE Timeline_View SHALL display a header with title "生命长河" and "记录足迹" button
|
|
2. WHEN no events exist, THE System SHALL display an empty state with wind icon and placeholder text
|
|
3. WHEN events exist, THE System SHALL display them in reverse chronological order with timeline dots and connecting line
|
|
4. FOR EACH event card, THE System SHALL display: title, date, content, and AI feedback section
|
|
5. WHEN the user clicks "记录足迹", THE System SHALL open a modal with event form (title, date, content)
|
|
6. WHEN the user submits a new event, THE System SHALL call AI service for analysis and save the event with AI feedback
|
|
7. THE System SHALL display loading state "正在共鸣生命轨迹..." while AI processes the event
|
|
|
|
### Requirement 6: 爽文剧本视图 (Script Generator)
|
|
|
|
**User Story:** As a user, I want to generate epic life scripts based on my profile and experiences, so that I can envision an inspiring future narrative.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE Script_View SHALL display a two-column layout: settings panel (left) and script display (right)
|
|
2. THE System SHALL display user's character settings (nickname, zodiac, MBTI, hobbies) in a read-only card
|
|
3. THE System SHALL provide form inputs for: 剧本主题, 叙事风格 (dropdown), 剧本篇幅 (dropdown)
|
|
4. THE System SHALL offer style options: 都市沉浮, 快意恩仇, 唯美浪漫, 星际远征, 荒诞不经, 迷雾重重, 午夜回响
|
|
5. THE System SHALL offer length options: 极简, 连载, 史诗
|
|
6. WHEN the user clicks "开启天命编撰", THE System SHALL generate a script via AI service and display it
|
|
7. THE System SHALL display historical scripts list with theme, style, length, and date
|
|
8. WHEN the user clicks a historical script, THE System SHALL load and display that script
|
|
9. WHEN no script is selected, THE System SHALL display an empty state with sparkles icon
|
|
10. THE System SHALL format script content with 【标题】 sections highlighted in orange
|
|
|
|
### Requirement 7: 实现路径视图 (Path Generator)
|
|
|
|
**User Story:** As a user, I want to generate actionable life paths based on my scripts, so that I can plan realistic steps toward my goals.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. IF no script is selected, THEN THE Path_View SHALL display a prompt to generate a script first
|
|
2. WHEN a script is selected, THE System SHALL display the script theme and "开启人生导航" button
|
|
3. WHEN the user clicks the path generation button, THE System SHALL call AI service to generate path steps
|
|
4. THE System SHALL display path steps as numbered cards with blue accent styling
|
|
5. EACH path step card SHALL display: step number, phase title, and detailed recommendations
|
|
6. THE System SHALL apply staggered animation delays when rendering path cards
|
|
|
|
### Requirement 8: 用户资料模态框
|
|
|
|
**User Story:** As a user, I want to view and edit my profile information, so that I can keep my personal data up to date.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN the user clicks the profile button, THE System SHALL open a modal displaying user avatar, nickname, MBTI, zodiac
|
|
2. THE System SHALL display statistics: 生命足迹 count and 天命卷轴 count
|
|
3. WHEN the user clicks "编辑资料", THE System SHALL switch to edit mode with editable fields
|
|
4. THE System SHALL provide editable fields for: 昵称, 职业, MBTI, 星座, 兴趣爱好
|
|
5. WHEN the user clicks "保存修改", THE System SHALL update the state and return to view mode
|
|
6. WHEN the user clicks "清除数据并退出", THE System SHALL clear all local storage and reload the page
|
|
|
|
### Requirement 9: 状态管理与持久化
|
|
|
|
**User Story:** As a user, I want my data to persist across sessions, so that I don't lose my life records and scripts.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE State_Manager SHALL persist all user data to localStorage under key 'life_trajectory_v3'
|
|
2. THE State_Manager SHALL load saved state on application initialization
|
|
3. THE State_Manager SHALL provide methods for: save, load, updateRegistration, addLifeEvent, addScript, setPath, clear
|
|
4. THE System SHALL automatically save state after any data modification
|
|
5. IF localStorage data is corrupted, THEN THE System SHALL handle the error gracefully and use default state
|
|
|
|
### Requirement 10: 页面过渡动画
|
|
|
|
**User Story:** As a user, I want smooth animations between pages and views, so that the experience feels polished and fluid.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN transitioning between major views (login → onboarding → dashboard), THE System SHALL apply fade-out and fade-in animations
|
|
2. THE System SHALL display a loading spinner with text "载入生命序列..." during transitions
|
|
3. WHEN switching dashboard views, THE System SHALL apply subtle opacity and translate animations
|
|
4. THE System SHALL use cubic-bezier easing for smooth motion curves
|
|
5. THE System SHALL apply staggered animations for list items and cards
|
|
|
|
### Requirement 11: 模态弹窗系统
|
|
|
|
**User Story:** As a user, I want modal dialogs for focused interactions, so that I can complete tasks without leaving the current context.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE Modal SHALL display with a dark backdrop (bg-black/60) and blur effect
|
|
2. THE Modal SHALL be centered on screen with max-width constraint
|
|
3. THE Modal SHALL include a close button in the top-right corner
|
|
4. WHEN the user clicks the close button, THE System SHALL hide the modal
|
|
5. THE Modal content SHALL be scrollable when exceeding viewport height
|
|
|
|
### Requirement 12: 响应式设计
|
|
|
|
**User Story:** As a user, I want the application to work well on both mobile and desktop devices, so that I can access it from any device.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN viewport width is less than 768px, THE System SHALL use full-height view container without border-radius
|
|
2. WHEN viewport width is less than 768px, THE System SHALL hide navigation item text labels and show only icons
|
|
3. THE System SHALL use CSS Grid with responsive column configurations (1 column on mobile, 12-column grid on desktop)
|
|
4. THE System SHALL adjust padding and spacing for mobile viewports
|