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:
64
README.md
64
README.md
@@ -10,27 +10,32 @@ Zikai 的作品集主页 -- Vue 3 模块化多项目展示站。浅色极简、
|
||||
```
|
||||
mainPage/
|
||||
├── index.html
|
||||
├── package.json
|
||||
├── vite.config.js # 构建输出到 /root/html（emptyOutDir=false，不清空既有文件）
|
||||
├── 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> + 页脚
|
||||
├── main.js # 应用入口（挂载 i18n / router / 全局样式）
|
||||
├── App.vue # 根布局：顶栏 + 标签导航 + <KeepAlive router-view> + 页脚
|
||||
├── config/
|
||||
│ └── app.config.js # ★ 集中配置：外部服务 URL（白板地址 / 存活探针等）
|
||||
├── i18n/ # 国际化（中文同步注入；英文动态 import() 懒加载）
|
||||
│ └── app.config.js # ★ 集中配置：外部服务 URL（白板地址 / 存活探针等）
|
||||
├── i18n/ # 国际化（中文同步注入；英文动态 import() 懒加载）
|
||||
│ ├── index.js
|
||||
│ └── locales/{zh-CN,en}.js
|
||||
├── router/index.js # 路由表由模块注册表自动生成
|
||||
├── modules/ # ★ 扩展点：每个页签一个文件夹
|
||||
│ ├── index.js # 注册表（import.meta.glob 约定式收集，带容错）
|
||||
│ ├── mobile-game/ # 移动游戏项目页签
|
||||
│ ├── whiteboard/ # 共享记事本页签（iframe 嵌入 + 存活校验）
|
||||
│ └── calendar/ # 隐藏页（仅手动访问 /cqy）
|
||||
├── components/ # 共享组件（TabNav / LanguageSwitcher / ui 基元）
|
||||
├── composables/ # useProjects（页签+存活联动）/ useLiveness / useI18nLazy / useLocale
|
||||
└── styles/ # variables.css（主题令牌）+ base.css
|
||||
├── router/index.js # 路由表由模块注册表自动生成
|
||||
├── modules/ # ★ 扩展点：每个页签一个文件夹
|
||||
│ ├── index.js # 注册表（import.meta.glob 约定式收集，带容错）
|
||||
│ ├── mobile-game/ # 移动游戏项目页签
|
||||
│ ├── whiteboard/ # 共享记事本页签（iframe 嵌入 + 存活校验）
|
||||
│ ├── timetable/ # 日程整理页签（构建期 import 子模块 App.vue）
|
||||
│ └── calendar/ # 隐藏页（仅手动访问 /cqy）
|
||||
├── components/ # 共享组件（TabNav / LanguageSwitcher / ui 基元）
|
||||
├── composables/ # useProjects（页签+存活联动）/ useLiveness / useI18nLazy / useLocale
|
||||
└── styles/ # variables.css（主题令牌）+ base.css
|
||||
```
|
||||
|
||||
## 模块机制（高内聚低耦合）
|
||||
@@ -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/` 反代单独访问。
|
||||
|
||||
---
|
||||
|
||||
## 开发命令
|
||||
|
||||
Reference in New Issue
Block a user