feat(components): 优化多个组件的样式和功能

- 调整了多个组件的背景色、文字颜色等样式
- 优化了部分组件的布局结构
- 改进了搜索历史、播放列表等组件的交互逻辑
- 统一了部分UI元素的样式

index.html

@@ -8,6 +8,7 @@
   <!-- PWA相关 -->
   <link rel="icon" href="/favicon.svg">
   <link rel="apple-touch-icon" href="/icons/apple-touch-icon.svg">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="apple-mobile-web-app-title" content="云音乐">

src/components/favorites/FavoriteItem.vue

@@ -10,7 +10,7 @@
     <!-- 专辑封面 -->
     <div class="album-cover">
       <img 
-        :src="albumCoverUrl" 
+        :src="actualCoverUrl" 
         :alt="song.album"
         @error="handleImageError"
         loading="lazy"
@@ -76,7 +76,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { usePlayerStore } from '@/stores/player'
 import { useHistoryStore } from '@/stores/history'
 import FavoriteButton from './FavoriteButton.vue'
@@ -122,12 +122,25 @@ const historyStore = useHistoryStore()
 const showMenu = ref(false)
 const showPlaylistSelector = ref(false)
 
-// 专辑封面URL
-const albumCoverUrl = computed(() => {
+// 异步获取封面URL
+const actualCoverUrl = ref('/default-album.png')
+const loadCoverUrl = async () => {
   if (props.song.pic_id) {
-    return `https://music-api.gdstudio.xyz/api.php?types=pic&source=${props.song.source}&id=${props.song.pic_id}&size=300`
+    try {
+      const { getCachedMusicPicUrlWithDelay } = await import('@/utils/musicPicCache.js')
+      const url = await getCachedMusicPicUrlWithDelay(props.song.source, props.song.pic_id, 300)
+      if (url) {
+        actualCoverUrl.value = url
+      }
+    } catch (error) {
+      console.error('加载封面失败:', error)
+    }
   }
-  return '/default-album.png'
+}
+
+// 组件挂载时加载封面
+onMounted(() => {
+  loadCoverUrl()
 })
 
 // 是否是当前播放歌曲
@@ -285,17 +298,17 @@ document.addEventListener('click', () => {
 }
 
 .favorite-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-gradient-1);
   border-bottom: 1px solid var(--border-light);
 }
 
 .favorite-item.playing {
-  background: rgba(255, 107, 107, 0.1);
+  background: var(--bg-gradient-1);
   border-bottom: 1px solid var(--accent-red);
 }
 
 .favorite-item.selected {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--bg-gradient-1);
   border-bottom: 1px solid var(--border-light);
 }
 

src/components/favorites/FavoritesList.vue

@@ -10,15 +10,15 @@
         </h2>
         <p class="list-subtitle">{{ totalDuration }} • {{ lastUpdateText }}</p>
       </div>
-      
+
       <div class="header-actions">
         <button class="play-all-btn" @click="playAll" :disabled="favoritesList.length === 0">
           <i class="fas fa-play"></i>
           播放全部
         </button>
-        
-        <button 
-          class="batch-btn" 
+
+        <button
+          class="batch-btn"
           :class="{ 'active': batchMode }"
           @click="toggleBatchMode"
         >
@@ -27,51 +27,51 @@
         </button>
       </div>
     </div>
-    
+
     <!-- 搜索栏 -->
     <div class="search-bar" v-if="showSearch && favoritesList.length > 0">
       <div class="search-input-wrapper">
         <i class="fas fa-search"></i>
-        <input 
-          type="text" 
+        <input
+          type="text"
           v-model="searchQuery"
           placeholder="搜索收藏的歌曲..."
           class="search-input"
           @input="handleSearch"
         >
-        <button 
-          v-if="searchQuery" 
+        <button
+          v-if="searchQuery"
           class="clear-search-btn"
           @click="clearSearch"
         >
           <i class="fas fa-times"></i>
         </button>
       </div>
-      
+
       <!-- 搜索过滤器 -->
       <div class="search-filters" v-if="searchQuery">
-        <button 
+        <button
           class="filter-btn"
           :class="{ 'active': searchFilter === 'all' }"
           @click="setSearchFilter('all')"
         >
           全部
         </button>
-        <button 
+        <button
           class="filter-btn"
           :class="{ 'active': searchFilter === 'name' }"
           @click="setSearchFilter('name')"
         >
           歌名
         </button>
-        <button 
+        <button
           class="filter-btn"
           :class="{ 'active': searchFilter === 'artist' }"
           @click="setSearchFilter('artist')"
         >
           歌手
         </button>
-        <button 
+        <button
           class="filter-btn"
           :class="{ 'active': searchFilter === 'album' }"
           @click="setSearchFilter('album')"
@@ -80,7 +80,7 @@
         </button>
       </div>
     </div>
-    
+
     <!-- 批量操作栏 -->
     <div class="batch-actions" v-if="batchMode && selectedItems.length > 0">
       <div class="batch-info">
@@ -92,7 +92,7 @@
         <button @click="batchRemove" class="danger">删除选中</button>
       </div>
     </div>
-    
+
     <!-- 排序选项 -->
     <div class="sort-options" v-if="favoritesList.length > 0">
       <label class="sort-label">排序方式:</label>
@@ -102,7 +102,7 @@
         <option value="artist">歌手</option>
         <option value="playCount">播放次数</option>
       </select>
-      <button 
+      <button
         class="sort-order-btn"
         @click="toggleSortOrder"
         :title="sortOrder === 'desc' ? '降序' : '升序'"
@@ -110,34 +110,34 @@
         <i :class="sortOrder === 'desc' ? 'fas fa-sort-amount-down' : 'fas fa-sort-amount-up'"></i>
       </button>
     </div>
-    
+
     <!-- 歌曲列表 -->
     <div class="favorites-content">
       <div v-if="loading" class="loading-container">
         <Loading text="加载收藏列表..." />
       </div>
-      
+
       <div v-else-if="filteredList.length === 0 && !loading" class="empty-container">
-        <Empty 
+        <Empty
           v-if="favoritesList.length === 0"
           icon="fas fa-heart"
           title="还没有收藏歌曲"
           subtitle="在搜索结果中点击爱心收藏喜欢的歌曲"
         />
-        <Empty 
+        <Empty
           v-else
           icon="fas fa-search"
           title="没有找到相关歌曲"
           :subtitle="'没有找到包含「' + searchQuery + '」的歌曲'"
         />
       </div>
-      
+
       <div v-else class="favorites-items">
         <!-- 批量选择模式 -->
         <div v-if="batchMode" class="batch-select-all">
           <label class="checkbox-wrapper">
-            <input 
-              type="checkbox" 
+            <input
+              type="checkbox"
               :checked="isAllSelected"
               :indeterminate="isIndeterminate"
               @change="toggleSelectAll"
@@ -145,10 +145,10 @@
             <span class="checkbox-text">全选 ({{ selectedItems.length }}/{{ filteredList.length }})</span>
           </label>
         </div>
-        
+
         <!-- 歌曲项列表 -->
         <div class="song-items">
-          <div 
+          <div
             v-for="(item, index) in paginatedList"
             :key="item?.song?.id || `item-${index}`"
             class="song-item-wrapper"
@@ -156,16 +156,16 @@
           >
             <!-- 批量选择复选框 -->
             <label v-if="batchMode" class="item-checkbox">
-              <input 
+              <input
                 type="checkbox"
                 :value="item.song.id"
                 v-model="selectedItems"
                 @change="handleItemSelect"
               >
             </label>
-            
+
             <!-- 歌曲项 -->
-            <FavoriteItem 
+            <FavoriteItem
               :song="item.song"
               :favorite-time="item.favoriteTime"
               :play-count="getPlayCount(item.song.id)"
@@ -176,7 +176,7 @@
             />
           </div>
         </div>
-        
+
         <!-- 加载更多 -->
         <div class="load-more" v-if="hasMore">
           <button class="load-more-btn" @click="loadMore" :disabled="loadingMore">
@@ -187,7 +187,7 @@
         </div>
       </div>
     </div>
-    
+
     <!-- 确认对话框 -->
     <ConfirmDialog
       ref="confirmDialogRef"
@@ -216,13 +216,13 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
-  
+
   // 初始显示数量
   initialCount: {
     type: Number,
     default: 20
   },
