diff --git a/src/assets/images/logos/plugin.png b/src/assets/images/logos/plugin.png new file mode 100644 index 00000000..af049e27 Binary files /dev/null and b/src/assets/images/logos/plugin.png differ diff --git a/src/components/cards/PluginAppCard.vue b/src/components/cards/PluginAppCard.vue index 5cb7974e..0a566d81 100644 --- a/src/components/cards/PluginAppCard.vue +++ b/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 = 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 +})