juluo/fuwari
1
0
Fork 0
mirror of https://github.com/afoim/fuwari.git synced 2026-01-31 09:03:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(显示设置): 添加背景模糊功能

Browse Source 
在显示设置中添加背景模糊控制功能，包括滑块调节和本地存储
修改卡片背景样式，增加模糊效果并调整透明度
This commit is contained in:
二叉树树
2025-12-28 20:36:20 +08:00
parent 3c976f29ed
commit 4e57b489de
6 changed files with 51 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/widget/DisplaySettings.svelte
View File

@@ -11,6 +11,8 @@ import {
setRainbowMode, setRainbowMode,
getRainbowSpeed, getRainbowSpeed,
setRainbowSpeed, setRainbowSpeed,
getBgBlur,
setBgBlur,
} from "@utils/setting-utils"; } from "@utils/setting-utils";
import { AUTO_MODE, DARK_MODE, LIGHT_MODE } from "@constants/constants"; import { AUTO_MODE, DARK_MODE, LIGHT_MODE } from "@constants/constants";
@@ -18,6 +20,7 @@ let hue = getHue();
let theme = getStoredTheme(); let theme = getStoredTheme();
let isRainbowMode = getRainbowMode(); let isRainbowMode = getRainbowMode();
let rainbowSpeed = getRainbowSpeed(); let rainbowSpeed = getRainbowSpeed();
let bgBlur = getBgBlur();
let animationId: number; let animationId: number;
const defaultHue = getDefaultHue(); const defaultHue = getDefaultHue();
@@ -30,6 +33,10 @@ $: if ((hue || hue === 0) && !isRainbowMode) {
setHue(hue); setHue(hue);
} }
$: {
setBgBlur(bgBlur);
}
function switchTheme(newTheme: string) { function switchTheme(newTheme: string) {
theme = newTheme; theme = newTheme;
setTheme(newTheme); setTheme(newTheme);
@@ -157,6 +164,25 @@ onMount(() => {
class="slider" step="1" style="width: 100%"> class="slider" step="1" style="width: 100%">
</div> </div>
{/if} {/if}
<div class="flex flex-row gap-2 mb-3 mt-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>
<div class="flex gap-1">
<div class="transition bg-[var(--btn-regular-bg)] w-10 h-7 rounded-md flex justify-center
font-bold text-sm items-center text-[var(--btn-content)]">
{bgBlur}px
</div>
</div>
</div>
<div class="w-full h-6 px-1 bg-[var(--btn-regular-bg)] rounded select-none">
<input aria-label="背景模糊" type="range" min="0" max="20" bind:value={bgBlur}
class="slider" step="1" style="width: 100%">
</div>
</div> </div>

2
src/config.ts
View File

@@ -42,7 +42,7 @@ export const siteConfig: SiteConfig = {
size: "cover", // Background size: 'cover', 'contain', 'auto' size: "cover", // Background size: 'cover', 'contain', 'auto'
repeat: "no-repeat", // Background repeat: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y' repeat: "no-repeat", // Background repeat: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'
attachment: "fixed", // Background attachment: 'fixed', 'scroll', 'local' attachment: "fixed", // Background attachment: 'fixed', 'scroll', 'local'
opacity: 0.5, // Background opacity (0-1) opacity: 1, // Background opacity (0-1)
}, },
toc: { toc: {
enable: true, // Display the table of contents on the right side of the post enable: true, // Display the table of contents on the right side of the post

10
src/layouts/Layout.astro
View File

@@ -236,10 +236,11 @@ const bannerOffset =
#bg-box.loaded { #bg-box.loaded {
opacity: calc(var(--bg-opacity) * var(--bg-enable)); opacity: calc(var(--bg-opacity) * var(--bg-enable));
} }
</style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why --> </style>
<slot name="head"></slot> <slot name="head"></slot>
<link rel="alternate" type="application/rss+xml" title={profileConfig.name} href={`${Astro.site}rss.xml`}/> <link rel="alternate" type="application/rss+xml" title={profileConfig.name} href={`${Astro.site}rss.xml`}/>
<!-- Umami分析（自建） --> <!-- Umami分析（自建） -->
<script defer src="https://umami.acofork.com/script.js" data-website-id="5d710dbd-3a2e-43e3-a553-97b415090c63" data-swup-ignore-script></script> <script defer src="https://umami.acofork.com/script.js" data-website-id="5d710dbd-3a2e-43e3-a553-97b415090c63" data-swup-ignore-script></script>
@@ -402,7 +403,7 @@ import {
// SizeObserverPlugin, // SizeObserverPlugin,
// ClickScrollPlugin // ClickScrollPlugin
} from 'overlayscrollbars'; } from 'overlayscrollbars';
import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils"; import {getHue, getStoredTheme, setHue, setTheme, getBgBlur, setBgBlur} from "../utils/setting-utils";
import {pathsEqual, url} from "../utils/url-utils"; import {pathsEqual, url} from "../utils/url-utils";
import { import {
BANNER_HEIGHT, BANNER_HEIGHT,
@@ -486,6 +487,10 @@ function loadHue() {
setHue(getHue()) setHue(getHue())
} }
function loadBgBlur() {
setBgBlur(getBgBlur())
}
function initCustomScrollbar() { function initCustomScrollbar() {
const bodyElement = document.querySelector('body'); const bodyElement = document.querySelector('body');
if (!bodyElement) return; if (!bodyElement) return;
@@ -532,6 +537,7 @@ function init() {
// disableAnimation()() // TODO // disableAnimation()() // TODO
loadTheme(); loadTheme();
loadHue(); loadHue();
loadBgBlur();
initCustomScrollbar(); initCustomScrollbar();
showBanner(); showBanner();
} }

2
src/styles/main.css
View File

@@ -3,6 +3,8 @@
@layer components { @layer components {
.card-base { .card-base {
@apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition; @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
} }
h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong { h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
@apply transition; @apply transition;

2
src/styles/variables.styl
View File

@@ -25,7 +25,7 @@ define(vars)
define({ define({
--primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue)) --primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
--page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue)) --page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue))
--card-bg: rgba(255, 255, 255, 0.9) unquote("oklch(0.23 0.015 var(--hue) / 0.9)") --card-bg: rgba(255, 255, 255, 0.75) unquote("oklch(0.23 0.015 var(--hue) / 0.75)")
--card-bg-transparent: rgba(255, 255, 255, 0.8) rgba(23, 23, 23, 0.8) --card-bg-transparent: rgba(255, 255, 255, 0.8) rgba(23, 23, 23, 0.8)
--btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue)) --btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue))

13
src/utils/setting-utils.ts
View File

@@ -47,6 +47,19 @@ export function setRainbowSpeed(speed: number): void {
localStorage.setItem("rainbow-speed", String(speed)); localStorage.setItem("rainbow-speed", String(speed));
} }
export function getBgBlur(): number {
const stored = localStorage.getItem("bg-blur");
return stored ? Number.parseInt(stored) : 0; // Default blur is 0
}
export function setBgBlur(blur: number): void {
localStorage.setItem("bg-blur", String(blur));
const bgBox = document.getElementById("bg-box");
if (bgBox) {
bgBox.style.setProperty("filter", `blur(${blur}px)`);
}
}
export function applyThemeToDocument(theme: LIGHT_DARK_MODE) { export function applyThemeToDocument(theme: LIGHT_DARK_MODE) {
switch (theme) { switch (theme) {
case LIGHT_MODE: case LIGHT_MODE: