Commit 2c6aa8528df3d079377e37852d1d627ac295c6f7

Authored by Vben
1 parent 0fe42a06

refactor: code optimization

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