style: 美化用户隧道权限分配表单UI并统一代码格式

- 使用HeroUI Checkbox组件替换原生checkbox

- 重构隧道列表为card-based tile风格

- 添加选中/未选中/已分配状态视觉区分

- 应用eslint --fix代码格式统一

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

vite-frontend/src/layouts/admin.tsx

@@ -1,15 +1,27 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 import { Button } from "@heroui/button";
-import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from "@heroui/dropdown";
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@heroui/modal";
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@heroui/dropdown";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  useDisclosure,
+} from "@heroui/modal";
 import { Input } from "@heroui/input";
-import { toast } from 'react-hot-toast';
+import { toast } from "react-hot-toast";
 
-import { Logo } from '@/components/icons';
-import { updatePassword } from '@/api';
-import { safeLogout } from '@/utils/logout';
-import { siteConfig } from '@/config/site';
+import { Logo } from "@/components/icons";
+import { updatePassword } from "@/api";
+import { safeLogout } from "@/utils/logout";
+import { siteConfig } from "@/config/site";
 
 interface MenuItem {
   path: string;
@@ -36,86 +48,106 @@ export default function AdminLayout({
 
   const [isMobile, setIsMobile] = useState(false);
   const [mobileMenuVisible, setMobileMenuVisible] = useState(false);
-  const [username, setUsername] = useState('');
+  const [username, setUsername] = useState("");
   const [isAdmin, setIsAdmin] = useState(false);
   const [passwordLoading, setPasswordLoading] = useState(false);
   const [passwordForm, setPasswordForm] = useState<PasswordForm>({
-    newUsername: '',
-    currentPassword: '',
-    newPassword: '',
-    confirmPassword: ''
+    newUsername: "",
+    currentPassword: "",
+    newPassword: "",
+    confirmPassword: "",
   });
 
   // 菜单项配置
   const menuItems: MenuItem[] = [
     {
-      path: '/dashboard',
-      label: '仪表板',
+      path: "/dashboard",
+      label: "仪表板",
       icon: (
         <svg className="w-5 h-5" 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>
-      )
+      ),
     },
     {
-      path: '/forward',
-      label: '转发管理',
+      path: "/forward",
+      label: "转发管理",
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-          <path fillRule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clipRule="evenodd" />
-        </svg>
-      )
-    },
-    {
-      path: '/tunnel',
-      label: '隧道管理',
-      icon: (
-        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-          <path fillRule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clipRule="evenodd" />
+          <path
+            clipRule="evenodd"
+            d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+            fillRule="evenodd"
+          />
         </svg>
       ),
-      adminOnly: true
     },
     {
-      path: '/node',
-      label: '节点监控',
+      path: "/tunnel",
+      label: "隧道管理",
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-          <path fillRule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+          <path
+            clipRule="evenodd"
+            d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
+            fillRule="evenodd"
+          />
         </svg>
       ),
-      adminOnly: true
+      adminOnly: true,
     },
     {
-      path: '/limit',
-      label: '限速管理',
+      path: "/node",
+      label: "节点监控",
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
+          <path
+            clipRule="evenodd"
+            d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z"
+            fillRule="evenodd"
+          />
         </svg>
       ),
-      adminOnly: true
+      adminOnly: true,
     },
     {
-      path: '/user',
-      label: '用户管理',
+      path: "/limit",
+      label: "限速管理",
+      icon: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            clipRule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
+            fillRule="evenodd"
+          />
+        </svg>
+      ),
+      adminOnly: true,
+    },
+    {
+      path: "/user",
+      label: "用户管理",
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
           <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
         </svg>
       ),
-      adminOnly: true
+      adminOnly: true,
     },
     {
-      path: '/config',
-      label: '网站配置',
+      path: "/config",
+      label: "网站配置",
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-          <path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
+          <path
+            clipRule="evenodd"
+            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+            fillRule="evenodd"
+          />
         </svg>
       ),
-      adminOnly: true
-    }
+      adminOnly: true,
+    },
   ];
 
   // 检查移动端
