feat: 增加登录页面的桌面和移动端支持，优化语言切换器和表单组件

src/features/player/player-login-screen.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { Loader2 } from "lucide-react";
-import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,9 +9,9 @@ import { getPlayerMe } from "@/api/player";
 import { getPlayerAuthCaptcha, postPlayerAuthLogin } from "@/api/player-auth";
 import { getPublicCurrencies } from "@/api/currency";
 import { LanguageSwitcher } from "@/components/language-switcher";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { EntryHeroBanner } from "@/features/player/entry-hero-banner";
+import { PlayerLoginDesktop } from "@/features/player/player-login-desktop";
+import { PlayerLoginForm } from "@/features/player/player-login-form";
 import { usePlayerSessionStore } from "@/stores/player-session-store";
 import {
   validatePlayerLoginPassword,
@@ -149,91 +147,41 @@ export function PlayerLoginScreen(): React.ReactElement {
     }
   }
 
+  const formProps = {
+    t,
+    username,
+    password,
+    captchaCode,
+    captchaSrc,
+    loading,
+    loadingCaptcha,
+    onUsernameChange: setUsername,
+    onPasswordChange: setPassword,
+    onCaptchaCodeChange: setCaptchaCode,
+    onRefreshCaptcha: () => void loadCaptcha(),
+    onSubmit: (event: React.FormEvent) => void handleSubmit(event),
+  };
+
   return (
-    <div className="relative flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain bg-white">
-      <div className="relative h-[45vh] min-h-[200px] shrink-0 overflow-hidden bg-[#f8fafc]">
-        <div className="pointer-events-none absolute inset-0">
-          <Image src="/entry/image1.png" alt="" fill sizes="100vw" className="object-cover object-center" priority />
-        </div>
-        <div className="absolute left-0 right-0 top-0 z-20 flex items-center px-4 py-3">
-          <LanguageSwitcher variant="header" showFlag={false} />
+    <>
+      <PlayerLoginDesktop {...formProps} />
+
+      <div className="relative flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain bg-white lg:hidden">
+        <EntryHeroBanner src="/entry/image1.png" alt="" className="bg-[#f8fafc]">
+          <div className="absolute left-0 right-0 top-0 z-20 flex items-center px-4 py-3">
+            <LanguageSwitcher variant="header" showFlag={false} />
+          </div>
+        </EntryHeroBanner>
+
+        <div className="mx-auto flex w-full max-w-md flex-1 flex-col px-4 py-8">
+          <div className="w-full max-w-md">
+            <h1 className="text-xl font-bold text-gray-900">{t("login.title")}</h1>
+            <p className="mt-2 text-sm text-muted-foreground">{t("login.hint")}</p>
+
+            <PlayerLoginForm variant="mobile" {...formProps} />
+          </div>
         </div>
       </div>
-
-      <div className="mx-auto w-full max-w-md flex-1 px-4 py-8 lg:max-w-lg lg:px-8">
-        <h1 className="text-xl font-bold text-gray-900">
-          {t("login.title")}
-        </h1>
-        <p className="mt-2 text-sm text-muted-foreground">
-          {t("login.hint")}
-        </p>
-
-        <form className="mt-6 space-y-4" onSubmit={(e) => void handleSubmit(e)}>
-          <div className="space-y-1">
-            <Label htmlFor="login-user">{t("login.username")}</Label>
-            <Input
-              id="login-user"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              autoComplete="username"
-              disabled={loading}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="login-pass">{t("login.password")}</Label>
-            <Input
-              id="login-pass"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              autoComplete="current-password"
-              disabled={loading}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="login-captcha">{t("login.captcha")}</Label>
-            <div className="flex flex-wrap items-center gap-3">
-              <Input
-                id="login-captcha"
-                name="captcha"
-                autoComplete="off"
-                value={captchaCode}
-                onChange={(e) => setCaptchaCode(e.target.value)}
-                placeholder={t("login.captchaPlaceholder")}
-                maxLength={32}
-                disabled={loading}
-                className="min-w-0 flex-1"
-              />
-              <button
-                type="button"
-                className="flex h-10 min-w-[156px] shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border border-input bg-muted/40 px-2 transition-colors hover:bg-muted/60 disabled:pointer-events-none disabled:opacity-50"
-                onClick={() => void loadCaptcha()}
-                disabled={loadingCaptcha || loading}
-                aria-label={loadingCaptcha ? t("login.captchaLoading") : t("login.captchaRefresh")}
-              >
-                {captchaSrc ? (
-                  // eslint-disable-next-line @next/next/no-img-element -- captcha SVG data URL from API
-                  <img
-                    src={captchaSrc}
-                    alt=""
-                    width={160}
-                    height={48}
-                    className="pointer-events-none block"
-                  />
-                ) : (
-                  <span className="px-2 text-xs text-muted-foreground">
-                    {loadingCaptcha ? t("login.captchaLoading") : t("login.captchaFetch")}
-                  </span>
-                )}
-              </button>
-            </div>
-          </div>
-          <Button type="submit" className="w-full bg-red-600 hover:bg-red-700" disabled={loading}>
-            {loading ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
-            {t("login.submit")}
-          </Button>
-        </form>
-      </div>
-    </div>
+    </>
   );
-}
+}