feat: 集成菜单栏伸缩功能

src/components/AppIcons/index.js

@@ -14,5 +14,7 @@ export { default as IconExpand } from '~icons/mdi/arrow-expand-horizontal'
 export { default as IconExpandLeft } from '~icons/mdi/arrow-expand-left'
 export { default as IconExpandRight } from '~icons/mdi/arrow-expand-right'
 export { default as IconMenuTable } from '~icons/mdi/table'
+export { default as IconMenuCollapse } from '~icons/mdi/format-indent-decrease'
+export { default as IconMenuExpand } from '~icons/mdi/format-indent-increase'
 
 export { default as IconLogo } from './IconLogo.vue'

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>

src/layout/components/sidebar/SideLogo.vue

@@ -1,31 +1,33 @@
 <template>
-  <div class="logo">
+  <router-link to="/" class="logo">
     <n-icon size="36" color="#316c72">
       <IconLogo />
     </n-icon>
-    <router-link to="/">
-      <n-gradient-text type="primary">{{ title }}</n-gradient-text>
-    </router-link>
-  </div>
+    <n-gradient-text v-show="!appStore.collapsed" type="primary">{{ title }}</n-gradient-text>
+  </router-link>
 </template>
 
 <script setup>
 import { IconLogo } from '@/components/AppIcons'
+import { useAppStore } from '@/store/modules/app'
 const title = import.meta.env.VITE_APP_TITLE
+
+const appStore = useAppStore()
 </script>
 
 <style lang="scss" scoped>
 .logo {
-  height: 64px;
+  padding: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
-  a {
-    margin-left: 5px;
-    .n-gradient-text {
-      font-size: 14px;
-      font-weight: bold;
-    }
+  .n-gradient-text {
+    margin-left: 15px;
+    font-size: 16px;
+    font-weight: bold;
+    max-width: 140px;
+    flex-shrink: 0;
+    white-space: normal;
   }
 }
 </style>

src/layout/index.vue

@@ -1,6 +1,13 @@
 <template>
   <n-layout has-sider style="height: 100%">
-    <n-layout-sider bordered :width="200" :collapsed-width="0" :native-scrollbar="false">
+    <n-layout-sider
+      bordered
+      collapse-mode="width"
+      :collapsed-width="64"
+      :width="220"
+      :native-scrollbar="false"
+      :collapsed="appStore.collapsed"
+    >
       <SideBar />
     </n-layout-sider>
     <n-layout>
@@ -27,8 +34,10 @@ import SideBar from './components/sidebar/index.vue'
 import AppMain from './components/AppMain.vue'
 import AppTags from './components/tags/index.vue'
 import { useThemeStore } from '@/store/modules/theme'
+import { useAppStore } from '@/store/modules/app'
 
 const useTheme = useThemeStore()
+const appStore = useAppStore()
 </script>
 
 <style lang="scss" scoped>

src/store/modules/app.js

@@ -5,6 +5,7 @@ export const useAppStore = defineStore('app', {
   state() {
     return {
       reloadFlag: true,
+      collapsed: false,
     }
   },
   actions: {
@@ -19,5 +20,11 @@ export const useAppStore = defineStore('app', {
         $loadingBar.finish()
       }, 100)
     },
+    switchCollapsed() {
+      this.collapsed = !this.collapsed
+    },
+    setCollapsed(collapsed) {
+      this.collapsed = collapsed
+    },
   },
 })