Spaces:

ahutchen
/

music

Running

App Files Files Community

ahutchen commited on Sep 6, 2025

Commit

8f2df2b

1 Parent(s): f897a53

docs(README): 更新功能特性说明

Browse files

- 调整了功能特性部分的格式
- 优化了核心功能的描述方式
- 保持了结尾的音乐编程口号

Files changed (38) hide show

README.md +2 -2
demo.html +0 -1495
index.html +0 -3
package-lock.json +10 -0
package.json +5 -4
src/App.vue +4 -2
src/components/common/SongCover.vue +91 -0
src/components/favorites/FavoriteButton.vue +3 -3
src/components/favorites/FavoriteItem.vue +24 -3
src/components/favorites/FavoritesList.vue +30 -13
src/components/layout/AppTabBar.vue +13 -7
src/components/player/MoreActionsPanel.vue +25 -2
src/components/player/PlayControls.vue +10 -15
src/components/player/PlaylistPanel.vue +3 -1
src/components/playlist/PlaylistSelector.vue +481 -0
src/components/search/SearchHistory.vue +18 -4
src/components/search/SearchResults.vue +29 -4
src/components/search/SongItem.vue +117 -1
src/composables/useSongCoverLoader.js +204 -0
src/main.js +1 -0
src/router/index.js +55 -1
src/stores/favorites.js +171 -88
src/stores/history.js +383 -245
src/stores/player.js +196 -240
src/stores/playlist.js +239 -0
src/stores/playqueue.js +351 -0
src/views/CurrentPlaylistPage.vue +722 -0
src/views/FavoritesPage.vue +921 -0
src/views/FullPlayerPage.vue +36 -9
src/views/HistoryPage.vue +1004 -0
src/views/HomePage.vue +23 -15
src/views/MyMusicPage.vue +153 -66
src/views/PlayQueuePage.vue +950 -0
src/views/PlaylistDetailPage.vue +815 -0
src/views/PlaylistsPage.vue +632 -0
src/views/SettingsPage.vue +227 -53
网易云音乐功能架构研究报告.md +106 -0
需求文档.md +0 -393

README.md CHANGED Viewed

@@ -12,7 +12,7 @@ app_file: dist/index.html
 一个基于 Vue3 的渐进式网络应用（PWA），模仿网易云音乐界面风格，支持13个音乐源，提供完整的音乐播放体验。
-## ✨ 功能特性
 ### 🎯 核心功能
 - **多源音乐搜索** - 支持13个主流音乐平台
@@ -191,4 +191,4 @@ vue-music/
 ---
-**🎵 享受音乐，享受编程！**

 一个基于 Vue3 的渐进式网络应用（PWA），模仿网易云音乐界面风格，支持13个音乐源，提供完整的音乐播放体验。
+## ✨ 功能特性
 ### 🎯 核心功能
 - **多源音乐搜索** - 支持13个主流音乐平台
 ---
+**🎵 享受音乐，享受编程！**

demo.html DELETED Viewed

@@ -1,1495 +0,0 @@
-<!DOCTYPE html>
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>云音乐 - 在线音乐播放器</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-            background: #0c0c0c;
-            color: #fff;
-            overflow-x: hidden;
-        }
-        /* 背景动画 */
-        .bg-animation {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
-            background-size: 400% 400%;
-            animation: gradientBG 15s ease infinite;
-            z-index: -2;
-        }
-        .bg-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.85);
-            backdrop-filter: blur(20px);
-            z-index: -1;
-        }
-        @keyframes gradientBG {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-        /* 顶部导航 */
-        .navbar {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(20px);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            padding: 15px 0;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-        }
-        .nav-container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 0 30px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            font-size: 24px;
-            font-weight: bold;
-            color: #fff;
-        }
-        .logo i {
-            color: #ff6b6b;
-            font-size: 28px;
-        }
-        .search-container {
-            flex: 1;
-            max-width: 600px;
-            margin: 0 40px;
-            position: relative;
-        }
-        .search-wrapper {
-            display: flex;
-            background: rgba(255, 255, 255, 0.15);
-            border-radius: 25px;
-            overflow: hidden;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            transition: all 0.3s ease;
-        }
-        .search-wrapper:focus-within {
-            background: rgba(255, 255, 255, 0.2);
-            border-color: #ff6b6b;
-            box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
-        }
-        .search-input {
-            flex: 1;
-            padding: 12px 20px;
-            background: transparent;
-            border: none;
-            color: #fff;
-            font-size: 16px;
-            outline: none;
-        }
-        .search-input::placeholder {
-            color: rgba(255, 255, 255, 0.6);
-        }
-        .source-select {
-            background: rgba(255, 255, 255, 0.1);
-            border: none;
-            color: #fff;
-            padding: 12px 15px;
-            outline: none;
-            cursor: pointer;
-        }
-        .source-select option {
-            background: #2a2a2a;
-            color: #fff;
-            padding: 8px;
-        }
-        .search-btn {
-            background: #ff6b6b;
-            border: none;
-            color: #fff;
-            padding: 12px 20px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .search-btn:hover {
-            background: #ff5252;
-        }
-        /* 主要内容区域 */
-        .main-container {
-            max-width: 1600px;
-            margin: 0 auto;
-            padding: 30px;
-            display: grid;
-            grid-template-columns: 600px 450px 350px;
-            gap: 25px;
-            min-height: calc(100vh - 200px);
-            align-items: start;
-        }
-        /* 搜索结果区域 */
-        .content-section {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 20px;
-            padding: 25px;
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            min-width: 0;
-            overflow: hidden;
-        }
-        .section-title {
-            font-size: 20px;
-            font-weight: 600;
-            margin-bottom: 20px;
-            color: #fff;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .search-results {
-            max-height: 600px;
-            overflow-y: auto;
-            scrollbar-width: thin;
-            scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
-        }
-        .search-results::-webkit-scrollbar {
-            width: 6px;
-        }
-        .search-results::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        .search-results::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 3px;
-        }
-        .song-item {
-            display: flex;
-            align-items: center;
-            padding: 15px 20px;
-            border-radius: 12px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            margin-bottom: 8px;
-            position: relative;
-            overflow: hidden;
-        }
-        .song-item::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-            transition: left 0.5s ease;
-        }
-        .song-item:hover {
-            background: rgba(255, 255, 255, 0.1);
-            transform: translateY(-2px);
-        }
-        .song-item:hover::before {
-            left: 100%;
-        }
-        .song-item.active {
-            background: linear-gradient(135deg, rgba(255, 107, 107, 0.3), rgba(255, 107, 107, 0.1));
-            border: 1px solid rgba(255, 107, 107, 0.5);
-        }
-        .song-index {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: 15px;
-            font-size: 14px;
-            font-weight: 600;
-            color: rgba(255, 255, 255, 0.7);
-        }
-        .song-item.active .song-index {
-            background: linear-gradient(135deg, #ff6b6b, #ff5252);
-            color: #fff;
-        }
-        .song-info {
-            flex: 1;
-            min-width: 0;
-        }
-        .song-name {
-            font-weight: 600;
-            margin-bottom: 5px;
-            font-size: 16px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .song-artist {
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 14px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .song-duration {
-            color: rgba(255, 255, 255, 0.5);
-            font-size: 14px;
-            margin-left: 15px;
-        }
-        /* 播放器区域 */
-        .player-section {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 20px;
-            padding: 25px;
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            position: sticky;
-            top: 120px;
-            height: fit-content;
-            min-height: calc(100vh - 240px);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-        }
-        .current-song {
-            text-align: center;
-            margin-bottom: 25px;
-        }
-        .current-cover-container {
-            position: relative;
-            display: inline-block;
-            margin-bottom: 20px;
-        }
-        .current-cover {
-            width: 200px;
-            height: 200px;
-            border-radius: 50%;
-            object-fit: cover;
-            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
-            transition: all 0.3s ease;
-            border: 6px solid rgba(255, 255, 255, 0.1);
-            position: relative;
-        }
-        .current-cover::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 40px;
-            height: 40px;
-            background: rgba(0, 0, 0, 0.3);
-            border-radius: 50%;
-            backdrop-filter: blur(10px);
-        }
-        .current-cover::after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 12px;
-            height: 12px;
-            background: rgba(255, 255, 255, 0.8);
-            border-radius: 50%;
-        }
-        .current-cover.playing {
-            animation: rotate 20s linear infinite;
-        }
-        @keyframes rotate {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-        }
-        .current-info h3 {
-            font-size: 20px;
-            font-weight: 600;
-            margin-bottom: 8px;
-            color: #fff;
-        }
-        .current-info p {
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 16px;
-        }
-        /* 播放控制 */
-        .player-controls {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 20px;
-            margin-bottom: 25px;
-        }
-        .control-btn {
-            background: rgba(255, 255, 255, 0.1);
-            border: none;
-            border-radius: 50%;
-            color: #fff;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .control-btn:hover {
-            background: rgba(255, 255, 255, 0.2);
-            transform: scale(1.1);
-        }
-        .control-btn.small {
-            width: 45px;
-            height: 45px;
-            font-size: 18px;
-        }
-        .play-btn {
-            width: 65px;
-            height: 65px;
-            font-size: 28px;
-            background: linear-gradient(135deg, #ff6b6b, #ff5252);
-            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
-        }
-        .play-btn:hover {
-            background: linear-gradient(135deg, #ff5252, #ff4444);
-            box-shadow: 0 12px 35px rgba(255, 107, 107, 0.6);
-        }
-        /* 进度条 */
-        .progress-container {
-            margin-bottom: 20px;
-        }
-        .progress-bar {
-            width: 100%;
-            height: 6px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 3px;
-            cursor: pointer;
-            margin-bottom: 10px;
-            position: relative;
-            overflow: hidden;
-        }
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #ff6b6b, #ff8a80);
-            border-radius: 3px;
-            width: 0%;
-            transition: width 0.1s ease;
-            position: relative;
-        }
-        .progress-fill::after {
-            content: '';
-            position: absolute;
-            right: -2px;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 12px;
-            height: 12px;
-            background: #fff;
-            border-radius: 50%;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-        }
-        .time-info {
-            display: flex;
-            justify-content: space-between;
-            font-size: 13px;
-            color: rgba(255, 255, 255, 0.7);
-        }
-        /* 音量控制 */
-        .volume-container {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin-bottom: 25px;
-        }
-        .volume-icon {
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 18px;
-        }
-        .volume-slider {
-            flex: 1;
-            height: 4px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 2px;
-            outline: none;
-            cursor: pointer;
-            -webkit-appearance: none;
-        }
-        .volume-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 14px;
-            height: 14px;
-            background: #ff6b6b;
-            border-radius: 50%;
-            cursor: pointer;
-        }
-        /* 音质选择 */
-        .quality-container {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 20px;
-            padding: 12px 15px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 10px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .quality-label {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 14px;
-        }
-        .quality-select {
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 8px;
-            color: #fff;
-            padding: 8px 12px;
-            outline: none;
-            cursor: pointer;
-            font-size: 14px;
-        }
-        .quality-select option {
-            background: #2a2a2a;
-            color: #fff;
-            padding: 8px;
-        }
-        /* 下载区域 */
-        .download-container {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-        .download-btn {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            padding: 12px 15px;
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 10px;
-            color: #fff;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 14px;
-        }
-        .download-btn:hover:not(:disabled) {
-            background: rgba(255, 255, 255, 0.2);
-            border-color: #ff6b6b;
-            color: #ff6b6b;
-        }
-        .download-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-        /* 歌曲操作按钮 */
-        .song-actions {
-            display: flex;
-            gap: 8px;
-            margin-right: 15px;
-        }
-        .action-btn {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
-            border: none;
-            color: rgba(255, 255, 255, 0.7);
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
-        }
-        .action-btn:hover {
-            background: rgba(255, 107, 107, 0.3);
-            color: #ff6b6b;
-            transform: scale(1.1);
-        }
-        /* 歌词区域 */
-        .lyrics-section {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 20px;
-            padding: 25px;
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            position: sticky;
-            top: 120px;
-            height: calc(100vh - 240px);
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-        }
-        .lyrics-container {
-            flex: 1;
-            overflow-y: auto;
-            scrollbar-width: thin;
-            scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
-            padding-right: 10px;
-        }
-        .lyrics-container::-webkit-scrollbar {
-            width: 6px;
-        }
-        .lyrics-container::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        .lyrics-container::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 3px;
-        }
-        .lyric-line {
-            padding: 8px 0;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border-radius: 6px;
-            padding-left: 10px;
-            margin-bottom: 4px;
-            color: rgba(255, 255, 255, 0.6);
-            line-height: 1.6;
-        }
-        .lyric-line:hover {
-            background: rgba(255, 255, 255, 0.05);
-            color: rgba(255, 255, 255, 0.8);
-        }
-        .lyric-line.active {
-            color: #ff6b6b;
-            font-weight: 600;
-            background: rgba(255, 107, 107, 0.1);
-            transform: scale(1.02);
-            border-left: 3px solid #ff6b6b;
-        }
-        /* 加载和错误状态 */
-        .loading, .error, .empty-state {
-            text-align: center;
-            padding: 40px 20px;
-            color: rgba(255, 255, 255, 0.7);
-        }
-        .loading i, .error i, .empty-state i {
-            font-size: 48px;
-            margin-bottom: 15px;
-            display: block;
-        }
-        .loading i {
-            animation: spin 1s linear infinite;
-            color: #ff6b6b;
-        }
-        @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-        }
-        .error i {
-            color: #ff5252;
-        }
-        .empty-state i {
-            color: rgba(255, 255, 255, 0.4);
-        }
-        /* 响应式设计 */
-        @media (max-width: 1400px) {
-            .main-container {
-                grid-template-columns: 1fr 400px;
-                gap: 20px;
-                max-width: 1200px;
-            }
-            .lyrics-section {
-                display: none;
-            }
-        }
-        @media (max-width: 1024px) {
-            .main-container {
-                grid-template-columns: 1fr;
-                gap: 20px;
-                padding: 20px;
-            }
-            .nav-container {
-                padding: 0 20px;
-            }
-            .search-container {
-                margin: 0 20px;
-            }
-            .lyrics-section {
-                display: block;
-                position: static;
-                max-height: 300px;
-            }
-            .player-section {
-                position: static;
-                min-height: auto;
-                height: auto;
-            }
-        }
-        @media (max-width: 768px) {
-            .nav-container {
-                flex-direction: column;
-                gap: 15px;
-            }
-            .search-container {
-                margin: 0;
-                max-width: none;
-            }
-            .current-cover {
-                width: 180px;
-                height: 180px;
-            }
-            .player-controls {
-                gap: 15px;
-            }
-        }
-        /* 自定义滚动条样式 */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: rgba(255, 255, 255, 0.5);
-        }
-    </style>
-</head>
-<body>
-    <div class="bg-animation"></div>
-    <div class="bg-overlay"></div>
-    <!-- 顶部导航 -->
-    <nav class="navbar">
-        <div class="nav-container">
-            <div class="logo">
-                <i class="fas fa-music"></i>
-                <span>云音乐</span>
-            </div>
-            <div class="search-container">
-                <div class="search-wrapper">
-                    <input type="text" class="search-input" placeholder="搜索音乐、歌手、专辑..." id="searchInput">
-                    <select class="source-select" id="sourceSelect">
-                        <option value="netease">网易云音乐</option>
-                        <option value="tencent">QQ音乐</option>
-                        <option value="kuwo">酷我音乐</option>
-                        <option value="joox">JOOX</option>
-                        <option value="kugou">酷狗音乐</option>
-                        <option value="migu">咪咕音乐</option>
-                        <option value="deezer">Deezer</option>
-                        <option value="spotify">Spotify</option>
-                        <option value="apple">Apple Music</option>
-                        <option value="ytmusic">YouTube Music</option>
-                        <option value="tidal">TIDAL</option>
-                        <option value="qobuz">Qobuz</option>
-                        <option value="ximalaya">喜马拉雅</option>
-                    </select>
-                    <button class="search-btn" onclick="searchMusic()">
-                        <i class="fas fa-search"></i>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </nav>
-    <!-- 主要内容 -->
-    <div class="main-container">
-        <!-- 搜索结果区域 -->
-        <div class="content-section">
-            <h2 class="section-title">
-                <i class="fas fa-list-music"></i>
-                搜索结果
-            </h2>
-            <div class="search-results" id="searchResults">
-                <div class="empty-state">
-                    <i class="fas fa-search"></i>
-                    <div>在上方搜索框输入关键词开始搜索音乐</div>
-                </div>
-            </div>
-        </div>
-        <!-- 播放器区域 -->
-        <div class="player-section">
-            <div class="current-song">
-                <div class="current-cover-container">
-                    <img class="current-cover" id="currentCover" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSIyMCIvPgo8cGF0aCBkPSJNMTEwIDcwTDE0MCAx MTBIMTIwVjE1MEg5MFYxMTBINzBMMTEwIDcwWiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjMpIi8+Cjwvc3ZnPgo=" alt="专辑封面">
-                </div>
-                <div class="current-info">
-                    <h3 id="currentTitle">未选择歌曲</h3>
-                    <p id="currentArtist">请搜索并选择要播放的歌曲</p>
-                </div>
-            </div>
-            <div class="player-controls">
-                <button class="control-btn small" onclick="previousSong()">
-                    <i class="fas fa-step-backward"></i>
-                </button>
-                <button class="control-btn play-btn" id="playBtn" onclick="togglePlay()">
-                    <i class="fas fa-play"></i>
-                </button>
-                <button class="control-btn small" onclick="nextSong()">
-                    <i class="fas fa-step-forward"></i>
-                </button>
-            </div>
-            <div class="progress-container">
-                <div class="progress-bar" onclick="seekTo(event)">
-                    <div class="progress-fill" id="progressFill"></div>
-                </div>
-                <div class="time-info">
-                    <span id="currentTime">0:00</span>
-                    <span id="totalTime">0:00</span>
-                </div>
-            </div>
-            <!-- 音质选择 -->
-            <div class="quality-container">
-                <div class="quality-label">
-                    <i class="fas fa-music"></i>
-                    <span>音质</span>
-                </div>
-                <select class="quality-select" id="qualitySelect">
-                    <option value="128">标准 128K</option>
-                    <option value="192">较高 192K</option>
-                    <option value="320" selected>高品质 320K</option>
-                    <option value="740">无损 FLAC</option>
-                    <option value="999">Hi-Res</option>
-                </select>
-            </div>
-            <div class="volume-container">
-                <i class="fas fa-volume-up volume-icon"></i>
-                <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="80" onchange="setVolume(this.value)">
-            </div>
-            <!-- 下载区域 -->
-            <div class="download-container">
-                <button class="download-btn" onclick="downloadCurrentSong()" id="downloadSongBtn" disabled>
-                    <i class="fas fa-download"></i>
-                    <span>下载音乐</span>
-                </button>
-                <button class="download-btn" onclick="downloadCurrentLyric()" id="downloadLyricBtn" disabled>
-                    <i class="fas fa-file-text"></i>
-                    <span>下载歌词</span>
-                </button>
-            </div>
-            <audio id="audioPlayer" preload="metadata"></audio>
-        </div>
-        <!-- 歌词区域 -->
-        <div class="lyrics-section">
-            <h2 class="section-title">
-                <i class="fas fa-align-left"></i>
-                歌词
-            </h2>
-            <div class="lyrics-container" id="lyricsContainer">
-                <div class="lyric-line">暂无歌词</div>
-            </div>
-        </div>
-    </div>
-    <script>
-        const API_BASE = 'https://music-api.gdstudio.xyz/api.php';
-        let currentPlaylist = [];
-        let currentIndex = -1;
-        let currentLyrics = [];
-        let isPlaying = false;
-        const audioPlayer = document.getElementById('audioPlayer');
-        const playBtn = document.getElementById('playBtn');
-        const progressFill = document.getElementById('progressFill');
-        const currentTimeSpan = document.getElementById('currentTime');
-        const totalTimeSpan = document.getElementById('totalTime');
-        const lyricsContainer = document.getElementById('lyricsContainer');
-        const currentCover = document.getElementById('currentCover');
-        // 搜索音乐
-        async function searchMusic() {
-            const keyword = document.getElementById('searchInput').value.trim();
-            const source = document.getElementById('sourceSelect').value;
-            if (!keyword) {
-                showNotification('请输入搜索关键词', 'warning');
-                return;
-            }
-            const resultsContainer = document.getElementById('searchResults');
-            resultsContainer.innerHTML = `
-                <div class="loading">
-                    <i class="fas fa-spinner"></i>
-                    <div>正在搜索音乐...</div>
-                </div>
-            `;
-            try {
-                const response = await fetch(`${API_BASE}?types=search&source=${source}&name=${encodeURIComponent(keyword)}&count=30`);
-                const data = await response.json();
-                if (data && data.length > 0) {
-                    currentPlaylist = data;
-                    displaySearchResults(data);
-                } else {
-                    resultsContainer.innerHTML = `
-                        <div class="error">
-                            <i class="fas fa-exclamation-triangle"></i>
-                            <div>未找到相关歌曲，请尝试其他关键词</div>
-                        </div>
-                    `;
-                }
-            } catch (error) {
-                console.error('搜索失败:', error);
-                resultsContainer.innerHTML = `
-                    <div class="error">
-                        <i class="fas fa-wifi"></i>
-                        <div>网络连接失败，请检查网络后重试</div>
-                    </div>
-                `;
-            }
-        }
-        // 获取专辑图片URL
-        async function getAlbumCoverUrl(song, size = 300) {
-            if (!song.pic_id) {
-                return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA1NSA1NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjU1IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSI4Ii8+CjxwYXRoIGQ9Ik0yNy41IDE4TDM1IDI3LjVIMzBWMzdIMjVWMjcuNUgyMEwyNy41IDE4WiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjMpIi8+Cjwvc3ZnPgo=';
-            }
-            try {
-                const response = await fetch(`${API_BASE}?types=pic&source=${song.source}&id=${song.pic_id}&size=${size}`);
-                const data = await response.json();
-                if (data && data.url) {
-                    return data.url;
-                }
-            } catch (error) {
-                console.error('获取专辑图失败:', error);
-            }
-            return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA1NSA1NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjU1IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSI4Ii8+CjxwYXRoIGQ9Ik0yNy41IDE4TDM1IDI3LjVIMzBWMzdIMjVWMjcuNUgyMEwyNy41IDE4WiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjMpIi8+Cjwvc3ZnPgo=';
-        }
-        // 显示搜索结果
-        async function displaySearchResults(songs) {
-            const resultsContainer = document.getElementById('searchResults');
-            resultsContainer.innerHTML = '';
-            for (let index = 0; index < songs.length; index++) {
-                const song = songs[index];
-                const songItem = document.createElement('div');
-                songItem.className = 'song-item';
-                songItem.onclick = () => playSong(index);
-                songItem.innerHTML = `
-                    <div class="song-index">${(index + 1).toString().padStart(2, '0')}</div>
-                    <div class="song-info">
-                        <div class="song-name">${song.name}</div>
-                        <div class="song-artist">${Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist} · ${song.album}</div>
-                    </div>
-                    <div class="song-actions">
-                        <button class="action-btn" onclick="downloadSong(${index})" title="下载音乐">
-                            <i class="fas fa-download"></i>
-                        </button>
-                        <button class="action-btn" onclick="downloadLyric(${index})" title="下载歌词">
-                            <i class="fas fa-file-text"></i>
-                        </button>
-                    </div>
-                    <div class="song-duration">--:--</div>
-                `;
-                resultsContainer.appendChild(songItem);
-            }
-        }
-        // 播放歌曲
-        async function playSong(index) {
-            if (index < 0 || index >= currentPlaylist.length) return;
-            currentIndex = index;
-            const song = currentPlaylist[index];
-            // 更新UI
-            await updateCurrentSongInfo(song);
-            updateActiveItem();
-            try {
-                showNotification('正在加载音乐...', 'info');
-                // 获取当前选择的音质
-                const quality = document.getElementById('qualitySelect').value;
-                // 获取音乐URL
-                const urlResponse = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`);
-                const urlData = await urlResponse.json();
-                if (urlData && urlData.url) {
-                    audioPlayer.src = urlData.url;
-                    audioPlayer.load();
-                    // 获取歌词
-                    loadLyrics(song);
-                    // 启用下载按钮
-                    document.getElementById('downloadSongBtn').disabled = false;
-                    document.getElementById('downloadLyricBtn').disabled = false;
-                    // 自动播放
-                    const playPromise = audioPlayer.play();
-                    if (playPromise !== undefined) {
-                        playPromise.then(() => {
-                            isPlaying = true;
-                            updatePlayButton();
-                            currentCover.classList.add('playing');
-                            showNotification(`开始播放 (${getQualityText(urlData.br || quality)})`, 'success');
-                        }).catch(error => {
-                            console.error('播放失败:', error);
-                            showNotification('播放失败，请尝试其他歌曲', 'error');
-                        });
-                    }
-                } else {
-                    showNotification('无法获取音乐链接，请尝试其他歌曲或更换音质', 'error');
-                }
-            } catch (error) {
-                console.error('播放失败:', error);
-                showNotification('播放失败，请检查网络连接', 'error');
-            }
-        }
-        // 获取音质文本
-        function getQualityText(br) {
-            const qualityMap = {
-                '128': '标准音质',
-                '192': '较高音质',
-                '320': '高品质',
-                '740': '无损音质',
-                '999': 'Hi-Res音质'
-            };
-            return qualityMap[br] || `${br}K`;
-        }
-        // 下载当前播放的歌曲
-        async function downloadCurrentSong() {
-            if (currentIndex === -1) {
-                showNotification('请先选择要下载的歌曲', 'warning');
-                return;
-            }
-            const song = currentPlaylist[currentIndex];
-            await downloadSong(currentIndex);
-        }
-        // 下载当前播放的歌词
-        async function downloadCurrentLyric() {
-            if (currentIndex === -1) {
-                showNotification('请先选择要下载歌词的��曲', 'warning');
-                return;
-            }
-            await downloadLyric(currentIndex);
-        }
-        // 下载歌曲
-        async function downloadSong(index) {
-            const song = currentPlaylist[index];
-            const quality = document.getElementById('qualitySelect').value;
-            try {
-                showNotification('正在获取下载链接...', 'info');
-                const response = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`);
-                const data = await response.json();
-                if (data && data.url) {
-                    // 创建下载链接
-                    const link = document.createElement('a');
-                    link.href = data.url;
-                    link.download = `${song.name} - ${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}.mp3`;
-                    link.target = '_blank';
-                    // 触发下载
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
-                    showNotification('开始下载音乐文件', 'success');
-                } else {
-                    showNotification('无法获取下载链接', 'error');
-                }
-            } catch (error) {
-                console.error('下载失败:', error);
-                showNotification('下载失败，请稍后重试', 'error');
-            }
-        }
-        // 下载歌词
-        async function downloadLyric(index) {
-            const song = currentPlaylist[index];
-            try {
-                showNotification('正在获取歌词...', 'info');
-                const response = await fetch(`${API_BASE}?types=lyric&source=${song.source}&id=${song.lyric_id || song.id}`);
-                const data = await response.json();
-                if (data && data.lyric) {
-                    // 创建歌词文件内容
-                    let lyricContent = `歌曲：${song.name}
-`;
-                    lyricContent += `歌手：${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}
-`;
-                    lyricContent += `专辑：${song.album}
-`;
-                    lyricContent += `来源：${song.source}
-`;
-                    lyricContent += data.lyric;
-                    if (data.tlyric) {
-                        lyricContent += '=== 翻译歌词 ===';
-                        lyricContent += data.tlyric;
-                    }
-                    // 创建Blob并下载
-                    const blob = new Blob([lyricContent], { type: 'text/plain;charset=utf-8' });
-                    const url = URL.createObjectURL(blob);
-                    const link = document.createElement('a');
-                    link.href = url;
-                    link.download = `${song.name} - ${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}.lrc`;
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
-                    URL.revokeObjectURL(url);
-                    showNotification('歌词下载完成', 'success');
-                } else {
-                    showNotification('该歌曲暂无歌词', 'warning');
-                }
-            } catch (error) {
-                console.error('下载歌词失败:', error);
-                showNotification('下载歌词失败，请稍后重试', 'error');
-            }
-        }
-        // 音质改变时重新加载当前歌曲
-        document.getElementById('qualitySelect').addEventListener('change', () => {
-            if (currentIndex !== -1 && audioPlayer.src) {
-                const currentTime = audioPlayer.currentTime;
-                const wasPlaying = isPlaying;
-                playSong(currentIndex).then(() => {
-                    // 恢复播放位置
-                    audioPlayer.currentTime = currentTime;
-                    if (!wasPlaying) {
-                        audioPlayer.pause();
-                    }
-                });
-            }
-        });
-        // 更新当前歌曲信息
-        async function updateCurrentSongInfo(song) {
-            document.getElementById('currentTitle').textContent = song.name;
-            document.getElementById('currentArtist').textContent =
-                `${Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist} · ${song.album}`;
-            // 获取专辑图片URL
-            const coverUrl = await getAlbumCoverUrl(song, 500);
-            currentCover.src = coverUrl;
-        }
-        // 更新活跃项目
-        function updateActiveItem() {
-            document.querySelectorAll('.song-item').forEach((item, index) => {
-                item.classList.toggle('active', index === currentIndex);
-            });
-        }
-        // 更新播放按钮
-        function updatePlayButton() {
-            const icon = playBtn.querySelector('i');
-            if (isPlaying) {
-                icon.className = 'fas fa-pause';
-            } else {
-                icon.className = 'fas fa-play';
-            }
-        }
-        // 加载歌词
-        async function loadLyrics(song) {
-            try {
-                const response = await fetch(`${API_BASE}?types=lyric&source=${song.source}&id=${song.lyric_id || song.id}`);
-                const data = await response.json();
-                if (data && data.lyric) {
-                    parseLyrics(data.lyric);
-                } else {
-                    lyricsContainer.innerHTML = '<div class="lyric-line">暂无歌词</div>';
-                    currentLyrics = [];
-                }
-            } catch (error) {
-                console.error('获取歌词失败:', error);
-                lyricsContainer.innerHTML = '<div class="lyric-line">歌词加载失败</div>';
-                currentLyrics = [];
-            }
-        }
-        // 解析LRC歌词
-        function parseLyrics(lrcText) {
-            const lines = lrcText.split('\n');
-            currentLyrics = [];
-            lines.forEach(line => {
-                const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/);
-                if (match) {
-                    const minutes = parseInt(match[1]);
-                    const seconds = parseInt(match[2]);
-                    const milliseconds = parseInt(match[3].padEnd(3, '0'));
-                    const text = match[4].trim();
-                    if (text) {
-                        const time = minutes * 60 + seconds + milliseconds / 1000;
-                        currentLyrics.push({ time, text });
-                    }
-                }
-            });
-            currentLyrics.sort((a, b) => a.time - b.time);
-            displayLyrics();
-        }
-        // 显示歌词
-        function displayLyrics() {
-            lyricsContainer.innerHTML = '';
-            if (currentLyrics.length === 0) {
-                lyricsContainer.innerHTML = '<div class="lyric-line">暂无歌词</div>';
-                return;
-            }
-            currentLyrics.forEach((lyric, index) => {
-                const lyricLine = document.createElement('div');
-                lyricLine.className = 'lyric-line';
-                lyricLine.textContent = lyric.text;
-                lyricLine.onclick = () => {
-                    audioPlayer.currentTime = lyric.time;
-                };
-                lyricsContainer.appendChild(lyricLine);
-            });
-        }
-        // 更新歌词高亮
-        function updateLyricHighlight() {
-            const currentTime = audioPlayer.currentTime;
-            let activeIndex = -1;
-            for (let i = 0; i < currentLyrics.length; i++) {
-                if (currentLyrics[i].time <= currentTime) {
-                    activeIndex = i;
-                } else {
-                    break;
-                }
-            }
-            const lyricLines = document.querySelectorAll('.lyric-line');
-            lyricLines.forEach((line, index) => {
-                line.classList.toggle('active', index === activeIndex);
-            });
-            // 改进的自动滚动逻辑
-            if (activeIndex >= 0 && activeIndex < lyricLines.length) {
-                const activeLine = lyricLines[activeIndex];
-                const container = document.getElementById('lyricsContainer');
-                if (activeLine && container) {
-                    const containerHeight = container.clientHeight;
-                    const lineHeight = activeLine.offsetHeight;
-                    const lineOffsetTop = activeLine.offsetTop;
-                    const currentScrollTop = container.scrollTop;
-                    // 计算理想的滚动位置（将当前歌词放在容器中间）
-                    const idealScrollTop = lineOffsetTop - (containerHeight / 2) + (lineHeight / 2);
-                    // 只有当需要滚动超过一定距离时才滚动
-                    const scrollThreshold = containerHeight * 0.3;
-                    if (Math.abs(idealScrollTop - currentScrollTop) > scrollThreshold) {
-                        container.scrollTo({
-                            top: Math.max(0, idealScrollTop),
-                            behavior: 'smooth'
-                        });
-                    }
-                }
-            }
-        }
-        // 播放控制
-        function togglePlay() {
-            if (audioPlayer.src) {
-                if (isPlaying) {
-                    audioPlayer.pause();
-                } else {
-                    audioPlayer.play();
-                }
-            } else {
-                showNotification('请先选择要播放的歌曲', 'warning');
-            }
-        }
-        function previousSong() {
-            if (currentIndex > 0) {
-                playSong(currentIndex - 1);
-            } else {
-                showNotification('已经是第一首歌曲', 'info');
-            }
-        }
-        function nextSong() {
-            if (currentIndex < currentPlaylist.length - 1) {
-                playSong(currentIndex + 1);
-            } else {
-                showNotification('已经是最后一首歌曲', 'info');
-            }
-        }
-        // 进度控制
-        function seekTo(event) {
-            if (audioPlayer.duration) {
-                const rect = event.target.getBoundingClientRect();
-                const percent = (event.clientX - rect.left) / rect.width;
-                audioPlayer.currentTime = percent * audioPlayer.duration;
-            }
-        }
-        function setVolume(value) {
-            audioPlayer.volume = value / 100;
-            // 更新音量图标
-            const volumeIcon = document.querySelector('.volume-icon');
-            if (value == 0) {
-                volumeIcon.className = 'fas fa-volume-mute volume-icon';
-            } else if (value < 50) {
-                volumeIcon.className = 'fas fa-volume-down volume-icon';
-            } else {
-                volumeIcon.className = 'fas fa-volume-up volume-icon';
-            }
-        }
-        // 格式化时间
-        function formatTime(seconds) {
-            const mins = Math.floor(seconds / 60);
-            const secs = Math.floor(seconds % 60);
-            return `${mins}:${secs.toString().padStart(2, '0')}`;
-        }
-        // 通知系统
-        function showNotification(message, type = 'info') {
-            // 创建通知元素
-            const notification = document.createElement('div');
-            notification.style.cssText = `
-                position: fixed;
-                top: 100px;
-                right: 30px;
-                background: ${type === 'success' ? 'rgba(76, 175, 80, 0.9)' :
-                           type === 'error' ? 'rgba(244, 67, 54, 0.9)' :
-                           type === 'warning' ? 'rgba(255, 152, 0, 0.9)' :
-                           'rgba(33, 150, 243, 0.9)'};
-                color: white;
-                padding: 15px 20px;
-                border-radius: 10px;
-                backdrop-filter: blur(10px);
-                box-shadow: 0 8px 25px rgba(0,0,0,0.3);
-                z-index: 1000;
-                transform: translateX(400px);
-                transition: transform 0.3s ease;
-                max-width: 300px;
-                font-size: 14px;
-            `;
-            notification.textContent = message;
-            document.body.appendChild(notification);
-            // 显示动画
-            setTimeout(() => {
-                notification.style.transform = 'translateX(0)';
-            }, 100);
-            // 自动隐藏
-            setTimeout(() => {
-                notification.style.transform = 'translateX(400px)';
-                setTimeout(() => {
-                    document.body.removeChild(notification);
-                }, 300);
-            }, 3000);
-        }
-        // 音频事件监听
-        audioPlayer.addEventListener('timeupdate', () => {
-            if (audioPlayer.duration) {
-                const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
-                progressFill.style.width = percent + '%';
-                currentTimeSpan.textContent = formatTime(audioPlayer.currentTime);
-                updateLyricHighlight();
-            }
-        });
-        audioPlayer.addEventListener('loadedmetadata', () => {
-            totalTimeSpan.textContent = formatTime(audioPlayer.duration);
-        });
-        audioPlayer.addEventListener('ended', () => {
-            nextSong();
-        });
-        audioPlayer.addEventListener('play', () => {
-            isPlaying = true;
-            updatePlayButton();
-            currentCover.classList.add('playing');
-        });
-        audioPlayer.addEventListener('pause', () => {
-            isPlaying = false;
-            updatePlayButton();
-            currentCover.classList.remove('playing');
-        });
-        // 键盘快捷键
-        document.addEventListener('keydown', (e) => {
-            if (e.code === 'Space' && e.target.tagName !== 'INPUT') {
-                e.preventDefault();
-                togglePlay();
-            } else if (e.code === 'ArrowLeft' && e.target.tagName !== 'INPUT') {
-                e.preventDefault();
-                previousSong();
-            } else if (e.code === 'ArrowRight' && e.target.tagName !== 'INPUT') {
-                e.preventDefault();
-                nextSong();
-            }
-        });
-        // 搜索框回车事件
-        document.getElementById('searchInput').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                searchMusic();
-            }
-        });
-        // 初始化
-        setVolume(80);
-        // 页面加载完成后的欢迎信息
-        window.addEventListener('load', () => {
-            setTimeout(() => {
-                showNotification('欢迎使用云音乐播放器！', 'success');
-            }, 1000);
-        });
-    </script>
-</body>
-</html>

