From 9fab17a732c1a106f48206b8ed535a496ca7a11c Mon Sep 17 00:00:00 2001 From: qaq <1937228092@qq.com> Date: Fri, 25 Jul 2025 13:05:29 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=BD=AC=E5=8F=91=E5=88=86?= =?UTF-8?q?=E7=B1=BB=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-frontend/src/pages/forward.tsx | 254 ++++++++++++++++++---------- 1 file changed, 165 insertions(+), 89 deletions(-) diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx index 4162cdf..6cd953e 100644 --- a/vite-frontend/src/pages/forward.tsx +++ b/vite-frontend/src/pages/forward.tsx @@ -100,6 +100,16 @@ export default function ForwardPage() { const [forwards, setForwards] = useState([]); const [tunnels, setTunnels] = useState([]); + // 显示模式状态 - 从localStorage读取，默认为分类显示 + const [viewMode, setViewMode] = useState<'grouped' | 'direct'>(() => { + try { + const savedMode = localStorage.getItem('forward-view-mode'); + return (savedMode as 'grouped' | 'direct') || 'grouped'; + } catch { + return 'grouped'; + } + }); + // 模态框状态 const [modalOpen, setModalOpen] = useState(false); const [deleteModalOpen, setDeleteModalOpen] = useState(false); @@ -132,6 +142,17 @@ export default function ForwardPage() { loadData(); }, []); + // 切换显示模式并保存到localStorage + const handleViewModeChange = () => { + const newMode = viewMode === 'grouped' ? 'direct' : 'grouped'; + setViewMode(newMode); + try { + localStorage.setItem('forward-view-mode', newMode); + } catch (error) { + console.warn('无法保存显示模式到localStorage:', error); + } + }; + // 加载所有数据 const loadData = async () => { setLoading(true); @@ -742,6 +763,11 @@ export default function ForwardPage() { {formatFlow((forward.inFlow || 0) + (forward.outFlow || 0))} + {forward.userName && ( + + {forward.userName} + + )} @@ -816,100 +842,150 @@ export default function ForwardPage() { {/* 页面头部 */}

转发管理

- +
+ {/* 显示模式切换按钮 */} + + + +
- {/* 按用户和隧道分组的转发列表 */} - {userGroups.length > 0 ? ( -
- {userGroups.map((userGroup) => ( - - -
-
-
- - - -
-
-

{userGroup.userName}

-

- {userGroup.tunnelGroups.length} 个隧道， - {userGroup.tunnelGroups.reduce((total, tg) => total + tg.forwards.length, 0)} 个转发 -

-
-
- - 用户 - -
- - - - - {userGroup.tunnelGroups.map((tunnelGroup) => ( - -
-
- - - -
-
-

{tunnelGroup.tunnelName}

-
-
-
- - {tunnelGroup.forwards.filter(f => f.serviceRunning).length}/{tunnelGroup.forwards.length} - -
-
- } - className="shadow-none border border-divider" - > -
- {tunnelGroup.forwards.map((forward) => renderForwardCard(forward))} + {/* 根据显示模式渲染不同内容 */} + {viewMode === 'grouped' ? ( + /* 按用户和隧道分组的转发列表 */ + userGroups.length > 0 ? ( +
+ {userGroups.map((userGroup) => ( + + +
+
+
+ + +
- - ))} - - - - ))} -
+
+

{userGroup.userName}

+

+ {userGroup.tunnelGroups.length} 个隧道， + {userGroup.tunnelGroups.reduce((total, tg) => total + tg.forwards.length, 0)} 个转发 +

+
+
+ + 用户 + +
+ + + + + {userGroup.tunnelGroups.map((tunnelGroup) => ( + +
+
+ + + +
+
+

{tunnelGroup.tunnelName}

+
+
+
+ + {tunnelGroup.forwards.filter(f => f.serviceRunning).length}/{tunnelGroup.forwards.length} + +
+
+ } + className="shadow-none border border-divider" + > +
+ {tunnelGroup.forwards.map((forward) => renderForwardCard(forward))} +
+ + ))} + + + + ))} + + ) : ( + /* 空状态 */ + + +
+
+ + + +
+
+

暂无转发配置

+

还没有创建任何转发配置，点击上方按钮开始创建

+
+
+ + + ) ) : ( - /* 空状态 */ - - -
-
- - - + /* 直接显示模式 */ + forwards.length > 0 ? ( +
+ {forwards.map((forward) => renderForwardCard(forward))} +
+ ) : ( + /* 空状态 */ + + +
+
+ + + +
+
+

暂无转发配置

+

还没有创建任何转发配置，点击上方按钮开始创建

+
-
-

暂无转发配置

-

还没有创建任何转发配置，点击上方按钮开始创建

-
-
- - + + + ) )} {/* 新增/编辑模态框 */}