feat(背景设置): 添加禁用背景功能并优化彩虹模式

- 在设置工具中添加获取和设置背景隐藏状态的函数
- 在布局组件中加载背景隐藏状态
- 在显示设置组件中添加禁用背景的开关
- 优化彩虹模式动画逻辑,重置背景旋转角度
- 在页脚添加服务器信息显示
This commit is contained in:
二叉树树
2025-12-30 00:16:01 +08:00
parent d39d49b2fa
commit 9a8bc891af
4 changed files with 67 additions and 4 deletions

View File

@@ -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>

View File

@@ -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)]

View File

@@ -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() {

View File

@@ -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: