15945162479/qinqinghuisheng
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add File

Browse Source
This commit is contained in:
15945162479
2025-12-13 14:46:19 +08:00
parent 4b1564e30f
commit 7bdbf18a3b
1 changed files with 333 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
src/family/pages/MedicationPlan.tsx Normal file
View File

@@ -0,0 +1,333 @@
import React, { useState } from 'react';
import { Plus, Edit2, Trash2, X, Clock, AlertCircle } from 'lucide-react';
interface Medication {
id: string;
name: string;
dosage: string;
route: string;
times: string[];
withFood: boolean;
gracePeriod: number;
active: boolean;
}
/**
* 家属端用药计划界面
* 管理老人的用药提醒
*/
export const MedicationPlan: React.FC = () => {
const [showForm, setShowForm] = useState(false);
const [editingMed, setEditingMed] = useState<Medication | null>(null);
// 模拟数据
const medications: Medication[] = [
{
id: '1',
name: '氯沙坦',
dosage: '50mg',
route: '口服',
times: ['08:00', '20:00'],
withFood: true,
gracePeriod: 30,
active: true,
},
{
id: '2',
name: '二甲双胍',
dosage: '500mg',
route: '口服',
times: ['08:00', '12:00', '18:00'],
withFood: true,
gracePeriod: 30,
active: true,
},
{
id: '3',
name: '阿司匹林',
dosage: '100mg',
route: '口服',
times: ['21:00'],
withFood: false,
gracePeriod: 60,
active: true,
},
];
const handleEdit = (med: Medication) => {
setEditingMed(med);
setShowForm(true);
};
const handleDelete = (medId: string) => {
if (confirm('确定要删除这个用药计划吗？')) {
console.log('Delete medication:', medId);
}
};
return (
<div className="min-h-screen bg-gray-50">
{/* 顶部导航 */}
<div className="bg-white border-b">
<div className="max-w-7xl mx-auto px-6 py-4">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold text-gray-900">用药计划</h1>
<button
onClick={() => {
setEditingMed(null);
setShowForm(true);
}}
className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors flex items-center gap-2"
>
<Plus size={18} />
添加药品
</button>
</div>
</div>
</div>
{/* 主要内容区 */}
<div className="max-w-7xl mx-auto px-6 py-8">
{/* 用药列表 */}
<div className="card p-0 overflow-hidden">
<table className="w-full">
<thead className="bg-gray-50 border-b">
<tr>
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">
药品名称
</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">
剂量/用法
</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">
服用时间
</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">
要求
</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">
状态
</th>
<th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">
操作
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{medications.map((med) => (
<tr key={med.id} className="hover:bg-gray-50">
<td className="px-6 py-4">
<div className="font-medium text-gray-900">{med.name}</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-700">
{med.dosage} · {med.route}
</div>
</td>
<td className="px-6 py-4">
<div className="flex flex-wrap gap-2">
{med.times.map((time, index) => (
<span
key={index}
className="px-2 py-1 bg-blue-50 text-blue-700 text-sm rounded flex items-center gap-1"
>
<Clock size={14} />
{time}
</span>
))}
</div>
</td>
<td className="px-6 py-4">
<div className="space-y-1">
{med.withFood && (
<div className="text-sm text-gray-600">随餐服用</div>
)}
<div className="text-sm text-gray-500">
宽限 {med.gracePeriod} 分钟
</div>
</div>
</td>
<td className="px-6 py-4">
<span
className={`px-3 py-1 rounded-full text-sm font-medium ${
med.active
? 'bg-green-100 text-green-700'
: 'bg-gray-100 text-gray-700'
}`}
>
{med.active ? '启用中' : '已暂停'}
</span>
</td>
<td className="px-6 py-4 text-right">
<div className="flex items-center justify-end gap-2">
<button
onClick={() => handleEdit(med)}
className="p-2 text-gray-600 hover:text-primary-600 hover:bg-gray-100 rounded-lg transition-colors"
aria-label="编辑"
>
<Edit2 size={18} />
</button>
<button
onClick={() => handleDelete(med.id)}
className="p-2 text-gray-600 hover:text-red-600 hover:bg-gray-100 rounded-lg transition-colors"
aria-label="删除"
>
<Trash2 size={18} />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
{/* 提示信息 */}
<div className="mt-6 bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
<div className="flex items-start">
<AlertCircle className="text-blue-600 mt-0.5 mr-3 flex-shrink-0" size={20} />
<div className="text-sm text-blue-800">
<p className="font-medium mb-1">用药安全提示</p>
<ul className="list-disc list-inside space-y-1 text-blue-700">
<li>请确保用药时间不冲突</li>
<li>超过宽限期未确认服药将自动发送通知给您</li>
<li>本系统不提供医疗建议，如需调整用药请咨询医生</li>
</ul>
</div>
</div>
</div>
</div>
{/* 编辑/添加表单抽屉 */}
{showForm && (
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-end animate-fade-in">
<div className="bg-white w-full max-w-2xl h-full overflow-y-auto">
<div className="sticky top-0 bg-white border-b p-6 flex items-center justify-between">
<h2 className="text-xl font-bold text-gray-900">
{editingMed ? '编辑用药' : '添加用药'}
</h2>
<button
onClick={() => setShowForm(false)}
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
>
<X size={24} />
</button>
</div>
<div className="p-6 space-y-6">
{/* 药品名称 */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
药品名称 <span className="text-red-500">*</span>
</label>
<input
type="text"
placeholder="例如：氯沙坦"
defaultValue={editingMed?.name}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
/>
</div>
{/* 剂量 */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
剂量 <span className="text-red-500">*</span>
</label>
<input
type="text"
placeholder="例如：50mg"
defaultValue={editingMed?.dosage}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
/>
</div>
{/* 给药途径 */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
给药途径
</label>
<select
defaultValue={editingMed?.route}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
>
<option>口服</option>
<option>外用</option>
<option>注射</option>
</select>
</div>
{/* 服用时间 */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
每日服用时间 <span className="text-red-500">*</span>
</label>
<div className="space-y-2">
{(editingMed?.times || ['08:00']).map((time, index) => (
<div key={index} className="flex items-center gap-2">
<input
type="time"
defaultValue={time}
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
/>
<button className="p-2 text-red-600 hover:bg-red-50 rounded-lg">
<X size={20} />
</button>
</div>
))}
<button className="text-sm text-primary-600 hover:text-primary-700 font-medium flex items-center gap-1">
<Plus size={16} />
添加时间点
</button>
</div>
</div>
{/* 随餐服用 */}
<div>
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
defaultChecked={editingMed?.withFood}
className="rounded"
/>
<span className="text-sm text-gray-700">需要随餐服用</span>
</label>
</div>
{/* 宽限期 */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
宽限期（分钟）
</label>
<select
defaultValue={editingMed?.gracePeriod}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
>
<option value="15">15 分钟</option>
<option value="30">30 分钟</option>
<option value="60">60 分钟</option>
<option value="120">120 分钟</option>
</select>
<p className="mt-1 text-xs text-gray-500">
超过宽限期未确认服药将发送通知
</p>
</div>
{/* 操作按钮 */}
<div className="flex gap-3 pt-6 border-t">
<button
onClick={() => setShowForm(false)}
className="flex-1 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
>
取消
</button>
<button className="flex-1 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium">
保存
</button>
</div>
</div>
</div>
</div>
)}
</div>
);
};