perf: performance optimization

5 years ago · 70fba7ecac
15 changed files with 126 additions and 74 deletions
--- 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
+
+| [<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 |
--- 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
+
+| [<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 交流群(项目刚起步，人数较少，有兴趣的可以加群一起讨论)，使用问题欢迎在群内提问。
--- 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,
--- 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<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()}
              </>
            ),
--- 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;
  }
--- 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;
+      }
    }
  }

--- 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);
 }

 // ///////////////////////////////////////////////
--- 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 {
--- 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);
          });
        }
--- a/src/hooks/event/useWindowSize.ts
+++ b/src/hooks/event/useWindowSize.ts
@ -21,6 +21,7 @@ export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOp
  tryOnMounted(() => {
    window.addEventListener('resize', handler);
  });
+
  tryOnUnmounted(() => {
    window.removeEventListener('resize', handler);
    cancel();
--- a/src/hooks/web/useECharts.ts
+++ b/src/hooks/web/useECharts.ts
@ -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(() => {
--- 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<Nullable<HTMLElement>> = ref(document.documentElement),
--- 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<typeof setTimeout>;

--- 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;
        }
--- 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);