diff --git a/web/src/views/Search.vue b/web/src/views/Search.vue
index 8822277..6d91a3d 100644
--- a/web/src/views/Search.vue
+++ b/web/src/views/Search.vue
@@ -31,7 +31,10 @@
class="card hover-scale"
>
-
{{ al.name }}
+
+ {{ al.name }}
+ {{ badgeLabel(al.platform) }}
+
{{ al.artist }}
@@ -47,7 +50,10 @@
class="card hover-scale"
>
- {{ pl.name }}
+
+ {{ pl.name }}
+ {{ badgeLabel(pl.platform) }}
+
@@ -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(() => {
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-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);
+}