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

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