fix: align portrait matrix sidebar with slots

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

src/pages/clazz/components/ClazzMatrixView.vue

@@ -79,7 +79,13 @@
           <div class="day-date">{{ day.date }}</div>
         </div>
       </div>
-      <div class="ml-body">
+      <div
+        ref="landscapeBodyRef"
+        class="ml-body"
+        @touchstart="onLandscapeBodyTouchStart"
+        @touchmove.prevent="onLandscapeBodyTouchMove"
+        @wheel="onLandscapeBodyWheel"
+      >
         <div v-for="slot in timeSlots" :key="slot.key" class="ml-row">
           <div class="ml-label">
             <div class="header-label">{{ slot.label }}</div>
@@ -114,7 +120,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType, ref } from 'vue';
 import { NormalizedClazzEvent } from '../useClazzViewModel';
 import { DateFormatter, formatDate, hexToRgb } from '~/utils';
 
@@ -172,6 +178,8 @@ 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[] = [];
@@ -253,7 +261,30 @@ 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,
@@ -262,6 +293,9 @@ export default defineComponent({
       eventStyle,
       onCellClick,
       onEventClick,
+      onLandscapeBodyTouchStart,
+      onLandscapeBodyTouchMove,
+      onLandscapeBodyWheel,
     };
   },
 });
@@ -270,6 +304,7 @@ export default defineComponent({
 <style scoped lang="less">
 @sidebar-width: 1.2rem;
 @cell-width: 1.8rem;
+@portrait-header-height: 0.72rem;
 
 .matrix-wrapper {
   width: 100%;
@@ -300,9 +335,12 @@ export default defineComponent({
   height: 100%;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   pointer-events: none; /* allow click-through to cells underneath */
 
   .sidebar-corner {
+    height: @portrait-header-height;
+    box-sizing: border-box;
     flex-shrink: 0;
     background: #f7f8fa;
     border-bottom: 1px solid #e8e8e8;
@@ -358,6 +396,7 @@ export default defineComponent({
 /* ─── 行：共用 ─── */
 .sr-header {
   display: flex;
+  height: @portrait-header-height;
   flex-shrink: 0;
 }
 
@@ -484,6 +523,8 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .ml-header {
@@ -491,6 +532,9 @@ export default defineComponent({
   flex-shrink: 0;
   background: #f7f8fa;
   border-bottom: 1px solid #e8e8e8;
+  position: sticky;
+  top: 0;
+  z-index: 3;
 }
 
 .ml-corner {
@@ -521,8 +565,12 @@ export default defineComponent({
 
 .ml-body {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  touch-action: none;
   padding-bottom: 0.08rem;
 }
 

src/pages/clazz/index.vue

@@ -69,18 +69,6 @@
           </div>
         </template>
         <template v-else>
-          <div class="landscape-matrix-header">
-            <div class="lmh-corner">时段</div>
-            <div
-              v-for="day in matrixWeekDays"
-              :key="day.dateKey"
-              class="lmh-day"
-              :class="{ 'lmh-day--today': day.isToday }"
-            >
-              <div class="day-name">{{ day.name }}</div>
-              <div class="day-date">{{ day.date }}</div>
-            </div>
-          </div>
           <div class="landscape-stage-viewport landscape-stage-viewport--matrix">
             <div class="landscape-stage">
               <div class="matrix-container matrix-container--landscape">
@@ -102,7 +90,6 @@
                   :week-start="matrixWeekStart"
                   :week-end="matrixWeekEnd"
                   :landscape="true"
-                  :hide-landscape-header="true"
                   @cell-click="onMatrixCellClick"
                   @event-click="onMatrixEventClick"
                 />
@@ -1278,6 +1265,10 @@ export default defineComponent({
     min-height: 0;
   }
 
+  :deep(.matrix-sidebar) {
+    padding-bottom: calc(0.72rem + env(safe-area-inset-bottom));
+  }
+
   :deep(.matrix-scroll) {
     padding-bottom: calc(0.72rem + env(safe-area-inset-bottom));
     box-sizing: border-box;
@@ -1486,7 +1477,7 @@ export default defineComponent({
 .landscape-stage-viewport--matrix {
   flex: 1;
   min-height: 0;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .landscape-stage {