From f16a0c102f5c475846161fde038a165b7f308dff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=97=8D+85CD?= <50108258+kwaa@users.noreply.github.com>
Date: Wed, 17 Dec 2025 19:34:25 +0800
Subject: [PATCH] refactor: merge watch targets, flatten callback (#812)

---
 packages/stage-ui/src/components/gadgets/AudioSpectrum.vue | 4 +---
 .../stage-ui/src/components/scenarios/chat/ChatHistory.vue | 7 +++----
 .../dialogs/onboarding/step-provider-configuration.vue     | 4 +---
 packages/stage-ui/src/components/scenes/live2d/Canvas.vue  | 3 +--
 packages/stage-ui/src/components/scenes/live2d/Model.vue   | 2 +-
 5 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/stage-ui/src/components/gadgets/AudioSpectrum.vue b/packages/stage-ui/src/components/gadgets/AudioSpectrum.vue
index dbc79eebd..0f1501a88 100644
--- a/packages/stage-ui/src/components/gadgets/AudioSpectrum.vue
+++ b/packages/stage-ui/src/components/gadgets/AudioSpectrum.vue
@@ -18,9 +18,7 @@ onMounted(() => {
   handleAnalyze()
 })
 
-watch(() => props.stream, () => {
-  handleAnalyze()
-})
+watch(() => props.stream, handleAnalyze)
 
 function handleAnalyze() {
   if (!props.stream) {
diff --git a/packages/stage-ui/src/components/scenarios/chat/ChatHistory.vue b/packages/stage-ui/src/components/scenarios/chat/ChatHistory.vue
index 05dfd3f70..070df7e93 100644
--- a/packages/stage-ui/src/components/scenarios/chat/ChatHistory.vue
+++ b/packages/stage-ui/src/components/scenarios/chat/ChatHistory.vue
@@ -42,10 +42,9 @@ function scrollToBottom() {
   })
 }
 
-watch(() => props.messages, () => scrollToBottom(), { deep: true, flush: 'post' })
-watch(() => props.streamingMessage, () => scrollToBottom(), { deep: true, flush: 'post' })
-watch(() => props.sending, () => scrollToBottom(), { flush: 'post' })
-onMounted(() => scrollToBottom())
+watch([() => props.messages, () => props.streamingMessage], scrollToBottom, { deep: true, flush: 'post' })
+watch(() => props.sending, scrollToBottom, { flush: 'post' })
+onMounted(scrollToBottom)
 
 const streaming = computed<ChatAssistantMessage>(() => props.streamingMessage ?? { role: 'assistant', content: '', slices: [], tool_results: [] })
 const showStreamingPlaceholder = computed(() => (streaming.value.slices?.length ?? 0) === 0 && !streaming.value.content)
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-configuration.vue b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-configuration.vue
index c79b79a6e..3e3e6d71c 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-configuration.vue
+++ b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-configuration.vue
@@ -37,9 +37,7 @@ function initializeForm() {
 }
 
 // Watch for provider changes
-watch(() => context.selectedProvider.value?.id, () => {
-  initializeForm()
-})
+watch(() => context.selectedProvider.value?.id, initializeForm)
 
 // Computed properties
 const needsApiKey = computed(() => {
diff --git a/packages/stage-ui/src/components/scenes/live2d/Canvas.vue b/packages/stage-ui/src/components/scenes/live2d/Canvas.vue
index f7947a03f..921dc7ae5 100644
--- a/packages/stage-ui/src/components/scenes/live2d/Canvas.vue
+++ b/packages/stage-ui/src/components/scenes/live2d/Canvas.vue
@@ -65,8 +65,7 @@ function handleResize() {
   // The CSS styles handle the display size, so we don't need to manually set view dimensions
 }
 
-watch([() => props.width, () => props.height], () => handleResize())
-watch(() => props.resolution, () => handleResize())
+watch([() => props.width, () => props.height, () => props.resolution], handleResize)
 
 onMounted(async () => containerRef.value && await initLive2DPixiStage(containerRef.value))
 onUnmounted(() => pixiApp.value?.destroy())
diff --git a/packages/stage-ui/src/components/scenes/live2d/Model.vue b/packages/stage-ui/src/components/scenes/live2d/Model.vue
index 1b9c4245c..96923d22f 100644
--- a/packages/stage-ui/src/components/scenes/live2d/Model.vue
+++ b/packages/stage-ui/src/components/scenes/live2d/Model.vue
@@ -393,7 +393,7 @@ function updateDropShadowFilter() {
   model.value.filters = [dropShadowFilter.value]
 }
 
-watch([() => props.width, () => props.height], () => handleResize())
+watch([() => props.width, () => props.height], handleResize)
 watch(modelSrcRef, async () => await loadModel(), { immediate: true })
 watch(dark, updateDropShadowFilter, { immediate: true })
 watch([model, themeColorsHue], updateDropShadowFilter)