feat(display): background photo groups with blurred, compressed and original versions; veil, sway and blur options in the appearance panel [CI]

web/display/src/parallax.ts

@@ -1,5 +1,5 @@
 import { useEffect, type RefObject } from 'react'
-import { getAppearance } from './appearance'
+import { getAppearance, subscribeAppearance } from './appearance'
 
 /** 指针在窗口里的位置带来的偏移上限（像素）：鼠标停在窗口边缘时背景偏这么多。 */
 const POSITION_SHIFT = 30
@@ -53,7 +53,7 @@ export function useBackgroundParallax(layer: RefObject<HTMLElement | null>) {
     const clamp = (value: number) => Math.max(-SWAY_MAX, Math.min(SWAY_MAX, value))
     const move = (event: PointerEvent) => {
       // 位置：指针在窗口里的位置换成 -1 到 1（背景朝同一个方向偏移，想要反方向就把符号取反）
-      const amount = getAppearance().parallax
+      const amount = swayAmount()
       baseX = ((event.clientX / window.innerWidth) * 2 - 1) * POSITION_SHIFT * amount
       baseY = ((event.clientY / window.innerHeight) * 2 - 1) * POSITION_SHIFT * amount
       // 晃动：这一次移动了多远，就再推背景一把
@@ -65,6 +65,11 @@ export function useBackgroundParallax(layer: RefObject<HTMLElement | null>) {
       lastY = event.clientY
       schedule()
     }
+    // 晃动的幅度：总开关关了就是 0
+    const swayAmount = () => {
+      const { sway, parallax } = getAppearance()
+      return sway ? parallax : 0
+    }
     const leave = () => {
       baseX = 0
       baseY = 0
@@ -75,7 +80,16 @@ export function useBackgroundParallax(layer: RefObject<HTMLElement | null>) {
 
     window.addEventListener('pointermove', move, { passive: true })
     document.documentElement.addEventListener('mouseleave', leave)
+    // 设置里把晃动关了：背景慢慢回到中间，不用等下一次鼠标移动
+    const unsubscribe = subscribeAppearance(() => {
+      if (swayAmount() === 0) {
+        swayX = 0
+        swayY = 0
+        leave()
+      }
+    })
     return () => {
+      unsubscribe()
       window.removeEventListener('pointermove', move)
       document.documentElement.removeEventListener('mouseleave', leave)
       cancelAnimationFrame(frame)