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/pages/index.tsx

@@ -3,10 +3,11 @@ import { Input } from "@heroui/input";
 import { Card, CardBody, CardHeader } from "@heroui/card";
 import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
-import toast from 'react-hot-toast';
-import axios from 'axios';
-import { isWebViewFunc } from '@/utils/panel';
-import { siteConfig } from '@/config/site';
+import toast from "react-hot-toast";
+import axios from "axios";
+
+import { isWebViewFunc } from "@/utils/panel";
+import { siteConfig } from "@/config/site";
 import { title } from "@/components/primitives";
 import DefaultLayout from "@/layouts/default";
 import { login, LoginData, checkCaptcha } from "@/api";
@@ -14,15 +15,12 @@ import "@/utils/tac.css";
 import "@/utils/tac.min.js";
 import bgImage from "@/images/bg.jpg";
 
-
 interface LoginForm {
   username: string;
   password: string;
   captchaId: string;
 }
 
-
-
 interface CaptchaConfig {
   requestCaptchaDataUrl: string;
   validCaptchaUrl: string;
@@ -54,6 +52,7 @@ export default function IndexPage() {
   const tacInstanceRef = useRef<any>(null);
   const captchaContainerRef = useRef<HTMLDivElement>(null);
   const [isWebView, setIsWebView] = useState(false);
+
   // 清理验证码实例
   useEffect(() => {
     return () => {
@@ -72,26 +71,26 @@ export default function IndexPage() {
     const newErrors: Partial<LoginForm> = {};
 
     if (!form.username.trim()) {
-      newErrors.username = '请输入用户名';
+      newErrors.username = "请输入用户名";
     }
 
     if (!form.password.trim()) {
-      newErrors.password = '请输入密码';
+      newErrors.password = "请输入密码";
     } else if (form.password.length < 6) {
-      newErrors.password = '密码长度至少6位';
+      newErrors.password = "密码长度至少6位";
     }
 
-
     setErrors(newErrors);
+
     return Object.keys(newErrors).length === 0;
   };
 
   // 处理输入变化
   const handleInputChange = (field: keyof LoginForm, value: string) => {
-    setForm(prev => ({ ...prev, [field]: value }));
+    setForm((prev) => ({ ...prev, [field]: value }));
     // 清除该字段的错误
     if (errors[field]) {
-      setErrors(prev => ({ ...prev, [field]: undefined }));
+      setErrors((prev) => ({ ...prev, [field]: undefined }));
     }
   };
 
@@ -109,16 +108,18 @@ export default function IndexPage() {
       }
 
       // 使用axios的baseURL，确保在WebView中使用正确的面板地址
-      const baseURL = axios.defaults.baseURL || (import.meta.env.VITE_API_BASE ? `${import.meta.env.VITE_API_BASE}/api/v1/` : '/api/v1/');
-      
+      const baseURL =
+        axios.defaults.baseURL ||
+        (import.meta.env.VITE_API_BASE
+          ? `${import.meta.env.VITE_API_BASE}/api/v1/`
+          : "/api/v1/");
+
       const config: CaptchaConfig = {
         requestCaptchaDataUrl: `${baseURL}captcha/generate`,
-        validCaptchaUrl: `${baseURL}captcha/verify`, 
+        validCaptchaUrl: `${baseURL}captcha/verify`,
         bindEl: "#captcha-container",
         validSuccess: (res: any, _: any, tac: any) => {
-          
-
-          form.captchaId = res.data.validToken
+          form.captchaId = res.data.validToken;
 
           setShowCaptcha(false);
           tac.destroyWindow();
@@ -134,30 +135,30 @@ export default function IndexPage() {
         },
         btnRefreshFun: (_event: any, tac: any) => {
           tac.reloadCaptcha();
-        }
+        },
       };
 
       // 检测暗黑模式
-      const isDarkMode = document.documentElement.classList.contains('dark') || 
-                        document.documentElement.getAttribute('data-theme') === 'dark' ||
-                        window.matchMedia('(prefers-color-scheme: dark)').matches;
-      
+      const isDarkMode =
+        document.documentElement.classList.contains("dark") ||
+        document.documentElement.getAttribute("data-theme") === "dark" ||
+        window.matchMedia("(prefers-color-scheme: dark)").matches;
+
       // 根据主题调整颜色
       const trackColor = isDarkMode ? "#4a5568" : "#7db0be"; // 暗黑模式使用更深的灰蓝色
-      
+
       const style: CaptchaStyle = {
         bgUrl: bgImage,
         logoUrl: null,
         moveTrackMaskBgColor: trackColor,
-        moveTrackMaskBorderColor: trackColor
+        moveTrackMaskBorderColor: trackColor,
       };
 
       tacInstanceRef.current = new window.TAC(config, style);
       tacInstanceRef.current.init();
-
     } catch (error) {
-      console.error('初始化验证码失败:', error);
-      toast.error('验证码初始化失败，请刷新页面重试');
+      console.error("初始化验证码失败:", error);
+      toast.error("验证码初始化失败，请刷新页面重试");
       setShowCaptcha(false);
       setLoading(false);
     }
@@ -165,8 +166,6 @@ export default function IndexPage() {
 
   // 执行登录请求
   const performLogin = async () => {
-
-
     try {
       const loginData: LoginData = {
         username: form.username.trim(),
@@ -175,35 +174,36 @@ export default function IndexPage() {
       };
 
       const response = await login(loginData);
-      
+
       if (response.code !== 0) {
         toast.error(response.msg || "登录失败");
+
         return;
       }
 
       // 检查是否需要强制修改密码
       if (response.data.requirePasswordChange) {
-        localStorage.setItem('token', response.data.token);
+        localStorage.setItem("token", response.data.token);
         localStorage.setItem("role_id", response.data.role_id.toString());
         localStorage.setItem("name", response.data.name);
         localStorage.setItem("admin", (response.data.role_id === 0).toString());
-        toast.success('检测到默认密码，即将跳转到修改密码页面');
+        toast.success("检测到默认密码，即将跳转到修改密码页面");
         navigate("/change-password");
+
         return;
       }
 
       // 保存登录信息
-      localStorage.setItem('token', response.data.token);
+      localStorage.setItem("token", response.data.token);
       localStorage.setItem("role_id", response.data.role_id.toString());
       localStorage.setItem("name", response.data.name);
       localStorage.setItem("admin", (response.data.role_id === 0).toString());
 
       // 登录成功
-      toast.success('登录成功');
+      toast.success("登录成功");
       navigate("/dashboard");
-
     } catch (error) {
-      console.error('登录错误:', error);
+      console.error("登录错误:", error);
       toast.error("网络错误，请稍后重试");
     } finally {
       setLoading(false);
@@ -218,10 +218,11 @@ export default function IndexPage() {
     try {
       // 先检查是否需要验证码
       const checkResponse = await checkCaptcha();
-      
+
       if (checkResponse.code !== 0) {
         toast.error("检查验证码状态失败，请重试" + checkResponse.msg);
         setLoading(false);
+
         return;
       }
 
@@ -238,15 +239,14 @@ export default function IndexPage() {
         }, 100);
       }
     } catch (error) {
-      console.error('检查验证码状态错误:', error);
+      console.error("检查验证码状态错误:", error);
       toast.error("网络错误，请稍后重试" + error);
       setLoading(false);
     }
   };
 
-
   const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !loading) {
+    if (e.key === "Enter" && !loading) {
       handleLogin();
     }
   };
@@ -258,42 +258,47 @@ export default function IndexPage() {
           <Card className="w-full">
             <CardHeader className="pb-0 pt-6 px-6 flex-col items-center">
               <h1 className={title({ size: "sm" })}>登陆</h1>
-              <p className="text-small text-default-500 mt-2">请输入您的账号信息</p>
+              <p className="text-small text-default-500 mt-2">
+                请输入您的账号信息
+              </p>
             </CardHeader>
             <CardBody className="px-6 py-6">
               <div className="flex flex-col gap-4">
                 <Input
+                  errorMessage={errors.username}
+                  isDisabled={loading}
+                  isInvalid={!!errors.username}
                   label="用户名"
                   placeholder="请输入用户名"
                   value={form.username}
-                  onChange={(e) => handleInputChange('username', e.target.value)}
-                  onKeyDown={handleKeyPress}
                   variant="bordered"
-                  isDisabled={loading}
-                  isInvalid={!!errors.username}
-                  errorMessage={errors.username}
+                  onChange={(e) =>
+                    handleInputChange("username", e.target.value)
+                  }
+                  onKeyDown={handleKeyPress}
                 />
-                
+
                 <Input
+                  isDisabled={loading}
+                  isInvalid={!!errors.password}
                   label="密码"
                   placeholder="请输入密码"
                   type="password"
                   value={form.password}
-                  onChange={(e) => handleInputChange('password', e.target.value)}
-                  onKeyDown={handleKeyPress}
                   variant="bordered"
-                  isDisabled={loading}
-                  isInvalid={!!errors.password}
+                  onChange={(e) =>
+                    handleInputChange("password", e.target.value)
+                  }
+                  onKeyDown={handleKeyPress}
                 />
 
-                
                 <Button
+                  className="mt-2"
                   color="primary"
+                  disabled={loading}
+                  isLoading={loading}
                   size="lg"
                   onClick={handleLogin}
-                  isLoading={loading}
-                  disabled={loading}
-                  className="mt-2"
                 >
                   {loading ? (showCaptcha ? "验证中..." : "登录中...") : "登录"}
                 </Button>
@@ -302,47 +307,47 @@ export default function IndexPage() {
           </Card>
         </div>
 
+        {/* 版权信息 - 固定在底部，不占据布局空间 */}
 
-      {/* 版权信息 - 固定在底部，不占据布局空间 */}
-      
-               <div className="fixed inset-x-0 bottom-4 text-center py-4">
-               <p className="text-xs text-gray-400 dark:text-gray-500">
-                 Powered by{' '}
-<a 
-                    href={siteConfig.github_repo}
-                    target="_blank" 
-                    rel="noopener noreferrer"
-                    className="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
-                  >
-                    flux-panel
-                  </a>
-               </p>
-               <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-                 v{ isWebView ? siteConfig.app_version : siteConfig.version}
-               </p>
-             </div>
-      
-   
+        <div className="fixed inset-x-0 bottom-4 text-center py-4">
+          <p className="text-xs text-gray-400 dark:text-gray-500">
+            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>
+          </p>
+          <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+            v{isWebView ? siteConfig.app_version : siteConfig.version}
+          </p>
+        </div>
 
         {/* 验证码弹层 */}
         {showCaptcha && (
           <div className="fixed inset-0 z-50 flex items-center justify-center">
             {/* 背景遮罩层 - 模糊效果，暗黑模式下更深 */}
             <div className="absolute inset-0 bg-black/60 dark:bg-black/80 backdrop-blur-sm captcha-backdrop-enter" />
-           {/* 验证码容器 */}
-           <div className="mb-4">
-                <div 
-                  id="captcha-container" 
-                  ref={captchaContainerRef}
-                  className="w-full flex justify-center"
-                  style={{
-                    filter: document.documentElement.classList.contains('dark') || 
-                           document.documentElement.getAttribute('data-theme') === 'dark' ||
-                           window.matchMedia('(prefers-color-scheme: dark)').matches 
-                           ? 'brightness(0.8) contrast(0.9)' : 'none'
-                  }}
-                />
-              </div>
+            {/* 验证码容器 */}
+            <div className="mb-4">
+              <div
+                ref={captchaContainerRef}
+                className="w-full flex justify-center"
+                id="captcha-container"
+                style={{
+                  filter:
+                    document.documentElement.classList.contains("dark") ||
+                    document.documentElement.getAttribute("data-theme") ===
+                      "dark" ||
+                    window.matchMedia("(prefers-color-scheme: dark)").matches
+                      ? "brightness(0.8) contrast(0.9)"
+                      : "none",
+                }}
+              />
+            </div>
           </div>
         )}
       </section>