feat(component): 新增歌单相关组件和功能

- 新增 ActionMenu 组件，用于显示歌曲或歌单的操作菜单
- 新增 DelayedConfirmDialog 组件，用于显示带倒计时的确认对话框
- 新增 PlaylistItem 组件，用于显示歌单列表项
- 新增 SongCover 组件，用于显示歌曲封面
- 新增 FavoriteItem 组件，用于显示收藏列表项
- 优化 App 组件，加载播放队列状态

src/App.vue

@@ -59,6 +59,7 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { usePlayerStore } from '@/stores/player'
+import { usePlayQueueStore } from '@/stores/playqueue'
 import { useSearchStore } from '@/stores/search'
 import { useFavoritesStore } from '@/stores/favorites'
 import { useHistoryStore } from '@/stores/history'
@@ -74,6 +75,7 @@ const route = useRoute()
 
 // Store
 const playerStore = usePlayerStore()
+const playQueueStore = usePlayQueueStore()
 const searchStore = useSearchStore()
 const favoritesStore = useFavoritesStore()
 const historyStore = useHistoryStore()
@@ -341,6 +343,7 @@ watch(() => playerStore.volume, (newVolume) => {
 onMounted(() => {
   // 加载所有存储状态
   playerStore.loadPlayerState()
+  playQueueStore.loadQueue()
   searchStore.loadSearchSettings()
   searchStore.loadSearchHistory()
   favoritesStore.loadFavorites()

src/components/common/ActionMenu.vue

@@ -0,0 +1,552 @@
+<template>
+  <div class="action-menu-overlay" @click="$emit('close')">
+    <div class="action-menu" @click.stop>
+      <!-- 项目信息 -->
+      <div class="item-info">
+        <img
+          v-if="itemCover"
+          :src="itemCover"
+          :alt="itemName"
+          class="item-cover"
+          @error="handleImageError"
+        />
+        <div v-else class="default-cover">
+          <i class="fas fa-music"></i>
+        </div>
+
+        <div class="item-details">
+          <div class="item-name">{{ itemName }}</div>
+          <div class="item-meta">{{ itemMeta }}</div>
+          <div class="item-meta secondary" v-if="itemSecondaryMeta">{{ itemSecondaryMeta }}</div>
+        </div>
+      </div>
+
+      <!-- 操作按钮列表 -->
+      <div class="actions-list">
+        <button
+          v-for="action in availableActions"
+          :key="action.key"
+          class="action-item"
+          :class="action.class"
+          @click="handleAction(action.key)"
+        >
+          <i :class="action.icon"></i>
+          <span>{{ action.label }}</span>
+        </button>
+      </div>
+
+      <!-- 取消按钮 -->
+      <button class="cancel-btn" @click="$emit('close')">
+        取消
+      </button>
+    </div>
+
+    <!-- 播放列表选择器（用于歌曲添加到歌单功能） -->
+    <PlaylistSelector
+      v-if="song && showPlaylistSelector"
+      :show="showPlaylistSelector"
+      :song="song"
+      @close="closePlaylistSelector"
+      @added="handleAddedToPlaylist"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useFavoritesStore } from '@/stores/favorites'
+import { useToastStore } from '@/stores/toast'
+import PlaylistSelector from '@/components/playlist/PlaylistSelector.vue'
+import { utils } from '@/services/musicApi'
+
+const props = defineProps({
+  // 项目类型：'song' | 'playlist'
+  type: {
+    type: String,
+    required: true,
+    validator: (value) => ['song', 'playlist'].includes(value)
+  },
+  // 歌曲对象
+  song: {
+    type: Object,
+    default: null
+  },
+  // 歌单对象
+  playlist: {
+    type: Object,
+    default: null
+  },
+  // 自定义操作项
+  customActions: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['close', 'action'])
+
+const favoritesStore = useFavoritesStore()
+const toastStore = useToastStore()
+const showPlaylistSelector = ref(false)
+
+// 计算属性
+const isFavorite = computed(() => {
+  return props.song ? favoritesStore.isFavorite(props.song) : false
+})
+
+const itemCover = computed(() => {
+  return props.song?.cover || props.playlist?.cover || null
+})
+
+const itemName = computed(() => {
+  return props.song?.name || props.playlist?.name || ''
+})
+
+const itemMeta = computed(() => {
+  if (props.song) {
+    return utils.formatArtist(props.song.artist)
+  }
+  if (props.playlist) {
+    return `${props.playlist.songs?.length || 0}首歌曲`
+  }
+  return ''
+})
+
+const itemSecondaryMeta = computed(() => {
+  if (props.song?.album) {
+    return props.song.album
+  }
+  if (props.playlist) {
+    // 优先显示描述，如果没有描述则显示更新时间
+    if (props.playlist.description) {
+      return props.playlist.description
+    }
+    if (props.playlist.updatedAt) {
+      return formatDate(props.playlist.updatedAt)
+    }
+  }
+  return null
+})
+
+// 可用操作项
+const availableActions = computed(() => {
+  const actions = []
+
+  if (props.type === 'song' && props.song) {
+    // 歌曲操作
+    actions.push({
+      key: 'favorite',
+      icon: isFavorite.value ? 'fas fa-heart' : 'far fa-heart',
+      label: isFavorite.value ? '取消收藏' : '添加到我的收藏',
+      class: isFavorite.value ? 'active' : ''
+    })
+    
+    actions.push({
+      key: 'addToPlaylist',
+      icon: 'fas fa-plus',
+      label: '添加到歌单',
+      class: ''
+    })
+    
+    actions.push({
+      key: 'download',
+      icon: 'fas fa-download',
+      label: '下载到本地',
+      class: ''
+    })
+  } else if (props.type === 'playlist' && props.playlist) {
+    // 歌单操作（移除"查看信息"功能，因为 item-info 已经展示了信息）
+    actions.push({
+      key: 'editInfo',
+      icon: 'fas fa-edit',
+      label: '编辑信息',
+      class: ''
+    })
+    
+    actions.push({
+      key: 'clearPlaylist',
+      icon: 'fas fa-trash-alt',
+      label: '清空歌单',
+      class: ''
+    })
+    
+    // 只有非默认歌单才显示删除选项
+    if (!props.playlist?.isDefault) {
+      actions.push({
+        key: 'deletePlaylist',
+        icon: 'fas fa-trash',
+        label: '删除歌单',
+        class: 'danger'
+      })
+    }
+  }
+
+  // 添加自定义操作项
+  actions.push(...props.customActions)
+
+  return actions
+})
+
+// 方法
+const handleImageError = (event) => {
+  event.target.style.display = 'none'
+}
+
+const formatDate = (timestamp) => {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diffTime = now - date
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+  
+  if (diffDays === 0) {
+    return '今天'
+  } else if (diffDays === 1) {
+    return '昨天'
+  } else if (diffDays < 7) {
+    return `${diffDays}天前`
+  } else {
+    return date.toLocaleDateString('zh-CN', { 
+      month: 'short', 
+      day: 'numeric' 
+    })
+  }
+}
+
+const handleAction = async (action) => {
+  switch (action) {
+    // 歌曲操作
+    case 'favorite':
+      if (!props.song) return
+      try {
+        if (isFavorite.value) {
+          await favoritesStore.removeFromFavorites(props.song)
+          toastStore.success('已从我喜欢的音乐中移除')
+        } else {
+          await favoritesStore.addToFavorites(props.song)
+          toastStore.success('已添加到我喜欢的音乐')
+        }
+      } catch (error) {
+        console.error('收藏操作失败:', error)
+        toastStore.error('操作失败，请重试')
+      }
+      break
+
+    case 'addToPlaylist':
+      if (!props.song) return
+      showPlaylistSelector.value = true
+      break
+
+    case 'download':
+      if (!props.song) return
+      try {
+        if (props.song.url) {
+          const link = document.createElement('a')
+          link.href = props.song.url
+          link.download = `${utils.formatArtist(props.song.artist)} - ${props.song.name}.mp3`
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+          toastStore.success('开始下载')
+        } else {
+          toastStore.warning('该歌曲暂不支持下载')
+        }
+      } catch (error) {
+        console.error('下载失败:', error)
+        toastStore.error('下载失败，请重试')
+      }
+      break
+
+    // 歌单操作和自定义操作
+    default:
+      emit('action', { 
+        action, 
+        song: props.song, 
+        playlist: props.playlist 
+      })
+      emit('close')
+      break
+  }
+}
+
+const closePlaylistSelector = () => {
+  showPlaylistSelector.value = false
+}
+
+const handleAddedToPlaylist = (data) => {
+  toastStore.success(data.message)
+  emit('close')
+}
+</script>
+
+<style scoped>
+.action-menu-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  z-index: 2000;
+  display: flex;
+  align-items: flex-end;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.action-menu {
+  width: 100%;
+  background: var(--bg-secondary);
+  border-radius: 16px 16px 0 0;
+  padding: 0 0 20px;
+  animation: slideUp 0.3s ease-out;
+  overflow: hidden;
+}
+
+.item-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 24px 20px 20px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.item-cover {
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.default-cover {
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--accent-red), #ff8a8a);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.item-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.item-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-meta {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-meta.secondary {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-bottom: 0;
+}
+
+.actions-list {
+  padding: 8px 0;
+}
+
+.action-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 16px;
+  text-align: left;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.action-item:hover {
+  background: var(--overlay-lighter);
+}
+
+.action-item:active {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.action-item i {
+  width: 20px;
+  text-align: center;
+  font-size: 16px;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+
+.action-item.active {
+  color: var(--accent-red);
+}
+
+.action-item.active i {
+  color: var(--accent-red);
+}
+
+.action-item.danger {
+  color: #ff4444;
+}
+
+.action-item.danger i {
+  color: #ff4444;
+}
+
+.cancel-btn {
+  width: calc(100% - 40px);
+  margin: 16px 20px 0;
+  padding: 16px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.cancel-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.cancel-btn:active {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(0.98);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .item-info {
+    padding: 20px 16px 16px;
+  }
+
+  .item-cover {
+    width: 56px;
+    height: 56px;
+    border-radius: 10px;
+  }
+
+  .default-cover {
+    width: 56px;
+    height: 56px;
+    border-radius: 10px;
+    font-size: 20px;
+  }
+
+  .item-name {
+    font-size: 16px;
+  }
+
+  .item-meta {
+    font-size: 13px;
+  }
+
+  .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;
+    padding: 14px;
+    font-size: 15px;
+  }
+}
+
+@media (min-width: 768px) {
+  .action-menu {
+    max-width: 480px;
+    margin: 0 auto 0;
+    border-radius: 16px;
+  }
+
+  .action-menu-overlay {
+    align-items: center;
+    padding: 20px;
+  }
+
+  .item-info {
+    padding: 28px 24px 24px;
+  }
+
+  .item-cover {
+    width: 72px;
+    height: 72px;
+    border-radius: 14px;
+  }
+
+  .default-cover {
+    width: 72px;
+    height: 72px;
+    border-radius: 14px;
+    font-size: 28px;
+  }
+
+  .action-item {
+    padding: 18px 24px;
+  }
+
+  .cancel-btn {
+    width: calc(100% - 48px);
+    margin: 20px 24px 0;
+  }
+}
+
+/* 动画 */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+/* 无障碍支持 */
+.action-item:focus-visible {
+  outline: 2px solid var(--accent-red);
+  outline-offset: 2px;
+}
+
+.cancel-btn:focus-visible {
+  outline: 2px solid var(--accent-red);
+  outline-offset: 2px;
+}
+
+/* 触摸反馈 */
+@media (hover: none) {
+  .action-item:active {
+    background: rgba(255, 255, 255, 0.1);
+    transform: scale(0.98);
+  }
+}
+</style>

src/components/common/DelayedConfirmDialog.vue

@@ -0,0 +1,424 @@
+<template>
+  <div class="delayed-confirm-overlay" v-if="visible" @click="handleCancel">
+    <div class="delayed-confirm-dialog" @click.stop>
+      <div class="dialog-header">
+        <div class="warning-icon">
+          <i class="fas fa-exclamation-triangle"></i>
+        </div>
+        <h3 class="dialog-title">{{ title }}</h3>
+      </div>
+      
+      <div class="dialog-content">
+        <p class="dialog-message">{{ message }}</p>
+        <div v-if="showCountdown" class="countdown-section">
+          <div class="countdown-circle">
+            <svg class="countdown-svg" viewBox="0 0 100 100">
+              <circle
+                class="countdown-bg"
+                cx="50"
+                cy="50"
+                r="45"
+              />
+              <circle
+                class="countdown-progress"
+                cx="50"
+                cy="50"
+                r="45"
+                :style="{ strokeDasharray: circumference, strokeDashoffset: dashOffset }"
+              />
+            </svg>
+            <span class="countdown-text">{{ remainingSeconds }}</span>
+          </div>
+          <p class="countdown-desc">{{ remainingSeconds }}秒后可以确认操作</p>
+        </div>
+      </div>
+      
+      <div class="dialog-actions">
+        <button 
+          class="dialog-btn dialog-btn-cancel" 
+          @click="handleCancel"
+        >
+          {{ cancelText }}
+        </button>
+        <button 
+          class="dialog-btn dialog-btn-confirm" 
+          @click="handleConfirm"
+          :disabled="isCountingDown"
+          :class="{ 
+            danger: type === 'danger',
+            disabled: isCountingDown 
+          }"
+        >
+          <i v-if="isCountingDown" class="fas fa-spinner fa-spin"></i>
+          {{ isCountingDown ? `等待 ${remainingSeconds}s` : confirmText }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onUnmounted } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '确认操作'
+  },
+  message: {
+    type: String,
+    required: true
+  },
+  confirmText: {
+    type: String,
+    default: '确认'
+  },
+  cancelText: {
+    type: String,
+    default: '取消'
+  },
+  type: {
+    type: String,
+    default: 'normal', // 'normal' | 'danger'
+  },
+  delaySeconds: {
+    type: Number,
+    default: 5 // 默认5秒延时
+  }
+})
+
+const emit = defineEmits(['confirm', 'cancel'])
+
+const visible = ref(false)
+const isCountingDown = ref(false)
+const remainingSeconds = ref(0)
+let countdownInterval = null
+
+// SVG圆形进度条相关计算
+const circumference = computed(() => 2 * Math.PI * 45)
+const dashOffset = computed(() => {
+  const progress = (props.delaySeconds - remainingSeconds.value) / props.delaySeconds
+  return circumference.value * (1 - progress)
+})
+
+const showCountdown = computed(() => isCountingDown.value && remainingSeconds.value > 0)
+
+const show = () => {
+  visible.value = true
+  startCountdown()
+}
+
+const hide = () => {
+  visible.value = false
+  stopCountdown()
+}
+
+const startCountdown = () => {
+  isCountingDown.value = true
+  remainingSeconds.value = props.delaySeconds
+  
+  countdownInterval = setInterval(() => {
+    remainingSeconds.value--
+    
+    if (remainingSeconds.value <= 0) {
+      isCountingDown.value = false
+      stopCountdown()
+    }
+  }, 1000)
+}
+
+const stopCountdown = () => {
+  if (countdownInterval) {
+    clearInterval(countdownInterval)
+    countdownInterval = null
+  }
+  isCountingDown.value = false
+  remainingSeconds.value = 0
+}
+
+const handleConfirm = () => {
+  if (isCountingDown.value) return
+  
+  emit('confirm')
+  hide()
+}
+
+const handleCancel = () => {
+  emit('cancel')
+  hide()
+}
+
+// 清理定时器
+onUnmounted(() => {
+  stopCountdown()
+})
+
+defineExpose({
+  show,
+  hide
+})
+</script>
+
+<style scoped>
+.delayed-confirm-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(12px);
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.3s ease;
+}
+
+.delayed-confirm-dialog {
+  background: var(--bg-card);
+  border-radius: 20px;
+  padding: 0;
+  width: 90%;
+  max-width: 420px;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
+  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  overflow: hidden;
+  border: 1px solid var(--border-light);
+}
+
+.dialog-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px 24px 20px;
+  background: var(--bg-gradient-1);
+  border-bottom: 1px solid var(--border-lighter);
+}
+
+.warning-icon {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #ff6b6b, #ff5252);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
+}
+
+.warning-icon i {
+  font-size: 24px;
+  color: white;
+}
+
+.dialog-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+  text-align: center;
+}
+
+.dialog-content {
+  padding: 24px;
+  text-align: center;
+}
+
+.dialog-message {
+  font-size: 16px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0 0 24px 0;
+  text-align: center;
+}
+
+.countdown-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.countdown-circle {
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.countdown-svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.countdown-bg {
+  fill: none;
+  stroke: var(--border-lighter);
+  stroke-width: 4;
+}
+
+.countdown-progress {
+  fill: none;
+  stroke: var(--accent-red);
+  stroke-width: 4;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 1s linear;
+}
+
+.countdown-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--accent-red);
+}
+
+.countdown-desc {
+  font-size: 14px;
+  color: var(--text-tertiary);
+  margin: 0;
+}
+
+.dialog-actions {
+  display: flex;
+  gap: 12px;
+  padding: 20px 24px 30px;
+}
+
+.dialog-btn {
+  flex: 1;
+  padding: 14px 24px;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.dialog-btn-cancel {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 2px solid var(--border-light);
+}
+
+.dialog-btn-cancel:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-color: var(--border-strong);
+}
+
+.dialog-btn-confirm {
+  background: var(--accent-red);
+  color: white;
+  border: 2px solid transparent;
+}
+
+.dialog-btn-confirm:hover:not(.disabled) {
+  background: var(--accent-red-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
+}
+
+.dialog-btn-confirm.danger {
+  background: #ff4444;
+}
+
+.dialog-btn-confirm.danger:hover:not(.disabled) {
+  background: #ff2222;
+  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4);
+}
+
+.dialog-btn-confirm.disabled {
+  background: var(--bg-secondary);
+  color: var(--text-tertiary);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+  border-color: var(--border-light);
+}
+
+@keyframes fadeIn {
+  from { 
+    opacity: 0; 
+  }
+  to { 
+    opacity: 1; 
+  }
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0;
+    transform: translateY(30px) scale(0.9);
+  }
+  to { 
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* 响应式 */
+@media (max-width: 480px) {
+  .delayed-confirm-dialog {
+    width: 95%;
+    max-width: none;
+    border-radius: 16px;
+  }
+  
+  .dialog-header {
+    padding: 24px 20px 16px;
+  }
+  
+  .warning-icon {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 12px;
+  }
+  
+  .warning-icon i {
+    font-size: 20px;
+  }
+  
+  .dialog-title {
+    font-size: 18px;
+  }
+  
+  .dialog-content {
+    padding: 20px;
+  }
+  
+  .dialog-message {
+    font-size: 15px;
+  }
+  
+  .countdown-circle {
+    width: 70px;
+    height: 70px;
+  }
+  
+  .countdown-text {
+    font-size: 20px;
+  }
+  
+  .dialog-actions {
+    padding: 16px 20px 24px;
+    flex-direction: column;
+  }
+  
+  .dialog-btn {
+    width: 100%;
+    padding: 12px 20px;
+    font-size: 15px;
+  }
+}
+</style>

src/components/common/Modal.vue

@@ -122,7 +122,7 @@ const close = () => {
 
 // 生命周期
 onMounted(() => {
-  open()
+  // 移除自动打开逻辑，改为由父组件控制
 })
 
 onUnmounted(() => {

src/components/common/PlaylistItem.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="playlist-item" :class="{
+    selected: isSelected
+  }">
+    <!-- 歌单信息 -->
+    <div class="playlist-info" @click="handleClick">
+      <div class="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 class="play-overlay">
+          <i class="fas fa-play"></i>
+        </div>
+      </div>
+
+      <div class="playlist-details">
+        <h3 class="playlist-name">{{ playlist.name }}</h3>
+        <p class="playlist-meta">
+          <span class="song-count">{{ playlist.songs?.length || 0 }}首歌曲</span>
+          <span v-if="playlist.updatedAt" class="separator">•</span>
+          <span v-if="playlist.updatedAt" class="update-time">{{ formatDate(playlist.updatedAt) }}</span>
+        </p>
+      </div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="playlist-actions">
+      <button
+        class="action-btn more-btn"
+        @click="handleShowMoreActions"
+        title="更多操作"
+      >
+        <i class="fas fa-ellipsis-h"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+
+const props = defineProps({
+  playlist: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  },
+  // 是否被选中
+  isSelected: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click', 'showMoreActions'])
+
+
+
+// 方法
+const formatDate = (timestamp) => {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diffTime = now - date
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+  
+  if (diffDays === 0) {
+    return '今天'
+  } else if (diffDays === 1) {
+    return '昨天'
+  } else if (diffDays < 7) {
+    return `${diffDays}天前`
+  } else {
+    return date.toLocaleDateString('zh-CN', { 
+      month: 'short', 
+      day: 'numeric' 
+    })
+  }
+}
+
+const handleClick = () => {
+  emit('click', props.playlist, props.index)
+}
+
+const handleShowMoreActions = (event) => {
+  event.stopPropagation()
+  emit('showMoreActions', props.playlist, event)
+}
+
+// 生命周期
+onMounted(() => {
+  // 如果需要懒加载可以在这里添加
+})
+</script>
+
+<style scoped>
+.playlist-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-card);
+  transition: var(--transition-fast);
+}
+
+.playlist-item:hover {
+  background: var(--bg-gradient-1);
+}
+
+.playlist-item.selected {
+  background: var(--bg-gradient-1);
+  border-left: 4px solid var(--accent-red);
+}
+
+.playlist-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  cursor: pointer;
+  gap: 12px;
+  min-width: 0;
+}
+
+.playlist-cover {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  border-radius: var(--radius-small);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.playlist-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.default-cover {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, var(--accent-red), #ff8a8a);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 20px;
+}
+
+.play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  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);
+}
+
+.playlist-cover:hover .play-overlay {
+  opacity: 1;
+}
+
+.play-overlay i {
+  color: white;
+  font-size: 16px;
+}
+
+.playlist-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.playlist-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.playlist-meta {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.separator {
+  margin: 0 4px;
+  opacity: 0.6;
+}
+
+.playlist-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.playlist-actions .action-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 50%;
+  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);
+}
+
+.playlist-actions .action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .playlist-item {
+    padding: 12px;
+  }
+
+  .playlist-cover {
+    width: 45px;
+    height: 45px;
+  }
+
+  .playlist-name {
+    font-size: 15px;
+  }
+
+  .playlist-meta {
+    font-size: 12px;
+  }
+
+  .playlist-actions .action-btn {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+  }
+}
+</style>

