refactor(search): 重构搜索功能并添加搜索历史页面

- 移除 SearchBox 组件中的搜索历史显示逻辑
- 新增 SearchHistoryPage 组件用于展示搜索历史
- 更新 router 添加搜索历史页面路由
- 修改 search store 增加 removeHistoryItem 和 setKeyword 方法
- 调整 SearchResults 组件样式
- 优化 SongItem 组件中播放状态指示器位置

README.md

@@ -1,6 +1,6 @@
 ---
-title: 云服务
-emoji: 🐢
+title: 云音乐
+emoji: 🎵
 colorFrom: purple
 colorTo: indigo
 sdk: static
@@ -12,24 +12,8 @@ app_file: dist/index.html
 
 一个基于 Vue3 的渐进式网络应用（PWA），模仿网易云音乐界面风格，支持13个音乐源，提供完整的音乐播放体验。
 
-## ✨ 功能特性
-
-### 🎯 核心功能
-- **多源音乐搜索** - 支持13个主流音乐平台
-- **全屏播放器** - 网易云风格界面，支持歌词显示
-- **收藏管理** - 收藏喜爱的歌曲
-- **播放历史** - 自动记录播放记录
-- **智能设置** - 音质、播放模式、主题等个性化设置
-
-### 🌟 技术特性
-- **PWA 支持** - 可安装到桌面，离线缓存
-- **响应式设计** - 适配手机、平板、桌面
-- **MediaSession API** - 支持媒体控制（锁屏控制）
-- **状态持久化** - 刷新不丢失播放状态
-- **网易云主题** - 完美复刻的视觉体验
-
 ### 📱 支持的音乐源
-1. **网易云音乐** (默认)
+1. **网易云音乐** 
 2. **QQ音乐**
 3. **酷狗音乐** 
 4. **酷我音乐**
