feat: 菜单隐藏

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

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>

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']
   }
 })

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"
       >