2.0 KiB
2.0 KiB
嵌入 mainPage
timeTableFix 可作为 mainPage 的子模块(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,把父项目当前语言经:localeprop 传入。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(克隆含子模块、升级 gitlink、移除页签等流程)。