添加账号系统

2026-04-17 12:58:38 +08:00
parent 032e207888
commit d3b03cecf2
27 changed files with 931 additions and 254 deletions
@@ -0,0 +1,79 @@
+import { redirect } from "next/navigation";
+
+import { AccountAuthForm } from "@/components/account-auth-form";
+import {
+  getCaregiverSession,
+  sanitizeCaregiverRedirectPath,
+} from "@/lib/session";
+
+export const dynamic = "force-dynamic";
+
+type LoginPageProps = {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+};
+
+export default async function LoginPage({ searchParams }: LoginPageProps) {
+  const caregiver = await getCaregiverSession();
+  const params = await searchParams;
+  const redirectTo = sanitizeCaregiverRedirectPath(
+    typeof params.redirectTo === "string" ? params.redirectTo : null,
+  );
+
+  if (caregiver) {
+    redirect(redirectTo);
+  }
+
+  return (
+    <main className="mx-auto flex min-h-screen max-w-6xl items-center px-4 py-8 sm:px-6 lg:px-8">
+      <section className="grid w-full gap-6 lg:grid-cols-[0.95fr_1.05fr]">
+        <div className="relative overflow-hidden rounded-[40px] border border-white/75 bg-[linear-gradient(160deg,rgba(53,84,141,0.95),rgba(28,45,80,0.94))] p-7 text-white shadow-[0_36px_90px_rgba(53,84,141,0.24)] sm:p-8">
+          <div className="absolute -right-10 top-[-40px] h-44 w-44 rounded-full bg-white/10 blur-2xl" />
+          <div className="absolute bottom-[-48px] left-[-12px] h-40 w-40 rounded-full border border-white/16" />
+
+          <p className="relative text-sm font-semibold tracking-[0.22em] text-white/78 uppercase">
+            家人连线
+          </p>
+          <h1 className="relative mt-5 font-[family-name:var(--font-display)] text-4xl leading-[1.18] sm:text-5xl">
+            用同一个账号，
+            <br />
+            在每一台家属设备上继续守护
+          </h1>
+          <p className="relative mt-5 max-w-2xl text-base leading-8 text-white/78 sm:text-lg">
+            现在开始，设备连接、留言记录和消息提醒都按账号归属。您在手机、平板或电脑上登录同一个账号，长辈发来的新留言都会一起送达。
+          </p>
+
+          <div className="relative mt-8 grid gap-3">
+            {[
+              "绑定过的长辈设备会跟随账号保留，不再分散到不同浏览器会话。",
+              "一台设备开了提醒，另一台设备也登录同一个账号时，同样可以独立接收推送。",
+              "登录后会自动回到刚才的页面，扫码和绑定流程不用重新开始。",
+            ].map((item) => (
+              <div
+                key={item}
+                className="rounded-[22px] border border-white/12 bg-white/8 px-5 py-4 text-sm leading-7 text-white/84"
+              >
+                {item}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-5">
+          <div className="rounded-[32px] border border-white/75 bg-white/80 p-6 shadow-[0_26px_60px_rgba(115,76,42,0.12)] sm:p-7">
+            <p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
+              账号登录
+            </p>
+            <h2 className="mt-3 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
+              先登录，再继续刚才的操作
+            </h2>
+            <p className="mt-3 text-sm leading-7 text-[var(--muted)]">
+              如果您刚刚在扫码或添加设备，登录完成后会自动回到原来的页面，不需要重新输入。
+            </p>
+          </div>
+
+          <AccountAuthForm redirectTo={redirectTo} />
+        </div>
+      </section>
+    </main>
+  );
+}