export default {
async fetch(request, env, ctx) {
// 设置CORS头
const corsHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type',
};
// 处理预检请求
if (request.method === 'OPTIONS') {
return new Response(null, { headers: corsHeaders });
}
const url = new URL(request.url);
// 登录逻辑
if (url.pathname === '/login' && request.method === 'POST') {
const formData = await request.formData();
const password = formData.get('password');
const adminPassword = env.ADMIN_PASSWORD || 'admin123'; // 默认密码，可通过环境变量设置
if (password === adminPassword) {
// 登录成功，设置 Cookie， 默认24小时等于86400秒，自用30天等于2592000秒
console.log('登录成功，设置Cookie');
return new Response('', {
status: 302,
headers: {
'Set-Cookie': auth=1; Path=/; HttpOnly; SameSite=Lax; Max-Age=864000,
'Location': '/'
}
});
} else {
return new Response(renderLoginPage('密码错误，请重试！'), {
headers: { 'Content-Type': 'text/html;charset=utf-8' }
});
}
}
// 退出逻辑
if (url.pathname === '/logout') {
return new Response('', {
status: 302,
headers: {
'Set-Cookie': auth=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0,
'Location': '/'
}
});
}
// 检查是否已登录
const cookie = request.headers.get('Cookie') || '';
console.log('检查Cookie:', cookie);
if (!cookie.includes('auth=1')) {
console.log('未找到有效Cookie，重定向到登录页面');
return new Response(renderLoginPage(), {
headers: { 'Content-Type': 'text/html;charset=utf-8' }
});
}
console.log('Cookie验证通过，允许访问');
const html = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ws01 Music - 个人音乐库</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="shortcut icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>♬</text></svg>">
<style>
:root {
--font-main: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
--accent-color: #0F52BA;
--accent-color-hover: #00318C;
--danger-color: #D32F2F;
--download-color: #27ae60;
--bg-color-dark: #191A1C;
--sidebar-bg: rgba(17, 18, 19, 0.75);
--main-bg: rgba(25, 26, 28, 0.6);
--player-bg: rgba(17, 18, 19, 0.75);
--text-color-primary: #F5F5F5;
--text-color-secondary: #A0A0A0;
--component-bg: rgba(44, 45, 47, 0.7);
--hover-bg: rgba(58, 59, 61, 0.8);
--border-color: rgba(80, 80, 80, 0.5);
}
.light-mode {
--accent-color: #0F52BA;
--accent-color-hover: #0039A6;
--download-color: #2ecc71;
--danger-color: #c0392b;
--bg-color-dark: #F4F6F8;
--sidebar-bg: rgba(255, 255, 255, 0.7);
--main-bg: rgba(244, 246, 248, 0.65);
--player-bg: rgba(255, 255, 255, 0.7);
--text-color-primary: #121212;
--text-color-secondary: #6B7280;
--component-bg: rgba(255, 255, 255, 0.6);
--hover-bg: rgba(234, 236, 239, 0.7);
--border-color: rgba(200, 200, 200, 0.6);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--hover-bg);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-color);
}
body {
font-family: var(--font-main);
color: var(--text-color-primary);
background-color: var(--bg-color-dark);
overflow: hidden;
transition: background-color 0.3s;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.app-container {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 1fr auto;
grid-template-areas: "sidebar main" "player player";
height: 100vh;
width: 100vw;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient-animation 15s ease infinite;
}
.sidebar {
grid-area: sidebar;
background-color: var(--sidebar-bg);
padding: 24px;
display: flex;
flex-direction: column;
border-right: 1px solid var(--border-color);
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, border-color 0.3s;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.sidebar h1 {
color: var(--text-color-primary);
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 12px;
}
.sidebar nav ul {
list-style: none;
}
.sidebar nav a {
color: var(--text-color-secondary);
display: flex;
align-items: center;
gap: 15px;
padding: 12px;
margin-bottom: 8px;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}
.sidebar nav a:hover {
color: var(--text-color-primary);
background-color: var(--hover-bg);
}
.sidebar nav a.active {
color: var(--accent-color);
font-weight: 700;
background-color: var(--hover-bg);
}
.main-content {
grid-area: main;
overflow-y: auto;
padding: 24px 32px;
background-color: var(--main-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.search-area {
position: relative;
margin-bottom: 24px;
}
.search-area i.fa-search {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--text-color-secondary);
}
.search-area input {
background-color: var(--component-bg);
border: 1px solid var(--border-color);
color: var(--text-color-primary);
width: 100%;
padding: 12px 20px 12px 50px;
font-size: 1em;
border-radius: 50px;
outline: none;
transition: all 0.3s;
}
.search-area input:focus {
border-color: var(--accent-color);
box-shadow: 0 0 10px rgba(15, 82, 186, 0.2);
}
.song-list-header,
.song-item {
display: grid;
grid-template-columns: 40px 3fr 2fr 2fr 40px 40px;
align-items: center;
padding: 10px 15px;
gap: 15px;
}
#stats-top-tracks .song-item,
#stats-top-artists .song-item {
grid-template-columns: 40px 3fr 2fr 1fr 40px;
}
.song-list-header {
color: var(--text-color-secondary);
font-size: 0.8em;
border-bottom: 1px solid var(--border-color);
background-color: var(--component-bg);
border-radius: 8px 8px 0 0;
margin-top: 10px;
}
.song-item {
border-radius: 8px;
transition: background-color 0.2s;
cursor: pointer;
font-size: 0.9em;
border-bottom: 1px solid var(--border-color);
}
.song-list>.song-item:last-child {
border-bottom: none;
}
.song-item:hover {
background-color: var(--hover-bg);
}
.song-item.current {
background-color: var(--hover-bg);
}
.song-item.current .song-title>span:first-child {
color: var(--accent-color);
}
.song-item .song-title {
display: flex;
flex-direction: column;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.song-item .song-title .error-msg {
font-size: 0.8em;
color: var(--danger-color);
margin-top: 4px;
}
.action-btn {
color: var(--text-color-secondary);
cursor: pointer;
transition: color 0.2s, transform 0.2s;
text-align: center;
}
.action-btn:hover {
transform: scale(1.2);
}
.fav-btn.favourited {
color: var(--danger-color);
}
.download-btn:hover {
color: var(--download-color);
}
.delete-btn:hover {
color: var(--danger-color);
}
.now-playing-bar {
grid-area: player;
background-color: var(--player-bg);
border-top: 1px solid var(--border-color);
padding: 15px 30px;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
align-items: center;
gap: 20px;
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.song-info-bar {
display: flex;
align-items: center;
gap: 15px;
min-width: 0;
}
.song-info-bar img {
width: 56px;
height: 56px;
border-radius: 8px;
object-fit: cover;
background-color: var(--hover-bg);
}
.song-info-bar .fav-btn {
font-size: 1.2em;
}
.song-info-bar div {
overflow: hidden;
}
.song-info-bar div h3,
.song-info-bar div p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player-controls {
display: flex;
flex-direction: column;
align-items: center;
}
.control-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: 12px;
}
#playPauseBtn {
background-color: var(--text-color-primary);
color: var(--player-bg);
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
cursor: pointer;
border: none;
}
.light-mode #playPauseBtn {
color: #FFFFFF;
background-color: #121212;
}
#playPauseBtn:hover {
transform: scale(1.1);
}
.control-btn {
background: none;
border: none;
color: var(--text-color-secondary);
font-size: 1.1em;
cursor: pointer;
transition: all 0.2s;
}
.control-btn:hover {
color: var(--text-color-primary);
transform: scale(1.15);
}
.control-btn.active {
color: var(--accent-color);
}
.progress-area {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 500px;
}
.progress-bar {
flex-grow: 1;
height: 6px;
background-color: var(--hover-bg);
border-radius: 3px;
cursor: pointer;
}
.progress {
height: 100%;
width: 0%;
background-color: var(--accent-color);
border-radius: 3px;
}
.time-display span {
font-size: 0.75em;
color: var(--text-color-secondary);
}
.extra-controls {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 15px;
}
.volume-area {
display: flex;
align-items: center;
gap: 8px;
width: 120px;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background-color: var(--hover-bg);
border-radius: 3px;
outline: none;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background-color: var(--text-color-primary);
border-radius: 50%;
transition: background-color 0.3s;
}
input[type="range"]:hover::-webkit-slider-thumb {
background-color: var(--accent-color);
}
.sidebar .theme-switcher {
margin-top: auto;
cursor: pointer;
display: flex;
align-items: center;
gap: 15px;
padding: 12px;
border-radius: 8px;
background-color: var(--component-bg);
color: var(--text-color-secondary);
font-weight: 500;
transition: all 0.3s;
}
.sidebar .theme-switcher:hover {
color: var(--text-color-primary);
background-color: var(--hover-bg);
}
.view {
display: none;
}
.view.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.list-section h2,
.view>h2 {
margin-bottom: 20px;
font-size: 1.8rem;
color: var(--text-color-primary);
border-bottom: 2px solid var(--accent-color);
padding-bottom: 10px;
}
/ 数据管理界面样式 /
.data-management-controls {
background: var(--card-bg);
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.data-control-group {
margin-bottom: 24px;
padding: 16px;
background: var(--bg-color);
border-radius: 8px;
border: 1px solid var(--border-color);
}
.data-control-group:last-child {
margin-bottom: 0;
}
.data-control-group h3 {
margin: 0 0 12px 0;
font-size: 1.2rem;
color: var(--text-color-primary);
display: flex;
align-items: center;
gap: 8px;
}
.data-control-group h3::before {
content: '';
width: 4px;
height: 20px;
background: var(--accent-color);
border-radius: 2px;
}
.data-control-group .control-buttons {
display: flex;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.data-control-group .control-btn {
background: var(--accent-color);
color: white;
border: none;
padding: 10px 16px;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.data-control-group .control-btn:hover {
background: var(--accent-color-hover);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.data-control-group .control-btn:active {
transform: translateY(0);
}
.data-info {
margin: 0;
font-size: 0.9rem;
color: var(--text-color-secondary);
font-weight: 500;
}
.data-info span {
color: var(--accent-color);
font-weight: 600;
}
/ 清空按钮样式 /
.control-btn.clear-btn {
background: #e74c3c;
color: white;
}
.control-btn.clear-btn:hover {
background: #c0392b;
transform: translateY(-1px);
}
.control-btn.clear-btn:active {
transform: translateY(0);
}
/ 移动端数据管理适配 /
@media (max-width: 768px) {
.data-management-controls {
padding: 16px;
}
.data-control-group {
padding: 12px;
}
.data-control-group .control-buttons {
gap: 8px;
}
.data-control-group .control-btn {
padding: 8px 12px;
font-size: 0.85rem;
}
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background-color: var(--component-bg);
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.stat-card h3 {
color: var(--text-color-secondary);
font-size: 0.9rem;
margin-bottom: 8px;
}
.stat-card p {
font-size: 2rem;
font-weight: bold;
}
.pagination-controls {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
gap: 8px;
user-select: none;
}
.page-btn {
background-color: var(--component-bg);
border: 1px solid var(--border-color);
color: var(--text-color-secondary);
padding: 8px 14px;
min-width: 40px;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
}
.page-btn:hover {
background-color: var(--hover-bg);
color: var(--text-color-primary);
border-color: var(--accent-color);
}
.page-btn.active {
background-color: var(--accent-color);
color: #FFFFFF;
border-color: var(--accent-color);
font-weight: 700;
}
.page-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.action-button {
padding: 10px 15px;
margin-bottom: 20px;
border-radius: 20px;
border: none;
background: var(--accent-color);
color: white;
font-weight: bold;
cursor: pointer;
min-width: 120px;
}
/ 移动端响应式设计 /
@media (max-width: 768px) {
.app-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr auto auto;
grid-template-areas: "main" "player" "sidebar";
}
.sidebar {
grid-area: sidebar;
position: fixed;
top: 0;
left: -280px;
width: 280px;
height: 100vh;
z-index: 1000;
transition: left 0.3s ease;
background-color: var(--sidebar-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
}
.sidebar.open {
left: 0;
}
.sidebar .theme-switcher {
position: absolute;
bottom: 20px;
left: 24px;
right: 24px;
}
.sidebar h1 {
margin-bottom: 20px;
font-size: 1.5rem;
}
.sidebar nav a {
padding: 16px;
font-size: 1rem;
}
/ 移动端主内容区域 /
.main-content {
grid-area: main;
padding: 16px 20px;
}
/ 移动端播放控制栏 /
.now-playing-bar {
grid-area: player;
padding: 20px;
flex-direction: column;
gap: 20px;
}
.song-info-bar {
width: 100%;
gap: 15px;
justify-content: center;
}
.song-info-bar img {
width: 50px;
height: 60px;
}
/ 在移动端隐藏歌曲信息和收藏按钮，只保留封面 /
@media (max-width: 768px) {
.song-info-bar div,
.song-info-bar .fav-btn {
display: none;
}
.song-info-bar img {
margin: 0 auto;
}
}
.player-controls {
width: 100%;
}
.control-buttons {
gap: 20px;
}
.progress-area {
max-width: none;
width: 100%;
}
.extra-controls {
justify-content: center;
width: 100%;
}
.volume-area {
width: 80px;
}
/ 移动端歌曲列表 /
.song-list-header,
.song-item {
grid-template-columns: 30px 1fr 30px 30px;
padding: 12px 8px;
gap: 8px;
}
.song-list-header span:nth-child(2),
.song-list-header span:nth-child(3),
.song-list-header span:nth-child(4) {
display: none;
}
.song-item .song-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
}
.song-item span:nth-child(3),
.song-item span:nth-child(4) {
display: none;
}
.song-item .song-index {
font-size: 0.8rem;
}
.action-btn {
font-size: 1rem;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/ 移动端搜索框 /
.search-area input {
padding: 14px 20px 14px 50px;
font-size: 1rem;
}
.search-area i.fa-search {
left: 18px;
font-size: 1.1rem;
}
/ 移动端按钮优化 /
.action-button {
padding: 14px 20px;
font-size: 1rem;
min-width: 100%;
margin-bottom: 16px;
}
/ 移动端分页 /
.pagination-controls {
padding: 16px 0;
}
.page-btn {
padding: 10px 16px;
min-width: 44px;
font-size: 1rem;
}
/ 移动端统计卡片 /
.stats-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.stat-card {
padding: 16px;
}
.stat-card h3 {
font-size: 0.85rem;
}
.stat-card p {
font-size: 1.8rem;
}
/ 移动端列表标题 /
.list-section h2,
.view > h2 {
font-size: 1.5rem;
margin-bottom: 16px;
}
}
/ 移动端统计列表特殊适配 /
@media (max-width: 768px) {
#stats-top-tracks .song-item {
grid-template-columns: 30px 1fr 1fr 1fr 30px !important;
padding: 12px 8px;
gap: 8px;
}
#stats-top-tracks .song-list-header {
grid-template-columns: 30px 1fr 1fr 1fr 30px !important;
}
#stats-top-tracks .song-item span:nth-child(3),
#stats-top-tracks .song-item span:nth-child(4) {
display: block !important;
font-size: 0.8rem;
color: var(--text-color-secondary);
}
#stats-top-tracks .song-item .song-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/ 最常听的歌手在移动端使用3列布局 /
#stats-top-artists .song-item {
grid-template-columns: 30px 1fr 1fr !important;
padding: 12px 8px;
gap: 8px;
}
#stats-top-artists .song-list-header {
grid-template-columns: 30px 1fr 1fr !important;
}
#stats-top-artists .song-item span:nth-child(3) {
display: block !important;
font-size: 0.8rem;
color: var(--text-color-secondary);
text-align: right;
}
#stats-top-artists .song-item .song-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/ 超小屏幕统计适配 /
@media (max-width: 480px) {
#stats-top-tracks .song-item {
grid-template-columns: 25px 1fr 1fr 25px !important;
font-size: 0.8rem;
}
#stats-top-tracks .song-list-header {
grid-template-columns: 25px 1fr 1fr 25px !important;
font-size: 0.7rem;
}
#stats-top-tracks .song-item span:nth-child(4) {
display: none !important;
}
#stats-top-tracks .song-item span:nth-child(3) {
text-align: right;
}
/ 最常听的歌手在超小屏幕下使用3列布局 /
#stats-top-artists .song-item {
grid-template-columns: 25px 1fr 1fr !important;
font-size: 0.8rem;
}
#stats-top-artists .song-list-header {
grid-template-columns: 25px 1fr 1fr !important;
font-size: 0.7rem;
}
#stats-top-artists .song-item span:nth-child(3) {
text-align: right;
}
}
/ 超小屏幕适配 /
@media (max-width: 480px) {
.sidebar {
width: 100%;
left: -100%;
}
.sidebar.open {
left: 0;
}
.main-content {
padding: 12px 16px;
}
.now-playing-bar {
padding: 16px;
}
.control-buttons {
gap: 16px;
}
#playPauseBtn {
width: 50px;
height: 50px;
font-size: 1.2em;
}
.control-btn {
font-size: 1.2em;
}
.song-info-bar img {
width: 40px;
height: 50px;
}
.volume-area {
width: 60px;
}
}
/ 遮罩层 /
.sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.sidebar-overlay.show {
display: block;
}
/ 移动端菜单按钮 /
.mobile-menu-btn {
display: none;
position: fixed;
top: 20px;
left: 20px;
z-index: 1001;
background-color: var(--component-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 12px;
cursor: pointer;
color: var(--text-color-primary);
font-size: 1.2rem;
transition: all 0.2s;
}
.mobile-menu-btn:hover {
background-color: var(--hover-bg);
}
@media (max-width: 768px) {
.mobile-menu-btn {
display: block;
}
}
/ 歌曲选项菜单样式 /
.song-options-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
}
/ 下载完成对话框样式 /
.download-dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.download-dialog-content {
background-color: var(--component-bg);
border-radius: 12px;
padding: 25px;
margin: 20px;
width: 100%;
max-width: 400px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
animation: dialogSlideIn 0.3s ease;
text-align: center;
}
@keyframes dialogSlideIn {
from {
opacity: 0;
transform: scale(0.8) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.download-dialog-icon {
font-size: 48px;
color: var(--download-color);
margin-bottom: 15px;
}
.download-dialog-title {
font-size: 18px;
font-weight: 600;
color: var(--text-color-primary);
margin-bottom: 10px;
}
.download-dialog-message {
color: var(--text-color-secondary);
margin-bottom: 20px;
line-height: 1.5;
}
.download-dialog-buttons {
display: flex;
gap: 12px;
justify-content: center;
}
.download-dialog-btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
min-width: 100px;
}
.download-dialog-btn.primary {
background-color: var(--accent-color);
color: white;
}
.download-dialog-btn.primary:hover {
background-color: var(--accent-color-hover);
transform: translateY(-1px);
}
.download-dialog-btn.secondary {
background-color: var(--hover-bg);
color: var(--text-color-primary);
border: 1px solid var(--border-color);
}
.download-dialog-btn.secondary:hover {
background-color: var(--component-bg);
transform: translateY(-1px);
}
.song-options-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.song-options-content {
position: relative;
background-color: var(--component-bg);
border-radius: 12px;
padding: 20px;
margin: 20px;
width: 100%;
max-width: 300px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
animation: menuSlideIn 0.3s ease;
}
@keyframes menuSlideIn {
from {
opacity: 0;
transform: scale(0.8) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.option-btn {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 16px 20px;
background: none;
border: none;
color: var(--text-color-primary);
font-size: 1rem;
cursor: pointer;
border-radius: 8px;
transition: all 0.2s;
margin-bottom: 8px;
}
.option-btn:last-child {
margin-bottom: 0;
}
.option-btn:hover {
background-color: var(--hover-bg);
transform: translateY(-1px);
}
.option-btn:active {
transform: translateY(0);
}
/ 歌单导入相关样式 /
.playlist-import {
background-color: var(--component-bg);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid var(--border-color);
}
.section-title {
color: var(--text-color-primary);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.import-form {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.import-input {
flex: 1;
padding: 12px 15px;
background: var(--hover-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-color-primary);
outline: none;
font-size: 14px;
transition: all 0.3s ease;
}
.import-input:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(15, 82, 186, 0.2);
}
.import-input::placeholder {
color: var(--text-color-secondary);
}
.import-btn {
padding: 12px 20px;
background: var(--accent-color);
border: none;
border-radius: 8px;
color: white;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.import-btn:hover {
background: var(--accent-color-hover);
transform: translateY(-1px);
}
.saved-playlists {
margin-top: 20px;
}
.playlist-item {
padding: 12px 15px;
background: var(--hover-bg);
border-radius: 8px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid var(--border-color);
}
.playlist-item:hover {
background: var(--component-bg);
transform: translateY(-1px);
}
.playlist-item .playlist-info {
flex: 1;
min-width: 0;
margin-right: 10px;
}
.playlist-item .playlist-name {
font-weight: 500;
color: var(--text-color-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
}
.playlist-item .playlist-count {
font-size: 13px;
color: var(--text-color-secondary);
}
.playlist-actions {
display: flex;
gap: 8px;
}
.playlist-action-btn {
background: none;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-color-secondary);
cursor: pointer;
padding: 6px 10px;
transition: all 0.2s ease;
font-size: 12px;
}
.playlist-action-btn:hover {
background: var(--accent-color);
color: white;
border-color: var(--accent-color);
}
.playlist-action-btn.delete {
color: var(--danger-color);
border-color: var(--danger-color);
}
.playlist-action-btn.delete:hover {
background: var(--danger-color);
color: white;
}
.empty-state {
text-align: center;
color: var(--text-color-secondary);
padding: 20px;
font-style: italic;
}
/ 移动端歌单导入样式适配 /
@media (max-width: 768px) {
.playlist-import {
padding: 15px;
margin-bottom: 15px;
}
.import-form {
flex-direction: column;
gap: 10px;
}
.import-btn {
justify-content: center;
}
.playlist-item {
padding: 10px 12px;
}
.playlist-item .playlist-name {
font-size: 14px;
}
.playlist-item .playlist-count {
font-size: 12px;
}
.playlist-actions {
gap: 6px;
}
.playlist-action-btn {
padding: 4px 8px;
font-size: 11px;
}
}
</style>
</head>
<body class="dark-mode">
<audio id="audioPlayer"></audio>
<div class="app-container">
<!-- 移动端菜单按钮 -->
<button class="mobile-menu-btn" id="mobileMenuBtn">
<i class="fas fa-bars"></i>
</button>
<!-- 侧边栏遮罩层 -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<aside class="sidebar" id="sidebar">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px;">
<h1 style="margin: 0;"><i class="fas fa-headphones-alt"></i> Music</h1>
<a href="/logout" style="color: var(--text-color-secondary); text-decoration: none; padding: 8px; border-radius: 6px; transition: all 0.2s;" onmouseover="this.style.backgroundColor='var(--hover-bg)'; this.style.color='var(--text-color-primary)'" onmouseout="this.style.backgroundColor='transparent'; this.style.color='var(--text-color-secondary)'" title="退出登录">
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
<nav>
<ul>
<li><a href="#" class="nav-link active" data-view="discover-view"><i
class="fas fa-compass"></i>发现音乐</a></li>
<!-- [] 本地音乐库的导航链接 -->
<li><a href="#" class="nav-link" data-view="local-view"><i class="fas fa-hdd"></i>我的本地</a></li>
<li><a href="#" class="nav-link" data-view="favourites-view"><i class="fas fa-heart"></i>我的收藏</a>
</li>
<li><a href="#" class="nav-link" data-view="history-view"><i class="fas fa-history"></i>播放历史</a>
</li>
<li><a href="#" class="nav-link" data-view="stats-view"><i class="fas fa-chart-pie"></i>听歌统计</a>
</li>
<li><a href="#" class="nav-link" data-view="data-management-view"><i class="fas fa-database"></i>数据管理</a>
</li>
</ul>
</nav>
<div class="login-status" id="loginStatus" style="margin-top: 20px; padding: 12px; background: var(--card-bg); border-radius: 8px; font-size: 0.85rem; color: var(--text-color-secondary); text-align: center;">
<i class="fas fa-user-check"></i> <span id="loginStatusText">已登录</span>
</div>
<div class="theme-switcher" id="themeToggle"><i class="fas fa-sun"></i> <span>切换模式</span></div>
</aside>
<main class="main-content">
<div id="discover-view" class="view active">
<div class="search-area">
<i class="fas fa-search"></i>
<input type="search" id="searchInput" placeholder="搜索歌曲、歌手...">
</div>
<button id="loadOnlineBtn" class="action-button">
<i class="fas fa-satellite-dish"></i> 探索雷达
</button>
<!-- 歌单导入区域 -->
<div class="playlist-import">
<h2 class="section-title">
<i class="fas fa-folder-plus"></i>
导入网易云歌单
</h2>
<div class="import-form">
<input type="text" class="import-input" id="playlistIdInput" placeholder="粘贴歌单ID或链接"/>
<button class="import-btn" onclick="importPlaylist()">
<i class="fas fa-download"></i>
<span>导入</span>
</button>
</div>
<div class="saved-playlists" id="savedPlaylists">
<!-- 保存的歌单将在这里显示 -->
</div>
</div>
<div id="song-list-container" class="song-list"></div>
<div id="pagination-discover" class="pagination-controls"></div>
</div>
<!-- [] 本地音乐库的视图 -->
<div id="local-view" class="view">
<h2><i class="fas fa-hdd"></i> 我的本地音乐</h2>
<button id="addLocalFilesBtn" class="action-button">
<i class="fas fa-folder-plus"></i> 添加本地音乐
</button>
<input type="file" id="localFileInput" multiple accept="audio/*" style="display: none;">
<div id="local-list-container" class="song-list"></div>
<div id="pagination-local" class="pagination-controls"></div>
</div>
<div id="favourites-view" class="view">
<h2><i class="fas fa-heart"></i> 我的收藏</h2>
<div id="favourites-list-container" class="song-list"></div>
<div id="pagination-favourites" class="pagination-controls"></div>
</div>
<div id="history-view" class="view">
<h2><i class="fas fa-history"></i> 播放历史</h2>
<div id="history-list-container" class="song-list"></div>
<div id="pagination-history" class="pagination-controls"></div>
</div>
<div id="stats-view" class="view">
<h2><i class="fas fa-chart-pie"></i> 听歌统计</h2>
<div class="stats-grid">
<div class="stat-card">
<h3>总播放量</h3>
<p id="stats-total-plays">0</p>
</div>
<div class="stat-card">
<h3>不同歌曲</h3>
<p id="stats-unique-tracks">0</p>
</div>
</div>
<div class="list-section">
<h2>播放最多的歌曲</h2>
<div id="stats-top-tracks" class="song-list"></div>
</div>
<div class="list-section" style="margin-top: 30px;">
<h2>最常听的歌手</h2>
<div id="stats-top-artists" class="song-list"></div>
</div>
</div>
<div id="data-management-view" class="view">
<h2><i class="fas fa-database"></i> 数据管理</h2>
<div class="data-management-controls">
<div class="data-control-group">
<h3>我的收藏</h3>
<div class="control-buttons">
<button class="control-btn" id="exportFavouritesBtn" title="导出收藏数据">
<i class="fas fa-download"></i> 导出
</button>
<button class="control-btn" id="importFavouritesBtn" title="导入收藏数据">
<i class="fas fa-upload"></i> 导入
</button>
<button class="control-btn clear-btn" id="clearFavouritesBtn" title="清空收藏数据">
<i class="fas fa-trash"></i> 清空
</button>
<input type="file" id="favouritesFileInput" accept=".json" style="display: none;">
</div>
<p class="data-info">收藏数量: <span id="favourites-count">0</span></p>
</div>
<div class="data-control-group">
<h3>播放历史</h3>
<div class="control-buttons">
<button class="control-btn" id="exportHistoryBtn" title="导出播放历史">
<i class="fas fa-download"></i> 导出
</button>
<button class="control-btn" id="importHistoryBtn" title="导入播放历史">
<i class="fas fa-upload"></i> 导入
</button>
<button class="control-btn clear-btn" id="clearHistoryBtn" title="清空播放历史">
<i class="fas fa-trash"></i> 清空
</button>
<input type="file" id="historyFileInput" accept=".json" style="display: none;">
</div>
<p class="data-info">历史记录: <span id="history-count">0</span></p>
</div>
<div class="data-control-group">
<h3>全部数据</h3>
<div class="control-buttons">
<button class="control-btn" id="exportAllDataBtn" title="导出所有数据">
<i class="fas fa-download"></i> 导出
</button>
<button class="control-btn" id="importAllDataBtn" title="导入所有数据">
<i class="fas fa-upload"></i> 导入
</button>
<button class="control-btn clear-btn" id="clearAllDataBtn" title="清空所有数据">
<i class="fas fa-trash"></i> 清空
</button>
<input type="file" id="allDataFileInput" accept=".json" style="display: none;">
</div>
</div>
</div>
</div>
</main>
<footer class="now-playing-bar">
<div class="song-info-bar">
<img id="bar-album-art" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
<div>
<h3 id="bar-song-title">--</h3>
<p id="bar-song-artist">--</p>
</div>
<i class="action-btn fav-btn far fa-heart" id="bar-fav-btn" title="添加到我的收藏"></i>
</div>
<div class="player-controls">
<div class="control-buttons">
<button class="control-btn" id="shuffleBtn" title="随机"><i class="fas fa-random"></i></button>
<button class="control-btn" id="prevBtn" title="上一曲"><i class="fas fa-backward-step"></i></button>
<button id="playPauseBtn" title="播放"><i class="fas fa-play"></i></button>
<button class="control-btn" id="nextBtn" title="下一曲"><i class="fas fa-forward-step"></i></button>
<button class="control-btn" id="repeatBtn" title="循环"><i class="fas fa-redo"></i></button>
</div>
<div class="progress-area">
<span class="time-display" id="currentTime">0:00</span>
<div class="progress-bar" id="progressBar">
<div class="progress" id="progress"></div>
</div>
<span class="time-display" id="totalDuration">0:00</span>
</div>
</div>
<div class="extra-controls">
<div class="volume-area"><i class="fas fa-volume-down"></i><input type="range" id="volumeSlider" min="0"
max="1" step="0.01" value="0.8"></div>
</div>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// [] IndexedDB 帮助对象
const idbHelper = {
db: null,
init() {
return new Promise((resolve, reject) => {
const request = indexedDB.open("musicDB", 1);
request.onupgradeneeded = (event) => {
this.db = event.target.result;
if (!this.db.objectStoreNames.contains('songs')) {
this.db.createObjectStore('songs', { keyPath: 'id' });
}
};
request.onsuccess = (event) => {
this.db = event.target.result;
resolve(this.db);
};
request.onerror = (event) => reject("IndexedDB error: " + event.target.errorCode);
});
},
addSong(song) {
return new Promise((resolve, reject) => {
const transaction = this.db.transaction(['songs'], 'readwrite');
const store = transaction.objectStore('songs');
const request = store.put(song);
request.onsuccess = () => resolve();
request.onerror = (event) => reject(event.target.error);
});
},
getSongs() {
return new Promise((resolve, reject) => {
const transaction = this.db.transaction(['songs'], 'readonly');
const store = transaction.objectStore('songs');
const request = store.getAll();
request.onsuccess = () => resolve(request.result);
request.onerror = (event) => reject(event.target.error);
});
},
deleteSong(id) {
return new Promise((resolve, reject) => {
const transaction = this.db.transaction(['songs'], 'readwrite');
const store = transaction.objectStore('songs');
const request = store.delete(id);
request.onsuccess = () => resolve();
request.onerror = (event) => reject(event.target.error);
});
},
};
const dom = {
audioPlayer: document.getElementById('audioPlayer'),
themeToggle: document.getElementById('themeToggle'),
mainContent: document.querySelector('.main-content'),
songListContainer: document.getElementById('song-list-container'),
favouritesListContainer: document.getElementById('favourites-list-container'),
historyListContainer: document.getElementById('history-list-container'),
localListContainer: document.getElementById('local-list-container'), //
paginationDiscover: document.getElementById('pagination-discover'),
paginationFavourites: document.getElementById('pagination-favourites'),
paginationHistory: document.getElementById('pagination-history'),
paginationLocal: document.getElementById('pagination-local'), //
searchInput: document.getElementById('searchInput'),
loadOnlineBtn: document.getElementById('loadOnlineBtn'),
addLocalFilesBtn: document.getElementById('addLocalFilesBtn'),
localFileInput: document.getElementById('localFileInput'), //
mobileMenuBtn: document.getElementById('mobileMenuBtn'),
sidebarOverlay: document.getElementById('sidebarOverlay'),
sidebar: document.getElementById('sidebar'),
barAlbumArt: document.getElementById('bar-album-art'),
barSongTitle: document.getElementById('bar-song-title'),
barSongArtist: document.getElementById('bar-song-artist'),
barFavBtn: document.getElementById('bar-fav-btn'),
playPauseBtn: document.getElementById('playPauseBtn'),
prevBtn: document.getElementById('prevBtn'),
nextBtn: document.getElementById('nextBtn'),
shuffleBtn: document.getElementById('shuffleBtn'),
repeatBtn: document.getElementById('repeatBtn'),
currentTime: document.getElementById('currentTime'),
totalDuration: document.getElementById('totalDuration'),
progressBar: document.getElementById('progressBar'),
progress: document.getElementById('progress'),
volumeSlider: document.getElementById('volumeSlider'),
statsTotalPlays: document.getElementById('stats-total-plays'),
statsUniqueTracks: document.getElementById('stats-unique-tracks'),
statsTopTracks: document.getElementById('stats-top-tracks'),
statsTopArtists: document.getElementById('stats-top-artists'),
// 数据管理相关DOM元素
exportFavouritesBtn: document.getElementById('exportFavouritesBtn'),
importFavouritesBtn: document.getElementById('importFavouritesBtn'),
favouritesFileInput: document.getElementById('favouritesFileInput'),
exportHistoryBtn: document.getElementById('exportHistoryBtn'),
importHistoryBtn: document.getElementById('importHistoryBtn'),
historyFileInput: document.getElementById('historyFileInput'),
exportAllDataBtn: document.getElementById('exportAllDataBtn'),
importAllDataBtn: document.getElementById('importAllDataBtn'),
allDataFileInput: document.getElementById('allDataFileInput'),
favouritesCount: document.getElementById('favourites-count'),
historyCount: document.getElementById('history-count'),
// 清空按钮相关DOM元素
clearFavouritesBtn: document.getElementById('clearFavouritesBtn'),
clearHistoryBtn: document.getElementById('clearHistoryBtn'),
clearAllDataBtn: document.getElementById('clearAllDataBtn'),
// 登录状态相关DOM元素
loginStatus: document.getElementById('loginStatus'),
loginStatusText: document.getElementById('loginStatusText'),
};
const API = {
getList: async (keyword) => {
const url = \https://music-api.gdstudio.xyz/api.php?types=search&source=netease,kuwo&name=\${encodeURIComponent(keyword)}&count=100\;
const response = await fetch(url);
if (!response.ok) throw new Error('API request failed');
const data = await response.json();
if (!Array.isArray(data)) throw new Error('Invalid API response');
return data.map(song => ({
id: \\${song.source}_\${song.id}\, name: song.name,
artists: [{ name: song.artist.join(' / ') }], album: song.album || '未知专辑',
source: song.source, lyricid: song.lyricid,
pic: \https://picsum.photos/400/400?random=\${encodeURIComponent(song.name)}\
}));
},
getSongUrl: (song) => \https://music-api.gdstudio.xyz/api.php?types=url&id=\${song.id.split('_')[1]}&source=\${song.source}&br=320000\
};
const state = {
discoverPlaylist: [], localPlaylist: [], currentPlaylist: [], currentTrackIndex: -1,
isPlaying: false, isShuffle: false, repeatMode: 'none',
history: [], favourites: [], itemsPerPage: 20,
pagination: { discover: 1, favourites: 1, history: 1, local: 1 },
keywords: ['热门', '华语', '流行', '摇滚', '民谣', '电子', '说唱', '经典老歌', '刀郞', '张学友', '刘德华', '宋祖英', '王二妮', 'Beyond', '纯音乐', 'DJ', 'ACG'],
lastKeyword: null, currentBlobUrl: null,
savedPlaylists: [], currentPlaylistId: null, // 歌单相关状态
};
async function init() {
try {
await idbHelper.init();
loadStateFromLocalStorage();
setupEventListeners();
await loadLocalSongs(); // 先加载本地歌曲
renderAllViews();
displaySavedPlaylists(); // 显示保存的歌单
showView('discover-view');
fetchOnlineMusic();
initTouchFeatures(); // 初始化触摸功能
initLoginStatus(); // 初始化登录状态显示
} catch (error) {
console.error("初始化失败:", error);
alert("无法初始化数据库，本地功能将不可用。");
}
}
// 清空收藏数据
function clearFavourites() {
console.log('clearFavourites 函数被调用');
if (confirm('确定要清空所有收藏数据吗？此操作不可恢复！')) {
console.log('用户确认清空收藏数据');
state.favourites = [];
saveStateToLocalStorage();
renderFavourites();
updateAndRenderStats();
alert('收藏数据已清空');
} else {
console.log('用户取消清空收藏数据');
}
}
// 清空播放历史
function clearHistory() {
console.log('clearHistory 函数被调用');
if (confirm('确定要清空所有播放历史吗？此操作不可恢复！')) {
console.log('用户确认清空播放历史');
state.history = [];
saveStateToLocalStorage();
renderHistory();
updateAndRenderStats();
alert('播放历史已清空');
} else {
console.log('用户取消清空播放历史');
}
}
// 清空所有数据
function clearAllData() {
console.log('clearAllData 函数被调用');
if (confirm('确定要清空所有数据吗？包括收藏、播放历史、歌单等，此操作不可恢复！')) {
console.log('用户确认清空所有数据');
state.favourites = [];
state.history = [];
state.savedPlaylists = [];
saveStateToLocalStorage();
renderFavourites();
renderHistory();
updateAndRenderStats();
// 清空歌单显示
const savedPlaylists = document.getElementById('savedPlaylists');
if (savedPlaylists) {
savedPlaylists.innerHTML = '';
}
alert('所有数据已清空');
} else {
console.log('用户取消清空所有数据');
}
}
function setupEventListeners() {
document.querySelectorAll('.nav-link').forEach(link => link.addEventListener('click', e => { e.preventDefault(); showView(e.currentTarget.dataset.view); }));
dom.themeToggle.addEventListener('click', () => {
const isLight = document.body.classList.toggle('light-mode');
document.body.classList.toggle('dark-mode', !isLight);
localStorage.setItem('theme', isLight ? 'light' : 'dark');
});
dom.searchInput.addEventListener('keypress', e => { if (e.key === 'Enter' && e.target.value.trim()) fetchAndDisplaySearchResults(e.target.value.trim()); });
dom.loadOnlineBtn.addEventListener('click', () => fetchOnlineMusic());
dom.addLocalFilesBtn.addEventListener('click', () => dom.localFileInput.click());
dom.localFileInput.addEventListener('change', processLocalFiles);
dom.playPauseBtn.addEventListener('click', togglePlayPause);
dom.barFavBtn.addEventListener('click', () => { if (dom.barFavBtn.dataset.songId) toggleFavourite(dom.barFavBtn.dataset.songId); });
dom.nextBtn.addEventListener('click', playNext);
dom.prevBtn.addEventListener('click', playPrevious);
dom.shuffleBtn.addEventListener('click', toggleShuffle);
dom.repeatBtn.addEventListener('click', toggleRepeat);
dom.volumeSlider.addEventListener('input', e => dom.audioPlayer.volume = e.target.value);
dom.progressBar.addEventListener('click', seek);
dom.audioPlayer.addEventListener('timeupdate', updateProgress);
dom.audioPlayer.addEventListener('loadedmetadata', () => dom.totalDuration.textContent = formatTime(dom.audioPlayer.duration));
dom.audioPlayer.addEventListener('ended', handleSongEnd);
dom.audioPlayer.addEventListener('play', () => updatePlayPauseIcon(true));
dom.audioPlayer.addEventListener('pause', () => updatePlayPauseIcon(false));
dom.mainContent.addEventListener('click', handleMainContentClick);
// 移动端菜单事件监听器
dom.mobileMenuBtn.addEventListener('click', toggleMobileMenu);
dom.sidebarOverlay.addEventListener('click', closeMobileMenu);
dom.sidebar.addEventListener('click', (e) => {
if (e.target.closest('.nav-link')) {
closeMobileMenu();
}
});
// 数据管理事件监听器
dom.exportFavouritesBtn.addEventListener('click', exportFavourites);
dom.importFavouritesBtn.addEventListener('click', () => dom.favouritesFileInput.click());
dom.favouritesFileInput.addEventListener('change', (e) => {
if (e.target.files[0]) importData(e.target.files[0], 'favourites');
});
dom.exportHistoryBtn.addEventListener('click', exportHistory);
dom.importHistoryBtn.addEventListener('click', () => dom.historyFileInput.click());
dom.historyFileInput.addEventListener('change', (e) => {
if (e.target.files[0]) importData(e.target.files[0], 'history');
});
dom.exportAllDataBtn.addEventListener('click', exportAllData);
dom.importAllDataBtn.addEventListener('click', () => dom.allDataFileInput.click());
dom.allDataFileInput.addEventListener('change', (e) => {
if (e.target.files[0]) importData(e.target.files[0], 'all');
});
// 清空按钮事件监听器 - 使用事件委托
document.addEventListener('click', function(e) {
if (e.target && e.target.id === 'clearFavouritesBtn') {
console.log('清空收藏按钮被点击');
clearFavourites();
} else if (e.target && e.target.id === 'clearHistoryBtn') {
console.log('清空历史按钮被点击');
clearHistory();
} else if (e.target && e.target.id === 'clearAllDataBtn') {
console.log('清空数据按钮被点击');
clearAllData();
}
});
}
function handleMainContentClick(e) {
const songItem = e.target.closest('.song-item');
const pageBtn = e.target.closest('.page-btn');
const actionBtn = e.target.closest('.action-btn');
if (actionBtn) {
const songId = actionBtn.dataset.songId;
const allSongs = [...state.discoverPlaylist, ...state.localPlaylist, ...state.history, ...state.favourites];
const uniqueSongs = Array.from(new Map(allSongs.map(item => [item.id, item])).values());
const song = uniqueSongs.find(s => s.id.toString() === songId.toString());
if (actionBtn.classList.contains('fav-btn')) { toggleFavourite(songId); return; }
if (actionBtn.classList.contains('download-btn')) { downloadSong(song, actionBtn); return; }
if (actionBtn.classList.contains('delete-btn')) { deleteLocalSong(songId); return; }
}
if (songItem) {
const context = songItem.dataset.context;
const index = parseInt(songItem.dataset.index, 10);
state.currentPlaylist = getPlaylistByContext(context);
playSong(index);
return;
}
if (pageBtn && !pageBtn.disabled) {
const context = pageBtn.parentElement.dataset.context;
state.pagination[context] = parseInt(pageBtn.dataset.page, 10);
renderViewByContext(context);
}
}
function getStatsTracksPlaylist() {
// 从播放历史中统计歌曲播放次数
const trackCounts = state.history.reduce((acc, song) => {
acc[song.id] = (acc[song.id] || { ...song, count: 0 });
acc[song.id].count++;
return acc;
}, {});
// 返回按播放次数排序的歌曲列表，确保与渲染时的顺序完全一致
return Object.values(trackCounts).sort((a, b) => b.count - a.count).slice(0, 20);
}
function getPlaylistByContext(context) {
switch (context) {
case 'discover': return state.discoverPlaylist;
case 'favourites': return state.favourites;
case 'history': return state.history;
case 'local': return state.localPlaylist;
case 'stats-tracks': return getStatsTracksPlaylist();
default: return [];
}
}
function renderViewByContext(context) {
const playlist = getPlaylistByContext(context);
const container = getListContainerByContext(context);
renderPlaylist(playlist, container, context);
}
function showView(viewId) {
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
document.getElementById(viewId)?.classList.add('active');
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
document.querySelector(\.nav-link[data-view="\${viewId}"]\)?.classList.add('active');
if (viewId === 'local-view') {
renderPlaylist(state.localPlaylist, dom.localListContainer, 'local');
}
}
function renderAllViews() {
renderPlaylist(state.discoverPlaylist, dom.songListContainer, 'discover');
renderPlaylist(state.localPlaylist, dom.localListContainer, 'local');
renderFavourites();
renderHistory();
updateAndRenderStats();
}
function getListContainerByContext(context) {
switch (context) {
case 'discover': return dom.songListContainer;
case 'favourites': return dom.favouritesListContainer;
case 'history': return dom.historyListContainer;
case 'local': return dom.localListContainer;
default: return null;
}
}
function renderPlaylist(fullPlaylist, container, context) {
const currentPage = state.pagination[context] || 1;
const totalItems = fullPlaylist.length;
if (!container) return;
if (totalItems === 0) {
container.innerHTML = \<p style="padding: 15px;">列表为空。</p>\;
getPaginationContainer(context).innerHTML = '';
return;
}
const totalPages = Math.ceil(totalItems / state.itemsPerPage);
const startIndex = (currentPage - 1) * state.itemsPerPage;
const endIndex = startIndex + state.itemsPerPage;
const paginatedItems = fullPlaylist.slice(startIndex, endIndex);
// 检查是否为移动端
const isMobile = window.innerWidth <= 768;
let header = \`<div class="song-list-header">
<span>#</span><span>歌曲</span>\${isMobile ? '' : '<span>歌手</span><span>专辑</span>'}<span></span><span></span>
</div>\`;
container.innerHTML = header + paginatedItems.map((song, index) => {
const originalIndex = startIndex + index;
const isLocal = context === 'local';
const actionIcon = isLocal
? \<i class="action-btn delete-btn fas fa-trash" data-song-id="\${song.id}" title="从本地库删除"></i>\
: \<i class="action-btn download-btn fas fa-download" data-song-id="\${song.id}" title="下载到本地库"></i>\;
return \`
<div class="song-item" data-index="\${originalIndex}" data-context="\${context}">
<span class="song-index">\${originalIndex + 1}</span>
<div class="song-title">
<span>\${song.name}\${isMobile ? \<br><small style="color: var(--text-color-secondary); font-weight: normal;">\${song.artists.map(a => a.name).join(' / ')}</small>\ : ''}</span>
<span class="error-msg" id="error-\${context}-\${song.id}"></span>
</div>
\${isMobile ? '' : \<span>\${song.artists.map(a => a.name).join(' / ')}</span><span>\${song.album}</span>\}
<i class="action-btn fav-btn \${state.favourites.some(f => f.id === song.id) ? 'fas fa-heart favourited' : 'far fa-heart'}" data-song-id="\${song.id}"></i>
\${actionIcon}
</div>\`}).join('');
renderPagination(totalPages, currentPage, context);
updatePlaylistHighlight();
}
function renderPagination(totalPages, currentPage, context) {
const container = getPaginationContainer(context);
if (!container || totalPages <= 1) { if (container) container.innerHTML = ''; return; }
let html = \<button class="page-btn" data-page="\${currentPage - 1}" \${currentPage === 1 ? 'disabled' : ''}>«</button>\;
let startPage = Math.max(1, currentPage - 2), endPage = Math.min(totalPages, currentPage + 2);
if (startPage > 1) html += \<button class="page-btn" data-page="1">1</button>\${startPage > 2 ? '<span>...</span>' : ''}\;
for (let i = startPage; i <= endPage; i++) html += \<button class="page-btn \${i === currentPage ? 'active' : ''}" data-page="\${i}">\${i}</button>\;
if (endPage < totalPages) html += \\${endPage < totalPages - 1 ? '<span>...</span>' : ''}<button class="page-btn" data-page="\${totalPages}">\${totalPages}</button>\;
html += \<button class="page-btn" data-page="\${currentPage + 1}" \${currentPage === totalPages ? 'disabled' : ''}>»</button>\;
container.innerHTML = html;
container.dataset.context = context;
}
function getPaginationContainer(context) {
switch (context) {
case 'discover': return dom.paginationDiscover;
case 'favourites': return dom.paginationFavourites;
case 'history': return dom.paginationHistory;
case 'local': return dom.paginationLocal;
default: return null;
}
}
function renderFavourites()