From a49a725950cf7667e2d9c07dc6a5e4b1d45ba639 Mon Sep 17 00:00:00 2001
From: zikai <1621362626@qq.com>
Date: Thu, 23 Jul 2026 02:48:58 +0000
Subject: [PATCH] =?UTF-8?q?refactor:=20App.vue=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=9A=94=E7=A6=BB=EF=BC=8C=E4=BD=BF=E5=85=B6=E5=8F=AF=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=BA=E7=BB=84=E4=BB=B6=E8=A2=AB=E5=B5=8C=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 全局重置（* / body）抽到 src/styles/global.css，仅独立 app 的 main.js 加载
- App.vue <style> 改 scoped，根及内部类名加 ttf- 前缀，避免与宿主冲突
- 根 class app -> ttf-app，min-height 改为填满容器以适配嵌入
- 加 defineOptions({ name: 'timetable' }) 供宿主 KeepAlive 匹配
- README 嵌入说明改为构建期组件集成 + git submodule
- 不影响独立运行：npm test 42 项通过，npm run build 通过
---
 README.md             | 23 ++++++++++++----
 src/App.vue           | 62 ++++++++++++++++++++++++-------------------
 src/main.js           |  1 +
 src/styles/global.css |  9 +++++++
 4 files changed, 62 insertions(+), 33 deletions(-)
 create mode 100644 src/styles/global.css

diff --git a/README.md b/README.md
index 2cc02ab..60c2431 100644
--- a/README.md
+++ b/README.md
@@ -122,14 +122,27 @@ sudo ufw allow 8888/tcp
 
 ### 6. 嵌入主页（可选）
 
