feat(theme): 尝试适配 1.0.5 更新，实现背景自定义功能

- 新增主题配置项，允许用户通过 Komari 后台自定义背景图片、切换时间和过渡效果。
- 更新 GitHub Actions 发布流程，改用 `softprops/action-gh-release@v2` 以简化发布和资产上传步骤。
- 为国旗图片添加懒加载（`loading="lazy"`），优化页面加载性能。

.github/workflows/build.yaml

@@ -81,24 +81,13 @@ jobs:
 
       - name: Create Release
         if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v')
-        id: create_release
+        uses: softprops/action-gh-release@v2
-        uses: actions/create-release@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          tag_name: ${{ github.ref }}
+          tag_name: ${{ github.ref_name }}
-          release_name: Release ${{ github.ref_name }}
+          name: Release ${{ github.ref_name }}
           body: ${{ env.CHANGELOG }}
           draft: false
           prerelease: false
-
+          files: ${{ env.ZIP_NAME }}
-      - name: Upload Release Asset
-        if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v')
-        uses: actions/upload-release-asset@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: ./${{ env.ZIP_NAME }}
-          asset_name: ${{ env.ZIP_NAME }}
-          asset_content_type: application/zip

komari-theme.json

@@ -1,9 +1,42 @@
 {
-    "name": "Komari Theme PurCarte",
+    "name": "Komari Theme PurCart",
     "short": "PurCarte",
     "description": "A frosted glass theme for Komari",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "author": "Montia & Gemini",
     "url": "https://github.com/Montia37/Komari-theme-purcarte",
-    "preview": "preview.png"
+    "preview": "preview.png",
+    "configuration": {
+        "type": "managed",
+        "data": [
+            {
+                "name": "背景",
+                "type": "title"
+            },
+            {
+                "key": "backgroundImage",
+                "name": "背景图片链接",
+                "type": "string",
+                "required": false,
+                "default": "https://i.yon.li/w/682f73d97eade.png",
+                "help": "多张图片请以英文逗号分隔（eg:https://img.com/1.png,https://test.com/2.jpg）"
+            },
+            {
+                "key": "switchTime",
+                "name": "切换时间（秒）",
+                "type": "number",
+                "required": false,
+                "default": 10,
+                "help": "背景图片切换的时间间隔，单位为秒（仅设置多张图片时生效）"
+            },
+            {
+                "key": "transition",
+                "name": "背景切换过渡效果",
+                "type": "string",
+                "required": false,
+                "default": "background-image 0.8s ease-in-out",
+                "help": "CSS 过渡效果，用于背景图片切换时的动画效果（仅设置多张图片时生效）"
+            }
+        ]
+    }
 }

src/components/sections/Background.ts

