mirror of
https://github.com/ZHANGTIANYAO1/teamspeak-music-bot.git
synced 2026-10-02 04:52:50 +08:00
feat(web): add platform badges to album and playlist cards in search
Album and playlist results now show source tags (网易云, QQ, B站, YouTube) matching the existing SongCard platform badge style. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
1 parent
1d2da33d3c
commit
ea6501ea81
1 file changed
+52
-2
@@ -31,7 +31,10 @@
|
|||||||
class="card hover-scale"
|
class="card hover-scale"
|
||||||
>
|
>
|
||||||
<CoverArt :url="al.coverUrl" :size="160" :radius="10" :show-shadow="true" />
|
<CoverArt :url="al.coverUrl" :size="160" :radius="10" :show-shadow="true" />
|
||||||
<div class="card-name">{{ al.name }}</div>
|
<div class="card-name">
|
||||||
|
{{ al.name }}
|
||||||
|
<span class="platform-badge" :class="badgeClass(al.platform)">{{ badgeLabel(al.platform) }}</span>
|
||||||
|
</div>
|
||||||
<div class="card-sub">{{ al.artist }}</div>
|
<div class="card-sub">{{ al.artist }}</div>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
@@ -47,7 +50,10 @@
|
|||||||
class="card hover-scale"
|
class="card hover-scale"
|
||||||
>
|
>
|
||||||
<CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
|
<CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
|
||||||
<div class="card-name">{{ pl.name }}</div>
|
<div class="card-name">
|
||||||
|
{{ pl.name }}
|
||||||
|
<span class="platform-badge" :class="badgeClass(pl.platform)">{{ badgeLabel(pl.platform) }}</span>
|
||||||
|
</div>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -111,6 +117,20 @@ async function doSearch() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function badgeLabel(platform: string): string {
|
||||||
|
if (platform === 'qq') return 'QQ';
|
||||||
|
if (platform === 'bilibili') return 'B站';
|
||||||
|
if (platform === 'youtube') return 'YouTube';
|
||||||
|
return '网易云';
|
||||||
|
}
|
||||||
|
|
||||||
|
function badgeClass(platform: string): string {
|
||||||
|
if (platform === 'qq') return 'badge-qq';
|
||||||
|
if (platform === 'bilibili') return 'badge-bilibili';
|
||||||
|
if (platform === 'youtube') return 'badge-youtube';
|
||||||
|
return 'badge-netease';
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (query.value) doSearch();
|
if (query.value) doSearch();
|
||||||
});
|
});
|
||||||
@@ -198,4 +218,34 @@ onMounted(() => {
|
|||||||
.card-name { font-size: 14px; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
|
.card-name { font-size: 14px; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
|
||||||
.card-sub { font-size: 12px; opacity: 0.6; }
|
.card-sub { font-size: 12px; opacity: 0.6; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.platform-badge {
|
||||||
|
vertical-align: middle;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: var(--fs-micro);
|
||||||
|
font-weight: var(--fw-semi);
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: var(--radius-xs);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-netease {
|
||||||
|
background: var(--brand-netease-15);
|
||||||
|
color: var(--brand-netease);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-qq {
|
||||||
|
background: var(--brand-qq-15);
|
||||||
|
color: var(--brand-qq);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-bilibili {
|
||||||
|
background: var(--brand-bilibili-15);
|
||||||
|
color: var(--brand-bilibili);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-youtube {
|
||||||
|
background: var(--brand-youtube-12);
|
||||||
|
color: var(--brand-youtube);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in new issue
Block a user