fix(frontend): move batch operations into top toolbar (#198 )

## Summary - switch batch mode interactions to the top-right action bar on forward, tunnel, and node pages - remove bottom floating batch toolbars and restore normal action toolbar when exiting batch mode - stabilize toolbar layout and improve batch button visibility to avoid visual jitter on toggle
fix(frontend): move batch actions into top toolbar
2026-09-29 07:56:37 +08:00 · 2026-02-23 21:30:57 +08:00 · 2026-02-23 21:28:50 +08:00 · 2026-02-23 07:45:14 +00:00 · 2026-02-23 14:42:24 +08:00 · 2026-02-23 14:40:29 +08:00
23 changed files with 613 additions and 336 deletions
@@ -219,7 +219,7 @@ func (h *Handler) login(w http.ResponseWriter, r *http.Request) {
 		response.WriteJSON(w, response.Err(-2, err.Error()))
 		return
 	}
-	if captchaEnabled {
+	if captchaEnabled && !h.apiClientCaptchaBypassEnabled(r) {
 		captchaID := strings.TrimSpace(req.CaptchaID)
 		if captchaID == "" {
 			response.WriteJSON(w, response.ErrDefault("验证码校验失败"))
@@ -994,6 +994,20 @@ func (h *Handler) captchaEnabled() (bool, error) {
 	return strings.EqualFold(cfg.Value, "true"), nil
 }

+func (h *Handler) apiClientCaptchaBypassEnabled(r *http.Request) bool {
+	if r == nil {
+		return false
+	}
+
+	client := strings.ToLower(strings.TrimSpace(r.Header.Get("X-FLVX-API-Client")))
+	switch client {
+	case "whmcs", "whmcs-module":
+		return true
+	default:
+		return false
+	}
+}
+
 func (h *Handler) markCaptchaToken(token string) {
 	if h == nil {
 		return
@@ -45,6 +45,18 @@ func TestCaptchaVerifyLoginContract(t *testing.T) {
 		assertCodeMsg(t, resp, -1, "验证码校验失败")
 	})

+	t.Run("whmcs api client bypasses captcha", func(t *testing.T) {
+		body := bytes.NewBufferString(`{"username":"admin_user","password":"admin_user","captchaId":""}`)
+		req := httptest.NewRequest(http.MethodPost, "/api/v1/user/login", body)
+		req.Header.Set("Content-Type", "application/json")
+		req.Header.Set("X-FLVX-API-Client", "whmcs")
+		resp := httptest.NewRecorder()
+
+		router.ServeHTTP(resp, req)
+
+		assertCode(t, resp, 0)
+	})
+
 	t.Run("captcha token is one-time and consumed by login", func(t *testing.T) {
 		verifyReq := httptest.NewRequest(http.MethodPost, "/api/v1/captcha/verify", bytes.NewBufferString(`{"id":"captcha-token-1","data":"ok"}`))
 		verifyReq.Header.Set("Content-Type", "application/json")
@@ -1 +1,2 @@
-VITE_API_BASE=
+VITE_GITHUB_REPO=https://github.com/Sagit-chu/flvx
+VITE_APP_VERSION=beta
@@ -2,7 +2,12 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/pwa-192x192.png" />
+    <meta name="theme-color" content="#2563eb" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="FLVX" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    
    <title>FLVX</title>
    <script>
@@ -78,6 +78,7 @@
    "prettier": "3.5.3",
    "typescript": "5.6.3",
    "vite": "npm:rolldown-vite@^7.3.1",
+    "vite-plugin-pwa": "^1.1.0",
    "vite-tsconfig-paths": "^6.0.5"
  }
 }
@@ -0,0 +1,51 @@
+import { useCallback, useState, type SetStateAction } from "react";
+
+const readStoredValue = <T>(key: string, fallbackValue: T): T => {
+  try {
+    const rawValue = localStorage.getItem(key);
+
+    if (rawValue === null) {
+      return fallbackValue;
+    }
+
+    return JSON.parse(rawValue) as T;
+  } catch {
+    return fallbackValue;
+  }
+};
+
+export const useLocalStorageState = <T>(
+  key: string,
+  initialValue: T,
+): readonly [T, (value: SetStateAction<T>) => void, () => void] => {
+  const [value, setValue] = useState<T>(() =>
+    readStoredValue(key, initialValue),
+  );
+
+  const setPersistedValue = useCallback(
+    (nextValue: SetStateAction<T>) => {
+      setValue((prevValue) => {
+        const resolvedValue =
+          typeof nextValue === "function"
+            ? (nextValue as (value: T) => T)(prevValue)
+            : nextValue;
+
+        try {
+          localStorage.setItem(key, JSON.stringify(resolvedValue));
+        } catch {}
+
+        return resolvedValue;
+      });
+    },
+    [key],
+  );
+
+  const resetPersistedValue = useCallback(() => {
+    setValue(initialValue);
+    try {
+      localStorage.removeItem(key);
+    } catch {}
+  }, [initialValue, key]);
+
+  return [value, setPersistedValue, resetPersistedValue] as const;
+};
@@ -50,6 +50,9 @@ export default function AdminLayout({
  const { isOpen, onOpen, onOpenChange } = useDisclosure();

  const [mobileMenuVisible, setMobileMenuVisible] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(
+    () => localStorage.getItem("sidebar_collapsed") === "true",
+  );
  const [username, setUsername] = useState("");
  const [isAdmin, setIsAdmin] = useState(false);
  const [passwordLoading, setPasswordLoading] = useState(false);
@@ -204,6 +207,14 @@ export default function AdminLayout({
    setMobileMenuVisible(false);
  };

+  // 切换折叠状态
+  const toggleCollapse = () => {
+    const newCollapsed = !isCollapsed;
+
+    setIsCollapsed(newCollapsed);
+    localStorage.setItem("sidebar_collapsed", newCollapsed.toString());
+  };
+
  // 菜单点击处理
  const handleMenuClick = (path: string) => {
    navigate(path);
@@ -304,32 +315,36 @@ export default function AdminLayout({
        className={`
        ${isMobile ? "fixed" : "relative"} 
        ${isMobile && !mobileMenuVisible ? "-translate-x-full" : "translate-x-0"}
-        ${isMobile ? "w-64" : "w-72"} 
+        ${isMobile ? "w-64" : isCollapsed ? "w-20" : "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
+        transition-all 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 className="px-5 h-14 flex items-center overflow-hidden whitespace-nowrap box-border">
+          <div className="flex-shrink-0 flex items-center justify-center w-10">
+            <Logo size={28} />
+          </div>
+          <div
+            className={`transition-all duration-300 overflow-hidden ${isCollapsed ? "max-w-0 opacity-0 ml-0" : "max-w-[180px] opacity-100 ml-2"}`}
+          >
+            <h1 className="text-sm font-bold text-foreground overflow-hidden whitespace-nowrap text-ellipsis">
+              {siteConfig.name}
+            </h1>
+            <p className="text-xs text-default-500 overflow-hidden whitespace-nowrap text-ellipsis">
+              v{siteConfig.version}
+            </p>
          </div>
        </div>

        {/* 菜单导航 */}
-        <nav className="flex-1 px-4 py-6 overflow-y-auto">
+        <nav className="flex-1 px-3 py-6 overflow-y-auto overflow-x-hidden">
          <ul className="space-y-1">
            {filteredMenuItems.map((item) => {
              const isActive = location.pathname === item.path;
@@ -338,14 +353,15 @@ export default function AdminLayout({
                <li key={item.path}>
                  <motion.button
                    className={`
-                       w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left
-                       relative min-h-[44px]
+                       w-full flex items-center p-2 rounded-lg text-left
+                       relative min-h-[44px] overflow-hidden transition-colors
                       ${
                         isActive
                           ? "text-primary-600 dark:text-primary-300"
                           : "text-gray-700 dark:text-gray-200"
                       }
                     `}
+                    title={isCollapsed ? item.label : undefined}
                    transition={{ duration: 0.15 }}
                    onClick={() => handleMenuClick(item.path)}
                  >
@@ -367,12 +383,16 @@ export default function AdminLayout({
                        whileHover={{ opacity: 1 }}
                      />
                    )}
-                    <div className="flex-shrink-0 relative z-10">
+                    <div className="flex-shrink-0 w-10 h-10 flex items-center justify-center relative z-10">
                      {item.icon}
                    </div>
-                    <span className="font-medium text-sm relative z-10">
-                      {item.label}
-                    </span>
+                    <div
+                      className={`transition-all duration-300 overflow-hidden flex items-center ${isCollapsed ? "max-w-0 opacity-0 ml-0" : "max-w-[200px] opacity-100 ml-2"}`}
+                    >
+                      <span className="font-medium text-sm relative z-10 whitespace-nowrap">
+                        {item.label}
+                      </span>
+                    </div>
                  </motion.button>
                </li>
              );
@@ -380,9 +400,11 @@ export default function AdminLayout({
          </ul>
        </nav>

-        {/* 底部版权信息 */}
-        <div className="px-4 py-2 pb-4 mt-auto flex-shrink-0">
-          <div className="text-center">
+        {/* 底部版权信息和折叠按钮 */}
+        <div className="px-5 py-2 pb-4 mt-auto flex-shrink-0 flex items-center justify-between overflow-hidden whitespace-nowrap box-border">
+          <div
+            className={`transition-all duration-300 overflow-hidden flex items-center ${isCollapsed ? "max-w-0 opacity-0" : "max-w-[200px] opacity-100"}`}
+          >
            <p className="text-xs text-gray-400 dark:text-gray-500">
              Powered by{" "}
              <a
@@ -395,6 +417,49 @@ export default function AdminLayout({
              </a>
            </p>
          </div>
+
+          {/* 桌面端折叠按钮 */}
+          {!isMobile && (
+            <Button
+              isIconOnly
+              className="flex-shrink-0 text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 min-w-0 w-10 h-10 rounded-full ml-auto"
+              size="sm"
+              variant="light"
+              onPress={toggleCollapse}
+            >
+              {isCollapsed ? (
+                // 向右扩展的提示
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                  />
+                </svg>
+              ) : (
+                // 向左收起的提示
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                  />
+                </svg>
+              )}
+            </Button>
+          )}
        </div>
      </aside>

@@ -499,9 +564,7 @@ export default function AdminLayout({
        </header>

        {/* 主内容 */}
-        <main
-          className={`flex-1 bg-gray-100 dark:bg-black overflow-hidden ${isMobile ? "" : "overflow-y-scroll"}`}
-        >
+        <main className="flex-1 bg-gray-100 dark:bg-black overflow-y-auto">
          <AnimatePresence mode="wait">
            <motion.div
              key={location.pathname}
@@ -115,10 +115,10 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
      <main className="flex-1 bg-gray-100 dark:bg-black">{children}</main>

      {/* 用于给固定 Tabbar 腾出空间的占位元素 */}
-      <div aria-hidden className="h-16 safe-bottom" />
+      <div aria-hidden className="h-[calc(4rem+var(--safe-area-bottom))]" />

      {/* 底部Tabbar */}
-      <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">
+      <nav className="bg-white dark:bg-black border-t border-gray-200 dark:border-gray-600 h-[calc(4rem+var(--safe-area-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;

@@ -126,7 +126,7 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
            <button
              key={item.path}
              className={`
-                flex flex-col items-center justify-center flex-1 h-full
+                flex flex-col items-center justify-center flex-1 h-full pb-[var(--safe-area-bottom)]
                transition-colors duration-200 min-h-[44px]
                ${
                  isActive
@@ -1,10 +1,13 @@
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
+import { registerSW } from "virtual:pwa-register";

 import App from "./App.tsx";
 import { Provider } from "./provider.tsx";
 import "@/styles/globals.css";

+registerSW({ immediate: true });
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <Provider>
@@ -80,6 +80,7 @@ import {
 import { buildForwardOrder, FORWARD_ORDER_KEY } from "@/pages/forward/order";
 import { PageLoadingState } from "@/components/page-state";
 import { useMobileBreakpoint } from "@/hooks/useMobileBreakpoint";
+import { useLocalStorageState } from "@/hooks/use-local-storage-state";
 import { saveOrder } from "@/utils/order-storage";
 import { JwtUtil } from "@/utils/jwt";

@@ -126,7 +127,10 @@ export default function ForwardPage() {
  const [forwards, setForwards] = useState<Forward[]>([]);
  const [tunnels, setTunnels] = useState<Tunnel[]>([]);
  const isMobile = useMobileBreakpoint();
-  const [searchKeyword, setSearchKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useLocalStorageState(
+    "forward-search-keyword",
+    "",
+  );
  const [isSearchVisible, setIsSearchVisible] = useState(false);

  // 显示模式状态 - 从localStorage读取，默认为平铺显示
@@ -135,14 +139,16 @@ export default function ForwardPage() {
      const savedMode = localStorage.getItem("forward-view-mode");

      return (savedMode as "grouped" | "direct") || "direct";
-    } catch (e) {
+    } catch {
      return "direct";
    }
  });

  // 筛选状态
-  const [filterUserId, setFilterUserId] = useState<string>("all");
-  const [filterTunnelId, setFilterTunnelId] = useState<string>("all");
+  const [filterUserId, setFilterUserId, resetFilterUserId] =
+    useLocalStorageState<string>("forward-filter-user-id", "all");
+  const [filterTunnelId, setFilterTunnelId, resetFilterTunnelId] =
+    useLocalStorageState<string>("forward-filter-tunnel-id", "all");

  // 拖拽排序相关状态
  const [forwardOrder, setForwardOrder] = useState<number[]>([]);
@@ -1591,9 +1597,9 @@ export default function ForwardPage() {
            </div>

            {/* 统计信息 */}
-            <div className="flex items-center justify-between pt-2 border-t border-divider">
+            <div className="flex flex-wrap items-center justify-between pt-2 border-t border-divider gap-1">
              <Chip
-                className="text-xs"
+                className="text-xs whitespace-nowrap"
                color={strategyDisplay.color as any}
                size="sm"
                variant="flat"
@@ -1602,7 +1608,7 @@ export default function ForwardPage() {
              </Chip>
              <div className="flex items-center gap-1">
                <Chip
-                  className="text-xs"
+                  className="text-xs whitespace-nowrap"
                  color="primary"
                  size="sm"
                  variant="flat"
@@ -1611,7 +1617,7 @@ export default function ForwardPage() {
                </Chip>
              </div>
              <Chip
-                className="text-xs"
+                className="text-xs whitespace-nowrap"
                color="success"
                size="sm"
                variant="flat"
@@ -1716,187 +1722,208 @@ export default function ForwardPage() {
            onOpen={() => setIsSearchVisible(true)}
          />
        </div>
-        <div className="flex flex-wrap items-center justify-end gap-2 sm:gap-3">
-          {/* 筛选按钮 */}
-          <Button
-            isIconOnly
-            aria-label="筛选条件"
-            className={
-              filterUserId !== "all" || filterTunnelId !== "all"
-                ? "bg-primary/20 text-primary relative"
-                : "text-default-600 relative"
-            }
-            color={
-              filterUserId !== "all" || filterTunnelId !== "all"
-                ? "primary"
-                : "default"
-            }
-            size="sm"
-            title="筛选条件"
-            variant="flat"
-            onPress={() => setIsFilterModalOpen(true)}
-          >
-            <svg
-              aria-hidden="true"
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-              />
-            </svg>
-            {(filterUserId !== "all" || filterTunnelId !== "all") && (
-              <span className="absolute top-1.5 right-1.5 flex h-1.5 w-1.5 rounded-full bg-primary" />
-            )}
-          </Button>
-          {/* 显示模式切换按钮 */}
-          <Button
-            isIconOnly
-            aria-label={
-              viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"
-            }
-            className="text-sm"
-            color="default"
-            size="sm"
-            title={viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"}
-            variant="flat"
-            onPress={handleViewModeChange}
-          >
-            {viewMode === "grouped" ? (
-              <svg
-                aria-hidden="true"
-                className="w-4 h-4"
-                fill="currentColor"
-                viewBox="0 0 20 20"
+        <div className="flex min-h-9 min-w-0 max-w-full items-center justify-end gap-2 overflow-x-auto whitespace-nowrap [&>*]:shrink-0 sm:gap-3">
+          {selectMode ? (
+            <>
+              <span className="text-sm text-default-600 shrink-0">
+                已选择 {selectedIds.size} 项
+              </span>
+              <Button
+                color="primary"
+                size="sm"
+                variant="flat"
+                onPress={selectAll}
              >
-                <path
-                  clipRule="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"
-                  fillRule="evenodd"
-                />
-              </svg>
-            ) : (
-              <svg
-                aria-hidden="true"
-                className="w-4 h-4"
-                fill="currentColor"
-                viewBox="0 0 20 20"
+                全选
+              </Button>
+              <Button
+                color="secondary"
+                size="sm"
+                variant="flat"
+                onPress={deselectAll}
              >
-                <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>
+              <Button
+                color="danger"
+                isDisabled={selectedIds.size === 0}
+                size="sm"
+                variant="flat"
+                onPress={() => setBatchDeleteModalOpen(true)}
+              >
+                删除
+              </Button>
+              <Button
+                color="warning"
+                isDisabled={selectedIds.size === 0}
+                isLoading={batchLoading}
+                size="sm"
+                variant="flat"
+                onPress={() => handleBatchToggleService(false)}
+              >
+                停用
+              </Button>
+              <Button
+                color="success"
+                isDisabled={selectedIds.size === 0}
+                isLoading={batchLoading}
+                size="sm"
+                variant="flat"
+                onPress={() => handleBatchToggleService(true)}
+              >
+                启用
+              </Button>
+              <Button
+                color="primary"
+                isDisabled={selectedIds.size === 0}
+                isLoading={batchLoading}
+                size="sm"
+                variant="flat"
+                onPress={handleBatchRedeploy}
+              >
+                下发
+              </Button>
+              <Button
+                color="secondary"
+                isDisabled={selectedIds.size === 0}
+                size="sm"
+                variant="flat"
+                onPress={() => setBatchChangeTunnelModalOpen(true)}
+              >
+                隧道
+              </Button>
+              <Button
+                color="secondary"
+                size="sm"
+                variant="solid"
+                onPress={toggleSelectMode}
+              >
+                退出
+              </Button>
+            </>
+          ) : (
+            <>
+              {/* 筛选按钮 */}
+              <Button
+                isIconOnly
+                aria-label="筛选条件"
+                className={
+                  filterUserId !== "all" || filterTunnelId !== "all"
+                    ? "bg-primary/20 text-primary relative"
+                    : "text-default-600 relative"
+                }
+                color={
+                  filterUserId !== "all" || filterTunnelId !== "all"
+                    ? "primary"
+                    : "default"
+                }
+                size="sm"
+                title="筛选条件"
+                variant="flat"
+                onPress={() => setIsFilterModalOpen(true)}
+              >
+                <svg
+                  aria-hidden="true"
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                  />
+                </svg>
+                {(filterUserId !== "all" || filterTunnelId !== "all") && (
+                  <span className="absolute top-1.5 right-1.5 flex h-1.5 w-1.5 rounded-full bg-primary" />
+                )}
+              </Button>
+              {/* 显示模式切换按钮 */}
+              <Button
+                isIconOnly
+                aria-label={
+                  viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"
+                }
+                className="text-sm"
+                color="default"
+                size="sm"
+                title={
+                  viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"
+                }
+                variant="flat"
+                onPress={handleViewModeChange}
+              >
+                {viewMode === "grouped" ? (
+                  <svg
+                    aria-hidden="true"
+                    className="w-4 h-4"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      clipRule="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"
+                      fillRule="evenodd"
+                    />
+                  </svg>
+                ) : (
+                  <svg
+                    aria-hidden="true"
+                    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="warning"
-            size="sm"
-            variant="flat"
-            onPress={handleImport}
-          >
-            导入
-          </Button>
+              {/* 导入按钮 */}
+              <Button
+                color="warning"
+                size="sm"
+                variant="flat"
+                onPress={handleImport}
+              >
+                导入
+              </Button>

-          {/* 导出按钮 */}
-          <Button
-            color="success"
-            isLoading={exportLoading}
-            size="sm"
-            variant="flat"
-            onPress={handleExport}
-          >
-            导出
-          </Button>
+              {/* 导出按钮 */}
+              <Button
+                color="success"
+                isLoading={exportLoading}
+                size="sm"
+                variant="flat"
+                onPress={handleExport}
+              >
+                导出
+              </Button>

-          <Button
-            color={selectMode ? "secondary" : "default"}
-            size="sm"
-            variant={selectMode ? "solid" : "flat"}
-            onPress={toggleSelectMode}
-          >
-            {selectMode ? "退出" : "批量"}
-          </Button>
+              <Button
+                className="border border-sky-200 bg-sky-100 text-sky-700 hover:bg-sky-200 dark:border-sky-500/40 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
+                color="default"
+                size="sm"
+                variant="flat"
+                onPress={toggleSelectMode}
+              >
+                批量
+              </Button>

-          <Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
-            新增
-          </Button>
+              <Button
+                color="primary"
+                size="sm"
+                variant="flat"
+                onPress={handleAdd}
+              >
+                新增
+              </Button>
+            </>
+          )}
        </div>
      </div>

-      {selectMode && selectedIds.size > 0 && (
-        <div className="fixed bottom-7 left-1/2 z-50 w-[calc(100vw-1rem)] max-w-max -translate-x-1/2 overflow-x-auto rounded-lg border border-divider bg-content1 p-2 shadow-lg">
-          <div className="flex min-w-max items-center gap-2">
-            <span className="text-sm text-default-600 shrink-0">
-              已选择 {selectedIds.size} 项
-            </span>
-            <Button
-              color="primary"
-              size="sm"
-              variant="flat"
-              onPress={selectAll}
-            >
-              全选
-            </Button>
-            <Button
-              color="secondary"
-              size="sm"
-              variant="flat"
-              onPress={deselectAll}
-            >
-              清空
-            </Button>
-            <Button
-              color="danger"
-              size="sm"
-              variant="flat"
-              onPress={() => setBatchDeleteModalOpen(true)}
-            >
-              删除
-            </Button>
-            <Button
-              color="warning"
-              isLoading={batchLoading}
-              size="sm"
-              variant="flat"
-              onPress={() => handleBatchToggleService(false)}
-            >
-              停用
-            </Button>
-            <Button
-              color="success"
-              isLoading={batchLoading}
-              size="sm"
-              variant="flat"
-              onPress={() => handleBatchToggleService(true)}
-            >
-              启用
-            </Button>
-            <Button
-              color="primary"
-              isLoading={batchLoading}
-              size="sm"
-              variant="flat"
-              onPress={handleBatchRedeploy}
-            >
-              下发
-            </Button>
-            <Button
-              color="secondary"
-              size="sm"
-              variant="flat"
-              onPress={() => setBatchChangeTunnelModalOpen(true)}
-            >
-              隧道
-            </Button>
-          </div>
-        </div>
-      )}
-
      {/* 根据显示模式渲染不同内容 */}
      {viewMode === "grouped" ? (
        sortedForwards.length > 0 ? (
@@ -3218,8 +3245,8 @@ export default function ForwardPage() {
                  color="default"
                  variant="flat"
                  onPress={() => {
-                    setFilterUserId("all");
-                    setFilterTunnelId("all");
+                    resetFilterUserId();
+                    resetFilterTunnelId();
                  }}
                >
                  重置
@@ -27,6 +27,7 @@ import {
  getTunnelList,
 } from "@/api";
 import { PageLoadingState } from "@/components/page-state";
+import { useLocalStorageState } from "@/hooks/use-local-storage-state";

 interface SpeedLimitRule {
  id: number;
@@ -57,7 +58,10 @@ export default function LimitPage() {
  const [loading, setLoading] = useState(true);
  const [rules, setRules] = useState<SpeedLimitRule[]>([]);
  const [tunnels, setTunnels] = useState<Tunnel[]>([]);
-  const [searchKeyword, setSearchKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useLocalStorageState(
+    "limit-search-keyword",
+    "",
+  );
  const [isSearchVisible, setIsSearchVisible] = useState(false);

  const filteredRules = useMemo(() => {
@@ -62,6 +62,7 @@ import { tryCopyInstallCommand } from "@/pages/node/install-command";
 import { buildNodeSystemInfo } from "@/pages/node/system-info";
 import { useNodeOfflineTimers } from "@/pages/node/use-node-offline-timers";
 import { useNodeRealtime } from "@/pages/node/use-node-realtime";
+import { useLocalStorageState } from "@/hooks/use-local-storage-state";
 import { loadStoredOrder, saveOrder } from "@/utils/order-storage";

 interface Node {
@@ -158,7 +159,10 @@ export default function NodePage() {
  const [nodeList, setNodeList] = useState<Node[]>([]);
  const [nodeOrder, setNodeOrder] = useState<number[]>([]);
  const [loading, setLoading] = useState(false);
-  const [searchKeyword, setSearchKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useLocalStorageState(
+    "node-search-keyword",
+    "",
+  );
  const [isSearchVisible, setIsSearchVisible] = useState(false);
  const [dialogVisible, setDialogVisible] = useState(false);
  const [dialogTitle, setDialogTitle] = useState("");
@@ -1071,65 +1075,80 @@ export default function NodePage() {
          />
        </div>

-        <div className="flex gap-2 items-center">
-          <Button
-            color={selectMode ? "secondary" : "default"}
-            size="sm"
-            variant={selectMode ? "solid" : "flat"}
-            onPress={toggleSelectMode}
-          >
-            {selectMode ? "退出" : "批量"}
-          </Button>
-          <Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
-            新增
-          </Button>
+        <div className="flex min-h-9 min-w-0 max-w-full items-center justify-end gap-2 overflow-x-auto whitespace-nowrap [&>*]:shrink-0">
+          {selectMode ? (
+            <>
+              <span className="text-sm text-default-600 shrink-0">
+                已选 {selectedIds.size} 项
+              </span>
+              <Button
+                color="primary"
+                size="sm"
+                variant="flat"
+                onPress={selectAll}
+              >
+                全选
+              </Button>
+              <Button
+                color="secondary"
+                size="sm"
+                variant="flat"
+                onPress={deselectAll}
+              >
+                清空
+              </Button>
+              <Button
+                color="warning"
+                isDisabled={selectedIds.size === 0}
+                isLoading={batchUpgradeLoading}
+                size="sm"
+                variant="flat"
+                onPress={() => openUpgradeModal("batch")}
+              >
+                升级
+              </Button>
+              <Button
+                color="danger"
+                isDisabled={selectedIds.size === 0}
+                size="sm"
+                variant="flat"
+                onPress={() => setBatchDeleteModalOpen(true)}
+              >
+                删除
+              </Button>
+              <Button
+                color="secondary"
+                size="sm"
+                variant="solid"
+                onPress={toggleSelectMode}
+              >
+                退出
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                className="border border-sky-200 bg-sky-100 text-sky-700 hover:bg-sky-200 dark:border-sky-500/40 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
+                color="default"
+                size="sm"
+                variant="flat"
+                onPress={toggleSelectMode}
+              >
+                批量
+              </Button>
+              <Button
+                color="primary"
+                size="sm"
+                variant="flat"
+                onPress={handleAdd}
+              >
+                新增
+              </Button>
+            </>
+          )}
        </div>
      </div>

-      {/* 批量操作浮动工具栏 */}
-      {selectMode && selectedIds.size > 0 && (
-        <div className="fixed bottom-7 left-1/2 z-50 w-[calc(100vw-1rem)] max-w-max -translate-x-1/2 overflow-x-auto rounded-lg border border-divider bg-content1 p-2 shadow-lg">
-          <div className="flex min-w-max items-center gap-2">
-            <span className="text-sm font-medium shrink-0">
-              已选 {selectedIds.size} 项
-            </span>
-            <Button
-              color="primary"
-              size="sm"
-              variant="flat"
-              onPress={selectAll}
-            >
-              全选
-            </Button>
-            <Button
-              color="secondary"
-              size="sm"
-              variant="flat"
-              onPress={deselectAll}
-            >
-              清空
-            </Button>
-            <Button
-              color="warning"
-              isLoading={batchUpgradeLoading}
-              size="sm"
-              variant="flat"
-              onPress={() => openUpgradeModal("batch")}
-            >
-              升级
-            </Button>
-            <Button
-              color="danger"
-              size="sm"
-              variant="flat"
-              onPress={() => setBatchDeleteModalOpen(true)}
-            >
-              删除
-            </Button>
-          </div>
-        </div>
-      )}
-
      {!wsConnected && (
        <Alert
          className="mb-4"
@@ -674,7 +674,11 @@ export default function PanelSharingPage() {
      </Tabs>

      {/* Create Share Modal */}
-      <Modal isOpen={createShareOpen} onClose={() => setCreateShareOpen(false)}>
+      <Modal
+        isOpen={createShareOpen}
+        scrollBehavior="inside"
+        onClose={() => setCreateShareOpen(false)}
+      >
        <ModalContent>
          <ModalHeader>创建分享</ModalHeader>
          <ModalBody>
@@ -777,7 +781,11 @@ export default function PanelSharingPage() {
      </Modal>

      {/* Edit Share Modal */}
-      <Modal isOpen={editShareOpen} onClose={() => setEditShareOpen(false)}>
+      <Modal
+        isOpen={editShareOpen}
+        scrollBehavior="inside"
+        onClose={() => setEditShareOpen(false)}
+      >
        <ModalContent>
          <ModalHeader>编辑分享</ModalHeader>
          <ModalBody>
@@ -1,7 +1,5 @@
 import { useState, useEffect, useMemo } from "react";
 import toast from "react-hot-toast";
-import { AnimatedPage } from "@/components/animated-page";
-import { SearchBar } from "@/components/search-bar";
 import {
  DndContext,
  KeyboardSensor,
@@ -19,6 +17,9 @@ import {
  useSortable,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+
+import { SearchBar } from "@/components/search-bar";
+import { AnimatedPage } from "@/components/animated-page";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Input, Textarea } from "@/shadcn-bridge/heroui/input";
@@ -58,6 +59,7 @@ import {
  getTunnelTypeDisplay,
  validateTunnelForm,
 } from "@/pages/tunnel/form";
+import { useLocalStorageState } from "@/hooks/use-local-storage-state";
 import { loadStoredOrder, saveOrder } from "@/utils/order-storage";
 import { extractApiErrorMessage } from "@/api/error-message";

@@ -112,7 +114,10 @@ export default function TunnelPage() {
  const [tunnels, setTunnels] = useState<Tunnel[]>([]);
  const [tunnelOrder, setTunnelOrder] = useState<number[]>([]);
  const [nodes, setNodes] = useState<Node[]>([]);
-  const [searchKeyword, setSearchKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useLocalStorageState(
+    "tunnel-search-keyword",
+    "",
+  );
  const [isSearchVisible, setIsSearchVisible] = useState(false);

  // 模态框状态
@@ -604,9 +609,11 @@ export default function TunnelPage() {

    if (searchKeyword.trim()) {
      const lowerKeyword = searchKeyword.toLowerCase();
-      filteredTunnels = filteredTunnels.filter(t =>
-        (t.name && t.name.toLowerCase().includes(lowerKeyword)) ||
-        (t.inIp && t.inIp.toLowerCase().includes(lowerKeyword))
+
+      filteredTunnels = filteredTunnels.filter(
+        (t) =>
+          (t.name && t.name.toLowerCase().includes(lowerKeyword)) ||
+          (t.inIp && t.inIp.toLowerCase().includes(lowerKeyword)),
      );
    }

@@ -703,64 +710,80 @@ export default function TunnelPage() {
          />
        </div>

-        <div className="flex items-center gap-2">
-          <Button
-            color={selectMode ? "secondary" : "default"}
-            size="sm"
-            variant={selectMode ? "solid" : "flat"}
-            onPress={toggleSelectMode}
-          >
-            {selectMode ? "退出" : "批量"}
-          </Button>
-          <Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
-            新增
-          </Button>
+        <div className="flex min-h-9 min-w-0 max-w-full items-center justify-end gap-2 overflow-x-auto whitespace-nowrap [&>*]:shrink-0">
+          {selectMode ? (
+            <>
+              <span className="text-sm text-default-600 shrink-0">
+                已选择 {selectedIds.size} 项
+              </span>
+              <Button
+                color="primary"
+                size="sm"
+                variant="flat"
+                onPress={selectAll}
+              >
+                全选
+              </Button>
+              <Button
+                color="secondary"
+                size="sm"
+                variant="flat"
+                onPress={deselectAll}
+              >
+                清空
+              </Button>
+              <Button
+                color="danger"
+                isDisabled={selectedIds.size === 0}
+                size="sm"
+                variant="flat"
+                onPress={() => setBatchDeleteModalOpen(true)}
+              >
+                删除
+              </Button>
+              <Button
+                color="primary"
+                isDisabled={selectedIds.size === 0}
+                isLoading={batchLoading}
+                size="sm"
+                variant="flat"
+                onPress={handleBatchRedeploy}
+              >
+                下发
+              </Button>
+              <Button
+                color="secondary"
+                size="sm"
+                variant="solid"
+                onPress={toggleSelectMode}
+              >
+                退出
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                className="border border-sky-200 bg-sky-100 text-sky-700 hover:bg-sky-200 dark:border-sky-500/40 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
+                color="default"
+                size="sm"
+                variant="flat"
+                onPress={toggleSelectMode}
+              >
+                批量
+              </Button>
+              <Button
+                color="primary"
+                size="sm"
+                variant="flat"
+                onPress={handleAdd}
+              >
+                新增
+              </Button>
+            </>
+          )}
        </div>
      </div>

-      {selectMode && selectedIds.size > 0 && (
-        <div className="fixed bottom-7 left-1/2 z-50 w-[calc(100vw-1rem)] max-w-max -translate-x-1/2 overflow-x-auto rounded-lg border border-divider bg-content1 p-2 shadow-lg">
-          <div className="flex min-w-max items-center gap-2">
-            <span className="text-sm text-default-600 shrink-0">
-              已选择 {selectedIds.size} 项
-            </span>
-            <Button
-              color="primary"
-              size="sm"
-              variant="flat"
-              onPress={selectAll}
-            >
-              全选
-            </Button>
-            <Button
-              color="secondary"
-              size="sm"
-              variant="flat"
-              onPress={deselectAll}
-            >
-              清空
-            </Button>
-            <Button
-              color="danger"
-              size="sm"
-              variant="flat"
-              onPress={() => setBatchDeleteModalOpen(true)}
-            >
-              删除
-            </Button>
-            <Button
-              color="primary"
-              isLoading={batchLoading}
-              size="sm"
-              variant="flat"
-              onPress={handleBatchRedeploy}
-            >
-              下发
-            </Button>
-          </div>
-        </div>
-      )}
-
      {/* 隧道卡片网格 */}
      {tunnels.length > 0 ? (
        <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
@@ -65,6 +65,7 @@ import {
  SettingsIcon,
 } from "@/components/icons";
 import { PageLoadingState } from "@/components/page-state";
+import { useLocalStorageState } from "@/hooks/use-local-storage-state";

 // 工具函数
 const formatFlow = (value: number, unit: string = "bytes"): string => {
@@ -125,7 +126,10 @@ export default function UserPage() {
  // 状态管理
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(false);
-  const [searchKeyword, setSearchKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useLocalStorageState(
+    "user-search-keyword",
+    "",
+  );
  const [isSearchVisible, setIsSearchVisible] = useState(false);
  const [pagination, setPagination] = useState<PaginationType>({
    current: 1,
@@ -207,7 +207,7 @@ export function ModalFooter({
  return (
    <div
      className={cn(
-        "mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "mt-4 flex flex-wrap justify-end gap-2",
        context?.classNames?.footer,
        className,
      )}
@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />

 interface ImportMetaEnv {
  readonly VITE_APP_VERSION?: string;
@@ -2,9 +2,50 @@ import path from "path";

 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { VitePWA } from "vite-plugin-pwa";

 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: "autoUpdate",
+      injectRegister: "auto",
+      includeAssets: ["favicon.ico", "apple-touch-icon.png"],
+      manifest: {
+        name: "FLVX",
+        short_name: "FLVX",
+        description: "FLVX forwarding management panel",
+        theme_color: "#2563eb",
+        background_color: "#f6f7fb",
+        display: "standalone",
+        start_url: "/",
+        scope: "/",
+        icons: [
+          {
+            src: "pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "pwa-maskable-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable",
+          },
+        ],
+      },
+      workbox: {
+        navigateFallback: "/index.html",
+        cleanupOutdatedCaches: true,
+        maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+      },
+    }),
+  ],
  base: "/",
  resolve: {
    alias: {
Author	SHA1	Message	Date
sagit	d752e096a3	fix(frontend): move batch operations into top toolbar (#198 ) ## Summary - switch batch mode interactions to the top-right action bar on forward, tunnel, and node pages - remove bottom floating batch toolbars and restore normal action toolbar when exiting batch mode - stabilize toolbar layout and improve batch button visibility to avoid visual jitter on toggle	2026-02-23 21:30:57 +08:00
sagitchu	880a3b81b0	fix(frontend): move batch actions into top toolbar Switching batch controls to the top-right action bar with stable single-row layout improves clarity and prevents visual jumps while entering batch mode.	2026-02-23 21:28:50 +08:00
sagit	191aface2e	fix(frontend): extend h5 tabbar safe-area coverage (#197 ) Ensure the PWA bottom tab bar and tab hit areas fully cover the safe-area inset while keeping related frontend formatting updates consistent.	2026-02-23 07:45:14 +00:00
sagit	e121dadb90	fix(backend): allow WHMCS API login when captcha is enabled (#196 ) ## Summary - bypass captcha verification for machine API clients tagged as WHMCS while keeping captcha enforcement for normal login flows - add a backend contract test that verifies WHMCS-tagged login succeeds when captcha is enabled - keep WHMCS module repository changes out of this PR so only backend behavior is merged to main	2026-02-23 14:42:24 +08:00
sagitchu	bafcfbde3a	fix(backend): allow WHMCS API login when captcha is enabled	2026-02-23 14:40:29 +08:00
sagit	98c463c62b	feat(frontend): add installable PWA support and refresh app icons (#195 )	2026-02-23 06:26:29 +00:00
sagit	daf34d0f6c	fix(backend): prevent login block when captcha enabled without cloudflare key (#194 ) When captcha_enabled=true but cloudflare_secret_key is not configured, the login flow would block users with "未配置Cloudflare Site Key" error. Now captcha is treated as disabled if the secret key is missing, allowing users to log in normally on fresh PostgreSQL installations. Fixes login issue on new panel setups with PostgreSQL.	2026-02-22 22:54:51 +08:00
sagit	bb505d461d	fix(frontend): enable modal scroll on panel sharing page (#193 ) Add scrollBehavior="inside" to Create Share and Edit Share modals to allow content scrolling on mobile devices when form fields exceed viewport height.	2026-02-22 21:53:29 +08:00
sagit	00be0ac31e	fix(frontend): enable content scroll on mobile (#192 ) Main content area had overflow-hidden on mobile which prevented scrolling when content exceeded viewport height. Changed to overflow-y-auto for consistent scroll behavior across all devices.	2026-02-22 21:12:45 +08:00
sagit	fc5624a190	fix(frontend): modal footer buttons visible on mobile (#190 ) ModalFooter used flex-col-reverse which caused buttons to display in reverse order on mobile and potentially pushed cancel button out of view. Changed to flex-wrap justify-end for consistent cross-platform button display.	2026-02-22 20:05:02 +08:00
sagit	42ae3457b5	feat(frontend): persist filter state across page reloads (#189 ) * feat(frontend): persist filter state across page reloads Add useLocalStorageState hook to persist filter/search state in forward, node, tunnel, user, and limit pages. Reset filter clears the persisted value from localStorage. * feat(ui): add collapsible sidebar and smooth animations	2026-02-22 19:01:03 +08:00