From 70fba7ecac80a1cd8ec08052e8265641f2b56204 Mon Sep 17 00:00:00 2001 From: vben Date: Thu, 15 Oct 2020 21:12:38 +0800 Subject: [PATCH] perf: performance optimization --- README.en-US.md | 11 +++ README.md | 11 +++ src/App.vue | 10 ++- src/components/Drawer/src/BasicDrawer.tsx | 98 ++++++++++++----------- src/components/Loading/FullLoading.vue | 2 +- src/components/Menu/src/index.less | 19 +++-- src/design/transition/fade.less | 15 ++-- src/design/transition/zoom.less | 2 +- src/hooks/event/useEvent.ts | 2 - src/hooks/event/useWindowSize.ts | 1 + src/hooks/web/useECharts.ts | 7 +- src/hooks/web/useFullScreen.ts | 6 +- src/hooks/web/useLockPage.ts | 1 + src/layouts/default/multitabs/index.less | 6 ++ src/main.ts | 9 ++- 15 files changed, 126 insertions(+), 74 deletions(-) diff --git a/README.en-US.md b/README.en-US.md index 333bb590b..0f487362d 100644 --- a/README.en-US.md +++ b/README.en-US.md @@ -30,6 +30,7 @@ - [Code contribution](#code-contribution) - [Finished features](#finished-features) - [Developing features](#developing-features) +- [Browser support](#browser-support) ## Introduction @@ -238,3 +239,13 @@ yarn clean:lib # Delete node_modules, supported window - [ ] System performance optimization If you have more components/functions/suggestions/bugs/, welcome to submit pr or issue. + +## Browser support + +It is recommended to use the `Chrome` browser for local development. Development in the Firefox browser is relatively slow. + +Support modern browsers, Not currently supported ie11，Follow-up consideration support ie11 + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| :-: | :-: | :-: | :-: | +| Not currently supported | last 2 versions | last 2 versions | last 2 versions | diff --git a/README.md b/README.md index 819a4d7ff..e193fb932 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,7 @@ - [代码贡献](#代码贡献) - [已完成功能](#已完成功能) - [正在开发的功能](#正在开发的功能) +- [浏览器支持](#浏览器支持) - [加入我们](#加入我们) ## 介绍 @@ -241,6 +242,16 @@ yarn clean:lib # 删除node_modules，兼容window系统 更多组件/功能/建议/bug/欢迎提交 pr 或者 issue +## 浏览器支持 + +本地开发推荐使用`Chrome`浏览器,在火狐浏览器进行开发相对卡顿。 + +支持现代浏览器, IE 暂不支持，后续考虑支持 ie11 + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| :-: | :-: | :-: | :-: | +| not support | last 2 versions | last 2 versions | last 2 versions | + ## 加入我们 `Vue-Vben-Aadmin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群(项目刚起步，人数较少，有兴趣的可以加群一起讨论)，使用问题欢迎在群内提问。 diff --git a/src/App.vue b/src/App.vue index 586f6f8a5..b09626c2d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,6 +15,8 @@ import { useConfigProvider, useInitAppConfigStore, useListenerNetWork } from './useApp'; import { useLockPage } from '/@/hooks/web/useLockPage'; + import { useSetting } from '/@/hooks/core/useSetting'; + moment.locale('zh-cn'); export default defineComponent({ name: 'App', @@ -23,8 +25,14 @@ useInitAppConfigStore(); useListenerNetWork(); createBreakpointListen(); + const { projectSetting } = useSetting(); const { transformCellText } = useConfigProvider(); - const { on: lockOn } = useLockPage(); + + let lockOn = {}; + if (projectSetting.lockTime) { + const { on } = useLockPage(); + lockOn = on; + } return { transformCellText, zhCN, diff --git a/src/components/Drawer/src/BasicDrawer.tsx b/src/components/Drawer/src/BasicDrawer.tsx index cd51648bc..4b2f9d7ba 100644 --- a/src/components/Drawer/src/BasicDrawer.tsx +++ b/src/components/Drawer/src/BasicDrawer.tsx @@ -6,12 +6,12 @@ import { watchEffect, watch, unref, - getCurrentInstance, + // getCurrentInstance, nextTick, toRaw, } from 'vue'; import { BasicTitle } from '/@/components/Basic'; -import { ScrollContainer, ScrollContainerOptions } from '/@/components/Container/index'; +// import { ScrollContainer, ScrollContainerOptions } from '/@/components/Container/index'; import { FullLoading } from '/@/components/Loading/index'; import { getSlot } from '/@/utils/helper/tsxHelper'; @@ -35,16 +35,16 @@ export default defineComponent({ setup(props, { slots, emit, attrs }) { // const { currentRoute } = useRouter(); const scrollRef = ref(null); - /** - * @description: 获取配置ScrollContainer - */ - const getScrollOptions = computed( - (): ScrollContainerOptions => { - return { - ...(props.scrollOptions as any), - }; - } - ); + // /** + // * @description: 获取配置ScrollContainer + // */ + // const getScrollOptions = computed( + // (): ScrollContainerOptions => { + // return { + // ...(props.scrollOptions as any), + // }; + // } + // ); const visibleRef = ref(false); const propsRef = ref | null>(null); @@ -95,33 +95,27 @@ export default defineComponent({ } ); - // watch( - // () => currentRoute.value.path, - // () => { - // if (unref(visibleRef)) { - // visibleRef.value = false; - // } + // function scrollBottom() { + // const scroll = unref(scrollRef); + // if (scroll) { + // scroll.scrollBottom(); // } - // ); - function scrollBottom() { - const scroll = unref(scrollRef); - if (scroll) { - scroll.scrollBottom(); - } - } - function scrollTo(to: number) { - const scroll = unref(scrollRef); - if (scroll) { - scroll.scrollTo(to); - } - } - function getScrollWrap() { - const scroll = unref(scrollRef); - if (scroll) { - return scroll.getScrollWrap(); - } - return null; - } + // } + + // function scrollTo(to: number) { + // const scroll = unref(scrollRef); + // if (scroll) { + // scroll.scrollTo(to); + // } + // } + + // function getScrollWrap() { + // const scroll = unref(scrollRef); + // if (scroll) { + // return scroll.getScrollWrap(); + // } + // return null; + // } // 取消事件 async function onClose(e: any) { const { closeFunc } = unref(getProps); @@ -225,12 +219,12 @@ export default defineComponent({ ); } - const currentInstance = getCurrentInstance() as any; - if (getCurrentInstance()) { - currentInstance.scrollBottom = scrollBottom; - currentInstance.scrollTo = scrollTo; - currentInstance.getScrollWrap = getScrollWrap; - } + // const currentInstance = getCurrentInstance() as any; + // if (getCurrentInstance()) { + // currentInstance.scrollBottom = scrollBottom; + // currentInstance.scrollTo = scrollTo; + // currentInstance.getScrollWrap = getScrollWrap; + // } const drawerInstance: DrawerInstance = { setDrawerProps: setDrawerProps, }; @@ -259,7 +253,7 @@ export default defineComponent({ class={[!unref(getProps).loading ? 'hidden' : '']} tip="加载中..." /> - {() => getSlot(slots, 'default')} - + */} +
+ {getSlot(slots, 'default')} +
{renderFooter()} ), diff --git a/src/components/Loading/FullLoading.vue b/src/components/Loading/FullLoading.vue index 8be147f9b..a2b436f90 100644 --- a/src/components/Loading/FullLoading.vue +++ b/src/components/Loading/FullLoading.vue @@ -42,7 +42,7 @@ width: 100%; height: 100%; // background: rgba(255, 255, 255, 0.3); - background: rgba(241, 241, 246, 0.8); + background: rgba(241, 241, 246, 0.7); justify-content: center; align-items: center; } diff --git a/src/components/Menu/src/index.less b/src/components/Menu/src/index.less index 35f8168c6..8ebfbe8d3 100644 --- a/src/components/Menu/src/index.less +++ b/src/components/Menu/src/index.less @@ -162,9 +162,9 @@ // 层级样式 &.ant-menu-dark { - .ant-menu-item { - transition: unset; - } + // .ant-menu-item { + // transition: unset; + // } .ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1, .ant-menu-submenu-selected.basic-menu-menu-item__level1 { @@ -206,9 +206,18 @@ } .ant-menu-submenu-title { - height: @app-menu-item-height; // margin: 0; - line-height: @app-menu-item-height; + // line-height: @app-menu-item-height; + display: flex; + height: @app-menu-item-height; + align-items: center; + } + + &.ant-menu-inline-collapsed { + .ant-menu-item-selected { + background: unset !important; + box-shadow: none; + } } } diff --git a/src/design/transition/fade.less b/src/design/transition/fade.less index 61601a5b9..a3fbdb737 100644 --- a/src/design/transition/fade.less +++ b/src/design/transition/fade.less @@ -8,21 +8,20 @@ opacity: 0; } -// side-fade -.slide-fade-enter-active, -.slide-fade-leave-active { - transition: opacity 0.3s, transform 0.35s; +/* fade-transform */ +.slide-fade-leave-active, +.slide-fade-enter-active { + transition: all 0.3s; } -.slide-enter-from, -.slide-fade-enter { +.slide-fade-enter-from { opacity: 0; - transform: translateX(-30%); + transform: translateX(-30px); } .slide-fade-leave-to { opacity: 0; - transform: translateX(30%); + transform: translateX(30px); } // /////////////////////////////////////////////// diff --git a/src/design/transition/zoom.less b/src/design/transition/zoom.less index b3d77d37c..7fdd2b04e 100644 --- a/src/design/transition/zoom.less +++ b/src/design/transition/zoom.less @@ -13,7 +13,7 @@ // zoom-fade .zoom-fade-enter-active, .zoom-fade-leave-active { - transition: transform 0.1s, opacity 0.15s ease-out; + transition: transform 0.15s, opacity 0.2s ease-out; } .zoom-fade-enter-from { diff --git a/src/hooks/event/useEvent.ts b/src/hooks/event/useEvent.ts index 7f3dfb0db..462d53b00 100644 --- a/src/hooks/event/useEvent.ts +++ b/src/hooks/event/useEvent.ts @@ -45,8 +45,6 @@ export function useEvent({ if (v) { !unref(isAddRef) && addEventListener(v); cleanUp(() => { - // @ts-ignore - window.a = v; autoRemove && removeEventListener(v); }); } diff --git a/src/hooks/event/useWindowSize.ts b/src/hooks/event/useWindowSize.ts index 91bd1d644..6f0cf0e5c 100644 --- a/src/hooks/event/useWindowSize.ts +++ b/src/hooks/event/useWindowSize.ts @@ -21,6 +21,7 @@ export function useWindowSizeFn(fn: Fn, wait = 150, options?: WindowSizeOp tryOnMounted(() => { window.addEventListener('resize', handler); }); + tryOnUnmounted(() => { window.removeEventListener('resize', handler); cancel(); diff --git a/src/hooks/web/useECharts.ts b/src/hooks/web/useECharts.ts index 6cdf1f13b..f317ebd5b 100644 --- a/src/hooks/web/useECharts.ts +++ b/src/hooks/web/useECharts.ts @@ -14,6 +14,7 @@ export function useECharts( ) { const chartInstanceRef = ref>(null); let resizeFn: Fn = resize; + let removeResizeFn: Fn = () => {}; const [debounceResize] = useDebounce(resize, 200); resizeFn = debounceResize; @@ -25,11 +26,12 @@ export function useECharts( return; } chartInstanceRef.value = echarts.init(el, theme); - useEvent({ + const { removeEvent } = useEvent({ el: window, name: 'resize', listener: resizeFn, }); + removeResizeFn = removeEvent; const { widthRef, screenEnum } = useBreakpoint(); if (unref(widthRef) <= screenEnum.MD) { useTimeout(() => { @@ -37,6 +39,9 @@ export function useECharts( }, 30); } } + tryOnUnmounted(() => { + removeResizeFn(); + }); function setOptions(options: any, clear = true) { nextTick(() => { diff --git a/src/hooks/web/useFullScreen.ts b/src/hooks/web/useFullScreen.ts index 73999b339..6804124f3 100644 --- a/src/hooks/web/useFullScreen.ts +++ b/src/hooks/web/useFullScreen.ts @@ -15,11 +15,7 @@ type FSEPropName = | 'msFullscreenElement' | 'mozFullScreenElement' | 'fullscreenElement'; -type ONFSCPropName = - | 'onfullscreenchange' - | 'onwebkitfullscreenchange' - | 'onmozfullscreenchange' - | 'MSFullscreenChange'; +type ONFSCPropName = 'onfullscreenchange' | 'onwebkitfullscreenchange' | 'MSFullscreenChange'; export function useFullscreen( target: Ref> = ref(document.documentElement), diff --git a/src/hooks/web/useLockPage.ts b/src/hooks/web/useLockPage.ts index bf923d6ed..3228c44d6 100644 --- a/src/hooks/web/useLockPage.ts +++ b/src/hooks/web/useLockPage.ts @@ -3,6 +3,7 @@ import { useThrottle } from '/@/hooks/core/useThrottle'; import { appStore } from '/@/store/modules/app'; import { userStore } from '/@/store/modules/user'; + export function useLockPage() { let timeId: ReturnType; diff --git a/src/layouts/default/multitabs/index.less b/src/layouts/default/multitabs/index.less index 80613af54..b4a62b13e 100644 --- a/src/layouts/default/multitabs/index.less +++ b/src/layouts/default/multitabs/index.less @@ -34,6 +34,12 @@ color: inherit; } + > div { + display: flex; + justify-content: center; + align-items: center; + } + svg { fill: @text-color-base; } diff --git a/src/main.ts b/src/main.ts index bfee405c2..fd05d4b8a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,14 +1,15 @@ import { createApp } from 'vue'; -import { setupAntd } from '/@/setup/ant-design-vue'; + import router, { setupRouter } from '/@/router'; import { setupStore } from '/@/store'; -import App from './App.vue'; -import { registerGlobComp } from '/@/components/registerGlobComp'; +import { setupAntd } from '/@/setup/ant-design-vue'; import { setupDirectives } from '/@/setup/directives/index'; +import { registerGlobComp } from '/@/components/registerGlobComp'; import { isDevMode, isProdMode, isUseMock } from '/@/utils/env'; - import { setupProdMockServer } from '../mock/_createProductionServer'; + +import App from './App.vue'; import '/@/design/index.less'; const app = createApp(App);