feat 插件默认图标与背景色

src/components/cards/PluginAppCard.vue

@@ -2,6 +2,7 @@
 import { useToast } from 'vue-toast-notification'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
+import noImage from '@images/logos/plugin.png'
 
 // 输入参数
 const props = defineProps({
@@ -13,6 +14,9 @@ const props = defineProps({
 // 定义触发的自定义事件
 const emit = defineEmits(['install'])
 
+// 默认背景颜色
+const defaultBackgroundColor = '#28A9E1'
+
 // 提示框
 const $toast = useToast()
 
@@ -25,6 +29,9 @@ const progressText = ref('正在安装插件...')
 // 图片是否加载完成
 const isImageLoaded = ref(false)
 
+// 图片是否加载失败
+const imageLoadError = ref(false)
+
 // 安装插件
 async function installPlugin() {
   try {
@@ -61,11 +68,20 @@ async function installPlugin() {
 }
 
 // 计算图标路径
-const iconPath = computed(() => {
+const iconPath: Ref<string> = computed(() => {
+  if (imageLoadError.value)
+    return noImage
   return props.plugin?.plugin_icon?.startsWith('http')
     ? props.plugin?.plugin_icon
     : `/plugin_icon/${props.plugin?.plugin_icon}`
 })
+
+// 计算背景颜色
+const backgroundColor = computed(() => {
+  if (imageLoadError.value)
+    return defaultBackgroundColor
+  return props.plugin?.plugin_color
+})
 </script>
 
 <template>
@@ -76,7 +92,7 @@ const iconPath = computed(() => {
   >
     <div
       class="relative pa-4 text-center card-cover-blurred"
-      :style="{ background: `${props.plugin?.plugin_color}` }"
+      :style="{ background: `${backgroundColor}` }"
     >
       <div
         v-if="props.plugin?.has_update"
@@ -96,6 +112,7 @@ const iconPath = computed(() => {
           cover
           :class="{ shadow: isImageLoaded }"
           @load="isImageLoaded = true"
+          @error="imageLoadError = true"
         />
       </VAvatar>
     </div>

src/components/cards/PluginCard.vue

@@ -6,6 +6,7 @@ import type { Plugin } from '@/api/types'
 import FormRender from '@/components/render/FormRender.vue'
 import PageRender from '@/components/render/PageRender.vue'
 import { isNullOrEmptyObject } from '@core/utils'
+import noImage from '@images/logos/plugin.png'
 
 // 输入参数
 const props = defineProps({
@@ -17,6 +18,9 @@ const props = defineProps({
 // 定义触发的自定义事件
 const emit = defineEmits(['remove', 'save'])
 
+// 默认背景颜色
+const defaultBackgroundColor = '#28A9E1'
+
 // 提示框
 const $toast = useToast()
 
@@ -44,6 +48,9 @@ let pluginPageItems = reactive([])
 // 图片是否加载完成
 const isImageLoaded = ref(false)
 
+// 图片是否加载失败
+const imageLoadError = ref(false)
+
 // 调用API卸载插件
 async function uninstallPlugin() {
   const isConfirmed = await createConfirm({
@@ -157,12 +164,21 @@ async function showPluginConfig() {
 }
 
 // 计算图标路径
-const iconPath = computed(() => {
+const iconPath: Ref<string> = computed(() => {
+  if (imageLoadError.value)
+    return noImage
   return props.plugin?.plugin_icon?.startsWith('http')
     ? props.plugin?.plugin_icon
     : `/plugin_icon/${props.plugin?.plugin_icon}`
 })
 
+// 计算背景颜色
+const backgroundColor = computed(() => {
+  if (imageLoadError.value)
+    return defaultBackgroundColor
+  return props.plugin?.plugin_color
+})
+
 // 重置插件
 async function resetPlugin() {
   const isConfirmed = await createConfirm({
@@ -255,7 +271,7 @@ const dropdownItems = ref([
   >
     <div
       class="relative pa-4 text-center card-cover-blurred"
-      :style="{ background: `${props.plugin?.plugin_color}` }"
+      :style="{ background: `${backgroundColor}` }"
     >
       <div class="me-n3 absolute top-0 right-3">
         <IconBtn>
@@ -291,6 +307,7 @@ const dropdownItems = ref([
           cover
           :class="{ shadow: isImageLoaded }"
           @load="isImageLoaded = true"
+          @error="imageLoadError = true"
         />
       </VAvatar>
     </div>