Commit 2c6aa8528df3d079377e37852d1d627ac295c6f7
1 parent
0fe42a06
refactor: code optimization
Showing
39 changed files
with
72 additions
and
207 deletions
CHANGELOG.zh_CN.md
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<{ [key: number]: boolean }>({}); | @@ -31,8 +32,6 @@ const visibleData = reactive<{ [key: number]: boolean }>({}); | ||
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('AutoComplete', AutoComplete); | @@ -36,11 +36,7 @@ componentMap.set('AutoComplete', 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[]) => Promise<Recordab | @@ -14,8 +13,6 @@ export declare type ValidateFields = (nameList?: NamePath[]) => Promise<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<{ [key: number]: boolean }>({}); | @@ -30,7 +31,6 @@ const visibleData = reactive<{ [key: number]: boolean }>({}); | ||
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
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 '/@/utils'; | @@ -5,7 +5,6 @@ import { getDynamicProps } from '/@/utils'; | ||
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 & { | @@ -18,8 +17,6 @@ type UseTableMethod = TableActionType & { | ||
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(() => import('./user-dropdown/i | @@ -6,8 +7,8 @@ export const UserDropDown = createAsyncComponent(() => import('./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" |