tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-10-13 20:46:38 +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
plans/053-list-view-styling.md
+16
View File
@@ -0,0 +1,16 @@
# 053 List View Styling
## Objective
Update the design of Node and User list table views to match the provided screenshot:
- Use colored dots for status instead of separate "Status" text columns.
- The action buttons should have text labels (e.g. "安装", "编辑") with `variant="flat"` instead of icons.
- Add version column for Node list.
- Remove traffic columns from Node list as requested.
- Adjust User list to match this clean style.
## Tasks
- [x] Update `pages/node.tsx` list view to use the new column layout (Node name with dot, Address, Version, Actions).
- [x] Update action buttons in `pages/node.tsx` list view to use text instead of icons.
- [x] Update `pages/user.tsx` list view to use the status dot pattern.
- [x] Update action buttons in `pages/user.tsx` list view to use text instead of icons.
- [x] Ensure `selectionMode="multiple"` (or similar) is properly reflected.
vite-frontend/src/pages/node.tsx
+61 -108
View File
@@ -20,7 +20,7 @@ import { CSS } from "@dnd-kit/utilities";
import { SearchBar } from "@/components/search-bar"; import { SearchBar } from "@/components/search-bar";
import { AnimatedPage } from "@/components/animated-page"; import { AnimatedPage } from "@/components/animated-page";
import { LayoutGrid, List, Terminal, ArrowUpCircle, RotateCcw, Edit, Trash2 } from "lucide-react"; import { LayoutGrid, List } from "lucide-react";
import { import {
Table, Table,
TableHeader, TableHeader,
@@ -1770,34 +1770,61 @@ export default function NodePage() {
<Card> <Card>
<Table aria-label="节点列表" className="overflow-x-auto min-w-full"> <Table aria-label="节点列表" className="overflow-x-auto min-w-full">
<TableHeader> <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>
<TableColumn>操作</TableColumn> <TableColumn>操作</TableColumn>
</TableHeader> </TableHeader>
<TableBody items={displayNodes}> <TableBody items={displayNodes}>
{(node) => { {(node) => {
const isRemoteNode = node.isRemote === 1; 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()); const hasRemark = Boolean(node.remark?.trim());
return ( return (
<TableRow key={node.id}> <TableRow key={node.id}>
<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> <TableCell>
<div className="flex flex-col">
<div className="flex items-center gap-2"> <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"> <span className="font-medium text-foreground text-sm">
{node.name} {node.name}
</span> </span>
@@ -1807,103 +1834,35 @@ export default function NodePage() {
</Chip> </Chip>
)} )}
</div> </div>
<span className="text-xs text-default-500 font-mono mt-0.5"> </TableCell>
<TableCell>
<span className="text-sm font-mono text-default-600">
{isRemoteNode ? new URL(node.remoteUrl || "").hostname : node.serverIp} {isRemoteNode ? new URL(node.remoteUrl || "").hostname : node.serverIp}
</span> </span>
</div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Chip <span className="text-sm text-default-500">
variant="flat" {node.version || "-"}
size="sm" </span>
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>
<TableCell> <TableCell>
<div className="flex flex-col gap-0.5"> <div className="flex flex-wrap items-center gap-1.5 min-w-max">
<span className="text-sm font-medium">
{isRemoteNode ? "Remote" : "Local"}
</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>
)}
</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>
</TableCell>
<TableCell>
<div className="flex flex-wrap items-center gap-1.5">
{!isRemoteNode && ( {!isRemoteNode && (
<Button <Button
size="sm" size="sm"
variant="flat" variant="flat"
color="success" 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"
className="min-w-8 min-h-8 px-1"
title="安装命令"
isLoading={node.copyLoading} isLoading={node.copyLoading}
onPress={() => openInstallSelector(node)} onPress={() => openInstallSelector(node)}
> >
<Terminal className="w-4 h-4" /> 安装
</Button> </Button>
)} )}
{!isRemoteNode && ( {!isRemoteNode && (
<Button <Button
size="sm" size="sm"
variant="flat" variant="flat"
color="warning" 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"
className="min-w-8 min-h-8 px-1"
title="升级"
isDisabled={node.connectionStatus !== "online"} isDisabled={node.connectionStatus !== "online"}
isLoading={node.upgradeLoading} isLoading={node.upgradeLoading}
onPress={() => { onPress={() => {
@@ -1911,44 +1870,38 @@ export default function NodePage() {
openUpgradeModal("single"); openUpgradeModal("single");
}} }}
> >
<ArrowUpCircle className="w-4 h-4" /> 升级
</Button> </Button>
)} )}
{!isRemoteNode && ( {!isRemoteNode && (
<Button <Button
size="sm" size="sm"
variant="flat" variant="flat"
color="secondary" 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"
className="min-w-8 min-h-8 px-1"
title="回退"
isDisabled={node.connectionStatus !== "online"} isDisabled={node.connectionStatus !== "online"}
isLoading={node.rollbackLoading} isLoading={node.rollbackLoading}
onPress={() => handleRollbackNode(node)} onPress={() => handleRollbackNode(node)}
> >
<RotateCcw className="w-4 h-4" /> 回退
</Button> </Button>
)} )}
{!isRemoteNode && ( {!isRemoteNode && (
<Button <Button
size="sm" size="sm"
variant="flat" variant="flat"
color="primary" 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"
className="min-w-8 min-h-8 px-1"
title="编辑"
onPress={() => handleEdit(node)} onPress={() => handleEdit(node)}
> >
<Edit className="w-4 h-4" /> 编辑
</Button> </Button>
)} )}
<Button <Button
size="sm" size="sm"
variant="flat" variant="flat"
color="danger" 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"
className="min-w-8 min-h-8 px-1"
title="删除"
onPress={() => handleDelete(node)} onPress={() => handleDelete(node)}
> >
<Trash2 className="w-4 h-4" /> 删除
</Button> </Button>
</div> </div>
</TableCell> </TableCell>
vite-frontend/src/pages/user.tsx
+28 -53
View File
@@ -1083,7 +1083,6 @@ export default function UserPage() {
<Table aria-label="用户列表" className="overflow-x-auto min-w-full"> <Table aria-label="用户列表" className="overflow-x-auto min-w-full">
<TableHeader> <TableHeader>
<TableColumn>用户名</TableColumn> <TableColumn>用户名</TableColumn>
<TableColumn>状态</TableColumn>
<TableColumn>流量统计</TableColumn> <TableColumn>流量统计</TableColumn>
<TableColumn>配额限制</TableColumn> <TableColumn>配额限制</TableColumn>
<TableColumn>规则数量</TableColumn> <TableColumn>规则数量</TableColumn>
@@ -1101,6 +1100,14 @@ export default function UserPage() {
return ( return (
<TableRow key={user.id}> <TableRow key={user.id}>
<TableCell> <TableCell>
<div className="flex items-center gap-2">
<div
className={`shrink-0 w-2 h-2 rounded-full ${
userStatus.color === "success"
? "bg-success"
: "bg-danger"
}`}
/>
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-medium text-foreground text-sm"> <span className="font-medium text-foreground text-sm">
{user.name || user.user} {user.name || user.user}
@@ -1109,27 +1116,11 @@ export default function UserPage() {
@{user.user} @{user.user}
</span> </span>
</div> </div>
</TableCell> {user.disabledByQuota && (
<TableCell> <Chip className="text-[10px] h-4 px-1 ml-1" color="danger" size="sm" variant="flat">
<div className="flex flex-col gap-1 items-start"> 超额
<Chip
className="text-xs"
color={userStatus.color}
size="sm"
variant="flat"
>
{userStatus.text}
</Chip> </Chip>
{user.disabledByQuota ? ( )}
<Chip
className="text-[10px] h-5 px-1"
color="danger"
size="sm"
variant="flat"
>
配额超额
</Chip>
) : null}
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
@@ -1193,55 +1184,39 @@ export default function UserPage() {
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-1.5 min-w-max">
<Button <Button
size="sm" size="sm"
variant="flat" variant="flat"
color="success" 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"
className="min-h-8 min-w-[50px] px-2"
startContent={<SettingsIcon className="w-3 h-3" />}
onPress={() => handleManageTunnels(user)} onPress={() => handleManageTunnels(user)}
> >
权限 权限
</Button> </Button>
<Button <Button
isIconOnly
size="sm" size="sm"
variant="light" variant="flat"
className="text-default-600 hover:text-primary min-h-8 min-w-8" 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"
onPress={() => handleEdit(user)}
>
<EditIcon className="w-4 h-4" />
</Button>
<Button
isIconOnly
size="sm"
variant="light"
className="text-default-600 hover:text-warning min-h-8 min-w-8"
title="重置流量" title="重置流量"
onPress={() => handleResetFlow(user)} onPress={() => handleResetFlow(user)}
> >
<svg 重置
aria-hidden="true"
className="w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
clipRule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
fillRule="evenodd"
/>
</svg>
</Button> </Button>
<Button <Button
isIconOnly
size="sm" size="sm"
variant="light" variant="flat"
className="text-default-600 hover:text-danger min-h-8 min-w-8" 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(user)}
>
编辑
</Button>
<Button
size="sm"
variant="flat"
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(user)} onPress={() => handleDelete(user)}
> >
<DeleteIcon className="w-4 h-4" /> 删除
</Button> </Button>
</div> </div>
</TableCell> </TableCell>