From b834e2348ceb10025231c4d2c7ac4d3b2976dd1e Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 24 Dec 2025 21:56:07 +0800
Subject: [PATCH] refactor(stage-web): better structure of backgrounds, fix
 color issue

---
 .../Backgrounds/ChromaticWavePreview.vue      | 15 -------------
 ...roundPickerDialog.vue => DialogPicker.vue} |  0
 ...{CustomizedBackground.vue => Provider.vue} | 22 +++----------------
 .../components/Backgrounds/default/index.ts   |  4 ++++
 .../components/Backgrounds/default/index.vue  | 20 +++++++++++++++++
 .../default/part-animated-wave.vue}           |  0
 .../{Cross.vue => default/pattern-cross.vue}  |  0
 .../Backgrounds/default/preview.vue           | 20 +++++++++++++++++
 .../src/components/Backgrounds/index.ts       |  2 ++
 .../Layouts/MobileInteractiveArea.vue         |  5 +++--
 .../components/Widgets/ChatActionButtons.vue  |  4 ++--
 apps/stage-web/src/pages/index.vue            |  8 +++----
 apps/stage-web/src/stores/background.ts       |  4 ++--
 13 files changed, 60 insertions(+), 44 deletions(-)
 delete mode 100644 apps/stage-web/src/components/Backgrounds/ChromaticWavePreview.vue
 rename apps/stage-web/src/components/Backgrounds/{AppBackgroundPickerDialog.vue => DialogPicker.vue} (100%)
 rename apps/stage-web/src/components/Backgrounds/{CustomizedBackground.vue => Provider.vue} (73%)
 create mode 100644 apps/stage-web/src/components/Backgrounds/default/index.ts
 create mode 100644 apps/stage-web/src/components/Backgrounds/default/index.vue
 rename apps/stage-web/src/components/{Widgets/AnimatedWave.vue => Backgrounds/default/part-animated-wave.vue} (100%)
 rename apps/stage-web/src/components/Backgrounds/{Cross.vue => default/pattern-cross.vue} (100%)
 create mode 100644 apps/stage-web/src/components/Backgrounds/default/preview.vue
 create mode 100644 apps/stage-web/src/components/Backgrounds/index.ts

diff --git a/apps/stage-web/src/components/Backgrounds/ChromaticWavePreview.vue b/apps/stage-web/src/components/Backgrounds/ChromaticWavePreview.vue
deleted file mode 100644
index b3ff39e7c..000000000
--- a/apps/stage-web/src/components/Backgrounds/ChromaticWavePreview.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import AnimatedWave from '../Widgets/AnimatedWave.vue'
-import Cross from './Cross.vue'
-</script>
-
-<template>
-  <Cross>
-    <AnimatedWave
-      fill-color="linear-gradient(120deg, hsl(var(--chromatic-hue) 72% 75%), hsl(var(--chromatic-hue) 70% 62%))"
-      class="h-full w-full"
-    >
-      <div class="relative h-full w-full from-black/10 via-black/0 to-black/0 bg-gradient-to-b" />
-    </AnimatedWave>
-  </Cross>
-</template>
diff --git a/apps/stage-web/src/components/Backgrounds/AppBackgroundPickerDialog.vue b/apps/stage-web/src/components/Backgrounds/DialogPicker.vue
similarity index 100%
rename from apps/stage-web/src/components/Backgrounds/AppBackgroundPickerDialog.vue
rename to apps/stage-web/src/components/Backgrounds/DialogPicker.vue
diff --git a/apps/stage-web/src/components/Backgrounds/CustomizedBackground.vue b/apps/stage-web/src/components/Backgrounds/Provider.vue
similarity index 73%
rename from apps/stage-web/src/components/Backgrounds/CustomizedBackground.vue
rename to apps/stage-web/src/components/Backgrounds/Provider.vue
index 652e2b6d1..502ec3309 100644
--- a/apps/stage-web/src/components/Backgrounds/CustomizedBackground.vue
+++ b/apps/stage-web/src/components/Backgrounds/Provider.vue
@@ -3,29 +3,18 @@ import type { BackgroundItem } from '../../stores/background'
 
 import ThemeOverlay from '@proj-airi/stage-ui/components/ThemeOverlay.vue'
 
-import { useTheme } from '@proj-airi/ui'
-import { computed, ref } from 'vue'
-
-import AnimatedWave from '../Widgets/AnimatedWave.vue'
-import Cross from './Cross.vue'
+import { ref } from 'vue'
 
 import { BackgroundKind } from '../../stores/background'
+import { DefaultBackground } from '../Backgrounds/default'
 
 defineProps<{
   background: BackgroundItem
   topColor?: string
 }>()
 
-const { isDark: dark } = useTheme()
 const containerRef = ref<HTMLElement | null>(null)
 
-const waveFillColor = computed(() => {
-  const hue = 'var(--chromatic-hue)'
-  return dark.value
-    ? `hsl(${hue} 60% 32%)`
-    : `hsl(${hue} 75% 78%)`
-})
-
 defineExpose({
   surfaceEl: containerRef,
 })
