全新UI语言

app/login/page.tsx

@@ -1,79 +1,27 @@
 import { redirect } from "next/navigation";
 
 import { AccountAuthForm } from "@/components/account-auth-form";
-import {
-  getCaregiverSession,
-  sanitizeCaregiverRedirectPath,
-} from "@/lib/session";
+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) {
+export default async function LoginPage({ searchParams }: PageProps<"/login">) {
   const caregiver = await getCaregiverSession();
-  const params = await searchParams;
-  const redirectTo = sanitizeCaregiverRedirectPath(
-    typeof params.redirectTo === "string" ? params.redirectTo : null,
-  );
-
-  if (caregiver) {
-    redirect(redirectTo);
-  }
+  const raw = (await searchParams).redirectTo;
+  const redirectTo = sanitizeCaregiverRedirectPath(typeof raw === "string" ? raw : 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} />
+    <main className="app-frame" style={{ display: "flex", alignItems: "center" }}>
+      <section style={{ width: "100%", padding: "28px 22px", display: "flex", flexDirection: "column", gap: 22 }}>
+        <div>
+          <div style={{ display: "flex", width: 52, height: 52, alignItems: "center", justifyContent: "center", borderRadius: 14, background: "var(--accent)", color: "#fff", fontSize: 22, fontWeight: 700 }}>安</div>
+          <h1 style={{ margin: "16px 0 0", fontSize: 24, lineHeight: 1.35 }}>安智伴 家属端</h1>
+          <p style={{ margin: "8px 0 0", color: "var(--muted)", fontSize: 13.5, lineHeight: 1.7 }}>用同一个账号，在每一台设备上继续守护。长辈的留言、对话与动态都按账号归属。</p>
         </div>
+        <AccountAuthForm redirectTo={redirectTo} />
+        <p className="muted-note" style={{ textAlign: "center" }}>登录后会自动回到刚才的页面，扫码和绑定流程不用重新开始。</p>
       </section>
     </main>
   );
-}
+}