chore: 移除 useTimeoutFn文件，使用 vueuse

vben
1 parent feadf64e
Showing 11 changed files with 48 additions and 93 deletions
packages/hooks/src/index.ts
src/components/Container/src/LazyContainer.vue
src/components/Container/src/collapse/CollapseContainer.vue
src/components/Menu/src/useOpenKeys.ts
src/components/Modal/src/hooks/useModalDrag.ts
src/components/SimpleMenu/src/useOpenKeys.ts
src/components/Table/src/hooks/useDataSource.ts
src/components/Verify/src/DragVerify.vue
src/components/Verify/src/ImgRotate.vue
src/hooks/core/useTimeout.ts
src/hooks/web/useECharts.ts
 export * from './onMountedOrActivated';
 export * from './useAttrs';
 export * from './useRefs';
+
+export { useTimeoutFn } from '@vueuse/core';
@@ -19,8 +19,8 @@
 <script lang="ts">
   import type { PropType } from 'vue';
   import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
+  import { useTimeoutFn } from '@vben/hooks';
   import { Skeleton } from 'ant-design-vue';
-  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
  
   interface State {
@@ -2,10 +2,10 @@
   import { ref, unref, defineComponent, type PropType, type ExtractPropTypes } from 'vue';
   import { isNil } from 'lodash-es';
   import { Skeleton } from 'ant-design-vue';
+  import { useTimeoutFn } from '@vben/hooks';
   import { CollapseTransition } from '/@/components/Transition';
   import CollapseHeader from './CollapseHeader.vue';
   import { triggerWindowResize } from '/@/utils/event';
-  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useDesign } from '/@/hooks/web/useDesign';
  
   const collapseContainerProps = {
 import { MenuModeEnum } from '/@/enums/menuEnum';
 import type { Menu as MenuType } from '/@/router/types';
 import type { MenuState } from './types';
-
 import { computed, Ref, toRaw, unref } from 'vue';
-
+import { useTimeoutFn } from '@vben/hooks';
 import { uniq } from 'lodash-es';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 import { getAllParentPath } from '/@/router/helper/menuHelper';
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
  
 export function useOpenKeys(
   menuState: MenuState,
@@ -22,22 +20,23 @@ export function useOpenKeys(
       return;
     }
     const native = unref(getIsMixSidebar);
-    useTimeoutFn(
-      () => {
-        const menuList = toRaw(menus.value);
-        if (menuList?.length === 0) {
-          menuState.openKeys = [];
-          return;
-        }
-        if (!unref(accordion)) {
-          menuState.openKeys = uniq([...menuState.openKeys, ...getAllParentPath(menuList, path)]);
-        } else {
-          menuState.openKeys = getAllParentPath(menuList, path);
-        }
-      },
-      16,
-      !native,
-    );
+    const handle = () => {
+      const menuList = toRaw(menus.value);
+      if (menuList?.length === 0) {
+        menuState.openKeys = [];
+        return;
+      }
+      if (!unref(accordion)) {
+        menuState.openKeys = uniq([...menuState.openKeys, ...getAllParentPath(menuList, path)]);
+      } else {
+        menuState.openKeys = getAllParentPath(menuList, path);
+      }
+    };
+    if (native) {
+      handle();
+    } else {
+      useTimeoutFn(handle, 16);
+    }
   }
  
   const getOpenKeys = computed(() => {
 import { Ref, unref, watchEffect } from 'vue';
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+import { useTimeoutFn } from '@vben/hooks';
  
 export interface UseModalDragMoveContext {
   draggable: Ref<boolean>;
 import type { Menu as MenuType } from '/@/router/types';
 import type { MenuState } from './types';
-
 import { computed, Ref, toRaw, unref } from 'vue';
-
 import { uniq } from 'lodash-es';
 import { getAllParentPath } from '/@/router/helper/menuHelper';
-
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+import { useTimeoutFn } from '@vben/hooks';
 import { useDebounceFn } from '@vueuse/core';
  
 export function useOpenKeys(
@@ -20,25 +17,27 @@ export function useOpenKeys(
   async function setOpenKeys(path: string) {
     const native = !mixSider.value;
     const menuList = toRaw(menus.value);
-    useTimeoutFn(
-      () => {
-        if (menuList?.length === 0) {
-          menuState.activeSubMenuNames = [];
-          menuState.openNames = [];
-          return;
-        }
-        const keys = getAllParentPath(menuList, path);
  
-        if (!unref(accordion)) {
-          menuState.openNames = uniq([...menuState.openNames, ...keys]);
-        } else {
-          menuState.openNames = keys;
-        }
-        menuState.activeSubMenuNames = menuState.openNames;
-      },
-      30,
-      native,
-    );
+    const handle = () => {
+      if (menuList?.length === 0) {
+        menuState.activeSubMenuNames = [];
+        menuState.openNames = [];
+        return;
+      }
+      const keys = getAllParentPath(menuList, path);
+
+      if (!unref(accordion)) {
+        menuState.openNames = uniq([...menuState.openNames, ...keys]);
+      } else {
+        menuState.openNames = keys;
+      }
+      menuState.activeSubMenuNames = menuState.openNames;
+    };
+    if (native) {
+      handle();
+    } else {
+      useTimeoutFn(handle, 30);
+    }
   }
  
   const getOpenKeys = computed(() => {
@@ -11,7 +11,7 @@ import {
   Ref,
   watchEffect,
 } from 'vue';
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+import { useTimeoutFn } from '@vben/hooks';
 import { buildUUID } from '/@/utils/uuid';
 import { isFunction, isBoolean, isObject } from '/@/utils/is';
 import { get, cloneDeep, merge } from 'lodash-es';
 <script lang="tsx">
   import type { Ref } from 'vue';
   import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
-  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import { useTimeoutFn } from '@vben/hooks';
   import { useEventListener } from '/@/hooks/event/useEventListener';
   import { basicProps } from './props';
   import { getSlot } from '/@/utils/helper/tsxHelper';
 <script lang="tsx">
   import type { MoveData, DragVerifyActionType } from './typing';
   import { defineComponent, computed, unref, reactive, watch, ref } from 'vue';
-  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import { useTimeoutFn } from '@vben/hooks';
   import BasicDragVerify from './DragVerify.vue';
   import { hackCss } from '/@/utils/domUtils';
   import { rotateProps } from './props';
-import { ref, watch } from 'vue';
-import { tryOnUnmounted } from '@vueuse/core';
-import { isFunction } from '/@/utils/is';
-
-export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
-  if (!isFunction(handle)) {
-    throw new Error('handle is not Function!');
-  }
-
-  const { readyRef, stop, start } = useTimeoutRef(wait);
-  if (native) {
-    handle();
-  } else {
-    watch(
-      readyRef,
-      (maturity) => {
-        maturity && handle();
-      },
-      { immediate: false },
-    );
-  }
-  return { readyRef, stop, start };
-}
-
-export function useTimeoutRef(wait: number) {
-  const readyRef = ref(false);
-
-  let timer: TimeoutHandle;
-  function stop(): void {
-    readyRef.value = false;
-    timer && window.clearTimeout(timer);
-  }
-  function start(): void {
-    stop();
-    timer = setTimeout(() => {
-      readyRef.value = true;
-    }, wait);
-  }
-
-  start();
-
-  tryOnUnmounted(stop);
-
-  return { readyRef, stop, start };
-}
 import type { EChartsOption } from 'echarts';
 import type { Ref } from 'vue';
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+import { useTimeoutFn } from '@vben/hooks';
 import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
 import { unref, nextTick, watch, computed, ref } from 'vue';
 import { useEventListener } from '/@/hooks/event/useEventListener';