feat: 尝试支持配置视频背景

2025-10-18 19:39:22 +08:00 · 2025-09-08 03:03:31 +08:00
parent 743048bb25
commit 369ac3333f
7 changed files with 85 additions and 38 deletions
--- a/README.md
+++ b/README.md
@@ -62,9 +62,12 @@

 | 名称 | 配置项 | 类型 | 默认值 | 说明 |
 | :--- | :--- | :--- | :--- | :--- |
-| 背景图片链接 | `backgroundImage` | `string` | `/assets/Moonlit-Scenery.webp` | 目前仅支持单张背景图片（eg: https://test.com/1.png） |
+| 背景图片链接 | `backgroundImage` | `string` | `/assets/Moonlit-Scenery.webp` | 目前仅支持单张背景图片（eg: https://test.com/1.png ） |
+| 启用视频背景 | `enableVedioBackground` | `switch` | `false` | 启用后将使用视频作为背景 |
+| 视频背景链接 | `vedioBackgroundUrl` | `string` | `/assets/Mortis_1080p30fps2Mbps.mp4` | 视频背景链接（eg: https://test.com/1.mp4 ），建议使用无声视频，且视频文件较大时可能会影响加载速度 |
+| 启用磨砂玻璃效果 | `enableBlur` | `switch` | `true` | 启用后将使主要容器拥有磨砂玻璃效果 |
 | 磨砂玻璃模糊值 | `blurValue` | `number` | `10` | 调整模糊值大小，数值越大模糊效果越明显，建议值为 5-20，为 0 则表示不启用模糊效果 |
-| 磨砂玻璃背景色 | `blurBackgroundColor` | `string` | `rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)` | 调整模糊背景色，推荐 rgba 颜色值，使用“|”分隔亮色模式和暗色模式的颜色值（eg: rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)） |
+| 磨砂玻璃背景色 | `blurBackgroundColor` | `string` | `rgba(255, 255, 255, 0.5)\|rgba(0, 0, 0, 0.5)` | 调整模糊背景色，推荐 rgba 颜色值，使用“\|”分隔亮色模式和暗色模式的颜色值（eg: rgba(255, 255, 255, 0.5)\|rgba(0, 0, 0, 0.5)） |
 | 标签默认颜色列表 | `tagDefaultColorList` | `string` | `ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red` | 标签默认颜色列表，展示的标签将按顺序调用该颜色池，逗号分隔（可用的颜色列表请参考：https://www.radix-ui.com/themes/docs/theme/color ，改完没有生效则说明填写有误） |
 | 启用 localStorage 配置 | `enableLocalStorage` | `switch` | `true` | 启用后将优先使用用户浏览器本地配置的视图和外观设置。关闭后将强制使用下方的主题配置，本地可调整但刷新即恢复 |
 | 默认展示视图 | `selectedDefaultView` | `select` | `grid` | 设置默认展示视图为网格或表格 |
@@ -78,7 +81,7 @@
 | 启用标题栏左侧 Logo | `enableLogo` | `switch` | `false` | 启用后默认在标题栏左侧显示 Logo |
 | Logo 图片链接 | `logoUrl` | `string` | `/assets/logo.png` | Logo 图片链接（eg: https://test.com/logo.png） |
 | 启用标题栏标题 | `enableTitle` | `switch` | `true` | 启用后默认在顶栏左侧显示标题 |
-| 标题栏标题文本 | `titleText` | `string` |  | 标题栏左侧显示的文本（留空则使用站点标题） |
+| 标题栏标题文本 | `titleText` | `string` | &nbsp; | 标题栏左侧显示的文本（留空则使用站点标题） |
 | 启用搜索按钮 | `enableSearchButton` | `switch` | `true` | 启用后默认在标题栏右侧显示搜索按钮 |
 | 启用管理按钮 | `enableAdminButton` | `switch` | `true` | 启用后默认在标题栏右侧显示管理按钮 |

--- a/komari-theme.json
+++ b/komari-theme.json
@@ -20,6 +20,27 @@
                "default": "/assets/Moonlit-Scenery.webp",
                "help": "目前仅支持单张背景图片（eg: https://test.com/1.png）"
            },
