refactor(layout, i18n, admin): 优化布局结构与多语言支持

调整 AdminShell 组件的子组件顺序，提升代码可读性。更新 admin-breadcrumb 组件，简化导航标签翻译逻辑，确保多语言支持的一致性。重构 admin-language-switcher 组件，优化语言切换的用户体验，增强界面交互性。更新多语言配置，新增登录界面的副标题，提升用户体验。
2026-05-30 17:46:27 +08:00
parent 36117144dc
commit a550c418e5
64 changed files with 3405 additions and 1378 deletions
--- a/src/components/admin/admin-auth-checking.tsx
+++ b/src/components/admin/admin-auth-checking.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import Image from "next/image";
+import type { ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+
+import { AdminLanguageSwitcher } from "@/components/admin/admin-language-switcher";
+import { ModuleScaffold } from "@/components/admin/module-scaffold";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { authModuleMeta } from "@/modules/auth/meta";
+
+function LoginCheckingBackdrop(): ReactElement {
+  return (
+    <>
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_85%_50%_at_50%_-5%,rgb(59_130_246/0.09),transparent)] dark:bg-[radial-gradient(ellipse_85%_50%_at_50%_-5%,rgb(56_189_248/0.12),transparent)]"
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_bottom,transparent_0%,var(--background)_100%)] opacity-90"
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 opacity-[0.35] dark:opacity-[0.2]"
+        style={{
+          backgroundImage: `linear-gradient(to right, var(--border) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--border) 1px, transparent 1px)`,
+          backgroundSize: "48px 48px",
+        }}
+      />
+    </>
+  );
+}
+
+function LoginCheckingSkeletonCard(): ReactElement {
+  const { t } = useTranslation("auth");
+
+  return (
+    <Card className="relative w-full max-w-[420px] rounded-2xl border border-border/70 bg-card/90 shadow-2xl shadow-black/[0.06] ring-1 ring-black/[0.03] backdrop-blur-md dark:border-border/50 dark:bg-card/85 dark:shadow-black/25 dark:ring-white/[0.06]">
+      <CardHeader className="flex flex-row items-center gap-3.5 border-b border-border/60 px-6 py-6 sm:px-8">
+        <Skeleton className="size-10 shrink-0 rounded-xl" />
+        <div className="min-w-0 flex-1 space-y-2">
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="h-3.5 w-48 max-w-full" />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-5 px-6 pb-8 pt-6 sm:px-8">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-12" />
+          <Skeleton className="h-11 w-full rounded-md" />
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-12" />
+          <Skeleton className="h-11 w-full rounded-md" />
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-14" />
+          <div className="flex gap-3">
+            <Skeleton className="h-11 min-w-0 flex-1 rounded-md" />
+            <Skeleton className="h-11 w-[156px] shrink-0 rounded-xl" />
+          </div>
+        </div>
+        <Skeleton className="mt-2 h-11 w-full rounded-md" />
+      </CardContent>
+      <span className="sr-only">
+        {t("loginTitle", { defaultValue: authModuleMeta.title })}
+      </span>
+    </Card>
+  );
+}
+
+/** 工作台内容区骨架（外层已由 {@link AdminShell} 提供侧栏与顶栏） */
+export function AdminShellContentSkeleton(): ReactElement {
+  const { t } = useTranslation("common");
+
+  return (
+    <ModuleScaffold className="gap-5">
+      <span className="sr-only" role="status" aria-live="polite">
+        {t("auth.checking", { defaultValue: "Checking sign-in status…" })}
+      </span>
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="space-y-2">
+          <Skeleton className="h-5 w-28" />
+          <Skeleton className="h-3 w-36" />
+        </div>
+        <Skeleton className="h-8 w-16 rounded-md" />
+      </div>
+
+      <Skeleton className="h-[5.5rem] w-full rounded-xl" />
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="h-[11.5rem] w-full rounded-xl" />
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
+        <Skeleton className="h-72 rounded-xl xl:col-span-8" />
+        <Skeleton className="h-72 rounded-xl xl:col-span-4" />
+      </div>
+    </ModuleScaffold>
+  );
+}
+
+export function AdminAuthCheckingScreen({
+  variant,
+}: {
+  variant: "login" | "shell";
+}): ReactElement {
+  const { t } = useTranslation("common");
+
+  if (variant === "login") {
+    return (
+      <div
+        className="relative flex h-dvh max-h-dvh w-full min-h-0 flex-col overflow-hidden lg:flex-row"
+        role="status"
+        aria-busy="true"
+        aria-live="polite"
+        aria-label={t("auth.checking", { defaultValue: "Checking sign-in status…" })}
+      >
+        <LoginCheckingBackdrop />
+
+        <div className="relative z-10 flex min-h-0 max-h-[38dvh] shrink-0 items-center justify-center overflow-hidden px-6 py-4 lg:max-h-none lg:w-1/2 lg:flex-1 lg:px-10 lg:py-8">
+          <Image
+            src="/illustration.png"
+            alt=""
+            width={1024}
+            height={1536}
+            priority
+            className="mx-auto max-h-full w-auto max-w-full object-contain opacity-95"
+          />
+        </div>
+
+        <div className="relative z-10 flex min-h-0 flex-1 flex-col items-center justify-center overflow-y-auto px-4 py-6 lg:w-1/2 lg:py-8">
+          <div className="absolute right-4 top-4 z-20 sm:right-6 sm:top-6">
+            <AdminLanguageSwitcher />
+          </div>
+          <LoginCheckingSkeletonCard />
+        </div>
+      </div>
+    );
+  }
+
+  return <AdminShellContentSkeleton />;
+}
--- a/src/components/admin/admin-breadcrumb.tsx
+++ b/src/components/admin/admin-breadcrumb.tsx
@@ -11,6 +11,7 @@ import {
  BreadcrumbPage,
  BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { adminNavLabel } from "@/lib/admin-nav-label";
 import { ADMIN_BASE } from "@/modules/_config/admin-nav";
 import { useAdminProfile } from "@/stores/admin-session";
 import React from "react";
@@ -21,29 +22,6 @@ const DRAW_ROUTE_LABELS: Record<string, string> = {
  results: "Results",
 };

-const NAV_TRANSLATION_KEYS: Record<string, string> = {
-  dashboard: "dashboard",
-  admin_users: "admin_users",
-  admin_roles: "admin_roles",
-  players: "players",
-  currencies: "currencies",
-  wallet: "wallet",
-  draws: "draws",
-  rules_plays: "rules_plays",
-  rules_odds: "rules_odds",
-  jackpot: "jackpot",
-  risk_cap: "risk_cap",
-  risk: "risk",
-  settlement: "settlement",
-  reconcile: "reconcile",
-  reports: "reports",
-  tickets: "tickets",
-  audit: "audit",
-  settings: "settings",
-  integration: "integration",
-  config: "config",
-};
-
 const RULES_ROUTE_LABELS: Record<string, string> = {
  plays: "nav.items.plays",
  odds: "nav.rulesOddsTitle",
@@ -113,13 +91,7 @@ export function AdminBreadcrumb() {
        .sort((a, b) => b.href.length - a.href.length)[0];

      if (navItem && navItem.href !== ADMIN_BASE) {
-        const translatedNavLabel =
-          NAV_TRANSLATION_KEYS[navItem.segment] != null
-            ? t(`nav.${NAV_TRANSLATION_KEYS[navItem.segment]}`, {
-                ns: "common",
-                defaultValue: navItem.label,
-              })
-            : navItem.label;
+        const translatedNavLabel = adminNavLabel(navItem.segment, t, navItem.label);
        breadcrumbs.push({
          label: translatedNavLabel,
          href: navItem.href,
--- a/src/components/admin/admin-language-switcher.tsx
+++ b/src/components/admin/admin-language-switcher.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { CheckIcon, GlobeIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, GlobeIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -22,12 +22,6 @@ import {
 } from "@/lib/admin-locale";
 import { cn } from "@/lib/utils";

-const LOCALE_FLAGS: Record<AdminApiLocale, string> = {
-  zh: "🇨🇳",
-  en: "🇺🇸",
-  ne: "🇳🇵",
-};
-
 export function AdminLanguageSwitcher() {
  const { i18n, t } = useTranslation("common");
  // Match SSR: do not read document/localStorage until after mount.
@@ -57,25 +51,27 @@ export function AdminLanguageSwitcher() {
    );
  }

-  const currentFlag = LOCALE_FLAGS[locale];
+  const currentLabel = t(`language.${locale}`);

  return (
    <DropdownMenu>
-      <DropdownMenuTrigger className="inline-flex h-8 items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2 text-left text-slate-700 shadow-[0_1px_2px_rgba(15,23,42,0.04)] outline-none transition hover:border-slate-300 hover:bg-slate-50 focus-visible:ring-2 focus-visible:ring-ring">
-        <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs">
-          {currentFlag}
-        </span>
+      <DropdownMenuTrigger
+        aria-label={t("language.title")}
+        className="inline-flex h-9 max-w-[9rem] items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring"
+      >
        <GlobeIcon
-          className="size-4 shrink-0 stroke-[1.75] text-slate-400 sm:hidden"
+          className="size-4 shrink-0 text-muted-foreground"
+          aria-hidden
+        />
+        <span className="min-w-0 truncate">{currentLabel}</span>
+        <ChevronDownIcon
+          className="size-3.5 shrink-0 text-muted-foreground/80"
          aria-hidden
        />
      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="end"
-        className="w-[188px] overflow-hidden rounded-xl border border-slate-200 bg-white p-1 shadow-[0_16px_40px_rgba(15,23,42,0.12)]"
-      >
-        <DropdownMenuGroup className="space-y-0.5">
-          <DropdownMenuLabel className="sr-only">
+      <DropdownMenuContent align="end" className="min-w-[10.5rem]">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className="text-xs text-muted-foreground">
            {t("language.title")}
          </DropdownMenuLabel>
          {ADMIN_API_LOCALES.map((code) => {
@@ -85,29 +81,17 @@ export function AdminLanguageSwitcher() {
              <DropdownMenuItem
                key={code}
                className={cn(
-                  "flex min-h-[42px] items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-slate-700 outline-none transition",
-                  active
-                    ? "border-rose-100 bg-rose-50 text-rose-600"
-                    : "hover:bg-slate-50 focus:bg-slate-50",
+                  "flex items-center justify-between gap-2",
+                  active && "bg-accent text-accent-foreground",
                )}
                onClick={() => void onSelectLocale(code)}
              >
-                <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-white text-lg shadow-[inset_0_0_0_1px_rgba(148,163,184,0.16)]">
-                  {LOCALE_FLAGS[code]}
-                </span>
-                <span className="min-w-0 flex-1">
-                  <span
-                    className={cn(
-                      "block truncate text-[14px] font-semibold leading-5",
-                      active ? "text-rose-600" : "text-slate-800",
-                    )}
-                >
+                <span className="truncate font-medium">
                  {ADMIN_LOCALE_LABELS[code]}
                </span>
-                </span>
-                <span className="flex w-3 shrink-0 justify-end">
-                  {active ? <CheckIcon className="size-3.5 text-rose-500" /> : null}
-                </span>
+                {active ? (
+                  <CheckIcon className="size-4 shrink-0 text-primary" />
+                ) : null}
              </DropdownMenuItem>
            );
          })}
--- a/src/components/admin/admin-row-actions-menu.tsx
+++ b/src/components/admin/admin-row-actions-menu.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import Link from "next/link";
+import { Fragment } from "react";
+import { Loader2, MoreHorizontal, type LucideIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { buttonVariants } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+export type AdminRowActionItem = {
+  key: string;
+  label: React.ReactNode;
+  icon?: LucideIcon;
+  onClick?: () => void;
+  href?: string;
+  disabled?: boolean;
+  destructive?: boolean;
+  hidden?: boolean;
+};
+
+type AdminRowActionsMenuProps = {
+  actions: AdminRowActionItem[];
+  busy?: boolean;
+  align?: "start" | "center" | "end";
+  ariaLabel?: string;
+  className?: string;
+  triggerClassName?: string;
+};
+
+/** 表格行操作：省略号触发，下拉展示带图标的菜单项；破坏性操作前自动加分隔线。 */
+export function AdminRowActionsMenu({
+  actions,
+  busy = false,
+  align = "end",
+  ariaLabel,
+  className,
+  triggerClassName,
+}: AdminRowActionsMenuProps) {
+  const { t } = useTranslation("common");
+  const visible = actions.filter((item) => !item.hidden);
+
+  if (visible.length === 0) {
+    return <span className={cn("text-xs text-muted-foreground", className)}>—</span>;
+  }
+
+  return (
+    <div className={cn("flex justify-center", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          disabled={busy}
+          aria-label={ariaLabel ?? t("aria.rowActionsMenu")}
+          className={cn(
+            buttonVariants({ variant: "outline", size: "icon-sm" }),
+            "text-muted-foreground hover:text-foreground",
+            triggerClassName,
+          )}
+        >
+          {busy ? (
+            <Loader2 className="size-4 animate-spin" aria-hidden />
+          ) : (
+            <MoreHorizontal className="size-4" aria-hidden />
+          )}
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align={align} className="min-w-[10.5rem]">
+          {visible.map((action, index) => {
+            const prev = visible[index - 1];
+            const showSeparator = Boolean(action.destructive && prev && !prev.destructive);
+            const Icon = action.icon;
+            const content = (
+              <>
+                {Icon ? <Icon aria-hidden /> : null}
+                {action.label}
+              </>
+            );
+
+            const item = action.href ? (
+              <DropdownMenuItem
+                key={action.key}
+                disabled={action.disabled || busy}
+                variant={action.destructive ? "destructive" : "default"}
+                render={<Link href={action.href} />}
+              >
+                {content}
+              </DropdownMenuItem>
+            ) : (
+              <DropdownMenuItem
+                key={action.key}
+                disabled={action.disabled || busy}
+                variant={action.destructive ? "destructive" : "default"}
+                onClick={() => action.onClick?.()}
+              >
+                {content}
+              </DropdownMenuItem>
+            );
+
+            return (
+              <Fragment key={action.key}>
+                {showSeparator ? <DropdownMenuSeparator /> : null}
+                {item}
+              </Fragment>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
--- a/src/components/admin/admin-shell.tsx
+++ b/src/components/admin/admin-shell.tsx
@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
 import { AdminAppSidebar } from "@/components/admin/admin-sidebar";
 import { ShellToolbar } from "@/components/admin/toolbar";
 import { AdminBreadcrumb } from "@/components/admin/admin-breadcrumb";
+import { useAdminSessionStore } from "@/stores/admin-session";
 import { AdminDocumentTitle } from "@/components/admin/admin-document-title";
 import {
  SidebarInset,
@@ -14,6 +15,8 @@ import {
 import { Separator } from "@/components/ui/separator";

 export function AdminShell({ children }: { children: ReactNode }) {
+  const shellAuthPending = useAdminSessionStore((s) => s.shellAuthPending);
+
  return (
    <SidebarProvider defaultOpen>
      <AdminDocumentTitle />
@@ -22,9 +25,27 @@ export function AdminShell({ children }: { children: ReactNode }) {
        <header className="sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border bg-card/90 px-4 shadow-[0_1px_0_rgb(216_230_251_/_45%)] backdrop-blur-md">
          <SidebarTrigger />
          <Separator orientation="vertical" className="mr-1.5 h-4" />
-          <AdminBreadcrumb />
+          {shellAuthPending ? (
+            <div
+              className="flex min-w-0 flex-1 items-center gap-1.5 text-muted-foreground/80"
+              aria-hidden
+            >
+              <span className="h-3 w-12 rounded-full bg-muted/50 motion-safe:animate-pulse" />
+              <span className="size-3 rounded-full bg-muted/40 motion-safe:animate-pulse" />
+              <span className="h-3 w-28 max-w-[36vw] rounded-full bg-muted/50 motion-safe:animate-pulse [animation-delay:80ms]" />
+            </div>
+          ) : (
+            <AdminBreadcrumb />
+          )}
          <div className="ml-auto flex shrink-0 items-center">
-            <ShellToolbar />
+            {shellAuthPending ? (
+              <div className="flex items-center gap-2.5" aria-hidden>
+                <span className="hidden h-8 w-[4.5rem] rounded-lg bg-muted/40 motion-safe:animate-pulse sm:block" />
+                <span className="size-8 rounded-lg bg-muted/45 motion-safe:animate-pulse [animation-delay:120ms]" />
+              </div>
+            ) : (
+              <ShellToolbar />
+            )}
          </div>
        </header>
        <div className="flex min-w-0 flex-1 flex-col overflow-x-clip px-4 pt-4 pb-6 md:px-5 md:pt-4 md:pb-6">
--- a/src/components/admin/admin-sidebar.tsx
+++ b/src/components/admin/admin-sidebar.tsx
@@ -2,7 +2,7 @@

 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useMemo } from "react";
+import { useMemo, type ReactElement } from "react";
 import { useTranslation } from "react-i18next";

 import {
@@ -18,9 +18,94 @@ import {
  SidebarRail,
  SidebarSeparator,
 } from "@/components/ui/sidebar";
+import { adminNavLabel } from "@/lib/admin-nav-label";
+import { cn } from "@/lib/utils";
 import { resolveAdminNavIcon } from "@/modules/_config/admin-nav-icons";
 import { ADMIN_BASE } from "@/modules/_config/admin-nav";
-import { useAdminProfile } from "@/stores/admin-session";
+import { useAdminProfile, useAdminSessionStore } from "@/stores/admin-session";
+
+/** 与常见导航项文字宽度接近，避免整齐灰条 */
+const SIDEBAR_NAV_SKELETON_WIDTHS = ["68%", "82%", "58%", "74%", "64%", "78%", "55%", "70%", "62%"] as const;
+
+function SidebarNavSkeletonRow({
+  labelWidth,
+  delayMs,
+}: {
+  labelWidth: string;
+  delayMs: number;
+}): ReactElement {
+  return (
+    <SidebarMenuItem>
+      <div
+        aria-hidden
+        className="flex h-8 w-full items-center gap-2 rounded-md px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-1.5"
+        style={{ animationDelay: `${delayMs}ms` }}
+      >
+        <span
+          className="size-4 shrink-0 rounded-[4px] bg-white/12 motion-safe:animate-pulse"
+          style={{ animationDelay: `${delayMs}ms` }}
+        />
+        <span
+          className="h-2.5 shrink-0 rounded-full bg-white/12 motion-safe:animate-pulse group-data-[collapsible=icon]:hidden"
+          style={{ width: labelWidth, animationDelay: `${delayMs + 40}ms` }}
+        />
+      </div>
+    </SidebarMenuItem>
+  );
+}
+
+function AdminSidebarSkeleton(): ReactElement {
+  const { t } = useTranslation("common");
+
+  return (
+    <Sidebar collapsible="icon" className="overflow-hidden">
+      <SidebarHeader className="flex h-14 shrink-0 items-center gap-0 border-b border-sidebar-border p-0 px-2">
+        <SidebarMenu className="h-full w-full">
+          <SidebarMenuItem className="h-full">
+            <div className="flex h-12 w-full items-center px-1 group-data-[collapsible=icon]:justify-center">
+              <img
+                src="/logo.png"
+                alt="N lotto"
+                className="h-auto max-h-11 w-full object-contain object-left opacity-95 group-data-[collapsible=icon]:max-h-8 group-data-[collapsible=icon]:object-center"
+              />
+            </div>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent className="relative overflow-hidden">
+        <div
+          className="pointer-events-none absolute inset-x-0 bottom-0 h-[22rem] opacity-55 group-data-[collapsible=icon]:hidden"
+          aria-hidden
+        >
+          <img
+            src="/image6.png"
+            alt=""
+            className="h-full w-full object-cover object-bottom"
+          />
+          <div className="absolute inset-x-0 top-0 h-28 bg-linear-to-b from-sidebar to-transparent" />
+          <div className="absolute inset-0 bg-sidebar/20" />
+        </div>
+        <SidebarGroup className="relative z-10">
+          <SidebarGroupLabel className="text-sidebar-foreground/55">
+            {t("sidebar.workspace", { defaultValue: "Workspace" })}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu className={cn("gap-0.5", "motion-safe:opacity-90")}>
+              {SIDEBAR_NAV_SKELETON_WIDTHS.map((width, i) => (
+                <SidebarNavSkeletonRow key={i} labelWidth={width} delayMs={i * 55} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarSeparator />
+      <SidebarRail />
+      <span className="sr-only" role="status" aria-live="polite">
+        {t("auth.checking")}
+      </span>
+    </Sidebar>
+  );
+}

 function isActive(pathname: string, item: { href: string; activeMatchPrefix?: string; segment?: string }): boolean {
  const { href, activeMatchPrefix, segment } = item;
@@ -38,7 +123,12 @@ function isActive(pathname: string, item: { href: string; activeMatchPrefix?: st
 export function AdminAppSidebar() {
  const { t } = useTranslation(["common", "dashboard", "players", "draws", "config", "wallet", "risk", "settlement", "jackpot", "reconcile", "tickets", "audit", "reports"]);
  const pathname = usePathname();
+  const shellAuthPending = useAdminSessionStore((s) => s.shellAuthPending);
  const profile = useAdminProfile();
+
+  if (shellAuthPending) {
+    return <AdminSidebarSkeleton />;
+  }
  const visibleNav = useMemo(
    () => (profile?.navigation ?? []).filter((item) => item.segment !== "risk"),
    [profile?.navigation],
@@ -86,13 +176,13 @@ export function AdminAppSidebar() {
                return (
                  <SidebarMenuItem key={item.segment}>
                    <SidebarMenuButton
-                      tooltip={t(`nav.${item.segment}`, { ns: "common", defaultValue: item.label })}
+                      tooltip={adminNavLabel(item.segment, t, item.label)}
                      isActive={isActive(pathname, item)}
                      render={<Link href={item.href} />}
                      className="font-medium text-sidebar-foreground/90 hover:text-sidebar-accent-foreground data-active:bg-red-600 data-active:text-white data-active:shadow-sm"
                    >
                      <Icon data-icon="inline-start" aria-hidden />
-                      <span>{t(`nav.${item.segment}`, { ns: "common", defaultValue: item.label })}</span>
+                      <span>{adminNavLabel(item.segment, t, item.label)}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
--- a/src/components/admin/auth-gate.tsx
+++ b/src/components/admin/auth-gate.tsx
@@ -2,40 +2,86 @@

 import { useRouter } from "next/navigation";
 import { useEffect, useState, type ReactNode } from "react";
-import { useTranslation } from "react-i18next";

+import { AdminAuthCheckingScreen } from "@/components/admin/admin-auth-checking";
+import { verifyStoredAdminSession } from "@/lib/admin-session-verify";
+import { useAdminSessionStore } from "@/stores/admin-session";
 import { readToken } from "@/stores/admin-token";

 type ShellAuthGateProps = {
  children: ReactNode;
 };

+type GateStatus = "pending" | "authed" | "guest";
+
+function hasAdminToken(bearerToken: string | null): boolean {
+  const token = bearerToken ?? readToken();
+  return token != null && token.trim() !== "";
+}
+
 /**
- * Shell route guard. Reads the auth token from localStorage on the client and
- * redirects to the login page when no token is present.
+ * Shell 路由守卫：无 Token 或 `/auth/me` 校验失败时跳转登录页。
 */
 export function ShellAuthGate({ children }: ShellAuthGateProps) {
-  const { t } = useTranslation("common");
  const router = useRouter();
-  const [allowed, setAllowed] = useState(false);
+  const bearerToken = useAdminSessionStore((s) => s.bearerToken);
+  const [status, setStatus] = useState<GateStatus>("pending");
+
+  const setShellAuthPending = useAdminSessionStore((s) => s.setShellAuthPending);

  useEffect(() => {
-    const token = readToken();
-    if (!token) {
-      router.replace("/admin/login");
-      return;
-    }
-    queueMicrotask(() => {
-      setAllowed(true);
-    });
-  }, [router]);
+    let cancelled = false;
+    setShellAuthPending(true);

-  if (!allowed) {
-    return (
-      <div className="flex min-h-[50vh] w-full flex-1 items-center justify-center text-sm text-muted-foreground">
-        {t("auth.checking", { defaultValue: "Checking sign-in status…" })}
-      </div>
-    );
+    async function run() {
+      if (!hasAdminToken(bearerToken)) {
+        if (!cancelled) {
+          setStatus("guest");
+        }
+        return;
+      }
+
+      if (!cancelled) {
+        setStatus("pending");
+      }
+
+      const ok = await verifyStoredAdminSession();
+      if (cancelled) {
+        return;
+      }
+
+      if (ok) {
+        setStatus("authed");
+        return;
+      }
+
+      setStatus("guest");
+    }
+
+    void run().finally(() => {
+      if (!cancelled) {
+        setShellAuthPending(false);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+      setShellAuthPending(false);
+    };
+  }, [bearerToken, setShellAuthPending]);
+
+  useEffect(() => {
+    if (status === "guest") {
+      router.replace("/admin/login");
+    }
+  }, [status, router]);
+
+  if (status === "pending") {
+    return <AdminAuthCheckingScreen variant="shell" />;
+  }
+
+  if (status === "guest") {
+    return null;
  }

  return children;
--- a/src/components/admin/login-form.tsx
+++ b/src/components/admin/login-form.tsx
@@ -1,25 +1,28 @@
 "use client";

 import { ShieldCheckIcon } from "lucide-react";
+import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { isAxiosError } from "axios";

+import { AdminAuthCheckingScreen } from "@/components/admin/admin-auth-checking";
 import { AdminLanguageSwitcher } from "@/components/admin/admin-language-switcher";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { getAdminCaptcha, postAdminLogin } from "@/api";
+import { verifyStoredAdminSession } from "@/lib/admin-session-verify";
 import { readToken } from "@/stores/admin-token";
 import { authModuleMeta } from "@/modules/auth/meta";
 import { useAdminSessionStore } from "@/stores/admin-session";
 import { LotteryApiBizError } from "@/types/api/errors";

 export function LoginForm() {
-  const { t } = useTranslation("auth");
+  const { t } = useTranslation(["auth", "common"]);
  const router = useRouter();
  const setBearerToken = useAdminSessionStore((s) => s.setBearerToken);
  const setAdminProfile = useAdminSessionStore((s) => s.setAdminProfile);
@@ -32,6 +35,7 @@ export function LoginForm() {

  const [loadingCaptcha, setLoadingCaptcha] = useState(false);
  const [submitting, setSubmitting] = useState(false);
+  const [checkingSession, setCheckingSession] = useState(true);

  const loadCaptcha = useCallback(async () => {
    setLoadingCaptcha(true);
@@ -53,16 +57,37 @@ export function LoginForm() {
  }, [t]);

  useEffect(() => {
-    if (readToken()) {
-      router.replace("/admin");
+    let cancelled = false;

-      return;
-    }
-    const t = window.setTimeout(() => {
+    async function bootstrap() {
+      if (!readToken()) {
+        if (!cancelled) {
+          setCheckingSession(false);
+          void loadCaptcha();
+        }
+        return;
+      }
+
+      const ok = await verifyStoredAdminSession();
+      if (cancelled) {
+        return;
+      }
+
+      if (ok) {
+        router.replace("/admin");
+        router.refresh();
+        return;
+      }
+
+      setCheckingSession(false);
      void loadCaptcha();
-    }, 0);
+    }

-    return () => window.clearTimeout(t);
+    void bootstrap();
+
+    return () => {
+      cancelled = true;
+    };
  }, [loadCaptcha, router]);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
@@ -107,11 +132,12 @@ export function LoginForm() {
    }
  }

+  if (checkingSession) {
+    return <AdminAuthCheckingScreen variant="login" />;
+  }
+
  return (
-    <div className="relative flex min-h-full flex-1 flex-col items-center justify-center overflow-hidden px-4 py-14 sm:py-20">
-      <div className="absolute right-4 top-4 z-20 sm:right-6 sm:top-6">
-        <AdminLanguageSwitcher />
-      </div>
+    <div className="relative flex h-dvh max-h-dvh w-full min-h-0 flex-col overflow-hidden lg:flex-row">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_85%_50%_at_50%_-5%,rgb(59_130_246/0.09),transparent)] dark:bg-[radial-gradient(ellipse_85%_50%_at_50%_-5%,rgb(56_189_248/0.12),transparent)]"
@@ -130,19 +156,41 @@ export function LoginForm() {
        }}
      />

-      <Card className="relative w-full max-w-[420px] rounded-2xl border border-border/70 bg-card/90 shadow-2xl shadow-black/[0.06] ring-1 ring-black/[0.03] backdrop-blur-md dark:border-border/50 dark:bg-card/85 dark:shadow-black/25 dark:ring-white/[0.06]">
-        <CardHeader className="space-y-5 pb-2 text-center sm:px-8 sm:pt-10">
-          <div className="mx-auto flex size-12 items-center justify-center rounded-2xl bg-primary/8 text-primary shadow-inner ring-1 ring-primary/10 dark:bg-primary/15 dark:ring-primary/20">
-            <ShieldCheckIcon className="size-6" strokeWidth={1.75} aria-hidden />
+      <div className="relative z-10 flex min-h-0 max-h-[38dvh] shrink-0 items-center justify-center overflow-hidden px-6 py-4 lg:max-h-none lg:w-1/2 lg:flex-1 lg:px-10 lg:py-8">
+        <Image
+          src="/illustration.png"
+          alt=""
+          width={1024}
+          height={1536}
+          priority
+          className="mx-auto max-h-full w-auto max-w-full object-contain"
+        />
+      </div>
+
+      <div className="relative z-10 flex min-h-0 flex-1 flex-col items-center justify-center overflow-y-auto px-4 py-6 lg:w-1/2 lg:py-8">
+        <div className="absolute right-4 top-4 z-20 sm:right-6 sm:top-6">
+          <AdminLanguageSwitcher />
+        </div>
+
+        <Card className="relative w-full max-w-[420px] rounded-2xl border border-border/70 bg-card/90 shadow-2xl shadow-black/[0.06] ring-1 ring-black/[0.03] backdrop-blur-md dark:border-border/50 dark:bg-card/85 dark:shadow-black/25 dark:ring-white/[0.06]">
+        <CardHeader className="flex flex-row items-center gap-3.5 border-b border-border/60 px-6 py-6 sm:px-8">
+          <div
+            className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground"
+            aria-hidden
+          >
+            <ShieldCheckIcon className="size-5" strokeWidth={2} />
          </div>
-          <div className="space-y-1.5">
-            <CardTitle className="text-balance text-2xl font-semibold tracking-tight">
+          <div className="min-w-0 text-left">
+            <CardTitle className="text-lg font-semibold leading-snug tracking-tight">
              {t("loginTitle", { defaultValue: authModuleMeta.title })}
            </CardTitle>
+            <p className="mt-0.5 text-sm text-muted-foreground">
+              {t("loginSubtitle")}
+            </p>
          </div>
        </CardHeader>
        <form onSubmit={onSubmit}>
-          <CardContent className="flex flex-col gap-5 sm:px-8">
+          <CardContent className="flex flex-col gap-5 px-6 pt-6 sm:px-8">
            <div className="flex flex-col gap-2">
              <Label htmlFor="admin-account" className="text-sm font-medium">
                {t("account")}
@@ -176,7 +224,7 @@ export function LoginForm() {
                className="h-11 transition-shadow focus-visible:ring-2 focus-visible:ring-primary/25"
              />
            </div>
-            <div className="mb-8 flex flex-col gap-2">
+            <div className="flex flex-col gap-2">
              <Label htmlFor="admin-captcha" className="text-sm font-medium">
                {t("captcha")}
              </Label>
@@ -220,7 +268,7 @@ export function LoginForm() {
              </div>
            </div>
          </CardContent>
-          <CardFooter className="flex-col gap-0 border-t border-border/60 pb-10 pt-8 sm:px-8">
+          <CardFooter className="flex-col gap-0 border-t border-border/60 px-6 pb-8 pt-6 sm:px-8">
            <Button
              type="submit"
              size="lg"
@@ -231,7 +279,8 @@ export function LoginForm() {
            </Button>
          </CardFooter>
        </form>
-      </Card>
+        </Card>
+      </div>
    </div>
  );
 }