feat: timeTableFix 改为构建期组件集成 + git submodule

- 弃用 iframe 嵌入:直接 import 子模块 timeTableFix 的 App.vue 为懒加载路由
  组件,共享 mainPage 构建/依赖(ical.js)/KeepAlive 缓存,无运行期割裂
- git submodule 接入 third_party/timeTableFix(固定到 a49a725),.gitmodules
  使用无凭据 URL;.gitignore 忽略子模块 node_modules
- 删旧 iframe 包装组件 Timetable.vue,移除 app.config 中 timeTableFix 配置
- timetable 模块不再 requiresAlive(构建期已打包,无远程依赖)
- README 更新:项目结构、submodule clone/升级流程、存活校验描述
- 子模块样式隔离(scoped + ttf- 前缀)已在 timeTableFix 侧完成,无泄漏
This commit is contained in:
2026-07-23 02:54:00 +00:00
parent 7d81da65cf
commit 91d55f1b11
8 changed files with 68 additions and 32 deletions

2
.gitignore vendored
View File

@@ -1,5 +1,7 @@
# 依赖 # 依赖
node_modules/ node_modules/
# 子模块 timeTableFix 的依赖node_modules 已被上一条覆盖,此条仅作显式说明)
third_party/timeTableFix/node_modules/
# 构建产物(输出到 /root/html不入库 # 构建产物(输出到 /root/html不入库
dist/ dist/

3
.gitmodules vendored Normal file
View File

@@ -0,0 +1,3 @@
[submodule "third_party/timeTableFix"]
path = third_party/timeTableFix
url = https://git.zikai.wang/zikai/timeTableFix.git

View File

