优化路径，添加消息推送

2026-04-17 12:14:57 +08:00
parent b8a842367b
commit 0da5936ce0
34 changed files with 2472 additions and 435 deletions
@@ -0,0 +1,120 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+import { PanelShell } from "@/components/panel-shell";
+import { getCaregiverMessageDetail } from "@/lib/caregiver-panel";
+import {
+  formatDateTime,
+  getDeviceName,
+  getImportanceLabel,
+  getMessageDirectionLabel,
+  getMessageStatusLabel,
+} from "@/lib/panel-format";
+import { requireCaregiverSession } from "@/lib/page-auth";
+
+export const dynamic = "force-dynamic";
+
+type MessageDetailPageProps = {
+  params: Promise<{ messageId: string }>;
+};
+
+export default async function MessageDetailPage({ params }: MessageDetailPageProps) {
+  const { messageId } = await params;
+  const publicId = Number.parseInt(messageId, 10);
+
+  if (!Number.isFinite(publicId) || publicId <= 0) {
+    notFound();
+  }
+
+  const caregiver = await requireCaregiverSession(`/messages/${publicId}`);
+  const message = await getCaregiverMessageDetail(caregiver.id, publicId);
+
+  if (!message) {
+    notFound();
+  }
+
+  return (
+    <PanelShell
+      currentPath="/messages"
+      title={`留言 #${message.publicId}`}
+      description="这是单条留言详情页。无论从通知点击进来，还是从留言中心点开，都能在这里看到完整内容与所属设备信息。"
+      caregiverToken={caregiver.sessionToken}
+    >
+      <section className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
+        <article 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 flex-wrap items-center gap-2 text-sm text-[var(--muted)]">
+            <span className="rounded-full bg-[var(--paper-soft)] px-3 py-1 font-semibold text-[var(--ink)]">
+              #{message.publicId}
+            </span>
+            <span className="rounded-full bg-[var(--paper-soft)] px-3 py-1">
+              {getMessageDirectionLabel(message.direction)}
+            </span>
+            <span className="rounded-full bg-[var(--paper-soft)] px-3 py-1">
+              {getImportanceLabel(message.importance)}
+            </span>
+            <span className="rounded-full bg-[var(--paper-soft)] px-3 py-1">
+              {getMessageStatusLabel(message)}
+            </span>
+          </div>
+
+          <h2 className="mt-5 font-[family-name:var(--font-display)] text-4xl leading-[1.2] text-[var(--ink)]">
+            {message.content}
+          </h2>
+
+          {message.recipientRelation ? (
+            <p className="mt-4 text-sm leading-7 text-[var(--muted)]">
+              目标对象：{message.recipientRelation}
+            </p>
+          ) : null}
+        </article>
+
+        <aside 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>
+          <div className="mt-5 space-y-4 text-sm leading-7 text-[var(--muted)]">
+            <div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
+              <p>所属设备</p>
+              <p className="mt-2 font-semibold text-[var(--ink)]">
+                {getDeviceName(message.elderDevice.displayName)}
+              </p>
+            </div>
+            <div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
+              <p>设备 UUID</p>
+              <p className="mt-2 break-all font-semibold text-[var(--ink)]">
+                {message.elderDevice.deviceUuid}
+              </p>
+            </div>
+            <div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
+              <p>创建时间</p>
+              <p className="mt-2 font-semibold text-[var(--ink)]">
+                {formatDateTime(message.createdAt)}
+              </p>
+            </div>
+            <div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
+              <p>最近在线</p>
+              <p className="mt-2 font-semibold text-[var(--ink)]">
+                {formatDateTime(message.elderDevice.lastSeenAt)}
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-6 flex flex-wrap gap-3">
+            <Link
+              href="/messages"
+              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={`/devices/${message.elderDevice.deviceUuid}`}
+              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>
+        </aside>
+      </section>
+    </PanelShell>
+  );
+}