From 7da21e3d6ae6a8939486aa3d9f88e4447af317ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <i@haozi.net>
Date: Fri, 29 Nov 2024 01:28:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8F=9C=E5=8D=95=E4=BC=98=E5=8C=961?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/layout/IndexView.vue                  | 14 +++++--
 web/src/layout/header/IndexView.vue           |  4 +-
 .../layout/header/components/MenuCollapse.vue |  2 +-
 web/src/layout/sidebar/IndexView.vue          |  8 +++-
 .../layout/sidebar/components/SideSetting.vue | 39 +++++++++++++++++++
 5 files changed, 58 insertions(+), 9 deletions(-)
 create mode 100644 web/src/layout/sidebar/components/SideSetting.vue

diff --git a/web/src/layout/IndexView.vue b/web/src/layout/IndexView.vue
index 08252109..4ed0945a 100644
--- a/web/src/layout/IndexView.vue
+++ b/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>
diff --git a/web/src/layout/header/IndexView.vue b/web/src/layout/header/IndexView.vue
index 483bc439..9bf7cdfd 100644
--- a/web/src/layout/header/IndexView.vue
+++ b/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>
diff --git a/web/src/layout/header/components/MenuCollapse.vue b/web/src/layout/header/components/MenuCollapse.vue
index f81ebe0a..dd662f6b 100644
--- a/web/src/layout/header/components/MenuCollapse.vue
+++ b/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>
diff --git a/web/src/layout/sidebar/IndexView.vue b/web/src/layout/sidebar/IndexView.vue
index 30a2a442..0988f3de 100644
--- a/web/src/layout/sidebar/IndexView.vue
+++ b/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>
diff --git a/web/src/layout/sidebar/components/SideSetting.vue b/web/src/layout/sidebar/components/SideSetting.vue
new file mode 100644
index 00000000..061a8cf6
--- /dev/null
+++ b/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>