From ea6501ea81d2e7e0afb43a1c1c3077b6690f483d Mon Sep 17 00:00:00 2001
From: NoSetViolin <heifetzbravo123@hotmail.com>
Date: Thu, 14 May 2026 16:34:26 +0800
Subject: [PATCH] feat(web): add platform badges to album and playlist cards in
 search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 web/src/views/Search.vue | 54 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 2 deletions(-)

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"
           >
             <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>
           </router-link>
         </div>
@@ -47,7 +50,10 @@
             class="card hover-scale"
           >
             <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>
         </div>
       </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(() => {
   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);
+}
 </style>