全新UI语言

app/devices/[deviceUuid]/page.tsx

@@ -4,224 +4,52 @@ import { notFound } from "next/navigation";
 import { ManageDeviceForm, 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 { formatDateTime, getConversationRoleLabel, getDeviceName, getMessageHref, getUsageLabel, truncateText } from "@/lib/panel-format";
 import { requireCaregiverSession } from "@/lib/page-auth";
 import { getCaregiverDisplayName } from "@/lib/session";
 
 export const dynamic = "force-dynamic";
 
-type DeviceDetailPageProps = {
-  params: Promise<{ deviceUuid: string }>;
-};
-
-export default async function DeviceDetailPage({ params }: DeviceDetailPageProps) {
+export default async function DeviceDetailPage({ params, searchParams }: PageProps<"/devices/[deviceUuid]">) {
   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",
-  );
+  if (!binding) notFound();
+  const rawTab = (await searchParams).tab;
+  const tab = rawTab === "chat" || rawTab === "usage" ? rawTab : "msg";
+  const messages = binding.elderDevice.messages;
 
   return (
-    <PanelShell
-      currentPath="/devices"
-      title={getDeviceName(binding.elderDevice.displayName)}
-      description="给长辈写问候、查看留言和最近的使用动态。"
-      caregiverLabel={getCaregiverDisplayName(caregiver)}
-    >
-      <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>
+    <PanelShell currentPath="/devices" title={getDeviceName(binding.alias, binding.elderDevice.displayName)} caregiverLabel={getCaregiverDisplayName(caregiver)} backHref="/devices"
+      actions={<span className="row-meta" style={{ margin: 0 }}><span className="dot online" style={{ margin: 0 }} />{formatDateTime(binding.elderDevice.lastSeenAt)}</span>}>
+      <section className="stats" style={{ gridTemplateColumns: "repeat(3,1fr)" }}>
+        <div className="stat accent"><strong>{binding.elderUnreadCount}</strong><span>新留言</span></div>
+        <div className="stat"><strong>{binding.familyUnreadCount}</strong><span>待长辈听</span></div>
+        <div className="stat"><strong>{binding.elderDevice._count.conversationTurns}</strong><span>陪伴对话</span></div>
       </section>
 
-      <section className="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
-        <div className="space-y-6">
-          <ManageDeviceForm
-            deviceUuid={binding.elderDevice.deviceUuid}
-            initialAlias={binding.alias}
-            deviceLabel={getDeviceName(binding.elderDevice.displayName)}
-          />
+      <SendMessageForm deviceUuid={binding.elderDevice.deviceUuid} />
 
-          <SendMessageForm deviceUuid={binding.elderDevice.deviceUuid} />
+      <div className="segment">
+        <Link href={`/devices/${deviceUuid}?tab=msg`} className={tab === "msg" ? "active" : ""}>留言</Link>
+        <Link href={`/devices/${deviceUuid}?tab=chat`} className={tab === "chat" ? "active" : ""}>对话</Link>
+        <Link href={`/devices/${deviceUuid}?tab=usage`} className={tab === "usage" ? "active" : ""}>使用</Link>
+      </div>
 
-          <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 className="card">
+        {tab === "msg" ? (messages.length ? messages.map((message) => (
+          <Link key={message.id} href={getMessageHref(message.publicId)} className="timeline-item" style={{ display: "block" }}>
+            <div className="timeline-top" style={{ color: message.direction === "FAMILY_TO_ELDER" ? "var(--accent)" : undefined }}>{message.direction === "FAMILY_TO_ELDER" ? "我发出的问候" : "长辈捎来的话"}<span className="timeline-time">{formatDateTime(message.createdAt)}</span></div>
+            <p className="timeline-body">{truncateText(message.content, 126)}</p>
+          </Link>
+        )) : <div className="empty">还没有留言。</div>) : tab === "chat" ? (binding.elderDevice.conversationTurns.length ? binding.elderDevice.conversationTurns.map((turn) => (
+          <article key={turn.id} className="timeline-item"><div className="timeline-top">{getConversationRoleLabel(turn.role)}<span className="timeline-time">{formatDateTime(turn.createdAt)}</span></div><p className="timeline-body">{truncateText(turn.content, 150)}</p></article>
+        )) : <div className="empty">还没有聊天记录。</div>) : (binding.elderDevice.usageEvents.length ? binding.elderDevice.usageEvents.map((event) => (
+          <article key={event.id} className="timeline-item"><div className="timeline-top">使用记录<span className="timeline-time">{formatDateTime(event.createdAt)}</span></div><p className="timeline-body">{getUsageLabel(event.eventType)}</p></article>
+        )) : <div className="empty">暂时还没有使用记录。</div>)}
       </section>
+
+      <details className="device-manage"><summary className="btn block">设备设置</summary><ManageDeviceForm deviceUuid={binding.elderDevice.deviceUuid} initialAlias={binding.alias} deviceLabel={getDeviceName(binding.elderDevice.displayName)} /></details>
     </PanelShell>
   );
-}
+}

app/devices/page.tsx

@@ -1,9 +1,10 @@
 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, truncateText } from "@/lib/panel-format";
+import { formatDateTime, getDeviceName } from "@/lib/panel-format";
 import { requireCaregiverSession } from "@/lib/page-auth";
 import { getCaregiverDisplayName } from "@/lib/session";
 
@@ -12,134 +13,40 @@ 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="我的设备"
-      description="管理已连接的长辈设备，点击进入设备详情查看留言和使用动态。"
-      caregiverLabel={getCaregiverDisplayName(caregiver)}
-    >
-      <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>
+    <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>
 
-      {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];
+      <BindDeviceForm />
 
-            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>
-      )}
+      <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>
   );
-}
+}