# 嵌入 mainPage

z449 可作为 [mainPage](https://git.zikai.wang/zikai/zMainPage) 的子模块（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`](https://git.zikai.wang/zikai/zMainPage/src/branch/main/docs/submodule-z449.md)（克隆含子模块、升级 gitlink、移除页签等流程）。