minnan-demo-app/src/components/AppListItem.vue

<template>
  <div class="app-item" :class="{ active: activeAppId === app.id }" @click="emit('selectApp', app)">
    <img :src="useDefaultIcon ? vueIcon : iconUrl" alt="应用图标" @error="useDefaultIcon = true" />
    {{ app.title }}
  </div>
</template>

<script setup lang="ts">
import { computed, PropType, ref } from 'vue';
import { AppItem } from '../model/App';
import vueIcon from '../assets/vue.svg';

const emit = defineEmits(['selectApp']);

const props = defineProps({
  app: {
    type: Object as PropType<AppItem>,
    default: () => {},
  },
  activeAppId: {
    type: Number,
    default: 0,
  }
})
const iconUrl = computed(() => {
  if (!props.app.url)
    return '';
  const parsedUrl = new URL(props.app.url);
  return `${parsedUrl.origin}/favicon.ico`
})

const useDefaultIcon = ref(false);

</script>