999 lines
38 KiB
TypeScript
999 lines
38 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { Mic, Users, Image } from 'lucide-react';
|
||
import { AvatarStage } from '../components/AvatarStage';
|
||
import { MedicationCard } from '../components/MedicationCard';
|
||
import { MoodBoard } from '../components/MoodBoard';
|
||
import { MemoryPlayer } from '../components/MemoryPlayer';
|
||
import { MediaPlayer } from '../components/MediaPlayer';
|
||
import { EmergencySheet } from '../components/EmergencySheet';
|
||
import { ScheduleList } from '../components/ScheduleList';
|
||
import { ScheduleReminderToast } from '../components/ScheduleReminderToast';
|
||
import { ToastMessage } from '../components/ToastMessage';
|
||
import { ConfirmDialog } from '../components/ConfirmDialog';
|
||
import { TransparentMediaOverlay } from '../components/TransparentMediaOverlay';
|
||
import { LogNotification } from '../components/LogNotification';
|
||
import * as scheduleService from '../services/scheduleService';
|
||
import * as mediaService from '../services/mediaService';
|
||
import * as messageService from '../services/messageService';
|
||
import * as alertService from '../services/alertService';
|
||
import * as moodService from '../../family/services/moodService';
|
||
import { useToastSSE } from '../hooks/useToastSSE';
|
||
|
||
/**
|
||
* 老人端主页
|
||
* 优化为 9:16 竖屏使用（如平板竖屏）
|
||
* 包含数字人、大按钮和各类卡片叠加层
|
||
*/
|
||
export const HomePage: React.FC = () => {
|
||
const [activeOverlay, setActiveOverlay] = useState<
|
||
'none' | 'medication' | 'mood' | 'memory' | 'emergency' | 'schedule' | 'media'
|
||
>('none');
|
||
const [isAvatarActive, setIsAvatarActive] = useState(false);
|
||
const [memoryMode, setMemoryMode] = useState<'pip' | 'fullscreen'>('fullscreen');
|
||
const [toastMessage, setToastMessage] = useState<{ type: 'success' | 'info' | 'calling'; message: string } | null>(null);
|
||
const [confirmDialog, setConfirmDialog] = useState<{ message: string; onConfirm: () => void } | null>(null);
|
||
const [currentMediaIndex, setCurrentMediaIndex] = useState(0);
|
||
const [sdkStatus, setSDKStatus] = useState<'loading' | 'ready' | 'error' | 'config-missing'>('loading');
|
||
const [wsStatus, setWSStatus] = useState<'disconnected' | 'connecting' | 'connected'>('disconnected');
|
||
const [todaySchedules, setTodaySchedules] = useState<scheduleService.Schedule[]>([]);
|
||
const [reminderSchedule, setReminderSchedule] = useState<scheduleService.Schedule | null>(null);
|
||
const [shownReminders, setShownReminders] = useState<Set<number>>(new Set());
|
||
const [postponedReminders, setPostponedReminders] = useState<Map<number, Date>>(new Map()); // 记录推迟的日程和推迟到的时间
|
||
const [recommendedMedia, setRecommendedMedia] = useState<mediaService.RecommendedMedia[]>([]);
|
||
const [loadingMedia, setLoadingMedia] = useState(false);
|
||
const [playedMessages, setPlayedMessages] = useState<Set<number>>(new Set()); // 记录已播报的留言ID
|
||
const [mediaOverlay, setMediaOverlay] = useState<{
|
||
filename: string;
|
||
type: 'photo' | 'video';
|
||
text?: string;
|
||
duration?: number;
|
||
} | null>(null); // 透明窗口媒体展示状态
|
||
const [isMicrophoneEnabled, setIsMicrophoneEnabled] = useState<boolean>(true); // 麦克风状态
|
||
const [currentMood, setCurrentMood] = useState<moodService.MoodType | null>(null); // 当前情绪
|
||
const [logMessage, setLogMessage] = useState<string | null>(null); // WebSocket log消息
|
||
const familyId = 'family_001'; // 实际使用时从用户上下文获取
|
||
const elderlyId = 1; // 老人用户ID，实际使用时从用户上下文获取
|
||
|
||
// 轮询检查联系家人的alerts（与家属端相同的方案）
|
||
useEffect(() => {
|
||
let lastAlertId = 0; // 记录上次处理的alert ID
|
||
let isInitialized = false; // 标记是否已初始化
|
||
|
||
const checkContactFamilyAlerts = async () => {
|
||
try {
|
||
const response = await fetch(
|
||
`http://localhost:8000/api/family/alerts?family_id=${familyId}&handled=false&alert_type=contact_family&limit=1`
|
||
);
|
||
|
||
if (!response.ok) {
|
||
console.error('[HomePage] 查询alerts失败:', response.status);
|
||
return;
|
||
}
|
||
|
||
const data = await response.json();
|
||
const alerts = data.alerts || [];
|
||
|
||
if (alerts.length > 0) {
|
||
const alert = alerts[0];
|
||
|
||
// 首次初始化：只记录ID，不显示Toast（避免刷新页面时重复显示旧alert）
|
||
if (!isInitialized) {
|
||
lastAlertId = alert.id;
|
||
isInitialized = true;
|
||
console.log('[HomePage] 初始化lastAlertId:', lastAlertId);
|
||
return;
|
||
}
|
||
|
||
// 只处理新的alert（避免重复显示）
|
||
if (alert.id > lastAlertId) {
|
||
lastAlertId = alert.id;
|
||
|
||
console.log('[HomePage] ✓ 收到联系家人alert:', alert);
|
||
|
||
// 显示Toast
|
||
const message = alert.metadata?.is_emergency
|
||
? "正在紧急通知家人..."
|
||
: "正在通知家人...";
|
||
|
||
setToastMessage({
|
||
type: 'calling',
|
||
message: message
|
||
});
|
||
console.log('[HomePage] ✓ Toast已显示:', message);
|
||
|
||
// 10秒后自动关闭
|
||
setTimeout(() => {
|
||
console.log('[HomePage] 关闭Toast');
|
||
setToastMessage(null);
|
||
}, 10000);
|
||
}
|
||
} else {
|
||
// 没有未处理的alert时，标记为已初始化
|
||
if (!isInitialized) {
|
||
isInitialized = true;
|
||
console.log('[HomePage] 初始化完成，当前无未处理alert');
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('[HomePage] 检查alerts失败:', error);
|
||
}
|
||
};
|
||
|
||
// 立即执行一次
|
||
checkContactFamilyAlerts();
|
||
|
||
// 每2秒检查一次新alerts
|
||
const interval = setInterval(checkContactFamilyAlerts, 2000);
|
||
|
||
return () => clearInterval(interval);
|
||
}, [familyId]);
|
||
|
||
// 加载今日日程
|
||
useEffect(() => {
|
||
loadTodaySchedules();
|
||
// 每分钟刷新一次
|
||
const interval = setInterval(loadTodaySchedules, 60000);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
// 监听日程状态变化，自动关闭已完成/已忽略的弹窗
|
||
useEffect(() => {
|
||
if (reminderSchedule && reminderSchedule.id) {
|
||
// 在最新的日程列表中查找当前弹窗对应的日程
|
||
const updatedSchedule = todaySchedules.find(s => s.id === reminderSchedule.id);
|
||
// 如果日程状态不是pending，关闭弹窗
|
||
if (updatedSchedule && updatedSchedule.status !== 'pending') {
|
||
console.log(`日程 ${reminderSchedule.title} 状态已变更为 ${updatedSchedule.status}，关闭弹窗`);
|
||
setReminderSchedule(null);
|
||
}
|
||
}
|
||
}, [todaySchedules, reminderSchedule]);
|
||
|
||
|
||
// 加载当前情绪
|
||
const loadCurrentMood = async () => {
|
||
try {
|
||
const response = await moodService.getFamilyMoods(familyId, { limit: 1 });
|
||
if (response.records && response.records.length > 0) {
|
||
setCurrentMood(response.records[0].mood_type);
|
||
}
|
||
} catch (error) {
|
||
console.error('加载当前情绪失败:', error);
|
||
}
|
||
};
|
||
|
||
// 初始化加载当前情绪
|
||
useEffect(() => {
|
||
loadCurrentMood();
|
||
}, []);
|
||
|
||
// 加载推荐媒体
|
||
const loadRecommendedMedia = async () => {
|
||
try {
|
||
setLoadingMedia(true);
|
||
const media = await mediaService.getRecommendedMedia(familyId, elderlyId);
|
||
setRecommendedMedia(media);
|
||
console.log('加载到推荐媒体:', media.length, '个');
|
||
} catch (error) {
|
||
console.error('加载推荐媒体失败:', error);
|
||
} finally {
|
||
setLoadingMedia(false);
|
||
}
|
||
};
|
||
|
||
|
||
// 检测日程到达时间
|
||
useEffect(() => {
|
||
const checkScheduleTime = () => {
|
||
const now = new Date();
|
||
|
||
// 遍历今日日程，查找需要提醒的
|
||
todaySchedules.forEach((schedule) => {
|
||
if (!schedule.id) return;
|
||
|
||
// 只处理待执行状态的日程
|
||
if (schedule.status !== 'pending') return;
|
||
|
||
// 已经提醒过的跳过
|
||
if (shownReminders.has(schedule.id)) return;
|
||
|
||
// 检查是否被推迟，如果被推迟且未到推迟时间，则跳过
|
||
const postponedTime = postponedReminders.get(schedule.id);
|
||
if (postponedTime && now < postponedTime) {
|
||
console.log(`日程 ${schedule.title} 已推迟到 ${postponedTime.toLocaleTimeString()}，暂不提醒`);
|
||
return;
|
||
}
|
||
|
||
// 如果已过推迟时间，清除推迟记录
|
||
if (postponedTime && now >= postponedTime) {
|
||
console.log(`日程 ${schedule.title} 推迟时间已到，现在提醒`);
|
||
setPostponedReminders(prev => {
|
||
const newMap = new Map(prev);
|
||
newMap.delete(schedule.id!);
|
||
return newMap;
|
||
});
|
||
}
|
||
|
||
const scheduleTime = new Date(schedule.schedule_time);
|
||
const diffMinutes = (scheduleTime.getTime() - now.getTime()) / (1000 * 60);
|
||
|
||
// 到达时间（允许 1 分钟误差）
|
||
if (diffMinutes <= 1 && diffMinutes >= -1) {
|
||
console.log('日程到达时间，显示提醒:', schedule.title);
|
||
|
||
// 构建提醒内容
|
||
const timeStr = scheduleService.formatTime(schedule.schedule_time);
|
||
const typeLabel = scheduleService.getScheduleTypeLabel(schedule.schedule_type || 'other');
|
||
let reminderText = `${timeStr}，${typeLabel}提醒：${schedule.title}`;
|
||
|
||
// 如果有描述，添加描述
|
||
if (schedule.description) {
|
||
reminderText += `。${schedule.description}`;
|
||
}
|
||
|
||
// 添加操作询问
|
||
reminderText += `。请问您要标记完成、推迟执行，还是忽略行程？`;
|
||
|
||
// 推送播报内容到数字人
|
||
sendToAvatar(reminderText);
|
||
|
||
// 显示弹窗提醒
|
||
setReminderSchedule(schedule);
|
||
setShownReminders(prev => new Set(prev).add(schedule.id!));
|
||
}
|
||
});
|
||
};
|
||
|
||
// 每 10 秒检查一次
|
||
const interval = setInterval(checkScheduleTime, 10000);
|
||
checkScheduleTime(); // 立即执行一次
|
||
|
||
return () => clearInterval(interval);
|
||
}, [todaySchedules, shownReminders, postponedReminders]);
|
||
|
||
const loadTodaySchedules = async () => {
|
||
try {
|
||
const now = new Date().toLocaleTimeString('zh-CN');
|
||
console.log(`[${now}] 自动检查日程更新...`);
|
||
const data = await scheduleService.getTodaySchedules(familyId);
|
||
setTodaySchedules(data);
|
||
console.log(`[${now}] 加载到 ${data.length} 条日程`);
|
||
} catch (error) {
|
||
console.error('加载今日日程失败:', error);
|
||
}
|
||
};
|
||
|
||
// 检查并播报待播放的留言
|
||
const checkAndPlayMessages = async () => {
|
||
try {
|
||
const now = new Date().toLocaleTimeString('zh-CN');
|
||
console.log(`[${now}] 检查待播放留言...`);
|
||
|
||
const pendingMessages = await messageService.getPendingMessages(familyId);
|
||
|
||
if (pendingMessages.length > 0) {
|
||
console.log(`发现 ${pendingMessages.length} 条待播放留言`);
|
||
|
||
for (const message of pendingMessages) {
|
||
// 检查是否已经播报过（避免重复播报）
|
||
if (!playedMessages.has(message.id)) {
|
||
console.log(`播报留言 ID: ${message.id} - 来自${message.sender_relation}${message.sender_name}`);
|
||
|
||
// 推送到数字人播报
|
||
await messageService.playMessageOnAvatar(message);
|
||
|
||
// 显示Toast字幕提示（30秒）
|
||
const toastText = `来自${message.sender_relation}${message.sender_name}的留言：${message.content}`;
|
||
setToastMessage({ type: 'info', message: toastText });
|
||
|
||
// 30秒后自动关闭Toast
|
||
setTimeout(() => {
|
||
setToastMessage(null);
|
||
}, 30000);
|
||
|
||
// 标记为已播放
|
||
await messageService.markAsPlayed(message.id);
|
||
|
||
// 记录已播报
|
||
setPlayedMessages((prev) => new Set(prev).add(message.id));
|
||
|
||
console.log(`留言 ID: ${message.id} 播报完成`);
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('检查并播报留言失败:', error);
|
||
}
|
||
};
|
||
|
||
// 定时检查待播放留言（每分钟检查一次）
|
||
useEffect(() => {
|
||
checkAndPlayMessages(); // 立即执行一次
|
||
const interval = setInterval(checkAndPlayMessages, 60000); // 每分钟检查
|
||
return () => clearInterval(interval);
|
||
}, [playedMessages]);
|
||
|
||
// 轮询媒体展示事件（每5秒检查一次）
|
||
const pollMediaEvents = async () => {
|
||
try {
|
||
const response = await fetch(
|
||
`http://localhost:8000/api/elderly/poll-media-events?family_id=${familyId}`
|
||
);
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`轮询媒体事件失败: ${response.statusText}`);
|
||
}
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.event && data.event.metadata) {
|
||
const metadata = data.event.metadata;
|
||
console.log('收到媒体展示事件:', metadata);
|
||
|
||
// 推送播报内容到数字人（与日程模块相同的逻辑）
|
||
if (metadata.avatar_text) {
|
||
console.log('准备调用 sendToAvatar，文本内容:', metadata.avatar_text);
|
||
|
||
// 确保麦克风已开启（媒体展示时需要数字人播报）
|
||
await ensureMicrophoneEnabled();
|
||
|
||
await sendToAvatar(metadata.avatar_text);
|
||
console.log('sendToAvatar 调用完成');
|
||
} else {
|
||
console.warn('没有 avatar_text，跳过数字人播报');
|
||
}
|
||
|
||
// 设置媒体展示状态，触发透明窗口弹出
|
||
setMediaOverlay({
|
||
filename: metadata.media_filename,
|
||
type: metadata.media_type || 'photo',
|
||
text: metadata.avatar_text,
|
||
duration: metadata.duration || 30,
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('轮询媒体事件错误:', error);
|
||
}
|
||
};
|
||
|
||
// 定时轮询媒体展示事件（每5秒检查一次）
|
||
useEffect(() => {
|
||
pollMediaEvents(); // 立即执行一次
|
||
const interval = setInterval(pollMediaEvents, 5000); // 每5秒检查
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
// 确保麦克风已开启
|
||
const ensureMicrophoneEnabled = async () => {
|
||
try {
|
||
console.log('[ensureMicrophoneEnabled] 确保麦克风已开启...');
|
||
const response = await fetch('http://127.0.0.1:5000/api/toggle-microphone', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ enabled: true }),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`开启麦克风失败: ${response.statusText}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
console.log('[ensureMicrophoneEnabled] 麦克风状态:', result);
|
||
} catch (error) {
|
||
console.error('[ensureMicrophoneEnabled] 开启麦克风错误:', error);
|
||
}
|
||
};
|
||
|
||
// 向数字人推送播报内容
|
||
const sendToAvatar = async (text: string) => {
|
||
try {
|
||
console.log('[sendToAvatar] 开始推送播报内容:', text);
|
||
console.log('[sendToAvatar] 请求URL: http://127.0.0.1:5000/transparent-pass');
|
||
|
||
const requestBody = {
|
||
user: 'User',
|
||
text: text,
|
||
};
|
||
console.log('[sendToAvatar] 请求体:', requestBody);
|
||
|
||
const response = await fetch('http://127.0.0.1:5000/transparent-pass', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(requestBody),
|
||
});
|
||
|
||
console.log('[sendToAvatar] 响应状态:', response.status, response.statusText);
|
||
|
||
if (!response.ok) {
|
||
const errorText = await response.text();
|
||
console.error('[sendToAvatar] 响应错误内容:', errorText);
|
||
throw new Error(`推送播报失败: ${response.status} ${response.statusText}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
console.log('[sendToAvatar] 播报内容推送成功，响应:', result);
|
||
} catch (error) {
|
||
console.error('[sendToAvatar] 推送播报内容错误:', error);
|
||
// 不抛出错误，让流程继续（即使播报失败，也要显示媒体）
|
||
}
|
||
};
|
||
|
||
// 模拟媒体库数据
|
||
const mediaLibrary = [
|
||
{ id: '1', url: '/placeholder-photo.jpg', type: 'photo' as const, caption: '小米 2018 秋游' },
|
||
{ id: '2', url: '/placeholder-photo-2.jpg', type: 'photo' as const, caption: '2019 春节团聚' },
|
||
{ id: '3', url: '/placeholder-photo-3.jpg', type: 'photo' as const, caption: '奶奶80岁生日' },
|
||
{ id: '4', url: '/placeholder-photo-4.jpg', type: 'photo' as const, caption: '家庭野餐' },
|
||
{ id: '5', url: '/placeholder-photo-5.jpg', type: 'photo' as const, caption: '小孙子周岁' },
|
||
];
|
||
|
||
// 获取当前时间和日期信息
|
||
const now = new Date();
|
||
const currentTime = now.toLocaleTimeString('zh-CN', {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
const currentDate = now.toLocaleDateString('zh-CN', {
|
||
month: 'long',
|
||
day: 'numeric',
|
||
});
|
||
const currentDay = now.toLocaleDateString('zh-CN', {
|
||
weekday: 'long',
|
||
});
|
||
// 模拟天气信息（实际使用时应从天气API获取）
|
||
const weather = '晴 22°C';
|
||
|
||
// 切换麦克风开关
|
||
const handleMicClick = async () => {
|
||
try {
|
||
console.log('[handleMicClick] 切换麦克风状态，当前状态:', isMicrophoneEnabled);
|
||
|
||
// 先显示视觉反馈
|
||
setIsAvatarActive(true);
|
||
setTimeout(() => setIsAvatarActive(false), 1000);
|
||
|
||
// 调用麦克风切换API（不传参数则自动切换）
|
||
const response = await fetch('http://127.0.0.1:5000/api/toggle-microphone', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({}), // 不传参数，自动切换状态
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`切换麦克风失败: ${response.statusText}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
console.log('[handleMicClick] 麦克风切换结果:', result);
|
||
|
||
// 更新UI状态
|
||
setIsMicrophoneEnabled(result.enabled);
|
||
|
||
} catch (error) {
|
||
console.error('[handleMicClick] 切换麦克风错误:', error);
|
||
}
|
||
};
|
||
|
||
const handleFamilyClick = async () => {
|
||
setToastMessage({ type: 'calling', message: '正在呼叫家人...' });
|
||
// 推送普通消息到家属端
|
||
try {
|
||
await alertService.sendContactFamilyAlert(familyId);
|
||
console.log('已通知家人');
|
||
} catch (error) {
|
||
console.error('通知家人失败:', error);
|
||
}
|
||
};
|
||
|
||
const handleEmergencyClick = () => {
|
||
setActiveOverlay('emergency');
|
||
};
|
||
|
||
const handlePhotosClick = async () => {
|
||
// 加载推荐媒体
|
||
await loadRecommendedMedia();
|
||
setActiveOverlay('media');
|
||
};
|
||
|
||
const handleNextMedia = () => {
|
||
if (currentMediaIndex < mediaLibrary.length - 1) {
|
||
setCurrentMediaIndex(currentMediaIndex + 1);
|
||
}
|
||
};
|
||
|
||
const handlePreviousMedia = () => {
|
||
if (currentMediaIndex > 0) {
|
||
setCurrentMediaIndex(currentMediaIndex - 1);
|
||
}
|
||
};
|
||
|
||
const handleSelectMedia = (index: number) => {
|
||
setCurrentMediaIndex(index);
|
||
};
|
||
|
||
// 获取临近日程（前后30分钟内）
|
||
const getNextSchedule = () => {
|
||
if (todaySchedules.length === 0) return null;
|
||
|
||
const now = new Date();
|
||
const sorted = scheduleService.sortSchedulesByTime(todaySchedules);
|
||
|
||
// 查找在时间窗口内的日程（前30分钟到后30分钟）
|
||
for (const schedule of sorted) {
|
||
const scheduleTime = new Date(schedule.schedule_time);
|
||
const diffMinutes = (scheduleTime.getTime() - now.getTime()) / (1000 * 60);
|
||
|
||
// 如果在前后30分钟范围内，显示这个日程
|
||
if (diffMinutes >= -30 && diffMinutes <= 30) {
|
||
return schedule;
|
||
}
|
||
|
||
// 如果日程还在30分钟之后，也显示（即将到来）
|
||
if (diffMinutes > 30) {
|
||
return schedule;
|
||
}
|
||
}
|
||
|
||
// 如果所有日程都已过期超过30分钟，不显示任何日程
|
||
return null;
|
||
};
|
||
|
||
// 获取临近的药物提醒（前后30分钟内）
|
||
const getNearbyMedicationReminder = () => {
|
||
if (todaySchedules.length === 0) return null;
|
||
|
||
const now = new Date();
|
||
|
||
// 查找前后30分钟内的药物提醒
|
||
for (const schedule of todaySchedules) {
|
||
if (schedule.schedule_type !== 'medication') continue;
|
||
|
||
const scheduleTime = new Date(schedule.schedule_time);
|
||
const diffMinutes = (scheduleTime.getTime() - now.getTime()) / (1000 * 60);
|
||
|
||
// 如果在前后30分钟范围内，返回这个药物提醒
|
||
if (diffMinutes >= -30 && diffMinutes <= 30) {
|
||
return schedule;
|
||
}
|
||
}
|
||
|
||
return null;
|
||
};
|
||
|
||
const nextSchedule = getNextSchedule();
|
||
const nearbyMedication = getNearbyMedicationReminder();
|
||
|
||
return (
|
||
<div className="h-screen w-full relative elderly-mode overflow-hidden">
|
||
{/* 主内容区域 - 满屏显示 */}
|
||
<div className="relative w-full h-full bg-gray-50">
|
||
{/* 数字人画面 - 全屏背景 */}
|
||
<div className="absolute inset-0 z-0">
|
||
<AvatarStage
|
||
isActive={isAvatarActive}
|
||
onSDKStatusChange={setSDKStatus}
|
||
onWSStatusChange={setWSStatus}
|
||
onLogMessage={setLogMessage}
|
||
/>
|
||
</div>
|
||
|
||
{/* PIP 模式的媒体播放器 */}
|
||
{activeOverlay === 'memory' && memoryMode === 'pip' && (
|
||
<MemoryPlayer
|
||
mediaType="photo"
|
||
mode="pip"
|
||
mediaList={mediaLibrary}
|
||
currentIndex={currentMediaIndex}
|
||
onLike={() => console.log('Liked')}
|
||
onDislike={() => console.log('Disliked')}
|
||
onClose={() => setActiveOverlay('none')}
|
||
onToggleMode={() => setMemoryMode('fullscreen')}
|
||
onNext={handleNextMedia}
|
||
onPrevious={handlePreviousMedia}
|
||
onSelectMedia={handleSelectMedia}
|
||
/>
|
||
)}
|
||
|
||
{/* 顶部状态栏 - 悬浮层 */}
|
||
<div className="absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/40 to-transparent px-4 py-3">
|
||
<div className="flex items-center justify-between text-white">
|
||
{/* 左侧区域：状态指示器 + 时间日期 */}
|
||
<div className="flex items-center gap-4">
|
||
{/* 连接状态指示器 - 竖排两个绿点 */}
|
||
<div className="flex flex-col gap-2">
|
||
<span
|
||
className={`w-3 h-3 rounded-full animate-pulse ${
|
||
sdkStatus === 'ready' ? 'bg-green-500' : sdkStatus === 'loading' ? 'bg-yellow-500' : 'bg-red-500'
|
||
}`}
|
||
title={sdkStatus === 'ready' ? 'SDK就绪' : sdkStatus === 'loading' ? 'SDK初始化中' : 'SDK错误'}
|
||
/>
|
||
<span
|
||
className={`w-3 h-3 rounded-full animate-pulse ${
|
||
wsStatus === 'connected' ? 'bg-green-500' : wsStatus === 'connecting' ? 'bg-yellow-500' : 'bg-gray-500'
|
||
}`}
|
||
title={wsStatus === 'connected' ? 'WebSocket已连接' : wsStatus === 'connecting' ? 'WebSocket连接中' : 'WebSocket未连接'}
|
||
/>
|
||
</div>
|
||
|
||
{/* 时间日期信息 */}
|
||
<div className="flex flex-col gap-1">
|
||
<div className="flex items-baseline gap-2">
|
||
<span className="text-2xl font-bold drop-shadow-lg">
|
||
{currentTime}
|
||
</span>
|
||
<span className="text-base drop-shadow-md">
|
||
{currentDate}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-sm drop-shadow-md">
|
||
<span>{currentDay}</span>
|
||
<span className="text-yellow-300">☀️ {weather}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 中间Logo区域 */}
|
||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
|
||
<div className="flex items-baseline gap-2 justify-center mb-1">
|
||
<h1 className="text-2xl font-bold drop-shadow-lg">KinEcho</h1>
|
||
<span className="text-sm drop-shadow-md opacity-90">亲情回声</span>
|
||
</div>
|
||
<p className="text-xs drop-shadow-md opacity-80 italic whitespace-nowrap">
|
||
Bring family moments to life. / 把家人的声音带到眼前。
|
||
</p>
|
||
</div>
|
||
|
||
{nextSchedule && (
|
||
<button
|
||
onClick={() => setActiveOverlay('schedule')}
|
||
className="text-xl font-bold bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full hover:bg-white/30 active:scale-95 transition-all"
|
||
>
|
||
{scheduleService.getScheduleTypeIcon(nextSchedule.schedule_type || 'other')}{' '}
|
||
{scheduleService.formatTime(nextSchedule.schedule_time)}{' '}
|
||
{nextSchedule.title}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 左侧按钮组 - 功能按钮垂直排列 */}
|
||
<div className="absolute left-4 flex flex-col gap-3 z-40" style={{ bottom: '38.2%', transform: 'translateY(50%)' }}>
|
||
{/* 麦克风按钮容器 - 用于承载log通知 */}
|
||
<div className="relative">
|
||
<button
|
||
onClick={handleMicClick}
|
||
className={`w-16 h-16 flex items-center justify-center ${
|
||
isMicrophoneEnabled
|
||
? 'bg-blue-500 hover:bg-blue-600'
|
||
: 'bg-gray-500 hover:bg-gray-600'
|
||
} text-white rounded-full shadow-2xl hover:scale-110 active:scale-95 transition-all`}
|
||
aria-label={isMicrophoneEnabled ? '点击关闭麦克风' : '点击开启麦克风'}
|
||
>
|
||
<Mic size={32} strokeWidth={2.5} />
|
||
</button>
|
||
|
||
{/* Log通知 - 从麦克风按钮向右延伸 */}
|
||
{logMessage && (
|
||
<LogNotification
|
||
message={logMessage}
|
||
onHide={() => setLogMessage(null)}
|
||
/>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={handleFamilyClick}
|
||
className="w-16 h-16 flex items-center justify-center bg-green-500 hover:bg-green-600 text-white rounded-full shadow-2xl hover:scale-110 active:scale-95 transition-all"
|
||
aria-label="联系家人"
|
||
>
|
||
<Users size={32} strokeWidth={2.5} />
|
||
</button>
|
||
<button
|
||
onClick={handlePhotosClick}
|
||
className="w-16 h-16 flex items-center justify-center bg-purple-500 hover:bg-purple-600 text-white rounded-full shadow-2xl hover:scale-110 active:scale-95 transition-all"
|
||
aria-label="查看照片和视频"
|
||
>
|
||
<Image size={32} strokeWidth={2.5} />
|
||
</button>
|
||
</div>
|
||
|
||
{/* 右下角 - 紧急求助按钮 */}
|
||
<div className="absolute right-4 bottom-4 z-40">
|
||
<button
|
||
onClick={handleEmergencyClick}
|
||
className="w-20 h-20 flex items-center justify-center bg-red-500 hover:bg-red-600 text-white rounded-full shadow-2xl hover:scale-110 active:scale-95 transition-all animate-pulse"
|
||
aria-label="我不舒服，需要帮助"
|
||
>
|
||
<span className="text-4xl">🆘</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* 叠加层 - 用药提醒 */}
|
||
{activeOverlay === 'medication' && (
|
||
<MedicationCard
|
||
medicationName="氯沙坦"
|
||
dosage="50mg"
|
||
timing="早餐后"
|
||
graceMinutes={30}
|
||
onTaken={() => {
|
||
setActiveOverlay('none');
|
||
setToastMessage({ type: 'success', message: '已记录服药' });
|
||
}}
|
||
onSnooze={(mins) => {
|
||
setActiveOverlay('none');
|
||
setToastMessage({ type: 'info', message: `将在 ${mins} 分钟后再次提醒` });
|
||
}}
|
||
onSkip={() => {
|
||
setActiveOverlay('none');
|
||
setConfirmDialog({
|
||
message: '跳过服药可能影响健康，确定吗？',
|
||
onConfirm: () => {
|
||
setConfirmDialog(null);
|
||
setToastMessage({ type: 'info', message: '已记录跳过' });
|
||
}
|
||
});
|
||
}}
|
||
onInfo={() => {
|
||
setToastMessage({ type: 'info', message: '氯沙坦用于降血压，请随餐服用，避免空腹。' });
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* 叠加层 - 心情选择 */}
|
||
{activeOverlay === 'mood' && (
|
||
<MoodBoard
|
||
familyId={familyId}
|
||
elderlyId={elderlyId}
|
||
onMoodSelect={(mood) => {
|
||
console.log('Selected mood:', mood);
|
||
// 更新当前情绪显示
|
||
setCurrentMood(mood as moodService.MoodType);
|
||
// 根据心情触发不同的回忆内容
|
||
setActiveOverlay('memory');
|
||
}}
|
||
onClose={() => setActiveOverlay('none')}
|
||
/>
|
||
)}
|
||
|
||
{/* 叠加层 - 媒体播放（全屏） */}
|
||
{activeOverlay === 'memory' && memoryMode === 'fullscreen' && (
|
||
<MemoryPlayer
|
||
mediaType="photo"
|
||
mode="fullscreen"
|
||
mediaList={mediaLibrary}
|
||
currentIndex={currentMediaIndex}
|
||
onLike={() => console.log('Liked')}
|
||
onDislike={() => console.log('Disliked')}
|
||
onClose={() => setActiveOverlay('none')}
|
||
onToggleMode={() => setMemoryMode('pip')}
|
||
onNext={handleNextMedia}
|
||
onPrevious={handlePreviousMedia}
|
||
onSelectMedia={handleSelectMedia}
|
||
/>
|
||
)}
|
||
|
||
{/* 叠加层 - 紧急求助 */}
|
||
{activeOverlay === 'emergency' && (
|
||
<EmergencySheet
|
||
onContactFamily={async () => {
|
||
setActiveOverlay('none');
|
||
setToastMessage({ type: 'calling', message: '正在呼叫家人...' });
|
||
// 推送SOS紧急消息到家属端
|
||
try {
|
||
await alertService.sendSOSAlert(familyId);
|
||
console.log('已发送SOS紧急通知给家人');
|
||
} catch (error) {
|
||
console.error('发送SOS紧急通知失败:', error);
|
||
}
|
||
}}
|
||
onContactEmergency={async () => {
|
||
setActiveOverlay('none');
|
||
setToastMessage({ type: 'info', message: '暂未对接应急中心，已通知家人' });
|
||
// 也推送SOS紧急消息到家属端
|
||
try {
|
||
await alertService.sendSOSAlert(familyId);
|
||
console.log('已发送SOS紧急通知给家人');
|
||
} catch (error) {
|
||
console.error('发送SOS紧急通知失败:', error);
|
||
}
|
||
}}
|
||
onClose={() => setActiveOverlay('none')}
|
||
/>
|
||
)}
|
||
|
||
{/* 叠加层 - 智能媒体播放器 */}
|
||
{activeOverlay === 'media' && recommendedMedia.length > 0 && (
|
||
<MediaPlayer
|
||
familyId={familyId}
|
||
elderlyId={elderlyId}
|
||
onClose={() => setActiveOverlay('none')}
|
||
/>
|
||
)}
|
||
|
||
{/* 叠加层 - 日程列表 */}
|
||
{activeOverlay === 'schedule' && (
|
||
<ScheduleList
|
||
schedules={todaySchedules}
|
||
onClose={() => setActiveOverlay('none')}
|
||
/>
|
||
)}
|
||
|
||
{/* Toast 消息提示 */}
|
||
{toastMessage && (
|
||
<ToastMessage
|
||
type={toastMessage.type}
|
||
message={toastMessage.message}
|
||
onClose={() => setToastMessage(null)}
|
||
/>
|
||
)}
|
||
|
||
{/* 确认对话框 */}
|
||
{confirmDialog && (
|
||
<ConfirmDialog
|
||
message={confirmDialog.message}
|
||
onConfirm={confirmDialog.onConfirm}
|
||
onCancel={() => setConfirmDialog(null)}
|
||
/>
|
||
)}
|
||
|
||
{/* 透明窗口媒体展示 */}
|
||
{mediaOverlay && (
|
||
<TransparentMediaOverlay
|
||
mediaFilename={mediaOverlay.filename}
|
||
mediaType={mediaOverlay.type}
|
||
avatarText={mediaOverlay.text}
|
||
duration={mediaOverlay.duration}
|
||
onClose={() => setMediaOverlay(null)}
|
||
/>
|
||
)}
|
||
|
||
{/* 日程提醒 Toast */}
|
||
{reminderSchedule && (
|
||
<ScheduleReminderToast
|
||
schedule={reminderSchedule}
|
||
onComplete={async () => {
|
||
try {
|
||
if (reminderSchedule.id) {
|
||
// 更新日程状态为已完成
|
||
await scheduleService.updateScheduleStatus(reminderSchedule.id, 'completed');
|
||
}
|
||
setReminderSchedule(null);
|
||
// 重新加载日程列表
|
||
loadTodaySchedules();
|
||
} catch (error) {
|
||
console.error('标记完成失败:', error);
|
||
}
|
||
}}
|
||
onSkip={async () => {
|
||
try {
|
||
if (reminderSchedule.id) {
|
||
// 更新日程状态为已忽略
|
||
await scheduleService.updateScheduleStatus(reminderSchedule.id, 'skipped');
|
||
}
|
||
setReminderSchedule(null);
|
||
// 重新加载日程列表
|
||
loadTodaySchedules();
|
||
} catch (error) {
|
||
console.error('忽略行程失败:', error);
|
||
}
|
||
}}
|
||
onDismiss={async () => {
|
||
if (!reminderSchedule) return;
|
||
|
||
console.log('推迟执行日程:', reminderSchedule);
|
||
|
||
try {
|
||
// 计算10分钟后的时间
|
||
const postponedTime = new Date();
|
||
postponedTime.setMinutes(postponedTime.getMinutes() + 10);
|
||
|
||
// 如果是每日重复的日程，只推迟当前实例
|
||
if (reminderSchedule.repeat_type === 'daily') {
|
||
// 记录推迟时间到 postponedReminders Map
|
||
setPostponedReminders(prev => {
|
||
const newMap = new Map(prev);
|
||
newMap.set(reminderSchedule.id!, postponedTime);
|
||
return newMap;
|
||
});
|
||
// 从已显示列表中移除，允许再次提醒
|
||
setShownReminders(prev => {
|
||
const newSet = new Set(prev);
|
||
if (reminderSchedule.id) newSet.delete(reminderSchedule.id);
|
||
return newSet;
|
||
});
|
||
console.log(`每日重复日程已推迟到 ${postponedTime.toLocaleTimeString()}，原日程保持不变`);
|
||
setReminderSchedule(null);
|
||
} else {
|
||
// 如果是一次性日程，更新数据库中的 schedule_time
|
||
const response = await fetch(
|
||
`http://localhost:8000/api/family/schedules/${reminderSchedule.id}`,
|
||
{
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
family_id: reminderSchedule.family_id,
|
||
title: reminderSchedule.title,
|
||
description: reminderSchedule.description,
|
||
schedule_type: reminderSchedule.schedule_type,
|
||
schedule_time: postponedTime.toISOString(),
|
||
repeat_type: reminderSchedule.repeat_type,
|
||
repeat_days: reminderSchedule.repeat_days,
|
||
auto_remind: reminderSchedule.auto_remind,
|
||
status: 'pending', // 推迟后重置为pending状态
|
||
}),
|
||
}
|
||
);
|
||
|
||
if (response.ok) {
|
||
console.log('一次性日程时间已更新为10分钟后:', postponedTime.toISOString());
|
||
setReminderSchedule(null);
|
||
// 从已显示列表中移除，允许10分钟后再次提醒
|
||
setShownReminders(prev => {
|
||
const newSet = new Set(prev);
|
||
if (reminderSchedule.id) newSet.delete(reminderSchedule.id);
|
||
return newSet;
|
||
});
|
||
// 重新加载日程列表
|
||
loadTodaySchedules();
|
||
} else {
|
||
const errorText = await response.text();
|
||
console.error('更新失败响应:', errorText);
|
||
throw new Error('更新日程时间失败');
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('推迟执行失败:', error);
|
||
}
|
||
}}
|
||
onMissed={async () => {
|
||
try {
|
||
if (reminderSchedule?.id) {
|
||
console.log('30分钟无操作，自动标记为已错过:', reminderSchedule.title);
|
||
// 更新日程状态为已错过
|
||
await scheduleService.updateScheduleStatus(reminderSchedule.id, 'missed');
|
||
}
|
||
setReminderSchedule(null);
|
||
// 重新加载日程列表
|
||
loadTodaySchedules();
|
||
} catch (error) {
|
||
console.error('标记已错过失败:', error);
|
||
setReminderSchedule(null);
|
||
}
|
||
}}
|
||
onClose={() => {
|
||
// 手动关闭提醒（不做任何操作，只是隐藏）
|
||
setReminderSchedule(null);
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* 调试按钮 - 方便演示 */}
|
||
<div className="absolute left-4 flex flex-col gap-3 opacity-30 hover:opacity-100 transition-opacity z-40" style={{ top: '50%', transform: 'translateY(-50%)' }}>
|
||
{/* 药物提醒按钮 - 只在前后30分钟有药物提醒时显示 */}
|
||
{nearbyMedication && (
|
||
<button
|
||
onClick={() => setActiveOverlay('medication')}
|
||
className="w-16 h-16 flex items-center justify-center bg-blue-600 text-white text-3xl rounded-full shadow-2xl backdrop-blur-sm hover:scale-110 active:scale-95 transition-all"
|
||
>
|
||
💊
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => setActiveOverlay('mood')}
|
||
className="w-16 h-16 flex items-center justify-center bg-amber-500 text-white text-3xl rounded-full shadow-2xl backdrop-blur-sm hover:scale-110 active:scale-95 transition-all"
|
||
>
|
||
{currentMood ? moodService.moodEmojiMap[currentMood] : '😊'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|