From 7c75508b2581b88942c92d3fb3032f0cff73a25c 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 02:30:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8F=9C=E5=8D=95=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/sidebar/components/SideMenu.vue    | 17 ++----
 .../layout/sidebar/components/SideSetting.vue | 58 ++++++++++++++++++-
 web/src/store/modules/permission/index.ts     | 15 ++++-
 web/src/views/file/UploadModal.vue            |  4 +-
 4 files changed, 76 insertions(+), 18 deletions(-)

diff --git a/web/src/layout/sidebar/components/SideMenu.vue b/web/src/layout/sidebar/components/SideMenu.vue
index 0fb7be9f..8d2a7f37 100644
--- a/web/src/layout/sidebar/components/SideMenu.vue
+++ b/web/src/layout/sidebar/components/SideMenu.vue
@@ -20,7 +20,7 @@ watch(currentRoute, async () => {
 })
 
 const menuOptions = computed(() => {
-  return permissionStore.menus.map((item) => getMenuItem(item)).sort((a, b) => a.order - b.order)
+  return permissionStore.menus.map((item) => getMenuItem(item))
 })
 
 function resolvePath(basePath: string, path: string) {
@@ -35,7 +35,6 @@ type MenuItem = MenuOption & {
   label: string
   key: string
   path: string
-  order: number
   children?: Array<MenuItem>
 }
 
@@ -44,8 +43,7 @@ function getMenuItem(route: RouteType, basePath = ''): MenuItem {
     label: t(route.meta?.title || route.name),
     key: route.name,
     path: resolvePath(basePath, route.path),
-    icon: getIcon(route.meta),
-    order: route.meta?.order || 0
+    icon: getIcon(route.meta)
   }
 
   const visibleChildren = route.children
@@ -61,8 +59,7 @@ function getMenuItem(route: RouteType, basePath = ''): MenuItem {
       label: t(singleRoute.meta?.title || singleRoute.name),
       key: singleRoute.name,
       path: resolvePath(menuItem.path, singleRoute.path),
-      icon: getIcon(singleRoute.meta),
-      order: menuItem.order
+      icon: getIcon(singleRoute.meta)
     }
     const visibleItems = singleRoute.children
       ? singleRoute.children.filter((item: RouteType) => item.name && !item.isHidden)
@@ -70,13 +67,9 @@ function getMenuItem(route: RouteType, basePath = ''): MenuItem {
 
     if (visibleItems.length === 1) menuItem = getMenuItem(visibleItems[0], menuItem.path)
     else if (visibleItems.length > 1)
-      menuItem.children = visibleItems
-        .map((item) => getMenuItem(item, menuItem.path))
-        .sort((a, b) => a.order - b.order)
+      menuItem.children = visibleItems.map((item) => getMenuItem(item, menuItem.path))
   } else {
-    menuItem.children = visibleChildren
-      .map((item) => getMenuItem(item, menuItem.path))
-      .sort((a, b) => a.order - b.order)
+    menuItem.children = visibleChildren.map((item) => getMenuItem(item, menuItem.path))
   }
 
   return menuItem
diff --git a/web/src/layout/sidebar/components/SideSetting.vue b/web/src/layout/sidebar/components/SideSetting.vue
index 061a8cf6..492f58fc 100644
--- a/web/src/layout/sidebar/components/SideSetting.vue
+++ b/web/src/layout/sidebar/components/SideSetting.vue
@@ -1,11 +1,51 @@
 <script lang="ts" setup>
+import type { TreeSelectOption } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
 import TheIcon from '@/components/custom/TheIcon.vue'
 import MenuCollapse from '@/layout/header/components/MenuCollapse.vue'
-import { useThemeStore } from '@/store'
+import { usePermissionStore, useThemeStore } from '@/store'
+import type { RouteType } from '~/types/router'
 
+const { t } = useI18n()
 const themeStore = useThemeStore()
+const permissionStore = usePermissionStore()
 
 const settingModal = ref(false)
+
+const getOption = (route: RouteType): TreeSelectOption => {
+  let menuItem: TreeSelectOption = {
+    label: t(route.meta?.title || route.name),
+    key: route.name
+  }
+
+  const visibleChildren = route.children
+    ? route.children.filter((item: RouteType) => item.name && !item.isHidden)
+    : []
+
+  if (!visibleChildren.length) return menuItem
+
+  if (visibleChildren.length === 1) {
+    // 单个子路由处理
+    const singleRoute = visibleChildren[0]
+    menuItem.label = t(singleRoute.meta?.title || singleRoute.name)
+    const visibleItems = singleRoute.children
+      ? singleRoute.children.filter((item: RouteType) => item.name && !item.isHidden)
+      : []
+
+    if (visibleItems.length === 1) menuItem = getOption(visibleItems[0])
+    else if (visibleItems.length > 1)
+      menuItem.children = visibleItems.map((item) => getOption(item))
+  } else {
+    menuItem.children = visibleChildren.map((item) => getOption(item))
+  }
+
+  return menuItem
+}
+
+const menus = computed<TreeSelectOption[]>(() => {
+  return permissionStore.allMenus.map((item) => getOption(item))
+})
 </script>
 
 <template>
@@ -33,7 +73,21 @@ const settingModal = ref(false)
       @close="settingModal = false"
       @mask-click="settingModal = false"
     >
-      <n-form> </n-form>
+      <n-form>
+        <n-flex vertical>
+          <n-alert type="info"> 设置保存在浏览器，清空浏览器缓存后将会重置 </n-alert>
+          <n-form-item label="隐藏菜单">
+            <n-tree-select
+              multiple
+              cascade
+              checkable
+              clearable
+              :options="menus"
+              v-model:value="permissionStore.hiddenRoutes"
+            ></n-tree-select>
+          </n-form-item>
+        </n-flex>
+      </n-form>
     </n-modal>
   </div>
 </template>
diff --git a/web/src/store/modules/permission/index.ts b/web/src/store/modules/permission/index.ts
index 33ee0806..bd67771a 100644
--- a/web/src/store/modules/permission/index.ts
+++ b/web/src/store/modules/permission/index.ts
@@ -5,7 +5,8 @@ import { filterAsyncRoutes } from './helpers'
 export const usePermissionStore = defineStore('permission', {
   state() {
     return {
-      accessRoutes: <RoutesType>[]
+      accessRoutes: <RoutesType>[],
+      hiddenRoutes: <string[]>[]
     }
   },
   getters: {
@@ -13,7 +14,14 @@ export const usePermissionStore = defineStore('permission', {
       return basicRoutes.concat(this.accessRoutes)
     },
     menus(): RoutesType {
-      return this.routes.filter((route) => route.name && !route.isHidden)
+      return this.routes
+        .filter((route) => route.name && !route.isHidden && !this.hiddenRoutes.includes(route.name))
+        .sort((a, b) => (a.meta?.order || 0) - (b.meta?.order || 0))
+    },
+    allMenus(): RoutesType {
+      return this.routes
+        .filter((route) => route.name && !route.isHidden)
+        .sort((a, b) => (a.meta?.order || 0) - (b.meta?.order || 0))
     }
   },
   actions: {
@@ -25,5 +33,8 @@ export const usePermissionStore = defineStore('permission', {
     resetPermission() {
       this.$reset()
     }
+  },
+  persist: {
+    pick: ['hiddenRoutes']
   }
 })
diff --git a/web/src/views/file/UploadModal.vue b/web/src/views/file/UploadModal.vue
index f88c756b..df8f618e 100644
--- a/web/src/views/file/UploadModal.vue
+++ b/web/src/views/file/UploadModal.vue
@@ -37,8 +37,8 @@ const uploadRequest = ({ file, onFinish, onError, onProgress }: UploadCustomRequ
       <n-alert type="info">若上传报网络错误，请开启面板 HTTPS 后重试</n-alert>
       <n-upload
         ref="upload"
-        
-         multiple directory-dnd 
+        multiple
+        directory-dnd
         action="/api/panel/file/upload"
         :custom-request="uploadRequest"
       >