-本项目也可作为 [mainPage](https://git.zikai.wang/zikai/zMainPage) 的一个页签嵌入展示。方式是在 mainPage 所在站点的 Apache 配置中，把 `/ttf/` 反向代理到本地 8888：
+本项目可作为 [mainPage](https://git.zikai.wang/zikai/zMainPage) 的一个页签集成展示。采用**构建期组件集成 + git submodule**：
 
-```apache
-ProxyPass        /ttf/ http://127.0.0.1:8888/
-ProxyPassReverse /ttf/ http://127.0.0.1:8888/
+- mainPage 通过 git submodule 把本项目作为子目录（`third_party/timeTableFix`）引入，并直接 `import` 本项目的 `src/App.vue` 作为懒加载路由组件。
+- 集成时共享 mainPage 的构建、依赖（`ical.js`）与 KeepAlive 缓存，不再是 iframe，无运行期割裂。
+- 本项目 `App.vue` 已做样式隔离（scoped + `ttf-` 前缀类名），全局重置仅在独立 app（`main.js`）加载，作为组件嵌入时不污染宿主。
+
+**升级流程**（mainPage 侧更新本项目到新版本）：
+
+```bash
+cd mainPage
+git submodule update --remote third_party/timeTableFix   # 拉取最新
+cd third_party/timeTableFix && git checkout master        # 固定到目标分支
+cd ../..
+git add third_party/timeTableFix                          # 更新 gitlink
+git commit -m "chore: 升级 timeTableFix 子模块"
+npm run build                                             # 重新构建 mainPage
 ```
 
-mainPage 的 `src/config/app.config.js` 中 `timeTableFix.pageUrl = '/ttf/'` 即指向此代理。代理时 Apache 会把 Host 改写为 `127.0.0.1:8888`（localhost），无需在本项目的 `allowedHosts` 中加 `zikai.wang`。本项目本身完全独立，移除该代理与 mainPage 页签不影响其独立运行。
+本项目本身完全独立：脱离 mainPage 仍可独立 `npm run build` / `npm test` / systemd 部署。移除 mainPage 中的页签仅需删其 `src/modules/timetable/` 并 `git submodule deinit`，不影响本项目。
+
+> 旧的 iframe 嵌入方式（Apache `/ttf/` 反代到 8888）仍可保留，用于经 `https://zikai.wang/ttf/` 单独访问独立 app，与组件集成互不冲突。
 
 ## 使用（启动 / 关闭）
 
diff --git a/src/App.vue b/src/App.vue
index 05581ed..2f85d99 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,8 @@
 <script setup>
+// 组件名与 mainPage 模块 id 一致，供 <KeepAlive :include> 按 id 精确匹配。
+// 作为独立 app 运行时该名不影响行为。
+defineOptions({ name: 'timetable' })
+
 import { useCalendar } from './composables/useCalendar.js'
 import DropZone from './components/DropZone.vue'
 import HeaderBar from './components/HeaderBar.vue'
@@ -11,11 +15,11 @@ const { isLoaded, state, setViewMode } = useCalendar()
 </script>
 
 <template>
-  <div class="app">
-    <header class="app-header">
-      <div class="header-left">
+  <div class="ttf-app">
+    <header class="ttf-header">
+      <div class="ttf-header-left">
         <h1>ICS 日程整理器</h1>
-        <div v-if="isLoaded" class="view-switcher">
+        <div v-if="isLoaded" class="ttf-view-switcher">
           <button
             :class="{ active: state.viewMode === 'edit' }"
             @click="setViewMode('edit')"
@@ -32,11 +36,11 @@ const { isLoaded, state, setViewMode } = useCalendar()
       </div>
       <HeaderBar />
     </header>
-    <main class="app-main">
+    <main class="ttf-main">
       <DropZone v-if="!isLoaded" />
       <template v-else>
         <EventList v-if="state.viewMode === 'edit'" />
-        <div class="detail-area">
+        <div class="ttf-detail-area">
           <EventDetail v-if="state.viewMode === 'edit'" />
           <MonthPreview v-else-if="state.viewMode === 'month'" />
           <WeekPreview v-else-if="state.viewMode === 'week'" />
@@ -46,36 +50,38 @@ const { isLoaded, state, setViewMode } = useCalendar()
   </div>
 </template>
 
-<style>
-* { box-sizing: border-box; margin: 0; padding: 0; }
-body {
-  font-family: -apple-system, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
-  background: #f5f6f8;
-  color: #222;
-  line-height: 1.5;
+<style scoped>
+/* scoped：样式仅作用于本组件，作为组件被嵌入时不污染宿主。
+   全局重置（* / body）已移至 src/styles/global.css，仅独立 app 加载。 */
+.ttf-app {
+  display: flex;
+  flex-direction: column;
+  /* 适配嵌入：填满宿主 <main> 区域；独立 app 下 body 仍提供背景 */
+  min-height: 0;
+  height: 100%;
 }
-.app { min-height: 100vh; display: flex; flex-direction: column; }
-.app-header {
+.ttf-header {
   background: #2c3e50;
   color: #fff;
   padding: 14px 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-shrink: 0;
 }
-.header-left {
+.ttf-header-left {
   display: flex;
   align-items: center;
   gap: 24px;
 }
-.app-header h1 { font-size: 18px; font-weight: 600; white-space: nowrap; }
-.view-switcher {
+.ttf-header h1 { font-size: 18px; font-weight: 600; white-space: nowrap; }
+.ttf-view-switcher {
   display: flex;
   background: #1a252f;
   border-radius: 6px;
   overflow: hidden;
 }
-.view-switcher button {
+.ttf-view-switcher button {
   background: transparent;
   color: #bdc3c7;
   border: none;
@@ -84,28 +90,28 @@ body {
   cursor: pointer;
   transition: all 0.15s;
 }
-.view-switcher button:hover { color: #fff; }
-.view-switcher button.active {
+.ttf-view-switcher button:hover { color: #fff; }
+.ttf-view-switcher button.active {
   background: #3498db;
   color: #fff;
 }
-.app-main { flex: 1; display: flex; overflow: hidden; }
-.detail-area { flex: 1; overflow-y: auto; }
+.ttf-main { flex: 1; display: flex; overflow: hidden; min-height: 0; }
+.ttf-detail-area { flex: 1; overflow-y: auto; }
 
 /* 移动端适配 */
 @media (max-width: 768px) {
-  .app-header {
+  .ttf-header {
     flex-direction: column;
     gap: 10px;
     padding: 10px 12px;
   }
-  .header-left {
+  .ttf-header-left {
     width: 100%;
     justify-content: space-between;
     gap: 12px;
   }
-  .app-header h1 { font-size: 15px; }
-  .view-switcher button { padding: 5px 10px; font-size: 12px; }
-  .app-main { flex-direction: column; }
+  .ttf-header h1 { font-size: 15px; }
+  .ttf-view-switcher button { padding: 5px 10px; font-size: 12px; }
+  .ttf-main { flex-direction: column; }
 }
 </style>
diff --git a/src/main.js b/src/main.js
index 01433bc..a014071 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import './styles/global.css'
 
 createApp(App).mount('#app')
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..7db76db
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,9 @@
+/* 全局重置 -- 仅独立 app（main.js）加载。
+   作为组件被嵌入时由宿主提供重置，本文件不参与，避免污染宿主。 */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: -apple-system, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
+  background: #f5f6f8;
+  color: #222;
+  line-height: 1.5;
+}