布局优化，目录结构优化

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

@@ -5,18 +5,26 @@ defineProps({
     required: true
   },
   index: {
-    type: String,
+    type: Number,
     required: false
   }
 })
 </script>
 
 <template>
-  <el-menu-item
-    :route="menuItem.route"
+  <div
+    v-if="menuItem.isSplit"
+    :key="menuItem.index||index"
+    :class="menuItem.menuCls"
+  >
+    {{ menuItem.splitText }}
+  </div>
+  <el-sub-menu
+    v-else-if="menuItem.children && menuItem.children.length"
+    :key="menuItem.index||index"
+    :index="`${menuItem.index||index}`"
+    :class="menuItem.menuCls"
     v-bind="menuItem.attrs"
-    :index="index"
-    @click="menuItem.click&&menuItem.click()"
   >
     <template #title>
       <common-icon
@@ -25,6 +33,37 @@ defineProps({
       <span v-if="menuItem.labelKey||menuItem.label">
         {{ menuItem.labelKey?$t(menuItem.labelKey):menuItem.label }}
       </span>
+      <div
+        v-if="menuItem.html"
+        v-html="menuItem.html"
+      />
+    </template>
+    <common-menu-item
+      v-for="(childMenu, childIdx) in menuItem.children"
+      :key="childMenu.index||childIdx"
+      :index="childIdx"
+      :menu-item="childMenu"
+    />
+  </el-sub-menu>
+  <el-menu-item
+    v-else
+    :class="menuItem.menuCls"
+    :route="menuItem.route"
+    v-bind="menuItem.attrs"
+    :index="menuItem.index"
+    @click="menuItem.click&&menuItem.click()"
+  >
+    <common-icon
+      :icon="menuItem.icon"
+    />
+    <template #title>
+      <span v-if="menuItem.labelKey||menuItem.label">
+        {{ menuItem.labelKey?$t(menuItem.labelKey):menuItem.label }}
+      </span>
+      <div
+        v-if="menuItem.html"
+        v-html="menuItem.html"
+      />
     </template>
   </el-menu-item>
 </template>

src/components/common-menu/index.vue

@@ -14,13 +14,12 @@ const menuItems = computed(() => {
   return filterMenus(props.menus)
 })
 const calcWithIf = menuItem => {
-  if (menuItem.iconIf) {
-    menuItem.icon = menuItem.iconIf(menuItem)
-  }
-  if (menuItem.labelIf) {
-    menuItem.label = menuItem.labelIf(menuItem)
-  }
-  return menuItem.icon
+  ['icon', 'labelKey', 'label', 'html'].forEach(key => {
+    const keyIf = menuItem[`${key}If`]
+    if (keyIf) {
+      menuItem[key] = keyIf(menuItem)
+    }
+  })
 }
 const filterMenus = menus => menus.filter(menu => !menu.disabled)
   .map(menu => {
@@ -35,43 +34,17 @@ const filterMenus = menus => menus.filter(menu => !menu.disabled)
 <template>
   <el-menu
     v-bind="$attrs"
+    :default-active="$route.path"
     router
     :collapse="collapse"
   >
-    <template v-for="(menuItem, index) in menuItems">
-      <div
-        v-if="menuItem.isSplit"
-        :key="menuItem.index||index"
-        :class="menuItem.splitCls"
-      >
-        {{ menuItem.splitText }}
-      </div>
-      <el-sub-menu
-        v-else-if="menuItem.children && menuItem.children.length"
-        :key="menuItem.index||index"
-        :index="`${menuItem.index||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>
+    <template
+      v-for="(menuItem, index) in menuItems"
+      :key="index"
+    >
       <common-menu-item
-        v-else
-        :key="menuItem.index||index"
-        :index="menuItem.index"
         :menu-item="menuItem"
+        :index="index"
       />
     </template>
   </el-menu>