Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-02-04 04:30:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

<add>Domain support

Browse Source
This commit is contained in:
Buriburizaem0n
2025-09-12 23:28:10 +08:00
parent 304fa67e91
commit 9c7dd052ff
6 changed files with 5071 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -39,7 +39,7 @@
"country-flag-icons": "1.5.18", "country-flag-icons": "1.5.18",
"d3-geo": "3.1.1", "d3-geo": "3.1.1",
"dayjs": "1.11.13", "dayjs": "1.11.13",
"framer-motion": "12.4.5", "framer-motion": "11.18.2",
"i18n-iso-countries": "7.14.0", "i18n-iso-countries": "7.14.0",
"i18next": "24.2.2", "i18next": "24.2.2",
"lucide-react": "0.460.0", "lucide-react": "0.460.0",

4447
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

41
src/api/domain.ts Normal file
View File

@@ -0,0 +1,41 @@
// 这是一个临时的类型定义，为了让代码能顺利编译。
// 理想情况下，它应该从由 swagger 生成的 types/api.ts 文件中导入。
export interface Domain {
ID: number;
Domain: string;
Status: 'verified' | 'pending' | 'expired';
VerifyToken: string;
BillingData: any;
CreatedAt: string;
UpdatedAt: string;
expires_in_days?: number;
}
/**
* 这是一个专门用于获取域名列表的函数，
* TanStack Query 将会调用它。
*/
export const getDomains = async (): Promise<Domain[]> => {
const response = await fetch('/api/v1/domains?scope=public');
if (!response.ok) {
throw new Error('网络响应错误');
}
// 后端返回的数据结构是 { success: true, data: [...] } 或类似结构
const result = await response.json();
// 根据 admin-frontend 的经验，数据可能在 result.data.data 中
// 但在这里我们先假设数据直接在 result.data 中
if (result && result.data) {
return result.data;
}
// 如果直接返回的就是数组
if (Array.isArray(result)) {
return result;
}
throw new Error('返回的数据格式不正确');
};

214
src/components/DomainStatus.tsx Normal file
View File

@@ -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>
);
};

118
src/components/ServerOverview.tsx
View File

