style: improve glassmorphism UI for background adaptability (#420 )

Increase backdrop blur and lower white/black background opacity on inner elements (tables, charts, tabs). Apply higher blur to admin layout sidebar and H5 layout navigation bar. Remove solid backgrounds inside nested cards to inherit background themes.
style: improve glassmorphism UI for background adaptability
2026-09-28 07:36:38 +08:00 · 2026-04-06 10:23:16 +08:00 · 2026-04-06 10:21:06 +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
20 changed files with 308 additions and 220 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;
@@ -95,11 +95,28 @@ function App() {
    const updateBg = () => {
      const customBg = siteConfig.app_bg_image;
      if (customBg) {
-        document.documentElement.style.setProperty("--custom-bg-image", `url(${customBg})`);
-        document.documentElement.classList.add("has-custom-bg");
+        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();
@@ -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">
          主题设置
@@ -373,16 +373,15 @@ export default function AdminLayout({
      {/* 左侧菜单栏 */}
      <aside
        className={`
-        ${isMobile ? "fixed h-screen top-0 left-0 rounded-r-3xl" : "relative h-full rounded-3xl"} 
+        ${isMobile ? "fixed h-screen top-0 left-0 rounded-r-3xl" : "relative h-full rounded-3xl"}
        ${isMobile && !mobileMenuVisible ? "-translate-x-full" : "translate-x-0"}
-        ${isMobile ? "w-64" : isCollapsed ? "w-20" : "w-[260px]"} 
-        bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl
-        shadow-[0_10px_30px_rgba(0,0,0,0.1)] 
+        ${isMobile ? "w-64" : isCollapsed ? "w-20" : "w-[260px]"}
+        bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl
+        shadow-[0_10px_30px_rgba(0,0,0,0.1)]
        border border-white/80 dark:border-white/10
-        z-50 
+        z-50
        transition-all duration-300 ease-in-out
-        flex flex-col flex-shrink-0
-      `}
+        flex flex-col flex-shrink-0      `}
      >
        {/* Logo 区域 */}
        <div className="px-6 py-8 flex items-center overflow-hidden whitespace-nowrap box-border">
@@ -531,7 +530,7 @@ export default function AdminLayout({
        {isMobile && (
          <Button
            isIconOnly
-            className="absolute top-4 left-4 z-40 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-md shadow-sm border border-white/80 dark:border-white/10"
+            className="absolute top-4 left-4 z-40 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-md shadow-sm border border-white/80 dark:border-white/10"
            variant="flat"
            onPress={toggleMobileMenu}
          >
@@ -23,7 +23,7 @@ export default function H5SimpleLayout({
  return (
    <div className="flex flex-col min-h-screen bg-mesh-gradient">
      {/* 顶部导航栏 */}
-      <header className="bg-white/60 dark:bg-zinc-900/60 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
+      <header className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
        <div className="flex items-center gap-2">
          <Button isIconOnly size="sm" variant="light" onPress={handleBack}>
            <BackIcon className="w-5 h-5" />
@@ -168,7 +168,7 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex flex-col min-h-screen bg-mesh-gradient">
      {/* 顶部导航栏 */}
-      <header className="bg-white/60 dark:bg-zinc-900/60 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
+      <header className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
        <div className="flex items-center gap-2">
          <BrandLogo size={20} />
          <h1 className="text-sm font-bold text-foreground">
@@ -186,7 +186,7 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
      <div aria-hidden className="h-[calc(4rem+var(--safe-area-bottom))]" />

      {/* 底部Tabbar */}
-      <nav className="bg-white/70 dark:bg-zinc-900/70 backdrop-blur-2xl border-t border-white/80 dark:border-white/10 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">
+      <nav className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-2xl border-t border-white/80 dark:border-white/10 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;
          const isMonitor = item.path === "/monitor";
@@ -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);
@@ -4176,7 +4176,7 @@ export default function ForwardPage() {
                  {sortedForwards.length} 条规则
                </span>
              </div>
-              <Card className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/40 dark:bg-zinc-900/40 backdrop-blur-2xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
+              <Card 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)]">
                <DndContext
                  collisionDetection={pointerWithin}
                  sensors={sensors}
@@ -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,9 +4327,9 @@ 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 justify-between border-b border-white/20 dark:border-white/10 bg-white/20 dark:bg-black/20 backdrop-blur-3xl px-5 py-4">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-semibold text-foreground">
                        {group.userName}
@@ -4415,10 +4415,10 @@ export default function ForwardPage() {
                              collapsed={collapsed}
                              countClassName="text-xs text-default-600"
                              groupUserId={group.userId}
-                              headerClassName="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-4 py-2.5"
+                              headerClassName="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/20 dark:bg-black/20 backdrop-blur-3xl px-4 py-2.5"
                              titleClassName="truncate text-sm font-semibold text-default-700"
                              tunnel={tunnel}
-                              wrapperClassName="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/40 dark:bg-zinc-900/40 backdrop-blur-2xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
+                              wrapperClassName="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)]"
                              onToggleCollapsed={() =>
                                toggleTunnelGroupCollapsed(
                                  group.userId,
@@ -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,
@@ -158,7 +158,7 @@ export default function IndexPage() {
          initial={{ opacity: 0, y: 24 }}
          transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
        >
-          <Card className="w-full bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_20px_40px_rgba(0,0,0,0.15)] border-white/80 dark:border-white/10 rounded-[32px] p-2 sm:p-4">
+          <Card className="w-full bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_20px_40px_rgba(0,0,0,0.15)] border-white/80 dark:border-white/10 rounded-[32px] p-2 sm:p-4">
            <CardHeader className="pb-0 pt-6 px-6 flex-col items-center">
              <div className="w-14 h-14 bg-primary rounded-2xl flex items-center justify-center mb-4 shadow-sm text-white">
                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
@@ -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>
@@ -253,7 +253,7 @@ export default function MonitorPage() {
        </div>

        {/* Tab Switcher */}
-        <div className="flex items-center gap-1 p-1 rounded-2xl bg-white/40 dark:bg-black/40 backdrop-blur-lg border border-white/50 dark:border-white/10 w-fit shadow-sm">
+        <div className="flex items-center gap-1 p-1 rounded-2xl bg-white/20 dark:bg-black/20 backdrop-blur-3xl border border-white/50 dark:border-white/10 w-fit shadow-sm">
          <button
            className={`flex items-center gap-1.5 px-5 py-2 rounded-xl text-sm font-semibold transition-all duration-200 ${
              activeTab === "nodes"
@@ -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
@@ -1446,7 +1446,7 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {

                      {/* Active monitor info bar */}
                      {resolvedActiveMonitor && (
-                        <div className="flex items-center justify-between gap-3 p-3 rounded-2xl bg-white/40 dark:bg-black/40 backdrop-blur-md border border-white/50 dark:border-white/10 shadow-[0_4px_12px_rgba(0,0,0,0.05)]">
+                        <div className="flex items-center justify-between gap-3 p-3 rounded-2xl bg-white/20 dark:bg-black/20 backdrop-blur-3xl border border-white/50 dark:border-white/10 shadow-[0_4px_12px_rgba(0,0,0,0.05)]">
                          <div className="flex items-center gap-3 min-w-0 flex-wrap">
                            <Chip size="sm" color="primary" variant="flat">{resolvedActiveMonitor.type.toUpperCase()}</Chip>
                            <span className="font-mono text-xs text-default-500">{resolvedActiveMonitor.target}</span>
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, ChangeEvent } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";

@@ -23,7 +23,6 @@ import {
  deletePanelAddress,
  validatePanelAddress,
 } from "@/utils/panel";
-import { siteConfig, updateSiteConfig } from "@/config/site";

 interface PanelAddress {
  name: string;
@@ -47,100 +46,9 @@ export const SettingsPage = () => {
  const [forwardCompactMode, setForwardCompactMode] = useState(false);
  const [forwardCompactModeSaving, setForwardCompactModeSaving] =
    useState(false);
-  const [bgImage, setBgImage] = useState(() => siteConfig.app_bg_image || "");
-  const [bgImageSaving, setBgImageSaving] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);

  const admin = isAdmin();

-  const handleBgImageUpload = async (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    if (!file.type.startsWith("image/")) {
-      toast.error("只能上传图片文件");
-      return;
-    }
-
-    setBgImageSaving(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);
-      });
-
-      setBgImage(compressedImage);
-      // Optional: automatically save after processing
-      // void handleBgImageSave(compressedImage);
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : "图片处理失败");
-    } finally {
-      setBgImageSaving(false);
-      // Reset input value so the same file can be selected again if needed
-      e.target.value = "";
-    }
-  };
-
-  const handleBgImageSave = async (valueToSave?: string) => {
-    if (!admin || bgImageSaving) return;
-    setBgImageSaving(true);
-    try {
-      const finalValue = typeof valueToSave === "string" ? valueToSave : bgImage;
-      const response = await updateConfig("app_bg_image", finalValue);
-      if (response.code === 0) {
-        siteConfig.app_bg_image = finalValue;
-        // 触发配置更新，刷新相关页面或样式
-        await updateSiteConfig();
-        window.dispatchEvent(new Event("site-config-updated"));
-        toast.success("背景图片设置已保存");
-      } else {
-        toast.error(response.msg || "保存背景失败");
-      }
-    } catch {
-      toast.error("保存背景失败");
-    } finally {
-      setBgImageSaving(false);
-    }
-  };
-
  const setPanelAddressesFunc = (newAddress: PanelAddress[]) => {
    setPanelAddresses(newAddress);
  };
@@ -275,83 +183,6 @@ export const SettingsPage = () => {
      {/* 内容区域 */}
      <div className="max-w-4xl mx-auto px-4 py-6">
        <div className="space-y-6">
-          <Card>
-            <CardBody className="p-6">
-              <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
-                外观设置
-              </h2>
-              <div className="space-y-4">
-                <div className="flex flex-col gap-2">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                      自定义背景图片
-                    </label>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
-                      留空则使用系统默认的网格渐变背景。推荐上传 1920x1080 尺寸的图片。
-                    </p>
-                    <div className="flex items-center gap-4">
-                      {bgImage ? (
-                        <div className="relative w-40 h-24 rounded-md overflow-hidden border border-gray-200 dark:border-gray-700 group">
-                          <img src={bgImage} alt="Background Preview" className="w-full h-full object-cover" />
-                        </div>
-                      ) : (
-                        <div className="flex items-center justify-center w-40 h-24 rounded-md border border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-400 text-xs">
-                          无自定义背景
-                        </div>
-                      )}
-                      <div>
-                        <input
-                          type="file"
-                          accept="image/*"
-                          className="hidden"
-                          ref={fileInputRef}
-                          onChange={handleBgImageUpload}
-                        />
-                        <Button
-                          color="primary"
-                          variant="flat"
-                          size="sm"
-                          isDisabled={!admin || bgImageSaving}
-                          onPress={() => fileInputRef.current?.click()}
-                        >
-                          选择图片...
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex justify-end gap-2 mt-2">
-                    {bgImage && (
-                      <Button
-                        color="danger"
-                        variant="flat"
-                        isDisabled={!admin || bgImageSaving}
-                        onPress={() => {
-                          setBgImage("");
-                          void handleBgImageSave("");
-                        }}
-                      >
-                        恢复默认
-                      </Button>
-                    )}
-                    <Button 
-                      color="primary" 
-                      isDisabled={!admin}
-                      isLoading={bgImageSaving}
-                      onPress={() => handleBgImageSave()}
-                    >
-                      保存背景
-                    </Button>
-                  </div>
-                  {!admin && (
-                    <p className="mt-2 text-xs text-amber-600 dark:text-amber-400">
-                      仅管理员可修改该全局配置。
-                    </p>
-                  )}
-                </div>
-              </div>
-            </CardBody>
-          </Card>
-
          <Card>
            <CardBody className="p-6">
              <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
@@ -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,24 +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: var(--custom-bg-image) no-repeat center center fixed !important;
+  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	53e1efcdc1	style: improve glassmorphism UI for background adaptability (#420 ) Increase backdrop blur and lower white/black background opacity on inner elements (tables, charts, tabs). Apply higher blur to admin layout sidebar and H5 layout navigation bar. Remove solid backgrounds inside nested cards to inherit background themes.	2026-04-06 10:23:16 +08:00
sagitchu	71d5c36ec3	style: improve glassmorphism UI for background adaptability - Increase backdrop blur and lower white/black background opacity on inner elements (tables, charts, tabs) - Apply higher blur to admin layout sidebar and H5 layout navigation bar - Remove solid backgrounds inside nested cards to inherit background themes	2026-04-06 10:21:06 +08:00
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