perf: code optimization

build/config/themeConfig.ts

@@ -2,6 +2,8 @@ import { generate } from '@ant-design/colors';
 
 export const primaryColor = '#0960bd';
 
+export const borderColorBase = '#d9d9d9';
+
 export const themeMode = 'light';
 
 export type ThemeMode = 'dark' | 'light';
@@ -97,7 +99,7 @@ export function generateModifyVars() {
     'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // Subtext color
     'font-size-base': '14px', //  Main font size
     'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', //  Floating shadow
-    'border-color-base': '#d9d9d9', //  Border color,
+    'border-color-base': borderColorBase, //  Border color,
     'border-radius-base': '2px', //  Component/float fillet
     'link-color': primary, //   Link color
   };

package.json

@@ -34,7 +34,7 @@
     "@iconify/iconify": "^2.0.0-rc.6",
     "@vueuse/core": "^4.6.2",
     "@zxcvbn-ts/core": "^0.3.0",
-    "ant-design-vue": "2.1.1",
+    "ant-design-vue": "^2.1.2",
     "apexcharts": "^3.26.0",
     "axios": "^0.21.1",
     "crypto-js": "^4.0.0",
@@ -47,7 +47,7 @@
     "qrcode": "^1.4.4",
     "sortablejs": "^1.13.0",
     "vditor": "^3.8.4",
-    "vue": "^3.0.9",
+    "vue": "3.0.7",
     "vue-i18n": "^9.0.0",
     "vue-router": "^4.0.5",
     "vue-types": "^3.0.2",
@@ -75,7 +75,7 @@
     "@vitejs/plugin-legacy": "^1.3.2",
     "@vitejs/plugin-vue": "^1.2.0",
     "@vitejs/plugin-vue-jsx": "^1.1.2",
-    "@vue/compiler-sfc": "^3.0.9",
+    "@vue/compiler-sfc": "3.0.7",
     "autoprefixer": "^10.2.5",
     "body-parser": "^1.19.0",
     "commitizen": "^4.2.3",
@@ -112,11 +112,11 @@
     "vite-plugin-imagemin": "^0.2.9",
     "vite-plugin-mock": "^2.4.0",
     "vite-plugin-purge-icons": "^0.7.0",
-    "vite-plugin-pwa": "^0.6.3",
-    "vite-plugin-style-import": "^0.9.0",
+    "vite-plugin-pwa": "^0.6.4",
+    "vite-plugin-style-import": "^0.9.1",
     "vite-plugin-svg-icons": "^0.4.0",
     "vite-plugin-theme": "^0.5.0",
-    "vite-plugin-windicss": "0.10.2",
+    "vite-plugin-windicss": "0.10.4",
     "vue-eslint-parser": "^7.6.0"
   },
   "resolutions": {

src/components/Basic/src/BasicTitle.vue

 <template>
-  <span :class="[prefixCls, { 'show-span': span && $slots.default }]">
+  <span :class="getClass">
     <slot></slot>
     <BasicHelp :class="`${prefixCls}__help`" v-if="helpMessage" :text="helpMessage" />
   </span>
@@ -7,7 +7,7 @@
 <script lang="ts">
   import type { PropType } from 'vue';
 
-  import { defineComponent } from 'vue';
+  import { defineComponent, computed } from 'vue';
   import BasicHelp from './BasicHelp.vue';
 
   import { useDesign } from '/@/hooks/web/useDesign';
@@ -23,10 +23,17 @@
         default: '',
       },
       span: propTypes.bool,
+      normal: propTypes.bool.def(false),
     },
-    setup() {
+    setup(props, { slots }) {
       const { prefixCls } = useDesign('basic-title');
-      return { prefixCls };
+
+      const getClass = computed(() => [
+        prefixCls,
+        { [`${prefixCls}-show-span`]: props.span && slots.default },
+        { [`${prefixCls}-normal`]: props.normal },
+      ]);
+      return { prefixCls, getClass };
     },
   });
 </script>
@@ -38,13 +45,18 @@
     display: flex;
     padding-left: 7px;
     font-size: 16px;
-    font-weight: 700;
+    font-weight: 500;
     line-height: 24px;
     color: @text-color-base;
     cursor: pointer;
     user-select: none;
 
