From c6594a1254543bd96caf044d5993eaa481d355af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Fri, 27 Dec 2024 14:49:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E9=A1=B9=E7=94=9F=E6=88=90=E9=80=BB=E8=BE=91=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=88=86=E7=BB=84=E5=92=8C=E6=A0=91=E5=BD=A2=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/router.page.vue | 61 +++++++++++++++++++++++++++++++++------
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/pages/router.page.vue b/src/pages/router.page.vue
index 5a88b12..956b0cc 100644
--- a/src/pages/router.page.vue
+++ b/src/pages/router.page.vue
@@ -1,31 +1,70 @@
 <script setup lang="ts">
 import { createGetRoutes, setupLayoutsResult } from '@/plugins/router';
+import type { MenuItem } from 'primevue/menuitem';
 import { routes } from 'vue-router/auto-routes';
 const router = useRouter();
 
 const menuItems = computed(() => {
-  let flatArray: Record<string, string>[] = createGetRoutes(router)()
+  let flatArray: MenuItem[] = createGetRoutes(router)()
     .filter((route) => !route.path.includes('/:'))
     .map((route) => ({
       id: route.path,
-      name: `${(route.name as string) || route.path}`,
+      label: `${(route.name as string) || route.path}`,
     }));
 
   flatArray = flatArray.map((item, index) => {
     let id = item.id;
     if (flatArray.some((item) => item.id.startsWith(`${id}/`))) {
-      id = `${id}/`;
+      id = `${id}/index`;
     }
     // 去掉最前面的 /
     id = id.replace(/^\//, '');
+
+    let parentId = id.replace(/\/[^/]+$/, '');
+    if (parentId === id) {
+      parentId = '_ROOT_';
+    }
     return {
-      id: id,
-      parentId: id.replace(/\/[^/]+$/, ''),
-      name: item.name,
+      ...item,
+      parentId,
     };
   });
-  console.debug(`flatArray :>> `, JSON.stringify(flatArray, null, 2));
-  return flatArray;
+  const groupItems = flatArray.reduce(
+    (acc, flatArrItem) => {
+      if (
+        !acc.some((item) => item.id === flatArrItem.parentId) && //
+        flatArrItem.parentId !== '_ROOT_'
+      ) {
+        let groupItemParentId = flatArrItem.parentId.replace(/\/[^/]+$/, '');
+        if (groupItemParentId === flatArrItem.parentId) groupItemParentId = '_ROOT_';
+        acc.push({
+          id: flatArrItem.parentId,
+          label: `Group ${flatArrItem.parentId}`,
+          parentId: groupItemParentId,
+        });
+      }
+      return acc;
+    },
+    [] as Record<string, string>[],
+  );
+  console.debug(`groupItems :>> `, groupItems);
+  const tree = arrayToTree(flatArray.concat(groupItems), { id: 'id', parentId: 'parentId', rootId: '_ROOT_' });
+
+  // 递归把 children 改为 items
+  function _convertChildrenToItems(tree: MenuItem[]): MenuItem[] {
+    return tree.map((item) => {
+      if (item.children.length) {
+        item.items = _convertChildrenToItems(item.children);
+      } else {
+        item.command = (event) => {
+          router.push({ name: item.label as never });
+        };
+      }
+      delete item.children;
+      return item;
+    });
+  }
+  return _convertChildrenToItems(tree);
 });
 
 const list = [
@@ -66,11 +105,15 @@ const list = [
 ];
 </script>
 <template>
-  <Tabs :value="list[0].title" scrollable>
+  <Tabs value="MenuTest" scrollable>
     <TabList>
+      <Tab value="MenuTest"> MenuTest </Tab>
       <Tab v-for="item in list" :key="item.title" :value="item.title">{{ item.title }}</Tab>
     </TabList>
     <TabPanels>
+      <TabPanel value="MenuTest">
+        <PanelMenu :model="menuItems" />
+      </TabPanel>
       <TabPanel v-for="item in list" :key="item.title" :value="item.title">
         <pre>{{ item.json }}</pre>
       </TabPanel>