feat: 菜单隐藏、禁用

src/lang/modules/enUS.ts

@@ -66,6 +66,8 @@ export default {
     ["close-right-side"]: "close right side",
     ["close-other"]: "close other",
     ["close-all"]: "close all",
+    ["disable-menu"]: "disable-menu",
+    ["disable-menu-1"]: "disable-menu-1",
     ["internationalization"]: "internationalization",
     ["switch-to-night-mode"]: "switch to night mode",
     ["switch-to-daytime-mode"]: "switch to daytime mode",

src/lang/modules/zhCN.ts

@@ -66,6 +66,10 @@ export default {
     ["close-right-side"]: "关闭右侧",
     ["close-other"]: "关闭其它",
     ["close-all"]: "关闭全部",
+    ["disable-menu"]: "停用菜单",
+    ["disable-menu-1"]: "停用菜单-1",
+    ["hide-menu"]: "隐藏菜单",
+    ["hide-menu-1"]: "隐藏菜单-1",
     ["internationalization"]: "国际化",
     ["switch-to-night-mode"]: "切换黑夜模式",
     ["switch-to-daytime-mode"]: "切换白天模式",

src/layout/components/Menu/menu-item.vue

@@ -1,13 +1,13 @@
 <template>
   <template v-for="item in props.routeTree" :key="item.name">
-    <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.name">
+    <a-sub-menu v-if="menuShow(item)" :key="item.name">
       <template #icon v-if="item.meta.svgIcon || item.meta.icon">
         <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
       </template>
       <template #title>{{ $t(`language.${item.meta.title}`) }}</template>
       <MenuItem :route-tree="item.children" />
     </a-sub-menu>
-    <a-menu-item v-else :key="item?.name">
+    <a-menu-item v-else-if="aMenuShow(item)" :key="item?.name">
       <template #icon v-if="item.meta.svgIcon || item.meta.icon">
         <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
       </template>
@@ -29,6 +29,17 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   routeTree: () => []
 });
+
+// 父级菜单
+const menuShow = (item: Menu.MenuOptions) => {
+  if (item.children && item.children?.length > 0 && !item.meta.hide) return true;
+  return false;
+};
+// 单级菜单
+const aMenuShow = (item: Menu.MenuOptions) => {
+  if (!item.meta.hide) return true;
+  return false;
+};
 </script>
 
 <style lang="scss" scoped></style>

src/router/route-output.ts

@@ -58,14 +58,19 @@ export function linearArray(tree: any) {
 
 /**
  * 过滤路由树，返回有权限的树
+ * 1、先过滤停用的菜单，该菜单是不可访问的，直接去掉
+ * 2、根据角色权限过滤原始路由树
  * @param {array} tree 根据角色权限过滤原始路由树
  * @returns 返回有权限的树
  */
 export const filterByRole = (tree: any) => {
   return tree.filter((item: any) => {
-    if (item.meta && item.meta.roles) {
+    // 过滤角色权限
+    if (item?.meta?.roles) {
       if (!roleBase(item.meta.roles)) return false;
     }
+    // 过滤是否禁用
+    if (item?.meta?.disable) return false;
     if (item.children) item.children = filterByRole(item.children);
     return true;
   });

src/router/route.ts

@@ -6,7 +6,8 @@ import { testMultilevelMenu } from "@/mock/testRoute";
  * 路由meta对象参数，我们通常将属性放到meta对象中
  * meta: {
  * title:       菜单栏以及 tabsView 栏、菜单搜索名称（国际化）
- * hide:        是否隐藏此路由
+ * hide:        是否隐藏此路由，不会显示在菜单树，可以访问
+ * disable:     是否停用，不会显示在菜单树，且不可访问
  * keepAlive:   是否缓存组件状态
  * affix:       是否固定在 tabsView 栏上
  * link:        是否是超链接菜单，开启外链条件：1、 link：链接地址不为空  2、iframe: false
@@ -42,6 +43,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "home", // 国际化
           hide: false, // 是否隐藏此路由
+          disable: false, // 是否停用此路由
           keepAlive: false, // 缓存组件状态
           affix: true, // 固定在tagesView栏上
           link: "", // 是否外链
@@ -58,6 +60,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "file-management",
           hide: false,
+          disable: false,
           keepAlive: true,
           affix: false,
           link: "",
@@ -74,6 +77,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "document-library",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -93,6 +97,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "table-management",
           hide: false,
+          disable: false,
           keepAlive: true,
           affix: false,
           link: "",
@@ -109,6 +114,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "common-table",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -125,6 +131,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "custom-table",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -143,6 +150,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "form-management",
           hide: false,
+          disable: false,
           keepAlive: true,
           affix: false,
           link: "",
@@ -159,6 +167,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "common-form",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -175,6 +184,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "step-form",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -193,6 +203,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "multilevel-menu",
           hide: false,
+          disable: false,
           keepAlive: true,
           affix: false,
           link: "",
@@ -209,6 +220,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "second-menu-1",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -225,6 +237,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "second-menu-2",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -241,6 +254,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                 meta: {
                   title: "third-menu-1",
                   hide: false,
+                  disable: false,
                   keepAlive: true,
                   affix: false,
                   link: "",
@@ -257,6 +271,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                 meta: {
                   title: "third-menu-2",
                   hide: false,
+                  disable: false,
                   keepAlive: true,
                   affix: false,
                   link: "",
@@ -278,6 +293,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "common-component",
           hide: false,
+          disable: false,
           keepAlive: true,
           affix: false,
           link: "",
@@ -294,6 +310,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "player",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -311,6 +328,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "print",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -328,6 +346,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "draggable",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -345,6 +364,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "editor",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -362,6 +382,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "newbie",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -379,6 +400,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "usre-center",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -398,6 +420,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "custom-instruction",
           hide: false,
+          disable: false,
           keepAlive: true,
           affix: false,
           link: "",
@@ -414,6 +437,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "anti-shake",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -431,6 +455,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "throttle",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -448,6 +473,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "test-instruction",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -467,6 +493,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "personal-center",
           hide: false,
+          disable: false,
           keepAlive: true,
           affix: false,
           link: "",
@@ -483,6 +510,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "userinfo",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -500,6 +528,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "user-settings",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -519,6 +548,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "system-management",
           hide: false,
+          disable: false,
           keepAlive: true,
           affix: false,
           link: "",
@@ -535,6 +565,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "account-management",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -552,6 +583,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "role-management",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -569,6 +601,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "menu-management",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -586,6 +619,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "division-management",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -603,6 +637,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "dictionary-management",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -620,6 +655,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "system-log",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -639,6 +675,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "external-links",
           hide: false,
+          disable: false,
           keepAlive: true,
           affix: false,
           link: "",
@@ -655,6 +692,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "inline-page",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -672,6 +710,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                   title: "uigradients",
                   hide: false,
                   keepAlive: true,
+                  disable: false,
                   affix: false,
                   link: "https://uigradients.com/#HoneyDew", // 链接
                   iframe: true, // 区分是否内链 true内链 false外链
@@ -688,6 +727,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                 meta: {
                   title: "color-taking-tool",
                   hide: false,
+                  disable: false,
                   keepAlive: true,
                   affix: false,
                   link: "https://photokit.com/colors/eyedropper/?lang=zh", // 链接
@@ -705,6 +745,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                 meta: {
                   title: "grid-generator",
                   hide: false,
+                  disable: false,
                   keepAlive: true,
                   affix: false,
                   link: "https://cssgrid-generator.netlify.app/", // 链接
@@ -724,6 +765,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             meta: {
               title: "external-page",
               hide: false,
+              disable: false,
               keepAlive: true,
               affix: false,
               link: "",
@@ -740,6 +782,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                 meta: {
                   title: "link-SnowAdmin-Docs",
                   hide: false,
+                  disable: false,
                   keepAlive: true,
                   affix: false,
                   link: "http://101.126.93.137:81/", // 链接
@@ -757,6 +800,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                 meta: {
                   title: "link-vue",
                   hide: false,
+                  disable: false,
                   keepAlive: true,
                   affix: false,
                   link: "https://cn.vuejs.org/", // 链接
@@ -774,6 +818,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                 meta: {
                   title: "link-vite",
                   hide: false,
+                  disable: false,
                   keepAlive: true,
                   affix: false,
                   link: "https://www.vitejs.net/", // 链接
@@ -791,6 +836,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                 meta: {
                   title: "link-gitee",
                   hide: false,
+                  disable: false,
                   keepAlive: true,
                   affix: false,
                   link: "https://gitee.com/wang_fan_w/SnowAdmin", // 链接
@@ -808,6 +854,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                 meta: {
                   title: "link-juejin",
                   hide: false,
+                  disable: false,
                   keepAlive: true,
                   affix: false,
                   link: "https://juejin.cn/user/1728883023940600", // 链接
@@ -822,6 +869,78 @@ export const dynamicRoutes: RouteRecordRaw[] = [
           }
         ]
       },
+      {
+        path: "/disable-menu",
+        name: "disable-menu",
+        redirect: "/disable-menu/disable-menu-1",
+        meta: {
+          title: "disable-menu",
+          hide: false,
+          disable: true,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "switch",
+          sort: 5
+        },
+        children: [
+          {
+            path: "/disable-menu/disable-menu-1",
+            name: "disable-menu-1",
+            component: () => import("@/views/disable-menu/disable-menu-1/disable-menu-1.vue"),
+            meta: {
+              title: "disable-menu-1",
+              hide: false,
+              disable: true,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          }
+        ]
+      },
+      {
+        path: "/hide-menu",
+        name: "hide-menu",
+        redirect: "/hide-menu/hide-menu-1",
+        meta: {
+          title: "hide-menu",
+          hide: true,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "switch",
+          sort: 5
+        },
+        children: [
+          {
+            path: "/hide-menu/hide-menu-1",
+            name: "hide-menu-1",
+            component: () => import("@/views/hide-menu/hide-menu-1/hide-menu-1.vue"),
+            meta: {
+              title: "hide-menu-1",
+              hide: true,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          }
+        ]
+      },
       {
         path: "/internationalization",
         name: "internationalization",
@@ -829,6 +948,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "internationalization",
           hide: false,
+          disable: false,
           keepAlive: true,
           affix: false,
           link: "",
@@ -845,6 +965,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: {
           title: "about-project",
           hide: false,
+          disable: false,
           keepAlive: true,
           affix: false,
           link: "",
@@ -880,7 +1001,10 @@ export const staticRoutes = [
 ];
 
 /**
- * 定义404、401界面
+ * 定义401、404、500界面
+ * 401无权限
+ * 404页面不存在
+ * 500网络断开
  * @link 参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html#netlify
  */
 export const notFoundAndNoPower = [

src/views/disable-menu/disable-menu-1/disable-menu-1.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="dc-page">停用菜单</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>

src/views/hide-menu/hide-menu-1/hide-menu-1.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="dc-page">隐藏菜单</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>