refactor: refactor hooks

CHANGELOG.zh_CN.md

@@ -1,5 +1,22 @@
 ## Wip
 
+## (破坏性更新) Breaking changes
+
+- 使用 `pinia` 替换 `vuex`,`vuex-module-decorators`。
+
+  - 影响，之前如果有自己使用 vuex-module-decorators，需要改造为 pinia。
+  - 原因：
+    - pinia 于 vuex5api 基本类似，且简单易懂。
+    - 后续切换 vuex5 成本非常低，也可以当作第三方状态管理库使用
+
+- 移除 `useKeyPress` 使用`vueuse`-`onKeyStroke`代替
+- 移除 `useDebounceFn` 使用`vueuse`-`useDebounceFn`代替
+- 移除 `useThrottle` 使用`vueuse`-`useThrottleFn`代替
+
+### ✨ Refactor
+
+- 移除 `useElResize`
+
 ### 🐛 Bug Fixes
 
 - 登录页样式修复

src/components/Application/src/search/useMenuSearch.ts

@@ -3,15 +3,13 @@ import type { Menu } from '/@/router/types';
 import { ref, onBeforeMount, unref, Ref, nextTick } from 'vue';
 
 import { getMenus } from '/@/router/menus';
-import { KeyCodeEnum } from '/@/enums/keyCodeEnum';
 
 import { cloneDeep } from 'lodash-es';
 import { filter, forEach } from '/@/utils/helper/treeHelper';
 
-import { useDebounce } from '/@/hooks/core/useDebounce';
 import { useGo } from '/@/hooks/web/usePage';
 import { useScrollTo } from '/@/hooks/event/useScrollTo';
