From b3a6ef63bb500d8103bde17d588b3c0c4c77efd6 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Tue, 17 Oct 2023 12:28:15 +0800
Subject: [PATCH] feat(Menu): Add custom images to menu  (#3158)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 | 5 ++++-
 src/components/SimpleMenu/src/SimpleSubMenu.vue        | 6 +++++-
 src/layouts/default/sider/MixSider.vue                 | 6 ++++++
 src/router/types.ts                                    | 2 ++
 types/vue-router.d.ts                                  | 2 ++
 5 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Menu/src/components/MenuItemContent.vue b/src/components/Menu/src/components/MenuItemContent.vue
index 3d3351dda..ccf65bede 100644
--- a/src/components/Menu/src/components/MenuItemContent.vue
+++ b/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,
       };
     },
   });
diff --git a/src/components/SimpleMenu/src/SimpleSubMenu.vue b/src/components/SimpleMenu/src/SimpleSubMenu.vue
index e3e9a2e23..b60e257f1 100644
--- a/src/components/SimpleMenu/src/SimpleSubMenu.vue
+++ b/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,
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
index b2b4bb001..d11e6f60e 100644
--- a/src/layouts/default/sider/MixSider.vue
+++ b/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)"
diff --git a/src/router/types.ts b/src/router/types.ts
index 082d20840..65febafb1 100644
--- a/src/router/types.ts
+++ b/src/router/types.ts
@@ -29,6 +29,8 @@ export interface Menu {
 
   icon?: string;
 
+  img?: string;
+
   path: string;
 
   // path contains param, auto assignment.
diff --git a/types/vue-router.d.ts b/types/vue-router.d.ts
index 3c9bb9eba..310d611cd 100644
--- a/types/vue-router.d.ts
+++ b/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;