index.html CHANGED Viewed

@@ -19,9 +19,6 @@
   <!-- 主题色 -->
   <meta name="theme-color" content="#ff6b6b">
   <meta name="msapplication-TileColor" content="#ff6b6b">
-  <!-- Font Awesome图标库 -->
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 </head>
 <body>
   <div id="app"></div>

   <!-- 主题色 -->
   <meta name="theme-color" content="#ff6b6b">
   <meta name="msapplication-TileColor" content="#ff6b6b">
 </head>
 <body>
   <div id="app"></div>

package-lock.json CHANGED Viewed

@@ -8,6 +8,7 @@
       "name": "vue-music-pwa",
       "version": "1.0.0",
       "dependencies": {
         "@vueuse/core": "^10.5.0",
         "pinia": "^2.1.0",
         "vue": "^3.4.0",
@@ -1963,6 +1964,15 @@
         "node": ">=12"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",

       "name": "vue-music-pwa",
       "version": "1.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^7.0.1",
         "@vueuse/core": "^10.5.0",
         "pinia": "^2.1.0",
         "vue": "^3.4.0",
         "node": ">=12"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-7.0.1.tgz",
+      "integrity": "sha512-RLmb9U6H2rJDnGxEqXxzy7ANPrQz7WK2/eTjdZqyU9uRU5W+FkAec9uU5gTYzFBH7aoXIw2WTJSCJR4KPlReQw==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",

package.json CHANGED Viewed

@@ -8,10 +8,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.4.0",
-    "vue-router": "^4.2.0",
     "pinia": "^2.1.0",
-    "@vueuse/core": "^10.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",
@@ -19,4 +20,4 @@
     "vite-plugin-pwa": "^0.17.0",
     "workbox-window": "^7.0.0"
   }
-}

     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^7.0.1",
+    "@vueuse/core": "^10.5.0",
     "pinia": "^2.1.0",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",
     "vite-plugin-pwa": "^0.17.0",
     "workbox-window": "^7.0.0"
   }
+}

src/App.vue CHANGED Viewed

@@ -61,6 +61,7 @@ import { useRoute } from 'vue-router'
 import { usePlayerStore } from '@/stores/player'
 import { useSearchStore } from '@/stores/search'
 import { useFavoritesStore } from '@/stores/favorites'
 import { useSettingsStore } from '@/stores/settings'
 import { musicApi, utils } from '@/services/musicApi'
 import AppTabBar from '@/components/layout/AppTabBar.vue'
@@ -75,6 +76,7 @@ const route = useRoute()
 const playerStore = usePlayerStore()
 const searchStore = useSearchStore()
 const favoritesStore = useFavoritesStore()
 const settingsStore = useSettingsStore()
 // 响应式数据
@@ -202,7 +204,7 @@ const loadAndPlaySong = async (song) => {
       }
       // 添加到播放历史
-      favoritesStore.addToHistory(song)
       console.log('歌曲加载成功:', song.name, result)
@@ -342,7 +344,7 @@ onMounted(() => {
   searchStore.loadSearchSettings()
   searchStore.loadSearchHistory()
   favoritesStore.loadFavorites()
-  favoritesStore.loadPlayHistory()
   settingsStore.loadSettings()
   // 建立音频元素连接

 import { usePlayerStore } from '@/stores/player'
 import { useSearchStore } from '@/stores/search'
 import { useFavoritesStore } from '@/stores/favorites'
+import { useHistoryStore } from '@/stores/history'
 import { useSettingsStore } from '@/stores/settings'
 import { musicApi, utils } from '@/services/musicApi'
 import AppTabBar from '@/components/layout/AppTabBar.vue'
 const playerStore = usePlayerStore()
 const searchStore = useSearchStore()
 const favoritesStore = useFavoritesStore()
+const historyStore = useHistoryStore()
 const settingsStore = useSettingsStore()
 // 响应式数据
       }
       // 添加到播放历史
+      historyStore.addToHistory(song)
       console.log('歌曲加载成功:', song.name, result)
   searchStore.loadSearchSettings()
   searchStore.loadSearchHistory()
   favoritesStore.loadFavorites()
+  historyStore.loadHistory()
   settingsStore.loadSettings()
   // 建立音频元素连接

src/components/common/SongCover.vue ADDED Viewed

	@@ -0,0 +1,91 @@

+<template>
+  <div class="song-cover">
+    <img
+      :src="coverUrl"
+      :alt="song.name"
+      class="cover-image"
+      @error="handleImageError"
+    />
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { usePlayerStore } from '@/stores/player'
+const props = defineProps({
+  song: {
+    type: Object,
+    required: true
+  },
+  size: {
+    type: Number,
+    default: 300
+  }
+})
+const playerStore = usePlayerStore()
+const coverUrl = ref('')
+// 默认封面
+const getDefaultCover = () => {
+  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSI4Ii8+CjxwYXRoIGQ9Ik0zMiAyMEw0MCAzMkgzNlY0NEgyOFYzMkgyNEwzMiAyMFoiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4zKSIvPgo8L3N2Zz4K'
+}
+// 加载专辑封面
+const loadCover = async () => {
+  if (!props.song) {
+    coverUrl.value = getDefaultCover()
+    return
+  }
+  try {
+    const coverUrlResult = await playerStore.getAlbumCover(props.song, props.size)
+    if (coverUrlResult) {
+      coverUrl.value = coverUrlResult
+    } else {
+      coverUrl.value = getDefaultCover()
+    }
+  } catch (error) {
+    console.error('加载封面失败:', error)
+    coverUrl.value = getDefaultCover()
+  }
+}
+// 图片加载错误处理
+const handleImageError = () => {
+  coverUrl.value = getDefaultCover()
+}
+// 监听歌曲变化
+watch(() => props.song, (newSong) => {
+  if (newSong) {
+    loadCover()
+  } else {
+    coverUrl.value = getDefaultCover()
+  }
+}, { immediate: true })
+onMounted(() => {
+  if (props.song) {
+    loadCover()
+  }
+})
+</script>
+<style scoped>
+.song-cover {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--bg-secondary);
+}
+.cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: var(--transition-normal);
+}
+</style>

src/components/favorites/FavoriteButton.vue CHANGED Viewed

@@ -59,7 +59,7 @@ const loading = ref(false)
 // 是否已收藏
 const isFavorited = computed(() => {
-  return favoritesStore.isFavorite(props.song.id)
 })
 // 图标类名
