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,