fix(ui): improve background handling and PWA update prompts (#419 )

## Changes - Add adaptive solid color background support for dark/light themes. - Replace mesh gradient with semi-transparent blurred background images. - Fix background scrolling issue on mobile browsers. - Remove borders from specific cards for consistent UI styling. - Prevent caching of PWA service worker files in Nginx. - Introduce interactive toast prompt for PWA updates instead of silent refresh.
fix(ui): improve background handling and PWA update prompts
2026-09-28 15:46:38 +08:00 · 2026-04-05 20:55:15 +08:00 · 2026-04-05 20:53:25 +08:00 · 2026-04-05 18:47:13 +08:00 · 2026-04-05 18:45:17 +08:00 · 2026-04-05 18:36:31 +08:00
15 changed files with 326 additions and 30 deletions
@@ -963,7 +963,7 @@ func (h *Handler) updateSingleConfig(w http.ResponseWriter, r *http.Request) {
 		return
 	}

-	if value == "" && name != "app_logo" && name != "app_favicon" {
+	if value == "" && name != "app_logo" && name != "app_favicon" && name != "app_bg_image" {
 		response.WriteJSON(w, response.ErrDefault("配置值不能为空"))
 		return
 	}
@@ -2,6 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
    <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" />
@@ -43,12 +43,28 @@ http {
        root /usr/share/nginx/html;
        index index.html;

+        # PWA 和 Service Worker 不缓存
+        location ~* (sw\.js|service-worker\.js|workbox-.*\.js|manifest\.webmanifest)$ {
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
+            add_header Pragma "no-cache";
+            add_header Expires "0";
+            try_files $uri =404;
+        }
+
        # 静态文件缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
-            expires 1y;
+            expires 30d;
            add_header Cache-Control "public, immutable";
        }

+        # HTML 文件不缓存
+        location ~* \.(?:htm|html)$ {
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
+            add_header Pragma "no-cache";
+            add_header Expires "0";
+            try_files $uri $uri/ /index.html;
+        }
+
        # Vue Router的history模式支持
        location / {
            try_files $uri $uri/ /index.html;
@@ -90,6 +90,42 @@ const LoginRoute = () => {
 function App() {
  const location = useLocation();

+  // 处理自定义背景图片
+  useEffect(() => {
+    const updateBg = () => {
+      const customBg = siteConfig.app_bg_image;
+      if (customBg) {
+        if (customBg === "theme") {
+          document.documentElement.style.removeProperty("--custom-bg-image");
+          document.documentElement.style.removeProperty("--custom-bg-color");
+          document.documentElement.classList.add("has-theme-bg");
+          document.documentElement.classList.remove("has-custom-bg");
+        } else if (customBg.startsWith("http") || customBg.startsWith("data:") || customBg.startsWith("/") || customBg.startsWith("blob:")) {
+          document.documentElement.style.setProperty("--custom-bg-image", `url(${customBg})`);
+          document.documentElement.style.setProperty("--custom-bg-color", "transparent");
+          document.documentElement.classList.add("has-custom-bg");
+          document.documentElement.classList.remove("has-theme-bg");
+        } else {
+          // Assume solid color like "#ffffff", "white", etc.
+          document.documentElement.style.setProperty("--custom-bg-image", "none");
+          document.documentElement.style.setProperty("--custom-bg-color", customBg);
+          document.documentElement.classList.add("has-custom-bg");
+          document.documentElement.classList.remove("has-theme-bg");
+        }
+      } else {
+        document.documentElement.style.removeProperty("--custom-bg-image");
+        document.documentElement.style.removeProperty("--custom-bg-color");
+        document.documentElement.classList.remove("has-custom-bg");
+        document.documentElement.classList.remove("has-theme-bg");
+      }
+    };
+    updateBg();
+    window.addEventListener("site-config-updated", updateBg);
+    return () => {
+      window.removeEventListener("site-config-updated", updateBg);
+    };
+  }, []);
+
  // 立即设置页面标题（使用已从缓存读取的配置）
  useEffect(() => {
    document.title = siteConfig.name;
@@ -54,7 +54,7 @@ export const ThemeSettings: React.FC = () => {
  };

  return (
-    <Card className="border border-gray-200 dark:border-gray-700">
+    <Card className="shadow-md">
      <CardBody className="p-6">
        <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-5">
          主题设置
@@ -20,6 +20,7 @@ const getInitialConfig = () => {
      github_repo: GITHUB_REPO,
      app_logo: "",
      app_favicon: "",
+      app_bg_image: "",
      is_commercial: false,
      hide_footer_brand: false,
    };
@@ -29,6 +30,8 @@ const getInitialConfig = () => {
  const cachedAppLogo = localStorage.getItem(CACHE_PREFIX + "app_logo") || "";
  const cachedAppFavicon =
    localStorage.getItem(CACHE_PREFIX + "app_favicon") || "";
+  const cachedAppBgImage =
+    localStorage.getItem(CACHE_PREFIX + "app_bg_image") || "";
  const isCommercial = localStorage.getItem(CACHE_PREFIX + "is_commercial") === "true";
  const hideFooterBrand = localStorage.getItem(CACHE_PREFIX + "hide_footer_brand") === "true";

@@ -40,6 +43,7 @@ const getInitialConfig = () => {
      github_repo: GITHUB_REPO,
      app_logo: cachedAppLogo,
      app_favicon: cachedAppFavicon,
+      app_bg_image: cachedAppBgImage,
      is_commercial: isCommercial,
      hide_footer_brand: hideFooterBrand,
    };
@@ -52,6 +56,7 @@ const getInitialConfig = () => {
    github_repo: GITHUB_REPO,
    app_logo: cachedAppLogo,
    app_favicon: cachedAppFavicon,
+    app_bg_image: cachedAppBgImage,
    is_commercial: isCommercial,
    hide_footer_brand: hideFooterBrand,
  };
@@ -123,7 +128,7 @@ export const getCachedConfig = async (key: string): Promise<string | null> => {
 // 获取所有配置（优先从缓存）
 export const getCachedConfigs = async (): Promise<Record<string, string>> => {
  // 尝试从缓存获取所有配置
-  const configKeys = ["app_name", "app_logo", "app_favicon"];
+  const configKeys = ["app_name", "app_logo", "app_favicon", "app_bg_image"];
  const cachedConfigs: Record<string, string> = {};
  let hasCachedData = false;

@@ -263,6 +268,10 @@ export const updateSiteConfig = async (configMap?: Record<string, string>) => {
    resolvedConfigMap,
    "app_favicon",
  );
+  const hasAppBgImage = Object.prototype.hasOwnProperty.call(
+    resolvedConfigMap,
+    "app_bg_image",
+  );

  const appName = hasAppName
    ? String(resolvedConfigMap.app_name || "").trim()
@@ -273,6 +282,9 @@ export const updateSiteConfig = async (configMap?: Record<string, string>) => {
  const appFavicon = hasAppFavicon
    ? String(resolvedConfigMap.app_favicon || "").trim()
    : (siteConfig.app_favicon || "").trim();
+  const appBgImage = hasAppBgImage
+    ? String(resolvedConfigMap.app_bg_image || "").trim()
+    : (siteConfig.app_bg_image || "").trim();

  if (appName && appName !== siteConfig.name) {
    siteConfig.name = appName;
@@ -280,11 +292,13 @@ export const updateSiteConfig = async (configMap?: Record<string, string>) => {

  siteConfig.app_logo = appLogo;
  siteConfig.app_favicon = appFavicon;
+  siteConfig.app_bg_image = appBgImage;
  siteConfig.is_commercial = resolvedConfigMap.is_commercial === "true";
  siteConfig.hide_footer_brand = resolvedConfigMap.hide_footer_brand === "true";

  if (typeof document !== "undefined") {
    document.title = siteConfig.name;
+    window.dispatchEvent(new Event("site-config-updated"));
  }
  updateDocumentFavicon(siteConfig.app_favicon);
 };
@@ -1,12 +1,42 @@
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import { registerSW } from "virtual:pwa-register";
+import toast from "react-hot-toast";

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

-registerSW({ immediate: true });
+const updateSW = registerSW({
+  immediate: true,
+  onNeedRefresh() {
+    toast(
+      (t) => (
+        <div className="flex flex-col gap-3">
+          <span className="text-sm font-medium text-foreground">发现新版本，是否立即刷新以应用更新？</span>
+          <div className="flex gap-2 justify-end">
+            <button
+              className="px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 rounded-md transition-colors"
+              onClick={() => {
+                updateSW(true);
+                toast.dismiss(t.id);
+              }}
+            >
+              刷新
+            </button>
+            <button
+              className="px-3 py-1.5 text-xs font-medium bg-default-200 text-default-700 hover:bg-default-300 rounded-md transition-colors"
+              onClick={() => toast.dismiss(t.id)}
+            >
+              稍后
+            </button>
+          </div>
+        </div>
+      ),
+      { duration: Infinity, position: "bottom-right" }
+    );
+  },
+});

 ReactDOM.createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
@@ -65,7 +65,7 @@ interface ConfigItem {
  label: string;
  placeholder?: string;
  description?: string;
-  type: "input" | "switch" | "select";
+  type: "input" | "switch" | "select" | "bg_image";
  options?: { label: string; value: string; description?: string }[];
  dependsOn?: string; // 依赖的配置项key
  dependsValue?: string; // 依赖的配置项值
@@ -86,6 +86,12 @@ const toBrandAssetKind = (key: BrandPreviewKey): BrandAssetKind => {

 // 网站配置项定义
 const CONFIG_ITEMS: ConfigItem[] = [
+  {
+    key: "app_bg_image",
+    label: "自定义背景",
+    description: "上传自定义背景图片（建议使用深色/浅色均可看清的图片，或使用半透明模糊效果）",
+    type: "bg_image",
+  },
  {
    key: "ip",
    label: "面板后端地址",
@@ -254,6 +260,8 @@ export default function ConfigPage() {

  const logoFileInputRef = useRef<HTMLInputElement>(null);
  const faviconFileInputRef = useRef<HTMLInputElement>(null);
+  const bgImageFileInputRef = useRef<HTMLInputElement>(null);
+  const [bgImageUploading, setBgImageUploading] = useState(false);

  const [announcement, setAnnouncement] = useState<AnnouncementData>({
    content: "",
@@ -547,6 +555,155 @@ export default function ConfigPage() {
    }
  };

+  const handleBgImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith("image/")) {
+      toast.error("只能上传图片文件");
+      return;
+    }
+
+    setBgImageUploading(true);
+    try {
+      const compressedImage = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          const img = new Image();
+          img.onload = () => {
+            const canvas = document.createElement("canvas");
+            let width = img.width;
+            let height = img.height;
+            const MAX_WIDTH = 1920;
+            const MAX_HEIGHT = 1080;
+
+            if (width > height) {
+              if (width > MAX_WIDTH) {
+                height = Math.round((height * MAX_WIDTH) / width);
+                width = MAX_WIDTH;
+              }
+            } else {
+              if (height > MAX_HEIGHT) {
+                width = Math.round((width * MAX_HEIGHT) / height);
+                height = MAX_HEIGHT;
+              }
+            }
+
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext("2d");
+            if (!ctx) {
+              reject(new Error("Canvas context is null"));
+              return;
+            }
+            ctx.drawImage(img, 0, 0, width, height);
+            
+            // Output as webp for better compression
+            const dataUrl = canvas.toDataURL("image/webp", 0.8);
+            resolve(dataUrl);
+          };
+          img.onerror = () => reject(new Error("图片加载失败"));
+          img.src = event.target?.result as string;
+        };
+        reader.onerror = () => reject(new Error("文件读取失败"));
+        reader.readAsDataURL(file);
+      });
+
+      handleConfigChange("app_bg_image", compressedImage);
+      toast.success("自定义背景上传成功");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "图片处理失败");
+    } finally {
+      setBgImageUploading(false);
+      e.target.value = "";
+    }
+  };
+
+  const renderBgImageUploader = () => {
+    const bgImage = configs["app_bg_image"] || "";
+    const isImage = bgImage.startsWith("http") || bgImage.startsWith("data:") || bgImage.startsWith("/") || bgImage.startsWith("blob:");
+    const isTheme = bgImage === "theme";
+    const isSolidColor = bgImage && !isImage && !isTheme;
+    
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <div className="flex flex-wrap items-center gap-4">
+          <input
+            type="file"
+            accept="image/*"
+            ref={bgImageFileInputRef}
+            className="hidden"
+            onChange={handleBgImageUpload}
+          />
+          <Button
+            color="primary"
+            variant="flat"
+            onPress={() => bgImageFileInputRef.current?.click()}
+            isLoading={bgImageUploading}
+          >
+            上传图片
+          </Button>
+          <Button
+            color="secondary"
+            variant="flat"
+            onPress={() => handleConfigChange("app_bg_image", "theme")}
+            isDisabled={bgImageUploading || isTheme}
+          >
+            自适应纯色 (跟随深色模式)
+          </Button>
+          <Button
+            color="default"
+            variant="flat"
+            onPress={() => handleConfigChange("app_bg_image", "#ffffff")}
+            isDisabled={bgImageUploading || bgImage === "#ffffff"}
+          >
+            白色纯色
+          </Button>
+          {bgImage && (
+            <Button
+              color="danger"
+              variant="flat"
+              onPress={() => handleConfigChange("app_bg_image", "")}
+              isDisabled={bgImageUploading}
+            >
+              恢复默认
+            </Button>
+          )}
+        </div>
+        
+        {bgImage && isImage && (
+          <div className="relative rounded-xl overflow-hidden border border-divider">
+            <img
+              src={bgImage}
+              alt="背景预览"
+              className="w-full max-h-48 object-cover opacity-80"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end p-4">
+              <span className="text-white text-sm font-medium">预览效果</span>
+            </div>
+          </div>
+        )}
+
+        {bgImage && isTheme && (
+          <div className="relative rounded-xl border border-divider bg-background h-32 flex items-center justify-center">
+            <span className="text-foreground text-sm font-medium">当前为自适应纯色背景</span>
+          </div>
+        )}
+
+        {bgImage && isSolidColor && (
+          <div 
+            className="relative rounded-xl border border-divider h-32 flex items-center justify-center" 
+            style={{ backgroundColor: bgImage }}
+          >
+            <span className="text-gray-500 bg-white/80 dark:bg-black/80 px-2 py-1 rounded text-sm font-medium border border-gray-200 dark:border-gray-800 shadow-sm">
+              纯色背景 ({bgImage})
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  };
+
  const renderBrandPreview = (key: BrandPreviewKey) => {
    const previewUrl = (configs[key] || "").trim();
    const appNamePreview = (configs.app_name || "").trim() || "应用名称";
@@ -699,6 +856,9 @@ export default function ConfigPage() {
    const isCommercialDisabled = ["app_name", "app_logo", "app_favicon", "hide_footer_brand"].includes(item.key) && configs.is_commercial !== "true";

    switch (item.type) {
+      case "bg_image":
+        return renderBgImageUploader();
+
      case "input":
        if (isBrandPreviewKey(item.key)) {
          return renderBrandAssetUploader(item.key, isChanged);
@@ -4192,7 +4192,7 @@ export default function ForwardPage() {
                        wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]",
                        th: "bg-default-100/50 text-default-600 font-semibold text-sm border-b border-divider py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                        td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
-                        tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors group",
+                        tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors group",
                      }}
                    >
                      <TableHeader>
@@ -4327,7 +4327,7 @@ export default function ForwardPage() {
              return (
                <div
                  key={`grouped-table-${group.userId}-${group.userName}`}
-                  className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
+                  className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
                >
                  <div className="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-md px-5 py-4">
                    <div className="flex items-center gap-2">
@@ -4638,10 +4638,10 @@ export default function ForwardPage() {
                            collapsed={collapsed}
                            countClassName="text-xs text-default-600"
                            groupUserId={group.userId}
-                            headerClassName="flex items-center justify-between rounded-lg bg-white/40 dark:bg-black/40 backdrop-blur-md border border-white/20 dark:border-white/10 px-3 py-2"
+                            headerClassName="flex items-center justify-between rounded-lg bg-white/10 dark:bg-black/10 backdrop-blur-md border border-white/20 dark:border-white/10 px-3 py-2"
                            titleClassName="truncate text-sm font-semibold text-default-700"
                            tunnel={tunnel}
-                            wrapperClassName="rounded-xl border border-divider bg-white/20 dark:bg-black/20 space-y-3"
+                            wrapperClassName="rounded-xl border border-divider bg-white/5 dark:bg-black/5 space-y-3"
                            onToggleCollapsed={() =>
                              toggleTunnelGroupCollapsed(
                                group.userId,
@@ -327,7 +327,7 @@ export default function LimitPage() {
        <StaggerList className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
          {filteredRules.map((rule) => (
            <StaggerItem key={rule.id}>
-              <Card className="shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden h-full">
+              <Card className="shadow-sm overflow-hidden h-full">
                <CardHeader className="pb-2 md:pb-2">
                  <div className="flex justify-between items-start w-full">
                    <div>
@@ -413,7 +413,7 @@ export default function LimitPage() {
        )
      ) : (
        /* 空状态 */
-        <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+        <Card className="shadow-sm bg-default-50/50">
          <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
            <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
              暂无限速规则
@@ -172,7 +172,7 @@ export default function MonitorPage() {
    <AnimatedPage className="px-3 lg:px-6 py-8">
      {/* 顶部英雄数据指标 (Hero Metrics) */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
+        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
          <div className="flex justify-between items-center z-10 relative">
            <span className="text-default-600 font-medium text-sm">System Load</span>
          </div>
@@ -189,7 +189,7 @@ export default function MonitorPage() {
          </div>
        </div>

-        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
+        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
          <div className="flex justify-between items-center z-10 relative">
            <span className="text-default-600 font-medium text-sm">Active Connections</span>
          </div>
@@ -206,7 +206,7 @@ export default function MonitorPage() {
          </div>
        </div>

-        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
+        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
          <div className="flex justify-between items-center z-10 relative">
            <span className="text-default-600 font-medium text-sm">Bandwidth</span>
          </div>
@@ -1770,7 +1770,7 @@ export default function NodePage() {
              wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
              th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
              td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
-              tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
+              tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors",
            }}
          >
            <TableHeader>
@@ -2249,7 +2249,7 @@ export default function NodePage() {
                                        )}
                                      </span>
                                    </div>
-                                    <div className="max-h-20 overflow-y-auto rounded bg-white/70 dark:bg-black/20 p-1.5 [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1">
+                                    <div className="max-h-20 overflow-y-auto rounded bg-white/10 dark:bg-black/10 p-1.5 [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1">
                                      {remoteUsage.usedPorts.length > 0 ? (
                                        <div className="flex flex-wrap gap-1">
                                          {remoteUsage.usedPorts.map((port) => (
@@ -2285,7 +2285,7 @@ export default function NodePage() {
                                        remoteUsage.bindings.map((binding) => (
                                          <div
                                            key={binding.bindingId}
-                                            className="rounded border border-default-200 dark:border-default-100/30 bg-white/70 dark:bg-black/20 p-2"
+                                            className="rounded border border-default-200 dark:border-default-100/30 bg-white/10 dark:bg-black/10 p-2"
                                          >
                                            <div className="flex items-center justify-between gap-2">
                                              <span
@@ -1586,7 +1586,7 @@ export default function TunnelPage() {
              wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]",
              th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
              td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
-              tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
+              tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors",
            }}
          >
            <TableHeader>
@@ -227,19 +227,56 @@ body {
 }

 .bg-mesh-gradient {
-  background: radial-gradient(at 0% 0%, #ff9a9e 0%, transparent 50%),
-              radial-gradient(at 100% 0%, #fecfef 0%, transparent 50%),
-              radial-gradient(at 100% 100%, #c2e9fb 0%, transparent 50%),
-              radial-gradient(at 0% 100%, #a1c4fd 0%, transparent 50%);
  background-color: #f2f2f7;
+  position: relative;
+  z-index: 0;
 }

-.dark .bg-mesh-gradient {
-  background: radial-gradient(at 0% 0%, #4a2b30 0%, transparent 50%),
-              radial-gradient(at 100% 0%, #493b45 0%, transparent 50%),
-              radial-gradient(at 100% 100%, #354756 0%, transparent 50%),
-              radial-gradient(at 0% 100%, #2f394f 0%, transparent 50%);
-  background-color: #1c1c1e;
+.bg-mesh-gradient::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  pointer-events: none;
+  background: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop') no-repeat center center;
+  background-size: cover;
+}
+
+:root.dark .bg-mesh-gradient {
+  background-color: #0b1020;
+}
+
+.dark .bg-mesh-gradient::before {
+  background: url('https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2564&auto=format&fit=crop') no-repeat center center;
+  background-size: cover;
+}
+
+:root.has-theme-bg .bg-mesh-gradient {
+  background-image: none !important;
+  background-color: #f6f7fb !important;
+}
+
+:root.dark.has-theme-bg .bg-mesh-gradient {
+  background-color: #0b1020 !important;
+}
+
+:root.has-theme-bg .bg-mesh-gradient::before {
+  background-image: none !important;
+}
+
+:root.has-custom-bg .bg-mesh-gradient {
+  background-image: none !important;
+  background-color: var(--custom-bg-color, transparent) !important;
+}
+
+:root.has-custom-bg .bg-mesh-gradient::before {
+  background-image: var(--custom-bg-image, none) !important;
+  background-size: cover !important;
+  background-position: center center !important;
+  background-repeat: no-repeat !important;
 }

@layer utilities {
@@ -8,7 +8,7 @@ export default defineConfig({
  plugins: [
    react(),
    VitePWA({
-      registerType: "autoUpdate",
+      registerType: "prompt",
      injectRegister: "auto",
      includeAssets: ["favicon.ico", "apple-touch-icon.png"],
      manifest: {
Author	SHA1	Message	Date
sagit	be4b1f5f25	fix(ui): improve background handling and PWA update prompts (#419 ) ## Changes - Add adaptive solid color background support for dark/light themes. - Replace mesh gradient with semi-transparent blurred background images. - Fix background scrolling issue on mobile browsers. - Remove borders from specific cards for consistent UI styling. - Prevent caching of PWA service worker files in Nginx. - Introduce interactive toast prompt for PWA updates instead of silent refresh.	2026-04-05 20:55:15 +08:00
sagitchu	cd4238274a	fix(ui): improve background handling and PWA update prompts - Add adaptive solid color background support for dark/light themes. - Replace mesh gradient with semi-transparent blurred background images. - Fix background scrolling issue on mobile browsers. - Remove borders from specific cards for consistent UI styling. - Prevent caching of PWA service worker files in Nginx. - Introduce interactive toast prompt for PWA updates instead of silent refresh.	2026-04-05 20:53:25 +08:00
sagit	25dc03c894	style: optimize card and table backgrounds for better custom background visibility (#418 ) Changed multiple bg-white/40 and bg-white/60 classes to more transparent variants like bg-white/10 and bg-white/20, or bg-transparent to allow the custom background image to show through.	2026-04-05 18:47:13 +08:00
sagitchu	4cf9c9174a	style: optimize card and table backgrounds for better custom background visibility	2026-04-05 18:45:17 +08:00
sagit	a45bd43e73	feat: add global background image setting to config page (#417 ) Add app_bg_image setting to /config page to allow global background customization.	2026-04-05 18:36:31 +08:00
sagitchu	364bace87f	fix: remove unused imports and leftover jsx in settings	2026-04-05 18:35:07 +08:00
sagitchu	2caafab937	feat: add global background image setting to config page	2026-04-05 18:31:59 +08:00
sagit	901b903a70	fix: frontend browser caching issue (#416 ) Disable caching for index.html and reduce static assets cache to 30d.	2026-04-05 17:51:56 +08:00
sagitchu	930cc86614	fix: frontend browser caching issue Disable caching for index.html and reduce static assets cache to 30d.	2026-04-05 17:50:12 +08:00
sagit	101fd5805a	feat(ui): add persistent custom background image upload feature (#415 )	2026-04-05 17:44:19 +08:00