mirror of
https://github.com/afoim/fuwari.git
synced 2026-01-31 09:03:18 +08:00
feat(背景设置): 添加禁用背景功能并优化彩虹模式
- 在设置工具中添加获取和设置背景隐藏状态的函数 - 在布局组件中加载背景隐藏状态 - 在显示设置组件中添加禁用背景的开关 - 优化彩虹模式动画逻辑,重置背景旋转角度 - 在页脚添加服务器信息显示
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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)]
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user