Add File
This commit is contained in:
470
src/family/components/ElderProfile.tsx
Normal file
470
src/family/components/ElderProfile.tsx
Normal file
@@ -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<ElderProfileProps> = ({
|
||||||
|
elderInfo,
|
||||||
|
onClose,
|
||||||
|
onSave,
|
||||||
|
}) => {
|
||||||
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
|
const [editedInfo, setEditedInfo] = useState<ElderInfo>(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 (
|
||||||
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||||
|
<div className="bg-white rounded-3xl shadow-2xl max-w-md w-full max-h-[85vh] overflow-hidden flex flex-col">
|
||||||
|
{/* 头部 */}
|
||||||
|
<div className="bg-gradient-to-br from-primary-500 to-primary-600 p-6 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||||
|
<div className="w-16 h-16 bg-white rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<User size={32} className="text-primary-600" />
|
||||||
|
</div>
|
||||||
|
<div className="text-white flex-1 min-w-0">
|
||||||
|
{isEditing ? (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={editedInfo.name}
|
||||||
|
onChange={(e) =>
|
||||||
|
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="姓名"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<h2 className="text-2xl font-bold">{currentInfo.name}</h2>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center gap-1 mt-1">
|
||||||
|
<Calendar size={16} className="flex-shrink-0" />
|
||||||
|
{isEditing ? (
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={editedInfo.age}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditedInfo({ ...editedInfo, age: parseInt(e.target.value) || 0 })
|
||||||
|
}
|
||||||
|
className="bg-white/20 rounded px-2 py-0.5 w-16 text-primary-100"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<span className="text-primary-100">{currentInfo.age} 岁</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-white hover:bg-white/20 rounded-full p-2 transition-colors flex-shrink-0"
|
||||||
|
>
|
||||||
|
<X size={24} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 内容区 - 可滚动 */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||||
|
{/* 认知状态 */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Brain size={20} className="text-primary-600" />
|
||||||
|
<h3 className="text-base font-bold text-gray-900">认知状态</h3>
|
||||||
|
</div>
|
||||||
|
{isEditing ? (
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{(['normal', 'mild', 'moderate', 'severe'] as const).map((status) => (
|
||||||
|
<button
|
||||||
|
key={status}
|
||||||
|
onClick={() =>
|
||||||
|
setEditedInfo({ ...editedInfo, cognitive_status: status })
|
||||||
|
}
|
||||||
|
className={`px-4 py-2 rounded-full text-sm font-medium border-2 transition-colors ${
|
||||||
|
editedInfo.cognitive_status === status
|
||||||
|
? getCognitiveStatusColor(status)
|
||||||
|
: 'bg-gray-50 text-gray-600 border-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{getCognitiveStatusLabel(status)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={`inline-flex items-center gap-2 px-4 py-2 rounded-full ${getCognitiveStatusColor(
|
||||||
|
currentInfo.cognitive_status
|
||||||
|
)}`}
|
||||||
|
>
|
||||||
|
<span className="font-medium">
|
||||||
|
{getCognitiveStatusLabel(currentInfo.cognitive_status)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 听力与视力 */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Heart size={20} className="text-primary-600" />
|
||||||
|
<h3 className="text-base font-bold text-gray-900">健康状况</h3>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{/* 听力 */}
|
||||||
|
<div className="p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<Ear size={18} className="text-gray-600" />
|
||||||
|
<span className="text-sm font-medium text-gray-700">听力</span>
|
||||||
|
</div>
|
||||||
|
{isEditing ? (
|
||||||
|
<select
|
||||||
|
value={editedInfo.hearing_vision.hearing}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditedInfo({
|
||||||
|
...editedInfo,
|
||||||
|
hearing_vision: {
|
||||||
|
...editedInfo.hearing_vision,
|
||||||
|
hearing: e.target.value as any,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
>
|
||||||
|
<option value="ok">正常</option>
|
||||||
|
<option value="mild_loss">轻度下降</option>
|
||||||
|
<option value="moderate_loss">中度下降</option>
|
||||||
|
<option value="severe_loss">重度下降</option>
|
||||||
|
</select>
|
||||||
|
) : (
|
||||||
|
<span
|
||||||
|
className={`text-sm font-medium ${getHealthStatusColor(
|
||||||
|
currentInfo.hearing_vision.hearing
|
||||||
|
)}`}
|
||||||
|
>
|
||||||
|
{getHealthStatusLabel(currentInfo.hearing_vision.hearing)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 视力 */}
|
||||||
|
<div className="p-3 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<Eye size={18} className="text-gray-600" />
|
||||||
|
<span className="text-sm font-medium text-gray-700">视力</span>
|
||||||
|
</div>
|
||||||
|
{isEditing ? (
|
||||||
|
<select
|
||||||
|
value={editedInfo.hearing_vision.vision}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditedInfo({
|
||||||
|
...editedInfo,
|
||||||
|
hearing_vision: {
|
||||||
|
...editedInfo.hearing_vision,
|
||||||
|
vision: e.target.value as any,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
>
|
||||||
|
<option value="ok">正常</option>
|
||||||
|
<option value="mild_loss">轻度下降</option>
|
||||||
|
<option value="moderate_loss">中度下降</option>
|
||||||
|
<option value="severe_loss">重度下降</option>
|
||||||
|
</select>
|
||||||
|
) : (
|
||||||
|
<span
|
||||||
|
className={`text-sm font-medium ${getHealthStatusColor(
|
||||||
|
currentInfo.hearing_vision.vision
|
||||||
|
)}`}
|
||||||
|
>
|
||||||
|
{getHealthStatusLabel(currentInfo.hearing_vision.vision)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 兴趣偏好 */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Music size={20} className="text-primary-600" />
|
||||||
|
<h3 className="text-base font-bold text-gray-900">兴趣偏好</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2 mb-3">
|
||||||
|
{currentInfo.preferences.music.map((item, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-full text-sm font-medium flex items-center gap-1"
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
{isEditing && (
|
||||||
|
<button
|
||||||
|
onClick={() => removeInterest(index)}
|
||||||
|
className="ml-1 hover:bg-blue-100 rounded-full p-0.5"
|
||||||
|
>
|
||||||
|
<X size={14} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{isEditing && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newInterest}
|
||||||
|
onChange={(e) => 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"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={addInterest}
|
||||||
|
className="px-3 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
|
||||||
|
>
|
||||||
|
<Plus size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 避免话题 */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<AlertCircle size={20} className="text-primary-600" />
|
||||||
|
<h3 className="text-base font-bold text-gray-900">避免话题</h3>
|
||||||
|
</div>
|
||||||
|
{currentInfo.preferences.avoid_topics.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-2 mb-3">
|
||||||
|
{currentInfo.preferences.avoid_topics.map((item, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="px-3 py-1.5 bg-red-50 text-red-700 rounded-full text-sm font-medium flex items-center gap-1"
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
{isEditing && (
|
||||||
|
<button
|
||||||
|
onClick={() => removeAvoidTopic(index)}
|
||||||
|
className="ml-1 hover:bg-red-100 rounded-full p-0.5"
|
||||||
|
>
|
||||||
|
<X size={14} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isEditing && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newAvoidTopic}
|
||||||
|
onChange={(e) => 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"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={addAvoidTopic}
|
||||||
|
className="px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
|
||||||
|
>
|
||||||
|
<Plus size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 底部按钮 */}
|
||||||
|
<div className="p-4 border-t">
|
||||||
|
{isEditing ? (
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
onClick={handleCancel}
|
||||||
|
className="flex-1 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-xl transition-colors"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
className="flex-1 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-xl transition-colors flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<Save size={20} />
|
||||||
|
保存
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsEditing(true)}
|
||||||
|
className="flex-1 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-xl transition-colors flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<Edit3 size={20} />
|
||||||
|
编辑
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="flex-1 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-xl transition-colors"
|
||||||
|
>
|
||||||
|
关闭
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user