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

web/display/src/backgrounds.ts

@@ -0,0 +1,81 @@
+import bgBlurLight from './assets/bg.jpg'
+import bgBlurDark from './assets/bg-dark.jpg'
+import bgSharpLight from './assets/bg-sharp.jpg'
+import bgSharpDark from './assets/bg-sharp-dark.jpg'
+import bgOriginalLight from './assets/bg-sharp.png'
+import bgOriginalDark from './assets/bg-sharp-dark.png'
+import banaBlur from './assets/bg-bana.jpg'
+import banaSharp from './assets/bg-bana-sharp.jpg'
+import banaOriginal from './assets/bg-bana-sharp.png'
+import bana2Blur from './assets/bg-bana2.jpg'
+import bana2Sharp from './assets/bg-bana2-sharp.jpg'
+import bana2Original from './assets/bg-bana2-sharp.png'
+import photo86_3Blur from './assets/photo86-3-blur.jpg'
+import photo86_3 from './assets/photo86-3.jpg'
+import photo86_3Original from './assets/photo86-3-original.png'
+import photo86_7Blur from './assets/photo86-7-blur.jpg'
+import photo86_7 from './assets/photo86-7.jpg'
+import photo86_7Original from './assets/photo86-7-original.jpg'
+import photo86_2Blur from './assets/photo86-2-blur.jpg'
+import photo86_2 from './assets/photo86-2.jpg'
+import photo86_2Original from './assets/photo86-2-original.jpg'
+import photo86_8Blur from './assets/photo86-8-blur.jpg'
+import photo86_8 from './assets/photo86-8.jpg'
+import photo86_8Original from './assets/photo86-8-original.jpg'
+import photo86_5Blur from './assets/photo86-5-blur.jpg'
+import photo86_5 from './assets/photo86-5.jpg'
+import photo86_5Original from './assets/photo86-5-original.jpg'
+import photo86_6Blur from './assets/photo86-6-blur.jpg'
+import photo86_6 from './assets/photo86-6.jpg'
+import photo86_6Original from './assets/photo86-6-original.jpg'
+
+/** 一张照片的三个版本：blur 是预先模糊过的，sharp 是不模糊但压缩过的，original 是没压缩的原图。 */
+export interface Variants {
+  blur: string
+  sharp: string
+  original: string
+}
+
+/** 可选的背景照片：group 是分组（面板里一组一行），亮色和暗色可以是不同的两张，也可以是同一张。 */
+export interface Photo {
+  id: string
+  group: string
+  label: string
+  light: Variants
+  dark: Variants
+}
+
+const same = (variants: Variants) => ({ light: variants, dark: variants })
+
+/** 加一张照片：把它的三个版本放进 assets/，在这里加一项。第一项是默认的。 */
+export const PHOTOS: Photo[] = [
+  {
+    id: 'sleep',
+    group: 'shirobana',
+    label: '睡颜',
+    // 亮色睁眼、暗色闭眼
+    light: { blur: bgBlurLight, sharp: bgSharpLight, original: bgOriginalLight },
+    dark: { blur: bgBlurDark, sharp: bgSharpDark, original: bgOriginalDark },
+  },
+  { id: 'bana', group: 'shirobana', label: '伸手', ...same({ blur: banaBlur, sharp: banaSharp, original: banaOriginal }) },
+  { id: 'bana2', group: 'shirobana', label: '海边', ...same({ blur: bana2Blur, sharp: bana2Sharp, original: bana2Original }) },
+  { id: '86-3', group: '86', label: '小憩', ...same({ blur: photo86_3Blur, sharp: photo86_3, original: photo86_3Original }) },
+  { id: '86-7', group: '86', label: '窗边', ...same({ blur: photo86_7Blur, sharp: photo86_7, original: photo86_7Original }) },
+  { id: '86-2', group: '86', label: '伞下', ...same({ blur: photo86_2Blur, sharp: photo86_2, original: photo86_2Original }) },
+  { id: '86-8', group: '86', label: '驾驶', ...same({ blur: photo86_8Blur, sharp: photo86_8, original: photo86_8Original }) },
+  { id: '86-5', group: '86', label: '怀中', ...same({ blur: photo86_5Blur, sharp: photo86_5, original: photo86_5Original }) },
+  { id: '86-6', group: '86', label: '倚靠', ...same({ blur: photo86_6Blur, sharp: photo86_6, original: photo86_6Original }) },
+]
+
+export const DEFAULT_PHOTO = PHOTOS[0].id
+
+/** 照片所在的分组，按出现的顺序。 */
+export const PHOTO_GROUPS = [...new Set(PHOTOS.map((photo) => photo.group))]
+
+export const findPhoto = (id: string): Photo => PHOTOS.find((photo) => photo.id === id) ?? PHOTOS[0]
+
+/** 当前该用哪张图：哪张照片、哪个主题，再按「背景模糊」「不压缩」选版本。 */
+export function backgroundUrl(id: string, dark: boolean, blurred: boolean, original: boolean): string {
+  const variants = dark ? findPhoto(id).dark : findPhoto(id).light
+  return blurred ? variants.blur : original ? variants.original : variants.sharp
+}