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/
|
node_modules/
|
||||||
|
# 子模块 timeTableFix 的依赖(node_modules 已被上一条覆盖,此条仅作显式说明)
|
||||||
|
third_party/timeTableFix/node_modules/
|
||||||
|
|
||||||
# 构建产物(输出到 /root/html,不入库)
|
# 构建产物(输出到 /root/html,不入库)
|
||||||
dist/
|
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/
|
mainPage/
|
||||||
├── index.html
|
├── index.html
|
||||||
├── package.json
|
├── package.json # 含 ical.js(timeTableFix 依赖)
|
||||||
├── vite.config.js # 构建输出到 /root/html(emptyOutDir=false,不清空既有文件)
|
├── vite.config.js # 构建输出到 /root/html(emptyOutDir=false,不清空既有文件)
|
||||||
|
├── .gitmodules # git submodule:third_party/timeTableFix
|
||||||
├── README.md
|
├── README.md
|
||||||
├── public/favicon.svg
|
├── public/favicon.svg
|
||||||
|
├── third_party/
|
||||||
|
│ └── timeTableFix/ # ★ git submodule:ICS 日程整理器,独立仓库
|
||||||
|
│ # 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` fetch,4s 超时),之后每 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
6
package-lock.json
generated
@@ -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",
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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}`
|
||||||
}
|
}
|
||||||
|
|||||||
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