From 6b6e3131955aa327b4da517e994f2010ba817fe8 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:56: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=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E8=B7=AF=E7=94=B1=E5=A4=84=E7=90=86=E5=B9=B6=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=88=86=E7=BB=84=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/sakai-vue/AppMenu.vue | 82 ++++++++++++++++++++++---------
 src/pages/router.page.vue         | 73 +--------------------------
 2 files changed, 61 insertions(+), 94 deletions(-)

diff --git a/src/layouts/sakai-vue/AppMenu.vue b/src/layouts/sakai-vue/AppMenu.vue
index 8e1e5b1..320a1c2 100644
--- a/src/layouts/sakai-vue/AppMenu.vue
+++ b/src/layouts/sakai-vue/AppMenu.vue
@@ -1,37 +1,75 @@
 <script setup lang="ts">
 import { createGetRoutes } from '@/plugins/router';
 import type { MenuItem } from 'primevue/menuitem';
-import type { PanelMenuProps } from 'primevue/panelmenu';
-
-import type { RouteRecordRaw } from 'vue-router/auto';
 
 const router = useRouter();
 
-// 递归处理路由生成菜单项
-const _generateMenuItems = (routes: RouteRecordRaw[]): PanelMenuProps['model'] => {
-  return [];
-};
-
-const cmptItems = computed(() => {
-  return createGetRoutes(router)()
+const menuItems = computed(() => {
+  let flatArray: MenuItem[] = createGetRoutes(router)()
     .filter((route) => !route.path.includes('/:'))
-    .map((route, index) => {
-      return {
-        label: `${index}. ${(route.name as string) || route.path}`,
-        icon: (route.meta?.icon as string) || 'pi pi-fw pi-home',
-        // url: route.path,
-        command: route.children?.length
-          ? undefined
-          : () => {
-              router.push(route);
-            },
-      } satisfies MenuItem;
+    .map((route) => ({
+      id: 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}/index`;
+    }
+    // 去掉最前面的 /
+    id = id.replace(/^\//, '');
+
+    let parentId = id.replace(/\/[^/]+$/, '');
+    if (parentId === id) {
+      parentId = '_ROOT_';
+    }
+    return {
+      ...item,
+      parentId,
+    };
+  });
+  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);
 });
 </script>
 
 <template>
-  <PanelMenu :model="cmptItems" />
+  <PanelMenu :model="menuItems" />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/pages/router.page.vue b/src/pages/router.page.vue
index 956b0cc..3676630 100644
--- a/src/pages/router.page.vue
+++ b/src/pages/router.page.vue
@@ -4,69 +4,6 @@ import type { MenuItem } from 'primevue/menuitem';
 import { routes } from 'vue-router/auto-routes';
 const router = useRouter();
 
-const menuItems = computed(() => {
-  let flatArray: MenuItem[] = createGetRoutes(router)()
-    .filter((route) => !route.path.includes('/:'))
-    .map((route) => ({
-      id: 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}/index`;
-    }
-    // 去掉最前面的 /
-    id = id.replace(/^\//, '');
-
-    let parentId = id.replace(/\/[^/]+$/, '');
-    if (parentId === id) {
-      parentId = '_ROOT_';
-    }
-    return {
-      ...item,
-      parentId,
-    };
-  });
-  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 = [
   {
     title: 'routes',
@@ -98,22 +35,14 @@ const list = [
       components: undefined,
     })),
   },
-  {
-    title: 'menuItems',
-    json: menuItems.value,
-  },
 ];
 </script>
 <template>
-  <Tabs value="MenuTest" scrollable>
+  <Tabs :value="list[0].title" 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>