feat(ui): login rebuilt on shadcn card/label/input, theme toggle available pre-auth

frontend/src/pages/Login.tsx

@@ -1,20 +1,13 @@
-import { useState, type FormEvent, type ReactNode } from "react";
+import { useState, type FormEvent } from "react";
 import { Navigate, useLocation } from "react-router-dom";
-import { useAuth } from "../auth/AuthContext";
-import { IconBooks, IconLock, IconUser } from "../components/icons";
-import { toast } from "../components/Toaster";
-import { btnPrimary, card, input } from "../components/ui";
-
-function Field({ icon, children }: { icon: ReactNode; children: ReactNode }) {
-  return (
-    <label className="block">
-      <span className="relative block">
-        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-stone-500">{icon}</span>
-        {children}
-      </span>
-    </label>
-  );
-}
+import { BookMarked } from "lucide-react";
+import { useAuth } from "@/auth/AuthContext";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { toast } from "@/components/Toaster";
 
 export default function Login() {
   const { login, user } = useAuth();
@@ -38,42 +31,33 @@ export default function Login() {
   }
 
   return (
-    <div className="grid h-full place-items-center p-4">
-      <form onSubmit={submit} className={`${card} fx-rise w-full max-w-sm space-y-4 p-8 shadow-2xl shadow-black/40`}>
-        <div className="flex flex-col items-center pb-2 text-center">
-          <span className="grid size-12 place-items-center rounded-2xl bg-linear-to-br from-amber-500 to-orange-600 text-stone-950 shadow-lg shadow-amber-500/25">
-            <IconBooks className="size-7" />
-          </span>
-          <h1 className="mt-4 font-serif text-2xl font-semibold tracking-wide">
-            Book<span className="text-amber-400">Lib</span>
-          </h1>
-          <p className="mt-1 text-sm text-stone-500">你的漫画与书籍藏书馆</p>
-        </div>
-        <Field icon={<IconUser className="size-4" />}>
-          <input
-            className={input + " w-full pl-9"}
-            value={u}
-            onChange={(e) => setU(e.target.value)}
-            aria-label="用户名"
-            placeholder="用户名"
-            autoFocus
-            autoComplete="username"
-          />
-        </Field>
-        <Field icon={<IconLock className="size-4" />}>
-          <input
-            className={input + " w-full pl-9"}
-            type="password"
-            value={p}
-            onChange={(e) => setP(e.target.value)}
-            aria-label="密码"
-            placeholder="密码"
-            autoComplete="current-password"
-          />
-        </Field>
-        <button className={btnPrimary + " w-full justify-center py-2"} disabled={busy || !u || !p}>
-          {busy ? "登录中…" : "登录"}
-        </button>
+    <div className="relative grid h-full place-items-center p-4">
+      <div className="absolute right-3 top-3">
+        <ThemeToggle />
+      </div>
+      <form onSubmit={submit} className="fx-rise w-full max-w-sm">
+        <Card>
+          <CardHeader className="items-center text-center">
+            <span className="mb-2 grid size-10 place-items-center rounded-lg bg-accent text-accent-foreground">
+              <BookMarked className="size-5" />
+            </span>
+            <CardTitle className="text-xl tracking-tight">BookLib</CardTitle>
+            <CardDescription>你的漫画与书籍藏书馆</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-1.5">
+              <Label htmlFor="login-user">用户名</Label>
+              <Input id="login-user" value={u} onChange={(e) => setU(e.target.value)} autoFocus autoComplete="username" />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="login-pass">密码</Label>
+              <Input id="login-pass" type="password" value={p} onChange={(e) => setP(e.target.value)} autoComplete="current-password" />
+            </div>
+            <Button type="submit" className="w-full" disabled={busy || !u || !p}>
+              {busy ? "登录中…" : "登录"}
+            </Button>
+          </CardContent>
+        </Card>
       </form>
     </div>
   );