z449/docs/integration.md

嵌入 mainPage

z449 可作为 mainPage 的子模块（git submodule）经构建期组件集成展示，位于 mainPage 的 third_party/z449。

便携式 App.vue

src/App.vue 是嵌入与独立两用的根组件：

• 嵌入时：mainPage 侧包装器 import 本项目 src/App.vue，把父项目当前语言经 :locale prop 传入。App.vue 内 watch 该 prop，同步到本项目独立的 vue-i18n 实例 locale，从而跟随父项目语言开关响应式切换。文案来自本项目自有 locale 文件，不共享父项目的 messages。
• 独立运行时：不接收 prop，默认中文。

i18n 桥接关键点

组件内用 useLocale composable 直接读自身模块级 i18n 实例（i18n.global），而非 useI18n({ useScope: 'global' })。

原因：useI18n({ useScope: 'global' }) 解析的是「当前运行 app 已安装的全局 i18n」。嵌入 mainPage 时那是父项目的实例（不含本项目 mobileGame.* 文案），会导致文案回退成 i18n key（显示 ID 而非文字）。改为直接引用本项目实例的 .global，无论是否 app.use() 都拿到本项目的 t。

样式隔离

子组件均为 scoped；全局重置（variables.css / base.css）仅在独立 app 的 main.js 加载，嵌入时不加载，复用宿主 :root 令牌级联。

集成 / 升级 / 移除

详见 mainPage 仓库的 docs/submodule-z449.md（克隆含子模块、升级 gitlink、移除页签等流程）。