@@ -128,33 +160,35 @@ export default function AdminLayout({
 
   useEffect(() => {
     // 获取用户信息
-    const name = localStorage.getItem('name') || 'Admin';
-    
+    const name = localStorage.getItem("name") || "Admin";
+
     // 兼容处理：如果没有admin字段，根据role_id判断（0为管理员）
-    let adminFlag = localStorage.getItem('admin') === 'true';
-    if (localStorage.getItem('admin') === null) {
-      const roleId = parseInt(localStorage.getItem('role_id') || '1', 10);
+    let adminFlag = localStorage.getItem("admin") === "true";
+
+    if (localStorage.getItem("admin") === null) {
+      const roleId = parseInt(localStorage.getItem("role_id") || "1", 10);
+
       adminFlag = roleId === 0;
       // 补充设置admin字段，避免下次再次判断
-      localStorage.setItem('admin', adminFlag.toString());
+      localStorage.setItem("admin", adminFlag.toString());
     }
-    
+
     setUsername(name);
     setIsAdmin(adminFlag);
 
     // 响应式检查
     checkMobile();
-    window.addEventListener('resize', checkMobile);
+    window.addEventListener("resize", checkMobile);
 
     return () => {
-      window.removeEventListener('resize', checkMobile);
+      window.removeEventListener("resize", checkMobile);
     };
   }, []);
 
   // 退出登录
   const handleLogout = () => {
     safeLogout();
-    navigate('/');
+    navigate("/");
   };
 
   // 切换移动端菜单
@@ -178,29 +212,36 @@ export default function AdminLayout({
   // 密码表单验证
   const validatePasswordForm = (): boolean => {
     if (!passwordForm.newUsername.trim()) {
-      toast.error('请输入新用户名');
+      toast.error("请输入新用户名");
+
       return false;
     }
     if (passwordForm.newUsername.length < 3) {
-      toast.error('用户名长度至少3位');
+      toast.error("用户名长度至少3位");
+
       return false;
     }
     if (!passwordForm.currentPassword) {
-      toast.error('请输入当前密码');
+      toast.error("请输入当前密码");
+
       return false;
     }
     if (!passwordForm.newPassword) {
-      toast.error('请输入新密码');
+      toast.error("请输入新密码");
+
       return false;
     }
     if (passwordForm.newPassword.length < 6) {
-      toast.error('新密码长度不能少于6位');
+      toast.error("新密码长度不能少于6位");
+
       return false;
     }
     if (passwordForm.newPassword !== passwordForm.confirmPassword) {
-      toast.error('两次输入密码不一致');
+      toast.error("两次输入密码不一致");
+
       return false;
     }
+
     return true;
   };
 
@@ -211,16 +252,17 @@ export default function AdminLayout({
     setPasswordLoading(true);
     try {
       const response = await updatePassword(passwordForm);
+
       if (response.code === 0) {
-        toast.success('密码修改成功，请重新登录');
+        toast.success("密码修改成功，请重新登录");
         onOpenChange();
         handleLogout();
       } else {
-        toast.error(response.msg || '密码修改失败');
+        toast.error(response.msg || "密码修改失败");
       }
     } catch (error) {
-      toast.error('修改密码时发生错误');
-      console.error('修改密码错误:', error);
+      toast.error("修改密码时发生错误");
+      console.error("修改密码错误:", error);
     } finally {
       setPasswordLoading(false);
     }
@@ -229,92 +271,98 @@ export default function AdminLayout({
   // 重置密码表单
   const resetPasswordForm = () => {
     setPasswordForm({
-      newUsername: '',
-      currentPassword: '',
-      newPassword: '',
-      confirmPassword: ''
+      newUsername: "",
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
     });
   };
 
   // 过滤菜单项（根据权限）
-  const filteredMenuItems = menuItems.filter(item => 
-    !item.adminOnly || isAdmin
+  const filteredMenuItems = menuItems.filter(
+    (item) => !item.adminOnly || isAdmin,
   );
 
   return (
-          <div className={`flex ${isMobile ? 'min-h-screen' : 'h-screen'} bg-gray-100 dark:bg-black`}>
+    <div
+      className={`flex ${isMobile ? "min-h-screen" : "h-screen"} bg-gray-100 dark:bg-black`}
+    >
       {/* 移动端遮罩层 */}
       {isMobile && mobileMenuVisible && (
-        <div 
+        <div
           className="fixed inset-0 backdrop-blur-sm bg-white/50 dark:bg-black/30 z-40"
           onClick={hideMobileMenu}
         />
       )}
 
       {/* 左侧菜单栏 */}
-      <aside className={`
-        ${isMobile ? 'fixed' : 'relative'} 
-        ${isMobile && !mobileMenuVisible ? '-translate-x-full' : 'translate-x-0'}
-        ${isMobile ? 'w-64' : 'w-72'} 
+      <aside
+        className={`
+        ${isMobile ? "fixed" : "relative"} 
+        ${isMobile && !mobileMenuVisible ? "-translate-x-full" : "translate-x-0"}
+        ${isMobile ? "w-64" : "w-72"} 
         bg-white dark:bg-black 
         shadow-lg 
         border-r border-gray-200 dark:border-gray-600
         z-50 
         transition-transform duration-300 ease-in-out
         flex flex-col
-        ${isMobile ? 'h-screen' : 'h-full'}
-        ${isMobile ? 'top-0 left-0' : ''}
-      `}>
-                 {/* Logo 区域 */}
-         <div className="px-3 py-3 h-14 flex items-center">
-           <div className="flex items-center gap-2 w-full">
-             <Logo size={24} />
-             <div className="flex-1 min-w-0">
-               <h1 className="text-sm font-bold text-foreground overflow-hidden whitespace-nowrap">{siteConfig.name}</h1>
-               <p className="text-xs text-default-500">v{siteConfig.version}</p>
-             </div>
-           </div>
-         </div>
+        ${isMobile ? "h-screen" : "h-full"}
+        ${isMobile ? "top-0 left-0" : ""}
+      `}
+      >
+        {/* Logo 区域 */}
+        <div className="px-3 py-3 h-14 flex items-center">
+          <div className="flex items-center gap-2 w-full">
+            <Logo size={24} />
+            <div className="flex-1 min-w-0">
+              <h1 className="text-sm font-bold text-foreground overflow-hidden whitespace-nowrap">
+                {siteConfig.name}
+              </h1>
+              <p className="text-xs text-default-500">v{siteConfig.version}</p>
+            </div>
+          </div>
+        </div>
 
-                 {/* 菜单导航 */}
-         <nav className="flex-1 px-4 py-6 overflow-y-auto">
-           <ul className="space-y-1">
+        {/* 菜单导航 */}
+        <nav className="flex-1 px-4 py-6 overflow-y-auto">
+          <ul className="space-y-1">
             {filteredMenuItems.map((item) => {
               const isActive = location.pathname === item.path;
+
               return (
                 <li key={item.path}>
-                                     <button
-                     onClick={() => handleMenuClick(item.path)}
-                     className={`
+                  <button
+                    className={`
                        w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left
                        transition-colors duration-200 min-h-[44px]
-                       ${isActive 
-                         ? 'bg-primary-100 dark:bg-primary-600/20 text-primary-600 dark:text-primary-300' 
-                         : 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-900'
+                       ${
+                         isActive
+                           ? "bg-primary-100 dark:bg-primary-600/20 text-primary-600 dark:text-primary-300"
+                           : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-900"
                        }
                      `}
-                   >
-                     <div className="flex-shrink-0">
-                       {item.icon}
-                     </div>
-                     <span className="font-medium text-sm">{item.label}</span>
-                   </button>
+                    onClick={() => handleMenuClick(item.path)}
+                  >
+                    <div className="flex-shrink-0">{item.icon}</div>
+                    <span className="font-medium text-sm">{item.label}</span>
+                  </button>
                 </li>
               );
             })}
           </ul>
         </nav>
 
-                {/* 底部版权信息 */}
+        {/* 底部版权信息 */}
         <div className="px-4 py-2 pb-4 mt-auto flex-shrink-0">
           <div className="text-center">
             <p className="text-xs text-gray-400 dark:text-gray-500">
-              Powered by{' '}
-              <a 
-                href={siteConfig.github_repo}
-                target="_blank" 
-                rel="noopener noreferrer"
+              Powered by{" "}
+              <a
                 className="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                href={siteConfig.github_repo}
+                rel="noopener noreferrer"
+                target="_blank"
               >
                 flux-panel
               </a>
@@ -324,20 +372,32 @@ export default function AdminLayout({
       </aside>
 
       {/* 主内容区域 */}
-      <div className={`flex flex-col flex-1 ${isMobile ? 'min-h-0' : 'h-full overflow-hidden'}`}>
-                 {/* 顶部导航栏 */}
-         <header className="bg-white dark:bg-black shadow-md border-b border-gray-200 dark:border-gray-600 h-14 flex items-center justify-between px-4 lg:px-6 relative z-10">
+      <div
+        className={`flex flex-col flex-1 ${isMobile ? "min-h-0" : "h-full overflow-hidden"}`}
+      >
+        {/* 顶部导航栏 */}
+        <header className="bg-white dark:bg-black shadow-md border-b border-gray-200 dark:border-gray-600 h-14 flex items-center justify-between px-4 lg:px-6 relative z-10">
           <div className="flex items-center gap-4">
             {/* 移动端菜单按钮 */}
             {isMobile && (
               <Button
                 isIconOnly
+                className="lg:hidden"
                 variant="light"
                 onPress={toggleMobileMenu}
-                className="lg:hidden"
               >
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                <svg
+                  className="w-6 h-6"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M4 6h16M4 12h16M4 18h16"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                  />
                 </svg>
               </Button>
             )}
@@ -345,21 +405,40 @@ export default function AdminLayout({
 
           <div className="flex items-center gap-3">
             {/* 用户菜单 */}
-             <Dropdown placement="bottom-end">
-               <DropdownTrigger>
-                 <Button variant="light" className="text-sm font-medium text-foreground">
-                   {username}
-                   <svg className="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
-                     <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
-                   </svg>
-                 </Button>
-               </DropdownTrigger>
+            <Dropdown placement="bottom-end">
+              <DropdownTrigger>
+                <Button
+                  className="text-sm font-medium text-foreground"
+                  variant="light"
+                >
+                  {username}
+                  <svg
+                    className="w-4 h-4 ml-1"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      clipRule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      fillRule="evenodd"
+                    />
+                  </svg>
+                </Button>
+              </DropdownTrigger>
               <DropdownMenu aria-label="用户菜单">
                 <DropdownItem
                   key="change-password"
                   startContent={
-                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                      <path fillRule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clipRule="evenodd" />
+                    <svg
+                      className="w-4 h-4"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        clipRule="evenodd"
+                        d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z"
+                        fillRule="evenodd"
+                      />
                     </svg>
                   }
                   onPress={onOpen}
@@ -368,13 +447,21 @@ export default function AdminLayout({
                 </DropdownItem>
                 <DropdownItem
                   key="logout"
-                  startContent={
-                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                      <path fillRule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clipRule="evenodd" />
-                    </svg>
-                  }
                   className="text-danger"
                   color="danger"
+                  startContent={
+                    <svg
+                      className="w-4 h-4"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        clipRule="evenodd"
+                        d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
+                        fillRule="evenodd"
+                      />
+                    </svg>
+                  }
                   onPress={handleLogout}
                 >
                   退出登录
@@ -385,70 +472,94 @@ export default function AdminLayout({
         </header>
 
         {/* 主内容 */}
-        <main className={`flex-1 bg-gray-100 dark:bg-black ${isMobile ? '' : 'overflow-y-auto'}`}>
+        <main
+          className={`flex-1 bg-gray-100 dark:bg-black ${isMobile ? "" : "overflow-y-auto"}`}
+        >
           {children}
         </main>
       </div>
 
       {/* 修改密码弹窗 */}
-      <Modal 
-        isOpen={isOpen} 
+      <Modal
+        backdrop="blur"
+        isOpen={isOpen}
+        placement="center"
+        scrollBehavior="outside"
+        size="2xl"
         onOpenChange={() => {
           onOpenChange();
           resetPasswordForm();
         }}
-        size="2xl"
-        scrollBehavior="outside"
-        backdrop="blur"
-        placement="center"
       >
-                 <ModalContent>
-           {(onClose: () => void) => (
+        <ModalContent>
+          {(onClose: () => void) => (
             <>
-              <ModalHeader className="flex flex-col gap-1">修改密码</ModalHeader>
+              <ModalHeader className="flex flex-col gap-1">
+                修改密码
+              </ModalHeader>
               <ModalBody>
-                                 <div className="space-y-4">
-                   <Input
-                     label="新用户名"
-                     placeholder="请输入新用户名（至少3位）"
-                     value={passwordForm.newUsername}
-                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPasswordForm(prev => ({ ...prev, newUsername: e.target.value }))}
-                     variant="bordered"
-                   />
-                   <Input
-                     label="当前密码"
-                     type="password"
-                     placeholder="请输入当前密码"
-                     value={passwordForm.currentPassword}
-                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPasswordForm(prev => ({ ...prev, currentPassword: e.target.value }))}
-                     variant="bordered"
-                   />
-                   <Input
-                     label="新密码"
-                     type="password"
-                     placeholder="请输入新密码（至少6位）"
-                     value={passwordForm.newPassword}
-                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPasswordForm(prev => ({ ...prev, newPassword: e.target.value }))}
-                     variant="bordered"
-                   />
-                   <Input
-                     label="确认密码"
-                     type="password"
-                     placeholder="请再次输入新密码"
-                     value={passwordForm.confirmPassword}
-                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPasswordForm(prev => ({ ...prev, confirmPassword: e.target.value }))}
-                     variant="bordered"
-                   />
-                 </div>
+                <div className="space-y-4">
+                  <Input
+                    label="新用户名"
+                    placeholder="请输入新用户名（至少3位）"
+                    value={passwordForm.newUsername}
+                    variant="bordered"
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      setPasswordForm((prev) => ({
+                        ...prev,
+                        newUsername: e.target.value,
+                      }))
+                    }
+                  />
+                  <Input
+                    label="当前密码"
+                    placeholder="请输入当前密码"
+                    type="password"
+                    value={passwordForm.currentPassword}
+                    variant="bordered"
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      setPasswordForm((prev) => ({
+                        ...prev,
+                        currentPassword: e.target.value,
+                      }))
+                    }
+                  />
+                  <Input
+                    label="新密码"
+                    placeholder="请输入新密码（至少6位）"
+                    type="password"
+                    value={passwordForm.newPassword}
+                    variant="bordered"
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      setPasswordForm((prev) => ({
+                        ...prev,
+                        newPassword: e.target.value,
+                      }))
+                    }
+                  />
+                  <Input
+                    label="确认密码"
+                    placeholder="请再次输入新密码"
+                    type="password"
+                    value={passwordForm.confirmPassword}
+                    variant="bordered"
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      setPasswordForm((prev) => ({
+                        ...prev,
+                        confirmPassword: e.target.value,
+                      }))
+                    }
+                  />
+                </div>
               </ModalBody>
               <ModalFooter>
                 <Button color="default" variant="light" onPress={onClose}>
                   取消
                 </Button>
-                <Button 
-                  color="primary" 
-                  onPress={handlePasswordSubmit}
+                <Button
+                  color="primary"
                   isLoading={passwordLoading}
+                  onPress={handlePasswordSubmit}
                 >
                   确定
                 </Button>
@@ -459,4 +570,4 @@ export default function AdminLayout({
       </Modal>
     </div>
   );
-} 
+}

vite-frontend/src/layouts/h5-simple.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import React from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 import { Button } from "@heroui/button";
 
-import { Logo } from '@/components/icons';
-import { siteConfig } from '@/config/site';
+import { Logo } from "@/components/icons";
+import { siteConfig } from "@/config/site";
 
 export default function H5SimpleLayout({
   children,
@@ -12,11 +12,11 @@ export default function H5SimpleLayout({
 }) {
   const navigate = useNavigate();
   const location = useLocation();
-  
+
   // 路由切换时回到顶部，避免上一页滚动位置保留
   React.useEffect(() => {
     try {
-      window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+      window.scrollTo({ top: 0, left: 0, behavior: "auto" });
     } catch (e) {
       window.scrollTo(0, 0);
     }
@@ -25,7 +25,7 @@ export default function H5SimpleLayout({
   }, [location.pathname]);
 
   const handleBack = () => {
-    navigate('/profile');
+    navigate("/profile");
   };
 
   return (
@@ -33,28 +33,26 @@ export default function H5SimpleLayout({
       {/* 顶部导航栏 */}
       <header className="bg-white dark:bg-black shadow-sm border-b border-gray-200 dark:border-gray-600 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
         <div className="flex items-center gap-2">
-          <Button
-            isIconOnly
-            variant="light"
-            size="sm"
-            onPress={handleBack}
-          >
+          <Button isIconOnly size="sm" variant="light" onPress={handleBack}>
             <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
+              <path
+                clipRule="evenodd"
+                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                fillRule="evenodd"
+              />
             </svg>
           </Button>
           <Logo size={20} />
-          <h1 className="text-sm font-bold text-foreground">{siteConfig.name}</h1>
+          <h1 className="text-sm font-bold text-foreground">
+            {siteConfig.name}
+          </h1>
         </div>
 
-        <div className="flex items-center gap-2">
-        </div>
+        <div className="flex items-center gap-2" />
       </header>
 
       {/* 主内容区域 */}
-      <main className="flex-1 bg-gray-100 dark:bg-black pb-0">
-        {children}
-      </main>
+      <main className="flex-1 bg-gray-100 dark:bg-black pb-0">{children}</main>
     </div>
   );
 }

vite-frontend/src/layouts/h5.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 
-import { Logo } from '@/components/icons';
-import { siteConfig } from '@/config/site';
+import { Logo } from "@/components/icons";
+import { siteConfig } from "@/config/site";
 
 interface TabItem {
   path: string;
@@ -11,13 +11,7 @@ interface TabItem {
   adminOnly?: boolean;
 }
 
-
-
-export default function H5Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function H5Layout({ children }: { children: React.ReactNode }) {
   const navigate = useNavigate();
   const location = useLocation();
   const [isAdmin, setIsAdmin] = useState(false);
@@ -25,65 +19,77 @@ export default function H5Layout({
   // Tabbar配置
   const tabItems: TabItem[] = [
     {
-      path: '/dashboard',
-      label: '首页',
+      path: "/dashboard",
+      label: "首页",
       icon: (
         <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
           <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
         </svg>
-      )
+      ),
     },
     {
-      path: '/forward',
-      label: '转发',
+      path: "/forward",
+      label: "转发",
       icon: (
         <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
-          <path fillRule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clipRule="evenodd" />
-        </svg>
-      )
-    },
-    {
-      path: '/tunnel',
-      label: '隧道',
-      icon: (
-        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
-          <path fillRule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clipRule="evenodd" />
+          <path
+            clipRule="evenodd"
+            d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+            fillRule="evenodd"
+          />
         </svg>
       ),
-      adminOnly: true
     },
     {
-      path: '/node',
-      label: '节点',
+      path: "/tunnel",
+      label: "隧道",
       icon: (
         <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
-          <path fillRule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+          <path
+            clipRule="evenodd"
+            d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
+            fillRule="evenodd"
+          />
         </svg>
       ),
-      adminOnly: true
+      adminOnly: true,
     },
     {
-      path: '/profile',
-      label: '我的',
+      path: "/node",
+      label: "节点",
+      icon: (
+        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            clipRule="evenodd"
+            d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z"
+            fillRule="evenodd"
+          />
+        </svg>
+      ),
+      adminOnly: true,
+    },
+    {
+      path: "/profile",
+      label: "我的",
       icon: (
         <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
           <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
         </svg>
-      )
-    }
+      ),
+    },
   ];
 
   useEffect(() => {
-
     // 兼容处理：如果没有admin字段，根据role_id判断（0为管理员）
-    let adminFlag = localStorage.getItem('admin') === 'true';
-    if (localStorage.getItem('admin') === null) {
-      const roleId = parseInt(localStorage.getItem('role_id') || '1', 10);
+    let adminFlag = localStorage.getItem("admin") === "true";
+
+    if (localStorage.getItem("admin") === null) {
+      const roleId = parseInt(localStorage.getItem("role_id") || "1", 10);
+
       adminFlag = roleId === 0;
       // 补充设置admin字段，避免下次再次判断
-      localStorage.setItem('admin', adminFlag.toString());
+      localStorage.setItem("admin", adminFlag.toString());
     }
-    
 
     setIsAdmin(adminFlag);
   }, []);
@@ -94,14 +100,14 @@ export default function H5Layout({
   };
 
   // 过滤tab项（根据权限）
-  const filteredTabItems = tabItems.filter(item => 
-    !item.adminOnly || isAdmin
+  const filteredTabItems = tabItems.filter(
+    (item) => !item.adminOnly || isAdmin,
   );
 
   // 路由切换时回到页面顶部，避免上一页的滚动位置遗留
   useEffect(() => {
     try {
-      window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+      window.scrollTo({ top: 0, left: 0, behavior: "auto" });
     } catch (e) {
       window.scrollTo(0, 0);
     }
@@ -115,17 +121,16 @@ export default function H5Layout({
       <header className="bg-white dark:bg-black shadow-sm border-b border-gray-200 dark:border-gray-600 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
         <div className="flex items-center gap-2">
           <Logo size={20} />
-          <h1 className="text-sm font-bold text-foreground">{siteConfig.name}</h1>
+          <h1 className="text-sm font-bold text-foreground">
+            {siteConfig.name}
+          </h1>
         </div>
 
-        <div className="flex items-center gap-2">
-        </div>
+        <div className="flex items-center gap-2" />
       </header>
 
       {/* 主内容区域 */}
-      <main className="flex-1 bg-gray-100 dark:bg-black">
-        {children}
-      </main>
+      <main className="flex-1 bg-gray-100 dark:bg-black">{children}</main>
 
       {/* 用于给固定 Tabbar 腾出空间的占位元素 */}
       <div aria-hidden className="h-16 safe-bottom" />
@@ -134,28 +139,27 @@ export default function H5Layout({
       <nav className="bg-white dark:bg-black border-t border-gray-200 dark:border-gray-600 h-16 safe-bottom flex-shrink-0 flex items-center justify-around px-2 fixed bottom-0 left-0 right-0 z-30">
         {filteredTabItems.map((item) => {
           const isActive = location.pathname === item.path;
+
           return (
             <button
               key={item.path}
-              onClick={() => handleTabClick(item.path)}
               className={`
                 flex flex-col items-center justify-center flex-1 h-full
                 transition-colors duration-200 min-h-[44px]
-                ${isActive 
-                  ? 'text-primary-600 dark:text-primary-400' 
-                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+                ${
+                  isActive
+                    ? "text-primary-600 dark:text-primary-400"
+                    : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
                 }
               `}
+              onClick={() => handleTabClick(item.path)}
             >
-              <div className="flex-shrink-0 mb-1">
-                {item.icon}
-              </div>
+              <div className="flex-shrink-0 mb-1">{item.icon}</div>
               <span className="text-xs font-medium">{item.label}</span>
             </button>
           );
         })}
       </nav>
-
     </div>
   );
 }