31 lines
2.0 KiB
Markdown
31 lines
2.0 KiB
Markdown
# 嵌入 mainPage
|
||
|
||
timeTableFix 可作为 [mainPage](https://git.zikai.wang/zikai/zMainPage) 的子模块（git submodule）经构建期组件集成展示，位于 mainPage 的 `third_party/timeTableFix`。
|
||
|
||
## 集成方式
|
||
|
||
- mainPage 通过 git submodule 把本项目作为子目录引入，并直接 `import` 本项目的 `src/App.vue` 作为懒加载路由组件。
|
||
- 构建期集成（非 iframe），共享 mainPage 的构建与 KeepAlive 缓存，无运行期割裂。
|
||
- 本项目无独立线上入口，仅通过主页 `https://zikai.wang/timetable` 访问。
|
||
|
||
## 便携式 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 时那是父项目的实例（不含本项目文案），会导致文案回退成 i18n key（显示 ID 而非文字）。改为直接引用本项目实例的 `.global`，无论是否 `app.use()` 都拿到本项目的 `t`。
|
||
|
||
## 样式隔离
|
||
|
||
`App.vue` 已做样式隔离（scoped + `ttf-` 前缀类名），设计令牌与 mainPage 对齐；全局重置仅在独立 app（`main.js`）加载，作为组件嵌入时不污染宿主。
|
||
|
||
## 集成 / 升级 / 移除
|
||
|
||
详见 mainPage 仓库的 [`docs/submodule-timeTableFix.md`](https://git.zikai.wang/zikai/zMainPage/src/branch/main/docs/submodule-timeTableFix.md)（克隆含子模块、升级 gitlink、移除页签等流程）。
|