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

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

src/components/sections/Background.ts

@@ -1,39 +0,0 @@
-import { useEffect, useMemo } from "react";
-import { BACKGROUND } from "@/config/default";
-import type { PublicInfo } from "@/types/node.d";
-
-/**
- * 动态效果不佳，暂时仅使用静态背景
- */
-interface ThemeSettings {
-  backgroundImage?: string; // 背景图片URL
-}
-
-interface BackgroundProps {
-  publicSettings: PublicInfo;
-}
-
-function Background({ publicSettings }: BackgroundProps) {
-  const theme = (publicSettings?.theme_settings as ThemeSettings) || {};
-
-  // 使用 useMemo 缓存背景图片列表，避免每次渲染时重新计算
-  const imageUrl = useMemo(() => {
-    return theme.backgroundImage
-      ? theme.backgroundImage
-      : BACKGROUND.backgroundImage;
-  }, [theme.backgroundImage]);
-
-  // 背景切换逻辑
-  useEffect(() => {
-    // 当当前图片URL变化时，更新CSS变量
-    document.body.style.setProperty(
-      "--body-background-url",
-      `url(${imageUrl})`
-    );
-  }, [imageUrl]);
-
-  // 此组件不渲染任何可见内容
-  return null;
-}
-
-export default Background;

src/components/sections/Header.tsx

