feat(Menu): Add custom images to menu

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 })
 }
 

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>

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">

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)"
           />

src/router/types.ts

@@ -36,6 +36,7 @@ export interface Menu {
   name: string
   // 菜单图标,如果没有，则会尝试使用route.meta.icon
   icon?: string
+  img?: string
   // 菜单路径
   path: string
 

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
     // 指定该路由切换的动画名