feat: 菜单优化1

web/src/layout/IndexView.vue

@@ -19,7 +19,7 @@ const themeStore = useThemeStore()
       bordered
       collapse-mode="width"
     >
-      <SideBar />
+      <side-bar />
     </n-layout-sider>
     <n-drawer
       v-else
@@ -30,7 +30,7 @@ const themeStore = useThemeStore()
       placement="left"
       @mask-click="themeStore.setCollapsed(true)"
     >
-      <SideBar />
+      <side-bar />
     </n-drawer>
 
     <article flex-col flex-1 overflow-hidden>
@@ -44,11 +44,17 @@ const themeStore = useThemeStore()
         px-15
         bc-eee
       >
-        <AppHeader />
+        <app-header />
       </header>
       <section bg="#f5f6fb" flex-1 overflow-hidden dark:bg-hex-101014>
-        <AppMain />
+        <app-main />
       </section>
     </article>
   </n-layout>
 </template>
+
+<style scoped lang="scss">
+:deep(.n-scrollbar-content) {
+  height: 100%;
+}
+</style>

web/src/layout/header/IndexView.vue

@@ -14,8 +14,8 @@ const themeStore = useThemeStore()
 
 <template>
   <div w-full flex items-center justify-between>
-    <MenuCollapse />
-    <section v-if="!themeStore.isMobile && themeStore.tab.visible" w-0 flex-1 px-12>
+    <MenuCollapse v-if="themeStore.isMobile" />
+    <section v-if="!themeStore.isMobile && themeStore.tab.visible" w-0 flex-1 pr-12>
       <AppTab />
     </section>
     <span v-if="!themeStore.isMobile && themeStore.tab.visible" mx-6 opacity-20>|</span>

web/src/layout/header/components/MenuCollapse.vue

@@ -7,7 +7,7 @@ const themeStore = useThemeStore()
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-icon cursor-pointer size="20" @click="themeStore.toggleCollapsed()">
+      <n-icon cursor-pointer size="22" @click="themeStore.toggleCollapsed()">
         <icon-mdi:format-indent-increase v-if="themeStore.sider.collapsed" />
         <icon-mdi:format-indent-decrease v-else />
       </n-icon>

web/src/layout/sidebar/IndexView.vue

@@ -1,9 +1,13 @@
 <script lang="ts" setup>
+import SideSetting from '@/layout/sidebar/components/SideSetting.vue'
 import SideLogo from './components/SideLogo.vue'
 import SideMenu from './components/SideMenu.vue'
 </script>
 
 <template>
-  <SideLogo />
-  <SideMenu />
+  <div h-full flex flex-col>
+    <side-logo />
+    <side-menu />
+    <side-setting mt-auto />
+  </div>
 </template>

web/src/layout/sidebar/components/SideSetting.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import TheIcon from '@/components/custom/TheIcon.vue'
+import MenuCollapse from '@/layout/header/components/MenuCollapse.vue'
+import { useThemeStore } from '@/store'
+
+const themeStore = useThemeStore()
+
+const settingModal = ref(false)
+</script>
+
+<template>
+  <div h-40 flex justify-between px-20>
+    <menu-collapse />
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <the-icon
+          v-show="!themeStore.sider.collapsed"
+          :size="22"
+          icon="material-symbols:settings"
+          @click="settingModal = true"
+        />
+      </template>
+      菜单设置
+    </n-tooltip>
+    <n-modal
+      v-model:show="settingModal"
+      preset="card"
+      title="菜单设置"
+      style="width: 60vw"
+      size="huge"
+      :bordered="false"
+      :segmented="false"
+      @close="settingModal = false"
+      @mask-click="settingModal = false"
+    >
+      <n-form> </n-form>
+    </n-modal>
+  </div>
+</template>