From 9a8bc891af68c0264b50a7429871bfcbc96054e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E5=8F=89=E6=A0=91=E6=A0=91?= <acofork@qq.com>
Date: Tue, 30 Dec 2025 00:16:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=83=8C=E6=99=AF=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=A6=81=E7=94=A8=E8=83=8C=E6=99=AF=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E5=BD=A9=E8=99=B9=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在设置工具中添加获取和设置背景隐藏状态的函数
- 在布局组件中加载背景隐藏状态
- 在显示设置组件中添加禁用背景的开关
- 优化彩虹模式动画逻辑，重置背景旋转角度
- 在页脚添加服务器信息显示
---
 src/components/Footer.astro                  | 17 +++++++++++-
 src/components/widget/DisplaySettings.svelte | 28 ++++++++++++++++++--
 src/layouts/Layout.astro                     |  3 ++-
 src/utils/setting-utils.ts                   | 23 ++++++++++++++++
 4 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 74dbaf88a..04ab1dea9 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -16,7 +16,10 @@ try {
     const year = date.getFullYear();
     const month = (date.getMonth() + 1).toString().padStart(2, '0');
     const day = date.getDate().toString().padStart(2, '0');
-    buildDate = `${year}-${month}-${day}`;
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    const seconds = date.getSeconds().toString().padStart(2, '0');
+    buildDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 } catch (e) {
     console.warn("Failed to get git info", e);
 }
@@ -45,7 +48,19 @@ try {
 
 		<a class="transition link text-[var(--primary)] font-medium inline-flex items-center" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"><img alt="" src="/favicon/foot-icp.png" class="h-4 mr-1">皖ICP备2025099787号-2</a>
         <br>
+        <span id="server-info" class="text-black/30 dark:text-white/30 text-xs"></span>
          <!-- <a class="transition link text-[var(--primary)] font-medium inline-flex items-center" href="https://beian.mps.gov.cn/#/query/webSearch?code=34010302002608" target="_blank"><img alt="" src="/favicon/foot-ga.png" class="h-4 mr-1">皖公网安备34010302002608号</a>
         <br> -->
     </div>
 </div>
+
+<script>
+    fetch(window.location.href, { method: "HEAD" }).then(response => {
+        const server = response.headers.get('server');
+        const serverInfo = document.getElementById('server-info');
+        if (serverInfo) {
+            if (server) {
+                serverInfo.innerText = `访问节点: ${server}`;
+        }
+    });
+</script>
diff --git a/src/components/widget/DisplaySettings.svelte b/src/components/widget/DisplaySettings.svelte
index 8ec4792ac..e487b982d 100644
--- a/src/components/widget/DisplaySettings.svelte
+++ b/src/components/widget/DisplaySettings.svelte
@@ -13,6 +13,9 @@ import {
 	setRainbowSpeed,
 	getBgBlur,
 	setBgBlur,
+    setBgHueRotate,
+    getHideBg,
+    setHideBg,
 } from "@utils/setting-utils";
 import { AUTO_MODE, DARK_MODE, LIGHT_MODE } from "@constants/constants";
 
@@ -21,7 +24,10 @@ let theme = getStoredTheme();
 let isRainbowMode = getRainbowMode();
 let rainbowSpeed = getRainbowSpeed();
 let bgBlur = getBgBlur();
+let hideBg = getHideBg();
 let animationId: number;
+let lastUpdate = 0;
+let rainbowHue = 0; // Independent hue for background rotation
 
 const defaultHue = getDefaultHue();
 
@@ -56,13 +62,21 @@ function toggleRainbow() {
 	setRainbowMode(isRainbowMode);
 
 	if (isRainbowMode) {
-		updateRainbow();
+		lastUpdate = performance.now();
+        rainbowHue = 0; // Reset rotation start
+		animationId = requestAnimationFrame(updateRainbow);
 	} else {
 		cancelAnimationFrame(animationId);
-		setHue(hue, true);
+        // Reset background rotation to 0 when stopped
+        setBgHueRotate(0);
 	}
 }
 
+function toggleHideBg() {
+	hideBg = !hideBg;
+	setHideBg(hideBg);
+}
+
 function onSpeedChange() {
 	setRainbowSpeed(rainbowSpeed);
 }
@@ -134,6 +148,16 @@ onMount(() => {
                class="slider" id="colorSlider" step="1" style="width: 100%">
     </div>
 
+    <div class="flex flex-row gap-2 mb-3 items-center justify-between">
+        <div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
+            before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
+            before:absolute before:-left-3 before:top-[0.33rem]"
+        >
+            禁用背景
+        </div>
+        <input type="checkbox" class="toggle-switch" checked={hideBg} on:change={toggleHideBg} />
+    </div>
+
     <div class="flex flex-row gap-2 mb-3 items-center justify-between">
         <div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
             before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d573325c6..04d64bf1c 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -403,7 +403,7 @@ import {
 	// SizeObserverPlugin,
 	// ClickScrollPlugin
 } from 'overlayscrollbars';
-import {getHue, getStoredTheme, setHue, setTheme, getBgBlur, setBgBlur} from "../utils/setting-utils";
+import {getHue, getStoredTheme, setHue, setTheme, getBgBlur, setBgBlur, getHideBg, setHideBg} from "../utils/setting-utils";
 import {pathsEqual, url} from "../utils/url-utils";
 import {
 	BANNER_HEIGHT,
@@ -489,6 +489,7 @@ function loadHue() {
 
 function loadBgBlur() {
 	setBgBlur(getBgBlur())
+    setHideBg(getHideBg())
 }
 
 function initCustomScrollbar() {
diff --git a/src/utils/setting-utils.ts b/src/utils/setting-utils.ts
index a00b77c50..e6506412e 100644
--- a/src/utils/setting-utils.ts
+++ b/src/utils/setting-utils.ts
@@ -71,6 +71,29 @@ export function setBgHueRotate(hue: number): void {
     }
 }
 
+export function getBgHueRotate(): number {
+    const bgBox = document.getElementById("bg-box");
+    if (bgBox) {
+        const currentFilter = bgBox.style.filter || "";
+        const hueRotateMatch = currentFilter.match(/hue-rotate\((.*?)deg\)/);
+        return hueRotateMatch ? Number.parseInt(hueRotateMatch[1]) : 0;
+    }
+    return 0;
+}
+
+export function getHideBg(): boolean {
+	const stored = localStorage.getItem("hide-bg");
+	return stored === "true";
+}
+
+export function setHideBg(hide: boolean): void {
+	localStorage.setItem("hide-bg", String(hide));
+	const bgBox = document.getElementById("bg-box");
+	if (bgBox) {
+		bgBox.style.setProperty("display", hide ? "none" : "");
+	}
+}
+
 export function applyThemeToDocument(theme: LIGHT_DARK_MODE) {
 	switch (theme) {
 		case LIGHT_MODE: