调试

Web/src/App.vue

@@ -1,16 +1,7 @@
 <template>
-  <van-config-provider :theme="theme" class="app-root">
+  <van-config-provider :theme="theme">
-<pre
+    <RouterView />
-  style="position:fixed; left:0; top:0; z-index:9999;
+    <van-tabbar v-model="active" v-show="showTabbar" fixed>
-         background:rgba(0,0,0,0.7); color:#0f0;
-         font-size:10px; max-height:50vh; overflow:auto;">
-  {{ log }}
-</pre>
-
-    <div class="app-main">
-      <RouterView />
-    </div>
-    <van-tabbar v-model="active" v-show="showTabbar">
       <van-tabbar-item icon="notes-o" to="/calendar">
         日历
       </van-tabbar-item>
@@ -31,31 +22,6 @@
 import { RouterView, useRoute } from 'vue-router'
 import { ref, onMounted, onUnmounted, computed } from 'vue'
 
-const log = ref('')
-
-const updateInfo = () => {
-  log.value = JSON.stringify({
-    innerHeight: window.innerHeight,
-    outerHeight: window.outerHeight,
-    documentElementClientHeight: document.documentElement.clientHeight,
-    viewport: window.visualViewport
-      ? {
-          height: window.visualViewport.height,
-          offsetTop: window.visualViewport.offsetTop,
-        }
-      : null,
-  }, null, 2)
-}
-
-onMounted(() => {
-  updateInfo()
-  window.addEventListener('resize', updateInfo)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateInfo)
-})
-
 const route = useRoute()
 // 根据路由判断是否显示Tabbar
 const showTabbar = computed(() => {
@@ -98,16 +64,8 @@ const handleTabClick = (path) => {
 </script>
 
 <style scoped>
-.app-root {
+/* TabBar 固定在底部，不占用文档流空间 */
-  /* 用前面的 JS 动态高度方案，或至少用 100% 而不是 100vh */
+:deep(.van-tabbar) {
-  height: 100%;
+  padding-bottom: 0 !important;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 主体内容自己撑开，给 Tabbar 留出空间 */
-.app-main {
-  flex: 1;
-  overflow-y: auto;
 }
 </style>

Web/src/views/CalendarView.vue

@@ -183,9 +183,10 @@ fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
 
 <style scoped>
 .calendar-container {
-  height: 100vh;
+  height: calc(100vh - 50px);
   display: flex;
   flex-direction: column;
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
 .calendar-container :deep(.van-calendar) {