perf: layout code adjustment

src/layouts/default/LayoutContent.tsx

@@ -1,20 +1,32 @@
-import { defineComponent } from 'vue';
+import { computed, defineComponent, unref } from 'vue';
 import { Layout } from 'ant-design-vue';
+import { FullLoading } from '/@/components/Loading/index';
+
 import { RouterView } from 'vue-router';
 
 import { ContentEnum } from '/@/enums/appEnum';
 import { appStore } from '/@/store/modules/app';
 export default defineComponent({
   name: 'DefaultLayoutContent',
   setup() {
+    const getProjectConfigRef = computed(() => {
+      return appStore.getProjectConfig;
+    });
+
     return () => {
-      const { getProjectConfig } = appStore;
-      const { contentMode } = getProjectConfig;
+      const { contentMode, openPageLoading } = unref(getProjectConfigRef);
+      const { getPageLoading } = appStore;
+
       const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
       return (
-        <Layout.Content class={`layout-content ${wrapClass} `}>
-          {() => <RouterView />}
-        </Layout.Content>
+        <div class={[`default-layout__main`]}>
+          {openPageLoading && (
+            <FullLoading class={[`default-layout__loading`, !getPageLoading && 'hidden']} />
+          )}
+          <Layout.Content class={`layout-content ${wrapClass} `}>
+            {() => <RouterView />}
+          </Layout.Content>
+        </div>
       );
     };
   },

src/layouts/default/LayoutSideBar.tsx

@@ -2,13 +2,15 @@ import { computed, defineComponent, nextTick, onMounted, ref, unref } from 'vue'
 
 import { Layout } from 'ant-design-vue';
 import LayoutTrigger from './LayoutTrigger';
-import { menuStore } from '/@/store/modules/menu';
+import LayoutMenu from '/@/layouts/default/menu/LayoutMenu';
 
+import { menuStore } from '/@/store/modules/menu';
 import { appStore } from '/@/store/modules/app';
+
 import { MenuModeEnum, MenuSplitTyeEnum, TriggerEnum } from '/@/enums/menuEnum';
 import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
+
 import { useDebounce } from '/@/hooks/core/useDebounce';
-import LayoutMenu from './LayoutMenu';
 
 export default defineComponent({
   name: 'DefaultLayoutSideBar',
@@ -111,13 +113,6 @@ export default defineComponent({
       brokenRef.value = broken;
     }
 
-    onMounted(() => {
-      nextTick(() => {
-        const [exec] = useDebounce(changeWrapWidth, 20);
-        exec();
-      });
-    });
-
     const getDragBarStyle = computed(() => {
       if (menuStore.getCollapsedState) {
         return { left: `${unref(getMiniWidth)}px` };
@@ -136,6 +131,13 @@ export default defineComponent({
       return trigger !== TriggerEnum.NONE && trigger === TriggerEnum.FOOTER;
     });
 
+    onMounted(() => {
+      nextTick(() => {
+        const [exec] = useDebounce(changeWrapWidth, 20);
+        exec();
+      });
+    });
+
     function handleSiderClick(e: ChangeEvent) {
       if (!e || !e.target || e.target.className !== 'basic-menu__content') return;
 

src/layouts/default/LayoutHeader.tsx → src/layouts/default/header/LayoutHeader.tsx

@@ -1,13 +1,13 @@
 import { defineComponent, unref, computed, ref } from 'vue';
 
 import { Layout, Tooltip, Badge } from 'ant-design-vue';
-import Logo from '/@/layouts/Logo.vue';
+import Logo from '/@/layouts/logo/index.vue';
 import UserDropdown from './UserDropdown';
-import LayoutMenu from './LayoutMenu';
+import LayoutMenu from '/@/layouts/default/menu/LayoutMenu';
 import LayoutBreadcrumb from './LayoutBreadcrumb';
-import LockAction from './actions/LockActionItem';
-import LayoutTrigger from './LayoutTrigger';
-import NoticeAction from './actions/notice/NoticeActionItem.vue';
+import LockAction from './LockActionItem';
+import LayoutTrigger from '../LayoutTrigger';
+import NoticeAction from './notice/NoticeActionItem.vue';
 import {
   RedoOutlined,
   FullscreenExitOutlined,
@@ -28,6 +28,8 @@ import { errorStore } from '/@/store/modules/error';
 
 import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
 import { GITHUB_URL } from '/@/settings/siteSetting';
+
+import './index.less';
 export default defineComponent({
   name: 'DefaultLayoutHeader',
   setup() {

src/layouts/default/UserDropdown.tsx → src/layouts/default/header/UserDropdown.tsx

@@ -39,8 +39,7 @@ export default defineComponent({
     function handleMenuClick(e: any) {
       if (e.key === 'loginOut') {
         handleLoginOut();
-      }
-      if (e.key === 'doc') {
+      } else if (e.key === 'doc') {
         openDoc();
       }
     }

src/layouts/default/header/index.less

@@ -0,0 +1,214 @@
+@import (reference) '../../../design/index.less';
+
+.layout-header {
+  display: flex;
+  height: @header-height;
+  padding: 0 20px 0 0;
+  line-height: @header-height;
+  color: @white;
+  background: @white;
+  align-items: center;
+  justify-content: space-between;
+
+  &__left {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+
+    .layout-trigger {
+      padding: 4px 10px 0 16px;
+      cursor: pointer;
+
+      .anticon {
+        font-size: 17px;
+      }
+
+      &.light {
+        &:hover {
+          background: @header-light-bg-hover-color;
+        }
+
+        svg {
+          fill: #000;
+        }
+      }
+
+      &.dark {
+        &:hover {
+          background: @header-dark-bg-hover-color;
+        }
+      }
+    }
+
+    .layout-breadcrumb {
+      padding: 0 8px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+  }
+
+  &__header--light {
+    background: @white;
+    border-bottom: 1px solid @header-light-bottom-border-color;
+
+    .layout-header__menu {
+      height: calc(@header-height - 1px);
+
+      .ant-menu-submenu {
+        height: @header-height;
+        line-height: @header-height;
+      }
+    }
+
+    .layout-header__logo {
+      height: @header-height;
+      color: @text-color-base;
+
+      img {
+        width: @logo-width;
+        height: @logo-width;
+        margin-right: 6px;
+      }
+
+      &:hover {
+        background: @header-light-bg-hover-color;
+      }
+    }
+
+    .layout-header__action {
+      &-item {
+        &:hover {
+          background: @header-light-bg-hover-color;
+        }
+      }
+
+      &-icon {
+        color: @text-color-base;
+      }
+    }
+
+    .layout-header__user-dropdown {
+      &:hover {
+        background: @header-light-bg-hover-color;
+      }
+    }
+
+    .user-dropdown {
+      &__name {
+        color: @text-color-base;
+      }
+
+      &__desc {
+        color: @header-light-desc-color;
+      }
+    }
+  }
+
+  &__header--dark {
+    background: @header-dark-bg-color;
+
+    .layout-header__action {
+      &-item {
+        &:hover {
+          background: @header-dark-bg-hover-color;
+        }
+      }
+    }
+
+    .layout-header__logo {
+      height: @header-height;
+
+      img {
+        width: @logo-width;
+        height: @logo-width;
+        margin-right: 10px;
+      }
+
+      &:hover {
+        background: @header-dark-bg-hover-color;
+      }
+    }
+
+    .layout-header__user-dropdown {
+      &:hover {
+        background: @header-dark-bg-hover-color;
+      }
+    }
+
+    .breadcrumb {
+      &__item:last-child .breadcrumb__inner,
+      &__item:last-child &__inner a,
+      &__item:last-child &__inner a:hover,
+      &__item:last-child &__inner:hover {
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.6);
+        cursor: text;
+      }
+
+      &__inner,
+      &__separator {
+        color: @white;
+      }
+    }
+  }
+
+  &__logo {
+    padding: 0 10px;
+  }
+
+  &__bread {
+    display: none;
+    flex: 1;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+
+    &-item {
+      display: flex;
+      height: @header-height;
+      padding: 0 2px;
+      font-size: 1.2em;
+      cursor: pointer;
+      align-items: center;
+    }
+
+    &-icon {
+      padding: 0 8px;
+    }
+  }
+
+  &__menu {
+    margin-left: 20px;
+    overflow: hidden;
+    align-items: center;
+  }
+
+  &__user-dropdown {
+    height: @header-height;
+    padding: 0 0 0 10px;
+  }
+
+  .user-dropdown {
+    display: flex;
+    padding-right: 10px;
+    font-size: 12px;
+    cursor: pointer;
+    align-items: center;
+
+    img {
+      width: 26px;
+      height: 26px;
+      margin-right: 12px;
+    }
+
+    &__header {
+      border-radius: 50%;
+    }
+  }
+}