From 337d516c08bb4bd3712328d8b34f943639471cc6 Mon Sep 17 00:00:00 2001
From: Zikai <zikai@local>
Date: Mon, 13 Jul 2026 14:13:23 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=97=A5=E5=8E=86=E9=A1=B5=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=A1=B5=E7=AD=BE+=E9=A1=B5=E7=AD=BE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96+iframe=E8=87=AA=E9=80=82=E5=BA=94+?=
 =?UTF-8?q?=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useProjects: 访问 hidden 模块(/cqy)时仍显示其页签并高亮，
  让用户知道当前位置；主页仍隐藏日历页签
- TabNav: 非激活页签加圆角背景与 hover 背景反馈，激活页签
  下边线贯通整宽，更像页签
- Calendar: iframe 去除固定 800x600，改 width/height:100% +
  aspect-ratio 自适应（宽屏16:10，窄屏4:3，min-height 400px）
- Calendar: 加载骨架屏覆盖层（iframe @load 后淡出），
  iframe 始终在 DOM 中确保 load 事件触发
- i18n: 日历页签文案改「cqy课程表」/「CQY Timetable」
headless 验证：/cqy 显示页签且激活、hover 有背景反馈、
iframe 自适应宽窄屏、骨架屏加载后淡出
---
 src/components/TabNav.vue         | 10 +++--
 src/composables/useProjects.js    | 11 +++--
 src/i18n/locales/en.js            |  2 +-
 src/i18n/locales/zh-CN.js         |  2 +-
 src/modules/calendar/Calendar.vue | 68 ++++++++++++++++++++++++++-----
 5 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/src/components/TabNav.vue b/src/components/TabNav.vue
index a2921e6..1d36c99 100644
--- a/src/components/TabNav.vue
+++ b/src/components/TabNav.vue
@@ -45,22 +45,24 @@ const { projects } = useProjects()
   font-size: 0.95rem;
   font-weight: 500;
   white-space: nowrap;
-  transition: color var(--transition);
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  transition: color var(--transition), background var(--transition);
 }
 .tab-nav__item:hover {
   color: var(--text-primary);
+  background: var(--surface);
 }
 .tab-nav__item.is-active {
   color: var(--accent);
+  background: var(--surface);
 }
 .tab-nav__item.is-active::after {
   content: '';
   position: absolute;
-  left: var(--space-md);
-  right: var(--space-md);
+  left: 0;
+  right: 0;
   bottom: -1px;
   height: 2px;
   background: var(--accent);
-  border-radius: 2px;
 }
 </style>
diff --git a/src/composables/useProjects.js b/src/composables/useProjects.js
index 9ccf489..0911fe7 100644
--- a/src/composables/useProjects.js
+++ b/src/composables/useProjects.js
@@ -1,9 +1,14 @@
 import modules from '../modules/index.js'
-import { ref } from 'vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 
 // 读取已注册模块列表，供 TabNav 渲染页签
-// hidden 模块（如日历页）不显示在导航中，但仍可通过路由直接访问
+// hidden 模块（如日历页）默认不显示在导航中，但当用户正在访问该页时
+// 仍显示其页签（描下边高亮），让用户知道当前所在位置。
 export function useProjects() {
-  const projects = ref(modules.filter((m) => !m.hidden))
+  const route = useRoute()
+  const projects = computed(() =>
+    modules.filter((m) => !m.hidden || m.id === route.meta.moduleId)
+  )
   return { projects }
 }
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index c4ed1bd..fb8934d 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -10,7 +10,7 @@ export default {
   },
   tabs: {
     mobileGame: 'Mobile Game Project',
-    calendar: 'Calendar'
+    calendar: 'CQY Timetable'
   },
   mobileGame: {
     hero: {
diff --git a/src/i18n/locales/zh-CN.js b/src/i18n/locales/zh-CN.js
index 6d58965..d9e21de 100644
--- a/src/i18n/locales/zh-CN.js
+++ b/src/i18n/locales/zh-CN.js
@@ -9,7 +9,7 @@ export default {
   },
   tabs: {
     mobileGame: '移动游戏项目',
-    calendar: '日历'
+    calendar: 'cqy课程表'
   },
   mobileGame: {
     hero: {
diff --git a/src/modules/calendar/Calendar.vue b/src/modules/calendar/Calendar.vue
index e59da6d..5c2b497 100644
--- a/src/modules/calendar/Calendar.vue
+++ b/src/modules/calendar/Calendar.vue
@@ -1,26 +1,38 @@
 <script setup>
-// 日历页 -- 隐藏页，仅可通过手动访问 /cqy 进入，不在导航中显示
-const calendarSrc =
+import { ref, computed } from 'vue'
+import { useLocale } from '../../composables/useLocale.js'
+
+const { t } = useLocale()
+
+// 谷歌日历 embed URL（周视图）
+const calendarSrc = computed(() =>
   'https://calendar.google.com/calendar/embed?height=600&wkst=2&ctz=Australia%2FMelbourne&showPrint=0&mode=WEEK' +
   '&src=Y2E0YTE5ZWYwNDM3OTYyYzY5YjEyYzYxYWVmOGVlZjY3MGU5ZDdmYjRlNzJlOTFjNDJjMzllM2Q2NGU5ZTAzNkBncm91cC5jYWxlbmRhci5nb29nbGUuY29t' +
   '&src=emguYXVzdHJhbGlhbiNob2xpZGF5QGdyb3VwLnYuY2FsZW5kYXIuZ29vZ2xlLmNvbQ' +
   '&color=%237986cb&color=%230b8043'
+)
+
+const loaded = ref(false)
 </script>
 
 <template>
   <div class="calendar-page">
     <div class="container">
-      <h1 class="calendar-page__title">Calendar</h1>
+      <h1 class="calendar-page__title">{{ t('tabs.calendar') }}</h1>
       <div class="calendar-page__frame">
+        <!-- 加载占位骨架（覆盖层，iframe 加载完成后淡出） -->
+        <Transition name="fade">
+          <div v-if="!loaded" class="calendar-page__skeleton">
+            <div class="calendar-page__skeleton-text">{{ t('common.loading') }}</div>
+          </div>
+        </Transition>
         <iframe
           :src="calendarSrc"
-          style="border: solid 1px #777"
-          width="800"
-          height="600"
+          class="calendar-page__iframe"
           frameborder="0"
           scrolling="no"
-          loading="lazy"
-          title="Google Calendar"
+          :title="t('tabs.calendar')"
+          @load="loaded = true"
         />
       </div>
     </div>
@@ -36,13 +48,47 @@ const calendarSrc =
   margin-bottom: var(--space-lg);
 }
 .calendar-page__frame {
+  position: relative;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow);
-}
-.calendar-page__frame iframe {
+  border: 1px solid var(--border);
+  /* 自适应宽高：宽屏 16:9，窄屏更高 */
   width: 100%;
-  max-width: 800px;
+  aspect-ratio: 4 / 3;
+  min-height: 400px;
+}
+.calendar-page__iframe {
+  width: 100%;
+  height: 100%;
   display: block;
+  border: 0;
+}
+.calendar-page__skeleton {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+}
+.calendar-page__skeleton-text {
+  color: var(--text-tertiary);
+  font-size: 0.95rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.4s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@media (min-width: 769px) {
+  .calendar-page__frame {
+    aspect-ratio: 16 / 10;
+  }
 }
 </style>