25 lines
1.6 KiB
Markdown
25 lines
1.6 KiB
Markdown
# 嵌入 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、移除页签等流程）。
|