feat(frontend): add installable PWA support and refresh app icons (#195 )

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-09-28 07:36:38 +08:00 · 2026-02-23 06:26:29 +00:00 · 2026-02-22 22:54:51 +08:00 · 2026-02-22 21:53:29 +08:00 · 2026-02-22 21:12:45 +08:00 · 2026-02-22 20:05:02 +08:00
21 changed files with 323 additions and 165 deletions
@@ -988,10 +988,21 @@ func (h *Handler) captchaEnabled() (bool, error) {
 	if err != nil {
 		return false, err
 	}
-	if cfg == nil {
+	if cfg == nil || !strings.EqualFold(cfg.Value, "true") {
 		return false, nil
 	}
-	return strings.EqualFold(cfg.Value, "true"), nil
+
+	// captcha_enabled=true, but we need to verify cloudflare_secret_key is configured
+	// If secret key is not configured, treat captcha as disabled to avoid blocking login
+	secretKey, err := h.repo.GetConfigByName("cloudflare_secret_key")
+	if err != nil {
+		return false, err
+	}
+	if secretKey == nil || strings.TrimSpace(secretKey.Value) == "" {
+		return false, nil
+	}
+
+	return true, nil
 }

 func (h *Handler) markCaptchaToken(token string) {
@@ -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,7 @@ 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 +205,13 @@ 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 +312,32 @@ 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;
@@ -337,14 +345,14 @@ export default function AdminLayout({
              return (
                <li key={item.path}>
                  <motion.button
+                    title={isCollapsed ? item.label : undefined}
                    className={`
-                       w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left
-                       relative min-h-[44px]
-                       ${
-                         isActive
-                           ? "text-primary-600 dark:text-primary-300"
-                           : "text-gray-700 dark:text-gray-200"
-                       }
+                       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"
+                      }
                     `}
                    transition={{ duration: 0.15 }}
                    onClick={() => handleMenuClick(item.path)}
@@ -367,12 +375,14 @@ 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 +390,9 @@ 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 +405,29 @@ export default function AdminLayout({
              </a>
            </p>
          </div>
+
+          {/* 桌面端折叠按钮 */}
+          {!isMobile && (
+            <Button
+              isIconOnly
+              variant="light"
+              size="sm"
+              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"
+              onPress={toggleCollapse}
+            >
+              {isCollapsed ? (
+                // 向右扩展的提示
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                </svg>
+              ) : (
+                // 向左收起的提示
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                </svg>
+              )}
+            </Button>
+          )}
        </div>
      </aside>

@@ -500,7 +533,7 @@ export default function AdminLayout({

        {/* 主内容 */}
        <main
-          className={`flex-1 bg-gray-100 dark:bg-black overflow-hidden ${isMobile ? "" : "overflow-y-scroll"}`}
+          className="flex-1 bg-gray-100 dark:bg-black overflow-y-auto"
        >
          <AnimatePresence mode="wait">
            <motion.div
@@ -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[]>([]);
@@ -224,7 +230,7 @@ export default function ForwardPage() {
    setViewMode(newMode);
    try {
      localStorage.setItem("forward-view-mode", newMode);
-    } catch {}
+    } catch { }
  };

  // 加载所有数据
@@ -1190,10 +1196,10 @@ export default function ForwardPage() {
    const style: React.CSSProperties = {
      transform: transform
        ? CSS.Transform.toString({
-            ...transform,
-            x: Math.round(transform.x),
-            y: Math.round(transform.y),
-          })
+          ...transform,
+          x: Math.round(transform.x),
+          y: Math.round(transform.y),
+        })
        : undefined,
      transition: isDragging ? undefined : transition || undefined,
      opacity: isDragging ? 0.5 : 1,
@@ -1251,10 +1257,10 @@ export default function ForwardPage() {
    const style = {
      transform: transform
        ? CSS.Transform.toString({
-            ...transform,
-            x: Math.round(transform.x),
-            y: Math.round(transform.y),
-          })
+          ...transform,
+          x: Math.round(transform.x),
+          y: Math.round(transform.y),
+        })
        : undefined,
      transition: isDragging ? undefined : transition || undefined,
      opacity: isDragging ? 0.5 : 1,
@@ -1311,11 +1317,10 @@ export default function ForwardPage() {
        </TableCell>
        <TableCell className="max-w-[220px]">
          <button
-            className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${
-              hasMultipleAddresses(forward.inIp)
-                ? "hover:bg-default-200 hover:shadow-sm"
-                : ""
-            }`}
+            className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${hasMultipleAddresses(forward.inIp)
+              ? "hover:bg-default-200 hover:shadow-sm"
+              : ""
+              }`}
            title={formatInAddress(forward.inIp, forward.inPort)}
            type="button"
            onClick={() =>
@@ -1327,11 +1332,10 @@ export default function ForwardPage() {
        </TableCell>
        <TableCell className="max-w-[240px]">
          <button
-            className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${
-              hasMultipleAddresses(forward.remoteAddr)
-                ? "hover:bg-default-200 hover:shadow-sm"
-                : ""
-            }`}
+            className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${hasMultipleAddresses(forward.remoteAddr)
+              ? "hover:bg-default-200 hover:shadow-sm"
+              : ""
+              }`}
            title={formatRemoteAddress(forward.remoteAddr)}
            type="button"
            onClick={() =>
@@ -1468,11 +1472,10 @@ export default function ForwardPage() {
            <div className="flex items-center gap-1.5 ml-2">
              {viewMode === "direct" && (
                <div
-                  className={`cursor-grab active:cursor-grabbing p-2 text-default-400 hover:text-default-600 transition-colors touch-manipulation ${
-                    isMobile
-                      ? "opacity-100" // 移动端始终显示
-                      : "opacity-0 group-hover:opacity-100 sm:opacity-0 sm:group-hover:opacity-100"
-                  }`}
+                  className={`cursor-grab active:cursor-grabbing p-2 text-default-400 hover:text-default-600 transition-colors touch-manipulation ${isMobile
+                    ? "opacity-100" // 移动端始终显示
+                    : "opacity-0 group-hover:opacity-100 sm:opacity-0 sm:group-hover:opacity-100"
+                    }`}
                  {...listeners}
                  style={{ touchAction: "none" }}
                  title={isMobile ? "长按拖拽排序" : "拖拽排序"}
@@ -1510,11 +1513,10 @@ export default function ForwardPage() {
            {/* 地址信息 */}
            <div className="space-y-1">
              <button
-                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
-                  hasMultipleAddresses(forward.inIp)
-                    ? "hover:bg-default-100 dark:hover:bg-default-200/50"
-                    : ""
-                }`}
+                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${hasMultipleAddresses(forward.inIp)
+                  ? "hover:bg-default-100 dark:hover:bg-default-200/50"
+                  : ""
+                  }`}
                title={formatInAddress(forward.inIp, forward.inPort)}
                type="button"
                onClick={() =>
@@ -1550,11 +1552,10 @@ export default function ForwardPage() {
              </button>

              <button
-                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
-                  hasMultipleAddresses(forward.remoteAddr)
-                    ? "hover:bg-default-100 dark:hover:bg-default-200/50"
-                    : ""
-                }`}
+                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${hasMultipleAddresses(forward.remoteAddr)
+                  ? "hover:bg-default-100 dark:hover:bg-default-200/50"
+                  : ""
+                  }`}
                title={formatRemoteAddress(forward.remoteAddr)}
                type="button"
                onClick={() =>
@@ -1591,9 +1592,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 +1603,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 +1612,7 @@ export default function ForwardPage() {
                </Chip>
              </div>
              <Chip
-                className="text-xs"
+                className="text-xs whitespace-nowrap"
                color="success"
                size="sm"
                variant="flat"
@@ -1972,39 +1973,39 @@ export default function ForwardPage() {
          </Card>
        )
      ) : /* 直接显示模式 */
-      forwards.length > 0 ? (
-        <DndContext
-          collisionDetection={closestCenter}
-          sensors={sensors}
-          onDragEnd={handleDragEnd}
-          onDragStart={() => {}} // 添加空的 onDragStart 处理器
-        >
-          <SortableContext
-            items={sortableForwardIds}
-            strategy={rectSortingStrategy}
+        forwards.length > 0 ? (
+          <DndContext
+            collisionDetection={closestCenter}
+            sensors={sensors}
+            onDragEnd={handleDragEnd}
+            onDragStart={() => { }} // 添加空的 onDragStart 处理器
          >
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-              {sortedForwards.map((forward) =>
-                forward && forward.id ? (
-                  <SortableForwardCard key={forward.id} forward={forward} />
-                ) : null,
-              )}
-            </div>
-          </SortableContext>
-        </DndContext>
-      ) : (
-        /* 空状态 */
-        <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
-          <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
-            <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
-              暂无转发配置
-            </h3>
-            <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
-              还没有创建任何转发配置，点击上方按钮开始创建
-            </p>
-          </CardBody>
-        </Card>
-      )}
+            <SortableContext
+              items={sortableForwardIds}
+              strategy={rectSortingStrategy}
+            >
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+                {sortedForwards.map((forward) =>
+                  forward && forward.id ? (
+                    <SortableForwardCard key={forward.id} forward={forward} />
+                  ) : null,
+                )}
+              </div>
+            </SortableContext>
+          </DndContext>
+        ) : (
+          /* 空状态 */
+          <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+            <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+              <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+                暂无转发配置
+              </h3>
+              <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+                还没有创建任何转发配置，点击上方按钮开始创建
+              </p>
+            </CardBody>
+          </Card>
+        )}

      {/* 新增/编辑模态框 */}
      <Modal
@@ -2473,11 +2474,10 @@ export default function ForwardPage() {
                    {importResults.map((result, index) => (
                      <div
                        key={index}
-                        className={`p-2 rounded border ${
-                          result.success
-                            ? "bg-success-50 dark:bg-success-100/10 border-success-200 dark:border-success-300/20"
-                            : "bg-danger-50 dark:bg-danger-100/10 border-danger-200 dark:border-danger-300/20"
-                        }`}
+                        className={`p-2 rounded border ${result.success
+                          ? "bg-success-50 dark:bg-success-100/10 border-success-200 dark:border-success-300/20"
+                          : "bg-danger-50 dark:bg-danger-100/10 border-danger-200 dark:border-danger-300/20"
+                          }`}
                      >
                        <div className="flex items-center gap-2">
                          {result.success ? (
@@ -2510,11 +2510,10 @@ export default function ForwardPage() {
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2 mb-0.5">
                              <span
-                                className={`text-xs font-medium ${
-                                  result.success
-                                    ? "text-success-700 dark:text-success-300"
-                                    : "text-danger-700 dark:text-danger-300"
-                                }`}
+                                className={`text-xs font-medium ${result.success
+                                  ? "text-success-700 dark:text-success-300"
+                                  : "text-danger-700 dark:text-danger-300"
+                                  }`}
                              >
                                {result.success ? "成功" : "失败"}
                              </span>
@@ -2526,11 +2525,10 @@ export default function ForwardPage() {
                              </code>
                            </div>
                            <div
-                              className={`text-xs ${
-                                result.success
-                                  ? "text-success-600 dark:text-success-400"
-                                  : "text-danger-600 dark:text-danger-400"
-                              }`}
+                              className={`text-xs ${result.success
+                                ? "text-success-600 dark:text-success-400"
+                                : "text-danger-600 dark:text-danger-400"
+                                }`}
                            >
                              {result.message}
                            </div>
@@ -2713,20 +2711,18 @@ export default function ForwardPage() {
                                    return (
                                      <tr
                                        key={index}
-                                        className={`hover:bg-default-50 dark:hover:bg-gray-700/50 ${
-                                          result.success
-                                            ? "bg-white dark:bg-gray-800"
-                                            : "bg-danger-50 dark:bg-danger-900/30"
-                                        }`}
+                                        className={`hover:bg-default-50 dark:hover:bg-gray-700/50 ${result.success
+                                          ? "bg-white dark:bg-gray-800"
+                                          : "bg-danger-50 dark:bg-danger-900/30"
+                                          }`}
                                      >
                                        <td className="px-3 py-2">
                                          <div className="flex items-center gap-2">
                                            <span
-                                              className={`w-5 h-5 rounded-full flex items-center justify-center text-xs ${
-                                                result.success
-                                                  ? "bg-success text-white"
-                                                  : "bg-danger text-white"
-                                              }`}
+                                              className={`w-5 h-5 rounded-full flex items-center justify-center text-xs ${result.success
+                                                ? "bg-success text-white"
+                                                : "bg-danger text-white"
+                                                }`}
                                            >
                                              {result.success ? "✓" : "✗"}
                                            </span>
@@ -2768,11 +2764,10 @@ export default function ForwardPage() {
                                        <td className="px-3 py-2 text-center">
                                          {result.success ? (
                                            <span
-                                              className={`font-semibold ${
-                                                (result.packetLoss || 0) > 0
-                                                  ? "text-warning"
-                                                  : "text-success"
-                                              }`}
+                                              className={`font-semibold ${(result.packetLoss || 0) > 0
+                                                ? "text-warning"
+                                                : "text-success"
+                                                }`}
                                            >
                                              {result.packetLoss?.toFixed(1)}%
                                            </span>
@@ -2886,19 +2881,17 @@ export default function ForwardPage() {
                                return (
                                  <div
                                    key={index}
-                                    className={`border rounded-lg p-3 ${
-                                      result.success
-                                        ? "border-divider bg-white dark:bg-gray-800"
-                                        : "border-danger-200 dark:border-danger-300/30 bg-danger-50 dark:bg-danger-900/30"
-                                    }`}
+                                    className={`border rounded-lg p-3 ${result.success
+                                      ? "border-divider bg-white dark:bg-gray-800"
+                                      : "border-danger-200 dark:border-danger-300/30 bg-danger-50 dark:bg-danger-900/30"
+                                      }`}
                                  >
                                    <div className="flex items-start gap-2 mb-2">
                                      <span
-                                        className={`w-6 h-6 rounded-full flex items-center justify-center text-xs flex-shrink-0 ${
-                                          result.success
-                                            ? "bg-success text-white"
-                                            : "bg-danger text-white"
-                                        }`}
+                                        className={`w-6 h-6 rounded-full flex items-center justify-center text-xs flex-shrink-0 ${result.success
+                                          ? "bg-success text-white"
+                                          : "bg-danger text-white"
+                                          }`}
                                      >
                                        {result.success ? "✓" : "✗"}
                                      </span>
@@ -2934,11 +2927,10 @@ export default function ForwardPage() {
                                        </div>
                                        <div className="text-center">
                                          <div
-                                            className={`text-lg font-bold ${
-                                              (result.packetLoss || 0) > 0
-                                                ? "text-warning"
-                                                : "text-success"
-                                            }`}
+                                            className={`text-lg font-bold ${(result.packetLoss || 0) > 0
+                                              ? "text-warning"
+                                              : "text-success"
+                                              }`}
                                          >
                                            {result.packetLoss?.toFixed(1)}%
                                          </div>
@@ -3218,8 +3210,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("");
@@ -674,7 +674,7 @@ export default function PanelSharingPage() {
      </Tabs>

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

      {/* Edit Share Modal */}
-      <Modal isOpen={editShareOpen} onClose={() => setEditShareOpen(false)}>
+      <Modal isOpen={editShareOpen} onClose={() => setEditShareOpen(false)} scrollBehavior="inside">
        <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)),
      );
    }

@@ -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	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