feat(admin): 更新登录表单样式，添加图标并优化用户体验；增强代理线路详情面板，支持直接玩家计数功能

src/components/admin/admin-subnav.tsx

@@ -97,7 +97,7 @@ export function AdminSubnavButton({
       className={cn(adminSubnavItemClassName(active, disabled), className)}
     >
       {children}
-      {count !== undefined && count > 0 ? (
+      {count !== undefined ? (
         <span
           className={cn(
             "ml-1.5 inline-flex min-w-[1.25rem] items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-medium tabular-nums",

src/components/admin/login-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ShieldCheckIcon } from "lucide-react";
+import { KeyRound, Lock, User } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
@@ -12,10 +12,10 @@ 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 { cn } from "@/lib/utils";
 import { verifyStoredAdminSession } from "@/lib/admin-session-verify";
 import {
   validateAdminLoginAccount,
@@ -160,149 +160,152 @@ export function LoginForm() {
     return <AdminAuthCheckingScreen variant="login" />;
   }
 
+  const inputClass =
+    "h-9 rounded-xl border-gray-200 bg-white pl-10 shadow-none transition-shadow focus-visible:ring-2 focus-visible:ring-red-600/20 xl:h-10";
+  const fieldIconClass =
+    "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400";
+
   return (
-    <div className="relative flex h-dvh max-h-dvh w-full min-h-0 flex-col overflow-hidden lg:flex-row">
+    <div
+      className="relative flex h-dvh max-h-dvh w-full min-h-0 items-center justify-center overflow-y-auto bg-[#eceef2] px-4 py-4 xl:px-8 xl:py-10"
+      data-admin-login-root
+    >
       <div
+        className="pointer-events-none absolute inset-0 opacity-40"
         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",
+          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 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
+        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-admin-login-card
+      >
+        <div
+          className="relative hidden w-[min(42%,340px)] shrink-0 overflow-hidden bg-[#f8fafc] md:block xl:w-[min(46%,400px)]"
+          data-admin-login-hero-slot
+        >
+          <Image
+            src="/entry/image1.png"
+            alt=""
+            fill
+            sizes="(max-width: 1280px) 340px, 400px"
+            className="object-cover object-center"
+            priority
+          />
         </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 className="flex min-w-0 flex-1 flex-col px-6 py-5 xl:px-10 xl:py-10">
+          <div className="flex justify-end">
+            <div className="rounded-full border border-[#e4eaf4] bg-[#f8fafc] shadow-sm [&_[data-slot=dropdown-menu-trigger]]:h-9 [&_[data-slot=dropdown-menu-trigger]]:rounded-full">
+              <AdminLanguageSwitcher />
+            </div>
           </div>
-          <div className="min-w-0 text-left">
-            <CardTitle className="text-lg font-semibold leading-snug tracking-tight">
+
+          <div className="mx-auto flex w-full max-w-[23rem] flex-1 flex-col justify-center xl:max-w-[24rem]">
+            <h1 className="text-[1.5rem] font-bold tracking-tight text-gray-900 xl:text-[1.75rem]">
               {t("loginTitle", { defaultValue: authModuleMeta.title })}
-            </CardTitle>
-            <p className="mt-0.5 text-sm text-muted-foreground">
+            </h1>
+            <p className="mt-1.5 text-sm leading-relaxed text-gray-500 xl:mt-2">
               {t("loginSubtitle")}
             </p>
-          </div>
-        </CardHeader>
-        <form onSubmit={onSubmit}>
-          <CardContent className="flex flex-col gap-5 px-6 py-6 sm:px-8">
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="admin-account" className="text-sm font-medium">
-                {t("account")}
-              </Label>
-              <Input
-                id="admin-account"
-                name="account"
-                autoComplete="username"
-                value={account}
-                onChange={(ev) => setAccount(ev.target.value)}
-                placeholder={t("accountPlaceholder")}
-                required
-                disabled={submitting}
-                className="h-11 transition-shadow focus-visible:ring-2 focus-visible:ring-primary/25"
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="admin-password" className="text-sm font-medium">
-                {t("password")}
-              </Label>
-              <Input
-                id="admin-password"
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                value={password}
-                onChange={(ev) => setPassword(ev.target.value)}
-                placeholder={t("passwordPlaceholder")}
-                required
-                disabled={submitting}
-                className="h-11 transition-shadow focus-visible:ring-2 focus-visible:ring-primary/25"
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="admin-captcha" className="text-sm font-medium">
-                {t("captcha")}
-              </Label>
-              <div className="flex flex-wrap items-center gap-3">
-                <Input
-                  id="admin-captcha"
-                  name="captcha"
-                  autoComplete="off"
-                  value={captchaCode}
-                  onChange={(ev) => setCaptchaCode(ev.target.value)}
-                  placeholder={t("captchaPlaceholder")}
-                  maxLength={32}
-                  required
-                  disabled={submitting}
-                  className="h-11 min-w-0 flex-1 transition-shadow focus-visible:ring-2 focus-visible:ring-primary/25 sm:max-w-[12rem]"
-                />
-                <button
-                  type="button"
-                  className="flex h-11 min-w-[156px] shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-border/80 bg-muted/35 px-2 shadow-[inset_0_1px_2px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.03] transition-[box-shadow,transform] hover:bg-muted/45 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-50 dark:bg-muted/25 dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)] dark:ring-white/[0.06] dark:hover:bg-muted/35"
-                  onClick={() => void loadCaptcha()}
-                  disabled={
-                    loadingCaptcha || submitting
-                  }
-                  aria-label={loadingCaptcha ? t("captchaLoading") : t("captchaRefresh")}
-                >
-                  {captchaSrc ? (
-                    <img
-                      src={captchaSrc}
-                      alt=""
-                      width={160}
-                      height={48}
-                      className="pointer-events-none block"
-                    />
-                  ) : (
-                    <span className="px-2 text-xs text-muted-foreground">
-                      {loadingCaptcha ? t("captchaLoading") : t("captchaFetch")}
-                    </span>
-                  )}
-                </button>
+
+            <form className="mt-5 space-y-4 xl:mt-8 xl:space-y-5" onSubmit={onSubmit}>
+              <div className="space-y-1.5">
+                <Label htmlFor="admin-account">{t("account")}</Label>
+                <div className="relative">
+                  <User className={fieldIconClass} aria-hidden />
+                  <Input
+                    id="admin-account"
+                    name="account"
+                    autoComplete="username"
+                    value={account}
+                    onChange={(ev) => setAccount(ev.target.value)}
+                    placeholder={t("accountPlaceholder")}
+                    required
+                    disabled={submitting}
+                    className={inputClass}
+                  />
+                </div>
               </div>
-            </div>
-          </CardContent>
-          <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"
-              className="h-11 w-full text-base font-medium shadow-sm"
-              disabled={submitting}
-            >
-              {submitting ? t("submitting") : t("submit")}
-            </Button>
-          </CardFooter>
-        </form>
-        </Card>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="admin-password">{t("password")}</Label>
+                <div className="relative">
+                  <Lock className={fieldIconClass} aria-hidden />
+                  <Input
+                    id="admin-password"
+                    name="password"
+                    type="password"
+                    autoComplete="current-password"
+                    value={password}
+                    onChange={(ev) => setPassword(ev.target.value)}
+                    placeholder={t("passwordPlaceholder")}
+                    required
+                    disabled={submitting}
+                    className={inputClass}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="admin-captcha">{t("captcha")}</Label>
+                <div className="flex items-stretch gap-3">
+                  <div className="relative min-w-0 flex-1">
+                    <KeyRound className={fieldIconClass} aria-hidden />
+                    <Input
+                      id="admin-captcha"
+                      name="captcha"
+                      autoComplete="off"
+                      value={captchaCode}
+                      onChange={(ev) => setCaptchaCode(ev.target.value)}
+                      placeholder={t("captchaPlaceholder")}
+                      maxLength={32}
+                      required
+                      disabled={submitting}
+                      className={inputClass}
+                    />
+                  </div>
+                  <button
+                    type="button"
+                    className="flex h-9 min-w-[7.75rem] shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-gray-200 bg-[#f4fbf6] px-2 transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-600/20 disabled:pointer-events-none disabled:opacity-50 xl:h-10 xl:min-w-[8.5rem]"
+                    onClick={() => void loadCaptcha()}
+                    disabled={loadingCaptcha || submitting}
+                    aria-label={loadingCaptcha ? t("captchaLoading") : t("captchaRefresh")}
+                  >
+                    {captchaSrc ? (
+                      <img
+                        src={captchaSrc}
+                        alt=""
+                        width={160}
+                        height={48}
+                        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("captchaLoading") : t("captchaFetch")}
+                      </span>
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              <Button
+                type="submit"
+                size="lg"
+                className={cn(
+                  "mt-2 h-11 w-full rounded-xl bg-red-600 text-base font-medium text-white shadow-sm hover:bg-red-700",
+                  submitting && "translate-y-0",
+                )}
+                disabled={submitting}
+              >
+                {submitting ? t("submitting") : t("submit")}
+              </Button>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   );

src/modules/agents/agent-line-detail-panel.tsx

@@ -34,6 +34,8 @@ export type AgentLineDetailPanelProps = {
   profileError?: string | null;
   childAgents: AgentNodeRow[];
   childCountById: Map<number, number>;
+  directPlayerCount?: number;
+  onDirectPlayerCountChange?: (count: number) => void;
   siteCode: string;
   parentName: string | null;
   detailTab: AgentDetailTab;
@@ -64,6 +66,8 @@ export function AgentLineDetailPanel({
   profileError = null,
   childAgents,
   childCountById,
+  directPlayerCount,
+  onDirectPlayerCountChange,
   siteCode,
   parentName,
   detailTab,
@@ -116,6 +120,7 @@ export function AgentLineDetailPanel({
     {
       key: "players",
       label: t("lineUi.tabPlayers", { defaultValue: "直属玩家" }),
+      count: directPlayerCount,
       visible: canViewPlayersTab,
     },
   ];
@@ -224,6 +229,7 @@ export function AgentLineDetailPanel({
             agentNodeId={node.id}
             allowCreatePlayer={canCreatePlayerAction}
             embedded
+            onTotalChange={onDirectPlayerCountChange}
           />
         ) : null}
       </div>

src/modules/agents/agents-console.tsx

@@ -524,6 +524,7 @@ export function AgentsConsole(): React.ReactElement {
   const [directPlayerCountById, setDirectPlayerCountById] = useState<Map<number, number>>(
     () => new Map(),
   );
+  const [selectedDirectPlayerCount, setSelectedDirectPlayerCount] = useState(0);
 
   const prevSelectedNodeIdRef = useRef<number | null>(null);
 
@@ -590,6 +591,41 @@ export function AgentsConsole(): React.ReactElement {
     });
   }, [canShowDownlineTab, canShowPlayersTab, canViewProfileTab, selectedNodeId]);
 
+  useEffect(() => {
+    if (selectedNodeId === null || activeSiteCode.trim() === "") {
+      setSelectedDirectPlayerCount(0);
+      return;
+    }
+
+    let cancelled = false;
+    void getAdminPlayers({
+      site_code: activeSiteCode.trim(),
+      agent_node_id: selectedNodeId,
+      page: 1,
+      per_page: 1,
+    })
+      .then((data) => {
+        if (cancelled) {
+          return;
+        }
+        setSelectedDirectPlayerCount(data.meta.total);
+        setDirectPlayerCountById((prev) => {
+          const next = new Map(prev);
+          next.set(selectedNodeId, data.meta.total);
+          return next;
+        });
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setSelectedDirectPlayerCount(0);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [activeSiteCode, selectedNodeId]);
+
   useEffect(() => {
     if (detailTab !== "downline" || activeSiteCode.trim() === "") {
       return;
@@ -1077,6 +1113,8 @@ export function AgentsConsole(): React.ReactElement {
             profileError={selectedProfileErr}
           childAgents={selectedChildAgents}
           childCountById={childCountById}
+          directPlayerCount={selectedDirectPlayerCount}
+          onDirectPlayerCountChange={setSelectedDirectPlayerCount}
           siteCode={activeSiteCode}
           parentName={
             selectedNode?.parent_id !== null && selectedNode?.parent_id !== undefined

src/modules/agents/agents-players-panel.tsx

@@ -146,6 +146,8 @@ type AgentsPlayersPanelProps = {
   allowCreatePlayer?: boolean;
   /** 嵌入代理线路详情 Tab 时使用紧凑顶栏 */
   embedded?: boolean;
+  /** 列表总数变化时同步 Tab 角标等 */
+  onTotalChange?: (total: number) => void;
 };
 
 export function AgentsPlayersPanel({
@@ -153,6 +155,7 @@ export function AgentsPlayersPanel({
   agentNodeId,
   allowCreatePlayer,
   embedded = false,
+  onTotalChange,
 }: AgentsPlayersPanelProps): React.ReactElement {
   const { t } = useTranslation(["agents", "players", "common"]);
   const router = useRouter();
@@ -269,6 +272,10 @@ export function AgentsPlayersPanel({
     void load();
   }, [load]);
 
+  useEffect(() => {
+    onTotalChange?.(total);
+  }, [onTotalChange, total]);
+
   async function savePlayer(): Promise<void> {
     if (siteCode.trim() === "") {
       toast.error(t("players:siteCodeRequired", { defaultValue: "请填写主站编号" }));