@@ -78,10 +78,10 @@ const handleToggle = async () => {
   try {
     if (isFavorited.value) {
-      await favoritesStore.removeFavorite(props.song.id)
       emit('unfavorited', props.song)
     } else {
-      await favoritesStore.addFavorite(props.song)
       emit('favorited', props.song)
     }

 // 是否已收藏
 const isFavorited = computed(() => {
+  return favoritesStore.isFavorite(props.song)
 })
 // 图标类名
   try {
     if (isFavorited.value) {
+      await favoritesStore.removeFromFavorites(props.song)
       emit('unfavorited', props.song)
     } else {
+      await favoritesStore.addToFavorites(props.song)
       emit('favorited', props.song)
     }

src/components/favorites/FavoriteItem.vue CHANGED Viewed

@@ -60,10 +60,18 @@
     <!-- 更多操作菜单 -->
     <div class="more-menu" v-if="showMenu" @click.stop>
       <button @click="handlePlayNext">下一首播放</button>
-      <button @click="handleAddToPlaylist">添加到播放列表</button>
       <button @click="handleCopyLink">复制链接</button>
       <button @click="handleViewDetails">查看详情</button>
     </div>
   </div>
 </template>
@@ -72,6 +80,7 @@ import { ref, computed } from 'vue'
 import { usePlayerStore } from '@/stores/player'
 import { useHistoryStore } from '@/stores/history'
 import FavoriteButton from './FavoriteButton.vue'
 const props = defineProps({
   // 歌曲信息
@@ -111,6 +120,7 @@ const emit = defineEmits(['play', 'unfavorited', 'more-action'])
 const playerStore = usePlayerStore()
 const historyStore = useHistoryStore()
 const showMenu = ref(false)
 // 专辑封面URL
 const albumCoverUrl = computed(() => {
@@ -224,9 +234,20 @@ const handlePlayNext = () => {
 // 添加到播放列表
 const handleAddToPlaylist = () => {
-  playerStore.addToPlaylist(props.song)
   showMenu.value = false
-  emit('more-action', { action: 'add-to-playlist', song: props.song })
 }
 // 复制链接

     <!-- 更多操作菜单 -->
     <div class="more-menu" v-if="showMenu" @click.stop>
       <button @click="handlePlayNext">下一首播放</button>
+      <button @click="handleAddToPlaylist">添加到歌单</button>
       <button @click="handleCopyLink">复制链接</button>
       <button @click="handleViewDetails">查看详情</button>
     </div>
+    <!-- 播放列表选择对话框 -->
+    <PlaylistSelector
+      :show="showPlaylistSelector"
+      :song="song"
+      @close="closePlaylistSelector"
+      @added="handleAddedToPlaylist"
+    />
   </div>
 </template>
 import { usePlayerStore } from '@/stores/player'
 import { useHistoryStore } from '@/stores/history'
 import FavoriteButton from './FavoriteButton.vue'
+import PlaylistSelector from '@/components/playlist/PlaylistSelector.vue'
 const props = defineProps({
   // 歌曲信息
 const playerStore = usePlayerStore()
 const historyStore = useHistoryStore()
 const showMenu = ref(false)
+const showPlaylistSelector = ref(false)
 // 专辑封面URL
 const albumCoverUrl = computed(() => {
 // 添加到播放列表
 const handleAddToPlaylist = () => {
   showMenu.value = false
+  showPlaylistSelector.value = true
+}
+// 关闭播放列表选择器
+const closePlaylistSelector = () => {
+  showPlaylistSelector.value = false
+}
+// 处理添加到播放列表成功
+const handleAddedToPlaylist = (data) => {
+  console.log('歌曲已添加到播放列表:', data.message)
+  // 可以显示提示信息
+  emit('more-action', { action: 'added-to-playlist', song: props.song, data })
 }
 // 复制链接

src/components/favorites/FavoritesList.vue CHANGED Viewed

@@ -88,7 +88,7 @@
       </div>
       <div class="batch-buttons">
         <button @click="batchPlay">播放选中</button>
-        <button @click="batchAddToPlaylist">添加到播放列表</button>
         <button @click="batchRemove" class="danger">删除选中</button>
       </div>
     </div>
@@ -150,8 +150,9 @@
         <div class="song-items">
           <div
             v-for="(item, index) in paginatedList"
-            :key="item.song.id"
             class="song-item-wrapper"
           >
             <!-- 批量选择复选框 -->
             <label v-if="batchMode" class="item-checkbox">
@@ -186,6 +187,16 @@
         </div>
       </div>
     </div>
   </div>
 </template>
@@ -197,6 +208,7 @@ import { useHistoryStore } from '@/stores/history'
 import FavoriteItem from './FavoriteItem.vue'
 import Loading from '@/components/common/Loading.vue'
 import Empty from '@/components/common/Empty.vue'
 const props = defineProps({
   // 是否显示搜索
@@ -234,6 +246,7 @@ const sortOrder = ref('desc')
 const batchMode = ref(false)
 const selectedItems = ref([])
 const displayCount = ref(props.initialCount)
 // 计算属性
 const favoritesList = computed(() => {
@@ -419,21 +432,25 @@ const batchAddToPlaylist = () => {
     .filter(item => selectedItems.value.includes(item.song.id))
     .map(item => item.song)
-  songs.forEach(song => {
-    playerStore.addToPlaylist(song)
-  })
-  emit('batch-action', { action: 'add-to-playlist', songs })
 }
-const batchRemove = async () => {
-  if (confirm(`确定要删除选中的 ${selectedItems.value.length} 首歌曲吗？`)) {
-    for (const songId of selectedItems.value) {
-      await favoritesStore.removeFavorite(songId)
     }
-    selectedItems.value = []
-    emit('batch-action', { action: 'remove', count: selectedItems.value.length })
   }
 }
 const handlePlay = (song) => {

       </div>
       <div class="batch-buttons">
         <button @click="batchPlay">播放选中</button>
+        <button @click="batchAddToPlaylist">添加到歌单</button>
         <button @click="batchRemove" class="danger">删除选中</button>
       </div>
     </div>
         <div class="song-items">
           <div
             v-for="(item, index) in paginatedList"
+            :key="item?.song?.id || `item-${index}`"
             class="song-item-wrapper"
+            v-if="item && item.song"
           >
             <!-- 批量选择复选框 -->
             <label v-if="batchMode" class="item-checkbox">
         </div>
       </div>
     </div>
+    <!-- 确认对话框 -->
+    <ConfirmDialog
+      ref="confirmDialogRef"
+      title="批量删除收藏"
+      :message="`确定要删除选中的 ${selectedItems.length} 首歌曲吗？`"
+      confirm-text="删除"
+      type="danger"
+      @confirm="confirmBatchRemove"
+    />
   </div>
 </template>
 import FavoriteItem from './FavoriteItem.vue'
 import Loading from '@/components/common/Loading.vue'
 import Empty from '@/components/common/Empty.vue'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 const props = defineProps({
   // 是否显示搜索
 const batchMode = ref(false)
 const selectedItems = ref([])
 const displayCount = ref(props.initialCount)
+const confirmDialogRef = ref(null)
 // 计算属性
 const favoritesList = computed(() => {
     .filter(item => selectedItems.value.includes(item.song.id))
     .map(item => item.song)
+  if (songs.length > 0) {
+    emit('batch-action', { action: 'add-to-playlist', songs })
+  }
 }
+const batchRemove = () => {
+  confirmDialogRef.value?.show()
+}
+const confirmBatchRemove = async () => {
+  const removedCount = selectedItems.value.length
+  for (const songId of selectedItems.value) {
+    const song = filteredList.value.find(item => item.song.id === songId)?.song
+    if (song) {
+      await favoritesStore.removeFromFavorites(song)
     }
   }
+  selectedItems.value = []
+  emit('batch-action', { action: 'remove', count: removedCount })
 }
 const handlePlay = (song) => {

src/components/layout/AppTabBar.vue CHANGED Viewed

@@ -33,16 +33,22 @@ const tabs = [
     icon: 'fas fa-home'
   },
   {
-    name: 'MyMusic',
-    path: '/my-music',
-    label: '我的音乐',
     icon: 'fas fa-heart'
   },
   {
-    name: 'Settings',
-    path: '/settings',
-    label: '设置',
-    icon: 'fas fa-cog'
   }
 ]

     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'
   }
 ]

src/components/player/MoreActionsPanel.vue CHANGED Viewed

@@ -43,12 +43,21 @@
         取消
       </button>
     </div>
   </div>
 </template>
 <script setup>
-import { computed } from 'vue'
 import { useFavoritesStore } from '@/stores/favorites'
 const props = defineProps({
   song: {
@@ -60,6 +69,7 @@ const props = defineProps({
 const emit = defineEmits(['close', 'action'])
 const favoritesStore = useFavoritesStore()
 // 计算属性
 const isFavorite = computed(() => {
@@ -88,7 +98,8 @@ const handleAction = async (action) => {
       break
     case 'addToPlaylist':
-      // 实现添加到播放列表
       break
     case 'download':
@@ -111,6 +122,18 @@ const handleAction = async (action) => {
   emit('action', action)
 }
 </script>
 <style scoped>

         取消
       </button>
     </div>
+    <!-- 播放列表选择对话框 -->
+    <PlaylistSelector
+      :show="showPlaylistSelector"
+      :song="song"
+      @close="closePlaylistSelector"
+      @added="handleAddedToPlaylist"
+    />
   </div>
 </template>
 <script setup>
+import { computed, ref } from 'vue'
 import { useFavoritesStore } from '@/stores/favorites'
+import PlaylistSelector from '@/components/playlist/PlaylistSelector.vue'
 const props = defineProps({
   song: {
 const emit = defineEmits(['close', 'action'])
 const favoritesStore = useFavoritesStore()
+const showPlaylistSelector = ref(false)
 // 计算属性
 const isFavorite = computed(() => {
       break
     case 'addToPlaylist':
+      // 打开播放列表选择器
+      showPlaylistSelector.value = true
       break
     case 'download':
   emit('action', action)
 }
+// 关闭播放列表选择器
+const closePlaylistSelector = () => {
+  showPlaylistSelector.value = false
+}
+// 处理添加到播放列表成功
+const handleAddedToPlaylist = (data) => {
+  console.log('歌曲已添加到播放列表:', data.message)
+  // 关闭当前面板
+  emit('close')
+}
 </script>
 <style scoped>

src/components/player/PlayControls.vue CHANGED Viewed

@@ -52,6 +52,7 @@
 <script setup>
 import { computed } from 'vue'
 import { usePlayerStore } from '@/stores/player'
 const props = defineProps({
   loading: {
@@ -69,15 +70,20 @@ const emit = defineEmits([
 ])
 const playerStore = usePlayerStore()
 // 计算属性
 const isPlaying = computed(() => playerStore.isPlaying)
-const playMode = computed(() => playerStore.playMode)
-const hasPrevious = computed(() => playerStore.hasPrevious)
-const hasNext = computed(() => playerStore.hasNext)
-const playlistCount = computed(() => playerStore.playlist.length)
 const hasAudio = computed(() => !!playerStore.audioSrc)
 const playModeIcon = computed(() => {
   switch (playMode.value) {
     case 'single':
@@ -101,17 +107,6 @@ const playModeText = computed(() => {
       return '列表循环'
   }
 })
-// 方法
-const togglePlayMode = () => {
-  const modes = ['list', 'random', 'single']
-  const currentIndex = modes.indexOf(playMode.value)
-  const nextIndex = (currentIndex + 1) % modes.length
-  const nextMode = modes[nextIndex]
-  playerStore.setPlayMode(nextMode)
-  emit('togglePlayMode', nextMode)
-}
 </script>
 <style scoped>

 <script setup>
 import { computed } from 'vue'
 import { usePlayerStore } from '@/stores/player'
+import { usePlayQueueStore } from '@/stores/playqueue'
 const props = defineProps({
   loading: {
 ])
 const playerStore = usePlayerStore()
+const playQueueStore = usePlayQueueStore()
 // 计算属性
 const isPlaying = computed(() => playerStore.isPlaying)
+const playMode = computed(() => playQueueStore.playMode)
+const hasPrevious = computed(() => playQueueStore.hasPrevious)
+const hasNext = computed(() => playQueueStore.hasNext)
+const playlistCount = computed(() => playQueueStore.queueLength)
 const hasAudio = computed(() => !!playerStore.audioSrc)
+const togglePlayMode = () => {
+  playQueueStore.togglePlayMode()
+}
 const playModeIcon = computed(() => {
   switch (playMode.value) {
     case 'single':
       return '列表循环'
   }
 })
 </script>
 <style scoped>

src/components/player/PlaylistPanel.vue CHANGED Viewed

@@ -133,6 +133,7 @@
 import { computed, ref } from 'vue'
 import { usePlayerStore } from '@/stores/player'
 import { useFavoritesStore } from '@/stores/favorites'
 import { utils } from '@/services/musicApi'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
@@ -140,6 +141,7 @@ const emit = defineEmits(['close', 'play', 'remove'])
 const playerStore = usePlayerStore()
 const favoritesStore = useFavoritesStore()
 const confirmDialog = ref(null)
 // 计算属性
@@ -200,7 +202,7 @@ const clearPlaylist = () => {
 }
 const handleClearConfirm = () => {
-  playerStore.setPlaylist([])
   emit('close')
 }

 import { computed, ref } from 'vue'
 import { usePlayerStore } from '@/stores/player'
 import { useFavoritesStore } from '@/stores/favorites'
+import { usePlayQueueStore } from '@/stores/playqueue'
 import { utils } from '@/services/musicApi'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 const playerStore = usePlayerStore()
 const favoritesStore = useFavoritesStore()
+const playQueueStore = usePlayQueueStore()
 const confirmDialog = ref(null)
 // 计算属性
 }
 const handleClearConfirm = () => {
+  playQueueStore.clearQueue()
   emit('close')
 }

src/components/playlist/PlaylistSelector.vue ADDED Viewed

	@@ -0,0 +1,481 @@

+<template>
+  <div class="playlist-selector-overlay" v-if="show" @click="handleClose">
+    <div class="playlist-selector-dialog" @click.stop>
+      <div class="dialog-header">
+        <h3>添加到播放列表</h3>
+        <button class="close-btn" @click="handleClose">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+      <div class="dialog-body">
+        <div class="playlist-list">
+          <div
+            v-for="playlist in playlists"
+            :key="playlist.id"
+            class="playlist-item"
+            :class="{ 'disabled': playlist.isDefault }"
+            @click="selectPlaylist(playlist)"
+          >
+            <div class="playlist-cover">
+              <img
+                v-if="playlist.cover"
+                :src="playlist.cover"
+                :alt="playlist.name"
+              />
+              <div v-else class="default-cover">
+                <i class="fas fa-music"></i>
+              </div>
+            </div>
+            <div class="playlist-info">
+              <h4 class="playlist-name">{{ playlist.name }}</h4>
+              <p class="playlist-count">{{ playlist.songs.length }}首歌曲</p>
+              <p v-if="playlist.isDefault" class="playlist-note">当前播放队列</p>
+            </div>
+            <div class="playlist-status" v-if="playlist.isDefault">
+              <i class="fas fa-info-circle"></i>
+            </div>
+          </div>
+        </div>
+        <div class="create-new">
+          <button class="create-new-btn" @click="openCreatePlaylist">
+            <i class="fas fa-plus"></i>
+            <span>创建新播放列表</span>
+          </button>
+        </div>
+      </div>
+      <!-- 创建新播放列表表单 -->
+      <div v-if="showCreateForm" class="create-form">
+        <div class="form-group">
+          <label>播放列表名称</label>
+          <input
+            type="text"
+            v-model="newPlaylistName"
+            placeholder="请输入播放列表名称"
+            maxlength="50"
+            ref="nameInput"
+          />
+        </div>
+        <div class="form-actions">
+          <button class="btn btn-cancel" @click="cancelCreate">取消</button>
+          <button class="btn btn-create" @click="createAndAdd" :disabled="!newPlaylistName.trim()">
+            创建并添加
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed, nextTick } from 'vue'
+import { usePlaylistStore } from '@/stores/playlist'
+import { useToastStore } from '@/stores/toast'
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  song: {
+    type: Object,
+    required: true
+  }
+})
+const emit = defineEmits(['close', 'added'])
+const playlistStore = usePlaylistStore()
+const toastStore = useToastStore()
+const showCreateForm = ref(false)
+const newPlaylistName = ref('')
+const nameInput = ref(null)
+// 获取所有播放列表（排除默认播放列表，因为那只是当前播放队列）
+const playlists = computed(() => {
+  return playlistStore.playlists.filter(p => !p.isDefault)
+})
+// 选择播放列表
+const selectPlaylist = async (playlist) => {
+  if (playlist.isDefault) {
+    // 默认播放列表（当前播放队列）不能添加歌曲
+    return
+  }
+  try {
+    const result = playlistStore.addSongToPlaylist(playlist.id, props.song)
+    if (result.success) {
+      emit('added', { playlist, song: props.song, message: result.message })
+      handleClose()
+    } else {
+      toastStore.error(result.message)
+    }
+  } catch (error) {
+    console.error('添加到播放列表失败:', error)
+    toastStore.error('添加失败，请重试')
+  }
+}
+// 打开创建播放列表表单
+const openCreatePlaylist = () => {
+  showCreateForm.value = true
+  nextTick(() => {
+    if (nameInput.value) {
+      nameInput.value.focus()
+    }
+  })
+}
+// 取消创建
+const cancelCreate = () => {
+  showCreateForm.value = false
+  newPlaylistName.value = ''
+}
+// 创建播放列表并添加歌曲
+const createAndAdd = async () => {
+  if (!newPlaylistName.value.trim()) return
+  try {
+    // 创建新播放列表
+    const newPlaylist = playlistStore.createPlaylist(newPlaylistName.value.trim())
+    // 添加歌曲到新播放列表
+    const result = playlistStore.addSongToPlaylist(newPlaylist.id, props.song)
+    if (result.success) {
+      emit('added', {
+        playlist: newPlaylist,
+        song: props.song,
+        message: `已添加到新播放列表"${newPlaylist.name}"`
+      })
+      handleClose()
+    } else {
+      toastStore.error(result.message)
+    }
+  } catch (error) {
+    console.error('创建播放列表并添加歌曲失败:', error)
+    toastStore.error('操作失败，请重试')
+  }
+}
+// 关闭对话框
+const handleClose = () => {
+  showCreateForm.value = false
+  newPlaylistName.value = ''
+  emit('close')
+}
+</script>
+<style scoped>
+.playlist-selector-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  animation: fadeIn 0.3s ease;
+}
+.playlist-selector-dialog {
+  width: 90%;
+  max-width: 480px;
+  max-height: 80vh;
+  background: var(--bg-card);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--border-light);
+  animation: slideIn 0.3s ease;
+  overflow: hidden;
+}
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-lighter);
+}
+.dialog-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);
+  border-radius: 50%;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: var(--transition-fast);
+}
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.dialog-body {
+  padding: 16px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+.playlist-list {
+  margin-bottom: 16px;
+}
+.playlist-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  border: 1px solid transparent;
+}
+.playlist-item:hover:not(.disabled) {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: var(--accent-red);
+}
+.playlist-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.playlist-cover {
+  width: 48px;
+  height: 48px;
+  border-radius: 6px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.playlist-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.default-cover {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, var(--accent-red), #ff8a8a);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 20px;
+}
+.playlist-info {
+  flex: 1;
+  min-width: 0;
+}
+.playlist-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.playlist-count {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin: 0 0 2px;
+}
+.playlist-note {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin: 0;
+}
+.playlist-status {
+  color: var(--text-tertiary);
+  font-size: 16px;
+}
+.create-new {
+  border-top: 1px solid var(--border-lighter);
+  padding-top: 16px;
+}
+.create-new-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px dashed var(--border-light);
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.create-new-btn:hover {
+  border-color: var(--accent-red);
+  color: var(--accent-red);
+  background: rgba(255, 107, 107, 0.05);
+}
+.create-form {
+  padding: 20px 24px;
+  border-top: 1px solid var(--border-lighter);
+  background: rgba(255, 255, 255, 0.02);
+}
+.form-group {
+  margin-bottom: 16px;
+}
+.form-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+.form-group input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid var(--border-card);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+  font-size: 14px;
+  transition: var(--transition-fast);
+  font-family: inherit;
+  box-sizing: border-box;
+}
+.form-group input:focus {
+  outline: none;
+  border-color: var(--accent-red);
+  background: rgba(255, 255, 255, 0.08);
+}
+.form-group input::placeholder {
+  color: var(--text-tertiary);
+}
+.form-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+}
+.btn {
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  border: none;
+}
+.btn-cancel {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+.btn-cancel:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.btn-create {
+  background: var(--accent-red);
+  color: white;
+}
+.btn-create:hover:not(:disabled) {
+  background: var(--accent-red-hover);
+}
+.btn-create:disabled {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-tertiary);
+  cursor: not-allowed;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+/* 响应式 */
+@media (max-width: 375px) {
+  .playlist-selector-dialog {
+    width: 95%;
+    max-height: 85vh;
+  }
+  .dialog-header {
+    padding: 16px 20px;
+  }
+  .dialog-body {
+    padding: 12px;
+  }
+  .create-form {
+    padding: 16px 20px;
+  }
+  .playlist-item {
+    padding: 10px;
+  }
+  .playlist-cover {
+    width: 40px;
+    height: 40px;
+  }
+}
+</style>

src/components/search/SearchHistory.vue CHANGED Viewed

@@ -57,6 +57,16 @@
         </div>
       </div>
     </div>
   </div>
 </template>
@@ -64,6 +74,7 @@
 import { ref, computed } from 'vue'
 import { useSearchStore } from '@/stores/search'
 import { useSettingsStore } from '@/stores/settings'
 const emit = defineEmits(['search', 'clear'])
@@ -73,6 +84,7 @@ const settingsStore = useSettingsStore()
 // 响应式数据
 const expanded = ref(false)
 const maxDisplay = ref(5)
 const props = defineProps({
   showEmpty: {
@@ -107,10 +119,12 @@ const handleRemove = (index) => {
 }
 const handleClear = () => {
-  if (confirm('确定要清空所有搜索历史吗？')) {
-    searchStore.clearHistory()
-    emit('clear')
-  }
 }
 const toggleExpanded = () => {

         </div>
       </div>
     </div>
+    <!-- 确认对话框 -->
+    <ConfirmDialog
+      ref="confirmDialogRef"
+      title="清空搜索历史"
+      message="确定要清空所有搜索历史吗？此操作不可撤销。"
+      confirm-text="清空"
+      type="danger"
+      @confirm="confirmClear"
+    />
   </div>
 </template>
 import { ref, computed } from 'vue'
 import { useSearchStore } from '@/stores/search'
 import { useSettingsStore } from '@/stores/settings'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 const emit = defineEmits(['search', 'clear'])
 // 响应式数据
 const expanded = ref(false)
 const maxDisplay = ref(5)
+const confirmDialogRef = ref(null)
 const props = defineProps({
   showEmpty: {
 }
 const handleClear = () => {
+  confirmDialogRef.value?.show()
+}
+const confirmClear = () => {
+  searchStore.clearHistory()
+  emit('clear')
 }
 const toggleExpanded = () => {

src/components/search/SearchResults.vue CHANGED Viewed

@@ -86,6 +86,9 @@
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useSearchStore } from '@/stores/search'
 import { usePlayerStore } from '@/stores/player'
 import SongItem from './SongItem.vue'
 const props = defineProps({
@@ -103,6 +106,9 @@ const emit = defineEmits(['retry', 'search', 'play', 'loadMore'])
 const searchStore = useSearchStore()
 const playerStore = usePlayerStore()
 // 响应式数据
 const songsContainer = ref(null)
@@ -123,10 +129,29 @@ const loadingMore = computed(() => loading.value && results.value.length > 0)
 // 方法
 const handlePlay = async (song, index) => {
-  // 设置播放列表和播放歌曲
-  playerStore.setPlaylist(results.value, index)
-  await playerStore.playSong(song, index)
-  emit('play', song, index)
 }
 // 设置智能滚动加载 - 可视区域超过一半时加载下一页

 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useSearchStore } from '@/stores/search'
 import { usePlayerStore } from '@/stores/player'
+import { usePlayQueueStore } from '@/stores/playqueue'
+import { useHistoryStore } from '@/stores/history'
+import { useToastStore } from '@/stores/toast'
 import SongItem from './SongItem.vue'
 const props = defineProps({
 const searchStore = useSearchStore()
 const playerStore = usePlayerStore()
+const playQueueStore = usePlayQueueStore()
+const historyStore = useHistoryStore()
+const toastStore = useToastStore()
 // 响应式数据
 const songsContainer = ref(null)
 // 方法
 const handlePlay = async (song, index) => {
+  try {
+    // SOLID原则：使用playQueueStore管理播放队列
+    const result = playQueueStore.setQueue(results.value, index)
+    if (result) {
+      // 开始播放歌曲
+      await playerStore.playSong(song)
+      // 添加到播放历史
+      historyStore.addToHistory(song)
+      // 用户反馈
+      toastStore.success(`开始播放 "${song.name}"`)
+      // 通知父组件
+      emit('play', song, index)
+    } else {
+      throw new Error('设置播放队列失败')
+    }
+  } catch (error) {
+    console.error('播放失败:', error)
+    toastStore.error('播放失败，请重试')
+  }
 }
 // 设置智能滚动加载 - 可视区域超过一半时加载下一页

src/components/search/SongItem.vue CHANGED Viewed

@@ -18,15 +18,41 @@
       >
         <i :class="isFavorite ? 'fas fa-heart' : 'far fa-heart'"></i>
       </button>
     </div>
   </div>
 </template>
 <script setup>
-import { computed } from 'vue'
 import { usePlayerStore } from '@/stores/player'
 import { useFavoritesStore } from '@/stores/favorites'
 import { utils } from '@/services/musicApi'
 const props = defineProps({
   song: {
@@ -42,7 +68,11 @@ const props = defineProps({
 const emit = defineEmits(['play'])
 const playerStore = usePlayerStore()
 const favoritesStore = useFavoritesStore()
 // 计算属性
 const isActive = computed(() => {
@@ -71,6 +101,54 @@ const toggleFavorite = () => {
     navigator.vibrate(50)
   }
 }
 </script>
 <style scoped>
@@ -192,6 +270,44 @@ const toggleFavorite = () => {
   color: var(--accent-red-hover);
 }
 /* 响应式 */
 @media (max-width: 375px) {
   .song-item {

       >
         <i :class="isFavorite ? 'fas fa-heart' : 'far fa-heart'"></i>
       </button>
+      <button
+        class="action-btn more-btn"
+        @click.stop="showMoreActions"
+        :title="'更多操作'"
+      >
+        <i class="fas fa-ellipsis-v"></i>
+      </button>
+    </div>
+    <!-- 更多操作菜单 -->
+    <div class="more-menu" v-if="showMenu" @click.stop>
+      <button @click="handlePlayNext">下一首播放</button>
+      <button @click="handleAddToPlaylist">添加到播放列表</button>
+      <button @click="handleCopyLink">复制链接</button>
     </div>
+    <!-- 播放列表选择对话框 -->
+    <PlaylistSelector
+      :show="showPlaylistSelector"
+      :song="song"
+      @close="closePlaylistSelector"
+      @added="handleAddedToPlaylist"
+    />
   </div>
 </template>
 <script setup>
+import { computed, ref } from 'vue'
 import { usePlayerStore } from '@/stores/player'
+import { usePlayQueueStore } from '@/stores/playqueue'
 import { useFavoritesStore } from '@/stores/favorites'
+import { useToastStore } from '@/stores/toast'
 import { utils } from '@/services/musicApi'
+import PlaylistSelector from '@/components/playlist/PlaylistSelector.vue'
 const props = defineProps({
   song: {
 const emit = defineEmits(['play'])
 const playerStore = usePlayerStore()
+const playQueueStore = usePlayQueueStore()
 const favoritesStore = useFavoritesStore()
+const toastStore = useToastStore()
+const showMenu = ref(false)
+const showPlaylistSelector = ref(false)
 // 计算属性
 const isActive = computed(() => {
     navigator.vibrate(50)
   }
 }
+// 显示更多操作菜单
+const showMoreActions = () => {
+  showMenu.value = !showMenu.value
+}
+// 下一首播放
+const handlePlayNext = () => {
+  const result = playQueueStore.addToQueue(props.song, 'next')
+  if (result.success) {
+    toastStore.success(`"${props.song.name}" 已添加到下一首播放`)
+  } else {
+    toastStore.error(result.message)
+  }
+  showMenu.value = false
+}
+// 添加到播放列表
+const handleAddToPlaylist = () => {
+  showMenu.value = false
+  showPlaylistSelector.value = true
+}
+// 关闭播放列表选择器
+const closePlaylistSelector = () => {
+  showPlaylistSelector.value = false
+}
+// 处理添加到播放列表成功
+const handleAddedToPlaylist = (data) => {
+  toastStore.success(data.message)
+}
+// 复制链接
+const handleCopyLink = () => {
+  const url = `${window.location.origin}/?play=${props.song.source}&id=${props.song.id}`
+  navigator.clipboard.writeText(url).then(() => {
+    toastStore.success('链接已复制到剪贴板')
+  }).catch(() => {
+    toastStore.error('复制失败，请重试')
+  })
+  showMenu.value = false
+}
+// 点击外部关闭菜单
+document.addEventListener('click', () => {
+  showMenu.value = false
+})
 </script>
 <style scoped>
   color: var(--accent-red-hover);
 }
+.more-btn {
+  opacity: 0;
+  position: relative;
+}
+.song-item:hover .more-btn {
+  opacity: 1;
+}
+.more-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: var(--bg-card);
+  border-radius: 8px;
+  padding: 8px 0;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+  min-width: 120px;
+}
+.more-menu button {
+  display: block;
+  width: 100%;
+  padding: 8px 16px;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+  font-size: 12px;
+  transition: var(--transition-fast);
+}
+.more-menu button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
 /* 响应式 */
 @media (max-width: 375px) {
   .song-item {

src/composables/useSongCoverLoader.js ADDED Viewed

	@@ -0,0 +1,204 @@

+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { usePlayerStore } from '@/stores/player'
+import { imageCacheManager } from '@/utils/imageCache'
+/**
+ * 歌曲封面懒加载工具
+ * 使用 IntersectionObserver API 实现正确的图片懒加载并逐步请求
+ */
+export const useSongCoverLoader = () => {
+  const playerStore = usePlayerStore()
+  const observer = ref(null)
+  const observedImages = new Set() // 记录被观察的图片
+  const loadQueue = [] // 加载队列
+  const isProcessingQueue = ref(false) // 是否正在处理队列
+  /**
+   * 处理加载队列，逐个加载图片
+   */
+  const processLoadQueue = async () => {
+    if (isProcessingQueue.value || loadQueue.length === 0) return
+    isProcessingQueue.value = true
+    while (loadQueue.length > 0) {
+      const { img, song } = loadQueue.shift()
+      // 检查元素是否还在DOM中
+      if (img.parentNode) {
+        await loadCoverForElement(img, song)
+      }
+      // 逐个加载，每次间隔200ms
+      if (loadQueue.length > 0) {
+        await new Promise(resolve => setTimeout(resolve, 200))
+      }
+    }
+    isProcessingQueue.value = false
+  }
+  /**
+   * 获取默认封面
+   */
+  const getDefaultCover = () => {
+    return imageCacheManager.getDefaultImage()
+  }
+  /**
+   * 处理图片加载错误
+   */
+  const handleImageError = (event) => {
+    event.target.src = getDefaultCover()
+  }
+  /**
+   * 初始化懒加载观察器
+   */
+  const initLazyLoading = () => {
+    if (!window.IntersectionObserver) {
+      console.warn('浏览器不支持 IntersectionObserver，使用立即加载')
+      return false
+    }
+    observer.value = new IntersectionObserver(
+      (entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const img = entry.target
+            const songData = img.dataset.song
+            if (songData) {
+              try {
+                const song = JSON.parse(songData)
+                // 添加到加载队列而非立即加载
+                loadQueue.push({ img, song })
+                // 开始处理队列
+                processLoadQueue()
+                // 停止观察该元素
+                observer.value.unobserve(img)
+                observedImages.delete(img)
+              } catch (error) {
+                console.error('解析歌曲数据失败:', error)
+              }
+            }
+          }
+        })
+      },
+      {
+        // 提前 100px 开始加载
+        rootMargin: '100px 0px',
+        threshold: 0.1
+      }
+    )
+    return true
+  }
+  /**
+   * 为图片元素加载封面
+   */
+  const loadCoverForElement = async (imgElement, song) => {
+    if (!imgElement || !song) return
+    try {
+      // 检查元素是否还存在于DOM中
+      if (!imgElement.parentNode) {
+        return
+      }
+      const coverUrl = await playerStore.getAlbumCover(song, 300)
+      if (coverUrl && imgElement.parentNode) {
+        imgElement.src = coverUrl
+      }
+    } catch (error) {
+      console.error('加载封面失败:', error)
+      if (imgElement.parentNode) {
+        imgElement.src = getDefaultCover()
+      }
+    }
+  }
+  /**
+   * 观察图片元素进行懒加载
+   * @param {HTMLImageElement} imgElement - 图片元素
+   * @param {Object} song - 歌曲对象
+   */
+  const observeImage = (imgElement, song) => {
+    if (!imgElement || !song || observedImages.has(imgElement)) return
+    // 设置默认封面
+    imgElement.src = getDefaultCover()
+    // 将歌曲数据存储在 data 属性中
+    imgElement.dataset.song = JSON.stringify(song)
+    // 如果观察器未初始化，先初始化
+    if (!observer.value && !initLazyLoading()) {
+      // 不支持 IntersectionObserver，加入队列逐步加载
+      loadQueue.push({ imgElement, song })
+      processLoadQueue()
+      return
+    }
+    // 开始观察
+    observer.value.observe(imgElement)
+    observedImages.add(imgElement)
+  }
+  /**
+   * 立即加载歌曲封面（不延时）
+   * @param {Object} song - 歌曲对象
+   * @param {Number} size - 图片尺寸
+   */
+  const loadCoverImmediately = async (song, size = 300) => {
+    if (!song) return getDefaultCover()
+    try {
+      const coverUrl = await playerStore.getAlbumCover(song, size)
+      return coverUrl || getDefaultCover()
+    } catch (error) {
+      console.error('加载封面失败:', error)
+      return getDefaultCover()
+    }
+  }
+  /**
+   * 为图片元素设置封面
+   * @param {HTMLImageElement} imgElement - 图片元素
+   * @param {Object} song - 歌曲对象
+   * @param {Number} size - 图片尺寸
+   */
+  const setCoverForElement = async (imgElement, song, size = 300) => {
+    if (!imgElement || !song) return
+    try {
+      const coverUrl = await playerStore.getAlbumCover(song, size)
+      if (coverUrl) {
+        imgElement.src = coverUrl
+      }
+    } catch (error) {
+      console.error('加载封面失败:', error)
+      imgElement.src = getDefaultCover()
+    }
+  }
+  // 组件卸载时清理资源
+  onUnmounted(() => {
+    if (observer.value) {
+      observer.value.disconnect()
+      observer.value = null
+    }
+    observedImages.clear()
+  })
+  return {
+    getDefaultCover,
+    handleImageError,
+    observeImage,
+    loadCoverImmediately,
+    setCoverForElement
+  }
+}

src/main.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
 import router from './router/index.js'
 import App from './App.vue'
 import './styles/global.css'
 // 创建应用实例
 const app = createApp(App)

 import router from './router/index.js'
 import App from './App.vue'
 import './styles/global.css'
+import '@fortawesome/fontawesome-free/css/all.css'
 // 创建应用实例
 const app = createApp(App)

src/router/index.js CHANGED Viewed

@@ -1,9 +1,16 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomePage from '@/views/HomePage.vue'
-import MyMusicPage from '@/views/MyMusicPage.vue'
 import SettingsPage from '@/views/SettingsPage.vue'
 import FullPlayerPage from '@/views/FullPlayerPage.vue'
 const routes = [
   {
     path: '/',
@@ -24,9 +31,56 @@ const routes = [
     component: MyMusicPage,
     meta: {
       title: '我的音乐',
       keepAlive: true
     }
   },
   {
     path: '/settings',
     name: 'Settings',

 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomePage from '@/views/HomePage.vue'
+import FavoritesPage from '@/views/FavoritesPage.vue'
+import HistoryPage from '@/views/HistoryPage.vue'
+import PlaylistsPage from '@/views/PlaylistsPage.vue'
+import PlaylistDetailPage from '@/views/PlaylistDetailPage.vue'
+import PlayQueuePage from '@/views/PlayQueuePage.vue'
 import SettingsPage from '@/views/SettingsPage.vue'
 import FullPlayerPage from '@/views/FullPlayerPage.vue'
+// 保留旧的MyMusicPage作为兼容
+import MyMusicPage from '@/views/MyMusicPage.vue'
 const routes = [
   {
     path: '/',
     component: MyMusicPage,
     meta: {
       title: '我的音乐',
+      keepAlive: true,
+      deprecated: true // 标记为已废弃，但保留兼容性
+    }
+  },
+  // 新的独立页面 - 根据网易云音乐架构研究报告重新设计
+  {
+    path: '/favorites',
+    name: 'Favorites',
+    component: FavoritesPage,
+    meta: {
+      title: '我喜欢的音乐',
+      keepAlive: true
+    }
+  },
+  {
+    path: '/history',
+    name: 'History',
+    component: HistoryPage,
+    meta: {
+      title: '播放历史',
+      keepAlive: true
+    }
+  },
+  {
+    path: '/play-queue',
+    name: 'PlayQueue',
+    component: PlayQueuePage,
+    meta: {
+      title: '播放队列',
+      keepAlive: false // 播放队列需要实时更新，不缓存
+    }
+  },
+  {
+    path: '/playlists',
+    name: 'Playlists',
+    component: PlaylistsPage,
+    meta: {
+      title: '我的歌单',
       keepAlive: true
     }
   },
+  {
+    path: '/playlists/:id',
+    name: 'PlaylistDetail',
+    component: PlaylistDetailPage,
+    meta: {
+      title: '歌单详情',
+      keepAlive: false
+    }
+  },
   {
     path: '/settings',
     name: 'Settings',

src/stores/favorites.js CHANGED Viewed

@@ -1,155 +1,238 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
 export const useFavoritesStore = defineStore('favorites', () => {
   // 状态
   const favorites = ref([])
-  const playHistory = ref([])
-  // 收藏管理
   const isFavorite = (song) => {
-    return favorites.value.some(fav => fav.id === song.id && fav.source === song.source)
   }
   const addToFavorites = (song) => {
-    if (!isFavorite(song)) {
-      const favoriteItem = {
-        ...song,
-        favoriteTime: Date.now()
-      }
-      favorites.value.unshift(favoriteItem)
-      saveFavorites()
-      return true
     }
-    return false
   }
   const removeFromFavorites = (song) => {
-    const index = favorites.value.findIndex(fav => fav.id === song.id && fav.source === song.source)
-    if (index >= 0) {
-      favorites.value.splice(index, 1)
-      saveFavorites()
-      return true
     }
-    return false
   }
   const toggleFavorite = (song) => {
     if (isFavorite(song)) {
-      removeFromFavorites(song)
-      return false
     } else {
-      addToFavorites(song)
-      return true
     }
   }
   const clearFavorites = () => {
     favorites.value = []
-    localStorage.removeItem('vue-music-favorites')
   }
-  // 播放历史管理
-  const addToHistory = (song) => {
-    if (!song) return
-    // 移除已存在的记录
-    playHistory.value = playHistory.value.filter(item =>
-      !(item.id === song.id && item.source === song.source)
-    )
-    // 添加到开头
-    const historyItem = {
-      ...song,
-      playTime: Date.now(),
-      playCount: 1
     }
-    // 检查是否已存在，如果存在则增加播放次数
-    const existingIndex = playHistory.value.findIndex(item =>
-      item.id === song.id && item.source === song.source
-    )
-    if (existingIndex >= 0) {
-      historyItem.playCount = playHistory.value[existingIndex].playCount + 1
     }
-    playHistory.value.unshift(historyItem)
-    // 限制历史记录数量
-    playHistory.value = playHistory.value.slice(0, 100)
-    savePlayHistory()
   }
-  const clearHistory = () => {
-    playHistory.value = []
-    localStorage.removeItem('vue-music-play-history')
   }
-  const getRecentlyPlayed = (limit = 20) => {
-    return playHistory.value.slice(0, limit)
   }
-  const getMostPlayed = (limit = 20) => {
-    return [...playHistory.value]
-      .sort((a, b) => b.playCount - a.playCount)
-      .slice(0, limit)
   }
   // 本地存储
   const saveFavorites = () => {
-    localStorage.setItem('vue-music-favorites', JSON.stringify(favorites.value))
-  }
-  const loadFavorites = () => {
     try {
-      const saved = localStorage.getItem('vue-music-favorites')
-      if (saved) {
-        favorites.value = JSON.parse(saved) || []
       }
     } catch (error) {
-      console.error('加载收藏列表失败:', error)
     }
   }
-  const savePlayHistory = () => {
-    localStorage.setItem('vue-music-play-history', JSON.stringify(playHistory.value))
-  }
-  const loadPlayHistory = () => {
     try {
-      const saved = localStorage.getItem('vue-music-play-history')
       if (saved) {
-        playHistory.value = JSON.parse(saved) || []
       }
     } catch (error) {
-      console.error('加载播放历史失败:', error)
     }
   }
   return {
     // 状态
-    favorites,
-    playHistory,
-    // 收藏管理
     isFavorite,
     addToFavorites,
     removeFromFavorites,
     toggleFavorite,
     clearFavorites,
-    // 历史管理
-    addToHistory,
-    clearHistory,
-    getRecentlyPlayed,
-    getMostPlayed,
-    // 存储
     saveFavorites,
-    loadFavorites,
-    savePlayHistory,
-    loadPlayHistory
   }
 })

 import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+/**
+ * "我喜欢的音乐" Store - 单一职责：管理用户的红心收藏
+ * 对应网易云音乐的"我喜欢的音乐"特殊歌单
+ */
 export const useFavoritesStore = defineStore('favorites', () => {
   // 状态
   const favorites = ref([])
+  // 常量
+  const STORAGE_KEY = 'vue-music-my-favorites'
+  const MAX_FAVORITES = 1000
+  // 计算属性
+  const totalFavorites = computed(() => favorites.value.length)
+  const isEmpty = computed(() => favorites.value.length === 0)
+  // 收藏管理 - 严格按照网易云逻辑
   const isFavorite = (song) => {
+    if (!song || !song.id) return false
+    return favorites.value.some(fav =>
+      fav.song && fav.song.id === song.id && fav.song.source === song.source
+    )
   }
   const addToFavorites = (song) => {
+    if (!song || !song.id) {
+      return { success: false, message: '歌曲信息无效' }
+    }
+    if (isFavorite(song)) {
+      return { success: false, message: '歌曲已在我喜欢的音乐中' }
+    }
+    if (favorites.value.length >= MAX_FAVORITES) {
+      return { success: false, message: `我喜欢的音乐最多只能添加 ${MAX_FAVORITES} 首歌曲` }
+    }
+    const favoriteItem = {
+      song: { ...song },
+      favoriteTime: Date.now()
     }
+    favorites.value.unshift(favoriteItem)
+    saveFavorites()
+    return { success: true, message: '已添加到我喜欢的音乐' }
   }
   const removeFromFavorites = (song) => {
+    if (!song || !song.id) {
+      return { success: false, message: '歌曲信息无效' }
+    }
+    const index = favorites.value.findIndex(fav =>
+      fav.song && fav.song.id === song.id && fav.song.source === song.source
+    )
+    if (index === -1) {
+      return { success: false, message: '歌曲不在我喜欢的音乐中' }
     }
+    favorites.value.splice(index, 1)
+    saveFavorites()
+    return { success: true, message: '已从我喜欢的音乐中移除' }
   }
   const toggleFavorite = (song) => {
     if (isFavorite(song)) {
+      return removeFromFavorites(song)
     } else {
+      return addToFavorites(song)
     }
   }
   const clearFavorites = () => {
     favorites.value = []
+    saveFavorites()
   }
+  // 批量操作
+  const addMultipleFavorites = (songs) => {
+    let successCount = 0
+    const results = []
+    for (const song of songs) {
+      const result = addToFavorites(song)
+      results.push(result)
+      if (result.success) successCount++
     }
+    return {
+      success: successCount > 0,
+      successCount,
+      totalCount: songs.length,
+      results
     }
   }
+  // 搜索和筛选
+  const searchFavorites = (keyword) => {
+    if (!keyword || !keyword.trim()) {
+      return favorites.value
+    }
+    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))
+    })
   }
+  const getFavoritesByDateRange = (startDate, endDate) => {
+    return favorites.value.filter(fav =>
+      fav.favoriteTime >= startDate && fav.favoriteTime <= endDate
+    )
   }
+  // 导出/导入功能
+  const exportFavorites = () => {
+    try {
+      const data = {
+        favorites: favorites.value,
+        exportTime: Date.now(),
+        version: '1.0',
+        type: 'my-favorites'
+      }
+      const blob = new Blob([JSON.stringify(data, null, 2)], {
+        type: 'application/json'
+      })
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `my-favorites-${new Date().toISOString().split('T')[0]}.json`
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      URL.revokeObjectURL(url)
+      return { success: true, message: '导出成功' }
+    } catch (error) {
+      console.error('导出我喜欢的音乐失败:', error)
+      return { success: false, message: '导出失败' }
+    }
   }
   // 本地存储
   const saveFavorites = () => {
     try {
+      const data = {
+        favorites: favorites.value,
+        lastUpdated: Date.now(),
+        version: '2.0'
       }
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
     } catch (error) {
+      console.error('保存我喜欢的音乐失败:', error)
     }
   }
+  const loadFavorites = () => {
     try {
+      // 尝试加载新格式数据
+      const saved = localStorage.getItem(STORAGE_KEY)
       if (saved) {
+        const data = JSON.parse(saved)
+        favorites.value = data.favorites || []
+        return
+      }
+      // 兼容旧版本数据迁移
+      const oldData = localStorage.getItem('vue-music-favorites')
+      if (oldData) {
+        const data = JSON.parse(oldData) || []
+        // 数据格式迁移：处理旧格式的收藏数据
+        favorites.value = data.map(item => {
+          if (item.song && item.favoriteTime) {
+            return item
+          }
+          if (item.favoriteTime && item.id) {
+            const { favoriteTime, ...songData } = item
+            return {
+              song: songData,
+              favoriteTime: favoriteTime
+            }
+          }
+          return {
+            song: item,
+            favoriteTime: Date.now()
+          }
+        })
+        // 迁移完成后保存新格式并删除旧数据
+        saveFavorites()
+        localStorage.removeItem('vue-music-favorites')
       }
     } catch (error) {
+      console.error('加载我喜欢的音乐失败:', error)
+      favorites.value = []
     }
   }
   return {
     // 状态
+    favorites: computed(() => favorites.value),
+    // 计算属性
+    totalFavorites,
+    isEmpty,
+    // 核心方法
     isFavorite,
     addToFavorites,
     removeFromFavorites,
     toggleFavorite,
     clearFavorites,
+    // 批量操作
+    addMultipleFavorites,
+    // 搜索和筛选
+    searchFavorites,
+    getFavoritesByDateRange,
+    // 导出功能
+    exportFavorites,
+    // 存储管理
     saveFavorites,
+    loadFavorites
   }
 })

src/stores/history.js CHANGED Viewed

@@ -1,276 +1,414 @@
 import { defineStore } from 'pinia'
-export const useHistoryStore = defineStore('history', {
-  state: () => ({
-    history: [], // 播放历史记录
-    playCount: {}, // 歌曲播放次数统计 { songId: count }
-    maxHistorySize: 1000 // 最大历史记录数量
-  }),
-  getters: {
-    // 总播放时长（秒）
-    totalPlayTime: (state) => {
-      return state.history.reduce((total, item) => {
-        return total + (item.playTime || 0)
-      }, 0)
-    },
-    // 最近播放的歌曲（去重）
-    recentSongs: (state) => {
-      const songMap = new Map()
-      const recent = []
-      // 从最新的开始遍历，保持最新的记录
-      for (let i = state.history.length - 1; i >= 0; i--) {
-        const item = state.history[i]
-        if (!songMap.has(item.song.id)) {
-          songMap.set(item.song.id, true)
-          recent.push(item)
-          if (recent.length >= 50) break // 最多返回50首
-        }
-      }
-      return recent
-    },
-    // 按日期分组的历史记录
-    groupedByDate: (state) => {
-      const groups = {}
-      state.history.forEach(item => {
-        const date = new Date(item.timestamp).toDateString()
-        if (!groups[date]) {
-          groups[date] = []
-        }
-        groups[date].push(item)
-      })
-      return groups
-    },
-    // 播放统计
-    playStats: (state) => {
-      const stats = {
-        totalPlays: state.history.length,
-        uniqueSongs: new Set(state.history.map(item => item.song.id)).size,
-        totalDuration: 0,
-        topArtists: {},
-        topSongs: {}
       }
-      state.history.forEach(item => {
-        stats.totalDuration += item.playTime || 0
-        // 统计艺术家
-        const artist = item.song.artist
-        stats.topArtists[artist] = (stats.topArtists[artist] || 0) + 1
-        // 统计歌曲
-        const songKey = `${item.song.artist} - ${item.song.name}`
-        stats.topSongs[songKey] = (stats.topSongs[songKey] || 0) + 1
-      })
-      return stats
-    },
-    // 获取单首歌曲播放次数
-    getPlayCount: (state) => (songId) => {
-      return state.playCount[songId] || 0
-    },
-    // 获取热门歌曲（按播放次数排序）
-    topPlayedSongs: (state) => {
-      return Object.entries(state.playCount)
-        .sort(([, a], [, b]) => b - a)
-        .slice(0, 50)
-        .map(([songId, count]) => ({
-          songId,
-          count,
-          song: state.history.find(item => item.song.id === songId)?.song
-        }))
-        .filter(item => item.song) // 过滤掉找不到歌曲信息的项
     }
-  },
-  actions: {
-    // 添加播放记录
-    addToHistory(song, playTime = 0) {
-      const historyItem = {
-        song: { ...song },
-        timestamp: Date.now(),
-        playTime, // 播放时长（秒）
-        source: song.source || 'unknown'
       }
-      // 添加到历史记录开头
-      this.history.unshift(historyItem)
-      // 更新播放次数
-      const songId = song.id
-      this.playCount[songId] = (this.playCount[songId] || 0) + 1
-      // 限制历史记录数量
-      if (this.history.length > this.maxHistorySize) {
-        this.history = this.history.slice(0, this.maxHistorySize)
       }
-      this.saveHistory()
-    },
-    // 移除历史记录
-    removeFromHistory(index) {
-      if (index >= 0 && index < this.history.length) {
-        const removedItem = this.history.splice(index, 1)[0]
-        // 更新播放次数（如果这是该歌曲的最后一次播放记录，则不减少计数）
-        // 这里选择保持播放次数不变，因为这反映了历史播放情况
-        this.saveHistory()
-      }
-    },
-    // 清空历史记录
-    clearHistory() {
-      this.history = []
-      this.playCount = {} // 同时清空播放次数
-      this.saveHistory()
-    },
-    // 按日期清理历史记录
-    clearHistoryBefore(date) {
-      const targetTime = new Date(date).getTime()
-      this.history = this.history.filter(item => item.timestamp >= targetTime)
-      this.saveHistory()
-    },
-    // 搜索历史记录
-    searchHistory(keyword) {
-      if (!keyword.trim()) return this.history
-      const lowerKeyword = keyword.toLowerCase()
-      return this.history.filter(item =>
-        item.song.name.toLowerCase().includes(lowerKeyword) ||
-        item.song.artist.toLowerCase().includes(lowerKeyword) ||
-        (item.song.album && item.song.album.toLowerCase().includes(lowerKeyword))
-      )
-    },
-    // 保存到本地存储
-    saveHistory() {
-      try {
-        localStorage.setItem('music-history', JSON.stringify({
-          history: this.history,
-          playCount: this.playCount,
-          lastUpdated: Date.now()
-        }))
-      } catch (error) {
-        console.error('保存播放历史失败:', error)
-      }
-    },
-    // 从本地存储加载
-    async loadHistory() {
-      try {
-        const saved = localStorage.getItem('music-history')
-        if (saved) {
-          const data = JSON.parse(saved)
-          this.history = data.history || []
-          this.playCount = data.playCount || {}
-          // 清理过期的历史记录（超过30天）
-          const thirtyDaysAgo = Date.now() - (30 * 24 * 60 * 60 * 1000)
-          const originalLength = this.history.length
-          this.history = this.history.filter(item => item.timestamp > thirtyDaysAgo)
-          // 如果清理了历史记录，重新计算播放次数
-          if (originalLength !== this.history.length) {
-            this.playCount = {}
-            this.history.forEach(item => {
-              const songId = item.song.id
-              this.playCount[songId] = (this.playCount[songId] || 0) + 1
-            })
-            this.saveHistory() // 保存清理后的记录
           }
         }
-      } catch (error) {
-        console.error('加载播放历史失败:', error)
-        this.history = []
-        this.playCount = {}
-      }
-    },
-    // 导出历史记录
-    exportHistory() {
-      try {
-        const data = {
-          history: this.history,
-          playCount: this.playCount,
-          stats: this.playStats,
-          exportTime: Date.now(),
-          version: '1.0'
-        }
-        const blob = new Blob([JSON.stringify(data, null, 2)], {
-          type: 'application/json'
-        })
-        const url = URL.createObjectURL(blob)
-        const link = document.createElement('a')
-        link.href = url
-        link.download = `music-history-${new Date().toISOString().split('T')[0]}.json`
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
-        URL.revokeObjectURL(url)
-        return true
-      } catch (error) {
-        console.error('导出播放历史失败:', error)
-        return false
       }
-    },
-    // 导入历史记录
-    async importHistory(file) {
-      try {
-        const text = await file.text()
-        const data = JSON.parse(text)
-        if (data.history && Array.isArray(data.history)) {
-          // 合并历史记录，去重
-          const existingIds = new Set(
-            this.history.map(item => `${item.song.id}-${item.timestamp}`)
-          )
-          const newItems = data.history.filter(item =>
-            !existingIds.has(`${item.song.id}-${item.timestamp}`)
-          )
-          this.history = [...this.history, ...newItems]
-            .sort((a, b) => b.timestamp - a.timestamp)
-            .slice(0, this.maxHistorySize)
-          // 合并播放次数
-          if (data.playCount) {
-            Object.entries(data.playCount).forEach(([songId, count]) => {
-              this.playCount[songId] = (this.playCount[songId] || 0) + count
-            })
           } else {
-            // 如果导入的数据没有播放次数，重新计算
-            this.playCount = {}
-            this.history.forEach(item => {
-              const songId = item.song.id
-              this.playCount[songId] = (this.playCount[songId] || 0) + 1
-            })
           }
-          this.saveHistory()
-          return true
         }
-        return false
-      } catch (error) {
-        console.error('导入播放历史失败:', error)
-        return false
       }
     }
   }
 })

 import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+/**
+ * 播放历史记录 Store - 单一职责：管理用户的播放历史
+ * 自动记录播放过的歌曲，按时间倒序排列
+ */
+export const useHistoryStore = defineStore('history', () => {
+  // 状态
+  const history = ref([])
+  const playCount = ref(new Map()) // 使用Map提高性能
+  // 常量
+  const STORAGE_KEY = 'vue-music-play-history'
+  const MAX_HISTORY_SIZE = 1000
+  const AUTO_CLEANUP_DAYS = 90 // 90天自动清理
+  // 计算属性
+  const totalPlays = computed(() => history.value.length)
+  const uniqueSongs = computed(() => new Set(history.value.map(item => `${item.song.source}-${item.song.id}`)).size)
+  const isEmpty = computed(() => history.value.length === 0)
+  // 获取最近播放的歌曲（去重）
+  const getRecentSongs = (limit = 50) => {
+    const songMap = new Map()
+    const recent = []
+    // 从最新的开始遍历，保持最新的记录
+    for (let i = history.value.length - 1; i >= 0; i--) {
+      const item = history.value[i]
+      const songKey = `${item.song.source}-${item.song.id}`
+      if (!songMap.has(songKey)) {
+        songMap.set(songKey, true)
+        recent.push(item)
+        if (recent.length >= limit) break
+      }
+    }
+    return recent
+  }
+  // 按日期分组的历史记录
+  const getGroupedByDate = () => {
+    const groups = {}
+    history.value.forEach(item => {
+      const date = new Date(item.timestamp).toLocaleDateString('zh-CN')
+      if (!groups[date]) {
+        groups[date] = []
+      }
+      groups[date].push(item)
+    })
+    return groups
+  }
+  // 播放统计信息
+  const getPlayStats = () => {
+    const stats = {
+      totalPlays: totalPlays.value,
+      uniqueSongs: uniqueSongs.value,
+      totalDuration: 0,
+      topArtists: new Map(),
+      topSongs: new Map()
+    }
+    history.value.forEach(item => {
+      stats.totalDuration += item.playTime || 0
+      // 统计艺术家
+      const artist = item.song.artist || '未知艺术家'
+      stats.topArtists.set(artist, (stats.topArtists.get(artist) || 0) + 1)
+      // 统计歌曲
+      const songKey = `${item.song.artist} - ${item.song.name}`
+      stats.topSongs.set(songKey, (stats.topSongs.get(songKey) || 0) + 1)
+    })
+    // 转换为排序后的数组
+    stats.topArtists = Array.from(stats.topArtists.entries())
+      .sort(([, a], [, b]) => b - a)
+      .slice(0, 20)
+    stats.topSongs = Array.from(stats.topSongs.entries())
+      .sort(([, a], [, b]) => b - a)
+      .slice(0, 50)
+    return stats
+  }
+  // 获取单首歌曲播放次数
+  const getSongPlayCount = (song) => {
+    if (!song || !song.id) return 0
+    const songKey = `${song.source}-${song.id}`
+    return playCount.value.get(songKey) || 0
+  }
+  // 获取热门歌曲（按播放次数排序）
+  const getTopPlayedSongs = (limit = 50) => {
+    const songCounts = new Map()
+    const songInfo = new Map()
+    // 统计每首歌的播放次数，保留最新的歌曲信息
+    history.value.forEach(item => {
+      const songKey = `${item.song.source}-${item.song.id}`
+      songCounts.set(songKey, (songCounts.get(songKey) || 0) + 1)
+      if (!songInfo.has(songKey)) {
+        songInfo.set(songKey, item.song)
       }
+    })
+    return Array.from(songCounts.entries())
+      .sort(([, a], [, b]) => b - a)
+      .slice(0, limit)
+      .map(([songKey, count]) => ({
+        song: songInfo.get(songKey),
+        count,
+        songKey
+      }))
+      .filter(item => item.song)
+  }
+  // 核心方法：添加播放记录
+  const addToHistory = (song, playTime = 0) => {
+    if (!song || !song.id) {
+      console.warn('无效的歌曲信息，无法添加到历史记录')
+      return { success: false, message: '歌曲信息无效' }
+    }
+    const historyItem = {
+      song: { ...song },
+      timestamp: Date.now(),
+      playTime: Math.max(0, playTime), // 播放时长（秒）
+      source: song.source || 'unknown'
+    }
+    // 添加到历史记录开头（最新的在前面）
+    history.value.unshift(historyItem)
+    // 更新播放次数统计
+    const songKey = `${song.source}-${song.id}`
+    playCount.value.set(songKey, (playCount.value.get(songKey) || 0) + 1)
+    // 限制历史记录数量
+    if (history.value.length > MAX_HISTORY_SIZE) {
+      history.value = history.value.slice(0, MAX_HISTORY_SIZE)
     }
+    saveHistory()
+    return { success: true, message: '已添加到播放历史' }
+  }
+  // 删除历史记录
+  const removeFromHistory = (index) => {
+    if (index < 0 || index >= history.value.length) {
+      return { success: false, message: '无效的索引' }
+    }
+    const removedItem = history.value.splice(index, 1)[0]
+    // 重新计算播放次数（简单方式：重新统计所有记录）
+    recalculatePlayCount()
+    saveHistory()
+    return { success: true, message: '已从播放历史移除' }
+  }
+  // 批量删除历史记录
+  const removeMultipleFromHistory = (indices) => {
+    if (!Array.isArray(indices) || indices.length === 0) {
+      return { success: false, message: '无效的索引数组' }
+    }
+    // 按降序排序，避免删除时索引变化
+    const sortedIndices = [...indices].sort((a, b) => b - a)
+    let removedCount = 0
+    sortedIndices.forEach(index => {
+      if (index >= 0 && index < history.value.length) {
+        history.value.splice(index, 1)
+        removedCount++
       }
+    })
+    if (removedCount > 0) {
+      recalculatePlayCount()
+      saveHistory()
+    }
+    return {
+      success: removedCount > 0,
+      removedCount,
+      message: `已删除 ${removedCount} 条播放记录`
+    }
+  }
+  // 清空历史记录
+  const clearHistory = () => {
+    history.value = []
+    playCount.value.clear()
+    saveHistory()
+    return { success: true, message: '播放历史已清空' }
+  }
+  // 按日期清理历史记录
+  const clearHistoryBefore = (date) => {
+    const targetTime = new Date(date).getTime()
+    if (isNaN(targetTime)) {
+      return { success: false, message: '无效的日期' }
+    }
+    const originalLength = history.value.length
+    history.value = history.value.filter(item => item.timestamp >= targetTime)
+    const removedCount = originalLength - history.value.length
+    if (removedCount > 0) {
+      recalculatePlayCount()
+      saveHistory()
+    }
+    return {
+      success: removedCount > 0,
+      removedCount,
+      message: `已清理 ${removedCount} 条历史记录`
+    }
+  }
+  // 自动清理过期记录
+  const autoCleanup = () => {
+    const cutoffTime = Date.now() - (AUTO_CLEANUP_DAYS * 24 * 60 * 60 * 1000)
+    return clearHistoryBefore(cutoffTime)
+  }
+  // 搜索历史记录
+  const searchHistory = (keyword) => {
+    if (!keyword || !keyword.trim()) {
+      return history.value
+    }
+    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))
+    )
+  }
+  // 按艺术家筛选
+  const getHistoryByArtist = (artist) => {
+    return history.value.filter(item =>
+      item.song.artist === artist
+    )
+  }
+  // 按时间范围筛选
+  const getHistoryByDateRange = (startDate, endDate) => {
+    const start = new Date(startDate).getTime()
+    const end = new Date(endDate).getTime()
+    if (isNaN(start) || isNaN(end)) {
+      return []
+    }
+    return history.value.filter(item =>
+      item.timestamp >= start && item.timestamp <= end
+    )
+  }
+  // 重新计算播放次数（用于删除记录后的统计更新）
+  const recalculatePlayCount = () => {
+    playCount.value.clear()
+    history.value.forEach(item => {
+      const songKey = `${item.song.source}-${item.song.id}`
+      playCount.value.set(songKey, (playCount.value.get(songKey) || 0) + 1)
+    })
+  }
+  // 导出播放历史
+  const exportHistory = () => {
+    try {
+      const data = {
+        history: history.value,
+        playCount: Object.fromEntries(playCount.value), // 转换Map为普通对象
+        stats: getPlayStats(),
+        exportTime: Date.now(),
+        version: '2.0',
+        type: 'play-history'
       }
+      const blob = new Blob([JSON.stringify(data, null, 2)], {
+        type: 'application/json'
+      })
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `play-history-${new Date().toISOString().split('T')[0]}.json`
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      URL.revokeObjectURL(url)
+      return { success: true, message: '导出成功' }
+    } catch (error) {
+      console.error('导出播放历史失败:', error)
+      return { success: false, message: '导出失败' }
+    }
+  }
+  // 保存到本地存储
+  const saveHistory = () => {
+    try {
+      const data = {
+        history: history.value,
+        playCount: Object.fromEntries(playCount.value), // 转换Map为普通对象保存
+        lastUpdated: Date.now(),
+        version: '2.0'
+      }
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
+    } catch (error) {
+      console.error('保存播放历史失败:', error)
+    }
+  }
+  // 从本地存储加载
+  const loadHistory = () => {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY)
+      if (saved) {
+        const data = JSON.parse(saved)
+        // 兼容旧版本数据格式
+        history.value = Array.isArray(data.history) ? data.history : []
+        // 处理播放次数数据（兼容新旧格式）
+        if (data.playCount) {
+          if (data.playCount instanceof Map) {
+            playCount.value = new Map(data.playCount)
+          } else if (typeof data.playCount === 'object') {
+            playCount.value = new Map(Object.entries(data.playCount))
           }
+        } else {
+          // 如果没有播放次数数据，重新计算
+          recalculatePlayCount()
         }
+        // 自动清理过期记录
+        const cleanupResult = autoCleanup()
+        if (cleanupResult.removedCount > 0) {
+          console.log(`自动清理了 ${cleanupResult.removedCount} 条过期历史记录`)
+        }
       }
+      // 兼容旧存储key的数据迁移
+      const oldData = localStorage.getItem('music-history')
+      if (oldData && !saved) {
+        const data = JSON.parse(oldData)
+        if (Array.isArray(data.history)) {
+          history.value = data.history
+          if (data.playCount && typeof data.playCount === 'object') {
+            playCount.value = new Map(Object.entries(data.playCount))
           } else {
+            recalculatePlayCount()
           }
+          // 保存到新格式并删除旧数据
+          saveHistory()
+          localStorage.removeItem('music-history')
+          console.log('已迁移播放历史数据到新格式')
         }
       }
+    } catch (error) {
+      console.error('加载播放历史失败:', error)
+      history.value = []
+      playCount.value = new Map()
     }
   }
+  return {
+    // 状态
+    history: computed(() => history.value),
+    // 计算属性
+    totalPlays,
+    uniqueSongs,
+    isEmpty,
+    // 获取方法
+    getRecentSongs,
+    getGroupedByDate,
+    getPlayStats,
+    getSongPlayCount,
+    getTopPlayedSongs,
+    // 核心方法
+    addToHistory,
+    removeFromHistory,
+    removeMultipleFromHistory,
+    clearHistory,
+    clearHistoryBefore,
+    autoCleanup,
+    // 搜索和筛选
+    searchHistory,
+    getHistoryByArtist,
+    getHistoryByDateRange,
+    // 工具方法
+    recalculatePlayCount,
+    exportHistory,
+    // 存储管理
+    saveHistory,
+    loadHistory
+  }
 })

src/stores/player.js CHANGED Viewed

@@ -2,123 +2,128 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { musicApi } from '@/services/musicApi'
 export const usePlayerStore = defineStore('player', () => {
-  // 状态
   const currentSong = ref(null)
-  const playlist = ref([])
-  const currentIndex = ref(-1)
   const isPlaying = ref(false)
   const currentTime = ref(0)
   const duration = ref(0)
   const volume = ref(80)
-  const playMode = ref('list') // 'list', 'random', 'single'
   const audioSrc = ref('')
   const muted = ref(false)
-  const lastVolume = ref(80) // 记住静音前的音量
-  const cachedCovers = ref(new Map()) // 封面缓存
-  const cachedLyrics = ref(new Map()) // 歌词缓存
-  const audioElement = ref(null) // 添加音频元素引用
   const isManualSeeking = ref(false) // 标志是否正在手动拖动进度条
   // 计算属性
-  const hasPrevious = computed(() => currentIndex.value > 0)
-  const hasNext = computed(() => currentIndex.value < playlist.value.length - 1)
   const progress = computed(() => {
     return duration.value > 0 ? (currentTime.value / duration.value) * 100 : 0
   })
   const effectiveVolume = computed(() => muted.value ? 0 : volume.value)
   const canRestore = computed(() => currentSong.value && audioSrc.value)
-  // 方法
-  const setCurrentSong = (song, index = -1, restoreProgress = false) => {
-    currentSong.value = song
-    if (index >= 0) {
-      currentIndex.value = index
-    } else {
-      // 在播放列表中查找歌曲
-      const foundIndex = playlist.value.findIndex(s => s.id === song.id && s.source === song.source)
-      currentIndex.value = foundIndex >= 0 ? foundIndex : -1
     }
     // 默认重置播放时间为0，除非明确要求恢复进度
     if (!restoreProgress) {
       currentTime.value = 0
     }
     savePlayerState()
   }
-  const setPlaylist = (songs, startIndex = 0) => {
-    playlist.value = songs
-    if (songs.length > 0 && startIndex >= 0 && startIndex < songs.length) {
-      setCurrentSong(songs[startIndex], startIndex)
-    }
-    savePlayerState()
-  }
-  const addToPlaylist = (song) => {
-    const exists = playlist.value.some(s => s.id === song.id && s.source === song.source)
-    if (!exists) {
-      playlist.value.push(song)
-      savePlayerState()
     }
-  }
-  const removeFromPlaylist = (index) => {
-    if (index >= 0 && index < playlist.value.length) {
-      playlist.value.splice(index, 1)
-      if (currentIndex.value > index) {
-        currentIndex.value--
-      } else if (currentIndex.value === index) {
-        if (playlist.value.length === 0) {
-          currentSong.value = null
-          currentIndex.value = -1
-        } else {
-          const newIndex = Math.min(currentIndex.value, playlist.value.length - 1)
-          setCurrentSong(playlist.value[newIndex], newIndex)
         }
       }
-      savePlayerState()
     }
   }
-  const setPlayMode = (mode) => {
-    playMode.value = mode
     savePlayerState()
   }
-  const setVolume = (vol) => {
-    const newVolume = Math.max(0, Math.min(100, vol))
-    volume.value = newVolume
-    if (newVolume > 0) {
-      muted.value = false
-      lastVolume.value = newVolume
-    }
     savePlayerState()
   }
-  const toggleMute = () => {
-    if (muted.value) {
-      muted.value = false
-      volume.value = lastVolume.value
-    } else {
-      muted.value = true
-      lastVolume.value = volume.value
-      volume.value = 0
     }
-    savePlayerState()
-  }
-  const increaseVolume = (step = 5) => {
-    const newVolume = Math.min(100, volume.value + step)
-    setVolume(newVolume)
   }
-  const decreaseVolume = (step = 5) => {
-    const newVolume = Math.max(0, volume.value - step)
-    setVolume(newVolume)
   }
   const setPlayingState = (playing) => {
     isPlaying.value = playing
   }
@@ -143,6 +148,7 @@ export const usePlayerStore = defineStore('player', () => {
     audioElement.value = element
   }
   const seekTo = (time) => {
     if (time >= 0 && time <= duration.value && isFinite(time)) {
       // 设置手动拖动标志
@@ -159,7 +165,6 @@ export const usePlayerStore = defineStore('player', () => {
         if (!isPlaying.value && audioSrc.value) {
           audioElement.value.play().then(() => {
             setPlayingState(true)
-            console.log('拖动进度条后开始播放:', time)
           }).catch(error => {
             console.log('自动播放被阻止:', error)
           })
@@ -176,48 +181,45 @@ export const usePlayerStore = defineStore('player', () => {
     return false
   }
-  // 播放控制方法
-  const togglePlay = () => {
-    setPlayingState(!isPlaying.value)
     savePlayerState()
   }
-  const previous = () => {
-    const prevSong = playPrevious()
-    return prevSong
   }
-  const next = () => {
-    const nextSong = playNext()
-    return nextSong
   }
-  const togglePlayMode = () => {
-    const modes = ['list', 'random', 'single']
-    const currentIndex = modes.indexOf(playMode.value)
-    const nextIndex = (currentIndex + 1) % modes.length
-    setPlayMode(modes[nextIndex])
   }
-  const playSong = async (song, index = -1) => {
-    setCurrentSong(song, index, false) // 不恢复进度，从0开始播放
-    setPlayingState(false) // 先暂停，等获取到URL后再播放
-    // 获取音频URL
     try {
-      const audioUrl = await getAudioUrl(song)
-      if (audioUrl) {
-        setAudioSrc(audioUrl)
-        setPlayingState(true)
-      }
-    } catch (error) {
-      console.error('播放歌曲失败:', error)
-    }
-  }
-  const getAudioUrl = async (song) => {
-    try {
-      const result = await musicApi.getMusicUrl(song.source, song.id, '320')
       return result?.url || null
     } catch (error) {
       console.error('获取音频URL失败:', error)
@@ -226,73 +228,33 @@ export const usePlayerStore = defineStore('player', () => {
   }
   const changeQuality = async (quality) => {
-    // 音质切换逻辑
     if (currentSong.value) {
-      const newUrl = await getAudioUrl(currentSong.value)
       if (newUrl) {
         setAudioSrc(newUrl)
       }
     }
-  }
-  // 播放控制
-  const playNext = () => {
-    if (!playlist.value.length) return null
-    let nextIndex = currentIndex.value
-    switch (playMode.value) {
-      case 'random':
-        nextIndex = Math.floor(Math.random() * playlist.value.length)
-        break
-      case 'single':
-        // 单曲循环，保持当前歌曲
-        break
-      case 'list':
-      default:
-        nextIndex = hasNext.value ? currentIndex.value + 1 : 0
-        break
-    }
-    if (nextIndex < playlist.value.length) {
-      setCurrentSong(playlist.value[nextIndex], nextIndex, false) // 不恢复进度
-      return playlist.value[nextIndex]
-    }
-    return null
-  }
-  const playPrevious = () => {
-    if (!playlist.value.length) return null
-    let prevIndex = currentIndex.value
-    switch (playMode.value) {
-      case 'random':
-        prevIndex = Math.floor(Math.random() * playlist.value.length)
-        break
-      case 'single':
-        // 单曲循环，保持当前歌曲
-        break
-      case 'list':
-      default:
-        prevIndex = hasPrevious.value ? currentIndex.value - 1 : playlist.value.length - 1
-        break
-    }
-    if (prevIndex >= 0 && prevIndex < playlist.value.length) {
-      setCurrentSong(playlist.value[prevIndex], prevIndex, false) // 不恢复进度
-      return playlist.value[prevIndex]
-    }
-    return null
   }
   // 资源缓存管理
-  // 使用 Map 来存储正在进行的请求，避免重复请求
-  const pendingRequests = new Map()
   const getCachedCover = (song, size = 300) => {
     if (!song) return null
-    // 检查多种可能的图片ID字段（与MiniPlayer和FullPlayerPage保持一致）
     const picId = song.pic_id || song.picId || song.albumId
     if (!picId) return null
     const key = `${song.source}-${picId}-${size}`
@@ -302,7 +264,6 @@ export const usePlayerStore = defineStore('player', () => {
   const setCachedCover = (song, coverUrl, size = 300) => {
     if (!song || !coverUrl) return
-    // 检查多种可能的图片ID字段（与MiniPlayer和FullPlayerPage保持一致）
     const picId = song.pic_id || song.picId || song.albumId
     if (!picId) return
     const key = `${song.source}-${picId}-${size}`
@@ -313,11 +274,9 @@ export const usePlayerStore = defineStore('player', () => {
     }
   }
-  // 新增：获取专辑封面（带请求去重）
   const getAlbumCover = async (song, size = 300) => {
     if (!song) return null
-    // 检查多种可能的图片ID字段
     const picId = song.pic_id || song.picId || song.albumId
     if (!picId) return null
@@ -341,7 +300,6 @@ export const usePlayerStore = defineStore('player', () => {
     try {
       const coverUrl = await request
       if (coverUrl) {
-        // 缓存结果
         setCachedCover(song, coverUrl, size)
       }
       return coverUrl
@@ -349,12 +307,22 @@ export const usePlayerStore = defineStore('player', () => {
       console.error('获取专辑封面失败:', error)
       return null
     } finally {
-      // 清除正在进行的请求
       pendingRequests.delete(key)
     }
   }
-  // 新增：获取歌词（带请求去重）
   const getLyricsWithDedup = async (song) => {
     if (!song) return null
@@ -378,7 +346,6 @@ export const usePlayerStore = defineStore('player', () => {
     try {
       const lyricsData = await request
       if (lyricsData) {
-        // 缓存结果
         setCachedLyrics(song, lyricsData)
       }
       return lyricsData
@@ -386,39 +353,34 @@ export const usePlayerStore = defineStore('player', () => {
       console.error('获取歌词失败:', error)
       return { lyric: '', tlyric: '' }
     } finally {
-      // 清除正在进行的请求
       pendingRequests.delete(key)
     }
   }
-  const getCachedLyrics = (song) => {
-    if (!song) return null
-    const key = `${song.source}-${song.lyric_id || song.id}`
-    return cachedLyrics.value.get(key) || null
-  }
-  const setCachedLyrics = (song, lyricsData) => {
-    if (!song || !lyricsData) return
-    const key = `${song.source}-${song.lyric_id || song.id}`
-    cachedLyrics.value.set(key, lyricsData)
-  }
   const clearResourceCache = () => {
     cachedCovers.value.clear()
     cachedLyrics.value.clear()
   }
   // 本地存储
   const savePlayerState = () => {
-    // 构建歌曲唯一标识
     const songKey = currentSong.value ? `${currentSong.value.source}-${currentSong.value.id}` : null
     const state = {
       currentSong: currentSong.value,
-      playlist: playlist.value,
-      currentIndex: currentIndex.value,
       volume: volume.value,
-      playMode: playMode.value,
       muted: muted.value,
       lastVolume: lastVolume.value,
       audioSrc: audioSrc.value,
@@ -432,7 +394,7 @@ export const usePlayerStore = defineStore('player', () => {
     }
     try {
-      localStorage.setItem('vue-music-player-state', JSON.stringify(state))
     } catch (error) {
       console.error('保存播放器状态失败:', error)
     }
@@ -440,7 +402,7 @@ export const usePlayerStore = defineStore('player', () => {
   const loadPlayerState = () => {
     try {
-      const saved = localStorage.getItem('vue-music-player-state')
       if (saved) {
         const state = JSON.parse(saved)
@@ -456,13 +418,10 @@ export const usePlayerStore = defineStore('player', () => {
         // 恢复播放器状态
         volume.value = state.volume !== undefined ? state.volume : 80
-        playMode.value = state.playMode || 'list'
         muted.value = state.muted || false
         lastVolume.value = state.lastVolume || 80
         audioSrc.value = state.audioSrc || ''
         duration.value = state.duration || 0
-        playlist.value = state.playlist || []
-        currentIndex.value = state.currentIndex !== undefined ? state.currentIndex : -1
         // 智能恢复播放进度：只有歌曲匹配时才恢复进度
         if (state.currentSong && state.savedProgress) {
@@ -493,7 +452,7 @@ export const usePlayerStore = defineStore('player', () => {
   const clearPlayerState = () => {
     try {
-      localStorage.removeItem('vue-music-player-state')
     } catch (error) {
       console.error('清除播放器状态失败:', error)
     }
@@ -504,12 +463,8 @@ export const usePlayerStore = defineStore('player', () => {
     if (!canRestore.value) return false
     try {
-      // 重新获取音频URL（因为URL可能过期）
       if (currentSong.value) {
-        const freshUrl = await musicApi.getAudioUrl(
-          currentSong.value.source,
-          currentSong.value.id
-        )
         if (freshUrl) {
           audioSrc.value = freshUrl
@@ -545,65 +500,66 @@ export const usePlayerStore = defineStore('player', () => {
   }
   return {
-    // 状态
-    currentSong,
-    playlist,
-    currentIndex,
-    isPlaying,
-    currentTime,
-    duration,
-    volume,
-    playMode,
-    audioSrc,
-    muted,
-    lastVolume,
     // 计算属性
-    hasPrevious,
-    hasNext,
     progress,
     effectiveVolume,
     canRestore,
-    // 方法
     setCurrentSong,
-    setPlaylist,
-    addToPlaylist,
-    removeFromPlaylist,
-    setPlayMode,
-    setVolume,
-    toggleMute,
-    increaseVolume,
-    decreaseVolume,
     setPlayingState,
     setCurrentTime,
     setDuration,
     setAudioSrc,
     setAudioElement,
     seekTo,
-    togglePlay,
-    previous,
-    next,
-    togglePlayMode,
-    playSong,
     getAudioUrl,
     changeQuality,
-    playNext,
-    playPrevious,
-    savePlayerState,
-    loadPlayerState,
-    clearPlayerState,
-    restorePlaybackSession,
-    startPeriodicSave,
-    stopPeriodicSave,
-    // 资源缓存管理
     getCachedCover,
     setCachedCover,
-    getAlbumCover,  // 添加这一行
-    getLyricsWithDedup,  // 新增歌词去重方法
     getCachedLyrics,
     setCachedLyrics,
-    clearResourceCache
   }
 })

 import { ref, computed } from 'vue'
 import { musicApi } from '@/services/musicApi'
+/**
+ * 播放器控制 Store - 单一职责：管理音频播放控制逻辑
+ * 不包含播放队列管理，专注于播放器状态和音频控制
+ */
 export const usePlayerStore = defineStore('player', () => {
+  // 播放器状态
   const currentSong = ref(null)
   const isPlaying = ref(false)
   const currentTime = ref(0)
   const duration = ref(0)
   const volume = ref(80)
   const audioSrc = ref('')
   const muted = ref(false)
+  const lastVolume = ref(80)
+  const audioElement = ref(null)
   const isManualSeeking = ref(false) // 标志是否正在手动拖动进度条
+  // 资源缓存
+  const cachedCovers = ref(new Map())
+  const cachedLyrics = ref(new Map())
+  const pendingRequests = new Map() // 请求去重
+  // 常量
+  const STORAGE_KEY = 'vue-music-player-state'
+  const VOLUME_STEP = 5
   // 计算属性
   const progress = computed(() => {
     return duration.value > 0 ? (currentTime.value / duration.value) * 100 : 0
   })
   const effectiveVolume = computed(() => muted.value ? 0 : volume.value)
   const canRestore = computed(() => currentSong.value && audioSrc.value)
+  const formattedCurrentTime = computed(() => formatTime(currentTime.value))
+  const formattedDuration = computed(() => formatTime(duration.value))
+  // 工具函数
+  const formatTime = (seconds) => {
+    if (!seconds || isNaN(seconds)) return '0:00'
+    const mins = Math.floor(seconds / 60)
+    const secs = Math.floor(seconds % 60)
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+  }
+  // 播放控制方法
+  const setCurrentSong = (song, restoreProgress = false) => {
+    if (!song) {
+      currentSong.value = null
+      audioSrc.value = ''
+      return false
     }
+    currentSong.value = { ...song }
     // 默认重置播放时间为0，除非明确要求恢复进度
     if (!restoreProgress) {
       currentTime.value = 0
     }
     savePlayerState()
+    return true
   }
+  const playSong = async (song, restoreProgress = false) => {
+    if (!song || !song.id) {
+      console.error('无效的歌曲信息')
+      return { success: false, message: '歌曲信息无效' }
     }
+    // 设置当前歌曲
+    setCurrentSong(song, restoreProgress)
+    setPlayingState(false) // 先暂停，等获取到URL后再播放
+    try {
+      const audioUrl = await getAudioUrl(song)
+      if (audioUrl) {
+        setAudioSrc(audioUrl)
+        // 如果不是恢复进度模式，开始播放
+        if (!restoreProgress) {
+          setPlayingState(true)
         }
+        // 添加到播放历史
+        await addToHistory(song)
+        return { success: true, message: '开始播放' }
+      } else {
+        return { success: false, message: '获取音频失败' }
       }
+    } catch (error) {
+      console.error('播放歌曲失败:', error)
+      return { success: false, message: '播放失败' }
     }
   }
+  const togglePlay = () => {
+    setPlayingState(!isPlaying.value)
     savePlayerState()
   }
+  const pause = () => {
+    setPlayingState(false)
     savePlayerState()
   }
+  const resume = () => {
+    if (currentSong.value && audioSrc.value) {
+      setPlayingState(true)
+      savePlayerState()
     }
   }
+  const stop = () => {
+    setPlayingState(false)
+    setCurrentTime(0)
+    savePlayerState()
   }
+  // 状态设置方法
   const setPlayingState = (playing) => {
     isPlaying.value = playing
   }
     audioElement.value = element
   }
+  // 进度控制
   const seekTo = (time) => {
     if (time >= 0 && time <= duration.value && isFinite(time)) {
       // 设置手动拖动标志
         if (!isPlaying.value && audioSrc.value) {
           audioElement.value.play().then(() => {
             setPlayingState(true)
           }).catch(error => {
             console.log('自动播放被阻止:', error)
           })
     return false
   }
+  // 音量控制
+  const setVolume = (vol) => {
+    const newVolume = Math.max(0, Math.min(100, vol))
+    volume.value = newVolume
+    if (newVolume > 0) {
+      muted.value = false
+      lastVolume.value = newVolume
+    }
     savePlayerState()
   }
+  const toggleMute = () => {
+    if (muted.value) {
+      muted.value = false
+      volume.value = lastVolume.value
+    } else {
+      muted.value = true
+      lastVolume.value = volume.value
+      volume.value = 0
+    }
+    savePlayerState()
   }
+  const increaseVolume = (step = VOLUME_STEP) => {
+    const newVolume = Math.min(100, volume.value + step)
+    setVolume(newVolume)
   }
+  const decreaseVolume = (step = VOLUME_STEP) => {
+    const newVolume = Math.max(0, volume.value - step)
+    setVolume(newVolume)
   }
+  // 音频URL获取
+  const getAudioUrl = async (song, quality = '320') => {
+    if (!song || !song.id) return null
     try {
+      const result = await musicApi.getMusicUrl(song.source, song.id, quality)
       return result?.url || null
     } catch (error) {
       console.error('获取音频URL失败:', error)
   }
   const changeQuality = async (quality) => {
     if (currentSong.value) {
+      const newUrl = await getAudioUrl(currentSong.value, quality)
       if (newUrl) {
+        const wasPlaying = isPlaying.value
+        const currentTimeBackup = currentTime.value
         setAudioSrc(newUrl)
+        // 恢复播放状态和进度
+        if (wasPlaying) {
+          setTimeout(() => {
+            if (audioElement.value) {
+              audioElement.value.currentTime = currentTimeBackup
+              setPlayingState(true)
+            }
+          }, 100)
+        }
+        return { success: true, message: '音质切换成功' }
       }
     }
+    return { success: false, message: '音质切换失败' }
   }
   // 资源缓存管理
   const getCachedCover = (song, size = 300) => {
     if (!song) return null
     const picId = song.pic_id || song.picId || song.albumId
     if (!picId) return null
     const key = `${song.source}-${picId}-${size}`
   const setCachedCover = (song, coverUrl, size = 300) => {
     if (!song || !coverUrl) return
     const picId = song.pic_id || song.picId || song.albumId
     if (!picId) return
     const key = `${song.source}-${picId}-${size}`
     }
   }
   const getAlbumCover = async (song, size = 300) => {
     if (!song) return null
     const picId = song.pic_id || song.picId || song.albumId
     if (!picId) return null
     try {
       const coverUrl = await request
       if (coverUrl) {
         setCachedCover(song, coverUrl, size)
       }
       return coverUrl
       console.error('获取专辑封面失败:', error)
       return null
     } finally {
       pendingRequests.delete(key)
     }
   }
+  const getCachedLyrics = (song) => {
+    if (!song) return null
+    const key = `${song.source}-${song.lyric_id || song.id}`
+    return cachedLyrics.value.get(key) || null
+  }
+  const setCachedLyrics = (song, lyricsData) => {
+    if (!song || !lyricsData) return
+    const key = `${song.source}-${song.lyric_id || song.id}`
+    cachedLyrics.value.set(key, lyricsData)
+  }
   const getLyricsWithDedup = async (song) => {
     if (!song) return null
     try {
       const lyricsData = await request
       if (lyricsData) {
         setCachedLyrics(song, lyricsData)
       }
       return lyricsData
       console.error('获取歌词失败:', error)
       return { lyric: '', tlyric: '' }
     } finally {
       pendingRequests.delete(key)
     }
   }
   const clearResourceCache = () => {
     cachedCovers.value.clear()
     cachedLyrics.value.clear()
+    pendingRequests.clear()
+  }
+  // 添加到播放历史
+  const addToHistory = async (song) => {
+    try {
+      const { useHistoryStore } = await import('@/stores/history')
+      const historyStore = useHistoryStore()
+      historyStore.addToHistory(song)
+    } catch (error) {
+      console.error('添加播放历史失败:', error)
+    }
   }
   // 本地存储
   const savePlayerState = () => {
     const songKey = currentSong.value ? `${currentSong.value.source}-${currentSong.value.id}` : null
     const state = {
       currentSong: currentSong.value,
       volume: volume.value,
       muted: muted.value,
       lastVolume: lastVolume.value,
       audioSrc: audioSrc.value,
     }
     try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
     } catch (error) {
       console.error('保存播放器状态失败:', error)
     }
   const loadPlayerState = () => {
     try {
+      const saved = localStorage.getItem(STORAGE_KEY)
       if (saved) {
         const state = JSON.parse(saved)
         // 恢复播放器状态
         volume.value = state.volume !== undefined ? state.volume : 80
         muted.value = state.muted || false
         lastVolume.value = state.lastVolume || 80
         audioSrc.value = state.audioSrc || ''
         duration.value = state.duration || 0
         // 智能恢复播放进度：只有歌曲匹配时才恢复进度
         if (state.currentSong && state.savedProgress) {
   const clearPlayerState = () => {
     try {
+      localStorage.removeItem(STORAGE_KEY)
     } catch (error) {
       console.error('清除播放器状态失败:', error)
     }
     if (!canRestore.value) return false
     try {
       if (currentSong.value) {
+        const freshUrl = await getAudioUrl(currentSong.value)
         if (freshUrl) {
           audioSrc.value = freshUrl
   }
   return {
+    // 播放器状态
+    currentSong: computed(() => currentSong.value),
+    isPlaying: computed(() => isPlaying.value),
+    currentTime: computed(() => currentTime.value),
+    duration: computed(() => duration.value),
+    volume: computed(() => volume.value),
+    audioSrc: computed(() => audioSrc.value),
+    muted: computed(() => muted.value),
+    lastVolume: computed(() => lastVolume.value),
     // 计算属性
     progress,
     effectiveVolume,
     canRestore,
+    formattedCurrentTime,
+    formattedDuration,
+    // 播放控制
     setCurrentSong,
+    playSong,
+    togglePlay,
+    pause,
+    resume,
+    stop,
+    // 状态设置
     setPlayingState,
     setCurrentTime,
     setDuration,
     setAudioSrc,
     setAudioElement,
+    // 进度控制
     seekTo,
+    // 音量控制
+    setVolume,
+    toggleMute,
+    increaseVolume,
+    decreaseVolume,
+    // 音频管理
     getAudioUrl,
     changeQuality,
+    // 资源缓存
     getCachedCover,
     setCachedCover,
+    getAlbumCover,
     getCachedLyrics,
     setCachedLyrics,
+    getLyricsWithDedup,
+    clearResourceCache,
+    // 存储管理
+    savePlayerState,
+    loadPlayerState,
+    clearPlayerState,
+    restorePlaybackSession,
+    startPeriodicSave,
+    stopPeriodicSave
   }
 })

src/stores/playlist.js ADDED Viewed

	@@ -0,0 +1,239 @@

+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+/**
+ * 歌单管理 Store
+ * 管理用户创建的歌单集合，不包含播放队列逻辑
+ */
+export const usePlaylistStore = defineStore('playlist', () => {
+  // 状态
+  const playlists = ref([])
+  const currentViewingPlaylist = ref(null) // 当前查看的歌单（用于详情页）
+  // 常量
+  const MAX_SONGS_PER_PLAYLIST = 500 // 每个歌单最多歌曲数
+  const STORAGE_KEY = 'vue-music-playlists'
+  // 计算属性
+  const totalPlaylists = computed(() => playlists.value.length)
+  const totalSongs = computed(() => {
+    return playlists.value.reduce((total, playlist) => total + playlist.songs.length, 0)
+  })
+  // 歌单管理方法
+  const createPlaylist = (name, description = '') => {
+    const playlist = {
+      id: `playlist_${Date.now()}`,
+      name: name.trim(),
+      description: description.trim(),
+      songs: [],
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      cover: null, // 使用第一首歌的封面
+      isDefault: false // 用户创建的歌单
+    }
+    playlists.value.unshift(playlist) // 最新的在前面
+    saveToStorage()
+    return playlist
+  }
+  const deletePlaylist = (playlistId) => {
+    const index = playlists.value.findIndex(p => p.id === playlistId)
+    if (index === -1) return false
+    playlists.value.splice(index, 1)
+    // 如果删除的是当前查看的歌单，清空当前状态
+    if (currentViewingPlaylist.value?.id === playlistId) {
+      currentViewingPlaylist.value = null
+    }
+    saveToStorage()
+    return true
+  }
+  const updatePlaylist = (playlistId, updates) => {
+    const playlist = playlists.value.find(p => p.id === playlistId)
+    if (!playlist) return false
+    Object.assign(playlist, {
+      ...updates,
+      updatedAt: Date.now()
+    })
+    saveToStorage()
+    return true
+  }
+  const getPlaylist = (playlistId) => {
+    return playlists.value.find(p => p.id === playlistId) || null
+  }
+  // 歌曲管理方法
+  const addSongToPlaylist = (playlistId, song) => {
+    const playlist = getPlaylist(playlistId)
+    if (!playlist) {
+      return { success: false, message: '歌单不存在' }
+    }
+    // 检查数量限制
+    if (playlist.songs.length >= MAX_SONGS_PER_PLAYLIST) {
+      return { success: false, message: `歌单最多只能添加 ${MAX_SONGS_PER_PLAYLIST} 首歌曲` }
+    }
+    // 防重复：检查歌曲是否已存在
+    const exists = playlist.songs.some(s =>
+      s.id === song.id && s.source === song.source
+    )
+    if (exists) {
+      return { success: false, message: '歌曲已存在于该歌单中' }
+    }
+    // 添加歌曲
+    const songWithMeta = {
+      ...song,
+      addedAt: Date.now()
+    }
+    playlist.songs.push(songWithMeta)
+    playlist.updatedAt = Date.now()
+    // 更新封面（使用第一首歌的封面）
+    if (playlist.songs.length === 1 && song.pic_id) {
+      playlist.cover = `https://music-api.gdstudio.xyz/api.php?types=pic&source=${song.source}&id=${song.pic_id}&size=300`
+    }
+    saveToStorage()
+    return { success: true, message: '添加成功' }
+  }
+  const removeSongFromPlaylist = (playlistId, songId, songSource) => {
+    const playlist = getPlaylist(playlistId)
+    if (!playlist) return false
+    const index = playlist.songs.findIndex(s =>
+      s.id === songId && s.source === songSource
+    )
+    if (index === -1) return false
+    playlist.songs.splice(index, 1)
+    playlist.updatedAt = Date.now()
+    // 如果删除的是第一首歌且还有其他歌曲，更新封面
+    if (index === 0 && playlist.songs.length > 0) {
+      const firstSong = playlist.songs[0]
+      playlist.cover = firstSong.pic_id
+        ? `https://music-api.gdstudio.xyz/api.php?types=pic&source=${firstSong.source}&id=${firstSong.pic_id}&size=300`
+        : null
+    } else if (playlist.songs.length === 0) {
+      playlist.cover = null
+    }
+    saveToStorage()
+    return true
+  }
+  const isSongInPlaylist = (playlistId, song) => {
+    const playlist = getPlaylist(playlistId)
+    if (!playlist) return false
+    return playlist.songs.some(s =>
+      s.id === song.id && s.source === song.source
+    )
+  }
+  // 批量操作
+  const addSongsToPlaylist = (playlistId, songs) => {
+    const playlist = getPlaylist(playlistId)
+    if (!playlist) {
+      return { success: false, addedCount: 0, message: '歌单不存在' }
+    }
+    let addedCount = 0
+    const errors = []
+    for (const song of songs) {
+      const result = addSongToPlaylist(playlistId, song)
+      if (result.success) {
+        addedCount++
+      } else {
+        errors.push(result.message)
+      }
+    }
+    const message = addedCount > 0
+      ? `成功添加 ${addedCount} 首歌曲`
+      : '没有歌曲被添加'
+    return {
+      success: addedCount > 0,
+      addedCount,
+      message,
+      errors
+    }
+  }
+  // 存储方法
+  const saveToStorage = () => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(playlists.value))
+    } catch (error) {
+      console.error('保存歌单失败:', error)
+    }
+  }
+  const loadFromStorage = () => {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY)
+      if (saved) {
+        const data = JSON.parse(saved)
+        if (Array.isArray(data)) {
+          playlists.value = data
+        }
+      }
+    } catch (error) {
+      console.error('加载歌单失败:', error)
+      playlists.value = []
+    }
+  }
+  // 清理方法
+  const clearAllPlaylists = () => {
+    playlists.value = []
+    currentViewingPlaylist.value = null
+    saveToStorage()
+  }
+  return {
+    // 状态
+    playlists: computed(() => playlists.value),
+    currentViewingPlaylist,
+    // 常量
+    MAX_SONGS_PER_PLAYLIST,
+    // 计算属性
+    totalPlaylists,
+    totalSongs,
+    // 歌单管理
+    createPlaylist,
+    deletePlaylist,
+    updatePlaylist,
+    getPlaylist,
+    // 歌曲管理
+    addSongToPlaylist,
+    removeSongFromPlaylist,
+    isSongInPlaylist,
+    addSongsToPlaylist,
+    // 存储管理
+    saveToStorage,
+    loadFromStorage,
+    clearAllPlaylists
+  }
+})

src/stores/playqueue.js ADDED Viewed

	@@ -0,0 +1,351 @@

+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+/**
+ * 播放队列 Store - 单一职责：管理当前播放器的临时队列
+ * 对应网易云音乐的 "Now Playing" 概念
+ */
+export const usePlayQueueStore = defineStore('playqueue', () => {
+  // 状态
+  const queue = ref([])
+  const currentIndex = ref(-1)
+  const playMode = ref('list') // 'list', 'random', 'single'
+  // 常量
+  const STORAGE_KEY = 'vue-music-play-queue'
+  const MAX_QUEUE_SIZE = 2000
+  // 计算属性
+  const currentSong = computed(() => {
+    return currentIndex.value >= 0 && currentIndex.value < queue.value.length
+      ? queue.value[currentIndex.value]
+      : null
+  })
+  const queueLength = computed(() => queue.value.length)
+  const isEmpty = computed(() => queue.value.length === 0)
+  const hasPrevious = computed(() => currentIndex.value > 0)
+  const hasNext = computed(() => currentIndex.value < queue.value.length - 1)
+  // 队列管理方法
+  const setQueue = (songs, startIndex = 0) => {
+    if (!Array.isArray(songs)) {
+      console.error('队列必须是数组')
+      return false
+    }
+    queue.value = songs.slice(0, MAX_QUEUE_SIZE)
+    currentIndex.value = Math.max(0, Math.min(startIndex, queue.value.length - 1))
+    saveQueue()
+    return true
+  }
+  const addToQueue = (song, position = 'end') => {
+    if (!song || !song.id) {
+      return { success: false, message: '歌曲信息无效' }
+    }
+    // 防重复：检查歌曲是否已在队列中
+    const exists = queue.value.some(s => s.id === song.id && s.source === song.source)
+    if (exists) {
+      return { success: false, message: '歌曲已在播放队列中' }
+    }
+    if (queue.value.length >= MAX_QUEUE_SIZE) {
+      return { success: false, message: `播放队列最多只能添加 ${MAX_QUEUE_SIZE} 首歌曲` }
+    }
+    switch (position) {
+      case 'next':
+        // 插入到当前播放歌曲的下一个位置
+        const insertIndex = Math.min(currentIndex.value + 1, queue.value.length)
+        queue.value.splice(insertIndex, 0, { ...song })
+        break
+      case 'start':
+        queue.value.unshift({ ...song })
+        if (currentIndex.value >= 0) {
+          currentIndex.value++
+        }
+        break
+      case 'end':
+      default:
+        queue.value.push({ ...song })
+        break
+    }
+    saveQueue()
+    return { success: true, message: '已添加到播放队列' }
+  }
+  const removeFromQueue = (index) => {
+    if (index < 0 || index >= queue.value.length) {
+      return { success: false, message: '无效的索引' }
+    }
+    queue.value.splice(index, 1)
+    // 调整当前播放索引
+    if (currentIndex.value > index) {
+      currentIndex.value--
+    } else if (currentIndex.value === index) {
+      // 如果删除的是当前播放的歌曲
+      if (queue.value.length === 0) {
+        currentIndex.value = -1
+      } else {
+        currentIndex.value = Math.min(currentIndex.value, queue.value.length - 1)
+      }
+    }
+    saveQueue()
+    return { success: true, message: '已从播放队列移除' }
+  }
+  const clearQueue = () => {
+    queue.value = []
+    currentIndex.value = -1
+    saveQueue()
+  }
+  // 播放控制方法
+  const playAtIndex = (index) => {
+    if (index < 0 || index >= queue.value.length) {
+      return null
+    }
+    currentIndex.value = index
+    saveQueue()
+    return queue.value[index]
+  }
+  const playNext = () => {
+    if (queue.value.length === 0) return null
+    let nextIndex = currentIndex.value
+    switch (playMode.value) {
+      case 'random':
+        // 随机播放：生成与当前不同的随机索引
+        if (queue.value.length > 1) {
+          do {
+            nextIndex = Math.floor(Math.random() * queue.value.length)
+          } while (nextIndex === currentIndex.value)
+        }
+        break
+      case 'single':
+        // 单曲循环：保持当前索引
+        break
+      case 'list':
+      default:
+        // 顺序播放：下一首，到末尾则循环到开头
+        nextIndex = hasNext.value ? currentIndex.value + 1 : 0
+        break
+    }
+    return playAtIndex(nextIndex)
+  }
+  const playPrevious = () => {
+    if (queue.value.length === 0) return null
+    let prevIndex = currentIndex.value
+    switch (playMode.value) {
+      case 'random':
+        // 随机播放：生成与当前不同的随机索引
+        if (queue.value.length > 1) {
+          do {
+            prevIndex = Math.floor(Math.random() * queue.value.length)
+          } while (prevIndex === currentIndex.value)
+        }
+        break
+      case 'single':
+        // 单曲循环：保持当前索引
+        break
+      case 'list':
+      default:
+        // 顺序播放：上一首，到开头则循环到末尾
+        prevIndex = hasPrevious.value ? currentIndex.value - 1 : queue.value.length - 1
+        break
+    }
+    return playAtIndex(prevIndex)
+  }
+  const setPlayMode = (mode) => {
+    const validModes = ['list', 'random', 'single']
+    if (validModes.includes(mode)) {
+      playMode.value = mode
+      saveQueue()
+      return true
+    }
+    return false
+  }
+  const togglePlayMode = () => {
+    const modes = ['list', 'random', 'single']
+    const currentIndex = modes.indexOf(playMode.value)
+    const nextIndex = (currentIndex + 1) % modes.length
+    setPlayMode(modes[nextIndex])
+    return playMode.value
+  }
+  // 队列操作方法
+  const moveInQueue = (fromIndex, toIndex) => {
+    if (fromIndex < 0 || fromIndex >= queue.value.length ||
+        toIndex < 0 || toIndex >= queue.value.length) {
+      return false
+    }
+    const item = queue.value.splice(fromIndex, 1)[0]
+    queue.value.splice(toIndex, 0, item)
+    // 调整当前播放索引
+    if (currentIndex.value === fromIndex) {
+      currentIndex.value = toIndex
+    } else if (fromIndex < currentIndex.value && toIndex >= currentIndex.value) {
+      currentIndex.value--
+    } else if (fromIndex > currentIndex.value && toIndex <= currentIndex.value) {
+      currentIndex.value++
+    }
+    saveQueue()
+    return true
+  }
+  const shuffleQueue = () => {
+    if (queue.value.length <= 1) return
+    const currentSong = currentSong.value
+    // Fisher-Yates洗牌算法
+    for (let i = queue.value.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1))
+      ;[queue.value[i], queue.value[j]] = [queue.value[j], queue.value[i]]
+    }
+    // 如果有当前播放的歌曲，找到它的新位置
+    if (currentSong) {
+      const newIndex = queue.value.findIndex(song =>
+        song.id === currentSong.id && song.source === currentSong.source
+      )
+      if (newIndex >= 0) {
+        currentIndex.value = newIndex
+      }
+    }
+    saveQueue()
+  }
+  // 批量操作
+  const addMultipleToQueue = (songs, position = 'end') => {
+    let successCount = 0
+    const results = []
+    for (const song of songs) {
+      const result = addToQueue(song, position)
+      results.push(result)
+      if (result.success) successCount++
+    }
+    return {
+      success: successCount > 0,
+      successCount,
+      totalCount: songs.length,
+      results
+    }
+  }
+  // 搜索功能
+  const searchInQueue = (keyword) => {
+    if (!keyword || !keyword.trim()) {
+      return queue.value.map((song, index) => ({ song, index }))
+    }
+    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))
+      )
+  }
+  // 存储管理
+  const saveQueue = () => {
+    try {
+      const data = {
+        queue: queue.value,
+        currentIndex: currentIndex.value,
+        playMode: playMode.value,
+        lastUpdated: Date.now(),
+        version: '1.0'
+      }
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
+    } catch (error) {
+      console.error('保存播放队列失败:', error)
+    }
+  }
+  const loadQueue = () => {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY)
+      if (saved) {
+        const data = JSON.parse(saved)
+        // 检查数据完整性
+        if (Array.isArray(data.queue)) {
+          queue.value = data.queue
+          currentIndex.value = data.currentIndex >= 0 ? data.currentIndex : -1
+          playMode.value = data.playMode || 'list'
+        }
+      }
+    } catch (error) {
+      console.error('加载播放队列失败:', error)
+      queue.value = []
+      currentIndex.value = -1
+      playMode.value = 'list'
+    }
+  }
+  return {
+    // 状态
+    queue: computed(() => queue.value),
+    currentIndex: computed(() => currentIndex.value),
+    currentSong,
+    playMode: computed(() => playMode.value),
+    // 计算属性
+    queueLength,
+    isEmpty,
+    hasPrevious,
+    hasNext,
+    // 队列管理
+    setQueue,
+    addToQueue,
+    removeFromQueue,
+    clearQueue,
+    // 播放控制
+    playAtIndex,
+    playNext,
+    playPrevious,
+    setPlayMode,
+    togglePlayMode,
+    // 队列操作
+    moveInQueue,
+    shuffleQueue,
+    // 批量操作
+    addMultipleToQueue,
+    // 搜索功能
+    searchInQueue,
+    // 存储管理
+    saveQueue,
+    loadQueue
+  }
+})

src/views/CurrentPlaylistPage.vue ADDED Viewed

	@@ -0,0 +1,722 @@

+<template>
+  <div class="current-playlist-page">
+    <!-- 头部 -->
+    <div class="page-header">
+      <button class="back-btn" @click="goBack">
+        <i class="fas fa-arrow-left"></i>
+      </button>
+      <div class="header-info">
+        <h1 class="page-title">当前播放</h1>
+        <p class="queue-info">共 {{ currentPlaylist.length }} 首</p>
+      </div>
+      <div class="header-actions">
+        <button class="action-btn" @click="togglePlayMode">
+          <i :class="playModeIcon"></i>
+        </button>
+        <button class="action-btn" @click="showMoreActions">
+          <i class="fas fa-ellipsis-v"></i>
+        </button>
+      </div>
+    </div>
+    <!-- 播放控制 -->
+    <div class="play-controls" v-if="currentPlaylist.length > 0">
+      <button class="control-btn play-all" @click="playAll">
+        <i class="fas fa-play"></i>
+        播放全部
+      </button>
+      <button class="control-btn shuffle" @click="shufflePlay">
+        <i class="fas fa-random"></i>
+        随机播放
+      </button>
+      <button
+        class="control-btn edit"
+        :class="{ active: editMode }"
+        @click="toggleEditMode"
+      >
+        <i :class="editMode ? 'fas fa-check' : 'fas fa-edit'"></i>
+        {{ editMode ? '完成' : '管理' }}
+      </button>
+    </div>
+    <!-- 歌曲列表 -->
+    <div class="songs-content">
+      <div v-if="!currentPlaylist.length" class="empty-queue">
+        <i class="fas fa-music"></i>
+        <p>暂无播放内容</p>
+        <p class="empty-tip">去首页找一些好听的歌曲吧</p>
+        <button class="go-home-btn" @click="goHome">
+          <i class="fas fa-home"></i>
+          去首页
+        </button>
+      </div>
+      <div v-else class="songs-list">
+        <div
+          v-for="(song, index) in currentPlaylist"
+          :key="`${song.id}-${index}`"
+          class="song-item"
+          :class="{
+            'current': isCurrentSong(song, index),
+            'edit-mode': editMode
+          }"
+        >
+          <!-- 拖拽把手 -->
+          <div
+            v-if="editMode"
+            class="drag-handle"
+            @mousedown="startDrag(index)"
+            @touchstart="startDrag(index)"
+          >
+            <i class="fas fa-grip-vertical"></i>
+          </div>
+          <!-- 序号/播放状态 -->
+          <div class="song-index" @click="playSongAtIndex(index)">
+            <template v-if="isCurrentSong(song, index) && playerStore.isPlaying">
+              <i class="fas fa-volume-up playing-icon"></i>
+            </template>
+            <template v-else>
+              {{ String(index + 1).padStart(2, '0') }}
+            </template>
+          </div>
+          <!-- 歌曲信息 -->
+          <div class="song-info" @click="playSongAtIndex(index)">
+            <div class="song-name">{{ song.name }}</div>
+            <div class="song-artist">
+              {{ formatArtist(song.artist) }} - {{ song.album }}
+            </div>
+          </div>
+          <!-- 操作按钮 -->
+          <div class="song-actions">
+            <button
+              v-if="!editMode"
+              class="action-btn favorite-btn"
+              :class="{ active: favoritesStore.isFavorite(song) }"
+              @click.stop="toggleFavorite(song)"
+            >
+              <i :class="favoritesStore.isFavorite(song) ? 'fas fa-heart' : 'far fa-heart'"></i>
+            </button>
+            <button
+              v-if="!editMode"
+              class="action-btn more-btn"
+              @click.stop="showSongMenu(song, index)"
+            >
+              <i class="fas fa-ellipsis-v"></i>
+            </button>
+            <button
+              v-if="editMode"
+              class="action-btn remove-btn"
+              @click.stop="removeSong(index)"
+            >
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 更多操作菜单 -->
+    <div v-if="showActions" class="actions-overlay" @click="hideActions">
+      <div class="actions-menu" @click.stop>
+        <button @click="clearQueue" class="danger">
+          <i class="fas fa-trash"></i>
+          清空播放队列
+        </button>
+        <button @click="saveAsPlaylist">
+          <i class="fas fa-save"></i>
+          保存为歌单
+        </button>
+      </div>
+    </div>
+    <!-- 歌曲菜单 -->
+    <div v-if="showSongActions" class="actions-overlay" @click="hideSongActions">
+      <div class="actions-menu" @click.stop>
+        <button @click="playNext">
+          <i class="fas fa-step-forward"></i>
+          下一首播放
+        </button>
+        <button @click="addToPlaylist">
+          <i class="fas fa-plus"></i>
+          添加到歌单
+        </button>
+        <button @click="removeSongFromMenu" class="danger">
+          <i class="fas fa-minus"></i>
+          从队列��除
+        </button>
+      </div>
+    </div>
+    <!-- 确认对话框 -->
+    <ConfirmDialog
+      ref="confirmDialogRef"
+      :title="confirmTitle"
+      :message="confirmMessage"
+      confirm-text="确认"
+      type="danger"
+      @confirm="confirmAction"
+    />
+  </div>
+</template>
+<script setup>
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { usePlayerStore } from '@/stores/player'
+import { useFavoritesStore } from '@/stores/favorites'
+import { usePlayQueueStore } from '@/stores/playqueue'
+import { useToastStore } from '@/stores/toast'
+import { utils } from '@/services/musicApi'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+const router = useRouter()
+const playerStore = usePlayerStore()
+const favoritesStore = useFavoritesStore()
+const playQueueStore = usePlayQueueStore()
+const toastStore = useToastStore()
+// 响应式数据
+const editMode = ref(false)
+const showActions = ref(false)
+const showSongActions = ref(false)
+const selectedSong = ref(null)
+const selectedIndex = ref(-1)
+const confirmDialogRef = ref(null)
+const confirmTitle = ref('')
+const confirmMessage = ref('')
+const pendingAction = ref(null)
+// 计算属性
+const currentPlaylist = computed(() => playQueueStore.queue || [])
+const playModeIcon = computed(() => {
+  switch (playerStore.playMode) {
+    case 'list':
+      return 'fas fa-redo'
+    case 'single':
+      return 'fas fa-redo-alt'
+    case 'random':
+      return 'fas fa-random'
+    default:
+      return 'fas fa-redo'
+  }
+})
+const isCurrentSong = (song, index) => {
+  return playerStore.currentIndex === index
+}
+// 方法
+const goBack = () => {
+  router.go(-1)
+}
+const goHome = () => {
+  router.push('/home')
+}
+const formatArtist = (artist) => {
+  return utils.formatArtist ? utils.formatArtist(artist) : artist
+}
+const togglePlayMode = () => {
+  playerStore.togglePlayMode()
+  const modeNames = {
+    'list': '列表循环',
+    'single': '单曲循环',
+    'random': '随机播放'
+  }
+  toastStore.info(`已切换到${modeNames[playerStore.playMode]}`)
+}
+const playAll = () => {
+  if (currentPlaylist.value.length > 0) {
+    playerStore.playSong(currentPlaylist.value[0], 0)
+  }
+}
+const shufflePlay = () => {
+  if (currentPlaylist.value.length > 0) {
+    // 随机选择一首歌开始播放
+    const randomIndex = Math.floor(Math.random() * currentPlaylist.value.length)
+    playerStore.setPlayMode('random')
+    playerStore.playSong(currentPlaylist.value[randomIndex], randomIndex)
+    toastStore.info('开始随机播放')
+  }
+}
+const toggleEditMode = () => {
+  editMode.value = !editMode.value
+  if (!editMode.value) {
+    hideActions()
+    hideSongActions()
+  }
+}
+const playSongAtIndex = (index) => {
+  if (editMode.value) return
+  const song = currentPlaylist.value[index]
+  if (song) {
+    playerStore.playSong(song, index)
+  }
+}
+const toggleFavorite = async (song) => {
+  try {
+    await favoritesStore.toggleFavorite(song)
+  } catch (error) {
+    toastStore.error('操作失败')
+  }
+}
+const removeSong = (index) => {
+  if (currentPlaylist.value.length <= 1) {
+    toastStore.error('播放队列至少要保留一首歌曲')
+    return
+  }
+  playerStore.removeFromPlaylist(index)
+  toastStore.success('已从播放队列移除')
+}
+// 菜单操作
+const showMoreActions = () => {
+  showActions.value = true
+}
+const hideActions = () => {
+  showActions.value = false
+}
+const showSongMenu = (song, index) => {
+  selectedSong.value = song
+  selectedIndex.value = index
+  showSongActions.value = true
+}
+const hideSongActions = () => {
+  showSongActions.value = false
+  selectedSong.value = null
+  selectedIndex.value = -1
+}
+const clearQueue = () => {
+  hideActions()
+  confirmTitle.value = '清空播放队列'
+  confirmMessage.value = '确定要清空当前播放队列吗？此操作不可撤销。'
+  pendingAction.value = () => {
+    playQueueStore.clearQueue()
+    toastStore.success('播放队列已清空')
+    editMode.value = false
+  }
+  confirmDialogRef.value?.show()
+}
+const saveAsPlaylist = () => {
+  hideActions()
+  // TODO: 实现保存为歌单功能
+  toastStore.info('功能开发中...')
+}
+const playNext = () => {
+  if (selectedSong.value) {
+    playerStore.playNext(selectedSong.value)
+    toastStore.success(`"${selectedSong.value.name}" 已添加到下一首播放`)
+  }
+  hideSongActions()
+}
+const addToPlaylist = () => {
+  // TODO: 实现添加到歌单功能
+  hideSongActions()
+  toastStore.info('功能开发中...')
+}
+const removeSongFromMenu = () => {
+  hideSongActions()
+  removeSong(selectedIndex.value)
+}
+const confirmAction = () => {
+  if (pendingAction.value) {
+    pendingAction.value()
+    pendingAction.value = null
+  }
+}
+// 拖拽功能（简化实现）
+const startDrag = (index) => {
+  // TODO: 实现拖拽排序功能
+  toastStore.info('拖拽排序功能开发中...')
+}
+</script>
+<style scoped>
+.current-playlist-page {
+  height: 100%;
+  background: var(--bg-primary);
+  overflow-y: auto;
+  padding-bottom: calc(var(--mini-player-height) + var(--tabbar-height) + 20px);
+}
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background: var(--bg-card);
+  margin: 16px;
+  border-radius: var(--radius-small);
+  border: 1px solid var(--border-light);
+}
+.back-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition-fast);
+}
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.header-info {
+  flex: 1;
+}
+.page-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+}
+.queue-info {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0;
+}
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+.action-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition-fast);
+}
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.play-controls {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  margin: 0 16px 16px;
+  background: var(--bg-card);
+  border-radius: var(--radius-small);
+  border: 1px solid var(--border-light);
+}
+.control-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.control-btn.play-all {
+  background: var(--accent-red);
+  color: white;
+}
+.control-btn.play-all:hover {
+  background: var(--accent-red-hover);
+}
+.control-btn.shuffle,
+.control-btn.edit {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+.control-btn.shuffle:hover,
+.control-btn.edit:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.control-btn.edit.active {
+  background: var(--accent-red);
+  color: white;
+}
+.empty-queue {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  text-align: center;
+  color: var(--text-tertiary);
+}
+.empty-queue i {
+  font-size: 64px;
+  margin-bottom: 20px;
+  opacity: 0.5;
+}
+.empty-queue p {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+.empty-tip {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 24px;
+}
+.go-home-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  background: var(--accent-red);
+  color: white;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.go-home-btn:hover {
+  background: var(--accent-red-hover);
+}
+.songs-list {
+  background: var(--bg-card);
+  margin: 0 16px;
+  border-radius: var(--radius-small);
+  border: 1px solid var(--border-light);
+  overflow: hidden;
+}
+.song-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  transition: var(--transition-fast);
+  position: relative;
+}
+.song-item:last-child {
+  border-bottom: none;
+}
+.song-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+.song-item.current {
+  background: rgba(255, 107, 107, 0.1);
+  border-left: 3px solid var(--accent-red);
+}
+.song-item.edit-mode {
+  padding-left: 50px;
+}
+.drag-handle {
+  position: absolute;
+  left: 16px;
+  color: var(--text-tertiary);
+  cursor: grab;
+}
+.drag-handle:active {
+  cursor: grabbing;
+}
+.song-index {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-right: 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: var(--transition-fast);
+}
+.song-index:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.song-item.current .song-index {
+  color: var(--accent-red);
+}
+.playing-icon {
+  color: var(--accent-red);
+  animation: pulse 1.5s infinite;
+}
+.song-info {
+  flex: 1;
+  min-width: 0;
+  margin-right: 12px;
+  cursor: pointer;
+}
+.song-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.song-item.current .song-name {
+  color: var(--accent-red);
+}
+.song-artist {
+  font-size: 13px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.song-actions {
+  display: flex;
+  gap: 4px;
+}
+.favorite-btn.active {
+  color: var(--accent-red);
+}
+.remove-btn {
+  background: rgba(255, 68, 68, 0.1);
+  color: #ff4444;
+}
+.remove-btn:hover {
+  background: rgba(255, 68, 68, 0.2);
+}
+.actions-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.actions-menu {
+  background: var(--bg-card);
+  border-radius: 12px;
+  padding: 8px 0;
+  min-width: 200px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--border-light);
+}
+.actions-menu button {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 20px;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.actions-menu button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.actions-menu button.danger {
+  color: #ff4444;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+/* 响应式 */
+@media (max-width: 375px) {
+  .page-header {
+    padding: 12px;
+    margin: 12px;
+  }
+  .play-controls {
+    padding: 12px;
+    margin: 0 12px 12px;
+  }
+  .songs-list {
+    margin: 0 12px;
+  }
+}
+</style>

src/views/FavoritesPage.vue ADDED Viewed

	@@ -0,0 +1,921 @@

+<template>
+  <div class="favorites-page">
+    <!-- 头部 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        <i class="fas fa-heart"></i>
+        我喜欢的音乐
+      </h1>
+      <div class="header-actions">
+        <button v-if="!isEmpty" class="action-btn" @click="playAll">
+          <i class="fas fa-play"></i>
+        </button>
+        <button v-if="!isEmpty" class="action-btn" @click="showBatchActions = !showBatchActions">
+          <i class="fas fa-tasks"></i>
+        </button>
+      </div>
+    </div>
+    <!-- 搜索框 -->
+    <div v-if="!isEmpty" class="search-section">
+      <div class="search-box">
+        <i class="fas fa-search"></i>
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="在我喜欢的音乐中搜索..."
+          class="search-input"
+        />
+        <button v-if="searchKeyword" @click="clearSearch" class="clear-btn">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+    </div>
+    <!-- 批量操作栏 -->
+    <div v-if="showBatchActions && !isEmpty" class="batch-actions">
+      <div class="batch-selection">
+        <label class="checkbox-wrapper">
+          <input
+            type="checkbox"
+            :checked="isAllSelected"
+            @change="toggleSelectAll"
+          />
+          <span class="checkmark"></span>
+          <span class="checkbox-label">
+            {{ selectedCount > 0 ? `已选择 ${selectedCount} 首` : '全选' }}
+          </span>
+        </label>
+      </div>
+      <div v-if="selectedCount > 0" class="batch-buttons">
+        <button class="batch-btn" @click="addSelectedToPlaylist">
+          <i class="fas fa-plus"></i>
+        </button>
+        <button class="batch-btn remove-btn" @click="removeSelected">
+          <i class="fas fa-trash"></i>
+        </button>
+      </div>
+    </div>
+    <!-- 歌曲列表 -->
+    <div class="content-area">
+      <div v-if="isEmpty" class="empty-state">
+        <i class="fas fa-heart-broken"></i>
+        <p>还没有收藏的歌曲</p>
+        <p class="empty-tip">点击歌曲右侧的红心按钮来收藏喜欢的音乐</p>
+        <button class="discover-btn" @click="goToHome">
+          <i class="fas fa-search"></i>
+          去发现音乐
+        </button>
+      </div>
+      <div v-else class="favorites-list">
+        <div
+          v-for="(favorite, index) in displayedFavorites"
+          :key="`${favorite.song.id}-${favorite.favoriteTime}`"
+          class="favorite-item"
+          :class="{ selected: selectedItems.has(favorite.song.id) }"
+        >
+          <!-- 批量选择复选框 -->
+          <div v-if="showBatchActions" class="item-checkbox">
+            <label class="checkbox-wrapper">
+              <input
+                type="checkbox"
+                :checked="selectedItems.has(favorite.song.id)"
+                @change="toggleItemSelection(favorite.song)"
+              />
+              <span class="checkmark"></span>
+            </label>
+          </div>
+          <!-- 歌曲信息 -->
+          <div class="song-info" @click="playSong(favorite.song, index)">
+            <div class="song-cover">
+              <img
+                :src="getSongCover()"
+                :alt="favorite.song.name"
+                :data-song-data="JSON.stringify(favorite.song)"
+                @error="handleImageError"
+              />
+              <div class="play-overlay">
+                <i class="fas fa-play"></i>
+              </div>
+            </div>
+            <div class="song-details">
+              <h3 class="song-name">{{ favorite.song.name }}</h3>
+              <p class="song-meta">
+                <span class="artist">{{ formatArtist(favorite.song.artist) }}</span>
+              </p>
+            </div>
+          </div>
+          <!-- 操作按钮 -->
+          <div class="song-actions">
+            <button class="action-btn favorite-btn active" @click="toggleFavorite(favorite.song)">
+              <i class="fas fa-heart"></i>
+            </button>
+            <button class="action-btn more-btn" @click="handleShowMoreActions(favorite.song, $event)">
+              <i class="fas fa-ellipsis-h"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 更多操作菜单 -->
+    <MoreActionsPanel
+      v-if="showMoreActions && selectedSong"
+      :song="selectedSong"
+      @action="handleMoreAction"
+      @close="showMoreActions = false"
+    />
+    <!-- 确认对话框 -->
+    <ConfirmDialog
+      ref="confirmDialogRef"
+      :title="confirmDialog.title"
+      :message="confirmDialog.message"
+      :confirm-text="confirmDialog.confirmText"
+      :type="confirmDialog.type"
+      @confirm="handleConfirm"
+    />
+  </div>
+</template>
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useFavoritesStore } from '@/stores/favorites'
+import { usePlayerStore } from '@/stores/player'
+import { usePlayQueueStore } from '@/stores/playqueue'
+import { usePlaylistStore } from '@/stores/playlist'
+import { useToastStore } from '@/stores/toast'
+import { useSongCoverLoader } from '@/composables/useSongCoverLoader'
+import { utils } from '@/services/musicApi'
+import MoreActionsPanel from '@/components/player/MoreActionsPanel.vue'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+const router = useRouter()
+const favoritesStore = useFavoritesStore()
+const playerStore = usePlayerStore()
+const playQueueStore = usePlayQueueStore()
+const playlistStore = usePlaylistStore()
+const toastStore = useToastStore()
+const { getDefaultCover, handleImageError, observeImage } = useSongCoverLoader()
+// 响应式数据
+const searchKeyword = ref('')
+const showBatchActions = ref(false)
+const selectedItems = ref(new Set())
+const selectedSong = ref(null)
+const showMoreActions = ref(false)
+const showPlaylistSelector = ref(false)
+const coverUrls = ref(new Map()) // 存储每首歌的封面URL
+const moreActionsRef = ref(null)
+const confirmDialogRef = ref(null)
+// 确认对话框状态
+const confirmDialog = ref({
+  title: '',
+  message: '',
+  confirmText: '确定',
+  type: 'warning',
+  action: null,
+  data: null
+})
+// 计算属性
+const favorites = computed(() => favoritesStore.favorites)
+const totalFavorites = computed(() => favoritesStore.totalFavorites)
+const isEmpty = computed(() => favoritesStore.isEmpty)
+// 搜索后的收藏列表
+const displayedFavorites = computed(() => {
+  if (!searchKeyword.value.trim()) {
+    return favorites.value
+  }
+  return favoritesStore.searchFavorites(searchKeyword.value)
+})
+// 总时长计算
+// 批量选择相关
+const selectedCount = computed(() => selectedItems.value.size)
+const isAllSelected = computed(() => {
+  return displayedFavorites.value.length > 0 &&
+         selectedCount.value === displayedFavorites.value.length
+})
+// 方法
+// 图片加载相关
+const getSongCover = () => {
+  return getDefaultCover()
+}
+// 初始化懒加载观察
+const initLazyImages = () => {
+  const imageElements = document.querySelectorAll('.favorite-item .song-cover img')
+  imageElements.forEach((img, index) => {
+    const songData = img.dataset.songData
+    if (songData) {
+      try {
+        const song = JSON.parse(songData)
+        observeImage(img, song)
+      } catch (error) {
+        console.error('解析歌曲数据失败:', error)
+      }
+    }
+  })
+}
+// 格式化艺术家名字
+const formatArtist = (artist) => {
+  return utils.formatArtist(artist)
+}
+const clearSearch = () => {
+  searchKeyword.value = ''
+}
+const goToHome = () => {
+  router.push('/home')
+}
+// 播放相关方法
+const playSong = async (song, index) => {
+  if (showBatchActions.value) {
+    toggleItemSelection(song)
+    return
+  }
+  // 将所有收藏的歌曲添加到播放队列
+  const songs = displayedFavorites.value.map(fav => fav.song)
+  const result = playQueueStore.setQueue(songs, index)
+  if (result) {
+    // 播放选中的歌曲
+    await playerStore.playSong(song)
+    toastStore.success(`开始播放 "${song.name}"`)
+  } else {
+    toastStore.error('播放失败')
+  }
+}
+const playAll = async () => {
+  if (isEmpty.value) return
+  const songs = displayedFavorites.value.map(fav => fav.song)
+  const result = playQueueStore.setQueue(songs, 0)
+  if (result && songs.length > 0) {
+    await playerStore.playSong(songs[0])
+    toastStore.success(`开始播放全部 ${songs.length} 首歌曲`)
+  } else {
+    toastStore.error('播放失败')
+  }
+}
+// 收藏操作
+const toggleFavorite = async (song) => {
+  const result = await favoritesStore.removeFromFavorites(song)
+  if (result.success) {
+    toastStore.success(result.message)
+    // 如果当前选中了这首歌，从选中列表中移除
+    selectedItems.value.delete(song.id)
+  } else {
+    toastStore.error(result.message)
+  }
+}
+// 批量操作
+const toggleSelectAll = () => {
+  if (isAllSelected.value) {
+    selectedItems.value.clear()
+  } else {
+    selectedItems.value = new Set(displayedFavorites.value.map(fav => fav.song.id))
+  }
+}
+const toggleItemSelection = (song) => {
+  if (selectedItems.value.has(song.id)) {
+    selectedItems.value.delete(song.id)
+  } else {
+    selectedItems.value.add(song.id)
+  }
+}
+const playSelected = async () => {
+  const selectedSongs = displayedFavorites.value
+    .filter(fav => selectedItems.value.has(fav.song.id))
+    .map(fav => fav.song)
+  if (selectedSongs.length === 0) return
+  const result = playQueueStore.setQueue(selectedSongs, 0)
+  if (result && selectedSongs.length > 0) {
+    await playerStore.playSong(selectedSongs[0])
+    toastStore.success(`开始播放选中的 ${selectedSongs.length} 首歌曲`)
+    selectedItems.value.clear()
+    showBatchActions.value = false
+  } else {
+    toastStore.error('播放失败')
+  }
+}
+const addSelectedToPlaylist = async () => {
+  if (selectedCount.value === 0) return
+  const selectedSongs = Array.from(selectedItems.value).map(id =>
+    favorites.value.find(fav => fav.song.id === id)?.song
+  ).filter(song => song)
+  if (selectedSongs.length === 0) return
+  // 获取所有可用歌单
+  const playlists = playlistStore.playlists
+  if (!playlists || playlists.length === 0) {
+    toastStore.info('还没有创建歌单，请先创建一个歌单')
+    return
+  }
+  // 简单实现：添加到第一个歌单
+  if (playlists.length === 1) {
+    const result = playlistStore.addSongsToPlaylist(playlists[0].id, selectedSongs)
+    if (result.success) {
+      toastStore.success(`已将 ${selectedSongs.length} 首歌曲添加到"${playlists[0].name}"`)
+      selectedItems.value.clear()
+      showBatchActions.value = false
+    } else {
+      toastStore.error(result.message || '添加失败')
+    }
+  } else {
+    // 多个歌单，弹出选择器
+    showPlaylistSelector.value = true
+  }
+}
+const removeSelected = () => {
+  if (selectedCount.value === 0) return
+  confirmDialog.value = {
+    title: '批量取消收藏',
+    message: `确定要取消收藏选中的 ${selectedCount.value} 首歌曲吗？`,
+    confirmText: '取消收藏',
+    type: 'warning',
+    action: 'remove-selected',
+    data: Array.from(selectedItems.value)
+  }
+  confirmDialogRef.value?.show()
+}
+// 更多操作
+const handleShowMoreActions = (song, event) => {
+  selectedSong.value = song
+  showMoreActions.value = true
+}
+const handleMoreAction = async (action) => {
+  if (!selectedSong.value) return
+  const song = selectedSong.value
+  switch (action) {
+    case 'favorite':
+      await toggleFavorite(song)
+      break
+    case 'addToPlaylist':
+      // 添加到播放队列
+      try {
+        const result = playQueueStore.addToQueue(song, 'last')
+        if (result.success) {
+          toastStore.success(`"${song.name}" 已添加到播放队列`)
+        } else {
+          toastStore.error(result.message || '添加失败')
+        }
+      } catch (error) {
+        console.error('添加到播放队列失败:', error)
+        toastStore.error('添加到播放队列失败')
+      }
+      break
+    case 'download':
+      // TODO: 实现下载
+      toastStore.info('下载功能开发中...')
+      break
+  }
+  showMoreActions.value = false
+}
+// 确认对话框处理
+const handleConfirm = async () => {
+  const { action, data } = confirmDialog.value
+  switch (action) {
+    case 'remove-selected':
+      let removedCount = 0
+      for (const songId of data) {
+        const song = displayedFavorites.value.find(fav => fav.song.id === songId)?.song
+        if (song) {
+          const result = await favoritesStore.removeFromFavorites(song)
+          if (result.success) {
+            removedCount++
+          }
+        }
+      }
+      if (removedCount > 0) {
+        toastStore.success(`已取消收藏 ${removedCount} 首歌曲`)
+        selectedItems.value.clear()
+        showBatchActions.value = false
+      }
+      break
+  }
+}
+// 监听搜索关键词变化，清空选择
+watch(searchKeyword, () => {
+  selectedItems.value.clear()
+})
+// 生命周期
+onMounted(async () => {
+  // 加载收藏数据
+  favoritesStore.loadFavorites()
+  // 初始化懒加载
+  setTimeout(() => {
+    initLazyImages()
+  }, 100)
+})
+</script>
+<style scoped>
+.favorites-page {
+  height: 100%;
+  background: var(--bg-primary);
+  overflow-y: auto;
+}
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-lighter);
+}
+.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-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);
+}
+.stats-card {
+  display: flex;
+  gap: 24px;
+  padding: 20px 16px;
+  background: var(--bg-card);
+  margin: 16px;
+  border-radius: var(--radius-medium);
+  border: 1px solid var(--border-light);
+}
+.stat-item {
+  text-align: center;
+}
+.stat-number {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--accent-red);
+  margin-bottom: 4px;
+}
+.stat-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.search-section {
+  padding: 0 16px 16px;
+}
+.search-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--bg-card);
+  border-radius: 25px;
+  padding: 12px 16px;
+  border: 1px solid var(--border-light);
+}
+.search-box i {
+  color: var(--text-secondary);
+  margin-right: 12px;
+}
+.search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 14px;
+  outline: none;
+}
+.search-input::placeholder {
+  color: var(--text-tertiary);
+}
+.clear-btn {
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 50%;
+  transition: var(--transition-fast);
+}
+.clear-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+.batch-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--bg-card);
+  border-top: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-light);
+}
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.checkbox-wrapper input {
+  display: none;
+}
+.checkmark {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--border-strong);
+  border-radius: 4px;
+  position: relative;
+  transition: var(--transition-fast);
+}
+.checkbox-wrapper input:checked + .checkmark {
+  background: var(--accent-red);
+  border-color: var(--accent-red);
+}
+.checkbox-wrapper input:checked + .checkmark::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 2px;
+  width: 4px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.checkbox-label {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+.batch-buttons {
+  display: flex;
+  gap: 8px;
+}
+.batch-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  border-radius: 16px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.batch-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.batch-btn.play-btn {
+  background: var(--accent-red);
+  color: white;
+}
+.batch-btn.play-btn:hover {
+  background: var(--accent-red-hover);
+}
+.batch-btn.remove-btn {
+  background: #ff4444;
+  color: white;
+}
+.batch-btn.remove-btn:hover {
+  background: #ff6666;
+}
+.content-area {
+  flex: 1;
+  min-height: 0;
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  text-align: center;
+  color: var(--text-tertiary);
+}
+.empty-state i {
+  font-size: 64px;
+  margin-bottom: 20px;
+  opacity: 0.5;
+}
+.empty-state p {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+.empty-tip {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 24px;
+}
+.discover-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  background: var(--accent-red);
+  color: white;
+  border-radius: 25px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.discover-btn:hover {
+  background: var(--accent-red-hover);
+  transform: scale(1.05);
+}
+.favorites-list {
+  padding-bottom: calc(var(--mini-player-height) + var(--tabbar-height) + 20px);
+}
+.favorite-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-card);
+  transition: var(--transition-fast);
+}
+.favorite-item:hover {
+  background: var(--bg-hover);
+}
+.favorite-item.selected {
+  background: rgba(255, 107, 107, 0.1);
+  border-left: 4px solid var(--accent-red);
+}
+.item-checkbox {
+  margin-right: 12px;
+}
+.song-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  cursor: pointer;
+  gap: 12px;
+}
+.song-cover {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  border-radius: var(--radius-small);
+  overflow: hidden;
+}
+.song-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: var(--transition-fast);
+}
+.song-cover:hover .play-overlay {
+  opacity: 1;
+}
+.play-overlay i {
+  color: white;
+  font-size: 16px;
+}
+.song-details {
+  flex: 1;
+  min-width: 0;
+}
+.song-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.song-meta {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.favorite-time {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin: 0;
+}
+.song-actions {
+  display: flex;
+  gap: 8px;
+}
+.song-actions .action-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+.song-actions .action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+  transform: none;
+}
+.favorite-btn.active {
+  background: rgba(255, 107, 107, 0.2);
+  color: var(--accent-red);
+}
+.favorite-btn.active:hover {
+  background: rgba(255, 107, 107, 0.3);
+  color: var(--accent-red);
+}
+/* 响应式 */
+@media (max-width: 375px) {
+  .page-header {
+    padding: 12px;
+  }
+  .page-title {
+    font-size: 20px;
+  }
+  .stats-card {
+    margin: 12px;
+    padding: 16px 12px;
+    gap: 16px;
+  }
+  .search-section {
+    padding: 0 12px 12px;
+  }
+  .batch-actions {
+    padding: 12px;
+  }
+  .favorite-item {
+    padding: 12px;
+  }
+  .song-cover {
+    width: 45px;
+    height: 45px;
+  }
+  .song-name {
+    font-size: 15px;
+  }
+  .song-meta {
+    font-size: 12px;
+  }
+}
+@media (min-width: 768px) {
+  .favorites-page {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .stats-card {
+    max-width: 600px;
+    margin: 16px auto;
+  }
+  .favorites-list {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+}
+</style>

src/views/FullPlayerPage.vue CHANGED Viewed

@@ -164,7 +164,10 @@
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { usePlayerStore } from '@/stores/player'
 import { useFavoritesStore } from '@/stores/favorites'
 import { useSettingsStore } from '@/stores/settings'
 import { musicApi, utils } from '@/services/musicApi'
 import AlbumCover from '@/components/player/AlbumCover.vue'
@@ -179,7 +182,10 @@ const emit = defineEmits(['close', 'seek', 'togglePlay'])
 const router = useRouter()
 const playerStore = usePlayerStore()
 const favoritesStore = useFavoritesStore()
 const settingsStore = useSettingsStore()
 // 响应式数据
@@ -454,26 +460,47 @@ const handleShowPlaylist = () => {
   showPlaylist.value = true
 }
-const handlePlayFromList = (song, index) => {
-  playerStore.playSong(song, index)
-  showPlaylist.value = false
 }
 const handleRemoveFromList = (index) => {
-  playerStore.removeFromPlaylist(index)
 }
 const toggleFavorite = async () => {
   if (!currentSong.value) return
   try {
-    if (isFavorite.value) {
-      await favoritesStore.removeFromFavorites(currentSong.value)
-    } else {
-      await favoritesStore.addToFavorites(currentSong.value)
-    }
   } catch (error) {
     console.error('收藏操作失败:', error)
   }
 }

 import { ref, computed, onMounted, onUnmounted, watch, nextTick } 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 AlbumCover from '@/components/player/AlbumCover.vue'
 const router = useRouter()
 const playerStore = usePlayerStore()
+const playQueueStore = usePlayQueueStore()
 const favoritesStore = useFavoritesStore()
+const historyStore = useHistoryStore()
+const toastStore = useToastStore()
 const settingsStore = useSettingsStore()
 // 响应式数据
   showPlaylist.value = true
 }
+const handlePlayFromList = async (song, index) => {
+  try {
+    // SOLID原则：使用playQueueStore管理队列播放逻辑
+    const selectedSong = playQueueStore.playAtIndex(index)
+    if (selectedSong) {
+      await playerStore.playSong(selectedSong, true) // restoreProgress = 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 {
+    // SOLID原则：使用favoritesStore的统一API
+    const result = await favoritesStore.toggleFavorite(currentSong.value)
+    const message = result ? '已添加到我喜欢的音乐' : '已从我喜欢的音乐中移除'
+    toastStore.success(message)
   } catch (error) {
     console.error('收藏操作失败:', error)
+    toastStore.error('操作失败，请重试')
   }
 }

src/views/HistoryPage.vue ADDED Viewed

	@@ -0,0 +1,1004 @@

+<template>
+  <div class="history-page">
+    <!-- 头部 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        <i class="fas fa-history"></i>
+        播放历史
+      </h1>
+      <div class="header-actions">
+        <button v-if="!isEmpty" class="action-btn" @click="showExportOptions">
+          <i class="fas fa-download"></i>
+          <span>导出</span>
+        </button>
+        <button v-if="!isEmpty" class="action-btn danger" @click="confirmClearAll">
+          <i class="fas fa-trash"></i>
+          <span>清空</span>
+        </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 class="stat-card">
+        <div class="stat-number">{{ formatDuration(playStats.totalDuration) }}</div>
+        <div class="stat-label">总时长</div>
+      </div>
+    </div>
+    <!-- 筛选和搜索 -->
+    <div v-if="!isEmpty" class="filter-section">
+      <div class="filter-tabs">
+        <button
+          class="filter-tab"
+          :class="{ active: viewMode === 'recent' }"
+          @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"
+          :class="{ active: viewMode === 'top' }"
+          @click="switchView('top')"
+        >
+          <i class="fas fa-fire"></i>
+          最多播放
+        </button>
+      </div>
+      <div class="search-box">
+        <i class="fas fa-search"></i>
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="搜索播放历史..."
+          class="search-input"
+        />
+        <button v-if="searchKeyword" @click="clearSearch" class="clear-btn">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+    </div>
+    <!-- 内容区域 -->
+    <div class="content-area">
+      <!-- 空状态 -->
+      <div v-if="isEmpty" class="empty-state">
+        <i class="fas fa-history"></i>
+        <p>还没有播放记录</p>
+        <p class="empty-tip">播放过的歌曲会自动记录在这里</p>
+        <button class="discover-btn" @click="goToHome">
+          <i class="fas fa-search"></i>
+          去发现音乐
+        </button>
+      </div>
+      <!-- 最近播放 -->
+      <div v-else-if="viewMode === 'recent'" class="recent-view">
+        <div class="history-list">
+          <div
+            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>
+        </div>
+      </div>
+      <!-- 按日期分组 -->
+      <div v-else-if="viewMode === 'grouped'" class="grouped-view">
+        <div
+          v-for="(group, date) in groupedHistory"
+          :key="date"
+          class="date-group"
+        >
+          <div class="group-header">
+            <h3 class="group-date">{{ formatDate(date) }}</h3>
+            <span class="group-count">{{ group.length }}首</span>
+          </div>
+          <div class="group-content">
+            <div
+              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>
+          </div>
+        </div>
+      </div>
+      <!-- 最多播放 -->
+      <div v-else-if="viewMode === 'top'" class="top-view">
+        <div class="top-list">
+          <div
+            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>
+        </div>
+      </div>
+    </div>
+    <!-- 更多操作菜单 -->
+    <MoreActionsPanel
+      v-if="showMoreActions && selectedSong"
+      :song="selectedSong"
+      @action="handleMoreAction"
+      @close="showMoreActions = false"
+    />
+    <!-- 确认对话框 -->
+    <ConfirmDialog
+      ref="confirmDialogRef"
+      :title="confirmDialog.title"
+      :message="confirmDialog.message"
+      :confirm-text="confirmDialog.confirmText"
+      :type="confirmDialog.type"
+      @confirm="handleConfirm"
+    />
+  </div>
+</template>
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useHistoryStore } from '@/stores/history'
+import { useFavoritesStore } from '@/stores/favorites'
+import { usePlayerStore } from '@/stores/player'
+import { usePlayQueueStore } from '@/stores/playqueue'
+import { useToastStore } from '@/stores/toast'
+import { imageCacheManager } from '@/utils/imageCache'
+import MoreActionsPanel from '@/components/player/MoreActionsPanel.vue'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+const router = useRouter()
+const historyStore = useHistoryStore()
+const favoritesStore = useFavoritesStore()
+const playerStore = usePlayerStore()
+const playQueueStore = usePlayQueueStore()
+const toastStore = useToastStore()
+// 响应式数据
+const viewMode = ref('recent') // 'recent', 'grouped', 'top'
+const searchKeyword = ref('')
+const selectedSong = ref(null)
+const showMoreActions = ref(false)
+const moreActionsRef = ref(null)
+const confirmDialogRef = ref(null)
+// 确认对话框状态
+const confirmDialog = ref({
+  title: '',
+  message: '',
+  confirmText: '确定',
+  type: 'warning',
+  action: null,
+  data: null
+})
+// 计算属性
+const history = computed(() => historyStore.history)
+const totalPlays = computed(() => historyStore.totalPlays)
+const uniqueSongs = computed(() => historyStore.uniqueSongs)
+const isEmpty = computed(() => historyStore.isEmpty)
+// 播放统计
+const playStats = computed(() => historyStore.getPlayStats())
+// 搜索后的历史记录
+const displayedHistory = computed(() => {
+  const baseHistory = viewMode.value === 'recent'
+    ? historyStore.getRecentSongs(100)
+    : history.value
+  if (!searchKeyword.value.trim()) {
+    return baseHistory
+  }
+  return historyStore.searchHistory(searchKeyword.value)
+})
+// 按日期分组的历史记录
+const groupedHistory = computed(() => {
+  return historyStore.getGroupedByDate()
+})
+// 最多播放的歌曲
+const topPlayedSongs = computed(() => {
+  return historyStore.getTopPlayedSongs(50)
+})
+// 方法
+const formatDuration = (seconds) => {
+  if (!seconds) return '0分钟'
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  if (hours > 0) {
+    return `${hours}小时${minutes}分钟`
+  }
+  return `${minutes}分钟`
+}
+const formatPlayTime = (timestamp, showTime = false) => {
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diff = now - date
+  if (showTime) {
+    return date.toLocaleTimeString('zh-CN', {
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+  if (diff < 60 * 1000) {
+    return '刚刚播放'
+  } else if (diff < 60 * 60 * 1000) {
+    const minutes = Math.floor(diff / (60 * 1000))
+    return `${minutes}分钟前`
+  } else if (diff < 24 * 60 * 60 * 1000) {
+    const hours = Math.floor(diff / (60 * 60 * 1000))
+    return `${hours}小时前`
+  } else {
+    const days = Math.floor(diff / (24 * 60 * 60 * 1000))
+    return `${days}天前`
+  }
+}
+const formatDate = (dateString) => {
+  const date = new Date(dateString)
+  const today = new Date()
+  const yesterday = new Date(today)
+  yesterday.setDate(yesterday.getDate() - 1)
+  if (date.toDateString() === today.toDateString()) {
+    return '今天'
+  } else if (date.toDateString() === yesterday.toDateString()) {
+    return '昨天'
+  } else {
+    return date.toLocaleDateString('zh-CN', {
+      month: 'short',
+      day: 'numeric',
+      weekday: 'short'
+    })
+  }
+}
+const getSongCover = (song) => {
+  return playerStore.getCachedCover(song) ||
+         `https://music-api.gdstudio.xyz/api.php?types=pic&source=${song.source}&id=${song.pic_id || song.id}&size=300`
+}
+const handleImageError = (event) => {
+  event.target.src = imageCacheManager.getDefaultImage()
+}
+const switchView = (mode) => {
+  viewMode.value = mode
+  searchKeyword.value = '' // 切换视图时清空搜索
+}
+const clearSearch = () => {
+  searchKeyword.value = ''
+}
+const goToHome = () => {
+  router.push('/home')
+}
+// 收藏相关
+const isFavorite = (song) => {
+  return favoritesStore.isFavorite(song)
+}
+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)
+  if (result) {
+    await playerStore.playSong(song)
+    toastStore.success(`开始播放 "${song.name}"`)
+  } else {
+    toastStore.error('播放失败')
+  }
+}
+const playFromGroup = async (song, group, index) => {
+  const songs = group.map(item => item.song)
+  const result = playQueueStore.setQueue(songs, index)
+  if (result) {
+    await playerStore.playSong(song)
+    toastStore.success(`开始播放 "${song.name}"`)
+  } else {
+    toastStore.error('播放失败')
+  }
+}
+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 handleShowMoreActions = (song, event) => {
+  selectedSong.value = song
+  showMoreActions.value = true
+}
+const handleMoreAction = async (action) => {
+  if (!selectedSong.value) return
+  const song = selectedSong.value
+  switch (action) {
+    case 'favorite':
+      await toggleFavorite(song)
+      break
+    case 'addToPlaylist':
+      // TODO: 实现添加到歌单
+      toastStore.info('添加到歌单功能开发中...')
+      break
+    case 'download':
+      // TODO: 实现下载
+      toastStore.info('下载功能开发中...')
+      break
+  }
+  showMoreActions.value = false
+}
+// 导出和清空操作
+const showExportOptions = () => {
+  const result = historyStore.exportHistory()
+  if (result.success) {
+    toastStore.success('导出成功')
+  } else {
+    toastStore.error('导出失败')
+  }
+}
+const confirmClearAll = () => {
+  confirmDialog.value = {
+    title: '清空播放历史',
+    message: '确定要清空所有播放历史吗？此操作不可撤销，包括播放统计数据也会被清空。',
+    confirmText: '清空',
+    type: 'danger',
+    action: 'clear-all',
+    data: null
+  }
+  confirmDialogRef.value?.show()
+}
+// 确认对话框处理
+const handleConfirm = async () => {
+  const { action } = confirmDialog.value
+  switch (action) {
+    case 'clear-all':
+      const result = historyStore.clearHistory()
+      if (result.success) {
+        toastStore.success('播放历史已清空')
+      } else {
+        toastStore.error('清空失败')
+      }
+      break
+  }
+}
+// 生命周期
+onMounted(() => {
+  // 加载历史数据
+  historyStore.loadHistory()
+  favoritesStore.loadFavorites()
+})
+</script>
+<style scoped>
+.history-page {
+  height: 100%;
+  background: var(--bg-primary);
+  overflow-y: auto;
+}
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-lighter);
+}
+.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-blue);
+}
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  background: var(--accent-blue);
+  color: white;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.action-btn:hover {
+  background: var(--accent-blue-hover);
+  transform: translateY(-1px);
+}
+.action-btn.danger {
+  background: #ff4444;
+}
+.action-btn.danger:hover {
+  background: #ff6666;
+}
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  padding: 16px;
+  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;
+}
+.stat-number {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--accent-blue);
+  margin-bottom: 4px;
+}
+.stat-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.filter-section {
+  padding: 0 16px 16px;
+}
+.filter-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  overflow-x: auto;
+  padding: 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);
+}
+.filter-tab:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.filter-tab.active {
+  background: var(--accent-blue);
+  color: white;
+}
+.search-box {
+  display: flex;
+  align-items: center;
+  background: var(--bg-card);
+  border-radius: 25px;
+  padding: 12px 16px;
+  border: 1px solid var(--border-light);
+}
+.search-box i {
+  color: var(--text-secondary);
+  margin-right: 12px;
+}
+.search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 14px;
+  outline: none;
+}
+.search-input::placeholder {
+  color: var(--text-tertiary);
+}
+.clear-btn {
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 50%;
+  transition: var(--transition-fast);
+}
+.clear-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+.content-area {
+  flex: 1;
+  min-height: 0;
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  text-align: center;
+  color: var(--text-tertiary);
+}
+.empty-state i {
+  font-size: 64px;
+  margin-bottom: 20px;
+  opacity: 0.5;
+}
+.empty-state p {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+.empty-tip {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 24px;
+}
+.discover-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  background: var(--accent-blue);
+  color: white;
+  border-radius: 25px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.discover-btn:hover {
+  background: var(--accent-blue-hover);
+  transform: scale(1.05);
+}
+.history-list,
+.top-list {
+  padding-bottom: calc(var(--mini-player-height) + var(--tabbar-height) + 20px);
+}
+.history-item,
+.top-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-card);
+  transition: var(--transition-fast);
+}
+.history-item:hover,
+.top-item:hover {
+  background: var(--bg-hover);
+}
+.rank-badge {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--accent-gradient);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+.item-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  cursor: pointer;
+  gap: 12px;
+}
+.song-cover {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  border-radius: var(--radius-small);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.song-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: var(--transition-fast);
+}
+.song-cover:hover .play-overlay {
+  opacity: 1;
+}
+.play-overlay i {
+  color: white;
+  font-size: 16px;
+}
+.song-info {
+  flex: 1;
+  min-width: 0;
+}
+.song-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.song-meta {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.play-time,
+.play-count {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin: 0;
+}
+.item-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.item-actions .action-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+.item-actions .action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+  transform: none;
+}
+.favorite-btn.active {
+  background: rgba(255, 107, 107, 0.2);
+  color: var(--accent-red);
+}
+.favorite-btn.active:hover {
+  background: rgba(255, 107, 107, 0.3);
+  color: var(--accent-red);
+}
+.date-group {
+  margin-bottom: 24px;
+}
+.group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border-lighter);
+  sticky: true;
+  top: 0;
+  z-index: 10;
+}
+.group-date {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+.group-count {
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.1);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+/* 响应式 */
+@media (max-width: 375px) {
+  .page-header {
+    padding: 12px;
+  }
+  .page-title {
+    font-size: 20px;
+  }
+  .stats-grid {
+    margin: 12px;
+    padding: 16px 12px;
+    gap: 8px;
+  }
+  .stat-card {
+    padding: 12px 4px;
+  }
+  .stat-number {
+    font-size: 18px;
+  }
+  .filter-section {
+    padding: 0 12px 12px;
+  }
+  .history-item,
+  .top-item {
+    padding: 12px;
+  }
+  .song-cover {
+    width: 45px;
+    height: 45px;
+  }
+  .song-name {
+    font-size: 15px;
+  }
+  .song-meta {
+    font-size: 12px;
+  }
+  .rank-badge {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+  }
+}
+@media (min-width: 768px) {
+  .history-page {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .stats-grid {
+    max-width: 600px;
+    margin: 16px auto;
+  }
+  .history-list,
+  .top-list {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+}
+</style>

src/views/HomePage.vue CHANGED Viewed

@@ -23,12 +23,18 @@
 import { ref, computed, onMounted } from 'vue'
 import { useSearchStore } from '@/stores/search'
 import { usePlayerStore } from '@/stores/player'
 import { musicApi, utils } from '@/services/musicApi'
 import SearchBox from '@/components/search/SearchBox.vue'
 import SearchResults from '@/components/search/SearchResults.vue'
 const searchStore = useSearchStore()
 const playerStore = usePlayerStore()
 // 响应式数据
 const searchError = ref('')
@@ -74,28 +80,30 @@ const retrySearch = () => {
 const handlePlay = async (song, index) => {
   try {
-    // 设置播放列表为当前搜索结果
-    const currentResults = searchStore.searchResults
-    if (currentResults.length > 0) {
-      playerStore.setPlaylist(currentResults, index)
     } else {
-      // 如果没有搜索结果，至少添加当前歌曲
-      playerStore.setPlaylist([song], 0)
     }
   } catch (error) {
     console.error('播放失败:', error)
   }
 }
-const emitPlayEvent = (song) => {
-  // 这里可以通过事件总线或者其他方式通知App.vue播放歌曲
-  const event = new CustomEvent('playSong', {
-    detail: { song }
-  })
-  window.dispatchEvent(event)
-}
 const getErrorMessage = (error) => {
   if (error.message?.includes('Failed to fetch')) {
     return '网络连接失败，请检查网络后重试'

 import { ref, computed, onMounted } from 'vue'
 import { useSearchStore } from '@/stores/search'
 import { usePlayerStore } from '@/stores/player'
+import { usePlayQueueStore } from '@/stores/playqueue'
+import { useHistoryStore } from '@/stores/history'
+import { useToastStore } from '@/stores/toast'
 import { musicApi, utils } from '@/services/musicApi'
 import SearchBox from '@/components/search/SearchBox.vue'
 import SearchResults from '@/components/search/SearchResults.vue'
 const searchStore = useSearchStore()
 const playerStore = usePlayerStore()
+const playQueueStore = usePlayQueueStore()
+const historyStore = useHistoryStore()
+const toastStore = useToastStore()
 // 响应式数据
 const searchError = ref('')
 const handlePlay = async (song, index) => {
   try {
+    // SOLID原则：单一职责 - playQueueStore负责队列管理，playerStore负责播放控制
+    const searchResults = searchStore.searchResults || []
+    // 将搜索结果设置为播放队列，从指定索引开始播放
+    const result = playQueueStore.setQueue(searchResults, index)
+    if (result) {
+      // 开始播放歌曲
+      await playerStore.playSong(song)
+      // 添加到播放历史 - DRY原则：使用统一的历史记录方法
+      historyStore.addToHistory(song)
+      // 用户反馈
+      toastStore.success(`开始播放 "${song.name}"`)
     } else {
+      throw new Error('设置播放队列失败')
     }
   } catch (error) {
     console.error('播放失败:', error)
+    toastStore.error('播放失败，请重试')
   }
 }
 const getErrorMessage = (error) => {
   if (error.message?.includes('Failed to fetch')) {
     return '网络连接失败，请检查网络后重试'

src/views/MyMusicPage.vue CHANGED Viewed

@@ -6,6 +6,11 @@
         <i class="fas fa-heart"></i>
         我的音乐
       </h1>
     </div>
     <!-- 统计卡片 -->
@@ -19,20 +24,16 @@
         <div class="stat-number">{{ historyCount }}</div>
         <div class="stat-label">播放历史</div>
       </div>
-      <div class="stat-card">
-        <div class="stat-number">{{ totalPlayTime }}</div>
-        <div class="stat-label">累计时长</div>
-      </div>
     </div>
     <!-- 选项卡 -->
     <div class="tabs-container">
-      <div class="tabs">
         <button
           class="tab-btn"
           :class="{ active: activeTab === 'favorites' }"
-          @click="activeTab = 'favorites'"
         >
           <i class="fas fa-heart"></i>
           <span>我的收藏</span>
@@ -42,10 +43,11 @@
         <button
           class="tab-btn"
           :class="{ active: activeTab === 'history' }"
-          @click="activeTab = 'history'"
         >
           <i class="fas fa-history"></i>
-          <span>播放历史</span>
           <span class="tab-count">{{ historyCount }}</span>
         </button>
       </div>
@@ -102,26 +104,45 @@
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useFavoritesStore } from '@/stores/favorites'
 import { usePlayerStore } from '@/stores/player'
 import { useHistoryStore } from '@/stores/history'
 import { utils } from '@/services/musicApi'
 import SongItem from '@/components/search/SongItem.vue'
 import FavoritesList from '@/components/favorites/FavoritesList.vue'
 const router = useRouter()
 const favoritesStore = useFavoritesStore()
 const playerStore = usePlayerStore()
 const historyStore = useHistoryStore()
 // 响应式数据
 const activeTab = ref('favorites')
 // 计算属性
 const favorites = computed(() => favoritesStore.favorites)
@@ -132,11 +153,6 @@ const history = computed(() => historyStore.history)
 const historyCount = computed(() => history.value.length)
 const hasHistory = computed(() => historyCount.value > 0)
-const totalPlayTime = computed(() => {
-  const totalSeconds = historyStore.totalPlayTime
-  return utils.formatDuration(totalSeconds)
-})
 // 按日期分组的历史记录
 const groupedHistory = computed(() => {
   const groups = {}
@@ -159,19 +175,61 @@ const groupedHistory = computed(() => {
   return sortedGroups
 })
 // 方法
-const handlePlayFromFavorites = (song) => {
   // 从收藏列表播放
   if (Array.isArray(song)) {
     // 播放多首歌曲
-    playerStore.setPlaylist(song)
-    playerStore.playSong(song[0], 0)
   } else {
     // 播放单首歌曲
-    playerStore.setPlaylist(favorites.value.map(item => item.song))
     const playlist = favorites.value.map(item => item.song)
     const index = playlist.findIndex(s => s.id === song.id)
-    playerStore.playSong(song, index)
   }
   // 添加到播放历史
@@ -182,52 +240,23 @@ const handlePlayFromFavorites = (song) => {
   }
 }
-const handleBatchAction = (data) => {
-  const { action, songs, count } = data
-  switch (action) {
-    case 'play':
-      console.log('批量播放:', songs)
-      break
-    case 'add-to-playlist':
-      console.log('批量添加到播放列表:', songs)
-      break
-    case 'remove':
-      console.log('批量删除完成，删除了', count, '首歌曲')
-      break
-  }
-}
-const handleMoreAction = (data) => {
-  const { action, song } = data
-  switch (action) {
-    case 'play-next':
-      console.log('下一首播放:', song)
-      break
-    case 'add-to-playlist':
-      console.log('添加到播放列表:', song)
-      break
-    case 'copy-link':
-      console.log('已复制链接:', song)
-      break
-    case 'view-details':
-      console.log('查看详情:', song)
-      break
-  }
 }
-const clearHistory = async () => {
-  if (confirm('确定要清空所有播放历史吗？此操作不可撤销。')) {
-    try {
-      await historyStore.clearHistory()
-    } catch (error) {
-      console.error('清空历史失败:', error)
-    }
   }
 }
-const handlePlay = (song, index) => {
   let playlist = []
   switch (activeTab.value) {
@@ -238,8 +267,11 @@ const handlePlay = (song, index) => {
       break
   }
-  playerStore.setPlaylist(playlist)
-  playerStore.playSong(song, playlist.findIndex(s => s.id === song.id))
   // 添加到播放历史
   historyStore.addToHistory(song)
@@ -247,10 +279,10 @@ const handlePlay = (song, index) => {
 const handleFavorite = async (song) => {
   try {
-    if (favoritesStore.isFavorite(song.id)) {
-      await favoritesStore.removeFavorite(song.id)
     } else {
-      await favoritesStore.addFavorite(song)
     }
   } catch (error) {
     console.error('收藏操作失败:', error)
@@ -262,6 +294,41 @@ const handleMore = (song) => {
   console.log('更多操作:', song)
 }
 const formatDate = (dateString) => {
   const date = new Date(dateString)
   const today = new Date()
@@ -324,6 +391,26 @@ onMounted(async () => {
   gap: 8px;
 }
 .action-btn {
   display: flex;
   align-items: center;
@@ -349,7 +436,7 @@ onMounted(async () => {
 .stats-cards {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   padding: 20px 16px;
   background: var(--bg-card);

         <i class="fas fa-heart"></i>
         我的音乐
       </h1>
+      <div class="header-actions">
+        <button class="settings-btn" @click="goToSettings">
+          <i class="fas fa-cog"></i>
+        </button>
+      </div>
     </div>
     <!-- 统计卡片 -->
         <div class="stat-number">{{ historyCount }}</div>
         <div class="stat-label">播放历史</div>
       </div>
     </div>
     <!-- 选项卡 -->
     <div class="tabs-container">
+      <div class="tabs" ref="tabsRef">
         <button
           class="tab-btn"
           :class="{ active: activeTab === 'favorites' }"
+          @click="switchTab('favorites')"
+          ref="favoritesTab"
         >
           <i class="fas fa-heart"></i>
           <span>我的收藏</span>
         <button
           class="tab-btn"
           :class="{ active: activeTab === 'history' }"
+          @click="switchTab('history')"
+          ref="historyTab"
         >
           <i class="fas fa-history"></i>
+          <span>历史记录</span>
           <span class="tab-count">{{ historyCount }}</span>
         </button>
       </div>
         </div>
       </div>
     </div>
+    <!-- 确认对话框 -->
+    <ConfirmDialog
+      ref="confirmDialogRef"
+      title="清空播放历史"
+      message="确定要清空所有播放历史吗？此操作不可撤销。"
+      confirm-text="清空"
+      type="danger"
+      @confirm="confirmClearHistory"
+    />
   </div>
 </template>
 <script setup>
+import { ref, computed, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { useFavoritesStore } from '@/stores/favorites'
 import { usePlayerStore } from '@/stores/player'
 import { useHistoryStore } from '@/stores/history'
+import { usePlayQueueStore } from '@/stores/playqueue'
+import { useToastStore } from '@/stores/toast'
 import { utils } from '@/services/musicApi'
 import SongItem from '@/components/search/SongItem.vue'
 import FavoritesList from '@/components/favorites/FavoritesList.vue'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 const router = useRouter()
 const favoritesStore = useFavoritesStore()
 const playerStore = usePlayerStore()
 const historyStore = useHistoryStore()
+const playQueueStore = usePlayQueueStore()
+const toastStore = useToastStore()
 // 响应式数据
 const activeTab = ref('favorites')
+const tabsRef = ref(null)
+const favoritesTab = ref(null)
+const historyTab = ref(null)
+const confirmDialogRef = ref(null)
 // 计算属性
 const favorites = computed(() => favoritesStore.favorites)
 const historyCount = computed(() => history.value.length)
 const hasHistory = computed(() => historyCount.value > 0)
 // 按日期分组的历史记录
 const groupedHistory = computed(() => {
   const groups = {}
   return sortedGroups
 })
+// 选项卡切换和滚动居中
+const switchTab = (tabName) => {
+  activeTab.value = tabName
+  // 滚动选中的选项卡到居中位置
+  nextTick(() => {
+    const tabsContainer = tabsRef.value
+    if (!tabsContainer) return
+    let targetTab = null
+    switch (tabName) {
+      case 'favorites':
+        targetTab = favoritesTab.value
+        break
+      case 'history':
+        targetTab = historyTab.value
+        break
+    }
+    if (targetTab && tabsContainer) {
+      const containerRect = tabsContainer.getBoundingClientRect()
+      const targetRect = targetTab.getBoundingClientRect()
+      const scrollLeft = targetRect.left - containerRect.left - (containerRect.width - targetRect.width) / 2
+      tabsContainer.scrollTo({
+        left: tabsContainer.scrollLeft + scrollLeft,
+        behavior: 'smooth'
+      })
+    }
+  })
+}
+// 跳转到设置页面
+const goToSettings = () => {
+  router.push('/settings')
+}
 // 方法
+const handlePlayFromFavorites = async (song) => {
   // 从收藏列表播放
   if (Array.isArray(song)) {
     // 播放多首歌曲
+    const result = playQueueStore.setQueue(song, 0)
+    if (result && song.length > 0) {
+      await playerStore.playSong(song[0])
+    }
   } else {
     // 播放单首歌曲
     const playlist = favorites.value.map(item => item.song)
     const index = playlist.findIndex(s => s.id === song.id)
+    const result = playQueueStore.setQueue(playlist, index)
+    if (result) {
+      await playerStore.playSong(song)
+    }
   }
   // 添加到播放历史
   }
 }
+// 播放历史相关方法
+const clearHistory = () => {
+  confirmDialogRef.value?.show()
 }
+const confirmClearHistory = async () => {
+  try {
+    await historyStore.clearHistory()
+    toastStore.success('播放历史已清空')
+  } catch (error) {
+    console.error('清空历史失败:', error)
+    toastStore.error('清空历史失败，请重试')
   }
 }
+const handlePlay = async (song, index) => {
   let playlist = []
   switch (activeTab.value) {
       break
   }
+  const songIndex = playlist.findIndex(s => s.id === song.id)
+  const result = playQueueStore.setQueue(playlist, songIndex >= 0 ? songIndex : index)
+  if (result) {
+    await playerStore.playSong(song)
+  }
   // 添加到播放历史
   historyStore.addToHistory(song)
 const handleFavorite = async (song) => {
   try {
+    if (favoritesStore.isFavorite(song)) {
+      await favoritesStore.removeFromFavorites(song)
     } else {
+      await favoritesStore.addToFavorites(song)
     }
   } catch (error) {
     console.error('收藏操作失败:', error)
   console.log('更多操作:', song)
 }
+const handleBatchAction = (data) => {
+  const { action, songs, count } = data
+  switch (action) {
+    case 'play':
+      toastStore.info(`开始播放选中的 ${songs.length} 首歌曲`)
+      break
+    case 'add-to-playlist':
+      toastStore.info(`批量添加 ${songs.length} 首歌曲到播放列表`)
+      break
+    case 'remove':
+      toastStore.success(`批量删除完成，删除了 ${count} 首歌曲`)
+      break
+  }
+}
+const handleMoreAction = (data) => {
+  const { action, song } = data
+  switch (action) {
+    case 'play-next':
+      toastStore.success(`"${song.name}" 已添加到下一首播放`)
+      break
+    case 'add-to-playlist':
+      toastStore.info(`正在添加 "${song.name}" 到播放列表`)
+      break
+    case 'copy-link':
+      toastStore.success(`"${song.name}" 链接已复制`)
+      break
+    case 'view-details':
+      toastStore.info(`正在查看 "${song.name}" 详情`)
+      break
+  }
+}
 const formatDate = (dateString) => {
   const date = new Date(dateString)
   const today = new Date()
   gap: 8px;
 }
+.settings-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition-fast);
+}
+.settings-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
 .action-btn {
   display: flex;
   align-items: center;
 .stats-cards {
   display: grid;
+  grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   padding: 20px 16px;
   background: var(--bg-card);

src/views/PlayQueuePage.vue ADDED Viewed

	@@ -0,0 +1,950 @@

+<template>
+  <div class="play-queue-page">
+    <!-- 头部 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        <i class="fas fa-list"></i>
+        播放列表
+      </h1>
+      <div class="header-actions">
+        <button v-if="!isEmpty" class="action-btn" @click="shuffleQueue">
+          <i class="fas fa-random"></i>
+        </button>
+        <button v-if="!isEmpty" class="action-btn danger" @click="confirmClearQueue">
+          <i class="fas fa-trash"></i>
+        </button>
+        <button class="action-btn settings-btn" @click="goToSettings">
+          <i class="fas fa-cog"></i>
+        </button>
+      </div>
+    </div>
+    <!-- 搜索框 -->
+    <div v-if="!isEmpty" class="search-section">
+      <div class="search-box">
+        <i class="fas fa-search"></i>
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="在播放列表中搜索..."
+          class="search-input"
+        />
+        <button v-if="searchKeyword" @click="clearSearch" class="clear-btn">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+    </div>
+    <!-- 内容区域 -->
+    <div class="content-area">
+      <!-- 空状态 -->
+      <div v-if="isEmpty" class="empty-state">
+        <i class="fas fa-list-music"></i>
+        <p>播放列表为空</p>
+        <p class="empty-tip">添加一些歌曲到列表开始播放吧</p>
+        <button class="discover-btn" @click="goToHome">
+          <i class="fas fa-search"></i>
+          去发现音乐
+        </button>
+      </div>
+      <!-- 队列列表 -->
+      <div v-else class="queue-list">
+        <div
+          v-for="(song, index) in displayedQueue"
+          :key="`${song.id}-${index}`"
+          class="queue-item"
+          :class="{
+            current: index === currentIndex && !searchKeyword,
+            played: index < currentIndex && !searchKeyword
+          }"
+        >
+          <!-- 拖拽手柄 -->
+          <div class="drag-handle" @mousedown="startDrag(index, $event)">
+            <i class="fas fa-grip-vertical"></i>
+          </div>
+          <!-- 歌曲信息 -->
+          <div class="song-content" @click="playAtIndex(index)">
+            <div class="song-cover">
+              <img
+                :src="getSongCover()"
+                :alt="song.name"
+                :data-song-data="JSON.stringify(song)"
+                @error="handleImageError"
+              />
+              <div class="play-overlay">
+                <i class="fas fa-play"></i>
+              </div>
+            </div>
+            <div class="song-info">
+              <h3 class="song-name">{{ song.name }}</h3>
+              <p class="song-meta">
+                <span class="artist">{{ formatArtist(song.artist) }}</span>
+              </p>
+              <p v-if="song.duration" class="song-duration">{{ formatTime(song.duration) }}</p>
+            </div>
+            <!-- 当前播放指示器 -->
+            <div v-if="index === currentIndex && !searchKeyword" class="current-indicator">
+              <div class="playing-icon">
+                <i class="fas fa-volume-up"></i>
+              </div>
+            </div>
+          </div>
+          <!-- 操作按钮 -->
+          <div class="song-actions">
+            <button
+              class="action-btn favorite-btn"
+              :class="{ active: isFavorite(song) }"
+              @click="toggleFavorite(song)"
+            >
+              <i :class="isFavorite(song) ? 'fas fa-heart' : 'far fa-heart'"></i>
+            </button>
+            <button class="action-btn" @click="removeFromQueue(index)">
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 确认对话框 -->
+    <ConfirmDialog
+      ref="confirmDialogRef"
+      :title="confirmDialog.title"
+      :message="confirmDialog.message"
+      :confirm-text="confirmDialog.confirmText"
+      :type="confirmDialog.type"
+      @confirm="handleConfirm"
+    />
+  </div>
+</template>
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { usePlayQueueStore } from '@/stores/playqueue'
+import { useFavoritesStore } from '@/stores/favorites'
+import { usePlayerStore } from '@/stores/player'
+import { useToastStore } from '@/stores/toast'
+import { useSongCoverLoader } from '@/composables/useSongCoverLoader'
+import { utils } from '@/services/musicApi'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+const router = useRouter()
+const playQueueStore = usePlayQueueStore()
+const favoritesStore = useFavoritesStore()
+const playerStore = usePlayerStore()
+const toastStore = useToastStore()
+const { getDefaultCover, handleImageError, observeImage } = useSongCoverLoader()
+// 响应式数据
+const searchKeyword = ref('')
+const confirmDialogRef = ref(null)
+const isDragging = ref(false)
+const dragStartIndex = ref(-1)
+// 确认对话框状态
+const confirmDialog = ref({
+  title: '',
+  message: '',
+  confirmText: '确定',
+  type: 'warning',
+  action: null,
+  data: null
+})
+// 计算属性
+const queue = computed(() => playQueueStore.queue)
+const currentIndex = computed(() => playQueueStore.currentIndex)
+const currentSong = computed(() => playQueueStore.currentSong)
+const playMode = computed(() => playQueueStore.playMode)
+const queueLength = computed(() => playQueueStore.queueLength)
+const isEmpty = computed(() => playQueueStore.isEmpty)
+const isPlaying = computed(() => playerStore.isPlaying)
+// 搜索结果
+const displayedQueue = computed(() => {
+  if (!searchKeyword.value.trim()) {
+    return queue.value
+  }
+  return playQueueStore.searchInQueue(searchKeyword.value).map(item => item.song)
+})
+// 统计信息
+const totalDuration = computed(() => {
+  return queue.value.reduce((total, song) => total + (song.duration || 0), 0)
+})
+const remainingCount = computed(() => {
+  return Math.max(0, queueLength.value - currentIndex.value - 1)
+})
+// 播放模式相关
+const playModeText = computed(() => {
+  const modes = {
+    'list': '顺序播放',
+    'random': '随机播放',
+    'single': '单曲循环'
+  }
+  return modes[playMode.value] || '顺序播放'
+})
+const playModeIcon = computed(() => {
+  const icons = {
+    'list': 'fas fa-list',
+    'random': 'fas fa-random',
+    'single': 'fas fa-sync-alt'
+  }
+  return icons[playMode.value] || 'fas fa-list'
+})
+// 方法
+const formatTime = (seconds) => {
+  if (!seconds) return '0:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+const formatArtist = (artist) => {
+  return utils.formatArtist(artist)
+}
+const formatDuration = (seconds) => {
+  if (!seconds) return '0分钟'
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  if (hours > 0) {
+    return `${hours}小时${minutes}分钟`
+  }
+  return `${minutes}分钟`
+}
+// 方法
+// 图片加载相关
+const getSongCover = () => {
+  return getDefaultCover()
+}
+// 初始化懒加载观察
+const initLazyImages = () => {
+  const imageElements = document.querySelectorAll('.queue-item .song-cover img')
+  imageElements.forEach((img, index) => {
+    const songData = img.dataset.songData
+    if (songData) {
+      try {
+        const song = JSON.parse(songData)
+        observeImage(img, song)
+      } catch (error) {
+        console.error('解析歌曲数据失败:', error)
+      }
+    }
+  })
+}
+const clearSearch = () => {
+  searchKeyword.value = ''
+}
+const goToHome = () => {
+  router.push('/home')
+}
+const goToSettings = () => {
+  router.push('/settings')
+}
+// 收藏相关
+const isFavorite = (song) => {
+  return favoritesStore.isFavorite(song)
+}
+const toggleFavorite = async (song) => {
+  const result = await favoritesStore.toggleFavorite(song)
+  const message = result ? '已添加到我喜欢的音乐' : '已从我喜欢的音乐中移除'
+  toastStore.success(message)
+}
+// 播放控制
+const playAtIndex = async (index) => {
+  if (searchKeyword.value.trim()) {
+    // 如果在搜索状态，直接播放歌曲
+    const song = displayedQueue.value[index]
+    await playerStore.playSong(song)
+    toastStore.success(`开始播放 "${song.name}"`)
+    return
+  }
+  // 正常队列播放
+  const song = playQueueStore.playAtIndex(index)
+  if (song) {
+    await playerStore.playSong(song, true) // restoreProgress = true
+    toastStore.success(`开始播放 "${song.name}"`)
+  }
+}
+const togglePlayMode = () => {
+  const newMode = playQueueStore.togglePlayMode()
+  toastStore.info(`切换到${playModeText.value}`)
+}
+const shuffleQueue = () => {
+  playQueueStore.shuffleQueue()
+  toastStore.success('队列已随机排列')
+}
+const removeFromQueue = (index) => {
+  if (searchKeyword.value.trim()) {
+    toastStore.warning('搜索状态下无法删除，请清空搜索后操作')
+    return
+  }
+  const song = queue.value[index]
+  const result = playQueueStore.removeFromQueue(index)
+  if (result.success) {
+    toastStore.success(`"${song.name}" 已从列表移除`)
+  } else {
+    toastStore.error(result.message)
+  }
+}
+const confirmClearQueue = () => {
+  confirmDialog.value = {
+    title: '清空播放列表',
+    message: '确定要清空整个播放列表吗？当前播放的歌曲也会停止。',
+    confirmText: '清空',
+    type: 'warning',
+    action: 'clear-queue',
+    data: null
+  }
+  confirmDialogRef.value?.show()
+}
+// 确认对话框处理
+const handleConfirm = () => {
+  const { action } = confirmDialog.value
+  switch (action) {
+    case 'clear-queue':
+      playQueueStore.clearQueue()
+      playerStore.stop()
+      toastStore.success('播放列表已清空')
+      break
+  }
+}
+// 拖拽功能（基础实现）
+const startDrag = (index, event) => {
+  if (searchKeyword.value.trim()) {
+    toastStore.warning('搜索状态下无法拖拽排序')
+    return
+  }
+  isDragging.value = true
+  dragStartIndex.value = index
+  // TODO: 实现完整的拖拽功能
+  toastStore.info('拖拽排序功能开发中...')
+}
+// 生命周期
+onMounted(() => {
+  // 加载播放队列
+  playQueueStore.loadQueue()
+  favoritesStore.loadFavorites()
+  // 初始化懒加载
+  setTimeout(() => {
+    initLazyImages()
+  }, 100)
+})
+</script>
+<style scoped>
+.play-queue-page {
+  height: 100%;
+  background: var(--bg-primary);
+  overflow-y: auto;
+}
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-lighter);
+}
+.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-green);
+}
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  background: var(--accent-green);
+  color: white;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.action-btn:hover {
+  background: var(--accent-green-hover);
+  transform: translateY(-1px);
+}
+.action-btn.danger {
+  background: #ff4444;
+}
+.action-btn.danger:hover {
+  background: #ff6666;
+}
+.action-btn.settings-btn {
+  background: var(--bg-overlay);
+  color: var(--text-secondary);
+}
+.action-btn.settings-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.current-playing {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 16px;
+  background: var(--bg-card);
+  margin: 16px;
+  border-radius: var(--radius-medium);
+  border: 1px solid var(--border-light);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.current-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+  min-width: 0;
+}
+.current-cover {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: var(--radius-medium);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.current-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.playing-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wave-bars {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+}
+.bar {
+  width: 3px;
+  height: 12px;
+  background: white;
+  border-radius: 2px;
+  opacity: 0.6;
+}
+.bar.animate {
+  animation: wave 1.2s ease-in-out infinite;
+}
+.bar:nth-child(1) { animation-delay: 0s; }
+.bar:nth-child(2) { animation-delay: 0.2s; }
+.bar:nth-child(3) { animation-delay: 0.4s; }
+@keyframes wave {
+  0%, 100% { height: 6px; opacity: 0.6; }
+  50% { height: 16px; opacity: 1; }
+}
+.current-details {
+  flex: 1;
+  min-width: 0;
+}
+.current-name {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.current-meta {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.current-status {
+  font-size: 12px;
+  color: var(--accent-green);
+  margin: 0;
+  font-weight: 600;
+}
+.playmode-control {
+  flex-shrink: 0;
+}
+.playmode-btn {
+  width: 48px;
+  height: 48px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  font-size: 16px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.playmode-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.playmode-btn.random {
+  color: var(--accent-orange);
+  background: rgba(255, 165, 0, 0.2);
+}
+.playmode-btn.single {
+  color: var(--accent-purple);
+  background: rgba(147, 51, 234, 0.2);
+}
+.queue-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  padding: 16px;
+  background: var(--bg-card);
+  margin: 0 16px 16px;
+  border-radius: var(--radius-medium);
+  border: 1px solid var(--border-light);
+}
+.stat-item {
+  text-align: center;
+  padding: 12px 8px;
+}
+.stat-number {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--accent-green);
+  margin-bottom: 4px;
+}
+.stat-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.search-section {
+  padding: 0 16px 16px;
+}
+.search-box {
+  display: flex;
+  align-items: center;
+  background: var(--bg-card);
+  border-radius: 25px;
+  padding: 12px 16px;
+  border: 1px solid var(--border-light);
+}
+.search-box i {
+  color: var(--text-secondary);
+  margin-right: 12px;
+}
+.search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 14px;
+  outline: none;
+}
+.search-input::placeholder {
+  color: var(--text-tertiary);
+}
+.clear-btn {
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 50%;
+  transition: var(--transition-fast);
+}
+.clear-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+.content-area {
+  flex: 1;
+  min-height: 0;
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  text-align: center;
+  color: var(--text-tertiary);
+}
+.empty-state i {
+  font-size: 64px;
+  margin-bottom: 20px;
+  opacity: 0.5;
+}
+.empty-state p {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+.empty-tip {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 24px;
+}
+.discover-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  background: var(--accent-green);
+  color: white;
+  border-radius: 25px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.discover-btn:hover {
+  background: var(--accent-green-hover);
+  transform: scale(1.05);
+}
+.queue-list {
+  padding-bottom: calc(var(--mini-player-height) + var(--tabbar-height) + 20px);
+}
+.queue-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-card);
+  transition: var(--transition-fast);
+}
+.queue-item:hover {
+  background: var(--bg-hover);
+}
+.queue-item.current {
+  background: rgba(34, 197, 94, 0.1);
+  border-left: 4px solid var(--accent-green);
+}
+.queue-item.played {
+  opacity: 0.6;
+}
+.drag-handle {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-tertiary);
+  cursor: grab;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+.drag-handle:active {
+  cursor: grabbing;
+}
+.drag-handle:hover {
+  color: var(--text-secondary);
+}
+.song-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  cursor: pointer;
+  gap: 12px;
+  min-width: 0;
+}
+.song-cover {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  border-radius: var(--radius-small);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.song-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: var(--transition-fast);
+}
+.song-cover:hover .play-overlay {
+  opacity: 1;
+}
+.play-overlay i {
+  color: white;
+  font-size: 16px;
+}
+.song-info {
+  flex: 1;
+  min-width: 0;
+}
+.song-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.song-meta {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.song-duration {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin: 0;
+}
+.current-indicator {
+  display: flex;
+  align-items: center;
+  margin-left: 12px;
+}
+.playing-icon {
+  color: var(--accent-green);
+  font-size: 16px;
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.song-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.song-actions .action-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+.song-actions .action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+  transform: none;
+}
+.favorite-btn.active {
+  background: rgba(255, 107, 107, 0.2);
+  color: var(--accent-red);
+}
+.favorite-btn.active:hover {
+  background: rgba(255, 107, 107, 0.3);
+  color: var(--accent-red);
+}
+/* 响应式 */
+@media (max-width: 375px) {
+  .page-header {
+    padding: 12px;
+  }
+  .page-title {
+    font-size: 20px;
+  }
+  .current-playing {
+    margin: 12px;
+    padding: 16px 12px;
+  }
+  .current-cover {
+    width: 50px;
+    height: 50px;
+  }
+  .current-name {
+    font-size: 16px;
+  }
+  .queue-stats {
+    margin: 0 12px 12px;
+    padding: 16px 12px;
+  }
+  .search-section {
+    padding: 0 12px 12px;
+  }
+  .queue-item {
+    padding: 12px;
+  }
+  .song-cover {
+    width: 45px;
+    height: 45px;
+  }
+  .song-name {
+    font-size: 15px;
+  }
+  .song-meta {
+    font-size: 12px;
+  }
+}
+@media (min-width: 768px) {
+  .play-queue-page {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .current-playing,
+  .queue-stats {
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .queue-list {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+}
+</style>

src/views/PlaylistDetailPage.vue ADDED Viewed

	@@ -0,0 +1,815 @@

+<template>
+  <div class="playlist-detail-page">
+    <!-- 头部信息 -->
+    <div class="playlist-header">
+      <button class="back-btn" @click="goBack">
+        <i class="fas fa-arrow-left"></i>
+      </button>
+      <div class="playlist-cover">
+        <img
+          v-if="playlist?.cover"
+          :src="playlist.cover"
+          :alt="playlist?.name"
+          @error="handleImageError"
+        />
+        <div v-else class="default-cover">
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="playlist-info">
+        <h1 class="playlist-name">{{ playlist?.name || '播放列表' }}</h1>
+        <p class="playlist-description" v-if="playlist?.description">
+          {{ playlist.description }}
+        </p>
+        <div class="playlist-stats">
+          <span class="song-count">{{ playlist?.songs?.length || 0 }}首歌曲</span>
+          <span class="created-time">{{ formatCreateTime(playlist?.createdAt) }}</span>
+        </div>
+      </div>
+      <div class="playlist-actions">
+        <button class="action-btn more-btn" @click="showMoreActions">
+          <i class="fas fa-ellipsis-v"></i>
+        </button>
+      </div>
+    </div>
+    <!-- 播放控制栏 -->
+    <div class="play-controls" v-if="playlist?.songs?.length > 0">
+      <button class="play-all-btn" @click="playAll">
+        <i class="fas fa-play"></i>
+        播放全部
+      </button>
+      <button class="shuffle-btn" @click="shufflePlay">
+        <i class="fas fa-random"></i>
+        随机播放
+      </button>
+      <button
+        class="edit-btn"
+        :class="{ active: editMode }"
+        @click="toggleEditMode"
+      >
+        <i :class="editMode ? 'fas fa-times' : 'fas fa-edit'"></i>
+        {{ editMode ? '取消' : '编辑' }}
+      </button>
+    </div>
+    <!-- 歌曲列表 -->
+    <div class="songs-content">
+      <div v-if="!playlist?.songs?.length" class="empty-playlist">
+        <i class="fas fa-music"></i>
+        <p>播放列表为空</p>
+        <p class="empty-tip">添加一些喜欢的歌曲吧</p>
+      </div>
+      <div v-else class="songs-list">
+        <div
+          v-for="(song, index) in playlist.songs"
+          :key="`${song.id}-${index}`"
+          class="song-item"
+          :class="{
+            active: isCurrentSong(song),
+            'edit-mode': editMode
+          }"
+        >
+          <!-- 拖拽手柄 -->
+          <div v-if="editMode" class="drag-handle">
+            <i class="fas fa-grip-vertical"></i>
+          </div>
+          <!-- 歌曲序号/播放图标 -->
+          <div class="song-index" @click="playSong(song, index)">
+            <span v-if="!isCurrentSong(song) || !playerStore.isPlaying">
+              {{ String(index + 1).padStart(2, '0') }}
+            </span>
+            <i v-else class="fas fa-volume-up playing-icon"></i>
+          </div>
+          <!-- 歌曲信息 -->
+          <div class="song-info" @click="playSong(song, index)">
+            <div class="song-name">{{ song.name }}</div>
+            <div class="song-artist">
+              {{ formatArtist(song.artist) }} · {{ song.album }}
+            </div>
+          </div>
+          <!-- 歌曲操作 -->
+          <div class="song-actions">
+            <button
+              v-if="!editMode"
+              class="action-btn favorite-btn"
+              :class="{ active: favoritesStore.isFavorite(song) }"
+              @click.stop="toggleFavorite(song)"
+            >
+              <i :class="favoritesStore.isFavorite(song) ? 'fas fa-heart' : 'far fa-heart'"></i>
+            </button>
+            <button
+              v-if="!editMode"
+              class="action-btn more-btn"
+              @click.stop="showSongActions(song, index)"
+            >
+              <i class="fas fa-ellipsis-v"></i>
+            </button>
+            <button
+              v-if="editMode"
+              class="action-btn remove-btn"
+              @click.stop="removeSong(index)"
+            >
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 更多操作菜单 -->
+    <div v-if="showActions" class="actions-overlay" @click="hideActions">
+      <div class="actions-menu" @click.stop>
+        <button @click="editPlaylistInfo">
+          <i class="fas fa-edit"></i>
+          编辑信息
+        </button>
+        <button @click="clearPlaylist" class="danger">
+          <i class="fas fa-trash"></i>
+          清空列表
+        </button>
+        <button v-if="!playlist?.isDefault" @click="deletePlaylist" class="danger">
+          <i class="fas fa-trash-alt"></i>
+          删除播放列表
+        </button>
+      </div>
+    </div>
+    <!-- 歌曲操作菜单 -->
+    <div v-if="showSongMenu" class="actions-overlay" @click="hideSongActions">
+      <div class="actions-menu" @click.stop>
+        <button @click="playNext(selectedSong)">
+          <i class="fas fa-step-forward"></i>
+          下一首播放
+        </button>
+        <button @click="addToOtherPlaylist">
+          <i class="fas fa-plus"></i>
+          添加到其他播放列表
+        </button>
+        <button @click="removeSongFromMenu" class="danger">
+          <i class="fas fa-minus"></i>
+          从播放列表移除
+        </button>
+      </div>
+    </div>
+    <!-- 确认对话框 -->
+    <ConfirmDialog
+      ref="confirmDialogRef"
+      :title="confirmTitle"
+      :message="confirmMessage"
+      :confirm-text="confirmButtonText"
+      type="danger"
+      @confirm="confirmAction"
+    />
+  </div>
+</template>
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { usePlaylistStore } from '@/stores/playlist'
+import { usePlayerStore } from '@/stores/player'
+import { useFavoritesStore } from '@/stores/favorites'
+import { usePlayQueueStore } from '@/stores/playqueue'
+import { useToastStore } from '@/stores/toast'
+import { utils } from '@/services/musicApi'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+const router = useRouter()
+const route = useRoute()
+const playlistStore = usePlaylistStore()
+const playerStore = usePlayerStore()
+const favoritesStore = useFavoritesStore()
+const playQueueStore = usePlayQueueStore()
+const toastStore = useToastStore()
+// 响应式数据
+const playlist = ref(null)
+const editMode = ref(false)
+const showActions = ref(false)
+const showSongMenu = ref(false)
+const selectedSong = ref(null)
+const selectedIndex = ref(-1)
+const confirmDialogRef = ref(null)
+const confirmTitle = ref('')
+const confirmMessage = ref('')
+const confirmButtonText = ref('确认')
+const pendingAction = ref(null)
+// 计算属性
+const isCurrentSong = (song) => {
+  return playerStore.currentSong?.id === song.id &&
+         playerStore.currentSong?.source === song.source
+}
+// 方法
+const loadPlaylist = () => {
+  const playlistId = route.params.id
+  if (playlistId) {
+    const foundPlaylist = playlistStore.getPlaylist(playlistId)
+    if (foundPlaylist) {
+      playlist.value = foundPlaylist
+    } else {
+      toastStore.error('播放列表不存在')
+      goBack()
+    }
+  }
+}
+const goBack = () => {
+  router.push('/playlists')
+}
+const handleImageError = (event) => {
+  event.target.style.display = 'none'
+}
+const formatArtist = (artist) => {
+  return utils.formatArtist ? utils.formatArtist(artist) : artist
+}
+const formatCreateTime = (timestamp) => {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  return date.toLocaleDateString()
+}
+// 播放控制
+const playAll = async () => {
+  if (!playlist.value?.songs?.length) return
+  const result = playQueueStore.setQueue(playlist.value.songs, 0)
+  if (result && playlist.value.songs.length > 0) {
+    await playerStore.playSong(playlist.value.songs[0])
+    toastStore.success('开始播放播放列表')
+  }
+}
+const shufflePlay = async () => {
+  if (!playlist.value?.songs?.length) return
+  const shuffled = [...playlist.value.songs].sort(() => Math.random() - 0.5)
+  const result = playQueueStore.setQueue(shuffled, 0)
+  if (result && shuffled.length > 0) {
+    await playerStore.playSong(shuffled[0])
+    toastStore.success('开始随机播放')
+  }
+}
+const playSong = async (song, index) => {
+  if (!playlist.value?.songs) return
+  const result = playQueueStore.setQueue(playlist.value.songs, index)
+  if (result) {
+    await playerStore.playSong(song)
+  }
+}
+const toggleFavorite = async (song) => {
+  try {
+    await favoritesStore.toggleFavorite(song)
+  } catch (error) {
+    console.error('收藏操作失败:', error)
+    toastStore.error('操作失败，请重试')
+  }
+}
+// 编辑模式
+const toggleEditMode = () => {
+  editMode.value = !editMode.value
+  if (!editMode.value) {
+    hideActions()
+    hideSongActions()
+  }
+}
+const removeSong = (index) => {
+  confirmTitle.value = '移除歌曲'
+  confirmMessage.value = `确定要从播放列表中移除"${playlist.value.songs[index].name}"吗？`
+  confirmButtonText.value = '移除'
+  pendingAction.value = () => {
+    const success = playlistStore.removeSongFromPlaylist(playlist.value.id, index)
+    if (success) {
+      toastStore.success('歌曲已移除')
+    } else {
+      toastStore.error('移除失败')
+    }
+  }
+  confirmDialogRef.value?.show()
+}
+// 操作菜单
+const showMoreActions = () => {
+  showActions.value = true
+}
+const hideActions = () => {
+  showActions.value = false
+}
+const showSongActions = (song, index) => {
+  selectedSong.value = song
+  selectedIndex.value = index
+  showSongMenu.value = true
+}
+const hideSongActions = () => {
+  showSongMenu.value = false
+  selectedSong.value = null
+  selectedIndex.value = -1
+}
+const playNext = (song) => {
+  playerStore.playNext(song)
+  hideSongActions()
+  toastStore.success(`"${song.name}" 已添加到下一首播放`)
+}
+const addToOtherPlaylist = () => {
+  // TODO: 实现添加到其他播放列表的功能
+  hideSongActions()
+  toastStore.info('功能开发中...')
+}
+const removeSongFromMenu = () => {
+  hideSongActions()
+  removeSong(selectedIndex.value)
+}
+const editPlaylistInfo = () => {
+  // TODO: 实现编辑播放列表信息的功能
+  hideActions()
+  toastStore.info('编辑功能开发中...')
+}
+const clearPlaylist = () => {
+  hideActions()
+  confirmTitle.value = '清空播放列表'
+  confirmMessage.value = `确定要清空"${playlist.value.name}"中的所有歌曲吗？此操作不可撤销。`
+  confirmButtonText.value = '清空'
+  pendingAction.value = () => {
+    const success = playlistStore.clearPlaylist(playlist.value.id)
+    if (success) {
+      toastStore.success('播放列表已清空')
+    } else {
+      toastStore.error('清空失败')
+    }
+  }
+  confirmDialogRef.value?.show()
+}
+const deletePlaylist = () => {
+  hideActions()
+  confirmTitle.value = '删除播放列表'
+  confirmMessage.value = `确定要删除播放列表"${playlist.value.name}"吗？此操作不可撤销。`
+  confirmButtonText.value = '删除'
+  pendingAction.value = () => {
+    const success = playlistStore.deletePlaylist(playlist.value.id)
+    if (success) {
+      toastStore.success('播放列表已删除')
+      goBack()
+    } else {
+      toastStore.error('删除失败')
+    }
+  }
+  confirmDialogRef.value?.show()
+}
+const confirmAction = () => {
+  if (pendingAction.value) {
+    pendingAction.value()
+    pendingAction.value = null
+  }
+}
+// 生命周期
+onMounted(() => {
+  loadPlaylist()
+})
+// 监听路由变化
+watch(() => route.params.id, () => {
+  loadPlaylist()
+})
+</script>
+<style scoped>
+.playlist-detail-page {
+  height: 100%;
+  background: var(--bg-primary);
+  overflow-y: auto;
+  padding-bottom: calc(var(--mini-player-height) + var(--tabbar-height) + 20px);
+}
+.playlist-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 16px;
+  background: var(--bg-card);
+  margin: 16px;
+  border-radius: var(--radius-small);
+  border: 1px solid var(--border-light);
+}
+.back-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition-fast);
+  flex-shrink: 0;
+}
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.playlist-cover {
+  width: 80px;
+  height: 80px;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.playlist-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.default-cover {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, var(--accent-red), #ff8a8a);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 32px;
+}
+.playlist-info {
+  flex: 1;
+  min-width: 0;
+}
+.playlist-name {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.playlist-description {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 8px;
+  line-height: 1.4;
+}
+.playlist-stats {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+.playlist-actions {
+  flex-shrink: 0;
+}
+.action-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition-fast);
+}
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.play-controls {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  background: var(--bg-card);
+  margin: 0 16px 16px;
+  border-radius: var(--radius-small);
+  border: 1px solid var(--border-light);
+}
+.play-all-btn,
+.shuffle-btn,
+.edit-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.play-all-btn {
+  background: var(--accent-red);
+  color: white;
+}
+.play-all-btn:hover {
+  background: var(--accent-red-hover);
+}
+.shuffle-btn,
+.edit-btn {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+.shuffle-btn:hover,
+.edit-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.edit-btn.active {
+  background: var(--accent-red);
+  color: white;
+}
+.songs-content {
+  flex: 1;
+  min-height: 0;
+}
+.empty-playlist {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  text-align: center;
+  color: var(--text-tertiary);
+}
+.empty-playlist i {
+  font-size: 64px;
+  margin-bottom: 20px;
+  opacity: 0.5;
+}
+.empty-playlist p {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+.empty-tip {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+.songs-list {
+  background: var(--bg-card);
+  margin: 0 16px;
+  border-radius: var(--radius-small);
+  border: 1px solid var(--border-light);
+  overflow: hidden;
+}
+.song-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  transition: var(--transition-fast);
+  position: relative;
+}
+.song-item:last-child {
+  border-bottom: none;
+}
+.song-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+.song-item.active {
+  background: rgba(255, 107, 107, 0.1);
+  color: var(--accent-red);
+}
+.song-item.edit-mode {
+  padding-left: 50px;
+}
+.drag-handle {
+  position: absolute;
+  left: 16px;
+  color: var(--text-tertiary);
+  cursor: grab;
+}
+.drag-handle:active {
+  cursor: grabbing;
+}
+.song-index {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-right: 12px;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.song-index:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.song-item.active .song-index {
+  background: var(--accent-red);
+  color: white;
+}
+.playing-icon {
+  color: var(--accent-red);
+  animation: pulse 1.5s infinite;
+}
+.song-info {
+  flex: 1;
+  min-width: 0;
+  margin-right: 12px;
+  cursor: pointer;
+}
+.song-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.song-item.active .song-name {
+  color: var(--accent-red);
+}
+.song-artist {
+  font-size: 13px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.song-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.favorite-btn.active {
+  color: var(--accent-red);
+}
+.remove-btn {
+  background: rgba(255, 68, 68, 0.1);
+  color: #ff4444;
+}
+.remove-btn:hover {
+  background: rgba(255, 68, 68, 0.2);
+  color: #ff2222;
+}
+.actions-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.actions-menu {
+  background: var(--bg-card);
+  border-radius: 12px;
+  padding: 8px 0;
+  min-width: 200px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--border-light);
+}
+.actions-menu button {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 20px;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.actions-menu button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.actions-menu button.danger {
+  color: #ff4444;
+}
+.actions-menu button.danger:hover {
+  background: rgba(255, 68, 68, 0.1);
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+/* 响应式 */
+@media (max-width: 375px) {
+  .playlist-header {
+    padding: 12px;
+    margin: 12px;
+  }
+  .playlist-cover {
+    width: 60px;
+    height: 60px;
+  }
+  .playlist-name {
+    font-size: 18px;
+  }
+  .play-controls {
+    padding: 12px;
+    margin: 0 12px 12px;
+  }
+  .songs-list {
+    margin: 0 12px;
+  }
+  .song-item {
+    padding: 10px 12px;
+  }
+}
+</style>

src/views/PlaylistsPage.vue ADDED Viewed

	@@ -0,0 +1,632 @@

+<template>
+  <div class="playlists-page">
+    <!-- 头部 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        <i class="fas fa-music"></i>
+        我的歌单
+      </h1>
+      <div class="header-actions">
+        <button class="action-btn create-playlist" @click="openCreatePlaylistDialog">
+          <i class="fas fa-plus"></i>
+          <span>新建歌单</span>
+        </button>
+      </div>
+    </div>
+    <!-- 我的歌单 -->
+    <div class="playlists-content">
+      <div v-if="customPlaylists.length > 0" class="playlists-grid">
+        <div
+          v-for="playlist in customPlaylists"
+          :key="playlist.id"
+          class="playlist-card"
+          @click="openPlaylist(playlist)"
+        >
+          <div class="playlist-cover">
+            <img
+              v-if="playlist.cover"
+              :src="playlist.cover"
+              :alt="playlist.name"
+              @error="handleImageError"
+            />
+            <div v-else class="default-cover">
+              <i class="fas fa-music"></i>
+            </div>
+            <div class="play-overlay">
+              <button class="play-btn" @click.stop="playPlaylist(playlist)">
+                <i class="fas fa-play"></i>
+              </button>
+            </div>
+          </div>
+          <div class="playlist-info">
+            <h3 class="playlist-name">{{ playlist.name }}</h3>
+            <p class="playlist-count">{{ playlist.songs.length }}首歌曲</p>
+            <p class="playlist-updated">{{ formatDate(playlist.updatedAt) }}</p>
+          </div>
+        </div>
+      </div>
+      <!-- 空状态 -->
+      <div v-else class="empty-state">
+        <i class="fas fa-music"></i>
+        <p>还没有创建歌单</p>
+        <p class="empty-tip">创建专属的音乐收藏</p>
+        <button class="create-playlist-btn" @click="openCreatePlaylistDialog">
+          <i class="fas fa-plus"></i>
+          <span>创建第一个歌单</span>
+        </button>
+      </div>
+    </div>
+    <!-- 新建歌单对话框 -->
+    <div v-if="showCreatePlaylist" class="create-playlist-overlay" @click="closeCreatePlaylist">
+      <div class="create-playlist-dialog" @click.stop>
+        <div class="dialog-header">
+          <h3>新建歌单</h3>
+          <button class="close-btn" @click="closeCreatePlaylist">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        <div class="dialog-body">
+          <div class="form-group">
+            <label>歌单名称</label>
+            <input
+              type="text"
+              v-model="newPlaylistName"
+              placeholder="请输入歌单名称"
+              maxlength="50"
+              ref="playlistNameInput"
+            />
+          </div>
+          <div class="form-group">
+            <label>描述 (可选)</label>
+            <textarea
+              v-model="newPlaylistDescription"
+              placeholder="请输入歌单描述"
+              maxlength="200"
+              rows="3"
+            ></textarea>
+          </div>
+        </div>
+        <div class="dialog-footer">
+          <button class="btn btn-cancel" @click="closeCreatePlaylist">取消</button>
+          <button class="btn btn-create" @click="createNewPlaylist" :disabled="!newPlaylistName.trim()">创建</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed, onMounted, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { usePlayerStore } from '@/stores/player'
+import { usePlaylistStore } from '@/stores/playlist'
+import { usePlayQueueStore } from '@/stores/playqueue'
+import { useToastStore } from '@/stores/toast'
+import { utils } from '@/services/musicApi'
+const router = useRouter()
+const playerStore = usePlayerStore()
+const playlistStore = usePlaylistStore()
+const playQueueStore = usePlayQueueStore()
+const toastStore = useToastStore()
+// 响应式数据
+const showCreatePlaylist = ref(false)
+const newPlaylistName = ref('')
+const newPlaylistDescription = ref('')
+const playlistNameInput = ref(null)
+// 计算属性
+const customPlaylists = computed(() => playlistStore.playlists || [])
+// 方法
+const playPlaylist = async (playlist) => {
+  if (playlist.songs.length === 0) return
+  // 用歌单替换播放队列并开始播放
+  const result = playQueueStore.setQueue(playlist.songs, 0)
+  if (result && playlist.songs.length > 0) {
+    await playerStore.playSong(playlist.songs[0])
+  }
+}
+const openPlaylist = (playlist) => {
+  // 跳转到歌单详情页
+  router.push(`/playlists/${playlist.id}`)
+}
+const handleImageError = (event) => {
+  // 图片加载失败时的处理
+  event.target.style.display = 'none'
+}
+// 新建歌单相关方法
+const openCreatePlaylistDialog = () => {
+  showCreatePlaylist.value = true
+  nextTick(() => {
+    if (playlistNameInput.value) {
+      playlistNameInput.value.focus()
+    }
+  })
+}
+const closeCreatePlaylist = () => {
+  showCreatePlaylist.value = false
+  newPlaylistName.value = ''
+  newPlaylistDescription.value = ''
+}
+const createNewPlaylist = () => {
+  if (!newPlaylistName.value.trim()) return
+  try {
+    const newPlaylist = playlistStore.createPlaylist(
+      newPlaylistName.value.trim(),
+      newPlaylistDescription.value.trim()
+    )
+    console.log('创建歌单成功:', newPlaylist)
+    closeCreatePlaylist()
+    toastStore.success(`歌单 "${newPlaylist.name}" 创建成功！`)
+  } catch (error) {
+    console.error('创建歌单失败:', error)
+    toastStore.error('创建歌单失败，请重试')
+  }
+}
+const formatDate = (timestamp) => {
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diff = now - date
+  if (diff < 3600000) { // 1小时内
+    return '刚刚更新'
+  } else if (diff < 86400000) { // 24小时内
+    return '今天'
+  } else if (diff < 2592000000) { // 30天内
+    return `${Math.floor(diff / 86400000)}天前`
+  } else {
+    return utils.formatDate ? utils.formatDate(date) : date.toLocaleDateString()
+  }
+}
+// 生命周期
+onMounted(async () => {
+  try {
+    playlistStore.loadFromStorage()
+  } catch (error) {
+    console.error('加载歌单失败:', error)
+  }
+})
+</script>
+<style scoped>
+.playlists-page {
+  height: 100%;
+  background: var(--bg-primary);
+  overflow-y: auto;
+  padding-bottom: calc(var(--tabbar-height) + 20px);
+}
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-strong);
+  background: var(--bg-card);
+  margin: 0 16px;
+  border-radius: var(--radius-small) var(--radius-small) 0 0;
+  border: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-strong);
+}
+.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-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;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.action-btn:hover:not(:disabled) {
+  background: var(--accent-red-hover);
+}
+.playlists-content {
+  flex: 1;
+  min-height: 0;
+}
+/* 歌单样式 */
+.playlists-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 16px;
+  padding: 16px;
+}
+.playlist-card {
+  background: var(--bg-card);
+  border-radius: var(--radius-small);
+  overflow: hidden;
+  border: 1px solid var(--border-light);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.playlist-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  border-color: var(--accent-red);
+}
+.playlist-cover {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  background: var(--bg-secondary);
+  overflow: hidden;
+}
+.playlist-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.default-cover {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, var(--accent-red), #ff8a8a);
+  color: white;
+  font-size: 48px;
+}
+.play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: var(--transition-fast);
+}
+.playlist-card:hover .play-overlay {
+  opacity: 1;
+}
+.play-btn {
+  width: 50px;
+  height: 50px;
+  border: none;
+  border-radius: 50%;
+  background: var(--accent-red);
+  color: white;
+  font-size: 18px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.play-btn:hover {
+  background: var(--accent-red-hover);
+  transform: scale(1.1);
+}
+.playlist-info {
+  padding: 12px;
+}
+.playlist-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.playlist-count {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin: 0 0 4px;
+}
+.playlist-updated {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin: 0;
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  text-align: center;
+  color: var(--text-tertiary);
+}
+.empty-state i {
+  font-size: 64px;
+  margin-bottom: 20px;
+  opacity: 0.5;
+}
+.empty-state p {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+.empty-tip {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 24px;
+}
+.create-playlist-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  background: var(--accent-red);
+  color: white;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.create-playlist-btn:hover {
+  background: var(--accent-red-hover);
+}
+/* 新建歌单对话框样式 */
+.create-playlist-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  animation: fadeIn 0.3s ease;
+}
+.create-playlist-dialog {
+  width: 90%;
+  max-width: 480px;
+  background: var(--bg-card);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--border-light);
+  animation: slideIn 0.3s ease;
+}
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-lighter);
+}
+.dialog-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);
+  border-radius: 50%;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: var(--transition-fast);
+}
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.dialog-body {
+  padding: 24px;
+}
+.form-group {
+  margin-bottom: 20px;
+}
+.form-group:last-child {
+  margin-bottom: 0;
+}
+.form-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid var(--border-card);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+  font-size: 14px;
+  transition: var(--transition-fast);
+  resize: vertical;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--accent-red);
+  background: rgba(255, 255, 255, 0.08);
+}
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+  color: var(--text-tertiary);
+}
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 20px 24px;
+  border-top: 1px solid var(--border-lighter);
+}
+.btn {
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  border: none;
+}
+.btn-cancel {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+.btn-cancel:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+.btn-create {
+  background: var(--accent-red);
+  color: white;
+}
+.btn-create:hover:not(:disabled) {
+  background: var(--accent-red-hover);
+}
+.btn-create:disabled {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-tertiary);
+  cursor: not-allowed;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+/* 响应式 */
+@media (max-width: 375px) {
+  .page-header {
+    padding: 12px;
+    margin: 0 12px;
+  }
+  .page-title {
+    font-size: 20px;
+  }
+  .playlists-grid {
+    padding: 12px;
+    gap: 12px;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  }
+  .empty-state {
+    padding: 40px 20px;
+  }
+  .empty-state i {
+    font-size: 48px;
+  }
+}
+@media (min-width: 768px) {
+  .playlists-page {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .playlists-grid {
+    padding: 24px;
+    gap: 20px;
+  }
+}
+</style>

src/views/SettingsPage.vue CHANGED Viewed

@@ -308,13 +308,50 @@
         </div>
       </div>
-      <!-- 存储管理 -->
       <div class="settings-section">
         <h2 class="section-title">
           <i class="fas fa-database"></i>
-          存储管理
         </h2>
         <div class="setting-item">
           <div class="setting-label">
             <span>清除搜索历史</span>
@@ -347,6 +384,17 @@
             清除收藏数据
           </button>
         </div>
       </div>
       <!-- 关于信息 -->
@@ -366,20 +414,21 @@
             <p>基于 Vue 3 构建的渐进式音乐应用</p>
           </div>
         </div>
-        <div class="setting-item">
-          <div class="setting-label">
-            <span>检查更新</span>
-            <p class="setting-desc">检查是否有新版本可用</p>
-          </div>
-          <button class="action-button" @click="checkUpdate" :disabled="checkingUpdate">
-            <i :class="checkingUpdate ? 'fas fa-spinner fa-spin' : 'fas fa-sync'"></i>
-            {{ checkingUpdate ? '检查中...' : '检查更新' }}
-          </button>
-        </div>
       </div>
     </div>
     <!-- 移动端选择器弹窗 -->
     <div v-if="showSelector" class="mobile-selector-overlay" @click="closeSelector">
       <div class="mobile-selector-content" @click.stop>
@@ -409,13 +458,16 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useSettingsStore } from '@/stores/settings'
 import { useFavoritesStore } from '@/stores/favorites'
 import { useHistoryStore } from '@/stores/history'
 import { useSearchStore } from '@/stores/search'
 import { useToastStore } from '@/stores/toast'
 import { MUSIC_SOURCES, QUALITY_OPTIONS } from '@/services/musicApi'
 const settingsStore = useSettingsStore()
 const favoritesStore = useFavoritesStore()
 const historyStore = useHistoryStore()
@@ -431,6 +483,18 @@ const selectorOptions = ref([])
 const selectorTitle = ref('')
 const selectorCurrentValue = ref('')
 // 计算属性
 const settings = computed(() => settingsStore.settings)
 const appVersion = computed(() => '1.0.0')
@@ -475,6 +539,19 @@ const themeColors = [
 ]
 // 方法
 const updateSetting = (key) => {
   settingsStore.updateSetting(key, settings.value[key])
 }
@@ -492,57 +569,133 @@ const updateAccentColor = (color) => {
 }
 const clearSearchHistory = async () => {
-  if (confirm('确定要清除所有搜索历史吗？')) {
-    try {
-      searchStore.clearHistory()
-      toastStore.success('搜索历史已清除')
-    } catch (error) {
-      console.error('清除搜索历史失败:', error)
-      toastStore.error('清除失败')
     }
-  }
 }
 const clearPlayHistory = async () => {
-  if (confirm('确定要清除所有播放历史吗？')) {
-    try {
-      await historyStore.clearHistory()
-      toastStore.success('播放历史已清除')
-    } catch (error) {
-      console.error('清除播放历史失败:', error)
-      toastStore.error('清除失败')
-    }
-  }
-}
-const clearFavorites = async () => {
-  if (confirm('确定要清除所有收藏歌曲吗？此操作不可撤销！')) {
-    if (confirm('最后确认：真的要删除所有收藏吗？')) {
       try {
-        await favoritesStore.clearAll()
-        toastStore.success('收藏数据已清除')
       } catch (error) {
-        console.error('清除收藏失败:', error)
         toastStore.error('清除失败')
       }
     }
-  }
 }
-const checkUpdate = async () => {
-  checkingUpdate.value = true
-  try {
-    // 在实际应用中，这里应该检查服务器是否有新版本
-    await new Promise(resolve => setTimeout(resolve, 2000)) // 模拟网络请求
-    toastStore.success('当前已是最新版本')
-  } catch (error) {
-    console.error('检查更新失败:', error)
-    toastStore.error('检查更新失败')
-  } finally {
-    checkingUpdate.value = false
-  }
 }
 // 响应式处理
@@ -607,6 +760,19 @@ const getThemeText = (value) => {
   return option ? option.label : '白色炫彩'
 }
 // 生命周期
 onMounted(() => {
   settingsStore.loadSettings()
@@ -1070,6 +1236,14 @@ input:checked + .slider:before {
   background: rgba(255, 68, 68, 0.3);
 }
 /* 关于信息 */
 .about-info {
   display: flex;

         </div>
       </div>
+      <!-- 数据管理和快速入口 -->
       <div class="settings-section">
         <h2 class="section-title">
           <i class="fas fa-database"></i>
+          数据管理
         </h2>
+        <!-- 新架构：快速入口 -->
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>我喜欢的音乐</span>
+            <p class="setting-desc">查看和管理收藏的歌曲</p>
+          </div>
+          <button class="action-button" @click="goToFavorites">
+            <i class="fas fa-heart"></i>
+            查看收藏
+          </button>
+        </div>
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>播放历史</span>
+            <p class="setting-desc">查看播放记录和统计信息</p>
+          </div>
+          <button class="action-button" @click="goToHistory">
+            <i class="fas fa-history"></i>
+            查看历史
+          </button>
+        </div>
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>播放队列</span>
+            <p class="setting-desc">管理当前播放队列</p>
+          </div>
+          <button class="action-button" @click="goToPlayQueue">
+            <i class="fas fa-list-music"></i>
+            查看队列
+          </button>
+        </div>
+        <!-- 分隔线 -->
+        <div class="setting-divider"></div>
         <div class="setting-item">
           <div class="setting-label">
             <span>清除搜索历史</span>
             清除收藏数据
           </button>
         </div>
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>清除全部数据</span>
+            <p class="setting-desc danger-text">删除所有数据，包括播放历史、收藏、播放列表等</p>
+          </div>
+          <button class="action-button danger" @click="clearAllData">
+            <i class="fas fa-exclamation-triangle"></i>
+            清除全部数据
+          </button>
+        </div>
       </div>
       <!-- 关于信息 -->
             <p>基于 Vue 3 构建的渐进式音乐应用</p>
           </div>
         </div>
       </div>
     </div>
+    <!-- 确认对话框 -->
+    <ConfirmDialog
+      ref="confirmDialog"
+      :title="confirmConfig.title"
+      :message="confirmConfig.message"
+      :type="confirmConfig.type"
+      :confirm-text="confirmConfig.confirmText"
+      :cancel-text="confirmConfig.cancelText"
+      @confirm="confirmConfig.onConfirm"
+      @cancel="confirmConfig.onCancel"
+    />
     <!-- 移动端选择器弹窗 -->
     <div v-if="showSelector" class="mobile-selector-overlay" @click="closeSelector">
       <div class="mobile-selector-content" @click.stop>
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { useSettingsStore } from '@/stores/settings'
 import { useFavoritesStore } from '@/stores/favorites'
 import { useHistoryStore } from '@/stores/history'
 import { useSearchStore } from '@/stores/search'
 import { useToastStore } from '@/stores/toast'
 import { MUSIC_SOURCES, QUALITY_OPTIONS } from '@/services/musicApi'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+const router = useRouter()
 const settingsStore = useSettingsStore()
 const favoritesStore = useFavoritesStore()
 const historyStore = useHistoryStore()
 const selectorTitle = ref('')
 const selectorCurrentValue = ref('')
+// 确认对话框相关
+const confirmDialog = ref(null)
+const confirmConfig = ref({
+  title: '确认操作',
+  message: '',
+  type: 'normal',
+  confirmText: '确定',
+  cancelText: '取消',
+  onConfirm: () => {},
+  onCancel: () => {}
+})
 // 计算属性
 const settings = computed(() => settingsStore.settings)
 const appVersion = computed(() => '1.0.0')
 ]
 // 方法
+const showConfirm = (config) => {
+  confirmConfig.value = {
+    title: config.title || '确认操作',
+    message: config.message,
+    type: config.type || 'normal',
+    confirmText: config.confirmText || '确定',
+    cancelText: config.cancelText || '取消',
+    onConfirm: config.onConfirm || (() => {}),
+    onCancel: config.onCancel || (() => {})
+  }
+  confirmDialog.value?.show()
+}
 const updateSetting = (key) => {
   settingsStore.updateSetting(key, settings.value[key])
 }
 }
 const clearSearchHistory = async () => {
+  showConfirm({
+    title: '清除搜索历史',
+    message: '确定要清除所有搜索历史吗？',
+    type: 'normal',
+    onConfirm: async () => {
+      try {
+        searchStore.clearHistory()
+        toastStore.success('搜索历史已清除')
+      } catch (error) {
+        console.error('清除搜索历史失败:', error)
+        toastStore.error('清除失败')
+      }
     }
+  })
 }
 const clearPlayHistory = async () => {
+  showConfirm({
+    title: '清除播放历史',
+    message: '确定要清除所有播放历史吗？',
+    type: 'normal',
+    onConfirm: async () => {
       try {
+        await historyStore.clearHistory()
+        toastStore.success('播放历史已清除')
       } catch (error) {
+        console.error('清除播放历史失败:', error)
         toastStore.error('清除失败')
       }
     }
+  })
 }
+const clearFavorites = async () => {
+  showConfirm({
+    title: '清除收藏数据',
+    message: '确定要清除所有收藏歌曲吗？此操作不可撤销！',
+    type: 'danger',
+    confirmText: '清除',
+    onConfirm: async () => {
+      // 二次确认
+      showConfirm({
+        title: '最后确认',
+        message: '最后确认：真的要删除所有收藏吗？',
+        type: 'danger',
+        confirmText: '确定删除',
+        onConfirm: async () => {
+          try {
+            await favoritesStore.clearFavorites()
+            toastStore.success('收藏数据已清除')
+          } catch (error) {
+            console.error('清除收藏失败:', error)
+            toastStore.error('清除失败')
+          }
+        }
+      })
+    }
+  })
+}
+const clearAllData = async () => {
+  showConfirm({
+    title: '清除全部数据',
+    message: '确定要清除所有数据吗？这将删除播放历史、收藏歌曲、播放列表等所有数据，此操作不可撤销！',
+    type: 'danger',
+    confirmText: '清除',
+    onConfirm: async () => {
+      // 二次确认
+      showConfirm({
+        title: '最后确认',
+        message: '最后确认：真的要清除所有数据吗？',
+        type: 'danger',
+        confirmText: '确定清除',
+        onConfirm: async () => {
+          try {
+            // 清除各种存储数据，使用统一的新存储key
+            const keysToRemove = [
+              // 搜索相关
+              'vue-music-search-history',
+              'vue-music-search-settings',
+              // 播放历史 - 新的统一key
+              'vue-music-play-history',
+              'music-history', // 兼容旧key
+              // 收藏数据 - 新的统一key
+              'vue-music-my-favorites',
+              'vue-music-favorites', // 兼容旧key
+              // 播放列表 - 新的统一key
+              'vue-music-playlists',
+              // 播放队列 - 新的统一key
+              'vue-music-play-queue',
+              // 播放器状态
+              'vue-music-player-state'
+            ]
+            keysToRemove.forEach(key => {
+              localStorage.removeItem(key)
+            })
+            // 调用stores的清除方法
+            await Promise.all([
+              searchStore.clearHistory(),
+              historyStore.clearHistory(),
+              favoritesStore.clearFavorites()
+            ])
+            // 清除播放列表和播放队列
+            const { usePlaylistStore } = await import('@/stores/playlist')
+            const { usePlayQueueStore } = await import('@/stores/playqueue')
+            const playlistStore = usePlaylistStore()
+            const playQueueStore = usePlayQueueStore()
+            playlistStore.clearAllPlaylists()
+            playQueueStore.clearQueue()
+            toastStore.success('所有数据已清除')
+          } catch (error) {
+            console.error('清除数据失败:', error)
+            toastStore.error('清除失败')
+          }
+        }
+      })
+    }
+  })
 }
 // 响应式处理
   return option ? option.label : '白色炫彩'
 }
+// 快速入口导航方法
+const goToFavorites = () => {
+  router.push('/favorites')
+}
+const goToHistory = () => {
+  router.push('/history')
+}
+const goToPlayQueue = () => {
+  router.push('/play-queue')
+}
 // 生命周期
 onMounted(() => {
   settingsStore.loadSettings()
   background: rgba(255, 68, 68, 0.3);
 }
+/* 设置项分隔线 */
+.setting-divider {
+  height: 1px;
+  background: var(--border-lighter);
+  margin: 8px 16px;
+  opacity: 0.5;
+}
 /* 关于信息 */
 .about-info {
   display: flex;

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

	@@ -0,0 +1,106 @@

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

需求文档.md DELETED Viewed

@@ -1,393 +0,0 @@
-# Vue3 PWA手机音乐软件需求文档
-## 📱 页面结构需求（参考网易云音乐iOS端）
-### 主要页面结构
-**底部导航栏（TabBar）：**
-- 首页（搜索和推荐）
-- 我的音乐（收藏歌曲）
-- 设置
-**页面层级：**
-- 底部导航栏（固定）
-- 底部播放条（固定，在导航栏上方）
-- 主内容区域（可滚动）
-- 全屏播放器（覆盖整个屏幕）
-**响应式布局：**
-- 手机端：底部导航+单栏内容
-- 平板端：侧边导航+两栏布局
-- 桌面端：侧边导航+三栏布局
-## 🏠 首页需求
-**顶部区域：**
-- 云音乐Logo
-- 搜索框（点击进入搜索页面）
-**主要内容：**
-- 搜索结果展示区域
-- 搜索历史
-- 热门推荐（可选）
-**搜索功能：**
-- 点击搜索框展开搜索界面
-- 音乐源选择（底部弹窗）
-- 瀑布流搜索结果
-- 实时搜索建议
-## 🎵 我的音乐页面需求
-**页面内容：**
-- 我喜欢的音乐（收藏歌曲列表）
-- 最近播放历史
-- 播放统计信息
-**收藏歌曲功能：**
-- 显示收藏的所有歌曲
-- 支持搜索收藏内容
-- 支持批量操作
-- 显示收藏时间
-**播放历史：**
-- 最近播放的歌曲列表
-- 播放次数统计
-- 清除历史记录功能
-## ⚙️ 设置页面需求
-**设置分组：**
-**播放设置：**
-- 默认音质：标准128K/较高192K/高音质320K/无损FLAC/Hi-Res（默认：320K）
-- 默认播放模式：列表循环/随机播放/单曲循环（默认：列表循环）
-- 记住播放进度：开启/关闭（默认：开启）
-**搜索设置：**
-- 默认音乐源：网易云音乐（默认）
-- 搜索历史：保存/不保存（默认：保存）
-**存储管理：**
-- 清除搜索历史
-- 清除播放历史
-- 清除收藏数据
-**应用信息：**
-- 版本号
-- 关于应用
-## 🔍 搜索功能详细需求
-**搜索界面：**
-- 返回按钮
-- 搜索输入框
-- 音乐源选择按钮（显示当前选择的源）
-- 搜索历史列表（可清除）
-- 热门搜索词（可选）
-**音乐源选择弹窗：**
-- 底部弹窗形式
-- 显示所有13个音乐源
-- 当前选择源高亮显示
-- 选择后自动关闭弹窗
-**搜索结果：**
-- 瀑布流加载（首次20条，滚动到15条时加载下页）
-- 歌曲信息：序号、歌名、歌手专辑、时长
-- 右侧爱心收藏按钮
-- 当前播放歌曲高亮显示
-## 🎤 底部播放条需求
-**显示位置：**
-- 位于底部导航栏正上方
-- 固定显示，不随页面滚动
-**显示条件：**
-- 有歌曲播放或暂停时显示
-- 页面刷新后根据本地存储恢复
-**界面元素：**
-- 左侧：小尺寸专辑封面
-- 中间：歌曲名和歌手名（单行显示，超出滚动）
-- 右侧：播放/暂停按钮
-**交互功能：**
-- 点击整个播放条打开全屏播放器
-- 点击播放按钮控制播放状态
-- 左右滑动切换歌曲
-- 上滑手势展开全屏播放器
-## 🎼 全屏播放器需求
-**网易云风格界面：**
-- 专辑封面作为模糊背景
-- 顶部状态栏适配
-- 返回按钮（左上角）
-- 更多操作按钮（右上角）
-**主要内容区域：**
-- 大尺寸圆形专辑封面（居中）
-- 播放时封面旋转动画
-- 歌曲信息（歌名、歌手、专辑）
-- 收藏按钮（爱心图标）
-**播放控制：**
-- 播放模式按钮（列表循环/随机/单曲循环）
-- 上一首按钮
-- 播放/暂停按钮（大尺寸，居中）
-- 下一首按钮
-- 播放列表按钮
-**进度和音质：**
-- 播放进度条（可拖拽）
-- 当前时间/总时长显示
-- 音质显示和选择
-**歌词区域：**
-- 底部歌词滚动显示
-- 当前歌词高亮
-- 支持点击歌词跳转
-- 可展开全屏歌词模式
-**关闭方式：**
-- 点击返回按钮
-- 下拉手势
-- 返回键（Android）
-## 📊 音乐平台优先级
-### 平台列表（按稳定性和资源丰富度排序）
-1. **netease** - 网易云音乐（默认）
-2. **tencent** - QQ音乐
-3. **kugou** - 酷狗音乐
-4. **kuwo** - 酷我音乐
-5. **migu** - 咪咕音乐
-6. **spotify** - Spotify
-7. **apple** - Apple Music
-8. **ytmusic** - YouTube Music
-9. **joox** - JOOX
-10. **tidal** - TIDAL
-11. **deezer** - Deezer
-12. **qobuz** - Qobuz
-13. **ximalaya** - 喜马拉雅FM
-### 平台选择逻辑
-- 默认使用网易云音乐
-- 用户可在设置中修改默认源
-- 搜索无结果时提示切换到其他平台
-- 记住用户最后使用的音乐源
-## 🎨 网易云音乐UI风格规范
-### iOS端特色设计
-- 底部安全区域适配
-- 半透明毛玻璃效果
-- 深色模式适配
-- 圆角卡片设计
-- 红色强调色系统
-### 色彩系统
-```css
-/* 背景色 */
---bg-primary: #0c0c0c;           /* 主背景 */
---bg-card: rgba(255,255,255,0.05); /* 卡片背景 */
---bg-overlay: rgba(0,0,0,0.8);    /* 遮罩背景 */
-/* 强调色 */
---accent-red: #ff6b6b;           /* 网易红 */
---accent-red-hover: #ff5252;     /* 悬浮态 */
-/* 文字颜色 */
---text-primary: #ffffff;         /* 主要文字 */
---text-secondary: rgba(255,255,255,0.7); /* 次要文字 */
---text-disabled: rgba(255,255,255,0.4);  /* 禁用文字 */
-```
-### 组件规范
-- 底部导航高度：49px + 安全区域
-- 播放条高度：64px
-- 列表项高度：64px
-- 按钮最小触摸区域：44x44px
-- 统一圆角：12px（小元素）、20px（卡片）
-## 🧩 组件化架构
-### 页面组件
-```
-src/views/
-├── HomePage.vue              # 首页（搜索页面）
-├── MyMusicPage.vue          # 我的音乐页面
-├── SettingsPage.vue         # 设置页面
-└── FullPlayerPage.vue       # 全屏播放器页面
-```
-### 布局组件
-```
-src/components/layout/
-├── AppTabBar.vue            # 底部导航栏
-├── MiniPlayer.vue           # 底部播放条
-├── SearchHeader.vue         # 搜索头部
-└── SafeArea.vue             # 安全区域包装
-```
-### 搜索组件
-```
-src/components/search/
-├── SearchBox.vue            # 搜索输入框
-├── SourceSelector.vue       # 音乐源选择弹窗
-├── SearchResults.vue        # 搜索结果列表
-├── SongItem.vue             # 歌曲列表项
-├── SearchHistory.vue        # 搜索历史
-└── InfiniteScroll.vue       # 无限滚动
-```
-### 播放器组件
-```
-src/components/player/
-├── AlbumCover.vue           # 专辑封面
-├── SongInfo.vue             # 歌曲信息
-├── PlayControls.vue         # 播放控制
-├── ProgressBar.vue          # 进度条
-├── LyricsView.vue           # 歌词显示
-└── PlayModeToggle.vue       # 播放模式切换
-```
-### 收藏组件
-```
-src/components/favorites/
-├── FavoritesList.vue        # 收藏列表
-├── FavoriteItem.vue         # 收藏项
-└── FavoriteButton.vue       # 收藏按钮
-```
-### 通用组件
-```
-src/components/common/
-├── Loading.vue              # 加载状态
-├── Empty.vue                # 空状态
-├── Toast.vue                # 提示信息
-├── Modal.vue                # 模态弹窗
-├── BottomSheet.vue          # 底部弹窗
-└── Icon.vue                 # 图标组件
-```
-## 💾 数据持久化需求
-### LocalStorage存储
-**播放器状态：**
-- 当前播放歌曲信息
-- 播放进度位置
-- 音量设置
-- 播放模式
-**用户数据：**
-- 收藏歌曲列表
-- 播放历史记录
-- 搜索历史
-- 用户设置项
-**设置数据：**
-- 默认音质选择
-- 默认音乐源
-- 其他用户偏好设置
-### 恢复机制
-- 应用启动时恢复播放状态
-- 页面刷新后继续播放
-- 保持用户设置和偏好
-- 离线时显示本地数据
----
-## 📡 API接口文档
-### 搜索音乐接口
-```
-GET https://music-api.gdstudio.xyz/api.php
-参数：
-- types: search
-- source: 音乐源（netease/tencent/kugou等）
-- name: 搜索关键词（需URL编码）
-- count: 返回数量（默认20，固定值）
-- pages: 页码（从1开始，用于瀑布流）
-响应：
-[
-  {
-    "id": "歌曲唯一ID",
-    "name": "歌曲名称",
-    "artist": "歌手名（字符串或数组）",
-    "album": "专辑名称",
-    "pic_id": "专辑封面ID",
-    "lyric_id": "歌词ID",
-    "source": "音乐源标识"
-  }
-]
-```
-### 获取播放地址接口
-```
-GET https://music-api.gdstudio.xyz/api.php
-参数：
-- types: url
-- source: 音乐源标识
-- id: 歌曲ID
-- br: 音质（128/192/320/740/999）
-响应：
-{
-  "url": "音频文件直链",
-  "br": "实际返回音质",
-  "size": "文件大小（KB）"
-}
-```
-### 获取歌词接口
-```
-GET https://music-api.gdstudio.xyz/api.php
-参数：
-- types: lyric
-- source: 音乐源标识
-- id: 歌词ID（通常与歌曲ID相同）
-响应：
-{
-  "lyric": "LRC格式原文歌词",
-  "tlyric": "LRC格式翻译歌词（可能为空）"
-}
-```
-### 获取专辑封面接口
-```
-GET https://music-api.gdstudio.xyz/api.php
-参数：
-- types: pic
-- source: 音乐源标识
-- id: 专辑封面ID
-- size: 图片尺寸（300小图/500大图）
-响应：
-{
-  "url": "图片文件直链"
-}
-```
-### 支持的音乐源列表
-```javascript
-const MUSIC_SOURCES = [
-  { code: 'netease', name: '网易云音乐', priority: 1 },
-  { code: 'tencent', name: 'QQ音乐', priority: 2 },
-  { code: 'kugou', name: '酷狗音乐', priority: 3 },
-  { code: 'kuwo', name: '酷我音乐', priority: 4 },
-  { code: 'migu', name: '咪咕音乐', priority: 5 },
-  { code: 'spotify', name: 'Spotify', priority: 6 },
-  { code: 'apple', name: 'Apple Music', priority: 7 },
-  { code: 'ytmusic', name: 'YouTube Music', priority: 8 },
-  { code: 'joox', name: 'JOOX', priority: 9 },
-  { code: 'tidal', name: 'TIDAL', priority: 10 },
-  { code: 'deezer', name: 'Deezer', priority: 11 },
-  { code: 'qobuz', name: 'Qobuz', priority: 12 },
-  { code: 'ximalaya', name: '喜马拉雅FM', priority: 13 }
-]
-```