From a5e9361ff1ed2d789d5da3f6d2c39c0b8758fb73 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Tue, 17 Oct 2023 13:52:38 +0800
Subject: [PATCH] feat(Menu): Add custom images to menu

---
 src/api/system/post/index.ts                           | 4 ++--
 src/components/Menu/src/components/MenuItemContent.vue | 4 +++-
 src/components/SimpleMenu/src/SimpleSubMenu.vue        | 5 ++++-
 src/layouts/default/sider/MixSider.vue                 | 6 ++++++
 src/router/types.ts                                    | 1 +
 src/types/vue-router.d.ts                              | 2 ++
 6 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/api/system/post/index.ts b/src/api/system/post/index.ts
index 4a89faac..ca1ac00a 100644
--- a/src/api/system/post/index.ts
+++ b/src/api/system/post/index.ts
@@ -38,12 +38,12 @@ export function getPost(id: number) {
 }
 
 // 新增岗位
-export function createPost(data: PostVO) {
+export function createPost(data) {
   return defHttp.post({ url: '/system/post/create', data })
 }
 
 // 修改岗位
-export function updatePost(data: PostVO) {
+export function updatePost(data) {
   return defHttp.put({ url: '/system/post/update', data })
 }
 
diff --git a/src/components/Menu/src/components/MenuItemContent.vue b/src/components/Menu/src/components/MenuItemContent.vue
index 88f86018..11eed3ee 100644
--- a/src/components/Menu/src/components/MenuItemContent.vue
+++ b/src/components/Menu/src/components/MenuItemContent.vue
@@ -13,11 +13,13 @@ const { t } = useI18n()
 
 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)
 </script>
 
 <template>
   <span :class="`${prefixCls}- flex items-center `">
+    <img v-if="getImg" :src="getImg" class="mr-2 h-18px w-18px align-top">
     <Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon mr-2`" />
     {{ getI18nName }}
   </span>
diff --git a/src/components/SimpleMenu/src/SimpleSubMenu.vue b/src/components/SimpleMenu/src/SimpleSubMenu.vue
index 570937c2..0cafdbef 100644
--- a/src/components/SimpleMenu/src/SimpleSubMenu.vue
+++ b/src/components/SimpleMenu/src/SimpleSubMenu.vue
@@ -29,7 +29,8 @@ const { t } = useI18n()
 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)
@@ -54,6 +55,7 @@ function menuHasChildren(menuTreeItem: Menu): boolean {
 
 <template>
   <MenuItem v-if="!menuHasChildren(item) && getShowMenu" :name="item.path" v-bind="$props" :class="getLevelClass">
+    <img v-if="getImg" :src="getImg" class="h-16px w-16px align-top">
     <Icon v-if="getIcon" :icon="getIcon" :size="16" />
     <div v-if="collapsedShowTitle && getIsCollapseParent" class="collapse-title mt-1">
       {{ getI18nName }}
@@ -72,6 +74,7 @@ function menuHasChildren(menuTreeItem: Menu): boolean {
     :collapsed-show-title="collapsedShowTitle"
   >
     <template #title>
+      <img v-if="getImg" :src="getImg" class="h-16px w-16px align-top">
       <Icon v-if="getIcon" :icon="getIcon" :size="16" />
 
       <div v-if="collapsedShowTitle && getIsCollapseParent" class="collapse-title mt-2">
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
index 0e506c83..18ca46b3 100644
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -255,7 +255,13 @@ onClickOutside(wrap, () => {
           ]"
         >
           <SimpleMenuTag :item="item" collapse-parent 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 e48d9170..0f803dac 100644
--- a/src/router/types.ts
+++ b/src/router/types.ts
@@ -36,6 +36,7 @@ export interface Menu {
   name: string
   // 菜单图标,如果没有，则会尝试使用route.meta.icon
   icon?: string
+  img?: string
   // 菜单路径
   path: string
 
diff --git a/src/types/vue-router.d.ts b/src/types/vue-router.d.ts
index 3d14ae25..f0a9e6c0 100644
--- a/src/types/vue-router.d.ts
+++ b/src/types/vue-router.d.ts
@@ -21,6 +21,8 @@ declare module 'vue-router' {
     affix?: boolean
     // 图标，也是菜单图标
     icon?: string
+    // img on tab
+    img?: string
     // 内嵌iframe的地址
     frameSrc?: string
     // 指定该路由切换的动画名