feat: 更新心情记录功能和界面

- 调整启动画面中的图片宽度，提升视觉效果 - 移除引导页面相关组件，简化应用结构 - 新增心情统计页面，支持用户查看和分析心情数据 - 优化心情卡片组件，增强用户交互体验 - 更新登录页面标题，提升品牌一致性 - 新增心情日历和编辑功能，支持用户记录和管理心情
2025-08-21 17:59:22 +08:00
parent a7607e0f74
commit 72e75b602e
24 changed files with 2964 additions and 1238 deletions
--- a/docs/mood-checkin-implementation.md
+++ b/docs/mood-checkin-implementation.md
@@ -0,0 +1,196 @@
+# 心情打卡功能实现文档
+
+## 功能概述
+
+心情打卡功能允许用户记录每日的情绪状态，包括10种基本情绪类型，并可以添加强度评分和详细描述。该功能已完全集成到现有的健康数据统计页面中。
+
+## 实现的功能
+
+### 1. 核心功能
+- ✅ 创建心情打卡记录
+- ✅ 更新已有心情记录
+- ✅ 删除心情记录（软删除）
+- ✅ 查看每日心情记录
+- ✅ 查看历史心情记录
+- ✅ 心情统计分析
+
+### 2. 心情类型
+支持10种心情类型，每种都有对应的emoji和颜色：
+
+| 心情类型 | 英文标识 | 中文标签 | Emoji | 颜色 |
+|---------|---------|---------|-------|------|
+| 开心 | happy | 开心 | 😊 | #4CAF50 |
+| 心动 | excited | 心动 | 💓 | #E91E63 |
+| 兴奋 | thrilled | 兴奋 | 🤩 | #FF9800 |
+| 平静 | calm | 平静 | 😌 | #2196F3 |
+| 焦虑 | anxious | 焦虑 | 😰 | #FF9800 |
+| 难过 | sad | 难过 | 😢 | #2196F3 |
+| 孤独 | lonely | 孤独 | 🥺 | #9C27B0 |
+| 委屈 | wronged | 委屈 | 😔 | #607D8B |
+| 生气 | angry | 生气 | 😡 | #F44336 |
+| 心累 | tired | 心累 | 😴 | #9C27B0 |
+
+### 3. 数据字段
+- `moodType`: 心情类型（必填）
+- `intensity`: 心情强度 1-10（必填，默认5）
+- `description`: 心情描述（可选，最多200字符）
+- `checkinDate`: 打卡日期（可选，默认当天）
+- `metadata`: 扩展数据（可选）
+
+## 文件结构
+
+### 1. API服务层
+```
+services/moodCheckins.ts
+```
+- 定义心情类型和数据结构
+- 提供完整的API调用方法
+- 包含心情配置和工具函数
+
+### 2. 组件层
+```
+components/MoodModal.tsx      # 心情打卡弹窗
+components/MoodCard.tsx       # 心情卡片展示
+components/MoodHistoryCard.tsx # 心情历史记录卡片
+```
+
+### 3. 页面层
+```
+app/(tabs)/statistics.tsx     # 主统计页面（集成心情卡片）
+app/mood-statistics.tsx       # 心情统计详情页面
+```
+
+## API接口
+
+### 创建心情打卡
+```typescript
+POST /api/mood-checkins
+{
+  "moodType": "happy",
+  "intensity": 8,
+  "description": "今天工作顺利，心情很好",
+  "checkinDate": "2025-01-21"
+}
+```
+
+### 获取每日心情
+```typescript
+GET /api/mood-checkins/daily?date=2025-01-21
+```
+
+### 获取心情历史
+```typescript
+GET /api/mood-checkins/history?startDate=2025-01-01&endDate=2025-01-31
+```
+
+### 获取心情统计
+```typescript
+GET /api/mood-checkins/statistics?startDate=2025-01-01&endDate=2025-01-31
+```
+
+## 使用方式
+
+### 1. 在统计页面使用
+心情卡片已集成到主统计页面中，用户可以选择日期查看对应的心情记录：
+
+```typescript
+// 加载指定日期的心情数据
+const loadMoodData = async (targetDate?: Date) => {
+  const dateString = dayjs(targetDate).format('YYYY-MM-DD');
+  const checkins = await getDailyMoodCheckins(dateString);
+  setCurrentMoodCheckin(checkins[0] || null);
+};
+```
+
+### 2. 打开心情弹窗
+点击心情卡片可以打开心情打卡弹窗：
+
+```typescript
+<MoodModal
+  visible={moodModalVisible}
+  onClose={() => setMoodModalVisible(false)}
+  onSave={handleMoodSave}
+  selectedDate={days[selectedIndex]?.date?.format('YYYY-MM-DD')}
+/>
+```
+
+### 3. 查看心情统计
+访问心情统计页面查看详细分析：
+
+```typescript
+// 加载最近30天的心情数据
+const loadMoodData = async () => {
+  const endDate = dayjs().format('YYYY-MM-DD');
+  const startDate = dayjs().subtract(30, 'days').format('YYYY-MM-DD');
+  
+  const [historyData, statsData] = await Promise.all([
+    getMoodCheckinsHistory({ startDate, endDate }),
+    getMoodStatistics({ startDate, endDate })
+  ]);
+};
+```
+
+## 用户体验特性
+
+### 1. 智能日期选择
+- 支持选择任意日期进行心情打卡
+- 自动加载选中日期的心情记录
+- 如果已有记录，自动填充并支持更新
+
+### 2. 直观的心情选择
+- 使用emoji和颜色区分不同心情
+- 支持心情强度1-10的滑动选择
+- 可选的心情描述输入
+
+### 3. 实时数据同步
+- 保存后立即更新界面显示
+- 支持离线缓存和网络同步
+- 错误处理和重试机制
+
+### 4. 统计分析
+- 总打卡次数统计
+- 平均心情强度计算
+- 心情类型分布分析
+- 最频繁心情识别
+
+## 技术实现细节
+
+### 1. 状态管理
+使用React Hooks管理组件状态：
+- `currentMoodCheckin`: 当前选中日期的情绪记录
+- `isMoodLoading`: 加载状态
+- `moodModalVisible`: 弹窗显示状态
+
+### 2. 数据加载策略
+- 页面聚焦时自动加载当前日期数据
+- 日期切换时重新加载对应数据
+- 支持并行加载多个数据源
+
+### 3. 错误处理
+- API调用失败时的友好提示
+- 网络异常时的重试机制
+- 数据加载失败时的降级显示
+
+### 4. 性能优化
+- 使用React.memo优化组件渲染
+- 合理的数据缓存策略
+- 避免不必要的API调用
+
+## 扩展功能建议
+
+1. **心情趋势图表**: 添加折线图显示心情变化趋势
+2. **心情提醒**: 定时提醒用户进行心情打卡
+3. **心情分享**: 允许用户分享心情状态到社交平台
+4. **AI心情建议**: 基于心情状态提供改善建议
+5. **数据导出**: 支持心情数据导出为CSV或PDF
+6. **心情标签**: 支持自定义心情标签和分类
+7. **心情日记**: 结合文字日记功能
+8. **心情目标**: 设置心情改善目标并跟踪进度
+
+## 注意事项
+
+1. **数据隐私**: 心情数据属于敏感信息，需要严格的隐私保护
+2. **用户体验**: 心情打卡应该是轻松愉快的体验，避免过于复杂的操作
+3. **数据准确性**: 确保心情数据的准确性和一致性
+4. **性能考虑**: 大量历史数据的加载和展示需要考虑性能优化
+5. **兼容性**: 确保在不同设备和系统版本上的兼容性
--- a/docs/mood-checkin-test.md
+++ b/docs/mood-checkin-test.md
@@ -0,0 +1,127 @@
+# 心情打卡功能测试指南
+
+## 功能测试清单
+
+### 1. 基础功能测试
+
+#### 1.1 心情卡片显示
+- [ ] 在统计页面可以看到心情卡片
+- [ ] 心情卡片显示正确的emoji和标题
+- [ ] 未记录心情时显示"点击记录心情"
+- [ ] 已记录心情时显示心情类型和时间
+
+#### 1.2 心情弹窗功能
+- [ ] 点击心情卡片可以打开心情弹窗
+- [ ] 弹窗显示日历视图
+- [ ] 弹窗显示10种心情选项
+- [ ] 心情选项有正确的emoji和颜色
+
+#### 1.3 心情选择功能
+- [ ] 可以选择任意心情类型
+- [ ] 选择心情后显示心情强度选择器
+- [ ] 强度选择器支持1-10的滑动选择
+- [ ] 选择心情后显示描述输入框
+
+#### 1.4 心情保存功能
+- [ ] 选择心情后可以保存
+- [ ] 保存后弹窗关闭
+- [ ] 保存后心情卡片更新显示
+- [ ] 保存失败时显示错误提示
+
+### 2. 日期相关测试
+
+#### 2.1 日期选择
+- [ ] 可以选择任意日期进行心情打卡
+- [ ] 选择不同日期时加载对应的心情记录
+- [ ] 未来日期不能进行心情打卡
+
+#### 2.2 历史记录
+- [ ] 已有心情记录的日期显示正确的心情
+- [ ] 点击已有记录的日期可以更新心情
+- [ ] 历史记录显示正确的时间格式
+
+### 3. 数据同步测试
+
+#### 3.1 API调用
+- [ ] 创建心情打卡时调用正确的API
+- [ ] 获取每日心情时调用正确的API
+- [ ] API调用失败时显示错误信息
+
+#### 3.2 数据更新
+- [ ] 保存心情后立即更新界面
+- [ ] 切换日期时重新加载数据
+- [ ] 网络异常时有适当的错误处理
+
+### 4. 用户体验测试
+
+#### 4.1 界面响应
+- [ ] 所有按钮点击有适当的反馈
+- [ ] 加载状态显示正确
+- [ ] 错误状态显示友好
+
+#### 4.2 输入验证
+- [ ] 心情类型为必选项
+- [ ] 强度范围为1-10
+- [ ] 描述最多200字符
+
+## 测试步骤
+
+### 步骤1: 基础功能测试
+1. 打开应用，进入统计页面
+2. 查看心情卡片是否正确显示
+3. 点击心情卡片，确认弹窗打开
+4. 选择一种心情，确认强度选择器出现
+5. 调整强度，确认描述输入框出现
+6. 输入描述，点击保存
+
+### 步骤2: 日期功能测试
+1. 在统计页面选择不同日期
+2. 确认心情卡片显示对应日期的心情
+3. 选择未来日期，确认不能打卡
+4. 选择已有记录的日期，确认可以更新
+
+### 步骤3: 数据同步测试
+1. 断开网络连接
+2. 尝试保存心情，确认错误提示
+3. 恢复网络连接
+4. 重新保存心情，确认成功
+
+### 步骤4: 边界情况测试
+1. 不选择心情直接保存
+2. 输入超长描述
+3. 快速切换日期
+4. 同时打开多个弹窗
+
+## 预期结果
+
+### 成功情况
+- 心情打卡功能正常工作
+- 数据正确保存和显示
+- 用户体验流畅
+- 错误处理得当
+
+### 失败情况
+- 功能无法使用
+- 数据丢失或错误
+- 界面卡顿或崩溃
+- 错误信息不友好
+
+## 问题记录
+
+如果在测试过程中发现问题，请记录以下信息：
+
+1. **问题描述**: 详细描述问题现象
+2. **复现步骤**: 如何重现问题
+3. **预期行为**: 应该发生什么
+4. **实际行为**: 实际发生了什么
+5. **环境信息**: 设备、系统版本等
+6. **严重程度**: 高/中/低
+
+## 修复验证
+
+修复问题后，需要重新执行相关测试用例，确保：
+
+1. 问题已解决
+2. 没有引入新问题
+3. 相关功能仍然正常
+4. 用户体验没有受到影响
--- a/docs/mood-modal-optimization.md
+++ b/docs/mood-modal-optimization.md
@@ -0,0 +1,205 @@
+# 心情打卡弹窗优化功能说明
+
+## 优化内容
+
+### 1. 月份导航功能
+- ✅ 添加了左右箭头按钮，支持月份切换
+- ✅ 月份标题居中显示，格式为"2025年8月"
+- ✅ 左箭头为深色，右箭头为浅灰色（符合UI设计）
+- ✅ 点击箭头可以切换到上个月或下个月
+
+### 2. 日期选择优化
+- ✅ 支持选择任意月份的任意日期
+- ✅ 选中日期有高亮显示（绿色背景）
+- ✅ 今天日期有特殊标识（绿色边框）
+- ✅ 未来日期禁用选择（灰色显示）
+- ✅ 选择日期后自动加载对应的心情记录
+
+### 3. 交互逻辑优化
+- ✅ 月份切换时重置选中日期
+- ✅ 选择日期时自动加载该日期的心情数据
+- ✅ 如果该日期已有心情记录，自动填充并支持更新
+- ✅ 保存时必须同时选择日期和心情
+
+## 技术实现
+
+### 1. 状态管理
+```typescript
+const [currentMonth, setCurrentMonth] = useState(new Date());
+const [selectedDay, setSelectedDay] = useState<number | null>(null);
+```
+
+### 2. 月份切换函数
+```typescript
+const goToPreviousMonth = () => {
+  const newMonth = new Date(currentMonth);
+  newMonth.setMonth(newMonth.getMonth() - 1);
+  setCurrentMonth(newMonth);
+  setSelectedDay(null);
+};
+
+const goToNextMonth = () => {
+  const newMonth = new Date(currentMonth);
+  newMonth.setMonth(newMonth.getMonth() + 1);
+  setCurrentMonth(newMonth);
+  setSelectedDay(null);
+};
+```
+
+### 3. 日期选择函数
+```typescript
+const onSelectDate = (day: number) => {
+  setSelectedDay(day);
+  const selectedDateString = dayjs(currentMonth).date(day).format('YYYY-MM-DD');
+  loadDailyMoodCheckins(selectedDateString);
+};
+```
+
+### 4. UI组件结构
+```jsx
+{/* 月份导航 */}
+<View style={styles.monthNavigation}>
+  <TouchableOpacity 
+    style={styles.navButton} 
+    onPress={goToPreviousMonth}
+  >
+    <Text style={styles.navButtonText}>‹</Text>
+  </TouchableOpacity>
+  <Text style={styles.monthTitle}>{year}年{monthNames[month - 1]}</Text>
+  <TouchableOpacity 
+    style={styles.navButton} 
+    onPress={goToNextMonth}
+  >
+    <Text style={styles.navButtonText}>›</Text>
+  </TouchableOpacity>
+</View>
+```
+
+## 样式设计
+
+### 1. 月份导航样式
+```css
+monthNavigation: {
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: 20,
+},
+navButton: {
+  width: 40,
+  height: 40,
+  borderRadius: 20,
+  backgroundColor: '#f8f9fa',
+  justifyContent: 'center',
+  alignItems: 'center',
+},
+monthTitle: {
+  fontSize: 18,
+  fontWeight: '700',
+  color: '#192126',
+},
+```
+
+### 2. 日期按钮样式
+```css
+dayButton: {
+  width: 40,
+  height: 40,
+  borderRadius: 20,
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginBottom: 8,
+},
+dayButtonSelected: {
+  backgroundColor: '#4CAF50',
+},
+dayButtonToday: {
+  borderWidth: 2,
+  borderColor: '#4CAF50',
+},
+```
+
+## 用户体验改进
+
+### 1. 视觉反馈
+- 选中日期有明显的绿色背景
+- 今天日期有绿色边框标识
+- 未来日期显示为灰色且不可点击
+- 月份切换按钮有适当的视觉反馈
+
+### 2. 交互逻辑
+- 月份切换时自动重置选中状态
+- 选择日期时立即加载对应数据
+- 保存前验证日期和心情都已选择
+- 错误提示更加友好
+
+### 3. 数据同步
+- 选择日期后自动调用API加载数据
+- 如果已有记录，自动填充表单
+- 保存成功后更新界面显示
+- 支持更新已有记录
+
+## 测试要点
+
+### 1. 月份导航测试
+- [ ] 点击左箭头可以切换到上个月
+- [ ] 点击右箭头可以切换到下个月
+- [ ] 月份标题正确显示
+- [ ] 切换月份时重置选中日期
+
+### 2. 日期选择测试
+- [ ] 可以选择任意有效日期
+- [ ] 选中日期有高亮显示
+- [ ] 今天日期有特殊标识
+- [ ] 未来日期不可选择
+
+### 3. 数据加载测试
+- [ ] 选择日期后自动加载心情数据
+- [ ] 已有记录时自动填充表单
+- [ ] 无记录时显示空白表单
+- [ ] 加载失败时有错误提示
+
+### 4. 保存功能测试
+- [ ] 必须选择日期和心情才能保存
+- [ ] 保存成功后更新界面
+- [ ] 保存失败时显示错误信息
+- [ ] 支持更新已有记录
+
+## 兼容性说明
+
+### 1. 向后兼容
+- 保持了原有的API接口
+- 保持了原有的回调函数
+- 保持了原有的样式主题
+- 新增功能不影响现有功能
+
+### 2. 数据格式
+- 日期格式统一使用YYYY-MM-DD
+- 心情数据格式保持不变
+- API调用方式保持不变
+- 错误处理方式保持一致
+
+## 性能优化
+
+### 1. 状态管理
+- 使用useState管理本地状态
+- 避免不必要的重新渲染
+- 合理使用useEffect依赖
+
+### 2. 数据加载
+- 按需加载日期数据
+- 缓存已加载的数据
+- 避免重复API调用
+
+### 3. 界面渲染
+- 优化日历渲染逻辑
+- 减少不必要的样式计算
+- 使用适当的组件拆分
+
+## 后续优化建议
+
+1. **动画效果**: 添加月份切换的过渡动画
+2. **手势支持**: 支持左右滑动手势切换月份
+3. **快速导航**: 添加年份快速选择功能
+4. **批量操作**: 支持批量设置心情记录
+5. **数据统计**: 在日历上显示心情统计信息
--- a/docs/mood-redux-migration.md
+++ b/docs/mood-redux-migration.md
@@ -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. **性能测试**: 测试大量数据下的性能表现