fix(comp): fix the memory overflow problem of component containing ke…

…ywords

CHANGELOG.zh_CN.md

@@ -4,6 +4,10 @@
 
 - 移除左侧菜单搜索，新增顶部菜单搜索功能
 
+### ⚡ Performance Improvements
+
+- 异步引入组件
+
 ### 🎫 Chores
 
 - 返回顶部样式调整,避免遮住其他元素
@@ -14,6 +18,9 @@
 - 修复多级路由缓存导致组件渲染多次的问题
 - 修复地图图表切换后消失问题
 - 修复登录成功 notify 消失问题
+- 修改 `VirtualScroll`和`ImportExcel`组件名为`VScroll`与`ImpExcel`,暂时解决含有关键字的组件在 vue 模版内使用内存溢出
+- 修复 axios 大小写问题
+- 修复按钮样式问题
 
 ## 2.0.0-rc.13 (2020-12-10)
 

src/components/Application/index.ts

@@ -1,9 +1,13 @@
 import { withInstall } from '../util';
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
-export const AppLocalePicker = createAsyncComponent(() => import('./src/AppLocalePicker.vue'));
+export const AppLocalePicker = createAsyncComponent(() => import('./src/AppLocalePicker.vue'), {
+  loading: true,
+});
 export const AppProvider = createAsyncComponent(() => import('./src/AppProvider.vue'));
-export const AppSearch = createAsyncComponent(() => import('./src/search/AppSearch.vue'));
+export const AppSearch = createAsyncComponent(() => import('./src/search/AppSearch.vue'), {
+  loading: true,
+});
 export const AppLogo = createAsyncComponent(() => import('./src/AppLogo.vue'));
 
 withInstall(AppLocalePicker, AppLogo, AppProvider, AppSearch);

src/components/Button/src/BasicButton.vue

@@ -1,9 +1,9 @@
 <template>
   <Button v-bind="getBindValue" :class="[getColor, $attrs.class]">
     <template #default="data">
-      <Icon :icon="preIcon" :class="{ 'mr-1': !getIsCircleBtn }" v-if="preIcon" />
+      <Icon :icon="preIcon" v-if="preIcon" :size="14" />
       <slot v-bind="data" />
-      <Icon :icon="postIcon" :class="{ 'ml-1': !getIsCircleBtn }" v-if="postIcon" />
+      <Icon :icon="postIcon" v-if="postIcon" :size="14" />
     </template>
   </Button>
 </template>
@@ -27,8 +27,6 @@
       postIcon: propTypes.string,
     },
     setup(props, { attrs }) {
-      const getIsCircleBtn = computed(() => attrs.shape === 'circle');
-
       const getColor = computed(() => {
         const { color, disabled } = props;
         return {
@@ -41,7 +39,7 @@
         return { ...attrs, ...props };
       });
 
-      return { getBindValue, getColor, getIsCircleBtn };
+      return { getBindValue, getColor };
     },
   });
 </script>

src/components/Container/index.ts

@@ -1,10 +1,12 @@
-import ScrollContainer from './src/ScrollContainer.vue';
-import CollapseContainer from './src/collapse/CollapseContainer.vue';
-import LazyContainer from './src/LazyContainer.vue';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const ScrollContainer = createAsyncComponent(() => import('./src/ScrollContainer.vue'));
+export const CollapseContainer = createAsyncComponent(
+  () => import('./src/collapse/CollapseContainer.vue')
+);
+export const LazyContainer = createAsyncComponent(() => import('./src/LazyContainer.vue'));
+
 withInstall(ScrollContainer, CollapseContainer, LazyContainer);
 
 export * from './src/types';
-
-export { ScrollContainer, CollapseContainer, LazyContainer };

src/components/CountTo/index.ts

@@ -1,7 +1,8 @@
 // Transform vue-count-to to support vue3 version
 
-import CountTo from './src/index.vue';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const CountTo = createAsyncComponent(() => import('./src/index.vue'));
+
 withInstall(CountTo);
-export { CountTo };

src/components/Description/index.ts

