feat: 集成菜单栏伸缩功能

src/layout/components/header/index.vue

@@ -1,21 +1,36 @@
 <template>
   <header class="header">
-    <BreadCrumb />
+    <div class="h-left">
+      <n-icon size="20" style="cursor: pointer" @click="appStore.switchCollapsed">
+        <IconMenuExpand v-if="appStore.collapsed" />
+        <IconMenuCollapse v-else />
+      </n-icon>
+      <BreadCrumb ml-15 />
+    </div>
+
     <HeaderAction />
   </header>
 </template>
 
 <script setup>
+import { useAppStore } from '@/store/modules/app'
 import BreadCrumb from './BreadCrumb.vue'
 import HeaderAction from './HeaderAction.vue'
+import { IconMenuCollapse, IconMenuExpand } from '@/components/AppIcons'
+
+const appStore = useAppStore()
 </script>
 
 <style lang="scss" scoped>
 .header {
-  padding: 0 24px;
+  padding: 0 15px;
   height: 100%;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
+  .h-left {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>