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 (