@@ -1,9 +1,9 @@
-import Description from './src/index';
-
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const Description = createAsyncComponent(() => import('./src/index'));
+
 withInstall(Description);
 
 export * from './src/types';
 export { useDescription } from './src/useDescription';
-export { Description };

src/components/Drawer/index.ts

@@ -1,7 +1,8 @@
-import BasicDrawer from './src/BasicDrawer';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const BasicDrawer = createAsyncComponent(() => import('./src/BasicDrawer'));
+
 withInstall(BasicDrawer);
 export * from './src/types';
 export { useDrawer, useDrawerInner } from './src/useDrawer';
-export { BasicDrawer };

src/components/Dropdown/index.ts

@@ -1,7 +1,7 @@
-import Dropdown from './src/Dropdown';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const Dropdown = createAsyncComponent(() => import('./src/Dropdown'));
+
 withInstall(Dropdown);
 export * from './src/types';
-
-export { Dropdown };

src/components/Excel/index.ts

@@ -1,12 +1,12 @@
-import ImportExcel from './src/ImportExcel.vue';
-import ExportExcelModel from './src/ExportExcelModel.vue';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
 import { withInstall } from '../util';
 
-withInstall(ImportExcel, ExportExcelModel);
+export const ImpExcel = createAsyncComponent(() => import('./src/ImportExcel.vue'));
+export const ExpExcelModel = createAsyncComponent(() => import('./src/ExportExcelModel.vue'));
+
+withInstall(ImpExcel, ExpExcelModel);
 
 export * from './src/types';
 
 export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';
-
-export { ImportExcel, ExportExcelModel };

src/components/Icon/index.tsx

