feat(playlist): 优化歌单页面展示逻辑

- 移除歌单首歌曲数量的冗余展示
- 增加歌单总歌曲数量的展示
- 更新歌单列表和歌单详情页面的样式
- 在后端增加@EntityGraph注解，优化数据查询性能

music-houduan/src/main/java/com/test/musichouduan/repository/PlaylistRepository.java

@@ -7,6 +7,8 @@ import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
+import org.springframework.data.jpa.domain.Specification;
+import org.springframework.data.jpa.repository.EntityGraph;
 import org.springframework.data.jpa.repository.Query;
 import org.springframework.stereotype.Repository;
 
@@ -18,6 +20,9 @@ import java.util.List;
 @Repository
 public interface PlaylistRepository extends JpaRepository<Playlist, Long>, JpaSpecificationExecutor<Playlist> {
 
+    @EntityGraph(attributePaths = {"musics", "creator", "type"})
+    Page<Playlist> findAll(Specification<Playlist> spec, Pageable pageable);
+
     @Query("SELECT pt.name, COUNT(p) FROM Playlist p JOIN p.type pt GROUP BY pt.name")
     List<Object[]> countByPlaylistType();
 

music-qianduan/src/views/Playlist.vue

@@ -3,7 +3,7 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '../stores/user'
 import { ElMessage } from 'element-plus'
-import { Search } from '@element-plus/icons-vue'
+import { Search, Headset } from '@element-plus/icons-vue'
 import { getPlaylistList, getHotPlaylist, toggleCollectPlaylist, isPlaylistCollected, uncollectPlaylist, collectPlaylist } from '../api/playlist'
 import { getPlaylistTypeList } from '../api/playlistType'
 
@@ -259,6 +259,10 @@ onMounted(() => {
                 <el-icon><video-play /></el-icon>
                 {{ formatPlayCount(playlist.playCount) }}
               </div>
+              <div class="playlist-song-count">
+                <el-icon><Headset /></el-icon>
+                {{ playlist.musicCount || 0 }}
+              </div>
               <div class="playlist-actions">
                 <el-button
                   circle
@@ -279,7 +283,6 @@ onMounted(() => {
             <div class="playlist-desc">{{ playlist.description }}</div>
             <div class="playlist-creator">
               <span>by {{ playlist.creator?.username || '未知用户' }}</span>
-              <span>{{ playlist.songCount || 0 }}首歌曲</span>
             </div>
           </div>
         </div>
@@ -303,6 +306,10 @@ onMounted(() => {
                 <el-icon><video-play /></el-icon>
                 {{ formatPlayCount(playlist.playCount) }}
               </div>
+              <div class="playlist-song-count">
+                <el-icon><Headset /></el-icon>
+                {{ playlist.musicCount || 0 }}
+              </div>
               <div class="playlist-actions">
                 <el-button
                   circle
@@ -323,7 +330,6 @@ onMounted(() => {
             <div class="playlist-desc">{{ playlist.description }}</div>
             <div class="playlist-creator">
               <span>by {{ playlist.creator?.username || '未知用户' }}</span>
-              <span>{{ playlist.songCount || 0 }}首歌曲</span>
             </div>
           </div>
         </div>