Update index.html

index.html

@@ -6,764 +6,105 @@
     <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: #f8f9fa;
-            color: #333;
-            overflow-x: hidden;
-            line-height: 1.6;
-        }
-
-        /* 顶部导航 */
-        .navbar {
-            background: #ffffff;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-            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: #333;
-        }
-
-        .logo i {
-            color: #4a90e2;
-            font-size: 28px;
-        }
-
-        .search-container {
-            flex: 1;
-            max-width: 600px;
-            margin: 0 40px;
-            position: relative;
-        }
-
-        .search-wrapper {
-            display: flex;
-            background: #f5f7fa;
-            border-radius: 25px;
-            overflow: hidden;
-            border: 1px solid #e1e5eb;
-            transition: all 0.3s ease;
-        }
-
-        .search-wrapper:focus-within {
-            background: #ffffff;
-            border-color: #4a90e2;
-            box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
-        }
-
-        .search-input {
-            flex: 1;
-            padding: 12px 20px;
-            background: transparent;
-            border: none;
-            color: #333;
-            font-size: 16px;
-            outline: none;
-        }
-
-        .search-input::placeholder {
-            color: #adb5bd;
-        }
-
-        .source-select {
-            background: #f0f3f7;
-            border: none;
-            color: #495057;
-            padding: 12px 15px;
-            outline: none;
-            cursor: pointer;
-            border-left: 1px solid #e1e5eb;
-        }
-
-        .source-select option {
-            background: #ffffff;
-            color: #333;
-            padding: 8px;
-        }
-
-        .search-btn {
-            background: #4a90e2;
-            border: none;
-            color: #fff;
-            padding: 12px 20px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .search-btn:hover {
-            background: #3a7bc8;
-        }
-
-        /* 主要内容区域 */
-        .main-container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-            min-height: calc(100vh - 170px);
-        }
-
-        /* 内容面板通用样式 */
-        .content-panel {
-            background: #ffffff;
-            border-radius: 16px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-            padding: 25px;
-            margin-bottom: 20px;
-            height: 100%;
-        }
-
-        .panel-title {
-            font-size: 20px;
-            font-weight: 600;
-            margin-bottom: 20px;
-            color: #333;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .panel-title i {
-            color: #4a90e2;
-        }
-
-        /* 搜索结果区域 - 卡片式布局 */
-        .search-results {
-            max-height: 500px;
-            overflow-y: auto;
-            scrollbar-width: thin;
-            scrollbar-color: #ced4da transparent;
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
-            gap: 12px;
-            padding-right: 10px;
-        }
-
-        .search-results::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        .search-results::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        .search-results::-webkit-scrollbar-thumb {
-            background: #ced4da;
-            border-radius: 3px;
-        }
-
-        .song-card {
-            display: flex;
-            align-items: flex-start;
-            padding: 12px 15px;
-            border-radius: 12px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            background: #f8f9fa;
-            border: 1px solid #e9ecef;
-        }
-
-        .song-card:hover {
-            background: #ffffff;
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-        }
-
-        .song-card.active {
-            background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.05));
-            border: 1px solid rgba(74, 144, 226, 0.3);
-        }
-
-        .song-index {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: #e9ecef;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: 12px;
-            font-size: 14px;
-            font-weight: 600;
-            color: #495057;
-            flex-shrink: 0;
-        }
-
-        .song-card.active .song-index {
-            background: linear-gradient(135deg, #4a90e2, #3a7bc8);
-            color: #fff;
-        }
-
-        .song-info {
-            flex: 1;
-            min-width: 0;
-            padding: 2px 0;
-        }
-
-        .song-name {
-            font-weight: 600;
-            margin-bottom: 3px;
-            font-size: 15px;
-            color: #333;
-            /* 允许标题换行 */
-            white-space: normal;
-            line-height: 1.4;
-        }
-
-        .song-artist {
-            color: #6c757d;
-            font-size: 13px;
-            /* 允许艺术家信息换行 */
-            white-space: normal;
-            line-height: 1.4;
-        }
-
-        .song-duration {
-            color: #adb5bd;
-            font-size: 13px;
-            margin-left: 10px;
-            white-space: nowrap;
-            align-self: center;
-        }
-
-        /* 歌曲操作按钮 */
-        .song-actions {
-            display: flex;
-            gap: 8px;
-            margin-left: 10px;
-            align-self: center;
-        }
-
-        .action-btn {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: #e9ecef;
-            border: none;
-            color: #6c757d;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 13px;
-        }
-
-        .action-btn:hover {
-            background: #dee2e6;
-            color: #4a90e2;
-            transform: scale(1.1);
-        }
-
-        /* 播放器区域 */
-        .player-panel {
-            text-align: center;
-            padding: 30px 25px;
-        }
-
-        .current-song {
-            margin-bottom: 30px;
-        }
-
-        .current-cover-container {
-            position: relative;
-            display: inline-block;
-            margin-bottom: 25px;
-        }
-
-        .current-cover {
-            width: 220px;
-            height: 220px;
-            border-radius: 50%;
-            object-fit: cover;
-            box-shadow: 0 15px 35px rgba(74, 144, 226, 0.2);
-            transition: all 0.3s ease;
-            border: 6px solid #f8f9fa;
-        }
-
-        .current-cover.playing {
-            animation: rotate 20s linear infinite;
-        }
-
-        @keyframes rotate {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-        }
-
-        .current-info h3 {
-            font-size: 22px;
-            font-weight: 600;
-            margin-bottom: 8px;
-            color: #333;
-        }
-
-        .current-info p {
-            color: #6c757d;
-            font-size: 16px;
-        }
-
-        /* 播放控制 */
-        .player-controls {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 25px;
-            margin-bottom: 30px;
-        }
-
-        .control-btn {
-            background: #f1f3f5;
-            border: none;
-            border-radius: 50%;
-            color: #495057;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .control-btn:hover {
-            background: #e9ecef;
-            transform: scale(1.1);
-        }
-
-        .control-btn.small {
-            width: 50px;
-            height: 50px;
-            font-size: 18px;
-        }
-
-        .play-btn {
-            width: 70px;
-            height: 70px;
-            font-size: 28px;
-            background: linear-gradient(135deg, #4a90e2, #3a7bc8);
-            color: white;
-            box-shadow: 0 8px 25px rgba(74, 144, 226, 0.3);
-        }
-
-        .play-btn:hover {
-            background: linear-gradient(135deg, #3a7bc8, #2d6bc1);
-            box-shadow: 0 12px 35px rgba(74, 144, 226, 0.4);
-        }
-
-        /* 进度条 */
-        .progress-container {
-            margin-bottom: 30px;
-            padding: 0 20px;
-        }
-
-        .progress-bar {
-            width: 100%;
-            height: 6px;
-            background: #e9ecef;
-            border-radius: 3px;
-            cursor: pointer;
-            margin-bottom: 10px;
-            position: relative;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #4a90e2, #6aa8e6);
-            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: 14px;
-            height: 14px;
-            background: #4a90e2;
-            border-radius: 50%;
-            box-shadow: 0 2px 8px rgba(74, 144, 226, 0.5);
-        }
-
-        .time-info {
-            display: flex;
-            justify-content: space-between;
-            font-size: 14px;
-            color: #6c757d;
-        }
-
-        /* 音量控制 */
-        .volume-container {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin-bottom: 30px;
-            justify-content: center;
-        }
-
-        .volume-icon {
-            color: #6c757d;
-            font-size: 18px;
-        }
-
-        .volume-slider {
-            width: 150px;
-            height: 4px;
-            background: #e9ecef;
-            border-radius: 2px;
-            outline: none;
-            cursor: pointer;
-            -webkit-appearance: none;
-        }
-
-        .volume-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 14px;
-            height: 14px;
-            background: #4a90e2;
-            border-radius: 50%;
-            cursor: pointer;
-        }
-
-        /* 音质选择 */
-        .quality-container {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 25px;
-            padding: 15px 20px;
-            background: #f8f9fa;
-            border-radius: 12px;
-            border: 1px solid #e9ecef;
-        }
-
-        .quality-label {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: #495057;
-            font-size: 14px;
-        }
-
-        .quality-select {
-            background: #ffffff;
-            border: 1px solid #ced4da;
-            border-radius: 8px;
-            color: #333;
-            padding: 8px 12px;
-            outline: none;
-            cursor: pointer;
-            font-size: 14px;
-        }
-
-        .quality-select option {
-            background: #ffffff;
-            color: #333;
-            padding: 8px;
-        }
-
-        /* 下载区域 */
-        .download-container {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-
-        .download-btn {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            padding: 12px 15px;
-            background: #f8f9fa;
-            border: 1px solid #e9ecef;
-            border-radius: 12px;
-            color: #495057;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 14px;
-        }
-
-        .download-btn:hover:not(:disabled) {
-            background: #eef2f7;
-            border-color: #4a90e2;
-            color: #4a90e2;
-        }
-
-        .download-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        /* 歌词区域 */
-        .lyrics-container {
-            max-height: 500px;
-            overflow-y: auto;
-            scrollbar-width: thin;
-            scrollbar-color: #ced4da transparent;
-            padding-right: 10px;
-            position: relative;
-        }
-
-        .lyrics-container::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        .lyrics-container::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        .lyrics-container::-webkit-scrollbar-thumb {
-            background: #ced4da;
-            border-radius: 3px;
-        }
-
-        .lyric-line {
-            padding: 8px 15px;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border-radius: 8px;
-            margin-bottom: 6px;
-            color: #6c757d;
-            line-height: 1.6;
-            text-align: center;
-            font-size: 15px;
-        }
-
-        .lyric-line:hover {
-            background: #f8f9fa;
-            color: #4a90e2;
-        }
-
-        .lyric-line.active {
-            color: #4a90e2;
-            font-weight: 600;
-            background: rgba(74, 144, 226, 0.08);
-            transform: scale(1.02);
-        }
-
-        /* 加载和错误状态 */
-        .loading, .error, .empty-state {
-            text-align: center;
-            padding: 60px 20px;
-            color: #6c757d;
-        }
-
-        .loading i, .error i, .empty-state i {
-            font-size: 48px;
-            margin-bottom: 15px;
-            display: block;
-            color: #adb5bd;
-        }
-
-        .loading i {
-            animation: spin 1s linear infinite;
-            color: #4a90e2;
-        }
-
-        @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-        }
-
-        .error i {
-            color: #e74c3c;
-        }
-
-        /* 移动端底部导航 */
-        .mobile-nav {
-            display: none;
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            background: #ffffff;
-            box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.05);
-            z-index: 99;
-        }
-
-        .mobile-nav-items {
-            display: flex;
-            justify-content: space-around;
-        }
-
-        .mobile-nav-item {
-            flex: 1;
-            text-align: center;
-            padding: 15px 0;
-            color: #6c757d;
-            text-decoration: none;
-            font-size: 12px;
-            transition: all 0.3s ease;
-        }
-
-        .mobile-nav-item.active {
-            color: #4a90e2;
-        }
-
-        .mobile-nav-item i {
-            font-size: 20px;
-            margin-bottom: 5px;
-            display: block;
-        }
-
-        /* 内容视图容器 */
-        .view-container {
-            display: block;
-        }
-
-        /* 响应式设计 */
-        @media (min-width: 1200px) {
-            .desktop-layout {
-                display: grid;
-                grid-template-columns: 350px 450px 350px;
-                gap: 25px;
-            }
-            
-            .mobile-nav {
-                display: none !important;
-            }
-        }
-
-        @media (max-width: 1199px) {
-            .mobile-nav {
-                display: block;
-            }
-            
-            .main-container {
-                padding-bottom: 80px;
-            }
-            
-            .desktop-layout {
-                display: block;
-            }
-            
-            .view-container {
-                display: none;
-            }
-            
-            .view-container.active {
-                display: block;
-            }
-            
-            /* 移动端提高信息密度 */
-            .song-name {
-                font-size: 14px;
-                line-height: 1.4;
-            }
-            
-            .song-artist {
-                font-size: 13px;
-                line-height: 1.4;
-            }
-            
-            .song-card {
-                padding: 10px 12px;
-                gap: 10px;
-            }
-            
-            .song-index {
-                width: 28px;
-                height: 28px;
-                font-size: 13px;
-            }
-            
-            .action-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 12px;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .nav-container {
-                flex-direction: column;
-                gap: 15px;
-                padding: 0 15px;
-            }
-            
-            .search-container {
-                margin: 0;
-                max-width: none;
-                width: 100%;
-            }
-            
-            .current-cover {
-                width: 180px;
-                height: 180px;
-            }
-            
-            .player-controls {
-                gap: 15px;
-            }
-            
-            .content-panel {
-                padding: 15px 12px;
-            }
-            
-            .panel-title {
-                font-size: 17px;
-                margin-bottom: 15px;
-            }
-            
-            .search-results {
-                gap: 10px;
-            }
-        }
-
-        /* 自定义滚动条样式 */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: #f8f9fa;
-            border-radius: 4px;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: #ced4da;
-            border-radius: 4px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: #adb5bd;
-        }
+        /* CSS样式部分保持不变，此处省略以保持简洁 */
+        * { 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: #f8f9fa; color: #333; overflow-x: hidden; line-height: 1.6; }
+        .navbar { background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); 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: #333; }
+        .logo i { color: #4a90e2; font-size: 28px; }
+        .search-container { flex: 1; max-width: 600px; margin: 0 40px; position: relative; }
+        .search-wrapper { display: flex; background: #f5f7fa; border-radius: 25px; overflow: hidden; border: 1px solid #e1e5eb; transition: all 0.3s ease; }
+        .search-wrapper:focus-within { background: #ffffff; border-color: #4a90e2; box-shadow: 0 0 15px rgba(74, 144, 226, 0.2); }
+        .search-input { flex: 1; padding: 12px 20px; background: transparent; border: none; color: #333; font-size: 16px; outline: none; }
+        .search-input::placeholder { color: #adb5bd; }
+        .source-select { background: #f0f3f7; border: none; color: #495057; padding: 12px 15px; outline: none; cursor: pointer; border-left: 1px solid #e1e5eb; }
+        .source-select option { background: #ffffff; color: #333; padding: 8px; }
+        .search-btn { background: #4a90e2; border: none; color: #fff; padding: 12px 20px; cursor: pointer; transition: all 0.3s ease; }
+        .search-btn:hover { background: #3a7bc8; }
+        .main-container { max-width: 1200px; margin: 0 auto; padding: 20px; min-height: calc(100vh - 170px); }
+        .content-panel { background: #ffffff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); padding: 25px; margin-bottom: 20px; height: 100%; }
+        .panel-title { font-size: 20px; font-weight: 600; margin-bottom: 20px; color: #333; display: flex; align-items: center; gap: 10px; }
+        .panel-title i { color: #4a90e2; }
+        .search-results { max-height: 500px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ced4da transparent; display: grid; grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); gap: 12px; padding-right: 10px; }
+        .search-results::-webkit-scrollbar { width: 6px; }
+        .search-results::-webkit-scrollbar-track { background: transparent; }
+        .search-results::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }
+        .song-card { display: flex; align-items: flex-start; padding: 12px 15px; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; background: #f8f9fa; border: 1px solid #e9ecef; }
+        .song-card:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); }
+        .song-card.active { background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.05)); border: 1px solid rgba(74, 144, 226, 0.3); }
+        .song-index { width: 32px; height: 32px; border-radius: 50%; background: #e9ecef; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 14px; font-weight: 600; color: #495057; flex-shrink: 0; }
+        .song-card.active .song-index { background: linear-gradient(135deg, #4a90e2, #3a7bc8); color: #fff; }
+        .song-info { flex: 1; min-width: 0; padding: 2px 0; }
+        .song-name { font-weight: 600; margin-bottom: 3px; font-size: 15px; color: #333; white-space: normal; line-height: 1.4; }
+        .song-artist { color: #6c757d; font-size: 13px; white-space: normal; line-height: 1.4; }
+        .song-duration { color: #adb5bd; font-size: 13px; margin-left: 10px; white-space: nowrap; align-self: center; }
+        .song-actions { display: flex; gap: 8px; margin-left: 10px; align-self: center; }
+        .action-btn { width: 32px; height: 32px; border-radius: 50%; background: #e9ecef; border: none; color: #6c757d; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 13px; }
+        .action-btn:hover { background: #dee2e6; color: #4a90e2; transform: scale(1.1); }
+        .player-panel { text-align: center; padding: 30px 25px; }
+        .current-song { margin-bottom: 30px; }
+        .current-cover-container { position: relative; display: inline-block; margin-bottom: 25px; }
+        .current-cover { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; box-shadow: 0 15px 35px rgba(74, 144, 226, 0.2); transition: all 0.3s ease; border: 6px solid #f8f9fa; }
+        .current-cover.playing { animation: rotate 20s linear infinite; }
+        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        .current-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; }
+        .current-info p { color: #6c757d; font-size: 16px; }
+        .player-controls { display: flex; justify-content: center; align-items: center; gap: 25px; margin-bottom: 30px; }
+        .control-btn { background: #f1f3f5; border: none; border-radius: 50%; color: #495057; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; }
+        .control-btn:hover { background: #e9ecef; transform: scale(1.1); }
+        .control-btn.small { width: 50px; height: 50px; font-size: 18px; }
+        .play-btn { width: 70px; height: 70px; font-size: 28px; background: linear-gradient(135deg, #4a90e2, #3a7bc8); color: white; box-shadow: 0 8px 25px rgba(74, 144, 226, 0.3); }
+        .play-btn:hover { background: linear-gradient(135deg, #3a7bc8, #2d6bc1); box-shadow: 0 12px 35px rgba(74, 144, 226, 0.4); }
+        .progress-container { margin-bottom: 30px; padding: 0 20px; }
+        .progress-bar { width: 100%; height: 6px; background: #e9ecef; border-radius: 3px; cursor: pointer; margin-bottom: 10px; position: relative; }
+        .progress-fill { height: 100%; background: linear-gradient(90deg, #4a90e2, #6aa8e6); 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: 14px; height: 14px; background: #4a90e2; border-radius: 50%; box-shadow: 0 2px 8px rgba(74, 144, 226, 0.5); }
+        .time-info { display: flex; justify-content: space-between; font-size: 14px; color: #6c757d; }
+        .volume-container { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; justify-content: center; }
+        .volume-icon { color: #6c757d; font-size: 18px; }
+        .volume-slider { width: 150px; height: 4px; background: #e9ecef; border-radius: 2px; outline: none; cursor: pointer; -webkit-appearance: none; }
+        .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: #4a90e2; border-radius: 50%; cursor: pointer; }
+        .quality-container { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; padding: 15px 20px; background: #f8f9fa; border-radius: 12px; border: 1px solid #e9ecef; }
+        .quality-label { display: flex; align-items: center; gap: 8px; color: #495057; font-size: 14px; }
+        .quality-select { background: #ffffff; border: 1px solid #ced4da; border-radius: 8px; color: #333; padding: 8px 12px; outline: none; cursor: pointer; font-size: 14px; }
+        .quality-select option { background: #ffffff; color: #333; padding: 8px; }
+        .download-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
+        .download-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 15px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; color: #495057; cursor: pointer; transition: all 0.3s ease; font-size: 14px; }
+        .download-btn:hover:not(:disabled) { background: #eef2f7; border-color: #4a90e2; color: #4a90e2; }
+        .download-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+        .lyrics-container { max-height: 500px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ced4da transparent; padding-right: 10px; position: relative; }
+        .lyrics-container::-webkit-scrollbar { width: 6px; }
+        .lyrics-container::-webkit-scrollbar-track { background: transparent; }
+        .lyrics-container::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }
+        .lyric-line { padding: 8px 15px; transition: all 0.3s ease; cursor: pointer; border-radius: 8px; margin-bottom: 6px; color: #6c757d; line-height: 1.6; text-align: center; font-size: 15px; }
+        .lyric-line:hover { background: #f8f9fa; color: #4a90e2; }
+        .lyric-line.active { color: #4a90e2; font-weight: 600; background: rgba(74, 144, 226, 0.08); transform: scale(1.02); }
+        .loading, .error, .empty-state { text-align: center; padding: 60px 20px; color: #6c757d; }
+        .loading i, .error i, .empty-state i { font-size: 48px; margin-bottom: 15px; display: block; color: #adb5bd; }
+        .loading i { animation: spin 1s linear infinite; color: #4a90e2; }
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        .error i { color: #e74c3c; }
+        .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: #ffffff; box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.05); z-index: 99; }
+        .mobile-nav-items { display: flex; justify-content: space-around; }
+        .mobile-nav-item { flex: 1; text-align: center; padding: 15px 0; color: #6c757d; text-decoration: none; font-size: 12px; transition: all 0.3s ease; }
+        .mobile-nav-item.active { color: #4a90e2; }
+        .mobile-nav-item i { font-size: 20px; margin-bottom: 5px; display: block; }
+        .view-container { display: block; }
+        @media (min-width: 1200px) { .desktop-layout { display: grid; grid-template-columns: 350px 450px 350px; gap: 25px; } .mobile-nav { display: none !important; } }
+        @media (max-width: 1199px) { .mobile-nav { display: block; } .main-container { padding-bottom: 80px; } .desktop-layout { display: block; } .view-container { display: none; } .view-container.active { display: block; } .song-name { font-size: 14px; line-height: 1.4; } .song-artist { font-size: 13px; line-height: 1.4; } .song-card { padding: 10px 12px; gap: 10px; } .song-index { width: 28px; height: 28px; font-size: 13px; } .action-btn { width: 28px; height: 28px; font-size: 12px; } }
+        @media (max-width: 768px) { .nav-container { flex-direction: column; gap: 15px; padding: 0 15px; } .search-container { margin: 0; max-width: none; width: 100%; } .current-cover { width: 180px; height: 180px; } .player-controls { gap: 15px; } .content-panel { padding: 15px 12px; } .panel-title { font-size: 17px; margin-bottom: 15px; } .search-results { gap: 10px; } }
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: #f8f9fa; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #adb5bd; }
     </style>
 </head>
 <body>
+    <!-- HTML结构部分保持不变 -->
     <nav class="navbar">
         <div class="nav-container">
-            <div class="logo">
-                <i class="fas fa-music"></i>
-                <span>云音乐</span>
-            </div>
-            
+            <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">
@@ -782,70 +123,38 @@
                         <option value="qobuz">Qobuz</option>
                         <option value="ximalaya">喜马拉雅</option>
                     </select>
-                    <button class="search-btn" onclick="searchMusic()">
-                        <i class="fas fa-search"></i>
-                    </button>
+                    <button class="search-btn" onclick="searchMusic()"><i class="fas fa-search"></i></button>
                 </div>
             </div>
         </div>
     </nav>
-
     <div class="main-container">
         <div class="desktop-layout">
             <div class="view-container" id="searchView">
                 <div class="content-panel">
-                    <h2 class="panel-title">
-                        <i class="fas fa-search"></i>
-                        搜索结果
-                    </h2>
+                    <h2 class="panel-title"><i class="fas fa-search"></i> 搜索结果</h2>
                     <div class="search-results" id="searchResults">
-                        <div class="empty-state">
-                            <i class="fas fa-music"></i>
-                            <div>在上方搜索框输入关键词开始搜索音乐</div>
-                        </div>
+                        <div class="empty-state"><i class="fas fa-music"></i><div>在上方搜索框输入关键词开始搜索音乐</div></div>
                     </div>
                 </div>
             </div>
-
             <div class="view-container" id="playerView">
                 <div class="content-panel player-panel">
                     <div class="current-song">
-                        <div class="current-cover-container">
-                            <img class="current-cover" id="currentCover" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+" alt="专辑封面">
-                        </div>
-                        <div class="current-info">
-                            <h3 id="currentTitle">未选择歌曲</h3>
-                            <p id="currentArtist">请搜索并选择要播放的歌曲</p>
-                        </div>
+                        <div class="current-cover-container"><img class="current-cover" id="currentCover" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+" 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>
+                        <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 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>
+                        <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>
@@ -854,68 +163,41 @@
                             <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>
+                        <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>
-
             <div class="view-container" id="lyricsView">
                 <div class="content-panel">
-                    <h2 class="panel-title">
-                        <i class="fas fa-align-left"></i>
-                        歌词
-                    </h2>
-                    <div class="lyrics-container" id="lyricsContainer">
-                        <div class="lyric-line">暂无歌词</div>
-                    </div>
+                    <h2 class="panel-title"><i class="fas fa-align-left"></i> 歌词</h2>
+                    <div class="lyrics-container" id="lyricsContainer"><div class="lyric-line">暂无歌词</div></div>
                 </div>
             </div>
         </div>
     </div>
-
     <div class="mobile-nav">
         <div class="mobile-nav-items">
-            <a href="#searchView" class="mobile-nav-item active" onclick="switchView('searchView', this)">
-                <i class="fas fa-search"></i>
-                <span>搜索</span>
-            </a>
-            <a href="#playerView" class="mobile-nav-item" onclick="switchView('playerView', this)">
-                <i class="fas fa-play-circle"></i>
-                <span>播放</span>
-            </a>
-            <a href="#lyricsView" class="mobile-nav-item" onclick="switchView('lyricsView', this)">
-                <i class="fas fa-align-left"></i>
-                <span>歌词</span>
-            </a>
+            <a href="#searchView" class="mobile-nav-item active" onclick="switchView('searchView', this)"><i class="fas fa-search"></i><span>搜索</span></a>
+            <a href="#playerView" class="mobile-nav-item" onclick="switchView('playerView', this)"><i class="fas fa-play-circle"></i><span>播放</span></a>
+            <a href="#lyricsView" class="mobile-nav-item" onclick="switchView('lyricsView', this)"><i class="fas fa-align-left"></i><span>歌词</span></a>
         </div>
     </div>
 
     <script>
-        // Dr.Kun: 常量定义
+        // Dr.Kun: 常量和全局变量
         const API_BASE = 'https://music-api.gdstudio.xyz/api.php';
-        const PLAYER_STATE_KEY = 'cloudMusicPlayerState_v1'; // Dr.Kun: 定义统一的localStorage Key
-
-        // Dr.Kun: 全局状态变量
+        const PLAYER_STATE_KEY = 'cloudMusicPlayerState_v2'; // Dr.Kun: 升级版本号以避免旧数据冲突
         let currentPlaylist = [];
         let currentIndex = -1;
-        let currentLyrics = [];
         let isPlaying = false;
+        let timeToRestore = 0; // Dr.Kun: 核心升级 - 用于暂存需要恢复的播放时间
 
         // Dr.Kun: DOM元素缓存
         const audioPlayer = document.getElementById('audioPlayer');
@@ -930,7 +212,7 @@
         const volumeSlider = document.getElementById('volumeSlider');
         const searchInput = document.getElementById('searchInput');
 
-        // Dr.Kun: 新增 - 保存播放器状态到localStorage
+        // Dr.Kun: 核心升级 - 保存播放器状态（现在包含播放进度）
         function savePlayerState() {
             const state = {
                 playlist: currentPlaylist,
@@ -938,57 +220,62 @@
                 volume: audioPlayer.volume,
                 quality: qualitySelect.value,
                 source: sourceSelect.value,
+                currentTime: audioPlayer.currentTime > 1 ? audioPlayer.currentTime : 0 // Dr.Kun: 只在播放超过1秒时保存进度，避免存入无效的0
             };
             try {
                 localStorage.setItem(PLAYER_STATE_KEY, JSON.stringify(state));
             } catch (e) {
                 console.error("保存状态失败:", e);
-                showNotification("无法保存播放状态，可能是存储已满", "error");
             }
         }
 
-        // Dr.Kun: 新增 - 从localStorage加载播放器状态
+        // Dr.Kun: 核心升级 - 从localStorage加载播放器状态
         async function loadPlayerState() {
             try {
                 const savedState = localStorage.getItem(PLAYER_STATE_KEY);
-                if (savedState) {
-                    const state = JSON.parse(savedState);
-                    
-                    // 恢复状态
-                    currentPlaylist = state.playlist || [];
-                    currentIndex = state.index || -1;
-                    
-                    // 恢复UI
-                    qualitySelect.value = state.quality || '320';
-                    sourceSelect.value = state.source || 'netease';
-                    
-                    // 恢复音量 (注意: setVolume接受0-100的值)
-                    const volumeValue = (state.volume !== undefined ? state.volume : 0.8) * 100;
-                    volumeSlider.value = volumeValue;
-                    setVolume(volumeValue); 
-                    
-                    // 如果有播放列表，则渲染
-                    if (currentPlaylist.length > 0) {
-                        displaySearchResults(currentPlaylist);
-                    }
-                    
-                    // 如果有当前播放的歌曲，则更新播放器信息（但不自动播放）
-                    if (currentIndex > -1 && currentPlaylist[currentIndex]) {
-                        await updateCurrentSongInfo(currentPlaylist[currentIndex]);
-                        updateActiveItem();
-                        document.getElementById('downloadSongBtn').disabled = false;
-                        document.getElementById('downloadLyricBtn').disabled = false;
+                if (!savedState) return;
+
+                const state = JSON.parse(savedState);
+                
+                currentPlaylist = state.playlist || [];
+                currentIndex = state.index || -1;
+                timeToRestore = state.currentTime || 0; // Dr.Kun: 读取要恢复的时间
+
+                qualitySelect.value = state.quality || '320';
+                sourceSelect.value = state.source || 'netease';
+                
+                const volumeValue = (state.volume !== undefined ? state.volume : 0.8) * 100;
+                volumeSlider.value = volumeValue;
+                setVolume(volumeValue, false); // Dr.Kun: 初始化时不保存状态，避免循环
+                
+                if (currentPlaylist.length > 0) {
+                    displaySearchResults(currentPlaylist);
+                }
+                
+                if (currentIndex > -1 && currentPlaylist[currentIndex]) {
+                    const song = currentPlaylist[currentIndex];
+                    // Dr.Kun: 只更新UI，不获取URL，等待用户操作或后续逻辑
+                    await updateCurrentSongInfo(song);
+                    updateActiveItem();
+                    // Dr.Kun: 关键一步 - 设置音频源，以便后续恢复进度
+                    const quality = qualitySelect.value;
+                    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;
                     }
+
+                    document.getElementById('downloadSongBtn').disabled = false;
+                    document.getElementById('downloadLyricBtn').disabled = false;
                 }
             } catch (e) {
-                console.error("加载状态失败, 可能数据已损坏:", e);
-                localStorage.removeItem(PLAYER_STATE_KEY); // Dr.Kun: 如果数据损坏��则清除，避免下次继续出错
+                console.error("加载状态失败, 数据已损坏:", e);
+                localStorage.removeItem(PLAYER_STATE_KEY);
             }
         }
         
         // Dr.Kun: 页面加载时执行的初始化函数
         async function initializeApp() {
-            // 视图初始化
             if (window.innerWidth >= 1200) {
                 document.getElementById('searchView').classList.add('active');
                 document.getElementById('playerView').classList.add('active');
@@ -997,97 +284,39 @@
                 switchView('searchView', document.querySelectorAll('.mobile-nav-item')[0]);
             }
             
-            // Dr.Kun: 关键步骤 - 加载上次保存的状态
             await loadPlayerState();
 
-            // Dr.Kun: 为需要保存状态的控件添加事件监听
+            // Dr.Kun: 监听器
             qualitySelect.onchange = savePlayerState;
             sourceSelect.onchange = savePlayerState;
-        }
 
-        // 切换视图
-        function switchView(viewId, navItem) {
-            document.querySelectorAll('.view-container').forEach(view => view.classList.remove('active'));
-            document.getElementById(viewId).classList.add('active');
-            if (navItem) {
-                document.querySelectorAll('.mobile-nav-item').forEach(item => item.classList.remove('active'));
-                navItem.classList.add('active');
-            }
+            // Dr.Kun: 核心升级 - 在页面卸载前做最后一次保存
+            window.addEventListener('beforeunload', savePlayerState);
+            // Dr.Kun: 核心升级 - 定期保存进度
+            setInterval(savePlayerState, 5000);
         }
 
-        // 搜索音乐
-        async function searchMusic() {
-            const keyword = searchInput.value.trim();
-            const source = 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;
-                    currentIndex = -1; // Dr.Kun: 新的搜索重置当前播放索引
-                    displaySearchResults(data);
-                    savePlayerState(); // Dr.Kun: 搜索成功后保存播放列表状态
-                } 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>`;
-            }
-        }
+        // ... (其他函数基本不变，除了setVolume增加一个参数) ...
 
-        async function getAlbumCoverUrl(song, size = 300) {
-            if (!song || !song.pic_id) {
-                return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+';
-            }
-            try {
-                const response = await fetch(`${API_BASE}?types=pic&source=${song.source}&id=${song.pic_id}&size=${size}`);
-                const data = await response.json();
-                return (data && data.url) ? data.url : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+';
-            } catch (error) {
-                console.error('获取专辑图失败:', error);
-                return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+';
+        function setVolume(value, shouldSave = true) { // Dr.Kun: 增加一个参数判断是否需要保存
+            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';
+            if (shouldSave) {
+                savePlayerState();
             }
         }
-
-        function displaySearchResults(songs) {
-            const resultsContainer = document.getElementById('searchResults');
-            resultsContainer.innerHTML = '';
-            songs.forEach((song, index) => {
-                const songCard = document.createElement('div');
-                songCard.className = 'song-card';
-                songCard.onclick = () => playSong(index);
-                const artistText = Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist;
-                songCard.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">${artistText} ${song.album ? '· ' + song.album : ''}</div>
-                    </div>
-                    <div class="song-actions">
-                        <button class="action-btn" onclick="event.stopPropagation(); downloadSong(${index})" title="下载音乐"><i class="fas fa-download"></i></button>
-                        <button class="action-btn" onclick="event.stopPropagation(); downloadLyric(${index})" title="下载歌词"><i class="fas fa-file-text"></i></button>
-                    </div>`;
-                resultsContainer.appendChild(songCard);
-            });
-        }
-
+        
         async function playSong(index) {
             if (index < 0 || index >= currentPlaylist.length) return;
             currentIndex = index;
+            timeToRestore = 0; // Dr.Kun: 用户主动切歌，不再需要恢复旧进度
             const song = currentPlaylist[index];
             await updateCurrentSongInfo(song);
             updateActiveItem();
-            savePlayerState(); // Dr.Kun: 切换歌曲时保存状态
-
+            // ... (playSong的后续逻辑不变)
             try {
                 showNotification('正在加载音乐...', 'info');
                 const quality = qualitySelect.value;
@@ -1104,17 +333,13 @@
                     const playPromise = audioPlayer.play();
                     if (playPromise !== undefined) {
                         playPromise.then(() => {
-                            isPlaying = true;
-                            updatePlayButton();
-                            currentCover.classList.add('playing');
                             showNotification(`开始播放: ${song.name}`, 'success');
                         }).catch(error => {
-                            console.error('播放失败:', error);
                             showNotification('自动播放失败，请手动点击播放', 'warning');
                         });
                     }
                 } else {
-                    showNotification('无法获取音乐链接，请尝试其他歌曲或更换音质', 'error');
+                    showNotification('无法获取音乐链接', 'error');
                 }
             } catch (error) {
                 console.error('播放失败:', error);
@@ -1122,294 +347,49 @@
             }
         }
 
-        function getQualityText(br) {
-            const qualityMap = { '128': '标准', '192': '较高', '320': '高品质', '740': '无损FLAC', '999': 'Hi-Res' };
-            return qualityMap[br] || `${br}K`;
-        }
-        
-        async function downloadSong(index) {
-            const song = currentPlaylist[index];
-            const quality = 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}\r\n歌手：${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}\r\n专辑：${song.album}\r\n\r\n${data.lyric}`;
-                    if (data.tlyric) lyricContent += `\r\n\r\n=== 翻译 ===\r\n${data.tlyric}`;
-                    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');
-            }
-        }
-
-        async function downloadCurrentSong() {
-            if (currentIndex === -1) { showNotification('请先选择歌曲', 'warning'); return; }
-            await downloadSong(currentIndex);
-        }
-
-        async function downloadCurrentLyric() {
-            if (currentIndex === -1) { showNotification('请先选择歌曲', 'warning'); return; }
-            await downloadLyric(currentIndex);
-        }
-
-        async function updateCurrentSongInfo(song) {
-            document.getElementById('currentTitle').textContent = song.name;
-            const artistText = Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist;
-            document.getElementById('currentArtist').textContent = `${artistText}${song.album ? ' · ' + song.album : ''}`;
-            currentCover.src = await getAlbumCoverUrl(song, 500);
-        }
-
-        function updateActiveItem() {
-            document.querySelectorAll('.song-card').forEach((item, index) => {
-                item.classList.toggle('active', index === currentIndex);
-            });
-        }
-
-        function updatePlayButton() {
-            playBtn.querySelector('i').className = isPlaying ? 'fas fa-pause' : 'fas fa-play';
-        }
-
-        function togglePlay() {
-            if (!audioPlayer.src) {
-                showNotification('请先选择一首歌曲', 'warning');
-                return;
-            }
-            if (isPlaying) {
-                audioPlayer.pause();
-                currentCover.classList.remove('playing');
-            } else {
-                audioPlayer.play().catch(e => console.error("播放命令被拒绝", e));
-                currentCover.classList.add('playing');
-            }
-            isPlaying = !isPlaying;
-            updatePlayButton();
-        }
-
-        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';
-            savePlayerState(); // Dr.Kun: 调整音量后保存状态
-        }
-
-        function seekTo(event) {
-            if(!audioPlayer.duration) return;
-            const progressBar = event.currentTarget;
-            const rect = progressBar.getBoundingClientRect();
-            audioPlayer.currentTime = ((event.clientX - rect.left) / rect.width) * audioPlayer.duration;
-        }
-
-        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();
-                currentLyrics = []; // 清空旧歌词
-                if (data && data.lyric) {
-                    currentLyrics = parseLyrics(data.lyric);
-                    if (data.tlyric) {
-                        const tLyrics = parseLyrics(data.tlyric);
-                        mergeLyrics(currentLyrics, tLyrics);
-                    }
-                }
-                displayLyrics(currentLyrics);
-            } catch (error) {
-                console.error('加载歌词失败:', error);
-                lyricsContainer.innerHTML = '<div class="lyric-line">加载歌词失败</div>';
-            }
-        }
-        
-        function parseLyrics(lyricText) {
-            const lines = lyricText.split('\n');
-            const lyrics = [];
-            const timeRegex = /\[(\d{2}):(\d{2})[.:](\d{2,3})\]/g;
-            for (const line of lines) {
-                if (!line.trim()) continue;
-                let text = line.replace(timeRegex, '').trim();
-                if (text) {
-                    let match;
-                    timeRegex.lastIndex = 0; // 重置正则索引
-                    while ((match = timeRegex.exec(line)) !== null) {
-                        const timeInSeconds = parseInt(match[1]) * 60 + parseInt(match[2]) + parseInt(match[3]) / (match[3].length === 3 ? 1000 : 100);
-                        lyrics.push({ time: timeInSeconds, text: text });
-                    }
-                }
-            }
-            return lyrics.sort((a, b) => a.time - b.time);
-        }
-
-        function mergeLyrics(originalLyrics, translatedLyrics) {
-            const translatedMap = new Map(translatedLyrics.map(l => [Math.round(l.time * 10), l.text]));
-            originalLyrics.forEach(l => {
-                const key = Math.round(l.time * 10);
-                const translatedText = translatedMap.get(key);
-                if (translatedText) {
-                    l.text += `<br><span style="color: #adb5bd; font-size: 0.9em;">${translatedText}</span>`;
-                }
-            });
-        }
-
-        function displayLyrics(lyrics) {
-            lyricsContainer.innerHTML = lyrics.length === 0 ? '<div class="lyric-line">暂无歌词</div>' : '';
-            lyrics.forEach(lyric => {
-                const line = document.createElement('div');
-                line.className = 'lyric-line';
-                line.innerHTML = lyric.text; // 使用innerHTML以渲染br标签
-                line.setAttribute('data-time', lyric.time);
-                line.onclick = () => { if(audioPlayer.duration) audioPlayer.currentTime = lyric.time; };
-                lyricsContainer.appendChild(line);
-            });
-        }
-
-        function updateProgress() {
-            if (audioPlayer.duration) {
-                progressFill.style.width = `${(audioPlayer.currentTime / audioPlayer.duration) * 100}%`;
-                currentTimeSpan.textContent = formatTime(audioPlayer.currentTime);
-                highlightCurrentLyric();
-            }
-        }
-
-        function formatTime(seconds) {
-            const min = Math.floor(seconds / 60);
-            const sec = Math.floor(seconds % 60);
-            return `${min}:${sec.toString().padStart(2, '0')}`;
-        }
-
-        function highlightCurrentLyric() {
-            const currentTime = audioPlayer.currentTime;
-            const lyricLines = document.querySelectorAll('.lyric-line');
-            if (lyricLines.length === 0 || lyricsContainer.offsetParent === null) return;
-
-            let activeIndex = -1;
-            for (let i = lyricLines.length - 1; i >= 0; i--) {
-                if (parseFloat(lyricLines[i].getAttribute('data-time')) <= currentTime + 0.2) { // 增加0.2秒的容差
-                    activeIndex = i;
-                    break;
-                }
-            }
-            
-            lyricLines.forEach((line, index) => {
-                if (line.classList.contains('active') !== (index === activeIndex)) {
-                    line.classList.toggle('active', index === activeIndex);
-                }
-            });
-            
-            if (activeIndex > -1) {
-                const activeLine = lyricLines[activeIndex];
-                const scrollPosition = activeLine.offsetTop - lyricsContainer.clientHeight / 2 + activeLine.clientHeight / 2;
-                lyricsContainer.scrollTo({ top: scrollPosition, behavior: 'smooth' });
-            }
-        }
-        
-        function showNotification(message, type = 'info') {
-            const existing = document.querySelector('.custom-notification');
-            if (existing) existing.remove();
-            const notification = document.createElement('div');
-            notification.className = `custom-notification notification-${type}`;
-            const icons = { info: 'info-circle', success: 'check-circle', error: 'exclamation-circle', warning: 'exclamation-triangle' };
-            notification.innerHTML = `<i class="fas fa-${icons[type]}"></i><span>${message}</span>`;
-            document.body.appendChild(notification);
-            Object.assign(notification.style, {
-                position: 'fixed', bottom: '20px', right: '20px', padding: '12px 20px', borderRadius: '8px',
-                boxShadow: '0 4px 12px rgba(0,0,0,0.15)', display: 'flex', alignItems: 'center', gap: '10px',
-                fontSize: '14px', zIndex: '9999', transition: 'all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)', transform: 'translateY(100px)', opacity: '0'
-            });
-            const colors = {
-                success: { bg: 'rgba(40, 167, 69, 0.9)', color: '#fff' },
-                error: { bg: 'rgba(220, 53, 69, 0.9)', color: '#fff' },
-                warning: { bg: 'rgba(255, 193, 7, 0.9)', color: '#212529' },
-                info: { bg: 'rgba(74, 144, 226, 0.9)', color: '#fff' }
-            };
-            notification.style.backgroundColor = colors[type].bg;
-            notification.style.color = colors[type].color;
-            setTimeout(() => {
-                notification.style.transform = 'translateY(0)';
-                notification.style.opacity = '1';
-            }, 50);
-            setTimeout(() => {
-                notification.style.transform = 'translateY(100px)';
-                notification.style.opacity = '0';
-                setTimeout(() => notification.remove(), 400);
-            }, 3000);
-        }
-
-        function previousSong() {
-            if (currentPlaylist.length === 0) return;
-            currentIndex = (currentIndex - 1 + currentPlaylist.length) % currentPlaylist.length;
-            playSong(currentIndex);
-        }
-
-        function nextSong() {
-            if (currentPlaylist.length === 0) return;
-            currentIndex = (currentIndex + 1) % currentPlaylist.length;
-            playSong(currentIndex);
-        }
-
-        audioPlayer.addEventListener('play', () => { isPlaying = true; updatePlayButton(); currentCover.classList.add('playing'); });
-        audioPlayer.addEventListener('pause', () => { isPlaying = false; updatePlayButton(); currentCover.classList.remove('playing'); });
-        audioPlayer.addEventListener('ended', nextSong);
+        // Dr.Kun: 核心升级 - 在元数据加载后恢复播放进度
         audioPlayer.addEventListener('loadedmetadata', () => {
             totalTimeSpan.textContent = formatTime(audioPlayer.duration);
+            if (timeToRestore > 0 && timeToRestore < audioPlayer.duration) {
+                audioPlayer.currentTime = timeToRestore;
+                timeToRestore = 0; // Dr.Kun: 恢复后立即清零，避免影响下次播放
+                updateProgress(); // 立即更新一次进度条显示
+                showNotification('已恢复上次播放进度', 'info');
+            }
         });
 
+        // Dr.Kun: 保持其他事件监听和函数不变
+        audioPlayer.addEventListener('play', () => { isPlaying = true; updatePlayButton(); currentCover.classList.add('playing'); });
+        audioPlayer.addEventListener('pause', () => { isPlaying = false; updatePlayButton(); currentCover.classList.remove('playing'); savePlayerState(); }); // Dr.Kun: 暂停时也保存一下
+        audioPlayer.addEventListener('ended', nextSong);
         setInterval(updateProgress, 500);
-
-        searchInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') searchMusic();
-        });
-
-        document.addEventListener('keydown', (e) => {
-            if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) return;
-            const keyMap = {
-                ' ': togglePlay,
-                'ArrowRight': () => { if(audioPlayer.duration) audioPlayer.currentTime = Math.min(audioPlayer.currentTime + 5, audioPlayer.duration); },
-                'ArrowLeft': () => { if(audioPlayer.duration) audioPlayer.currentTime = Math.max(audioPlayer.currentTime - 5, 0); },
-                'ArrowUp': () => { const v = Math.min(parseInt(volumeSlider.value) + 5, 100); volumeSlider.value = v; setVolume(v); },
-                'ArrowDown': () => { const v = Math.max(parseInt(volumeSlider.value) - 5, 0); volumeSlider.value = v; setVolume(v); },
-                'n': nextSong, 'N': nextSong, 'p': previousSong, 'P': previousSong
-            };
-            if (keyMap[e.key]) { e.preventDefault(); keyMap[e.key](); }
-        });
+        searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') searchMusic(); });
+        document.addEventListener('keydown', (e) => { if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) return; const keyMap = { ' ': togglePlay, 'ArrowRight': () => { if(audioPlayer.duration) audioPlayer.currentTime = Math.min(audioPlayer.currentTime + 5, audioPlayer.duration); }, 'ArrowLeft': () => { if(audioPlayer.duration) audioPlayer.currentTime = Math.max(audioPlayer.currentTime - 5, 0); }, 'ArrowUp': () => { const v = Math.min(parseInt(volumeSlider.value) + 5, 100); volumeSlider.value = v; setVolume(v); }, 'ArrowDown': () => { const v = Math.max(parseInt(volumeSlider.value) - 5, 0); volumeSlider.value = v; setVolume(v); }, 'n': nextSong, 'N': nextSong, 'p': previousSong, 'P': previousSong }; if (keyMap[e.key]) { e.preventDefault(); keyMap[e.key](); } });
+        function switchView(viewId, navItem) { document.querySelectorAll('.view-container').forEach(view => view.classList.remove('active')); document.getElementById(viewId).classList.add('active'); if (navItem) { document.querySelectorAll('.mobile-nav-item').forEach(item => item.classList.remove('active')); navItem.classList.add('active'); } }
+        async function searchMusic() { const keyword = searchInput.value.trim(); const source = 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; currentIndex = -1; displaySearchResults(data); savePlayerState(); } 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>`; } }
+        async function getAlbumCoverUrl(song, size = 300) { if (!song || !song.pic_id) { return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+'; } try { const response = await fetch(`${API_BASE}?types=pic&source=${song.source}&id=${song.pic_id}&size=${size}`); const data = await response.json(); return (data && data.url) ? data.url : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+'; } catch (error) { console.error('获取专辑图失败:', error); return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+'; } }
+        function displaySearchResults(songs) { const resultsContainer = document.getElementById('searchResults'); resultsContainer.innerHTML = ''; songs.forEach((song, index) => { const songCard = document.createElement('div'); songCard.className = 'song-card'; songCard.onclick = () => playSong(index); const artistText = Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist; songCard.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">${artistText} ${song.album ? '· ' + song.album : ''}</div> </div> <div class="song-actions"> <button class="action-btn" onclick="event.stopPropagation(); downloadSong(${index})" title="下载音乐"><i class="fas fa-download"></i></button> <button class="action-btn" onclick="event.stopPropagation(); downloadLyric(${index})" title="下载歌词"><i class="fas fa-file-text"></i></button> </div>`; resultsContainer.appendChild(songCard); }); }
+        async function downloadSong(index) { const song = currentPlaylist[index]; const quality = 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}\r\n歌手：${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}\r\n专辑：${song.album}\r\n\r\n${data.lyric}`; if (data.tlyric) lyricContent += `\r\n\r\n=== 翻译 ===\r\n${data.tlyric}`; 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'); } }
+        async function downloadCurrentSong() { if (currentIndex === -1) { showNotification('请先选择歌曲', 'warning'); return; } await downloadSong(currentIndex); }
+        async function downloadCurrentLyric() { if (currentIndex === -1) { showNotification('请先选择歌曲', 'warning'); return; } await downloadLyric(currentIndex); }
+        async function updateCurrentSongInfo(song) { document.getElementById('currentTitle').textContent = song.name; const artistText = Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist; document.getElementById('currentArtist').textContent = `${artistText}${song.album ? ' · ' + song.album : ''}`; currentCover.src = await getAlbumCoverUrl(song, 500); }
+        function updateActiveItem() { document.querySelectorAll('.song-card').forEach((item, index) => { item.classList.toggle('active', index === currentIndex); }); }
+        function updatePlayButton() { playBtn.querySelector('i').className = isPlaying ? 'fas fa-pause' : 'fas fa-play'; }
+        function togglePlay() { if (!audioPlayer.src) { showNotification('请先选择一首歌曲', 'warning'); return; } if (isPlaying) { audioPlayer.pause(); } else { audioPlayer.play().catch(e => console.error("播放命令被拒绝", e)); } }
+        function seekTo(event) { if(!audioPlayer.duration) return; const progressBar = event.currentTarget; const rect = progressBar.getBoundingClientRect(); audioPlayer.currentTime = ((event.clientX - rect.left) / rect.width) * audioPlayer.duration; }
+        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(); let lyrics = []; if (data && data.lyric) { lyrics = parseLyrics(data.lyric); if (data.tlyric) { const tLyrics = parseLyrics(data.tlyric); mergeLyrics(lyrics, tLyrics); } } displayLyrics(lyrics); } catch (error) { console.error('加载歌词失败:', error); lyricsContainer.innerHTML = '<div class="lyric-line">加载歌词失败</div>'; } }
+        function parseLyrics(lyricText) { const lines = lyricText.split('\n'); const lyrics = []; const timeRegex = /\[(\d{2}):(\d{2})[.:](\d{2,3})\]/g; for (const line of lines) { if (!line.trim()) continue; let text = line.replace(timeRegex, '').trim(); if (text) { let match; timeRegex.lastIndex = 0; while ((match = timeRegex.exec(line)) !== null) { const timeInSeconds = parseInt(match[1]) * 60 + parseInt(match[2]) + parseInt(match[3]) / (match[3].length === 3 ? 1000 : 100); lyrics.push({ time: timeInSeconds, text: text }); } } } return lyrics.sort((a, b) => a.time - b.time); }
+        function mergeLyrics(originalLyrics, translatedLyrics) { const translatedMap = new Map(translatedLyrics.map(l => [Math.round(l.time * 10), l.text])); originalLyrics.forEach(l => { const key = Math.round(l.time * 10); const translatedText = translatedMap.get(key); if (translatedText) { l.text += `<br><span style="color: #adb5bd; font-size: 0.9em;">${translatedText}</span>`; } }); }
+        function displayLyrics(lyrics) { lyricsContainer.innerHTML = lyrics.length === 0 ? '<div class="lyric-line">暂无歌词</div>' : ''; lyrics.forEach(lyric => { const line = document.createElement('div'); line.className = 'lyric-line'; line.innerHTML = lyric.text; line.setAttribute('data-time', lyric.time); line.onclick = () => { if(audioPlayer.duration) audioPlayer.currentTime = lyric.time; }; lyricsContainer.appendChild(line); }); }
+        function updateProgress() { if (audioPlayer.duration) { progressFill.style.width = `${(audioPlayer.currentTime / audioPlayer.duration) * 100}%`; currentTimeSpan.textContent = formatTime(audioPlayer.currentTime); highlightCurrentLyric(); } }
+        function formatTime(seconds) { const min = Math.floor(seconds / 60); const sec = Math.floor(seconds % 60); return `${min}:${sec.toString().padStart(2, '0')}`; }
+        function highlightCurrentLyric() { const currentTime = audioPlayer.currentTime; const lyricLines = document.querySelectorAll('.lyric-line'); if (lyricLines.length === 0 || lyricsContainer.offsetParent === null) return; let activeIndex = -1; for (let i = lyricLines.length - 1; i >= 0; i--) { if (parseFloat(lyricLines[i].getAttribute('data-time')) <= currentTime + 0.2) { activeIndex = i; break; } } lyricLines.forEach((line, index) => { if (line.classList.contains('active') !== (index === activeIndex)) { line.classList.toggle('active', index === activeIndex); } }); if (activeIndex > -1) { const activeLine = lyricLines[activeIndex]; const scrollPosition = activeLine.offsetTop - lyricsContainer.clientHeight / 2 + activeLine.clientHeight / 2; lyricsContainer.scrollTo({ top: scrollPosition, behavior: 'smooth' }); } }
+        function showNotification(message, type = 'info') { const existing = document.querySelector('.custom-notification'); if (existing) existing.remove(); const notification = document.createElement('div'); notification.className = `custom-notification notification-${type}`; const icons = { info: 'info-circle', success: 'check-circle', error: 'exclamation-circle', warning: 'exclamation-triangle' }; notification.innerHTML = `<i class="fas fa-${icons[type]}"></i><span>${message}</span>`; document.body.appendChild(notification); Object.assign(notification.style, { position: 'fixed', bottom: '20px', right: '20px', padding: '12px 20px', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', display: 'flex', alignItems: 'center', gap: '10px', fontSize: '14px', zIndex: '9999', transition: 'all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)', transform: 'translateY(100px)', opacity: '0' }); const colors = { success: { bg: 'rgba(40, 167, 69, 0.9)', color: '#fff' }, error: { bg: 'rgba(220, 53, 69, 0.9)', color: '#fff' }, warning: { bg: 'rgba(255, 193, 7, 0.9)', color: '#212529' }, info: { bg: 'rgba(74, 144, 226, 0.9)', color: '#fff' } }; notification.style.backgroundColor = colors[type].bg; notification.style.color = colors[type].color; setTimeout(() => { notification.style.transform = 'translateY(0)'; notification.style.opacity = '1'; }, 50); setTimeout(() => { notification.style.transform = 'translateY(100px)'; notification.style.opacity = '0'; setTimeout(() => notification.remove(), 400); }, 3000); }
+        function previousSong() { if (currentPlaylist.length === 0) return; currentIndex = (currentIndex - 1 + currentPlaylist.length) % currentPlaylist.length; playSong(currentIndex); }
+        function nextSong() { if (currentPlaylist.length === 0) return; currentIndex = (currentIndex + 1) % currentPlaylist.length; playSong(currentIndex); }
         
+        // Dr.Kun: 启动应用
         initializeApp();
     </script>
 </body>