-import { useKeyPress } from '/@/hooks/event/useKeyPress';
+import { onKeyStroke, useDebounceFn } from '@vueuse/core';
 import { useI18n } from '/@/hooks/web/useI18n';
 
 export interface SearchResult {
@@ -41,7 +39,7 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
 
   const { t } = useI18n();
   const go = useGo();
-  const [handleSearch] = useDebounce(search, 200);
+  const handleSearch = useDebounceFn(search, 200);
 
   onBeforeMount(async () => {
     const list = await getMenus();
@@ -146,23 +144,10 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
     emit('close');
   }
 
-  useKeyPress(['enter', 'up', 'down', 'esc'], (events) => {
-    const keyCode = events.keyCode;
-    switch (keyCode) {
-      case KeyCodeEnum.UP:
-        handleUp();
-        break;
-      case KeyCodeEnum.DOWN:
-        handleDown();
-        break;
-      case KeyCodeEnum.ENTER:
-        handleEnter();
-        break;
-      case KeyCodeEnum.ESC:
-        handleClose();
-        break;
-    }
-  });
+  onKeyStroke('Enter', handleEnter);
+  onKeyStroke('ArrowUp', handleUp);
+  onKeyStroke('ArrowDown', handleDown);
+  onKeyStroke('Escape', handleClose);
 
   return { handleSearch, searchResult, keyword, activeIndex, handleMouseenter, handleEnter };
 }

src/components/Icon/src/IconPicker.vue

@@ -76,7 +76,7 @@
   import iconsData from '../data/icons.data';
   import { propTypes } from '/@/utils/propTypes';
   import { usePagination } from '/@/hooks/web/usePagination';
-  import { useDebounce } from '/@/hooks/core/useDebounce';
+  import { useDebounceFn } from '@vueuse/core';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -123,7 +123,7 @@
       const { t } = useI18n();
       const { prefixCls } = useDesign('icon-picker');
 
-      const [debounceHandleSearchChange] = useDebounce(handleSearchChange, 100);
+      const debounceHandleSearchChange = useDebounceFn(handleSearchChange, 100);
       const { clipboardRef, isSuccessRef } = useCopyToClipboard(props.value);
       const { createMessage } = useMessage();
 

src/components/Modal/src/components/ModalWrapper.vue

@@ -24,7 +24,6 @@
   import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
   import { ScrollContainer } from '/@/components/Container';
 
-  // import { useElResize } from '/@/hooks/event/useElResize';
   import { propTypes } from '/@/utils/propTypes';
   import { createModalContext } from '../hooks/useModalContext';
 

src/components/SimpleMenu/src/useOpenKeys.ts

@@ -8,7 +8,7 @@ import { uniq } from 'lodash-es';
 import { getAllParentPath } from '/@/router/helper/menuHelper';
 
 import { useTimeoutFn } from '/@/hooks/core/useTimeout';
-import { useDebounce } from '/@/hooks/core/useDebounce';
+import { useDebounceFn } from '@vueuse/core';
 
 export function useOpenKeys(
   menuState: MenuState,
@@ -17,7 +17,7 @@ export function useOpenKeys(
   mixSider: Ref<boolean>,
   collapse: Ref<boolean>
 ) {
-  const [debounceSetOpenKeys] = useDebounce(setOpenKeys, 50);
+  const debounceSetOpenKeys = useDebounceFn(setOpenKeys, 50);
   async function setOpenKeys(path: string) {
     const native = !mixSider.value;
     const menuList = toRaw(menus.value);

src/components/Table/src/hooks/useTableScroll.ts

@@ -1,15 +1,15 @@
-import type { BasicTableProps, TableRowSelection } from '../types/table';
+import type { BasicTableProps, TableRowSelection, BasicColumn } from '../types/table';
 import type { Ref, ComputedRef } from 'vue';
+
 import { computed, unref, ref, nextTick, watch } from 'vue';
 
 import { getViewportOffset } from '/@/utils/domUtils';
 import { isBoolean } from '/@/utils/is';
 
 import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
 import { useModalContext } from '/@/components/Modal';
-import { useDebounce } from '/@/hooks/core/useDebounce';
-import type { BasicColumn } from '/@/components/Table';
 import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
+import { useDebounceFn } from '@vueuse/core';
 
 export function useTableScroll(
   propsRef: ComputedRef<BasicTableProps>,
@@ -23,7 +23,7 @@ export function useTableScroll(
   const modalFn = useModalContext();
 
   // Greater than animation time 280
-  const [debounceRedoHeight] = useDebounce(redoHeight, 100);
+  const debounceRedoHeight = useDebounceFn(redoHeight, 100);
 
   const getCanResize = computed(() => {
     const { canResize, scroll } = unref(propsRef);

src/components/Tree/src/TreeHeader.vue

@@ -41,7 +41,7 @@
   import { propTypes } from '/@/utils/propTypes';
 
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { useDebounce } from '/@/hooks/core/useDebounce';
+  import { useDebounceFn } from '@vueuse/core';
 
   import { ToolbarEnum } from './enum';
 
@@ -128,7 +128,7 @@
       function emitChange(value?: string): void {
         emit('search', value);
       }
-      const [debounceEmitChange] = useDebounce(emitChange, 200);
+      const debounceEmitChange = useDebounceFn(emitChange, 200);
 
       function handleSearch(e: ChangeEvent): void {
         debounceEmitChange(e.target.value);

src/hooks/core/useContext.ts

@@ -29,19 +29,7 @@ export function createContext<T>(
   const provideData = readonly ? defineReadonly(state) : state;
   !createProvider && provide(key, native ? context : provideData);
 
-  // const Provider = createProvider
-  //   ? defineComponent({
-  //       name: 'Provider',
-  //       inheritAttrs: false,
-  //       setup(_, { slots }) {
-  //         provide(key, provideData);
-  //         return () => slots.default?.();
-  //       },
-  //     })
-  //   : null;
-
   return {
-    // Provider,
     state,
   };
 }

src/hooks/event/useEventListener.ts

@@ -1,8 +1,7 @@
 import type { Ref } from 'vue';
 
 import { ref, watch, unref } from 'vue';
-import { useDebounce } from '/@/hooks/core/useDebounce';
-import { useThrottle } from '/@/hooks/core/useThrottle';
+import { useThrottleFn, useDebounceFn } from '@vueuse/core';
 
 export type RemoveEventFn = () => void;
 
@@ -31,7 +30,7 @@ export function useEventListener({
   if (el) {
     const element: Ref<Element> = ref(el as Element);
 
-    const [handler] = isDebounce ? useDebounce(listener, wait) : useThrottle(listener, wait);
+    const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
     const realHandler = wait ? handler : listener;
     const removeEventListener = (e: Element) => {
       isAddRef.value = true;