refactor(components): 重构 MusicList 组件以支持更多操作

- 在 MusicList 组件中添加 detailInMore 属性，用于控制是否显示更多操作
- 在 PlaylistDetail 和 SingerDetail 页面中使用 MusicList 组件替换原有的表格展示
- 优化了歌曲列表的展示和操作逻辑，提高了代码复用性和可维护性

music-qianduan/src/components/MusicList.vue

@@ -83,6 +83,7 @@
           </el-button>
 
           <el-button
+            v-if="!detailInMore"
             circle
             size="small"
             @click="goToMusicDetail(item.id)"
@@ -101,6 +102,7 @@
                 <el-dropdown-item command="playNext">下一首播放</el-dropdown-item>
                 <el-dropdown-item command="downloadMusic">下载音乐</el-dropdown-item>
                 <el-dropdown-item command="downloadLyric">下载歌词</el-dropdown-item>
+                <el-dropdown-item v-if="detailInMore" command="goToMusicDetail">音乐详情</el-dropdown-item>
                 <el-dropdown-item command="share" v-if="false">分享</el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -155,6 +157,10 @@ const props = defineProps({
   pageSize: {
     type: Number,
     default: 10
+  },
+  detailInMore: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -265,6 +271,9 @@ const handleCommand = (command, music) => {
     case 'downloadLyric':
       downloadFile('lyric', music)
       break
+    case 'goToMusicDetail':
+      goToMusicDetail(music.id)
+      break
   }
 }
 

music-qianduan/src/views/PlaylistDetail.vue

@@ -9,6 +9,7 @@ import { getMusicStatus } from '../api/music'
 import { getCommentList, addComment, deleteComment as apiDeleteComment } from '../api/comment'
 import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket' // 导入 WebSocket 工具
 import { processImageUrl } from '../utils/imageUtils'
+import MusicList from '../components/MusicList.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -485,77 +486,12 @@ onUnmounted(() => {
       <!-- 歌曲列表和评论 -->
       <el-tabs class="playlist-tabs">
         <el-tab-pane label="歌曲列表">
-          <el-table
+          <MusicList
-            :data="playlist.songs"
+            :list="playlist.songs"
-            stripe
+            :loading="loading"
-            style="width: 100%"
+            :show-pagination="false"
-            @row-dblclick="playMusic"
+            :detail-in-more="true"
-          >
+          />
-            <el-table-column width="80" align="center">
-              <template #default="scope">
-                <el-button
-                  circle
-                  :icon="'VideoPlay'"
-                  size="small"
-                  @click="playMusic(scope.row)"
-                ></el-button>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="封面" width="80" align="center">
-              <template #default="scope">
-                <img
-                  :src="scope.row.cover"
-                  :alt="scope.row.name"
-                  class="song-cover"
-                >
-              </template>
-            </el-table-column>
-
-            <el-table-column prop="name" label="歌曲名" min-width="200"></el-table-column>
-
-            <el-table-column label="歌手" min-width="150">
-              <template #default="scope">
-                <span v-if="scope.row.singer">{{ scope.row.singer }}</span>
-                <span v-else-if="scope.row.singers && scope.row.singers.length">
-                  {{ scope.row.singers.map(s => s.name).join(', ') }}
-                </span>
-                <span v-else>未知歌手</span>
-              </template>
-            </el-table-column>
-
-            <el-table-column prop="album" label="专辑" min-width="150"></el-table-column>
-
-            <el-table-column prop="duration" label="时长" width="100" align="center">
-              <template #default="scope">
-                {{ formatTime(scope.row.duration) }}
-              </template>
-            </el-table-column>
-
-            <el-table-column label="操作" width="120" align="center">
-              <template #default="scope">
-                <el-dropdown trigger="click" @command="handleCommand($event, scope.row)">
-                  <el-button circle size="small">
-                    <el-icon><More /></el-icon>
-                  </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item command="addToPlaylist">添加到播放列表</el-dropdown-item>
-                      <el-dropdown-item command="playNext">下一首播放</el-dropdown-item>
-                      <el-dropdown-item command="downloadMusic">下载音乐</el-dropdown-item>
-                      <el-dropdown-item command="downloadLyric">下载歌词</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </template>
-            </el-table-column>
-          </el-table>
-
-          <!-- 空状态 -->
-          <el-empty
-            v-if="!playlist.songs.length"
-            description="歌单中暂无歌曲"
-          ></el-empty>
         </el-tab-pane>
 
         <el-tab-pane :label="`评论(${playlist.commentCount || 0})`">

music-qianduan/src/views/SingerDetail.vue

@@ -9,6 +9,7 @@ import { getCommentList, addComment, deleteComment as apiDeleteComment } from '.
 import { processImageUrl } from '../utils/imageUtils'
 import { processMusicUrl, getMusicBySinger, getMusicStatus } from '../api/music'
 import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket' // 导入 WebSocket 工具
+import MusicList from '../components/MusicList.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -501,72 +502,12 @@ onUnmounted(() => {
       <!-- 歌曲列表、专辑和评论 -->
       <el-tabs class="singer-tabs">
         <el-tab-pane label="热门歌曲">
-          <el-table
+          <MusicList
-            :data="songs"
+            :list="songs"
-            stripe
+            :loading="loading"
-            style="width: 100%"
+            :show-pagination="false"
-            @row-dblclick="playMusic"
+            :detail-in-more="true"
-          >
+          />
-            <el-table-column width="80" align="center">
-              <template #default="scope">
-                <el-button
-                  circle
-                  :icon="'VideoPlay'"
-                  size="small"
-                  @click="playMusic(scope.row)"
-                ></el-button>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="封面" width="80" align="center">
-              <template #default="scope">
-                <img
-                  :src="scope.row.cover"
-                  :alt="scope.row.name"
-                  class="song-cover"
-                >
-              </template>
-            </el-table-column>
-
-            <el-table-column prop="name" label="歌曲名" min-width="200"></el-table-column>
-
-            <el-table-column label="专辑" min-width="150">
-              <template #default="scope">
-                <span v-if="scope.row.album">{{ scope.row.album }}</span>
-                <span v-else>无专辑信息</span>
-              </template>
-            </el-table-column>
-
-            <el-table-column prop="duration" label="时长" width="100" align="center">
-              <template #default="scope">
-                {{ formatTime(scope.row.duration) }}
-              </template>
-            </el-table-column>
-
-            <el-table-column label="操作" width="120" align="center">
-              <template #default="scope">
-                <el-dropdown trigger="click" @command="handleCommand($event, scope.row)">
-                  <el-button circle size="small">
-                    <el-icon><More /></el-icon>
-                  </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item command="addToPlaylist">添加到播放列表</el-dropdown-item>
-                      <el-dropdown-item command="playNext">下一首播放</el-dropdown-item>
-                      <el-dropdown-item command="downloadMusic">下载音乐</el-dropdown-item>
-                      <el-dropdown-item command="downloadLyric">下载歌词</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </template>
-            </el-table-column>
-          </el-table>
-
-          <!-- 空状态 -->
-          <el-empty
-            v-if="!songs.length"
-            description="暂无歌曲"
-          ></el-empty>
         </el-tab-pane>