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,65 +160,63 @@ 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
-        aria-hidden
+      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"
-        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)]"
+      data-admin-login-root
-      />
+    >
       <div
+        className="pointer-events-none absolute inset-0 opacity-40"
         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),
+          backgroundImage:
-            linear-gradient(to bottom, var(--border) 1px, transparent 1px)`,
+            "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%)",
-          backgroundSize: "48px 48px",
         }}
       />
 
-      <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">
+      <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="/illustration.png"
+            src="/entry/image1.png"
             alt=""
-          width={1024}
+            fill
-          height={1536}
+            sizes="(max-width: 1280px) 340px, 400px"
+            className="object-cover object-center"
             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="flex min-w-0 flex-1 flex-col px-6 py-5 xl:px-10 xl:py-10">
-        <div className="absolute right-4 top-4 z-20 sm:right-6 sm:top-6">
+          <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>
-
-        <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="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>
+            </h1>
-            <p className="mt-0.5 text-sm text-muted-foreground">
+            <p className="mt-1.5 text-sm leading-relaxed text-gray-500 xl:mt-2">
               {t("loginSubtitle")}
             </p>
-          </div>
+
-        </CardHeader>
+            <form className="mt-5 space-y-4 xl:mt-8 xl:space-y-5" onSubmit={onSubmit}>
-        <form onSubmit={onSubmit}>
+              <div className="space-y-1.5">
-          <CardContent className="flex flex-col gap-5 px-6 py-6 sm:px-8">
+                <Label htmlFor="admin-account">{t("account")}</Label>
-            <div className="flex flex-col gap-2">
+                <div className="relative">
-              <Label htmlFor="admin-account" className="text-sm font-medium">
+                  <User className={fieldIconClass} aria-hidden />
-                {t("account")}
-              </Label>
                   <Input
                     id="admin-account"
                     name="account"
@@ -228,13 +226,15 @@ export function LoginForm() {
                     placeholder={t("accountPlaceholder")}
                     required
                     disabled={submitting}
-                className="h-11 transition-shadow focus-visible:ring-2 focus-visible:ring-primary/25"
+                    className={inputClass}
                   />
                 </div>
-            <div className="flex flex-col gap-2">
+              </div>
-              <Label htmlFor="admin-password" className="text-sm font-medium">
+
-                {t("password")}
+              <div className="space-y-1.5">
-              </Label>
+                <Label htmlFor="admin-password">{t("password")}</Label>
+                <div className="relative">
+                  <Lock className={fieldIconClass} aria-hidden />
                   <Input
                     id="admin-password"
                     name="password"
@@ -245,14 +245,16 @@ export function LoginForm() {
                     placeholder={t("passwordPlaceholder")}
                     required
                     disabled={submitting}
-                className="h-11 transition-shadow focus-visible:ring-2 focus-visible:ring-primary/25"
+                    className={inputClass}
                   />
                 </div>
-            <div className="flex flex-col gap-2">
+              </div>
-              <Label htmlFor="admin-captcha" className="text-sm font-medium">
+
-                {t("captcha")}
+              <div className="space-y-1.5">
-              </Label>
+                <Label htmlFor="admin-captcha">{t("captcha")}</Label>
-              <div className="flex flex-wrap items-center gap-3">
+                <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"
@@ -263,15 +265,14 @@ export function LoginForm() {
                       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]"
+                      className={inputClass}
                     />
+                  </div>
                   <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"
+                    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={
+                    disabled={loadingCaptcha || submitting}
-                    loadingCaptcha || submitting
-                  }
                     aria-label={loadingCaptcha ? t("captchaLoading") : t("captchaRefresh")}
                   >
                     {captchaSrc ? (
@@ -280,29 +281,31 @@ export function LoginForm() {
                         alt=""
                         width={160}
                         height={48}
-                      className="pointer-events-none block"
+                        className="pointer-events-none block h-full w-auto max-w-full object-contain"
                       />
                     ) : (
-                    <span className="px-2 text-xs text-muted-foreground">
+                      <span className="px-1 text-xs text-muted-foreground">
                         {loadingCaptcha ? t("captchaLoading") : t("captchaFetch")}
                       </span>
                     )}
                   </button>
                 </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"
+                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>
-          </CardFooter>
             </form>
-        </Card>
+          </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: "请填写主站编号" }));