feat: 初步适配主题颜色效果

src/config/ConfigProvider.tsx

@@ -16,30 +16,24 @@ export function ConfigProvider({
   publicSettings,
   children,
 }: ConfigProviderProps) {
-  const theme = useMemo(() => {
-    return (publicSettings?.theme_settings as ConfigOptions) || {};
-  }, [publicSettings?.theme_settings]);
+  const config: ConfigOptions = useMemo(() => {
+    const themeSettings =
+      (publicSettings?.theme_settings as ConfigOptions) || {};
+    const mergedConfig = {
+      ...DEFAULT_CONFIG,
+      ...themeSettings,
+      titleText:
+        themeSettings.titleText ||
+        publicSettings?.sitename ||
+        DEFAULT_CONFIG.titleText,
+    };
 
-  // 使用 useMemo 缓存背景图片，避免每次渲染时重新计算
-  const backgroundImage = useMemo(() => {
-    return theme.backgroundImage || "";
-  }, [theme.backgroundImage]);
+    return mergedConfig;
+  }, [publicSettings]);
 
-  // 使用 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(() => {
-    // 设置背景图片
+    const { backgroundImage, blurValue, blurBackgroundColor } = config;
+
     if (backgroundImage) {
       document.body.style.setProperty(
         "--body-background-url",
@@ -49,74 +43,24 @@ export function ConfigProvider({
       document.body.style.removeProperty("--body-background-url");
     }
 
-    // 设置模糊值
     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(
-    () => ({
-      tagDefaultColorList:
-        theme.tagDefaultColorList || DEFAULT_CONFIG.tagDefaultColorList,
-      enableLogo: theme.enableLogo ?? DEFAULT_CONFIG.enableLogo,
-      logoUrl: theme.logoUrl || DEFAULT_CONFIG.logoUrl,
-      enableTitle: theme.enableTitle ?? DEFAULT_CONFIG.enableTitle,
-      titleText:
-        theme.titleText || publicSettings?.sitename || DEFAULT_CONFIG.titleText,
-      enableSearchButton:
-        theme.enableSearchButton ?? DEFAULT_CONFIG.enableSearchButton,
-      selectedDefaultView:
-        theme.selectedDefaultView || DEFAULT_CONFIG.selectedDefaultView,
-      selectedDefaultAppearance:
-        theme.selectedDefaultAppearance ||
-        DEFAULT_CONFIG.selectedDefaultAppearance,
-      enableAdminButton:
-        theme.enableAdminButton ?? DEFAULT_CONFIG.enableAdminButton,
-      enableStatsBar: theme.enableStatsBar ?? DEFAULT_CONFIG.enableStatsBar,
-      enableGroupedBar:
-        theme.enableGroupedBar ?? DEFAULT_CONFIG.enableGroupedBar,
-      enableInstanceDetail:
-        theme.enableInstanceDetail ?? DEFAULT_CONFIG.enableInstanceDetail,
-      enablePingChart: theme.enablePingChart ?? DEFAULT_CONFIG.enablePingChart,
-      enableConnectBreaks:
-        theme.enableConnectBreaks ?? DEFAULT_CONFIG.enableConnectBreaks,
-      pingChartMaxPoints:
-        theme.pingChartMaxPoints || DEFAULT_CONFIG.pingChartMaxPoints,
-      backgroundImage,
-      blurValue,
-      blurBackgroundColor,
-      enableSwap: theme.enableSwap ?? DEFAULT_CONFIG.enableSwap,
-      enableListItemProgressBar:
-        theme.enableListItemProgressBar ??
-        DEFAULT_CONFIG.enableListItemProgressBar,
-    }),
-    [
-      theme,
-      backgroundImage,
-      blurValue,
-      blurBackgroundColor,
-      publicSettings?.sitename,
-    ]
-  );
+  }, [config]);
 
   return (
     <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>

src/config/default.ts

@@ -4,13 +4,15 @@ export interface ConfigOptions {
   blurValue?: number; // 磨砂玻璃模糊值
   blurBackgroundColor?: string; // 磨砂玻璃背景颜色
   tagDefaultColorList?: string; // 标签默认颜色列表
+  enableLocalStorage?: boolean; // 是否启用本地存储
+  selectedDefaultView?: "grid" | "table"; // 默认视图模式
+  selectedDefaultAppearance?: "light" | "dark" | "system"; // 默认外观模式
+  selectThemeColor?: string; // 默认主题颜色
   enableLogo?: boolean; // 是否启用Logo
   logoUrl?: string; // Logo图片URL
   enableTitle?: boolean; // 是否启用标题
   titleText?: string; // 标题文本
   enableSearchButton?: boolean; // 是否启用搜索按钮
-  selectedDefaultView?: "grid" | "table"; // 默认视图模式
-  selectedDefaultAppearance?: "light" | "dark" | "system"; // 默认外观模式
   enableAdminButton?: boolean; // 是否启用管理员按钮
   enableStatsBar?: boolean; // 是否启用统计栏
   enableGroupedBar?: boolean; // 是否启用分组栏
@@ -28,14 +30,16 @@ export const DEFAULT_CONFIG: ConfigOptions = {
   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",
+    "ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red",
+  enableLocalStorage: true,
+  selectedDefaultView: "grid",
+  selectedDefaultAppearance: "system",
+  selectThemeColor: "gray",
   enableLogo: false,
   logoUrl: "/assets/logo.png",
   enableTitle: true,
   titleText: "Komari",
   enableSearchButton: true,
-  selectedDefaultView: "grid",
-  selectedDefaultAppearance: "system",
   enableAdminButton: true,
   enableStatsBar: true,
   enableGroupedBar: true,