-    &.show-span::before {
+    &-normal {
+      font-size: 14px;
+      font-weight: normal;
+    }
+
+    &-show-span::before {
       position: absolute;
       top: 4px;
       left: 0;

src/components/ClickOutSide/src/index.vue

@@ -5,7 +5,6 @@
 </template>
 <script lang="ts">
   import { defineComponent, ref, onMounted } from 'vue';
-
   import { onClickOutside } from '@vueuse/core';
   export default defineComponent({
     name: 'ClickOutSide',

src/components/Container/src/LazyContainer.vue

 <template>
   <transition-group
-    :class="prefixCls"
+    class="h-full w-full"
     v-bind="$attrs"
     ref="elRef"
     :name="transitionName"
@@ -25,7 +25,6 @@
   import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
   import { propTypes } from '/@/utils/propTypes';
-  import { useDesign } from '/@/hooks/web/useDesign';
 
   interface State {
     isInit: boolean;
@@ -72,8 +71,6 @@
         intersectionObserverInstance: null,
       });
 
-      const { prefixCls } = useDesign('lazy-container');
-
       onMounted(() => {
         immediateInit();
         initIntersectionObserver();
@@ -133,17 +130,8 @@
       }
       return {
         elRef,
-        prefixCls,
         ...toRefs(state),
       };
     },
   });
 </script>
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-lazy-container';
-
-  .@{prefix-cls} {
-    width: 100%;
-    height: 100%;
-  }
-</style>

src/components/Container/src/ScrollContainer.vue

@@ -12,18 +12,21 @@
 
   export default defineComponent({
     name: 'ScrollContainer',
-    // inheritAttrs: false,
     components: { Scrollbar },
     setup() {
       const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
 
       function scrollTo(to: number, duration = 500) {
         const scrollbar = unref(scrollbarRef);
-        if (!scrollbar) return;
+        if (!scrollbar) {
+          return;
+        }
 
         nextTick(() => {
           const wrap = unref(scrollbar.wrap);
-          if (!wrap) return;
+          if (!wrap) {
+            return;
+          }
           const { start } = useScrollTo({
             el: wrap,
             to,
@@ -35,17 +38,23 @@
 
       function getScrollWrap() {
         const scrollbar = unref(scrollbarRef);
-        if (!scrollbar) return null;
+        if (!scrollbar) {
+          return null;
+        }
         return scrollbar.wrap;
       }
 
       function scrollBottom() {
         const scrollbar = unref(scrollbarRef);
-        if (!scrollbar) return;
+        if (!scrollbar) {
+          return;
+        }
 
         nextTick(() => {
           const wrap = unref(scrollbar.wrap);
-          if (!wrap) return;
+          if (!wrap) {
+            return;
+          }
           const scrollHeight = wrap.scrollHeight as number;
           const { start } = useScrollTo({
             el: wrap,

src/components/Container/src/collapse/CollapseContainer.vue

 <template>
-  <div :class="['p-2', prefixCls]">
+  <div :class="prefixCls">
     <CollapseHeader
       v-bind="getBindValues"
       :prefixCls="prefixCls"
       :show="show"
       @expand="handleExpand"
-      :class="show ? 'mb-3' : ''"
     >
       <template #title>
         <slot name="title"></slot>
       </template>
     </CollapseHeader>
 
-    <CollapseTransition :enable="canExpan">
-      <Skeleton v-if="loading" />
-      <div :class="`${prefixCls}__body`" v-else v-show="show">
-        <LazyContainer :timeout="lazyTime" v-if="lazy">
+    <div class="p-2">
+      <CollapseTransition :enable="canExpan">
+        <Skeleton v-if="loading" :active="active" />
+        <div :class="`${prefixCls}__body`" v-else v-show="show">
           <slot></slot>
-          <template #skeleton>
-            <slot name="lazySkeleton"></slot>
-          </template>
-        </LazyContainer>
-        <slot v-else></slot>
-      </div>
-    </CollapseTransition>
+        </div>
+      </CollapseTransition>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -33,9 +28,8 @@
 
   // component
   import { Skeleton } from 'ant-design-vue';
-  import { CollapseTransition } from '/@/components/Transition/index';
+  import { CollapseTransition } from '/@/components/Transition';
   import CollapseHeader from './CollapseHeader.vue';
-  import LazyContainer from '../LazyContainer.vue';
 
   import { triggerWindowResize } from '/@/utils/event';
   // hook
@@ -47,7 +41,6 @@
     name: 'CollapseContainer',
     components: {
       Skeleton,
-      LazyContainer,
       CollapseHeader,
       CollapseTransition,
     },
@@ -63,9 +56,8 @@
       // Whether to trigger window.resize when expanding and contracting,
       // Can adapt to tables and forms, when the form shrinks, the form triggers resize to adapt to the height
       triggerWindowResize: propTypes.bool,
-      loading: propTypes.bool,
-      // Delayed loading
-      lazy: propTypes.bool,
+      loading: propTypes.bool.def(false),
+      active: propTypes.bool.def(true),
       // Delayed loading time
       lazyTime: propTypes.number.def(0),
     },
@@ -109,9 +101,9 @@
     &__header {
       display: flex;
       height: 32px;
-      // margin-bottom: 10px;
       justify-content: space-between;
       align-items: center;
+      border-bottom: 1px solid @border-color-light;
     }
 
     &__action {

src/components/Container/src/collapse/CollapseHeader.vue

 <template>
-  <div :class="[`${prefixCls}__header`, $attrs.class]">
-    <BasicTitle :helpMessage="helpMessage">
+  <div :class="[`${prefixCls}__header px-2 py-5`, $attrs.class]">
+    <BasicTitle :helpMessage="helpMessage" normal>
       <template v-if="title">
         {{ title }}
       </template>

src/components/Scrollbar/src/index.vue

@@ -111,9 +111,9 @@
       onBeforeUnmount(() => {
         if (props.native) return;
         if (!props.noresize) {
-          removeResizeListener(unref(resize), update);
-          removeResizeListener(unref(wrap), update);
-          removeEventListener('resize', update);
+          //  removeResizeListener(unref(resize), update);
+          //  removeResizeListener(unref(wrap), update);
+          //  removeEventListener('resize', update);
         }
       });
 

src/components/SimpleMenu/src/components/SubMenuItem.vue

@@ -9,11 +9,11 @@
           :class="`${prefixCls}-submenu-title-icon`"
         />
       </div>
-      <MenuCollapseTransition>
+      <CollapseTransition>
         <ul :class="prefixCls" v-show="opened">
           <slot></slot>
         </ul>
-      </MenuCollapseTransition>
+      </CollapseTransition>
     </template>
 
     <Popover
@@ -72,7 +72,7 @@
   import { propTypes } from '/@/utils/propTypes';
   import { useMenuItem } from './useMenu';
   import { useSimpleRootMenuContext } from './useSimpleMenuContext';
-  import MenuCollapseTransition from './MenuCollapseTransition.vue';
+  import { CollapseTransition } from '/@/components/Transition';
   import Icon from '/@/components/Icon';
   import { Popover } from 'ant-design-vue';
   import { isBoolean, isObject } from '/@/utils/is';
@@ -83,7 +83,7 @@
     name: 'SubMenu',
     components: {
       Icon,
-      MenuCollapseTransition,
+      CollapseTransition,
       Popover,
     },
     props: {

src/components/SimpleMenu/src/components/menu.less

@@ -101,10 +101,10 @@
     list-style: none;
     outline: none;
 
-    .collapse-transition {
-      transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out,
-        @transition-time padding-bottom ease-in-out;
-    }
+    // .collapse-transition {
+    //   transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out,
+    //     @transition-time padding-bottom ease-in-out;
+    // }
 
     &-light {
       background: #fff;

src/components/Table/src/BasicTable.vue

@@ -185,8 +185,10 @@
       } = useTableForm(getProps, slots, fetch);
 
       const getBindValues = computed(() => {
+        const dataSource = toRaw(unref(getDataSourceRef));
         let propsData: Recordable = {
           size: 'middle',
+          // ...(dataSource.length === 0 ? { getPopupContainer: () => document.body } : {}),
           ...attrs,
           customRow,
           expandIcon: expandIcon(),
@@ -199,7 +201,7 @@
           rowKey: unref(getRowKey),
           columns: toRaw(unref(getViewColumns)),
           pagination: toRaw(unref(getPaginationInfo)),
-          dataSource: toRaw(unref(getDataSourceRef)),
+          dataSource,
           footer: unref(getFooterProps),
           ...unref(getExpandOption),
         };
@@ -208,7 +210,6 @@
         }
 
         propsData = omit(propsData, 'class');
-
         return propsData;
       });
 

src/components/Transition/index.ts

 import { createSimpleTransition, createJavascriptTransition } from './src/CreateTransition';
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
 import ExpandTransitionGenerator from './src/ExpandTransition';
 
-export { default as CollapseTransition } from './src/CollapseTransition';
-// export { default as CollapseTransition } from './src/CollapseTransition';
+export { default as CollapseTransition } from './src/CollapseTransition.vue';
 
 export const FadeTransition = createSimpleTransition('fade-transition');
 export const ScaleTransition = createSimpleTransition('scale-transition');
@@ -18,15 +16,12 @@ export const SlideXReverseTransition = createSimpleTransition('slide-x-reverse-t
 export const ScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition');
 export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
 
-// Javascript transitions
-// export const ExpandTransition = createJavascriptTransition(
-//   'expand-transition',
-//   ExpandTransitionGenerator()
-// );
-
 export const ExpandXTransition = createJavascriptTransition(
   'expand-x-transition',
   ExpandTransitionGenerator('', true)
 );
 
-export const ExpandTransition = createAsyncComponent(() => import('./src/ExpandTransition.vue'));
+export const ExpandTransition = createJavascriptTransition(
+  'expand-transition',
+  ExpandTransitionGenerator('')
+);

src/components/Transition/src/CollapseTransition.tsx

-// collapse 展开折叠
-import { defineComponent } from 'vue';
-import { getSlot } from '/@/utils/helper/tsxHelper';
-// import { createJavascriptTransition } from './CreateTransition';
-import ExpandTransition from './ExpandTransition.vue';
-
-// export const ExpandTransition = createJavascriptTransition(
-//   'expand-transition',
-//   ExpandTransitionGenerator()
-// );
-export default defineComponent({
-  name: 'CollapseTransition',
-  setup(_, { slots }) {
-    return () => <ExpandTransition>{() => getSlot(slots)}</ExpandTransition>;
-  },
-});

src/components/Transition/src/ExpandTransition.vue → src/components/Transition/src/CollapseTransition.vue

 <template>
-  <transition v-on="on">
+  <transition mode="out-in" v-on="on">
     <slot></slot>
   </transition>
 </template>
 <script lang="ts">
-  import { addClass, removeClass } from '/@/utils/domUtils';
   import { defineComponent } from 'vue';
+  import { addClass, removeClass } from '/@/utils/domUtils';
+
   export default defineComponent({
     name: 'CollapseTransition',
     setup() {
       return {
         on: {
-          beforeEnter(el: any) {
+          beforeEnter(el) {
             addClass(el, 'collapse-transition');
             if (!el.dataset) el.dataset = {};
 
@@ -23,7 +24,7 @@
             el.style.paddingBottom = 0;
           },
 
-          enter(el: any) {
+          enter(el) {
             el.dataset.oldOverflow = el.style.overflow;
             if (el.scrollHeight !== 0) {
               el.style.height = el.scrollHeight + 'px';
@@ -38,14 +39,13 @@
             el.style.overflow = 'hidden';
           },
 
-          afterEnter(el: any) {
-            // for safari: remove class then reset height is necessary
+          afterEnter(el) {
             removeClass(el, 'collapse-transition');
             el.style.height = '';
             el.style.overflow = el.dataset.oldOverflow;
           },
 
-          beforeLeave(el: any) {
+          beforeLeave(el) {
             if (!el.dataset) el.dataset = {};
             el.dataset.oldPaddingTop = el.style.paddingTop;
             el.dataset.oldPaddingBottom = el.style.paddingBottom;
@@ -55,19 +55,16 @@
             el.style.overflow = 'hidden';
           },
 
-          leave(el: any) {
+          leave(el) {
             if (el.scrollHeight !== 0) {
-              // for safari: add class after set height, or it will jump to zero height suddenly, weired
               addClass(el, 'collapse-transition');
-              // in vue3.0.4, transitionProperty is set 'none' to avoid 'v-leave-from' issue
-              el.style.transitionProperty = 'height';
               el.style.height = 0;
               el.style.paddingTop = 0;
               el.style.paddingBottom = 0;
             }
           },
 
-          afterLeave(el: any) {
+          afterLeave(el) {
             removeClass(el, 'collapse-transition');
             el.style.height = '';
             el.style.overflow = el.dataset.oldOverflow;
@@ -79,9 +76,3 @@
     },
   });
 </script>
-<style lang="less" scoped>
-  .collapse-transition {
-    transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out,
-      0.2s padding-bottom ease-in-out;
-  }
-</style>

src/design/transition/index.less

@@ -4,3 +4,7 @@
 @import './slide.less';
 @import './scroll.less';
 @import './zoom.less';
+
+.collapse-transition {
+  transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
+}

src/views/demo/comp/transition/index.vue

@@ -32,7 +32,7 @@
     ScaleRotateTransition,
     ExpandXTransition,
     ExpandTransition,
-  } from '/@/components/Transition/index';
+  } from '/@/components/Transition';
 
   const transitionList = [
     'Fade',