fix(frontend): restore Android swipe for mobile batch toolbar (#202 )

## Summary - fix mobile batch action toolbar in forward/node/tunnel pages to keep horizontal overflow reachable on Android - switch toolbar alignment to start on mobile and keep right alignment on `sm+` to avoid `justify-end` overflow reachability issues - add `touch-pan-x` to improve horizontal swipe handling on mobile browsers while preserving existing desktop layout ## Verification - `npm run build` *(fails due to pre-existing issue: `src/main.tsx` cannot find module `virtual:pwa-register`)* - `npm run lint` *(fails due to pre-existing a11y errors in unrelated files and in existing forward labels)*
fix(frontend): restore Android swipe for mobile batch toolbar
2026-09-28 07:36:38 +08:00 · 2026-02-23 22:26:11 +08:00 · 2026-02-23 22:24:28 +08:00 · 2026-02-23 22:03:29 +08:00 · 2026-02-23 21:30:57 +08:00 · 2026-02-23 21:28:50 +08:00
33 changed files with 1274 additions and 831 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"
  }
 }
@@ -6,21 +6,21 @@ import React from "react";
 * Use this as the outermost wrapper inside each page component.
 */
 export const AnimatedPage = ({
-    children,
-    className,
+  children,
+  className,
 }: {
-    children: React.ReactNode;
-    className?: string;
+  children: React.ReactNode;
+  className?: string;
 }) => (
-    <motion.div
-        animate={{ opacity: 1, y: 0 }}
-        className={className}
-        exit={{ opacity: 0, y: -8 }}
-        initial={{ opacity: 0, y: 16 }}
-        transition={{ duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] }}
-    >
-        {children}
-    </motion.div>
+  <motion.div
+    animate={{ opacity: 1, y: 0 }}
+    className={className}
+    exit={{ opacity: 0, y: -8 }}
+    initial={{ opacity: 0, y: 16 }}
+    transition={{ duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] }}
+  >
+    {children}
+  </motion.div>
 );

 /**
@@ -28,26 +28,26 @@ export const AnimatedPage = ({
 * Children should use `staggerItem` as their `variants` prop.
 */
 export const staggerContainer = {
-    hidden: { opacity: 0 },
-    show: {
-        opacity: 1,
-        transition: {
-            staggerChildren: 0.05,
-            delayChildren: 0.05,
-        },
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+      delayChildren: 0.05,
    },
+  },
 };

 /**
 * Individual stagger item variant — fade-in + slide-up.
 */
 export const staggerItem = {
-    hidden: { opacity: 0, y: 12 },
-    show: {
-        opacity: 1,
-        y: 0,
-        transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
-    },
+  hidden: { opacity: 0, y: 12 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 };

 /**
@@ -55,67 +55,68 @@ export const staggerItem = {
 * Renders a `motion.div` (or `motion.ul/motion.tbody`) with stagger behaviour.
 */
 export const StaggerList = ({
-    children,
-    className,
-    as = "div",
+  children,
+  className,
+  as = "div",
 }: {
-    children: React.ReactNode;
-    className?: string;
-    as?: "div" | "ul" | "tbody";
+  children: React.ReactNode;
+  className?: string;
+  as?: "div" | "ul" | "tbody";
 }) => {
-    const Component = motion[as] as React.ElementType;
+  const Component = motion[as] as React.ElementType;

-    return (
-        <Component
-            animate="show"
-            className={className}
-            initial="hidden"
-            variants={staggerContainer}
-        >
-            {children}
-        </Component>
-    );
+  return (
+    <Component
+      animate="show"
+      className={className}
+      initial="hidden"
+      variants={staggerContainer}
+    >
+      {children}
+    </Component>
+  );
 };

 /**
 * Individual animated item for use inside StaggerList.
 */
 export const StaggerItem = ({
-    children,
-    className,
-    as = "div",
+  children,
+  className,
+  as = "div",
 }: {
-    children: React.ReactNode;
-    className?: string;
-    as?: "div" | "li" | "tr";
+  children: React.ReactNode;
+  className?: string;
+  as?: "div" | "li" | "tr";
 }) => {
-    const Component = motion[as] as React.ElementType;
+  const Component = motion[as] as React.ElementType;

-    return (
-        <Component className={className} variants={staggerItem}>
-            {children}
-        </Component>
-    );
+  return (
+    <Component className={className} variants={staggerItem}>
+      {children}
+    </Component>
+  );
 };

 /**
 * Simple fade-in animation for standalone elements (chips, badges, counters, etc.)
+ * Uses opacity + translateY to avoid font blurriness caused by scale transforms.
 */
 export const FadeIn = ({
-    children,
-    delay = 0,
-    className,
+  children,
+  delay = 0,
+  className,
 }: {
-    children: React.ReactNode;
-    delay?: number;
-    className?: string;
+  children: React.ReactNode;
+  delay?: number;
+  className?: string;
 }) => (
-    <motion.div
-        animate={{ opacity: 1, scale: 1 }}
-        className={className}
-        initial={{ opacity: 0, scale: 0.95 }}
-        transition={{ duration: 0.2, delay, ease: "easeOut" }}
-    >
-        {children}
-    </motion.div>
+  <motion.div
+    animate={{ opacity: 1, y: 0 }}
+    className={className}
+    initial={{ opacity: 0, y: 8 }}
+    transition={{ duration: 0.2, delay, ease: "easeOut" }}
+  >
+    {children}
+  </motion.div>
 );
@@ -5,97 +5,97 @@ import { Input } from "@/shadcn-bridge/heroui/input";
 import { SearchIcon } from "@/components/icons";

 interface SearchBarProps {
-    isVisible: boolean;
-    value: string;
-    placeholder?: string;
-    onOpen: () => void;
-    onClose: () => void;
-    onChange: (value: string) => void;
+  isVisible: boolean;
+  value: string;
+  placeholder?: string;
+  onOpen: () => void;
+  onClose: () => void;
+  onChange: (value: string) => void;
 }

 export function SearchBar({
-    isVisible,
-    value,
-    placeholder = "搜索",
-    onOpen,
-    onClose,
-    onChange,
+  isVisible,
+  value,
+  placeholder = "搜索",
+  onOpen,
+  onClose,
+  onChange,
 }: SearchBarProps) {
-    return (
-        // Fixed h-8 so the container never changes height — eliminates the vertical jitter
-        <div className="flex items-center gap-2 h-8 overflow-hidden">
-            <AnimatePresence mode="wait" initial={false}>
-                {!isVisible ? (
-                    <motion.div
-                        key="search-btn"
-                        animate={{ opacity: 1, scale: 1 }}
-                        exit={{ opacity: 0, scale: 0.8 }}
-                        initial={{ opacity: 0, scale: 0.8 }}
-                        transition={{ duration: 0.12 }}
-                    >
-                        <Button
-                            isIconOnly
-                            aria-label="搜索"
-                            className="text-default-600"
-                            color="default"
-                            size="sm"
-                            variant="flat"
-                            onPress={onOpen}
-                        >
-                            <SearchIcon className="w-4 h-4" />
-                        </Button>
-                    </motion.div>
-                ) : (
-                    <motion.div
-                        key="search-input"
-                        animate={{ opacity: 1, x: 0 }}
-                        className="flex w-full items-center gap-2"
-                        exit={{ opacity: 0, x: -8 }}
-                        initial={{ opacity: 0, x: -16 }}
-                        transition={{ duration: 0.18, ease: [0.25, 0.46, 0.45, 0.94] }}
-                    >
-                        <Input
-                            autoFocus
-                            classNames={{
-                                base: "bg-default-100",
-                                input: "bg-transparent text-sm focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none",
-                                inputWrapper:
-                                    "bg-default-100 border-0 shadow-none h-8 min-h-8",
-                            }}
-                            placeholder={placeholder}
-                            value={value}
-                            onChange={(e) => onChange(e.target.value)}
-                        />
-                        <Button
-                            isIconOnly
-                            aria-label="关闭搜索"
-                            className="text-default-600 shrink-0"
-                            color="default"
-                            size="sm"
-                            variant="light"
-                            onPress={() => {
-                                onClose();
-                                onChange("");
-                            }}
-                        >
-                            <svg
-                                aria-hidden="true"
-                                className="w-4 h-4"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    d="M6 18L18 6M6 6l12 12"
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                />
-                            </svg>
-                        </Button>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-        </div>
-    );
+  return (
+    // Fixed h-8 so the container never changes height — eliminates the vertical jitter
+    <div className="flex items-center gap-2 h-8 overflow-hidden">
+      <AnimatePresence initial={false} mode="wait">
+        {!isVisible ? (
+          <motion.div
+            key="search-btn"
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0 }}
+            initial={{ opacity: 0 }}
+            transition={{ duration: 0.12 }}
+          >
+            <Button
+              isIconOnly
+              aria-label="搜索"
+              className="text-default-600"
+              color="default"
+              size="sm"
+              variant="flat"
+              onPress={onOpen}
+            >
+              <SearchIcon className="w-4 h-4" />
+            </Button>
+          </motion.div>
+        ) : (
+          <motion.div
+            key="search-input"
+            animate={{ opacity: 1, x: 0 }}
+            className="flex w-full items-center gap-2"
+            exit={{ opacity: 0, x: -8 }}
+            initial={{ opacity: 0, x: -16 }}
+            transition={{ duration: 0.18, ease: [0.25, 0.46, 0.45, 0.94] }}
+          >
+            <Input
+              autoFocus
+              classNames={{
+                base: "bg-default-100",
+                input:
+                  "bg-transparent text-sm focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none",
+                inputWrapper: "bg-default-100 border-0 shadow-none h-8 min-h-8",
+              }}
+              placeholder={placeholder}
+              value={value}
+              onChange={(e) => onChange(e.target.value)}
+            />
+            <Button
+              isIconOnly
+              aria-label="关闭搜索"
+              className="text-default-600 shrink-0"
+              color="default"
+              size="sm"
+              variant="light"
+              onPress={() => {
+                onClose();
+                onChange("");
+              }}
+            >
+              <svg
+                aria-hidden="true"
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M6 18L18 6M6 6l12 12"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                />
+              </svg>
+            </Button>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
 }
@@ -92,7 +92,7 @@ function SelectContent({
        className={cn(
          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default-200 bg-white text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2 dark:bg-default-50",
          position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
          className,
        )}
        data-slot="select-content"
@@ -104,7 +104,7 @@ function SelectContent({
          className={cn(
            "p-1",
            position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
          )}
        >
          {children}
@@ -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,22 +353,27 @@ 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]
-                       ${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"
+                       }
                     `}
+                    title={isCollapsed ? item.label : undefined}
                    transition={{ duration: 0.15 }}
-                    whileTap={{ scale: 0.97 }}
                    onClick={() => handleMenuClick(item.path)}
                  >
                    {isActive && (
                      <motion.div
                        className="absolute inset-0 rounded-lg bg-primary-100 dark:bg-primary-600/20"
                        layoutId="sidebar-active"
-                        transition={{ type: "spring", stiffness: 380, damping: 30 }}
+                        transition={{
+                          type: "spring",
+                          stiffness: 380,
+                          damping: 30,
+                        }}
                      />
                    )}
                    {!isActive && (
@@ -363,8 +383,16 @@ export default function AdminLayout({
                        whileHover={{ opacity: 1 }}
                      />
                    )}
-                    <div className="flex-shrink-0 relative z-10">{item.icon}</div>
-                    <span className="font-medium text-sm relative z-10">{item.label}</span>
+                    <div className="flex-shrink-0 w-10 h-10 flex items-center justify-center relative z-10">
+                      {item.icon}
+                    </div>
+                    <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>
              );
@@ -372,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
@@ -387,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>

@@ -491,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>
@@ -1,5 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
+import toast from "react-hot-toast";
+
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Input } from "@/shadcn-bridge/heroui/input";
@@ -16,8 +18,6 @@ import {
  ModalFooter,
  ModalHeader,
 } from "@/shadcn-bridge/heroui/modal";
-import toast from "react-hot-toast";
-
 import {
  updateConfigs,
  exportBackup,
@@ -149,7 +149,7 @@ const getInitialConfigs = (): Record<string, string> => {
        initialConfigs[key] = cachedValue;
      }
    });
-  } catch { }
+  } catch {}

  return initialConfigs;
 };
@@ -528,10 +528,11 @@ export default function ConfigPage() {
              <button
                key={option.value}
                aria-pressed={isSelected}
-                className={`w-full px-4 py-3 rounded-lg border transition-all duration-200 cursor-pointer text-left ${isSelected
-                  ? "bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-500/50 shadow-sm"
-                  : "bg-white dark:bg-default-50 border-default-200 dark:border-default-100/30 hover:border-primary-200 dark:hover:border-primary-500/30 hover:shadow-sm"
-                  }`}
+                className={`w-full px-4 py-3 rounded-lg border transition-all duration-200 cursor-pointer text-left ${
+                  isSelected
+                    ? "bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-500/50 shadow-sm"
+                    : "bg-white dark:bg-default-50 border-default-200 dark:border-default-100/30 hover:border-primary-200 dark:hover:border-primary-500/30 hover:shadow-sm"
+                }`}
                type="button"
                onClick={() => toggleTypeSelection(option.value, setTypes)}
              >
@@ -545,10 +546,11 @@ export default function ConfigPage() {
                    size="md"
                  />
                  <span
-                    className={`font-medium ${isSelected
-                      ? "text-default-900 dark:text-default-100"
-                      : "text-default-700 dark:text-default-500"
-                      }`}
+                    className={`font-medium ${
+                      isSelected
+                        ? "text-default-900 dark:text-default-100"
+                        : "text-default-700 dark:text-default-500"
+                    }`}
                  >
                    {option.label}
                  </span>
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { AnimatedPage } from "@/components/animated-page";

+import { AnimatedPage } from "@/components/animated-page";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import {
@@ -1,4 +1,5 @@
 import type { AnnouncementData } from "@/api";
+
 import ReactMarkdown from "react-markdown";
 import rehypeSanitize from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
@@ -40,10 +41,10 @@ export const AnnouncementBanner = ({
            </h3>
            <div className="text-sm text-blue-800/90 dark:text-blue-100/90 break-words leading-relaxed">
              <ReactMarkdown
-                rehypePlugins={[rehypeSanitize]}
-                remarkPlugins={[remarkGfm]}
                components={{
-                  p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
+                  p: ({ children }) => (
+                    <p className="mb-2 last:mb-0">{children}</p>
+                  ),
                  a: ({ children, href }) => (
                    <a
                      className="underline decoration-blue-500/70 underline-offset-2 hover:text-blue-700 dark:hover:text-blue-100"
@@ -55,10 +56,14 @@ export const AnnouncementBanner = ({
                    </a>
                  ),
                  ul: ({ children }) => (
-                    <ul className="list-disc pl-5 space-y-1 mb-2 last:mb-0">{children}</ul>
+                    <ul className="list-disc pl-5 space-y-1 mb-2 last:mb-0">
+                      {children}
+                    </ul>
                  ),
                  ol: ({ children }) => (
-                    <ol className="list-decimal pl-5 space-y-1 mb-2 last:mb-0">{children}</ol>
+                    <ol className="list-decimal pl-5 space-y-1 mb-2 last:mb-0">
+                      {children}
+                    </ol>
                  ),
                  code: ({ children }) => (
                    <code className="rounded bg-blue-100/80 dark:bg-blue-900/40 px-1 py-0.5 text-[0.92em]">
@@ -76,6 +81,8 @@ export const AnnouncementBanner = ({
                    </blockquote>
                  ),
                }}
+                rehypePlugins={[rehypeSanitize]}
+                remarkPlugins={[remarkGfm]}
              >
                {announcement.content}
              </ReactMarkdown>
@@ -154,9 +154,9 @@ export default function IndexPage() {
    <DefaultLayout>
      <section className="flex flex-col items-center justify-center gap-4 py-4 sm:py-8 md:py-10 pb-20 min-h-[calc(100dvh-120px)] sm:min-h-[calc(100dvh-200px)]">
        <motion.div
-          animate={{ opacity: 1, y: 0, scale: 1 }}
+          animate={{ opacity: 1, y: 0 }}
          className="w-full max-w-md px-4 sm:px-0"
-          initial={{ opacity: 0, y: 24, scale: 0.97 }}
+          initial={{ opacity: 0, y: 24 }}
          transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
        >
          <Card className="w-full">
@@ -259,9 +259,9 @@ export default function IndexPage() {
                    theme: (document.documentElement.classList.contains(
                      "dark",
                    ) ||
-                      document.documentElement.getAttribute("data-theme") ===
+                    document.documentElement.getAttribute("data-theme") ===
                      "dark" ||
-                      window.matchMedia("(prefers-color-scheme: dark)").matches
+                    window.matchMedia("(prefers-color-scheme: dark)").matches
                      ? "dark"
                      : "light") as "light" | "dark" | "auto",
                  }}
@@ -1,8 +1,12 @@
 import { useState, useEffect, useMemo } from "react";
 import toast from "react-hot-toast";
-import { AnimatedPage, StaggerList, StaggerItem } from "@/components/animated-page";
-import { SearchBar } from "@/components/search-bar";

+import {
+  AnimatedPage,
+  StaggerList,
+  StaggerItem,
+} from "@/components/animated-page";
+import { SearchBar } from "@/components/search-bar";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Input } from "@/shadcn-bridge/heroui/input";
@@ -23,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;
@@ -53,16 +58,20 @@ 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(() => {
    if (!searchKeyword.trim()) return rules;
    const lowerKeyword = searchKeyword.toLowerCase();

-    return rules.filter(r =>
-      (r.name && r.name.toLowerCase().includes(lowerKeyword)) ||
-      (r.tunnelName && r.tunnelName.toLowerCase().includes(lowerKeyword))
+    return rules.filter(
+      (r) =>
+        (r.name && r.name.toLowerCase().includes(lowerKeyword)) ||
+        (r.tunnelName && r.tunnelName.toLowerCase().includes(lowerKeyword)),
    );
  }, [rules, searchKeyword]);

@@ -1,7 +1,5 @@
 import { useState, useEffect, useMemo, useCallback } from "react";
 import toast from "react-hot-toast";
-import { AnimatedPage } from "@/components/animated-page";
-import { SearchBar } from "@/components/search-bar";
 import {
  DndContext,
  KeyboardSensor,
@@ -20,6 +18,8 @@ import {
 } 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 } from "@/shadcn-bridge/heroui/input";
@@ -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 {
@@ -129,11 +130,17 @@ const SortableItem = ({
    isDragging,
  } = useSortable({ id });

-  const style = {
-    transform: transform ? CSS.Transform.toString(transform) : undefined,
+  const style: React.CSSProperties = {
+    transform: transform
+      ? CSS.Transform.toString({
+          ...transform,
+          x: Math.round(transform.x),
+          y: Math.round(transform.y),
+        })
+      : undefined,
    transition: isDragging ? undefined : transition || undefined,
    opacity: isDragging ? 0.5 : 1,
-    willChange: "transform",
+    willChange: isDragging ? "transform" : undefined,
  };

  return (
@@ -152,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("");
@@ -825,23 +835,23 @@ export default function NodePage() {
            prev.map((n) =>
              n.id === form.id
                ? {
-                  ...n,
-                  name: form.name,
-                  serverIp:
-                    form.serverIpV4?.trim() ||
-                    form.serverIpV6?.trim() ||
-                    form.serverHost?.trim() ||
-                    "",
-                  serverIpV4: form.serverIpV4,
-                  serverIpV6: form.serverIpV6,
-                  port: form.port,
-                  tcpListenAddr: form.tcpListenAddr,
-                  udpListenAddr: form.udpListenAddr,
-                  interfaceName: form.interfaceName,
-                  http: form.http,
-                  tls: form.tls,
-                  socks: form.socks,
-                }
+                    ...n,
+                    name: form.name,
+                    serverIp:
+                      form.serverIpV4?.trim() ||
+                      form.serverIpV6?.trim() ||
+                      form.serverHost?.trim() ||
+                      "",
+                    serverIpV4: form.serverIpV4,
+                    serverIpV6: form.serverIpV6,
+                    port: form.port,
+                    tcpListenAddr: form.tcpListenAddr,
+                    udpListenAddr: form.udpListenAddr,
+                    interfaceName: form.interfaceName,
+                    http: form.http,
+                    tls: form.tls,
+                    socks: form.socks,
+                  }
                : n,
            ),
          );
@@ -1002,11 +1012,13 @@ export default function NodePage() {

    if (searchKeyword.trim()) {
      const lowerKeyword = searchKeyword.toLowerCase();
-      filteredNodes = filteredNodes.filter(n =>
-        (n.name && n.name.toLowerCase().includes(lowerKeyword)) ||
-        (n.serverIp && n.serverIp.toLowerCase().includes(lowerKeyword)) ||
-        (n.serverIpV4 && n.serverIpV4.toLowerCase().includes(lowerKeyword)) ||
-        (n.serverIpV6 && n.serverIpV6.toLowerCase().includes(lowerKeyword))
+
+      filteredNodes = filteredNodes.filter(
+        (n) =>
+          (n.name && n.name.toLowerCase().includes(lowerKeyword)) ||
+          (n.serverIp && n.serverIp.toLowerCase().includes(lowerKeyword)) ||
+          (n.serverIpV4 && n.serverIpV4.toLowerCase().includes(lowerKeyword)) ||
+          (n.serverIpV6 && n.serverIpV6.toLowerCase().includes(lowerKeyword)),
      );
    }

@@ -1063,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-start gap-2 overflow-x-auto whitespace-nowrap touch-pan-x sm:justify-end [&>*]: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="bg-sky-100 text-sky-700 hover:bg-sky-200 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"
@@ -1232,7 +1259,7 @@ export default function NodePage() {
                              </span>
                              <div className="text-right text-xs min-w-0 flex-1 ml-2 min-h-[2.125rem]">
                                {node.serverIpV4?.trim() ||
-                                  node.serverIpV6?.trim() ? (
+                                node.serverIpV6?.trim() ? (
                                  <div className="space-y-0.5">
                                    {node.serverIpV4?.trim() && (
                                      <span
@@ -1288,7 +1315,7 @@ export default function NodePage() {
                                  </span>
                                  <span className="text-xs">
                                    {node.connectionStatus === "online" &&
-                                      node.systemInfo
+                                    node.systemInfo
                                      ? formatUptime(node.systemInfo.uptime)
                                      : "-"}
                                  </span>
@@ -1307,7 +1334,7 @@ export default function NodePage() {
                                      <span>CPU</span>
                                      <span className="font-mono">
                                        {node.connectionStatus === "online" &&
-                                          node.systemInfo
+                                        node.systemInfo
                                          ? `${node.systemInfo.cpuUsage.toFixed(1)}%`
                                          : "-"}
                                      </span>
@@ -1324,7 +1351,7 @@ export default function NodePage() {
                                      size="sm"
                                      value={
                                        node.connectionStatus === "online" &&
-                                          node.systemInfo
+                                        node.systemInfo
                                          ? node.systemInfo.cpuUsage
                                          : 0
                                      }
@@ -1335,7 +1362,7 @@ export default function NodePage() {
                                      <span>内存</span>
                                      <span className="font-mono">
                                        {node.connectionStatus === "online" &&
-                                          node.systemInfo
+                                        node.systemInfo
                                          ? `${node.systemInfo.memoryUsage.toFixed(1)}%`
                                          : "-"}
                                      </span>
@@ -1352,7 +1379,7 @@ export default function NodePage() {
                                      size="sm"
                                      value={
                                        node.connectionStatus === "online" &&
-                                          node.systemInfo
+                                        node.systemInfo
                                          ? node.systemInfo.memoryUsage
                                          : 0
                                      }
@@ -1367,10 +1394,10 @@ export default function NodePage() {
                                    </div>
                                    <div className="font-mono">
                                      {node.connectionStatus === "online" &&
-                                        node.systemInfo
+                                      node.systemInfo
                                        ? formatSpeed(
-                                          node.systemInfo.uploadSpeed,
-                                        )
+                                            node.systemInfo.uploadSpeed,
+                                          )
                                        : "-"}
                                    </div>
                                  </div>
@@ -1380,10 +1407,10 @@ export default function NodePage() {
                                    </div>
                                    <div className="font-mono">
                                      {node.connectionStatus === "online" &&
-                                        node.systemInfo
+                                      node.systemInfo
                                        ? formatSpeed(
-                                          node.systemInfo.downloadSpeed,
-                                        )
+                                            node.systemInfo.downloadSpeed,
+                                          )
                                        : "-"}
                                    </div>
                                  </div>
@@ -1397,10 +1424,10 @@ export default function NodePage() {
                                    </div>
                                    <div className="font-mono text-primary-700 dark:text-primary-300">
                                      {node.connectionStatus === "online" &&
-                                        node.systemInfo
+                                      node.systemInfo
                                        ? formatTraffic(
-                                          node.systemInfo.uploadTraffic,
-                                        )
+                                            node.systemInfo.uploadTraffic,
+                                          )
                                        : "-"}
                                    </div>
                                  </div>
@@ -1410,10 +1437,10 @@ export default function NodePage() {
                                    </div>
                                    <div className="font-mono text-success-700 dark:text-success-300">
                                      {node.connectionStatus === "online" &&
-                                        node.systemInfo
+                                      node.systemInfo
                                        ? formatTraffic(
-                                          node.systemInfo.downloadTraffic,
-                                        )
+                                            node.systemInfo.downloadTraffic,
+                                          )
                                        : "-"}
                                    </div>
                                  </div>
@@ -416,7 +416,8 @@ export default function PanelSharingPage() {
                    Provider 共享
                  </h2>
                  <p className="text-sm text-default-500">
-                    将本地节点分享给其他面板，统一管理 Token、端口范围和到期策略。
+                    将本地节点分享给其他面板，统一管理
+                    Token、端口范围和到期策略。
                  </p>
                </div>
                <Button
@@ -429,7 +430,9 @@ export default function PanelSharingPage() {
              </div>

              {loading ? (
-                <div className="text-center py-12 text-default-500">加载中...</div>
+                <div className="text-center py-12 text-default-500">
+                  加载中...
+                </div>
              ) : shares.length === 0 ? (
                <div className="rounded-lg border border-dashed border-divider bg-default-50/60 dark:bg-default-100/20 px-6 py-10 text-center">
                  <p className="text-base font-semibold text-foreground">
@@ -574,7 +577,9 @@ export default function PanelSharingPage() {
              </div>

              {remoteUsageLoading ? (
-                <div className="text-center py-12 text-default-500">加载中...</div>
+                <div className="text-center py-12 text-default-500">
+                  加载中...
+                </div>
              ) : remoteUsageNodes.length === 0 ? (
                <div className="rounded-lg border border-dashed border-divider bg-default-50/60 dark:bg-default-100/20 px-6 py-10 text-center">
                  <p className="text-base font-semibold text-foreground">
@@ -669,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>
@@ -772,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,
@@ -20,6 +18,8 @@ import {
 } 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";
@@ -59,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";

@@ -113,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);

  // 模态框状态
@@ -230,9 +234,9 @@ export default function TunnelPage() {
      trafficRatio: tunnel.trafficRatio,
      inIp: tunnel.inIp
        ? tunnel.inIp
-          .split(",")
-          .map((ip: string) => ip.trim())
-          .join("\n")
+            .split(",")
+            .map((ip: string) => ip.trim())
+            .join("\n")
        : "",
      ipPreference: tunnel.ipPreference || "",
      status: tunnel.status,
@@ -605,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)),
      );
    }

@@ -666,11 +672,17 @@ export default function TunnelPage() {
      isDragging,
    } = useSortable({ id });

-    const style = {
-      transform: transform ? CSS.Transform.toString(transform) : undefined,
+    const style: React.CSSProperties = {
+      transform: transform
+        ? CSS.Transform.toString({
+            ...transform,
+            x: Math.round(transform.x),
+            y: Math.round(transform.y),
+          })
+        : undefined,
      transition: isDragging ? undefined : transition || undefined,
      opacity: isDragging ? 0.5 : 1,
-      willChange: "transform",
+      willChange: isDragging ? "transform" : undefined,
    };

    return (
@@ -698,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-start gap-2 overflow-x-auto whitespace-nowrap touch-pan-x sm:justify-end [&>*]: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="bg-sky-100 text-sky-700 hover:bg-sky-200 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}>
@@ -1381,9 +1409,9 @@ export default function TunnelPage() {
                                          .filter((id) => id !== -1)
                                          .map((id) => id.toString()),
                                      ]}
+                                      dropdownPlacement="top"
                                      label="节点"
                                      placeholder="选择节点（可多选）"
-                                      dropdownPlacement="top"
                                      selectedKeys={groupNodes
                                        .filter((ct) => ct.nodeId !== -1)
                                        .map((ct) => ct.nodeId.toString())}
@@ -1450,14 +1478,14 @@ export default function TunnelPage() {
                                              {form.inNodeId.some(
                                                (ct) => ct.nodeId === node.id,
                                              ) && (
-                                                  <Chip
-                                                    color="warning"
-                                                    size="sm"
-                                                    variant="flat"
-                                                  >
-                                                    已选为入口
-                                                  </Chip>
-                                                )}
+                                                <Chip
+                                                  color="warning"
+                                                  size="sm"
+                                                  variant="flat"
+                                                >
+                                                  已选为入口
+                                                </Chip>
+                                              )}
                                              {form.outNodeId &&
                                                form.outNodeId.some(
                                                  (ct) => ct.nodeId === node.id,
@@ -1480,14 +1508,14 @@ export default function TunnelPage() {
                                                      ct.nodeId !== -1,
                                                  ),
                                              ) && (
-                                                  <Chip
-                                                    color="primary"
-                                                    size="sm"
-                                                    variant="flat"
-                                                  >
-                                                    已选为其他跳
-                                                  </Chip>
-                                                )}
+                                                <Chip
+                                                  color="primary"
+                                                  size="sm"
+                                                  variant="flat"
+                                                >
+                                                  已选为其他跳
+                                                </Chip>
+                                              )}
                                            </div>
                                          </div>
                                        </SelectItem>
@@ -1597,16 +1625,16 @@ export default function TunnelPage() {
                                id.toString(),
                              ),
                            ]}
+                            dropdownPlacement="top"
                            errorMessage={errors.outNodeId}
                            isInvalid={!!errors.outNodeId}
                            label="节点"
                            placeholder="请选择出口节点（可多选）"
-                            dropdownPlacement="top"
                            selectedKeys={
                              form.outNodeId
                                ? form.outNodeId
-                                  .filter((ct) => ct.nodeId !== -1)
-                                  .map((ct) => ct.nodeId.toString())
+                                    .filter((ct) => ct.nodeId !== -1)
+                                    .map((ct) => ct.nodeId.toString())
                                : []
                            }
                            selectionMode="multiple"
@@ -1673,25 +1701,25 @@ export default function TunnelPage() {
                                    {form.inNodeId.some(
                                      (ct) => ct.nodeId === node.id,
                                    ) && (
-                                        <Chip
-                                          color="warning"
-                                          size="sm"
-                                          variant="flat"
-                                        >
-                                          已选为入口
-                                        </Chip>
-                                      )}
+                                      <Chip
+                                        color="warning"
+                                        size="sm"
+                                        variant="flat"
+                                      >
+                                        已选为入口
+                                      </Chip>
+                                    )}
                                    {getSelectedChainNodeIds().includes(
                                      node.id,
                                    ) && (
-                                        <Chip
-                                          color="primary"
-                                          size="sm"
-                                          variant="flat"
-                                        >
-                                          已选为转发链
-                                        </Chip>
-                                      )}
+                                      <Chip
+                                        color="primary"
+                                        size="sm"
+                                        variant="flat"
+                                      >
+                                        已选为转发链
+                                      </Chip>
+                                    )}
                                  </div>
                                </div>
                              </SelectItem>
@@ -2054,18 +2082,20 @@ export default function TunnelPage() {
                                    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>
@@ -2107,10 +2137,11 @@ export default function TunnelPage() {
                                        <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>
@@ -2223,17 +2254,19 @@ export default function TunnelPage() {
                                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>
@@ -2269,10 +2302,11 @@ export default function TunnelPage() {
                                        </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>
@@ -1,8 +1,12 @@
 import { useState, useEffect } from "react";
 import toast from "react-hot-toast";
-import { AnimatedPage, StaggerList, StaggerItem } from "@/components/animated-page";
 import { parseDate } from "@internationalized/date";

+import {
+  AnimatedPage,
+  StaggerList,
+  StaggerItem,
+} from "@/components/animated-page";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Input } from "@/shadcn-bridge/heroui/input";
@@ -61,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 => {
@@ -121,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,
@@ -248,7 +256,7 @@ export default function UserPage() {
      if (response.code === 0) {
        setTunnels(Array.isArray(response.data) ? response.data : []);
      }
-    } catch { }
+    } catch {}
  };

  const loadSpeedLimits = async () => {
@@ -258,15 +266,15 @@ export default function UserPage() {
      if (response.code === 0) {
        const speedLimitList = Array.isArray(response.data)
          ? response.data.map((item) => ({
-            ...item,
-            uploadSpeed: item.uploadSpeed ?? item.speed ?? 0,
-            downloadSpeed: item.downloadSpeed ?? item.speed ?? 0,
-          }))
+              ...item,
+              uploadSpeed: item.uploadSpeed ?? item.speed ?? 0,
+              downloadSpeed: item.downloadSpeed ?? item.speed ?? 0,
+            }))
          : [];

        setSpeedLimits(speedLimitList);
      }
-    } catch { }
+    } catch {}
  };

  const loadUserGroups = async () => {
@@ -276,7 +284,7 @@ export default function UserPage() {
      if (response.code === 0) {
        setUserGroups(Array.isArray(response.data) ? response.data : []);
      }
-    } catch { }
+    } catch {}
  };

  const loadUserTunnels = async (userId: number) => {
@@ -327,7 +335,7 @@ export default function UserPage() {
      if (groupRes.code === 0) {
        currentGroupIds = groupRes.data || [];
      }
-    } catch { }
+    } catch {}

    setUserForm({
      id: user.id,
@@ -703,16 +711,14 @@ export default function UserPage() {
            const flowPercent =
              user.flow > 0
                ? Math.min(
-                  (usedFlow / (user.flow * 1024 * 1024 * 1024)) * 100,
-                  100,
-                )
+                    (usedFlow / (user.flow * 1024 * 1024 * 1024)) * 100,
+                    100,
+                  )
                : 0;

            return (
              <StaggerItem key={user.id}>
-                <Card
-                  className="shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden h-full"
-                >
+                <Card className="shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden h-full">
                  <CardHeader className="pb-2 md:pb-2">
                    <div className="flex justify-between items-start w-full">
                      <div className="flex-1 min-w-0">
@@ -771,7 +777,9 @@ export default function UserPage() {
                      <div className="space-y-1.5 pt-2 border-t border-divider">
                        <div className="flex justify-between text-sm">
                          <span className="text-default-600">转发数量</span>
-                          <span className="font-medium text-xs">{user.num}</span>
+                          <span className="font-medium text-xs">
+                            {user.num}
+                          </span>
                        </div>
                        <div className="flex justify-between text-sm">
                          <span className="text-default-600">重置日期</span>
@@ -876,7 +884,7 @@ export default function UserPage() {
      )}

      {/* 用户表单模态框 */}
-      < Modal
+      <Modal
        backdrop="blur"
        isOpen={isUserModalOpen}
        placement="center"
@@ -971,8 +979,8 @@ export default function UserPage() {
                value={
                  userForm.expTime
                    ? (parseDate(
-                      userForm.expTime.toISOString().split("T")[0],
-                    ) as any)
+                        userForm.expTime.toISOString().split("T")[0],
+                      ) as any)
                    : null
                }
                onChange={(date) => {
@@ -1078,11 +1086,12 @@ export default function UserPage() {
                          aria-disabled={isAssigned}
                          className={`
                            px-4 py-3 rounded-lg border transition-all duration-200 cursor-pointer
-                            ${isAssigned
-                              ? "bg-default-100/50 dark:bg-default-50/50 border-default-200/50 dark:border-default-100/20 opacity-60 cursor-not-allowed"
-                              : isSelected
-                                ? "bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-500/50 shadow-sm"
-                                : "bg-white dark:bg-default-50 border-default-200 dark:border-default-100/30 hover:border-primary-200 dark:hover:border-primary-500/30 hover:shadow-sm"
+                            ${
+                              isAssigned
+                                ? "bg-default-100/50 dark:bg-default-50/50 border-default-200/50 dark:border-default-100/20 opacity-60 cursor-not-allowed"
+                                : isSelected
+                                  ? "bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-500/50 shadow-sm"
+                                  : "bg-white dark:bg-default-50 border-default-200 dark:border-default-100/30 hover:border-primary-200 dark:hover:border-primary-500/30 hover:shadow-sm"
                            }
                          `}
                          role="button"
@@ -1142,13 +1151,13 @@ export default function UserPage() {
                                  selectedKeys={
                                    batchTunnelSelections.get(tunnel.id) !==
                                      null &&
-                                      batchTunnelSelections.get(tunnel.id) !==
+                                    batchTunnelSelections.get(tunnel.id) !==
                                      undefined
                                      ? [
-                                        batchTunnelSelections
-                                          .get(tunnel.id)!
-                                          .toString(),
-                                      ]
+                                          batchTunnelSelections
+                                            .get(tunnel.id)!
+                                            .toString(),
+                                        ]
                                      : ["null"]
                                  }
                                  size="sm"
@@ -1408,9 +1417,9 @@ export default function UserPage() {
                      setEditTunnelForm((prev) =>
                        prev
                          ? {
-                            ...prev,
-                            speedId: value === "null" ? null : Number(value),
-                          }
+                              ...prev,
+                              speedId: value === "null" ? null : Number(value),
+                            }
                          : null,
                      );
                    }}
@@ -1465,10 +1474,10 @@ export default function UserPage() {
                    value={
                      editTunnelForm.expTime
                        ? (parseDate(
-                          new Date(editTunnelForm.expTime)
-                            .toISOString()
-                            .split("T")[0],
-                        ) as any)
+                            new Date(editTunnelForm.expTime)
+                              .toISOString()
+                              .split("T")[0],
+                          ) as any)
                        : null
                    }
                    onChange={(date) => {
@@ -177,6 +177,7 @@ export function DatePicker({
        required={isRequired}
        type={shouldUseTextInput ? "text" : "date"}
        value={shouldUseTextInput ? textValue : formattedValue}
+        onBlur={shouldUseTextInput ? commitTextInput : undefined}
        onChange={(event) => {
          const nextValue = event.target.value;

@@ -189,7 +190,6 @@ export function DatePicker({

          notifyNativeDateChange(nextValue);
        }}
-        onBlur={shouldUseTextInput ? commitTextInput : undefined}
        onKeyDown={
          shouldUseTextInput
            ? (event) => {
@@ -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,
      )}
@@ -286,26 +286,22 @@ export function Select<T>({
      return null;
    }

-    const placementClasses = dropdownPlacement === "top"
-      ? "bottom-full mb-1"
-      : "top-full mt-1";
+    const placementClasses =
+      dropdownPlacement === "top" ? "bottom-full mb-1" : "top-full mt-1";

    return (
      <div
+        ref={listboxRef}
        className={cn(
          "absolute left-0 z-50 w-full space-y-1 overflow-y-auto rounded-md border border-divider bg-background p-2 shadow-md max-h-56",
-          placementClasses
+          placementClasses,
        )}
        id={`${generatedId}-listbox`}
-        ref={listboxRef}
        role="listbox"
      >
        {options.length === 0 ? (
          <div
-            className={cn(
-              "px-2 py-1 text-default-500",
-              textSizeClass(size),
-            )}
+            className={cn("px-2 py-1 text-default-500", textSizeClass(size))}
          >
            暂无可选项
          </div>
@@ -334,9 +330,7 @@ export function Select<T>({
                  className={cn(
                    "min-w-0 flex-1 truncate text-left text-foreground",
                    textSizeClass(size),
-                    optionDisabled
-                      ? "cursor-not-allowed"
-                      : "cursor-pointer",
+                    optionDisabled ? "cursor-not-allowed" : "cursor-pointer",
                  )}
                  disabled={optionDisabled}
                  type="button"
@@ -363,13 +357,7 @@ export function Select<T>({
      label={label}
    >
      {selectionMode === "multiple" ? (
-        <div
-          ref={containerRef}
-          className={cn(
-            "relative w-full",
-            className,
-          )}
-        >
+        <div ref={containerRef} className={cn("relative w-full", className)}>
          <button
            aria-controls={`${generatedId}-listbox`}
            aria-expanded={isExpanded}
@@ -2,6 +2,14 @@
@import "tw-animate-css";
@import "./tailwind-theme.pcss";

+/* GPU acceleration helper - prevents font blurriness during transforms */
+.gpu-accelerated {
+  will-change: transform;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 :root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
@@ -181,12 +189,12 @@ body {
@keyframes captchaModalIn {
  from {
    opacity: 0;
-    transform: scale(0.9) translateY(-20px);
+    transform: translateY(-20px);
  }

  to {
    opacity: 1;
-    transform: scale(1) translateY(0);
+    transform: translateY(0);
  }
 }

@@ -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	84a03215f4	fix(frontend): restore Android swipe for mobile batch toolbar (#202 ) ## Summary - fix mobile batch action toolbar in forward/node/tunnel pages to keep horizontal overflow reachable on Android - switch toolbar alignment to start on mobile and keep right alignment on `sm+` to avoid `justify-end` overflow reachability issues - add `touch-pan-x` to improve horizontal swipe handling on mobile browsers while preserving existing desktop layout ## Verification - `npm run build` (fails due to pre-existing issue: `src/main.tsx` cannot find module `virtual:pwa-register`) - `npm run lint` (fails due to pre-existing a11y errors in unrelated files and in existing forward labels)	2026-02-23 22:26:11 +08:00
sagitchu	def93749eb	fix(frontend): restore Android swipe for mobile batch toolbar Switch mobile batch toolbar alignment to start and enable horizontal pan gestures so overflow actions remain reachable on Android while desktop right alignment stays unchanged.	2026-02-23 22:24:28 +08:00
sagit	945a1c0dfc	fix(frontend): remove border from batch toggle button (#199 )	2026-02-23 22:03:29 +08:00
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
sagit	088027da7b	fix(frontend): resolve remaining font blur in node and forward cards (#188 ) ## Summary - apply the same anti-blur drag transform strategy used in tunnel cards to node cards - update forward card and table-row sortable transforms to round x/y pixels and reduce subpixel text blur - limit `willChange` usage to active dragging so text does not remain on a promoted layer while idle ## Verification - npm run build (vite-frontend)	2026-02-22 16:55:08 +08:00
sagitchu	d37adee5df	fix(frontend): resolve remaining font blur in node and forward cards	2026-02-22 16:53:35 +08:00
sagit	c147e52d72	fix(frontend): ship pending card-view animation and interaction refinements (#186 ) ## Summary - include the full pending frontend refinements across card views, search/filter interactions, and bridge components - keep sortable/card animation behavior aligned with the latest anti-blur adjustments in tunnel card rendering - bundle related UI consistency updates across tunnel, forward, node, user, and dashboard pages ## Verification - npm run build (vite-frontend)	2026-02-22 15:54:30 +08:00
sagitchu	d483258eef	fix(frontend): ship pending card-view animation and interaction refinements	2026-02-22 15:52:48 +08:00
sagit	79c28103d5	fix(frontend): prevent font blur in sortable card components (#185 ) Add backface-visibility: hidden and font-smoothing properties to SortableItem components in tunnel, forward, and node pages to prevent GPU subpixel rendering blur during drag operations. - tunnel.tsx: SortableItem wrapper anti-blur fix - forward.tsx: SortableCard wrapper anti-blur fix - node.tsx: SortableItem component anti-blur fix Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>	2026-02-22 15:11:47 +08:00
sagit	f36bf1437c	fix(frontend): prevent font blurriness caused by scale animations (#183 ) Remove scale transforms from Framer Motion animations that cause subpixel rendering issues on text elements. Replace with opacity + translateY for smooth animations without blur. - Remove scale from FadeIn component (animated-page.tsx) - Remove scale from login page entrance animation (index.tsx) - Remove scale from search bar button animation (search-bar.tsx) - Remove whileTap scale from sidebar menu buttons (admin.tsx) - Remove scale from captcha modal animation (globals.css) - Add .gpu-accelerated utility class for future use Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>	2026-02-22 13:28:47 +08:00