添加家人绑定

app/scan/page.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+
+import { ScanClient } from "@/components/scan-client";
+
+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">
+          <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)]">
+            对准老人手机里的家人连接二维码
+          </h1>
+          <p className="mt-4 text-base leading-8 text-[var(--muted)]">
+            扫描成功后，系统会自动把老人的本机 UUID 绑定到当前家属账号。之后，您就能看见老人的留言、最近对话和使用记录。
+          </p>
+
+          <div className="mt-6 space-y-3 rounded-[28px] 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="/"
+              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>
+
+        <ScanClient />
+      </section>
+    </main>
+  );
+}