59 lines
2.6 KiB
TypeScript
59 lines
2.6 KiB
TypeScript
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");
|
||
|
||
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 />
|
||
</section>
|
||
</PanelShell>
|
||
);
|
||
} |