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

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

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
-            :data="songs"
-            stripe
-            style="width: 100%"
-            @row-dblclick="playMusic"
-          >
-            <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>
+          <MusicList
+            :list="songs"
+            :loading="loading"
+            :show-pagination="false"
+            :detail-in-more="true"
+          />
         </el-tab-pane>