src/components/common/SongCover.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="song-cover">
     <img 
+      v-if="coverUrl && !imageError"
       :src="coverUrl" 
       :alt="song.name"
       class="cover-image"
       @error="handleImageError"
     />
+    <div v-else class="default-cover">
+      <i class="fas fa-music"></i>
+    </div>
     <slot></slot>
   </div>
 </template>
@@ -27,35 +31,41 @@ const props = defineProps({
 
 const playerStore = usePlayerStore()
 const coverUrl = ref('')
+const imageError = ref(false)
 
-// 默认封面
+// 默认封面 - 返回 null，让组件使用 fas fa-music 图标
 const getDefaultCover = () => {
-  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSI4Ii8+CjxwYXRoIGQ9Ik0zMiAyMEw0MCAzMkgzNlY0NEgyOFYzMkgyNEwzMiAyMFoiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4zKSIvPgo8L3N2Zz4K'
+  return null
 }
 
 // 加载专辑封面
 const loadCover = async () => {
   if (!props.song) {
-    coverUrl.value = getDefaultCover()
+    coverUrl.value = null
+    imageError.value = false
     return
   }
   
+  // 重置错误状态
+  imageError.value = false
+  
   try {
     const coverUrlResult = await playerStore.getAlbumCover(props.song, props.size)
     if (coverUrlResult) {
       coverUrl.value = coverUrlResult
     } else {
-      coverUrl.value = getDefaultCover()
+      coverUrl.value = null
     }
   } catch (error) {
     console.error('加载封面失败:', error)
-    coverUrl.value = getDefaultCover()
+    coverUrl.value = null
   }
 }
 
 // 图片加载错误处理
-const handleImageError = () => {
-  coverUrl.value = getDefaultCover()
+const handleImageError = (event) => {
+  imageError.value = true
+  // 不再需要 display: none，让 Vue 的条件渲染处理
 }
 
 // 监听歌曲变化
@@ -63,7 +73,7 @@ watch(() => props.song, (newSong) => {
   if (newSong) {
     loadCover()
   } else {
-    coverUrl.value = getDefaultCover()
+    coverUrl.value = null
   }
 }, { immediate: true })
 
@@ -88,4 +98,15 @@ onMounted(() => {
   object-fit: cover;
   transition: var(--transition-normal);
 }
+
+.default-cover {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, var(--accent-red), #ff8a8a);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+}
 </style>

src/components/favorites/FavoriteItem.vue

@@ -10,11 +10,15 @@
     <!-- 专辑封面 -->
     <div class="album-cover">
       <img 
+        v-if="actualCoverUrl && actualCoverUrl !== '/default-album.png' && !imageError"
         :src="actualCoverUrl" 
         :alt="song.album"
         @error="handleImageError"
         loading="lazy"
       >
+      <div v-else class="default-cover-icon">
+        <i class="fas fa-music"></i>
+      </div>
       <div class="play-indicator" v-if="isCurrentSong">
         <i :class="playIconClass"></i>
       </div>
@@ -76,7 +80,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { usePlayerStore } from '@/stores/player'
 import { useHistoryStore } from '@/stores/history'
 import FavoriteButton from './FavoriteButton.vue'
@@ -121,26 +125,52 @@ const playerStore = usePlayerStore()
 const historyStore = useHistoryStore()
 const showMenu = ref(false)
 const showPlaylistSelector = ref(false)
+const imageError = ref(false)
 
 // 异步获取封面URL
-const actualCoverUrl = ref('/default-album.png')
+const actualCoverUrl = ref('')
 const loadCoverUrl = async () => {
+  if (!props.song) {
+    actualCoverUrl.value = ''
+    imageError.value = false
+    return
+  }
+  
+  // 重置错误状态
+  imageError.value = false
+  
   if (props.song.pic_id) {
     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
+      } else {
+        actualCoverUrl.value = ''
       }
     } catch (error) {
       console.error('加载封面失败:', error)
+      actualCoverUrl.value = ''
     }
+  } else {
+    actualCoverUrl.value = ''
   }
 }
 
+// 监听歌曲变化
+watch(() => props.song, (newSong) => {
+  if (newSong) {
+    loadCoverUrl()
+  } else {
+    actualCoverUrl.value = ''
+  }
+}, { immediate: true })
+
 // 组件挂载时加载封面
 onMounted(() => {
-  loadCoverUrl()
+  if (props.song) {
+    loadCoverUrl()
+  }
 })
 
 // 是否是当前播放歌曲
@@ -214,7 +244,8 @@ const formatPlayCount = (count) => {
 
 // 处理图片加载错误
 const handleImageError = (event) => {
-  event.target.src = '/default-album.png'
+  imageError.value = true
+  // 不再需要设置 src，让 Vue 的条件渲染处理
 }
 
 // 播放歌曲
@@ -329,6 +360,17 @@ document.addEventListener('click', () => {
   transition: var(--transition-fast);
 }
 
+.default-cover-icon {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, var(--accent-red), #ff8a8a);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;  
+  font-size: 18px;
+}
+
 .favorite-item:hover .album-cover img {
   transform: scale(1.05);
 }

src/components/player/MoreActionsPanel.vue

@@ -2,39 +2,102 @@
   <div class="more-actions-overlay" @click="$emit('close')">
     <div class="more-actions-panel" @click.stop>
       <!-- 歌曲信息 -->
-      <div v-if="song" class="song-info">
+      <div v-if="type === 'song' && song" class="item-info">
         <img
-          :src="song.cover || defaultCover"
+          v-if="song.cover"
+          :src="song.cover"
           :alt="song.name"
-          class="song-cover"
+          class="item-cover"
+          @error="handleSongImageError"
         />
+        <div v-else class="default-cover">
+          <i class="fas fa-music"></i>
+        </div>
 
-        <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 class="item-details">
+          <div class="item-name">{{ song.name }}</div>
+          <div class="item-artist">{{ utils.formatArtist(song.artist) }}</div>
+          <div class="item-album" v-if="song.album">{{ song.album }}</div>
+        </div>
+      </div>
+
+      <!-- 歌单信息 -->
+      <div v-if="type === 'playlist' && playlist" class="item-info">
+        <img
+          v-if="playlist.cover"
+          :src="playlist.cover"
+          :alt="playlist.name"
+          class="item-cover"
+          @error="handlePlaylistImageError"
+        />
+        <div v-else class="default-cover">
+          <i class="fas fa-music"></i>
+        </div>
+
+        <div class="item-details">
+          <div class="item-name">{{ playlist.name }}</div>
+          <div class="item-meta">{{ playlist.songs?.length || 0 }}首歌曲</div>
+          <div class="item-meta" v-if="playlist.updatedAt">{{ formatDate(playlist.updatedAt) }}</div>
         </div>
       </div>
 
       <!-- 操作按钮列表 -->
       <div class="actions-list">
+        <!-- 歌曲操作 -->
+        <template v-if="type === 'song'">
+          <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>
+          </button>
+
+          <button class="action-item" @click="handleAction('download')">
+            <i class="fas fa-download"></i>
+            <span>下载到本地</span>
+          </button>
+        </template>
+
+        <!-- 歌单操作 -->
+        <template v-if="type === 'playlist'">
+          <button class="action-item" @click="handleAction('viewInfo')">
+            <i class="fas fa-info-circle"></i>
+            <span>查看信息</span>
+          </button>
+
+          <button class="action-item" @click="handleAction('editInfo')">
+            <i class="fas fa-edit"></i>
+            <span>编辑信息</span>
+          </button>
+
+          <button class="action-item" @click="handleAction('clearPlaylist')">
+            <i class="fas fa-trash-alt"></i>
+            <span>清空歌单</span>
+          </button>
+
+          <button class="action-item danger" @click="handleAction('deletePlaylist')">
+            <i class="fas fa-trash"></i>
+            <span>删除歌单</span>
+          </button>
+        </template>
+
+        <!-- 自定义操作 -->
         <button
+          v-for="action in customActions"
+          :key="action.key"
           class="action-item"
-          @click="handleAction('favorite')"
-          :class="{ active: isFavorite }"
+          :class="action.class"
+          @click="handleAction(action.key)"
         >
-          <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>
-        </button>
-
-        <button class="action-item" @click="handleAction('download')">
-          <i class="fas fa-download"></i>
-          <span>下载到本地</span>
+          <i :class="action.icon"></i>
+          <span>{{ action.label }}</span>
         </button>
       </div>
 
@@ -46,6 +109,7 @@
 
     <!-- 播放列表选择对话框 -->
     <PlaylistSelector
+      v-if="song"
       :show="showPlaylistSelector"
       :song="song"
       @close="closePlaylistSelector"
@@ -57,70 +121,144 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { useFavoritesStore } from '@/stores/favorites'
+import { useToastStore } from '@/stores/toast'
 import PlaylistSelector from '@/components/playlist/PlaylistSelector.vue'
+import { utils } from '@/services/musicApi'
 
 const props = defineProps({
   song: {
     type: Object,
     default: null
+  },
+  playlist: {
+    type: Object,
+    default: null
+  },
+  // 操作项类型：'song' | 'playlist'
+  type: {
+    type: String,
+    default: 'song',
+    validator: (value) => ['song', 'playlist'].includes(value)
+  },
+  // 自定义操作项
+  customActions: {
+    type: Array,
+    default: () => []
   }
 })
 
 const emit = defineEmits(['close', 'action'])
 
 const favoritesStore = useFavoritesStore()
+const toastStore = useToastStore()
 const showPlaylistSelector = ref(false)
 
+// 图片加载错误处理
+const handleSongImageError = (event) => {
+  event.target.style.display = 'none'
+}
+
+const handlePlaylistImageError = (event) => {
+  event.target.style.display = 'none'
+}
+
 // 计算属性
 const isFavorite = computed(() => {
   return props.song ? favoritesStore.isFavorite(props.song) : false
 })
 
 const defaultCover = computed(() => {
-  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSIxMiIvPgo8cGF0aCBkPSJNNDAgMjhMNDYgNDBINDJWNTBIMzhWNDBIMzRMNDAgMjhaIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMykiLz4KPC9zdmc+Cg=='
+  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDUpIiByeD0iMTIiLz4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAsIDMwKSI+CjxwYXRoIGQ9Ik0xMCA1VjE2QzEwIDE3LjY1NyA4LjY1NyAxOSA3IDE5QzUuMzQzIDE5IDQgMTcuNjU3IDQgMTZDNCA0LjM0MyA1LjM0MyAxMyA3IDEzQzcuNTUyIDEzIDguMDY3IDEzLjE0NyA4LjUgMTMuNFY3LjVMMTUgM1YxMkMxNSAxMy42NTcgMTMuNjU3IDE1IDEyIDE1QzEwLjM0MyAxNSA5IDEzLjY1NyA5IDEyQzkgMTAuMzQzIDEwLjM0MyA5IDEyIDlDMTIuNTUyIDkgMTMuMDY3IDkuMTQ3IDEzLjUgOS40VjBMMTAgNVoiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC42KSIvPgo8L2c+Cjwvc3ZnPgo='
+})
+
+const defaultPlaylistCover = computed(() => {
+  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDUpIiByeD0iMTIiLz4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAsIDMwKSI+CjxwYXRoIGQ9Ik0xMCA1VjE2QzEwIDE3LjY1NyA4LjY1NyAxOSA3IDE5QzUuMzQzIDE5IDQgMTcuNjU3IDQgMTZDNCA0LjM0MyA1LjM0MyAxMyA3IDEzQzcuNTUyIDEzIDguMDY3IDEzLjE0NyA4LjUgMTMuNFY3LjVMMTUgM1YxMkMxNSAxMy42NTcgMTMuNjU3IDE1IDEyIDE1QzEwLjM0MyAxNSA5IDEzLjY1NyA5IDEyQzkgMTAuMzQzIDEwLjM0MyA5IDEyIDlDMTIuNTUyIDkgMTMuMDY3IDkuMTQ3IDEzLjUgOS40VjBMMTAgNVoiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC42KSIvPgo8L2c+Cjwvc3ZnPgo='
 })
 
+// 格式化日期
+const formatDate = (timestamp) => {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diffTime = now - date
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+  
+  if (diffDays === 0) {
+    return '今天'
+  } else if (diffDays === 1) {
+    return '昨天'
+  } else if (diffDays < 7) {
+    return `${diffDays}天前`
+  } else {
+    return date.toLocaleDateString('zh-CN', { 
+      month: 'short', 
+      day: 'numeric' 
+    })
+  }
+}
+
 // 方法
 const handleAction = async (action) => {
-  if (!props.song && action !== 'close') return
-
   switch (action) {
+    // 歌曲操作
     case 'favorite':
+      if (!props.song) return
       try {
         if (isFavorite.value) {
           await favoritesStore.removeFromFavorites(props.song)
+          toastStore.success('已从我喜欢的音乐中移除')
         } else {
           await favoritesStore.addToFavorites(props.song)
+          toastStore.success('已添加到我喜欢的音乐')
         }
       } catch (error) {
         console.error('收藏操作失败:', error)
+        toastStore.error('操作失败，请重试')
       }
       break
 
     case 'addToPlaylist':
+      if (!props.song) return
       // 打开播放列表选择器
       showPlaylistSelector.value = true
       break
 
     case 'download':
+      if (!props.song) return
       // 实现下载功能
       try {
-        // 这里可以调用下载逻辑
-        const link = document.createElement('a')
         if (props.song.url) {
+          const link = document.createElement('a')
           link.href = props.song.url
-          link.download = `${props.song.artist} - ${props.song.name}.mp3`
+          link.download = `${utils.formatArtist(props.song.artist)} - ${props.song.name}.mp3`
           document.body.appendChild(link)
           link.click()
           document.body.removeChild(link)
+          toastStore.success('开始下载')
+        } else {
+          toastStore.warning('该歌曲暂不支持下载')
         }
       } catch (error) {
         console.error('下载失败:', error)
+        toastStore.error('下载失败，请重试')
       }
       break
-  }
 
-  emit('action', action)
+    // 歌单操作
+    case 'viewInfo':
+    case 'editInfo':
+    case 'clearPlaylist':
+    case 'deletePlaylist':
+      // 这些操作由父组件处理
+      emit('action', { action, playlist: props.playlist })
+      emit('close')
+      break
+
+    // 自定义操作
+    default:
+      emit('action', { action, song: props.song, playlist: props.playlist })
+      break
+  }
 }
 
 // 关闭播放列表选择器
@@ -130,7 +268,7 @@ const closePlaylistSelector = () => {
 
 // 处理添加到歌单成功
 const handleAddedToPlaylist = (data) => {
-  console.log('歌曲已添加到歌单:', data.message)
+  toastStore.success(data.message)
   // 关闭当前面板
   emit('close')
 }
@@ -160,7 +298,7 @@ const handleAddedToPlaylist = (data) => {
   overflow: hidden;
 }
 
-.song-info {
+.item-info {
   display: flex;
   align-items: center;
   gap: 16px;
@@ -168,7 +306,7 @@ const handleAddedToPlaylist = (data) => {
   border-bottom: 1px solid var(--border-light);
 }
 
-.song-cover {
+.item-cover {
   width: 64px;
   height: 64px;
   border-radius: 12px;
@@ -176,12 +314,25 @@ const handleAddedToPlaylist = (data) => {
   flex-shrink: 0;
 }
 
-.song-details {
+.default-cover {
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--accent-red), #ff8a8a);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.item-details {
   flex: 1;
   min-width: 0;
 }
 
-.song-name {
+.item-name {
   font-size: 18px;
   font-weight: 600;
   color: var(--text-primary);
@@ -191,7 +342,7 @@ const handleAddedToPlaylist = (data) => {
   text-overflow: ellipsis;
 }
 
-.song-artist {
+.item-artist {
   font-size: 14px;
   color: var(--text-secondary);
   margin-bottom: 4px;
@@ -200,7 +351,7 @@ const handleAddedToPlaylist = (data) => {
   text-overflow: ellipsis;
 }
 
-.song-album {
+.item-album {
   font-size: 12px;
   color: var(--text-tertiary);
   white-space: nowrap;
@@ -208,6 +359,21 @@ const handleAddedToPlaylist = (data) => {
   text-overflow: ellipsis;
 }
 
+.item-meta {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-meta:last-child {
+  margin-bottom: 0;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
 .actions-list {
   padding: 8px 0;
 }
@@ -284,25 +450,26 @@ const handleAddedToPlaylist = (data) => {
 
 /* 响应式 */
 @media (max-width: 375px) {
-  .song-info {
+  .item-info {
     padding: 20px 16px 16px;
   }
 
-  .song-cover {
+  .item-cover {
     width: 56px;
     height: 56px;
     border-radius: 10px;
   }
 
-  .song-name {
+  .item-name {
     font-size: 16px;
   }
 
-  .song-artist {
+  .item-artist {
     font-size: 13px;
   }
 
-  .song-album {
+  .item-album,
+  .item-meta {
     font-size: 11px;
   }
 
@@ -336,11 +503,11 @@ const handleAddedToPlaylist = (data) => {
     padding: 20px;
   }
 
-  .song-info {
+  .item-info {
     padding: 28px 24px 24px;
   }
 
-  .song-cover {
+  .item-cover {
     width: 72px;
     height: 72px;
     border-radius: 14px;

src/components/playlist/PlaylistSelector.vue

@@ -14,7 +14,10 @@
             v-for="playlist in playlists"
             :key="playlist.id"
             class="playlist-item"
-            :class="{ 'disabled': playlist.isDefault }"
+            :class="{ 
+              'disabled': isAlreadyInPlaylist(playlist),
+              'selected': selectedPlaylist?.id === playlist.id 
+            }"
             @click="selectPlaylist(playlist)"
           >
             <div class="playlist-cover">
@@ -31,49 +34,32 @@
             <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>
             </div>
 
-            <div class="playlist-status" v-if="playlist.isDefault">
-              <i class="fas fa-info-circle"></i>
+            <div class="playlist-status">
+              <i v-if="isAlreadyInPlaylist(playlist)" class="fas fa-check" title="已添加"></i>
+              <i v-else-if="selectedPlaylist?.id === playlist.id" class="fas fa-plus-circle"></i>
             </div>
           </div>
         </div>
-
-        <div class="create-new">
-          <button class="create-new-btn" @click="openCreatePlaylist">
-            <i class="fas fa-plus"></i>
-            <span>创建新播放列表</span>
-          </button>
-        </div>
       </div>
 
-      <!-- 创建新播放列表表单 -->
-      <div v-if="showCreateForm" class="create-form">
-        <div class="form-group">
-          <label>播放列表名称</label>
-          <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()">
-            创建并添加
-          </button>
-        </div>
+      <div class="dialog-footer">
+        <button class="btn btn-cancel" @click="handleClose">取消</button>
+        <button 
+          class="btn btn-confirm" 
+          @click="confirmAdd"
+          :disabled="!selectedPlaylist || isAlreadyInPlaylist(selectedPlaylist)"
+        >
+          确定
+        </button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed } from 'vue'
 import { usePlaylistStore } from '@/stores/playlist'
 import { useToastStore } from '@/stores/toast'
 
@@ -92,84 +78,60 @@ const emit = defineEmits(['close', 'added'])
 
 const playlistStore = usePlaylistStore()
 const toastStore = useToastStore()
-const showCreateForm = ref(false)
-const newPlaylistName = ref('')
-const nameInput = ref(null)
+const selectedPlaylist = ref(null)
 
-// 获取所有播放列表（排除默认播放列表，因为那只是当前播放列表）
+// 获取所有播放列表
 const playlists = computed(() => {
-  return playlistStore.playlists.filter(p => !p.isDefault)
+  return playlistStore.playlists || []
 })
 
+// 检查歌曲是否已在某个歌单中
+const isAlreadyInPlaylist = (playlist) => {
+  if (!props.song || !playlist.songs) return false
+  return playlist.songs.some(song => song.id === props.song.id)
+}
+
 // 选择播放列表
-const selectPlaylist = async (playlist) => {
-  if (playlist.isDefault) {
-    // 默认播放列表（当前播放列表）不能添加歌曲
-    return
+const selectPlaylist = (playlist) => {
+  if (isAlreadyInPlaylist(playlist)) {
+    return // 已添加的歌单不能选择
   }
-
-  try {
-    const result = playlistStore.addSongToPlaylist(playlist.id, props.song)
-
-    if (result.success) {
-      emit('added', { playlist, song: props.song, message: result.message })
-      handleClose()
-    } else {
-      toastStore.error(result.message)
-    }
-  } catch (error) {
-    console.error('添加到播放列表失败:', error)
-    toastStore.error('添加失败，请重试')
+  
+  if (selectedPlaylist.value?.id === playlist.id) {
+    selectedPlaylist.value = null // 取消选择
+  } else {
+    selectedPlaylist.value = playlist // 选择新的歌单
   }
 }
 
-// 打开创建播放列表表单
-const openCreatePlaylist = () => {
-  showCreateForm.value = true
-  nextTick(() => {
-    if (nameInput.value) {
-      nameInput.value.focus()
-    }
-  })
-}
-
-// 取消创建
-const cancelCreate = () => {
-  showCreateForm.value = false
-  newPlaylistName.value = ''
-}
-
-// 创建播放列表并添加歌曲
-const createAndAdd = async () => {
-  if (!newPlaylistName.value.trim()) return
+// 确认添加
+const confirmAdd = async () => {
+  if (!selectedPlaylist.value || isAlreadyInPlaylist(selectedPlaylist.value)) {
+    return
+  }
 
   try {
-    // 创建新播放列表
-    const newPlaylist = playlistStore.createPlaylist(newPlaylistName.value.trim())
-
-    // 添加歌曲到新播放列表
-    const result = playlistStore.addSongToPlaylist(newPlaylist.id, props.song)
+    const result = playlistStore.addSongToPlaylist(selectedPlaylist.value.id, props.song)
 
     if (result.success) {
-      emit('added', {
-        playlist: newPlaylist,
-        song: props.song,
-        message: `已添加到新播放列表"${newPlaylist.name}"`
+      emit('added', { 
+        playlist: selectedPlaylist.value, 
+        song: props.song, 
+        message: result.message 
       })
       handleClose()
     } else {
       toastStore.error(result.message)
     }
   } catch (error) {
-    console.error('创建播放列表并添加歌曲失败:', error)
-    toastStore.error('操作失败，请重试')
+    console.error('添加到播放列表失败:', error)
+    toastStore.error('添加失败，请重试')
   }
 }
 
 // 关闭对话框
 const handleClose = () => {
-  showCreateForm.value = false
-  newPlaylistName.value = ''
+  selectedPlaylist.value = null
   emit('close')
 }
 </script>
@@ -263,11 +225,25 @@ const handleClose = () => {
   border-color: var(--accent-red);
 }
 
+.playlist-item.selected {
+  background: var(--overlay-lighter);
+  border-color: var(--accent-red);
+}
+
+.playlist-item.selected .playlist-name {
+  color: var(--accent-red);
+}
+
 .playlist-item.disabled {
-  opacity: 0.5;
+  opacity: 0.6;
   cursor: not-allowed;
 }
 
+.playlist-item.disabled:hover {
+  background: transparent;
+  border-color: transparent;
+}
+
 .playlist-cover {
   width: 48px;
   height: 48px;
@@ -311,92 +287,45 @@ const handleClose = () => {
 .playlist-count {
   font-size: 12px;
   color: var(--text-secondary);
-  margin: 0 0 2px;
-}
-
-.playlist-note {
-  font-size: 11px;
-  color: var(--text-tertiary);
   margin: 0;
 }
 
 .playlist-status {
   color: var(--text-tertiary);
-  font-size: 16px;
-}
-
-.create-new {
-  border-top: 1px solid var(--border-lighter);
-  padding-top: 16px;
+  font-size: 18px;
+  flex-shrink: 0;
 }
 
-.create-new-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 12px 16px;
-  border: 2px dashed var(--border-light);
-  background: transparent;
-  color: var(--text-secondary);
-  border-radius: 8px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: var(--transition-fast);
+.playlist-status .fa-check {
+  color: var(--accent-green, #28a745);
 }
 
-.create-new-btn:hover {
-  border-color: var(--accent-red);
+.playlist-status .fa-plus-circle {
   color: var(--accent-red);
-  background: var(--overlay-lighter);
 }
 
-.create-form {
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
   padding: 20px 24px;
   border-top: 1px solid var(--border-lighter);
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.form-group {
-  margin-bottom: 16px;
-}
-
-.form-group label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-primary);
-  margin-bottom: 8px;
 }
 
-.form-group input {
-  width: 100%;
-  padding: 12px 16px;
-  border: 2px solid var(--border-card);
-  border-radius: 8px;
-  background: var(--overlay-lighter);
-  color: var(--text-primary);
-  font-size: 14px;
-  transition: var(--transition-fast);
-  font-family: inherit;
-  box-sizing: border-box;
+.btn-confirm {
+  background: var(--accent-red);
+  color: white;
 }
 
-.form-group input:focus {
-  outline: none;
-  border-color: var(--accent-red);
-  background: rgba(255, 255, 255, 0.08);
+.btn-confirm:hover:not(:disabled) {
+  background: var(--accent-red-hover);
 }
 
-.form-group input::placeholder {
+.btn-confirm:disabled {
+  background: rgba(255, 255, 255, 0.1);
   color: var(--text-tertiary);
-}
-
-.form-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
+  cursor: not-allowed;
 }
 
 .btn {

src/components/search/SearchResults.vue

@@ -85,7 +85,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch, defineAsyncComponent, createApp } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useSearchStore } from '@/stores/search'
 import { usePlayerStore } from '@/stores/player'
 import { usePlayQueueStore } from '@/stores/playqueue'
@@ -104,7 +104,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['retry', 'search', 'play', 'loadMore'])
+const emit = defineEmits(['retry', 'search', 'play', 'loadMore', 'showMoreActions'])
 
 const searchStore = useSearchStore()
 const playerStore = usePlayerStore()
@@ -158,41 +158,7 @@ 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)
+  emit('showMoreActions', song, event)
 }
 
 // 设置智能滚动加载 - 可视区域超过一半时加载下一页

src/components/search/SongItem.vue

@@ -23,7 +23,12 @@
                    :alt="song.name"
                    :data-song-data="JSON.stringify(song)"
                    @error="handleImageError"
+                   @load="handleImageLoad"
                  />
+        <!-- 音乐图标叠加层 -->
+        <div v-if="!imageLoaded" class="music-icon-overlay">
+          <i class="fas fa-music"></i>
+        </div>
         <div class="play-overlay">
           <i class="fas fa-play"></i>
         </div>
@@ -81,7 +86,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useFavoritesStore } from '@/stores/favorites'
 import { useToastStore } from '@/stores/toast'
 import { usePlayerStore } from '@/stores/player'
@@ -131,6 +136,9 @@ const toastStore = useToastStore()
 const playerStore = usePlayerStore()
 const { getDefaultCover, handleImageError, observeImage } = useSongCoverLoader()
 
+// 图片加载状态
+const imageLoaded = ref(false)
+
 // 计算属性
 const isFavorite = computed(() => {
   return favoritesStore.isFavorite(props.song)
@@ -150,6 +158,14 @@ const getSongCover = () => {
   return getDefaultCover()
 }
 
+// 处理图片加载完成
+const handleImageLoad = (event) => {
+  // 只有当图片src不是默认封面时才设置为已加载
+  if (event.target.src && event.target.src !== getDefaultCover()) {
+    imageLoaded.value = true
+  }
+}
+
 // 初始化懒加载观察
 const initLazyImages = () => {
   const imageElements = document.querySelectorAll('.favorite-item .song-cover img')
@@ -290,6 +306,26 @@ onMounted(() => {
   object-fit: cover;
 }
 
+/* 音乐图标叠加层 */
+.music-icon-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, var(--accent-red), #ff8a8a);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-small);
+  transition: opacity 0.3s ease;
+}
+
+.music-icon-overlay i {
+  color: white;
+  font-size: 20px;
+}
+
 .play-overlay {
   position: absolute;
   top: 0;

src/composables/useSongCoverLoader.js

@@ -40,16 +40,20 @@ export const useSongCoverLoader = () => {
 
   /**
    * 获取默认封面
+   * 返回一个1x1透明像素的data URL，避免显示浏览器默认的破损图片图标
    */
   const getDefaultCover = () => {
-    return imageCacheManager.getDefaultImage()
+    // 返回1x1透明像素的data URL
+    return 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
   }
 
   /**
    * 处理图片加载错误
    */
   const handleImageError = (event) => {
-    event.target.src = getDefaultCover()
+    // 不设置 src，也不隐藏图片，让父组件的错误处理机制接管
+    // 可以触发自定义事件让组件知道加载失败
+    event.target.dispatchEvent(new CustomEvent('cover-load-failed'))
   }
   /**
    * 初始化懒加载观察器

src/stores/playlist.js

@@ -23,9 +23,17 @@ export const usePlaylistStore = defineStore('playlist', () => {
   
   // 歌单管理方法
   const createPlaylist = (name, description = '') => {
+    const trimmedName = name.trim()
+    
+    // 检查歌单名称是否重复
+    const exists = playlists.value.some(p => p.name === trimmedName)
+    if (exists) {
+      throw new Error('歌单名称已存在，请使用其他名称')
+    }
+    
     const playlist = {
       id: `playlist_${Date.now()}`,
-      name: name.trim(),
+      name: trimmedName,
       description: description.trim(),
       songs: [],
       createdAt: Date.now(),
@@ -58,6 +66,15 @@ export const usePlaylistStore = defineStore('playlist', () => {
     const playlist = playlists.value.find(p => p.id === playlistId)
     if (!playlist) return false
     
+    // 如果更新名称，检查是否与其他歌单重复
+    if (updates.name) {
+      const trimmedName = updates.name.trim()
+      const exists = playlists.value.some(p => p.id !== playlistId && p.name === trimmedName)
+      if (exists) {
+        throw new Error('歌单名称已存在，请使用其他名称')
+      }
+    }
+    
     Object.assign(playlist, {
       ...updates,
       updatedAt: Date.now()
@@ -154,6 +171,38 @@ export const usePlaylistStore = defineStore('playlist', () => {
     return true
   }
   
+  const removeSongFromPlaylistByIndex = async (playlistId, index) => {
+    const playlist = getPlaylist(playlistId)
+    if (!playlist || index < 0 || index >= playlist.songs.length) return false
+    
+    const removedSong = playlist.songs[index]
+    playlist.songs.splice(index, 1)
+    playlist.updatedAt = Date.now()
+    
+    // 如果删除的是第一首歌且还有其他歌曲，更新封面
+    if (index === 0 && playlist.songs.length > 0) {
+      const firstSong = playlist.songs[0]
+      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
+    }
+    
+    saveToStorage()
+    return true
+  }
+  
   const isSongInPlaylist = (playlistId, song) => {
     const playlist = getPlaylist(playlistId)
     if (!playlist) return false
@@ -218,6 +267,18 @@ export const usePlaylistStore = defineStore('playlist', () => {
     }
   }
   
+  const clearPlaylist = (playlistId) => {
+    const playlist = getPlaylist(playlistId)
+    if (!playlist) return false
+    
+    playlist.songs = []
+    playlist.cover = null
+    playlist.updatedAt = Date.now()
+    
+    saveToStorage()
+    return true
+  }
+  
   // 清理方法
   const clearAllPlaylists = () => {
     playlists.value = []
@@ -242,10 +303,12 @@ export const usePlaylistStore = defineStore('playlist', () => {
     deletePlaylist,
     updatePlaylist,
     getPlaylist,
+    clearPlaylist,
     
     // 歌曲管理
     addSongToPlaylist,
     removeSongFromPlaylist,
+    removeSongFromPlaylistByIndex,
     isSongInPlaylist,
     addSongsToPlaylist,
     

src/utils/imageCache.js

@@ -147,9 +147,9 @@ class ImageCacheManager {
     })
   }
 
-  // 获取默认图片
+  // 获取默认图片 - 返回 null，让组件使用 fas fa-music 图标
   getDefaultImage() {
-    return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIHJ4PSIxMiIgZmlsbD0iIzE4MTgxOCIvPjxwYXRoIGQ9Ik0xODcgMTUwQzE4NyAxNzEuNTM5IDE2OS41MzkgMTg5IDE0OCAxODlDMTI2LjQ2MSAxODkgMTA5IDE3MS41MzkgMTA5IDE1MEMxMDkgMTI4LjQ2MSAxMjYuNDYxIDExMSAxNDggMTExQzE2OS41MzkgMTExIDE4NyAxMjguNDYxIDE4NyAxNTBaIiBzdHJva2U9IiM2NjY2NjYiIHN0cm9rZS13aWR0aD0iNiIvPjxjaXJjbGUgY3g9IjE0OCIgY3k9IjE1MCIgcj0iNiIgZmlsbD0iIzY2NjY2NiIvPjwvc3ZnPgo='
+    return null
   }
 
   // 获取缓存的图片

src/views/CurrentPlaylistPage.vue

@@ -443,11 +443,7 @@ const startDrag = (index) => {
 .play-controls {
   display: flex;
   gap: 12px;
-  padding: 16px;
-  margin: 0 16px 16px;
-  background: var(--bg-card);
-  border-radius: var(--radius-small);
-  border: 1px solid var(--border-light);
+  margin: 0 0 16px;
 }
 
 .control-btn {
@@ -456,7 +452,6 @@ const startDrag = (index) => {
   gap: 6px;
   padding: 10px 16px;
   border: none;
-  border-radius: 20px;
   font-size: 14px;
   cursor: pointer;
   transition: var(--transition-fast);
@@ -535,9 +530,7 @@ const startDrag = (index) => {
 
 .songs-list {
   background: var(--bg-card);
-  margin: 0 16px;
-  border-radius: var(--radius-small);
-  border: 1px solid var(--border-light);
+  margin: 0;
   overflow: hidden;
 }
 
@@ -716,7 +709,7 @@ const startDrag = (index) => {
   }
   
   .songs-list {
-    margin: 0 12px;
+    margin: 0;
   }
 }
 </style>

src/views/FullPlayerPage.vue

@@ -445,15 +445,21 @@ const handleTogglePlay = async () => {
 }
 
 const handlePrevious = () => {
-  playerStore.previous()
+  const result = playQueueStore.playPrevious()
+  if (result) {
+    playerStore.playSong(result)
+  }
 }
 
 const handleNext = () => {
-  playerStore.next()
+  const result = playQueueStore.playNext()
+  if (result) {
+    playerStore.playSong(result)
+  }
 }
 
 const handleTogglePlayMode = () => {
-  playerStore.togglePlayMode()
+  playQueueStore.togglePlayMode()
 }
 
 const handleShowPlaylist = () => {

src/views/HistoryPage.vue

@@ -7,10 +7,6 @@
         播放历史
       </h1>
       <div class="header-actions">
-        <button v-if="!isEmpty" class="action-btn" @click="showExportOptions">
-          <i class="fas fa-download"></i>
-          <span>导出</span>
-        </button>
         <button v-if="!isEmpty" class="action-btn danger" @click="confirmClearAll">
           <i class="fas fa-trash"></i>
           <span>清空</span>
@@ -28,10 +24,6 @@
         <div class="stat-number">{{ uniqueSongs }}</div>
         <div class="stat-label">不同歌曲</div>
       </div>
-      <div class="stat-card">
-        <div class="stat-number">{{ formatDuration(playStats.totalDuration) }}</div>
-        <div class="stat-label">总时长</div>
-      </div>
     </div>
     
     <!-- 筛选和搜索 -->
@@ -282,7 +274,7 @@ const playQueueStore = usePlayQueueStore()
 const toastStore = useToastStore()
 
 // 响应式数据
-const viewMode = ref('recent') // 'recent', 'grouped', 'top'
+const viewMode = ref('grouped') // 'recent', 'grouped', 'top' - 默认显示按日期
 const searchKeyword = ref('')
 const selectedSong = ref(null)
 const showMoreActions = ref(false)
@@ -344,8 +336,6 @@ const formatDuration = (seconds) => {
 
 const formatPlayTime = (timestamp, showTime = false) => {
   const date = new Date(timestamp)
-  const now = new Date()
-  const diff = now - date
   
   if (showTime) {
     return date.toLocaleTimeString('zh-CN', { 
@@ -354,18 +344,11 @@ const formatPlayTime = (timestamp, showTime = false) => {
     })
   }
   
-  if (diff < 60 * 1000) {
-    return '刚刚播放'
-  } else if (diff < 60 * 60 * 1000) {
-    const minutes = Math.floor(diff / (60 * 1000))
-    return `${minutes}分钟前`
-  } else if (diff < 24 * 60 * 60 * 1000) {
-    const hours = Math.floor(diff / (60 * 60 * 1000))
-    return `${hours}小时前`
-  } else {
-    const days = Math.floor(diff / (24 * 60 * 60 * 1000))
-    return `${days}天前`
-  }
+  // 移除"多少分钟前"显示，直接显示时间
+  return date.toLocaleTimeString('zh-CN', { 
+    hour: '2-digit', 
+    minute: '2-digit' 
+  })
 }
 
 const formatDate = (dateString) => {
@@ -526,16 +509,7 @@ const handleMoreAction = async (action) => {
   showMoreActions.value = false
 }
 
-// 导出和清空操作
-const showExportOptions = () => {
-  const result = historyStore.exportHistory()
-  if (result.success) {
-    toastStore.success('导出成功')
-  } else {
-    toastStore.error('导出失败')
-  }
-}
-
+// 导出和清空操作 - 移除导出功能
 const confirmClearAll = () => {
   confirmDialog.value = {
     title: '清空播放历史',
@@ -599,7 +573,7 @@ onMounted(() => {
 }
 
 .page-title i {
-  color: var(--accent-blue);
+  color: var(--accent-red);
 }
 
 .header-actions {
@@ -613,7 +587,7 @@ onMounted(() => {
   gap: 6px;
   padding: 8px 16px;
   border: none;
-  background: var(--accent-blue);
+  background: var(--accent-red);
   color: white;
   border-radius: 20px;
   font-size: 14px;
@@ -623,7 +597,7 @@ onMounted(() => {
 }
 
 .action-btn:hover {
-  background: var(--accent-blue-hover);
+  background: var(--accent-red-hover);
   transform: translateY(-1px);
 }
 
@@ -637,7 +611,7 @@ onMounted(() => {
 
 .stats-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   padding: 16px;
   background: var(--bg-card);
@@ -654,7 +628,7 @@ onMounted(() => {
 .stat-number {
   font-size: 20px;
   font-weight: 700;
-  color: var(--accent-blue);
+  color: var(--accent-red);
   margin-bottom: 4px;
 }
 
@@ -696,7 +670,7 @@ onMounted(() => {
 }
 
 .filter-tab.active {
-  background: var(--accent-blue);
+  background: var(--accent-red);
   color: white;
 }
 
@@ -780,7 +754,7 @@ onMounted(() => {
   gap: 8px;
   padding: 12px 24px;
   border: none;
-  background: var(--accent-blue);
+  background: var(--accent-red);
   color: white;
   border-radius: 25px;
   font-size: 14px;
@@ -790,7 +764,7 @@ onMounted(() => {
 }
 
 .discover-btn:hover {
-  background: var(--accent-blue-hover);
+  background: var(--accent-red-hover);
   transform: scale(1.05);
 }
 
@@ -818,7 +792,7 @@ onMounted(() => {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: var(--accent-gradient);
+  background: var(--accent-red);
   color: white;
   display: flex;
   align-items: center;

src/views/HomePage.vue

@@ -14,8 +14,17 @@
         @search="handleSearch"
         @play="handlePlay"
         @loadMore="handleLoadMore"
+        @showMoreActions="handleShowMoreActions"
       />
     </div>
+    
+    <!-- 更多操作菜单 -->
+    <MoreActionsPanel 
+      v-if="showMoreActions && selectedSong"
+      :song="selectedSong"
+      @action="handleMoreAction"
+      @close="showMoreActions = false"
+    />
   </div>
 </template>
 
@@ -26,9 +35,11 @@ import { usePlayerStore } from '@/stores/player'
 import { usePlayQueueStore } from '@/stores/playqueue'
 import { useHistoryStore } from '@/stores/history'
 import { useToastStore } from '@/stores/toast'
+import { useFavoritesStore } from '@/stores/favorites'
 import { musicApi, utils } from '@/services/musicApi'
 import SearchBox from '@/components/search/SearchBox.vue'
 import SearchResults from '@/components/search/SearchResults.vue'
+import MoreActionsPanel from '@/components/player/MoreActionsPanel.vue'
 
 const searchStore = useSearchStore()
 const playerStore = usePlayerStore()
@@ -40,6 +51,8 @@ const toastStore = useToastStore()
 const searchError = ref('')
 const hasSearched = ref(false)
 const lastSearchKeyword = ref('')
+const showMoreActions = ref(false)
+const selectedSong = ref(null)
 
 // 计算属性
 const searchResults = computed(() => searchStore.searchResults)
@@ -104,6 +117,72 @@ const handlePlay = async (song, index) => {
   }
 }
 
+const handleShowMoreActions = (song, event) => {
+  selectedSong.value = song
+  showMoreActions.value = true
+}
+
+const handleMoreAction = async (action) => {
+  if (!selectedSong.value) return
+  
+  const song = selectedSong.value
+  
+  switch (action) {
+    case 'favorite':
+      try {
+        const favoritesStore = useFavoritesStore()
+        if (favoritesStore.isFavorite(song)) {
+          await favoritesStore.removeFromFavorites(song)
+          toastStore.success('已从我喜欢的音乐中移除')
+        } else {
+          await favoritesStore.addToFavorites(song)
+          toastStore.success('已添加到我喜欢的音乐')
+        }
+      } catch (error) {
+        console.error('收藏操作失败:', error)
+        toastStore.error('操作失败，请重试')
+      }
+      break
+      
+    case 'addToPlaylist':
+      // 添加到播放列表
+      try {
+        const result = playQueueStore.addToQueue(song, 'last')
+        if (result.success) {
+          toastStore.success(`"${song.name}" 已添加到播放列表`)
+        } else {
+          toastStore.error(result.message || '添加失败')
+        }
+      } catch (error) {
+        console.error('添加到播放列表失败:', error)
+        toastStore.error('添加到播放列表失败')
+      }
+      break
+      
+    case 'download':
+      // 实现下载功能
+      try {
+        if (song.url) {
+          const link = document.createElement('a')
+          link.href = song.url
+          link.download = `${utils.formatArtist(song.artist)} - ${song.name}.mp3`
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+          toastStore.success('开始下载')
+        } else {
+          toastStore.warning('该歌曲暂不支持下载')
+        }
+      } catch (error) {
+        console.error('下载失败:', error)
+        toastStore.error('下载失败，请重试')
+      }
+      break
+  }
+  
+  showMoreActions.value = false
+}
+
 const getErrorMessage = (error) => {
   if (error.message?.includes('Failed to fetch')) {
     return '网络连接失败，请检查网络后重试'

src/views/PlaylistDetailPage.vue

@@ -1,36 +1,14 @@
 <template>
   <div class="playlist-detail-page">
     <!-- 头部信息 -->
-    <div class="playlist-header">
-      <button class="back-btn" @click="goBack">
-        <i class="fas fa-arrow-left"></i>
-      </button>
-      
-      <div class="playlist-cover">
-        <img 
-          v-if="playlist?.cover" 
-          :src="playlist.cover" 
-          :alt="playlist?.name"
-          @error="handleImageError"
-        />
-        <div v-else class="default-cover">
-          <i class="fas fa-music"></i>
-        </div>
-      </div>
-      
-      <div class="playlist-info">
-        <h1 class="playlist-name">{{ playlist?.name || '播放列表' }}</h1>
-        <p class="playlist-description" v-if="playlist?.description">
-          {{ playlist.description }}
-        </p>
-        <div class="playlist-stats">
-          <span class="song-count">{{ playlist?.songs?.length || 0 }}首歌曲</span>
-          <span class="created-time">{{ formatCreateTime(playlist?.createdAt) }}</span>
-        </div>
+    <div class="page-header">
+      <div class="page-title">
+        <i class="fas fa-arrow-left back-icon" @click="goBack"></i>
+        <i class="fas fa-music"></i>
+        {{ playlist?.name || '播放列表' }}
       </div>
-      
-      <div class="playlist-actions">
-        <button class="action-btn more-btn" @click="showMoreActions">
+      <div class="header-actions">
+        <button class="action-btn" @click="showMoreActions">
           <i class="fas fa-ellipsis-v"></i>
         </button>
       </div>
@@ -67,64 +45,19 @@
       </div>
       
       <div v-else class="songs-list">
-        <div 
+        <SongItem
           v-for="(song, index) in playlist.songs"
           :key="`${song.id}-${index}`"
-          class="song-item"
-          :class="{ 
-            active: isCurrentSong(song), 
-            'edit-mode': editMode 
-          }"
-        >
-          <!-- 拖拽手柄 -->
-          <div v-if="editMode" class="drag-handle">
-            <i class="fas fa-grip-vertical"></i>
-          </div>
-          
-          <!-- 歌曲序号/播放图标 -->
-          <div class="song-index" @click="playSong(song, index)">
-            <span v-if="!isCurrentSong(song) || !playerStore.isPlaying">
-              {{ String(index + 1).padStart(2, '0') }}
-            </span>
-            <i v-else class="fas fa-volume-up playing-icon"></i>
-          </div>
-          
-          <!-- 歌曲信息 -->
-          <div class="song-info" @click="playSong(song, index)">
-            <div class="song-name">{{ song.name }}</div>
-            <div class="song-artist">
-              {{ formatArtist(song.artist) }} · {{ song.album }}
-            </div>
-          </div>
-          
-          <!-- 歌曲操作 -->
-          <div class="song-actions">
-            <button 
-              v-if="!editMode"
-              class="action-btn favorite-btn"
-              :class="{ active: favoritesStore.isFavorite(song) }"
-              @click.stop="toggleFavorite(song)"
-            >
-              <i :class="favoritesStore.isFavorite(song) ? 'fas fa-heart' : 'far fa-heart'"></i>
-            </button>
-            
-            <button 
-              v-if="!editMode"
-              class="action-btn more-btn"
-              @click.stop="showSongActions(song, index)"
-            >
-              <i class="fas fa-ellipsis-v"></i>
-            </button>
-            
-            <button 
-              v-if="editMode"
-              class="action-btn remove-btn"
-              @click.stop="removeSong(index)"
-            >
-              <i class="fas fa-times"></i>
-            </button>
-          </div>
-        </div>
+          :song="song"
+          :index="index"
+          :showBatchActions="editMode"
+          :isSelected="false"
+          :showRemove="editMode"
+          :showActions="!editMode"
+          @play="playSong"
+          @remove="removeSong"
+          @showMoreActions="showSongActions"
+        />
       </div>
     </div>
     
@@ -173,6 +106,93 @@
       type="danger"
       @confirm="confirmAction"
     />
+    
+    <!-- 歌单选择器 -->
+    <PlaylistSelector
+      v-if="selectedSong"
+      :show="showPlaylistSelector"
+      :song="selectedSong"
+      @close="closePlaylistSelector"
+      @added="handlePlaylistSelectAdded"
+    />
+    
+    <!-- 编辑歌单Modal -->
+    <Modal
+      :title="editForm.name ? '编辑歌单信息' : '新建歌单'"
+      size="small"
+      :closable="true"
+      ref="editModalRef"
+    >
+      <div class="edit-form">
+        <div class="form-group">
+          <label>歌单名称</label>
+          <input
+            v-model="editForm.name"
+            type="text"
+            placeholder="请输入歌单名称"
+            maxlength="50"
+          />
+        </div>
+        
+        <div class="form-group">
+          <label>描述 (可选)</label>
+          <textarea
+            v-model="editForm.description"
+            placeholder="请输入歌单描述"
+            maxlength="200"
+            rows="3"
+          ></textarea>
+        </div>
+      </div>
+      
+      <template #footer>
+        <button class="btn btn-cancel" @click="cancelEdit">取消</button>
+        <button class="btn btn-primary" @click="savePlaylistInfo" :disabled="!editForm.name.trim()">
+          保存
+        </button>
+      </template>
+    </Modal>
+    
+    <!-- 歌单信息Modal -->
+    <Modal
+      :title="playlist?.name || '歌单信息'"
+      size="medium"
+      :closable="true"
+      ref="infoModalRef"
+    >
+      <div class="playlist-info-content">
+        <div class="playlist-cover-large">
+          <img 
+            v-if="playlist?.cover" 
+            :src="playlist.cover" 
+            :alt="playlist?.name"
+            @error="handleImageError"
+          />
+          <div v-else class="default-cover-large">
+            <i class="fas fa-music"></i>
+          </div>
+        </div>
+        
+        <div class="playlist-meta">
+          <p class="playlist-description" v-if="playlist?.description">
+            {{ playlist.description }}
+          </p>
+          <div class="playlist-stats">
+            <span class="song-count">{{ playlist?.songs?.length || 0 }}首歌曲</span>
+            <span class="created-time">{{ formatCreateTime(playlist?.createdAt) }}</span>
+          </div>
+        </div>
+      </div>
+    </Modal>
+    
+    <!-- 统一操作菜单 -->
+    <ActionMenu
+      v-if="showMoreActionsPanel"
+      type="playlist"
+      :playlist="playlist"
+      @close="closeMoreActionsPanel"
+      @action="handleMoreAction"
+    />
   </div>
 </template>
 
@@ -186,6 +206,10 @@ import { usePlayQueueStore } from '@/stores/playqueue'
 import { useToastStore } from '@/stores/toast'
 import { utils } from '@/services/musicApi'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+import PlaylistSelector from '@/components/playlist/PlaylistSelector.vue'
+import Modal from '@/components/common/Modal.vue'
+import ActionMenu from '@/components/common/ActionMenu.vue'
+import SongItem from '@/components/search/SongItem.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -200,19 +224,22 @@ const playlist = ref(null)
 const editMode = ref(false)
 const showActions = ref(false)
 const showSongMenu = ref(false)
+const showPlaylistSelector = ref(false)
+const showEditModal = ref(false)
+const showMoreActionsPanel = ref(false)
 const selectedSong = ref(null)
 const selectedIndex = ref(-1)
 const confirmDialogRef = ref(null)
+const editModalRef = ref(null)
+const infoModalRef = ref(null)
 const confirmTitle = ref('')
 const confirmMessage = ref('')
 const confirmButtonText = ref('确认')
 const pendingAction = ref(null)
-
-// 计算属性
-const isCurrentSong = (song) => {
-  return playerStore.currentSong?.id === song.id && 
-         playerStore.currentSong?.source === song.source
-}
+const editForm = ref({
+  name: '',
+  description: ''
+})
 
 // 方法
 const loadPlaylist = () => {
@@ -228,6 +255,10 @@ const loadPlaylist = () => {
   }
 }
 
+const showInfoModal = () => {
+  infoModalRef.value?.open()
+}
+
 const goBack = () => {
   router.push('/playlists')
 }
@@ -236,10 +267,6 @@ const handleImageError = (event) => {
   event.target.style.display = 'none'
 }
 
-const formatArtist = (artist) => {
-  return utils.formatArtist ? utils.formatArtist(artist) : artist
-}
-
 const formatCreateTime = (timestamp) => {
   if (!timestamp) return ''
   const date = new Date(timestamp)
@@ -277,15 +304,6 @@ const playSong = async (song, index) => {
   }
 }
 
-const toggleFavorite = async (song) => {
-  try {
-    await favoritesStore.toggleFavorite(song)
-  } catch (error) {
-    console.error('收藏操作失败:', error)
-    toastStore.error('操作失败，请重试')
-  }
-}
-
 // 编辑模式
 const toggleEditMode = () => {
   editMode.value = !editMode.value
@@ -299,12 +317,17 @@ const removeSong = (index) => {
   confirmTitle.value = '移除歌曲'
   confirmMessage.value = `确定要从播放列表中移除"${playlist.value.songs[index].name}"吗？`
   confirmButtonText.value = '移除'
-  pendingAction.value = () => {
-    const success = playlistStore.removeSongFromPlaylist(playlist.value.id, index)
-    if (success) {
-      toastStore.success('歌曲已移除')
-    } else {
-      toastStore.error('移除失败')
+  pendingAction.value = async () => {
+    try {
+      const success = await playlistStore.removeSongFromPlaylistByIndex(playlist.value.id, index)
+      if (success) {
+        toastStore.success('歌曲已移除')
+      } else {
+        toastStore.error('移除失败')
+      }
+    } catch (error) {
+      console.error('移除歌曲失败:', error)
+      toastStore.error('移除失败，请重试')
     }
   }
   confirmDialogRef.value?.show()
@@ -312,13 +335,33 @@ const removeSong = (index) => {
 
 // 操作菜单
 const showMoreActions = () => {
-  showActions.value = true
+  showMoreActionsPanel.value = true
 }
 
 const hideActions = () => {
   showActions.value = false
 }
 
+const closeMoreActionsPanel = () => {
+  showMoreActionsPanel.value = false
+}
+
+const handleMoreAction = ({ action, playlist: actionPlaylist }) => {
+  switch (action) {
+    case 'editInfo':
+      editPlaylistInfo()
+      break
+    
+    case 'clearPlaylist':
+      clearPlaylist()
+      break
+    
+    case 'deletePlaylist':
+      deletePlaylist()
+      break
+  }
+}
+
 const showSongActions = (song, index) => {
   selectedSong.value = song
   selectedIndex.value = index
@@ -338,9 +381,21 @@ const playNext = (song) => {
 }
 
 const addToOtherPlaylist = () => {
-  // TODO: 实现添加到其他播放列表的功能
   hideSongActions()
-  toastStore.info('功能开发中...')
+  if (selectedSong.value) {
+    showPlaylistSelector.value = true
+  }
+}
+
+const handlePlaylistSelectAdded = (data) => {
+  if (data && data.message) {
+    toastStore.success(data.message)
+  }
+  showPlaylistSelector.value = false
+}
+
+const closePlaylistSelector = () => {
+  showPlaylistSelector.value = false
 }
 
 const removeSongFromMenu = () => {
@@ -349,9 +404,40 @@ const removeSongFromMenu = () => {
 }
 
 const editPlaylistInfo = () => {
-  // TODO: 实现编辑播放列表信息的功能
   hideActions()
-  toastStore.info('编辑功能开发中...')
+  if (playlist.value) {
+    editForm.value = {
+      name: playlist.value.name,
+      description: playlist.value.description || ''
+    }
+    editModalRef.value?.open()
+  }
+}
+
+const savePlaylistInfo = () => {
+  if (!editForm.value.name.trim()) {
+    toastStore.error('歌单名称不能为空')
+    return
+  }
+  
+  try {
+    const success = playlistStore.updatePlaylist(playlist.value.id, {
+      name: editForm.value.name.trim(),
+      description: editForm.value.description.trim() || undefined
+    })
+    
+    if (success) {
+      playlist.value.name = editForm.value.name.trim()
+      playlist.value.description = editForm.value.description.trim() || undefined
+      editModalRef.value?.close()
+      toastStore.success('歌单信息已更新')
+    } else {
+      toastStore.error('更新失败')
+    }
+  } catch (error) {
+    console.error('更新歌单信息失败:', error)
+    toastStore.error('更新失败，请重试')
+  }
 }
 
 const clearPlaylist = () => {
@@ -413,53 +499,95 @@ watch(() => route.params.id, () => {
   padding-bottom: calc(var(--mini-player-height) + var(--tabbar-height) + 20px);
 }
 
-.playlist-header {
+/* 使用标准的page-header样式 */
+.page-header {
   display: flex;
-  align-items: flex-start;
-  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
   padding: 16px;
-  background: var(--bg-card);
-  margin: 16px;
-  border-radius: var(--radius-small);
-  border: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-primary);
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.page-title i {
+  color: var(--accent-red);
 }
 
-.back-btn {
-  width: 40px;
-  height: 40px;
+.back-icon {
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: var(--transition-fast);
+}
+
+.back-icon:hover {
+  color: var(--text-primary);
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
   border: none;
   background: rgba(255, 255, 255, 0.1);
   color: var(--text-secondary);
   border-radius: 50%;
-  font-size: 16px;
+  font-size: 14px;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   transition: var(--transition-fast);
-  flex-shrink: 0;
 }
 
-.back-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  color: var(--text-primary);
+.action-btn:hover {
+  background: var(--accent-red);
+  color: white;
+  transform: scale(1.1);
 }
 
-.playlist-cover {
-  width: 80px;
-  height: 80px;
-  border-radius: 8px;
+.action-btn.active {
+  background: var(--accent-red);
+  color: white;
+}
+
+/* 歌单信息内容样式 */
+.playlist-info-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 20px 0;
+}
+
+.playlist-cover-large {
+  width: 120px;
+  height: 120px;
+  border-radius: 12px;
   overflow: hidden;
   flex-shrink: 0;
 }
 
-.playlist-cover img {
+.playlist-cover-large img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.default-cover {
+.default-cover-large {
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, var(--accent-red), #ff8a8a);
@@ -467,29 +595,42 @@ watch(() => route.params.id, () => {
   align-items: center;
   justify-content: center;
   color: white;
-  font-size: 32px;
+  font-size: 48px;
 }
 
-.playlist-info {
+.playlist-info-content .playlist-cover-large {
+  width: 200px;
+  height: 200px;
+}
+
+.playlist-info-content .default-cover-large {
+  font-size: 64px;
+}
+
+.playlist-meta {
   flex: 1;
-  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.playlist-name {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin: 0 0 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.playlist-info-content .playlist-meta {
+  text-align: center;
+  width: 100%;
 }
 
 .playlist-description {
   font-size: 14px;
   color: var(--text-secondary);
-  margin: 0 0 8px;
-  line-height: 1.4;
+  margin: 0 0 12px;
+  line-height: 1.5;
+}
+
+.playlist-info-content .playlist-description {
+  font-size: 16px;
+  line-height: 1.6;
+  margin-bottom: 16px;
+  color: var(--text-secondary);
 }
 
 .playlist-stats {
@@ -499,38 +640,105 @@ watch(() => route.params.id, () => {
   color: var(--text-tertiary);
 }
 
-.playlist-actions {
-  flex-shrink: 0;
+.playlist-info-content .playlist-stats {
+  justify-content: center;
+  font-size: 14px;
+  gap: 24px;
 }
 
-.action-btn {
-  width: 40px;
-  height: 40px;
+/* 编辑表单样式 */
+.edit-form {
+  padding: 8px 0;
+}
+
+.edit-form .form-group {
+  margin-bottom: 20px;
+}
+
+.edit-form .form-group:last-child {
+  margin-bottom: 0;
+}
+
+.edit-form .form-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.edit-form .form-group input,
+.edit-form .form-group textarea {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid var(--border-card);
+  border-radius: 8px;
+  background: var(--overlay-lighter);
+  color: var(--text-primary);
+  font-size: 14px;
+  transition: var(--transition-fast);
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.edit-form .form-group input:focus,
+.edit-form .form-group textarea:focus {
+  outline: none;
+  border-color: var(--accent-red);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.edit-form .form-group input::placeholder,
+.edit-form .form-group textarea::placeholder {
+  color: var(--text-tertiary);
+}
+
+.edit-form .form-group textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+/* Modal按钮样式 */
+.btn {
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
   border: none;
+}
+
+.btn-cancel {
   background: rgba(255, 255, 255, 0.1);
   color: var(--text-secondary);
-  border-radius: 50%;
-  font-size: 16px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition-fast);
 }
 
-.action-btn:hover {
+.btn-cancel:hover {
   background: rgba(255, 255, 255, 0.2);
   color: var(--text-primary);
 }
 
+.btn-primary {
+  background: var(--accent-red);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent-red-hover);
+}
+
+.btn-primary:disabled {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-tertiary);
+  cursor: not-allowed;
+}
+
+/* 播放控制区域样式 */
 .play-controls {
   display: flex;
   gap: 12px;
-  padding: 16px;
-  background: var(--bg-card);
-  margin: 0 16px 16px;
-  border-radius: var(--radius-small);
-  border: 1px solid var(--border-light);
+  margin: 0 0 16px;
 }
 
 .play-all-btn,
@@ -541,7 +749,6 @@ watch(() => route.params.id, () => {
   gap: 6px;
   padding: 10px 16px;
   border: none;
-  border-radius: 20px;
   font-size: 14px;
   cursor: pointer;
   transition: var(--transition-fast);
@@ -606,127 +813,8 @@ watch(() => route.params.id, () => {
 
 .songs-list {
   background: var(--bg-card);
-  margin: 0 16px;
-  border-radius: var(--radius-small);
-  border: 1px solid var(--border-light);
-  overflow: hidden;
-}
-
-.song-item {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-lighter);
-  transition: var(--transition-fast);
-  position: relative;
-}
-
-.song-item:last-child {
-  border-bottom: none;
-}
-
-.song-item:hover {
-  background: var(--overlay-lighter);
-}
-
-.song-item.active {
-  background: var(--bg-gradient-3);
-  color: var(--accent-red);
-}
-
-.song-item.edit-mode {
-  padding-left: 50px;
-}
-
-.drag-handle {
-  position: absolute;
-  left: 16px;
-  color: var(--text-tertiary);
-  cursor: grab;
-}
-
-.drag-handle:active {
-  cursor: grabbing;
-}
-
-.song-index {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  margin-right: 12px;
-  flex-shrink: 0;
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.song-index:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.song-item.active .song-index {
-  background: var(--accent-red);
-  color: white;
-}
-
-.playing-icon {
-  color: var(--accent-red);
-  animation: pulse 1.5s infinite;
-}
-
-.song-info {
-  flex: 1;
-  min-width: 0;
-  margin-right: 12px;
-  cursor: pointer;
-}
-
-.song-name {
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--text-primary);
-  margin-bottom: 4px;
+  margin: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.song-item.active .song-name {
-  color: var(--accent-red);
-}
-
-.song-artist {
-  font-size: 13px;
-  color: var(--text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.song-actions {
-  display: flex;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-.favorite-btn.active {
-  color: var(--accent-red);
-}
-
-.remove-btn {
-  background: rgba(255, 68, 68, 0.1);
-  color: #ff4444;
-}
-
-.remove-btn:hover {
-  background: rgba(255, 68, 68, 0.2);
-  color: #ff2222;
 }
 
 .actions-overlay {

src/views/PlaylistsPage.vue

@@ -15,35 +15,15 @@
     
     <!-- 我的歌单 -->
     <div class="playlists-content">
-      <div v-if="customPlaylists.length > 0" class="playlists-grid">
-        <div 
-          v-for="playlist in customPlaylists" 
+      <div v-if="customPlaylists.length > 0" class="playlists-list">
+        <PlaylistItem
+          v-for="(playlist, index) in customPlaylists"
           :key="playlist.id"
-          class="playlist-card"
-          @click="openPlaylist(playlist)"
-        >
-          <div class="playlist-cover">
-            <img 
-              v-if="playlist.cover" 
-              :src="playlist.cover" 
-              :alt="playlist.name"
-              @error="handleImageError"
-            />
-            <div v-else class="default-cover">
-              <i class="fas fa-music"></i>
-            </div>
-            <div class="play-overlay">
-              <button class="play-btn" @click.stop="playPlaylist(playlist)">
-                <i class="fas fa-play"></i>
-              </button>
-            </div>
-          </div>
-          <div class="playlist-info">
-            <h3 class="playlist-name">{{ playlist.name }}</h3>
-            <p class="playlist-count">{{ playlist.songs.length }}首歌曲</p>
-            <p class="playlist-updated">{{ formatDate(playlist.updatedAt) }}</p>
-          </div>
-        </div>
+          :playlist="playlist"
+          :index="index"
+          @click="openPlaylist"
+          @showMoreActions="showMoreActionsPanel"
+        />
       </div>
       
       <!-- 空状态 -->
@@ -62,7 +42,7 @@
     <div v-if="showCreatePlaylist" class="create-playlist-overlay" @click="closeCreatePlaylist">
       <div class="create-playlist-dialog" @click.stop>
         <div class="dialog-header">
-          <h3>新建歌单</h3>
+          <h3>{{ editingPlaylist ? '编辑歌单' : '新建歌单' }}</h3>
           <button class="close-btn" @click="closeCreatePlaylist">
             <i class="fas fa-times"></i>
           </button>
@@ -77,7 +57,11 @@
               placeholder="请输入歌单名称"
               maxlength="50"
               ref="playlistNameInput"
+              @input="createPlaylistError = ''" 
             />
+            <div v-if="createPlaylistError" class="error-message">
+              {{ createPlaylistError }}
+            </div>
           </div>
           
           <div class="form-group">
@@ -93,10 +77,29 @@
         
         <div class="dialog-footer">
           <button class="btn btn-cancel" @click="closeCreatePlaylist">取消</button>
-          <button class="btn btn-create" @click="createNewPlaylist" :disabled="!newPlaylistName.trim()">创建</button>
+          <button class="btn btn-create" @click="createNewPlaylist" :disabled="!newPlaylistName.trim()">{{ editingPlaylist ? '保存' : '创建' }}</button>
         </div>
       </div>
     </div>
+    
+    <!-- 统一操作菜单 -->
+    <ActionMenu
+      v-if="showMoreActions && selectedPlaylist"
+      type="playlist"
+      :playlist="selectedPlaylist"
+      @close="closeMoreActions"
+      @action="handlePlaylistAction"
+    />
+    
+    <!-- 确认对话框 -->
+    <ConfirmDialog
+      ref="confirmDialogRef"
+      :title="confirmTitle"
+      :message="confirmMessage"
+      :confirm-text="confirmButtonText"
+      type="danger"
+      @confirm="confirmAction"
+    />
   </div>
 </template>
 
@@ -108,6 +111,9 @@ import { usePlaylistStore } from '@/stores/playlist'
 import { usePlayQueueStore } from '@/stores/playqueue'
 import { useToastStore } from '@/stores/toast'
 import { utils } from '@/services/musicApi'
+import PlaylistItem from '@/components/common/PlaylistItem.vue'
+import ActionMenu from '@/components/common/ActionMenu.vue'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 
 const router = useRouter()
 const playerStore = usePlayerStore()
@@ -120,6 +126,15 @@ const showCreatePlaylist = ref(false)
 const newPlaylistName = ref('')
 const newPlaylistDescription = ref('')
 const playlistNameInput = ref(null)
+const createPlaylistError = ref('') // 添加错误信息状态
+const showMoreActions = ref(false)
+const selectedPlaylist = ref(null)
+const editingPlaylist = ref(null)
+const confirmDialogRef = ref(null)
+const confirmTitle = ref('')
+const confirmMessage = ref('')
+const confirmButtonText = ref('确认')
+const pendingAction = ref(null)
 
 // 计算属性
 const customPlaylists = computed(() => playlistStore.playlists || [])
@@ -145,6 +160,86 @@ const handleImageError = (event) => {
   event.target.style.display = 'none'
 }
 
+const showMoreActionsPanel = (playlist, event) => {
+  // 处理歌单更多操作，这里可以添加上下文菜单
+  selectedPlaylist.value = playlist
+  showMoreActions.value = true
+}
+
+const handlePlaylistAction = ({ action, playlist }) => {
+  switch (action) {
+    case 'editInfo':
+      // 实现编辑歌单信息功能
+      if (playlist && !playlist.isDefault) {
+        // 打开编辑对话框并填入当前信息
+        newPlaylistName.value = playlist.name
+        newPlaylistDescription.value = playlist.description || ''
+        editingPlaylist.value = playlist
+        showCreatePlaylist.value = true
+        nextTick(() => {
+          if (playlistNameInput.value) {
+            playlistNameInput.value.focus()
+          }
+        })
+      } else {
+        toastStore.warning('默认歌单无法编辑')
+      }
+      break
+    
+    case 'clearPlaylist':
+      // 实现清空歌单功能
+      if (playlist && !playlist.isDefault) {
+        confirmTitle.value = '清空歌单'
+        confirmMessage.value = `确定要清空歌单"${playlist.name}"中的所有歌曲吗？此操作不可撤销。`
+        confirmButtonText.value = '清空'
+        pendingAction.value = () => {
+          const success = playlistStore.clearPlaylist(playlist.id)
+          if (success) {
+            toastStore.success('歌单已清空')
+          } else {
+            toastStore.error('清空失败')
+          }
+        }
+        confirmDialogRef.value?.show()
+      } else {
+        toastStore.warning('默认歌单无法清空')
+      }
+      break
+    
+    case 'deletePlaylist':
+      // 实现删除歌单功能
+      if (playlist && !playlist.isDefault) {
+        confirmTitle.value = '删除歌单'
+        confirmMessage.value = `确定要删除歌单"${playlist.name}"吗？此操作不可撤销。`
+        confirmButtonText.value = '删除'
+        pendingAction.value = () => {
+          const success = playlistStore.deletePlaylist(playlist.id)
+          if (success) {
+            toastStore.success('歌单已删除')
+          } else {
+            toastStore.error('删除失败')
+          }
+        }
+        confirmDialogRef.value?.show()
+      } else {
+        toastStore.warning('默认歌单无法删除')
+      }
+      break
+  }
+}
+
+const closeMoreActions = () => {
+  showMoreActions.value = false
+  selectedPlaylist.value = null
+}
+
+const confirmAction = () => {
+  if (pendingAction.value) {
+    pendingAction.value()
+    pendingAction.value = null
+  }
+}
+
 // 新建歌单相关方法
 const openCreatePlaylistDialog = () => {
   showCreatePlaylist.value = true
@@ -159,24 +254,50 @@ const closeCreatePlaylist = () => {
   showCreatePlaylist.value = false
   newPlaylistName.value = ''
   newPlaylistDescription.value = ''
+  createPlaylistError.value = '' // 清除错误信息
+  editingPlaylist.value = null // 重置编辑状态
 }
 
 const createNewPlaylist = () => {
-  if (!newPlaylistName.value.trim()) return
+  const name = newPlaylistName.value.trim()
+  const description = newPlaylistDescription.value.trim()
+  
+  // 清除之前的错误信息
+  createPlaylistError.value = ''
+  
+  if (!name) {
+    createPlaylistError.value = '歌单名称不能为空'
+    return
+  }
   
   try {
-    const newPlaylist = playlistStore.createPlaylist(
-      newPlaylistName.value.trim(),
-      newPlaylistDescription.value.trim()
-    )
+    let success = false
     
-    console.log('创建歌单成功:', newPlaylist)
-    closeCreatePlaylist()
-    
-    toastStore.success(`歌单 "${newPlaylist.name}" 创建成功！`)
+    if (editingPlaylist.value) {
+      // 编辑模式
+      success = playlistStore.updatePlaylist(editingPlaylist.value.id, {
+        name,
+        description: description || undefined
+      })
+      if (success) {
+        toastStore.success('歌单信息已更新')
+        closeCreatePlaylist()
+      } else {
+        createPlaylistError.value = '更新失败，请重试'
+      }
+    } else {
+      // 新建模式
+      const newPlaylist = playlistStore.createPlaylist(name, description)
+      if (newPlaylist) {
+        toastStore.success(`歌单 "${newPlaylist.name}" 创建成功！`)
+        closeCreatePlaylist()
+      } else {
+        createPlaylistError.value = '创建失败，请重试'
+      }
+    }
   } catch (error) {
-    console.error('创建歌单失败:', error)
-    toastStore.error('创建歌单失败，请重试')
+    // 在输入框下方显示具体的错误信息
+    createPlaylistError.value = error.message || '操作失败，请重试'
   }
 }
 
@@ -266,113 +387,9 @@ onMounted(async () => {
   min-height: 0;
 }
 
-/* 歌单样式 */
-.playlists-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: 16px;
-  padding: 16px;
-}
-
-.playlist-card {
-  background: var(--bg-card);
-  border-radius: var(--radius-small);
-  overflow: hidden;
-  border: 1px solid var(--border-light);
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.playlist-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  border-color: var(--accent-red);
-}
-
-.playlist-cover {
-  position: relative;
-  width: 100%;
-  height: 160px;
-  background: var(--bg-secondary);
-  overflow: hidden;
-}
-
-.playlist-cover img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.default-cover {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, var(--accent-red), #ff8a8a);
-  color: white;
-  font-size: 48px;
-}
-
-.play-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  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);
-}
-
-.playlist-card:hover .play-overlay {
-  opacity: 1;
-}
-
-.play-btn {
-  width: 50px;
-  height: 50px;
-  border: none;
-  border-radius: 50%;
-  background: var(--accent-red);
-  color: white;
-  font-size: 18px;
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.play-btn:hover {
-  background: var(--accent-red-hover);
-  transform: scale(1.1);
-}
-
-.playlist-info {
-  padding: 12px;
-}
-
-.playlist-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.playlist-count {
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin: 0 0 4px;
-}
-
-.playlist-updated {
-  font-size: 11px;
-  color: var(--text-tertiary);
-  margin: 0;
+/* 歌单列表样式 */
+.playlists-list {
+  padding-bottom: 20px;
 }
 
 .empty-state {
@@ -528,6 +545,25 @@ onMounted(async () => {
   color: var(--text-tertiary);
 }
 
+.error-message {
+  color: #ff4444;
+  font-size: 12px;
+  margin-top: 6px;
+  padding-left: 4px;
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .dialog-footer {
   display: flex;
   align-items: center;
@@ -599,10 +635,8 @@ onMounted(async () => {
     font-size: 20px;
   }
   
-  .playlists-grid {
-    padding: 12px;
-    gap: 12px;
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  .playlists-list {
+    padding-bottom: 12px;
   }
   
   .empty-state {
@@ -620,9 +654,8 @@ onMounted(async () => {
     margin: 0 auto;
   }
   
-  .playlists-grid {
-    padding: 24px;
-    gap: 20px;
+  .playlists-list {
+    padding-bottom: 24px;
   }
 }
 </style>

src/views/SettingsPage.vue

@@ -429,6 +429,19 @@
       @cancel="confirmConfig.onCancel"
     />
     
+    <!-- 延时确认对话框（用于危险操作） -->
+    <DelayedConfirmDialog
+      ref="delayedConfirmDialog"
+      :title="delayedConfirmConfig.title"
+      :message="delayedConfirmConfig.message"
+      :type="delayedConfirmConfig.type"
+      :confirm-text="delayedConfirmConfig.confirmText"
+      :cancel-text="delayedConfirmConfig.cancelText"
+      :delay-seconds="delayedConfirmConfig.delaySeconds"
+      @confirm="delayedConfirmConfig.onConfirm"
+      @cancel="delayedConfirmConfig.onCancel"
+    />
+    
     <!-- 移动端选择器弹窗 -->
     <div v-if="showSelector" class="mobile-selector-overlay" @click="closeSelector">
       <div class="mobile-selector-content" @click.stop>
@@ -466,6 +479,7 @@ import { useSearchStore } from '@/stores/search'
 import { useToastStore } from '@/stores/toast'
 import { MUSIC_SOURCES, QUALITY_OPTIONS } from '@/services/musicApi'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+import DelayedConfirmDialog from '@/components/common/DelayedConfirmDialog.vue'
 
 const router = useRouter()
 const settingsStore = useSettingsStore()
@@ -485,6 +499,7 @@ const selectorCurrentValue = ref('')
 
 // 确认对话框相关
 const confirmDialog = ref(null)
+const delayedConfirmDialog = ref(null)
 const confirmConfig = ref({
   title: '确认操作',
   message: '',
@@ -495,6 +510,17 @@ const confirmConfig = ref({
   onCancel: () => {}
 })
 
+const delayedConfirmConfig = ref({
+  title: '危险操作确认',
+  message: '',
+  type: 'danger',
+  confirmText: '确定清除',
+  cancelText: '取消',
+  delaySeconds: 5,
+  onConfirm: () => {},
+  onCancel: () => {}
+})
+
 // 计算属性
 const settings = computed(() => settingsStore.settings)
 const appVersion = computed(() => '1.0.0')
@@ -603,99 +629,106 @@ const clearPlayHistory = async () => {
 }
 
 const clearFavorites = async () => {
-  showConfirm({
+  delayedConfirmConfig.value = {
     title: '清除收藏数据',
-    message: '确定要清除所有收藏歌曲吗？此操作不可撤销！',
+    message: '确定要清除所有收藏歌曲吗？此操作不可撤销，将删除您收藏的所有音乐。',
     type: 'danger',
-    confirmText: '清除',
+    confirmText: '确定清除',
+    cancelText: '取消',
+    delaySeconds: 5,
     onConfirm: async () => {
-      // 二次确认
-      showConfirm({
-        title: '最后确认',
-        message: '最后确认：真的要删除所有收藏吗？',
-        type: 'danger',
-        confirmText: '确定删除',
-        onConfirm: async () => {
-          try {
-            await favoritesStore.clearFavorites()
-            toastStore.success('收藏数据已清除')
-          } catch (error) {
-            console.error('清除收藏失败:', error)
-            toastStore.error('清除失败')
-          }
-        }
-      })
-    }
-  })
+      try {
+        await favoritesStore.clearFavorites()
+        toastStore.success('收藏数据已清除')
+      } catch (error) {
+        console.error('清除收藏失败:', error)
+        toastStore.error('清除失败')
+      }
+    },
+    onCancel: () => {}
+  }
+  
+  delayedConfirmDialog.value?.show()
 }
 
 const clearAllData = async () => {
-  showConfirm({
+  delayedConfirmConfig.value = {
     title: '清除全部数据',
-    message: '确定要清除所有数据吗？这将删除播放历史、收藏歌曲、播放列表等所有数据，此操作不可撤销！',
+    message: '⚠️ 极危险操作！这将清除所有应用数据：播放历史、收藏歌曲、歌单、播放队列、设置等。此操作不可撤销！',
     type: 'danger',
-    confirmText: '清除',
+    confirmText: '确定清除所有数据',
+    cancelText: '取消',
+    delaySeconds: 5,
     onConfirm: async () => {
-      // 二次确认
-      showConfirm({
-        title: '最后确认',
-        message: '最后确认：真的要清除所有数据吗？',
-        type: 'danger',
-        confirmText: '确定清除',
-        onConfirm: async () => {
-          try {
-            // 清除各种存储数据，使用统一的新存储key
-            const keysToRemove = [
-              // 搜索相关
-              'vue-music-search-history',
-              'vue-music-search-settings',
-              
-              // 播放历史 - 新的统一key
-              'vue-music-play-history',
-              'music-history', // 兼容旧key
-              
-              // 收藏数据 - 新的统一key
-              'vue-music-my-favorites',
-              'vue-music-favorites', // 兼容旧key
-              
-              // 播放列表 - 新的统一key
-              'vue-music-playlists',
-              
-              // 播放列表 - 新的统一key
-              'vue-music-play-queue',
-              
-              // 播放器状态
-              'vue-music-player-state'
-            ]
-            
-            keysToRemove.forEach(key => {
-              localStorage.removeItem(key)
-            })
-            
-            // 调用stores的清除方法
-            await Promise.all([
-              searchStore.clearHistory(),
-              historyStore.clearHistory(), 
-              favoritesStore.clearFavorites()
-            ])
-            
-            // 清除播放列表和播放列表
-            const { usePlaylistStore } = await import('@/stores/playlist')
-            const { usePlayQueueStore } = await import('@/stores/playqueue')
-            const playlistStore = usePlaylistStore()
-            const playQueueStore = usePlayQueueStore()
-            playlistStore.clearAllPlaylists()
-            playQueueStore.clearQueue()
-            
-            toastStore.success('所有数据已清除')
-          } catch (error) {
-            console.error('清除数据失败:', error)
-            toastStore.error('清除失败')
+      try {
+        // 清除各种存储数据，使用实际的storage key
+        const keysToRemove = [
+          // 搜索相关
+          'vue-music-search-history',
+          'vue-music-search-settings',
+          
+          // 播放历史
+          'vue-music-play-history',
+          
+          // 收藏数据
+          'vue-music-my-favorites',
+          
+          // 歌单数据
+          'vue-music-playlists',
+          
+          // 播放队列
+          'vue-music-play-queue',
+          
+          // 播放器状态
+          'vue-music-player-state',
+          
+          // 设置数据
+          'music-settings',
+          
+          // URL缓存
+          'music-url-cache-v1',
+          
+          // 歌词字体大小
+          'lyrics-font-size'
+        ]
+        
+        // 清除以 img_ 开头的图片缓存
+        const allKeys = Object.keys(localStorage)
+        allKeys.forEach(key => {
+          if (key.startsWith('img_')) {
+            keysToRemove.push(key)
           }
-        }
-      })
-    }
-  })
+        })
+        
+        keysToRemove.forEach(key => {
+          localStorage.removeItem(key)
+        })
+        
+        // 调用stores的清除方法
+        await Promise.all([
+          searchStore.clearHistory(),
+          historyStore.clearHistory(), 
+          favoritesStore.clearFavorites()
+        ])
+        
+        // 清除播放列表和播放队列
+        const { usePlaylistStore } = await import('@/stores/playlist')
+        const { usePlayQueueStore } = await import('@/stores/playqueue')
+        const playlistStore = usePlaylistStore()
+        const playQueueStore = usePlayQueueStore()
+        playlistStore.clearAllPlaylists()
+        playQueueStore.clearQueue()
+        
+        toastStore.success('所有数据已清除')
+      } catch (error) {
+        console.error('清除数据失败:', error)
+        toastStore.error('清除失败')
+      }
+    },
+    onCancel: () => {}
+  }
+  
+  delayedConfirmDialog.value?.show()
 }
 
 // 响应式处理