feat(theme): 新增主题可配置项，优化代码逻辑和样式

-  在 `komari-theme.json` 中添加了新的配置选项
- 支持自定义标题栏、内容区、实例页面和通用UI元素
- 优化部分组件调用逻辑
- 优化页面样式

src/config/ConfigContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import type { ConfigOptions } from "./default";
+import { DEFAULT_CONFIG } from "./default";
+
+// 创建配置上下文
+export const ConfigContext = createContext<ConfigOptions>(DEFAULT_CONFIG);

src/config/ConfigProvider.tsx

@@ -0,0 +1,73 @@
+import { type ReactNode, useEffect, useMemo } from "react";
+import type { PublicInfo } from "@/types/node.d";
+import { ConfigContext } from "./ConfigContext";
+import { DEFAULT_CONFIG, type ConfigOptions } from "./default";
+
+// 配置提供者属性类型
+interface ConfigProviderProps {
+  publicSettings: PublicInfo | null; // 公共设置，可能为 null
+  children: ReactNode;
+}
+
+/**
+ * 配置提供者组件，用于将配置传递给子组件
+ */
+export function ConfigProvider({
+  publicSettings,
+  children,
+}: ConfigProviderProps) {
+  const theme = useMemo(() => {
+    return (publicSettings?.theme_settings as ConfigOptions) || {};
+  }, [publicSettings?.theme_settings]);
+
+  // 使用 useMemo 缓存背景图片，避免每次渲染时重新计算
+  const backgroundImage = useMemo(() => {
+    return theme.backgroundImage || "";
+  }, [theme.backgroundImage]);
+
+  // 背景切换逻辑
+  useEffect(() => {
+    if (backgroundImage) {
+      document.body.style.setProperty(
+        "--body-background-url",
+        `url(${backgroundImage})`
+      );
+    } else {
+      document.body.style.removeProperty("--body-background-url");
+    }
+  }, [backgroundImage]);
+
+  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 || 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,
+      pingChartMaxPoints:
+        theme.pingChartMaxPoints || DEFAULT_CONFIG.pingChartMaxPoints,
+      backgroundImage,
+    }),
+    [theme, backgroundImage]
+  );
+
+  return (
+    <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
+  );
+}

src/config/default.ts

@@ -1,5 +1,38 @@
-export const BACKGROUND = {
-  backgroundImage: "",
-  //   switchTime: 10, // 10 seconds
-  //   transition: "background-image 0.8s ease-in-out", // CSS transition for background change
+// 配置类型定义
+export interface ConfigOptions {
+  backgroundImage?: string; // 背景图片URL
+  tagDefaultColorList?: 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; // 是否启用分组栏
+  enableInstanceDetail?: boolean; // 是否启用实例详情
+  enablePingChart?: boolean; // 是否启用延迟图表
+  pingChartMaxPoints?: number; // 延迟图表最大点数
+}
+
+// 默认配置值
+export const DEFAULT_CONFIG: ConfigOptions = {
+  backgroundImage: "/assets/Moonlit-Scenery.webp",
+  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,
+  logoUrl: "/assets/logo.png",
+  enableTitle: true,
+  titleText: "Komari",
+  enableSearchButton: true,
+  selectedDefaultView: "grid",
+  selectedDefaultAppearance: "system",
+  enableAdminButton: true,
+  enableStatsBar: true,
+  enableGroupedBar: true,
+  enableInstanceDetail: true,
+  enablePingChart: true,
+  pingChartMaxPoints: 0,
 };

src/config/hooks.ts

@@ -0,0 +1,26 @@
+import { useContext } from "react";
+import type { ConfigOptions } from "./default";
+import { ConfigContext } from "./ConfigContext";
+
+/**
+ * 使用全局配置 Hook，用于获取当前应用配置
+ * @returns 配置对象
+ */
+export function useAppConfig(): ConfigOptions {
+  return useContext(ConfigContext);
+}
+
+/**
+ * 使用特定配置项 Hook，直接获取某个配置项的值
+ * @param key 配置项键名
+ * @returns 配置项的值
+ */
+export function useConfigItem<K extends keyof ConfigOptions>(
+  key: K
+): ConfigOptions[K] {
+  const config = useContext(ConfigContext);
+  return config[key];
+}
+
+// 导出配置类型
+export type { ConfigOptions } from "./default";

src/config/index.ts

@@ -0,0 +1,5 @@
+// 从各个文件中导出
+export { ConfigProvider } from "./ConfigProvider";
+export { useAppConfig, useConfigItem } from "./hooks";
+export type { ConfigOptions } from "./hooks";
+export { DEFAULT_CONFIG } from "./default";