perf: 样式调整

src/layouts/Basic.vue

@@ -24,9 +24,17 @@ const route = useRoute();
 useResponsive(true);
 
 const showSider = computed(() => {
-  return  !route.meta?.hideSidebar;
+  return !route.meta?.hideSidebar;
 });
 
+const isHomeRoute = computed(() => {
+  return route.name === 'Home';
+});
+
+const layoutPageClass = computed(() => {
+  return isHomeRoute.value ? 'pb-8px pr-8px' : 'pb-24px pr-24px'
+})
+
 const collapsed = computed(() => {
   return sidebarStore.menuCollapse;
 });
@@ -45,6 +53,7 @@ const checkHasInviteCode = () => {
     joinModalRef.value?.getEnterprise?.();
   }
 };
+
 </script>
 
 <template>
@@ -61,16 +70,20 @@ const checkHasInviteCode = () => {
         collapsible
         trigger
         @collapse="setCollapsed"
+        class="layout-sider"
       >
-        <section class="menu-wrapper">
-          <SiderBar />
-        </section>
+        <SiderBar />
       </Layout.Sider>
-      <Layout class="flex-1 layout-content">
-        <div class="py-16px pr-16px">
+      <Layout.Content
+        class="layout-content"
+        :style="{
+          paddingLeft: sidebarStore.sidebarWidth + 'px',
+        }"
+      >
+        <div :class="layoutPageClass">
           <layout-page />
         </div>
-      </Layout>
+      </Layout.Content>
     </Layout>
   </Layout>
 </template>
@@ -86,50 +99,37 @@ const checkHasInviteCode = () => {
     line-height: $navbar-height;
     padding-inline: inherit;
     color: inherit;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    width: 100%;
   }
   .layout-content-wrap {
+    width: 100%;
     height: 100%;
     background: transparent;
     min-height: calc(100vh - $navbar-height);
     :deep(.ant-layout-sider) {
       background: none;
       box-shadow: none;
+      padding-top: $navbar-height;
       padding-bottom: 0;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 9999;
+      height: 100%;
+      transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
       .ant-layout-sider-trigger {
         display: none;
       }
       .ant-layout-sider-children {
         overflow: hidden;
       }
-      .arco-menu-inner {
-        overflow: hidden;
-        padding: 16px !important;
-      }
-      .menu-wrapper {
-        height: 100%;
-        overflow: auto;
-        overflow-x: hidden;
-        :deep(.arco-menu) {
-          ::-webkit-scrollbar {
-            width: 12px;
-            height: 4px;
-          }
-          ::-webkit-scrollbar-thumb {
-            border: 4px solid transparent;
-            background-clip: padding-box;
-            border-radius: 7px;
-            background-color: var(--color-text-4);
-          }
-          ::-webkit-scrollbar-thumb:hover {
-            background-color: var(--color-text-3);
-          }
-        }
-      }
     }
     .layout-content {
-      height: 100%;
-      overflow-y: scroll;
-      overflow-x: auto;
+      padding-top: $navbar-height;
       background: transparent;
       transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
     }

src/layouts/components/navbar/index.vue

@@ -4,7 +4,7 @@
       <img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" />
     </div>
     <div class="flex-1">
-      <MiddleSide v-if="!isAgentRoute" />
+      <MiddleSide />
     </div>
     <RightSide :isAgentRoute="isAgentRoute" v-if="userStore.isLogin" />
   </div>