@@ -1,5 +1,7 @@
 import './index.less';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
 import type { PropType } from 'vue';
 import {
   defineComponent,
@@ -14,7 +16,7 @@ import {
 import Iconify from '@purge-icons/generated';
 import { isString } from '/@/utils/is';
 import { propTypes } from '/@/utils/propTypes';
-export default defineComponent({
+const Icon = defineComponent({
   name: 'GIcon',
   props: {
     // icon name
@@ -81,3 +83,9 @@ export default defineComponent({
     );
   },
 });
+
+export default createAsyncComponent(() => {
+  return new Promise((resolve) => {
+    resolve(Icon);
+  });
+});

src/components/Loading/index.ts

@@ -1,9 +1,9 @@
 import './src/indicator';
-import Loading from './src/index.vue';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const Loading = createAsyncComponent(() => import('./src/index.vue'));
+
 withInstall(Loading);
 export { useLoading } from './src/useLoading';
 export { createLoading } from './src/createLoading';
-
-export { Loading };

src/components/Markdown/index.ts

@@ -1,9 +1,8 @@
-import MarkDown from './src/index.vue';
-
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const MarkDown = createAsyncComponent(() => import('./src/index.vue'));
+
 withInstall(MarkDown);
 
 export * from './src/types';
-
-export { MarkDown };

src/components/Menu/index.ts

@@ -1,5 +1,7 @@
-import BasicMenu from './src/BasicMenu';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu'), { loading: false });
+
 withInstall(BasicMenu);
-export { BasicMenu };

src/components/Modal/index.ts

@@ -1,10 +1,11 @@
 import './src/index.less';
-import BasicModal from './src/BasicModal';
 import { withInstall } from '../util';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+export const BasicModal = createAsyncComponent(() => import('./src/BasicModal'));
 
 withInstall(BasicModal);
 
 export { useModalContext } from './src/useModalContext';
 export { useModal, useModalInner } from './src/useModal';
 export * from './src/types';
-export { BasicModal };

src/components/Page/index.ts

@@ -1,5 +1,6 @@
-import PageFooter from './src/PageFooter.vue';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const PageFooter = createAsyncComponent(() => import('./src/PageFooter.vue'));
+
 withInstall(PageFooter);
-export { PageFooter };

src/components/Qrcode/index.ts

@@ -1,2 +1,7 @@
-export { default as QrCode } from './src/index.vue';
+import { withInstall } from '../util';
+
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const QrCode = createAsyncComponent(() => import('./src/index.vue'));
+
+withInstall(QrCode);
 export * from './src/types';

src/components/Scrollbar/index.ts

@@ -2,10 +2,11 @@
  * copy from element-ui
  */
 
-import Scrollbar from './src/Scrollbar';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const Scrollbar = createAsyncComponent(() => import('./src/Scrollbar'));
+
 withInstall(Scrollbar);
 
-export { Scrollbar };
 export type { ScrollbarType } from './src/types';

src/components/StrengthMeter/index.tsx

@@ -1,5 +1,7 @@
-import StrengthMeter from './src/index';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+export const StrengthMeter = createAsyncComponent(() => import('./src/index'));
+
 withInstall(StrengthMeter);
-export { StrengthMeter };

src/components/Tinymce/index.ts

@@ -1,5 +1,6 @@
-import Tinymce from './src/Editor.vue';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const Tinymce = createAsyncComponent(() => import('./src/Editor.vue'));
+
 withInstall(Tinymce);
-export { Tinymce };

src/components/Transition/index.ts

@@ -1,4 +1,5 @@
 import { createSimpleTransition, createJavascriptTransition } from './src/CreateTransition';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
 import ExpandTransitionGenerator from './src/ExpandTransition';
 
@@ -28,4 +29,4 @@ export const ExpandXTransition = createJavascriptTransition(
   ExpandTransitionGenerator('', true)
 );
 
-export { default as ExpandTransition } from './src/ExpandTransition.vue';
+export const ExpandTransition = createAsyncComponent(() => import('./src/ExpandTransition.vue'));

src/components/Tree/index.ts

@@ -1,3 +1,9 @@
-export { default as BasicTree } from './src/BasicTree';
-export * from './src/types';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+import { withInstall } from '../util';
+
+export const BasicTree = createAsyncComponent(() => import('./src/BasicTree'));
+
+withInstall(BasicTree);
+
 export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
+export * from './src/types';

src/components/Upload/index.ts

@@ -1,5 +1,6 @@
-import BasicUpload from './src/BasicUpload.vue';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export const BasicUpload = createAsyncComponent(() => import('./src/BasicUpload.vue'));
+
 withInstall(BasicUpload);
-export { BasicUpload };

src/components/Verify/index.ts

@@ -1,9 +1,10 @@
-import BasicDragVerify from './src/DragVerify';
-import RotateDragVerify from './src/ImgRotate';
 import { withInstall } from '../util';
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+export const BasicDragVerify = createAsyncComponent(() => import('./src/DragVerify'));
+export const RotateDragVerify = createAsyncComponent(() => import('./src/ImgRotate'));
+
 withInstall(BasicDragVerify, RotateDragVerify);
 
 export * from './src/types';
-
-export { BasicDragVerify, RotateDragVerify };

src/components/VirtualScroll/index.ts

@@ -1,5 +1,7 @@
-import VirtualScroll from './src/index';
 import { withInstall } from '../util';
 
-withInstall(VirtualScroll);
-export { VirtualScroll };
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+export const VScroll = createAsyncComponent(() => import('./src/index'));
+
+withInstall(VScroll);

src/design/ant/btn.less

@@ -1,5 +1,8 @@
 // button重置
 .ant-btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   // &.ant-btn-success:not(.ant-btn-link),
   // &.ant-btn-error:not(.ant-btn-link),
   // &.ant-btn-warning:not(.ant-btn-link),

src/layouts/page/index.tsx

@@ -54,16 +54,17 @@ export default defineComponent({
                   renderComp()
                 );
 
-                return unref(getEnableTransition) ? (
+                if (!unref(getEnableTransition)) {
+                  return PageContent;
+                }
+                return (
                   <Transition
                     name={name || route.meta.transitionName || unref(getBasicTransition)}
                     mode="out-in"
                     appear={true}
                   >
                     {() => PageContent}
                   </Transition>
-                ) : (
-                  PageContent
                 );
               },
             }}