From 7950a128557c06df446b126bc0d8705a08dd226a Mon Sep 17 00:00:00 2001
From: ikmkj <1@qq,com>
Date: Mon, 28 Jul 2025 21:22:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(playlist):=20=E4=BC=98=E5=8C=96=E6=AD=8C?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B5=E9=9D=A2=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除歌单首歌曲数量的冗余展示
- 增加歌单总歌曲数量的展示
- 更新歌单列表和歌单详情页面的样式
- 在后端增加@EntityGraph注解，优化数据查询性能
---
 .../musichouduan/repository/PlaylistRepository.java  |  5 +++++
 music-qianduan/src/views/Playlist.vue                | 12 +++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/music-houduan/src/main/java/com/test/musichouduan/repository/PlaylistRepository.java b/music-houduan/src/main/java/com/test/musichouduan/repository/PlaylistRepository.java
index 6ed73d4..e3bc8e0 100644
--- a/music-houduan/src/main/java/com/test/musichouduan/repository/PlaylistRepository.java
+++ b/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();
 
diff --git a/music-qianduan/src/views/Playlist.vue b/music-qianduan/src/views/Playlist.vue
index f1b6a73..40f55cb 100644
--- a/music-qianduan/src/views/Playlist.vue
+++ b/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>