fix: cannot x-scroll with shortcut (#18656)

ecmadao · web-flow · commit be2b3db57558 · 2025-12-27T10:32:03.000+08:00
diff --git a/frontend/src/views/sql-editor/EditorCommon/ResultView/DataTable/VirtualDataTable.vue b/frontend/src/views/sql-editor/EditorCommon/ResultView/DataTable/VirtualDataTable.vue
@@ -212,7 +212,7 @@
 <script lang="ts" setup>
 import { useWindowSize, watchDebounced } from "@vueuse/core";
 import { NPerformantEllipsis, NVirtualList } from "naive-ui";
-import { nextTick, ref } from "vue";
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
 import { type ComposedDatabase, DEBOUNCE_SEARCH_DELAY } from "@/types";
 import type { MaskingReason } from "@/types/proto-es/v1/sql_service_pb";
 import { type QueryRow } from "@/types/proto-es/v1/sql_service_pb";
@@ -351,6 +351,35 @@ watchDebounced(
   { debounce: DEBOUNCE_SEARCH_DELAY }
 );
 
+// Handle shift+wheel for horizontal scrolling
+// Use capture phase to intercept before NVirtualList handles it
+const handleWheel = (event: WheelEvent) => {
+  const container = containerRef.value;
+  if (!container) return;
+
+  // Only handle shift+wheel when there's horizontal overflow
+  const hasHorizontalOverflow = container.scrollWidth > container.clientWidth;
+  if (!event.shiftKey || !hasHorizontalOverflow) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+  container.scrollLeft += event.deltaY || event.deltaX;
+};
+
+onMounted(() => {
+  // Use capture phase to intercept before NVirtualList
+  containerRef.value?.addEventListener("wheel", handleWheel, {
+    passive: false,
+    capture: true,
+  });
+});
+
+onUnmounted(() => {
+  containerRef.value?.removeEventListener("wheel", handleWheel, {
+    capture: true,
+  });
+});
+
 defineExpose({
   scrollTo: (index: number) =>
     virtualListRef.value?.scrollTo({
