Refactor menu generation strategy to support sub-menu items. (#5177)

#### What type of PR is this?

/area console
/kind feature
/milestone 2.12.x

#### What this PR does / why we need it:

重构 Console 和 UC 的菜单生成逻辑，支持配置二级菜单项。

<img width="557" alt="图片" src="https://github.com/halo-dev/halo/assets/21301288/0f1717ce-bd30-448b-9625-24bfd5e1c5ae">

配置方式：

```ts
export default definePlugin({
  components: {},
  routes: [
    {
      parentName: "AttachmentsRoot",
      route: {
        name: "S3Link",
        path: "s3-link",
        component: markRaw(HomeView),
        meta: {
          title: "S3 关联",
          searchable: true,
          menu: {
            name: "S3 关联",
            icon: markRaw(IconAddCircle),
            priority: 0,
            mobile: true,
          },
        },
      },
    },
  ],
});
```

只需要指定 parentName 并在其下 route 需要配置 meta.menu 即可。

最终文档会补充在：https://github.com/halo-dev/docs/pull/291

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/4807

#### Special notes for your reviewer:

1. 可以按照上述配置方式测试。
2. 可以安装 [plugin-s3-1.5.0-SNAPSHOT.jar.zip](https://github.com/halo-dev/halo/files/13959977/plugin-s3-1.5.0-SNAPSHOT.jar.zip) 进行测试。

#### Does this PR introduce a user-facing change?

```release-note
重构 Console 和 UC 的菜单生成逻辑，支持配置二级菜单项。
```

console/console-src/modules/contents/attachments/module.ts

@@ -12,12 +12,8 @@ export default definePlugin({
   routes: [
     {
       path: "/attachments",
+      name: "AttachmentsRoot",
       component: BasicLayout,
-      children: [
-        {
-          path: "",
-          name: "Attachments",
-          component: AttachmentList,
       meta: {
         title: "core.attachment.title",
         permissions: ["system:attachments:view"],
@@ -29,6 +25,11 @@ export default definePlugin({
           mobile: true,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "Attachments",
+          component: AttachmentList,
         },
       ],
     },

console/console-src/modules/contents/comments/module.ts

@@ -12,12 +12,8 @@ export default definePlugin({
   routes: [
     {
       path: "/comments",
+      name: "CommentsRoot",
       component: BasicLayout,
-      children: [
-        {
-          path: "",
-          name: "Comments",
-          component: CommentList,
       meta: {
         title: "core.comment.title",
         searchable: true,
@@ -30,6 +26,11 @@ export default definePlugin({
           mobile: true,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "Comments",
+          component: CommentList,
         },
       ],
     },

console/console-src/modules/contents/pages/module.ts

@@ -14,12 +14,8 @@ export default definePlugin({
   routes: [
     {
       path: "/single-pages",
+      name: "SinglePagesRoot",
       component: BasicLayout,
-      children: [
-        {
-          path: "",
-          name: "SinglePages",
-          component: SinglePageList,
       meta: {
         title: "core.page.title",
         searchable: true,
@@ -31,6 +27,11 @@ export default definePlugin({
           priority: 1,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "SinglePages",
+          component: SinglePageList,
         },
         {
           path: "deleted",

console/console-src/modules/contents/posts/module.ts

@@ -19,12 +19,8 @@ export default definePlugin({
   routes: [
     {
       path: "/posts",
+      name: "PostsRoot",
       component: BasicLayout,
-      children: [
-        {
-          path: "",
-          name: "Posts",
-          component: PostList,
       meta: {
         title: "core.post.title",
         searchable: true,
@@ -37,6 +33,11 @@ export default definePlugin({
           mobile: true,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "Posts",
+          component: PostList,
         },
         {
           path: "deleted",

console/console-src/modules/interface/menus/module.ts

@@ -9,12 +9,8 @@ export default definePlugin({
   routes: [
     {
       path: "/menus",
+      name: "MenusRoot",
       component: BasicLayout,
-      children: [
-        {
-          path: "",
-          name: "Menus",
-          component: Menus,
       meta: {
         title: "core.menu.title",
         searchable: true,
@@ -26,6 +22,11 @@ export default definePlugin({
           priority: 1,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "Menus",
+          component: Menus,
         },
       ],
     },

console/console-src/modules/interface/themes/module.ts

@@ -10,12 +10,8 @@ export default definePlugin({
   routes: [
     {
       path: "/theme",
+      name: "ThemeRoot",
       component: ThemeLayout,
-      children: [
-        {
-          path: "",
-          name: "ThemeDetail",
-          component: ThemeDetail,
       meta: {
         title: "core.theme.title",
         searchable: true,
@@ -27,6 +23,11 @@ export default definePlugin({
           priority: 0,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "ThemeDetail",
+          component: ThemeDetail,
         },
         {
           path: "settings/:group",

console/console-src/modules/system/actuator/module.ts

@@ -9,11 +9,8 @@ export default definePlugin({
   routes: [
     {
       path: "/actuator",
+      name: "OverviewRoot", // fixme: actuator will be renamed to overview in the future
       component: BasicLayout,
-      children: [
-        {
-          path: "",
-          component: Actuator,
       meta: {
         title: "core.actuator.title",
         searchable: true,
@@ -25,6 +22,11 @@ export default definePlugin({
           priority: 3,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "Actuator",
+          component: Actuator,
         },
       ],
     },

console/console-src/modules/system/backup/module.ts

@@ -9,12 +9,8 @@ export default definePlugin({
   routes: [
     {
       path: "/backup",
+      name: "BackupRoot",
       component: BasicLayout,
-      children: [
-        {
-          path: "",
-          name: "Backup",
-          component: Backups,
       meta: {
         title: "core.backup.title",
         searchable: true,
@@ -26,6 +22,11 @@ export default definePlugin({
           priority: 4,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "Backup",
+          component: Backups,
         },
       ],
     },

console/console-src/modules/system/plugins/module.ts

@@ -1,6 +1,5 @@
 import { definePlugin } from "@halo-dev/console-shared";
 import BasicLayout from "@console/layouts/BasicLayout.vue";
-import BlankLayout from "@console/layouts/BlankLayout.vue";
 import PluginList from "./PluginList.vue";
 import PluginDetail from "./PluginDetail.vue";
 import { IconPlug } from "@halo-dev/components";
@@ -11,16 +10,8 @@ export default definePlugin({
   routes: [
     {
       path: "/plugins",
-      component: BlankLayout,
+      name: "PluginsRoot",
-      children: [
-        {
-          path: "",
       component: BasicLayout,
-          children: [
-            {
-              path: "",
-              name: "Plugins",
-              component: PluginList,
       meta: {
         title: "core.plugin.title",
         searchable: true,
@@ -32,15 +23,14 @@ export default definePlugin({
           priority: 0,
         },
       },
-            },
-          ],
-        },
-        {
-          path: ":name",
-          component: BasicLayout,
       children: [
         {
           path: "",
+          name: "Plugins",
+          component: PluginList,
+        },
+        {
+          path: ":name",
           name: "PluginDetail",
           component: PluginDetail,
           meta: {
@@ -51,6 +41,4 @@ export default definePlugin({
       ],
     },
   ],
-    },
-  ],
 });

console/console-src/modules/system/settings/module.ts

@@ -9,12 +9,8 @@ export default definePlugin({
   routes: [
     {
       path: "/settings",
+      name: "SettingsRoot",
       component: BasicLayout,
-      children: [
-        {
-          path: "",
-          name: "SystemSetting",
-          component: SystemSettings,
       meta: {
         title: "core.setting.title",
         permissions: ["system:settings:view"],
@@ -25,6 +21,11 @@ export default definePlugin({
           priority: 2,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "SystemSetting",
+          component: SystemSettings,
         },
       ],
     },

console/console-src/modules/system/users/module.ts

@@ -33,12 +33,8 @@ export default definePlugin({
     },
     {
       path: "/users",
+      name: "UsersRoot",
       component: BasicLayout,
-      children: [
-        {
-          path: "",
-          name: "Users",
-          component: UserList,
       meta: {
         title: "core.user.title",
         searchable: true,
@@ -51,6 +47,11 @@ export default definePlugin({
           mobile: true,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "Users",
+          component: UserList,
         },
         {
           path: ":name",

console/console-src/setup/setupModules.ts

@@ -73,7 +73,14 @@ function registerModule(app: App, pluginModule: PluginModule, core: boolean) {
 
     for (const route of pluginModule.routes) {
       if ("parentName" in route) {
-        router.addRoute(route.parentName, route.route);
+        const parentRoute = router
+          .getRoutes()
+          .find((item) => item.name === route.parentName);
+        if (parentRoute) {
+          router.removeRoute(route.parentName);
+          parentRoute.children = [...parentRoute.children, route.route];
+          router.addRoute(parentRoute);
+        }
       } else {
         router.addRoute(route);
       }

console/env.d.ts

@@ -18,8 +18,11 @@ declare module "*.vue" {
 }
 
 declare module "vue-router" {
+  import type { Component } from "vue";
+
   interface RouteMeta {
     title?: string;
+    description?: string;
     searchable?: boolean;
     permissions?: string[];
     core?: boolean;

console/packages/components/src/components/menu/Menu.stories.ts

@@ -6,6 +6,7 @@ import {
   IconFolder,
   IconMessage,
   IconPages,
+  IconAddCircle,
 } from "@/icons/icons";
 
 const meta: Meta<typeof VMenu> = {
@@ -22,6 +23,7 @@ const meta: Meta<typeof VMenu> = {
       IconMessage,
       IconFolder,
       IconPages,
+      IconAddCircle,
     },
     setup() {
       return {
@@ -41,6 +43,11 @@ const meta: Meta<typeof VMenu> = {
             <template #icon>
               <IconBookRead />
             </template>
+            <VMenuItem title="新文章">
+              <template #icon>
+                <IconBookRead />
+              </template>
+            </VMenuItem>
           </VMenuItem>
           <VMenuItem title="页面">
             <template #icon>

console/packages/components/src/components/menu/MenuItem.vue

@@ -36,7 +36,6 @@ const hasSubmenus = computed(() => {
 function handleClick() {
   if (hasSubmenus.value) {
     open.value = !open.value;
-    return;
   }
   emit("select", props.id);
 }
@@ -83,7 +82,8 @@ function handleClick() {
   flex
   select-none
   relative
-  p-2
+  px-2
+  py-[0.4rem]
   font-normal
   rounded-base;
 
@@ -109,17 +109,21 @@ function handleClick() {
   transform: rotate(90deg);
 }
 
-.submenus-show-enter-active {
+.submenus-show-enter-active,
-  transition: all 0.1s ease-out;
-}
-
 .submenus-show-leave-active {
-  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+  transition: all 0.1s ease;
 }
 
 .submenus-show-enter-from,
 .submenus-show-enter-to {
-  transform: translateY(-10px);
   opacity: 0;
 }
+
+.sub-menu-items {
+  @apply pl-5 my-1;
+
+  .menu-item-title {
+    @apply p-1.5 text-sm;
+  }
+}
 </style>

console/packages/components/src/components/menu/__tests__/Menu.spec.tsx

@@ -88,7 +88,7 @@ describe("Menu", () => {
       // has sub menu
       if (item.props().id === "3") {
         item.trigger("click");
-        expect(item.emitted().select).toBeUndefined();
+        expect(item.emitted().select).toBeDefined();
 
         expect(item.vm.open).toBe(false);
 

console/src/components/menu/RoutesMenu.tsx

@@ -31,7 +31,7 @@ const RoutesMenu = defineComponent({
     function renderIcon(icon: Component | undefined) {
       if (!icon) return undefined;
 
-      return <icon height="20px" width="20px" />;
+      return <icon />;
     }
 
     const { t } = useI18n();
@@ -48,6 +48,8 @@ const RoutesMenu = defineComponent({
                 v-slots={{
                   icon: () => renderIcon(item.icon),
                 }}
+                onSelect={handleSelect}
+                active={openIds.value.includes(item.path)}
               >
                 {renderItems(item.children)}
               </VMenuItem>

console/src/composables/use-route-menu-generator.ts

@@ -25,29 +25,67 @@ export function useRouteMenuGenerator(
   const roleStore = useRoleStore();
   const { uiPermissions } = roleStore.permissions;
 
-  const generateMenus = () => {
+  function flattenRoutes(route: RouteRecordNormalized | RouteRecordRaw) {
-    // sort by menu.priority and meta.core
+    let routes: (RouteRecordNormalized | RouteRecordRaw)[] = [route];
-    const currentRoutes = sortBy<RouteRecordNormalized>(
+    if (route.children) {
-      router.getRoutes().filter((route) => {
+      route.children.forEach((child) => {
-        const { meta } = route;
+        routes = routes.concat(flattenRoutes(child));
-        if (!meta?.menu) {
+      });
-          return false;
     }
-        if (meta.permissions) {
+    return routes;
-          return hasPermission(
+  }
-            uiPermissions,
+
-            meta.permissions as string[],
+  function isRouteValid(route?: RouteRecordNormalized) {
-            true
+    if (!route) return false;
+    const { meta } = route;
+    if (!meta?.menu) return false;
+    return (
+      !meta.permissions || hasPermission(uiPermissions, meta.permissions, true)
     );
   }
-        return true;
+
-      }),
+  const generateMenus = () => {
+    // Filter and sort routes based on menu and permissions
+    let currentRoutes = sortBy<RouteRecordNormalized>(
+      router.getRoutes().filter((route) => isRouteValid(route)),
       [
         (route: RouteRecordRaw) => !route.meta?.core,
         (route: RouteRecordRaw) => route.meta?.menu?.priority || 0,
       ]
     );
 
+    // Flatten and filter child routes
+    currentRoutes.forEach((route) => {
+      if (route.children.length) {
+        const routesMap = new Map(
+          currentRoutes.map((route) => [route.name, route])
+        );
+
+        const flattenedAndValidChildren = route.children
+          .flatMap((child) => flattenRoutes(child))
+          .map((flattenedChild) => {
+            const validRoute = routesMap.get(flattenedChild.name);
+            if (validRoute && isRouteValid(validRoute)) {
+              return validRoute;
+            }
+          })
+          .filter(Boolean); // filters out falsy values
+
+        // Sorting the routes
+        // @ts-ignore children must be RouteRecordRaw[], but it is RouteRecordNormalized[]
+        route.children = sortBy(flattenedAndValidChildren, [
+          (route) => !route?.meta?.core,
+          (route) => route?.meta?.menu?.priority || 0,
+        ]);
+      }
+    });
+
+    // Remove duplicate routes
+    const allChildren = currentRoutes.flatMap((route) => route.children);
+    currentRoutes = currentRoutes.filter(
+      (route) => !allChildren.find((child) => child.name === route.name)
+    );
+
     // group by menu.group
     menus.value = currentRoutes.reduce((acc, route) => {
       const { menu } = route.meta;
@@ -55,19 +93,20 @@ export function useRouteMenuGenerator(
         return acc;
       }
       const group = acc.find((item) => item.id === menu.group);
-      const childRoute = route.children[0];
+      const childRoute = route.children;
-      const childMetaMenu = childRoute?.meta?.menu;
+
+      const menuChildren: MenuItemType[] = childRoute
+        .map((child) => {
+          if (!child.meta?.menu) return;
+          return {
+            name: child.meta.menu.name,
+            path: child.path,
+            icon: child.meta.menu.icon,
+            mobile: child.meta.menu.mobile,
+          };
+        })
+        .filter(Boolean) as MenuItemType[];
 
-      // only support one level
-      const menuChildren = childMetaMenu
-        ? [
-            {
-              name: childMetaMenu.name,
-              path: childRoute.path,
-              icon: childMetaMenu.icon,
-            },
-          ]
-        : undefined;
       if (group) {
         group.items?.push({
           name: menu.name,

console/uc-src/modules/contents/posts/module.ts

@@ -9,12 +9,8 @@ export default definePlugin({
   ucRoutes: [
     {
       path: "/posts",
+      name: "PostsRoot",
       component: BasicLayout,
-      children: [
-        {
-          path: "",
-          name: "Posts",
-          component: PostList,
       meta: {
         title: "core.uc_post.title",
         searchable: true,
@@ -27,6 +23,11 @@ export default definePlugin({
           mobile: true,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "Posts",
+          component: PostList,
         },
         {
           path: "editor",

console/uc-src/modules/notifications/module.ts

@@ -8,12 +8,8 @@ export default definePlugin({
   ucRoutes: [
     {
       path: "/notifications",
+      name: "NotificationsRoot",
       component: BasicLayout,
-      children: [
-        {
-          path: "",
-          name: "Notifications",
-          component: Notifications,
       meta: {
         title: "core.uc_notification.title",
         searchable: true,
@@ -25,6 +21,11 @@ export default definePlugin({
           mobile: true,
         },
       },
+      children: [
+        {
+          path: "",
+          name: "Notifications",
+          component: Notifications,
         },
       ],
     },

console/uc-src/setup/setupModules.ts

@@ -73,7 +73,14 @@ function registerModule(app: App, pluginModule: PluginModule, core: boolean) {
 
     for (const route of pluginModule.ucRoutes) {
       if ("parentName" in route) {
-        router.addRoute(route.parentName, route.route);
+        const parentRoute = router
+          .getRoutes()
+          .find((item) => item.name === route.parentName);
+        if (parentRoute) {
+          router.removeRoute(route.parentName);
+          parentRoute.children = [...parentRoute.children, route.route];
+          router.addRoute(parentRoute);
+        }
       } else {
         router.addRoute(route);
       }