Przeglądaj źródła

fix(frontend): 修复多页签横向滚动双重偏移

- 移除自定义 scrollLeft 滚轮接管,改由 antd Tabs 维护内部 translate 偏移
- 恢复 Tabs 自带滚轮监听的注册,避免页签跳位与错位
cc 2 dni temu
rodzic
commit
5ae146e504

+ 1 - 20
ai-electron/frontend/src/core/layouts/default/tabs/index.vue

@@ -28,7 +28,7 @@
 <script lang="ts">
   import { RouteLocationNormalized, RouteMeta, useRoute } from 'vue-router';
 
-  import { defineComponent, computed, unref, ref, onMounted, onBeforeUnmount } from 'vue';
+  import { defineComponent, computed, unref, ref } from 'vue';
 
   import { Tabs } from 'ant-design-vue';
   import TabContent from './components/TabContent.vue';
@@ -89,25 +89,6 @@
         ];
       });
 
-      // 页签栏内容超出宽度时用滚轮横向滚动;rc-tabs 自带的 wheel 监听在页签重渲染后会丢失,这里自行接管
-      function handleTabsWheel(e: WheelEvent) {
-        const wrap = tabsRootRef.value?.querySelector<HTMLElement>('.ant-tabs-nav-wrap');
-        if (!wrap || !(e.target instanceof Node) || !wrap.contains(e.target)) return;
-        if (wrap.scrollWidth <= wrap.clientWidth) return;
-        const delta = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
-        if (!delta) return;
-        e.preventDefault();
-        wrap.scrollLeft += delta * (e.deltaMode === 1 ? 16 : 1);
-      }
-
-      onMounted(() => {
-        tabsRootRef.value?.addEventListener('wheel', handleTabsWheel, { passive: false });
-      });
-
-      onBeforeUnmount(() => {
-        tabsRootRef.value?.removeEventListener('wheel', handleTabsWheel);
-      });
-
       listenerRouteChange((route) => {
         const { name } = route;
         // if (name === REDIRECT_NAME || !route || !userStore.getToken) {

+ 2 - 5
ai-electron/frontend/src/setupAntdTabsListenerPatch.ts

@@ -45,10 +45,6 @@ function shouldSkipTabsListener(
 
   const listenerName = getListenerName(listener);
 
-  if (type === 'wheel' && listenerName === 'onProxyWheel' && isTabsNavWrap(target)) {
-    return true;
-  }
-
   if (isTouchCapableDevice()) {
     return false;
   }
@@ -77,8 +73,9 @@ export function setupAntdTabsListenerPatch() {
     listener: EventListenerOrEventListenerObject | null,
     options?: boolean | AddEventListenerOptions,
   ) {
-    // ant-design-vue Tabs 会在开发态给每个 TabNavList 预先挂滚轮/触摸拦截监听,
+    // ant-design-vue Tabs 会在开发态给每个 TabNavList 预先挂触摸拦截监听,
     // 这里仅在业务代码外层跳过它,避免反复刷非 passive warning。
+    // 滚轮滚动保留 Tabs 自身实现(维护内部 translate 偏移),不要再接管 scrollLeft。
     if (listener && shouldSkipTabsListener(this, type, listener)) {
       return;
     }