perf(tabs): perf multiple-tabs

Author: anncwb

src/components/Dropdown/index.ts

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

src/components/Menu/src/BasicMenu.tsx

@@ -243,6 +243,7 @@ export default defineComponent({
           onOpenChange={handleOpenChange}
           class={unref(getMenuClass)}
           onClick={handleMenuClick}
+          subMenuOpenDelay={0.2}
           {...unref(getInlineCollapseOptions)}
         >
           {{

src/hooks/setting/useMenuSetting.ts

@@ -6,6 +6,7 @@ import { appStore } from '/@/store/modules/app';
 
 import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
 import { MenuModeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
+import { useFullContent } from '/@/hooks/web/useFullContent';
 
 // Get menu configuration
 const getMenuSetting = computed(() => appStore.getProjectConfig.menuSetting);
@@ -78,6 +79,15 @@ const getCalcContentWidth = computed(() => {
   return `calc(100% - ${unref(width)}px)`;
 });
 
+const { getFullContent: fullContent } = useFullContent();
+
+const getShowSidebar = computed(() => {
+  return (
+    unref(getSplit) ||
+    (unref(getShowMenu) && unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(fullContent))
+  );
+});
+
 // Set menu configuration
 function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
   appStore.commitProjectConfigState({ menuSetting });
@@ -119,5 +129,6 @@ export function useMenuSetting() {
     getMenuHidden,
     getIsTopMenu,
     getMenuBgColor,
+    getShowSidebar,
   };
 }

src/layouts/default/LayoutTrigger.tsx

@@ -6,7 +6,7 @@
         :loading="getPageLoading"
         background="rgba(240, 242, 245, 0.6)"
         absolute
-        :class="`${prefixCls}__loading`"
+        :class="`${prefixCls}-loading`"
       />
     </transition>
     <PageLayout />
@@ -53,7 +53,7 @@
       margin: 0 auto;
     }
 
-    &__loading {
+    &-loading {
       position: absolute;
       top: 200px;
       z-index: @page-loading-z-index;

src/layouts/default/content/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <LayoutLockPage />
+  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
+  <SettingDrawer v-if="getShowSettingButton" />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { BackTop } from 'ant-design-vue';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+  export default defineComponent({
+    name: 'LayoutFeatures',
+    components: {
+      BackTop,
+      LayoutLockPage: createAsyncComponent(() => import('/@/views/sys/lock/index.vue')),
+      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue')),
+    },
+    setup() {
+      const { getUseOpenBackTop, getShowSettingButton } = useRootSetting();
+
+      return {
+        getTarget: () => document.body,
+        getUseOpenBackTop,
+        getShowSettingButton,
+      };
+    },
+  });
+</script>

src/layouts/default/feature/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <Footer :class="prefixCls" v-if="getShowLayoutFooter">
+    <div :class="`${prefixCls}__links`">
+      <a @click="openWindow(SITE_URL)">{{ t('layout.footer.onlinePreview') }}</a>
+      <GithubFilled @click="openWindow(GITHUB_URL)" :class="`${prefixCls}__github`" />
+      <a @click="openWindow(DOC_URL)">{{ t('layout.footer.onlineDocument') }}</a>
+    </div>
+    <div>Copyright &copy;2020 Vben Admin</div>
+  </Footer>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, unref } from 'vue';
+  import { Layout } from 'ant-design-vue';
+
+  import { GithubFilled } from '@ant-design/icons-vue';
+
+  import { DOC_URL, GITHUB_URL, SITE_URL } from '/@/settings/siteSetting';
+  import { openWindow } from '/@/utils';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useRouter } from 'vue-router';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export default defineComponent({
+    name: 'LayoutFooter',
+    components: { Footer: Layout.Footer, GithubFilled },
+    setup() {
+      const { t } = useI18n();
+      const { getShowFooter } = useRootSetting();
+      const { currentRoute } = useRouter();
+      const { prefixCls } = useDesign('layout-footer');
+
+      const getShowLayoutFooter = computed(() => {
+        return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter;
+      });
+      return { getShowLayoutFooter, prefixCls, t, DOC_URL, GITHUB_URL, SITE_URL, openWindow };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-layout-footer';
+
+  @normal-color: rgba(0, 0, 0, 0.45);
+
+  @hover-color: rgba(0, 0, 0, 0.85);
+
+  .@{prefix-cls} {
+    color: @normal-color;
+    text-align: center;
+
+    &__links {
+      margin-bottom: 8px;
+
+      a {
+        color: @normal-color;
+
+        &:hover {
+          color: @hover-color;
+        }
+      }
+    }
+
+    &__github {
+      margin: 0 30px;
+
+      &:hover {
+        color: @hover-color;
+      }
+    }
+  }
+</style>

src/layouts/default/footer/index.less

@@ -19,7 +19,7 @@ import UserDropdown from './UserDropdown';
 import LayoutMenu from '../menu';
 import LayoutBreadcrumb from './LayoutBreadcrumb.vue';
 import LockAction from './actions/LockAction';
-import LayoutTrigger from '../LayoutTrigger';
+import LayoutTrigger from '../trigger/index.vue';
 import NoticeAction from './notice/NoticeActionItem.vue';
 import {
   RedoOutlined,

src/layouts/default/footer/index.tsx

@@ -3,7 +3,7 @@ import './LayoutMultipleHeader.less';
 import { defineComponent, unref, computed, ref, watch, nextTick, CSSProperties } from 'vue';
 
 import LayoutHeader from './LayoutHeader';
-import MultipleTabs from '../multitabs/index';
+import MultipleTabs from '../tabs/index.vue';
 
 import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';

src/layouts/default/footer/index.vue

@@ -1,4 +1,5 @@
 @import (reference) '../../../design/index.less';
+@header-trigger-prefix-cls: ~'@{namespace}-layout-header-trigger';
 
 .layout-header {
   display: flex;
@@ -24,7 +25,7 @@
     height: 100%;
     align-items: center;
 
-    .layout-trigger {
+    .@{header-trigger-prefix-cls} {
       display: flex;
       height: 100%;
       padding: 1px 10px 0 16px;