From 5e4d318a2aae5b7deee24b772eae1efd382496e8 Mon Sep 17 00:00:00 2001
From: saopig1 <saopig@duck.com>
Date: Mon, 30 Mar 2026 20:16:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=88=91=E7=9A=84=E6=AD=8C=E5=8D=95?=
 =?UTF-8?q?=E8=B6=85=E8=BF=8720=E4=B8=AA=E6=97=B6=E6=8A=98=E5=8F=A0?=
 =?UTF-8?q?=EF=BC=8C=E7=82=B9=E5=87=BB=E5=B1=95=E5=BC=80/=E6=94=B6?=
 =?UTF-8?q?=E8=B5=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/views/Home.vue | 51 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index e5a5964..7e78d50 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -81,10 +81,13 @@
 
     <!-- 我的歌单 -->
     <section class="section" v-if="store.userPlaylists.length > 0">
-      <h2 class="section-title">我的歌单</h2>
+      <h2 class="section-title">
+        我的歌单
+        <span class="section-count">{{ store.userPlaylists.length }}</span>
+      </h2>
       <div class="playlist-grid">
         <RouterLink
-          v-for="pl in store.userPlaylists"
+          v-for="pl in visibleUserPlaylists"
           :key="pl.id"
           :to="`/playlist/${pl.id}?platform=${pl.platform}`"
           class="playlist-card hover-scale"
@@ -94,6 +97,14 @@
           <div class="playlist-count">{{ pl.songCount }} 首</div>
         </RouterLink>
       </div>
+      <button
+        v-if="store.userPlaylists.length > USER_PLAYLIST_LIMIT"
+        class="expand-btn"
+        @click="userPlaylistsExpanded = !userPlaylistsExpanded"
+      >
+        <Icon :icon="userPlaylistsExpanded ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
+        {{ userPlaylistsExpanded ? '收起' : `展开全部 ${store.userPlaylists.length} 个歌单` }}
+      </button>
     </section>
 
     <!-- B站热门 -->
@@ -119,13 +130,20 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 import axios from 'axios';
 import { usePlayerStore, type Song } from '../stores/player.js';
 import CoverArt from '../components/CoverArt.vue';
 
 const store = usePlayerStore();
+const USER_PLAYLIST_LIMIT = 20;
+const userPlaylistsExpanded = ref(false);
+const visibleUserPlaylists = computed(() =>
+  userPlaylistsExpanded.value
+    ? store.userPlaylists
+    : store.userPlaylists.slice(0, USER_PLAYLIST_LIMIT)
+);
 
 async function playFm() {
   try {
@@ -207,6 +225,33 @@ onMounted(() => {
   gap: 8px;
 }
 
+.section-count {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-tertiary);
+}
+
+.expand-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  padding: 10px;
+  margin-top: 12px;
+  background: var(--bg-card);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+
+  &:hover {
+    background: var(--hover-bg);
+    color: var(--color-primary);
+  }
+}
+
 .bili-badge {
   display: inline-flex;
   align-items: center;