From 3ebb45c266bda7d560713163e8bb9bff76d6bd58 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 19 Jan 2024 13:34:10 +0800
Subject: [PATCH] Refactor menu generation strategy to support sub-menu items.
 (#5177)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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 的菜单生成逻辑，支持配置二级菜单项。
```
---
 .../modules/contents/attachments/module.ts    | 23 ++---
 .../modules/contents/comments/module.ts       | 25 ++---
 .../modules/contents/pages/module.ts          | 23 ++---
 .../modules/contents/posts/module.ts          | 25 ++---
 .../modules/interface/menus/module.ts         | 23 ++---
 .../modules/interface/themes/module.ts        | 23 ++---
 .../modules/system/actuator/module.ts         | 24 ++---
 .../modules/system/backup/module.ts           | 23 ++---
 .../modules/system/plugins/module.ts          | 54 ++++-------
 .../modules/system/settings/module.ts         | 21 ++--
 .../modules/system/users/module.ts            | 25 ++---
 console/console-src/setup/setupModules.ts     |  9 +-
 console/env.d.ts                              |  3 +
 .../src/components/menu/Menu.stories.ts       |  7 ++
 .../src/components/menu/MenuItem.vue          | 20 ++--
 .../components/menu/__tests__/Menu.spec.tsx   |  2 +-
 console/src/components/menu/RoutesMenu.tsx    |  4 +-
 .../composables/use-route-menu-generator.ts   | 95 +++++++++++++------
 .../uc-src/modules/contents/posts/module.ts   | 25 ++---
 .../uc-src/modules/notifications/module.ts    | 23 ++---
 console/uc-src/setup/setupModules.ts          |  9 +-
 21 files changed, 278 insertions(+), 208 deletions(-)

diff --git a/console/console-src/modules/contents/attachments/module.ts b/console/console-src/modules/contents/attachments/module.ts
index 3b7df17a3..8ebe2a708 100644
--- a/console/console-src/modules/contents/attachments/module.ts
+++ b/console/console-src/modules/contents/attachments/module.ts
@@ -12,23 +12,24 @@ export default definePlugin({
   routes: [
     {
       path: "/attachments",
+      name: "AttachmentsRoot",
       component: BasicLayout,
+      meta: {
+        title: "core.attachment.title",
+        permissions: ["system:attachments:view"],
+        menu: {
+          name: "core.sidebar.menu.items.attachments",
+          group: "content",
+          icon: markRaw(IconFolder),
+          priority: 3,
+          mobile: true,
+        },
+      },
       children: [
         {
           path: "",
           name: "Attachments",
           component: AttachmentList,
-          meta: {
-            title: "core.attachment.title",
-            permissions: ["system:attachments:view"],
-            menu: {
-              name: "core.sidebar.menu.items.attachments",
-              group: "content",
-              icon: markRaw(IconFolder),
-              priority: 3,
-              mobile: true,
-            },
-          },
         },
       ],
     },
diff --git a/console/console-src/modules/contents/comments/module.ts b/console/console-src/modules/contents/comments/module.ts
index 2172fde2d..c2c2f4b0c 100644
--- a/console/console-src/modules/contents/comments/module.ts
+++ b/console/console-src/modules/contents/comments/module.ts
@@ -12,24 +12,25 @@ export default definePlugin({
   routes: [
     {
       path: "/comments",
+      name: "CommentsRoot",
       component: BasicLayout,
+      meta: {
+        title: "core.comment.title",
+        searchable: true,
+        permissions: ["system:comments:view"],
+        menu: {
+          name: "core.sidebar.menu.items.comments",
+          group: "content",
+          icon: markRaw(IconMessage),
+          priority: 2,
+          mobile: true,
+        },
+      },
       children: [
         {
           path: "",
           name: "Comments",
           component: CommentList,
-          meta: {
-            title: "core.comment.title",
-            searchable: true,
-            permissions: ["system:comments:view"],
-            menu: {
-              name: "core.sidebar.menu.items.comments",
-              group: "content",
-              icon: markRaw(IconMessage),
-              priority: 2,
-              mobile: true,
-            },
-          },
         },
       ],
     },
diff --git a/console/console-src/modules/contents/pages/module.ts b/console/console-src/modules/contents/pages/module.ts
index 9331b0ab0..df2e4bc69 100644
--- a/console/console-src/modules/contents/pages/module.ts
+++ b/console/console-src/modules/contents/pages/module.ts
@@ -14,23 +14,24 @@ export default definePlugin({
   routes: [
     {
       path: "/single-pages",
+      name: "SinglePagesRoot",
       component: BasicLayout,
+      meta: {
+        title: "core.page.title",
+        searchable: true,
+        permissions: ["system:singlepages:view"],
+        menu: {
+          name: "core.sidebar.menu.items.single_pages",
+          group: "content",
+          icon: markRaw(IconPages),
+          priority: 1,
+        },
+      },
       children: [
         {
           path: "",
           name: "SinglePages",
           component: SinglePageList,
-          meta: {
-            title: "core.page.title",
-            searchable: true,
-            permissions: ["system:singlepages:view"],
-            menu: {
-              name: "core.sidebar.menu.items.single_pages",
-              group: "content",
-              icon: markRaw(IconPages),
-              priority: 1,
-            },
-          },
         },
         {
           path: "deleted",
diff --git a/console/console-src/modules/contents/posts/module.ts b/console/console-src/modules/contents/posts/module.ts
index 06a74a3fc..c19966949 100644
--- a/console/console-src/modules/contents/posts/module.ts
+++ b/console/console-src/modules/contents/posts/module.ts
@@ -19,24 +19,25 @@ export default definePlugin({
   routes: [
     {
       path: "/posts",
+      name: "PostsRoot",
       component: BasicLayout,
+      meta: {
+        title: "core.post.title",
+        searchable: true,
+        permissions: ["system:posts:view"],
+        menu: {
+          name: "core.sidebar.menu.items.posts",
+          group: "content",
+          icon: markRaw(IconBookRead),
+          priority: 0,
+          mobile: true,
+        },
+      },
       children: [
         {
           path: "",
           name: "Posts",
           component: PostList,
-          meta: {
-            title: "core.post.title",
-            searchable: true,
-            permissions: ["system:posts:view"],
-            menu: {
-              name: "core.sidebar.menu.items.posts",
-              group: "content",
-              icon: markRaw(IconBookRead),
-              priority: 0,
-              mobile: true,
-            },
-          },
         },
         {
           path: "deleted",
diff --git a/console/console-src/modules/interface/menus/module.ts b/console/console-src/modules/interface/menus/module.ts
index 1ff12f274..f1e860624 100644
--- a/console/console-src/modules/interface/menus/module.ts
+++ b/console/console-src/modules/interface/menus/module.ts
@@ -9,23 +9,24 @@ export default definePlugin({
   routes: [
     {
       path: "/menus",
+      name: "MenusRoot",
       component: BasicLayout,
+      meta: {
+        title: "core.menu.title",
+        searchable: true,
+        permissions: ["system:menus:view"],
+        menu: {
+          name: "core.sidebar.menu.items.menus",
+          group: "interface",
+          icon: markRaw(IconListSettings),
+          priority: 1,
+        },
+      },
       children: [
         {
           path: "",
           name: "Menus",
           component: Menus,
-          meta: {
-            title: "core.menu.title",
-            searchable: true,
-            permissions: ["system:menus:view"],
-            menu: {
-              name: "core.sidebar.menu.items.menus",
-              group: "interface",
-              icon: markRaw(IconListSettings),
-              priority: 1,
-            },
-          },
         },
       ],
     },
diff --git a/console/console-src/modules/interface/themes/module.ts b/console/console-src/modules/interface/themes/module.ts
index 7eb7faf1d..46c00d4b7 100644
--- a/console/console-src/modules/interface/themes/module.ts
+++ b/console/console-src/modules/interface/themes/module.ts
@@ -10,23 +10,24 @@ export default definePlugin({
   routes: [
     {
       path: "/theme",
+      name: "ThemeRoot",
       component: ThemeLayout,
+      meta: {
+        title: "core.theme.title",
+        searchable: true,
+        permissions: ["system:themes:view"],
+        menu: {
+          name: "core.sidebar.menu.items.themes",
+          group: "interface",
+          icon: markRaw(IconPalette),
+          priority: 0,
+        },
+      },
       children: [
         {
           path: "",
           name: "ThemeDetail",
           component: ThemeDetail,
-          meta: {
-            title: "core.theme.title",
-            searchable: true,
-            permissions: ["system:themes:view"],
-            menu: {
-              name: "core.sidebar.menu.items.themes",
-              group: "interface",
-              icon: markRaw(IconPalette),
-              priority: 0,
-            },
-          },
         },
         {
           path: "settings/:group",
diff --git a/console/console-src/modules/system/actuator/module.ts b/console/console-src/modules/system/actuator/module.ts
index c31e1b749..ffa9e3807 100644
--- a/console/console-src/modules/system/actuator/module.ts
+++ b/console/console-src/modules/system/actuator/module.ts
@@ -9,22 +9,24 @@ export default definePlugin({
   routes: [
     {
       path: "/actuator",
+      name: "OverviewRoot", // fixme: actuator will be renamed to overview in the future
       component: BasicLayout,
+      meta: {
+        title: "core.actuator.title",
+        searchable: true,
+        permissions: ["system:actuator:manage"],
+        menu: {
+          name: "core.sidebar.menu.items.actuator",
+          group: "system",
+          icon: markRaw(IconTerminalBoxLine),
+          priority: 3,
+        },
+      },
       children: [
         {
           path: "",
+          name: "Actuator",
           component: Actuator,
-          meta: {
-            title: "core.actuator.title",
-            searchable: true,
-            permissions: ["system:actuator:manage"],
-            menu: {
-              name: "core.sidebar.menu.items.actuator",
-              group: "system",
-              icon: markRaw(IconTerminalBoxLine),
-              priority: 3,
-            },
-          },
         },
       ],
     },
diff --git a/console/console-src/modules/system/backup/module.ts b/console/console-src/modules/system/backup/module.ts
index 181fafe5c..b56e1c533 100644
--- a/console/console-src/modules/system/backup/module.ts
+++ b/console/console-src/modules/system/backup/module.ts
@@ -9,23 +9,24 @@ export default definePlugin({
   routes: [
     {
       path: "/backup",
+      name: "BackupRoot",
       component: BasicLayout,
+      meta: {
+        title: "core.backup.title",
+        searchable: true,
+        permissions: ["system:migrations:manage"],
+        menu: {
+          name: "core.sidebar.menu.items.backup",
+          group: "system",
+          icon: markRaw(IconServerLine),
+          priority: 4,
+        },
+      },
       children: [
         {
           path: "",
           name: "Backup",
           component: Backups,
-          meta: {
-            title: "core.backup.title",
-            searchable: true,
-            permissions: ["system:migrations:manage"],
-            menu: {
-              name: "core.sidebar.menu.items.backup",
-              group: "system",
-              icon: markRaw(IconServerLine),
-              priority: 4,
-            },
-          },
         },
       ],
     },
diff --git a/console/console-src/modules/system/plugins/module.ts b/console/console-src/modules/system/plugins/module.ts
index 69edb7272..2add63468 100644
--- a/console/console-src/modules/system/plugins/module.ts
+++ b/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,44 +10,33 @@ export default definePlugin({
   routes: [
     {
       path: "/plugins",
-      component: BlankLayout,
+      name: "PluginsRoot",
+      component: BasicLayout,
+      meta: {
+        title: "core.plugin.title",
+        searchable: true,
+        permissions: ["system:plugins:view"],
+        menu: {
+          name: "core.sidebar.menu.items.plugins",
+          group: "system",
+          icon: markRaw(IconPlug),
+          priority: 0,
+        },
+      },
       children: [
         {
           path: "",
-          component: BasicLayout,
-          children: [
-            {
-              path: "",
-              name: "Plugins",
-              component: PluginList,
-              meta: {
-                title: "core.plugin.title",
-                searchable: true,
-                permissions: ["system:plugins:view"],
-                menu: {
-                  name: "core.sidebar.menu.items.plugins",
-                  group: "system",
-                  icon: markRaw(IconPlug),
-                  priority: 0,
-                },
-              },
-            },
-          ],
+          name: "Plugins",
+          component: PluginList,
         },
         {
           path: ":name",
-          component: BasicLayout,
-          children: [
-            {
-              path: "",
-              name: "PluginDetail",
-              component: PluginDetail,
-              meta: {
-                title: "core.plugin.detail.title",
-                permissions: ["system:plugins:view"],
-              },
-            },
-          ],
+          name: "PluginDetail",
+          component: PluginDetail,
+          meta: {
+            title: "core.plugin.detail.title",
+            permissions: ["system:plugins:view"],
+          },
         },
       ],
     },
diff --git a/console/console-src/modules/system/settings/module.ts b/console/console-src/modules/system/settings/module.ts
index d9f0c5106..faaee6902 100644
--- a/console/console-src/modules/system/settings/module.ts
+++ b/console/console-src/modules/system/settings/module.ts
@@ -9,22 +9,23 @@ export default definePlugin({
   routes: [
     {
       path: "/settings",
+      name: "SettingsRoot",
       component: BasicLayout,
+      meta: {
+        title: "core.setting.title",
+        permissions: ["system:settings:view"],
+        menu: {
+          name: "core.sidebar.menu.items.settings",
+          group: "system",
+          icon: markRaw(IconSettings),
+          priority: 2,
+        },
+      },
       children: [
         {
           path: "",
           name: "SystemSetting",
           component: SystemSettings,
-          meta: {
-            title: "core.setting.title",
-            permissions: ["system:settings:view"],
-            menu: {
-              name: "core.sidebar.menu.items.settings",
-              group: "system",
-              icon: markRaw(IconSettings),
-              priority: 2,
-            },
-          },
         },
       ],
     },
diff --git a/console/console-src/modules/system/users/module.ts b/console/console-src/modules/system/users/module.ts
index 9f260715c..91a5e009a 100644
--- a/console/console-src/modules/system/users/module.ts
+++ b/console/console-src/modules/system/users/module.ts
@@ -33,24 +33,25 @@ export default definePlugin({
     },
     {
       path: "/users",
+      name: "UsersRoot",
       component: BasicLayout,
+      meta: {
+        title: "core.user.title",
+        searchable: true,
+        permissions: ["system:users:view"],
+        menu: {
+          name: "core.sidebar.menu.items.users",
+          group: "system",
+          icon: markRaw(IconUserSettings),
+          priority: 1,
+          mobile: true,
+        },
+      },
       children: [
         {
           path: "",
           name: "Users",
           component: UserList,
-          meta: {
-            title: "core.user.title",
-            searchable: true,
-            permissions: ["system:users:view"],
-            menu: {
-              name: "core.sidebar.menu.items.users",
-              group: "system",
-              icon: markRaw(IconUserSettings),
-              priority: 1,
-              mobile: true,
-            },
-          },
         },
         {
           path: ":name",
diff --git a/console/console-src/setup/setupModules.ts b/console/console-src/setup/setupModules.ts
index f85006261..f96c0f883 100644
--- a/console/console-src/setup/setupModules.ts
+++ b/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);
       }
diff --git a/console/env.d.ts b/console/env.d.ts
index a2f91d29e..9e640bf66 100644
--- a/console/env.d.ts
+++ b/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;
diff --git a/console/packages/components/src/components/menu/Menu.stories.ts b/console/packages/components/src/components/menu/Menu.stories.ts
index 7cb5a38fb..b5f1ada85 100644
--- a/console/packages/components/src/components/menu/Menu.stories.ts
+++ b/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>
diff --git a/console/packages/components/src/components/menu/MenuItem.vue b/console/packages/components/src/components/menu/MenuItem.vue
index 341b6adf1..6d85d811f 100644
--- a/console/packages/components/src/components/menu/MenuItem.vue
+++ b/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 {
-  transition: all 0.1s ease-out;
-}
-
+.submenus-show-enter-active,
 .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>
diff --git a/console/packages/components/src/components/menu/__tests__/Menu.spec.tsx b/console/packages/components/src/components/menu/__tests__/Menu.spec.tsx
index cf50a278e..5c6969580 100644
--- a/console/packages/components/src/components/menu/__tests__/Menu.spec.tsx
+++ b/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);
 
diff --git a/console/src/components/menu/RoutesMenu.tsx b/console/src/components/menu/RoutesMenu.tsx
index f67a353e8..a85253487 100644
--- a/console/src/components/menu/RoutesMenu.tsx
+++ b/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>
diff --git a/console/src/composables/use-route-menu-generator.ts b/console/src/composables/use-route-menu-generator.ts
index 044c433d7..1a27e05c0 100644
--- a/console/src/composables/use-route-menu-generator.ts
+++ b/console/src/composables/use-route-menu-generator.ts
@@ -25,29 +25,67 @@ export function useRouteMenuGenerator(
   const roleStore = useRoleStore();
   const { uiPermissions } = roleStore.permissions;
 
+  function flattenRoutes(route: RouteRecordNormalized | RouteRecordRaw) {
+    let routes: (RouteRecordNormalized | RouteRecordRaw)[] = [route];
+    if (route.children) {
+      route.children.forEach((child) => {
+        routes = routes.concat(flattenRoutes(child));
+      });
+    }
+    return routes;
+  }
+
+  function isRouteValid(route?: RouteRecordNormalized) {
+    if (!route) return false;
+    const { meta } = route;
+    if (!meta?.menu) return false;
+    return (
+      !meta.permissions || hasPermission(uiPermissions, meta.permissions, true)
+    );
+  }
+
   const generateMenus = () => {
-    // sort by menu.priority and meta.core
-    const currentRoutes = sortBy<RouteRecordNormalized>(
-      router.getRoutes().filter((route) => {
-        const { meta } = route;
-        if (!meta?.menu) {
-          return false;
-        }
-        if (meta.permissions) {
-          return hasPermission(
-            uiPermissions,
-            meta.permissions as string[],
-            true
-          );
-        }
-        return true;
-      }),
+    // 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 childMetaMenu = childRoute?.meta?.menu;
+      const childRoute = route.children;
+
+      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,
diff --git a/console/uc-src/modules/contents/posts/module.ts b/console/uc-src/modules/contents/posts/module.ts
index b25aa9cf9..54f820600 100644
--- a/console/uc-src/modules/contents/posts/module.ts
+++ b/console/uc-src/modules/contents/posts/module.ts
@@ -9,24 +9,25 @@ export default definePlugin({
   ucRoutes: [
     {
       path: "/posts",
+      name: "PostsRoot",
       component: BasicLayout,
+      meta: {
+        title: "core.uc_post.title",
+        searchable: true,
+        permissions: ["uc:posts:manage"],
+        menu: {
+          name: "core.uc_sidebar.menu.items.posts",
+          group: "content",
+          icon: markRaw(IconBookRead),
+          priority: 0,
+          mobile: true,
+        },
+      },
       children: [
         {
           path: "",
           name: "Posts",
           component: PostList,
-          meta: {
-            title: "core.uc_post.title",
-            searchable: true,
-            permissions: ["uc:posts:manage"],
-            menu: {
-              name: "core.uc_sidebar.menu.items.posts",
-              group: "content",
-              icon: markRaw(IconBookRead),
-              priority: 0,
-              mobile: true,
-            },
-          },
         },
         {
           path: "editor",
diff --git a/console/uc-src/modules/notifications/module.ts b/console/uc-src/modules/notifications/module.ts
index 082ee16b7..53472106f 100644
--- a/console/uc-src/modules/notifications/module.ts
+++ b/console/uc-src/modules/notifications/module.ts
@@ -8,23 +8,24 @@ export default definePlugin({
   ucRoutes: [
     {
       path: "/notifications",
+      name: "NotificationsRoot",
       component: BasicLayout,
+      meta: {
+        title: "core.uc_notification.title",
+        searchable: true,
+        menu: {
+          name: "core.uc_sidebar.menu.items.notification",
+          group: "dashboard",
+          icon: markRaw(IconNotificationBadgeLine),
+          priority: 1,
+          mobile: true,
+        },
+      },
       children: [
         {
           path: "",
           name: "Notifications",
           component: Notifications,
-          meta: {
-            title: "core.uc_notification.title",
-            searchable: true,
-            menu: {
-              name: "core.uc_sidebar.menu.items.notification",
-              group: "dashboard",
-              icon: markRaw(IconNotificationBadgeLine),
-              priority: 1,
-              mobile: true,
-            },
-          },
         },
       ],
     },
diff --git a/console/uc-src/setup/setupModules.ts b/console/uc-src/setup/setupModules.ts
index dbf739820..13d5ed830 100644
--- a/console/uc-src/setup/setupModules.ts
+++ b/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);
       }