增加转发分类显示

vite-frontend/src/pages/forward.tsx

@@ -100,6 +100,16 @@ export default function ForwardPage() {
   const [forwards, setForwards] = useState<Forward[]>([]);
   const [tunnels, setTunnels] = useState<Tunnel[]>([]);
   
+  // 显示模式状态 - 从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() {
               <Chip variant="flat" size="sm" className="text-xs">
                 {formatFlow((forward.inFlow || 0) + (forward.outFlow || 0))}
               </Chip>
+              {forward.userName && (
+                <Chip variant="flat" size="sm" className="text-xs">
+                  {forward.userName}
+                </Chip>
+              )}
             </div>
           </div>
           
@@ -816,6 +842,28 @@ export default function ForwardPage() {
         {/* 页面头部 */}
         <div className="flex items-center justify-between mb-6">
           <h1 className="text-2xl font-bold text-foreground">转发管理</h1>
+          <div className="flex items-center gap-3">
+            {/* 显示模式切换按钮 */}
+            <Button
+              size="sm"
+              variant="flat"
+              color="default"
+              onPress={handleViewModeChange}
+              isIconOnly
+              className="text-sm"
+              title={viewMode === 'grouped' ? '切换到直接显示' : '切换到分类显示'}
+            >
+              {viewMode === 'grouped' ? (
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zM3 16a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" clipRule="evenodd" />
+                </svg>
+              ) : (
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
+                </svg>
+              )}
+            </Button>
+            
             <Button 
               color="primary" 
               onPress={handleAdd}
@@ -828,9 +876,12 @@ export default function ForwardPage() {
               新增转发
             </Button>
           </div>
+        </div>
 
-        {/* 按用户和隧道分组的转发列表 */}
+        {/* 根据显示模式渲染不同内容 */}
-        {userGroups.length > 0 ? (
+        {viewMode === 'grouped' ? (
+          /* 按用户和隧道分组的转发列表 */
+          userGroups.length > 0 ? (
             <div className="space-y-6">
               {userGroups.map((userGroup) => (
                 <Card key={userGroup.userId || 'unknown'} className="shadow-sm border border-divider w-full overflow-hidden">
@@ -910,6 +961,31 @@ export default function ForwardPage() {
                 </div>
               </CardBody>
             </Card>
+          )
+        ) : (
+          /* 直接显示模式 */
+          forwards.length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+              {forwards.map((forward) => renderForwardCard(forward))}
+            </div>
+          ) : (
+            /* 空状态 */
+            <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
+              <CardBody className="text-center py-16">
+                <div className="flex flex-col items-center gap-4">
+                  <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
+                    <svg className="w-8 h-8 text-default-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold text-foreground">暂无转发配置</h3>
+                    <p className="text-default-500 text-sm mt-1">还没有创建任何转发配置，点击上方按钮开始创建</p>
+                  </div>
+                </div>
+              </CardBody>
+            </Card>
+          )
         )}
 
         {/* 新增/编辑模态框 */}