feat(ui): 新增系统分类菜单

new-ui/projects/admin/src/components/SystemMenu.vue

@@ -1,9 +1,46 @@
+<script lang="ts">
+import { defineComponent, h } from "vue";
+import type { Component, PropType } from "vue";
+import type { RouteRecordRaw } from "vue-router";
+import { SubMenu, MenuItem } from "@arco-design/web-vue";
+const CustomMenuItem: Component = defineComponent({
+  props: {
+    tree: {
+      type: Array as PropType<RouteRecordRaw[]>,
+      default: () => [],
+    },
+  },
+  setup: (props) => {
+    return () =>
+      props.tree?.map((item) => {
+        const _icon = item.meta?.icon ? h(item.meta.icon) : undefined;
+        const hasChildren = Array.isArray(item.children) && item.children.length;
+        if (hasChildren) {
+          return h(
+            SubMenu,
+            { title: item.meta.title, key: item.name },
+            {
+              default: () => h(CustomMenuItem, { tree: item.children }),
+              icon: () => _icon,
+            }
+          );
+        }
+        return h(
+          MenuItem,
+          { key: item.name },
+          { default: () => item.meta.title, icon: () => _icon }
+        );
+      });
+  },
+});
+</script>
+
 <script lang="ts" setup>
 import { computed } from "vue";
 import { useRoute } from "vue-router";
 import router from "@/router";
-import showMenu from "@/router/menu";
-
+import menu from "@/router/menu";
+import { hasPermission } from "@/directives/permission";
 defineProps({
   width: {
     type: [Number, String],
@@ -12,18 +49,16 @@ defineProps({
 });
 const route = useRoute();
 const goto = (name: string) => router.push({ name });
+
 const selectedKeys = computed(() => [route.name]);
 
+const showMenu = computed(() => menu.filter((item: any) => hasPermission(item.meta?.permission)));
 </script>
+
 <template>
   <ALayoutSider :style="{ width, height: '100%' }">
-    <AMenu :selected-keys="selectedKeys" @menu-item-click="goto">
-      <AMenuItem v-for="item in showMenu" :key="item.name">
-        <template #icon>
-          <component :is="item.meta?.icon" />
-        </template>
-        {{ item.meta.title }}
-      </AMenuItem>
+    <AMenu :selectedKeys="selectedKeys" auto-open-selected @menu-item-click="goto">
+      <CustomMenuItem :tree="showMenu" />
     </AMenu>
   </ALayoutSider>
 </template>