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",
"d3-geo": "3.1.1",
"dayjs": "1.11.13",
"framer-motion": "12.4.5",
"framer-motion": "11.18.2",
"i18n-iso-countries": "7.14.0",
"i18next": "24.2.2",
"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>
);
};

120
src/components/ServerOverview.tsx
View File

@@ -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,38 +112,43 @@ 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>

563
src/pages/Server.tsx
View File

@@ -1,115 +1,131 @@
import GlobalMap from "@/components/GlobalMap"
import GroupSwitch from "@/components/GroupSwitch"
import ServerCard from "@/components/ServerCard"
import ServerCardInline from "@/components/ServerCardInline"
import ServerOverview from "@/components/ServerOverview"
import { ServiceTracker } from "@/components/ServiceTracker"
import { Loader } from "@/components/loading/Loader"
import { Label } from "@/components/ui/label"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { SORT_ORDERS, SORT_TYPES } from "@/context/sort-context"
import { useSort } from "@/hooks/use-sort"
import { useStatus } from "@/hooks/use-status"
import { useWebSocketContext } from "@/hooks/use-websocket-context"
import { fetchServerGroup } from "@/lib/nezha-api"
import { cn, formatNezhaInfo } from "@/lib/utils"
import { NezhaWebsocketResponse } from "@/types/nezha-api"
import { ServerGroup } from "@/types/nezha-api"
import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon, ChartBarSquareIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
import { useQuery } from "@tanstack/react-query"
import { useEffect, useRef, useState } from "react"
import { useTranslation } from "react-i18next"
// src/pages/Server.tsx (最终交互优化版)
import GlobalMap from "@/components/GlobalMap";
import GroupSwitch from "@/components/GroupSwitch";
import ServerCard from "@/components/ServerCard";
import ServerCardInline from "@/components/ServerCardInline";
import ServerOverview from "@/components/ServerOverview";
import { ServiceTracker } from "@/components/ServiceTracker";
import { Loader } from "@/components/loading/Loader";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { SORT_ORDERS, SORT_TYPES } from "@/context/sort-context";
import { useSort } from "@/hooks/use-sort";
import { useStatus } from "@/hooks/use-status";
import { useWebSocketContext } from "@/hooks/use-websocket-context";
import { fetchServerGroup } from "@/lib/nezha-api";
import { cn, formatNezhaInfo } from "@/lib/utils";
import { NezhaWebsocketResponse, ServerGroup } from "@/types/nezha-api";
import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon, ChartBarSquareIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid";
import { useQuery } from "@tanstack/react-query";
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() {
const { t } = useTranslation()
const { sortType, sortOrder, setSortOrder, setSortType } = useSort()
const { t } = useTranslation();
const { sortType, sortOrder, setSortOrder, setSortType } = useSort();
const { data: groupData } = useQuery({
queryKey: ["server-group"],
queryFn: () => fetchServerGroup(),
})
const { lastMessage, connected } = useWebSocketContext()
const { status } = useStatus()
const [showServices, setShowServices] = useState<string>("0")
const [showMap, setShowMap] = useState<string>("0")
const [inline, setInline] = useState<string>("0")
const containerRef = useRef<HTMLDivElement>(null)
const [settingsOpen, setSettingsOpen] = useState<boolean>(false)
const [currentGroup, setCurrentGroup] = useState<string>("All")
});
const { lastMessage, connected } = useWebSocketContext();
const { status } = useStatus();
const [showServices, setShowServices] = useState<string>("0");
const [showMap, setShowMap] = useState<string>("0");
const [inline, setInline] = useState<string>("0");
const containerRef = useRef<HTMLDivElement>(null);
const [settingsOpen, setSettingsOpen] = useState<boolean>(false);
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 savedPosition = sessionStorage.getItem("scrollPosition")
const savedPosition = sessionStorage.getItem("scrollPosition");
if (savedPosition && containerRef.current) {
containerRef.current.scrollTop = Number(savedPosition)
containerRef.current.scrollTop = Number(savedPosition);
}
}
};
const handleTagChange = (newGroup: string) => {
setCurrentGroup(newGroup)
sessionStorage.setItem("selectedGroup", newGroup)
sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0))
}
setCurrentGroup(newGroup);
sessionStorage.setItem("selectedGroup", newGroup);
sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0));
};
useEffect(() => {
const showServicesState = localStorage.getItem("showServices")
if (window.ForceShowServices) {
setShowServices("1")
const showServicesState = localStorage.getItem("showServices");
if ((window as any).ForceShowServices) {
setShowServices("1");
} else if (showServicesState !== null) {
setShowServices(showServicesState)
setShowServices(showServicesState);
}
}, [])
}, []);
useEffect(() => {
const checkInlineSettings = () => {
const isMobile = window.innerWidth < 768
const isMobile = window.innerWidth < 768;
if (!isMobile) {
const inlineState = localStorage.getItem("inline")
if (window.ForceCardInline) {
setInline("1")
const inlineState = localStorage.getItem("inline");
if ((window as any).ForceCardInline) {
setInline("1");
} else if (inlineState !== null) {
setInline(inlineState)
setInline(inlineState);
}
}
}
checkInlineSettings()
window.addEventListener("resize", checkInlineSettings)
};
checkInlineSettings();
window.addEventListener("resize", checkInlineSettings);
return () => {
window.removeEventListener("resize", checkInlineSettings)
}
}, [])
window.removeEventListener("resize", checkInlineSettings);
};
}, []);
useEffect(() => {
const showMapState = localStorage.getItem("showMap")
if (window.ForceShowMap) {
setShowMap("1")
const showMapState = localStorage.getItem("showMap");
if ((window as any).ForceShowMap) {
setShowMap("1");
} else if (showMapState !== null) {
setShowMap(showMapState)
setShowMap(showMapState);
}
}, [])
}, []);
useEffect(() => {
const savedGroup = sessionStorage.getItem("selectedGroup") || "All"
setCurrentGroup(savedGroup)
const savedGroup = sessionStorage.getItem("selectedGroup") || "All";
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 = [
"All",
...(groupData?.data
?.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) || []),
]
];
if (!connected && !lastMessage) {
return (
@@ -119,110 +135,109 @@ export default function Servers() {
{t("info.websocketConnecting")}
</div>
</div>
)
);
}
if (!nezhaWsData) {
return (
<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>
)
);
}
let filteredServers =
nezhaWsData?.servers?.filter((server) => {
if (currentGroup === "All") return true
if (currentGroup === "All") return true;
const group = groupData?.data?.find(
(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 onlineServers = filteredServers.filter((server) => formatNezhaInfo(nezhaWsData.now, server).online)?.length || 0
const offlineServers = filteredServers.filter((server) => !formatNezhaInfo(nezhaWsData.now, server).online)?.length || 0
const totalServers = filteredServers.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 up =
filteredServers.reduce(
(total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_out_transfer ?? 0) : total),
0,
) || 0
) || 0;
const down =
filteredServers.reduce(
(total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_in_transfer ?? 0) : total),
0,
) || 0
) || 0;
const upSpeed =
filteredServers.reduce(
(total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_out_speed ?? 0) : total),
0,
) || 0
) || 0;
const downSpeed =
filteredServers.reduce(
(total, server) => (formatNezhaInfo(nezhaWsData.now, server).online ? total + (server.state?.net_in_speed ?? 0) : total),
0,
) || 0
) || 0;
filteredServers =
status === "all"
? 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) => {
const serverAInfo = formatNezhaInfo(nezhaWsData.now, a)
const serverBInfo = formatNezhaInfo(nezhaWsData.now, b)
const serverAInfo = formatNezhaInfo(nezhaWsData.now, a);
const serverBInfo = formatNezhaInfo(nezhaWsData.now, b);
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) {
// 如果两者都离线，可以继续按照其他条件排序，或者保持原序
// 这里选择保持原序
return 0
return 0;
}
}
let comparison = 0
let comparison = 0;
switch (sortType) {
case "name":
comparison = a.name.localeCompare(b.name)
break
comparison = a.name.localeCompare(b.name);
break;
case "uptime":
comparison = (a.state?.uptime ?? 0) - (b.state?.uptime ?? 0)
break
comparison = (a.state?.uptime ?? 0) - (b.state?.uptime ?? 0);
break;
case "system":
comparison = a.host.platform.localeCompare(b.host.platform)
break
comparison = a.host.platform.localeCompare(b.host.platform);
break;
case "cpu":
comparison = (a.state?.cpu ?? 0) - (b.state?.cpu ?? 0)
break
comparison = (a.state?.cpu ?? 0) - (b.state?.cpu ?? 0);
break;
case "mem":
comparison = (formatNezhaInfo(nezhaWsData.now, a).mem ?? 0) - (formatNezhaInfo(nezhaWsData.now, b).mem ?? 0)
break
comparison = (formatNezhaInfo(nezhaWsData.now, a).mem ?? 0) - (formatNezhaInfo(nezhaWsData.now, b).mem ?? 0);
break;
case "disk":
comparison = (formatNezhaInfo(nezhaWsData.now, a).disk ?? 0) - (formatNezhaInfo(nezhaWsData.now, b).disk ?? 0)
break
comparison = (formatNezhaInfo(nezhaWsData.now, a).disk ?? 0) - (formatNezhaInfo(nezhaWsData.now, b).disk ?? 0);
break;
case "up":
comparison = (a.state?.net_out_speed ?? 0) - (b.state?.net_out_speed ?? 0)
break
comparison = (a.state?.net_out_speed ?? 0) - (b.state?.net_out_speed ?? 0);
break;
case "down":
comparison = (a.state?.net_in_speed ?? 0) - (b.state?.net_in_speed ?? 0)
break
comparison = (a.state?.net_in_speed ?? 0) - (b.state?.net_in_speed ?? 0);
break;
case "up total":
comparison = (a.state?.net_out_transfer ?? 0) - (b.state?.net_out_transfer ?? 0)
break
comparison = (a.state?.net_out_transfer ?? 0) - (b.state?.net_out_transfer ?? 0);
break;
case "down total":
comparison = (a.state?.net_in_transfer ?? 0) - (b.state?.net_in_transfer ?? 0)
break
comparison = (a.state?.net_in_transfer ?? 0) - (b.state?.net_in_transfer ?? 0);
break;
default:
comparison = 0
comparison = 0;
}
return sortOrder === "asc" ? comparison : -comparison
})
return sortOrder === "asc" ? comparison : -comparison;
});
const totalDomainsCount = domains?.length || 0;
return (
<div className="mx-auto w-full max-w-5xl px-0">
@@ -234,152 +249,174 @@ export default function Servers() {
down={down}
upSpeed={upSpeed}
downSpeed={downSpeed}
totalDomains={totalDomainsCount}
onViewChange={setActiveView}
activeView={activeView}
/>
<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">
<button
onClick={() => {
setShowMap(showMap === "0" ? "1" : "0")
localStorage.setItem("showMap", showMap === "0" ? "1" : "0")
}}
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)]",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] !bg-blue-600 hover:!bg-blue-600 border-blue-600 dark:border-blue-600": showMap === "1",
"text-white": showMap === "1",
},
{
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
},
)}
>
<MapIcon
className={cn("size-[13px]", {
"text-white": showMap === "1",
})}
/>
</button>
<button
onClick={() => {
setShowServices(showServices === "0" ? "1" : "0")
localStorage.setItem("showServices", showServices === "0" ? "1" : "0")
}}
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)]",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] !bg-blue-600 hover:!bg-blue-600 border-blue-600 dark:border-blue-600": showServices === "1",
"text-white": showServices === "1",
},
{
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
},
)}
>
<ChartBarSquareIcon
className={cn("size-[13px]", {
"text-white": showServices === "1",
})}
/>
</button>
<button
onClick={() => {
setInline(inline === "0" ? "1" : "0")
localStorage.setItem("inline", inline === "0" ? "1" : "0")
}}
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)]",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] !bg-blue-600 hover:!bg-blue-600 border-blue-600 dark:border-blue-600": inline === "1",
"text-white": inline === "1",
},
{
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
},
)}
>
<ViewColumnsIcon
className={cn("size-[13px]", {
"text-white": inline === "1",
})}
/>
</button>
<GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={handleTagChange} />
</section>
<Popover onOpenChange={setSettingsOpen}>
<PopoverTrigger asChild>
<button
className={cn(
"rounded-[50px] flex items-center gap-1 dark:text-white border dark:border-none text-black cursor-pointer dark:[text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] dark:bg-stone-800 bg-white p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] dark:bg-stone-700 bg-stone-200": settingsOpen,
},
{
"dark:bg-stone-800/70 bg-stone-100/70 ": customBackgroundImage,
},
)}
>
<p className="text-[10px] font-bold whitespace-nowrap">{sortType === "default" ? "Sort" : sortType.toUpperCase()}</p>
{sortOrder === "asc" && sortType !== "default" ? (
<ArrowUpIcon className="size-[13px]" />
) : sortOrder === "desc" && sortType !== "default" ? (
<ArrowDownIcon className="size-[13px]" />
) : (
<ArrowsUpDownIcon className="size-[13px]" />
)}
</button>
</PopoverTrigger>
<PopoverContent className="p-4 w-[240px] rounded-lg">
<div className="space-y-4">
<div className="space-y-2">
<Label className="text-xs font-medium text-muted-foreground">Sort by</Label>
<Select value={sortType} onValueChange={setSortType}>
<SelectTrigger className="w-full text-xs h-8">
<SelectValue placeholder="Choose type" />
</SelectTrigger>
<SelectContent>
{SORT_TYPES.map((type) => (
<SelectItem key={type} value={type} className="text-xs">
{type.charAt(0).toUpperCase() + type.slice(1)}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-xs font-medium text-muted-foreground">Sort order</Label>
<Select value={sortOrder} onValueChange={setSortOrder} disabled={sortType === "default"}>
<SelectTrigger className="w-full text-xs h-8">
<SelectValue placeholder="Choose order" />
</SelectTrigger>
<SelectContent>
{SORT_ORDERS.map((order) => (
<SelectItem key={order} value={order} className="text-xs">
{order.charAt(0).toUpperCase() + order.slice(1)}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</PopoverContent>
</Popover>
</div>
{showMap === "1" && <GlobalMap now={nezhaWsData.now} serverList={nezhaWsData?.servers || []} />}
{showServices === "1" && <ServiceTracker serverList={filteredServers} />}
{inline === "1" && (
<section ref={containerRef} className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden mt-6 server-inline-list">
{filteredServers.map((serverInfo) => (
<ServerCardInline now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
))}
</section>
{/* ======================================================= */}
{/* vvvvvvvvvvv 这是最终的条件渲染逻辑 vvvvvvvvvvv */}
{/* 只有在 'domains' 视图下，才隐藏服务器列表 */}
{activeView !== 'domains' && (
<>
<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">
<button
onClick={() => {
setShowMap(showMap === "0" ? "1" : "0");
localStorage.setItem("showMap", showMap === "0" ? "1" : "0");
}}
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)]",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] !bg-blue-600 hover:!bg-blue-600 border-blue-600 dark:border-blue-600": showMap === "1",
"text-white": showMap === "1",
},
{
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
},
)}
>
<MapIcon
className={cn("size-[13px]", {
"text-white": showMap === "1",
})}
/>
</button>
<button
onClick={() => {
setShowServices(showServices === "0" ? "1" : "0");
localStorage.setItem("showServices", showServices === "0" ? "1" : "0");
}}
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)]",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] !bg-blue-600 hover:!bg-blue-600 border-blue-600 dark:border-blue-600": showServices === "1",
"text-white": showServices === "1",
},
{
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
},
)}
>
<ChartBarSquareIcon
className={cn("size-[13px]", {
"text-white": showServices === "1",
})}
/>
</button>
<button
onClick={() => {
setInline(inline === "0" ? "1" : "0");
localStorage.setItem("inline", inline === "0" ? "1" : "0");
}}
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)]",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] !bg-blue-600 hover:!bg-blue-600 border-blue-600 dark:border-blue-600": inline === "1",
"text-white": inline === "1",
},
{
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
},
)}
>
<ViewColumnsIcon
className={cn("size-[13px]", {
"text-white": inline === "1",
})}
/>
</button>
<GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={handleTagChange} />
</section>
<Popover onOpenChange={setSettingsOpen}>
<PopoverTrigger asChild>
<button
className={cn(
"rounded-[50px] flex items-center gap-1 dark:text-white border dark:border-none text-black cursor-pointer dark:[text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] dark:bg-stone-800 bg-white p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] dark:bg-stone-700 bg-stone-200": settingsOpen,
},
{
"dark:bg-stone-800/70 bg-stone-100/70 ": customBackgroundImage,
},
)}
>
<p className="text-[10px] font-bold whitespace-nowrap">{sortType === "default" ? "Sort" : sortType.toUpperCase()}</p>
{sortOrder === "asc" && sortType !== "default" ? (
<ArrowUpIcon className="size-[13px]" />
) : sortOrder === "desc" && sortType !== "default" ? (
<ArrowDownIcon className="size-[13px]" />
) : (
<ArrowsUpDownIcon className="size-[13px]" />
)}
</button>
</PopoverTrigger>
<PopoverContent className="p-4 w-[240px] rounded-lg">
<div className="space-y-4">
<div className="space-y-2">
<Label className="text-xs font-medium text-muted-foreground">Sort by</Label>
<Select value={sortType} onValueChange={setSortType}>
<SelectTrigger className="w-full text-xs h-8">
<SelectValue placeholder="Choose type" />
</SelectTrigger>
<SelectContent>
{SORT_TYPES.map((type) => (
<SelectItem key={type} value={type} className="text-xs">
{type.charAt(0).toUpperCase() + type.slice(1)}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-xs font-medium text-muted-foreground">Sort order</Label>
<Select value={sortOrder} onValueChange={setSortOrder} disabled={sortType === "default"}>
<SelectTrigger className="w-full text-xs h-8">
<SelectValue placeholder="Choose order" />
</SelectTrigger>
<SelectContent>
{SORT_ORDERS.map((order) => (
<SelectItem key={order} value={order} className="text-xs">
{order.charAt(0).toUpperCase() + order.slice(1)}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</PopoverContent>
</Popover>
</div>
{showMap === "1" && <GlobalMap now={nezhaWsData.now} serverList={nezhaWsData?.servers || []} />}
{showServices === "1" && <ServiceTracker serverList={filteredServers} />}
{inline === "1" && (
<section ref={containerRef} className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden mt-6 server-inline-list">
{filteredServers.map((serverInfo) => (
<ServerCardInline now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
))}
</section>
)}
{inline === "0" && (
<section ref={containerRef} className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6 server-card-list">
{filteredServers.map((serverInfo) => (
<ServerCard now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
))}
</section>
)}
</>
)}
{inline === "0" && (
<section ref={containerRef} className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6 server-card-list">
{filteredServers.map((serverInfo) => (
<ServerCard now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
))}
</section>
{/* 只有在 status 为 'all' (即点击总服务器数时) 或者 activeView 为 'domains' 时，才显示域名列表 */}
{(status === 'all' || activeView === 'domains') && (
<div className="mt-6">
<DomainStatus />
</div>
)}
{/* ^^^^^^^^^^^ 这是最终的条件渲染逻辑 ^^^^^^^^^^^ */}
{/* ======================================================= */}
</div>
)
);
}