perf: sidebar结构调整

src/layouts/components/siderBar/index.vue

@@ -96,7 +96,7 @@ export default defineComponent({
     const renderMenuList = () => {
       return currentMenuList.value.map((item) => {
         if (!item.children) {
-          return renderMenuItem(item, sidebarStore.menuCollapse);
+          return renderMenuItem(item, collapsed.value);
         }
         return (
           <Dropdown
@@ -115,7 +115,7 @@ export default defineComponent({
               },
             }}
           >
-            {renderMenuItem(item, sidebarStore.menuCollapse)}
+            {renderMenuItem(item, collapsed.value)}
           </Dropdown>
         );
       });
@@ -161,39 +161,39 @@ export default defineComponent({
         trigger
         onCollapse={setCollapsed}
       >
-        <Menu
-          class={`siderBar-wrap p-16px w-full h-full flex flex-col ${sidebarStore.menuCollapse ? 'menu-fold' : ''}`}
-        >
+        <Menu class={`siderBar-wrap w-full flex flex-col px-16px pt-16px ${collapsed.value ? 'menu-fold' : ''}`}>
           {showAiSearch.value && (
             <>
               <Menu.Item class={`menu-item !mb-0 ${isHomeRoute.value ? 'active' : ''}`} onClick={handleUserHome}>
                 <img src={icon1} width={18} height={18} />
-                {!sidebarStore.menuCollapse && (
-                  <span class="cts label">开始工作</span>
-                )}
+                {!collapsed.value && <span class="cts label">开始工作</span>}
               </Menu.Item>
               <div class="line w-full h-1px bg-#211F24 my-12px"></div>
             </>
           )}
           <div class="flex flex-col flex-1">
             <div class="menu-list flex-1">{renderMenuList()}</div>
-            <div class="flex justify-center items-center">
+          </div>
+        </Menu>
         <div
-                class="flex fold-btn items-center cursor-pointer"
+          class={`bg-#F6F5FC flex items-center absolute bottom-0 w-full pt-8px px-16px pb-16px right-0 ${
+            collapsed.value ? 'justify-center' : 'justify-end'
+          }`}
+        >
+          <div
+            class="flex fold-btn items-center cursor-pointer h-22px "
             onClick={() => {
               sidebarStore.setMenuCollapse();
             }}
           >
-                {sidebarStore.menuCollapse ? (
+            {collapsed.value ? (
               <icon-menu-unfold size={16} class="color-#55585F icon mr-4px" />
             ) : (
               <icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
             )}
-                {!sidebarStore.menuCollapse && <span class="cts !color-#55585F flex-shrink-0">收起</span>}
+            {!collapsed.value && <span class="cts !color-#55585F flex-shrink-0">收起</span>}
           </div>
         </div>
-          </div>
-        </Menu>
       </Layout.Sider>
     );
   },

src/layouts/components/siderBar/style.scss

@@ -44,7 +44,11 @@
     background-color: transparent;
   }
 }
-.siderBar-wrap {
+.ant-layout-sider {
+  .ant-layout-sider-children {
+    position: relative;
+    // padding: 16px 0;
+    .siderBar-wrap {
       background: transparent !important;
       border: none !important;
       color: inherit;
@@ -62,6 +66,8 @@
       .line {
         opacity: 0.06;
       }
+      
+    }
     .fold-btn {
       &:hover {
         .cts,
@@ -70,4 +76,7 @@
         }
       }
     }
+  }
 }
+
+

src/stores/modules/side-bar/index.ts

@@ -15,6 +15,7 @@ interface sidebarState {
   currentMenuList: any[];
   unreadInfo: number[];
   menuCollapse: boolean;
+  hasMenuList: boolean;
 }
 
 let unreadInfoTimer: number | null = null;
@@ -25,11 +26,12 @@ export const useSidebarStore = defineStore('sidebar', {
     currentMenuList: [], // 菜单信息 
     unreadInfo: [], // 未读消息
     menuCollapse: false, // 菜单是否折叠
+    hasMenuList: true, // 是否有菜单
   }),
   getters: {
     showSider(): boolean {
       const route = router.currentRoute.value;
-      return !route.meta?.hideSidebar && this.currentMenuList.length > 0;
+      return !route.meta?.hideSidebar && this.hasMenuList;
     },
     sidebarWidth(): number {
       if (!this.showSider) return 0;
@@ -49,8 +51,9 @@ export const useSidebarStore = defineStore('sidebar', {
     clearMenuCollapse() {
       this.menuCollapse = false;
     },
-    setCurrentMenuList(val: any[]) {
-      this.currentMenuList = val;
+    setCurrentMenuList(newMenuList: any[]) {
+      this.currentMenuList = newMenuList;
+      this.hasMenuList = newMenuList.length > 0;
     },
     // navbar菜单列表由企业对应权限决定
     // getUserNavbarMenuList() {