优化加载动画

app/scan/page.tsx

@@ -1,40 +1,59 @@
 import Link from "next/link";
 
+import { PanelShell } from "@/components/panel-shell";
 import { ScanClient } from "@/components/scan-client";
+import { requireCaregiverSession } from "@/lib/page-auth";
+import { getCaregiverDisplayName } from "@/lib/session";
+
+export const dynamic = "force-dynamic";
+
+export default async function ScanPage() {
+  const caregiver = await requireCaregiverSession("/scan");
 
-export default function ScanPage() {
   return (
-    <main className="mx-auto min-h-screen max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
-      <section className="grid gap-6 lg:grid-cols-[0.82fr_1.18fr]">
-        <div className="rounded-[36px] border border-white/70 bg-white/78 p-6 shadow-[0_30px_70px_rgba(115,76,42,0.14)] backdrop-blur">
+    <PanelShell
+      currentPath="/scan"
+      title="扫码连接"
+      description="把镜头对准长辈手机上的二维码，识别后会自动完成连接并跳转到绑定结果。"
+      caregiverLabel={getCaregiverDisplayName(caregiver)}
+    >
+      <section className="grid gap-6 xl:grid-cols-[0.88fr_1.12fr]">
+        <article 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>
-          <h1 className="mt-4 font-[family-name:var(--font-display)] text-4xl leading-[1.15] text-[var(--ink)]">
+          <h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
             对准长辈手机上的二维码
-          </h1>
+          </h2>
           <p className="mt-4 text-base leading-8 text-[var(--muted)]">
-            扫描成功后，系统会自动将长辈的设备连接到您的账号。之后就能随时查看长辈的留言和使用动态。
+            扫描成功后，系统会自动把长辈的设备连接到当前账号。连接完成后，就能继续查看留言、动态和设备详情。
           </p>
 
-          <div className="mt-6 space-y-3 rounded-[28px] bg-[var(--paper-soft)] p-5 text-sm leading-7 text-[var(--muted)]">
+          <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-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)]">
+              如果当前设备没有摄像头，或者浏览器没有拿到拍照权限，可以回到设备页，改用粘贴设备码的方式继续连接。
+            </p>
+          </div>
+
           <div className="mt-6 flex flex-wrap gap-3">
             <Link
               href="/devices"
-              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)]"
+              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>
           </div>
-        </div>
+        </article>
 
         <ScanClient />
       </section>
-    </main>
+    </PanelShell>
   );
 }