调试

Web/src/App.vue

@@ -1,6 +1,8 @@
 <template>
-  <van-config-provider :theme="theme" :style="{ height: vh }">
+  <van-config-provider :theme="theme" class="app-root">
-    <RouterView />
+    <div class="app-main">
+      <RouterView />
+    </div>
     <van-tabbar v-model="active" v-show="showTabbar">
       <van-tabbar-item icon="notes-o" to="/calendar">
         日历
@@ -22,22 +24,6 @@
 import { RouterView, useRoute } from 'vue-router'
 import { ref, onMounted, onUnmounted, computed } from 'vue'
 
-const vh = ref('100vh')
-
-const setVh = () => {
-  // 实际可视高度，能更好适配 iOS、PWA 等场景
-  vh.value = window.innerHeight + 'px'
-}
-
-onMounted(() => {
-  setVh()
-  window.addEventListener('resize', setVh)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', setVh)
-})
-
 const route = useRoute()
 
 // 根据路由判断是否显示Tabbar
@@ -81,5 +67,16 @@ const handleTabClick = (path) => {
 </script>
 
 <style scoped>
+.app-root {
+  /* 用前面的 JS 动态高度方案，或至少用 100% 而不是 100vh */
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 
+/* 主体内容自己撑开，给 Tabbar 留出空间 */
+.app-main {
+  flex: 1;
+  overflow-y: auto;
+}
 </style>