@@ -8,16 +8,16 @@ import {
   Sun,
   CircleUserIcon,
 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { useIsMobile } from "@/hooks/useMobile";
+import { useConfigItem } from "@/config";
 
 interface HeaderProps {
-  viewMode: "card" | "list";
-  setViewMode: (mode: "card" | "list") => void;
+  viewMode: "grid" | "table";
+  setViewMode: (mode: "grid" | "table") => void;
   theme: string;
   toggleTheme: () => void;
-  sitename: string;
   searchTerm: string;
   setSearchTerm: (term: string) => void;
 }
@@ -27,7 +27,6 @@ export const Header = ({
   setViewMode,
   theme,
   toggleTheme,
-  sitename,
   searchTerm,
   setSearchTerm,
 }: HeaderProps) => {
@@ -35,13 +34,30 @@ export const Header = ({
   const location = useLocation();
   const isInstancePage = location.pathname.startsWith("/instance");
   const isMobile = useIsMobile();
+  const enableTitle = useConfigItem("enableTitle");
+  const sitename = useConfigItem("titleText");
+  const enableLogo = useConfigItem("enableLogo");
+  const logoUrl = useConfigItem("logoUrl");
+  const enableSearchButton = useConfigItem("enableSearchButton");
+  const enableAdminButton = useConfigItem("enableAdminButton");
+
+  useEffect(() => {
+    if (sitename) {
+      document.title = sitename;
+    }
+  }, [sitename]);
 
   return (
     <header className="bg-background/60 backdrop-blur-[10px] border-b border-border/60 sticky top-0 flex items-center justify-center shadow-sm z-10">
       <div className="w-[90%] max-w-screen-2xl px-4 py-2 flex items-center justify-between">
         <div className="flex items-center text-shadow-lg text-accent-foreground">
-          <a href="/" className="text-2xl font-bold">
-            {sitename}
+          <a href="/" className="flex items-center gap-2 text-2xl font-bold">
+            {enableLogo && logoUrl && (
+              <img src={logoUrl} alt="logo" className="h-8" />
+            )}
+            {enableTitle && (
+              <span className="hidden md:inline">{sitename}</span>
+            )}
           </a>
         </div>
         <div className="flex items-center space-x-2">
@@ -81,19 +97,21 @@ export const Header = ({
                   />
                 </div>
               )}
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setIsSearchOpen(!isSearchOpen)}>
-                <Search className="size-5 text-primary" />
-              </Button>
+              {enableSearchButton && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setIsSearchOpen(!isSearchOpen)}>
+                  <Search className="size-5 text-primary" />
+                </Button>
+              )}
               <Button
                 variant="ghost"
                 size="icon"
                 onClick={() =>
-                  setViewMode(viewMode === "card" ? "list" : "card")
+                  setViewMode(viewMode === "grid" ? "table" : "grid")
                 }>
-                {viewMode === "card" ? (
+                {viewMode === "grid" ? (
                   <Table2 className="size-5 text-primary" />
                 ) : (
                   <Grid3X3 className="size-5 text-primary" />
@@ -108,11 +126,13 @@ export const Header = ({
               <Moon className="size-5 text-primary" />
             )}
           </Button>
-          <a href="/admin" target="_blank" rel="noopener noreferrer">
-            <Button variant="ghost" size="icon">
-              <CircleUserIcon className="size-5 text-primary" />
-            </Button>
-          </a>
+          {enableAdminButton && (
+            <a href="/admin" target="_blank" rel="noopener noreferrer">
+              <Button variant="ghost" size="icon">
+                <CircleUserIcon className="size-5 text-primary" />
+              </Button>
+            </a>
+          )}
         </div>
       </div>
     </header>

src/components/sections/NodeCard.tsx

@@ -6,25 +6,12 @@ import { CpuIcon, MemoryStickIcon, HardDriveIcon } from "lucide-react";
 import Flag from "./Flag";
 import { Tag } from "../ui/tag";
 import { useNodeCommons } from "@/hooks/useNodeCommons";
+import { ProgressBar } from "../ui/progress-bar";
 
 interface NodeCardProps {
   node: NodeWithStatus;
 }
 
-const ProgressBar = ({
-  value,
-  className,
-}: {
-  value: number;
-  className?: string;
-}) => (
-  <div className="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700">
-    <div
-      className={`h-3 rounded-full ${className}`}
-      style={{ width: `${value}%` }}></div>
-  </div>
-);
-
 export const NodeCard = ({ node }: NodeCardProps) => {
   const {
     stats,

src/components/ui/progress-bar.tsx

@@ -0,0 +1,13 @@
+export const ProgressBar = ({
+  value,
+  className,
+}: {
+  value: number;
+  className?: string;
+}) => (
+  <div className="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700">
+    <div
+      className={`h-3 rounded-full transition-all duration-500 ${className}`}
+      style={{ width: `${value}%` }}></div>
+  </div>
+);

src/components/ui/tag.tsx

@@ -1,12 +1,14 @@
 import { Badge } from "@radix-ui/themes";
 import React from "react";
 import { cn } from "@/utils";
+import { useConfigItem } from "@/config";
 
 interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
   tags: string[];
 }
 
-const colors: Array<
+// 定义颜色类型
+type ColorType =
   | "ruby"
   | "gray"
   | "gold"
@@ -32,65 +34,61 @@ const colors: Array<
   | "grass"
   | "lime"
   | "mint"
-  | "sky"
-> = [
-  "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",
-];
+  | "sky";
 
+// 默认颜色列表，将在组件内部使用
+const defaultColorList: ColorType[] = [
+  "blue",
+  "red",
+  "green",
+  "yellow",
+  "purple",
+  "cyan",
+  "orange",
+  "pink",
+];
 // 解析带颜色的标签
-const parseTagWithColor = (tag: string) => {
+const parseTagWithColor = (tag: string, availableColors: ColorType[]) => {
   const colorMatch = tag.match(/<(\w+)>$/);
   if (colorMatch) {
     const color = colorMatch[1].toLowerCase();
     const text = tag.replace(/<\w+>$/, "");
     // 检查颜色是否在支持的颜色列表中
-    if (colors.includes(color as any)) {
-      return { text, color: color as (typeof colors)[number] };
+    if (availableColors.includes(color as ColorType)) {
+      return { text, color: color as ColorType };
     }
   }
-  return { text: tag, color: null };
+  return { text: tag, color: null as unknown as ColorType | null };
 };
 
 const Tag = React.forwardRef<HTMLDivElement, TagProps>(
   ({ className, tags, ...props }, ref) => {
+    // 在组件内部使用 useConfigItem 钩子
+    const tagDefaultColorList = useConfigItem("tagDefaultColorList");
+
+    // 解析配置的颜色列表
+    const colorList = React.useMemo(() => {
+      if (!tagDefaultColorList) {
+        return defaultColorList;
+      }
+      return tagDefaultColorList
+        .split(",")
+        .map((color: string) => color.trim()) as ColorType[];
+    }, [tagDefaultColorList]);
+
     return (
       <div
         ref={ref}
         className={cn("flex flex-wrap gap-1", className)}
         {...props}>
         {tags.map((tag, index) => {
-          const { text, color } = parseTagWithColor(tag);
-          const badgeColor = color || colors[index % colors.length];
+          const { text, color } = parseTagWithColor(tag, colorList);
+          const badgeColor = color || colorList[index % colorList.length];
 
           return (
             <Badge
               key={index}
-              color={badgeColor}
+              color={badgeColor as ColorType}
               variant="soft"
               className="text-sm">
               <label className="text-xs">{text}</label>