146 lines
7.1 KiB
TypeScript
146 lines
7.1 KiB
TypeScript
import Link from "next/link";
|
||
|
||
import { BindDeviceForm } from "@/components/dashboard-actions";
|
||
import { PanelShell } from "@/components/panel-shell";
|
||
import { PwaControls } from "@/components/pwa-controls";
|
||
import { getCaregiverDevices } from "@/lib/caregiver-panel";
|
||
import { formatDateTime, getDeviceName, truncateText } from "@/lib/panel-format";
|
||
import { requireCaregiverSession } from "@/lib/page-auth";
|
||
|
||
export const dynamic = "force-dynamic";
|
||
|
||
export default async function DevicesPage() {
|
||
const caregiver = await requireCaregiverSession("/devices");
|
||
const devices = await getCaregiverDevices(caregiver.id);
|
||
|
||
return (
|
||
<PanelShell
|
||
currentPath="/devices"
|
||
title="设备管理和绑定入口单独放在这里。"
|
||
description="手动粘贴设备码、扫码绑定、查看某台设备的专属页，都统一放在设备页，不再和首页摘要、活动记录混在一起。"
|
||
caregiverToken={caregiver.sessionToken}
|
||
actions={<PwaControls />}
|
||
>
|
||
<section className="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
|
||
<BindDeviceForm />
|
||
|
||
<div 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-4 space-y-3 rounded-[24px] bg-[var(--paper-soft)] p-5 text-sm leading-7 text-[var(--muted)]">
|
||
<p>1. 先通过扫码或粘贴设备码建立连接。</p>
|
||
<p>2. 进入设备详情页给这位老人写留言，不再在首页里混排。</p>
|
||
<p>3. 每台设备都有自己的最近留言、对话片段和工具调用摘要。</p>
|
||
</div>
|
||
|
||
<div className="mt-6 flex flex-wrap gap-3">
|
||
<Link
|
||
href="/scan"
|
||
className="inline-flex h-12 items-center justify-center rounded-full bg-[var(--olive)] px-5 text-sm font-semibold text-white transition hover:bg-[var(--olive-deep)]"
|
||
>
|
||
打开扫码页
|
||
</Link>
|
||
<Link
|
||
href="/messages"
|
||
className="inline-flex h-12 items-center justify-center rounded-full border border-[var(--line)] bg-white px-5 text-sm font-semibold text-[var(--ink)] transition hover:bg-[var(--paper-soft)]"
|
||
>
|
||
去留言中心
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{devices.length === 0 ? (
|
||
<section className="rounded-[32px] border border-dashed border-[var(--line)] bg-white/72 px-6 py-10 text-center shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
|
||
<h2 className="font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
|
||
还没有绑定设备
|
||
</h2>
|
||
<p className="mx-auto mt-4 max-w-2xl text-base leading-8 text-[var(--muted)]">
|
||
等待绑定成功后，每台设备都会在这里生成自己的专属入口，后续写留言和查看状态都从设备详情页进入。
|
||
</p>
|
||
</section>
|
||
) : (
|
||
<section className="grid gap-6 lg:grid-cols-2">
|
||
{devices.map((binding) => {
|
||
const latestMessage = binding.elderDevice.messages[0];
|
||
|
||
return (
|
||
<article
|
||
key={binding.id}
|
||
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)]">
|
||
{getDeviceName(binding.elderDevice.displayName)}
|
||
</h2>
|
||
|
||
<div className="mt-4 flex flex-wrap gap-3 text-sm text-[var(--muted)]">
|
||
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
|
||
最近在线：{formatDateTime(binding.elderDevice.lastSeenAt)}
|
||
</span>
|
||
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
|
||
老人新留言 {binding.elderUnreadCount}
|
||
</span>
|
||
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
|
||
待老人查看 {binding.familyUnreadCount}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="mt-5 grid gap-3 sm:grid-cols-3">
|
||
<div className="rounded-[22px] bg-[var(--paper-soft)] px-4 py-4">
|
||
<p className="text-xs text-[var(--muted)]">留言总数</p>
|
||
<p className="mt-2 text-2xl font-semibold text-[var(--ink)]">
|
||
{binding.elderDevice._count.messages}
|
||
</p>
|
||
</div>
|
||
<div className="rounded-[22px] bg-[var(--paper-soft)] px-4 py-4">
|
||
<p className="text-xs text-[var(--muted)]">对话条数</p>
|
||
<p className="mt-2 text-2xl font-semibold text-[var(--ink)]">
|
||
{binding.elderDevice._count.conversationTurns}
|
||
</p>
|
||
</div>
|
||
<div className="rounded-[22px] bg-[var(--paper-soft)] px-4 py-4">
|
||
<p className="text-xs text-[var(--muted)]">工具调用</p>
|
||
<p className="mt-2 text-2xl font-semibold text-[var(--ink)]">
|
||
{binding.elderDevice._count.toolCalls}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-5 rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
|
||
<p className="text-sm font-semibold text-[var(--ink)]">最近一条动态</p>
|
||
<p className="mt-2 text-sm leading-7 text-[var(--muted)]">
|
||
{latestMessage
|
||
? truncateText(latestMessage.content, 96)
|
||
: "这台设备还没有同步到新的留言或问候。"}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-6 flex flex-wrap gap-3">
|
||
<Link
|
||
href={`/devices/${binding.elderDevice.deviceUuid}`}
|
||
className="inline-flex h-12 items-center justify-center rounded-full bg-[var(--copper)] px-5 text-sm font-semibold text-white transition hover:bg-[var(--copper-deep)]"
|
||
>
|
||
打开设备页
|
||
</Link>
|
||
<Link
|
||
href="/messages"
|
||
className="inline-flex h-12 items-center justify-center rounded-full border border-[var(--line)] bg-white px-5 text-sm font-semibold text-[var(--ink)] transition hover:bg-[var(--paper-soft)]"
|
||
>
|
||
去留言中心
|
||
</Link>
|
||
</div>
|
||
</article>
|
||
);
|
||
})}
|
||
</section>
|
||
)}
|
||
</PanelShell>
|
||
);
|
||
} |