tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-10-11 03:36:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: align node and user list view UI

Browse Source
This commit is contained in:
sagitchu
2026-03-20 11:01:37 +08:00
parent 18445ec063
commit 6b1264ae90
3 changed files with 121 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite-frontend/src/pages/node.tsx
+69 -116
View File
@@ -20,7 +20,7 @@ import { CSS } from "@dnd-kit/utilities";
import { SearchBar } from "@/components/search-bar";
import { AnimatedPage } from "@/components/animated-page";
import { LayoutGrid, List, Terminal, ArrowUpCircle, RotateCcw, Edit, Trash2 } from "lucide-react";
import { LayoutGrid, List } from "lucide-react";
import {
Table,
TableHeader,
@@ -1770,140 +1770,99 @@ export default function NodePage() {
<Card>
<Table aria-label="节点列表" className="overflow-x-auto min-w-full">
<TableHeader>
<TableColumn className="w-12 px-4 whitespace-nowrap overflow-hidden">
<Checkbox
isSelected={selectMode && selectedIds.size === displayNodes.length && displayNodes.length > 0}
onValueChange={(checked) => {
if (checked) {
selectAll();
setSelectMode(true);
} else {
deselectAll();
setSelectMode(false);
}
}}
/>
</TableColumn>
<TableColumn>节点名称</TableColumn>
<TableColumn>状态</TableColumn>
<TableColumn>协议/端口</TableColumn>
<TableColumn>系统信息</TableColumn>
<TableColumn>到期时间</TableColumn>
<TableColumn>地址</TableColumn>
<TableColumn>版本</TableColumn>
<TableColumn>操作</TableColumn>
</TableHeader>
<TableBody items={displayNodes}>
{(node) => {
const isRemoteNode = node.isRemote === 1;
const remoteUsage = isRemoteNode
? remoteUsageMap[node.id]
: null;
const expiryMeta = getNodeExpiryMeta(
node.expiryTime,
node.renewalCycle,
);
const connectionStatusMeta = getConnectionStatusMeta(
node.connectionStatus,
);
const hasRemark = Boolean(node.remark?.trim());
return (
<TableRow key={node.id}>
<TableCell>
<div className="flex flex-col">
<div className="flex items-center gap-2">
<span className="font-medium text-foreground text-sm">
{node.name}
</span>
{hasRemark && (
<Chip size="sm" variant="flat" className="h-4 px-1 text-[10px]">
{node.remark}
</Chip>
)}
</div>
<span className="text-xs text-default-500 font-mono mt-0.5">
{isRemoteNode ? new URL(node.remoteUrl || "").hostname : node.serverIp}
</span>
</div>
<TableCell className="px-4">
<Checkbox
isSelected={selectedIds.has(node.id)}
onValueChange={(checked) => {
if (checked) {
setSelectMode(true);
setSelectedIds((prev) => new Set([...prev, node.id]));
} else {
setSelectedIds((prev) => {
const next = new Set(prev);
next.delete(node.id);
if (next.size === 0) setSelectMode(false);
return next;
});
}
}}
/>
</TableCell>
<TableCell>
<Chip
variant="flat"
size="sm"
color={connectionStatusMeta.color}
className="text-xs"
>
<div className="flex items-center gap-1.5">
<div className={`w-1.5 h-1.5 rounded-full ${node.connectionStatus === "online" ? "bg-success" : node.syncError ? "bg-danger" : "bg-default-400"} ${node.systemInfo && node.connectionStatus === "online" ? "animate-pulse" : ""}`} />
<span>{connectionStatusMeta.text}</span>
</div>
</Chip>
</TableCell>
<TableCell>
<div className="flex flex-col gap-0.5">
<span className="text-sm font-medium">
{isRemoteNode ? "Remote" : "Local"}
<div className="flex items-center gap-2">
<div
className={`shrink-0 w-2 h-2 rounded-full ${
node.connectionStatus === "online"
? "bg-success"
: node.syncError
? "bg-danger"
: "bg-default-400"
} ${node.systemInfo && node.connectionStatus === "online" ? "animate-pulse" : ""}`}
/>
<span className="font-medium text-foreground text-sm">
{node.name}
</span>
<span className="text-xs text-default-500 font-mono">
{isRemoteNode
? (remoteUsage ? `${remoteUsage.portRangeStart}-${remoteUsage.portRangeEnd}` : "未知端口")
: node.port}
</span>
</div>
</TableCell>
<TableCell>
<div className="flex flex-col gap-0.5 whitespace-nowrap text-[11px] min-w-[100px]">
{!isRemoteNode && node.systemInfo ? (
<>
<div className="flex items-center justify-between gap-2">
<span className="text-default-500">CPU</span>
<span className={node.systemInfo.cpuUsage > 80 ? "text-danger font-medium" : ""}>
{node.systemInfo.cpuUsage.toFixed(1)}%
</span>
</div>
<div className="flex items-center justify-between gap-2">
<span className="text-default-500">RAM</span>
<span className={node.systemInfo.memoryUsage > 80 ? "text-danger font-medium" : ""}>
{node.systemInfo.memoryUsage.toFixed(1)}%
</span>
</div>
</>
) : (
<span className="text-default-400">-</span>
{hasRemark && (
<Chip size="sm" variant="flat" className="h-4 px-1 text-[10px]">
{node.remark}
</Chip>
)}
</div>
</TableCell>
<TableCell>
<div className="flex flex-col gap-1 items-start whitespace-nowrap min-w-[100px]">
{node.expiryTime ? (
<>
<span className="text-sm">
{new Date(node.expiryTime).toLocaleString()}
</span>
{expiryMeta && expiryMeta.state !== "healthy" && expiryMeta.state !== "permanent" && (
<Chip
color={expiryMeta.tone}
size="sm"
variant="flat"
className="h-5 px-1 text-[10px]"
>
{expiryMeta.label}
</Chip>
)}
</>
) : (
<span className="text-default-400 text-sm">无限期</span>
)}
</div>
<span className="text-sm font-mono text-default-600">
{isRemoteNode ? new URL(node.remoteUrl || "").hostname : node.serverIp}
</span>
</TableCell>
<TableCell>
<div className="flex flex-wrap items-center gap-1.5">
<span className="text-sm text-default-500">
{node.version || "-"}
</span>
</TableCell>
<TableCell>
<div className="flex flex-wrap items-center gap-1.5 min-w-max">
{!isRemoteNode && (
<Button
size="sm"
variant="flat"
color="success"
className="min-w-8 min-h-8 px-1"
title="安装命令"
className="h-6 px-2 min-w-0 text-xs bg-emerald-50 text-emerald-600 hover:bg-emerald-100 dark:bg-emerald-950/30 dark:text-emerald-400"
isLoading={node.copyLoading}
onPress={() => openInstallSelector(node)}
>
<Terminal className="w-4 h-4" />
安装
</Button>
)}
{!isRemoteNode && (
<Button
size="sm"
variant="flat"
color="warning"
className="min-w-8 min-h-8 px-1"
title="升级"
className="h-6 px-2 min-w-0 text-xs bg-amber-50 text-amber-600 hover:bg-amber-100 dark:bg-amber-950/30 dark:text-amber-400"
isDisabled={node.connectionStatus !== "online"}
isLoading={node.upgradeLoading}
onPress={() => {
@@ -1911,44 +1870,38 @@ export default function NodePage() {
openUpgradeModal("single");
}}
>
<ArrowUpCircle className="w-4 h-4" />
升级
</Button>
)}
{!isRemoteNode && (
<Button
size="sm"
variant="flat"
color="secondary"
className="min-w-8 min-h-8 px-1"
title="回退"
className="h-6 px-2 min-w-0 text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 dark:bg-blue-950/30 dark:text-blue-400"
isDisabled={node.connectionStatus !== "online"}
isLoading={node.rollbackLoading}
onPress={() => handleRollbackNode(node)}
>
<RotateCcw className="w-4 h-4" />
回退
</Button>
)}
{!isRemoteNode && (
<Button
size="sm"
variant="flat"
color="primary"
className="min-w-8 min-h-8 px-1"
title="编辑"
className="h-6 px-2 min-w-0 text-xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-950/30 dark:text-indigo-400"
onPress={() => handleEdit(node)}
>
<Edit className="w-4 h-4" />
编辑
</Button>
)}
<Button
size="sm"
variant="flat"
color="danger"
className="min-w-8 min-h-8 px-1"
title="删除"
className="h-6 px-2 min-w-0 text-xs bg-rose-50 text-rose-600 hover:bg-rose-100 dark:bg-rose-950/30 dark:text-rose-400"
onPress={() => handleDelete(node)}
>
<Trash2 className="w-4 h-4" />
删除
</Button>
</div>
</TableCell>