Commit 2c6aa8528df3d079377e37852d1d627ac295c6f7

Authored by Vben
1 parent 0fe42a06

refactor: code optimization

CHANGELOG.zh_CN.md
... ... @@ -7,6 +7,7 @@
7 7 ### ✨ Refactor
8 8  
9 9 - 重构项目以解决循环依赖项导致的热更新问题
  10 +- 移除 vueHelper/useClickoutside,使用@vueuse/core 代替
10 11  
11 12 ### 🐛 Bug Fixes
12 13  
... ...
README.md
... ... @@ -135,6 +135,7 @@ If these plugins are helpful to you, you can give a star support
135 135 - [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme) - Used to pack compressed image resources
136 136 - [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin) - Used for online switching of theme colors and other color-related configurations
137 137 - [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - Used to pack input .gz|.brotil files
  138 +- [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - Used to quickly generate svg sprite
138 139  
139 140 ## Browser support
140 141  
... ...
README.zh-CN.md
... ... @@ -135,6 +135,7 @@ yarn build
135 135 - [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme) - 用于打包压缩图片资源
136 136 - [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin) - 用于在线切换主题色等颜色相关配置
137 137 - [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - 用于打包输入.gz|.brotil 文件
  138 +- [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - 用于快速生成 svg 雪碧图
138 139  
139 140 ## 浏览器支持
140 141  
... ...
package.json
... ... @@ -91,7 +91,7 @@
91 91 "is-ci": "^3.0.0",
92 92 "less": "^4.1.1",
93 93 "lint-staged": "^10.5.4",
94   - "postcss": "^8.2.7",
  94 + "postcss": "^8.2.8",
95 95 "prettier": "^2.2.1",
96 96 "pretty-quick": "^3.1.0",
97 97 "rimraf": "^3.0.2",
... ... @@ -106,7 +106,7 @@
106 106 "vite-plugin-compression": "^0.2.3",
107 107 "vite-plugin-html": "^2.0.3",
108 108 "vite-plugin-imagemin": "^0.2.9",
109   - "vite-plugin-mock": "^2.2.2",
  109 + "vite-plugin-mock": "^2.2.3",
110 110 "vite-plugin-purge-icons": "^0.7.0",
111 111 "vite-plugin-pwa": "^0.5.6",
112 112 "vite-plugin-style-import": "^0.8.1",
... ...
src/components/Application/index.ts
1   -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
2 1 import AppLogo from './src/AppLogo.vue';
3 2 import AppProvider from './src/AppProvider.vue';
4   -
5   -export const AppLocalePicker = createAsyncComponent(() => import('./src/AppLocalePicker.vue'));
6   -export const AppSearch = createAsyncComponent(() => import('./src/search/AppSearch.vue'), {
7   - loading: true,
8   -});
  3 +import AppSearch from './src/search/AppSearch.vue';
  4 +import AppLocalePicker from './src/AppLocalePicker.vue';
9 5  
10 6 export { useAppProviderContext } from './src/useAppContext';
11   -export { AppLogo, AppProvider };
  7 +export { AppLogo, AppProvider, AppSearch, AppLocalePicker };
... ...
src/components/Basic/index.ts
1   -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
2 1 import BasicArrow from './src/BasicArrow.vue';
3 2 import BasicTitle from './src/BasicTitle.vue';
  3 +import BasicHelp from './src/BasicHelp.vue';
4 4  
5   -export { BasicArrow, BasicTitle };
6   -
7   -// export const BasicArrow = createAsyncComponent(() => import('./src/BasicArrow.vue'));
8   -export const BasicHelp = createAsyncComponent(() => import('./src/BasicHelp.vue'));
9   -// export const BasicTitle = createAsyncComponent(() => import('./src/BasicTitle.vue'));
  5 +export { BasicArrow, BasicTitle, BasicHelp };
... ...
src/components/Basic/src/BasicArrow.vue
... ... @@ -20,7 +20,6 @@
20 20 name: 'BasicArrow',
21 21 components: { Icon },
22 22 props: {
23   - // Expand contract, expand by default
24 23 expand: propTypes.bool,
25 24 top: propTypes.bool,
26 25 bottom: propTypes.bool,
... ...
src/components/Basic/src/BasicHelp.vue
1 1 <script lang="tsx">
2 2 import type { CSSProperties, PropType } from 'vue';
3   - import { defineComponent, computed, unref, h } from 'vue';
  3 + import { defineComponent, computed, unref } from 'vue';
4 4  
5 5 import { Tooltip } from 'ant-design-vue';
6 6 import { InfoCircleOutlined } from '@ant-design/icons-vue';
... ...
src/components/ClickOutSide/src/index.vue
... ... @@ -4,18 +4,16 @@
4 4 </div>
5 5 </template>
6 6 <script lang="ts">
7   - import type { Ref } from 'vue';
8 7 import { defineComponent, ref, onMounted } from 'vue';
9 8  
10   - import { useClickOutside } from '/@/hooks/web/useClickOutside';
11   -
  9 + import { onClickOutside } from '@vueuse/core';
12 10 export default defineComponent({
13 11 name: 'ClickOutSide',
14 12 emits: ['mounted', 'clickOutside'],
15 13 setup(_, { emit }) {
16 14 const wrap = ref<ElRef>(null);
17 15  
18   - useClickOutside(wrap as Ref<HTMLDivElement>, () => {
  16 + onClickOutside(wrap, () => {
19 17 emit('clickOutside');
20 18 });
21 19  
... ...
src/components/CountDown/src/useCountdown.ts
1 1 import { ref, unref } from 'vue';
2   -import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
  2 +import { tryOnUnmounted } from '@vueuse/core';
3 3  
4 4 export function useCountdown(count: number) {
5 5 const currentCount = ref(count);
... ...
src/components/Description/index.ts
1   -// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
2   -// export const Description = createAsyncComponent(() => import('./src/index'));
3   -
4 1 import Description from './src/index.vue';
5 2  
6 3 export { Description };
... ...
src/components/Drawer/src/useDrawer.ts
... ... @@ -19,7 +19,8 @@ import {
19 19  
20 20 import { isProdMode } from '/@/utils/env';
21 21 import { isFunction } from '/@/utils/is';
22   -import { tryOnUnmounted, isInSetup } from '/@/utils/helper/vueHelper';
  22 +import { tryOnUnmounted } from '@vueuse/core';
  23 +
23 24 import { isEqual } from 'lodash-es';
24 25 import { error } from '/@/utils/log';
25 26  
... ... @@ -31,8 +32,6 @@ const visibleData = reactive&lt;{ [key: number]: boolean }&gt;({});
31 32 * @description: Applicable to separate drawer and call outside
32 33 */
33 34 export function useDrawer(): UseDrawerReturnType {
34   - isInSetup();
35   -
36 35 const drawerRef = ref<DrawerInstance | null>(null);
37 36 const loadedRef = ref<Nullable<boolean>>(false);
38 37 const uidRef = ref<string>('');
... ...
src/components/Form/src/componentMap.ts
... ... @@ -36,11 +36,7 @@ componentMap.set(&#39;AutoComplete&#39;, AutoComplete);
36 36  
37 37 componentMap.set('Select', Select);
38 38 componentMap.set('ApiSelect', ApiSelect);
39   -// componentMap.set('SelectOptGroup', Select.OptGroup);
40   -// componentMap.set('SelectOption', Select.Option);
41 39 componentMap.set('TreeSelect', TreeSelect);
42   -// componentMap.set('Transfer', Transfer);
43   -// componentMap.set('Radio', Radio);
44 40 componentMap.set('Switch', Switch);
45 41 componentMap.set('RadioButtonGroup', RadioButtonGroup);
46 42 componentMap.set('RadioGroup', Radio.Group);
... ...
src/components/Form/src/hooks/useComponentRegister.ts
1 1 import type { ComponentType } from '../types/index';
2   -import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
  2 +import { tryOnUnmounted } from '@vueuse/core';
3 3 import { add, del } from '../componentMap';
4 4 import type { Component } from 'vue';
5 5  
... ...
src/components/Form/src/hooks/useForm.ts
1 1 import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
2 2  
3   -import { isInSetup } from '/@/utils/helper/vueHelper';
4 3 import { isProdMode } from '/@/utils/env';
5 4 import { error } from '/@/utils/log';
6 5 import { getDynamicProps } from '/@/utils';
... ... @@ -14,8 +13,6 @@ export declare type ValidateFields = (nameList?: NamePath[]) =&gt; Promise&lt;Recordab
14 13 type Props = Partial<DynamicProps<FormProps>>;
15 14  
16 15 export function useForm(props?: Props): UseFormReturnType {
17   - isInSetup();
18   -
19 16 const formRef = ref<Nullable<FormActionType>>(null);
20 17 const loadedRef = ref<Nullable<boolean>>(false);
21 18  
... ...
src/components/Icon/index.ts
1 1 import Icon from './src/index.vue';
2 2 import SvgIcon from './src/SvgIcon.vue';
3   -// import IconPicker from './src/IconPicker.vue';
4   -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
5   -
6   -const IconPicker = createAsyncComponent(() => import('./src/IconPicker.vue'));
  3 +import IconPicker from './src/IconPicker.vue';
7 4  
8 5 export { Icon, IconPicker, SvgIcon };
9 6  
... ...
src/components/Loading/index.ts
1   -// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
2   -// export const Loading = createAsyncComponent(() => import('./src/index.vue'));
3   -
4 1 import Loading from './src/index.vue';
5 2  
6 3 export { Loading };
... ...
src/components/Menu/index.ts
1   -// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
2   -
3 1 import BasicMenu from './src/BasicMenu.vue';
4 2  
5   -// export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu.vue'));
6   -
7   -// export const MenuTag = createAsyncComponent(() => import('./src/components/MenuItemTag.vue'));
8   -
9 3 export { BasicMenu };
... ...
src/components/Menu/src/BasicMenu.vue
... ... @@ -38,7 +38,6 @@
38 38  
39 39 import { getCurrentParentPath } from '/@/router/menus';
40 40  
41   - // import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
42 41 import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
43 42 import { getAllParentPath } from '/@/router/helper/menuHelper';
44 43  
... ... @@ -47,7 +46,6 @@
47 46 components: {
48 47 Menu,
49 48 BasicSubMenuItem,
50   - // BasicSubMenuItem: createAsyncComponent(() => import('./components/BasicSubMenuItem.vue')),
51 49 },
52 50 props: basicProps,
53 51 emits: ['menuClick'],
... ...
src/components/Modal/src/hooks/useModal.ts
... ... @@ -19,7 +19,8 @@ import {
19 19 import { isProdMode } from '/@/utils/env';
20 20 import { isFunction } from '/@/utils/is';
21 21 import { isEqual } from 'lodash-es';
22   -import { tryOnUnmounted, isInSetup } from '/@/utils/helper/vueHelper';
  22 +import { tryOnUnmounted } from '@vueuse/core';
  23 +
23 24 import { error } from '/@/utils/log';
24 25 import { computed } from 'vue';
25 26 const dataTransferRef = reactive<any>({});
... ... @@ -30,7 +31,6 @@ const visibleData = reactive&lt;{ [key: number]: boolean }&gt;({});
30 31 * @description: Applicable to independent modal and call outside
31 32 */
32 33 export function useModal(): UseModalReturnType {
33   - isInSetup();
34 34 const modalRef = ref<Nullable<ModalMethods>>(null);
35 35 const loadedRef = ref<Nullable<boolean>>(false);
36 36 const uidRef = ref<string>('');
... ...
src/components/Preview/index.ts
1   -// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
2   -// export const ImagePreview = createAsyncComponent(() => import('./src/index.vue'));
3   -
4 1 export { default as ImagePreview } from './src/index.vue';
... ...
src/components/Table/src/BasicTable.vue
... ... @@ -67,14 +67,14 @@
67 67  
68 68 import { basicProps } from './props';
69 69 import expandIcon from './components/ExpandIcon';
70   - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  70 + import HeaderCell from './components/HeaderCell.vue';
71 71  
72 72 import './style/index.less';
73 73 export default defineComponent({
74 74 components: {
75 75 Table,
76 76 BasicForm,
77   - HeaderCell: createAsyncComponent(() => import('./components/HeaderCell.vue')),
  77 + HeaderCell,
78 78 },
79 79 props: basicProps,
80 80 emits: [
... ...
src/components/Table/src/components/HeaderCell.vue
... ... @@ -10,14 +10,14 @@
10 10 import type { BasicColumn } from '../types/table';
11 11  
12 12 import { defineComponent, computed } from 'vue';
13   -
14   - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  13 + import BasicHelp from '/@/components/Basic/src/BasicHelp.vue';
  14 + import EditTableHeaderCell from './EditTableHeaderIcon.vue';
15 15 import { useDesign } from '/@/hooks/web/useDesign';
16 16 export default defineComponent({
17 17 name: 'TableHeaderCell',
18 18 components: {
19   - EditTableHeaderCell: createAsyncComponent(() => import('./EditTableHeaderIcon.vue')),
20   - BasicHelp: createAsyncComponent(() => import('/@/components/Basic/src/BasicHelp.vue')),
  19 + EditTableHeaderCell,
  20 + BasicHelp,
21 21 },
22 22 props: {
23 23 column: {
... ...
src/components/Table/src/components/settings/index.vue
... ... @@ -10,15 +10,17 @@
10 10 import { defineComponent, PropType, computed } from 'vue';
11 11 import type { TableSetting } from '../../types/table';
12 12 import { useI18n } from '/@/hooks/web/useI18n';
13   - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
14 13 import ColumnSetting from './ColumnSetting.vue';
  14 + import SizeSetting from './SizeSetting.vue';
  15 + import RedoSetting from './RedoSetting.vue';
  16 + import FullScreenSetting from './FullScreenSetting.vue';
15 17 export default defineComponent({
16 18 name: 'TableSetting',
17 19 components: {
18 20 ColumnSetting,
19   - SizeSetting: createAsyncComponent(() => import('./SizeSetting.vue')),
20   - RedoSetting: createAsyncComponent(() => import('./RedoSetting.vue')),
21   - FullScreenSetting: createAsyncComponent(() => import('./FullScreenSetting.vue')),
  21 + SizeSetting,
  22 + RedoSetting,
  23 + FullScreenSetting,
22 24 },
23 25 props: {
24 26 setting: {
... ...
src/components/Table/src/hooks/useTable.ts
... ... @@ -5,7 +5,6 @@ import { getDynamicProps } from &#39;/@/utils&#39;;
5 5  
6 6 import { ref, onUnmounted, unref, watch, toRaw } from 'vue';
7 7 import { isProdMode } from '/@/utils/env';
8   -import { isInSetup } from '/@/utils/helper/vueHelper';
9 8 import { error } from '/@/utils/log';
10 9 import type { FormActionType } from '/@/components/Form';
11 10  
... ... @@ -18,8 +17,6 @@ type UseTableMethod = TableActionType &amp; {
18 17 export function useTable(
19 18 tableProps?: Props
20 19 ): [(instance: TableActionType, formInstance: UseTableMethod) => void, TableActionType] {
21   - isInSetup();
22   -
23 20 const tableRef = ref<Nullable<TableActionType>>(null);
24 21 const loadedRef = ref<Nullable<boolean>>(false);
25 22 const formRef = ref<Nullable<UseTableMethod>>(null);
... ...
src/components/Table/src/hooks/useTableScroll.ts
... ... @@ -23,7 +23,7 @@ export function useTableScroll(
23 23 const modalFn = useModalContext();
24 24  
25 25 // Greater than animation time 280
26   - const [debounceRedoHeight] = useDebounce(redoHeight, 100);
  26 + const [debounceRedoHeight] = useDebounce(redoHeight, 200);
27 27  
28 28 const getCanResize = computed(() => {
29 29 const { canResize, scroll } = unref(propsRef);
... ... @@ -31,7 +31,7 @@ export function useTableScroll(
31 31 });
32 32  
33 33 watch(
34   - () => [unref(getCanResize), , unref(getDataSourceRef)?.length],
  34 + () => [unref(getCanResize), unref(getDataSourceRef)?.length],
35 35 () => {
36 36 debounceRedoHeight();
37 37 },
... ... @@ -130,7 +130,6 @@ export function useTableScroll(
130 130  
131 131 bodyEl!.style.height = `${height}px`;
132 132 }
133   -
134 133 useWindowSizeFn(calcTableHeight, 280);
135 134 onMountedOrActivated(() => {
136 135 calcTableHeight();
... ...
src/components/Upload/index.ts
1   -// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
2   -// export const BasicUpload = createAsyncComponent(() => import('./src/BasicUpload.vue'));
3   -
4 1 export { default as BasicUpload } from './src/BasicUpload.vue';
... ...
src/hooks/core/useTimeout.ts
1 1 import { ref, watch } from 'vue';
2   -import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
3   -
  2 +import { tryOnUnmounted } from '@vueuse/core';
4 3 import { isFunction } from '/@/utils/is';
5 4  
6 5 export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
... ...
src/hooks/event/useWindowSizeFn.ts
1   -import { tryOnMounted, tryOnUnmounted } from '/@/utils/helper/vueHelper';
2   -
  1 +import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
3 2 import { useDebounce } from '/@/hooks/core/useDebounce';
4 3  
5 4 interface WindowSizeOptions {
... ...
src/hooks/web/useApexCharts.ts
1 1 import { useTimeoutFn } from '/@/hooks/core/useTimeout';
2   -import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
3 2 import { unref, Ref, nextTick } from 'vue';
  3 +import { tryOnUnmounted } from '@vueuse/core';
4 4  
5 5 interface CallBackFn {
6 6 (instance: Nullable<ApexCharts>): void;
... ...
src/hooks/web/useClickOutside.ts deleted 100644 → 0
1   -import { ref, Ref, unref } from 'vue';
2   -import { useEventListener } from '/@/hooks/event/useEventListener';
3   -import { isServer } from '/@/utils/is';
4   -export function useClickOutside<T extends HTMLElement>(
5   - containerRef: Ref<T>,
6   - onClickOutside: (e: MouseEvent | TouchEvent) => void,
7   - eventName = 'click'
8   -) {
9   - if (isServer) return;
10   -
11   - const isTouchRef = ref(false);
12   -
13   - useEventListener({
14   - el: document,
15   - name: 'touchend',
16   - listener: handler,
17   - options: true,
18   - });
19   - useEventListener({
20   - el: document,
21   - name: eventName,
22   - listener: handler,
23   - options: true,
24   - });
25   -
26   - function handler(e: MouseEvent | TouchEvent) {
27   - if (e.type === 'touchend') {
28   - isTouchRef.value = true;
29   - }
30   - if (e.type === 'click' && unref(isTouchRef)) return;
31   -
32   - const el = containerRef.value;
33   - if (el && e.target && !el.contains(e.target as Node)) {
34   - onClickOutside(e);
35   - }
36   - }
37   -}
src/hooks/web/useECharts.ts
1 1 import { useTimeoutFn } from '/@/hooks/core/useTimeout';
2   -import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
  2 +import { tryOnUnmounted } from '@vueuse/core';
3 3 import { unref, Ref, nextTick } from 'vue';
4 4 import type { EChartsOption } from 'echarts';
5 5 import { useDebounce } from '/@/hooks/core/useDebounce';
... ...
src/layouts/default/header/components/index.ts
1 1 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  2 +import FullScreen from './FullScreen.vue';
2 3  
3 4 export const UserDropDown = createAsyncComponent(() => import('./user-dropdown/index.vue'), {
4 5 loading: true,
... ... @@ -6,8 +7,8 @@ export const UserDropDown = createAsyncComponent(() =&gt; import(&#39;./user-dropdown/i
6 7  
7 8 export const LayoutBreadcrumb = createAsyncComponent(() => import('./Breadcrumb.vue'));
8 9  
9   -export const FullScreen = createAsyncComponent(() => import('./FullScreen.vue'));
10   -
11 10 export const Notify = createAsyncComponent(() => import('./notify/index.vue'));
12 11  
13 12 export const ErrorAction = createAsyncComponent(() => import('./ErrorAction.vue'));
  13 +
  14 +export { FullScreen };
... ...
src/layouts/default/tabs/index.vue
... ... @@ -31,6 +31,9 @@
31 31  
32 32 import { Tabs } from 'ant-design-vue';
33 33 import TabContent from './components/TabContent.vue';
  34 + import QuickButton from './components/QuickButton.vue';
  35 + import FoldButton from './components/FoldButton.vue';
  36 + import TabRedo from './components/TabRedo.vue';
34 37 import type { RouteLocationNormalized } from 'vue-router';
35 38  
36 39 import { useGo } from '/@/hooks/web/usePage';
... ... @@ -39,20 +42,20 @@
39 42 import { userStore } from '/@/store/modules/user';
40 43  
41 44 import { initAffixTabs, useTabsDrag } from './useMultipleTabs';
42   - import { REDIRECT_NAME } from '/@/router/constant';
43 45 import { useDesign } from '/@/hooks/web/useDesign';
44   - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
45   - import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
46 46 import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
47 47  
  48 + import { REDIRECT_NAME } from '/@/router/constant';
  49 + import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
  50 +
48 51 import router from '/@/router';
49 52  
50 53 export default defineComponent({
51 54 name: 'MultipleTabs',
52 55 components: {
53   - QuickButton: createAsyncComponent(() => import('./components/QuickButton.vue')),
54   - TabRedo: createAsyncComponent(() => import('./components/TabRedo.vue')),
55   - FoldButton: createAsyncComponent(() => import('./components/FoldButton.vue')),
  56 + QuickButton,
  57 + TabRedo: TabRedo,
  58 + FoldButton,
56 59 Tabs,
57 60 TabPane: Tabs.TabPane,
58 61 TabContent,
... ...
src/layouts/page/useCache.ts
1 1 import type { FunctionalComponent } from 'vue';
2 2 import type { RouteLocation } from 'vue-router';
3   -import { computed, ref, unref } from 'vue';
  3 +import { computed, ref, unref, getCurrentInstance } from 'vue';
4 4 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
5   -import { tryTsxEmit } from '/@/utils/helper/vueHelper';
6 5  
7 6 import { useRouter } from 'vue-router';
8 7 import { useStore } from 'vuex';
... ... @@ -20,21 +19,19 @@ export function useCache(isPage: boolean) {
20 19  
21 20 const name = ref('');
22 21 const { currentRoute } = useRouter();
23   -
24   - tryTsxEmit((instance) => {
25   - const routeName = instance.type.name;
26   - if (routeName && ![ParentLayoutName].includes(routeName)) {
27   - name.value = routeName;
28   - } else {
29   - const matched = currentRoute.value?.matched;
30   - if (!matched) {
31   - return;
32   - }
33   - const len = matched.length;
34   - if (len < 2) return;
35   - name.value = matched[len - 2].name as string;
  22 + const instance = getCurrentInstance();
  23 + const routeName = instance?.type.name;
  24 + if (routeName && ![ParentLayoutName].includes(routeName)) {
  25 + name.value = routeName;
  26 + } else {
  27 + const matched = currentRoute.value?.matched;
  28 + if (!matched) {
  29 + return;
36 30 }
37   - });
  31 + const len = matched.length;
  32 + if (len < 2) return;
  33 + name.value = matched[len - 2].name as string;
  34 + }
38 35  
39 36 const { getOpenKeepAlive } = useRootSetting();
40 37  
... ...
src/utils/helper/tsxHelper.tsx
... ... @@ -33,14 +33,3 @@ export function extendSlots(slots: Slots, excludeKeys: string[] = []) {
33 33 });
34 34 return ret;
35 35 }
36   -
37   -// Get events on attrs
38   -export function getListeners(attrs: Recordable<unknown>) {
39   - const listeners: any = {};
40   - Object.keys(attrs).forEach((key) => {
41   - if (/^on/.test(key)) {
42   - listeners[key] = attrs[key];
43   - }
44   - });
45   - return listeners;
46   -}
... ...
src/utils/helper/vueHelper.ts deleted 100644 → 0
1   -import {
2   - watch,
3   - computed,
4   - WatchSource,
5   - getCurrentInstance,
6   - onMounted,
7   - onUnmounted,
8   - nextTick,
9   - reactive,
10   - ComponentInternalInstance,
11   -} from 'vue';
12   -import { error } from '../log';
13   -
14   -export function explicitComputed<T, S>(source: WatchSource<S>, fn: () => T) {
15   - const v = reactive<any>({ value: fn() });
16   - watch(source, () => (v.value = fn()));
17   - return computed<T>(() => v.value);
18   -}
19   -
20   -export function tryOnMounted(fn: () => void, sync = true) {
21   - if (getCurrentInstance()) {
22   - onMounted(fn);
23   - } else if (sync) {
24   - fn();
25   - } else {
26   - nextTick(fn);
27   - }
28   -}
29   -
30   -export function tryOnUnmounted(fn: () => Promise<void> | void) {
31   - getCurrentInstance() && onUnmounted(fn);
32   -}
33   -
34   -export function tryTsxEmit<T extends any = ComponentInternalInstance>(
35   - fn: (_instance: T) => Promise<void> | void
36   -) {
37   - const instance = getCurrentInstance() as any;
38   - instance && fn.call(null, instance);
39   -}
40   -
41   -export function isInSetup() {
42   - if (!getCurrentInstance()) {
43   - error('Please put useForm function in the setup function!');
44   - }
45   -}
src/views/sys/lock/useNow.ts
1 1 import { dateUtil } from '/@/utils/dateUtil';
2 2 import { reactive, toRefs } from 'vue';
3   -import { tryOnMounted, tryOnUnmounted } from '/@/utils/helper/vueHelper';
4 3 import { localeStore } from '/@/store/modules/locale';
  4 +import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
5 5  
6 6 export function useNow(immediate = true) {
7 7 const localData = dateUtil.localeData(localeStore.getLocale);
... ...
yarn.lock
... ... @@ -7126,10 +7126,10 @@ postcss@^8.1.10, postcss@^8.2.1:
7126 7126 nanoid "^3.1.20"
7127 7127 source-map "^0.6.1"
7128 7128  
7129   -postcss@^8.2.7:
7130   - version "8.2.7"
7131   - resolved "https://registry.npmjs.org/postcss/-/postcss-8.2.7.tgz#48ed8d88b4de10afa0dfd1c3f840aa57b55c4d47"
7132   - integrity sha512-DsVLH3xJzut+VT+rYr0mtvOtpTjSyqDwPf5EZWXcb0uAKfitGpTY9Ec+afi2+TgdN8rWS9Cs88UDYehKo/RvOw==
  7129 +postcss@^8.2.8:
  7130 + version "8.2.8"
  7131 + resolved "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz#0b90f9382efda424c4f0f69a2ead6f6830d08ece"
  7132 + integrity sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==
7133 7133 dependencies:
7134 7134 colorette "^1.2.2"
7135 7135 nanoid "^3.1.20"
... ... @@ -9113,10 +9113,10 @@ vite-plugin-imagemin@^0.2.9:
9113 9113 imagemin-svgo "^8.0.0"
9114 9114 imagemin-webp "^6.0.0"
9115 9115  
9116   -vite-plugin-mock@^2.2.2:
9117   - version "2.2.2"
9118   - resolved "https://registry.npmjs.org/vite-plugin-mock/-/vite-plugin-mock-2.2.2.tgz#94c5aa6851c82f30417e9dd0feedf809e9ff6265"
9119   - integrity sha512-2qqQvjQHS2ENxdyNqHlUKdo4hx7EDAlZ3CW+sUKmjZi/3ItvMJdSbKvIkiM/aBb3MEI450iAdxLOPubikDkGhQ==
  9116 +vite-plugin-mock@^2.2.3:
  9117 + version "2.2.3"
  9118 + resolved "https://registry.npmjs.org/vite-plugin-mock/-/vite-plugin-mock-2.2.3.tgz#b2194ca4346933d9d9f0ec39ea1c4c1ea3c744f2"
  9119 + integrity sha512-xbHo2k2fENJu6Y5eOCxZiZovUgSIRL0efgdhWb9rRjF8k+MHRWbtXgMufRWFtthgZCfz1m3U4uV4TIA4IO/8eQ==
9120 9120 dependencies:
9121 9121 "@rollup/plugin-node-resolve" "^11.2.0"
9122 9122 "@types/mockjs" "^1.0.3"
... ...