@@ -0,0 +1,99 @@
+import { useEffect, useState, useMemo } from "react";
+import { BACKGROUND } from "@/config/default";
+import type { PublicInfo } from "@/types/node.d";
+
+/**
+ * 动态背景组件
+ * 根据设定的时间间隔自动切换背景图片
+ * 并预加载所有图片以提高用户体验
+ * 支持自定义过渡效果和切换时间
+ */
+interface ThemeSettings {
+  backgroundImage?: string; // 逗号分隔的背景图片URL列表
+  switchTime?: number; // 背景切换时间间隔(秒)
+  transition?: string; // CSS过渡效果
+}
+
+interface BackgroundProps {
+  publicSettings: PublicInfo;
+}
+
+function DynamicPseudoBackground({ publicSettings }: BackgroundProps) {
+  const theme = (publicSettings?.theme_settings as ThemeSettings) || {};
+
+  // 使用 useMemo 缓存背景图片列表，避免每次渲染时重新计算
+  const imageList = useMemo(() => {
+    return theme.backgroundImage
+      ? theme.backgroundImage.split(",").map((url) => url.trim())
+      : [BACKGROUND.backgroundImage];
+  }, [theme.backgroundImage]);
+
+  // 将切换时间从秒转换为毫秒
+  const switchTime = useMemo(() => {
+    return (theme.switchTime || BACKGROUND.switchTime) * 1000;
+  }, [theme.switchTime]);
+
+  const transition = useMemo(() => {
+    return theme.transition || BACKGROUND.transition;
+  }, [theme.transition]);
+
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const currentImageUrl = imageList[currentImageIndex];
+
+  // 预加载指定的图片
+  const preloadImage = (url: string) => {
+    if (!url) return;
+    const img = new Image();
+    img.src = url;
+  };
+
+  // 预加载所有图片，只在组件初始化或图片列表变化时执行一次
+  useEffect(() => {
+    // 只有当有多张图片时才设置过渡效果
+    if (imageList.length > 1) {
+      document.body.style.setProperty(
+        "--body-background-transition",
+        transition
+      );
+
+      // 预加载所有图片以提高用户体验
+      imageList.forEach((url) => {
+        preloadImage(url);
+      });
+    }
+
+    // 组件卸载时清理
+    return () => {
+      document.body.style.removeProperty("--body-background-transition");
+    };
+  }, [imageList, transition]);
+
+  // 背景切换逻辑
+  useEffect(() => {
+    // 当当前图片URL变化时，更新CSS变量
+    document.body.style.setProperty(
+      "--body-background-url",
+      `url(${currentImageUrl})`
+    );
+
+    // 只有当有多张图片时才设置定时器进行轮换
+    let intervalId: number | undefined;
+    if (imageList.length > 1) {
+      intervalId = window.setInterval(() => {
+        setCurrentImageIndex((prevIndex) => (prevIndex + 1) % imageList.length);
+      }, switchTime);
+    }
+
+    // 清理函数，组件卸载或依赖项变化时执行
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [currentImageUrl, imageList, switchTime]);
+
+  // 此组件不渲染任何可见内容
+  return null;
+}
+
+export default DynamicPseudoBackground;

src/components/sections/Flag.tsx

@@ -93,6 +93,7 @@ const Flag = React.memo(({ flag, size }: FlagProps) => {
         src={imgSrc}
         alt={altText}
         style={{ width: "100%", height: "100%", objectFit: "contain" }}
+        loading="lazy"
       />
     </Box>
   );

src/config/default.ts

@@ -0,0 +1,5 @@
+export const BACKGROUND = {
+  backgroundImage: "https://i.yon.li/w/682f73d97eade.png",
+  switchTime: 10, // 10 seconds
+  transition: "background-image 0.8s ease-in-out", // CSS transition for background change
+};

src/index.css

@@ -79,6 +79,9 @@
   /* Frosted Glass Variables */
   --frosted-bg-light: rgba(255, 255, 255, 0.1);
   --frosted-border-light: rgba(255, 255, 255, 0.2);
+
+  --body-background-url: url("");
+  --body-background-transition: background-image 0.8s ease-in-out;
 }
 
 .dark {
@@ -132,6 +135,19 @@
   }
 }
 
+/* 背景图片伪元素 */
+body::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background: var(--body-background-url) center/cover no-repeat;
+  transition: var(--body-background-transition);
+}
+
 .striped-bg-red-translucent-diagonal {
   background-image: linear-gradient(
     45deg,

src/main.tsx

@@ -5,6 +5,7 @@ import "./index.css";
 import "@radix-ui/themes/styles.css";
 import { Theme } from "@radix-ui/themes";
 import { Header } from "@/components/sections/Header";
+import DynamicPseudoBackground from "@/components/sections/Background";
 import { useTheme } from "@/hooks/useTheme";
 import { NodeDataProvider } from "@/contexts/NodeDataContext";
 import { LiveDataProvider } from "@/contexts/LiveDataContext";
@@ -45,6 +46,10 @@ const App = () => {
       appearance="inherit"
       scaling="110%"
       style={{ backgroundColor: "transparent" }}>
+      {/* 使用动态背景组件 */}
+      {publicSettings && (
+        <DynamicPseudoBackground publicSettings={publicSettings} />
+      )}
       <div className="min-h-screen flex flex-col text-sm">
         <Header
           viewMode={viewMode}

src/types/node.d.ts

@@ -58,6 +58,7 @@ export interface PublicInfo {
   record_enabled: boolean;
   record_preserve_time: number;
   sitename: string;
+  theme_settings: object | null;
 }
 
 export interface HistoryRecord {

src/utils/formatHelper.ts

@@ -7,12 +7,12 @@ export function cn(...inputs: ClassValue[]) {
 
 // Helper function to format bytes
 export const formatBytes = (bytes: number, isSpeed = false, decimals = 2) => {
-  if (bytes === 0) return isSpeed ? "0 B/s" : "0 Bytes";
+  if (bytes === 0) return isSpeed ? "0 B/s" : "0 B";
   const k = 1024;
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = isSpeed
     ? ["B/s", "KB/s", "MB/s", "GB/s", "TB/s"]
-    : ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB"];
+    : ["B", "KB", "MB", "GB", "TB", "PB", "EB"];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
 };
@@ -52,7 +52,7 @@ export const formatPrice = (
   billingCycle: number
 ) => {
   if (price === -1) return "免费";
-  if (price === 0) return "未设置";
+  if (price === 0) return "";
   if (!currency || !billingCycle) return "N/A";
 
   let cycleStr = `${billingCycle}天`;