peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端重构实现

Browse Source
This commit is contained in:
huazhongmin
2025-12-22 16:38:06 +08:00
parent cd6d995d5a
commit 26574e3db7
54 changed files with 8976 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.kiro/specs/life-script-frontend/design.md
+611
View File
@@ -0,0 +1,611 @@
# Design Document: Life Script Frontend
## Overview
本设计文档描述了基于 React + Tailwind CSS + Headless UI/Radix UI 技术栈，完整还原 PncyssD 原型设计的前端应用架构。应用采用组件化架构，使用 Zustand 进行状态管理，Framer Motion 实现动画效果，并通过 React Router 管理路由。
## Architecture
### 技术栈选型
| 类别 | 技术 | 说明 |
|------|------|------|
| 框架 | React 18 + Vite | 现代化构建工具，快速开发体验 |
| 样式 | Tailwind CSS 3.x | 原子化CSS，完美还原毛玻璃设计 |
| UI组件 | Radix UI | 无样式可访问组件库 |
| 状态管理 | Zustand | 轻量级状态管理，支持持久化 |
| 路由 | React Router v6 | 声明式路由管理 |
| 动画 | Framer Motion | 声明式动画库，替代GSAP |
| 图标 | Lucide React | 与原型一致的图标库 |
| HTTP | Axios | API请求封装 |
### 应用架构图
```mermaid
graph TB
subgraph "Application Layer"
App[App.jsx]
Router[React Router]
end
subgraph "Pages"
Login[LoginPage]
Onboarding[OnboardingPage]
Dashboard[DashboardPage]
end
subgraph "Dashboard Views"
Timeline[TimelineView]
Script[ScriptView]
Path[PathView]
end
subgraph "Shared Components"
GlassCard[GlassCard]
GlassButton[GlassButton]
GlassInput[GlassInput]
Modal[Modal]
Header[Header]
Sidebar[Sidebar]
end
subgraph "State Management"
Store[Zustand Store]
Persist[localStorage Persist]
end
subgraph "Services"
AIService[AI Service]
AuthService[Auth Service]
end
App --> Router
Router --> Login
Router --> Onboarding
Router --> Dashboard
Dashboard --> Timeline
Dashboard --> Script
Dashboard --> Path
Login --> GlassCard
Login --> GlassInput
Onboarding --> GlassCard
Dashboard --> Sidebar
Dashboard --> Header
Timeline --> Modal
Script --> GlassCard
Path --> GlassCard
Store --> Persist
Timeline --> AIService
Script --> AIService
Path --> AIService
```
### 目录结构
```
life-script/
├── public/
│ └── assets/
│ └── images/ # 背景图片、logo等
├── src/
│ ├── components/
│ │ ├── ui/ # 基础UI组件
│ │ │ ├── GlassCard.jsx
│ │ │ ├── GlassButton.jsx
│ │ │ ├── GlassInput.jsx
│ │ │ ├── GlassTextarea.jsx
│ │ │ ├── GlassSelect.jsx
│ │ │ └── index.js
│ │ ├── layout/ # 布局组件
│ │ │ ├── Header.jsx
│ │ │ ├── Sidebar.jsx
│ │ │ ├── Background.jsx
│ │ │ └── index.js
│ │ ├── Modal.jsx # 模态弹窗
│ │ ├── Loader.jsx # 加载动画
│ │ └── PromptTag.jsx # 灵感标签
│ ├── pages/
│ │ ├── LoginPage.jsx
│ │ ├── OnboardingPage.jsx
│ │ └── DashboardPage.jsx
│ ├── views/ # Dashboard子视图
│ │ ├── TimelineView.jsx
│ │ ├── ScriptView.jsx
│ │ ├── PathView.jsx
│ │ └── ProfileModal.jsx
│ ├── store/
│ │ └── useStore.js # Zustand store
│ ├── services/
│ │ ├── ai.js # AI服务
│ │ └── api.js # API封装
│ ├── hooks/
│ │ ├── useTransition.js # 页面过渡hook
│ │ └── useCountdown.js # 倒计时hook
│ ├── styles/
│ │ └── index.css # 全局样式
│ ├── utils/
│ │ └── constants.js # 常量定义
│ ├── App.jsx
│ └── main.jsx
├── index.html
├── tailwind.config.js
├── vite.config.js
└── package.json
```
## Components and Interfaces
### 1. 基础UI组件
#### GlassCard
```typescript
interface GlassCardProps {
children: React.ReactNode;
className?: string;
variant?: 'default' | 'highlight' | 'ai';
padding?: 'sm' | 'md' | 'lg';
}
```
样式规范：
- 背景: `rgba(15, 17, 26, 0.4)`
- 模糊: `backdrop-filter: blur(25px) saturate(180%)`
- 边框: `1px solid rgba(255, 255, 255, 0.08)`
- 圆角: `32px` (移动端 `20px`)
- 阴影: `0 20px 50px -12px rgba(0, 0, 0, 0.5)`
#### GlassButton
```typescript
interface GlassButtonProps {
children: React.ReactNode;
onClick?: () => void;
variant?: 'default' | 'primary' | 'icon';
disabled?: boolean;
loading?: boolean;
className?: string;
}
```
样式规范：
- 背景: `rgba(255, 255, 255, 0.03)`
- Hover: `rgba(255, 255, 255, 0.08)`
- Primary变体: `bg-orange-200/5 text-orange-200 border-orange-200/20`
- 过渡: `all 0.5s cubic-bezier(0.23, 1, 0.32, 1)`
#### GlassInput
```typescript
interface GlassInputProps {
label?: string;
type?: 'text' | 'tel' | 'date';
placeholder?: string;
value: string;
onChange: (value: string) => void;
maxLength?: number;
className?: string;
}
```
样式规范：
- 背景: `rgba(0, 0, 0, 0.2)`
- 边框: `1px solid rgba(255, 255, 255, 0.05)`
- Focus: `border-color: #FFAB91; box-shadow: 0 0 20px rgba(255, 171, 145, 0.1)`
- 圆角: `16px`
- 内边距: `14px 20px`
#### GlassTextarea
```typescript
interface GlassTextareaProps {
label?: string;
placeholder?: string;
value: string;
onChange: (value: string) => void;
rows?: number;
className?: string;
}
```
#### GlassSelect
```typescript
interface GlassSelectProps {
label?: string;
options: Array<{ value: string; label: string }>;
value: string;
onChange: (value: string) => void;
className?: string;
}
```
### 2. 布局组件
#### Background
动态流体背景组件，包含：
- 渐变底层: `from-[#1a1c2c] via-[#0a0c10] to-[#2d1b10]`
- 浮动模糊圆: 蓝色 (`bg-blue-900/20`) 和橙色 (`bg-orange-900/10`)
- 纹理叠加层: `mix-blend-overlay opacity-30`
#### Header
```typescript
interface HeaderProps {
showNav?: boolean;
onProfileClick?: () => void;
}
```
固定定位，包含logo和用户按钮。
#### Sidebar
```typescript
interface SidebarProps {
activeView: 'timeline' | 'script' | 'path';
onViewChange: (view: string) => void;
}
```
导航分组：
- 回溯过去: 生命长河
- 创造未来: 爽文剧本, 实现路径
### 3. 模态弹窗
#### Modal
```typescript
interface ModalProps {
isOpen: boolean;
onClose: () => void;
children: React.ReactNode;
maxWidth?: 'sm' | 'md' | 'lg';
}
```
使用 Radix UI Dialog 实现，样式：
- 遮罩: `bg-black/60 backdrop-blur-xl`
- 内容: GlassCard样式
- 关闭按钮: 右上角X图标
### 4. 页面组件
#### LoginPage
状态：
- phone: string
- code: string
- countdown: number
- isLoading: boolean
流程：
1. 输入手机号 → 点击获取验证码 → 60秒倒计时
2. 输入验证码 → 点击登录 → 验证成功跳转Onboarding
#### OnboardingPage
状态：
- currentStep: 1-5
- formData: RegistrationData
步骤内容：
1. 基础信息 (nickname, gender, mbti, zodiac, hobbies)
2. 童年记忆 (date, text) + 灵感标签
3. 开心经历 (date, text) + 灵感标签
4. 低谷时刻 (date, text) + 灵感标签
5. 未来愿景 (vision, ideal)
#### DashboardPage
状态：
- activeView: 'timeline' | 'script' | 'path'
- isProfileOpen: boolean
布局：
- 左侧: Sidebar (3/12 列)
- 右侧: 内容区 (9/12 列)
### 5. 视图组件
#### TimelineView
```typescript
interface LifeEvent {
id: number;
title: string;
time: string;
content: string;
aiFeedback: string;
}
```
功能：
- 显示事件列表（时间线样式）
- 添加新事件模态框
- AI分析反馈
#### ScriptView
```typescript
interface Script {
id: number;
theme: string;
style: string;
length: string;
content: string;
date: string;
}
```
布局：
- 左侧面板: 角色设定卡片 + 创作需求表单 + 历史卷轴列表
- 右侧面板: 剧本内容展示
#### PathView
功能：
- 检查是否有选中的剧本
- 生成路径步骤
- 展示路径卡片列表
## Data Models
### State Schema
```typescript
interface AppState {
// 认证状态
isLoggedIn: boolean;
phone: string;
// 视图状态
view: 'login' | 'onboarding' | 'dashboard';
currentStep: number;
// 用户注册数据
registrationData: {
nickname: string;
gender: string;
zodiac: string;
mbti: string;
profession: string;
hobbies: string[];
childhood: { date: string; text: string };
joy: { date: string; text: string };
low: { date: string; text: string };
future: { vision: string; ideal: string };
};
// 生命事件
lifeEvents: LifeEvent[];
// 剧本
scripts: Script[];
selectedScriptId: number | null;
// 路径
selectedPath: string | null;
// Actions
save: () => void;
load: () => void;
updateRegistration: (data: Partial<RegistrationData>) => void;
addLifeEvent: (event: Omit<LifeEvent, 'id'>) => void;
addScript: (script: Omit<Script, 'id' | 'date'>) => void;
setPath: (path: string) => void;
clear: () => void;
}
```
### 灵感标签数据
```typescript
const inspirationClusters = {
childhood: ['秋千', '晚霞', '糖果', '奔跑', '蝉鸣', '雨后泥土', '旧书包', '风筝'],
joy: ['海浪', '拥抱', '掌声', '晨曦', '破土而出', '默契', '星空', '释放'],
low: ['落叶', '雨伞', '长廊', '深呼吸', '自愈', '沉潜', '坚韧', '等待', '破茧']
};
```
### 下拉选项数据
```typescript
const scriptStyles = [
{ value: '都市', label: '都市沉浮' },
{ value: '古风', label: '快意恩仇' },
{ value: '爱情', label: '唯美浪漫' },
{ value: '科幻', label: '星际远征' },
{ value: '喜剧', label: '荒诞不经' },
{ value: '悬疑', label: '迷雾重重' },
{ value: '恐怖', label: '午夜回响' }
];
const scriptLengths = [
{ value: '短', label: '极简' },
{ value: '中', label: '连载' },
{ value: '长', label: '史诗' }
];
```
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system—essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
Based on the prework analysis, the following correctness properties have been identified:
### Property 1: State Persistence Round-Trip
*For any* valid application state object, serializing to localStorage and then deserializing on page reload SHALL produce an equivalent state object with all user data intact.
**Validates: Requirements 9.1, 9.2, 9.4**
### Property 2: Login Validation and Navigation
*For any* phone number input, the system SHALL:
- Accept only 11-digit numbers as valid
- Start countdown only for valid phone numbers
- Navigate to onboarding only when credentials match (phone + code "888888")
- Display error messages for all invalid inputs
**Validates: Requirements 2.3, 2.4, 2.5, 2.6**
### Property 3: Onboarding Step Progression
*For any* step number N (1-5), the onboarding flow SHALL:
- Display the correct content for step N
- Show "返回" button if and only if N > 1
- Preserve all form data when navigating between steps
- Update progress indicator to highlight step N
**Validates: Requirements 3.1, 3.8, 3.10, 3.11**
### Property 4: Inspiration Tag Appending
*For any* inspiration tag click in the onboarding flow, the corresponding textarea value SHALL be appended with the tag text, preserving any existing content.
**Validates: Requirements 3.7**
### Property 5: Timeline Event Ordering
*For any* collection of life events with different timestamps, the Timeline view SHALL display them in reverse chronological order (newest first), and each event card SHALL contain all required fields (title, date, content, aiFeedback).
**Validates: Requirements 5.3, 5.4**
### Property 6: Script Generation and Selection
*For any* script generation request with valid parameters, the system SHALL:
- Add the generated script to the scripts list
- Set it as the selected script
- Display it in the script view
- Allow selection of any historical script from the list
**Validates: Requirements 6.6, 6.7, 6.8, 6.9, 6.10**
### Property 7: Path Generation Conditional Display
*For any* dashboard state:
- If no script is selected, Path view SHALL display the "generate script first" prompt
- If a script is selected, Path view SHALL display the script theme and generation button
- After path generation, all path steps SHALL be displayed with sequential numbering
**Validates: Requirements 7.1, 7.2, 7.3, 7.4, 7.5**
### Property 8: Modal Open/Close Behavior
*For any* modal trigger action, the modal SHALL open with the correct content, and clicking the close button SHALL hide the modal and return to the previous state.
**Validates: Requirements 8.1, 8.3, 8.5, 11.4**
### Property 9: Corrupted State Recovery
*For any* corrupted or invalid JSON in localStorage, the State_Manager SHALL gracefully handle the error and initialize with default state values.
**Validates: Requirements 9.5**
## Error Handling
### 用户输入错误
| 场景 | 处理方式 |
|------|----------|
| 手机号格式错误 | 显示 alert 提示 "请输入正确的手机号" |
| 验证码错误 | 显示 alert 提示 "验证失败，请检查手机号或验证码" |
| 事件表单不完整 | 显示 alert 提示 "请完整填写记录" |
| 剧本主题为空 | 显示 alert 提示 "请输入主题" |
### AI 服务错误
| 场景 | 处理方式 |
|------|----------|
| API 请求失败 | 返回默认文本 "（AI 暂时陷入了沉思，请稍后再试）" |
| 网络超时 | 同上，使用 try-catch 捕获 |
### 状态持久化错误
| 场景 | 处理方式 |
|------|----------|
| localStorage 解析失败 | 使用 console.error 记录，使用默认状态 |
| localStorage 不可用 | 应用正常运行，数据不持久化 |
## Testing Strategy
### 单元测试 (Unit Tests)
使用 Vitest + React Testing Library：
1. **组件渲染测试**
- GlassCard 渲染正确的样式类
- GlassButton 各变体渲染正确
- GlassInput 显示 label 和 placeholder
- Modal 打开/关闭状态
2. **页面测试**
- LoginPage 初始渲染
- OnboardingPage 各步骤内容
- DashboardPage 布局结构
3. **边缘情况**
- 空数据状态显示
- 长文本截断
- 特殊字符处理
### 属性测试 (Property-Based Tests)
使用 fast-check 库，最少 100 次迭代：
1. **Property 1: State Round-Trip**
- 生成随机状态对象
- 序列化到 localStorage
- 反序列化并比较
2. **Property 2: Login Validation**
- 生成随机手机号字符串
- 验证 11 位数字通过，其他拒绝
3. **Property 3: Step Progression**
- 生成随机步骤序列
- 验证数据保持和 UI 状态
4. **Property 5: Event Ordering**
- 生成随机事件列表
- 验证排序结果
### 测试配置
```javascript
// vitest.config.js
export default {
test: {
environment: 'jsdom',
setupFiles: ['./src/test/setup.js'],
coverage: {
reporter: ['text', 'html'],
exclude: ['node_modules/', 'src/test/']
}
}
}
```
### 测试标注格式
每个属性测试必须包含注释：
```javascript
/**
* Feature: life-script-frontend
* Property 1: State Persistence Round-Trip
* Validates: Requirements 9.1, 9.2, 9.4
*/
test.prop([fc.record({...})])('state round-trip', (state) => {
// test implementation
});
```
.kiro/specs/life-script-frontend/requirements.md
+186
View File
@@ -0,0 +1,186 @@
# 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
.kiro/specs/life-script-frontend/tasks.md
+292
View File
@@ -0,0 +1,292 @@
# Implementation Plan: Life Script Frontend
## Overview
本实现计划将 PncyssD 原型设计完整还原为基于 React + Tailwind CSS + Radix UI 的现代化前端应用。采用增量开发方式，从项目初始化开始，逐步构建基础组件、页面和功能模块。
## Tasks
- [x] 1. 项目初始化与基础配置
- [x] 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_
- [x] 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_
- [x] 2. 基础UI组件开发
- [x] 2.1 创建 Background 组件
- 实现动态流体背景（渐变 + 浮动模糊圆 + 纹理叠加）
- 添加 animate-float 和 animate-float-delayed 动画
- _Requirements: 1.1_
- [x] 2.2 创建 GlassCard 组件
- 实现毛玻璃卡片样式（backdrop-filter, 边框, 阴影）
- 支持 variant 属性（default, highlight, ai）
- _Requirements: 1.2_
- [x] 2.3 创建 GlassButton 组件
- 实现毛玻璃按钮样式
- 支持 variant（default, primary, icon）和 loading 状态
- _Requirements: 1.2_
- [x] 2.4 创建 GlassInput 和 GlassTextarea 组件
- 实现毛玻璃输入框样式
- 支持 label、placeholder、focus 状态
- _Requirements: 1.2_
- [x] 2.5 创建 GlassSelect 组件
- 实现毛玻璃下拉选择框
- 支持 options 数组配置
- _Requirements: 1.2_
- [x] 2.6 创建 Modal 组件
- 使用 Radix UI Dialog 实现
- 添加暗色遮罩和模糊效果
- _Requirements: 11.1, 11.2, 11.3, 11.4, 11.5_
- [x] 2.7 创建 Loader 组件
- 实现加载动画（旋转圆环 + 文字）
- _Requirements: 10.2_
- [x] 2.8 创建 PromptTag 组件
- 实现灵感标签样式和点击交互
- _Requirements: 3.7_
- [x] 3. Checkpoint - 基础组件完成
- 确保所有基础 UI 组件正确渲染
- 验证样式与原型一致
- [-] 4. 状态管理实现
- [x] 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**
- [x] 5. 布局组件开发
- [x] 5.1 创建 Header 组件
- 实现固定定位头部
- 添加 logo 和用户按钮
- _Requirements: 1.4_
- [x] 5.2 创建 Sidebar 组件
- 实现导航分组（回溯过去、创造未来）
- 添加导航项激活状态
- 添加底部引用文字
- _Requirements: 4.1, 4.2, 4.5_
- [-] 6. 登录页面实现
- [x] 6.1 创建 LoginPage 组件
- 实现登录表单布局（手机号、验证码、登录按钮）
- 添加标题和协议文字
- _Requirements: 2.1, 2.2, 2.7_
- [x] 6.2 实现验证码倒计时逻辑
- 创建 useCountdown hook
- 实现 60 秒倒计时和按钮状态切换
- _Requirements: 2.3_
- [x] 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. 入站流程实现
- [x] 8.1 创建 OnboardingPage 组件框架
- 实现 5 步骤容器布局
- 添加进度指示器
- 添加导航按钮（返回、继续）
- _Requirements: 3.1, 3.10, 3.11_
- [x] 8.2 实现步骤 1 - 基础信息
- 创建表单字段（称呼、性别、MBTI、星座、兴趣爱好）
- _Requirements: 3.2_
- [x] 8.3 实现步骤 2-4 - 记忆采集
- 创建通用记忆步骤组件
- 添加日期选择器和文本区域
- 集成灵感标签（童年、开心、低谷）
- _Requirements: 3.3, 3.4, 3.5, 3.7_
- [x] 8.4 实现步骤 5 - 未来愿景
- 创建愿景和理想生活文本区域
- _Requirements: 3.6_
- [x] 8.5 实现步骤间数据保存
- 在步骤切换时保存表单数据到 store
- _Requirements: 3.8_
- [x] 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 步骤流程正常工作
- 验证数据保存和跳转
- [x] 10. 仪表盘框架实现
- [x] 10.1 创建 DashboardPage 组件
- 实现 Grid 布局（侧边栏 3/12 + 内容区 9/12）
- 集成 Header 和 Sidebar
- _Requirements: 4.1, 4.2, 4.4_
- [x] 10.2 实现视图切换逻辑
- 添加导航点击处理
- 实现视图切换动画
- _Requirements: 4.3, 4.6_
- [-] 11. 生命长河视图实现
- [x] 11.1 创建 TimelineView 组件
- 实现标题和添加按钮
- 实现空状态显示
- _Requirements: 5.1, 5.2_
- [x] 11.2 实现事件卡片列表
- 创建时间线样式（点 + 连接线）
- 实现事件卡片（标题、日期、内容、AI反馈）
- 按时间倒序排列
- _Requirements: 5.3, 5.4_
- [x] 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. 爽文剧本视图实现
- [x] 13.1 创建 ScriptView 组件框架
- 实现两栏布局（设置面板 + 剧本展示）
- _Requirements: 6.1_
- [x] 13.2 实现角色设定卡片
- 显示用户信息（昵称、星座、MBTI、爱好）
- 添加修改人设按钮
- _Requirements: 6.2_
- [x] 13.3 实现创作需求表单
- 添加主题输入框
- 添加风格下拉选择（7种风格）
- 添加篇幅下拉选择（3种篇幅）
- _Requirements: 6.3, 6.4, 6.5_
- [x] 13.4 实现剧本生成功能
- 集成 AI 剧本生成调用
- 保存生成的剧本到 store
- _Requirements: 6.6_
- [x] 13.5 实现历史卷轴列表
- 显示历史剧本列表
- 实现点击选择功能
- _Requirements: 6.7, 6.8_
- [x] 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. 实现路径视图实现
- [x] 15.1 创建 PathView 组件
- 实现无剧本时的提示状态
- 实现有剧本时的生成界面
- _Requirements: 7.1, 7.2_
- [x] 15.2 实现路径生成功能
- 集成 AI 路径生成调用
- 保存路径到 store
- _Requirements: 7.3_
- [x] 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. 用户资料模态框实现
- [x] 16.1 创建 ProfileModal 组件
- 实现查看模式（头像、昵称、统计）
- _Requirements: 8.1, 8.2_
- [x] 16.2 实现编辑模式
- 添加可编辑字段
- 实现保存和取消功能
- _Requirements: 8.3, 8.4, 8.5_
- [x] 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 - 核心功能完成
- 确保所有视图正常工作
- 验证用户资料功能
- [x] 18. AI 服务集成
- [x] 18.1 创建 AI Service 模块
- 封装 OpenRouter API 调用
- 实现 analyzeLifeEvent 方法
- 实现 generateEpicScript 方法
- 实现 generatePath 方法
- _Requirements: 5.6, 6.6, 7.3_
- [x] 18.2 实现错误处理
- 添加 try-catch 错误捕获
- 返回默认错误消息
- _Requirements: 5.7_
- [x] 19. 响应式设计优化
- [x] 19.1 实现移动端适配
- 调整视图容器高度和圆角
- 隐藏导航文字标签
- 调整 Grid 列配置
- _Requirements: 12.1, 12.2, 12.3, 12.4_
- [x] 19.2 实现断点样式
- 添加 768px 断点媒体查询
- 调整内边距和间距
- _Requirements: 1.5, 1.6_
- [x] 20. 页面过渡动画
- [x] 20.1 实现页面切换动画
- 使用 Framer Motion 实现淡入淡出
- 添加加载器显示
- _Requirements: 10.1, 10.2_
- [x] 20.2 实现视图切换动画
- 添加透明度和位移动画
- 配置 cubic-bezier 缓动
- _Requirements: 10.3, 10.4, 10.5_
- [x] 21. 路由配置
- [x] 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