Files

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

- 调整启动画面中的图片宽度，提升视觉效果
- 移除引导页面相关组件，简化应用结构
- 新增心情统计页面，支持用户查看和分析心情数据
- 优化心情卡片组件，增强用户交互体验
- 更新登录页面标题，提升品牌一致性
- 新增心情日历和编辑功能，支持用户记录和管理心情

2025-08-21 17:59:22 +08:00

5.6 KiB

Raw Blame History

心情打卡功能实现文档

功能概述

心情打卡功能允许用户记录每日的情绪状态，包括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接口

创建心情打卡

POST /api/mood-checkins
{
  "moodType": "happy",
  "intensity": 8,
  "description": "今天工作顺利，心情很好",
  "checkinDate": "2025-01-21"
}

获取每日心情

GET /api/mood-checkins/daily?date=2025-01-21

获取心情历史

GET /api/mood-checkins/history?startDate=2025-01-01&endDate=2025-01-31

获取心情统计

GET /api/mood-checkins/statistics?startDate=2025-01-01&endDate=2025-01-31

使用方式

1. 在统计页面使用

心情卡片已集成到主统计页面中，用户可以选择日期查看对应的心情记录：

// 加载指定日期的心情数据
const loadMoodData = async (targetDate?: Date) => {
  const dateString = dayjs(targetDate).format('YYYY-MM-DD');
  const checkins = await getDailyMoodCheckins(dateString);
  setCurrentMoodCheckin(checkins[0] || null);
};

2. 打开心情弹窗

点击心情卡片可以打开心情打卡弹窗：

<MoodModal
  visible={moodModalVisible}
  onClose={() => setMoodModalVisible(false)}
  onSave={handleMoodSave}
  selectedDate={days[selectedIndex]?.date?.format('YYYY-MM-DD')}
/>

3. 查看心情统计

访问心情统计页面查看详细分析：

// 加载最近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调用

扩展功能建议

心情趋势图表: 添加折线图显示心情变化趋势
心情提醒: 定时提醒用户进行心情打卡
心情分享: 允许用户分享心情状态到社交平台
AI心情建议: 基于心情状态提供改善建议
数据导出: 支持心情数据导出为CSV或PDF
心情标签: 支持自定义心情标签和分类
心情日记: 结合文字日记功能
心情目标: 设置心情改善目标并跟踪进度

注意事项

数据隐私: 心情数据属于敏感信息，需要严格的隐私保护
用户体验: 心情打卡应该是轻松愉快的体验，避免过于复杂的操作
数据准确性: 确保心情数据的准确性和一致性
性能考虑: 大量历史数据的加载和展示需要考虑性能优化
兼容性: 确保在不同设备和系统版本上的兼容性

5.6 KiB Raw Blame History Unescape Escape