From 446ba1dfddca8062a5d0c980fe055da7fb349b2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?baysonfox=F0=9F=A6=8A?= <baysonfox@baysonfox.com>
Date: Thu, 24 Jul 2025 13:26:53 +0800
Subject: [PATCH] feat(stage-ui): allow user to disable Live2D mouse tracking
 (#303)

---------

Co-authored-by: Neko <neko@ayaka.moe>
---
 packages/i18n/src/locales/en/settings.yaml    |  4 ++++
 .../i18n/src/locales/zh-Hans/settings.yaml    |  4 ++++
 .../Settings/ModelSettings/Live2D.vue         | 21 +++++++++++++++++--
 .../src/components/Scenes/Live2D/Model.vue    |  2 +-
 packages/stage-ui/src/stores/settings.ts      |  3 +++
 5 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/i18n/src/locales/en/settings.yaml b/packages/i18n/src/locales/en/settings.yaml
index 0903f467c..292b6b6bd 100644
--- a/packages/i18n/src/locales/en/settings.yaml
+++ b/packages/i18n/src/locales/en/settings.yaml
@@ -63,6 +63,10 @@ live2d:
     title: Extract colors from model
     button-extract:
       title: Extract
+  focus:
+    title: Disable model mouse tracking
+    button-disable:
+      title: Disable
 microphone: Microphone
 models: Model
 pages:
diff --git a/packages/i18n/src/locales/zh-Hans/settings.yaml b/packages/i18n/src/locales/zh-Hans/settings.yaml
index b55846150..b1efdf257 100644
--- a/packages/i18n/src/locales/zh-Hans/settings.yaml
+++ b/packages/i18n/src/locales/zh-Hans/settings.yaml
@@ -58,6 +58,10 @@ live2d:
   theme-color-from-model:
     button-extract:
       title: 提取
+  focus:
+    title: 禁用模型鼠标跟踪
+    button-disable:
+      title: 禁用
 microphone: 麦克风
 models: 模型
 pages:
diff --git a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2D.vue b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2D.vue
index 5d8659ad7..daf55b39f 100644
--- a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2D.vue
+++ b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2D.vue
@@ -2,14 +2,14 @@
 import JSZip from 'jszip'
 import localforage from 'localforage'
 
-import { FieldRange, Input } from '@proj-airi/ui'
+import { Checkbox, FieldRange, Input } from '@proj-airi/ui'
 import { useFileDialog, useObjectUrl } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { Emotion, EmotionNeutralMotionName } from '../../../../constants'
-import { useLive2d } from '../../../../stores'
+import { useLive2d, useSettings } from '../../../../stores'
 import { Section } from '../../../Layouts'
 import { Button } from '../../../Misc'
 import { ColorPalette } from '../../../Widgets'
@@ -29,6 +29,9 @@ const modelFileDialog = useFileDialog({
   accept: 'application/zip',
 })
 
+const settings = useSettings()
+const { live2dDisableFocus } = storeToRefs(settings)
+
 const live2d = useLive2d()
 const {
   modelFile,
@@ -252,4 +255,18 @@ const exportObjectUrl = useObjectUrl(modelFile)
       </template>
     </FieldRange>
   </Section>
+  <Section
+    :title="t('settings.live2d.focus.title')"
+    icon="i-solar:eye-scan-bold-duotone"
+    :class="[
+      'rounded-xl',
+      'bg-white/80  dark:bg-black/75',
+      'backdrop-blur-lg',
+    ]"
+  >
+    <Checkbox
+      v-model="live2dDisableFocus"
+      :label="t('settings.live2d.focus.button-disable.title')"
+    />
+  </Section>
 </template>
diff --git a/packages/stage-ui/src/components/Scenes/Live2D/Model.vue b/packages/stage-ui/src/components/Scenes/Live2D/Model.vue
index 23baaa8c4..ed9b7638d 100644
--- a/packages/stage-ui/src/components/Scenes/Live2D/Model.vue
+++ b/packages/stage-ui/src/components/Scenes/Live2D/Model.vue
@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<{
   mouthOpenSize: 0,
   paused: false,
   focusAt: () => ({ x: 0, y: 0 }),
-  disableFocusAt: false,
+  disableFocusAt: useSettings().live2dDisableFocus,
   scale: 1,
 })
 
diff --git a/packages/stage-ui/src/stores/settings.ts b/packages/stage-ui/src/stores/settings.ts
index 4c87fdf79..b204c371b 100644
--- a/packages/stage-ui/src/stores/settings.ts
+++ b/packages/stage-ui/src/stores/settings.ts
@@ -12,8 +12,10 @@ export const useSettings = defineStore('settings', () => {
   const selectedAudioDevice = ref<MediaDeviceInfo>()
 
   const language = useLocalStorage('settings/language', 'en')
+  
   const stageView = useLocalStorage('settings/stage/view/model-renderer', '2d')
   const stageViewControlsEnabled = ref(false)
+  const live2dDisableFocus = useLocalStorage('settings/live2d/disable-focus', false)
 
   const isAudioInputOn = useLocalStorage('settings/audio/input', 'false')
   const selectedAudioDeviceId = computed(() => selectedAudioDevice.value?.deviceId)
@@ -78,6 +80,7 @@ export const useSettings = defineStore('settings', () => {
     usePageSpecificTransitions,
     language,
     stageView,
+    live2dDisableFocus,
     stageViewControlsEnabled,
     themeColorsHue,
     themeColorsHueDynamic,