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

src/features/hall/hall-screen.tsx

@@ -9,9 +9,7 @@ import { HallWalletStrip } from "@/features/hall/hall-wallet-strip";
 import { JackpotBurstOverlay } from "@/features/hall/jackpot-burst-overlay";
 import { useHallDrawLive } from "@/features/hall/use-hall-draw-live";
 import { useJackpotBurstLive } from "@/features/hall/use-jackpot-burst-live";
-import { playerPageInset } from "@/lib/player-spacing";
-import { playerContentColumnClass } from "@/lib/player-viewport";
-import { cn } from "@/lib/utils";
+import { PlayerPanel } from "@/components/layout/player-panel";
 
 /**
  * 下注大厅：钱包条 §4 + 当期期号 §4.2（封盘置灰 / 倒计时错误色 / WS+轮询）；玩法目录 §12.3；下注表格 §13.3。
@@ -23,20 +21,13 @@ export function HallScreen() {
   const { burstEvent, clearBurstEvent } = useJackpotBurstLive(tp);
 
   return (
-    <div className={playerContentColumnClass}>
-      <section
-        className={cn(
-          "bg-white text-slate-900 lg:rounded-2xl lg:border lg:border-[#e4ebf5] lg:shadow-sm",
-          playerPageInset,
-        )}
-      >
+    <>
+      <PlayerPanel>
         <HallDrawPanel drawLive={drawLive} />
-
         <HallWalletStrip />
-
         <HallBettingGrid key={activeCurrency} drawLive={drawLive} />
-      </section>
+      </PlayerPanel>
       <JackpotBurstOverlay event={burstEvent} onClose={clearBurstEvent} />
-    </div>
+    </>
   );
 }

src/features/player/entry-gate.tsx

@@ -26,6 +26,7 @@ import { getPublicCurrencies } from "@/api/currency";
 import { getPlayerMe, getPlayerPing } from "@/api/player";
 import { isInIframe } from "@/components/iframe-bridge";
 import { LanguageSwitcher } from "@/components/language-switcher";
+import { EntryHeroBanner } from "@/features/player/entry-hero-banner";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { usePlayerSessionStore } from "@/stores/player-session-store";
@@ -431,24 +432,21 @@ export function EntryGate() {
 
   return (
     <div className="relative flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain bg-white">
-      <div className={cn("relative h-[45vh] min-h-[200px]", phase === "success" ? "bg-white" : "bg-red-600")}>
-        <div className="pointer-events-none absolute inset-0 overflow-hidden">
-          <Image
-            src={phase === "success" ? "/entry/image4.png" : "/entry/image1.png"}
-            alt={t("header.backgroundAlt")}
-            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} />
-        </div>
+      <div className="absolute left-0 right-0 top-0 z-20 hidden items-center px-4 py-3 lg:flex">
+        <LanguageSwitcher variant="header" showFlag={false} />
       </div>
 
-      <div className="flex flex-1 flex-col px-3 py-5">
+      <EntryHeroBanner
+        src={phase === "success" ? "/entry/image4.png" : "/entry/image1.png"}
+        alt={t("header.backgroundAlt")}
+        className={phase === "success" ? "bg-white" : "bg-red-600"}
+      >
+        <div className="absolute left-0 right-0 top-0 z-20 flex items-center px-4 py-3 lg:hidden">
+          <LanguageSwitcher variant="header" showFlag={false} />
+        </div>
+      </EntryHeroBanner>
+
+      <div className="flex flex-1 flex-col px-3 py-5 lg:justify-center lg:overflow-y-auto lg:px-10 lg:py-8">
         {phase === "loading" || waitingForEmbeddedToken ? (
           <div className="mx-auto w-full max-w-md lg:max-w-lg">
             <div className="mb-6 flex items-center gap-2">

src/features/player/entry-hero-banner.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import Image from "next/image";
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+type EntryHeroBannerProps = {
+  src: string;
+  alt?: string;
+  className?: string;
+  imageClassName?: string;
+  children?: ReactNode;
+};
+
+/** 登录/入场页插画：仅移动端顶部横幅。 */
+export function EntryHeroBanner({
+  src,
+  alt = "",
+  className,
+  imageClassName,
+  children,
+}: EntryHeroBannerProps) {
+  return (
+    <div
+      className={cn(
+        "relative shrink-0 overflow-hidden",
+        "h-[36vh] min-h-[168px] max-h-[260px]",
+        "lg:hidden",
+        className,
+      )}
+    >
+      <div className="pointer-events-none absolute inset-0">
+        <Image
+          src={src}
+          alt={alt}
+          fill
+          sizes="100vw"
+          className={cn("object-cover object-center", imageClassName)}
+          priority
+        />
+      </div>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,94 @@
+"use client";
+
+import type { TFunction } from "i18next";
+
+import { LanguageSwitcher } from "@/components/language-switcher";
+import { PlayerLoginForm } from "@/features/player/player-login-form";
+
+type PlayerLoginDesktopProps = {
+  t: TFunction<"entry">;
+  username: string;
+  password: string;
+  captchaCode: string;
+  captchaSrc: string | null;
+  loading: boolean;
+  loadingCaptcha: boolean;
+  onUsernameChange: (value: string) => void;
+  onPasswordChange: (value: string) => void;
+  onCaptchaCodeChange: (value: string) => void;
+  onRefreshCaptcha: () => void;
+  onSubmit: (event: React.FormEvent) => void;
+};
+
+/** PC 端登录：左右分栏卡片，左侧插画占位。 */
+export function PlayerLoginDesktop({
+  t,
+  username,
+  password,
+  captchaCode,
+  captchaSrc,
+  loading,
+  loadingCaptcha,
+  onUsernameChange,
+  onPasswordChange,
+  onCaptchaCodeChange,
+  onRefreshCaptcha,
+  onSubmit,
+}: PlayerLoginDesktopProps) {
+  return (
+    <div className="relative hidden min-h-0 flex-1 overflow-y-auto bg-[#eceef2] lg:flex lg:items-center lg:justify-center lg:px-8 lg:py-10">
+      <div
+        className="pointer-events-none absolute inset-0 opacity-40"
+        aria-hidden
+        style={{
+          backgroundImage:
+            "radial-gradient(circle at 12% 50%, rgba(220,38,38,0.08), transparent 28%), radial-gradient(circle at 88% 50%, rgba(220,38,38,0.08), transparent 28%)",
+        }}
+      />
+
+      <div className="relative z-10 flex w-full max-w-[1080px] min-h-[min(640px,88vh)] overflow-hidden rounded-[2rem] bg-white shadow-[0_24px_80px_rgba(15,23,42,0.12)]">
+        {/* 左侧插画：图片待替换 */}
+        <div
+          className="relative w-[min(46%,400px)] shrink-0 bg-gradient-to-br from-[#e11d1d] via-[#d41818] to-[#b91c1c]"
+          data-login-hero-slot
+        />
+
+        <div className="flex min-w-0 flex-1 flex-col px-8 py-8 sm:px-10 sm:py-10">
+          <div className="flex justify-end">
+            <LanguageSwitcher
+              variant="pill"
+              menuAlign="end"
+              showFlag={false}
+              useFullLabel
+            />
+          </div>
+
+          <div className="mx-auto flex w-full max-w-[24rem] flex-1 flex-col justify-center">
+            <h1 className="text-[1.75rem] font-bold tracking-tight text-gray-900">
+              {t("login.title")}
+            </h1>
+            <p className="mt-2 text-sm leading-relaxed text-gray-500">
+              {t("login.hint")}
+            </p>
+
+            <PlayerLoginForm
+              variant="desktop"
+              t={t}
+              username={username}
+              password={password}
+              captchaCode={captchaCode}
+              captchaSrc={captchaSrc}
+              loading={loading}
+              loadingCaptcha={loadingCaptcha}
+              onUsernameChange={onUsernameChange}
+              onPasswordChange={onPasswordChange}
+              onCaptchaCodeChange={onCaptchaCodeChange}
+              onRefreshCaptcha={onRefreshCaptcha}
+              onSubmit={onSubmit}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,176 @@
+"use client";
+
+import { Eye, EyeOff, KeyRound, Loader2, Lock, User } from "lucide-react";
+import { useState } from "react";
+import type { TFunction } from "i18next";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+type PlayerLoginFormProps = {
+  variant: "mobile" | "desktop";
+  t: TFunction<"entry">;
+  username: string;
+  password: string;
+  captchaCode: string;
+  captchaSrc: string | null;
+  loading: boolean;
+  loadingCaptcha: boolean;
+  onUsernameChange: (value: string) => void;
+  onPasswordChange: (value: string) => void;
+  onCaptchaCodeChange: (value: string) => void;
+  onRefreshCaptcha: () => void;
+  onSubmit: (event: React.FormEvent) => void;
+};
+
+export function PlayerLoginForm({
+  variant,
+  t,
+  username,
+  password,
+  captchaCode,
+  captchaSrc,
+  loading,
+  loadingCaptcha,
+  onUsernameChange,
+  onPasswordChange,
+  onCaptchaCodeChange,
+  onRefreshCaptcha,
+  onSubmit,
+}: PlayerLoginFormProps) {
+  const [showPassword, setShowPassword] = useState(false);
+  const isDesktop = variant === "desktop";
+
+  const inputClass = cn(
+    isDesktop && "h-10 rounded-xl border-gray-200 bg-white shadow-none",
+  );
+  const captchaButtonClass = cn(
+    "flex shrink-0 cursor-pointer items-center justify-center overflow-hidden border border-input bg-muted/40 transition-colors hover:bg-muted/60 disabled:pointer-events-none disabled:opacity-50",
+    isDesktop
+      ? "h-10 min-w-[8.5rem] rounded-xl border-gray-200 bg-[#f4fbf6]"
+      : "h-8 min-w-[7.5rem] rounded-lg px-2 text-sm",
+  );
+
+  return (
+    <form
+      className={cn("space-y-4", isDesktop ? "mt-8 space-y-5" : "mt-6")}
+      onSubmit={onSubmit}
+    >
+      <div className="space-y-1.5">
+        <Label htmlFor="login-user">{t("login.username")}</Label>
+        <div className="relative">
+          {isDesktop ? (
+            <User
+              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-gray-400"
+              aria-hidden
+            />
+          ) : null}
+          <Input
+            id="login-user"
+            value={username}
+            onChange={(e) => onUsernameChange(e.target.value)}
+            autoComplete="username"
+            disabled={loading}
+            placeholder={isDesktop ? t("login.usernamePlaceholder") : undefined}
+            className={cn(inputClass, isDesktop && "pl-10")}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-1.5">
+        <Label htmlFor="login-pass">{t("login.password")}</Label>
+        <div className="relative">
+          {isDesktop ? (
+            <Lock
+              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-gray-400"
+              aria-hidden
+            />
+          ) : null}
+          <Input
+            id="login-pass"
+            type={showPassword ? "text" : "password"}
+            value={password}
+            onChange={(e) => onPasswordChange(e.target.value)}
+            autoComplete="current-password"
+            disabled={loading}
+            placeholder={isDesktop ? t("login.passwordPlaceholder") : undefined}
+            className={cn(inputClass, isDesktop && "pr-10 pl-10")}
+          />
+          {isDesktop ? (
+            <button
+              type="button"
+              className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 transition-colors hover:text-gray-600"
+              onClick={() => setShowPassword((prev) => !prev)}
+              aria-label={showPassword ? t("login.hidePassword") : t("login.showPassword")}
+            >
+              {showPassword ? (
+                <EyeOff className="size-4" aria-hidden />
+              ) : (
+                <Eye className="size-4" aria-hidden />
+              )}
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="space-y-1.5">
+        <Label htmlFor="login-captcha">{t("login.captcha")}</Label>
+        <div className="flex items-stretch gap-3">
+          <div className="relative min-w-0 flex-1">
+            {isDesktop ? (
+              <KeyRound
+                className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-gray-400"
+                aria-hidden
+              />
+            ) : null}
+            <Input
+              id="login-captcha"
+              name="captcha"
+              autoComplete="off"
+              value={captchaCode}
+              onChange={(e) => onCaptchaCodeChange(e.target.value)}
+              placeholder={t("login.captchaPlaceholder")}
+              maxLength={32}
+              disabled={loading}
+              className={cn(inputClass, isDesktop && "pl-10")}
+            />
+          </div>
+          <button
+            type="button"
+            className={captchaButtonClass}
+            onClick={onRefreshCaptcha}
+            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=""
+                className="pointer-events-none block h-full w-auto max-w-full object-contain"
+              />
+            ) : (
+              <span className="px-1 text-xs text-muted-foreground">
+                {loadingCaptcha ? t("login.captchaLoading") : t("login.captchaFetch")}
+              </span>
+            )}
+          </button>
+        </div>
+      </div>
+
+      <Button
+        type="submit"
+        className={cn(
+          "w-full bg-red-600 hover:bg-red-700",
+          isDesktop && "mt-2 h-11 rounded-xl text-base font-medium",
+        )}
+        disabled={loading}
+      >
+        {loading ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
+        {t("login.submit")}
+      </Button>
+    </form>
+  );
+}

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>
+    </>
   );
-}
+}