fix(stage-ui,stage-pages): yes re-implemented useLocalStorageManualReset as refManualReset will not propagate

nekomeowww · nekomeowww · commit c0d69ca910ad · 2026-01-17T15:59:00.000+08:00
diff --git a/packages/stage-pages/src/pages/settings/connection/ConnectionSettings.vue b/packages/stage-pages/src/pages/settings/connection/ConnectionSettings.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
 import { FieldInput } from '@proj-airi/ui'
-import { refManualReset, useLocalStorage } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
 const defaultWebSocketUrl = import.meta.env.VITE_AIRI_WS_URL || 'ws://localhost:6121/ws'
-const websocketUrl = refManualReset<string>(useLocalStorage('settings/connection/websocket-url', defaultWebSocketUrl))
+const websocketUrl = useLocalStorageManualReset('settings/connection/websocket-url', defaultWebSocketUrl)
 </script>
 
 <template>
diff --git a/packages/stage-shared/src/composables/index.ts b/packages/stage-shared/src/composables/index.ts
@@ -0,0 +1 @@
+export * from './use-local-storage-manual-reset'
diff --git a/packages/stage-shared/src/composables/use-local-storage-manual-reset.ts b/packages/stage-shared/src/composables/use-local-storage-manual-reset.ts
@@ -0,0 +1,20 @@
+import type { ManualResetRefReturn, UseStorageOptions } from '@vueuse/core'
+import type { MaybeRefOrGetter, WatchOptions } from 'vue'
+
+import { refManualReset, useLocalStorage } from '@vueuse/core'
+import { unref, watch } from 'vue'
+
+export function useLocalStorageManualReset<T>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T> & WatchOptions): ManualResetRefReturn<T> {
+  const value = unref(initialValue)
+  const localStorageState = useLocalStorage<T>(key, value, options)
+  const state = refManualReset<T>(localStorageState)
+
+  const { resume, pause } = watch(state, newValue => localStorageState.value = newValue, options)
+  watch(localStorageState, (newValue) => {
+    pause()
+    state.value = newValue
+    resume()
+  }, options)
+
+  return state
+}
diff --git a/packages/stage-ui-live2d/src/components/scenes/Live2D.vue b/packages/stage-ui-live2d/src/components/scenes/Live2D.vue
@@ -40,17 +40,13 @@ withDefaults(defineProps<{
 })
 
 const componentState = defineModel<'pending' | 'loading' | 'mounted'>('state', { default: 'pending' })
-
 const componentStateCanvas = defineModel<'pending' | 'loading' | 'mounted'>('canvasState', { default: 'pending' })
 const componentStateModel = defineModel<'pending' | 'loading' | 'mounted'>('modelState', { default: 'pending' })
 
 const live2dCanvasRef = ref<InstanceType<typeof Live2DCanvas>>()
 
 const live2d = useLive2d()