@@ -10,13 +10,17 @@ Zikai 的作品集主页 -- Vue 3 模块化多项目展示站。浅色极简、
``` ```
mainPage/ mainPage/
├── index.html ├── index.html
├── package.json ├── package.json # 含 ical.jstimeTableFix 依赖)
├── vite.config.js # 构建输出到 /root/htmlemptyOutDir=false不清空既有文件 ├── vite.config.js # 构建输出到 /root/htmlemptyOutDir=false不清空既有文件
├── .gitmodules # git submodulethird_party/timeTableFix
├── README.md ├── README.md
├── public/favicon.svg ├── public/favicon.svg
├── third_party/
│ └── timeTableFix/ # ★ git submoduleICS 日程整理器,独立仓库
│ # src/App.vue 被 timetable 模块直接 import 为路由组件
└── src/ └── src/
├── main.js # 应用入口(挂载 i18n / router / 全局样式) ├── main.js # 应用入口(挂载 i18n / router / 全局样式)
├── App.vue # 根布局:顶栏 + 标签导航 + <router-view> + 页脚 ├── App.vue # 根布局:顶栏 + 标签导航 + <KeepAlive router-view> + 页脚
├── config/ ├── config/
│ └── app.config.js # ★ 集中配置:外部服务 URL白板地址 / 存活探针等) │ └── app.config.js # ★ 集中配置:外部服务 URL白板地址 / 存活探针等)
├── i18n/ # 国际化(中文同步注入;英文动态 import() 懒加载) ├── i18n/ # 国际化(中文同步注入;英文动态 import() 懒加载)
@@ -27,6 +31,7 @@ mainPage/
│ ├── index.js # 注册表import.meta.glob 约定式收集,带容错) │ ├── index.js # 注册表import.meta.glob 约定式收集,带容错)
│ ├── mobile-game/ # 移动游戏项目页签 │ ├── mobile-game/ # 移动游戏项目页签
│ ├── whiteboard/ # 共享记事本页签iframe 嵌入 + 存活校验) │ ├── whiteboard/ # 共享记事本页签iframe 嵌入 + 存活校验)
│ ├── timetable/ # 日程整理页签(构建期 import 子模块 App.vue
│ └── calendar/ # 隐藏页(仅手动访问 /cqy │ └── calendar/ # 隐藏页(仅手动访问 /cqy
├── components/ # 共享组件TabNav / LanguageSwitcher / ui 基元) ├── components/ # 共享组件TabNav / LanguageSwitcher / ui 基元)
├── composables/ # useProjects页签+存活联动)/ useLiveness / useI18nLazy / useLocale ├── composables/ # useProjects页签+存活联动)/ useLiveness / useI18nLazy / useLocale
@@ -51,8 +56,8 @@ mainPage/
### 存活校验 ### 存活校验
声明了 `requiresAlive` 的模块,应用启动时对探针 URL 做一次 `no-cors` fetch 探测(4s 超时)。 声明了 `requiresAlive` 的模块,应用加载即探测探针 URL`no-cors` fetch4s 超时),之后每 30s 周期重探
探测返回前该页签不显示(避免闪烁);服务存活显示,不可达则保持隐藏(刷新页面才重探) 乐观显示:探测中/存活显示页签,仅明确不可达时才隐藏并从 KeepAlive 移出(卸载组件);恢复后自动重新加载。目前仅白板页签使用
## 依赖的基础设施 ## 依赖的基础设施
@@ -62,7 +67,9 @@ mainPage/
| Web 服务器 | Apache 2.4(启用 `mod_rewrite`),对外静态服务 `/root/html` | | Web 服务器 | Apache 2.4(启用 `mod_rewrite`),对外静态服务 `/root/html` |
| SPA 回退 | history 模式需站点根 `.htaccess` 回退到 `index.html`(见下) | | SPA 回退 | history 模式需站点根 `.htaccess` 回退到 `index.html`(见下) |
> 共享记事本页签通过 iframe 嵌入外部服务(默认 `https://f.zikai.wang/wb/shared`URL 在 `src/config/app.config.js` 集中配置。该服务需公开且允许被 iframe 嵌入。 > 共享记事本页签通过 iframe 嵌入外部服务(默认 `https://f.zikai.wang/wb/share`URL 在 `src/config/app.config.js` 集中配置。该服务需公开且允许被 iframe 嵌入。
>
> 日程整理页签timeTableFix通过 **git submodule** 作为子项目,构建期直接 import 其 `App.vue` 为路由组件(非 iframe同时其独立 app 可经 Apache `/ttf/` 反代单独访问。
## Ubuntu 从 0 安装 ## Ubuntu 从 0 安装
@@ -71,9 +78,10 @@ mainPage/
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo bash - curl -fsSL https://deb.nodesource.com/setup_18.x | sudo bash -
sudo apt-get install -y nodejs sudo apt-get install -y nodejs
# 2. 取代码 # 2. 取代码(含子模块 timeTableFix
git clone https://git.zikai.wang/zikai/zMainPage.git mainPage git clone --recursive https://git.zikai.wang/zikai/zMainPage.git mainPage
cd mainPage cd mainPage
# 若已 clone 但未带子模块git submodule update --init --recursive
npm install npm install
# 3. 构建(产物输出到 /root/html不清空既有文件 # 3. 构建(产物输出到 /root/html不清空既有文件
@@ -103,6 +111,22 @@ RewriteRule ^ index.html [L]
3. 在 `src/i18n/locales/zh-CN.js` 与 `en.js` 的 `tabs` 下加对应文案。 3. 在 `src/i18n/locales/zh-CN.js` 与 `en.js` 的 `tabs` 下加对应文案。
4. `npm run build` -- 页签与路由自动出现,无需改导航或路由代码。 4. `npm run build` -- 页签与路由自动出现,无需改导航或路由代码。
## 子项目 timeTableFix 的升级
timeTableFix 作为 git submodule 独立维护,升级流程:
```bash
cd mainPage
git submodule update --remote third_party/timeTableFix # 拉取最新
cd third_party/timeTableFix && git checkout master # 固定到目标分支/commit
cd ../..
git add third_party/timeTableFix # 更新 gitlink 指针
git commit -m "chore: 升级 timeTableFix 子模块"
npm run build # 重新构建 mainPage
```
timeTableFix 本身完全独立,可单独 `npm run build` / `npm test`,也可经 Apache `/ttf/` 反代单独访问。
--- ---
## 开发命令 ## 开发命令

6
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "mainpage", "name": "mainpage",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"ical.js": "^2.1.0",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-i18n": "^9.13.1", "vue-i18n": "^9.13.1",
"vue-router": "^4.3.0" "vue-router": "^4.3.0"
@@ -986,6 +987,11 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0" "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
} }
}, },
"node_modules/ical.js": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/ical.js/-/ical.js-2.2.1.tgz",
"integrity": "sha512-yK/UlPbEs316igb/tjRgbFA8ZV75rCsBJp/hWOatpyaPNlgw0dGDmU+FoicOcwX4xXkeXOkYiOmCqNPFpNPkQg=="
},
"node_modules/magic-string": { "node_modules/magic-string": {
"version": "0.30.21", "version": "0.30.21",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",

View File

@@ -10,6 +10,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"ical.js": "^2.1.0",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-i18n": "^9.13.1", "vue-i18n": "^9.13.1",
"vue-router": "^4.3.0" "vue-router": "^4.3.0"

View File

@@ -15,28 +15,16 @@ export const appConfig = {
defaultBoardId: 'share', defaultBoardId: 'share',
// 探测超时(毫秒) // 探测超时(毫秒)
healthTimeoutMs: 4000 healthTimeoutMs: 4000
},
// timeTableFix -- ICS 日程整理器(同源 /ttf/ 反向代理到本地 vite preview
timeTableFix: {
// 应用页面(同源相对路径,由 Apache /ttf/ 代理到 8888
pageUrl: '/ttf/',
// 存活探针 URL同源fetch /ttf/ 返回 2xx 即存活)
healthUrl: '/ttf/',
// 探测超时(毫秒)
healthTimeoutMs: 4000
} }
} }
/** /**
* 取某服务的存活探针 URL。 * 取某服务的存活探针 URL。
* whiteboard 用 baseUrl+healthPath 拼接timeTableFix 直接用 healthUrl。
* @param {keyof typeof appConfig} service 配置中的服务名 * @param {keyof typeof appConfig} service 配置中的服务名
* @returns {string} 完整探针 URL如 https://f.zikai.wang/health * @returns {string} 完整探针 URL如 https://f.zikai.wang/health
*/ */
export function healthUrl(service) { export function healthUrl(service) {
const cfg = appConfig[service] const cfg = appConfig[service]
if (!cfg) return '' if (!cfg) return ''
if (cfg.healthUrl) return cfg.healthUrl
return `${cfg.baseUrl}${cfg.healthPath}` return `${cfg.baseUrl}${cfg.healthPath}`
} }

View File

@@ -0,0 +1,11 @@
// 模块元数据 -- 日程整理timeTableFix页签
// 构建期组件集成:直接 import 子模块 timeTableFix 的 App.vue 作为懒加载路由组件。
// timeTableFix 作为 git submodule 位于 third_party/timeTableFix独立维护、独立仓库。
// 升级cd third_party/timeTableFix && git pull回 mainPage 根 git add 该子模块并重新 build。
export default {
id: 'timetable',
tabKey: 'tabs.timetable',
order: 3,
// 懒加载子模块组件 -> 独立 chunk含 ical.js仅访问该页签时下载
component: () => import('../../../third_party/timeTableFix/src/App.vue')
}

1
third_party/timeTableFix vendored Submodule