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

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

src/main.tsx

@@ -5,7 +5,7 @@ import "./index.css";
 import "@radix-ui/themes/styles.css";
 import { Theme } from "@radix-ui/themes";
 import { Header } from "@/components/sections/Header";
-import Background from "@/components/sections/Background";
+import { ConfigProvider } from "@/config";
 import { useTheme } from "@/hooks/useTheme";
 import { NodeDataProvider } from "@/contexts/NodeDataContext";
 import { LiveDataProvider } from "@/contexts/LiveDataContext";
@@ -17,60 +17,57 @@ const HomePage = lazy(() => import("@/pages/Home"));
 const InstancePage = lazy(() => import("@/pages/instance"));
 const NotFoundPage = lazy(() => import("@/pages/NotFound"));
 
+import { useConfigItem } from "@/config";
+
 // eslint-disable-next-line react-refresh/only-export-components
 const App = () => {
   const { theme, toggleTheme } = useTheme();
   const { publicSettings } = useNodeData();
-  const [viewMode, setViewMode] = useState<"card" | "list">(() => {
+  const defaultView = useConfigItem("selectedDefaultView");
+
+  const [viewMode, setViewMode] = useState<"grid" | "table">(() => {
     const savedMode = localStorage.getItem("nodeViewMode");
-    if (savedMode === "table") {
-      return "list";
-    }
-    return "card";
+    return savedMode === "grid" || savedMode === "table"
+      ? savedMode
+      : defaultView || "grid";
   });
   const [searchTerm, setSearchTerm] = useState("");
 
-  const sitename = publicSettings ? publicSettings.sitename : "Komari";
-
   useEffect(() => {
-    document.title = sitename;
-  }, [sitename]);
-
-  useEffect(() => {
-    const modeToStore = viewMode === "card" ? "grid" : "table";
-    localStorage.setItem("nodeViewMode", modeToStore);
+    localStorage.setItem("nodeViewMode", viewMode);
   }, [viewMode]);
 
   return (
-    <Theme
-      appearance="inherit"
-      scaling="110%"
-      style={{ backgroundColor: "transparent" }}>
-      {/* 使用背景组件 */}
-      {publicSettings && <Background publicSettings={publicSettings} />}
-      <div className="min-h-screen flex flex-col text-sm">
-        <Header
-          viewMode={viewMode}
-          setViewMode={setViewMode}
-          theme={theme}
-          toggleTheme={toggleTheme}
-          sitename={sitename}
-          searchTerm={searchTerm}
-          setSearchTerm={setSearchTerm}
-        />
-        <Suspense fallback={<Loading />}>
-          <Routes>
-            <Route
-              path="/"
-              element={<HomePage viewMode={viewMode} searchTerm={searchTerm} />}
-            />
-            <Route path="/instance/:uuid" element={<InstancePage />} />
-            <Route path="*" element={<NotFoundPage />} />
-          </Routes>
-        </Suspense>
-        <Footer />
-      </div>
-    </Theme>
+    <ConfigProvider publicSettings={publicSettings}>
+      <Theme
+        appearance="inherit"
+        scaling="110%"
+        style={{ backgroundColor: "transparent" }}>
+        <div className="min-h-screen flex flex-col text-sm">
+          <Header
+            viewMode={viewMode}
+            setViewMode={setViewMode}
+            theme={theme}
+            toggleTheme={toggleTheme}
+            searchTerm={searchTerm}
+            setSearchTerm={setSearchTerm}
+          />
+          <Suspense fallback={<Loading />}>
+            <Routes>
+              <Route
+                path="/"
+                element={
+                  <HomePage viewMode={viewMode} searchTerm={searchTerm} />
+                }
+              />
+              <Route path="/instance/:uuid" element={<InstancePage />} />
+              <Route path="*" element={<NotFoundPage />} />
+            </Routes>
+          </Suspense>
+          <Footer />
+        </div>
+      </Theme>
+    </ConfigProvider>
   );
 };