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:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,5 +1,7 @@
|
||||
# 依赖
|
||||
node_modules/
|
||||
# 子模块 timeTableFix 的依赖(node_modules 已被上一条覆盖,此条仅作显式说明)
|
||||
third_party/timeTableFix/node_modules/
|
||||
|
||||
# 构建产物(输出到 /root/html,不入库)
|
||||
dist/
|
||||
|
||||
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
[submodule "third_party/timeTableFix"]
|
||||
path = third_party/timeTableFix
|
||||
url = https://git.zikai.wang/zikai/timeTableFix.git
|
||||
38
README.md
38
README.md
@@ -10,13 +10,17 @@ Zikai 的作品集主页 -- Vue 3 模块化多项目展示站。浅色极简、
|
||||
```
|
||||
mainPage/
|
||||
├── index.html
|
||||
├── package.json
|
||||
├── package.json # 含 ical.js(timeTableFix 依赖)
|
||||
├── vite.config.js # 构建输出到 /root/html(emptyOutDir=false,不清空既有文件)
|
||||
├── .gitmodules # git submodule:third_party/timeTableFix
|
||||
├── README.md
|
||||
├── public/favicon.svg
|
||||
├── third_party/
|
||||
│ └── timeTableFix/ # ★ git submodule:ICS 日程整理器,独立仓库
|
||||
│ # src/App.vue 被 timetable 模块直接 import 为路由组件
|
||||
└── src/
|
||||
├── main.js # 应用入口(挂载 i18n / router / 全局样式)
|
||||
├── App.vue # 根布局:顶栏 + 标签导航 + <router-view> + 页脚
|
||||
├── App.vue # 根布局:顶栏 + 标签导航 + <KeepAlive router-view> + 页脚
|
||||
├── config/
|
||||
│ └── app.config.js # ★ 集中配置:外部服务 URL(白板地址 / 存活探针等)
|
||||
├── i18n/ # 国际化(中文同步注入;英文动态 import() 懒加载)
|
||||
@@ -27,6 +31,7 @@ mainPage/
|
||||
│ ├── index.js # 注册表(import.meta.glob 约定式收集,带容错)
|
||||
│ ├── mobile-game/ # 移动游戏项目页签
|
||||
│ ├── whiteboard/ # 共享记事本页签(iframe 嵌入 + 存活校验)
|
||||
│ ├── timetable/ # 日程整理页签(构建期 import 子模块 App.vue)
|
||||
│ └── calendar/ # 隐藏页(仅手动访问 /cqy)
|
||||
├── components/ # 共享组件(TabNav / LanguageSwitcher / ui 基元)
|
||||
├── composables/ # useProjects(页签+存活联动)/ useLiveness / useI18nLazy / useLocale
|
||||
@@ -51,8 +56,8 @@ mainPage/
|
||||
|
||||
### 存活校验
|
||||
|
||||
声明了 `requiresAlive` 的模块,应用启动时对探针 URL 做一次 `no-cors` fetch 探测(4s 超时)。
|
||||
探测返回前该页签不显示(避免闪烁);服务存活则显示,不可达则保持隐藏(刷新页面才重探)。
|
||||
声明了 `requiresAlive` 的模块,应用加载即探测探针 URL(`no-cors` fetch,4s 超时),之后每 30s 周期重探。
|
||||
乐观显示:探测中/存活都显示页签,仅明确不可达时才隐藏并从 KeepAlive 移出(卸载组件);恢复后自动重新加载。目前仅白板页签使用。
|
||||
|
||||
## 依赖的基础设施
|
||||
|
||||
@@ -62,7 +67,9 @@ mainPage/
|
||||
| Web 服务器 | Apache 2.4(启用 `mod_rewrite`),对外静态服务 `/root/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 安装
|
||||
|
||||
@@ -71,9 +78,10 @@ mainPage/
|
||||
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo bash -
|
||||
sudo apt-get install -y nodejs
|
||||
|
||||
# 2. 取代码
|
||||
git clone https://git.zikai.wang/zikai/zMainPage.git mainPage
|
||||
# 2. 取代码(含子模块 timeTableFix)
|
||||
git clone --recursive https://git.zikai.wang/zikai/zMainPage.git mainPage
|
||||
cd mainPage
|
||||
# 若已 clone 但未带子模块:git submodule update --init --recursive
|
||||
npm install
|
||||
|
||||
# 3. 构建(产物输出到 /root/html,不清空既有文件)
|
||||
@@ -103,6 +111,22 @@ RewriteRule ^ index.html [L]
|
||||
3. 在 `src/i18n/locales/zh-CN.js` 与 `en.js` 的 `tabs` 下加对应文案。
|
||||
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
6
package-lock.json
generated
@@ -8,6 +8,7 @@
|
||||
"name": "mainpage",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"ical.js": "^2.1.0",
|
||||
"vue": "^3.4.21",
|
||||
"vue-i18n": "^9.13.1",
|
||||
"vue-router": "^4.3.0"
|
||||
@@ -986,6 +987,11 @@
|
||||
"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": {
|
||||
"version": "0.30.21",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"ical.js": "^2.1.0",
|
||||
"vue": "^3.4.21",
|
||||
"vue-i18n": "^9.13.1",
|
||||
"vue-router": "^4.3.0"
|
||||
|
||||
@@ -15,28 +15,16 @@ export const appConfig = {
|
||||
defaultBoardId: 'share',
|
||||
// 探测超时(毫秒)
|
||||
healthTimeoutMs: 4000
|
||||
},
|
||||
|
||||
// timeTableFix -- ICS 日程整理器(同源 /ttf/ 反向代理到本地 vite preview)
|
||||
timeTableFix: {
|
||||
// 应用页面(同源相对路径,由 Apache /ttf/ 代理到 8888)
|
||||
pageUrl: '/ttf/',
|
||||
// 存活探针 URL(同源,fetch /ttf/ 返回 2xx 即存活)
|
||||
healthUrl: '/ttf/',
|
||||
// 探测超时(毫秒)
|
||||
healthTimeoutMs: 4000
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 取某服务的存活探针 URL。
|
||||
* whiteboard 用 baseUrl+healthPath 拼接;timeTableFix 直接用 healthUrl。
|
||||
* @param {keyof typeof appConfig} service 配置中的服务名
|
||||
* @returns {string} 完整探针 URL,如 https://f.zikai.wang/health
|
||||
*/
|
||||
export function healthUrl(service) {
|
||||
const cfg = appConfig[service]
|
||||
if (!cfg) return ''
|
||||
if (cfg.healthUrl) return cfg.healthUrl
|
||||
return `${cfg.baseUrl}${cfg.healthPath}`
|
||||
}
|
||||
|
||||
11
src/modules/timetable/index.js
Normal file
11
src/modules/timetable/index.js
Normal 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
1
third_party/timeTableFix
vendored
Submodule
Submodule third_party/timeTableFix added at a49a725950
Reference in New Issue
Block a user