perf: perf context menu

src/layouts/default/content/index.less

@@ -19,7 +19,7 @@
     }
 
     > .basic-loading {
-      margin-bottom: 30%;
+      margin-bottom: 15%;
     }
   }
 }

src/layouts/default/header/LayoutHeader.tsx

@@ -60,10 +60,10 @@ export default defineComponent({
     },
   },
   setup(props) {
-    let logoEl: Element | null;
+    let logoEl: Element | null | undefined;
 
     const logoWidthRef = ref(200);
-    const logoRef = ref<any>(null);
+    const logoRef = ref<ComponentRef>(null);
     const { refreshPage } = useTabs();
 
     const { getShowTopMenu, getShowHeaderTrigger, getSplit, getTopMenuAlign } = useMenuSetting();
@@ -91,7 +91,7 @@ export default defineComponent({
           if (!unref(getShowTopMenu)) return;
           let width = 0;
           if (!logoEl) {
-            logoEl = logoRef.value.$el;
+            logoEl = unref(logoRef)?.$el;
           } else {
             width += logoEl.clientWidth;
           }

src/layouts/default/header/LayoutMultipleHeader.tsx

@@ -39,26 +39,30 @@ export default defineComponent({
       return unref(getShowMultipleTab) && !unref(getFullContent);
     });
 
-    const getPlaceholderDomStyle = computed(() => {
-      return {
-        height: `${unref(placeholderHeightRef)}px`,
-      };
-    });
+    const getPlaceholderDomStyle = computed(
+      (): CSSProperties => {
+        return {
+          height: `${unref(placeholderHeightRef)}px`,
+        };
+      }
+    );
 
     const getIsShowPlaceholderDom = computed(() => {
       return unref(getFixed) || unref(getShowFullHeaderRef);
     });
 
-    const getWrapStyle = computed(() => {
-      const style: CSSProperties = {};
-      if (unref(getFixed)) {
-        style.width = unref(getCalcContentWidth);
+    const getWrapStyle = computed(
+      (): CSSProperties => {
+        const style: CSSProperties = {};
+        if (unref(getFixed)) {
+          style.width = unref(getCalcContentWidth);
+        }
+        if (unref(getShowFullHeaderRef)) {
+          style.top = `${unref(fullHeaderHeightRef)}px`;
+        }
+        return style;
       }
-      if (unref(getShowFullHeaderRef)) {
-        style.top = `${unref(fullHeaderHeightRef)}px`;
-      }
-      return style;
-    });
+    );
 
     const getIsFixed = computed(() => {
       return unref(getFixed) || unref(getShowFullHeaderRef);

src/layouts/default/header/index.less

@@ -20,7 +20,6 @@
 
   &__left {
     display: flex;
-    // flex-grow: 1;
     align-items: center;
 
     .layout-trigger {

src/layouts/default/multitabs/index.less

@@ -40,9 +40,12 @@
           height: 12px;
           font-size: 12px;
           color: inherit;
+          visibility: hidden;
           transition: none;
 
           &:hover {
+            visibility: visible;
+
             svg {
               width: 0.8em;
             }
@@ -69,6 +72,10 @@
           display: none;
         }
 
+        .ant-tabs-close-x {
+          visibility: visible;
+        }
+
         svg {
           width: 0.7em;
           fill: @white;