<add>Domain support

src/components/DomainStatus.tsx

@@ -0,0 +1,214 @@
+// src/components/DomainStatus.tsx (最终完整版)
+
+import { useQuery } from '@tanstack/react-query';
+import { getDomains, Domain } from '@/api/domain';
+import { CalendarDays, DollarSign } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useEffect, useState } from 'react';
+
+// =======================================================
+// 彩色备注标签组件
+// =======================================================
+const DomainNoteTags = ({ notes }: { notes?: string }) => {
+  if (!notes) {
+    return null;
+  }
+
+  const colors = [
+    'bg-blue-500 text-white',
+    'bg-green-500 text-white',
+    'bg-purple-500 text-white',
+    'bg-red-500 text-white',
+    'bg-gray-600 text-white',
+  ];
+
+  const tags = notes.split(';').map(tag => tag.trim()).filter(tag => tag);
+
+  return (
+    <div className="flex items-center flex-wrap gap-1 mt-2">
+      {tags.map((tag, index) => (
+        <span
+          key={index}
+          className={cn(
+            "text-[10px] font-bold px-1.5 py-0.5 rounded-md",
+            colors[index % colors.length]
+          )}
+        >
+          {tag}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+
+// =======================================================
+// 行内模式卡片 (Inline Mode Card)
+// =======================================================
+const DomainCardInline = ({ domain }: { domain: Domain }) => {
+  const expiresIn = domain.expires_in_days;
+  const billingData = domain.BillingData || {};
+  const customBackgroundImage = (window as any).CustomBackgroundImage !== "" ? (window as any).CustomBackgroundImage : undefined;
+
+  let statusColorClass = 'bg-green-500';
+  if (expiresIn !== undefined && expiresIn <= 10) statusColorClass = 'bg-red-500';
+  else if (expiresIn !== undefined && expiresIn <= 30) statusColorClass = 'bg-yellow-500';
+
+  return (
+    <a href={`https://${domain.Domain}`} target="_blank" rel="noopener noreferrer" className="block">
+      <div
+        className={cn(
+          "rounded-lg border bg-card text-card-foreground shadow-sm p-3 cursor-pointer hover:bg-accent/50 transition-colors w-full",
+          { "bg-card/70 backdrop-blur-sm": customBackgroundImage }
+        )}
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3 flex-1 min-w-0">
+            <span className={`relative flex h-2.5 w-2.5`}>
+              <span className={`animate-ping absolute inline-flex h-full w-full rounded-full ${statusColorClass} opacity-75`}></span>
+              <span className={`relative inline-flex rounded-full h-2.5 w-2.5 ${statusColorClass}`}></span>
+            </span>
+            <p className="font-mono font-semibold truncate">{domain.Domain}</p>
+          </div>
+          <div className="flex items-center gap-6 text-xs text-muted-foreground ml-4">
+            <span className="w-24 truncate">{billingData.registrar || 'N/A'}</span>
+            <div className="flex items-center gap-1.5 w-28">
+              <CalendarDays className="h-3.5 w-3.5" />
+              <span>到期: {billingData.endDate ? new Date(billingData.endDate).toLocaleDateString() : 'N/A'}</span>
+            </div>
+            <div className="flex items-center gap-1.5 w-24">
+              <DollarSign className="h-3.5 w-3.5" />
+              <span>{billingData.renewalPrice || 'N/A'}</span>
+            </div>
+            <span className="font-semibold w-24">{expiresIn !== undefined ? `${expiresIn} 天` : 'N/A'}</span>
+          </div>
+        </div>
+        <DomainNoteTags notes={billingData.notes} />
+      </div>
+    </a>
+  );
+};
+
+
+// =======================================================
+// 卡片模式 (Card Mode)
+// =======================================================
+const DomainCard = ({ domain }: { domain: Domain }) => {
+  const expiresIn = domain.expires_in_days;
+  const billingData = domain.BillingData || {};
+  const customBackgroundImage = (window as any).CustomBackgroundImage !== "" ? (window as any).CustomBackgroundImage : undefined;
+
+  let progressBarColor = 'bg-gray-300';
+  let progressBarWidth = '100%';
+
+  if (expiresIn !== undefined) {
+      if (expiresIn <= 10) {
+        progressBarColor = 'bg-red-500';
+        progressBarWidth = `${Math.max(5, (expiresIn / 10) * 100)}%`;
+      } else if (expiresIn <= 100) {
+        const lightness = 50 + (expiresIn - 10) / 90 * 20;
+        progressBarColor = `bg-[hsl(45,90%,${lightness}%)]`;
+        progressBarWidth = `${Math.max(5, (expiresIn / 100) * 100)}%`;
+      } else {
+        progressBarColor = 'bg-green-500';
+      }
+  }
+
+  return (
+    <a href={`https://${domain.Domain}`} target="_blank" rel="noopener noreferrer" className="block h-full">
+      <div className={cn(
+        "relative flex flex-col justify-between rounded-lg border bg-card text-card-foreground shadow-sm p-4 space-y-3 transition-all hover:shadow-md cursor-pointer h-full",
+        { "bg-card/70 backdrop-blur-sm": customBackgroundImage }
+      )}>
+        <div>
+          <h4 className="font-semibold font-mono tracking-tight">{domain.Domain}</h4>
+        </div>
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span className="font-medium">{billingData.registrar || '未知注册商'}</span>
+          <div className="flex items-center gap-1">
+            <CalendarDays className="h-3 w-3" />
+            <span>{billingData.endDate ? new Date(billingData.endDate).toLocaleDateString() : 'N/A'}</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-4 text-xs">
+          <div className="flex items-center gap-1 text-muted-foreground w-1/3">
+             <DollarSign className="h-3 w-3" />
+             <span className="truncate">{billingData.renewalPrice || 'N/A'}</span>
+          </div>
+          <div className="flex-1">
+             <div className="w-full bg-muted rounded-full h-1.5 overflow-hidden">
+                <div className={cn("h-1.5 rounded-full transition-all duration-500", progressBarColor)} style={{ width: progressBarWidth }} />
+             </div>
+          </div>
+          <span className="font-medium text-muted-foreground w-12 text-right">{expiresIn !== undefined ? `${expiresIn}天` : 'N/A'}</span>
+        </div>
+        <div className="pt-1">
+          <DomainNoteTags notes={billingData.notes} />
+        </div>
+      </div>
+    </a>
+  );
+};
+
+
+// =======================================================
+// 主组件 (Main Component)
+// =======================================================
+export const DomainStatus = () => {
+  const { data: domains, isLoading, error } = useQuery({
+    queryKey: ['domains'],
+    queryFn: getDomains,
+    refetchInterval: 60 * 60 * 1000,
+  });
+  
+  const [inline, setInline] = useState<string>("0");
+  useEffect(() => {
+    const checkInlineSettings = () => {
+      const isMobile = window.innerWidth < 768;
+      if (!isMobile) {
+        const inlineState = localStorage.getItem("inline");
+        if ((window as any).ForceCardInline) setInline("1");
+        else if (inlineState !== null) setInline(inlineState);
+      }
+    };
+    checkInlineSettings();
+    
+    const handleStorageChange = () => checkInlineSettings();
+    window.addEventListener('storage', handleStorageChange);
+    
+    const handleViewChange = () => {
+      const inlineState = localStorage.getItem("inline");
+      setInline(inlineState ?? "0");
+    };
+    window.addEventListener('nezha-view-change', handleViewChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener('nezha-view-change', handleViewChange);
+    };
+  }, []);
+
+  const filteredDomains = domains?.filter(d => d.Status === 'verified' || d.Status === 'expired');
+
+  if (error || isLoading || !filteredDomains || filteredDomains.length === 0) {
+    return null;
+  }
+
+  if (inline === '1') {
+    return (
+      <div className="flex flex-col gap-2">
+        {filteredDomains.map(domain => (
+          <DomainCardInline key={domain.ID} domain={domain} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {filteredDomains.map(domain => (
+        <DomainCard key={domain.ID} domain={domain} />
+      ))}
+    </div>
+  );
+};

src/components/ServerOverview.tsx

@@ -1,10 +1,14 @@
+// src/components/ServerOverview.tsx (最终完整版)
+
 import { Card, CardContent } from "@/components/ui/card"
 import { useStatus } from "@/hooks/use-status"
-import { formatBytes } from "@/lib/format"
+import { formatBytes} from "@/lib/format"
 import { cn } from "@/lib/utils"
 import { ArrowDownCircleIcon, ArrowUpCircleIcon } from "@heroicons/react/20/solid"
 import { useTranslation } from "react-i18next"
+import { Globe } from "lucide-react"
 
+// 扩展 props 类型，以接收域名总数和新的交互逻辑
 type ServerOverviewProps = {
   online: number
   offline: number
@@ -13,30 +17,46 @@ type ServerOverviewProps = {
   down: number
   upSpeed: number
   downSpeed: number
+  totalDomains: number // 新增：接收域名总数
+  onViewChange: (view: 'servers' | 'domains') => void // 新增：点击事件回调
+  activeView: 'servers' | 'domains' // 新增：当前激活的视图
 }
 
-export default function ServerOverview({ online, offline, total, up, down, upSpeed, downSpeed }: ServerOverviewProps) {
+export default function ServerOverview({
+  online,
+  offline,
+  total,
+  up,
+  down,
+  upSpeed,
+  downSpeed,
+  totalDomains,
+  onViewChange,
+  activeView,
+}: ServerOverviewProps) {
   const { t } = useTranslation()
   const { status, setStatus } = useStatus()
 
-  // @ts-expect-error DisableAnimatedMan is a global variable
-  const disableAnimatedMan = window.DisableAnimatedMan as boolean
+  // --- 所有原始变量和逻辑保持不变 ---
+  const disableAnimatedMan = (window as any).DisableAnimatedMan as boolean
+  const customIllustration = (window as any).CustomIllustration || "/animated-man.webp"
+  const customBackgroundImage = (window as any).CustomBackgroundImage !== "" ? (window as any).CustomBackgroundImage : undefined
 
-  // @ts-expect-error CustomIllustration is a global variable
-  const customIllustration = window.CustomIllustration || "/animated-man.webp"
-
-  const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+  // 新增：一个组合了两个动作的点击处理函数
+  const handleServerCardClick = (serverStatus: 'all' | 'online' | 'offline') => {
+    onViewChange('servers'); // 动作1: 确保视图切换回服务器
+    setStatus(serverStatus); // 动作2: 执行原有的状态筛选
+  }
 
   return (
     <>
-      <section className="grid grid-cols-2 gap-4 lg:grid-cols-4 server-overview">
+      <section className="grid grid-cols-2 gap-4 lg:grid-cols-5 server-overview">
         <Card
-          onClick={() => {
-            setStatus("all")
-          }}
-          className={cn("hover:border-blue-500 cursor-pointer transition-all", {
-            "bg-card/70": customBackgroundImage,
-          })}
+          onClick={() => handleServerCardClick("all")}
+          className={cn(
+            "hover:border-blue-500 cursor-pointer transition-all",
+            { "bg-card/70": customBackgroundImage },
+          )}
         >
           <CardContent className="flex h-full items-center px-6 py-3">
             <section className="flex flex-col gap-1">
@@ -51,17 +71,11 @@ export default function ServerOverview({ online, offline, total, up, down, upSpe
           </CardContent>
         </Card>
         <Card
-          onClick={() => {
-            setStatus("online")
-          }}
+          onClick={() => handleServerCardClick("online")}
           className={cn(
             "cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
-            {
-              "bg-card/70": customBackgroundImage,
-            },
-            {
-              "ring-green-500 ring-2 border-transparent": status === "online",
-            },
+            { "bg-card/70": customBackgroundImage },
+            { "ring-green-500 ring-2 border-transparent": activeView === 'servers' && status === "online" }
           )}
         >
           <CardContent className="flex h-full items-center px-6 py-3">
@@ -72,24 +86,17 @@ export default function ServerOverview({ online, offline, total, up, down, upSpe
                   <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
                   <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
                 </span>
-
                 <div className="text-lg font-semibold">{online}</div>
               </div>
             </section>
           </CardContent>
         </Card>
         <Card
-          onClick={() => {
-            setStatus("offline")
-          }}
+          onClick={() => handleServerCardClick("offline")}
           className={cn(
             "cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
-            {
-              "bg-card/70": customBackgroundImage,
-            },
-            {
-              "ring-red-500 ring-2 border-transparent": status === "offline",
-            },
+            { "bg-card/70": customBackgroundImage },
+            { "ring-red-500 ring-2 border-transparent": activeView === 'servers' && status === "offline" }
           )}
         >
           <CardContent className="flex h-full items-center px-6 py-3">
@@ -105,42 +112,47 @@ export default function ServerOverview({ online, offline, total, up, down, upSpe
             </section>
           </CardContent>
         </Card>
+        
         <Card
-          className={cn("hover:ring-purple-500 ring-1 ring-transparent transition-all", {
-            "bg-card/70": customBackgroundImage,
-          })}
+          onClick={() => onViewChange('domains')}
+          className={cn(
+            "cursor-pointer hover:ring-indigo-500 ring-1 ring-transparent transition-all",
+            { "bg-card/70": customBackgroundImage },
+            { "ring-indigo-500 ring-2 border-transparent": activeView === 'domains' }
+          )}
+        >
+          <CardContent className="flex h-full items-center px-6 py-3">
+            <section className="flex flex-col gap-1">
+              <p className="text-sm font-medium md:text-base">总域名数</p>
+              <div className="flex items-center gap-2">
+                <Globe className="h-4 w-4 text-muted-foreground" />
+                <div className="text-lg font-semibold">{totalDomains}</div>
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+
+        <Card
+          className={cn("hover:ring-purple-500 ring-1 ring-transparent transition-all", { "bg-card/70": customBackgroundImage })}
         >
           <CardContent className="flex h-full items-center relative px-6 py-3">
             <section className="flex flex-col gap-1 w-full">
-              <div className="flex items-center w-full justify-between">
-                <p className="text-sm font-medium md:text-base">{t("serverOverview.network")}</p>
-              </div>
+              <div className="flex items-center w-full justify-between"><p className="text-sm font-medium md:text-base">{t("serverOverview.network")}</p></div>
               <section className="flex items-start flex-row z-10 pr-0 gap-1">
                 <p className="sm:text-[12px] text-[10px] text-blue-800 dark:text-blue-400   text-nowrap font-medium">↑{formatBytes(up)}</p>
                 <p className="sm:text-[12px] text-[10px]  text-purple-800 dark:text-purple-400  text-nowrap font-medium">↓{formatBytes(down)}</p>
               </section>
               <section className="flex flex-col sm:flex-row -mr-1 sm:items-center items-start gap-1">
-                <p className="text-[11px] flex items-center text-nowrap font-semibold">
-                  <ArrowUpCircleIcon className="size-3 mr-0.5 sm:mb-[1px]" />
-                  {formatBytes(upSpeed)}/s
-                </p>
-                <p className="text-[11px] flex items-center  text-nowrap font-semibold">
-                  <ArrowDownCircleIcon className="size-3 mr-0.5" />
-                  {formatBytes(downSpeed)}/s
-                </p>
+                <p className="text-[11px] flex items-center text-nowrap font-semibold"><ArrowUpCircleIcon className="size-3 mr-0.5 sm:mb-[1px]" />{formatBytes(upSpeed)}/s</p>
+                <p className="text-[11px] flex items-center  text-nowrap font-semibold"><ArrowDownCircleIcon className="size-3 mr-0.5" />{formatBytes(downSpeed)}/s</p>
               </section>
             </section>
             {!disableAnimatedMan && (
-              <img
-                className="absolute right-3 top-[-85px] z-50 w-20 scale-90 group-hover:opacity-50 md:scale-100 transition-all"
-                alt={"animated-man"}
-                src={customIllustration}
-                loading="eager"
-              />
+              <img className="absolute right-3 top-[-85px] z-50 w-20 scale-90 group-hover:opacity-50 md:scale-100 transition-all" alt={"animated-man"} src={customIllustration} loading="eager" />
             )}
           </CardContent>
         </Card>
       </section>
     </>
   )
-}
+}