-  
+
   // 每次加载数量
   loadCount: {
     type: Number,
@@ -255,7 +255,7 @@ const favoritesList = computed(() => {
 
 const filteredList = computed(() => {
   let result = [...favoritesList.value]
-  
+
   // 搜索过滤
   if (searchQuery.value) {
     const query = searchQuery.value.toLowerCase()
@@ -264,7 +264,7 @@ const filteredList = computed(() => {
       const name = (song.name || '').toLowerCase()
       const artist = formatArtist(song.artist).toLowerCase()
       const album = (song.album || '').toLowerCase()
-      
+
       switch (searchFilter.value) {
         case 'name':
           return name.includes(query)
@@ -277,11 +277,11 @@ const filteredList = computed(() => {
       }
     })
   }
-  
+
   // 排序
   result.sort((a, b) => {
     let valueA, valueB
-    
+
     switch (sortBy.value) {
       case 'name':
         valueA = a.song.name || ''
@@ -299,14 +299,14 @@ const filteredList = computed(() => {
         valueA = a.favoriteTime
         valueB = b.favoriteTime
     }
-    
+
     if (sortOrder.value === 'desc') {
       return valueB > valueA ? 1 : valueB < valueA ? -1 : 0
     } else {
       return valueA > valueB ? 1 : valueA < valueB ? -1 : 0
     }
   })
-  
+
   return result
 })
 
@@ -325,11 +325,11 @@ const totalDuration = computed(() => {
 
 const lastUpdateText = computed(() => {
   if (favoritesList.value.length === 0) return ''
-  
+
   const latest = Math.max(...favoritesList.value.map(item => item.favoriteTime))
   const now = Date.now()
   const diff = now - latest
-  
+
   if (diff < 3600000) {
     return '最近更新'
   } else if (diff < 86400000) {
@@ -384,7 +384,7 @@ const toggleSortOrder = () => {
 
 const loadMore = async () => {
   loadingMore.value = true
-  
+
   setTimeout(() => {
     displayCount.value += props.loadCount
     loadingMore.value = false
@@ -393,7 +393,7 @@ const loadMore = async () => {
 
 const playAll = () => {
   if (filteredList.value.length === 0) return
-  
+
   const songs = filteredList.value.map(item => item.song)
   playerStore.playPlaylist(songs)
   emit('play', songs)
@@ -420,7 +420,7 @@ const batchPlay = () => {
   const songs = filteredList.value
     .filter(item => selectedItems.value.includes(item.song.id))
     .map(item => item.song)
-  
+
   if (songs.length > 0) {
     playerStore.playPlaylist(songs)
     emit('batch-action', { action: 'play', songs })
@@ -431,7 +431,7 @@ const batchAddToPlaylist = () => {
   const songs = filteredList.value
     .filter(item => selectedItems.value.includes(item.song.id))
     .map(item => item.song)
-  
+
   if (songs.length > 0) {
     emit('batch-action', { action: 'add-to-playlist', songs })
   }
@@ -484,7 +484,7 @@ onMounted(async () => {
 watch(favoritesList, () => {
   if (batchMode.value) {
     // 过滤掉不存在的选中项
-    selectedItems.value = selectedItems.value.filter(id => 
+    selectedItems.value = selectedItems.value.filter(id =>
       favoritesList.value.some(item => item.song.id === id)
     )
   }
@@ -604,7 +604,7 @@ watch(favoritesList, () => {
   width: 100%;
   height: 40px;
   border: none;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
   border-radius: 20px;
   padding: 0 40px;
   color: var(--text-primary);
@@ -654,7 +654,7 @@ watch(favoritesList, () => {
 }
 
 .filter-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
 }
 
 .filter-btn.active {
@@ -668,7 +668,7 @@ watch(favoritesList, () => {
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  background: rgba(255, 107, 107, 0.1);
+  background: var(--bg-gradient-3);
   border-bottom: 1px solid var(--border-light);
   margin: 0 16px;
   border-left: 1px solid var(--border-light);
@@ -729,7 +729,7 @@ watch(favoritesList, () => {
 
 .sort-select {
   border: none;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
   color: var(--text-primary);
   border-radius: 6px;
   padding: 4px 8px;
@@ -749,7 +749,7 @@ watch(favoritesList, () => {
 }
 
 .sort-order-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--overlay-light);
   color: var(--text-primary);
 }
 
@@ -808,7 +808,7 @@ watch(favoritesList, () => {
   gap: 8px;
   padding: 10px 20px;
   border: none;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
   color: var(--text-secondary);
   border-radius: 20px;
   font-size: 12px;
@@ -835,17 +835,17 @@ watch(favoritesList, () => {
     padding: 16px 12px;
     margin: 0 12px;
   }
-  
+
   .header-actions {
     width: 100%;
     justify-content: flex-end;
   }
-  
+
   .search-bar {
     padding: 12px;
     margin: 0 12px;
   }
-  
+
   .batch-actions {
     flex-direction: column;
     align-items: flex-start;
@@ -853,18 +853,18 @@ watch(favoritesList, () => {
     padding: 12px;
     margin: 0 12px;
   }
-  
+
   .batch-buttons {
     width: 100%;
     justify-content: flex-end;
   }
-  
+
   .sort-options {
     margin: 0 12px;
   }
-  
+
   .batch-select-all {
     margin: 0 12px;
   }
 }
-</style>
+</style>

src/components/layout/SearchHeader.vue

@@ -454,7 +454,7 @@ defineExpose({
   gap: 4px;
   padding: 8px 12px;
   border: none;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-light);
   color: var(--text-secondary);
   border-radius: 16px;
   font-size: 12px;
@@ -465,7 +465,7 @@ defineExpose({
 }
 
 .source-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--overlay-light);
   color: var(--text-primary);
 }
 
@@ -506,7 +506,7 @@ defineExpose({
 
 .suggestion-item:hover,
 .suggestion-item.active {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-light);
 }
 
 .suggestion-item i:first-child {
@@ -620,5 +620,4 @@ defineExpose({
   to {
     transform: translateY(-50%) rotate(360deg);
   }
-}
-</style>
+}

src/components/player/MoreActionsPanel.vue

@@ -3,49 +3,49 @@
     <div class="more-actions-panel" @click.stop>
       <!-- 歌曲信息 -->
       <div v-if="song" class="song-info">
-        <img 
-          :src="song.cover || defaultCover" 
+        <img
+          :src="song.cover || defaultCover"
           :alt="song.name"
           class="song-cover"
         />
-        
+
         <div class="song-details">
           <div class="song-name">{{ song.name }}</div>
           <div class="song-artist">{{ song.artist }}</div>
           <div class="song-album" v-if="song.album">{{ song.album }}</div>
         </div>
       </div>
-      
+
       <!-- 操作按钮列表 -->
       <div class="actions-list">
-        <button 
-          class="action-item" 
+        <button
+          class="action-item"
           @click="handleAction('favorite')"
           :class="{ active: isFavorite }"
         >
           <i :class="isFavorite ? 'fas fa-heart' : 'far fa-heart'"></i>
           <span>{{ isFavorite ? '取消收藏' : '添加到我的收藏' }}</span>
         </button>
-        
+
         <button class="action-item" @click="handleAction('addToPlaylist')">
           <i class="fas fa-plus"></i>
-          <span>添加到播放列表</span>
+          <span>添加到歌单</span>
         </button>
-        
+
         <button class="action-item" @click="handleAction('download')">
           <i class="fas fa-download"></i>
           <span>下载到本地</span>
         </button>
       </div>
-      
+
       <!-- 取消按钮 -->
       <button class="cancel-btn" @click="$emit('close')">
         取消
       </button>
     </div>
-    
+
     <!-- 播放列表选择对话框 -->
-    <PlaylistSelector 
+    <PlaylistSelector
       :show="showPlaylistSelector"
       :song="song"
       @close="closePlaylistSelector"
@@ -83,7 +83,7 @@ const defaultCover = computed(() => {
 // 方法
 const handleAction = async (action) => {
   if (!props.song && action !== 'close') return
-  
+
   switch (action) {
     case 'favorite':
       try {
@@ -96,12 +96,12 @@ const handleAction = async (action) => {
         console.error('收藏操作失败:', error)
       }
       break
-      
+
     case 'addToPlaylist':
       // 打开播放列表选择器
       showPlaylistSelector.value = true
       break
-      
+
     case 'download':
       // 实现下载功能
       try {
@@ -119,7 +119,7 @@ const handleAction = async (action) => {
       }
       break
   }
-  
+
   emit('action', action)
 }
 
@@ -128,9 +128,9 @@ const closePlaylistSelector = () => {
   showPlaylistSelector.value = false
 }
 
-// 处理添加到播放列表成功
+// 处理添加到歌单成功
 const handleAddedToPlaylist = (data) => {
-  console.log('歌曲已添加到播放列表:', data.message)
+  console.log('歌曲已添加到歌单:', data.message)
   // 关闭当前面板
   emit('close')
 }
@@ -228,7 +228,7 @@ const handleAddedToPlaylist = (data) => {
 }
 
 .action-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
 }
 
 .action-item:active {
@@ -287,35 +287,35 @@ const handleAddedToPlaylist = (data) => {
   .song-info {
     padding: 20px 16px 16px;
   }
-  
+
   .song-cover {
     width: 56px;
     height: 56px;
     border-radius: 10px;
   }
-  
+
   .song-name {
     font-size: 16px;
   }
-  
+
   .song-artist {
     font-size: 13px;
   }
-  
+
   .song-album {
     font-size: 11px;
   }
-  
+
   .action-item {
     padding: 14px 16px;
     font-size: 15px;
   }
-  
+
   .action-item i {
     width: 18px;
     font-size: 15px;
   }
-  
+
   .cancel-btn {
     width: calc(100% - 32px);
     margin: 16px 16px 0;
@@ -330,26 +330,26 @@ const handleAddedToPlaylist = (data) => {
     margin: 0 auto 0;
     border-radius: 16px;
   }
-  
+
   .more-actions-overlay {
     align-items: center;
     padding: 20px;
   }
-  
+
   .song-info {
     padding: 28px 24px 24px;
   }
-  
+
   .song-cover {
     width: 72px;
     height: 72px;
     border-radius: 14px;
   }
-  
+
   .action-item {
     padding: 18px 24px;
   }
-  
+
   .cancel-btn {
     width: calc(100% - 48px);
     margin: 20px 24px 0;
@@ -385,4 +385,4 @@ const handleAddedToPlaylist = (data) => {
     transform: scale(0.98);
   }
 }
-</style>
+</style>

src/components/player/PlayControls.vue

@@ -41,7 +41,7 @@
     <button 
       class="control-btn playlist-btn"
       @click="$emit('showPlaylist')"
-      title="播放队列"
+      title="播放列表"
     >
       <i class="fas fa-list"></i>
       <span v-if="playlistCount > 0" class="playlist-count">{{ playlistCount }}</span>

src/components/player/PlaylistPanel.vue

@@ -4,7 +4,7 @@
       <!-- 头部 -->
       <div class="panel-header">
         <div class="panel-title">
-          <h3>播放队列</h3>
+          <h3>播放列表</h3>
           <span class="song-count">{{ playlist.length }}首歌曲</span>
         </div>
         
@@ -23,37 +23,12 @@
         </div>
       </div>
       
-      <!-- 当前播放 -->
-      <div v-if="currentSong" class="current-playing">
-        <div class="section-title">
-          <i class="fas fa-play"></i>
-          <span>正在播放</span>
-        </div>
-        
-        <div class="current-song">
-          <img 
-            :src="currentSong.cover || defaultCover" 
-            :alt="currentSong.name"
-            class="song-cover"
-          />
-          
-          <div class="song-details">
-            <div class="song-name">{{ currentSong.name }}</div>
-            <div class="song-artist">{{ formatArtist(currentSong.artist) }}</div>
-          </div>
-          
-          <div class="song-status">
-            <i v-if="isPlaying" class="fas fa-volume-up playing-icon"></i>
-            <i v-else class="fas fa-pause"></i>
-          </div>
-        </div>
-      </div>
       
       <!-- 播放列表 -->
       <div class="playlist-content">
         <div v-if="!playlist.length" class="empty-playlist">
           <i class="fas fa-music"></i>
-          <p>播放队列为空</p>
+          <p>播放列表为空</p>
           <button class="add-music-btn" @click="$emit('close')">
             去添加音乐
           </button>
@@ -65,52 +40,17 @@
             <span>下一首播放</span>
           </div>
           
-          <div 
-            v-for="(song, index) in playlist"
-            :key="`${song.id}-${index}`"
-            class="playlist-item"
-            :class="{ 
-              active: index === currentIndex,
-              playing: index === currentIndex && isPlaying
-            }"
-            @click="handleSongClick(song, index)"
-          >
-            <div class="item-index">
-              <span v-if="index !== currentIndex">{{ index + 1 }}</span>
-              <i v-else-if="isPlaying" class="fas fa-volume-up playing-icon"></i>
-              <i v-else class="fas fa-pause"></i>
-            </div>
-            
-            <img 
-              :src="song.cover || defaultCover" 
-              :alt="song.name"
-              class="item-cover"
-              @error="handleImageError"
-            />
-            
-            <div class="item-details">
-              <div class="item-name">{{ song.name }}</div>
-              <div class="item-artist">{{ formatArtist(song.artist) }}</div>
-            </div>
-            
-            <div class="item-actions">
-              <button 
-                class="item-action-btn" 
-                @click.stop="toggleFavorite(song)"
-                :class="{ active: isFavorite(song.id) }"
-              >
-                <i :class="isFavorite(song.id) ? 'fas fa-heart' : 'far fa-heart'"></i>
-              </button>
-              
-              <button 
-                class="item-action-btn" 
-                @click.stop="handleRemove(index)"
-                :disabled="playlist.length <= 1"
-              >
-                <i class="fas fa-times"></i>
-              </button>
-            </div>
-          </div>
+          <SongItem
+                      v-for="(song, index) in playlist"
+                      :key="`${song.id}-${index}`"
+                      :song="song"
+                      :index="index"
+                      :cover="song.cover"
+                      :show-remove="true"
+                      :show-actions="false"
+                      @play="handleSongClick"
+                      @remove="handleRemove"
+                    />
         </div>
       </div>
     </div>
@@ -118,8 +58,8 @@
     <!-- 确认对话框 -->
     <ConfirmDialog
       ref="confirmDialog"
-      title="清空播放队列"
-      message="确定要清空播放队列吗？"
+      title="清空播放列表"
+      message="确定要清空播放列表吗？"
       confirm-text="清空"
       cancel-text="取消"
       type="danger"
@@ -136,6 +76,7 @@ import { useFavoritesStore } from '@/stores/favorites'
 import { usePlayQueueStore } from '@/stores/playqueue'
 import { utils } from '@/services/musicApi'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+import SongItem from '@/components/search/SongItem.vue'
 
 const emit = defineEmits(['close', 'play', 'remove'])
 
@@ -145,11 +86,11 @@ const playQueueStore = usePlayQueueStore()
 const confirmDialog = ref(null)
 
 // 计算属性
-const playlist = computed(() => playerStore.playlist)
-const currentSong = computed(() => playerStore.currentSong)
-const currentIndex = computed(() => playerStore.currentIndex)
+const playlist = computed(() => playQueueStore.queue)
+const currentSong = computed(() => playQueueStore.currentSong)
+const currentIndex = computed(() => playQueueStore.currentIndex)
 const isPlaying = computed(() => playerStore.isPlaying)
-const playMode = computed(() => playerStore.playMode)
+const playMode = computed(() => playQueueStore.playMode)
 
 const nextSongs = computed(() => {
   if (currentIndex.value < 0) return playlist.value
@@ -180,10 +121,6 @@ const playModeText = computed(() => {
   }
 })
 
-const defaultCover = computed(() => {
-  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSI4Ii8+CjxwYXRoIGQ9Ik0zMiAyMkwzNiAzMkgzNFYzOEgzMFYzMkgyOEwzMiAyMloiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4zKSIvPgo8L3N2Zz4K'
-})
-
 // 方法
 const handleSongClick = (song, index) => {
   emit('play', song, index)
@@ -194,7 +131,7 @@ const handleRemove = (index) => {
 }
 
 const togglePlayMode = () => {
-  playerStore.togglePlayMode()
+  playQueueStore.togglePlayMode()
 }
 
 const clearPlaylist = () => {
@@ -226,10 +163,6 @@ const isFavorite = (songId) => {
   return favoritesStore.isFavorite(songId)
 }
 
-const handleImageError = (event) => {
-  event.target.src = defaultCover.value
-}
-
 const formatArtist = (artist) => {
   return utils.formatArtist(artist)
 }
@@ -314,76 +247,6 @@ const formatArtist = (artist) => {
   cursor: not-allowed;
 }
 
-.current-playing {
-  padding: 16px 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  flex-shrink: 0;
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  margin-bottom: 12px;
-}
-
-.section-title i {
-  font-size: 12px;
-}
-
-.current-song {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.song-cover,
-.item-cover {
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.song-details,
-.item-details {
-  flex: 1;
-  min-width: 0;
-}
-
-.song-name,
-.item-name {
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--text-primary);
-  margin-bottom: 4px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.song-artist,
-.item-artist {
-  font-size: 12px;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.song-status {
-  flex-shrink: 0;
-}
-
-.playing-icon {
-  color: var(--accent-red);
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
 .playlist-content {
   flex: 1;
   overflow-y: auto;
@@ -408,7 +271,7 @@ const formatArtist = (artist) => {
 
 .empty-playlist p {
   font-size: 16px;
-  margin-bottom: 20px;
+ margin-bottom: 20px;
 }
 
 .add-music-btn {
@@ -437,78 +300,6 @@ const formatArtist = (artist) => {
   margin-bottom: 16px;
 }
 
-.playlist-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 20px;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  position: relative;
-}
-
-.playlist-item:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.playlist-item.active {
-  background: rgba(255, 107, 107, 0.1);
-}
-
-.playlist-item.active .item-name {
-  color: var(--accent-red);
-}
-
-.item-index {
-  width: 24px;
-  text-align: center;
-  font-size: 12px;
-  color: var(--text-tertiary);
-  flex-shrink: 0;
-}
-
-.item-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-  opacity: 0;
-  transition: var(--transition-fast);
-}
-
-.playlist-item:hover .item-actions {
-  opacity: 1;
-}
-
-.item-action-btn {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-tertiary);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 12px;
-}
-
-.item-action-btn:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.2);
-  color: var(--text-primary);
-}
-
-.item-action-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.item-action-btn.active {
-  color: var(--accent-red);
-}
-
 /* 响应式 */
 @media (max-width: 375px) {
   .playlist-panel {
@@ -526,21 +317,6 @@ const formatArtist = (artist) => {
   .current-playing {
     padding: 12px 16px;
   }
-  
-  .song-cover,
-  .item-cover {
-    width: 40px;
-    height: 40px;
-  }
-  
-  .song-name,
-  .item-name {
-    font-size: 14px;
-  }
-  
-  .playlist-item {
-    padding: 6px 16px;
-  }
 }
 
 @media (min-width: 768px) {
@@ -581,6 +357,6 @@ const formatArtist = (artist) => {
 }
 
 .playlist-content::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
+ background: rgba(255, 255, 255, 0.3);
 }
-</style>
+</style>

src/components/playlist/PlaylistSelector.vue

@@ -2,15 +2,15 @@
   <div class="playlist-selector-overlay" v-if="show" @click="handleClose">
     <div class="playlist-selector-dialog" @click.stop>
       <div class="dialog-header">
-        <h3>添加到播放列表</h3>
+        <h3>添加到歌单</h3>
         <button class="close-btn" @click="handleClose">
           <i class="fas fa-times"></i>
         </button>
       </div>
-      
+
       <div class="dialog-body">
         <div class="playlist-list">
-          <div 
+          <div
             v-for="playlist in playlists"
             :key="playlist.id"
             class="playlist-item"
@@ -18,28 +18,28 @@
             @click="selectPlaylist(playlist)"
           >
             <div class="playlist-cover">
-              <img 
-                v-if="playlist.cover" 
-                :src="playlist.cover" 
+              <img
+                v-if="playlist.cover"
+                :src="playlist.cover"
                 :alt="playlist.name"
               />
               <div v-else class="default-cover">
                 <i class="fas fa-music"></i>
               </div>
             </div>
-            
+
             <div class="playlist-info">
               <h4 class="playlist-name">{{ playlist.name }}</h4>
               <p class="playlist-count">{{ playlist.songs.length }}首歌曲</p>
-              <p v-if="playlist.isDefault" class="playlist-note">当前播放队列</p>
+              <p v-if="playlist.isDefault" class="playlist-note">当前播放列表</p>
             </div>
-            
+
             <div class="playlist-status" v-if="playlist.isDefault">
               <i class="fas fa-info-circle"></i>
             </div>
           </div>
         </div>
-        
+
         <div class="create-new">
           <button class="create-new-btn" @click="openCreatePlaylist">
             <i class="fas fa-plus"></i>
@@ -47,20 +47,20 @@
           </button>
         </div>
       </div>
-      
+
       <!-- 创建新播放列表表单 -->
       <div v-if="showCreateForm" class="create-form">
         <div class="form-group">
           <label>播放列表名称</label>
-          <input 
-            type="text" 
+          <input
+            type="text"
             v-model="newPlaylistName"
             placeholder="请输入播放列表名称"
             maxlength="50"
             ref="nameInput"
           />
         </div>
-        
+
         <div class="form-actions">
           <button class="btn btn-cancel" @click="cancelCreate">取消</button>
           <button class="btn btn-create" @click="createAndAdd" :disabled="!newPlaylistName.trim()">
@@ -96,7 +96,7 @@ const showCreateForm = ref(false)
 const newPlaylistName = ref('')
 const nameInput = ref(null)
 
-// 获取所有播放列表（排除默认播放列表，因为那只是当前播放队列）
+// 获取所有播放列表（排除默认播放列表，因为那只是当前播放列表）
 const playlists = computed(() => {
   return playlistStore.playlists.filter(p => !p.isDefault)
 })
@@ -104,13 +104,13 @@ const playlists = computed(() => {
 // 选择播放列表
 const selectPlaylist = async (playlist) => {
   if (playlist.isDefault) {
-    // 默认播放列表（当前播放队列）不能添加歌曲
+    // 默认播放列表（当前播放列表）不能添加歌曲
     return
   }
-  
+
   try {
     const result = playlistStore.addSongToPlaylist(playlist.id, props.song)
-    
+
     if (result.success) {
       emit('added', { playlist, song: props.song, message: result.message })
       handleClose()
@@ -142,19 +142,19 @@ const cancelCreate = () => {
 // 创建播放列表并添加歌曲
 const createAndAdd = async () => {
   if (!newPlaylistName.value.trim()) return
-  
+
   try {
     // 创建新播放列表
     const newPlaylist = playlistStore.createPlaylist(newPlaylistName.value.trim())
-    
+
     // 添加歌曲到新播放列表
     const result = playlistStore.addSongToPlaylist(newPlaylist.id, props.song)
-    
+
     if (result.success) {
-      emit('added', { 
-        playlist: newPlaylist, 
-        song: props.song, 
-        message: `已添加到新播放列表"${newPlaylist.name}"` 
+      emit('added', {
+        playlist: newPlaylist,
+        song: props.song,
+        message: `已添加到新播放列表"${newPlaylist.name}"`
       })
       handleClose()
     } else {
@@ -259,7 +259,7 @@ const handleClose = () => {
 }
 
 .playlist-item:hover:not(.disabled) {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
   border-color: var(--accent-red);
 }
 
@@ -348,7 +348,7 @@ const handleClose = () => {
 .create-new-btn:hover {
   border-color: var(--accent-red);
   color: var(--accent-red);
-  background: rgba(255, 107, 107, 0.05);
+  background: var(--overlay-lighter);
 }
 
 .create-form {
@@ -374,7 +374,7 @@ const handleClose = () => {
   padding: 12px 16px;
   border: 2px solid var(--border-card);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
   color: var(--text-primary);
   font-size: 14px;
   transition: var(--transition-fast);
@@ -440,11 +440,11 @@ const handleClose = () => {
 }
 
 @keyframes slideIn {
-  from { 
+  from {
     opacity: 0;
     transform: translateY(-20px) scale(0.95);
   }
-  to { 
+  to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
@@ -456,26 +456,26 @@ const handleClose = () => {
     width: 95%;
     max-height: 85vh;
   }
-  
+
   .dialog-header {
     padding: 16px 20px;
   }
-  
+
   .dialog-body {
     padding: 12px;
   }
-  
+
   .create-form {
     padding: 16px 20px;
   }
-  
+
   .playlist-item {
     padding: 10px;
   }
-  
+
   .playlist-cover {
     width: 40px;
     height: 40px;
   }
 }
-</style>
+</style>

src/components/search/SearchBox.vue

@@ -229,18 +229,12 @@ watch(() => searchStore.keyword, (newKeyword) => {
 }
 
 .search-history {
-  position: absolute;
-  top: 100%;
-  left: 16px;
-  right: 16px;
-  background: var(--bg-card);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-small);
-  box-shadow: var(--shadow-card);
-  z-index: 100;
-  max-height: 300px;
-  overflow-y: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-strong);
+  background: var(--overlay-lighter);
 }
 
 .history-header {
@@ -249,7 +243,7 @@ watch(() => searchStore.keyword, (newKeyword) => {
   align-items: center;
   padding: 12px 16px;
   border-bottom: 1px solid var(--border-strong);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
 }
 
 .history-title {

src/components/search/SearchHistory.vue

@@ -257,7 +257,7 @@ const getSourceName = (source) => {
 }
 
 .history-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
 }
 
 .history-icon {
@@ -338,12 +338,12 @@ const getSourceName = (source) => {
   color: var(--text-secondary);
   font-size: 12px;
   transition: var(--transition-fast);
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  border-top: 1px solid var(--overlay-lighter);
 }
 
 .expand-btn:hover {
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
 }
 
 /* 响应式 */

src/components/search/SearchResults.vue

@@ -35,14 +35,16 @@
         <span class="results-count">找到 {{ results.length }} 首歌曲</span>
       </div>
       
-      <div class="songs-container" ref="songsContainer">
+      <div class="results-list-container" ref="resultsContainer">
         <SongItem
-          v-for="(song, index) in results"
-          :key="`${song.source}-${song.id}`"
-          :song="song"
-          :index="index"
-          @play="handlePlay"
-        />
+                  v-for="(song, index) in results"
+                  :key="`${song.source}-${song.id}`"
+                  :song="song"
+                  :index="index"
+                  :cover="song.cover"
+                  @play="handlePlay"
+                  @showMoreActions="handleShowMoreActions"
+                />
         
         <!-- 加载更多 -->
         <div v-if="hasMore" class="load-more" ref="loadMoreRef">
@@ -83,7 +85,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, defineAsyncComponent, createApp } from 'vue'
 import { useSearchStore } from '@/stores/search'
 import { usePlayerStore } from '@/stores/player'
 import { usePlayQueueStore } from '@/stores/playqueue'
@@ -111,7 +113,7 @@ const historyStore = useHistoryStore()
 const toastStore = useToastStore()
 
 // 响应式数据
-const songsContainer = ref(null)
+const resultsContainer = ref(null)
 const loadMoreRef = ref(null)
 const observer = ref(null)
 
@@ -130,7 +132,7 @@ const loadingMore = computed(() => loading.value && results.value.length > 0)
 // 方法
 const handlePlay = async (song, index) => {
   try {
-    // SOLID原则：使用playQueueStore管理播放队列
+    // SOLID原则：使用playQueueStore管理播放列表
     const result = playQueueStore.setQueue(results.value, index)
     
     if (result) {
@@ -146,7 +148,7 @@ const handlePlay = async (song, index) => {
       // 通知父组件
       emit('play', song, index)
     } else {
-      throw new Error('设置播放队列失败')
+      throw new Error('设置播放列表失败')
     }
   } catch (error) {
     console.error('播放失败:', error)
@@ -154,13 +156,52 @@ const handlePlay = async (song, index) => {
   }
 }
 
+// 更多操作处理
+const handleShowMoreActions = (song, event) => {
+  // 创建并显示更多操作面板
+  const MoreActionsPanel = defineAsyncComponent(() => import('@/components/player/MoreActionsPanel.vue'))
+  
+  // 创建容器元素
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  
+  // 创建Vue应用实例
+  const app = createApp({
+    template: `
+      <MoreActionsPanel
+        :song="song"
+        @close="handleClose"
+        @action="handleAction"
+      />
+    `,
+    components: { MoreActionsPanel },
+    setup() {
+      const handleClose = () => {
+        app.unmount()
+        document.body.removeChild(container)
+      }
+      
+      const handleAction = (action) => {
+        console.log('执行操作:', action, song)
+        // 可以在这里处理具体的操作
+        handleClose()
+      }
+      
+      return { song, handleClose, handleAction }
+    }
+  })
+  
+  // 挂载应用
+  app.mount(container)
+}
+
 // 设置智能滚动加载 - 可视区域超过一半时加载下一页
 const setupInfiniteScroll = () => {
-  if (!songsContainer.value) return
+  if (!resultsContainer.value) return
   
   // 监听滚动事件
   const handleScroll = () => {
-    const container = songsContainer.value
+    const container = resultsContainer.value
     const containerHeight = container.clientHeight
     const scrollTop = container.scrollTop
     const scrollHeight = container.scrollHeight
@@ -186,12 +227,12 @@ const setupInfiniteScroll = () => {
     scrollTimer = setTimeout(handleScroll, 50)
   }
   
-  songsContainer.value.addEventListener('scroll', debouncedScroll, { passive: true })
+  resultsContainer.value.addEventListener('scroll', debouncedScroll, { passive: true })
   
   // 清理函数
   return () => {
-    if (songsContainer.value) {
-      songsContainer.value.removeEventListener('scroll', debouncedScroll)
+    if (resultsContainer.value) {
+      resultsContainer.value.removeEventListener('scroll', debouncedScroll)
     }
     if (scrollTimer) clearTimeout(scrollTimer)
   }
@@ -200,7 +241,7 @@ const setupInfiniteScroll = () => {
 let cleanupScrollListener = null
 
 // 监听歌曲容器元素
-watch(songsContainer, (newContainer) => {
+watch(resultsContainer, (newContainer) => {
   // 清理之前的监听器
   if (cleanupScrollListener) {
     cleanupScrollListener()
@@ -214,7 +255,7 @@ watch(songsContainer, (newContainer) => {
 
 // 监听搜索结果变化，重新设置滚动监听
 watch(results, () => {
-  if (songsContainer.value && results.value.length > 0) {
+  if (resultsContainer.value && results.value.length > 0) {
     // 延迟设置，确保DOM已更新
     setTimeout(() => {
       if (cleanupScrollListener) {
@@ -226,7 +267,7 @@ watch(results, () => {
 })
 
 onMounted(() => {
-  if (songsContainer.value) {
+  if (resultsContainer.value) {
     cleanupScrollListener = setupInfiniteScroll()
   }
 })
@@ -382,13 +423,7 @@ onUnmounted(() => {
   font-weight: 500;
 }
 
-.songs-container {
-  padding: 0 4px;
-  background: var(--bg-card);
-  border-radius: 0 0 var(--radius-small) var(--radius-small);
-  margin: 0 16px 16px;
-  border: 1px solid var(--border-light);
-  border-top: none;
+.results-list-container {
   max-height: 70vh;
   overflow-y: auto;
 }
@@ -440,9 +475,5 @@ onUnmounted(() => {
   .results-header {
     padding: 12px 16px 8px;
   }
-  
-  .songs-container {
-    margin: 0 12px 12px;
-  }
 }
 </style>

src/components/search/SongItem.vue

@@ -1,58 +1,92 @@
 <template>
-  <div class="song-item" :class="{ active: isActive }" @click="handleClick">
-    <div class="song-index">{{ String(index + 1).padStart(2, '0') }}</div>
-    
-    <div class="song-info">
-      <div class="song-name">{{ song.name }}</div>
-      <div class="song-artist">
-        {{ formatArtist(song.artist) }} · {{ song.album }}
-      </div>
-    </div>
-    
-    <div class="song-actions">
-      <button 
-        class="action-btn favorite-btn"
-        :class="{ active: isFavorite }"
-        @click.stop="toggleFavorite"
-        :title="isFavorite ? '取消收藏' : '收藏'"
-      >
-        <i :class="isFavorite ? 'fas fa-heart' : 'far fa-heart'"></i>
-      </button>
-      
-      <button 
-        class="action-btn more-btn"
-        @click.stop="showMoreActions"
-        :title="'更多操作'"
-      >
-        <i class="fas fa-ellipsis-v"></i>
-      </button>
+  <div class="favorite-item" :class="{
+    selected: isSelected,
+    playing: isCurrentSong
+  }">
+    <!-- 批量选择复选框 -->
+    <div v-if="showBatchActions" class="item-checkbox">
+      <label class="checkbox-wrapper">
+        <input
+          type="checkbox"
+          :checked="isSelected"
+          @change="$emit('toggleSelection', song)"
+        />
+        <span class="checkmark"></span>
+      </label>
     </div>
-    
-    <!-- 更多操作菜单 -->
-    <div class="more-menu" v-if="showMenu" @click.stop>
-      <button @click="handlePlayNext">下一首播放</button>
-      <button @click="handleAddToPlaylist">添加到播放列表</button>
-      <button @click="handleCopyLink">复制链接</button>
+
+    <!-- 歌曲信息 -->
+    <div class="song-info" @click="handleClick">
+      <div class="song-cover">
+        <img
+                   :src="cover || getSongCover()"
+                   :alt="song.name"
+                   :data-song-data="JSON.stringify(song)"
+                   @error="handleImageError"
+                 />
+        <div class="play-overlay">
+          <i class="fas fa-play"></i>
+        </div>
+        <!-- 播放状态指示器 -->
+        <div v-if="isCurrentSong" class="playing-indicator">
+          <div v-if="isPlaying" class="sound-waves">
+            <div class="sound-bar"></div>
+            <div class="sound-bar"></div>
+            <div class="sound-bar"></div>
+          </div>
+          <i v-else class="fas fa-pause"></i>
+        </div>
+      </div>
+
+      <div class="song-details">
+        <h3 class="song-name">{{ song.name }}</h3>
+        <p class="song-meta">
+          <span class="artist">{{ formatArtist(song.artist) }}</span>
+        </p>
+      </div>
     </div>
-    
-    <!-- 播放列表选择对话框 -->
-    <PlaylistSelector 
-      :show="showPlaylistSelector"
-      :song="song"
-      @close="closePlaylistSelector"
-      @added="handleAddedToPlaylist"
-    />
+
+    <!-- 操作按钮 -->
+         <div v-if="!showBatchActions && showActions" class="song-actions">
+           <button
+             class="action-btn favorite-btn"
+             :class="{ active: isFavorite }"
+             @click="toggleFavorite"
+             :title="isFavorite ? '取消收藏' : '收藏'"
+           >
+             <i :class="isFavorite ? 'fas fa-heart' : 'far fa-heart'"></i>
+           </button>
+     
+           <!-- 播放列表场景：显示移除按钮 -->
+           <button
+             v-if="showRemove"
+             class="action-btn remove-btn"
+             @click="$emit('remove', index)"
+             title="从列表移除"
+           >
+             <i class="fas fa-times"></i>
+           </button>
+     
+           <!-- 其他场景：显示更多操作 -->
+           <button
+             v-else
+             class="action-btn more-btn"
+             @click="handleShowMoreActions"
+             title="更多操作"
+           >
+             <i class="fas fa-ellipsis-h"></i>
+           </button>
+         </div>
   </div>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
-import { usePlayerStore } from '@/stores/player'
-import { usePlayQueueStore } from '@/stores/playqueue'
+import { computed, onMounted } from 'vue'
 import { useFavoritesStore } from '@/stores/favorites'
 import { useToastStore } from '@/stores/toast'
+import { usePlayerStore } from '@/stores/player'
+import { useSongCoverLoader } from '@/composables/useSongCoverLoader'
 import { utils } from '@/services/musicApi'
-import PlaylistSelector from '@/components/playlist/PlaylistSelector.vue'
 
 const props = defineProps({
   song: {
@@ -62,29 +96,75 @@ const props = defineProps({
   index: {
     type: Number,
     required: true
-  }
+  },
+  // 是否显示批量选择
+  showBatchActions: {
+    type: Boolean,
+    default: false
+  },
+  // 是否被选中（批量选择用）
+  isSelected: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示移除按钮（播放列表用）
+     showRemove: {
+       type: Boolean,
+       default: false
+     },
+     // 是否显示操作按钮区域
+        showActions: {
+          type: Boolean,
+          default: true
+        },
+        // 歌曲封面URL
+        cover: {
+          type: String,
+          default: ''
+        }
 })
 
-const emit = defineEmits(['play'])
+const emit = defineEmits(['play', 'remove', 'toggleSelection', 'showMoreActions'])
 
-const playerStore = usePlayerStore()
-const playQueueStore = usePlayQueueStore()
 const favoritesStore = useFavoritesStore()
 const toastStore = useToastStore()
-const showMenu = ref(false)
-const showPlaylistSelector = ref(false)
+const playerStore = usePlayerStore()
+const { getDefaultCover, handleImageError, observeImage } = useSongCoverLoader()
 
 // 计算属性
-const isActive = computed(() => {
-  const current = playerStore.currentSong
-  return current && current.id === props.song.id && current.source === props.song.source
-})
-
 const isFavorite = computed(() => {
   return favoritesStore.isFavorite(props.song)
 })
 
+const isCurrentSong = computed(() => {
+  return playerStore.currentSong?.id === props.song.id
+})
+
+const isPlaying = computed(() => {
+  return isCurrentSong.value && playerStore.isPlaying
+})
+
 // 方法
+// 图片加载相关
+const getSongCover = () => {
+  return getDefaultCover()
+}
+
+// 初始化懒加载观察
+const initLazyImages = () => {
+  const imageElements = document.querySelectorAll('.favorite-item .song-cover img')
+  imageElements.forEach((img, index) => {
+    const songData = img.dataset.songData
+    if (songData) {
+      try {
+        const song = JSON.parse(songData)
+        observeImage(img, song)
+      } catch (error) {
+        console.error('解析歌曲数据失败:', error)
+      }
+    }
+  })
+}
 const formatArtist = (artist) => {
   return utils.formatArtist(artist)
 }
@@ -93,246 +173,295 @@ const handleClick = () => {
   emit('play', props.song, props.index)
 }
 
-const toggleFavorite = () => {
-  favoritesStore.toggleFavorite(props.song)
-  
+const toggleFavorite = async () => {
+  const result = await favoritesStore.toggleFavorite(props.song)
+  const message = result ? '已添加到我喜欢的音乐' : '已从我喜欢的音乐中移除'
+  toastStore.success(message)
+
   // 触觉反馈
   if (navigator.vibrate) {
     navigator.vibrate(50)
   }
 }
 
-// 显示更多操作菜单
-const showMoreActions = () => {
-  showMenu.value = !showMenu.value
+const handleShowMoreActions = (event) => {
+  emit('showMoreActions', props.song, event)
 }
 
-// 下一首播放
-const handlePlayNext = () => {
-  const result = playQueueStore.addToQueue(props.song, 'next')
-  if (result.success) {
-    toastStore.success(`"${props.song.name}" 已添加到下一首播放`)
-  } else {
-    toastStore.error(result.message)
-  }
-  showMenu.value = false
+// 生命周期
+onMounted(() => {
+  // 初始化懒加载
+  setTimeout(() => {
+    initLazyImages()
+  }, 100)
+})
+</script>
+
+<style scoped>
+.favorite-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-card);
+  transition: var(--transition-fast);
 }
 
-// 添加到播放列表
-const handleAddToPlaylist = () => {
-  showMenu.value = false
-  showPlaylistSelector.value = true
+.favorite-item:hover {
+  background: var(--bg-gradient-1);
 }
 
-// 关闭播放列表选择器
-const closePlaylistSelector = () => {
-  showPlaylistSelector.value = false
+.favorite-item.selected {
+  background: var(--bg-gradient-1);
+  border-left: 4px solid var(--accent-red);
 }
 
-// 处理添加到播放列表成功
-const handleAddedToPlaylist = (data) => {
-  toastStore.success(data.message)
+.favorite-item.playing {
+  background: var(--bg-gradient-2);
+  border-left: 4px solid var(--accent-red);
 }
 
-// 复制链接
-const handleCopyLink = () => {
-  const url = `${window.location.origin}/?play=${props.song.source}&id=${props.song.id}`
-  navigator.clipboard.writeText(url).then(() => {
-    toastStore.success('链接已复制到剪贴板')
-  }).catch(() => {
-    toastStore.error('复制失败，请重试')
-  })
-  showMenu.value = false
+.favorite-item.playing.selected {
+  background: var(--bg-gradient-3);
+  border-left: 4px solid var(--accent-red);
 }
 
-// 点击外部关闭菜单
-document.addEventListener('click', () => {
-  showMenu.value = false
-})
-</script>
+.item-checkbox {
+  margin-right: 12px;
+}
 
-<style scoped>
-.song-item {
+.checkbox-wrapper {
   display: flex;
   align-items: center;
-  padding: 12px 16px;
-  background: transparent;
-  border-radius: var(--radius-small);
+  gap: 8px;
   cursor: pointer;
-  transition: var(--transition-fast);
-  position: relative;
-  min-height: var(--list-item-height);
-  border-bottom: 1px solid var(--border-lighter);
 }
 
-.song-item:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-bottom: 1px solid var(--border-light);
+.checkbox-wrapper input {
+  display: none;
 }
 
-.song-item.active {
-  background: rgba(255, 107, 107, 0.1);
-  color: var(--accent-red);
-  border-bottom: 1px solid var(--accent-red);
+.checkmark {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--border-strong);
+  border-radius: 4px;
+  position: relative;
+  transition: var(--transition-fast);
 }
 
-.song-item.active::before {
+.checkbox-wrapper input:checked + .checkmark {
+  background: var(--accent-red);
+  border-color: var(--accent-red);
+}
+
+.checkbox-wrapper input:checked + .checkmark::after {
   content: '';
   position: absolute;
+  left: 5px;
+  top: 2px;
+  width: 4px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.song-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  cursor: pointer;
+  gap: 12px;
+  min-width: 0;
+}
+
+.song-cover {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  border-radius: var(--radius-small);
+  overflow: hidden;
+}
+
+.song-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.play-overlay {
+  position: absolute;
+  top: 0;
   left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 24px;
-  background: var(--accent-red);
-  border-radius: 2px;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: var(--transition-fast);
 }
 
-.song-index {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
+.song-cover:hover .play-overlay {
+  opacity: 1;
+}
+
+.play-overlay i {
+  color: white;
+  font-size: 16px;
+}
+
+/* 播放状态指示器 */
+.playing-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  margin-right: 12px;
-  flex-shrink: 0;
+  border-radius: var(--radius-small);
 }
 
-.song-item.active .song-index {
-  background: var(--accent-red);
+.playing-indicator i {
   color: white;
+  font-size: 16px;
 }
 
-.song-info {
+/* 动态声音波形 */
+.sound-waves {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 16px;
+}
+
+.sound-bar {
+  width: 3px;
+  height: 8px;
+  background: white;
+  border-radius: 2px;
+  animation: sound-wave 1.2s ease-in-out infinite;
+}
+
+.sound-bar:nth-child(1) {
+  animation-delay: 0s;
+  height: 12px;
+}
+
+.sound-bar:nth-child(2) {
+  animation-delay: 0.2s;
+  height: 16px;
+}
+
+.sound-bar:nth-child(3) {
+  animation-delay: 0.4s;
+  height: 10px;
+}
+
+@keyframes sound-wave {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scaleY(0.6);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+.song-details {
   flex: 1;
   min-width: 0;
-  margin-right: 12px;
 }
 
 .song-name {
-  font-size: 15px;
-  font-weight: 500;
+  font-size: 16px;
+  font-weight: 600;
   color: var(--text-primary);
-  margin-bottom: 4px;
-  white-space: nowrap;
+  margin: 0 0 4px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.song-item.active .song-name {
-  color: var(--accent-red);
-}
-
-.song-artist {
+.song-meta {
   font-size: 13px;
   color: var(--text-secondary);
-  white-space: nowrap;
+  margin: 0 0 4px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.separator {
+  margin: 0 4px;
+  opacity: 0.6;
 }
 
 .song-actions {
   display: flex;
-  gap: 4px;
-  flex-shrink: 0;
+  gap: 8px;
 }
 
-.action-btn {
-  width: 32px;
-  height: 32px;
+.song-actions .action-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
   border-radius: 50%;
-  background: transparent;
-  border: none;
-  color: var(--text-disabled);
-  cursor: pointer;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
+  border: none;
+  cursor: pointer;
   transition: var(--transition-fast);
 }
 
-.action-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-secondary);
+.song-actions .action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
 }
 
 .favorite-btn.active {
+  background: rgba(255, 107, 107, 0.2);
   color: var(--accent-red);
 }
 
 .favorite-btn.active:hover {
-  color: var(--accent-red-hover);
-}
-
-.more-btn {
-  opacity: 0;
-  position: relative;
-}
-
-.song-item:hover .more-btn {
-  opacity: 1;
-}
-
-.more-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  background: var(--bg-card);
-  border-radius: 8px;
-  padding: 8px 0;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  z-index: 10;
-  min-width: 120px;
-}
-
-.more-menu button {
-  display: block;
-  width: 100%;
-  padding: 8px 16px;
-  border: none;
-  background: transparent;
-  color: var(--text-primary);
-  text-align: left;
-  cursor: pointer;
-  font-size: 12px;
-  transition: var(--transition-fast);
-}
-
-.more-menu button:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(255, 107, 107, 0.3);
+  color: var(--accent-red);
 }
 
 /* 响应式 */
 @media (max-width: 375px) {
-  .song-item {
-    padding: 10px 12px;
+  .favorite-item {
+    padding: 12px;
   }
-  
-  .song-index {
-    width: 28px;
-    height: 28px;
-    font-size: 11px;
-    margin-right: 10px;
+
+  .song-cover {
+    width: 45px;
+    height: 45px;
   }
-  
-  .action-btn {
-    width: 28px;
-    height: 28px;
-    font-size: 12px;
+
+  .song-name {
+    font-size: 15px;
   }
-  
-  .song-actions {
-    gap: 2px;
+
+  .song-meta {
+    font-size: 12px;
   }
-  
-  .song-item:last-child {
-    border-bottom: none;
+
+  .song-actions .action-btn {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
   }
 }
-</style>
+</style>

src/components/search/SourceSelector.vue

@@ -96,7 +96,7 @@ const selectSource = (sourceCode) => {
   align-items: center;
   padding: 20px 24px;
   border-bottom: 1px solid var(--border-strong);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
 }
 
 .selector-header h3 {
@@ -147,12 +147,12 @@ const selectSource = (sourceCode) => {
 }
 
 .source-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
   border-bottom: 1px solid var(--border-light);
 }
 
 .source-item.active {
-  background: rgba(255, 107, 107, 0.1);
+  background: var(--bg-gradient-3);
   color: var(--accent-red);
   border-bottom: 1px solid var(--accent-red);
 }

src/composables/useSongCoverLoader.js

@@ -109,7 +109,14 @@ export const useSongCoverLoader = () => {
         return
       }
       
-      const coverUrl = await playerStore.getAlbumCover(song, 300)
+      // 使用新的缓存机制
+      const { getCachedMusicPicUrlWithDelay } = await import('@/utils/musicPicCache.js')
+      const coverUrl = await getCachedMusicPicUrlWithDelay(
+        song.source, 
+        song.pic_id || song.id, 
+        300
+      )
+      
       if (coverUrl && imgElement.parentNode) {
         imgElement.src = coverUrl
       }
@@ -157,7 +164,13 @@ export const useSongCoverLoader = () => {
     if (!song) return getDefaultCover()
 
     try {
-      const coverUrl = await playerStore.getAlbumCover(song, size)
+      // 使用新的缓存机制（无延时版本）
+      const { getCachedMusicPicUrl } = await import('@/utils/musicPicCache.js')
+      const coverUrl = await getCachedMusicPicUrl(
+        song.source, 
+        song.pic_id || song.id, 
+        size
+      )
       return coverUrl || getDefaultCover()
     } catch (error) {
       console.error('加载封面失败:', error)
@@ -175,7 +188,14 @@ export const useSongCoverLoader = () => {
     if (!imgElement || !song) return
 
     try {
-      const coverUrl = await playerStore.getAlbumCover(song, size)
+      // 使用新的缓存机制
+      const { getCachedMusicPicUrlWithDelay } = await import('@/utils/musicPicCache.js')
+      const coverUrl = await getCachedMusicPicUrlWithDelay(
+        song.source, 
+        song.pic_id || song.id, 
+        size
+      )
+      
       if (coverUrl) {
         imgElement.src = coverUrl
       }

src/router/index.js

@@ -59,8 +59,8 @@ const routes = [
     name: 'PlayQueue',
     component: PlayQueuePage,
     meta: {
-      title: '播放队列',
-      keepAlive: false // 播放队列需要实时更新，不缓存
+      title: '播放列表',
+      keepAlive: true // 启用缓存，避免重复加载图片，播放列表通过响应式数据实现实时更新
     }
   },
   {
@@ -78,7 +78,7 @@ const routes = [
     component: PlaylistDetailPage,
     meta: {
       title: '歌单详情',
-      keepAlive: false
+      keepAlive: true // 启用缓存，避免重复加载图片
     }
   },
   {

src/services/musicApi.js

@@ -152,23 +152,18 @@ class MusicApi {
 
   // 获取专辑封面
   async getAlbumCover(source, picId, size = 300) {
+    // 使用新的缓存机制
+    const { getCachedMusicPicUrlWithDelay } = await import('@/utils/musicPicCache.js')
+    
     if (!picId) {
       return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIHJ4PSIxMiIgZmlsbD0iIzE4MTgxOCIvPjxwYXRoIGQ9Ik0xODcgMTUwQzE4NyAxNzEuNTM5IDE2OS41MzkgMTg5IDE0OCAxODlDMTI2LjQ2MSAxODkgMTA5IDE3MS41MzkgMTA5IDE1MEMxMDkgMTI4LjQ2MSAxMjYuNDYxIDExMSAxNDggMTExQzE2OS41MzkgMTExIDE4NyAxMjguNDYxIDE4NyAxNTBaIiBzdHJva2U9IiM2NjY2NjYiIHN0cm9rZS13aWR0aD0iNiIvPjxjaXJjbGUgY3g9IjE0OCIgY3k9IjE1MCIgcj0iNiIgZmlsbD0iIzY2NjY2NiIvPjwvc3ZnPgo='
     }
 
     try {
-      const params = {
-        types: 'pic',
-        source: source,
-        id: picId,
-        size: size
-      }
+      const coverUrl = await getCachedMusicPicUrlWithDelay(source, picId, size)
       
-      const url = this.buildUrl(params)
-      const response = await apiClient.get(url)
-      
-      if (response && response.url) {
-        return response.url
+      if (coverUrl) {
+        return coverUrl
       }
     } catch (error) {
       console.error('获取专辑图失败:', error)

src/stores/player.js

@@ -4,7 +4,7 @@ import { musicApi } from '@/services/musicApi'
 
 /**
  * 播放器控制 Store - 单一职责：管理音频播放控制逻辑
- * 不包含播放队列管理，专注于播放器状态和音频控制
+ * 不包含播放列表管理，专注于播放器状态和音频控制
  */
 export const usePlayerStore = defineStore('player', () => {
   // 播放器状态

src/stores/playlist.js

@@ -3,7 +3,7 @@ import { ref, computed } from 'vue'
 
 /**
  * 歌单管理 Store
- * 管理用户创建的歌单集合，不包含播放队列逻辑
+ * 管理用户创建的歌单集合，不包含播放列表逻辑
  */
 export const usePlaylistStore = defineStore('playlist', () => {
   // 状态
@@ -72,7 +72,7 @@ export const usePlaylistStore = defineStore('playlist', () => {
   }
   
   // 歌曲管理方法
-  const addSongToPlaylist = (playlistId, song) => {
+  const addSongToPlaylist = async (playlistId, song) => {
     const playlist = getPlaylist(playlistId)
     if (!playlist) {
       return { success: false, message: '歌单不存在' }
@@ -102,14 +102,22 @@ export const usePlaylistStore = defineStore('playlist', () => {
     
     // 更新封面（使用第一首歌的封面）
     if (playlist.songs.length === 1 && song.pic_id) {
-      playlist.cover = `https://music-api.gdstudio.xyz/api.php?types=pic&source=${song.source}&id=${song.pic_id}&size=300`
+      // 使用缓存机制获取封面URL
+      const { getCachedMusicPicUrl } = await import('@/utils/musicPicCache.js')
+      try {
+        const coverUrl = await getCachedMusicPicUrl(song.source, song.pic_id, 300)
+        playlist.cover = coverUrl || null
+      } catch (error) {
+        console.error('获取歌单封面失败:', error)
+        playlist.cover = null
+      }
     }
     
     saveToStorage()
     return { success: true, message: '添加成功' }
   }
   
-  const removeSongFromPlaylist = (playlistId, songId, songSource) => {
+  const removeSongFromPlaylist = async (playlistId, songId, songSource) => {
     const playlist = getPlaylist(playlistId)
     if (!playlist) return false
     
@@ -125,9 +133,19 @@ export const usePlaylistStore = defineStore('playlist', () => {
     // 如果删除的是第一首歌且还有其他歌曲，更新封面
     if (index === 0 && playlist.songs.length > 0) {
       const firstSong = playlist.songs[0]
-      playlist.cover = firstSong.pic_id 
-        ? `https://music-api.gdstudio.xyz/api.php?types=pic&source=${firstSong.source}&id=${firstSong.pic_id}&size=300`
-        : null
+      if (firstSong.pic_id) {
+        // 使用缓存机制获取封面URL
+        try {
+          const { getCachedMusicPicUrl } = await import('@/utils/musicPicCache.js')
+          const coverUrl = await getCachedMusicPicUrl(firstSong.source, firstSong.pic_id, 300)
+          playlist.cover = coverUrl || null
+        } catch (error) {
+          console.error('更新歌单封面失败:', error)
+          playlist.cover = null
+        }
+      } else {
+        playlist.cover = null
+      }
     } else if (playlist.songs.length === 0) {
       playlist.cover = null
     }

src/stores/playqueue.js

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 
 /**
- * 播放队列 Store - 单一职责：管理当前播放器的临时队列
+ * 播放列表 Store - 单一职责：管理当前播放器的临时队列
  * 对应网易云音乐的 "Now Playing" 概念
  */
 export const usePlayQueueStore = defineStore('playqueue', () => {
@@ -48,11 +48,11 @@ export const usePlayQueueStore = defineStore('playqueue', () => {
     // 防重复：检查歌曲是否已在队列中
     const exists = queue.value.some(s => s.id === song.id && s.source === song.source)
     if (exists) {
-      return { success: false, message: '歌曲已在播放队列中' }
+      return { success: false, message: '歌曲已在播放列表中' }
     }
     
     if (queue.value.length >= MAX_QUEUE_SIZE) {
-      return { success: false, message: `播放队列最多只能添加 ${MAX_QUEUE_SIZE} 首歌曲` }
+      return { success: false, message: `播放列表最多只能添加 ${MAX_QUEUE_SIZE} 首歌曲` }
     }
     
     switch (position) {
@@ -74,7 +74,7 @@ export const usePlayQueueStore = defineStore('playqueue', () => {
     }
     
     saveQueue()
-    return { success: true, message: '已添加到播放队列' }
+    return { success: true, message: '已添加到播放列表' }
   }
   
   const removeFromQueue = (index) => {
@@ -97,7 +97,7 @@ export const usePlayQueueStore = defineStore('playqueue', () => {
     }
     
     saveQueue()
-    return { success: true, message: '已从播放队列移除' }
+    return { success: true, message: '已从播放列表移除' }
   }
   
   const clearQueue = () => {
@@ -283,7 +283,7 @@ export const usePlayQueueStore = defineStore('playqueue', () => {
       }
       localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
     } catch (error) {
-      console.error('保存播放队列失败:', error)
+      console.error('保存播放列表失败:', error)
     }
   }
   
@@ -301,7 +301,7 @@ export const usePlayQueueStore = defineStore('playqueue', () => {
         }
       }
     } catch (error) {
-      console.error('加载播放队列失败:', error)
+      console.error('加载播放列表失败:', error)
       queue.value = []
       currentIndex.value = -1
       playMode.value = 'list'

src/styles/global.css

@@ -57,6 +57,7 @@
   --glow-color: rgba(255, 107, 107, 0.35);
   --overlay-dark: rgba(0, 0, 0, 0.6);
   --overlay-light: rgba(255, 255, 255, 0.1);
+  --overlay-lighter: rgba(255, 255, 255, 0.05);
   
   /* 兼容性阴影 */
   --shadow-card: 0 8px 25px var(--shadow-color);
@@ -90,6 +91,7 @@
   /* 阴影 - 黑色朦胧主题 */
   --shadow-card: 0 8px 25px rgba(0, 0, 0, 0.4);
   --shadow-button: 0 4px 12px rgba(255, 107, 107, 0.5);
+  --overlay-lighter: rgba(255, 255, 255, 0.05);
 }
 
 /* 全局重置 */

src/utils/musicPicCache.js

@@ -0,0 +1,174 @@
+import { urlCacheManager } from './urlCache.js'
+
+// 请求去重映射
+const pendingRequests = new Map()
+
+/**
+ * 带缓存的音乐图片URL获取函数
+ * @param {string} source - 音乐源
+ * @param {string} id - 图片ID  
+ * @param {string|number} size - 图片尺寸
+ * @param {boolean} skipCache - 是否跳过缓存
+ * @returns {Promise<string>} 图片URL
+ */
+export async function getCachedMusicPicUrl(source, id, size = 300, skipCache = false) {
+  if (!source || !id) return null
+  
+  const sizeStr = String(size)
+  
+  // 先检查缓存（除非明确跳过）
+  if (!skipCache) {
+    const cached = urlCacheManager.getCachedUrl(source, id, sizeStr)
+    if (cached) {
+      return cached
+    }
+  }
+  
+  // 检查是否有正在进行的相同请求（去重）
+  const requestKey = `${source}+${id}+${sizeStr}`
+  if (pendingRequests.has(requestKey)) {
+    return pendingRequests.get(requestKey)
+  }
+  
+  // 创建新的API请求
+  const apiUrl = `https://music-api.gdstudio.xyz/api.php?types=pic&source=${encodeURIComponent(source)}&id=${encodeURIComponent(id)}&size=${encodeURIComponent(sizeStr)}`
+  
+  const requestPromise = fetch(apiUrl)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+      return response.json()
+    })
+    .then(data => {
+      let resultUrl = null
+      if (data && data.url) {
+        resultUrl = data.url
+        // 将结果存入缓存
+        urlCacheManager.setCachedUrl(source, id, sizeStr, resultUrl)
+      }
+      return resultUrl
+    })
+    .catch(error => {
+      console.error('获取音乐图片失败:', error)
+      return null
+    })
+    .finally(() => {
+      // 请求完成后从去重映射中移除
+      pendingRequests.delete(requestKey)
+    })
+  
+  // 将请求添加到去重映射
+  pendingRequests.set(requestKey, requestPromise)
+  
+  return requestPromise
+}
+
+/**
+ * 带延时的音乐图片URL获取函数（懒加载专用）
+ * 第一个请求立即执行，后续请求间隔200ms
+ * @param {string} source - 音乐源
+ * @param {string} id - 图片ID
+ * @param {string|number} size - 图片尺寸  
+ * @returns {Promise<string>} 图片URL
+ */
+export async function getCachedMusicPicUrlWithDelay(source, id, size = 300) {
+  if (!source || !id) return null
+  
+  const sizeStr = String(size)
+  
+  // 先检查缓存
+  const cached = urlCacheManager.getCachedUrl(source, id, sizeStr)
+  if (cached) {
+    // 缓存命中，直接返回，无需延时
+    return cached
+  }
+  
+  // 缓存未命中，需要请求API
+  // 如果不是第一个请求，添加200ms延时
+  const requestKey = `${source}+${id}+${sizeStr}`
+  if (pendingRequests.size > 0) {
+    await new Promise(resolve => setTimeout(resolve, 200))
+  }
+  
+  return getCachedMusicPicUrl(source, id, size)
+}
+
+/**
+ * 批量预加载音乐图片URL
+ * @param {Array} songs - 歌曲数组，每个歌曲应包含source和pic_id字段
+ * @param {string|number} size - 图片尺寸
+ * @param {number} concurrency - 并发数量
+ */
+export async function preloadMusicPics(songs, size = 300, concurrency = 1) {
+  if (!Array.isArray(songs) || songs.length === 0) return
+  
+  const sizeStr = String(size)
+  
+  // 过滤出需要加载的歌曲（未缓存的）
+  const toLoad = songs.filter(song => {
+    if (!song.source || !song.pic_id) return false
+    return !urlCacheManager.getCachedUrl(song.source, song.pic_id, sizeStr)
+  })
+  
+  if (toLoad.length === 0) return
+  
+  // 分批并发加载
+  for (let i = 0; i < toLoad.length; i += concurrency) {
+    const batch = toLoad.slice(i, i + concurrency)
+    const promises = batch.map(song => 
+      getCachedMusicPicUrl(song.source, song.pic_id, size).catch(error => {
+        console.warn(`预加载 ${song.name} 图片失败:`, error)
+        return null
+      })
+    )
+    
+    await Promise.all(promises)
+    
+    // 批次间间隔200ms
+    if (i + concurrency < toLoad.length) {
+      await new Promise(resolve => setTimeout(resolve, 200))
+    }
+  }
+}
+
+/**
+ * 清除指定歌曲的图片缓存
+ * @param {string} source - 音乐源
+ * @param {string} id - 图片ID
+ */
+export function clearMusicPicCache(source, id) {
+  if (!source || !id) return
+  
+  // 清除所有尺寸的缓存
+  const commonSizes = ['300', '500', '800', '1200']
+  commonSizes.forEach(size => {
+    const key = urlCacheManager.getCacheKey(source, id, size)
+    urlCacheManager.cache.delete(key)
+  })
+  
+  urlCacheManager.saveToStorage()
+}
+
+/**
+ * 获取缓存统计信息
+ */
+export function getCacheStats() {
+  return urlCacheManager.getStats()
+}
+
+/**
+ * 清空所有缓存
+ */
+export function clearAllCache() {
+  urlCacheManager.clear()
+}
+
+export default {
+  getCachedMusicPicUrl,
+  getCachedMusicPicUrlWithDelay, 
+  preloadMusicPics,
+  clearMusicPicCache,
+  getCacheStats,
+  clearAllCache
+}

src/utils/urlCache.js

@@ -0,0 +1,191 @@
+// 音乐图片URL缓存管理器
+class UrlCacheManager {
+  constructor() {
+    this.cache = new Map()
+    this.maxCacheSize = 1000 // 上限1000个
+    this.storageKey = 'music-url-cache-v1'
+    this.cacheExpiry = 7 * 24 * 60 * 60 * 1000 // 7天过期
+    this.loadFromStorage()
+  }
+
+  /**
+   * 生成缓存键
+   * @param {string} source - 音乐源 
+   * @param {string} id - 歌曲或图片ID
+   * @param {string} br - 比特率或尺寸
+   * @returns {string} 缓存键
+   */
+  getCacheKey(source, id, br) {
+    return `${source}+${id}+${br}`
+  }
+
+  /**
+   * 获取缓存的URL
+   * @param {string} source - 音乐源
+   * @param {string} id - 歌曲或图片ID  
+   * @param {string} br - 比特率或尺寸
+   * @returns {string|null} 缓存的URL，如果不存在返回null
+   */
+  getCachedUrl(source, id, br) {
+    if (!source || !id) return null
+    
+    const key = this.getCacheKey(source, id, br)
+    const cached = this.cache.get(key)
+    
+    if (cached) {
+      // 检查是否过期
+      if (Date.now() - cached.timestamp < this.cacheExpiry) {
+        return cached.url
+      } else {
+        // 过期删除
+        this.cache.delete(key)
+        this.saveToStorage()
+      }
+    }
+    
+    return null
+  }
+
+  /**
+   * 设置缓存URL
+   * @param {string} source - 音乐源
+   * @param {string} id - 歌曲或图片ID
+   * @param {string} br - 比特率或尺寸  
+   * @param {string} url - 要缓存的URL
+   */
+  setCachedUrl(source, id, br, url) {
+    if (!source || !id || !url) return
+    
+    const key = this.getCacheKey(source, id, br)
+    
+    // 如果缓存已满，删除最旧的条目
+    if (this.cache.size >= this.maxCacheSize) {
+      this.evictOldest()
+    }
+    
+    this.cache.set(key, {
+      url,
+      timestamp: Date.now()
+    })
+    
+    this.saveToStorage()
+  }
+
+  /**
+   * 删除最旧的缓存条目
+   */
+  evictOldest() {
+    let oldestKey = null
+    let oldestTime = Date.now()
+    
+    for (const [key, value] of this.cache.entries()) {
+      if (value.timestamp < oldestTime) {
+        oldestTime = value.timestamp
+        oldestKey = key
+      }
+    }
+    
+    if (oldestKey) {
+      this.cache.delete(oldestKey)
+    }
+  }
+
+  /**
+   * 清理过期的缓存条目
+   */
+  cleanExpired() {
+    const now = Date.now()
+    const expiredKeys = []
+    
+    for (const [key, value] of this.cache.entries()) {
+      if (now - value.timestamp > this.cacheExpiry) {
+        expiredKeys.push(key)
+      }
+    }
+    
+    expiredKeys.forEach(key => this.cache.delete(key))
+    
+    if (expiredKeys.length > 0) {
+      this.saveToStorage()
+    }
+  }
+
+  /**
+   * 从localStorage加载缓存
+   */
+  loadFromStorage() {
+    try {
+      const saved = localStorage.getItem(this.storageKey)
+      if (saved) {
+        const data = JSON.parse(saved)
+        if (data && Array.isArray(data.entries)) {
+          // 恢复Map数据，同时清理过期条目
+          const now = Date.now()
+          data.entries.forEach(([key, value]) => {
+            if (now - value.timestamp < this.cacheExpiry) {
+              this.cache.set(key, value)
+            }
+          })
+        }
+      }
+    } catch (error) {
+      console.error('加载URL缓存失败:', error)
+      this.cache.clear()
+    }
+  }
+
+  /**
+   * 保存缓存到localStorage
+   */
+  saveToStorage() {
+    try {
+      const data = {
+        entries: Array.from(this.cache.entries()),
+        timestamp: Date.now()
+      }
+      localStorage.setItem(this.storageKey, JSON.stringify(data))
+    } catch (error) {
+      console.error('保存URL缓存失败:', error)
+      // 如果保存失败（可能是空间不足），清理一些旧缓存
+      this.evictOldest()
+      try {
+        const data = {
+          entries: Array.from(this.cache.entries()),
+          timestamp: Date.now()
+        }
+        localStorage.setItem(this.storageKey, JSON.stringify(data))
+      } catch (e) {
+        console.warn('URL缓存保存最终失败:', e)
+      }
+    }
+  }
+
+  /**
+   * 清空所有缓存
+   */
+  clear() {
+    this.cache.clear()
+    localStorage.removeItem(this.storageKey)
+  }
+
+  /**
+   * 获取缓存统计信息
+   */
+  getStats() {
+    return {
+      size: this.cache.size,
+      maxSize: this.maxCacheSize,
+      utilization: (this.cache.size / this.maxCacheSize * 100).toFixed(1) + '%'
+    }
+  }
+}
+
+// 创建全局实例
+export const urlCacheManager = new UrlCacheManager()
+
+// 启动定期清理过期缓存（每小时清理一次）
+setInterval(() => {
+  urlCacheManager.cleanExpired()
+}, 60 * 60 * 1000)
+
+export default urlCacheManager

src/views/CurrentPlaylistPage.vue

@@ -127,7 +127,7 @@
       <div class="actions-menu" @click.stop>
         <button @click="clearQueue" class="danger">
           <i class="fas fa-trash"></i>
-          清空播放队列
+          清空播放列表
         </button>
         <button @click="saveAsPlaylist">
           <i class="fas fa-save"></i>
@@ -281,12 +281,12 @@ const toggleFavorite = async (song) => {
 
 const removeSong = (index) => {
   if (currentPlaylist.value.length <= 1) {
-    toastStore.error('播放队列至少要保留一首歌曲')
+    toastStore.error('播放列表至少要保留一首歌曲')
     return
   }
   
   playerStore.removeFromPlaylist(index)
-  toastStore.success('已从播放队列移除')
+  toastStore.success('已从播放列表移除')
 }
 
 // 菜单操作
@@ -312,11 +312,11 @@ const hideSongActions = () => {
 
 const clearQueue = () => {
   hideActions()
-  confirmTitle.value = '清空播放队列'
-  confirmMessage.value = '确定要清空当前播放队列吗？此操作不可撤销。'
+  confirmTitle.value = '清空播放列表'
+  confirmMessage.value = '确定要清空当前播放列表吗？此操作不可撤销。'
   pendingAction.value = () => {
     playQueueStore.clearQueue()
-    toastStore.success('播放队列已清空')
+    toastStore.success('播放列表已清空')
     editMode.value = false
   }
   confirmDialogRef.value?.show()
@@ -555,11 +555,11 @@ const startDrag = (index) => {
 }
 
 .song-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
 }
 
 .song-item.current {
-  background: rgba(255, 107, 107, 0.1);
+  background: var(--bg-gradient-3);
   border-left: 3px solid var(--accent-red);
 }
 

src/views/FavoritesPage.vue

@@ -70,56 +70,17 @@
       </div>
       
       <div v-else class="favorites-list">
-        <div 
+        <SongItem
           v-for="(favorite, index) in displayedFavorites" 
           :key="`${favorite.song.id}-${favorite.favoriteTime}`"
-          class="favorite-item"
-          :class="{ selected: selectedItems.has(favorite.song.id) }"
-        >
-          <!-- 批量选择复选框 -->
-          <div v-if="showBatchActions" class="item-checkbox">
-            <label class="checkbox-wrapper">
-              <input 
-                type="checkbox" 
-                :checked="selectedItems.has(favorite.song.id)"
-                @change="toggleItemSelection(favorite.song)"
-              />
-              <span class="checkmark"></span>
-            </label>
-          </div>
-          
-          <!-- 歌曲信息 -->
-          <div class="song-info" @click="playSong(favorite.song, index)">
-            <div class="song-cover">
-              <img 
-                :src="getSongCover()" 
-                :alt="favorite.song.name"
-                :data-song-data="JSON.stringify(favorite.song)"
-                @error="handleImageError"
-              />
-              <div class="play-overlay">
-                <i class="fas fa-play"></i>
-              </div>
-            </div>
-            
-            <div class="song-details">
-              <h3 class="song-name">{{ favorite.song.name }}</h3>
-              <p class="song-meta">
-                <span class="artist">{{ formatArtist(favorite.song.artist) }}</span>
-              </p>
-            </div>
-          </div>
-          
-          <!-- 操作按钮 -->
-          <div class="song-actions">
-            <button class="action-btn favorite-btn active" @click="toggleFavorite(favorite.song)">
-              <i class="fas fa-heart"></i>
-            </button>
-            <button class="action-btn more-btn" @click="handleShowMoreActions(favorite.song, $event)">
-              <i class="fas fa-ellipsis-h"></i>
-            </button>
-          </div>
-        </div>
+          :song="favorite.song"
+          :index="index"
+          :showBatchActions="showBatchActions"
+          :isSelected="selectedItems.has(favorite.song.id)"
+          @play="handlePlay"
+          @toggleSelection="toggleItemSelection"
+          @showMoreActions="handleShowMoreActions"
+        />
       </div>
     </div>
     
@@ -155,6 +116,7 @@ import { useSongCoverLoader } from '@/composables/useSongCoverLoader'
 import { utils } from '@/services/musicApi'
 import MoreActionsPanel from '@/components/player/MoreActionsPanel.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+import SongItem from '@/components/search/SongItem.vue'
 
 const router = useRouter()
 const favoritesStore = useFavoritesStore()
@@ -242,13 +204,32 @@ const goToHome = () => {
 }
 
 // 播放相关方法
+const handlePlay = async (song, index) => {
+  if (showBatchActions.value) {
+    toggleItemSelection(song)
+    return
+  }
+  
+  // 将所有收藏的歌曲添加到播放列表
+  const songs = displayedFavorites.value.map(fav => fav.song)
+  const result = playQueueStore.setQueue(songs, index)
+  
+  if (result) {
+    // 播放选中的歌曲
+    await playerStore.playSong(song)
+    toastStore.success(`开始播放 "${song.name}"`)
+  } else {
+    toastStore.error('播放失败')
+  }
+}
+
 const playSong = async (song, index) => {
   if (showBatchActions.value) {
     toggleItemSelection(song)
     return
   }
   
-  // 将所有收藏的歌曲添加到播放队列
+  // 将所有收藏的歌曲添加到播放列表
   const songs = displayedFavorites.value.map(fav => fav.song)
   const result = playQueueStore.setQueue(songs, index)
   
@@ -387,17 +368,17 @@ const handleMoreAction = async (action) => {
       break
       
     case 'addToPlaylist':
-      // 添加到播放队列
+      // 添加到播放列表
       try {
         const result = playQueueStore.addToQueue(song, 'last')
         if (result.success) {
-          toastStore.success(`"${song.name}" 已添加到播放队列`)
+          toastStore.success(`"${song.name}" 已添加到播放列表`)
         } else {
           toastStore.error(result.message || '添加失败')
         }
       } catch (error) {
-        console.error('添加到播放队列失败:', error)
-        toastStore.error('添加到播放队列失败')
+        console.error('添加到播放列表失败:', error)
+        toastStore.error('添加到播放列表失败')
       }
       break
       
@@ -739,11 +720,11 @@ onMounted(async () => {
 }
 
 .favorite-item:hover {
-  background: var(--bg-hover);
+  background: var(--bg-gradient-1);
 }
 
 .favorite-item.selected {
-  background: rgba(255, 107, 107, 0.1);
+  background: var(--bg-gradient-1);
   border-left: 4px solid var(--accent-red);
 }
 

src/views/FullPlayerPage.vue

@@ -142,7 +142,7 @@
       </div>
     </div>
 
-    <!-- 播放队列面板 -->
+    <!-- 播放列表面板 -->
     <PlaylistPanel
       v-if="showPlaylist"
       @close="showPlaylist = false"
@@ -254,7 +254,7 @@ const isDesktop = computed(() => {
 })
 
 const defaultCover = computed(() => {
-  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgwIiBoZWlnaHQ9IjI4MCIgdmlld0JveD0iMCAwIDI4MCAyODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyODAiIGhlaWdodD0iMjgwIiBmaWxsPSJyZ2JhKDIwMCwyMDAsMjAwLDAuMykiIHJ4PSI0MCIvPgo8Y2lyY2xlIGN4PSIxNDAiIGN5PSIxNDAiIHI9IjgwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiLz4KPHN2ZyB4PSIxMTAiIHk9IjExMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9InJnYmEoMTYwLDE2MCwxNjAsMC42KSI+CjxwYXRoIGQ9Ik0xMiAzdjEwLjU1Yy0uNTktLjM0LTEuMjctLjU1LTItLjU1QzcuNzkgMTMgNiAxNC43OSA2IDEdzEuNzkgNCA0IDRjMS45NCAwIDMuNS0xLjI5IDMuOTEtM0gxNFYzeiIvPgo8L3N2Zz4KPC9zdmc+'
+  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgwIiBoZWlnaHQ9IjI4MCIgdmlld0JveD0iMCAwIDI4MCAyODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyODAiIGhlaWdodD0iMjgwIiBmaWxsPSJyZ2JhKDIwMCwyMDAsMjAwLDAuMykiIHJ4PSI0MCIvPgo8Y2lyY2xlIGN4PSIxNDAiIGN5PSIxNDAiIHI9IjgwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiLz4KPHN2ZyB4PSIxMTAiIHk9IjExMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9InJnYmEoMTYwLDE2MCwxNjAsMC42KSI+CjxwYXRoIGQ9Ik0xMiAzdjEwLjU1Yy0uNTktLjM0LTEuMjctLjU1LTItLjU1QzcuNzkgMTMgNiAxNC43OSA2IDEdzMS43OSA0IDQgNEMxLjk0IDAIDMuNS0xLjI5IDMuOTEtM0gxNFYzeiIvPgo8L3N2Zz4KPC9zdmc+'
 })
 
 const currentCover = computed(() => {
@@ -480,7 +480,7 @@ const handleRemoveFromList = (index) => {
   try {
     const result = playQueueStore.removeFromQueue(index)
     if (result.success) {
-      toastStore.success('已从播放队列移除')
+      toastStore.success('已从播放列表移除')
     } else {
       toastStore.error(result.message)
     }
@@ -1139,11 +1139,11 @@ watch(currentSong, (newSong, oldSong) => {
 }
 
 .quality-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
 }
 
 .quality-item.active {
-  background: rgba(255, 107, 107, 0.1);
+  background: var(--bg-gradient-3);
 }
 
 .quality-item.loading {

src/views/HistoryPage.vue

@@ -288,6 +288,7 @@ const selectedSong = ref(null)
 const showMoreActions = ref(false)
 const moreActionsRef = ref(null)
 const confirmDialogRef = ref(null)
+const songCovers = ref(new Map()) // 存储异步加载的封面URL
 
 // 确认对话框状态
 const confirmDialog = ref({
@@ -387,8 +388,48 @@ const formatDate = (dateString) => {
 }
 
 const getSongCover = (song) => {
-  return playerStore.getCachedCover(song) || 
-         `https://music-api.gdstudio.xyz/api.php?types=pic&source=${song.source}&id=${song.pic_id || song.id}&size=300`
+  const songKey = `${song.source}-${song.pic_id || song.id}`
+  
+  // 先返回缓存的URL或默认图片
+  const cached = songCovers.value.get(songKey)
+  if (cached) {
+    return cached
+  }
+  
+  // 异步加载封面URL
+  loadSongCover(song)
+  
+  // 返回默认图片或playerStore缓存
+  return playerStore.getCachedCover(song) || imageCacheManager.getDefaultImage()
+}
+
+const loadSongCover = async (song) => {
+  const songKey = `${song.source}-${song.pic_id || song.id}`
+  
+  // 如果已经在加载中，跳过
+  if (songCovers.value.has(songKey)) {
+    return
+  }
+  
+  // 设置默认值，防止重复加载
+  songCovers.value.set(songKey, imageCacheManager.getDefaultImage())
+  
+  // 使用新的缓存机制
+  if (song.pic_id || song.id) {
+    try {
+      const { getCachedMusicPicUrlWithDelay } = await import('@/utils/musicPicCache.js')
+      const coverUrl = await getCachedMusicPicUrlWithDelay(
+        song.source, 
+        song.pic_id || song.id, 
+        300
+      )
+      if (coverUrl) {
+        songCovers.value.set(songKey, coverUrl)
+      }
+    } catch (error) {
+      console.error('获取历史歌曲封面失败:', error)
+    }
+  }
 }
 
 const handleImageError = (event) => {
@@ -770,7 +811,7 @@ onMounted(() => {
 
 .history-item:hover,
 .top-item:hover {
-  background: var(--bg-hover);
+  background: var(--bg-gradient-1);
 }
 
 .rank-badge {

src/views/HomePage.vue

@@ -83,7 +83,7 @@ const handlePlay = async (song, index) => {
     // SOLID原则：单一职责 - playQueueStore负责队列管理，playerStore负责播放控制
     const searchResults = searchStore.searchResults || []
     
-    // 将搜索结果设置为播放队列，从指定索引开始播放
+    // 将搜索结果设置为播放列表，从指定索引开始播放
     const result = playQueueStore.setQueue(searchResults, index)
     
     if (result) {
@@ -96,7 +96,7 @@ const handlePlay = async (song, index) => {
       // 用户反馈
       toastStore.success(`开始播放 "${song.name}"`)
     } else {
-      throw new Error('设置播放队列失败')
+      throw new Error('设置播放列表失败')
     }
   } catch (error) {
     console.error('播放失败:', error)

src/views/PlayQueuePage.vue

@@ -7,25 +7,22 @@
         播放列表
       </h1>
       <div class="header-actions">
-        <button v-if="!isEmpty" class="action-btn" @click="shuffleQueue">
-          <i class="fas fa-random"></i>
+        <button v-if="!isEmpty" class="action-btn" @click="showBatchActions = !showBatchActions">
+          <i class="fas fa-tasks"></i>
         </button>
-        <button v-if="!isEmpty" class="action-btn danger" @click="confirmClearQueue">
-          <i class="fas fa-trash"></i>
-        </button>
-        <button class="action-btn settings-btn" @click="goToSettings">
+        <button class="action-btn" @click="goToSettings">
           <i class="fas fa-cog"></i>
         </button>
       </div>
     </div>
-    
+
     <!-- 搜索框 -->
     <div v-if="!isEmpty" class="search-section">
       <div class="search-box">
         <i class="fas fa-search"></i>
-        <input 
-          v-model="searchKeyword" 
-          type="text" 
+        <input
+          v-model="searchKeyword"
+          type="text"
           placeholder="在播放列表中搜索..."
           class="search-input"
         />
@@ -34,7 +31,29 @@
         </button>
       </div>
     </div>
-    
+
+    <!-- 批量操作栏 -->
+    <div v-if="showBatchActions && !isEmpty" class="batch-actions">
+      <div class="batch-selection">
+        <label class="checkbox-wrapper">
+          <input
+            type="checkbox"
+            :checked="isAllSelected"
+            @change="toggleSelectAll"
+          />
+          <span class="checkmark"></span>
+          <span class="checkbox-label">
+            {{ selectedCount > 0 ? `已选择 ${selectedCount} 首` : '全选' }}
+          </span>
+        </label>
+      </div>
+      <div v-if="selectedCount > 0" class="batch-buttons">
+        <button class="batch-btn remove-btn" @click="removeSelected">
+          <i class="fas fa-trash"></i>
+        </button>
+      </div>
+    </div>
+
     <!-- 内容区域 -->
     <div class="content-area">
       <!-- 空状态 -->
@@ -47,70 +66,25 @@
           去发现音乐
         </button>
       </div>
-      
+
       <!-- 队列列表 -->
       <div v-else class="queue-list">
-        <div 
-          v-for="(song, index) in displayedQueue" 
+        <SongItem
+          v-for="(song, index) in displayedQueue"
           :key="`${song.id}-${index}`"
-          class="queue-item"
-          :class="{ 
-            current: index === currentIndex && !searchKeyword,
-            played: index < currentIndex && !searchKeyword 
-          }"
-        >
-          <!-- 拖拽手柄 -->
-          <div class="drag-handle" @mousedown="startDrag(index, $event)">
-            <i class="fas fa-grip-vertical"></i>
-          </div>
-          
-          <!-- 歌曲信息 -->
-          <div class="song-content" @click="playAtIndex(index)">
-            <div class="song-cover">
-              <img 
-                :src="getSongCover()" 
-                :alt="song.name"
-                :data-song-data="JSON.stringify(song)"
-                @error="handleImageError"
-              />
-              <div class="play-overlay">
-                <i class="fas fa-play"></i>
-              </div>
-            </div>
-            
-            <div class="song-info">
-              <h3 class="song-name">{{ song.name }}</h3>
-              <p class="song-meta">
-                <span class="artist">{{ formatArtist(song.artist) }}</span>
-              </p>
-              <p v-if="song.duration" class="song-duration">{{ formatTime(song.duration) }}</p>
-            </div>
-            
-            <!-- 当前播放指示器 -->
-            <div v-if="index === currentIndex && !searchKeyword" class="current-indicator">
-              <div class="playing-icon">
-                <i class="fas fa-volume-up"></i>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 操作按钮 -->
-          <div class="song-actions">
-            <button 
-              class="action-btn favorite-btn"
-              :class="{ active: isFavorite(song) }"
-              @click="toggleFavorite(song)"
-            >
-              <i :class="isFavorite(song) ? 'fas fa-heart' : 'far fa-heart'"></i>
-            </button>
-            <button class="action-btn" @click="removeFromQueue(index)">
-              <i class="fas fa-times"></i>
-            </button>
-          </div>
-        </div>
+          :song="song"
+          :index="index"
+          :showBatchActions="showBatchActions"
+          :isSelected="selectedItems.has(song.id)"
+          :show-remove="true"
+          @play="handlePlay"
+          @remove="removeFromQueue"
+          @toggleSelection="toggleItemSelection"
+          @showMoreActions="handleShowMoreActions"
+        />
       </div>
     </div>
-    
+
     <!-- 确认对话框 -->
     <ConfirmDialog
       ref="confirmDialogRef"
@@ -124,7 +98,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { usePlayQueueStore } from '@/stores/playqueue'
 import { useFavoritesStore } from '@/stores/favorites'
@@ -133,6 +107,7 @@ import { useToastStore } from '@/stores/toast'
 import { useSongCoverLoader } from '@/composables/useSongCoverLoader'
 import { utils } from '@/services/musicApi'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+import SongItem from '@/components/search/SongItem.vue'
 
 const router = useRouter()
 const playQueueStore = usePlayQueueStore()
@@ -143,6 +118,8 @@ const { getDefaultCover, handleImageError, observeImage } = useSongCoverLoader()
 
 // 响应式数据
 const searchKeyword = ref('')
+const showBatchActions = ref(false)
+const selectedItems = ref(new Set())
 const confirmDialogRef = ref(null)
 const isDragging = ref(false)
 const dragStartIndex = ref(-1)
@@ -183,11 +160,18 @@ const remainingCount = computed(() => {
   return Math.max(0, queueLength.value - currentIndex.value - 1)
 })
 
+// 批量选择相关
+const selectedCount = computed(() => selectedItems.value.size)
+const isAllSelected = computed(() => {
+  return displayedQueue.value.length > 0 &&
+         selectedCount.value === displayedQueue.value.length
+})
+
 // 播放模式相关
 const playModeText = computed(() => {
   const modes = {
     'list': '顺序播放',
-    'random': '随机播放', 
+    'random': '随机播放',
     'single': '单曲循环'
   }
   return modes[playMode.value] || '顺序播放'
@@ -269,7 +253,29 @@ const toggleFavorite = async (song) => {
   toastStore.success(message)
 }
 
+// 更多操作处理
+const handleShowMoreActions = (song, event) => {
+  // 播放列表页面暂不实现更多操作菜单
+  console.log('更多操作:', song)
+}
+
 // 播放控制
+const handlePlay = async (song, index) => {
+  if (searchKeyword.value.trim()) {
+    // 如果在搜索状态，直接播放歌曲
+    await playerStore.playSong(song)
+    toastStore.success(`开始播放 "${song.name}"`)
+    return
+  }
+
+  // 正常队列播放
+  const result = playQueueStore.playAtIndex(index)
+  if (result) {
+    await playerStore.playSong(song, true) // restoreProgress = true
+    toastStore.success(`开始播放 "${song.name}"`)
+  }
+}
+
 const playAtIndex = async (index) => {
   if (searchKeyword.value.trim()) {
     // 如果在搜索状态，直接播放歌曲
@@ -278,7 +284,7 @@ const playAtIndex = async (index) => {
     toastStore.success(`开始播放 "${song.name}"`)
     return
   }
-  
+
   // 正常队列播放
   const song = playQueueStore.playAtIndex(index)
   if (song) {
@@ -297,15 +303,26 @@ const shuffleQueue = () => {
   toastStore.success('队列已随机排列')
 }
 
+const playAll = async () => {
+  if (isEmpty.value) return
+
+  // 播放当前队列的第一首歌（从队列开头开始）
+  const result = playQueueStore.playAtIndex(0)
+  if (result) {
+    await playerStore.playSong(result, true)
+    toastStore.success(`开始播放播放列表`)
+  }
+}
+
 const removeFromQueue = (index) => {
   if (searchKeyword.value.trim()) {
     toastStore.warning('搜索状态下无法删除，请清空搜索后操作')
     return
   }
-  
+
   const song = queue.value[index]
   const result = playQueueStore.removeFromQueue(index)
-  
+
   if (result.success) {
     toastStore.success(`"${song.name}" 已从列表移除`)
   } else {
@@ -313,28 +330,80 @@ const removeFromQueue = (index) => {
   }
 }
 
-const confirmClearQueue = () => {
+// 批量操作
+const toggleSelectAll = () => {
+  if (isAllSelected.value) {
+    selectedItems.value.clear()
+  } else {
+    selectedItems.value = new Set(displayedQueue.value.map(song => song.id))
+  }
+}
+
+const toggleItemSelection = (song) => {
+  if (selectedItems.value.has(song.id)) {
+    selectedItems.value.delete(song.id)
+  } else {
+    selectedItems.value.add(song.id)
+  }
+}
+
+const removeSelected = () => {
+  if (selectedCount.value === 0) return
+
   confirmDialog.value = {
-    title: '清空播放列表',
-    message: '确定要清空整个播放列表吗？当前播放的歌曲也会停止。',
-    confirmText: '清空',
+    title: '批量删除',
+    message: `确定要删除选中的 ${selectedCount.value} 首歌曲吗？`,
+    confirmText: '删除',
     type: 'warning',
-    action: 'clear-queue',
-    data: null
+    action: 'remove-selected',
+    data: Array.from(selectedItems.value) // 现在存储的是歌曲 ID
   }
-  
+
   confirmDialogRef.value?.show()
 }
 
+const playSelected = async () => {
+  const selectedSongs = Array.from(selectedItems.value).map(songId =>
+    queue.value.find(song => song.id === songId)
+  ).filter(song => song)
+
+  if (selectedSongs.length === 0) return
+
+  // 播放选中的第一首歌
+  const result = playQueueStore.setQueue(selectedSongs, 0)
+  if (result && selectedSongs.length > 0) {
+    await playerStore.playSong(selectedSongs[0])
+    toastStore.success(`开始播放选中的 ${selectedSongs.length} 首歌曲`)
+    selectedItems.value.clear()
+    showBatchActions.value = false
+  } else {
+    toastStore.error('播放失败')
+  }
+}
+
 // 确认对话框处理
 const handleConfirm = () => {
-  const { action } = confirmDialog.value
-  
+  const { action, data } = confirmDialog.value
+
   switch (action) {
-    case 'clear-queue':
-      playQueueStore.clearQueue()
-      playerStore.stop()
-      toastStore.success('播放列表已清空')
+    case 'remove-selected':
+      let removedCount = 0
+      // 根据歌曲 ID 找到对应的索引并删除
+      for (const songId of data) {
+        const index = queue.value.findIndex(song => song.id === songId)
+        if (index !== -1) {
+          const result = playQueueStore.removeFromQueue(index)
+          if (result.success) {
+            removedCount++
+          }
+        }
+      }
+
+      if (removedCount > 0) {
+        toastStore.success(`已删除 ${removedCount} 首歌曲`)
+        selectedItems.value.clear()
+        showBatchActions.value = false
+      }
       break
   }
 }
@@ -345,20 +414,25 @@ const startDrag = (index, event) => {
     toastStore.warning('搜索状态下无法拖拽排序')
     return
   }
-  
+
   isDragging.value = true
   dragStartIndex.value = index
-  
+
   // TODO: 实现完整的拖拽功能
   toastStore.info('拖拽排序功能开发中...')
 }
 
+// 监听搜索关键词变化，清空选择
+watch(searchKeyword, () => {
+  selectedItems.value.clear()
+})
+
 // 生命周期
 onMounted(() => {
-  // 加载播放队列
+  // 加载播放列表
   playQueueStore.loadQueue()
   favoritesStore.loadFavorites()
-  
+
   // 初始化懒加载
   setTimeout(() => {
     initLazyImages()
@@ -392,7 +466,7 @@ onMounted(() => {
 }
 
 .page-title i {
-  color: var(--accent-green);
+  color: var(--accent-red);
 }
 
 .header-actions {
@@ -406,7 +480,7 @@ onMounted(() => {
   gap: 6px;
   padding: 8px 16px;
   border: none;
-  background: var(--accent-green);
+  background: var(--accent-red);
   color: white;
   border-radius: 20px;
   font-size: 14px;
@@ -416,7 +490,7 @@ onMounted(() => {
 }
 
 .action-btn:hover {
-  background: var(--accent-green-hover);
+  background: var(--accent-red-hover);
   transform: translateY(-1px);
 }
 
@@ -428,16 +502,6 @@ onMounted(() => {
   background: #ff6666;
 }
 
-.action-btn.settings-btn {
-  background: var(--bg-overlay);
-  color: var(--text-secondary);
-}
-
-.action-btn.settings-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
 .current-playing {
   display: flex;
   align-items: center;
@@ -538,7 +602,7 @@ onMounted(() => {
 
 .current-status {
   font-size: 12px;
-  color: var(--accent-green);
+  color: var(--accent-red);
   margin: 0;
   font-weight: 600;
 }
@@ -551,7 +615,7 @@ onMounted(() => {
   width: 48px;
   height: 48px;
   border: none;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--bg-overlay);
   color: var(--text-secondary);
   border-radius: 50%;
   font-size: 16px;
@@ -563,7 +627,7 @@ onMounted(() => {
 }
 
 .playmode-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--bg-gradient-1);
   color: var(--text-primary);
 }
 
@@ -596,7 +660,7 @@ onMounted(() => {
 .stat-number {
   font-size: 18px;
   font-weight: 700;
-  color: var(--accent-green);
+  color: var(--accent-red);
   margin-bottom: 4px;
 }
 
@@ -647,7 +711,7 @@ onMounted(() => {
 }
 
 .clear-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--bg-gradient-1);
   color: var(--text-primary);
 }
 
@@ -689,7 +753,7 @@ onMounted(() => {
   gap: 8px;
   padding: 12px 24px;
   border: none;
-  background: var(--accent-green);
+  background: var(--accent-red);
   color: white;
   border-radius: 25px;
   font-size: 14px;
@@ -699,15 +763,14 @@ onMounted(() => {
 }
 
 .discover-btn:hover {
-  background: var(--accent-green-hover);
+  background: var(--accent-red-hover);
   transform: scale(1.05);
 }
 
 .queue-list {
   padding-bottom: calc(var(--mini-player-height) + var(--tabbar-height) + 20px);
 }
-
-.queue-item {
+.favorite-item {
   display: flex;
   align-items: center;
   padding: 12px 16px;
@@ -716,166 +779,105 @@ onMounted(() => {
   transition: var(--transition-fast);
 }
 
-.queue-item:hover {
-  background: var(--bg-hover);
+.favorite-item:hover {
+  background: var(--bg-gradient-1);
 }
 
-.queue-item.current {
-  background: rgba(34, 197, 94, 0.1);
-  border-left: 4px solid var(--accent-green);
+.favorite-item.selected {
+  background: var(--bg-gradient-1);
+  border-left: 4px solid var(--accent-red);
 }
-
-.queue-item.played {
-  opacity: 0.6;
+.item-checkbox {
+  margin-right: 12px;
 }
 
-.drag-handle {
-  width: 24px;
-  height: 24px;
+.batch-actions {
   display: flex;
   align-items: center;
-  justify-content: center;
-  color: var(--text-tertiary);
-  cursor: grab;
-  margin-right: 12px;
-  flex-shrink: 0;
-}
-
-.drag-handle:active {
-  cursor: grabbing;
-}
-
-.drag-handle:hover {
-  color: var(--text-secondary);
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--bg-card);
+  border-top: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-light);
 }
 
-.song-content {
+.batch-selection {
   display: flex;
   align-items: center;
-  flex: 1;
-  cursor: pointer;
-  gap: 12px;
-  min-width: 0;
-}
-
-.song-cover {
-  position: relative;
-  width: 50px;
-  height: 50px;
-  border-radius: var(--radius-small);
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.song-cover img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
 }
 
-.play-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+.checkbox-wrapper {
   display: flex;
   align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: var(--transition-fast);
+  gap: 8px;
+  cursor: pointer;
 }
 
-.song-cover:hover .play-overlay {
-  opacity: 1;
+.checkbox-wrapper input {
+  display: none;
 }
 
-.play-overlay i {
-  color: white;
-  font-size: 16px;
+.checkmark {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--border-strong);
+  border-radius: 4px;
+  position: relative;
+  transition: var(--transition-fast);
 }
 
-.song-info {
-  flex: 1;
-  min-width: 0;
+.checkbox-wrapper input:checked + .checkmark {
+  background: var(--accent-red);
+  border-color: var(--accent-red);
 }
 
-.song-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.checkbox-wrapper input:checked + .checkmark::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 2px;
+  width: 4px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
 }
 
-.song-meta {
-  font-size: 13px;
+.checkbox-label {
+  font-size: 14px;
   color: var(--text-secondary);
-  margin: 0 0 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.song-duration {
-  font-size: 11px;
-  color: var(--text-tertiary);
-  margin: 0;
-}
-
-.current-indicator {
-  display: flex;
-  align-items: center;
-  margin-left: 12px;
-}
-
-.playing-icon {
-  color: var(--accent-green);
-  font-size: 16px;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
 }
 
-.song-actions {
+.batch-buttons {
   display: flex;
   gap: 8px;
-  flex-shrink: 0;
 }
 
-.song-actions .action-btn {
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-secondary);
+.batch-btn {
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 14px;
+  gap: 4px;
+  padding: 6px 12px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  border-radius: 16px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: var(--transition-fast);
 }
 
-.song-actions .action-btn:hover {
+.batch-btn:hover {
   background: rgba(255, 255, 255, 0.2);
-  color: var(--text-primary);
-  transform: none;
 }
 
-.favorite-btn.active {
-  background: rgba(255, 107, 107, 0.2);
-  color: var(--accent-red);
+.batch-btn.remove-btn {
+  background: #ff4444;
+  color: white;
 }
 
-.favorite-btn.active:hover {
-  background: rgba(255, 107, 107, 0.3);
-  color: var(--accent-red);
+.batch-btn.remove-btn:hover {
+  background: #ff6666;
 }
 
 /* 响应式 */
@@ -883,47 +885,47 @@ onMounted(() => {
   .page-header {
     padding: 12px;
   }
-  
+
   .page-title {
     font-size: 20px;
   }
-  
+
   .current-playing {
     margin: 12px;
     padding: 16px 12px;
   }
-  
+
   .current-cover {
     width: 50px;
     height: 50px;
   }
-  
+
   .current-name {
     font-size: 16px;
   }
-  
+
   .queue-stats {
     margin: 0 12px 12px;
     padding: 16px 12px;
   }
-  
+
   .search-section {
     padding: 0 12px 12px;
   }
-  
+
   .queue-item {
     padding: 12px;
   }
-  
+
   .song-cover {
     width: 45px;
     height: 45px;
   }
-  
+
   .song-name {
     font-size: 15px;
   }
-  
+
   .song-meta {
     font-size: 12px;
   }
@@ -934,17 +936,17 @@ onMounted(() => {
     max-width: 1200px;
     margin: 0 auto;
   }
-  
+
   .current-playing,
   .queue-stats {
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
   }
-  
+
   .queue-list {
     max-width: 800px;
     margin: 0 auto;
   }
 }
-</style>
+</style>

src/views/PlaylistDetailPage.vue

@@ -626,11 +626,11 @@ watch(() => route.params.id, () => {
 }
 
 .song-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
 }
 
 .song-item.active {
-  background: rgba(255, 107, 107, 0.1);
+  background: var(--bg-gradient-3);
   color: var(--accent-red);
 }
 

src/views/PlaylistsPage.vue

@@ -7,9 +7,8 @@
         我的歌单
       </h1>
       <div class="header-actions">
-        <button class="action-btn create-playlist" @click="openCreatePlaylistDialog">
+        <button class="action-btn" @click="openCreatePlaylistDialog">
           <i class="fas fa-plus"></i>
-          <span>新建歌单</span>
         </button>
       </div>
     </div>
@@ -129,7 +128,7 @@ const customPlaylists = computed(() => playlistStore.playlists || [])
 const playPlaylist = async (playlist) => {
   if (playlist.songs.length === 0) return
   
-  // 用歌单替换播放队列并开始播放
+  // 用歌单替换播放列表并开始播放
   const result = playQueueStore.setQueue(playlist.songs, 0)
   if (result && playlist.songs.length > 0) {
     await playerStore.playSong(playlist.songs[0])
@@ -220,12 +219,7 @@ onMounted(async () => {
   align-items: center;
   justify-content: space-between;
   padding: 16px;
-  border-bottom: 1px solid var(--border-strong);
-  background: var(--bg-card);
-  margin: 0 16px;
-  border-radius: var(--radius-small) var(--radius-small) 0 0;
-  border: 1px solid var(--border-light);
-  border-bottom: 1px solid var(--border-strong);
+  border-bottom: 1px solid var(--border-lighter);
 }
 
 .page-title {
@@ -257,12 +251,14 @@ onMounted(async () => {
   color: white;
   border-radius: 20px;
   font-size: 14px;
+  font-weight: 500;
   cursor: pointer;
   transition: var(--transition-fast);
 }
 
-.action-btn:hover:not(:disabled) {
+.action-btn:hover {
   background: var(--accent-red-hover);
+  transform: translateY(-1px);
 }
 
 .playlists-content {
@@ -511,7 +507,7 @@ onMounted(async () => {
   padding: 12px 16px;
   border: 2px solid var(--border-card);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
   color: var(--text-primary);
   font-size: 14px;
   transition: var(--transition-fast);

src/views/SettingsPage.vue

@@ -340,8 +340,8 @@
         
         <div class="setting-item">
           <div class="setting-label">
-            <span>播放队列</span>
-            <p class="setting-desc">管理当前播放队列</p>
+            <span>播放列表</span>
+            <p class="setting-desc">管理当前播放列表</p>
           </div>
           <button class="action-button" @click="goToPlayQueue">
             <i class="fas fa-list-music"></i>
@@ -661,7 +661,7 @@ const clearAllData = async () => {
               // 播放列表 - 新的统一key
               'vue-music-playlists',
               
-              // 播放队列 - 新的统一key
+              // 播放列表 - 新的统一key
               'vue-music-play-queue',
               
               // 播放器状态
@@ -679,7 +679,7 @@ const clearAllData = async () => {
               favoritesStore.clearFavorites()
             ])
             
-            // 清除播放列表和播放队列
+            // 清除播放列表和播放列表
             const { usePlaylistStore } = await import('@/stores/playlist')
             const { usePlayQueueStore } = await import('@/stores/playqueue')
             const playlistStore = usePlaylistStore()
@@ -980,7 +980,7 @@ input:checked + .slider:before {
 
 .mobile-select-btn:hover {
   border-color: var(--border-light);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
 }
 
 .mobile-select-btn i {
@@ -1022,7 +1022,7 @@ input:checked + .slider:before {
   align-items: center;
   padding: 20px 24px;
   border-bottom: 1px solid var(--border-strong);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
 }
 
 .selector-header h3 {
@@ -1073,12 +1073,12 @@ input:checked + .slider:before {
 }
 
 .option-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-lighter);
   border-bottom: 1px solid var(--border-light);
 }
 
 .option-item.active {
-  background: rgba(255, 107, 107, 0.1);
+  background: var(--bg-gradient-3);
   color: var(--accent-red);
   border-bottom: 1px solid var(--accent-red);
 }

网易云音乐功能架构研究报告.md

@@ -1,106 +0,0 @@
-# 网易云音乐功能架构研究报告
-
-## 1. 核心概念区分
-
-### 歌单 (Playlist)
-- **定义**: 用户主动创建或收藏的音乐集合
-- **特点**: 
-  - 可以自定义命名
-  - 可以添加/删除歌曲
-  - 可以分享给其他用户
-  - 可以设置封面和描述
-- **分类**:
-  - 创建的歌单 (用户自己创建)
-  - 收藏的歌单 (收藏别人的歌单)
-
-### 播放列表 (Play Queue/Now Playing)
-- **定义**: 当前播放器中的歌曲队列
-- **特点**:
-  - 临时性的，播放完就清空
-  - 可以来自任何歌单或搜索结果
-  - 支持添加下一首播放、播放全部等操作
-  - 不保存为永久收藏
-
-### "我喜欢的音乐"
-- **定义**: 系统默认的特殊歌单
-- **特点**:
-  - 系统预设，不可删除
-  - 通过"红心"按钮添加
-  - 代表用户最喜爱的歌曲集合
-  - 一般在界面上有特殊位置显示
-
-### 播放历史记录
-- **定义**: 用户播放过的歌曲记录
-- **特点**:
-  - 自动记录，无需手动添加
-  - 按时间倒序排列
-  - 可以从历史中重新播放
-  - 一般有数量限制（如最近1000首）
-
-## 2. 用户操作场景分析
-
-### 在搜索页面
-- **红心按钮**: 添加到"我喜欢的音乐"
-- **播放按钮**: 添加到播放队列并开始播放
-- **通常不提供**: 直接添加到自定义歌单的选项
-
-### 在收藏页面 ("我喜欢的音乐")
-- **播放**: 加入播放队列
-- **更多操作菜单**:
-  - 添加到歌单
-  - 从喜欢中移除
-  - 下一首播放
-  - 分享、评论等
-
-### 在历史记录页面
-- **重新播放**: 加入播放队列
-- **更多操作菜单**:
-  - 添加到我喜欢的音乐
-  - 添加到歌单
-  - 下一首播放
-
-### 在全屏播放页面
-- **当前播放歌曲的操作**:
-  - 红心 (添加到我喜欢的音乐)
-  - 添加到歌单
-  - 分享、评论等
-
-## 3. 业务逻辑总结
-
-### 播放逻辑
-1. **单首播放**: 播放队列 = [这首歌]
-2. **歌单播放**: 播放队列 = 整个歌单的歌曲列表
-3. **下一首播放**: 插入到当前播放位置的下一位
-
-### 收藏逻辑
-1. **红心**: 固定添加到"我喜欢的音乐"
-2. **添加到歌单**: 用户选择目标歌单，手动添加
-
-### 界面逻辑
-1. **搜索页面**: 功能简洁，主要是播放和收藏
-2. **收藏/历史页面**: 提供更多操作选项
-3. **播放页面**: 针对当前歌曲的完整操作集
-
----
-
-1. 重写4个页面：歌单页面、播放列表页面、我喜欢的音乐页面、播放历史记录页面
-  2. 删了重来：清理干净原来的逻辑，避免混乱
-  3. 统一存储key：修改设置页面，保证用到的key统一
-  4. 搜索和full页面小改动：
-    - 可以添加到播放列表或指定歌单
-    - 搜索不要点了播放才能添加到播放列表
-    - 防止重复添加
-
-  让我先确认一下架构分离：
-
-  4个独立概念：
-  1. 歌单 - 用户创建的音乐收藏集合
-  2. 播放列表 - 当前播放器的临时队列
-  3. 我喜欢的音乐 - 特殊的收藏歌单
-  4. 播放历史记录 - 自动记录的播放历史
-
-  请问我理解对了吗？我是否应该：
-  1. 先清理并重新设计这4个Store
-  2. 然后重写对应的4个页面组件
-  3. 统一存储key
-  4. 最后小幅修改搜索和播放页面