@@ -39,12 +28,7 @@ defineExpose({
       :class="[(background.blur && background.kind !== BackgroundKind.Wave) ? 'blur-md scale-110' : '']"
     >
       <template v-if="background.kind === BackgroundKind.Wave">
-        <Cross class="h-full w-full">
-          <AnimatedWave
-            class="h-full w-full"
-            :fill-color="waveFillColor"
-          />
-        </Cross>
+        <DefaultBackground class="h-full w-full" />
       </template>
       <template v-else-if="background.kind === BackgroundKind.Image">
         <img
diff --git a/apps/stage-web/src/components/Backgrounds/default/index.ts b/apps/stage-web/src/components/Backgrounds/default/index.ts
new file mode 100644
index 000000000..d393f9ed0
--- /dev/null
+++ b/apps/stage-web/src/components/Backgrounds/default/index.ts
@@ -0,0 +1,4 @@
+export { default as DefaultBackground } from './index.vue'
+export { default as PartAnimatedWave } from './part-animated-wave.vue'
+export { default as PatternCross } from './pattern-cross.vue'
+export { default as DefaultBackgroundPreview } from './preview.vue'
diff --git a/apps/stage-web/src/components/Backgrounds/default/index.vue b/apps/stage-web/src/components/Backgrounds/default/index.vue
new file mode 100644
index 000000000..0adf4b682
--- /dev/null
+++ b/apps/stage-web/src/components/Backgrounds/default/index.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useTheme } from '@proj-airi/ui'
+
+import { PartAnimatedWave, PatternCross } from '.'
+
+const { isDark } = useTheme()
+</script>
+
+<template>
+  <PatternCross>
+    <PartAnimatedWave
+      :fill-color="isDark
+        ? 'oklch(35% calc(var(--chromatic-chroma) * 0.6) var(--chromatic-hue))'
+        : 'color-mix(in srgb, oklch(95% calc(var(--chromatic-chroma-50) * 0.5) var(--chromatic-hue)) 80%, oklch(100% 0 360))'"
+      class="h-full w-full"
+    >
+      <slot />
+    </PartAnimatedWave>
+  </PatternCross>
+</template>
diff --git a/apps/stage-web/src/components/Widgets/AnimatedWave.vue b/apps/stage-web/src/components/Backgrounds/default/part-animated-wave.vue
similarity index 100%
rename from apps/stage-web/src/components/Widgets/AnimatedWave.vue
rename to apps/stage-web/src/components/Backgrounds/default/part-animated-wave.vue
diff --git a/apps/stage-web/src/components/Backgrounds/Cross.vue b/apps/stage-web/src/components/Backgrounds/default/pattern-cross.vue
similarity index 100%
rename from apps/stage-web/src/components/Backgrounds/Cross.vue
rename to apps/stage-web/src/components/Backgrounds/default/pattern-cross.vue
diff --git a/apps/stage-web/src/components/Backgrounds/default/preview.vue b/apps/stage-web/src/components/Backgrounds/default/preview.vue
new file mode 100644
index 000000000..a0f5cca14
--- /dev/null
+++ b/apps/stage-web/src/components/Backgrounds/default/preview.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useTheme } from '@proj-airi/ui'
+
+import { PartAnimatedWave, PatternCross } from '.'
+
+const { isDark } = useTheme()
+</script>
+
+<template>
+  <PatternCross>
+    <PartAnimatedWave
+      :fill-color="isDark
+        ? 'oklch(35% calc(var(--chromatic-chroma) * 0.6) var(--chromatic-hue))'
+        : 'color-mix(in srgb, oklch(95% calc(var(--chromatic-chroma-50) * 0.5) var(--chromatic-hue)) 80%, oklch(100% 0 360))'"
+      class="h-full w-full"
+    >
+      <div class="relative h-full w-full from-black/10 via-black/0 to-black/0 bg-gradient-to-b" />
+    </PartAnimatedWave>
+  </PatternCross>
+</template>
diff --git a/apps/stage-web/src/components/Backgrounds/index.ts b/apps/stage-web/src/components/Backgrounds/index.ts
new file mode 100644
index 000000000..82ec7dcef
--- /dev/null
+++ b/apps/stage-web/src/components/Backgrounds/index.ts
@@ -0,0 +1,2 @@
+export { default as BackgroundDialogPicker } from './DialogPicker.vue'
+export { default as BackgroundProvider } from './Provider.vue'
diff --git a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
index 3263b8fdf..d8689dda0 100644
--- a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
@@ -15,12 +15,13 @@ import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 
-import AppBackgroundPickerDialog from '../Backgrounds/AppBackgroundPickerDialog.vue'
 import IndicatorMicVolume from '../Widgets/IndicatorMicVolume.vue'
 import ActionAbout from './InteractiveArea/Actions/About.vue'
 import ActionViewControls from './InteractiveArea/Actions/ViewControls.vue'
 import ViewControlInputs from './ViewControls/Inputs.vue'
 
