fix: 子模块 i18n 桥接 -- 透传 :locale prop,修复嵌入页显示 i18n ID

根因:子项目组件用 useI18n({useScope:'global'}) 注入,嵌入时解析到宿主
mainPage 的 i18n 实例(不含子项目文案)-> 文案回退成 key(显示 ID)。

修复:
- z449 / timeTableFix 组件改用 useLocale composable 直读自身模块级 i18n 实例
- ttf 新增独立 i18n(中英 locale + useLocale),抽取所有硬编码中文
- mainPage 侧 Timetable/MobileGameWrapper 包装器透传 :locale prop
- 两个子模块 gitlink 更新至各自修复 commit

验证:构建后两个子模块 chunk 含真实中文文案,无 useI18n 注入残留
This commit is contained in:
Zikai
2026-07-24 09:02:38 +00:00
parent 6ad6c15e9d
commit d9309756c7
5 changed files with 22 additions and 12 deletions

View File

@@ -59,8 +59,10 @@ export default {
部分页签由独立仓库的子项目经 git submodule 集成mainPage 侧用包装器 import 子项目 `App.vue` 作为路由组件(非 iframe共享构建与 KeepAlive 缓存:
- **timeTableFix**`third_party/timeTableFix`,日程整理页签):无 i18n子项目硬编码中文。详见 [submodule-timeTableFix.md](./submodule-timeTableFix.md)。
- **z449**`third_party/z449`,移动游戏页签):子项目自带独立 `vue-i18n` 实例与 locale 文案。mainPage 包装器把当前语言经 `:locale` prop 透传,子项目 `App.vue` `watch` 该 prop 同步到自己的 i18n 实例,从而跟随父项目语言开关响应式切换(不共享 messages仅同步 locale 值)。详见 [submodule-z449.md](./submodule-z449.md)。
- **timeTableFix**`third_party/timeTableFix`,日程整理页签):自带独立 `vue-i18n` 实例与中英 locale 文案。与 z449 同样经 `:locale` prop 桥接父项目语言。详见 [submodule-timeTableFix.md](./submodule-timeTableFix.md)。
- **z449**`third_party/z449`,移动游戏页签):自带独立 `vue-i18n` 实例与 locale 文案。mainPage 包装器把当前语言经 `:locale` prop 透传,子项目 `App.vue` `watch` 该 prop 同步到自己的 i18n 实例,从而跟随父项目语言开关响应式切换(不共享 messages仅同步 locale 值)。详见 [submodule-z449.md](./submodule-z449.md)。
> **i18n 桥接关键点**:子项目组件用各自 `useLocale` composable **直接读自身模块级 i18n 实例**`i18n.global`),而非 `useI18n({ useScope: 'global' })`。后者在嵌入时会解析到宿主已安装的 i18n 实例(不含子项目文案),导致文案回退成 i18n key显示 ID 而非文字)。
## 存活校验requiresAlive

View File

@@ -61,9 +61,10 @@ git commit -m "chore: 移除 z449 子模块集成"
## 与 timeTableFix 子模块的差异
| 维度 | timeTableFix | z449 |
|------|--------------|------|
| i18n | 无(硬编码中文) | 自带独立 vue-i18n中英双语 |
| 语言同步 | 无需 | 经 `:locale` prop 桥接父项目语言 |
| 文案来源 | 组件内硬编码 | z449 自有 locale 文件(单一来源) |
| mainPage 侧文案 | 无 | 仅 `tabs.mobileGame` 页签标题 |
| 维度 | 早期 timeTableFix | timeTableFix现已 i18n | z449 |
|------|-------------------|---------------------------|------|
| i18n | 无(硬编码中文) | 自带独立 vue-i18n中英双语 | 自带独立 vue-i18n中英双语 |
| 语言同步 | 无需 | 经 `:locale` prop 桥接 | 经 `:locale` prop 桥接 |
| 文案来源 | 组件内硬编码 | ttf 自有 locale 文件(单一来源) | z449 自有 locale 文件(单一来源) |
两个子项目均采用相同的 i18n 桥接模式:各自维护独立 `vue-i18n` 实例与 locale 文案,组件内用 `useLocale` composable **直接读自身实例**(而非 `useI18n()` 注入,否则嵌入时会解析到宿主实例导致文案回退成 keymainPage 侧包装器经 `:locale` prop 透传当前语言。

View File

@@ -1,19 +1,26 @@
<script setup>
// ★ timetable 页签的 mainPage 侧包装器。
// 子模块 timeTableFix 的 App.vue 作为纯功能组件被 import本包装器负责
// 子模块 timeTableFix 的 App.vue 作为便携式组件被 import本包装器负责
// 1. 套 PageShell 统一容器宽度与标题(与其他页签对齐)
// 2. 持有 KeepAlive 匹配用的组件名(与模块 id 一致),子模块自身不持 name
// 3. 把 mainPage 当前语言经 :locale prop 透传给子模块的独立 i18n 实例,
// 使其跟随父项目语言开关响应式切换(不共享 messages仅同步 locale 值)
// 子模块独立运行时不经过本包装器,保持纯净。
defineOptions({ name: 'timetable' })
import { computed } from 'vue'
import PageShell from '../../components/ui/PageShell.vue'
import i18n from '../../i18n/index.js'
import TimeTableFixApp from '../../../third_party/timeTableFix/src/App.vue'
// 透传父项目当前语言给子应用(响应式:切语言时子应用内容跟随)
const locale = computed(() => i18n.global.locale.value)
</script>
<template>
<PageShell title-key="tabs.timetable">
<div class="timetable__frame">
<TimeTableFixApp />
<TimeTableFixApp :locale="locale" />
</div>
</PageShell>
</template>