统一图标导入方式

src/components/cards/DownloaderCard.vue

@@ -4,9 +4,7 @@ import { formatFileSize } from '@/@core/utils/formatters'
 import { DownloaderConf } from '@/api/types'
 import { useToast } from 'vue-toastification'
 import type { DownloaderInfo } from '@/api/types'
-import qbittorrent_image from '@images/logos/qbittorrent.png'
-import transmission_image from '@images/logos/transmission.png'
-import custom_image from '@images/logos/downloader.png'
+import { getLogoUrl } from '@/utils/imageUtils'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { downloaderDict } from '@/api/constants'
@@ -128,11 +126,11 @@ function saveDownloaderInfo() {
 const getIcon = computed(() => {
   switch (props.downloader.type) {
     case 'qbittorrent':
-      return qbittorrent_image
+      return getLogoUrl('qbittorrent')
     case 'transmission':
-      return transmission_image
+      return getLogoUrl('transmission')
     default:
-      return custom_image
+      return getLogoUrl('downloader')
   }
 })
 

src/components/cards/LibraryCard.vue

@@ -3,7 +3,7 @@ import type { MediaServerLibrary } from '@/api/types'
 import plex from '@images/misc/plex.png'
 import emby from '@images/misc/emby.png'
 import jellyfin from '@images/misc/jellyfin.png'
-import trimemedia from '@images/logos/trimemedia.png'
+import { getLogoUrl } from '@/utils/imageUtils'
 import { openMediaServerWithAutoDetect } from '@/utils/appDeepLink'
 
 // 输入参数
@@ -40,7 +40,7 @@ function getDefaultImage() {
   if (props.media?.server_type === 'plex') return plex
   else if (props.media?.server_type === 'emby') return emby
   else if (props.media?.server_type === 'jellyfin') return jellyfin
-  else if (props.media?.server_type === 'trimemedia') return trimemedia
+  else if (props.media?.server_type === 'trimemedia') return getLogoUrl('trimemedia')
   else return plex
 }
 
@@ -72,11 +72,11 @@ async function drawImages(imageList: string[]) {
   if (!canvas) return getDefaultImage()
 
   // 画布参数
-  const POSTER_WIDTH = (canvas.width - 40) / 4  // 左右边框8px + 3个间隔24px = 40px
-  const POSTER_HEIGHT = 256  // 上方海报高256
-  const MARGIN_WIDTH = 8  // 左右间隔为8
-  const MARGIN_HEIGHT = 4  // 海报和倒影之间的间隔为4
-  const REFLECTION_HEIGHT = canvas.height - POSTER_HEIGHT - MARGIN_HEIGHT  // 下方倒影使用剩余全部高度
+  const POSTER_WIDTH = (canvas.width - 40) / 4 // 左右边框8px + 3个间隔24px = 40px
+  const POSTER_HEIGHT = 256 // 上方海报高256
+  const MARGIN_WIDTH = 8 // 左右间隔为8
+  const MARGIN_HEIGHT = 4 // 海报和倒影之间的间隔为4
+  const REFLECTION_HEIGHT = canvas.height - POSTER_HEIGHT - MARGIN_HEIGHT // 下方倒影使用剩余全部高度
 
   // 获取画布上下文
   const ctx = canvas.getContext('2d')
@@ -107,30 +107,20 @@ async function drawImages(imageList: string[]) {
     }
 
     const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1)
-    const y = 0  // 海报紧贴顶部
+    const y = 0 // 海报紧贴顶部
 
     ctx.drawImage(img, x, y, POSTER_WIDTH, POSTER_HEIGHT)
 
     ctx.save()
     ctx.translate(0, canvas.height)
     ctx.scale(1, -1)
-    ctx.drawImage(
-      img,
-      0,
-      0,
-      img.width,
-      img.height,
-      x,
-      0,
-      POSTER_WIDTH,
-      REFLECTION_HEIGHT,
-    )
+    ctx.drawImage(img, 0, 0, img.width, img.height, x, 0, POSTER_WIDTH, REFLECTION_HEIGHT)
 
     const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height - (POSTER_HEIGHT + MARGIN_HEIGHT))
 
     gradient.addColorStop(0, 'rgba(0, 0, 0, 1)')
     gradient.addColorStop(1, 'rgba(0, 0, 0, 0.7)')
-    ctx.globalCompositeOperation = 'destination-out';
+    ctx.globalCompositeOperation = 'destination-out'
     ctx.fillStyle = gradient
     ctx.fillRect(x, 0, POSTER_WIDTH, REFLECTION_HEIGHT)
 

src/components/cards/MediaCard.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import noImage from '@images/no-image.jpeg'
-import tmdbImage from '@images/logos/tmdb.png'
-import doubanImage from '@images/logos/douban-black.png'
-import bangumiImage from '@images/logos/bangumi.png'
+import { getLogoUrl } from '@/utils/imageUtils'
 import api from '@/api'
 import { useToast } from 'vue-toastification'
 import { formatSeason, formatRating } from '@/@core/utils/formatters'