+import { BackgroundDialogPicker } from '../Backgrounds'
+
 const { isDark, toggleDark } = useTheme()
 const hearingDialogOpen = ref(false)
 const { messages, sending, streamingMessage } = storeToRefs(useChatStore())
@@ -132,7 +133,7 @@ onMounted(() => {
 
 <template>
   <div fixed bottom-0 w-full flex flex-col>
-    <AppBackgroundPickerDialog v-model="backgroundDialogOpen" />
+    <BackgroundDialogPicker v-model="backgroundDialogOpen" />
     <KeepAlive>
       <Transition name="fade">
         <ChatHistory
diff --git a/apps/stage-web/src/components/Widgets/ChatActionButtons.vue b/apps/stage-web/src/components/Widgets/ChatActionButtons.vue
index 2485b324d..b35962681 100644
--- a/apps/stage-web/src/components/Widgets/ChatActionButtons.vue
+++ b/apps/stage-web/src/components/Widgets/ChatActionButtons.vue
@@ -3,7 +3,7 @@ import { useChatStore } from '@proj-airi/stage-ui/stores/chat'
 import { useTheme } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import AppBackgroundPickerDialog from '../Backgrounds/AppBackgroundPickerDialog.vue'
+import { BackgroundDialogPicker } from '../Backgrounds'
 
 const { cleanupMessages } = useChatStore()
 const { isDark, toggleDark } = useTheme()
@@ -12,7 +12,7 @@ const backgroundDialogOpen = ref(false)
 </script>
 
 <template>
-  <AppBackgroundPickerDialog v-model="backgroundDialogOpen" />
+  <BackgroundDialogPicker v-model="backgroundDialogOpen" />
   <div absolute bottom--8 right-0 flex gap-2>
     <button
       class="max-h-[10lh] min-h-[1lh]"
diff --git a/apps/stage-web/src/pages/index.vue b/apps/stage-web/src/pages/index.vue
index 5371ca5ab..c269aeb66 100644
--- a/apps/stage-web/src/pages/index.vue
+++ b/apps/stage-web/src/pages/index.vue
@@ -16,12 +16,12 @@ import { breakpointsTailwind, useBreakpoints, useMouse } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 
-import CustomizedBackground from '../components/Backgrounds/CustomizedBackground.vue'
 import Header from '../components/Layouts/Header.vue'
 import InteractiveArea from '../components/Layouts/InteractiveArea.vue'
 import MobileHeader from '../components/Layouts/MobileHeader.vue'
 import MobileInteractiveArea from '../components/Layouts/MobileInteractiveArea.vue'
 
+import { BackgroundProvider } from '../components/Backgrounds'
 import { useBackgroundThemeColor } from '../composables/theme-color'
 import { useBackgroundStore } from '../stores/background'
 
@@ -38,7 +38,7 @@ const isMobile = breakpoints.smaller('md')
 
 const backgroundStore = useBackgroundStore()
 const { selectedOption, sampledColor } = storeToRefs(backgroundStore)
-const backgroundSurface = useTemplateRef<InstanceType<typeof CustomizedBackground>>('backgroundSurface')
+const backgroundSurface = useTemplateRef<InstanceType<typeof BackgroundProvider>>('backgroundSurface')
 
 const { syncBackgroundTheme } = useBackgroundThemeColor({ backgroundSurface, selectedOption, sampledColor })
 onMounted(() => syncBackgroundTheme())
@@ -130,7 +130,7 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => {
 </script>
 
 <template>
-  <CustomizedBackground
+  <BackgroundProvider
     ref="backgroundSurface"
     class="widgets top-widgets"
     :background="selectedOption"
@@ -159,7 +159,7 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => {
         <MobileInteractiveArea v-if="isMobile" @settings-open="handleSettingsOpen" />
       </div>
     </div>
-  </CustomizedBackground>
+  </BackgroundProvider>
 </template>
 
 <route lang="yaml">
diff --git a/apps/stage-web/src/stores/background.ts b/apps/stage-web/src/stores/background.ts
index bd1c83aec..b7907d723 100644
--- a/apps/stage-web/src/stores/background.ts
+++ b/apps/stage-web/src/stores/background.ts
@@ -7,7 +7,7 @@ import { useLocalStorage, useObjectUrl } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed, markRaw, onScopeDispose, ref, shallowRef } from 'vue'
 
-import ChromaticWavePreview from '../components/Backgrounds/ChromaticWavePreview.vue'
+import { DefaultBackgroundPreview } from '../components/Backgrounds/default'
 
 export enum BackgroundKind {
   Wave = 'wave',
@@ -32,7 +32,7 @@ export const useBackgroundStore = defineStore('background', () => {
       label: 'Colorful Wave',
       description: 'Animated wave on cross grid',
       kind: BackgroundKind.Wave,
-      component: markRaw(ChromaticWavePreview),
+      component: markRaw(DefaultBackgroundPreview),
     },
   ]