53 lines
3.0 KiB
TypeScript
53 lines
3.0 KiB
TypeScript
import Link from "next/link";
|
||
import { ChevronRight, Smartphone } from "lucide-react";
|
||
|
||
import { BindDeviceForm } from "@/components/dashboard-actions";
|
||
import { PanelShell } from "@/components/panel-shell";
|
||
import { getCaregiverDevices } from "@/lib/caregiver-panel";
|
||
import { formatDateTime, getDeviceName } from "@/lib/panel-format";
|
||
import { requireCaregiverSession } from "@/lib/page-auth";
|
||
import { getCaregiverDisplayName } from "@/lib/session";
|
||
|
||
export const dynamic = "force-dynamic";
|
||
|
||
export default async function DevicesPage() {
|
||
const caregiver = await requireCaregiverSession("/devices");
|
||
const devices = await getCaregiverDevices(caregiver.id);
|
||
const unread = devices.reduce((n, d) => n + d.elderUnreadCount, 0);
|
||
|
||
return (
|
||
<PanelShell currentPath="/devices" title="我的设备" caregiverLabel={getCaregiverDisplayName(caregiver)} unreadCount={unread}
|
||
actions={<Link href="/scan" className="btn small">扫码绑定</Link>}>
|
||
<section className="card">
|
||
{devices.length ? devices.map((binding) => (
|
||
<Link key={binding.id} href={`/devices/${binding.elderDevice.deviceUuid}`} className="list-row" style={{ alignItems: "center", gap: 12 }}>
|
||
<span className="device-icon"><Smartphone size={19} strokeWidth={1.8} /></span>
|
||
<span className="row-main">
|
||
<span style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||
<span className="row-title">{getDeviceName(binding.alias, binding.elderDevice.displayName)}</span>
|
||
<span className={`dot ${binding.elderDevice.lastSeenAt ? "online" : "offline"}`} style={{ marginTop: 0 }} />
|
||
</span>
|
||
<span className="row-meta">{formatDateTime(binding.elderDevice.lastSeenAt)} · 留言 {binding.elderDevice._count.messages} · 对话 {binding.elderDevice._count.conversationTurns} · 服务 {binding.elderDevice._count.toolCalls}</span>
|
||
</span>
|
||
{binding.elderUnreadCount > 0 ? <span className="nav-badge" style={{ position: "static" }}>{binding.elderUnreadCount}</span> : null}
|
||
<ChevronRight size={14} color="var(--muted-light)" />
|
||
</Link>
|
||
)) : <div className="empty">还没有连接设备，扫描长辈屏幕上的二维码即可添加。</div>}
|
||
</section>
|
||
|
||
<BindDeviceForm />
|
||
|
||
<details className="card">
|
||
<summary className="list-row" style={{ alignItems: "center", fontSize: 13, fontWeight: 600, listStyle: "none" }}>
|
||
<span style={{ flex: 1 }}>如何连接长辈的设备？</span><span className="row-meta" style={{ margin: 0 }}>展开</span>
|
||
</summary>
|
||
<div className="card-pad" style={{ borderTop: "1px solid var(--line)", color: "var(--muted)", fontSize: 12.5, lineHeight: 1.7 }}>
|
||
<p>1. 让长辈打开陪伴屏上的「家人连接」页面。</p>
|
||
<p>2. 扫描二维码，或把设备码粘贴到上方输入框。</p>
|
||
<p>3. 连接后即可收到长辈的留言、对话与使用动态。</p>
|
||
</div>
|
||
</details>
|
||
</PanelShell>
|
||
);
|
||
}
|