@@ -1,10 +1,14 @@
// src/components/ServerOverview.tsx (最终完整版)
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
import { useStatus } from "@/hooks/use-status" import { useStatus } from "@/hooks/use-status"
import { formatBytes} from "@/lib/format" import { formatBytes} from "@/lib/format"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { ArrowDownCircleIcon, ArrowUpCircleIcon } from "@heroicons/react/20/solid" import { ArrowDownCircleIcon, ArrowUpCircleIcon } from "@heroicons/react/20/solid"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { Globe } from "lucide-react"
// 扩展 props 类型，以接收域名总数和新的交互逻辑
type ServerOverviewProps = { type ServerOverviewProps = {
online: number online: number
offline: number offline: number
@@ -13,30 +17,46 @@ type ServerOverviewProps = {
down: number down: number
upSpeed: number upSpeed: number
downSpeed: 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 { t } = useTranslation()
const { status, setStatus } = useStatus() 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 handleServerCardClick = (serverStatus: 'all' | 'online' | 'offline') => {
onViewChange('servers'); // 动作1: 确保视图切换回服务器
const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined setStatus(serverStatus); // 动作2: 执行原有的状态筛选
}
return ( 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 <Card
onClick={() => { onClick={() => handleServerCardClick("all")}
setStatus("all") className={cn(
}} "hover:border-blue-500 cursor-pointer transition-all",
className={cn("hover:border-blue-500 cursor-pointer transition-all", { { "bg-card/70": customBackgroundImage },
"bg-card/70": customBackgroundImage, )}
})}
> >
<CardContent className="flex h-full items-center px-6 py-3"> <CardContent className="flex h-full items-center px-6 py-3">
<section className="flex flex-col gap-1"> <section className="flex flex-col gap-1">
@@ -51,17 +71,11 @@ export default function ServerOverview({ online, offline, total, up, down, upSpe
</CardContent> </CardContent>
</Card> </Card>
<Card <Card
onClick={() => { onClick={() => handleServerCardClick("online")}
setStatus("online")
}}
className={cn( className={cn(
"cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all", "cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
{ { "bg-card/70": customBackgroundImage },
"bg-card/70": customBackgroundImage, { "ring-green-500 ring-2 border-transparent": activeView === 'servers' && status === "online" }
},
{
"ring-green-500 ring-2 border-transparent": status === "online",
},
)} )}
> >
<CardContent className="flex h-full items-center px-6 py-3"> <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="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 className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
</span> </span>
<div className="text-lg font-semibold">{online}</div> <div className="text-lg font-semibold">{online}</div>
</div> </div>
</section> </section>
</CardContent> </CardContent>
</Card> </Card>
<Card <Card
onClick={() => { onClick={() => handleServerCardClick("offline")}
setStatus("offline")
}}
className={cn( className={cn(
"cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all", "cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
{ { "bg-card/70": customBackgroundImage },
"bg-card/70": customBackgroundImage, { "ring-red-500 ring-2 border-transparent": activeView === 'servers' && status === "offline" }
},
{
"ring-red-500 ring-2 border-transparent": status === "offline",
},
)} )}
> >
<CardContent className="flex h-full items-center px-6 py-3"> <CardContent className="flex h-full items-center px-6 py-3">
@@ -105,38 +112,43 @@ export default function ServerOverview({ online, offline, total, up, down, upSpe
</section> </section>
</CardContent> </CardContent>
</Card> </Card>
<Card <Card
className={cn("hover:ring-purple-500 ring-1 ring-transparent transition-all", { onClick={() => onViewChange('domains')}
"bg-card/70": customBackgroundImage, 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"> <CardContent className="flex h-full items-center relative px-6 py-3">
<section className="flex flex-col gap-1 w-full"> <section className="flex flex-col gap-1 w-full">
<div className="flex items-center w-full justify-between"> <div className="flex items-center w-full justify-between"><p className="text-sm font-medium md:text-base">{t("serverOverview.network")}</p></div>
<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"> <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-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> <p className="sm:text-[12px] text-[10px] text-purple-800 dark:text-purple-400 text-nowrap font-medium">↓{formatBytes(down)}</p>
</section> </section>
<section className="flex flex-col sm:flex-row -mr-1 sm:items-center items-start gap-1"> <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"> <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>
<ArrowUpCircleIcon className="size-3 mr-0.5 sm:mb-[1px]" /> <p className="text-[11px] flex items-center text-nowrap font-semibold"><ArrowDownCircleIcon className="size-3 mr-0.5" />{formatBytes(downSpeed)}/s</p>
{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>
</section> </section>
{!disableAnimatedMan && ( {!disableAnimatedMan && (
<img <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" />
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> </CardContent>
</Card> </Card>

287
src/pages/Server.tsx
View File

@@ -1,115 +1,131 @@
import GlobalMap from "@/components/GlobalMap" // src/pages/Server.tsx (最终交互优化版)
import GroupSwitch from "@/components/GroupSwitch"
import ServerCard from "@/components/ServerCard" import GlobalMap from "@/components/GlobalMap";
import ServerCardInline from "@/components/ServerCardInline" import GroupSwitch from "@/components/GroupSwitch";
import ServerOverview from "@/components/ServerOverview" import ServerCard from "@/components/ServerCard";
import { ServiceTracker } from "@/components/ServiceTracker" import ServerCardInline from "@/components/ServerCardInline";
import { Loader } from "@/components/loading/Loader" import ServerOverview from "@/components/ServerOverview";
import { Label } from "@/components/ui/label" import { ServiceTracker } from "@/components/ServiceTracker";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Loader } from "@/components/loading/Loader";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label";
import { SORT_ORDERS, SORT_TYPES } from "@/context/sort-context" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { useSort } from "@/hooks/use-sort" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useStatus } from "@/hooks/use-status" import { SORT_ORDERS, SORT_TYPES } from "@/context/sort-context";
import { useWebSocketContext } from "@/hooks/use-websocket-context" import { useSort } from "@/hooks/use-sort";
import { fetchServerGroup } from "@/lib/nezha-api" import { useStatus } from "@/hooks/use-status";
import { cn, formatNezhaInfo } from "@/lib/utils" import { useWebSocketContext } from "@/hooks/use-websocket-context";
import { NezhaWebsocketResponse } from "@/types/nezha-api" import { fetchServerGroup } from "@/lib/nezha-api";
import { ServerGroup } from "@/types/nezha-api" import { cn, formatNezhaInfo } from "@/lib/utils";
import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon, ChartBarSquareIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid" import { NezhaWebsocketResponse, ServerGroup } from "@/types/nezha-api";
import { useQuery } from "@tanstack/react-query" import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon, ChartBarSquareIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid";
import { useEffect, useRef, useState } from "react" import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next" import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { DomainStatus } from "@/components/DomainStatus";
import { getDomains } from "@/api/domain";
export default function Servers() { export default function Servers() {
const { t } = useTranslation() const { t } = useTranslation();
const { sortType, sortOrder, setSortOrder, setSortType } = useSort() const { sortType, sortOrder, setSortOrder, setSortType } = useSort();
const { data: groupData } = useQuery({ const { data: groupData } = useQuery({
queryKey: ["server-group"], queryKey: ["server-group"],
queryFn: () => fetchServerGroup(), queryFn: () => fetchServerGroup(),
}) });
const { lastMessage, connected } = useWebSocketContext() const { lastMessage, connected } = useWebSocketContext();
const { status } = useStatus() const { status } = useStatus();
const [showServices, setShowServices] = useState<string>("0") const [showServices, setShowServices] = useState<string>("0");
const [showMap, setShowMap] = useState<string>("0") const [showMap, setShowMap] = useState<string>("0");
const [inline, setInline] = useState<string>("0") const [inline, setInline] = useState<string>("0");
const containerRef = useRef<HTMLDivElement>(null) const containerRef = useRef<HTMLDivElement>(null);
const [settingsOpen, setSettingsOpen] = useState<boolean>(false) const [settingsOpen, setSettingsOpen] = useState<boolean>(false);
const [currentGroup, setCurrentGroup] = useState<string>("All") const [currentGroup, setCurrentGroup] = useState<string>("All");
const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined const [activeView, setActiveView] = useState<'servers' | 'domains'>('servers');
const { data: domains } = useQuery({
queryKey: ['domains'],
queryFn: getDomains
});
// 当用户点击 "在线" 或 "离线" 或 "总服务器数" 时，status 会改变，我们就自动切回服务器视图
useEffect(() => {
// 只有在 status 改变时才触发，避免无限循环
const currentStatus = status || 'all';
if(currentStatus !== 'all' || activeView === 'domains') {
setActiveView('servers');
}
}, [status]);
const customBackgroundImage = (window as any).CustomBackgroundImage !== "" ? (window as any).CustomBackgroundImage : undefined;
const restoreScrollPosition = () => { const restoreScrollPosition = () => {
const savedPosition = sessionStorage.getItem("scrollPosition") const savedPosition = sessionStorage.getItem("scrollPosition");
if (savedPosition && containerRef.current) { if (savedPosition && containerRef.current) {
containerRef.current.scrollTop = Number(savedPosition) containerRef.current.scrollTop = Number(savedPosition);
}
} }
};
const handleTagChange = (newGroup: string) => { const handleTagChange = (newGroup: string) => {
setCurrentGroup(newGroup) setCurrentGroup(newGroup);
sessionStorage.setItem("selectedGroup", newGroup) sessionStorage.setItem("selectedGroup", newGroup);
sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0)) sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0));
} };
useEffect(() => { useEffect(() => {
const showServicesState = localStorage.getItem("showServices") const showServicesState = localStorage.getItem("showServices");
if (window.ForceShowServices) { if ((window as any).ForceShowServices) {
setShowServices("1") setShowServices("1");
} else if (showServicesState !== null) { } else if (showServicesState !== null) {
setShowServices(showServicesState) setShowServices(showServicesState);
} }
}, []) }, []);
useEffect(() => { useEffect(() => {
const checkInlineSettings = () => { const checkInlineSettings = () => {
const isMobile = window.innerWidth < 768 const isMobile = window.innerWidth < 768;
if (!isMobile) { if (!isMobile) {
const inlineState = localStorage.getItem("inline") const inlineState = localStorage.getItem("inline");
if (window.ForceCardInline) { if ((window as any).ForceCardInline) {
setInline("1") setInline("1");
} else if (inlineState !== null) { } else if (inlineState !== null) {
setInline(inlineState) setInline(inlineState);
}
} }
} }
};
checkInlineSettings() checkInlineSettings();
window.addEventListener("resize", checkInlineSettings);
window.addEventListener("resize", checkInlineSettings)
return () => { return () => {
window.removeEventListener("resize", checkInlineSettings) window.removeEventListener("resize", checkInlineSettings);
} };
}, []) }, []);
useEffect(() => { useEffect(() => {
const showMapState = localStorage.getItem("showMap") const showMapState = localStorage.getItem("showMap");
if (window.ForceShowMap) { if ((window as any).ForceShowMap) {
setShowMap("1") setShowMap("1");
} else if (showMapState !== null) { } else if (showMapState !== null) {
setShowMap(showMapState) setShowMap(showMapState);
} }
}, []) }, []);
useEffect(() => { useEffect(() => {
const savedGroup = sessionStorage.getItem("selectedGroup") || "All" const savedGroup = sessionStorage.getItem("selectedGroup") || "All";
setCurrentGroup(savedGroup) setCurrentGroup(savedGroup);
restoreScrollPosition();
}, []);
restoreScrollPosition() const nezhaWsData = lastMessage ? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse) : null;
}, [])
const nezhaWsData = lastMessage ? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse) : null
const groupTabs = [ const groupTabs = [
"All", "All",
...(groupData?.data ...(groupData?.data
?.filter((item: ServerGroup) => { ?.filter((item: ServerGroup) => {
return Array.isArray(item.servers) && item.servers.some((serverId) => nezhaWsData?.servers?.some((server) => server.id === serverId)) return Array.isArray(item.servers) && item.servers.some((serverId) => nezhaWsData?.servers?.some((server) => server.id === serverId));
}) })
?.map((item: ServerGroup) => item.group.name) || []), ?.map((item: ServerGroup) => item.group.name) || []),
] ];
if (!connected && !lastMessage) { if (!connected && !lastMessage) {
return ( return (
@@ -119,7 +135,7 @@ export default function Servers() {
{t("info.websocketConnecting")} {t("info.websocketConnecting")}
</div> </div>
</div> </div>
) );
} }
if (!nezhaWsData) { if (!nezhaWsData) {
@@ -127,102 +143,101 @@ export default function Servers() {
<div className="flex flex-col items-center justify-center "> <div className="flex flex-col items-center justify-center ">
<p className="font-semibold text-sm">{t("info.processing")} </p> <p className="font-semibold text-sm">{t("info.processing")} </p>
</div> </div>
) );
} }
let filteredServers = let filteredServers =
nezhaWsData?.servers?.filter((server) => { nezhaWsData?.servers?.filter((server) => {
if (currentGroup === "All") return true if (currentGroup === "All") return true;
const group = groupData?.data?.find( const group = groupData?.data?.find(
(g: ServerGroup) => g.group.name === currentGroup && Array.isArray(g.servers) && g.servers.includes(server.id), (g: ServerGroup) => g.group.name === currentGroup && Array.isArray(g.servers) && g.servers.includes(server.id),
) );
return !!group return !!group;
}) || [] }) || [];
const totalServers = filteredServers.length || 0 const totalServers = filteredServers.length || 0;
const onlineServers = filteredServers.filter((server) => formatNezhaInfo(nezhaWsData.now, server).online)?.length || 0 const onlineServers = filteredServers.filter((server) => formatNezhaInfo(nezhaWsData.now, server).online)?.length || 0;
const offlineServers = filteredServers.filter((server) => !formatNezhaInfo(nezhaWsData.now, server).online)?.length || 0 const offlineServers = filteredServers.filter((server) => !formatNezhaInfo(nezhaWsData.now, server).online)?.length || 0;
const up = const up =
filteredServers.reduce( filteredServers.reduce(
(total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_out_transfer ?? 0) : total), (total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_out_transfer ?? 0) : total),
0, 0,
) || 0 ) || 0;
const down = const down =
filteredServers.reduce( filteredServers.reduce(
(total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_in_transfer ?? 0) : total), (total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_in_transfer ?? 0) : total),
0, 0,
) || 0 ) || 0;
const upSpeed = const upSpeed =
filteredServers.reduce( filteredServers.reduce(
(total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_out_speed ?? 0) : total), (total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_out_speed ?? 0) : total),
0, 0,
) || 0 ) || 0;
const downSpeed = const downSpeed =
filteredServers.reduce( filteredServers.reduce(
(total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_in_speed ?? 0) : total), (total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_in_speed ?? 0) : total),
0, 0,
) || 0 ) || 0;
filteredServers = filteredServers =
status === "all" status === "all"
? filteredServers ? filteredServers
: filteredServers.filter((server) => [status].includes(formatNezhaInfo(nezhaWsData.now, server).online ? "online" : "offline")) : filteredServers.filter((server) => [status].includes(formatNezhaInfo(nezhaWsData.now, server).online ? "online" : "offline"));
filteredServers = filteredServers.sort((a, b) => { filteredServers = filteredServers.sort((a, b) => {
const serverAInfo = formatNezhaInfo(nezhaWsData.now, a) const serverAInfo = formatNezhaInfo(nezhaWsData.now, a);
const serverBInfo = formatNezhaInfo(nezhaWsData.now, b) const serverBInfo = formatNezhaInfo(nezhaWsData.now, b);
if (sortType !== "name") { if (sortType !== "name") {
// 仅在非 "name" 排序时，先按在线状态排序 if (!serverAInfo.online && serverBInfo.online) return 1;
if (!serverAInfo.online && serverBInfo.online) return 1 if (serverAInfo.online && !serverBInfo.online) return -1;
if (serverAInfo.online && !serverBInfo.online) return -1
if (!serverAInfo.online && !serverBInfo.online) { if (!serverAInfo.online && !serverBInfo.online) {
// 如果两者都离线，可以继续按照其他条件排序，或者保持原序 return 0;
// 这里选择保持原序
return 0
} }
} }
let comparison = 0 let comparison = 0;
switch (sortType) { switch (sortType) {
case "name": case "name":
comparison = a.name.localeCompare(b.name) comparison = a.name.localeCompare(b.name);
break break;
case "uptime": case "uptime":
comparison = (a.state?.uptime ?? 0) - (b.state?.uptime ?? 0) comparison = (a.state?.uptime ?? 0) - (b.state?.uptime ?? 0);
break break;
case "system": case "system":
comparison = a.host.platform.localeCompare(b.host.platform) comparison = a.host.platform.localeCompare(b.host.platform);
break break;
case "cpu": case "cpu":
comparison = (a.state?.cpu ?? 0) - (b.state?.cpu ?? 0) comparison = (a.state?.cpu ?? 0) - (b.state?.cpu ?? 0);
break break;
case "mem": case "mem":
comparison = (formatNezhaInfo(nezhaWsData.now, a).mem ?? 0) - (formatNezhaInfo(nezhaWsData.now, b).mem ?? 0) comparison = (formatNezhaInfo(nezhaWsData.now, a).mem ?? 0) - (formatNezhaInfo(nezhaWsData.now, b).mem ?? 0);
break break;
case "disk": case "disk":
comparison = (formatNezhaInfo(nezhaWsData.now, a).disk ?? 0) - (formatNezhaInfo(nezhaWsData.now, b).disk ?? 0) comparison = (formatNezhaInfo(nezhaWsData.now, a).disk ?? 0) - (formatNezhaInfo(nezhaWsData.now, b).disk ?? 0);
break break;
case "up": case "up":
comparison = (a.state?.net_out_speed ?? 0) - (b.state?.net_out_speed ?? 0) comparison = (a.state?.net_out_speed ?? 0) - (b.state?.net_out_speed ?? 0);
break break;
case "down": case "down":
comparison = (a.state?.net_in_speed ?? 0) - (b.state?.net_in_speed ?? 0) comparison = (a.state?.net_in_speed ?? 0) - (b.state?.net_in_speed ?? 0);
break break;
case "up total": case "up total":
comparison = (a.state?.net_out_transfer ?? 0) - (b.state?.net_out_transfer ?? 0) comparison = (a.state?.net_out_transfer ?? 0) - (b.state?.net_out_transfer ?? 0);
break break;
case "down total": case "down total":
comparison = (a.state?.net_in_transfer ?? 0) - (b.state?.net_in_transfer ?? 0) comparison = (a.state?.net_in_transfer ?? 0) - (b.state?.net_in_transfer ?? 0);
break break;
default: default:
comparison = 0 comparison = 0;
} }
return sortOrder === "asc" ? comparison : -comparison return sortOrder === "asc" ? comparison : -comparison;
}) });
const totalDomainsCount = domains?.length || 0;
return ( return (
<div className="mx-auto w-full max-w-5xl px-0"> <div className="mx-auto w-full max-w-5xl px-0">
@@ -234,13 +249,23 @@ export default function Servers() {
down={down} down={down}
upSpeed={upSpeed} upSpeed={upSpeed}
downSpeed={downSpeed} downSpeed={downSpeed}
totalDomains={totalDomainsCount}
onViewChange={setActiveView}
activeView={activeView}
/> />
{/* ======================================================= */}
{/* vvvvvvvvvvv 这是最终的条件渲染逻辑 vvvvvvvvvvv */}
{/* 只有在 'domains' 视图下，才隐藏服务器列表 */}
{activeView !== 'domains' && (
<>
<div className="flex mt-6 items-center justify-between gap-2 server-overview-controls"> <div className="flex mt-6 items-center justify-between gap-2 server-overview-controls">
<section className="flex items-center gap-2 w-full overflow-hidden"> <section className="flex items-center gap-2 w-full overflow-hidden">
<button <button
onClick={() => { onClick={() => {
setShowMap(showMap === "0" ? "1" : "0") setShowMap(showMap === "0" ? "1" : "0");
localStorage.setItem("showMap", showMap === "0" ? "1" : "0") localStorage.setItem("showMap", showMap === "0" ? "1" : "0");
}} }}
className={cn( className={cn(
"rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border dark:border-none border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]", "rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border dark:border-none border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]",
@@ -261,8 +286,8 @@ export default function Servers() {
</button> </button>
<button <button
onClick={() => { onClick={() => {
setShowServices(showServices === "0" ? "1" : "0") setShowServices(showServices === "0" ? "1" : "0");
localStorage.setItem("showServices", showServices === "0" ? "1" : "0") localStorage.setItem("showServices", showServices === "0" ? "1" : "0");
}} }}
className={cn( className={cn(
"rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border dark:border-none border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]", "rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border dark:border-none border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]",
@@ -283,8 +308,8 @@ export default function Servers() {
</button> </button>
<button <button
onClick={() => { onClick={() => {
setInline(inline === "0" ? "1" : "0") setInline(inline === "0" ? "1" : "0");
localStorage.setItem("inline", inline === "0" ? "1" : "0") localStorage.setItem("inline", inline === "0" ? "1" : "0");
}} }}
className={cn( className={cn(
"rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border dark:border-none border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]", "rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border dark:border-none border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]",
@@ -380,6 +405,18 @@ export default function Servers() {
))} ))}
</section> </section>
)} )}
</>
)}
{/* 只有在 status 为 'all' (即点击总服务器数时) 或者 activeView 为 'domains' 时，才显示域名列表 */}
{(status === 'all' || activeView === 'domains') && (
<div className="mt-6">
<DomainStatus />
</div> </div>
) )}
{/* ^^^^^^^^^^^ 这是最终的条件渲染逻辑 ^^^^^^^^^^^ */}
{/* ======================================================= */}
</div>
);
} }