diff --git a/src/elderly/components/MoodBoard.tsx b/src/elderly/components/MoodBoard.tsx new file mode 100644 index 0000000..b8a3c56 --- /dev/null +++ b/src/elderly/components/MoodBoard.tsx @@ -0,0 +1,146 @@ +import React, { useState } from 'react'; +import { Smile, Meh, Frown, Zap, Angry, Battery } from 'lucide-react'; +import * as moodService from '../services/moodService'; + +interface MoodBoardProps { + familyId?: string; + elderlyId?: number; + onMoodSelect?: (mood: moodService.MoodType) => void; + onClose?: () => void; +} + +/** + * 心情选择组件 - 六宫格设计 + * 用于情绪记录和触发回忆疗法 + */ +export const MoodBoard: React.FC = ({ + familyId = 'family_001', + elderlyId, + onMoodSelect, + onClose +}) => { + const [isSaving, setIsSaving] = useState(false); + + const moods: Array<{ + id: moodService.MoodType; + icon: typeof Smile; + label: string; + color: string; + emoji: string; + }> = [ + { + id: 'happy', + icon: Smile, + label: '开心', + color: 'bg-green-400 hover:bg-green-500', + emoji: '😊', + }, + { + id: 'calm', + icon: Meh, + label: '平静', + color: 'bg-blue-400 hover:bg-blue-500', + emoji: '😌', + }, + { + id: 'sad', + icon: Frown, + label: '有点难过', + color: 'bg-yellow-400 hover:bg-yellow-500', + emoji: '😔', + }, + { + id: 'anxious', + icon: Zap, + label: '焦虑', + color: 'bg-orange-400 hover:bg-orange-500', + emoji: '😰', + }, + { + id: 'angry', + icon: Angry, + label: '生气', + color: 'bg-red-400 hover:bg-red-500', + emoji: '😠', + }, + { + id: 'tired', + icon: Battery, + label: '疲惫', + color: 'bg-violet-400 hover:bg-violet-500', + emoji: '😫', + }, + ]; + + const handleMoodSelect = async (moodId: moodService.MoodType) => { + setIsSaving(true); + try { + // 保存情绪记录到数据库 + await moodService.createMoodRecord(familyId, moodId, { + elderlyId, + source: 'manual', + }); + console.log('情绪记录已保存:', moodId); + + // 调用回调 + onMoodSelect?.(moodId); + onClose?.(); + } catch (error) { + console.error('保存情绪记录失败:', error); + // 即使保存失败,也调用回调 + onMoodSelect?.(moodId); + onClose?.(); + } finally { + setIsSaving(false); + } + }; + + return ( +
+
+

+ 您现在感觉怎么样? +

+ + {/* 六宫格心情选择 */} +
+ {moods.map((mood) => ( + + ))} +
+ + {/* 关闭按钮 */} + {onClose && ( + + )} +
+
+ ); +};