+            {
+                "key": "enableVedioBackground",
+                "name": "启用视频背景",
+                "type": "switch",
+                "default": false,
+                "help": "启用后将使用视频作为背景"
+            },
+            {
+                "key": "vedioBackgroundUrl",
+                "name": "视频背景链接",
+                "type": "string",
+                "default": "/assets/Mortis_1080p30fps2Mbps.mp4",
+                "help": "视频背景链接（eg: https://test.com/1.mp4），建议使用无声视频，且视频文件较大时可能会影响加载速度"
+            },
+            {
+                "key": "enableBlur",
+                "name": "启用磨砂玻璃效果",
+                "type": "switch",
+                "default": true,
+                "help": "启用后将使主要容器拥有磨砂玻璃效果"
+            },
            {
                "key": "blurValue",
                "name": "磨砂玻璃模糊值",
--- a/public/assets/Mortis_1080p30fps2Mbps.mp4
+++ b/public/assets/Mortis_1080p30fps2Mbps.mp4
--- a/src/components/sections/Header.tsx
+++ b/src/components/sections/Header.tsx
@@ -13,7 +13,7 @@ import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { useIsMobile } from "@/hooks/useMobile";
 import { useConfigItem } from "@/config";
-import type { Appearance } from "@/hooks/useTheme";
+import { useTheme } from "@/hooks/useTheme";
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -24,8 +24,6 @@ import {
 interface HeaderProps {
  viewMode: "grid" | "table";
  setViewMode: (mode: "grid" | "table") => void;
-  appearance: Appearance;
-  setAppearance: (appearance: Appearance) => void;
  searchTerm: string;
  setSearchTerm: (term: string) => void;
 }
@@ -33,11 +31,10 @@ interface HeaderProps {
 export const Header = ({
  viewMode,
  setViewMode,
-  appearance,
-  setAppearance,
  searchTerm,
  setSearchTerm,
 }: HeaderProps) => {
+  const { appearance, setAppearance } = useTheme();
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const location = useLocation();
  const isInstancePage = location.pathname.startsWith("/instance");
@@ -56,8 +53,7 @@ export const Header = ({
  }, [sitename]);

  const toggleAppearance = () => {
-    const newAppearance = appearance === "light" ? "dark" : "light";
-    setAppearance(newAppearance);
+    setAppearance(appearance === "light" ? "dark" : "light");
  };

  return (
--- a/src/config/default.ts
+++ b/src/config/default.ts
@@ -1,6 +1,8 @@
 // 配置类型定义
 export interface ConfigOptions {
  backgroundImage?: string; // 背景图片URL
+  enableVideoBackground?: boolean; // 是否启用视频背景
+  videoBackgroundUrl?: string; // 视频背景URL
  blurValue?: number; // 磨砂玻璃模糊值
  blurBackgroundColor?: string; // 磨砂玻璃背景颜色
  tagDefaultColorList?: string; // 标签默认颜色列表
@@ -27,6 +29,8 @@ export interface ConfigOptions {
 // 默认配置值
 export const DEFAULT_CONFIG: ConfigOptions = {
  backgroundImage: "/assets/Moonlit-Scenery.webp",
+  enableVideoBackground: false,
+  videoBackgroundUrl: "/assets/Mortis_1080p30fps2Mbps.mp4",
  blurValue: 10,
  blurBackgroundColor: "rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)",
  tagDefaultColorList:
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -86,6 +86,16 @@ export const useTheme = () => {
    return (defaultColor as Colors) || THEME_DEFAULTS.color;
  });

+  useEffect(() => {
+    if (appearance === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+      setAppearance(systemTheme);
+    }
+  }, [appearance]);
+
  useEffect(() => {
    const root = window.document.documentElement;
    root.classList.remove("light", "dark");
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -21,7 +21,7 @@ import { useConfigItem } from "@/config";

 // 内部应用组件，在 ConfigProvider 内部使用配置
 export const AppContent = () => {
-  const { appearance, setAppearance, color } = useTheme();
+  const { appearance, color } = useTheme();
  const defaultView = useConfigItem("selectedDefaultView");
  const enableLocalStorage = useConfigItem("enableLocalStorage");

@@ -36,6 +36,8 @@ export const AppContent = () => {
    return defaultView || "grid";
  });
  const [searchTerm, setSearchTerm] = useState("");
+  const enableVideoBackground = useConfigItem("enableVideoBackground");
+  const videoBackgroundUrl = useConfigItem("videoBackgroundUrl");

  useEffect(() => {
    if (enableLocalStorage) {
@@ -44,33 +46,44 @@ export const AppContent = () => {
  }, [enableLocalStorage, viewMode]);

  return (
-    <Theme
-      appearance={appearance === "system" ? "inherit" : appearance}
-      accentColor={color}
-      scaling="110%"
-      style={{ backgroundColor: "transparent" }}>
-      <div className="min-h-screen flex flex-col text-sm">
-        <Header
-          viewMode={viewMode}
-          setViewMode={setViewMode}
-          appearance={appearance}
-          setAppearance={setAppearance}
-          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>
+    <>
+      {enableVideoBackground && videoBackgroundUrl && (
+        <video
+          src={videoBackgroundUrl as string}
+          autoPlay
+          loop
+          muted
+          playsInline
+          className="fixed right-0 bottom-0 min-w-full min-h-full w-auto h-auto -z-1 object-cover"></video>
+      )}
+      <Theme
+        appearance={appearance === "system" ? "inherit" : appearance}
+        accentColor={color}
+        scaling="110%"
+        style={{ backgroundColor: "transparent" }}>
+        <div className="min-h-screen flex flex-col text-sm">
+          <Header
+            viewMode={viewMode}
+            setViewMode={setViewMode}
+            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>
+    </>
  );
 };