全新UI语言

app/scan/page.tsx

@@ -9,51 +9,15 @@ export const dynamic = "force-dynamic";
 
 export default async function ScanPage() {
   const caregiver = await requireCaregiverSession("/scan");
-
   return (
-    <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>
-          <h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
-            对准长辈手机上的二维码
-          </h2>
-          <p className="mt-4 text-base leading-8 text-[var(--muted)]">
-            扫描成功后，系统会自动把长辈的设备连接到当前账号。连接完成后，就能继续查看留言、动态和设备详情。
-          </p>
-
-          <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 bg-[var(--olive)] px-5 text-sm font-semibold text-white transition hover:bg-[var(--olive-deep)]"
-            >
-              返回设备页
-            </Link>
-          </div>
-        </article>
-
-        <ScanClient />
+    <PanelShell currentPath="/scan" title="扫码绑定" caregiverLabel={getCaregiverDisplayName(caregiver)} backHref="/devices">
+      <div className="scan-panel"><ScanClient /></div>
+      <section className="card card-pad" style={{ color: "var(--muted)", fontSize: 12.5, lineHeight: 1.7 }}>
+        <p style={{ margin: 0 }}>1. 让长辈打开陪伴屏上的「家人连接」页面。</p>
+        <p style={{ margin: "4px 0 0" }}>2. 将镜头对准屏幕上的二维码，保持一两秒。</p>
+        <p style={{ margin: "4px 0 0" }}>3. 识别成功后自动完成绑定并返回设备页。</p>
       </section>
+      <Link href="/devices" className="btn block">没有摄像头？改用设备码连接</Link>
     </PanelShell>
   );
-}
+}