File size: 3,557 Bytes
8ede856 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | <script setup lang="ts">
import { ref, computed } from "vue";
import { getPlatformDisplayName, getPlatformIcon } from "@/utils/platformUtils";
import { useModuleI18n } from "@/i18n/composables";
const props = defineProps({
platforms: {
type: Array,
default: () => [],
},
size: {
type: String,
default: "small",
},
chipStyle: {
type: Object,
default: () => ({}),
},
});
const { tm } = useModuleI18n("features/extension");
const showMenu = ref(false);
const platformDetails = computed(() => {
if (!Array.isArray(props.platforms)) return [];
return props.platforms
.filter((item) => typeof item === "string")
.map((platformId) => ({
name: getPlatformDisplayName(platformId as string),
icon: getPlatformIcon(platformId as string),
}));
});
</script>
<template>
<div class="d-inline-block">
<v-chip
v-if="platformDetails.length"
color="info"
variant="outlined"
label
:size="size"
class="plugin-platform-chip"
:style="{ cursor: 'pointer', ...chipStyle }"
@click.stop="showMenu = !showMenu"
>
<div class="d-flex align-center" style="gap: 2px">
<!-- 显示图标，最多 5 个 -->
<div class="d-flex align-center mr-1" v-if="platformDetails.some(p => p.icon)">
<v-avatar
v-for="(platform, index) in platformDetails.slice(0, 5)"
:key="index"
:size="size === 'x-small' ? 12 : 14"
class="platform-mini-icon"
:style="{ marginLeft: index > 0 ? '-4px' : '0', zIndex: 10 - index }"
>
<v-img v-if="platform.icon" :src="platform.icon"></v-img>
<v-icon v-else icon="mdi-circle-small" :size="size === 'x-small' ? 8 : 10"></v-icon>
</v-avatar>
</div>
<span class="text-caption font-weight-bold">
{{
tm("card.status.supportPlatformsCount", {
count: platformDetails.length,
})
}}
</span>
<v-icon
:icon="showMenu ? 'mdi-chevron-up' : 'mdi-chevron-down'"
:size="size === 'x-small' ? 14 : 16"
class="ml-n1"
></v-icon>
</div>
<v-menu
v-model="showMenu"
activator="parent"
location="top"
:close-on-content-click="false"
transition="scale-transition"
open-on-hover
>
<v-list density="compact" border elevation="12" class="rounded-lg pa-1">
<v-list-item
v-for="platform in platformDetails"
:key="platform.name"
min-height="24"
class="px-2"
>
<template v-slot:prepend>
<v-avatar size="14" class="mr-2" v-if="platform.icon">
<v-img :src="platform.icon"></v-img>
</v-avatar>
<v-icon v-else icon="mdi-platform" size="12" class="mr-2"></v-icon>
</template>
<v-list-item-title class="text-caption font-weight-bold" style="font-size: 0.75rem !important">
{{ platform.name }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-chip>
</div>
</template>
<style scoped>
.plugin-platform-chip {
padding-left: 6px !important;
padding-right: 4px !important;
transition: all 0.2s ease;
}
.platform-mini-icon {
border: 1px solid rgba(var(--v-theme-info), 0.3);
background: rgba(var(--v-theme-surface));
}
.plugin-platform-chip:hover {
background: rgba(var(--v-theme-info), 0.08);
}
</style>
|