From b02fa3735080ebbdf611c0bfe7aa5d2cb04988ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E7=94=B7?= <l.weinan@gmail.com>
Date: Sat, 2 May 2026 22:33:20 +0800
Subject: [PATCH] fix: enable natural touch scroll in matrix landscape

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../clazz/components/ClazzMatrixView.vue      | 47 ++++++++++++++++++-
 src/pages/clazz/index.vue                     |  2 +-
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/pages/clazz/components/ClazzMatrixView.vue b/src/pages/clazz/components/ClazzMatrixView.vue
index 5a03e39..e90768a 100644
--- a/src/pages/clazz/components/ClazzMatrixView.vue
+++ b/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,
     };
   },
 });
@@ -484,6 +518,8 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .ml-header {
@@ -491,6 +527,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 +560,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;
 }
 
diff --git a/src/pages/clazz/index.vue b/src/pages/clazz/index.vue
index bc76c3b..d234a46 100644
--- a/src/pages/clazz/index.vue
+++ b/src/pages/clazz/index.vue
@@ -1473,7 +1473,7 @@ export default defineComponent({
 .landscape-stage-viewport--matrix {
   flex: 1;
   min-height: 0;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .landscape-stage {