-const {
-  scale,
-  position,
-} = storeToRefs(live2d)
+const { scale, position } = storeToRefs(live2d)
 
 watch([componentStateModel, componentStateCanvas], () => {
   componentState.value = (componentStateModel.value === 'mounted' && componentStateCanvas.value === 'mounted')
diff --git a/packages/stage-ui-live2d/src/stores/live2d.ts b/packages/stage-ui-live2d/src/stores/live2d.ts
@@ -1,4 +1,5 @@
-import { refManualReset, useBroadcastChannel, useLocalStorage } from '@vueuse/core'
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
+import { useBroadcastChannel } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
 
@@ -56,18 +57,18 @@ export const useLive2d = defineStore('live2d', () => {
     }
   })
 
-  const position = refManualReset<{ x: number, y: number }>(useLocalStorage('settings/live2d/position', { x: 0, y: 0 })) // position is relative to the center of the screen, units are %
+  const position = useLocalStorageManualReset<{ x: number, y: number }>('settings/live2d/position', { x: 0, y: 0 }) // position is relative to the center of the screen, units are %
   const positionInPercentageString = computed(() => ({
     x: `${position.value.x}%`,
     y: `${position.value.y}%`,
   }))
-  const currentMotion = refManualReset<{ group: string, index?: number }>(() => ({ group: 'Idle', index: 0 }))
-  const availableMotions = refManualReset<{ motionName: string, motionIndex: number, fileName: string }[]>(() => [])
-  const motionMap = refManualReset<Record<string, string>>(useLocalStorage('settings/live2d/motion-map', {}))
-  const scale = refManualReset<number>(useLocalStorage('settings/live2d/scale', 1))
+  const currentMotion = useLocalStorageManualReset<{ group: string, index?: number }>('settings/live2d/current-motion', () => ({ group: 'Idle', index: 0 }))
+  const availableMotions = useLocalStorageManualReset<{ motionName: string, motionIndex: number, fileName: string }[]>('settings/live2d/available-motions', () => [])
+  const motionMap = useLocalStorageManualReset<Record<string, string>>('settings/live2d/motion-map', {})
+  const scale = useLocalStorageManualReset('settings/live2d/scale', 1)
 
   // Live2D model parameters
-  const modelParameters = refManualReset<Record<string, number>>(useLocalStorage('settings/live2d/parameters', defaultModelParameters))
+  const modelParameters = useLocalStorageManualReset<Record<string, number>>('settings/live2d/parameters', defaultModelParameters)
 
   function resetState() {
     position.reset()
diff --git a/packages/stage-ui/src/components/scenarios/settings/model-settings/index.vue b/packages/stage-ui/src/components/scenarios/settings/model-settings/index.vue
@@ -85,8 +85,16 @@ watch(selectedModel, async () => {
         Select Model
       </Button>
     </ModelSelectorDialog>
-    <Live2D v-if="stageModelRenderer === 'live2d'" :palette="palette" @extract-colors-from-model="$emit('extractColorsFromModel')" />
-    <VRM v-if="stageModelRenderer === 'vrm'" :palette="palette" @extract-colors-from-model="$emit('extractColorsFromModel')" />
+    <Live2D
+      v-if="stageModelRenderer === 'live2d'"
+      :palette="palette"
+      @extract-colors-from-model="$emit('extractColorsFromModel')"
+    />
+    <VRM
+      v-if="stageModelRenderer === 'vrm'"
+      :palette="palette"
+      @extract-colors-from-model="$emit('extractColorsFromModel')"
+    />
   </div>
   <!-- Live2D component for 2D stage view -->
   <template v-if="stageModelRenderer === 'live2d'">
diff --git a/packages/stage-ui/src/components/scenarios/settings/model-settings/live2d.vue b/packages/stage-ui/src/components/scenarios/settings/model-settings/live2d.vue
@@ -19,7 +19,13 @@ defineEmits<{
 const { t } = useI18n()
 
 const settings = useSettings()
-const { live2dDisableFocus, live2dIdleAnimationEnabled, live2dAutoBlinkEnabled, live2dForceAutoBlinkEnabled, live2dShadowEnabled } = storeToRefs(settings)
+const {
+  live2dDisableFocus,
+  live2dIdleAnimationEnabled,
+  live2dAutoBlinkEnabled,
+  live2dForceAutoBlinkEnabled,
+  live2dShadowEnabled,
+} = storeToRefs(settings)
 
 const live2d = useLive2d()
 const {
diff --git a/packages/stage-ui/src/components/scenes/Stage.vue b/packages/stage-ui/src/components/scenes/Stage.vue
@@ -527,8 +527,9 @@ defineExpose({
       <Live2DScene
         v-if="stageModelRenderer === 'live2d' && showStage"
         ref="live2dSceneRef"
-        v-model:state="componentState" min-w="50% <lg:full" min-h="100 sm:100" h-full w-full
-        flex-1
+        v-model:state="componentState"
+        min-w="50% <lg:full" min-h="100 sm:100"
+        h-full w-full flex-1
         :model-src="stageModelSelectedUrl"
         :model-id="stageModelSelected"
         :focus-at="focusAt"
diff --git a/packages/stage-ui/src/stores/mcp.ts b/packages/stage-ui/src/stores/mcp.ts
@@ -1,10 +1,11 @@
-import { refManualReset, useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 
+import { useLocalStorageManualReset } from '../../../stage-shared/src/composables/use-local-storage-manual-reset'
+
 export const useMcpStore = defineStore('mcp', () => {
-  const serverCmd = refManualReset<string>(useLocalStorage<string>('settings/mcp/server-cmd', ''))
-  const serverArgs = refManualReset<string>(useLocalStorage<string>('settings/mcp/server-args', ''))
-  const connected = refManualReset<boolean>(useLocalStorage<boolean>('mcp/connected', false)) // use local storage to sync between windows
+  const serverCmd = useLocalStorageManualReset<string>('settings/mcp/server-cmd', '')
+  const serverArgs = useLocalStorageManualReset<string>('settings/mcp/server-args', '')
+  const connected = useLocalStorageManualReset<boolean>('mcp/connected', false) // use local storage to sync between windows
 
   function resetState() {
     serverCmd.reset()
diff --git a/packages/stage-ui/src/stores/modules/airi-card.ts b/packages/stage-ui/src/stores/modules/airi-card.ts
@@ -1,6 +1,6 @@
 import type { Card, ccv3 } from '@proj-airi/ccc'
 
-import { refManualReset, useLocalStorage } from '@vueuse/core'
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
 import { nanoid } from 'nanoid'
 import { defineStore, storeToRefs } from 'pinia'
 import { computed, watch } from 'vue'
@@ -57,8 +57,8 @@ export interface AiriCard extends Card {
 export const useAiriCardStore = defineStore('airi-card', () => {
   const { t } = useI18n()
 
-  const cards = refManualReset<Map<string, AiriCard>>(useLocalStorage('airi-cards', new Map()))
-  const activeCardId = refManualReset<string>(useLocalStorage('airi-card-active-id', 'default'))
+  const cards = useLocalStorageManualReset<Map<string, AiriCard>>('airi-cards', new Map())
+  const activeCardId = useLocalStorageManualReset<string>('airi-card-active-id', 'default')
 
   const activeCard = computed(() => cards.value.get(activeCardId.value))
 
diff --git a/packages/stage-ui/src/stores/modules/consciousness.ts b/packages/stage-ui/src/stores/modules/consciousness.ts
@@ -1,4 +1,5 @@
-import { refManualReset, useLocalStorage } from '@vueuse/core'
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
+import { refManualReset } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
@@ -8,9 +9,9 @@ export const useConsciousnessStore = defineStore('consciousness', () => {
   const providersStore = useProvidersStore()
 
   // State
-  const activeProvider = refManualReset<string>(useLocalStorage<string>('settings/consciousness/active-provider', ''))
-  const activeModel = refManualReset<string>(useLocalStorage<string>('settings/consciousness/active-model', ''))
-  const activeCustomModelName = refManualReset<string>(useLocalStorage<string>('settings/consciousness/active-custom-model', ''))
+  const activeProvider = useLocalStorageManualReset<string>('settings/consciousness/active-provider', '')
+  const activeModel = useLocalStorageManualReset<string>('settings/consciousness/active-model', '')
+  const activeCustomModelName = useLocalStorageManualReset<string>('settings/consciousness/active-custom-model', '')
   const expandedDescriptions = refManualReset<Record<string, boolean>>(() => ({}))
   const modelSearchQuery = refManualReset<string>('')
 
diff --git a/packages/stage-ui/src/stores/modules/discord.ts b/packages/stage-ui/src/stores/modules/discord.ts
@@ -1,13 +1,13 @@
-import { refManualReset, useLocalStorage } from '@vueuse/core'
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
 import { useConfiguratorByModsChannelServer } from '../configurator'
 
 export const useDiscordStore = defineStore('discord', () => {
   const configurator = useConfiguratorByModsChannelServer()
-  const enabled = refManualReset<boolean>(useLocalStorage<boolean>('settings/discord/enabled', false))
-  const token = refManualReset<string>(useLocalStorage<string>('settings/discord/token', ''))
+  const enabled = useLocalStorageManualReset<boolean>('settings/discord/enabled', false)
+  const token = useLocalStorageManualReset<string>('settings/discord/token', '')
 
   function saveSettings() {
     // Data is automatically saved to localStorage via useLocalStorage
diff --git a/packages/stage-ui/src/stores/modules/gaming-module-factory.ts b/packages/stage-ui/src/stores/modules/gaming-module-factory.ts
@@ -1,4 +1,4 @@
-import { refManualReset, useLocalStorage } from '@vueuse/core'
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
@@ -8,10 +8,10 @@ export function createGamingModuleStore(moduleName: string, defaultPort: number)
   return defineStore(moduleName, () => {
     const configurator = useConfiguratorByModsChannelServer()
 
-    const enabled = refManualReset<boolean>(useLocalStorage<boolean>(`settings/${moduleName}/enabled`, false))
-    const serverAddress = refManualReset<string>(useLocalStorage<string>(`settings/${moduleName}/server-address`, ''))
-    const serverPort = refManualReset<number | null>(useLocalStorage<number | null>(`settings/${moduleName}/server-port`, defaultPort))
-    const username = refManualReset<string>(useLocalStorage<string>(`settings/${moduleName}/username`, ''))
+    const enabled = useLocalStorageManualReset<boolean>(`settings/${moduleName}/enabled`, false)
+    const serverAddress = useLocalStorageManualReset<string>(`settings/${moduleName}/server-address`, '')
+    const serverPort = useLocalStorageManualReset<number | null>(`settings/${moduleName}/server-port`, defaultPort)
+    const username = useLocalStorageManualReset<string>(`settings/${moduleName}/username`, '')
 
     function saveSettings() {
       configurator.updateFor(moduleName, {
diff --git a/packages/stage-ui/src/stores/modules/hearing.ts b/packages/stage-ui/src/stores/modules/hearing.ts
@@ -3,7 +3,8 @@ import type { WithUnknown } from '@xsai/shared'
 import type { StreamTranscriptionResult, StreamTranscriptionOptions as XSAIStreamTranscriptionOptions } from '@xsai/stream-transcription'
 
 import { tryCatch } from '@moeru/std'
-import { refManualReset, useLocalStorage } from '@vueuse/core'
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
+import { refManualReset } from '@vueuse/core'
 import { generateTranscription } from '@xsai/generate-transcription'
 import { defineStore, storeToRefs } from 'pinia'
 import { computed, ref, shallowRef } from 'vue'
@@ -49,12 +50,12 @@ export const useHearingStore = defineStore('hearing-store', () => {
   const { allAudioTranscriptionProvidersMetadata } = storeToRefs(providersStore)
 
   // State
-  const activeTranscriptionProvider = refManualReset<string>(useLocalStorage('settings/hearing/active-provider', ''))
-  const activeTranscriptionModel = refManualReset<string>(useLocalStorage('settings/hearing/active-model', ''))
-  const activeCustomModelName = refManualReset<string>(useLocalStorage('settings/hearing/active-custom-model', ''))
+  const activeTranscriptionProvider = useLocalStorageManualReset('settings/hearing/active-provider', '')
+  const activeTranscriptionModel = useLocalStorageManualReset('settings/hearing/active-model', '')
+  const activeCustomModelName = useLocalStorageManualReset('settings/hearing/active-custom-model', '')
   const transcriptionModelSearchQuery = refManualReset<string>('')
-  const autoSendEnabled = refManualReset<boolean>(useLocalStorage('settings/hearing/auto-send-enabled', false))
-  const autoSendDelay = refManualReset<number>(useLocalStorage('settings/hearing/auto-send-delay', 2000)) // Default 2 seconds
+  const autoSendEnabled = useLocalStorageManualReset<boolean>('settings/hearing/auto-send-enabled', false)
+  const autoSendDelay = useLocalStorageManualReset<number>('settings/hearing/auto-send-delay', 2000) // Default 2 seconds
 
   // Computed properties
   const availableProvidersMetadata = computed(() => allAudioTranscriptionProvidersMetadata.value)
diff --git a/packages/stage-ui/src/stores/modules/speech.ts b/packages/stage-ui/src/stores/modules/speech.ts
@@ -2,7 +2,8 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/providers/utils'
 
 import type { VoiceInfo } from '../providers'
 
-import { refManualReset, useLocalStorage } from '@vueuse/core'
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
+import { refManualReset } from '@vueuse/core'
 import { generateSpeech } from '@xsai/generate-speech'
 import { defineStore, storeToRefs } from 'pinia'
 import { computed, onMounted, watch } from 'vue'
@@ -16,18 +17,18 @@ export const useSpeechStore = defineStore('speech', () => {
   const { allAudioSpeechProvidersMetadata } = storeToRefs(providersStore)
 
   // State
-  const activeSpeechProvider = refManualReset<string>(useLocalStorage<string>('settings/speech/active-provider', ''))
-  const activeSpeechModel = refManualReset<string>(useLocalStorage<string>('settings/speech/active-model', 'eleven_multilingual_v2'))
-  const activeSpeechVoiceId = refManualReset<string>(useLocalStorage<string>('settings/speech/voice', ''))
+  const activeSpeechProvider = useLocalStorageManualReset<string>('settings/speech/active-provider', '')
+  const activeSpeechModel = useLocalStorageManualReset<string>('settings/speech/active-model', 'eleven_multilingual_v2')
+  const activeSpeechVoiceId = useLocalStorageManualReset<string>('settings/speech/voice', '')
   const activeSpeechVoice = refManualReset<VoiceInfo | undefined>(undefined)
 
-  const pitch = refManualReset<number>(useLocalStorage<number>('settings/speech/pitch', 0))
-  const rate = refManualReset<number>(useLocalStorage<number>('settings/speech/rate', 1))
-  const ssmlEnabled = refManualReset<boolean>(useLocalStorage<boolean>('settings/speech/ssml-enabled', false))
+  const pitch = useLocalStorageManualReset<number>('settings/speech/pitch', 0)
+  const rate = useLocalStorageManualReset<number>('settings/speech/rate', 1)
+  const ssmlEnabled = useLocalStorageManualReset<boolean>('settings/speech/ssml-enabled', false)
   const isLoadingSpeechProviderVoices = refManualReset<boolean>(false)
   const speechProviderError = refManualReset<string | null>(null)
   const availableVoices = refManualReset<Record<string, VoiceInfo[]>>(() => ({}))
-  const selectedLanguage = refManualReset<string>(useLocalStorage<string>('settings/speech/language', 'en-US'))
+  const selectedLanguage = useLocalStorageManualReset<string>('settings/speech/language', 'en-US')
   const modelSearchQuery = refManualReset<string>('')
 
   // Computed properties
diff --git a/packages/stage-ui/src/stores/modules/twitter.ts b/packages/stage-ui/src/stores/modules/twitter.ts
@@ -1,4 +1,4 @@
-import { refManualReset, useLocalStorage } from '@vueuse/core'
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
@@ -7,11 +7,11 @@ import { useConfiguratorByModsChannelServer } from '../configurator'
 export const useTwitterStore = defineStore('twitter', () => {
   const configurator = useConfiguratorByModsChannelServer()
 
-  const enabled = refManualReset<boolean>(useLocalStorage<boolean>('settings/twitter/enabled', false))
-  const apiKey = refManualReset<string>(useLocalStorage<string>('settings/twitter/api-key', ''))
-  const apiSecret = refManualReset<string>(useLocalStorage<string>('settings/twitter/api-secret', ''))
-  const accessToken = refManualReset<string>(useLocalStorage<string>('settings/twitter/access-token', ''))
-  const accessTokenSecret = refManualReset<string>(useLocalStorage<string>('settings/twitter/access-token-secret', ''))
+  const enabled = useLocalStorageManualReset<boolean>('settings/twitter/enabled', false)
+  const apiKey = useLocalStorageManualReset<string>('settings/twitter/api-key', '')
+  const apiSecret = useLocalStorageManualReset<string>('settings/twitter/api-secret', '')
+  const accessToken = useLocalStorageManualReset<string>('settings/twitter/access-token', '')
+  const accessTokenSecret = useLocalStorageManualReset<string>('settings/twitter/access-token-secret', '')
 
   function saveSettings() {
     // Data is automatically saved to localStorage via useLocalStorage
diff --git a/packages/stage-ui/src/stores/settings.ts b/packages/stage-ui/src/stores/settings.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from './use-local-storage-manual-reset'`