perf: performance optimization

vben
1 parent 8f4d51a7
Showing 15 changed files with 126 additions and 74 deletions
README.en-US.md
README.md
src/App.vue
src/components/Drawer/src/BasicDrawer.tsx
src/components/Loading/FullLoading.vue
src/components/Menu/src/index.less
src/design/transition/fade.less
src/design/transition/zoom.less
src/hooks/event/useEvent.ts
src/hooks/event/useWindowSize.ts
src/hooks/web/useECharts.ts
src/hooks/web/useFullScreen.ts
src/hooks/web/useLockPage.ts
src/layouts/default/multitabs/index.less
src/main.ts
@@ -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
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| :-: | :-: | :-: | :-: |
+| Not currently supported | last 2 versions | last 2 versions | last 2 versions |
@@ -30,6 +30,7 @@
 - [代码贡献](#代码贡献)
 - [已完成功能](#已完成功能)
 - [正在开发的功能](#正在开发的功能)
+- [浏览器支持](#浏览器支持)
 - [加入我们](#加入我们)
 ## 介绍
@@ -241,6 +242,16 @@ yarn clean:lib # 删除node_modules，兼容window系统
 更多组件/功能/建议/bug/欢迎提交 pr 或者 issue
+## 浏览器支持
+
+本地开发推荐使用`Chrome`浏览器,在火狐浏览器进行开发相对卡顿。
+
+支持现代浏览器, IE 暂不支持，后续考虑支持 ie11
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| :-: | :-: | :-: | :-: |
+| not support | last 2 versions | last 2 versions | last 2 versions |
+
 ## 加入我们
 `Vue-Vben-Aadmin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群(项目刚起步，人数较少，有兴趣的可以加群一起讨论)，使用问题欢迎在群内提问。
@@ -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,
@@ -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<any>(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<Partial<DrawerProps> | 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="加载中..."
                 />
-                <ScrollContainer
+                {/* <ScrollContainer
                   ref={scrollRef}
                   {...{ ...attrs, ...unref(getScrollOptions) }}
                   style={{
@@ -267,7 +261,19 @@ export default defineComponent({
                   }}
                 >
                   {() => getSlot(slots, 'default')}
-                </ScrollContainer>
+                </ScrollContainer> */}
+                <div
+                  ref={scrollRef}
+                  {...attrs}
+                  style={{
+                    height: `calc(100% - ${footerHeight}px)`,
+                    overflow: 'auto',
+                    padding: '16px',
+                    paddingBottom: '30px',
+                  }}
+                >
+                  {getSlot(slots, 'default')}
+                </div>
                 {renderFooter()}
               </>
             ),
@@ -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;
   }
@@ -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;
+      }
     }
   }
@@ -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);
 }
 // ///////////////////////////////////////////////
@@ -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 {
@@ -45,8 +45,6 @@ export function useEvent({
         if (v) {
           !unref(isAddRef) && addEventListener(v);
           cleanUp(() => {
-            // @ts-ignore
-            window.a = v;
             autoRemove && removeEventListener(v);
           });
         }
@@ -21,6 +21,7 @@ export function useWindowSizeFn&lt;T&gt;(fn: Fn&lt;T&gt;, wait = 150, options?: WindowSizeOp
   tryOnMounted(() => {
     window.addEventListener('resize', handler);
   });
+
   tryOnUnmounted(() => {
     window.removeEventListener('resize', handler);
     cancel();
@@ -14,6 +14,7 @@ export function useECharts(
 ) {
   const chartInstanceRef = ref<Nullable<ECharts>>(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(() => {
@@ -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<Nullable<HTMLElement>> = ref(document.documentElement),
@@ -3,6 +3,7 @@ import { useThrottle } from &#39;/@/hooks/core/useThrottle&#39;;
 import { appStore } from '/@/store/modules/app';
 import { userStore } from '/@/store/modules/user';
+
 export function useLockPage() {
   let timeId: ReturnType<typeof setTimeout>;
@@ -34,6 +34,12 @@
           color: inherit;
         }
+        > div {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
         svg {
           fill: @text-color-base;
         }
 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);