登录界面优化

2026-10-03 23:06:36 +08:00 · 2026-06-12 11:00:26 +08:00
parent d9df78d2c7
commit 6a1f89936e
13 changed files with 474 additions and 353 deletions
@@ -0,0 +1,67 @@
+"use client"
+
+import type {ReactNode} from "react"
+import {motion} from "motion/react"
+import {WavesIcon} from "lucide-react"
+
+import {cn} from "@/lib/utils"
+
+interface AuthShellProps {
+  children: ReactNode
+  wide?: boolean
+}
+
+export function AuthShell({children, wide = false}: AuthShellProps) {
+  return (
+    <main className="relative flex min-h-screen w-full items-center justify-center overflow-x-hidden bg-background px-4 py-6 sm:px-8 sm:py-8 [@media(max-height:700px)]:py-3">
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] bg-[size:56px_56px] opacity-45 [mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]"
+      />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border/70"
+      />
+      <motion.section
+        initial={{opacity: 0, y: 18}}
+        animate={{opacity: 1, y: 0}}
+        transition={{duration: 0.45, ease: "easeOut"}}
+        className={cn(
+          "relative w-full border-x border-dashed border-border/80 bg-background/95 px-6 py-8 backdrop-blur-sm sm:px-10 sm:py-10 [@media(max-height:700px)]:py-5",
+          wide ? "max-w-2xl" : "max-w-xl",
+        )}
+      >
+        {children}
+      </motion.section>
+    </main>
+  )
+}
+
+interface AuthHeadingProps {
+  title: string
+  description: string
+  siteName?: string
+}
+
+export function AuthHeading({
+  title,
+  description,
+  siteName = "Wavelet",
+}: AuthHeadingProps) {
+  return (
+    <header className="flex flex-col gap-6 [@media(max-height:700px)]:gap-3">
+      <div className="flex items-center gap-3">
+        <span className="flex size-9 items-center justify-center rounded-full bg-foreground text-background [@media(max-height:700px)]:size-8">
+          <WavesIcon aria-hidden="true" />
+        </span>
+        <span className="font-semibold tracking-tight [@media(min-height:761px)]:text-lg">{siteName}</span>
+      </div>
+      <div className="flex flex-col gap-1.5 [@media(max-height:700px)]:gap-1">
+        <h1 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl [@media(min-height:900px)]:sm:text-4xl">
+          {title}
+        </h1>
+        <p className="text-sm text-muted-foreground [@media(min-height:900px)]:text-base">{description}</p>
+      </div>
+    </header>
+  )
+}