Merge pull request #1 from Montia37/dev

适配 Komari v1.0.5 动态配置主题

.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

README.md

@@ -31,7 +31,15 @@
 
 ### 配置背景图片
 
-为获得最佳视觉效果，建议搭配背景图片使用。请在 `Komari 后台 > 设置 > 站点 > 自定义 Body` 处添加以下代码并保存：
+> 为获得最佳视觉效果，建议搭配背景图片使用。
+
+#### Komari v1.0.5 及以上版本
+
+如果 Komari 版本为 v1.0.5 或更高版本，可直接在 `Komari 后台 > PurCarte设置` 中配置背景图片等主题选项，无需手动添加自定义代码
+
+#### 旧版本配置方法
+
+对于旧版本，请在 `Komari 后台 > 设置 > 站点 > 自定义 Body` 处添加以下代码并保存：
 
 ```html
 <style>

komari-theme.json

@@ -1,9 +1,26 @@
 {
-    "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": "/assets/Moonlit-Scenery.webp",
+                "help": "目前仅支持单张背景图片（eg: https://test.com/1.png）"
+            }
+        ]
+    }
 }

src/components/sections/Background.ts

@@ -0,0 +1,39 @@
+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/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: "",
+  //   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 Background from "@/components/sections/Background";
 import { useTheme } from "@/hooks/useTheme";
 import { NodeDataProvider } from "@/contexts/NodeDataContext";
 import { LiveDataProvider } from "@/contexts/LiveDataContext";
@@ -45,6 +46,8 @@ const App = () => {
       appearance="inherit"
       scaling="110%"
       style={{ backgroundColor: "transparent" }}>
+      {/* 使用背景组件 */}
+      {publicSettings && <Background 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}天`;