@@ -64,9 +62,9 @@ const seasonsSelected = ref<MediaSeason[]>([])
 
 // 来源角标字典
 const sourceIconDict: { [key: string]: any } = {
-  themoviedb: tmdbImage,
-  douban: doubanImage,
-  bangumi: bangumiImage,
+  themoviedb: getLogoUrl('tmdb'),
+  douban: getLogoUrl('douban-black'),
+  bangumi: getLogoUrl('bangumi'),
 }
 
 // 绑定MediaCard元素

src/components/cards/MediaServerCard.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { MediaServerConf, MediaServerLibrary, MediaStatistic } from '@/api/types'
 import { useToast } from 'vue-toastification'
-import emby_image from '@images/logos/emby.png'
-import jellyfin_image from '@images/logos/jellyfin.png'
-import plex_image from '@images/logos/plex.png'
-import trimemedia_image from '@images/logos/trimemedia.png'
-import custom_image from '@images/logos/mediaserver.png'
+import { getLogoUrl } from '@/utils/imageUtils'
 import api from '@/api'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
@@ -109,15 +105,15 @@ function saveMediaServerInfo() {
 const getIcon = computed(() => {
   switch (props.mediaserver.type) {
     case 'emby':
-      return emby_image
+      return getLogoUrl('emby')
     case 'jellyfin':
-      return jellyfin_image
+      return getLogoUrl('jellyfin')
     case 'trimemedia':
-      return trimemedia_image
+      return getLogoUrl('trimemedia')
     case 'plex':
-      return plex_image
+      return getLogoUrl('plex')
     default:
-      return custom_image
+      return getLogoUrl('mediaserver')
   }
 })
 

src/components/cards/NotificationChannelCard.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import { NotificationConf } from '@/api/types'
-import wechat_image from '@images/logos/wechat.png'
-import telegram_image from '@images/logos/telegram.webp'
-import vocechat_image from '@images/logos/vocechat.png'
-import synologychat_image from '@images/logos/synologychat.png'
-import slack_image from '@images/logos/slack.webp'
-import chrome_image from '@images/logos/chrome.png'
-import custom_image from '@images/logos/notification.png'
+import { getLogoUrl } from '@/utils/imageUtils'
 import { useToast } from 'vue-toastification'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
@@ -99,19 +93,19 @@ function saveNotificationInfo() {
 const getIcon = computed(() => {
   switch (props.notification.type) {
     case 'wechat':
-      return wechat_image
+      return getLogoUrl('wechat')
     case 'telegram':
-      return telegram_image
+      return getLogoUrl('telegram')
     case 'vocechat':
-      return vocechat_image
+      return getLogoUrl('vocechat')
     case 'synologychat':
-      return synologychat_image
+      return getLogoUrl('synologychat')
     case 'slack':
-      return slack_image
+      return getLogoUrl('slack')
     case 'webpush':
-      return chrome_image
+      return getLogoUrl('chrome')
     default:
-      return custom_image
+      return getLogoUrl('notification')
   }
 })
 

src/components/cards/PluginAppCard.vue

@@ -3,7 +3,7 @@ import { useToast } from 'vue-toastification'
 import VersionHistory from '../misc/VersionHistory.vue'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
-import noImage from '@images/logos/plugin.png'
+import { getLogoUrl } from '@/utils/imageUtils'
 import { getDominantColor } from '@/@core/utils/image'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
@@ -103,7 +103,7 @@ async function installPlugin() {
 
 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
-  if (imageLoadError.value) return noImage
+  if (imageLoadError.value) return getLogoUrl('plugin')
   // 如果是网络图片则使用代理后返回
   if (props.plugin?.plugin_icon?.startsWith('http'))
     return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(

src/components/cards/PluginCard.vue

@@ -4,7 +4,7 @@ import { useConfirm } from '@/composables/useConfirm'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
 import { isNullOrEmptyObject } from '@core/utils'
-import noImage from '@images/logos/plugin.png'
+import { getLogoUrl } from '@/utils/imageUtils'
 import { getDominantColor } from '@/@core/utils/image'
 import VersionHistory from '@/components/misc/VersionHistory.vue'
 import ProgressDialog from '../dialog/ProgressDialog.vue'
@@ -167,7 +167,7 @@ async function showPluginConfig() {
 
 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
-  if (imageLoadError.value) return noImage
+  if (imageLoadError.value) return getLogoUrl('plugin')
   // 如果是网络图片则使用代理后返回
   if (props.plugin?.plugin_icon?.startsWith('http'))
     return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(

src/components/cards/SiteCard.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import noImage from '@images/logos/site.webp'
+import { getLogoUrl } from '@/utils/imageUtils'
 import { useToast } from 'vue-toastification'
 import { useI18n } from 'vue-i18n'
 import SiteAddEditDialog from '../dialog/SiteAddEditDialog.vue'
@@ -62,7 +62,7 @@ async function getSiteIcon() {
   try {
     siteIcon.value = (await api.get(`site/icon/${cardProps.site?.id}`)).data.icon
     if (!siteIcon.value) {
-      siteIcon.value = noImage
+      siteIcon.value = getLogoUrl('site')
     }
   } catch (error) {
     console.error(error)