From 044ce0c3394e86e119ebcadb334fbf55ba0ed42a Mon Sep 17 00:00:00 2001 From: JustMe Date: Fri, 9 Oct 2026 04:50:11 +0800 Subject: [PATCH] feat(display): background photo groups with blurred, compressed and original versions; veil, sway and blur options in the appearance panel [CI] --- web/display/src/AppearancePanel.tsx | 38 ++++++-- web/display/src/appearance.ts | 48 +++++++++-- web/display/src/assets/bg-bana-sharp.jpg | Bin 0 -> 192373 bytes web/display/src/assets/bg-bana-sharp.png | Bin 0 -> 1903915 bytes web/display/src/assets/bg-bana.jpg | Bin 0 -> 190914 bytes web/display/src/assets/bg-bana2-sharp.jpg | Bin 0 -> 211278 bytes web/display/src/assets/bg-bana2-sharp.png | Bin 0 -> 1965157 bytes web/display/src/assets/bg-bana2.jpg | Bin 0 -> 225430 bytes web/display/src/assets/bg-sharp-dark.jpg | Bin 0 -> 181542 bytes web/display/src/assets/bg-sharp-dark.png | Bin 0 -> 1915707 bytes web/display/src/assets/bg-sharp.jpg | Bin 0 -> 179621 bytes web/display/src/assets/bg-sharp.png | Bin 0 -> 1884835 bytes web/display/src/assets/photo86-2-blur.jpg | Bin 0 -> 357461 bytes web/display/src/assets/photo86-2-original.jpg | Bin 0 -> 414185 bytes web/display/src/assets/photo86-2.jpg | Bin 0 -> 361323 bytes web/display/src/assets/photo86-3-blur.jpg | Bin 0 -> 202552 bytes web/display/src/assets/photo86-3-original.png | Bin 0 -> 2093741 bytes web/display/src/assets/photo86-3.jpg | Bin 0 -> 225533 bytes web/display/src/assets/photo86-5-blur.jpg | Bin 0 -> 316294 bytes web/display/src/assets/photo86-5-original.jpg | Bin 0 -> 334758 bytes web/display/src/assets/photo86-5.jpg | Bin 0 -> 294717 bytes web/display/src/assets/photo86-6-blur.jpg | Bin 0 -> 310815 bytes web/display/src/assets/photo86-6-original.jpg | Bin 0 -> 330461 bytes web/display/src/assets/photo86-6.jpg | Bin 0 -> 290508 bytes web/display/src/assets/photo86-7-blur.jpg | Bin 0 -> 377919 bytes web/display/src/assets/photo86-7-original.jpg | Bin 0 -> 494247 bytes web/display/src/assets/photo86-7.jpg | Bin 0 -> 431106 bytes web/display/src/assets/photo86-8-blur.jpg | Bin 0 -> 318467 bytes web/display/src/assets/photo86-8-original.jpg | Bin 0 -> 356451 bytes web/display/src/assets/photo86-8.jpg | Bin 0 -> 321104 bytes web/display/src/backgroundTint.ts | 28 ++++-- web/display/src/backgrounds.ts | 81 ++++++++++++++++++ web/display/src/display.css | 75 ++++++++++++++-- web/display/src/parallax.ts | 18 +++- 34 files changed, 255 insertions(+), 33 deletions(-) create mode 100644 web/display/src/assets/bg-bana-sharp.jpg create mode 100644 web/display/src/assets/bg-bana-sharp.png create mode 100644 web/display/src/assets/bg-bana.jpg create mode 100644 web/display/src/assets/bg-bana2-sharp.jpg create mode 100644 web/display/src/assets/bg-bana2-sharp.png create mode 100644 web/display/src/assets/bg-bana2.jpg create mode 100644 web/display/src/assets/bg-sharp-dark.jpg create mode 100644 web/display/src/assets/bg-sharp-dark.png create mode 100644 web/display/src/assets/bg-sharp.jpg create mode 100644 web/display/src/assets/bg-sharp.png create mode 100644 web/display/src/assets/photo86-2-blur.jpg create mode 100644 web/display/src/assets/photo86-2-original.jpg create mode 100644 web/display/src/assets/photo86-2.jpg create mode 100644 web/display/src/assets/photo86-3-blur.jpg create mode 100644 web/display/src/assets/photo86-3-original.png create mode 100644 web/display/src/assets/photo86-3.jpg create mode 100644 web/display/src/assets/photo86-5-blur.jpg create mode 100644 web/display/src/assets/photo86-5-original.jpg create mode 100644 web/display/src/assets/photo86-5.jpg create mode 100644 web/display/src/assets/photo86-6-blur.jpg create mode 100644 web/display/src/assets/photo86-6-original.jpg create mode 100644 web/display/src/assets/photo86-6.jpg create mode 100644 web/display/src/assets/photo86-7-blur.jpg create mode 100644 web/display/src/assets/photo86-7-original.jpg create mode 100644 web/display/src/assets/photo86-7.jpg create mode 100644 web/display/src/assets/photo86-8-blur.jpg create mode 100644 web/display/src/assets/photo86-8-original.jpg create mode 100644 web/display/src/assets/photo86-8.jpg create mode 100644 web/display/src/backgrounds.ts diff --git a/web/display/src/AppearancePanel.tsx b/web/display/src/AppearancePanel.tsx index d944bb1..dbdc8a0 100644 --- a/web/display/src/AppearancePanel.tsx +++ b/web/display/src/AppearancePanel.tsx @@ -1,5 +1,6 @@ import { useEffect, useRef, useState } from 'react' import { APPEARANCE_DEFAULTS, APPEARANCE_RANGES, resetAppearance, setAppearance, useAppearance, type AppearanceSettings } from './appearance' +import { PHOTO_GROUPS, PHOTOS } from './backgrounds' type Tab = 'weather' | 'background' @@ -8,6 +9,8 @@ type SliderName = keyof typeof APPEARANCE_RANGES interface Slider { name: SliderName label: string + /** 悬停提示。 */ + hint?: string /** 数值怎么显示：默认是百分比。 */ format?: (value: number) => string } @@ -29,17 +32,18 @@ const WEATHER_SWITCHES: { name: 'mouse' | 'bullet'; label: string; hint: string ] const BACKGROUND_SLIDERS: Slider[] = [ - { name: 'bgBlur', label: '模糊', format: (value) => `${value}px` }, + { name: 'bgBlur', label: '再模糊', format: (value) => `${value}px` }, { name: 'parallax', label: '晃动' }, + { name: 'bgVeil', label: '遮罩', hint: '盖在背景图上的那层灰色（暗色）/ 白色（亮色），0% 就是不盖' }, ] const WEATHER_KEYS: (keyof AppearanceSettings)[] = ['enabled', 'density', 'speed', 'wind', 'size', 'blur', 'opacity', 'bullet', 'mouse'] -const BACKGROUND_KEYS: (keyof AppearanceSettings)[] = ['bgBlur', 'parallax'] +const BACKGROUND_KEYS: (keyof AppearanceSettings)[] = ['photo', 'bgBlurred', 'bgBlur', 'bgOriginal', 'sway', 'parallax', 'bgVeil'] function SliderRow({ slider, settings, disabled }: { slider: Slider; settings: AppearanceSettings; disabled?: boolean }) { - const { name, label, format = percent } = slider + const { name, label, hint, format = percent } = slider return ( -