feat(Menu): Add custom images to menu (#3158)

* feat(SimpleMenu): Add custom images to menu icons

* style: Set image and text alignment

* feat: 顶部菜单模式路由也支持图片

* feat(mixSilder): 左侧菜单混合模式也支持图片显示

* style(menu): 调整图片对齐样式

* chore(Menu): 调整图片与文字间距样式

* chore: icon和img都传值的情况下, 仅显示img

src/components/Menu/src/components/MenuItemContent.vue

@@ -1,5 +1,6 @@
 <template>
   <span :class="`${prefixCls}- flex items-center `">
+    <img v-if="getImg" :src="getImg" class="w-18px h-18px align-top mr-2" />
     <Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon mr-2`" />
     {{ getI18nName }}
   </span>
@@ -22,12 +23,14 @@
     setup(props) {
       const { prefixCls } = useDesign('basic-menu-item-content');
       const getI18nName = computed(() => t(props.item?.name));
-      const getIcon = computed(() => props.item?.icon);
+      const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
+      const getImg = computed(() => props.item?.img);
 
       return {
         prefixCls,
         getI18nName,
         getIcon,
+        getImg,
       };
     },
   });

src/components/SimpleMenu/src/SimpleSubMenu.vue

@@ -5,6 +5,7 @@
     v-bind="$props"
     :class="getLevelClass"
   >
+    <img v-if="getImg" :src="getImg" class="w-16px h-16px align-top" />
     <Icon v-if="getIcon" :icon="getIcon" :size="16" />
     <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-1 collapse-title">
       {{ getI18nName }}
@@ -23,6 +24,7 @@
     :collapsedShowTitle="collapsedShowTitle"
   >
     <template #title>
+      <img v-if="getImg" :src="getImg" class="w-16px h-16px align-top" />
       <Icon v-if="getIcon" :icon="getIcon" :size="16" />
 
       <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-2 collapse-title">
@@ -79,7 +81,8 @@
       const { prefixCls } = useDesign('simple-menu');
 
       const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
-      const getIcon = computed(() => props.item?.icon);
+      const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
+      const getImg = computed(() => props.item?.img);
       const getI18nName = computed(() => t(props.item?.name));
       const getShowSubTitle = computed(() => !props.collapse || !props.parent);
       const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
@@ -106,6 +109,7 @@
         menuHasChildren,
         getShowMenu,
         getIcon,
+        getImg,
         getI18nName,
         getShowSubTitle,
         getLevelClass,

src/layouts/default/sider/MixSider.vue

@@ -31,7 +31,13 @@
           :key="item.path"
         >
           <SimpleMenuTag :item="item" collapseParent dot />
+          <img
+            v-if="item.img"
+            :src="item.img"
+            :class="[`${prefixCls}-module__icon`, getCollapsed ? 'w-16px h-16px' : 'w-20px h-20px']"
+          />
           <Icon
+            v-else
             :class="`${prefixCls}-module__icon`"
             :size="getCollapsed ? 16 : 20"
             :icon="item.icon || (item.meta && item.meta.icon)"

src/router/types.ts

@@ -29,6 +29,8 @@ export interface Menu {
 
   icon?: string;
 
+  img?: string;
+
   path: string;
 
   // path contains param, auto assignment.

types/vue-router.d.ts

@@ -21,6 +21,8 @@ declare module 'vue-router' {
     affix?: boolean;
     // icon on tab
     icon?: string;
+    // img on tab
+    img?: string;
     frameSrc?: string;
     // current page transition
     transitionName?: string;