From a91c379096e1789870e7a8bb65cf30456c2a8992 Mon Sep 17 00:00:00 2001
From: root <root@fair-code-1.localdomain>
Date: Fri, 24 Jul 2026 08:59:35 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=84=E4=BB=B6=E6=94=B9=E7=94=A8=20u?=
 =?UTF-8?q?seLocale=20=E7=9B=B4=E8=AF=BB=E8=87=AA=E8=BA=AB=20i18n=20?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=EF=BC=88=E4=BF=AE=E5=A4=8D=E5=B5=8C=E5=85=A5?=
 =?UTF-8?q?=E6=97=B6=E6=96=87=E6=A1=88=E5=9B=9E=E9=80=80=E6=88=90=20key?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useI18n({ useScope: 'global' }) 在嵌入时解析到宿主已安装的 i18n 实例，
而非本子项目实例 -> mobileGame.* 文案回退成 i18n key（显示 ID）。
改为 useLocale composable 直接读本模块级 i18n.global，无论是否 app.use() 都正确。
---
 src/App.vue                           |  4 ++--
 src/components/ExperimentTab.vue      |  4 ++--
 src/components/HeroSection.vue        |  4 ++--
 src/components/IterationsTab.vue      |  4 ++--
 src/components/Leaderboard.vue        |  4 ++--
 src/components/ScreenshotCarousel.vue |  4 ++--
 src/components/SubTabs.vue            |  4 ++--
 src/components/TeamLeaderboardTab.vue |  4 ++--
 src/components/VersionTimeline.vue    |  4 ++--
 src/components/ui/PageShell.vue       |  4 ++--
 src/composables/useLocale.js          | 14 ++++++++++++++
 11 files changed, 34 insertions(+), 20 deletions(-)
 create mode 100644 src/composables/useLocale.js

diff --git a/src/App.vue b/src/App.vue
index 1972809..5627fca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
 // 语言切换：嵌入时父项目经 :locale prop 传入当前语言，watch 同步到本实例；
 //          独立运行时由本组件内的语言开关 + loadLocaleAsync 自管。
 import { ref, watch, defineAsyncComponent } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useLocale } from './composables/useLocale.js'
 import i18n, { loadLocaleAsync } from './i18n/index.js'
 import HeroSection from './components/HeroSection.vue'
 import ScreenshotCarousel from './components/ScreenshotCarousel.vue'
@@ -28,7 +28,7 @@ watch(
   { immediate: true }
 )
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useLocale()
 
 const tabs = subTabs
 const activeTab = ref(defaultSubTab)
diff --git a/src/components/ExperimentTab.vue b/src/components/ExperimentTab.vue
index 51683e3..3364368 100644
--- a/src/components/ExperimentTab.vue
+++ b/src/components/ExperimentTab.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { useI18n } from 'vue-i18n'
+import { useLocale } from '../composables/useLocale.js'
 import { assets } from '../config.js'
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useLocale()
 </script>
 
 <template>
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
index 69e9b11..b033cca 100644
--- a/src/components/HeroSection.vue
+++ b/src/components/HeroSection.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { useI18n } from 'vue-i18n'
+import { useLocale } from '../composables/useLocale.js'
 import Tag from './ui/Tag.vue'
 import { heroMeta } from '../config.js'
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useLocale()
 </script>
 
 <template>
diff --git a/src/components/IterationsTab.vue b/src/components/IterationsTab.vue
index ac68a75..4f43caf 100644
--- a/src/components/IterationsTab.vue
+++ b/src/components/IterationsTab.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { useI18n } from 'vue-i18n'
+import { useLocale } from '../composables/useLocale.js'
 import VersionTimeline from './VersionTimeline.vue'
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useLocale()
 </script>
 
 <template>
diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 2fbdb23..0833cff 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { ref, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useLocale } from '../composables/useLocale.js'
 import { leaderboard } from '../config.js'
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useLocale()
 
 const rows = ref([])
 const state = ref('loading') // loading | ok | error
diff --git a/src/components/ScreenshotCarousel.vue b/src/components/ScreenshotCarousel.vue
index 9911584..1576e58 100644
--- a/src/components/ScreenshotCarousel.vue
+++ b/src/components/ScreenshotCarousel.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useLocale } from '../composables/useLocale.js'
 import { assets } from '../config.js'
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useLocale()
 const images = assets.screenshots
 const current = ref(0)
 let timer = null
diff --git a/src/components/SubTabs.vue b/src/components/SubTabs.vue
index 853b536..d179569 100644
--- a/src/components/SubTabs.vue
+++ b/src/components/SubTabs.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useI18n } from 'vue-i18n'
+import { useLocale } from '../composables/useLocale.js'
 
 const props = defineProps({
   tabs: { type: Array, required: true }, // [{ id, labelKey }]
@@ -7,7 +7,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:modelValue'])
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useLocale()
 </script>
 
 <template>
diff --git a/src/components/TeamLeaderboardTab.vue b/src/components/TeamLeaderboardTab.vue
index e3470ce..8c4a433 100644
--- a/src/components/TeamLeaderboardTab.vue
+++ b/src/components/TeamLeaderboardTab.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { useI18n } from 'vue-i18n'
+import { useLocale } from '../composables/useLocale.js'
 import TeamCard from './TeamCard.vue'
 import Leaderboard from './Leaderboard.vue'
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useLocale()
 </script>
 
 <template>
diff --git a/src/components/VersionTimeline.vue b/src/components/VersionTimeline.vue
index 19f82db..80c150b 100644
--- a/src/components/VersionTimeline.vue
+++ b/src/components/VersionTimeline.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useLocale } from '../composables/useLocale.js'
 import { versions, tracks } from '../data/versions.js'
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useLocale()
 
 // 按 tracks 数组顺序分组（3D 最终形态在前）；同一线内按 order 排序
 const grouped = computed(() => {
diff --git a/src/components/ui/PageShell.vue b/src/components/ui/PageShell.vue
index 8d1c238..86ae414 100644
--- a/src/components/ui/PageShell.vue
+++ b/src/components/ui/PageShell.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useLocale } from '../../composables/useLocale.js'
 
 // 可复用页面外壳 -- 统一页面的容器宽度、垂直节奏与标题。
 // Props:
@@ -13,7 +13,7 @@ const props = defineProps({
   padded: { type: Boolean, default: true }
 })
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useLocale()
 const title = computed(() => (props.titleKey ? t(props.titleKey) : ''))
 </script>
 
diff --git a/src/composables/useLocale.js b/src/composables/useLocale.js
new file mode 100644
index 0000000..a5ea86a
--- /dev/null
+++ b/src/composables/useLocale.js
@@ -0,0 +1,14 @@
+import { computed } from 'vue'
+import i18n from '../i18n/index.js'
+
+// ★ 子项目自有的语言辅助 composable。
+// 关键：直接读模块级 i18n 实例的 global composer，而非 useI18n() 注入。
+// 原因：useI18n({ useScope: 'global' }) 解析的是「当前运行 app 已安装的全局 i18n」，
+// 嵌入 mainPage 时那是父项目的实例（不含本子项目 mobileGame.* 文案）-> 文案回退成 key。
+// 改为直接引用本子项目实例的 .global，无论是否 app.use() 都拿到本子项目的 t。
+export function useLocale() {
+  const { t, locale } = i18n.global
+  const isZh = computed(() => locale.value === 'zh-CN')
+  const pick = (obj) => (isZh.value ? obj.zh : obj.en)
+  return { t, locale, isZh, pick }
+}