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 | 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
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
src/components/Description/index.ts
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<{ [key: number]: boolean }>({}); |
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('AutoComplete', 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
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[]) => Promise<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
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<{ [key: number]: boolean }>({}); |
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
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 '/@/utils'; |
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 & { |
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
src/hooks/core/useTimeout.ts
src/hooks/event/useWindowSizeFn.ts
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(() => import('./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" | ... | ... |