fix: fit all landscape matrix slots without scrolling

Co-authored-by: Cursor <cursoragent@cursor.com>

src/pages/clazz/components/ClazzMatrixView.vue

@@ -79,13 +79,7 @@
           <div class="day-date">{{ day.date }}</div>
         </div>
       </div>
-      <div
-        ref="landscapeBodyRef"
-        class="ml-body"
-        @touchstart="onLandscapeBodyTouchStart"
-        @touchmove.prevent="onLandscapeBodyTouchMove"
-        @wheel="onLandscapeBodyWheel"
-      >
+      <div class="ml-body">
         <div v-for="slot in timeSlots" :key="slot.key" class="ml-row">
           <div class="ml-label">
             <div class="header-label">{{ slot.label }}</div>
@@ -120,7 +114,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import { NormalizedClazzEvent } from '../useClazzViewModel';
 import { DateFormatter, formatDate, hexToRgb } from '~/utils';
 
@@ -178,8 +172,6 @@ export default defineComponent({
   emits: ['cell-click', 'event-click'],
   setup(props, { emit }) {
     const today = computed(() => new Date());
-    const landscapeBodyRef = ref<HTMLElement | null>(null);
-    const landscapeTouchLastY = ref<number | null>(null);
 
     const weekDays = computed<WeekDay[]>(() => {
       const days: WeekDay[] = [];
@@ -261,30 +253,7 @@ export default defineComponent({
       emit('event-click', ev);
     }
 
-    function onLandscapeBodyTouchStart(e: TouchEvent) {
-      if (!props.landscape) return;
-      landscapeTouchLastY.value = e.touches[0]?.clientY ?? null;
-    }
-
-    function onLandscapeBodyTouchMove(e: TouchEvent) {
-      if (!props.landscape) return;
-      const currentY = e.touches[0]?.clientY;
-      const previousY = landscapeTouchLastY.value;
-      const body = landscapeBodyRef.value;
-      if (currentY == null || previousY == null || !body) return;
-      body.scrollTop += currentY - previousY;
-      landscapeTouchLastY.value = currentY;
-    }
-
-    function onLandscapeBodyWheel(e: WheelEvent) {
-      if (!props.landscape) return;
-      const body = landscapeBodyRef.value;
-      if (!body) return;
-      body.scrollTop += e.deltaY;
-    }
-
     return {
-      landscapeBodyRef,
       timeSlots,
       weekDays,
       eventMap,
@@ -293,9 +262,6 @@ export default defineComponent({
       eventStyle,
       onCellClick,
       onEventClick,
-      onLandscapeBodyTouchStart,
-      onLandscapeBodyTouchMove,
-      onLandscapeBodyWheel,
     };
   },
 });
@@ -305,6 +271,7 @@ export default defineComponent({
 @sidebar-width: 1.2rem;
 @cell-width: 1.8rem;
 @portrait-header-height: 0.72rem;
+@portrait-day-row-min-height: 1.16rem;
 
 .matrix-wrapper {
   width: 100%;
@@ -350,7 +317,8 @@ export default defineComponent({
   }
 
   .sidebar-row {
-    flex: 1;
+    flex: 1 0 @portrait-day-row-min-height;
+    min-height: @portrait-day-row-min-height;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -391,6 +359,7 @@ export default defineComponent({
   flex-direction: column;
   min-height: 100%;
   min-width: fit-content;
+  box-sizing: border-box;
 }
 
 /* ─── 行：共用 ─── */
@@ -402,8 +371,8 @@ export default defineComponent({
 
 .sr-row {
   display: flex;
-  flex: 1;
-  min-height: 0;
+  flex: 1 0 @portrait-day-row-min-height;
+  min-height: @portrait-day-row-min-height;
 }
 
 /* ─── Spacer（占位与 sidebar 同宽） ─── */
@@ -566,16 +535,17 @@ export default defineComponent({
 .ml-body {
   flex: 1;
   min-height: 0;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   overflow-x: hidden;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
-  touch-action: none;
   padding-bottom: 0.08rem;
 }
 
 .ml-row {
   display: flex;
+  flex: 1 1 0;
+  min-height: 0;
   border-bottom: 1px solid #f0f0f0;
 }
 
@@ -594,7 +564,7 @@ export default defineComponent({
 .ml-cell {
   flex: 1;
   min-width: 0;
-  min-height: 0.6rem;
+  min-height: 0;
   display: flex;
   flex-direction: row;
   gap: 0.02rem;

src/pages/clazz/index.vue

@@ -11,7 +11,7 @@
         <span class="view-toolbar__range" v-else>日历周视图</span>
       </div>
       <div class="view-toolbar__actions">
-        <div class="view-toolbar__orient">
+        <div v-if="viewMode === 'matrix'" class="view-toolbar__orient">
           <van-button size="small" plain @click="isLandscape = !isLandscape">
             {{ isLandscape ? '退出横屏' : '横屏' }}
           </van-button>
@@ -34,23 +34,15 @@
     <div v-if="isLandscape" class="landscape-shell">
       <div class="landscape-shell__toolbar">
         <div class="landscape-shell__left">
-          <van-button size="small" plain @click="isLandscape = false">退出横屏</van-button>
-          <van-button v-if="viewMode === 'matrix'" size="small" @click="matrixGoToday">本周</van-button>
+          <van-button size="small" @click="matrixGoToday">本周</van-button>
         </div>
         <div class="landscape-shell__title">
-          <template v-if="viewMode === 'matrix'">
           <van-button size="small" @click="matrixGoPrev">‹</van-button>
           <span>{{ matrixWeekRange }}</span>
           <van-button size="small" @click="matrixGoNext">›</van-button>
-          </template>
-          <template v-else>日历周视图</template>
         </div>
         <div class="landscape-shell__toggle">
-          <van-button
-            :type="viewMode === 'calendar' ? 'primary' : 'default'"
-            size="small" plain
-            @click="setViewMode('calendar')"
-          >日历</van-button>
+          <van-button size="small" plain @click="isLandscape = false">退出横屏</van-button>
           <van-button
             :type="viewMode === 'matrix' ? 'primary' : 'default'"
             size="small" plain
@@ -59,16 +51,7 @@
         </div>
       </div>
       <div class="landscape-shell__body" :class="{ 'landscape-shell__body--matrix': viewMode === 'matrix' }">
-        <template v-if="viewMode === 'calendar'">
-          <div class="landscape-stage-viewport">
-            <div class="landscape-stage">
-              <div class="calendar-wrapper calendar-wrapper--landscape">
-                <FullCalendar ref="calendar" :options="options" />
-              </div>
-            </div>
-          </div>
-        </template>
-        <template v-else>
+        <template v-if="viewMode === 'matrix'">
           <div class="landscape-stage-viewport landscape-stage-viewport--matrix">
             <div class="landscape-stage">
               <div class="matrix-container matrix-container--landscape">
@@ -481,6 +464,9 @@ export default defineComponent({
     // 切换视图时缓存
     const setViewMode = (mode: 'calendar' | 'matrix') => {
       viewMode.value = mode;
+      if (mode === 'calendar') {
+        isLandscape.value = false;
+      }
       setKey('clazz_view_mode', mode);
       updateCalendarSize();
     };
@@ -1270,6 +1256,10 @@ export default defineComponent({
   }
 
   :deep(.matrix-scroll) {
+    box-sizing: border-box;
+  }
+
+  :deep(.scroll-inner) {
     padding-bottom: calc(0.72rem + env(safe-area-inset-bottom));
     box-sizing: border-box;
   }