tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-09-29 07:56:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(node): render remote usage details on remote node cards

Browse Source 
(cherry picked from commit 67294fa76422f994de8d95ec88f8f03e02ea6b9f)
This commit is contained in:
Su-cyber-art
2026-03-08 12:19:16 +08:00
parent 0ad4904e20
commit 4c69ff491d
1 changed files with 190 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite-frontend/src/pages/node.tsx
+190 -1
View File
@@ -52,6 +52,7 @@ import {
batchUpgradeNodes,
getNodeReleases,
rollbackNode,
getPeerRemoteUsageList,
type ReleaseChannel,
} from "@/api";
import { PageEmptyState, PageLoadingState } from "@/components/page-state";
@@ -120,6 +121,33 @@ interface NodeForm {
type NodeTab = "local" | "remote";
interface RemoteUsageBinding {
bindingId: number;
tunnelId: number;
tunnelName: string;
chainType: number;
hopInx: number;
allocatedPort: number;
resourceKey: string;
remoteBindingId: string;
updatedTime: number;
}
interface RemoteUsageNode {
nodeId: number;
nodeName: string;
remoteUrl: string;
shareId: number;
portRangeStart: number;
portRangeEnd: number;
maxBandwidth: number;
currentFlow: number;
usedPorts: number[];
bindings: RemoteUsageBinding[];
activeBindingNum: number;
syncError?: string;
}
const SortableItem = ({
id,
children,
@@ -174,6 +202,9 @@ export default function NodePage() {
"node-active-tab",
"local",
);
const [remoteUsageMap, setRemoteUsageMap] = useState<
Record<number, RemoteUsageNode>
>({});
const [isSearchVisible, setIsSearchVisible] = useState(false);
const [dialogVisible, setDialogVisible] = useState(false);
const [dialogTitle, setDialogTitle] = useState("");
@@ -259,6 +290,25 @@ export default function NodePage() {
onNodeOffline: handleNodeOffline,
});
const loadRemoteUsage = useCallback(async () => {
try {
const res = await getPeerRemoteUsageList();
if (res.code === 0 && Array.isArray(res.data)) {
const nextMap: Record<number, RemoteUsageNode> = {};
(res.data as unknown as RemoteUsageNode[]).forEach((item) => {
if (!item || typeof item.nodeId !== "number") return;
nextMap[item.nodeId] = item;
});
setRemoteUsageMap(nextMap);
}
} catch {
// ignore remote usage errors in node page
}
}, []);
// 加载节点列表
const loadNodes = useCallback(async () => {
setLoading(true);
@@ -385,7 +435,8 @@ export default function NodePage() {
useEffect(() => {
loadNodes();
}, [loadNodes]);
loadRemoteUsage();
}, [loadNodes, loadRemoteUsage]);
// 格式化速度
const formatSpeed = (bytesPerSecond: number): string => {
@@ -428,6 +479,32 @@ export default function NodePage() {
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};
const formatFlow = (bytes: number): string => {
if (!Number.isFinite(bytes) || bytes <= 0) {
return "0 B";
}
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
if (bytes < 1024 * 1024 * 1024)
return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
};
const formatChainType = (chainType: number, hopInx: number) => {
if (chainType === 1) {
return "入口节点";
}
if (chainType === 2) {
return `中继跳点 #${hopInx}`;
}
if (chainType === 3) {
return "出口节点";
}
return "未知链路";
};
// 获取进度条颜色
const getProgressColor = (
value: number,
@@ -1278,6 +1355,7 @@ export default function NodePage() {
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
{displayNodes.map((node) => {
const isRemoteNode = node.isRemote === 1;
const remoteUsage = isRemoteNode ? remoteUsageMap[node.id] : null;
return (
<SortableItem key={node.id} id={node.id}>
@@ -1427,6 +1505,117 @@ export default function NodePage() {
)}
</div>
{isRemoteNode && (
<div className="space-y-3 mb-4">
{remoteUsage ? (
<>
<div className="text-xs rounded-md border border-default-200 dark:border-default-100/30 bg-default-50 dark:bg-default-100/20 p-2.5 space-y-2">
<div className="flex justify-between gap-2">
<span className="text-default-500">远程地址</span>
<span
className="font-mono text-right truncate"
title={remoteUsage.remoteUrl || node.remoteUrl || "-"}
>
{remoteUsage.remoteUrl || node.remoteUrl || "-"}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-default-500">共享ID</span>
<span className="font-mono">#{remoteUsage.shareId}</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-default-500">流量</span>
<span className="font-mono">
{formatFlow(remoteUsage.currentFlow)}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-default-500">带宽上限</span>
<span className="font-mono">
{remoteUsage.maxBandwidth > 0
? formatSpeed(remoteUsage.maxBandwidth)
: "不限"}
</span>
</div>
</div>
<div className="text-xs rounded-md border border-default-200 dark:border-default-100/30 bg-default-50 dark:bg-default-100/20 p-2.5">
<div className="flex items-center justify-between mb-2">
<span className="text-default-500">占用端口</span>
<span className="font-mono text-default-700 dark:text-default-300">
{remoteUsage.usedPorts.length}/{Math.max(
remoteUsage.portRangeEnd -
remoteUsage.portRangeStart +
1,
0,
)}
</span>
</div>
<div className="max-h-20 overflow-y-auto rounded bg-white/70 dark:bg-black/20 p-1.5 [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1">
{remoteUsage.usedPorts.length > 0 ? (
<div className="flex flex-wrap gap-1">
{remoteUsage.usedPorts.map((port) => (
<Chip
key={`${node.id}-port-${port}`}
className="font-mono"
size="sm"
variant="flat"
>
{port}
</Chip>
))}
</div>
) : (
<div className="text-default-400">暂无占用端口</div>
)}
</div>
</div>
<div className="text-xs rounded-md border border-default-200 dark:border-default-100/30 bg-default-50 dark:bg-default-100/20 p-2.5">
<div className="flex items-center justify-between mb-2">
<span className="text-default-500">绑定明细</span>
<span className="font-mono text-default-700 dark:text-default-300">
{remoteUsage.activeBindingNum}
</span>
</div>
<div className="max-h-32 overflow-y-auto space-y-1.5 pr-1 [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1">
{remoteUsage.bindings.length > 0 ? (
remoteUsage.bindings.map((binding) => (
<div
key={binding.bindingId}
className="rounded border border-default-200 dark:border-default-100/30 bg-white/70 dark:bg-black/20 p-2"
>
<div className="flex items-center justify-between gap-2">
<span
className="font-medium truncate"
title={binding.tunnelName}
>
{binding.tunnelName}
</span>
<span className="font-mono text-[11px]">
#{binding.tunnelId}
</span>
</div>
<div className="mt-1 text-[11px] text-default-500 flex items-center justify-between gap-2">
<span>{formatChainType(binding.chainType, binding.hopInx)}</span>
<span className="font-mono">端口 {binding.allocatedPort}</span>
</div>
</div>
))
) : (
<div className="text-default-400">暂无绑定明细</div>
)}
</div>
</div>
</>
) : (
<div className="text-xs rounded-md border border-default-200 dark:border-default-100/30 bg-default-50 dark:bg-default-100/20 p-2.5 text-default-500">
暂未获取到远程占用数据
</div>
)}
</div>
)}
{!isRemoteNode && (
<>
{/* 系统监控 */}