feat: 添加国际化支持，优化语言切换器和登录界面，增强用户体验

2026-06-29 15:27:37 +08:00
parent 1a43e81fb4
commit ebc6f4d349
8 changed files with 181 additions and 100 deletions
--- a/src/components/i18n-hydration-provider.tsx
+++ b/src/components/i18n-hydration-provider.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+
+import { syncPreferredLanguage } from "@/i18n";
+
+const I18nHydrationContext = createContext(false);
+
+/** hydration 完成前保持 DEFAULT_LANGUAGE，与 SSR 一致；完成后再同步用户偏好语言。 */
+export function I18nHydrationProvider({ children }: { children: ReactNode }) {
+  const [hydrated, setHydrated] = useState(false);
+
+  useEffect(() => {
+    syncPreferredLanguage();
+    setHydrated(true);
+  }, []);
+
+  return (
+    <I18nHydrationContext.Provider value={hydrated}>{children}</I18nHydrationContext.Provider>
+  );
+}
+
+export function useI18nHydrated(): boolean {
+  return useContext(I18nHydrationContext);
+}
--- a/src/components/language-switcher.tsx
+++ b/src/components/language-switcher.tsx
@@ -6,8 +6,15 @@ import { ChevronDown, Globe } from "lucide-react";
 import { useMemo, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";

+import { useI18nHydrated } from "@/components/i18n-hydration-provider";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { normalizeLanguage, SUPPORTED_LANGUAGES, type AppLanguage } from "@/i18n";
+import zhCommon from "@/i18n/locales/zh/common.json";
+import {
+  DEFAULT_LANGUAGE,
+  normalizeLanguage,
+  SUPPORTED_LANGUAGES,
+  type AppLanguage,
+} from "@/i18n";
 import { playerViewportPopoverMaxClass } from "@/lib/player-viewport";
 import { cn } from "@/lib/utils";

@@ -33,6 +40,7 @@ export function LanguageSwitcher({
  const { i18n, t } = useTranslation("common");
  const active = normalizeLanguage(i18n.language) as AppLanguage;
  const [isOpen, setIsOpen] = useState(false);
+  const mounted = useI18nHydrated();

  const options = useMemo(
    () =>
@@ -49,9 +57,14 @@ export function LanguageSwitcher({
    setIsOpen(false);
  }

-  const currentLabel = useFullLabel
-    ? (options.find((o) => o.code === active)?.label ?? active.toUpperCase())
-    : (options.find((o) => o.code === active)?.short ?? active.toUpperCase());
+  const displayLang = mounted ? active : DEFAULT_LANGUAGE;
+  const currentLabel = mounted
+    ? useFullLabel
+      ? (options.find((o) => o.code === displayLang)?.label ?? displayLang.toUpperCase())
+      : (options.find((o) => o.code === displayLang)?.short ?? displayLang.toUpperCase())
+    : useFullLabel
+      ? zhCommon.language[displayLang]
+      : zhCommon.languageShort[displayLang];
  const currentFlag = options.find((o) => o.code === active)?.flag ?? "";

  const variantStyles = {
@@ -105,7 +118,9 @@ export function LanguageSwitcher({
          >
            <Globe className="size-4" aria-hidden />
            {showFlag && currentFlag ? <span className="text-base">{currentFlag}</span> : null}
-            {showLabel ? <span>{currentLabel}</span> : null}
+            {showLabel ? (
+              <span suppressHydrationWarning>{currentLabel}</span>
+            ) : null}
            <ChevronDown
              className={cn("size-4 transition-transform duration-200", isOpen && "rotate-180")}
              aria-hidden
--- a/src/components/providers.tsx
+++ b/src/components/providers.tsx
@@ -1,7 +1,8 @@
 "use client";

-import { useEffect, type ReactNode } from "react";
+import type { ReactNode } from "react";

+import { I18nHydrationProvider } from "@/components/i18n-hydration-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { ErrorProvider } from "@/components/error-provider";
 import { IframeBridge } from "@/components/iframe-bridge";
@@ -9,19 +10,15 @@ import { PlayEffectiveWsListener } from "@/components/play-effective-ws-listener
 import { PlayerBalanceWsListener } from "@/components/player-balance-ws-listener";
 import { TokenSilentRefresh } from "@/components/token-silent-refresh";
 import "@/i18n";
-import { syncPreferredLanguage } from "@/i18n";

 type ProvidersProps = {
  children: ReactNode;
 };

 export function Providers({ children }: ProvidersProps): ReactNode {
-  useEffect(() => {
-    syncPreferredLanguage();
-  }, []);
-
  return (
    <>
+      <I18nHydrationProvider>
      <ErrorProvider>
        {/* iframe 通信桥接 - 支持主站嵌入 */}
        <IframeBridge>
@@ -32,6 +29,7 @@ export function Providers({ children }: ProvidersProps): ReactNode {
          <TokenSilentRefresh />
        </IframeBridge>
      </ErrorProvider>
+      </I18nHydrationProvider>
      <Toaster />
    </>
  );
--- a/src/features/player/entry-hero-banner.tsx
+++ b/src/features/player/entry-hero-banner.tsx
@@ -24,22 +24,19 @@ export function EntryHeroBanner({
  return (
    <div
      className={cn(
-        "relative shrink-0 overflow-hidden",
-        "h-[36vh] min-h-[168px] max-h-[260px]",
-        "lg:hidden",
+        "relative w-full shrink-0 overflow-hidden 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>
+      <Image
+        src={src}
+        alt={alt}
+        width={1228}
+        height={1108}
+        sizes="(max-width: 480px) 100vw, 480px"
+        className={cn("block h-auto w-full", imageClassName)}
+        priority
+      />
      {children}
    </div>
  );
--- a/src/features/player/player-login-desktop.tsx
+++ b/src/features/player/player-login-desktop.tsx
@@ -1,6 +1,7 @@
 "use client";

 import type { TFunction } from "i18next";
+import Image from "next/image";

 import { LanguageSwitcher } from "@/components/language-switcher";
 import { PlayerLoginForm } from "@/features/player/player-login-form";
@@ -20,7 +21,7 @@ type PlayerLoginDesktopProps = {
  onSubmit: (event: React.FormEvent) => void;
 };

-/** PC 端登录：左右分栏卡片，左侧插画占位。 */
+/** PC 端登录：左右分栏卡片，小屏桌面下收紧高度与留白。 */
 export function PlayerLoginDesktop({
  t,
  username,
@@ -36,7 +37,10 @@ export function PlayerLoginDesktop({
  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="relative hidden min-h-0 flex-1 overflow-y-auto bg-[#eceef2] lg:flex lg:items-center lg:justify-center lg:px-4 lg:py-4 xl:px-8 xl:py-10"
+      data-login-desktop-root
+    >
      <div
        className="pointer-events-none absolute inset-0 opacity-40"
        aria-hidden
@@ -46,14 +50,26 @@ export function PlayerLoginDesktop({
        }}
      />

-      <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 z-10 flex min-h-[min(560px,calc(100dvh-2rem))] w-full max-w-[960px] overflow-hidden rounded-[1.5rem] bg-white shadow-[0_24px_80px_rgba(15,23,42,0.12)] xl:min-h-[min(640px,88vh)] xl:max-w-[1080px] xl:rounded-[2rem]"
+        data-login-desktop-card
+      >
+        {/* 左侧插画：暂用移动端同款 image1，后续可替换 */}
        <div
-          className="relative w-[min(46%,400px)] shrink-0 bg-gradient-to-br from-[#e11d1d] via-[#d41818] to-[#b91c1c]"
+          className="relative w-[min(42%,340px)] shrink-0 overflow-hidden bg-[#f8fafc] xl:w-[min(46%,400px)]"
          data-login-hero-slot
-        />
+        >
+          <Image
+            src="/entry/image1.png"
+            alt=""
+            fill
+            sizes="(max-width: 1280px) 340px, 400px"
+            className="object-cover object-center"
+            priority
+          />
+        </div>

-        <div className="flex min-w-0 flex-1 flex-col px-8 py-8 sm:px-10 sm:py-10">
+        <div className="flex min-w-0 flex-1 flex-col px-6 py-5 xl:px-10 xl:py-10">
          <div className="flex justify-end">
            <LanguageSwitcher
              variant="pill"
@@ -63,14 +79,7 @@ export function PlayerLoginDesktop({
            />
          </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>
-
+          <div className="mx-auto flex w-full max-w-[23rem] flex-1 flex-col justify-center xl:max-w-[24rem]">
            <PlayerLoginForm
              variant="desktop"
              t={t}
@@ -91,4 +100,4 @@ export function PlayerLoginDesktop({
      </div>
    </div>
  );
-}
+}
--- a/src/features/player/player-login-form.tsx
+++ b/src/features/player/player-login-form.tsx
@@ -43,51 +43,47 @@ export function PlayerLoginForm({
  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 inputClass =
+    "h-10 rounded-xl border-gray-200 bg-white text-base 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",
+    "flex h-10 min-w-[8.5rem] shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-gray-200 bg-[#f4fbf6] transition-colors hover:bg-[#eaf7ee] disabled:pointer-events-none disabled:opacity-50",
  );

  return (
    <form
-      className={cn("space-y-4", isDesktop ? "mt-8 space-y-5" : "mt-6")}
+      className={cn("space-y-5", isDesktop ? "mt-5 xl:mt-8" : "mt-6")}
      onSubmit={onSubmit}
    >
      <div className="space-y-1.5">
-        <Label htmlFor="login-user">{t("login.username")}</Label>
+        <Label htmlFor="login-user" className="text-gray-700">
+          {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}
+          <User
+            className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-gray-400"
+            aria-hidden
+          />
          <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")}
+            placeholder={t("login.usernamePlaceholder")}
+            className={cn(inputClass, "pl-10")}
          />
        </div>
      </div>

      <div className="space-y-1.5">
-        <Label htmlFor="login-pass">{t("login.password")}</Label>
+        <Label htmlFor="login-pass" className="text-gray-700">
+          {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}
+          <Lock
+            className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-gray-400"
+            aria-hidden
+          />
          <Input
            id="login-pass"
            type={showPassword ? "text" : "password"}
@@ -95,36 +91,34 @@ export function PlayerLoginForm({
            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")}
+            placeholder={t("login.passwordPlaceholder")}
+            className={cn(inputClass, "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}
+          <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>
        </div>
      </div>

      <div className="space-y-1.5">
-        <Label htmlFor="login-captcha">{t("login.captcha")}</Label>
+        <Label htmlFor="login-captcha" className="text-gray-700">
+          {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}
+            <KeyRound
+              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-gray-400"
+              aria-hidden
+            />
            <Input
              id="login-captcha"
              name="captcha"
@@ -134,7 +128,7 @@ export function PlayerLoginForm({
              placeholder={t("login.captchaPlaceholder")}
              maxLength={32}
              disabled={loading}
-              className={cn(inputClass, isDesktop && "pl-10")}
+              className={cn(inputClass, "pl-10")}
            />
          </div>
          <button
@@ -162,10 +156,7 @@ export function PlayerLoginForm({

      <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",
-        )}
+        className="mt-1 h-11 w-full rounded-xl bg-red-600 text-base font-medium hover:bg-red-700"
        disabled={loading}
      >
        {loading ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
--- a/src/features/player/player-login-screen.tsx
+++ b/src/features/player/player-login-screen.tsx
@@ -3,6 +3,8 @@
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+
+import { useHydrationSafeEntryT } from "@/i18n/hydration-t";
 import { toast } from "sonner";

 import { getPlayerMe } from "@/api/player";
@@ -30,7 +32,8 @@ function stripSearchParamFromBrowserUrl(name: string): void {
 }

 export function PlayerLoginScreen(): React.ReactElement {
-  const { t } = useTranslation("entry");
+  const { t: tErrors } = useTranslation("entry");
+  const t = useHydrationSafeEntryT();
  const tRef = useRef(t);
  useEffect(() => {
    tRef.current = t;
@@ -87,9 +90,9 @@ export function PlayerLoginScreen(): React.ReactElement {

    sessionExpiredHandled.current = true;
    clearBearerToken();
-    toast.error(t("errors.sessionExpired"));
+    toast.error(tErrors("errors.sessionExpired"));
    stripSearchParamFromBrowserUrl("session");
-  }, [clearBearerToken, searchParams, t]);
+  }, [clearBearerToken, searchParams, tErrors]);

  async function handleSubmit(event: React.FormEvent): Promise<void> {
    event.preventDefault();
@@ -173,11 +176,8 @@ export function PlayerLoginScreen(): React.ReactElement {
          </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>
-
+        <div className="mx-auto flex w-full max-w-md flex-1 flex-col px-5 py-6">
+          <div className="w-full rounded-2xl bg-white px-1 py-2">
            <PlayerLoginForm variant="mobile" {...formProps} />
          </div>
        </div>
--- a/src/i18n/hydration-t.ts
+++ b/src/i18n/hydration-t.ts
@@ -0,0 +1,46 @@
+"use client";
+
+import type { TFunction } from "i18next";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useI18nHydrated } from "@/components/i18n-hydration-provider";
+import { DEFAULT_LANGUAGE, type AppLanguage } from "@/i18n/language";
+import enEntry from "@/i18n/locales/en/entry.json";
+import neEntry from "@/i18n/locales/ne/entry.json";
+import zhEntry from "@/i18n/locales/zh/entry.json";
+
+const STATIC_ENTRY: Record<AppLanguage, typeof zhEntry> = {
+  zh: zhEntry,
+  en: enEntry,
+  ne: neEntry,
+};
+
+function getStaticValue(obj: Record<string, unknown>, key: string): string {
+  const parts = key.split(".");
+  let cur: unknown = obj;
+  for (const part of parts) {
+    if (cur == null || typeof cur !== "object") return key;
+    cur = (cur as Record<string, unknown>)[part];
+  }
+  return typeof cur === "string" ? cur : key;
+}
+
+function createStaticEntryT(): TFunction<"entry"> {
+  const fn = ((key: string) =>
+    getStaticValue(STATIC_ENTRY[DEFAULT_LANGUAGE] as Record<string, unknown>, key)) as TFunction<
+    "entry"
+  >;
+  return fn;
+}
+
+/** entry 命名空间：hydration 前固定 DEFAULT_LANGUAGE 文案，避免 SSR/客户端首屏不一致。 */
+export function useHydrationSafeEntryT(): TFunction<"entry"> {
+  const hydrated = useI18nHydrated();
+  const { t } = useTranslation("entry");
+
+  return useMemo(
+    () => (hydrated ? t : createStaticEntryT()),
+    [hydrated, t],
+  );
+}