feat: 更新心情记录功能和界面
- 调整启动画面中的图片宽度，提升视觉效果 - 移除引导页面相关组件，简化应用结构 - 新增心情统计页面，支持用户查看和分析心情数据 - 优化心情卡片组件，增强用户交互体验 - 更新登录页面标题，提升品牌一致性 - 新增心情日历和编辑功能，支持用户记录和管理心情
This commit is contained in:
richarjiang
152
docs/mood-redux-migration.md
Normal file
152
docs/mood-redux-migration.md
Normal file
@@ -0,0 +1,152 @@
|
||||
# 心情管理 Redux 迁移总结
|
||||
|
||||
## 概述
|
||||
|
||||
本次迁移将心情管理相关的数据从本地状态管理迁移到 Redux 中进行统一管理，确保多个页面之间的数据状态同步。
|
||||
|
||||
## 迁移内容
|
||||
|
||||
### 1. 创建 Redux Slice
|
||||
|
||||
**文件**: `store/moodSlice.ts`
|
||||
|
||||
- 创建了完整的心情状态管理
|
||||
- 包含异步 actions 用于 API 调用
|
||||
- 提供选择器用于数据获取
|
||||
- 支持心情记录的增删改查操作
|
||||
|
||||
#### 主要功能：
|
||||
- `fetchDailyMoodCheckins`: 获取指定日期的心情记录
|
||||
- `fetchMoodHistory`: 获取心情历史记录
|
||||
- `fetchMoodStatistics`: 获取心情统计数据
|
||||
- `createMoodRecord`: 创建心情记录
|
||||
- `updateMoodRecord`: 更新心情记录
|
||||
- `deleteMoodRecord`: 删除心情记录
|
||||
|
||||
### 2. 创建自定义 Hook
|
||||
|
||||
**文件**: `hooks/useMoodData.ts`
|
||||
|
||||
- 提供了简化的心情数据访问接口
|
||||
- 包含类型安全的参数定义
|
||||
- 支持多种使用场景
|
||||
|
||||
#### 主要 Hook：
|
||||
- `useMoodData()`: 通用心情数据管理
|
||||
- `useMoodRecords(date)`: 获取指定日期的心情记录
|
||||
- `useTodayMood()`: 获取今天的心情记录
|
||||
|
||||
### 3. 更新 Store 配置
|
||||
|
||||
**文件**: `store/index.ts`
|
||||
|
||||
- 将 `moodReducer` 添加到 Redux store 中
|
||||
- 确保心情状态在整个应用中可用
|
||||
|
||||
### 4. 迁移的页面
|
||||
|
||||
#### 心情日历页面 (`app/mood/calendar.tsx`)
|
||||
- 使用 `useMoodData` hook 替代本地状态
|
||||
- 通过 Redux 管理月份心情数据和选中日期记录
|
||||
- 保持原有的 UI 交互逻辑
|
||||
|
||||
#### 心情编辑页面 (`app/mood/edit.tsx`)
|
||||
- 使用 Redux actions 进行数据操作
|
||||
- 通过 `useMoodRecords` 获取当前日期的记录
|
||||
- 支持创建、更新、删除操作
|
||||
|
||||
#### 心情统计页面 (`app/mood-statistics.tsx`)
|
||||
- 使用 Redux 管理历史数据和统计数据
|
||||
- 通过 `useMoodData` 获取统计数据
|
||||
- 保持原有的统计展示逻辑
|
||||
|
||||
#### 统计页面 (`app/(tabs)/statistics.tsx`)
|
||||
- 使用 `selectLatestMoodRecordByDate` 获取当前日期的心情记录
|
||||
- 通过 Redux 管理心情数据的加载状态
|
||||
|
||||
## 数据流
|
||||
|
||||
### 之前的数据流
|
||||
```
|
||||
页面组件 → 本地状态 → API 调用 → 更新本地状态
|
||||
```
|
||||
|
||||
### 现在的数据流
|
||||
```
|
||||
页面组件 → Redux Actions → API 调用 → Redux Store → 页面组件
|
||||
```
|
||||
|
||||
## 优势
|
||||
|
||||
### 1. 数据同步
|
||||
- 多个页面共享同一份心情数据
|
||||
- 避免数据不一致的问题
|
||||
- 减少重复的 API 调用
|
||||
|
||||
### 2. 状态管理
|
||||
- 统一的状态管理逻辑
|
||||
- 更好的错误处理和加载状态
|
||||
- 支持数据缓存和优化
|
||||
|
||||
### 3. 开发体验
|
||||
- 类型安全的 API 接口
|
||||
- 简化的数据访问方式
|
||||
- 更好的代码组织和维护性
|
||||
|
||||
### 4. 性能优化
|
||||
- 避免重复的数据请求
|
||||
- 支持数据预加载
|
||||
- 更好的内存管理
|
||||
|
||||
## 使用示例
|
||||
|
||||
### 基本使用
|
||||
```typescript
|
||||
import { useMoodData } from '@/hooks/useMoodData';
|
||||
|
||||
function MyComponent() {
|
||||
const { createMood, updateMood, deleteMood } = useMoodData();
|
||||
|
||||
const handleCreate = async () => {
|
||||
await createMood({
|
||||
moodType: 'happy',
|
||||
intensity: 8,
|
||||
description: '今天很开心'
|
||||
});
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 获取特定日期的记录
|
||||
```typescript
|
||||
import { useMoodRecords } from '@/hooks/useMoodData';
|
||||
|
||||
function MyComponent() {
|
||||
const { records, latestRecord, loading } = useMoodRecords('2024-01-01');
|
||||
|
||||
if (loading) return <Loading />;
|
||||
|
||||
return <div>{latestRecord?.moodType}</div>;
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **类型安全**: 所有 API 调用都有完整的 TypeScript 类型定义
|
||||
2. **错误处理**: Redux 提供了统一的错误处理机制
|
||||
3. **加载状态**: 每个操作都有对应的加载状态管理
|
||||
4. **数据缓存**: Redux 会自动缓存已加载的数据，避免重复请求
|
||||
|
||||
## 后续优化建议
|
||||
|
||||
1. **数据持久化**: 考虑使用 Redux Persist 进行数据持久化
|
||||
2. **离线支持**: 添加离线数据同步功能
|
||||
3. **实时更新**: 考虑添加 WebSocket 支持实时数据更新
|
||||
4. **性能监控**: 添加性能监控和优化指标
|
||||
|
||||
## 测试建议
|
||||
|
||||
1. **单元测试**: 为 Redux actions 和 reducers 编写单元测试
|
||||
2. **集成测试**: 测试页面组件与 Redux 的集成
|
||||
3. **端到端测试**: 测试完整的心情管理流程
|
||||
4. **性能测试**: 测试大量数据下的性能表现
|
||||
Reference in New Issue
Block a user