diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx index 07dc3c1..3032f9f 100644 --- a/vite-frontend/src/pages/forward.tsx +++ b/vite-frontend/src/pages/forward.tsx @@ -119,18 +119,7 @@ interface ForwardForm { strategy: string; } -// 添加分组接口 -interface UserGroup { - userId: number | null; - userName: string; - tunnelGroups: TunnelGroup[]; -} -interface TunnelGroup { - tunnelId: number; - tunnelName: string; - forwards: Forward[]; -} export default function ForwardPage() { const [loading, setLoading] = useState(true); @@ -233,21 +222,6 @@ export default function ForwardPage() { setViewMode(newMode); try { localStorage.setItem("forward-view-mode", newMode); - - // 切换到直接显示模式时,初始化拖拽排序顺序 - if (newMode === "direct") { - const currentUserId = JwtUtil.getUserIdFromToken(); - const { order, fromDatabase } = buildForwardOrder( - forwards, - currentUserId, - ); - - setForwardOrder(order); - - if (fromDatabase) { - saveOrder(FORWARD_ORDER_KEY, order); - } - } } catch { } }; @@ -270,18 +244,16 @@ export default function ForwardPage() { setForwards(forwardsData); // 初始化拖拽排序顺序 - if (viewMode === "direct") { - const currentUserId = JwtUtil.getUserIdFromToken(); - const { order, fromDatabase } = buildForwardOrder( - forwardsData, - currentUserId, - ); + const currentUserId = JwtUtil.getUserIdFromToken(); + const { order, fromDatabase } = buildForwardOrder( + forwardsData, + currentUserId, + ); - setForwardOrder(order); + setForwardOrder(order); - if (fromDatabase) { - saveOrder(FORWARD_ORDER_KEY, order); - } + if (fromDatabase) { + saveOrder(FORWARD_ORDER_KEY, order); } } else { toast.error(forwardsRes.msg || "获取转发列表失败"); @@ -298,52 +270,7 @@ export default function ForwardPage() { } }; - // 按用户和隧道分组转发数据 - const groupForwardsByUserAndTunnel = (): UserGroup[] => { - const userMap = new Map(); - // 获取排序后的转发列表 - sortedForwards.forEach((forward) => { - const userKey = forward.userId ? forward.userId.toString() : "unknown"; - const userName = forward.userName || "未知用户"; - - if (!userMap.has(userKey)) { - userMap.set(userKey, { - userId: forward.userId || null, - userName, - tunnelGroups: [], - }); - } - - const userGroup = userMap.get(userKey)!; - let tunnelGroup = userGroup.tunnelGroups.find( - (tg) => tg.tunnelId === forward.tunnelId, - ); - - if (!tunnelGroup) { - tunnelGroup = { - tunnelId: forward.tunnelId, - tunnelName: forward.tunnelName, - forwards: [], - }; - userGroup.tunnelGroups.push(tunnelGroup); - } - - tunnelGroup.forwards.push(forward); - }); - - // 排序:先按用户名,再按隧道名 - const result = Array.from(userMap.values()); - - result.sort((a, b) => a.userName.localeCompare(b.userName)); - result.forEach((userGroup) => { - userGroup.tunnelGroups.sort((a, b) => - a.tunnelName.localeCompare(b.tunnelName), - ); - }); - - return result; - }; // 表单验证 const validateForm = (): boolean => { @@ -720,26 +647,10 @@ export default function ForwardPage() { setExportLoading(true); try { - // 根据当前显示模式获取要导出的转发列表 - let forwardsToExport: Forward[] = []; - - if (viewMode === "grouped") { - // 分组模式下,获取指定隧道的转发 - const userGroups = groupForwardsByUserAndTunnel(); - - forwardsToExport = userGroups.flatMap((userGroup) => - userGroup.tunnelGroups - .filter( - (tunnelGroup) => tunnelGroup.tunnelId === selectedTunnelForExport, - ) - .flatMap((tunnelGroup) => tunnelGroup.forwards), - ); - } else { - // 直接显示模式下,过滤指定隧道的转发 - forwardsToExport = sortedForwards.filter( - (forward) => forward.tunnelId === selectedTunnelForExport, - ); - } + // 获取要导出的转发列表 + const forwardsToExport = sortedForwards.filter( + (forward) => forward.tunnelId === selectedTunnelForExport, + ); if (forwardsToExport.length === 0) { toast.error("所选隧道没有转发数据"); @@ -1181,24 +1092,15 @@ export default function ForwardPage() { return []; } - // 在平铺模式下,只显示当前用户的转发 let filteredForwards = forwards; - if (viewMode === "direct") { - if (tokenUserId !== null) { - filteredForwards = forwards.filter( - (forward) => forward.userId === tokenUserId, - ); - } - } else if (viewMode === "grouped") { - if (filterUserId !== "all") { - const targetUserId = parseInt(filterUserId); - filteredForwards = filteredForwards.filter(f => f.userId === targetUserId || (targetUserId === 0 && !f.userId)); - } - if (filterTunnelId !== "all") { - const targetTunnelId = parseInt(filterTunnelId); - filteredForwards = filteredForwards.filter(f => f.tunnelId === targetTunnelId); - } + if (filterUserId !== "all") { + const targetUserId = parseInt(filterUserId); + filteredForwards = filteredForwards.filter(f => f.userId === targetUserId || (targetUserId === 0 && !f.userId)); + } + if (filterTunnelId !== "all") { + const targetTunnelId = parseInt(filterTunnelId); + filteredForwards = filteredForwards.filter(f => f.tunnelId === targetTunnelId); } // 确保过滤后的转发列表有效 @@ -1288,7 +1190,7 @@ export default function ForwardPage() { }, [forwards]); // 可拖拽的表格行组件 - const SortableTableRow = ({ forward, selectMode, selectedIds, toggleSelect, getStrategyDisplay, formatInAddress, formatRemoteAddress, handleServiceToggle, handleEdit, handleDelete, handleDiagnose, showAddressModal, hasMultipleAddresses }: any) => { + const SortableTableRow = ({ forward, selectMode, selectedIds, toggleSelect, getStrategyDisplay, formatInAddress, formatRemoteAddress, handleServiceToggle, handleEdit, handleDelete, handleDiagnose, showAddressModal, hasMultipleAddresses, formatFlow }: any) => { const { attributes, listeners, @@ -1386,6 +1288,11 @@ export default function ForwardPage() { {strategyDisplay.text} + + + {formatFlow((forward.inFlow || 0) + (forward.outFlow || 0))} + +
- {/* 筛选按钮 (仅在分组视图显示) */} - {viewMode === "grouped" && ( - - )} + + + {(filterUserId !== "all" || filterTunnelId !== "all") && ( + + )} + {/* 显示模式切换按钮 */}