优化目录结构，以及插件

src/components/common-icon/index.vue

@@ -2,13 +2,13 @@
 defineProps({
   icon: {
     type: String,
-    required: true
+    required: false
   }
 })
 </script>
 
 <template>
-  <el-icon>
+  <el-icon v-if="icon">
     <component
       :is="icon"
     />

src/components/common-menu-item/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+  menuItem: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: String,
+    required: false
+  }
+})
+</script>
+
+<template>
+  <el-menu-item
+    :route="menuItem.route"
+    v-bind="menuItem.attrs"
+    :index="index"
+    @click="menuItem.click&&menuItem.click()"
+  >
+    <template #title>
+      <common-icon
+        :icon="menuItem.icon"
+      />
+      <span v-if="menuItem.labelKey||menuItem.label">
+        {{ menuItem.labelKey?$t(menuItem.labelKey):menuItem.label }}
+      </span>
+    </template>
+  </el-menu-item>
+</template>
+
+<style scoped>
+
+</style>

src/components/common-menu/index.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  menus: {
+    type: Array,
+    required: true
+  },
+  collapse: {
+    type: Boolean
+  }
+})
+const menuItems = computed(() => {
+  return filterMenus(props.menus)
+})
+const calcIcon = menuItem => {
+  if (menuItem.iconIf) {
+    menuItem.icon = menuItem.iconIf(menuItem)
+  }
+  return menuItem.icon
+}
+const filterMenus = menus => menus.filter(menu => !menu.disabled)
+  .map(menu => {
+    menu.icon = calcIcon(menu)
+    if (menu.children && menu.children.length) {
+      menu.children = filterMenus(menu.children)
+    }
+    return menu
+  })
+</script>
+
+<template>
+  <el-menu
+    v-bind="$attrs"
+    router
+    :collapse="collapse"
+  >
+    <template v-for="(menuItem, index) in menuItems">
+      <el-sub-menu
+        v-if="menuItem.children && menuItem.children.length"
+        :key="menuItem.index||index"
+        :index="menuItem.index"
+        v-bind="menuItem.attrs"
+      >
+        <template #title>
+          <common-icon
+            :icon="menuItem.icon"
+          />
+          <span v-if="menuItem.labelKey||menuItem.label">
+            {{ menuItem.labelKey?$t(menuItem.labelKey):menuItem.label }}
+          </span>
+        </template>
+        <common-menu-item
+          v-for="(childMenu, childIdx) in menuItem.children"
+          :key="childMenu.index||childIdx"
+          :index="childMenu.index"
+          :menu-item="childMenu"
+        />
+      </el-sub-menu>
+      <common-menu-item
+        v-else
+        :key="menuItem.index||index"
+        :index="menuItem.index"
+        :menu-item="menuItem"
+      />
+    </template>
+  </el-menu>
+</template>
+
+<style scoped>
+
+</style>

src/components/index.js

@@ -1,14 +1,19 @@
-import { defineAsyncComponent } from 'vue'
+import CommonIcon from '@/components/common-icon/index.vue'
+import CommonInput from '@/components/common-input/index.vue'
+import CommonMenu from '@/components/common-menu/index.vue'
+import CommonMenuItem from '@/components/common-menu-item/index.vue'
 
 /**
  * 自定义通用组件自动注册
  */
 export default {
-  install (app) {
-    const components = import.meta.glob('./*/index.vue')
-    for (const [filePath, componentFn] of Object.entries(components)) {
-      const compName = filePath.split('/')[1]
-      app.component(compName, defineAsyncComponent(componentFn))
-    }
+  /**
+   * @param Vue {import('vue').App} IDE（IDEA）插件似乎不能正常提示vue3组件注册，参数名写成Vue才能提示
+   */
+  install (Vue) {
+    Vue.component('CommonIcon', CommonIcon)
+    Vue.component('CommonInput', CommonInput)
+    Vue.component('CommonMenu', CommonMenu)
+    Vue.component('CommonMenuItem', CommonMenuItem)
   }
 }