Add File
This commit is contained in:
241
src/family/main.tsx
Normal file
241
src/family/main.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { Dashboard } from './pages/Dashboard';
|
||||
import { MediaLibrary } from './pages/MediaLibrary';
|
||||
import { CarePlan } from './pages/CarePlan';
|
||||
import { AlertsAndCare } from './pages/AlertsAndCare';
|
||||
import { InteractionHistory } from './pages/InteractionHistory';
|
||||
import { FamilyMessages } from './pages/FamilyMessages';
|
||||
import { MoodHistory } from './pages/MoodHistory';
|
||||
import { ElderProfile } from './components/ElderProfile';
|
||||
import { EmergencyAlert } from './components/EmergencyAlert';
|
||||
import * as messageService from './services/messageService';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
MessageSquare,
|
||||
HeartPulse,
|
||||
Bell,
|
||||
MessageCircle,
|
||||
Image,
|
||||
Smile,
|
||||
} from 'lucide-react';
|
||||
import '../index.css';
|
||||
|
||||
type Page = 'dashboard' | 'messages' | 'care' | 'alerts' | 'interaction' | 'media' | 'mood';
|
||||
|
||||
/**
|
||||
* 家属端应用
|
||||
* 优化为手机浏览器使用 - 底部标签栏导航
|
||||
*/
|
||||
function FamilyApp() {
|
||||
const [currentPage, setCurrentPage] = useState<Page>('dashboard');
|
||||
const [showElderProfile, setShowElderProfile] = useState(false);
|
||||
const [unhandledCount, setUnhandledCount] = useState(0);
|
||||
const [emergencyAlert, setEmergencyAlert] = useState<{
|
||||
id: number;
|
||||
message: string;
|
||||
timestamp: string;
|
||||
} | null>(null);
|
||||
const [shownEmergencyIds, setShownEmergencyIds] = useState<Set<number>>(new Set());
|
||||
const familyId = 'family_001'; // 实际使用时从用户上下文获取
|
||||
|
||||
// 老人信息数据
|
||||
const [elderInfo, setElderInfo] = useState({
|
||||
name: '张奶奶',
|
||||
age: 82,
|
||||
cognitive_status: 'mild' as const,
|
||||
hearing_vision: {
|
||||
hearing: 'mild_loss' as const,
|
||||
vision: 'ok' as const,
|
||||
},
|
||||
preferences: {
|
||||
music: ['老歌', '评弹', '京剧'],
|
||||
avoid_topics: ['医院', '去世的老伴'],
|
||||
},
|
||||
});
|
||||
|
||||
// 加载未处理通知数量
|
||||
const loadUnhandledCount = async () => {
|
||||
try {
|
||||
const stats = await messageService.getAlertStats(familyId);
|
||||
setUnhandledCount(stats.status_stats?.unhandled || 0);
|
||||
} catch (error) {
|
||||
console.error('加载未处理通知数量失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 检查是否有新的SOS紧急通知
|
||||
const checkEmergencyAlerts = async () => {
|
||||
try {
|
||||
const { alerts } = await messageService.getFamilyAlerts(familyId, {
|
||||
alert_type: 'sos_emergency',
|
||||
handled: false,
|
||||
limit: 1,
|
||||
});
|
||||
|
||||
if (alerts.length > 0) {
|
||||
const latestAlert = alerts[0];
|
||||
// 只显示未展示过的紧急通知
|
||||
if (!shownEmergencyIds.has(latestAlert.id)) {
|
||||
setEmergencyAlert({
|
||||
id: latestAlert.id,
|
||||
message: latestAlert.message,
|
||||
timestamp: new Date(latestAlert.created_at).toLocaleString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}),
|
||||
});
|
||||
// 记录已显示的通知ID
|
||||
setShownEmergencyIds(prev => new Set(prev).add(latestAlert.id));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查紧急通知失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 定时检查未处理通知和紧急通知
|
||||
useEffect(() => {
|
||||
loadUnhandledCount();
|
||||
checkEmergencyAlerts();
|
||||
// 每5秒检查一次
|
||||
const interval = setInterval(() => {
|
||||
loadUnhandledCount();
|
||||
checkEmergencyAlerts();
|
||||
}, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// 保存老人信息
|
||||
const handleSaveElderInfo = (updatedInfo: any) => {
|
||||
setElderInfo(updatedInfo);
|
||||
// TODO: 这里可以添加API调用，将数据保存到后端
|
||||
console.log('保存老人信息:', updatedInfo);
|
||||
};
|
||||
|
||||
const navigation = [
|
||||
{ id: 'dashboard' as const, label: '概览', shortLabel: '概览', icon: LayoutDashboard },
|
||||
{ id: 'messages' as const, label: '家属留言', shortLabel: '留言', icon: MessageSquare },
|
||||
{ id: 'media' as const, label: '媒体库', shortLabel: '媒体', icon: Image },
|
||||
{ id: 'care' as const, label: '护理计划', shortLabel: '护理', icon: HeartPulse },
|
||||
{ id: 'alerts' as const, label: '通知', shortLabel: '通知', icon: Bell },
|
||||
{ id: 'interaction' as const, label: '交互记录', shortLabel: '交互', icon: MessageCircle },
|
||||
];
|
||||
|
||||
const renderPage = () => {
|
||||
switch (currentPage) {
|
||||
case 'dashboard':
|
||||
return <Dashboard onNavigate={setCurrentPage} />;
|
||||
case 'messages':
|
||||
return <FamilyMessages />;
|
||||
case 'media':
|
||||
return <MediaLibrary />;
|
||||
case 'mood':
|
||||
return <MoodHistory />;
|
||||
case 'care':
|
||||
return <CarePlan />;
|
||||
case 'alerts':
|
||||
return <AlertsAndCare />;
|
||||
case 'interaction':
|
||||
return <InteractionHistory />;
|
||||
default:
|
||||
return <Dashboard onNavigate={setCurrentPage} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-gray-50">
|
||||
{/* 顶部标题栏 - 手机优化 */}
|
||||
<div className="bg-white border-b px-4 py-3 flex items-center justify-between flex-shrink-0 safe-area-top">
|
||||
<div>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<h1 className="text-lg font-bold text-primary-600">KinEcho</h1>
|
||||
<span className="text-xs text-gray-500 font-medium">亲情回声</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 italic mt-0.5">
|
||||
Bring family moments to life. / 把家人的声音带到眼前。
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowElderProfile(true)}
|
||||
className="px-3 py-1.5 bg-primary-50 hover:bg-primary-100 rounded-full transition-colors flex items-center gap-2"
|
||||
>
|
||||
<span className="text-primary-700 text-sm font-bold">
|
||||
{elderInfo.name}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 主要内容区 - 可滚动 */}
|
||||
<div className="flex-1 overflow-y-auto pb-safe">{renderPage()}</div>
|
||||
|
||||
{/* 底部标签栏导航 - 手机原生风格 */}
|
||||
<nav className="bg-white border-t flex items-center justify-around flex-shrink-0 safe-area-bottom">
|
||||
{navigation.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = currentPage === item.id;
|
||||
const showBadge = item.id === 'alerts' && unhandledCount > 0;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setCurrentPage(item.id)}
|
||||
className={`
|
||||
flex-1 flex flex-col items-center justify-center py-2 px-1 transition-colors
|
||||
${isActive ? 'text-primary-600' : 'text-gray-500'}
|
||||
`}
|
||||
>
|
||||
<div className="relative">
|
||||
<Icon
|
||||
size={24}
|
||||
strokeWidth={isActive ? 2.5 : 2}
|
||||
className="mb-1"
|
||||
/>
|
||||
{showBadge && (
|
||||
<span className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-red-500 rounded-full animate-pulse" />
|
||||
)}
|
||||
</div>
|
||||
<span className={`text-xs ${isActive ? 'font-semibold' : 'font-normal'}`}>
|
||||
{item.shortLabel}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* 老人信息弹窗 */}
|
||||
{showElderProfile && (
|
||||
<ElderProfile
|
||||
elderInfo={elderInfo}
|
||||
onClose={() => setShowElderProfile(false)}
|
||||
onSave={handleSaveElderInfo}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 紧急通知弹窗 */}
|
||||
{emergencyAlert && (
|
||||
<EmergencyAlert
|
||||
message={emergencyAlert.message}
|
||||
timestamp={emergencyAlert.timestamp}
|
||||
onHandle={async () => {
|
||||
// 标记为已处理
|
||||
await messageService.handleAlert(emergencyAlert.id);
|
||||
// 关闭弹窗
|
||||
setEmergencyAlert(null);
|
||||
// 跳转到通知页面
|
||||
setCurrentPage('alerts');
|
||||
// 刷新未处理数量
|
||||
loadUnhandledCount();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<FamilyApp />
|
||||
</React.StrictMode>
|
||||
);
|
||||
Reference in New Issue
Block a user