From 49b01408c314288ce2de9d94b9c6b26fe49876fb Mon Sep 17 00:00:00 2001 From: 15945162479 <15945162479@qq.com> Date: Sat, 13 Dec 2025 14:46:18 +0800 Subject: [PATCH] Add File --- src/family/components/ElderProfile.tsx | 470 +++++++++++++++++++++++++ 1 file changed, 470 insertions(+) create mode 100644 src/family/components/ElderProfile.tsx diff --git a/src/family/components/ElderProfile.tsx b/src/family/components/ElderProfile.tsx new file mode 100644 index 0000000..0b496f4 --- /dev/null +++ b/src/family/components/ElderProfile.tsx @@ -0,0 +1,470 @@ +import React, { useState } from 'react'; +import { + X, + User, + Calendar, + Brain, + Eye, + Ear, + Music, + AlertCircle, + Heart, + Edit3, + Save, + Plus, + Trash2, +} from 'lucide-react'; + +/** + * 老人个人信息弹窗（带编辑功能） + */ + +interface ElderInfo { + name: string; + age: number; + cognitive_status: 'normal' | 'mild' | 'moderate' | 'severe'; + hearing_vision: { + hearing: 'ok' | 'mild_loss' | 'moderate_loss' | 'severe_loss'; + vision: 'ok' | 'mild_loss' | 'moderate_loss' | 'severe_loss'; + }; + preferences: { + music: string[]; + avoid_topics: string[]; + }; +} + +interface ElderProfileProps { + elderInfo: ElderInfo; + onClose: () => void; + onSave?: (updatedInfo: ElderInfo) => void; +} + +export const ElderProfile: React.FC = ({ + elderInfo, + onClose, + onSave, +}) => { + const [isEditing, setIsEditing] = useState(false); + const [editedInfo, setEditedInfo] = useState(elderInfo); + const [newInterest, setNewInterest] = useState(''); + const [newAvoidTopic, setNewAvoidTopic] = useState(''); + + const getCognitiveStatusLabel = (status: string) => { + switch (status) { + case 'normal': + return '正常'; + case 'mild': + return '轻度认知障碍'; + case 'moderate': + return '中度认知障碍'; + case 'severe': + return '重度认知障碍'; + default: + return status; + } + }; + + const getCognitiveStatusColor = (status: string) => { + switch (status) { + case 'normal': + return 'text-green-600 bg-green-50 border-green-200'; + case 'mild': + return 'text-yellow-600 bg-yellow-50 border-yellow-200'; + case 'moderate': + return 'text-orange-600 bg-orange-50 border-orange-200'; + case 'severe': + return 'text-red-600 bg-red-50 border-red-200'; + default: + return 'text-gray-600 bg-gray-50 border-gray-200'; + } + }; + + const getHealthStatusLabel = (status: string) => { + switch (status) { + case 'ok': + return '正常'; + case 'mild_loss': + return '轻度下降'; + case 'moderate_loss': + return '中度下降'; + case 'severe_loss': + return '重度下降'; + default: + return status; + } + }; + + const getHealthStatusColor = (status: string) => { + switch (status) { + case 'ok': + return 'text-green-600'; + case 'mild_loss': + return 'text-yellow-600'; + case 'moderate_loss': + return 'text-orange-600'; + case 'severe_loss': + return 'text-red-600'; + default: + return 'text-gray-600'; + } + }; + + const handleSave = () => { + if (onSave) { + onSave(editedInfo); + } + setIsEditing(false); + }; + + const handleCancel = () => { + setEditedInfo(elderInfo); + setIsEditing(false); + }; + + const addInterest = () => { + if (newInterest.trim()) { + setEditedInfo({ + ...editedInfo, + preferences: { + ...editedInfo.preferences, + music: [...editedInfo.preferences.music, newInterest.trim()], + }, + }); + setNewInterest(''); + } + }; + + const removeInterest = (index: number) => { + setEditedInfo({ + ...editedInfo, + preferences: { + ...editedInfo.preferences, + music: editedInfo.preferences.music.filter((_, i) => i !== index), + }, + }); + }; + + const addAvoidTopic = () => { + if (newAvoidTopic.trim()) { + setEditedInfo({ + ...editedInfo, + preferences: { + ...editedInfo.preferences, + avoid_topics: [...editedInfo.preferences.avoid_topics, newAvoidTopic.trim()], + }, + }); + setNewAvoidTopic(''); + } + }; + + const removeAvoidTopic = (index: number) => { + setEditedInfo({ + ...editedInfo, + preferences: { + ...editedInfo.preferences, + avoid_topics: editedInfo.preferences.avoid_topics.filter((_, i) => i !== index), + }, + }); + }; + + const currentInfo = isEditing ? editedInfo : elderInfo; + + return ( +
+
+ {/* 头部 */} +
+
+
+ +
+
+ {isEditing ? ( + + setEditedInfo({ ...editedInfo, name: e.target.value }) + } + className="text-2xl font-bold bg-white/20 rounded-lg px-3 py-1 w-full text-white placeholder-white/70" + placeholder="姓名" + /> + ) : ( +

{currentInfo.name}

+ )} +
+ + {isEditing ? ( + + setEditedInfo({ ...editedInfo, age: parseInt(e.target.value) || 0 }) + } + className="bg-white/20 rounded px-2 py-0.5 w-16 text-primary-100" + /> + ) : ( + {currentInfo.age} 岁 + )} +
+
+
+ +
+ + {/* 内容区 - 可滚动 */} +
+ {/* 认知状态 */} +
+
+ +

认知状态

+
+ {isEditing ? ( +
+ {(['normal', 'mild', 'moderate', 'severe'] as const).map((status) => ( + + ))} +
+ ) : ( +
+ + {getCognitiveStatusLabel(currentInfo.cognitive_status)} + +
+ )} +
+ + {/* 听力与视力 */} +
+
+ +

健康状况

+
+
+ {/* 听力 */} +
+
+ + 听力 +
+ {isEditing ? ( + + ) : ( + + {getHealthStatusLabel(currentInfo.hearing_vision.hearing)} + + )} +
+ + {/* 视力 */} +
+
+ + 视力 +
+ {isEditing ? ( + + ) : ( + + {getHealthStatusLabel(currentInfo.hearing_vision.vision)} + + )} +
+
+
+ + {/* 兴趣偏好 */} +
+
+ +

兴趣偏好

+
+
+ {currentInfo.preferences.music.map((item, index) => ( + + {item} + {isEditing && ( + + )} + + ))} +
+ {isEditing && ( +
+ setNewInterest(e.target.value)} + onKeyPress={(e) => e.key === 'Enter' && addInterest()} + placeholder="添加兴趣（如：唱歌、下棋）" + className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm" + /> + +
+ )} +
+ + {/* 避免话题 */} +
+
+ +

避免话题

+
+ {currentInfo.preferences.avoid_topics.length > 0 && ( +
+ {currentInfo.preferences.avoid_topics.map((item, index) => ( + + {item} + {isEditing && ( + + )} + + ))} +
+ )} + {isEditing && ( +
+ setNewAvoidTopic(e.target.value)} + onKeyPress={(e) => e.key === 'Enter' && addAvoidTopic()} + placeholder="添加避免话题" + className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm" + /> + +
+ )} +
+
+ + {/* 底部按钮 */} +
+ {isEditing ? ( +
+ + +
+ ) : ( +
+ + +
+ )} +
+
+
+ ); +};