feat: 添加磨砂玻璃效果自定义配置及相关样式支持

src/config/ConfigProvider.tsx

@@ -25,8 +25,21 @@ export function ConfigProvider({
     return theme.backgroundImage || "";
   }, [theme.backgroundImage]);
 
-  // 背景切换逻辑
+  // 使用 useMemo 缓存模糊值，避免每次渲染时重新计算
+  const blurValue = useMemo(() => {
+    return theme.blurValue ?? DEFAULT_CONFIG.blurValue ?? 10;
+  }, [theme.blurValue]);
+
+  // 使用 useMemo 缓存模糊背景颜色，避免每次渲染时重新计算
+  const blurBackgroundColor = useMemo(() => {
+    return (
+      theme.blurBackgroundColor || DEFAULT_CONFIG.blurBackgroundColor || ""
+    );
+  }, [theme.blurBackgroundColor]);
+
+  // 合并的样式设置逻辑
   useEffect(() => {
+    // 设置背景图片
     if (backgroundImage) {
       document.body.style.setProperty(
         "--body-background-url",
@@ -35,7 +48,30 @@ export function ConfigProvider({
     } else {
       document.body.style.removeProperty("--body-background-url");
     }
-  }, [backgroundImage]);
+
+    // 设置模糊值
+    document.documentElement.style.setProperty(
+      "--purcarte-blur",
+      `${blurValue}px`
+    );
+
+    // 设置模糊背景颜色（亮色/暗色模式）
+    if (blurBackgroundColor) {
+      // 解析颜色字符串，支持逗号分隔的亮色,暗色
+      const colors = blurBackgroundColor
+        .split("|")
+        .map((color) => color.trim());
+      if (colors.length >= 2) {
+        // 第一个颜色用于亮色模式，第二个颜色用于暗色模式
+        document.documentElement.style.setProperty("--card-light", colors[0]);
+        document.documentElement.style.setProperty("--card-dark", colors[1]);
+      } else if (colors.length === 1) {
+        // 只有一个颜色，同时用于亮色和暗色模式
+        document.documentElement.style.setProperty("--card-light", colors[0]);
+        document.documentElement.style.setProperty("--card-dark", colors[0]);
+      }
+    }
+  }, [backgroundImage, blurValue, blurBackgroundColor]);
 
   const config: ConfigOptions = useMemo(
     () => ({
@@ -64,8 +100,17 @@ export function ConfigProvider({
       pingChartMaxPoints:
         theme.pingChartMaxPoints || DEFAULT_CONFIG.pingChartMaxPoints,
       backgroundImage,
+      blurValue,
+      blurBackgroundColor,
+      enableSwap: theme.enableSwap ?? DEFAULT_CONFIG.enableSwap,
     }),
-    [theme, backgroundImage, publicSettings?.sitename]
+    [
+      theme,
+      backgroundImage,
+      blurValue,
+      blurBackgroundColor,
+      publicSettings?.sitename,
+    ]
   );
 
   return (

src/config/default.ts

@@ -1,6 +1,8 @@
 // 配置类型定义
 export interface ConfigOptions {
   backgroundImage?: string; // 背景图片URL
+  blurValue?: number; // 磨砂玻璃模糊值
+  blurBackgroundColor?: string; // 磨砂玻璃背景颜色
   tagDefaultColorList?: string; // 标签默认颜色列表
   enableLogo?: boolean; // 是否启用Logo
   logoUrl?: string; // Logo图片URL
@@ -15,11 +17,14 @@ export interface ConfigOptions {
   enableInstanceDetail?: boolean; // 是否启用实例详情
   enablePingChart?: boolean; // 是否启用延迟图表
   pingChartMaxPoints?: number; // 延迟图表最大点数
+  enableSwap?: boolean; // 是否启用SWAP显示
 }
 
 // 默认配置值
 export const DEFAULT_CONFIG: ConfigOptions = {
   backgroundImage: "/assets/Moonlit-Scenery.webp",
+  blurValue: 10,
+  blurBackgroundColor: "rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)",
   tagDefaultColorList:
     "ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red,crimson,pink,plum,purple,violet,iris,indigo,blue,cyan,teal,jade,green,grass,lime,mint,sky",
   enableLogo: false,
@@ -35,4 +40,5 @@ export const DEFAULT_CONFIG: ConfigOptions = {
   enableInstanceDetail: true,
   enablePingChart: true,
   pingChartMaxPoints: 0,
+  enableSwap: true,
 };