@@ -59,136 +43,9 @@ npm install
 npm run dev
 ```
 
-### 或者直接运行启动脚本
-- Windows: 双击 `启动应用.bat`
-- macOS/Linux: 运行 `./启动应用.sh`
-
 ### 构建生产版本
 ```bash
 npm run build
 ```
 
-## 📁 项目结构
-
-```
-vue-music/
-├── public/                 # 静态资源
-│   ├── icons/             # PWA 图标
-│   └── manifest.json      # PWA 配置
-├── src/
-│   ├── components/        # 组件
-│   │   ├── layout/       # 布局组件
-│   │   ├── search/       # 搜索相关
-│   │   ├── player/       # 播放器相关
-│   │   └── common/       # 通用组件
-│   ├── views/            # 页面组件
-│   ├── stores/           # Pinia 状态管理
-│   ├── services/         # API 服务
-│   ├── router/           # 路由配置
-│   └── styles/           # 全局样式
-├── 需求文档.md            # 完整需求说明
-└── 启动应用.bat/sh       # 快速启动脚本
-```
-
-## 🎮 使用说明
-
-### 基本操作
-1. **搜索音乐** - 在首页搜索框输入歌曲或歌手名
-2. **切换音源** - 点击搜索框旁的源选择按钮
-3. **播放控制** - 点击歌曲播放，使用底部播放条控制
-4. **全屏播放器** - 点击底部播放条进入全屏播放器
-5. **收藏歌曲** - 点击爱心图标收藏喜欢的歌曲
-
-### 高级功能
-- **播放模式** - 支持列表循环、随机播放、单曲循环
-- **歌词显示** - 全屏播放器支持歌词滚动显示
-- **设置调整** - 在设置页面个性化应用体验
-- **PWA 安装** - 在浏览器地址栏点击安装按钮
-
-## 🛠️ 技术栈
-
-- **框架**: Vue 3.4 + Composition API
-- **状态管理**: Pinia 2.1
-- **路由**: Vue Router 4.3  
-- **构建工具**: Vite 5.3
-- **PWA**: Vite PWA Plugin
-- **样式**: CSS3 + CSS Variables
-- **图标**: FontAwesome 6
-- **音乐API**: 自建聚合接口
-
-## ⚡ 性能优化
-
-- **代码分割** - 路由级别的代码分割
-- **图片懒加载** - 专辑封面按需加载
-- **请求缓存** - API 响应智能缓存
-- **Service Worker** - 静态资源离线缓存
-- **组件复用** - 高效的组件设计模式
-
-## 🔧 开发特性
-
-### 代码质量
-- **组件化架构** - 高内聚低耦合的组件设计
-- **TypeScript 支持** - 可选的类型检查
-- **ESLint 配置** - 代码风格统一
-- **响应式设计** - 移动优先的设计理念
-
-### 开发体验  
-- **热重载** - 代码修改实时预览
-- **自动导入** - 组件和工具函数自动导入
-- **开发工具** - Vue DevTools 完美支持
-- **错误处理** - 完善的错误边界处理
-
-## 📋 功能清单
-
-### ✅ 已完成功能
-- [x] 项目架构搭建
-- [x] PWA 配置
-- [x] 音乐API集成 (13个源)
-- [x] 状态管理 (Pinia)
-- [x] 首页搜索功能
-- [x] 搜索结果展示
-- [x] 全屏播放器
-- [x] 播放控制
-- [x] 进度条
-- [x] 歌词显示
-- [x] 收藏功能
-- [x] 播放历史
-- [x] 设置页面
-- [x] 响应式布局
-- [x] 通用组件库
-
-### 🔄 可扩展功能
-- [ ] 用户登录系统
-- [ ] 社交分享功能
-- [ ] 音乐下载功能
-- [ ] 播放列表导入导出
-- [ ] 桌面歌词显示
-- [ ] 均衡器设置
-- [ ] 定时关闭功能
-- [ ] 音乐推荐算法
-
-## 🤝 贡献指南
-
-欢迎提交 Issue 和 Pull Request！
-
-1. Fork 项目
-2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
-3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
-4. 推送到分支 (`git push origin feature/AmazingFeature`)
-5. 打开 Pull Request
-
-## 📄 许可证
-
-本项目基于 MIT 许可证开源 - 查看 [LICENSE](LICENSE) 文件了解详情。
-
-## 🙏 致谢
-
-- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
-- [Vite](https://vitejs.dev/) - 下一代前端构建工具
-- [Pinia](https://pinia.vuejs.org/) - Vue 状态管理库
-- [FontAwesome](https://fontawesome.com/) - 图标库
-- [网易云音乐](https://music.163.com/) - UI 设计参考
-
----
-
 **🎵 享受音乐，享受编程！**

src/App.vue

@@ -1,5 +1,8 @@
 <template>
   <div id="app">
+    <!-- PC端侧边栏导航 -->
+    <DesktopSidebar />
+
     <!-- 主内容区域 -->
     <main class="main-content">
       <router-view v-slot="{ Component, route }">
@@ -65,6 +68,7 @@ import { useFavoritesStore } from '@/stores/favorites'
 import { useHistoryStore } from '@/stores/history'
 import { useSettingsStore } from '@/stores/settings'
 import { musicApi, utils } from '@/services/musicApi'
+import DesktopSidebar from '@/components/layout/DesktopSidebar.vue'
 import AppTabBar from '@/components/layout/AppTabBar.vue'
 import MiniPlayer from '@/components/layout/MiniPlayer.vue'
 import FullPlayerPage from '@/views/FullPlayerPage.vue'
@@ -366,7 +370,14 @@ onMounted(() => {
       loadAndPlaySong(event.detail.song)
     }
   }
+  
+  // 监听来自侧边栏的播放控制事件
+  const handleSidebarTogglePlay = () => {
+    togglePlay()
+  }
+  
   window.addEventListener('loadAndPlaySong', handleLoadAndPlaySong)
+  window.addEventListener('sidebarTogglePlay', handleSidebarTogglePlay)
 
   // 恢复逻辑交由watch处理，避免重复设置
   console.log('App mounted, 恢复状态:', {
@@ -391,6 +402,24 @@ onMounted(() => {
   background: var(--bg-primary);
 }
 
+/* PC端布局适配 */
+@media (min-width: 1024px) {
+  #app {
+    display: flex;
+    height: 100vh;
+  }
+  
+  .main-content {
+    flex: 1;
+    margin-left: 280px; /* 侧边栏宽度 */
+    padding-bottom: var(--mini-player-height);
+  }
+  
+  .main-content:not(.has-mini-player) {
+    padding-bottom: 0;
+  }
+}
+
 /* iOS PWA 模式适配 */
 @supports (-webkit-touch-callout: none) {
   @media all and (display-mode: standalone) {
@@ -402,5 +431,16 @@ onMounted(() => {
       padding-bottom: calc(var(--tabbar-height) + 20px);
     }
   }
+  
+  /* PC端PWA模式 */
+  @media (min-width: 1024px) and (display-mode: standalone) {
+    .main-content {
+      padding-bottom: var(--mini-player-height);
+    }
+    
+    .main-content:not(.has-mini-player) {
+      padding-bottom: 0;
+    }
+  }
 }
 </style>

src/components/layout/AppTabBar.vue

@@ -155,4 +155,11 @@ const handleTabClick = (tab) => {
     border-top: 1px solid var(--border-strong);
   }
 }
+
+/* PC端隐藏底部标签栏 */
+@media (min-width: 1024px) {
+  .app-tabbar {
+    display: none;
+  }
+}
 </style>

src/components/layout/DesktopSidebar.vue

@@ -0,0 +1,751 @@
+<template>
+  <div class="desktop-sidebar hidden-mobile">
+    <!-- 应用Logo和标题 -->
+    <div class="sidebar-header">
+      <div class="app-logo">
+        <i class="fas fa-music"></i>
+      </div>
+      <div class="app-title">云音乐</div>
+    </div>
+
+    <!-- 导航菜单 -->
+    <nav class="sidebar-nav">
+      <router-link 
+        v-for="item in navItems" 
+        :key="item.name"
+        :to="item.path"
+        class="nav-item"
+        :class="{ active: currentRoute === item.name }"
+        @click="handleNavClick(item)"
+      >
+        <i :class="item.icon" class="nav-icon"></i>
+        <span class="nav-label">{{ item.label }}</span>
+        <div class="nav-indicator" v-if="currentRoute === item.name"></div>
+      </router-link>
+    </nav>
+
+    <!-- 播放控制区域 -->
+    <div class="sidebar-player" v-if="currentSong">
+      <!-- 当前播放歌曲信息 -->
+      <div class="current-song" @click="openFullPlayer">
+        <div class="song-cover">
+          <img 
+            :src="currentCoverUrl || defaultCover" 
+            :alt="currentSong.name"
+            class="cover-image"
+            @error="handleImageError"
+          />
+          <div class="play-overlay" @click.stop="togglePlay">
+            <i :class="isPlaying ? 'fas fa-pause' : 'fas fa-play'"></i>
+          </div>
+        </div>
+        <div class="song-details">
+          <div class="song-name" :title="currentSong.name">{{ currentSong.name }}</div>
+          <div class="song-artist" :title="formattedArtist">{{ formattedArtist }}</div>
+        </div>
+      </div>
+      
+      <!-- 播放控制按钮 -->
+      <div class="player-controls">
+        <button class="control-btn" @click="playPrevious" title="上一首">
+          <i class="fas fa-step-backward"></i>
+        </button>
+        <button class="control-btn play-btn" @click="togglePlay" :title="isPlaying ? '暂停' : '播放'">
+          <i :class="isPlaying ? 'fas fa-pause' : 'fas fa-play'"></i>
+        </button>
+        <button class="control-btn" @click="playNext" title="下一首">
+          <i class="fas fa-step-forward"></i>
+        </button>
+        <button class="control-btn" @click="openFullPlayer" title="打开播放器">
+          <i class="fas fa-expand"></i>
+        </button>
+      </div>
+      
+      <!-- 进度条 -->
+      <div class="progress-container">
+        <div class="progress-background" @click="handleProgressClick" ref="progressRef">
+          <div 
+            class="progress-fill"
+            :style="{ width: `${progress}%` }"
+          ></div>
+        </div>
+      </div>
+      
+      <!-- 音量控制 -->
+      <div class="volume-control">
+        <button class="volume-btn" @click="toggleMute">
+          <i :class="volumeIcon"></i>
+        </button>
+        <input 
+          type="range" 
+          min="0" 
+          max="100" 
+          :value="volume"
+          @input="handleVolumeChange"
+          class="volume-slider"
+        />
+      </div>
+    </div>
+
+    <!-- 播放统计 -->
+    <div class="sidebar-stats" v-if="!currentSong">
+      <div class="stats-item">
+        <i class="fas fa-music"></i>
+        <div class="stats-info">
+          <div class="stats-label">暂无播放</div>
+          <div class="stats-value">选择音乐开始播放</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 快捷操作 -->
+    <div class="sidebar-actions">
+      <button class="action-btn" @click="toggleTheme" :title="isDarkTheme ? '切换到亮色主题' : '切换到暗色主题'">
+        <i :class="isDarkTheme ? 'fas fa-sun' : 'fas fa-moon'"></i>
+      </button>
+      <button class="action-btn" @click="openSettings" title="设置">
+        <i class="fas fa-cog"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { usePlayerStore } from '@/stores/player'
+import { usePlayQueueStore } from '@/stores/playqueue'
+import { useSettingsStore } from '@/stores/settings'
+import { utils } from '@/services/musicApi'
+
+const route = useRoute()
+const router = useRouter()
+const playerStore = usePlayerStore()
+const playQueueStore = usePlayQueueStore()
+const settingsStore = useSettingsStore()
+
+// 播放器相关状态
+const currentCoverUrl = ref('')
+const isMuted = ref(false)
+const lastVolume = ref(80)
+const progressRef = ref(null)
+
+// 导航项配置
+const navItems = [
+  {
+    name: 'Home',
+    path: '/home',
+    label: '首页',
+    icon: 'fas fa-home'
+  },
+  {
+    name: 'Favorites',
+    path: '/favorites',
+    label: '我喜欢',
+    icon: 'fas fa-heart'
+  },
+  {
+    name: 'Playlists',
+    path: '/playlists',
+    label: '歌单',
+    icon: 'fas fa-music'
+  },
+  {
+    name: 'PlayQueue',
+    path: '/play-queue',
+    label: '播放列表',
+    icon: 'fas fa-list'
+  },
+  {
+    name: 'History',
+    path: '/history',
+    label: '播放历史',
+    icon: 'fas fa-history'
+  }
+]
+
+// 计算属性
+const currentRoute = computed(() => route.name)
+const currentSong = computed(() => playerStore.currentSong)
+const isPlaying = computed(() => playerStore.isPlaying)
+const progress = computed(() => playerStore.progress)
+const volume = computed(() => playerStore.volume || 80)
+const isDarkTheme = computed(() => settingsStore.settings.theme === 'dark')
+
+const formattedArtist = computed(() => {
+  if (!currentSong.value?.artist) return ''
+  return utils.formatArtist(currentSong.value.artist)
+})
+
+// 默认封面
+const defaultCover = computed(() => {
+  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSI4Ii8+CjxwYXRoIGQ9Ik0zMiAyMEw0MCAzMkgzNlY0NEgyOFYzMkgyNEwzMiAyMFoiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4zKSIvPgo8L3N2Zz4K'
+})
+
+// 音量图标
+const volumeIcon = computed(() => {
+  if (isMuted.value || volume.value === 0) {
+    return 'fas fa-volume-mute'
+  } else if (volume.value < 30) {
+    return 'fas fa-volume-off'
+  } else if (volume.value < 70) {
+    return 'fas fa-volume-down'
+  } else {
+    return 'fas fa-volume-up'
+  }
+})
+
+// 方法
+const handleNavClick = (item) => {
+  console.log('导航到:', item.label)
+}
+
+// 播放器控制方法
+const togglePlay = () => {
+  // 通过全局事件触发App.vue中的播放控制
+  window.dispatchEvent(new CustomEvent('sidebarTogglePlay'))
+}
+
+const playPrevious = () => {
+  const prevSong = playQueueStore.playPrevious()
+  if (prevSong) {
+    playerStore.playSong(prevSong)
+  }
+}
+
+const playNext = () => {
+  const nextSong = playQueueStore.playNext()
+  if (nextSong) {
+    playerStore.playSong(nextSong)
+  }
+}
+
+const openFullPlayer = () => {
+  if (currentSong.value) {
+    router.push('/player')
+  }
+}
+
+// 进度条控制
+const handleProgressClick = (event) => {
+  if (!progressRef.value || !playerStore.duration) return
+  
+  const rect = progressRef.value.getBoundingClientRect()
+  const percent = (event.clientX - rect.left) / rect.width
+  const newTime = percent * playerStore.duration
+  
+  playerStore.seekTo(newTime)
+}
+
+// 音量控制
+const toggleMute = () => {
+  if (isMuted.value) {
+    playerStore.setVolume(lastVolume.value)
+    isMuted.value = false
+  } else {
+    lastVolume.value = volume.value
+    playerStore.setVolume(0)
+    isMuted.value = true
+  }
+}
+
+const handleVolumeChange = (event) => {
+  const newVolume = parseInt(event.target.value)
+  playerStore.setVolume(newVolume)
+  isMuted.value = newVolume === 0
+}
+
+// 图片加载错误处理
+const handleImageError = () => {
+  currentCoverUrl.value = defaultCover.value
+}
+
+// 加载专辑封面
+const loadAlbumCover = async () => {
+  if (!currentSong.value) {
+    currentCoverUrl.value = defaultCover.value
+    return
+  }
+
+  try {
+    const coverUrlResult = await playerStore.getAlbumCover(currentSong.value, 300)
+    if (coverUrlResult) {
+      currentCoverUrl.value = coverUrlResult
+    } else {
+      currentCoverUrl.value = defaultCover.value
+    }
+  } catch (error) {
+    console.error('加载侧边栏封面失败:', error)
+    currentCoverUrl.value = defaultCover.value
+  }
+}
+
+const toggleTheme = () => {
+  const newTheme = isDarkTheme.value ? 'light' : 'dark'
+  settingsStore.updateSetting('theme', newTheme)
+  settingsStore.applyTheme(newTheme)
+}
+
+const openSettings = () => {
+  router.push('/settings')
+}
+
+// 监听当前歌曲变化
+watch(currentSong, (newSong) => {
+  if (newSong) {
+    loadAlbumCover()
+  } else {
+    currentCoverUrl.value = defaultCover.value
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.desktop-sidebar {
+  width: 280px;
+  height: 100vh;
+  background: var(--bg-card);
+  border-right: 1px solid var(--border-light);
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(20px);
+}
+
+/* 应用头部 */
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 24px 20px;
+  border-bottom: 1px solid var(--border-lighter);
+}
+
+.app-logo {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 18px;
+  box-shadow: 0 4px 12px var(--glow-color);
+}
+
+.app-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+/* 导航菜单 */
+.sidebar-nav {
+  flex: 1;
+  padding: 16px 0;
+  overflow-y: auto;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  text-decoration: none;
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  position: relative;
+  margin: 0 12px;
+  border-radius: 12px;
+}
+
+.nav-item:hover {
+  background: var(--overlay-lighter);
+  color: var(--text-primary);
+  transform: translateX(4px);
+}
+
+.nav-item.active {
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
+  color: white;
+  box-shadow: 0 4px 12px var(--glow-color);
+}
+
+.nav-item.active .nav-icon {
+  color: white;
+}
+
+.nav-icon {
+  font-size: 18px;
+  width: 20px;
+  text-align: center;
+  transition: var(--transition-fast);
+}
+
+.nav-label {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.nav-indicator {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 20px;
+  background: white;
+  border-radius: 2px;
+  opacity: 0.8;
+}
+
+/* 播放统计 */
+.sidebar-stats {
+  padding: 16px 20px;
+  border-top: 1px solid var(--border-lighter);
+  border-bottom: 1px solid var(--border-lighter);
+}
+
+.stats-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+}
+
+.stats-item i {
+  font-size: 16px;
+  color: var(--primary-color);
+  width: 20px;
+  text-align: center;
+}
+
+.stats-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.stats-label {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-bottom: 2px;
+}
+
+.stats-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 快捷操作 */
+.sidebar-actions {
+  display: flex;
+  gap: 8px;
+  padding: 16px 20px;
+}
+
+.action-btn {
+  flex: 1;
+  height: 40px;
+  border: none;
+  background: var(--overlay-lighter);
+  color: var(--text-secondary);
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  transition: var(--transition-fast);
+}
+
+.action-btn:hover {
+  background: var(--overlay-light);
+  color: var(--text-primary);
+  transform: scale(1.05);
+}
+
+/* 滚动条样式 */
+.sidebar-nav::-webkit-scrollbar {
+  width: 4px;
+}
+
+.sidebar-nav::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-nav::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+}
+
+.sidebar-nav::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+/* 黑色主题适配 */
+[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* 侧边栏播放器 */
+.sidebar-player {
+  padding: 20px;
+  border-top: 1px solid var(--border-lighter);
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--overlay-lighter);
+  backdrop-filter: blur(10px);
+}
+
+.current-song {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  border-radius: 8px;
+  padding: 4px;
+}
+
+.current-song:hover {
+  background: var(--overlay-lighter);
+  transform: scale(1.02);
+}
+
+.song-cover {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.song-cover:hover .play-overlay {
+  opacity: 1;
+}
+
+.play-overlay i {
+  color: white;
+  font-size: 14px;
+}
+
+.song-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.song-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.song-artist {
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 播放控制按钮 */
+.player-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.control-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--overlay-light);
+  border: 1px solid var(--border-light);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  transition: var(--transition-fast);
+}
+
+.control-btn:hover {
+  background: var(--overlay-light);
+  color: var(--text-primary);
+  transform: scale(1.1);
+}
+
+.control-btn.play-btn {
+  width: 36px;
+  height: 36px;
+  font-size: 14px;
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}
+
+.control-btn.play-btn:hover {
+  background: var(--primary-color-hover);
+  border-color: var(--primary-color-hover);
+  box-shadow: 0 0 12px var(--glow-color);
+}
+
+/* 进度条 */
+.progress-container {
+  margin-bottom: 16px;
+}
+
+.progress-background {
+  height: 4px;
+  background: var(--border-light);
+  border-radius: 2px;
+  cursor: pointer;
+  position: relative;
+  transition: var(--transition-fast);
+}
+
+.progress-background:hover {
+  height: 6px;
+  transform: scaleY(1.2);
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--primary-color);
+  border-radius: 2px;
+  transition: width 0.1s ease;
+  position: relative;
+}
+
+.progress-fill::after {
+  content: '';
+  position: absolute;
+  right: -2px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  background: var(--primary-color);
+  border-radius: 50%;
+  opacity: 0;
+  transition: var(--transition-fast);
+}
+
+.progress-background:hover .progress-fill::after {
+  opacity: 1;
+}
+
+/* 音量控制 */
+.volume-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.volume-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--overlay-lighter);
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  transition: var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.volume-btn:hover {
+  background: var(--overlay-light);
+  color: var(--text-primary);
+}
+
+.volume-slider {
+  flex: 1;
+  height: 3px;
+  background: var(--border-light);
+  border-radius: 2px;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.volume-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  cursor: pointer;
+  border: 2px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: var(--transition-fast);
+}
+
+.volume-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+.volume-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  cursor: pointer;
+  border: 2px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: var(--transition-fast);
+}
+
+/* 响应式 - 只在PC端显示 */
+@media (max-width: 1023px) {
+  .desktop-sidebar {
+    display: none;
+  }
+}
+</style>

src/components/layout/MiniPlayer.vue

@@ -28,13 +28,45 @@
         
         <!-- 播放控制 -->
         <div class="play-controls">
+          <!-- PC端增加上一首按钮 -->
           <button 
-            class="control-btn"
+            class="control-btn prev-btn hidden-mobile"
+            @click.stop="$emit('playPrevious')"
+          >
+            <i class="fas fa-step-backward"></i>
+          </button>
+          
+          <button 
+            class="control-btn play-btn"
             @click.stop="togglePlay"
             :disabled="!audioSrc"
           >
             <i :class="isPlaying ? 'fas fa-pause' : 'fas fa-play'"></i>
           </button>
+          
+          <!-- PC端增加下一首按钮 -->
+          <button 
+            class="control-btn next-btn hidden-mobile"
+            @click.stop="$emit('playNext')"
+          >
+            <i class="fas fa-step-forward"></i>
+          </button>
+        </div>
+        
+        <!-- PC端音量控制 -->
+        <div class="volume-control hidden-mobile">
+          <button class="volume-btn" @click.stop="toggleMute">
+            <i :class="volumeIcon"></i>
+          </button>
+          <input 
+            type="range" 
+            min="0" 
+            max="100" 
+            :value="volume"
+            @input="handleVolumeChange"
+            @click.stop
+            class="volume-slider"
+          />
         </div>
         
         <!-- 进度条 -->
@@ -62,6 +94,10 @@ const router = useRouter()
 const playerStore = usePlayerStore()
 const coverUrl = ref('')
 
+// 音量控制
+const isMuted = ref(false)
+const lastVolume = ref(80)
+
 // 触摸处理
 const touchStartY = ref(0)
 const touchStartX = ref(0)
@@ -72,6 +108,20 @@ const currentSong = computed(() => playerStore.currentSong)
 const isPlaying = computed(() => playerStore.isPlaying)
 const progress = computed(() => playerStore.progress)
 const audioSrc = computed(() => playerStore.audioSrc)
+const volume = computed(() => playerStore.volume || 80)
+
+// 音量图标
+const volumeIcon = computed(() => {
+  if (isMuted.value || volume.value === 0) {
+    return 'fas fa-volume-mute'
+  } else if (volume.value < 30) {
+    return 'fas fa-volume-off'
+  } else if (volume.value < 70) {
+    return 'fas fa-volume-down'
+  } else {
+    return 'fas fa-volume-up'
+  }
+})
 
 // 格式化歌手名
 const formatArtist = (artist) => {
@@ -93,6 +143,26 @@ const openFullPlayer = () => {
   }
 }
 
+// 音量控制方法
+const toggleMute = () => {
+  if (isMuted.value) {
+    // 取消静音
+    playerStore.setVolume(lastVolume.value)
+    isMuted.value = false
+  } else {
+    // 静音
+    lastVolume.value = volume.value
+    playerStore.setVolume(0)
+    isMuted.value = true
+  }
+}
+
+const handleVolumeChange = (event) => {
+  const newVolume = parseInt(event.target.value)
+  playerStore.setVolume(newVolume)
+  isMuted.value = newVolume === 0
+}
+
 // 加载专辑封面
 const loadCover = async () => {
   if (!currentSong.value) {
@@ -261,6 +331,9 @@ onMounted(() => {
 
 .play-controls {
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .control-btn {
@@ -280,6 +353,105 @@ onMounted(() => {
   backdrop-filter: blur(10px);
 }
 
+/* PC端播放控制按钮调整 */
+@media (min-width: 1024px) {
+  .mini-player-content {
+    padding: 0 20px;
+  }
+  
+  .play-controls {
+    gap: 4px;
+  }
+  
+  .control-btn.prev-btn,
+  .control-btn.next-btn {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+    background: var(--overlay-lighter);
+  }
+  
+  .control-btn.play-btn {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+  }
+}
+
+/* PC端音量控制 */
+.volume-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.volume-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--overlay-lighter);
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  transition: var(--transition-fast);
+}
+
+.volume-btn:hover {
+  background: var(--overlay-light);
+  color: var(--text-primary);
+}
+
+.volume-slider {
+  width: 80px;
+  height: 4px;
+  background: var(--border-light);
+  border-radius: 2px;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.volume-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  cursor: pointer;
+  border: 2px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: var(--transition-fast);
+}
+
+.volume-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+  box-shadow: 0 0 8px var(--glow-color);
+}
+
+.volume-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  cursor: pointer;
+  border: 2px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: var(--transition-fast);
+}
+
+/* PC端迷你播放器整体布局调整 */
+@media (min-width: 1024px) {
+  .mini-player {
+    display: none; /* PC端隐藏迷你播放器，使用侧边栏播放器 */
+  }
+}
+
 /* 播放状态时的视觉反馈 - 立即显示 */
 .mini-player .control-btn {
   transition: all var(--transition-fast);

src/components/player/DesktopFullPlayer.vue

@@ -0,0 +1,1057 @@
+<template>
+  <div class="desktop-full-player">
+    <!-- 悬浮控制按钮 -->
+    <button class="floating-back-btn" @click="handleBack">
+      <i class="fas fa-arrow-left"></i>
+    </button>
+
+    <!-- 主内容区域：左右分栏 -->
+    <main class="player-main">
+      <!-- 左侧：音乐播放区域 -->
+      <section class="left-panel">
+        <!-- 更多操作按钮 -->
+        <button class="panel-more-btn" @click="showMoreActions = true" v-if="currentSong">
+          <i class="fas fa-ellipsis-h"></i>
+        </button>
+        
+        <!-- 专辑封面 -->
+        <div class="album-cover-section">
+          <div class="album-cover-wrapper">
+            <img
+                :src="currentCover"
+                :alt="currentSong?.name"
+                class="album-cover"
+                :class="{ rotating: isPlaying }"
+                @error="handleImageError"
+            />
+            <!-- CD中心点 -->
+            <div class="cd-center">
+              <div class="center-dot"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 歌曲信息 -->
+        <div class="song-info-section">
+          <div class="song-title-row">
+            <h2 class="song-title">{{ currentSong?.name || '暂无播放' }}</h2>
+            <button 
+              class="action-button favorite-btn" 
+              :class="{ active: isFavorite }"
+              @click="toggleFavorite"
+              v-if="currentSong"
+            >
+              <i :class="isFavorite ? 'fas fa-heart' : 'far fa-heart'"></i>
+            </button>
+          </div>
+          <p class="artist-name">{{ formattedArtist }}</p>
+          <p class="album-name" v-if="currentSong?.album">{{ currentSong.album }}</p>
+        </div>
+
+        <!-- 播放进度 -->
+        <div class="progress-section">
+          <ProgressBar @seek="handleSeek"/>
+        </div>
+
+        <!-- 播放控制 -->
+        <div class="controls-section">
+          <PlayControls
+              :loading="loading"
+              @togglePlay="handleTogglePlay"
+              @previous="handlePrevious"
+              @next="handleNext"
+              @togglePlayMode="handleTogglePlayMode"
+              @showPlaylist="handleShowPlaylist"
+          />
+        </div>
+      </section>
+
+      <!-- 右侧：实时歌词区域 -->
+      <section class="right-panel">
+        <div class="lyrics-content">
+          <div class="lyrics-scroll-container">
+            <LyricsView
+                :lyrics="currentLyrics"
+                :currentTime="currentTime"
+                @seekTo="handleSeekTo"
+            />
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <!-- 音质选择面板 -->
+    <div class="quality-selector" v-if="showQualitySelector" @click.self="showQualitySelector = false">
+      <div class="quality-panel" @click.stop>
+        <div class="panel-header">
+          <h3>音质选择</h3>
+          <button class="close-btn" @click.stop="showQualitySelector = false">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+
+        <div class="quality-list">
+          <div
+              v-for="quality in availableQualities"
+              :key="quality.value"
+              class="quality-item"
+              :class="{
+              'active': quality.value === currentQuality,
+              'loading': qualityLoading && selectedQuality === quality.value
+            }"
+              @click.stop="selectQuality(quality.value)"
+          >
+            <div class="quality-main">
+              <div class="quality-name">{{ quality.name }}</div>
+              <div class="quality-desc">{{ quality.description }}</div>
+            </div>
+
+            <div class="quality-actions">
+              <div class="quality-size" v-if="quality.size">{{ quality.size }}</div>
+              <i v-if="quality.value === currentQuality" class="fas fa-check quality-check"></i>
+              <i v-else-if="qualityLoading && selectedQuality === quality.value" class="fas fa-spinner fa-spin"></i>
+            </div>
+          </div>
+        </div>
+
+        <div class="quality-note">
+          <i class="fas fa-info-circle"></i>
+          <span>更高音质需要更多流量，请在WiFi环境下使用</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 播放列表面板 -->
+    <PlaylistPanel
+        v-if="showPlaylist"
+        @close="showPlaylist = false"
+        @play="handlePlayFromList"
+        @remove="handleRemoveFromList"
+    />
+
+    <!-- 更多操作面板 -->
+    <MoreActionsPanel
+        v-if="showMoreActions"
+        :song="currentSong"
+        @close="showMoreActions = false"
+        @action="handleMoreAction"
+    />
+  </div>
+</template>
+
+<script setup>
+import {ref, computed, onMounted, onUnmounted, watch} from 'vue'
+import {useRouter} from 'vue-router'
+import {usePlayerStore} from '@/stores/player'
+import {usePlayQueueStore} from '@/stores/playqueue'
+import {useFavoritesStore} from '@/stores/favorites'
+import {useHistoryStore} from '@/stores/history'
+import {useToastStore} from '@/stores/toast'
+import {useSettingsStore} from '@/stores/settings'
+import {musicApi, utils} from '@/services/musicApi'
+import ProgressBar from '@/components/player/ProgressBar.vue'
+import PlayControls from '@/components/player/PlayControls.vue'
+import LyricsView from '@/components/player/LyricsView.vue'
+import PlaylistPanel from '@/components/player/PlaylistPanel.vue'
+import MoreActionsPanel from '@/components/player/MoreActionsPanel.vue'
+
+// 定义事件发送器
+const emit = defineEmits(['close'])
+
+const router = useRouter()
+const playerStore = usePlayerStore()
+const playQueueStore = usePlayQueueStore()
+const favoritesStore = useFavoritesStore()
+const historyStore = useHistoryStore()
+const toastStore = useToastStore()
+const settingsStore = useSettingsStore()
+
+// 响应式数据
+const loading = ref(false)
+const showPlaylist = ref(false)
+const showMoreActions = ref(false)
+const showQualitySelector = ref(false)
+const currentLyrics = ref([])
+const qualityLoading = ref(false)
+const selectedQuality = ref(null)
+const currentCoverUrl = ref('')
+
+// 音质配置
+const availableQualities = ref([
+  {
+    value: 128,
+    name: '标准',
+    description: '128K 省流模式',
+    size: '约3MB/首'
+  },
+  {
+    value: 192,
+    name: '较高',
+    description: '192K 均衡模式',
+    size: '约4MB/首'
+  },
+  {
+    value: 320,
+    name: 'HQ',
+    description: '320K 高品质',
+    size: '约7MB/首'
+  },
+  {
+    value: 740,
+    name: '无损',
+    description: 'FLAC 原音质',
+    size: '约30MB/首'
+  },
+  {
+    value: 999,
+    name: 'Hi-Res',
+    description: '高解析度音频',
+    size: '约60MB/首'
+  }
+])
+
+// 计算属性
+const currentSong = computed(() => playerStore.currentSong)
+const isPlaying = computed(() => playerStore.isPlaying)
+const currentTime = computed(() => playerStore.currentTime)
+const currentQuality = computed(() => settingsStore.settings.defaultQuality || 320)
+
+const isFavorite = computed(() => {
+  return currentSong.value ? favoritesStore.isFavorite(currentSong.value) : false
+})
+
+const formattedArtist = computed(() => {
+  if (!currentSong.value?.artist) return ''
+  return utils.formatArtist(currentSong.value.artist)
+})
+
+const currentCover = computed(() => {
+  // 如果有设置的封面URL，优先使用
+  if (currentCoverUrl.value) {
+    return currentCoverUrl.value
+  }
+
+  if (!currentSong.value) return defaultCover.value
+
+  // 优先使用缓存的封面
+  const cachedCover = playerStore.getCachedCover(currentSong.value, 300)
+  if (cachedCover) {
+    return cachedCover
+  }
+
+  return defaultCover.value
+})
+
+const defaultCover = computed(() => {
+  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgwIiBoZWlnaHQ9IjI4MCIgdmlld0JveD0iMCAwIDI4MCAyODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyODAiIGhlaWdodD0iMjgwIiBmaWxsPSJyZ2JhKDIwMCwyMDAsMjAwLDAuMykiIHJ4PSI0MCIvPgo8Y2lyY2xlIGN4PSIxNDAiIGN5PSIxNDAiIHI9IjgwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiLz4KPHN2ZyB4PSIxMTAiIHk9IjExMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9InJnYmEoMTYwLDE2MCwxNjAsMC42KSI+CjxwYXRoIGQ9Ik0xMiAzdjEwLjU1Yy0uNTktLjM0LTEuMjctLjU1LTItLjU1QzcuNzkgMTMgNiAxNC43OSA2IDE3czEuNzkgNCA0IDRDMS45NCAwIDMuNS0xLjI5IDMuOTEtM0gxNFYzeiIvPgo8L3N2Zz4KPC9zdmc+'
+})
+
+// 异步加载专辑封面
+const loadAlbumCover = async () => {
+  if (!currentSong.value) {
+    currentCoverUrl.value = defaultCover.value
+    return
+  }
+
+  try {
+    // 先使用缓存的封面
+    const cachedCover = playerStore.getCachedCover(currentSong.value, 300)
+    if (cachedCover) {
+      currentCoverUrl.value = cachedCover
+      return
+    }
+
+    const coverUrlResult = await playerStore.getAlbumCover(currentSong.value, 300)
+    if (coverUrlResult) {
+      currentCoverUrl.value = coverUrlResult
+    } else {
+      currentCoverUrl.value = defaultCover.value
+    }
+  } catch (error) {
+    console.error('加载专辑封面失败:', error)
+    currentCoverUrl.value = defaultCover.value
+  }
+}
+
+// 图片加载错误处理
+const handleImageError = () => {
+  currentCoverUrl.value = defaultCover.value
+}
+
+// 方法
+const handleBack = () => {
+  emit('close')
+}
+
+const handleSeek = (time) => {
+  playerStore.seekTo(time)
+}
+
+const handleSeekTo = (time) => {
+  playerStore.seekTo(time)
+}
+
+const handleTogglePlay = async () => {
+  const audioElement = playerStore.audioElement || document.querySelector('audio')
+
+  if (!audioElement || !currentSong.value) {
+    return
+  }
+
+  try {
+    if (isPlaying.value) {
+      audioElement.pause()
+      playerStore.setPlayingState(false)
+    } else {
+      if (!playerStore.audioSrc || !audioElement.src || audioElement.src === location.href) {
+        window.dispatchEvent(new CustomEvent('loadAndPlaySong', {
+          detail: {song: currentSong.value}
+        }))
+        return
+      }
+
+      if (audioElement.src !== playerStore.audioSrc) {
+        audioElement.src = playerStore.audioSrc
+        audioElement.load()
+      }
+
+      await audioElement.play()
+      playerStore.setPlayingState(true)
+    }
+  } catch (error) {
+    console.error('播放失败:', error)
+  }
+}
+
+const handlePrevious = () => {
+  const result = playQueueStore.playPrevious()
+  if (result) {
+    playerStore.playSong(result)
+  }
+}
+
+const handleNext = () => {
+  const result = playQueueStore.playNext()
+  if (result) {
+    playerStore.playSong(result)
+  }
+}
+
+const handleTogglePlayMode = () => {
+  playQueueStore.togglePlayMode()
+}
+
+const handleShowPlaylist = () => {
+  showPlaylist.value = true
+}
+
+const handlePlayFromList = async (song, index) => {
+  try {
+    const selectedSong = playQueueStore.playAtIndex(index)
+    if (selectedSong) {
+      await playerStore.playSong(selectedSong, true)
+      historyStore.addToHistory(selectedSong)
+      toastStore.success(`开始播放 "${selectedSong.name}"`)
+    }
+    showPlaylist.value = false
+  } catch (error) {
+    console.error('播放失败:', error)
+    toastStore.error('播放失败，请重试')
+  }
+}
+
+const handleRemoveFromList = (index) => {
+  try {
+    const result = playQueueStore.removeFromQueue(index)
+    if (result.success) {
+      toastStore.success('已从播放列表移除')
+    } else {
+      toastStore.error(result.message)
+    }
+  } catch (error) {
+    console.error('移除失败:', error)
+    toastStore.error('操作失败，请重试')
+  }
+}
+
+const toggleFavorite = async () => {
+  if (!currentSong.value) return
+
+  try {
+    const result = await favoritesStore.toggleFavorite(currentSong.value)
+    const message = result ? '已添加到我喜欢的音乐' : '已从我喜欢的音乐中移除'
+    toastStore.success(message)
+  } catch (error) {
+    console.error('收藏操作失败:', error)
+    toastStore.error('操作失败，请重试')
+  }
+}
+
+
+const handleMoreAction = (action) => {
+  switch (action) {
+    case 'addToPlaylist':
+      // 实现添加到播放列表
+      break
+    case 'viewAlbum':
+      // 实现查看专辑
+      break
+    case 'viewArtist':
+      // 实现查看歌手
+      break
+    case 'selectQuality':
+      showQualitySelector.value = true
+      break
+    case 'report':
+      // 实现举报
+      break
+  }
+  showMoreActions.value = false
+}
+
+const selectQuality = async (quality) => {
+  if (quality === currentQuality.value || qualityLoading.value) return
+
+  selectedQuality.value = quality
+  qualityLoading.value = true
+
+  try {
+    await settingsStore.updateSetting('defaultQuality', quality)
+
+    if (currentSong.value && isPlaying.value) {
+      const currentTime = playerStore.currentTime
+      await playerStore.changeQuality(quality)
+
+      if (currentTime > 0) {
+        setTimeout(() => {
+          playerStore.seekTo(currentTime)
+        }, 500)
+      }
+    }
+
+    showQualitySelector.value = false
+
+  } catch (error) {
+    console.error('切换音质失败:', error)
+  } finally {
+    qualityLoading.value = false
+    selectedQuality.value = null
+  }
+}
+
+
+// 获取当前时间对应的歌词
+const getCurrentLyric = () => {
+  if (!currentLyrics.value || currentLyrics.value.length === 0) {
+    return ''
+  }
+
+  const currentTimeSeconds = currentTime.value
+  let currentLyric = ''
+
+  for (let i = 0; i < currentLyrics.value.length; i++) {
+    const lyric = currentLyrics.value[i]
+    if (lyric.time <= currentTimeSeconds) {
+      currentLyric = lyric.text
+    } else {
+      break
+    }
+  }
+
+  return currentLyric
+}
+
+// 加载歌词
+const loadLyrics = async (song) => {
+  if (!song) {
+    currentLyrics.value = []
+    return
+  }
+
+  const cachedLyrics = playerStore.getCachedLyrics(song)
+  if (cachedLyrics) {
+    const parsedLyrics = musicApi.parseLyrics(cachedLyrics.lyric)
+    currentLyrics.value = parsedLyrics.lyrics
+    return
+  }
+
+  try {
+    loading.value = true
+    const lyricsData = await playerStore.getLyricsWithDedup(song)
+
+    const parsedLyrics = musicApi.parseLyrics(lyricsData.lyric)
+    currentLyrics.value = parsedLyrics.lyrics
+  } catch (error) {
+    console.error('加载歌词失败:', error)
+    currentLyrics.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 延时加载歌词的定时器
+let lyricsTimer = null
+
+// 监听歌曲变化
+watch(currentSong, (newSong, oldSong) => {
+  if (newSong && newSong !== oldSong) {
+    if (lyricsTimer) {
+      clearTimeout(lyricsTimer)
+      lyricsTimer = null
+    }
+
+    loadAlbumCover()
+
+    lyricsTimer = setTimeout(() => {
+      loadLyrics(newSong)
+      lyricsTimer = null
+    }, 200)
+  }
+}, {immediate: true})
+
+// 生命周期
+onMounted(() => {
+  if (currentSong.value) {
+    loadAlbumCover()
+    loadLyrics(currentSong.value)
+  }
+})
+
+onUnmounted(() => {
+  if (lyricsTimer) {
+    clearTimeout(lyricsTimer)
+    lyricsTimer = null
+  }
+})
+</script>
+
+<style scoped>
+.desktop-full-player {
+  position: fixed;
+  top: 0;
+  left: 280px; /* 避开侧边栏 */
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  background: var(--bg-primary);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 悬浮控制按钮 */
+.floating-back-btn {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 44px;
+  height: 44px;
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  color: var(--text-primary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  backdrop-filter: blur(20px);
+  transition: var(--transition-fast);
+  z-index: 20;
+  font-size: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.floating-back-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: scale(1.05);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* 主内容区域：左右分栏 */
+.player-main {
+  display: grid;
+  grid-template-columns: 400px 1fr;
+  overflow: hidden;
+  height: 100%;
+  flex: 1;
+}
+
+/* 左侧音乐播放区域 */
+.left-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  background: var(--bg-card);
+  border-right: 1px solid var(--border-light);
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+}
+
+.panel-more-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  z-index: 10;
+  font-size: 14px;
+}
+
+.panel-more-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+  transform: scale(1.05);
+}
+
+.album-cover-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.album-cover-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  background: var(--overlay-light);
+  border: 3px solid var(--border-light);
+}
+
+.album-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+  transition: var(--transition-slow);
+}
+
+.album-cover.rotating {
+  animation: cd-rotate 10s linear infinite;
+}
+
+@keyframes cd-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.album-cover:hover {
+  transform: scale(1.02);
+}
+
+.cd-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  border: 2px solid var(--border-light);
+}
+
+.center-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.song-info-section {
+  text-align: center;
+  flex-shrink: 0;
+  max-width: 100%;
+  margin-bottom: 16px;
+}
+
+.song-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 4px;
+  position: relative;
+}
+
+.song-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.3;
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+  flex: 1;
+}
+
+.song-title-row .action-button {
+  position: absolute;
+  right: -8px;
+  flex-shrink: 0;
+}
+
+.artist-name {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0 0 3px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.album-name {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin: 0 0 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+.action-button {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  border-radius: 50%;
+  font-size: 13px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.05);
+}
+
+.favorite-btn.active {
+  background: rgba(255, 107, 107, 0.2);
+  color: var(--accent-red);
+}
+
+.favorite-btn.active:hover {
+  background: rgba(255, 107, 107, 0.3);
+}
+
+.progress-section {
+  flex-shrink: 0;
+  width: 100%;
+  margin-bottom: 6px;
+}
+
+.controls-section {
+  flex-shrink: 0;
+}
+
+
+/* 右侧歌词区域 */
+.right-panel {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+  overflow: hidden;
+}
+
+
+.lyrics-content {
+  flex: 1;
+  overflow: hidden;
+  padding: 0;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+}
+
+.lyrics-scroll-container {
+  height: 100%;
+  overflow-y: auto;
+  padding: 20px;
+  background: var(--bg-card);
+  border-radius: 12px;
+  position: relative;
+}
+
+.lyrics-scroll-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.lyrics-scroll-container::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 3px;
+}
+
+.lyrics-scroll-container::-webkit-scrollbar-thumb {
+  background: rgba(255, 107, 107, 0.3);
+  border-radius: 3px;
+  transition: var(--transition-fast);
+}
+
+.lyrics-scroll-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 107, 107, 0.5);
+}
+
+/* 深度选择器优化歌词组件内部样式 */
+.lyrics-scroll-container :deep(.lyrics-view) {
+  padding: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.lyrics-scroll-container :deep(.lyrics-list) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  min-height: 100%;
+  gap: 8px;
+}
+
+.lyrics-scroll-container :deep(.lyric-line) {
+  padding: 12px 16px;
+  font-size: 16px;
+  line-height: 1.8;
+  color: var(--text-secondary);
+  text-align: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border-radius: 8px;
+  margin: 0;
+  word-wrap: break-word;
+  white-space: normal;
+}
+
+.lyrics-scroll-container :deep(.lyric-line:hover) {
+  color: var(--text-primary);
+  background: rgba(255, 107, 107, 0.05);
+}
+
+.lyrics-scroll-container :deep(.lyric-line.active) {
+  color: var(--accent-red);
+  font-weight: 600;
+  font-size: 18px;
+  background: rgba(255, 107, 107, 0.1);
+  text-shadow: none;
+  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
+  transform: scale(1.02);
+}
+
+.lyrics-scroll-container :deep(.lyric-line.next) {
+  color: var(--text-primary);
+  font-weight: 500;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.lyrics-scroll-container :deep(.empty-lyrics) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-tertiary);
+  font-size: 16px;
+  font-style: italic;
+}
+
+/* 歌词淡入淡出效果 */
+.lyrics-scroll-container :deep(.lyric-line) {
+  opacity: 0.7;
+}
+
+.lyrics-scroll-container :deep(.lyric-line.active),
+.lyrics-scroll-container :deep(.lyric-line.next) {
+  opacity: 1;
+}
+
+/* 音质选择面板样式复用原有样式 */
+.quality-selector {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(20px);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.quality-panel {
+  background: var(--bg-card);
+  border-radius: 16px;
+  padding: 0;
+  width: 100%;
+  max-width: 480px;
+  max-height: 70vh;
+  overflow-y: auto;
+  animation: slideUpPanel 0.3s ease-out;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.panel-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.quality-list {
+  padding: 12px 0;
+}
+
+.quality-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.quality-item:hover {
+  background: var(--overlay-lighter);
+}
+
+.quality-item.active {
+  background: var(--bg-gradient-3);
+}
+
+.quality-item.loading {
+  pointer-events: none;
+}
+
+.quality-main {
+  flex: 1;
+}
+
+.quality-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+}
+
+.quality-item.active .quality-name {
+  color: var(--accent-red);
+}
+
+.quality-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.quality-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.quality-size {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  min-width: 60px;
+  text-align: right;
+}
+
+.quality-check {
+  color: var(--accent-red);
+  font-size: 14px;
+}
+
+.quality-note {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 24px;
+  background: rgba(255, 255, 255, 0.02);
+  border-top: 1px solid var(--border-lighter);
+}
+
+.quality-note i {
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+
+.quality-note span {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  line-height: 1.4;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUpPanel {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+</style>

src/components/player/LyricsView.vue

@@ -26,11 +26,6 @@
       <!-- 底部占位 -->
       <div class="lyrics-spacer"></div>
     </div>
-    
-    <!-- PC端歌词提示 -->
-    <div class="desktop-lyrics-hint" v-if="isDesktop">
-      <p>歌词已完整显示</p>
-    </div>
   </div>
 </template>
 
@@ -113,9 +108,6 @@ const findCurrentLine = (time) => {
 const scrollToLine = (index, smooth = true) => {
   if (!lyricsContainer.value || index < 0 || !lineRefs.value[index]) return
   
-  // 桌面端不滚动，显示完整歌词
-  if (isDesktop.value) return
-  
   const container = lyricsContainer.value
   const lineElement = lineRefs.value[index]
   
@@ -250,23 +242,6 @@ onUnmounted(() => {
   }
 })
 
-// 监听当前时间变化
-watch(() => props.currentTime, (newTime) => {
-  if (!parsedLyrics.value.length) return
-  
-  const newIndex = findCurrentLine(newTime)
-  if (newIndex !== currentLineIndex.value) {
-    currentLineIndex.value = newIndex
-    
-    // 只有在自动滚动开启且歌词行有效时才滚动
-    if (autoScroll.value && newIndex >= 0) {
-      nextTick(() => {
-        scrollToLine(newIndex)
-      })
-    }
-  }
-}, { immediate: false })
-
 // 监听歌词变化
 watch(() => props.lyrics, (newLyrics) => {
   // 重置滚动状态
@@ -279,12 +254,37 @@ watch(() => props.lyrics, (newLyrics) => {
     if (props.currentTime > 0 && newLyrics && newLyrics.length > 0) {
       const index = findCurrentLine(props.currentTime)
       currentLineIndex.value = index
-      if (index >= 0 && autoScroll.value) {
+      if (index >= 0) {
+        // 强制滚动到当前位置，无论是否自动滚动
         scrollToLine(index, false)
       }
     }
   })
 }, { immediate: true })
+
+// 添加对初始时间的监听，确保刷新页面时能正确定位
+watch(() => props.currentTime, (newTime, oldTime) => {
+  if (!parsedLyrics.value.length) return
+  
+  // 如果是第一次设置时间（从0变化到有效时间）或者时间有显著跳跃（进度条拖拽）
+  const isInitialTime = oldTime === 0 && newTime > 0
+  const isSeek = Math.abs(newTime - oldTime) > 2 // 时间跳跃超过2秒认为是拖拽
+  
+  const newIndex = findCurrentLine(newTime)
+  if (newIndex !== currentLineIndex.value) {
+    currentLineIndex.value = newIndex
+    
+    // 在初始化或拖拽时强制滚动
+    if ((isInitialTime || isSeek) && newIndex >= 0) {
+      scrollToLine(newIndex, !isSeek) // 拖拽时不使用动画
+    } else if (autoScroll.value && newIndex >= 0) {
+      // 正常播放时的滚动
+      nextTick(() => {
+        scrollToLine(newIndex)
+      })
+    }
+  }
+}, { immediate: false })
 </script>
 
 <style scoped>
@@ -364,25 +364,6 @@ watch(() => props.lyrics, (newLyrics) => {
   height: 200px;
 }
 
-.desktop-lyrics-hint {
-  position: absolute;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(0, 0, 0, 0.6);
-  color: rgba(255, 255, 255, 0.8);
-  padding: 6px 12px;
-  border-radius: 12px;
-  font-size: 12px;
-  backdrop-filter: blur(4px);
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .desktop-lyrics-hint {
-    display: block;
-  }
-}
 
 /* 响应式 */
 @media (max-width: 375px) {
@@ -422,11 +403,6 @@ watch(() => props.lyrics, (newLyrics) => {
     padding: 16px 0;
     font-size: 1.1em;
   }
-  
-  /* PC端显示所有歌词 */
-  .lyrics-content {
-    transform: translateY(0) !important;
-  }
 }
 
 /* 平滑滚动动画 */

src/components/player/PlaylistPanel.vue

@@ -45,7 +45,6 @@
                       :key="`${song.id}-${index}`"
                       :song="song"
                       :index="index"
-                      :cover="song.cover"
                       :show-remove="true"
                       :show-actions="false"
                       @play="handleSongClick"

src/components/player/ProgressBar.vue

@@ -174,7 +174,7 @@ onUnmounted(() => {
 .progress-bar-container {
   width: 100%;
   padding: 0 4px;
-  margin-top: 45px;
+  margin-top: 16px;
 }
 
 .progress-bar {

src/components/search/SearchBox.vue

@@ -78,6 +78,10 @@ const clearSearch = () => {
   searchKeyword.value = ''
 }
 
+const clearKeyword = () => {
+  searchKeyword.value = ''
+}
+
 const showSearchHistory = () => {
   // 跳转到搜索历史页面
   router.push('/search-history')
@@ -94,6 +98,11 @@ watch(() => searchStore.keyword, (newKeyword) => {
     searchKeyword.value = newKeyword
   }
 })
+
+// 暴露方法给父组件
+defineExpose({
+  clearKeyword
+})
 </script>
 
 <style scoped>

src/components/search/SearchResults.vue

@@ -33,6 +33,10 @@
     <div v-else-if="results.length" class="results-list">
       <div class="results-header">
         <span class="results-count">找到 {{ results.length }} 首歌曲</span>
+        <button class="clear-results-btn" @click="handleClearResults" title="清除搜索结果">
+          <i class="fas fa-times"></i>
+          <span class="clear-text">清除</span>
+        </button>
       </div>
       
       <div class="results-list-container" ref="resultsContainer">
@@ -104,7 +108,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['retry', 'search', 'play', 'loadMore', 'showMoreActions'])
+const emit = defineEmits(['retry', 'search', 'play', 'loadMore', 'showMoreActions', 'clearResults'])
 
 const searchStore = useSearchStore()
 const playerStore = usePlayerStore()
@@ -130,6 +134,14 @@ const hasMore = computed(() => searchStore.hasMore)
 const loadingMore = computed(() => loading.value && results.value.length > 0)
 
 // 方法
+const handleClearResults = () => {
+  // 清除搜索结果
+  searchStore.clearResults()
+  // 发出清除事件给父组件
+  emit('clearResults')
+  toastStore.success('已清除搜索结果')
+}
+
 const handlePlay = async (song, index) => {
   try {
     // SOLID原则：使用playQueueStore管理播放列表
@@ -249,9 +261,11 @@ onUnmounted(() => {
 <style scoped>
 .search-results {
   flex: 1;
-  overflow-y: auto;
+  overflow: hidden; /* 改为hidden，防止出现滚动条 */
   padding-bottom: 20px;
-  margin-top: 10px;
+  margin-top: 0; /* 移除顶部边距 */
+  display: flex;
+  flex-direction: column;
 }
 
 /* 状态样式 */
@@ -382,10 +396,17 @@ onUnmounted(() => {
 
 /* 结果列表 */
 .results-list {
-  padding: 0 0 20px;
+  padding: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .results-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 16px 20px 8px;
   border-bottom: 1px solid var(--border-strong);
   margin-bottom: 8px;
@@ -399,9 +420,49 @@ onUnmounted(() => {
   font-weight: 500;
 }
 
+.clear-results-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: transparent;
+  border: 1px solid var(--border-light);
+  border-radius: 16px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.clear-results-btn:hover {
+  background: #ff4444;
+  color: white;
+  border-color: #ff4444;
+}
+
+.clear-text {
+  font-size: 12px;
+}
+
+/* 响应式：小屏幕隐藏文字，只显示图标 */
+@media (max-width: 480px) {
+  .clear-text {
+    display: none;
+  }
+  
+  .clear-results-btn {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border-radius: 50%;
+    justify-content: center;
+  }
+}
+
 .results-list-container {
-  max-height: 70vh;
+  flex: 1;
   overflow-y: auto;
+  padding: 0 16px;
 }
 
 /* 加载更多 */
@@ -452,4 +513,105 @@ onUnmounted(() => {
     padding: 12px 16px 8px;
   }
 }
+
+/* PC端适配 */
+@media (min-width: 1024px) {
+  .search-results {
+    padding-bottom: 0; /* 移除底部padding */
+    height: 100%; /* 占满高度 */
+    overflow: hidden;
+  }
+  
+  .loading-state,
+  .error-state,
+  .empty-state,
+  .default-state {
+    padding: 60px 40px; /* 减少padding */
+    margin: 20px 32px; /* 调整边距 */
+    border-radius: 16px;
+    flex: 1;
+    justify-content: center;
+  }
+  
+  .loading-spinner,
+  .error-icon,
+  .empty-icon,
+  .default-icon {
+    width: 80px;
+    height: 80px;
+    font-size: 32px;
+  }
+  
+  .loading-state p,
+  .error-message,
+  .empty-message,
+  .default-message {
+    font-size: 20px;
+  }
+  
+  .empty-tip {
+    font-size: 16px;
+  }
+  
+  .suggestions {
+    margin-top: 40px;
+    max-width: 600px;
+  }
+  
+  .suggestions-title {
+    font-size: 18px;
+  }
+  
+  .suggestion-tags {
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 16px;
+  }
+  
+  .suggestion-tag {
+    padding: 16px 20px;
+    font-size: 16px;
+    border-radius: 25px;
+  }
+  
+  .results-list {
+    height: 100%;
+    padding: 0;
+  }
+  
+  .results-header {
+    padding: 20px 32px 16px;
+    background: var(--bg-primary);
+    border-radius: 0;
+    border-bottom: 1px solid var(--border-light);
+    flex-shrink: 0;
+  }
+  
+  .results-count {
+    font-size: 16px;
+  }
+  
+  .results-list-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 32px;
+    max-height: none; /* 移除最大高度限制 */
+  }
+  
+  .load-more {
+    padding: 32px;
+  }
+  
+  .loading-more {
+    font-size: 16px;
+    gap: 12px;
+  }
+  
+  .no-more {
+    padding: 32px;
+  }
+  
+  .no-more span {
+    font-size: 16px;
+  }
+}
 </style>

src/components/search/SongItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="favorite-item" :class="{
     selected: isSelected,
-    playing: isCurrentSong
+    playing: shouldShowPlaying && isCurrentSong
   }">
     <!-- 批量选择复选框 -->
     <div v-if="showBatchActions" class="item-checkbox">
@@ -15,8 +15,9 @@
       </label>
     </div>
 
-    <!-- 歌曲信息 -->
-    <div class="song-info" @click="handleClick">
+    <!-- 歌曲信息区域 -->
+    <div class="song-item-content">
+      <!-- 歌曲封面 -->
       <div class="song-cover">
         <img
                    :src="cover || getSongCover()"
@@ -34,18 +35,23 @@
         </div>
       </div>
 
-      <div class="song-details">
-        <h3 class="song-name">{{ song.name }}</h3>
-        <p class="song-meta">
-          <span class="artist">{{ formatArtist(song.artist) }}</span>
-        </p>
+      <!-- 歌曲详细信息 - 可点击播放 -->
+      <div class="song-info" @click="handleClick">
+        <div class="song-details">
+          <h3 class="song-name">{{ song.name }}</h3>
+          <p class="song-meta">
+            <span class="artist">{{ formatArtist(song.artist) }}</span>
+            <span v-if="playTime" class="play-time">• {{ playTime }}</span>
+            <span v-if="playCount" class="play-count">• 播放 {{ playCount }} 次</span>
+          </p>
+        </div>
       </div>
     </div>
 
     <!-- 操作按钮 -->
          <div v-if="!showBatchActions && showActions" class="song-actions">
            <!-- 播放状态指示器 -->
-           <div v-if="isCurrentSong" class="playing-indicator">
+           <div v-if="shouldShowPlaying && isCurrentSong" class="playing-indicator">
              <div v-if="isPlaying" class="sound-waves">
                <div class="sound-bar"></div>
                <div class="sound-bar"></div>
@@ -127,6 +133,21 @@ const props = defineProps({
         cover: {
           type: String,
           default: ''
+        },
+        // 播放次数（用于最多播放视图）
+        playCount: {
+          type: Number,
+          default: 0
+        },
+        // 播放时间（用于历史记录视图）
+        playTime: {
+          type: String,
+          default: ''
+        },
+        // 是否应该显示播放状态（用于历史记录去重）
+        shouldShowPlaying: {
+          type: Boolean,
+          default: true
         }
 })
 
@@ -284,12 +305,19 @@ onMounted(() => {
   transform: rotate(45deg);
 }
 
+.song-item-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 12px;
+  min-width: 0;
+}
+
 .song-info {
   display: flex;
   align-items: center;
   flex: 1;
   cursor: pointer;
-  gap: 12px;
   min-width: 0;
 }
 
@@ -500,4 +528,5 @@ onMounted(() => {
     font-size: 12px;
   }
 }
+
 </style>

src/components/search/SourceSelector.vue

@@ -85,6 +85,34 @@ const selectSource = (sourceCode) => {
   box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
 }
 
+/* PC端适配 */
+@media (min-width: 768px) {
+  .source-selector-overlay {
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  
+  .source-selector-content {
+    width: 400px;
+    max-height: 500px;
+    border-radius: 16px;
+    animation: scaleIn 0.3s ease;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  }
+  
+  @keyframes scaleIn {
+    from { 
+      opacity: 0; 
+      transform: scale(0.9) translateY(20px); 
+    }
+    to { 
+      opacity: 1; 
+      transform: scale(1) translateY(0); 
+    }
+  }
+}
+
 @keyframes slideUp {
   from { transform: translateY(100%); }
   to { transform: translateY(0); }

src/main.js

@@ -81,4 +81,4 @@ app.config.warnHandler = (msg, instance, trace) => {
   console.warn('Trace:', trace)
 }
 
-console.log('🎵 云音乐PWA 启动完成')
+console.log('🎵 云音乐 启动完成')

src/router/index.js

@@ -28,7 +28,7 @@ const routes = [
   },
   {
     path: '/my-music',
-    name: 'MyMusic', 
+    name: 'MyMusic',
     component: MyMusicPage,
     meta: {
       title: '我的音乐',
@@ -70,7 +70,7 @@ const routes = [
     component: PlayQueuePage,
     meta: {
       title: '播放列表',
-      keepAlive: true // 启用缓存，避免重复加载图片，播放列表通过响应式数据实现实时更新
+      keepAlive: false
     }
   },
   {
@@ -121,9 +121,9 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
   // 设置页面标题
   if (to.meta?.title) {
-    document.title = `${to.meta.title} - 云音乐PWA`
+    document.title = `${to.meta.title} - 云音乐`
   }
   next()
 })
 
-export default router
+export default router

src/stores/favorites.js

@@ -107,9 +107,35 @@ export const useFavoritesStore = defineStore('favorites', () => {
     const lowerKeyword = keyword.toLowerCase().trim()
     return favorites.value.filter(fav => {
       const song = fav.song
-      return song.name.toLowerCase().includes(lowerKeyword) ||
-             song.artist.toLowerCase().includes(lowerKeyword) ||
-             (song.album && song.album.toLowerCase().includes(lowerKeyword))
+      if (!song) return false
+      
+      // 安全的字符串比较函数
+      const safeIncludes = (text) => {
+        if (!text) return false
+        if (typeof text === 'string') {
+          return text.toLowerCase().includes(lowerKeyword)
+        }
+        if (Array.isArray(text)) {
+          // 如果是数组，检查每个元素
+          return text.some(item => {
+            if (typeof item === 'string') {
+              return item.toLowerCase().includes(lowerKeyword)
+            }
+            if (typeof item === 'object' && item?.name) {
+              return item.name.toLowerCase().includes(lowerKeyword)
+            }
+            return false
+          })
+        }
+        if (typeof text === 'object' && text?.name) {
+          return text.name.toLowerCase().includes(lowerKeyword)
+        }
+        return String(text).toLowerCase().includes(lowerKeyword)
+      }
+
+      return safeIncludes(song.name) ||
+             safeIncludes(song.artist) ||
+             safeIncludes(song.album)
     })
   }
   

src/stores/history.js

@@ -236,18 +236,60 @@ export const useHistoryStore = defineStore('history', () => {
     }
 
     const lowerKeyword = keyword.toLowerCase().trim()
-    return history.value.filter(item => 
-      item.song.name.toLowerCase().includes(lowerKeyword) ||
-      item.song.artist.toLowerCase().includes(lowerKeyword) ||
-      (item.song.album && item.song.album.toLowerCase().includes(lowerKeyword))
-    )
+    return history.value.filter(item => {
+      const song = item.song
+      if (!song) return false
+      
+      // 安全的字符串比较函数
+      const safeIncludes = (text) => {
+        if (!text) return false
+        if (typeof text === 'string') {
+          return text.toLowerCase().includes(lowerKeyword)
+        }
+        if (Array.isArray(text)) {
+          // 如果是数组，检查每个元素
+          return text.some(item => {
+            if (typeof item === 'string') {
+              return item.toLowerCase().includes(lowerKeyword)
+            }
+            if (typeof item === 'object' && item?.name) {
+              return item.name.toLowerCase().includes(lowerKeyword)
+            }
+            return false
+          })
+        }
+        if (typeof text === 'object' && text?.name) {
+          return text.name.toLowerCase().includes(lowerKeyword)
+        }
+        return String(text).toLowerCase().includes(lowerKeyword)
+      }
+
+      return safeIncludes(song.name) ||
+             safeIncludes(song.artist) ||
+             safeIncludes(song.album)
+    })
   }
   
   // 按艺术家筛选
   const getHistoryByArtist = (artist) => {
-    return history.value.filter(item => 
-      item.song.artist === artist
-    )
+    return history.value.filter(item => {
+      if (!item.song || !item.song.artist) return false
+      
+      // 安全的艺术家比较
+      const songArtist = item.song.artist
+      if (typeof songArtist === 'string') {
+        return songArtist === artist
+      }
+      if (Array.isArray(songArtist)) {
+        return songArtist.some(a => 
+          typeof a === 'string' ? a === artist : a?.name === artist
+        )
+      }
+      if (typeof songArtist === 'object' && songArtist?.name) {
+        return songArtist.name === artist
+      }
+      return String(songArtist) === artist
+    })
   }
   
   // 按时间范围筛选

src/stores/playqueue.js

@@ -34,7 +34,21 @@ export const usePlayQueueStore = defineStore('playqueue', () => {
       return false
     }
     
-    queue.value = songs.slice(0, MAX_QUEUE_SIZE)
+    // 去重：移除重复的歌曲
+    const uniqueSongs = []
+    const seen = new Set()
+    
+    for (const song of songs) {
+      if (song && song.id) {
+        const key = `${song.source}-${song.id}`
+        if (!seen.has(key)) {
+          seen.add(key)
+          uniqueSongs.push(song)
+        }
+      }
+    }
+    
+    queue.value = uniqueSongs.slice(0, MAX_QUEUE_SIZE)
     currentIndex.value = Math.max(0, Math.min(startIndex, queue.value.length - 1))
     saveQueue()
     return true
@@ -264,11 +278,35 @@ export const usePlayQueueStore = defineStore('playqueue', () => {
     const lowerKeyword = keyword.toLowerCase().trim()
     return queue.value
       .map((song, index) => ({ song, index }))
-      .filter(({ song }) => 
-        song.name.toLowerCase().includes(lowerKeyword) ||
-        song.artist.toLowerCase().includes(lowerKeyword) ||
-        (song.album && song.album.toLowerCase().includes(lowerKeyword))
-      )
+      .filter(({ song }) => {
+        // 安全的字符串比较函数
+        const safeIncludes = (text) => {
+          if (!text) return false
+          if (typeof text === 'string') {
+            return text.toLowerCase().includes(lowerKeyword)
+          }
+          if (Array.isArray(text)) {
+            // 如果是数组，检查每个元素
+            return text.some(item => {
+              if (typeof item === 'string') {
+                return item.toLowerCase().includes(lowerKeyword)
+              }
+              if (typeof item === 'object' && item?.name) {
+                return item.name.toLowerCase().includes(lowerKeyword)
+              }
+              return false
+            })
+          }
+          if (typeof text === 'object' && text?.name) {
+            return text.name.toLowerCase().includes(lowerKeyword)
+          }
+          return String(text).toLowerCase().includes(lowerKeyword)
+        }
+
+        return safeIncludes(song.name) ||
+               safeIncludes(song.artist) ||
+               safeIncludes(song.album)
+      })
   }
   
   // 存储管理

src/styles/global.css

@@ -5,6 +5,11 @@
   --mini-player-height: 64px;
   --list-item-height: 64px;
   --touch-target: 44px;
+  --sidebar-width: 280px;
+  
+  /* PC端组件尺寸 */
+  --pc-list-item-height: 80px;
+  --pc-touch-target: 48px;
   
   /* 圆角 */
   --radius-small: 12px;

src/views/FavoritesPage.vue

@@ -2,10 +2,10 @@
   <div class="favorites-page">
     <!-- 头部 -->
     <div class="page-header">
-      <h1 class="page-title">
+      <div class="page-title">
         <i class="fas fa-heart"></i>
         我喜欢的音乐
-      </h1>
+      </div>
       <div class="header-actions">
         <button v-if="!isEmpty" class="action-btn" @click="playAll">
           <i class="fas fa-play"></i>
@@ -17,7 +17,7 @@
     </div>
     
     <!-- 搜索框 -->
-    <div v-if="!isEmpty" class="search-section">
+    <div v-if="!isEmpty" class="search-section hidden-desktop">
       <div class="search-box">
         <i class="fas fa-search"></i>
         <input 
@@ -256,6 +256,21 @@ const playAll = async () => {
   }
 }
 
+const shufflePlay = async () => {
+  if (isEmpty.value) return
+  
+  const songs = displayedFavorites.value.map(fav => fav.song)
+  const shuffled = [...songs].sort(() => Math.random() - 0.5)
+  const result = playQueueStore.setQueue(shuffled, 0)
+  
+  if (result && shuffled.length > 0) {
+    await playerStore.playSong(shuffled[0])
+    toastStore.success(`开始随机播放 ${shuffled.length} 首歌曲`)
+  } else {
+    toastStore.error('播放失败')
+  }
+}
+
 // 收藏操作
 const toggleFavorite = async (song) => {
   const result = await favoritesStore.removeFromFavorites(song)
@@ -441,19 +456,21 @@ onMounted(async () => {
   overflow-y: auto;
 }
 
+/* 使用标准的page-header样式 */
 .page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px;
   border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-primary);
 }
 
 .page-title {
   display: flex;
   align-items: center;
   gap: 12px;
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0;
@@ -471,21 +488,38 @@ onMounted(async () => {
 .action-btn {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
   border: none;
-  background: var(--accent-red);
-  color: white;
-  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
   font-size: 14px;
-  font-weight: 500;
   cursor: pointer;
   transition: var(--transition-fast);
 }
 
 .action-btn:hover {
-  background: var(--accent-red-hover);
-  transform: translateY(-1px);
+  background: var(--accent-red);
+  color: white;
+  transform: scale(1.1);
+}
+
+.action-btn.active {
+  background: var(--accent-red);
+  color: white;
+}
+
+.content-area {
+  flex: 1;
+  min-height: 0;
+}
+
+.favorites-list {
+  background: var(--bg-card);
+  margin: 0;
+  overflow: hidden;
 }
 
 .stats-card {
@@ -883,20 +917,158 @@ onMounted(async () => {
   }
 }
 
-@media (min-width: 768px) {
+/* PC端适配 */
+@media (min-width: 1024px) {
   .favorites-page {
-    max-width: 1200px;
-    margin: 0 auto;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
   }
   
-  .stats-card {
-    max-width: 600px;
-    margin: 16px auto;
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    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);
+  }
+  
+  .header-search {
+    flex: 0 0 300px;
+  }
+  
+  .header-search .search-box {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-light);
+  }
+  
+  .header-actions {
+    display: flex;
+    gap: 8px;
+  }
+  
+  .action-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border: none;
+    background: var(--accent-red);
+    color: white;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: var(--transition-fast);
+  }
+  
+  .action-btn:hover {
+    background: var(--accent-red-hover);
+    transform: translateY(-1px);
+  }
+  
+  .search-section {
+    display: none;
+  }
+  
+  .batch-actions {
+    flex-shrink: 0;
+    padding: 16px 32px;
+    margin: 0;
+    border-radius: 0;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-light);
+  }
+  
+  .content-area {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .empty-state {
+    flex: 1;
+    padding: 80px 60px;
+    margin: 0;
+    background: var(--bg-primary);
+    border: none;
+    border-radius: 0;
+    justify-content: center;
+  }
+  
+  .empty-state i {
+    font-size: 80px;
+  }
+  
+  .empty-state p {
+    font-size: 18px;
+  }
+  
+  .empty-tip {
+    font-size: 16px;
+  }
+  
+  /* 修复歌曲名溢出问题 */
   .favorites-list {
-    max-width: 800px;
-    margin: 0 auto;
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+    background: var(--bg-primary);
+  }
+  
+  /* 确保列表项的正确布局 */
+  .favorites-list .favorite-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+  }
+  
+  .favorites-list .item-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  
+  .favorites-list .song-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+  
+  .favorites-list .song-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .favorites-list .song-meta {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .favorites-list .item-actions {
+    flex-shrink: 0;
+    margin-left: 12px;
   }
 }
 </style>

src/views/FullPlayerPage.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="full-player" :class="{ 'lyrics-mode': showLyrics }">
+  <!-- PC端显示DesktopFullPlayer组件 -->
+  <DesktopFullPlayer 
+    v-if="isDesktop" 
+    @close="handleBack" 
+  />
+  
+  <!-- 移动端保持原有布局 -->
+  <div v-else class="full-player" :class="{ 'lyrics-mode': showLyrics }">
     <!-- 背景 -->
     <div class="background-overlay">
       <img
@@ -170,6 +177,7 @@ import { useHistoryStore } from '@/stores/history'
 import { useToastStore } from '@/stores/toast'
 import { useSettingsStore } from '@/stores/settings'
 import { musicApi, utils } from '@/services/musicApi'
+import DesktopFullPlayer from '@/components/player/DesktopFullPlayer.vue'
 import AlbumCover from '@/components/player/AlbumCover.vue'
 import PlayControls from '@/components/player/PlayControls.vue'
 import ProgressBar from '@/components/player/ProgressBar.vue'
@@ -1311,6 +1319,106 @@ watch(currentSong, (newSong, oldSong) => {
   }
 }
 
+/* PC端进一步优化 */
+@media (min-width: 1024px) {
+  .full-player {
+    max-width: 800px;
+    height: 90vh;
+    top: 5vh;
+    bottom: auto;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  }
+
+  .player-header {
+    padding: 24px 32px;
+  }
+
+  .back-btn,
+  .more-btn {
+    width: 48px;
+    height: 48px;
+    font-size: 18px;
+  }
+
+  .song-info-header .song-title {
+    font-size: 20px;
+  }
+
+  .song-info-header .artist-name {
+    font-size: 14px;
+    position: static;
+    transform: none;
+    width: auto;
+    margin-top: 4px;
+  }
+
+  .player-content {
+    padding: 40px 60px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: start;
+  }
+
+  .cover-section {
+    margin-top: 0;
+    max-width: none;
+  }
+
+  .lyrics-section {
+    margin-top: 0;
+    max-width: none;
+  }
+
+  .song-info {
+    grid-column: 1 / 3;
+    margin-top: 0;
+    text-align: left;
+  }
+
+  .current-lyric {
+    text-align: left;
+    justify-content: flex-start;
+  }
+
+  .lyric-text {
+    font-size: 22px;
+    text-align: left;
+  }
+
+  .artist-album-row {
+    justify-content: flex-start;
+  }
+
+  .player-controls {
+    padding: 20px 60px 40px;
+  }
+
+  /* 网格布局下的歌词和封面 */
+  .full-player:not(.lyrics-mode) .player-content {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+
+  .full-player:not(.lyrics-mode) .song-info {
+    text-align: center;
+  }
+
+  .full-player:not(.lyrics-mode) .current-lyric {
+    justify-content: center;
+  }
+
+  .full-player:not(.lyrics-mode) .lyric-text {
+    text-align: center;
+  }
+
+  .full-player:not(.lyrics-mode) .artist-album-row {
+    justify-content: center;
+  }
+}
+
 /* 动画效果 */
 .full-player {
   animation: slideUp 0.3s ease-out;

src/views/HistoryPage.vue

@@ -6,44 +6,48 @@
         <i class="fas fa-history"></i>
         播放历史
       </h1>
+      
+      <!-- PC端统计信息和筛选 -->
+      <div v-if="!isEmpty" class="stats-and-filters hidden-mobile">
+        
+        <div class="filter-tabs">
+          <button 
+            class="filter-tab" 
+            :class="{ active: viewMode === 'recent' || viewMode === 'grouped' }"
+            @click="switchView('recent')"
+          >
+            <i class="fas fa-clock"></i>
+            时间顺序
+          </button>
+          <button 
+            class="filter-tab" 
+            :class="{ active: viewMode === 'top' }"
+            @click="switchView('top')"
+          >
+            <i class="fas fa-fire"></i>
+            最多播放
+          </button>
+        </div>
+      </div>
+      
       <div class="header-actions">
         <button v-if="!isEmpty" class="action-btn danger" @click="confirmClearAll">
           <i class="fas fa-trash"></i>
-          <span>清空</span>
         </button>
       </div>
     </div>
     
-    <!-- 统计信息 -->
-    <div class="stats-grid">
-      <div class="stat-card">
-        <div class="stat-number">{{ totalPlays }}</div>
-        <div class="stat-label">总播放</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-number">{{ uniqueSongs }}</div>
-        <div class="stat-label">不同歌曲</div>
-      </div>
-    </div>
     
-    <!-- 筛选和搜索 -->
-    <div v-if="!isEmpty" class="filter-section">
+    <!-- 移动端筛选和搜索 -->
+    <div v-if="!isEmpty" class="filter-section hidden-desktop">
       <div class="filter-tabs">
         <button 
           class="filter-tab" 
-          :class="{ active: viewMode === 'recent' }"
+          :class="{ active: viewMode === 'recent' || viewMode === 'grouped' }"
           @click="switchView('recent')"
         >
           <i class="fas fa-clock"></i>
-          最近播放
-        </button>
-        <button 
-          class="filter-tab" 
-          :class="{ active: viewMode === 'grouped' }"
-          @click="switchView('grouped')"
-        >
-          <i class="fas fa-calendar"></i>
-          按日期
+          时间顺序
         </button>
         <button 
           class="filter-tab" 
@@ -55,6 +59,7 @@
         </button>
       </div>
       
+      <!-- 移动端搜索框 -->
       <div class="search-box">
         <i class="fas fa-search"></i>
         <input 
@@ -84,47 +89,18 @@
       
       <!-- 最近播放 -->
       <div v-else-if="viewMode === 'recent'" class="recent-view">
-        <div class="history-list">
-          <div 
+        <div class="songs-list">
+          <SongItem
             v-for="(item, index) in displayedHistory" 
             :key="`${item.song.id}-${item.timestamp}`"
-            class="history-item"
-          >
-            <div class="item-content" @click="playFromHistory(item.song, index)">
-              <div class="song-cover">
-                <img 
-                  :src="getSongCover(item.song)" 
-                  :alt="item.song.name"
-                  @error="handleImageError"
-                />
-                <div class="play-overlay">
-                  <i class="fas fa-play"></i>
-                </div>
-              </div>
-              
-              <div class="song-info">
-                <h3 class="song-name">{{ item.song.name }}</h3>
-                <p class="song-meta">
-                  <span class="artist">{{ item.song.artist }}</span>
-                  <span v-if="item.song.album" class="album"> - {{ item.song.album }}</span>
-                </p>
-                <p class="play-time">{{ formatPlayTime(item.timestamp) }}</p>
-              </div>
-            </div>
-            
-            <div class="item-actions">
-              <button 
-                class="action-btn favorite-btn"
-                :class="{ active: isFavorite(item.song) }"
-                @click="toggleFavorite(item.song)"
-              >
-                <i class="fas fa-heart"></i>
-              </button>
-              <button class="action-btn" @click="handleShowMoreActions(item.song, $event)">
-                <i class="fas fa-ellipsis-h"></i>
-              </button>
-            </div>
-          </div>
+            :song="item.song"
+            :index="index"
+            :show-actions="true"
+            :play-time="formatPlayTime(item.timestamp)"
+            :should-show-playing="shouldShowPlayingState(item.song, index, displayedHistory)"
+            @play="playFromHistory"
+            @showMoreActions="handleShowMoreActions"
+          />
         </div>
       </div>
       
@@ -141,95 +117,34 @@
           </div>
           
           <div class="group-content">
-            <div 
+            <SongItem
               v-for="(item, index) in group" 
               :key="`${item.song.id}-${item.timestamp}`"
-              class="history-item"
-            >
-              <div class="item-content" @click="playFromGroup(item.song, group, index)">
-                <div class="song-cover">
-                  <img 
-                    :src="getSongCover(item.song)" 
-                    :alt="item.song.name"
-                    @error="handleImageError"
-                  />
-                  <div class="play-overlay">
-                    <i class="fas fa-play"></i>
-                  </div>
-                </div>
-                
-                <div class="song-info">
-                  <h3 class="song-name">{{ item.song.name }}</h3>
-                  <p class="song-meta">
-                    <span class="artist">{{ item.song.artist }}</span>
-                    <span v-if="item.song.album" class="album"> - {{ item.song.album }}</span>
-                  </p>
-                  <p class="play-time">{{ formatPlayTime(item.timestamp, true) }}</p>
-                </div>
-              </div>
-              
-              <div class="item-actions">
-                <button 
-                  class="action-btn favorite-btn"
-                  :class="{ active: isFavorite(item.song) }"
-                  @click="toggleFavorite(item.song)"
-                >
-                  <i class="fas fa-heart"></i>
-                </button>
-                <button class="action-btn" @click="showMoreActions(item.song, $event)">
-                  <i class="fas fa-ellipsis-h"></i>
-                </button>
-              </div>
-            </div>
+              :song="item.song"
+              :index="index"
+              :show-actions="true"
+              :play-time="formatPlayTime(item.timestamp, true)"
+              :should-show-playing="shouldShowPlayingState(item.song, index, group)"
+              @play="(song, idx) => playFromGroup(song, group, idx)"
+              @showMoreActions="handleShowMoreActions"
+            />
           </div>
         </div>
       </div>
       
       <!-- 最多播放 -->
       <div v-else-if="viewMode === 'top'" class="top-view">
-        <div class="top-list">
-          <div 
+        <div class="songs-list">
+          <SongItem
             v-for="(item, index) in topPlayedSongs" 
             :key="item.songKey"
-            class="top-item"
-          >
-            <div class="rank-badge">{{ index + 1 }}</div>
-            
-            <div class="item-content" @click="playTopSong(item.song)">
-              <div class="song-cover">
-                <img 
-                  :src="getSongCover(item.song)" 
-                  :alt="item.song.name"
-                  @error="handleImageError"
-                />
-                <div class="play-overlay">
-                  <i class="fas fa-play"></i>
-                </div>
-              </div>
-              
-              <div class="song-info">
-                <h3 class="song-name">{{ item.song.name }}</h3>
-                <p class="song-meta">
-                  <span class="artist">{{ item.song.artist }}</span>
-                  <span v-if="item.song.album" class="album"> - {{ item.song.album }}</span>
-                </p>
-                <p class="play-count">播放 {{ item.count }} 次</p>
-              </div>
-            </div>
-            
-            <div class="item-actions">
-              <button 
-                class="action-btn favorite-btn"
-                :class="{ active: isFavorite(item.song) }"
-                @click="toggleFavorite(item.song)"
-              >
-                <i class="fas fa-heart"></i>
-              </button>
-              <button class="action-btn" @click="handleShowMoreActions(item.song, $event)">
-                <i class="fas fa-ellipsis-h"></i>
-              </button>
-            </div>
-          </div>
+            :song="item.song"
+            :index="index"
+            :show-actions="true"
+            :play-count="item.count"
+            @play="playTopSong"
+            @showMoreActions="handleShowMoreActions"
+          />
         </div>
       </div>
     </div>
@@ -265,6 +180,7 @@ import { useToastStore } from '@/stores/toast'
 import { imageCacheManager } from '@/utils/imageCache'
 import MoreActionsPanel from '@/components/player/MoreActionsPanel.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+import SongItem from '@/components/search/SongItem.vue'
 
 const router = useRouter()
 const historyStore = useHistoryStore()
@@ -274,13 +190,12 @@ const playQueueStore = usePlayQueueStore()
 const toastStore = useToastStore()
 
 // 响应式数据
-const viewMode = ref('grouped') // 'recent', 'grouped', 'top' - 默认显示按日期
+const viewMode = ref('top') // 'recent', 'grouped', 'top' - 默认显示最多播放
 const searchKeyword = ref('')
 const selectedSong = ref(null)
 const showMoreActions = ref(false)
 const moreActionsRef = ref(null)
 const confirmDialogRef = ref(null)
-const songCovers = ref(new Map()) // 存储异步加载的封面URL
 
 // 确认对话框状态
 const confirmDialog = ref({
@@ -297,20 +212,25 @@ const history = computed(() => historyStore.history)
 const totalPlays = computed(() => historyStore.totalPlays)
 const uniqueSongs = computed(() => historyStore.uniqueSongs)
 const isEmpty = computed(() => historyStore.isEmpty)
+const currentSong = computed(() => playerStore.currentSong)
+const isPlaying = computed(() => playerStore.isPlaying)
 
 // 播放统计
 const playStats = computed(() => historyStore.getPlayStats())
 
 // 搜索后的历史记录
 const displayedHistory = computed(() => {
-  const baseHistory = viewMode.value === 'recent' 
-    ? historyStore.getRecentSongs(100) 
+  const baseHistory = viewMode.value === 'recent' || viewMode.value === 'grouped'
+    ? [...history.value].sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))  // 时间逆序：最新的在前面
     : history.value
     
   if (!searchKeyword.value.trim()) {
     return baseHistory
   }
-  return historyStore.searchHistory(searchKeyword.value)
+  
+  // 搜索时也要保持时间逆序
+  const searchResults = historyStore.searchHistory(searchKeyword.value)
+  return searchResults.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
 })
 
 // 按日期分组的历史记录
@@ -320,7 +240,45 @@ const groupedHistory = computed(() => {
 
 // 最多播放的歌曲
 const topPlayedSongs = computed(() => {
-  return historyStore.getTopPlayedSongs(50)
+  const allTopSongs = historyStore.getTopPlayedSongs(50)
+  
+  // 如果有搜索关键词，需要过滤最多播放的歌曲
+  if (!searchKeyword.value.trim()) {
+    return allTopSongs
+  }
+  
+  const lowerKeyword = searchKeyword.value.toLowerCase().trim()
+  return allTopSongs.filter(item => {
+    const song = item.song
+    if (!song) return false
+    
+    // 安全的字符串比较函数
+    const safeIncludes = (text) => {
+      if (!text) return false
+      if (typeof text === 'string') {
+        return text.toLowerCase().includes(lowerKeyword)
+      }
+      if (Array.isArray(text)) {
+        return text.some(item => {
+          if (typeof item === 'string') {
+            return item.toLowerCase().includes(lowerKeyword)
+          }
+          if (typeof item === 'object' && item?.name) {
+            return item.name.toLowerCase().includes(lowerKeyword)
+          }
+          return false
+        })
+      }
+      if (typeof text === 'object' && text?.name) {
+        return text.name.toLowerCase().includes(lowerKeyword)
+      }
+      return String(text).toLowerCase().includes(lowerKeyword)
+    }
+
+    return safeIncludes(song.name) ||
+           safeIncludes(song.artist) ||
+           safeIncludes(song.album)
+  })
 })
 
 // 方法
@@ -336,19 +294,48 @@ const formatDuration = (seconds) => {
 
 const formatPlayTime = (timestamp, showTime = false) => {
   const date = new Date(timestamp)
+  const today = new Date()
+  const yesterday = new Date(today)
+  yesterday.setDate(yesterday.getDate() - 1)
   
-  if (showTime) {
-    return date.toLocaleTimeString('zh-CN', { 
+  // 判断日期
+  if (date.toDateString() === today.toDateString()) {
+    if (showTime) {
+      return date.toLocaleTimeString('zh-CN', { 
+        hour: '2-digit', 
+        minute: '2-digit' 
+      })
+    }
+    return '今天 ' + date.toLocaleTimeString('zh-CN', { 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    })
+  } else if (date.toDateString() === yesterday.toDateString()) {
+    if (showTime) {
+      return date.toLocaleTimeString('zh-CN', { 
+        hour: '2-digit', 
+        minute: '2-digit' 
+      })
+    }
+    return '昨天 ' + date.toLocaleTimeString('zh-CN', { 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    })
+  } else {
+    if (showTime) {
+      return date.toLocaleTimeString('zh-CN', { 
+        hour: '2-digit', 
+        minute: '2-digit' 
+      })
+    }
+    return date.toLocaleDateString('zh-CN', { 
+      month: 'short', 
+      day: 'numeric' 
+    }) + ' ' + date.toLocaleTimeString('zh-CN', { 
       hour: '2-digit', 
       minute: '2-digit' 
     })
   }
-  
-  // 移除"多少分钟前"显示，直接显示时间
-  return date.toLocaleTimeString('zh-CN', { 
-    hour: '2-digit', 
-    minute: '2-digit' 
-  })
 }
 
 const formatDate = (dateString) => {
@@ -370,53 +357,16 @@ const formatDate = (dateString) => {
   }
 }
 
-const getSongCover = (song) => {
-  const songKey = `${song.source}-${song.pic_id || song.id}`
-  
-  // 先返回缓存的URL或默认图片
-  const cached = songCovers.value.get(songKey)
-  if (cached) {
-    return cached
+const formatArtist = (artist) => {
+  if (!artist) return '未知歌手'
+  if (typeof artist === 'string') return artist
+  if (Array.isArray(artist)) {
+    return artist.map(a => typeof a === 'object' ? a.name : a).join('、')
   }
-  
-  // 异步加载封面URL
-  loadSongCover(song)
-  
-  // 返回默认图片或playerStore缓存
-  return playerStore.getCachedCover(song) || imageCacheManager.getDefaultImage()
-}
-
-const loadSongCover = async (song) => {
-  const songKey = `${song.source}-${song.pic_id || song.id}`
-  
-  // 如果已经在加载中，跳过
-  if (songCovers.value.has(songKey)) {
-    return
-  }
-  
-  // 设置默认值，防止重复加载
-  songCovers.value.set(songKey, imageCacheManager.getDefaultImage())
-  
-  // 使用新的缓存机制
-  if (song.pic_id || song.id) {
-    try {
-      const { getCachedMusicPicUrlWithDelay } = await import('@/utils/musicPicCache.js')
-      const coverUrl = await getCachedMusicPicUrlWithDelay(
-        song.source, 
-        song.pic_id || song.id, 
-        300
-      )
-      if (coverUrl) {
-        songCovers.value.set(songKey, coverUrl)
-      }
-    } catch (error) {
-      console.error('获取历史歌曲封面失败:', error)
-    }
+  if (typeof artist === 'object' && artist.name) {
+    return artist.name
   }
-}
-
-const handleImageError = (event) => {
-  event.target.src = imageCacheManager.getDefaultImage()
+  return String(artist)
 }
 
 const switchView = (mode) => {
@@ -437,13 +387,30 @@ const isFavorite = (song) => {
   return favoritesStore.isFavorite(song)
 }
 
+// 检查是否是当前播放的歌曲
+const isCurrentSong = (song) => {
+  if (!currentSong.value || !song) return false
+  return currentSong.value.id === song.id && currentSong.value.source === song.source
+}
+
+// 检查历史记录中同一首歌是否应该显示播放状态（只在第一个显示）
+const shouldShowPlayingState = (song, index, list) => {
+  if (!isCurrentSong(song)) return false
+  
+  // 找到同一首歌的第一个索引
+  const firstIndex = list.findIndex(item => 
+    item.song.id === song.id && item.song.source === song.source
+  )
+  
+  return index === firstIndex
+}
+
 const toggleFavorite = async (song) => {
   const result = await favoritesStore.toggleFavorite(song)
   const message = result ? '已添加到我喜欢的音乐' : '已从我喜欢的音乐中移除'
   toastStore.success(message)
 }
 
-// 播放相关
 const playFromHistory = async (song, index) => {
   const songs = displayedHistory.value.map(item => item.song)
   const result = playQueueStore.setQueue(songs, index)
@@ -468,14 +435,23 @@ const playFromGroup = async (song, group, index) => {
   }
 }
 
-const playTopSong = async (song) => {
-  const result = playQueueStore.addToQueue(song, 'end')
-  
-  if (result.success) {
-    await playerStore.playSong(song)
-    toastStore.success(`开始播放 "${song.name}"`)
-  } else {
-    toastStore.error('播放失败')
+const playTopSong = async (song, index) => {
+  try {
+    // 获取最多播放歌曲列表
+    const topSongs = topPlayedSongs.value.map(item => item.song)
+    
+    // 设置播放列表，从选择的歌曲开始播放
+    const result = playQueueStore.setQueue(topSongs, index)
+    
+    if (result) {
+      await playerStore.playSong(song)
+      toastStore.success(`开始播放 "${song.name}"`)
+    } else {
+      throw new Error('设置播放列表失败')
+    }
+  } catch (error) {
+    console.error('播放最多播放歌曲失败:', error)
+    toastStore.error('播放失败，请重试')
   }
 }
 
@@ -554,19 +530,21 @@ onMounted(() => {
   overflow-y: auto;
 }
 
+/* 使用标准的page-header样式 */
 .page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px;
   border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-primary);
 }
 
 .page-title {
   display: flex;
   align-items: center;
   gap: 12px;
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0;
@@ -576,6 +554,28 @@ onMounted(() => {
   color: var(--accent-red);
 }
 
+.header-stats {
+  display: flex;
+  gap: 24px;
+  margin: 0 20px;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.stat-number {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--accent-red);
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
 .header-actions {
   display: flex;
   gap: 8px;
@@ -584,57 +584,77 @@ onMounted(() => {
 .action-btn {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
   border: none;
-  background: var(--accent-red);
-  color: white;
-  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
   font-size: 14px;
-  font-weight: 500;
   cursor: pointer;
   transition: var(--transition-fast);
 }
 
 .action-btn:hover {
-  background: var(--accent-red-hover);
-  transform: translateY(-1px);
+  background: var(--accent-red);
+  color: white;
+  transform: scale(1.1);
 }
 
 .action-btn.danger {
-  background: #ff4444;
+  color: #ff4444;
 }
 
 .action-btn.danger:hover {
-  background: #ff6666;
+  background: #ff4444;
+  color: white;
 }
 
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-  padding: 16px;
+.filter-controls {
+  display: flex;
+  justify-content: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-lighter);
   background: var(--bg-card);
-  margin: 16px;
-  border-radius: var(--radius-medium);
-  border: 1px solid var(--border-light);
 }
 
-.stat-card {
-  text-align: center;
-  padding: 16px 8px;
+.filter-tabs {
+  display: flex;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
 }
 
-.stat-number {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--accent-red);
-  margin-bottom: 4px;
+.filter-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: var(--transition-fast);
 }
 
-.stat-label {
-  font-size: 12px;
-  color: var(--text-secondary);
+.filter-tab:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.filter-tab.active {
+  background: var(--accent-red);
+  color: white;
+}
+
+.content-area {
+  flex: 1;
+  min-height: 0;
 }
 
 .filter-section {
@@ -643,6 +663,7 @@ onMounted(() => {
 
 .filter-tabs {
   display: flex;
+  justify-content: center;
   gap: 8px;
   margin-bottom: 16px;
   overflow-x: auto;
@@ -716,11 +737,6 @@ onMounted(() => {
   color: var(--text-primary);
 }
 
-.content-area {
-  flex: 1;
-  min-height: 0;
-}
-
 .empty-state {
   display: flex;
   flex-direction: column;
@@ -768,8 +784,10 @@ onMounted(() => {
   transform: scale(1.05);
 }
 
-.history-list,
-.top-list {
+.songs-list {
+  background: var(--bg-card);
+  margin: 0;
+  overflow: hidden;
   padding-bottom: calc(var(--mini-player-height) + var(--tabbar-height) + 20px);
 }
 
@@ -781,6 +799,8 @@ onMounted(() => {
   border-bottom: 1px solid var(--border-lighter);
   background: var(--bg-card);
   transition: var(--transition-fast);
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .history-item:hover,
@@ -788,6 +808,12 @@ onMounted(() => {
   background: var(--bg-gradient-1);
 }
 
+.history-item.currently-playing,
+.top-item.currently-playing {
+  background: var(--bg-gradient-2);
+  border-left: 4px solid var(--accent-red);
+}
+
 .rank-badge {
   width: 32px;
   height: 32px;
@@ -803,12 +829,26 @@ onMounted(() => {
   flex-shrink: 0;
 }
 
+.top-item-wrapper {
+  display: flex;
+  align-items: center;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border-lighter);
+}
+
+.top-item-wrapper .favorite-item {
+  flex: 1;
+  border-bottom: none;
+}
+
 .item-content {
   display: flex;
   align-items: center;
   flex: 1;
   cursor: pointer;
   gap: 12px;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .song-cover {
@@ -849,9 +889,75 @@ onMounted(() => {
   font-size: 16px;
 }
 
+.playing-indicator {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--accent-red);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.playing-indicator i {
+  color: white;
+  font-size: 16px;
+}
+
+/* 动态声音波形 */
+.sound-waves {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  height: 12px;
+}
+
+.sound-bar {
+  width: 2px;
+  height: 6px;
+  background: white;
+  border-radius: 1px;
+  animation: sound-wave 1.2s ease-in-out infinite;
+}
+
+.sound-bar:nth-child(1) {
+  animation-delay: 0s;
+  height: 8px;
+}
+
+.sound-bar:nth-child(2) {
+  animation-delay: 0.2s;
+  height: 12px;
+}
+
+.sound-bar:nth-child(3) {
+  animation-delay: 0.4s;
+  height: 6px;
+}
+
+@keyframes sound-wave {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scaleY(0.6);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
 .song-info {
   flex: 1;
   min-width: 0;
+  overflow: hidden;
 }
 
 .song-name {
@@ -862,6 +968,7 @@ onMounted(() => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  width: 100%;
 }
 
 .song-meta {
@@ -871,6 +978,7 @@ onMounted(() => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  width: 100%;
 }
 
 .play-time,
@@ -884,6 +992,8 @@ onMounted(() => {
   display: flex;
   gap: 8px;
   flex-shrink: 0;
+  margin-left: auto;
+  padding-left: 12px;
 }
 
 .item-actions .action-btn {
@@ -999,21 +1109,261 @@ onMounted(() => {
   }
 }
 
-@media (min-width: 768px) {
+/* PC端适配 */
+@media (min-width: 1024px) {
   .history-page {
-    max-width: 1200px;
-    margin: 0 auto;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    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);
+  }
+  
+  .header-search {
+    flex: 0 0 300px;
+  }
+  
+  .header-search .search-box {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-light);
+  }
+  
+  .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: 14px;
+    cursor: pointer;
+    transition: var(--transition-fast);
+  }
+  
+  .action-btn:hover {
+    background: var(--accent-red);
+    color: white;
+    transform: scale(1.1);
+  }
+  
+  .action-btn.danger {
+    color: #ff4444;
+  }
+  
+  .action-btn.danger:hover {
+    background: #ff4444;
+    color: white;
+  }
+  
+  .stats-and-filters {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 32px;
+    margin: 0 32px;
+    background: transparent;
+    border: none;
   }
   
   .stats-grid {
-    max-width: 600px;
-    margin: 16px auto;
+    display: flex;
+    gap: 24px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+  }
+  
+  .stat-card {
+    text-align: center;
+    padding: 0;
+  }
+  
+  .stat-number {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--accent-red);
+    margin-bottom: 4px;
+  }
+  
+  .stat-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
+  
+  .filter-tabs {
+    display: flex;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+  }
+  
+  .filter-tab {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border: none;
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-secondary);
+    border-radius: 20px;
+    font-size: 14px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: var(--transition-fast);
+  }
+  
+  .filter-tab:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: var(--text-primary);
+  }
+  
+  .filter-tab.active {
+    background: var(--accent-red);
+    color: white;
   }
   
-  .history-list,
-  .top-list {
-    max-width: 800px;
-    margin: 0 auto;
+  .filter-section {
+    display: none;
+  }
+  
+  .content-area {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .recent-view,
+  .grouped-view,
+  .top-view {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .empty-state {
+    flex: 1;
+    padding: 80px 60px;
+    margin: 0;
+    background: var(--bg-primary);
+    border: none;
+    border-radius: 0;
+    justify-content: center;
+  }
+  
+  .empty-state i {
+    font-size: 80px;
+  }
+  
+  .empty-state p {
+    font-size: 18px;
+  }
+  
+  .empty-tip {
+    font-size: 16px;
+  }
+  
+  .songs-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+    background: var(--bg-primary);
+  }
+  
+  .date-group {
+    margin-bottom: 0;
+  }
+  
+  .group-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: var(--bg-secondary);
+    backdrop-filter: blur(10px);
+  }
+  
+  /* 修复歌曲名溢出问题 */
+  .history-item,
+  .top-item {
+    padding: 12px 16px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+  
+  .item-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    overflow: hidden;
+  }
+  
+  .song-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+  
+  .song-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+    max-width: 100%;
+  }
+  
+  .song-meta {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+    max-width: 100%;
+  }
+  
+  .item-actions {
+    flex-shrink: 0;
+    margin-left: auto;
+    padding-left: 12px;
+    display: flex;
+    gap: 8px;
   }
 }
 </style>

src/views/HomePage.vue

@@ -2,7 +2,7 @@
   <div class="home-page">
     <!-- 搜索区域 -->
     <div class="search-section">
-      <SearchBox @search="handleSearch" />
+      <SearchBox @search="handleSearch" ref="searchBoxRef" />
     </div>
 
     <!-- 主内容区域 -->
@@ -15,6 +15,7 @@
         @play="handlePlay"
         @loadMore="handleLoadMore"
         @showMoreActions="handleShowMoreActions"
+        @clearResults="handleClearResults"
       />
     </div>
     
@@ -53,6 +54,7 @@ const hasSearched = ref(false)
 const lastSearchKeyword = ref('')
 const showMoreActions = ref(false)
 const selectedSong = ref(null)
+const searchBoxRef = ref(null)
 
 // 计算属性
 const searchResults = computed(() => searchStore.searchResults)
@@ -91,6 +93,18 @@ const retrySearch = () => {
   }
 }
 
+const handleClearResults = () => {
+  // 清除搜索相关状态
+  hasSearched.value = false
+  lastSearchKeyword.value = ''
+  searchError.value = ''
+  
+  // 清除搜索框关键字
+  if (searchBoxRef.value && searchBoxRef.value.clearKeyword) {
+    searchBoxRef.value.clearKeyword()
+  }
+}
+
 const handlePlay = async (song, index) => {
   try {
     // SOLID原则：单一职责 - playQueueStore负责队列管理，playerStore负责播放控制
@@ -297,24 +311,75 @@ onMounted(() => {
 
 @media (min-width: 1024px) {
   .home-page {
-    flex-direction: row;
-    gap: 24px;
-    padding: 24px;
-    max-width: 1400px;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    max-width: 100%;
+    border: none;
+    box-shadow: none;
   }
 
   .search-section {
-    width: 350px;
     flex-shrink: 0;
-    border-right: 1px solid rgba(255, 255, 255, 0.1);
-    border-bottom: none;
-    padding: 24px;
-    min-height: 100px;
+    background: var(--bg-card);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border-light);
+    padding: 20px 32px;
+    min-height: 80px;
+    position: relative;
+    top: 0;
+    z-index: 10;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   }
 
   .content-section {
     flex: 1;
+    padding: 0;
+    overflow: hidden;
     border-top: none;
+    background: var(--bg-primary);
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 修复搜索结果中歌曲名溢出问题 */
+  .content-section .song-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+  }
+  
+  .content-section .item-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  
+  .content-section .song-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+  
+  .content-section .song-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .content-section .song-meta {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .content-section .item-actions {
+    flex-shrink: 0;
+    margin-left: 12px;
   }
 }
 </style>

src/views/PlayQueuePage.vue

@@ -17,7 +17,7 @@
     </div>
 
     <!-- 搜索框 -->
-    <div v-if="!isEmpty" class="search-section">
+    <div v-if="!isEmpty" class="search-section hidden-desktop">
       <div class="search-box">
         <i class="fas fa-search"></i>
         <input
@@ -447,12 +447,14 @@ onMounted(() => {
   overflow-y: auto;
 }
 
+/* 使用标准的page-header样式 */
 .page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px;
   border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-primary);
 }
 
 .page-title {
@@ -494,12 +496,20 @@ onMounted(() => {
   transform: translateY(-1px);
 }
 
-.action-btn.danger {
-  background: #ff4444;
+.action-btn.active {
+  background: var(--accent-red);
+  color: white;
 }
 
-.action-btn.danger:hover {
-  background: #ff6666;
+.content-area {
+  flex: 1;
+  min-height: 0;
+}
+
+.queue-list {
+  background: var(--bg-card);
+  margin: 0;
+  overflow: hidden;
 }
 
 .current-playing {
@@ -920,22 +930,119 @@ onMounted(() => {
   }
 }
 
-@media (min-width: 768px) {
+/* PC端适配 */
+@media (min-width: 1024px) {
   .play-queue-page {
-    max-width: 1200px;
-    margin: 0 auto;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
   }
-
-  .current-playing,
-  .queue-stats {
-    max-width: 800px;
-    margin-left: auto;
-    margin-right: auto;
+  
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    border-bottom: 1px solid var(--border-lighter);
+    background: var(--bg-primary);
   }
-
+  
+  .page-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin: 0;
+  }
+  
+  .page-title i {
+    color: var(--accent-red);
+  }
+  
+  .header-search {
+    flex: 0 0 300px;
+  }
+  
+  .header-search .search-box {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-light);
+  }
+  
+  .header-actions {
+    display: flex;
+    gap: 8px;
+  }
+  
+  .action-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border: none;
+    background: var(--accent-red);
+    color: white;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: var(--transition-fast);
+  }
+  
+  .action-btn:hover {
+    background: var(--accent-red-hover);
+    transform: translateY(-1px);
+  }
+  
+  .search-section {
+    display: none;
+  }
+  
+  .batch-actions {
+    flex-shrink: 0;
+    padding: 16px 32px;
+    margin: 0;
+    border-radius: 0;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-light);
+  }
+  
+  .content-area {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .empty-state {
+    flex: 1;
+    padding: 80px 60px;
+    margin: 0;
+    background: var(--bg-primary);
+    border: none;
+    border-radius: 0;
+    justify-content: center;
+  }
+  
+  .empty-state i {
+    font-size: 80px;
+  }
+  
+  .empty-state p {
+    font-size: 18px;
+  }
+  
+  .empty-tip {
+    font-size: 16px;
+  }
+  
   .queue-list {
-    max-width: 800px;
-    margin: 0 auto;
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+    background: var(--bg-primary);
   }
 }
 </style>

src/views/PlaylistDetailPage.vue

@@ -917,4 +917,63 @@ watch(() => route.params.id, () => {
     padding: 10px 12px;
   }
 }
+
+/* PC端适配 */
+@media (min-width: 1024px) {
+  .playlist-detail-page {
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .page-header {
+    flex-shrink: 0;
+  }
+  
+  .play-controls {
+    flex-shrink: 0;
+    margin: 0;
+    padding: 16px 32px;
+    background: var(--bg-card);
+    border-bottom: 1px solid var(--border-light);
+  }
+  
+  .songs-content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .songs-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+    background: var(--bg-primary);
+    margin: 0;
+  }
+  
+  .empty-playlist {
+    flex: 1;
+    padding: 80px 60px;
+    margin: 0;
+    background: var(--bg-primary);
+    border: none;
+    border-radius: 0;
+    justify-content: center;
+  }
+  
+  .empty-playlist i {
+    font-size: 80px;
+  }
+  
+  .empty-playlist p {
+    font-size: 18px;
+  }
+  
+  .empty-tip {
+    font-size: 16px;
+  }
+}
 </style>

src/views/PlaylistsPage.vue

@@ -648,14 +648,53 @@ onMounted(async () => {
   }
 }
 
-@media (min-width: 768px) {
+/* PC端适配 */
+@media (min-width: 1024px) {
   .playlists-page {
-    max-width: 1200px;
-    margin: 0 auto;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .page-header {
+    flex-shrink: 0;
+  }
+  
+  .playlists-content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
   }
   
   .playlists-list {
-    padding-bottom: 24px;
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+    background: var(--bg-primary);
+  }
+  
+  .empty-state {
+    flex: 1;
+    padding: 80px 60px;
+    margin: 0;
+    background: var(--bg-primary);
+    border: none;
+    border-radius: 0;
+    justify-content: center;
+  }
+  
+  .empty-state i {
+    font-size: 80px;
+  }
+  
+  .empty-state p {
+    font-size: 18px;
+  }
+  
+  .empty-tip {
+    font-size: 16px;
   }
 }
 </style>

src/views/SearchHistoryPage.vue

@@ -82,15 +82,20 @@ const goBack = () => {
   router.back()
 }
 
-const selectHistoryItem = (item) => {
-  // 跳转回首页并搜索
-  router.push('/')
-  // 延迟执行搜索，确保路由跳转完成
-  setTimeout(() => {
-    // 这里需要触发搜索
-    // 可以通过设置 store 中的关键词，然后在首页监听这个变化
-    searchStore.setKeyword(item)
-  }, 100)
+const selectHistoryItem = async (item) => {
+  try {
+    // 跳转回首页
+    router.push('/home')
+    // 延迟执行搜索，确保路由跳转完成
+    setTimeout(async () => {
+      // 直接执行搜索
+      await searchStore.searchMusic(item)
+      toastStore.success(`开始搜索："${item}"`)
+    }, 100)
+  } catch (error) {
+    console.error('搜索历史项目失败:', error)
+    toastStore.error('搜索失败，请重试')
+  }
 }
 
 const deleteHistoryItem = (index) => {

src/views/SettingsPage.vue

@@ -409,9 +409,9 @@
             <i class="fas fa-music"></i>
           </div>
           <div class="app-details">
-            <h3>云音乐 PWA</h3>
+            <h3>云音乐</h3>
             <p>版本 {{ appVersion }}</p>
-            <p>基于 Vue 3 构建的渐进式音乐应用</p>
+            <p>感谢GD音乐台(music.gdstudio.xyz)提供接口支持</p>
           </div>
         </div>
       </div>
@@ -1464,4 +1464,84 @@ input:checked + .slider:before {
     max-width: 200px; /* 限制最大宽度 */
   }
 }
+
+/* PC端进一步优化 */
+@media (min-width: 1024px) {
+  .settings-page {
+    padding: 32px;
+    max-width: 100%;
+    height: 100vh;
+    overflow-y: auto;
+  }
+  
+  .page-header {
+    padding: 0 0 32px;
+    border-bottom: 2px solid var(--border-light);
+    margin-bottom: 40px;
+  }
+  
+  .page-title {
+    font-size: 32px;
+    gap: 16px;
+  }
+  
+  .settings-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 32px;
+    max-width: 1200px;
+  }
+  
+  .settings-section {
+    padding: 32px;
+    border-radius: 16px;
+    border: 1px solid var(--border-light);
+  }
+  
+  .section-title {
+    font-size: 20px;
+    margin-bottom: 24px;
+  }
+  
+  .setting-item {
+    padding: 20px 0;
+  }
+  
+  .setting-item:not(:last-child) {
+    border-bottom: 1px solid var(--border-lighter);
+  }
+  
+  .setting-label span {
+    font-size: 16px;
+  }
+  
+  .setting-desc {
+    font-size: 14px;
+  }
+  
+  .pc-select {
+    min-width: 160px;
+    max-width: 220px;
+    height: 44px;
+    font-size: 14px;
+  }
+  
+  .toggle-switch {
+    width: 60px;
+    height: 32px;
+  }
+  
+  .toggle-switch::after {
+    width: 26px;
+    height: 26px;
+  }
+  
+  .toggle-switch.active::after {
+    transform: translateX(28px);
+  }
+  
+  .danger-zone {
+    grid-column: 1 / -1;
+  }
+}
 </style>

vite.config.js

@@ -11,9 +11,9 @@ export default defineConfig({
       registerType: 'autoUpdate',
       includeAssets: ['favicon.svg', 'icons/apple-touch-icon.svg'],
       manifest: {
-        name: '云音乐PWA',
+        name: '云音乐',
         short_name: '云音乐',
-        description: '基于Vue3的PWA音乐播放器，网易云音乐风格',
+        description: 'PWA音乐播放器',
         theme_color: '#ff6b6b',
         background_color: '#0c0c0c',
         display: 'standalone',