220 lines
9.7 KiB
TypeScript
220 lines
9.7 KiB
TypeScript
import Link from "next/link";
|
|
import { notFound } from "next/navigation";
|
|
|
|
import { SendMessageForm } from "@/components/dashboard-actions";
|
|
import { PanelShell } from "@/components/panel-shell";
|
|
import { getCaregiverDeviceDetail } from "@/lib/caregiver-panel";
|
|
import {
|
|
formatDateTime,
|
|
getConversationRoleLabel,
|
|
getDeviceName,
|
|
getImportanceLabel,
|
|
getMessageHref,
|
|
getUsageLabel,
|
|
truncateText,
|
|
} from "@/lib/panel-format";
|
|
import { requireCaregiverSession } from "@/lib/page-auth";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
type DeviceDetailPageProps = {
|
|
params: Promise<{ deviceUuid: string }>;
|
|
};
|
|
|
|
export default async function DeviceDetailPage({ params }: DeviceDetailPageProps) {
|
|
const { deviceUuid } = await params;
|
|
const caregiver = await requireCaregiverSession(`/devices/${deviceUuid}`);
|
|
const binding = await getCaregiverDeviceDetail(caregiver.id, deviceUuid);
|
|
|
|
if (!binding) {
|
|
notFound();
|
|
}
|
|
|
|
const elderMessages = binding.elderDevice.messages.filter(
|
|
(message) => message.direction === "ELDER_TO_FAMILY",
|
|
);
|
|
const familyMessages = binding.elderDevice.messages.filter(
|
|
(message) => message.direction === "FAMILY_TO_ELDER",
|
|
);
|
|
|
|
return (
|
|
<PanelShell
|
|
currentPath="/devices"
|
|
title={getDeviceName(binding.elderDevice.displayName)}
|
|
description="这是一台设备的专属页面。给老人写问候、查看这台设备最近的留言、活动和对话，都在这里完成。"
|
|
caregiverToken={caregiver.sessionToken}
|
|
>
|
|
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
|
|
<p className="text-sm text-[var(--muted)]">老人新留言</p>
|
|
<p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
|
|
{binding.elderUnreadCount}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
|
|
<p className="text-sm text-[var(--muted)]">待老人查看</p>
|
|
<p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
|
|
{binding.familyUnreadCount}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
|
|
<p className="text-sm text-[var(--muted)]">最近在线</p>
|
|
<p className="mt-3 text-lg font-semibold text-[var(--ink)]">
|
|
{formatDateTime(binding.elderDevice.lastSeenAt)}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
|
|
<p className="text-sm text-[var(--muted)]">绑定链接</p>
|
|
<p className="mt-3 text-sm leading-7 text-[var(--ink)]">
|
|
{truncateText(binding.bindUrl, 52)}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
|
|
<div className="space-y-6">
|
|
<SendMessageForm deviceUuid={binding.elderDevice.deviceUuid} />
|
|
|
|
<section className="rounded-[32px] border border-white/75 bg-white/82 p-6 shadow-[0_26px_60px_rgba(115,76,42,0.12)]">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
|
|
老人给家里的话
|
|
</p>
|
|
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
|
|
最近通过桥接工具送出的内容
|
|
</h2>
|
|
</div>
|
|
<Link
|
|
href="/messages"
|
|
className="inline-flex h-11 items-center justify-center rounded-full border border-[var(--line)] bg-white px-4 text-sm font-semibold text-[var(--ink)] transition hover:bg-[var(--paper-soft)]"
|
|
>
|
|
去留言中心
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mt-5 space-y-3">
|
|
{elderMessages.length === 0 ? (
|
|
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
|
|
这台设备暂时还没有新的老人留言。
|
|
</p>
|
|
) : (
|
|
elderMessages.map((message) => (
|
|
<Link
|
|
key={message.id}
|
|
href={getMessageHref(message.publicId)}
|
|
className="block rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 transition hover:bg-white"
|
|
>
|
|
<div className="flex flex-wrap items-center gap-2 text-xs text-[var(--muted)]">
|
|
<span className="rounded-full bg-white px-3 py-1 font-semibold text-[var(--ink)]">
|
|
#{message.publicId}
|
|
</span>
|
|
<span>{getImportanceLabel(message.importance)}</span>
|
|
<span>{formatDateTime(message.createdAt)}</span>
|
|
</div>
|
|
<p className="mt-3 text-sm leading-7 text-[var(--ink)]">
|
|
{truncateText(message.content, 112)}
|
|
</p>
|
|
</Link>
|
|
))
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/75 bg-white/82 p-6 shadow-[0_26px_60px_rgba(115,76,42,0.12)]">
|
|
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
|
|
最近活动
|
|
</p>
|
|
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
|
|
这台设备刚刚发生了什么
|
|
</h2>
|
|
|
|
<div className="mt-5 space-y-3">
|
|
{binding.elderDevice.usageEvents.length === 0 ? (
|
|
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
|
|
暂时还没有同步到新的使用事件。
|
|
</p>
|
|
) : (
|
|
binding.elderDevice.usageEvents.map((event) => (
|
|
<div key={event.id} className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
|
|
<div className="flex items-center justify-between gap-3 text-xs text-[var(--muted)]">
|
|
<span>{getUsageLabel(event.eventType)}</span>
|
|
<span>{formatDateTime(event.createdAt)}</span>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<section className="rounded-[32px] border border-white/75 bg-white/82 p-6 shadow-[0_26px_60px_rgba(115,76,42,0.12)]">
|
|
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
|
|
家属给老人的问候
|
|
</p>
|
|
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
|
|
最近写给这位老人的内容
|
|
</h2>
|
|
|
|
<div className="mt-5 space-y-3">
|
|
{familyMessages.length === 0 ? (
|
|
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
|
|
还没有发给这位老人的问候。
|
|
</p>
|
|
) : (
|
|
familyMessages.map((message) => (
|
|
<Link
|
|
key={message.id}
|
|
href={getMessageHref(message.publicId)}
|
|
className="block rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 transition hover:bg-white"
|
|
>
|
|
<div className="flex flex-wrap items-center gap-2 text-xs text-[var(--muted)]">
|
|
<span className="rounded-full bg-white px-3 py-1 font-semibold text-[var(--ink)]">
|
|
#{message.publicId}
|
|
</span>
|
|
<span>{getImportanceLabel(message.importance)}</span>
|
|
<span>{formatDateTime(message.createdAt)}</span>
|
|
</div>
|
|
<p className="mt-3 text-sm leading-7 text-[var(--ink)]">
|
|
{truncateText(message.content, 112)}
|
|
</p>
|
|
</Link>
|
|
))
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/75 bg-white/82 p-6 shadow-[0_26px_60px_rgba(115,76,42,0.12)]">
|
|
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
|
|
最近对话片段
|
|
</p>
|
|
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
|
|
快速回看陪伴内容
|
|
</h2>
|
|
|
|
<div className="mt-5 space-y-3">
|
|
{binding.elderDevice.conversationTurns.length === 0 ? (
|
|
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
|
|
这台设备最近还没有同步到对话片段。
|
|
</p>
|
|
) : (
|
|
binding.elderDevice.conversationTurns.map((turn) => (
|
|
<div key={turn.id} className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
|
|
<div className="flex items-center justify-between gap-3 text-xs text-[var(--muted)]">
|
|
<span>{getConversationRoleLabel(turn.role)}</span>
|
|
<span>{formatDateTime(turn.createdAt)}</span>
|
|
</div>
|
|
<p className="mt-3 text-sm leading-7 text-[var(--ink)]">
|
|
{truncateText(turn.content, 124)}
|
|
</p>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</PanelShell>
|
|
);
|
|
} |