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
+        <Menu class={`siderBar-wrap w-full flex flex-col px-16px pt-16px ${collapsed.value ? 'menu-fold' : ''}`}>
-          class={`siderBar-wrap p-16px w-full h-full flex flex-col ${sidebarStore.menuCollapse ? '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 && (
+                {!collapsed.value && <span class="cts label">开始工作</span>}
-                  <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
-                class="flex fold-btn items-center cursor-pointer"
-                onClick={() => {
-                  sidebarStore.setMenuCollapse();
-                }}
-              >
-                {sidebarStore.menuCollapse ? (
-                  <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>}
-              </div>
-            </div>
           </div>
         </Menu>
+        <div
+          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();
+            }}
+          >
+            {collapsed.value ? (
+              <icon-menu-unfold size={16} class="color-#55585F icon mr-4px" />
+            ) : (
+              <icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
+            )}
+            {!collapsed.value && <span class="cts !color-#55585F flex-shrink-0">收起</span>}
+          </div>
+        </div>
       </Layout.Sider>
     );
   },

src/layouts/components/siderBar/style.scss

@@ -44,30 +44,39 @@
     background-color: transparent;
   }
 }
-.siderBar-wrap {
+.ant-layout-sider {
-  background: transparent !important;
+  .ant-layout-sider-children {
-  border: none !important;
+    position: relative;
-  color: inherit;
+    // padding: 16px 0;
-  .cts {
+    .siderBar-wrap {
-    color: #211f24;
+      background: transparent !important;
-    font-family: $font-family-regular;
+      border: none !important;
-    font-size: 14px;
+      color: inherit;
-    font-style: normal;
+      .cts {
-    font-weight: 400;
+        color: #211f24;
-    line-height: 22px;
+        font-family: $font-family-regular;
-  }
+        font-size: 14px;
-  .menu-item {
+        font-style: normal;
-    @include menu-item;
+        font-weight: 400;
-  }
+        line-height: 22px;
-  .line {
+      }
-    opacity: 0.06;
+      .menu-item {
-  }
+        @include menu-item;
-  .fold-btn {
+      }
-    &:hover {
+      .line {
-      .cts,
+        opacity: 0.06;
-      .icon {
+      }
-        color: #6d4cfe !important;
+      
+    }
+    .fold-btn {
+      &:hover {
+        .cts,
+        .icon {
+          color: #6d4cfe !important;
+        }
       }
     }
   }
 }
+
+

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[]) {
+    setCurrentMenuList(newMenuList: any[]) {
-      this.currentMenuList = val;
+      this.currentMenuList = newMenuList;
+      this.hasMenuList = newMenuList.length > 0;
     },
     // navbar菜单列表由企业对应权限决定
     // getUserNavbarMenuList() {