shiyue/Mymusic3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 实现网易云音乐同步服务核心功能与UI改进

Browse Source 
添加完整的网易云音乐同步到Navidrome的功能实现，包括：
1. 新增Docker支持与相关配置文件
2. 实现歌单同步逻辑与Navidrome API集成
3. 改进前端UI界面与交互体验
4. 添加状态监控与错误处理机制
5. 实现定时同步功能与进度显示
This commit is contained in:
史悦
2026-01-12 20:03:30 +08:00
parent 89a28e1bc5
commit 50f7869a05
11 changed files with 2331 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
Netease-sync/public/app.js
View File

@@ -1,30 +1,59 @@
const API_BASE = '/api';
let playlists = [];
let pollingInterval = null;
function showError(message) {
const errorDiv = document.getElementById('errorMessage');
errorDiv.textContent = message;
errorDiv.style.display = 'block';
setTimeout(() => {
errorDiv.style.display = 'none';
}, 5000);
}
// Toast Notification System
function showToast(message, type = 'info') {
const container = document.getElementById('toast-container');
const toast = document.createElement('div');
const colors = {
info: 'bg-blue-500/80 border-blue-500/50',
success: 'bg-green-500/80 border-green-500/50',
error: 'bg-red-500/80 border-red-500/50',
warning: 'bg-yellow-500/80 border-yellow-500/50'
};
function showSuccess(message) {
const successDiv = document.getElementById('successMessage');
successDiv.textContent = message;
successDiv.style.display = 'block';
const icons = {
info: 'fa-circle-info',
success: 'fa-circle-check',
error: 'fa-circle-exclamation',
warning: 'fa-triangle-exclamation'
};
toast.className = `glass-panel ${colors[type] || colors.info} border text-white px-4 py-3 rounded-xl flex items-center gap-3 shadow-xl transform transition-all duration-300 translate-x-full opacity-0`;
toast.innerHTML = `
<i class="fa-solid ${icons[type] || icons.info}"></i>
<span class="text-sm font-medium">${message}</span>
`;
container.appendChild(toast);
// Animation in
requestAnimationFrame(() => {
toast.classList.remove('translate-x-full', 'opacity-0');
});
// Remove after delay
setTimeout(() => {
successDiv.style.display = 'none';
toast.classList.add('translate-x-full', 'opacity-0');
setTimeout(() => toast.remove(), 300);
}, 3000);
}
// Format Utilities
function formatTimestamp(timestamp) {
if (!timestamp) return '从未同步';
const date = new Date(timestamp);
const now = new Date();
const diff = now - date;
if (diff < 60000) return '刚刚';
if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`;
if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`;
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
@@ -32,98 +61,182 @@ function formatTimestamp(timestamp) {
});
}
function getStatusClass(status) {
function getStatusConfig(status) {
switch (status) {
case 'syncing':
return 'status-syncing';
return { text: '同步中', class: 'bg-yellow-500/80 text-white border-yellow-400/50 animate-pulse' };
case 'success':
return 'status-success';
return { text: '已同步', class: 'bg-green-500/80 text-white border-green-400/50' };
case 'failed':
case 'error':
return 'status-error';
return { text: '失败', class: 'bg-red-500/80 text-white border-red-400/50' };
default:
return 'status-idle';
return { text: '待同步', class: 'bg-gray-500/50 text-gray-300 border-gray-400/30' };
}
}
function getStatusText(status) {
switch (status) {
case 'syncing':
return '同步中';
case 'success':
return '同步成功';
case 'error':
return '同步失败';
default:
return '待同步';
}
}
function renderPlaylists() {
const container = document.getElementById('playlistList');
if (playlists.length === 0) {
container.innerHTML = `
<div class="empty-state">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 18V5l12-2v13"/>
<circle cx="6" cy="18" r="3"/>
<circle cx="18" cy="16" r="3"/>
</svg>
<p>还没有添加任何歌单</p>
<p>在上方输入网易云音乐歌单ID或分享链接开始同步</p>
</div>
`;
return;
}
container.innerHTML = playlists.map(playlist => `
<div class="playlist-item">
<div class="playlist-info">
<div class="playlist-name">${playlist.name}</div>
<div class="playlist-meta">
<span>🆔 ${playlist.neteaseId}</span>
<span>🎵 ${playlist.songs.length} 首歌曲</span>
<span>⏰ ${formatTimestamp(playlist.lastSyncTime)}</span>
<span class="status-badge ${getStatusClass(playlist.status)}">${getStatusText(playlist.status)}</span>
</div>
</div>
<div class="playlist-actions">
<button class="btn-sync" onclick="syncPlaylist('${playlist.id}')" ${playlist.status === 'syncing' ? 'disabled' : ''}>
${playlist.status === 'syncing' ? '<span class="spinner"></span>' : '立即同步'}
</button>
<button class="btn-delete" onclick="deletePlaylist('${playlist.id}')">删除</button>
</div>
</div>
`).join('');
}
// Core Logic
async function loadPlaylists() {
try {
const response = await fetch(`${API_BASE}/playlists`);
if (!response.ok) throw new Error('加载歌单失败');
playlists = await response.json();
const data = await response.json();
// Deep compare to avoid unnecessary re-renders if nothing changed
// For simplicity, we just check length and status of syncing items
// But to ensure progress bars update smoothly, we re-render or update existing
// Here we'll re-render for simplicity as the list is likely small
playlists = data;
updateStats();
renderPlaylists();
// Adjust polling based on activity
const anySyncing = playlists.some(p => p.status === 'syncing');
adjustPolling(anySyncing);
} catch (error) {
console.error('加载歌单失败:', error);
showError('加载歌单失败: ' + error.message);
showToast(error.message, 'error');
}
}
function adjustPolling(isActive) {
if (isActive && !pollingInterval) {
pollingInterval = setInterval(loadPlaylists, 2000);
} else if (!isActive && pollingInterval) {
clearInterval(pollingInterval);
pollingInterval = null;
// Poll infrequently when idle just in case
pollingInterval = setInterval(loadPlaylists, 10000);
} else if (!pollingInterval) {
// Default idle polling
pollingInterval = setInterval(loadPlaylists, 10000);
}
}
function updateStats() {
const total = playlists.length;
const synced = playlists.filter(p => p.status === 'success').length;
const syncing = playlists.filter(p => p.status === 'syncing').length;
const songs = playlists.reduce((acc, curr) => acc + (curr.songs?.length || 0), 0);
// Animate numbers
animateValue('stat-total', parseInt(document.getElementById('stat-total').innerText), total, 500);
animateValue('stat-synced', parseInt(document.getElementById('stat-synced').innerText), synced, 500);
animateValue('stat-songs', parseInt(document.getElementById('stat-songs').innerText), songs, 500);
animateValue('stat-syncing', parseInt(document.getElementById('stat-syncing').innerText), syncing, 500);
const statsContainer = document.getElementById('stats-container');
if (total > 0) {
statsContainer.classList.remove('hidden');
} else {
statsContainer.classList.add('hidden');
}
}
function animateValue(id, start, end, duration) {
if (start === end) return;
const obj = document.getElementById(id);
const range = end - start;
let current = start;
const increment = end > start ? 1 : -1;
const stepTime = Math.abs(Math.floor(duration / range));
const timer = setInterval(() => {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, Math.max(stepTime, 20)); // Cap speed
}
function renderPlaylists() {
const grid = document.getElementById('playlist-grid');
const emptyState = document.getElementById('empty-state');
const template = document.getElementById('playlist-card-template');
if (playlists.length === 0) {
grid.innerHTML = '';
emptyState.classList.remove('hidden');
return;
}
emptyState.classList.add('hidden');
// We want to preserve existing elements to keep animations smooth if possible
// But full re-render is safer for state consistency.
// Optimization: Diffing by ID could be done here.
grid.innerHTML = ''; // Simple clear for now
playlists.forEach(playlist => {
const clone = template.content.cloneNode(true);
const card = clone.querySelector('div'); // The root div
// Data binding
const img = clone.querySelector('.playlist-cover');
img.src = playlist.cover || 'https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg'; // Fallback image
img.alt = playlist.name;
clone.querySelector('.playlist-name').textContent = playlist.name;
clone.querySelector('.playlist-count').textContent = (playlist.songs || []).length;
clone.querySelector('.playlist-date').textContent = formatTimestamp(playlist.lastSyncTime);
clone.querySelector('.playlist-id').textContent = `ID: ${playlist.neteaseId}`;
clone.querySelector('.playlist-link').href = `https://music.163.com/#/playlist?id=${playlist.neteaseId}`;
// Status Badge
const statusConfig = getStatusConfig(playlist.status);
const badge = clone.querySelector('.playlist-status');
badge.textContent = statusConfig.text;
badge.className = `playlist-status px-2.5 py-1 rounded-full text-xs font-medium backdrop-blur-md border ${statusConfig.class}`;
// Actions
const syncBtn = clone.querySelector('.action-sync');
const deleteBtn = clone.querySelector('.action-delete');
syncBtn.onclick = () => syncPlaylist(playlist.id);
deleteBtn.onclick = () => deletePlaylist(playlist.id);
if (playlist.status === 'syncing') {
syncBtn.disabled = true;
syncBtn.classList.add('opacity-50', 'cursor-not-allowed');
syncBtn.querySelector('i').classList.add('fa-spin');
// Show Progress Overlay
const overlay = clone.querySelector('.sync-overlay');
overlay.classList.remove('translate-y-full');
clone.querySelector('.sync-message').textContent = playlist.syncMessage || '同步中...';
clone.querySelector('.sync-percent').textContent = `${playlist.syncProgress || 0}%`;
clone.querySelector('.sync-progress-bar').style.width = `${playlist.syncProgress || 0}%`;
} else {
// Hide overlay is default by CSS class
}
grid.appendChild(clone);
});
}
// Actions
async function addPlaylist() {
const input = document.getElementById('playlistInput');
const value = input.value.trim();
if (!value) {
showError('请输入歌单ID或分享链接');
showToast('请输入歌单 ID 或链接', 'warning');
return;
}
const btn = document.querySelector('button[onclick="addPlaylist()"]');
const originalIcon = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> 处理中...';
try {
const response = await fetch(`${API_BASE}/playlists`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url: value })
});
@@ -132,33 +245,36 @@ async function addPlaylist() {
throw new Error(error.error || '添加歌单失败');
}
const playlist = await response.json();
playlists.push(playlist);
renderPlaylists();
await loadPlaylists(); // Refresh list
input.value = '';
showSuccess('歌单添加成功');
showToast('歌单添加成功', 'success');
} catch (error) {
console.error('添加歌单失败:', error);
showError('添加歌单失败: ' + error.message);
showToast(error.message, 'error');
} finally {
btn.disabled = false;
btn.innerHTML = originalIcon;
}
}
async function deletePlaylist(id) {
if (!confirm('确定要删除这个歌单吗？')) return;
if (!confirm('确定要移除这个歌单吗？')) return;
try {
const response = await fetch(`${API_BASE}/playlists/${id}`, {
method: 'DELETE'
});
if (!response.ok) throw new Error('删除歌单失败');
if (!response.ok) throw new Error('删除失败');
showToast('歌单已移除', 'success');
// Optimistic update
playlists = playlists.filter(p => p.id !== id);
updateStats();
renderPlaylists();
showSuccess('歌单删除成功');
} catch (error) {
console.error('删除歌单失败:', error);
showError('删除歌单失败: ' + error.message);
showToast(error.message, 'error');
loadPlaylists(); // Revert on error
}
}
@@ -170,50 +286,19 @@ async function syncPlaylist(id) {
if (!response.ok) throw new Error('启动同步失败');
const playlist = await response.json();
const index = playlists.findIndex(p => p.id === id);
if (index !== -1) {
playlists[index] = playlist;
}
renderPlaylists();
showSuccess('同步已启动');
showToast('已启动同步任务', 'info');
loadPlaylists(); // Update UI immediately to show syncing state
} catch (error) {
console.error('启动同步失败:', error);
showError('启动同步失败: ' + error.message);
showToast(error.message, 'error');
}
}
async function updatePlaylistStatus(id) {
try {
const response = await fetch(`${API_BASE}/status/${id}`);
if (!response.ok) return;
const playlist = await response.json();
const index = playlists.findIndex(p => p.id === id);
if (index !== -1) {
playlists[index] = playlist;
renderPlaylists();
}
} catch (error) {
console.error('更新状态失败:', error);
}
}
function startStatusPolling() {
setInterval(() => {
playlists.forEach(playlist => {
if (playlist.status === 'syncing') {
updatePlaylistStatus(playlist.id);
}
});
}, 3000);
}
// Input Handler
document.getElementById('playlistInput').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addPlaylist();
}
});
loadPlaylists();
startStatusPolling();
// Initial Load
loadPlaylists();

392
Netease-sync/public/index.html
View File

@@ -1,229 +1,223 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="zh-CN" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易云音乐同步到 Navidrome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#000000">
<title>网易云音乐同步</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
netease: '#E60026',
glass: {
100: 'rgba(255, 255, 255, 0.1)',
200: 'rgba(255, 255, 255, 0.2)',
300: 'rgba(255, 255, 255, 0.3)',
}
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
}
}
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #121212;
background-image:
radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
.glass-panel {
background: rgba(30, 30, 30, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
h1 {
.glass-input {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
text-align: center;
margin-bottom: 30px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.card {
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
padding: 25px;
margin-bottom: 20px;
}
.add-playlist {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.add-playlist input {
flex: 1;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-playlist input:focus {
.glass-input:focus {
background: rgba(0, 0, 0, 0.5);
border-color: rgba(230, 0, 38, 0.5);
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 2px rgba(230, 0, 38, 0.2);
}
.add-playlist button {
padding: 12px 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.add-playlist button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02);
}
.add-playlist button:active {
transform: translateY(0);
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.playlist-list {
display: grid;
gap: 15px;
}
.playlist-item {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s;
}
.playlist-item:hover {
background: #e9ecef;
transform: translateX(5px);
}
.playlist-info {
flex: 1;
}
.playlist-name {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.playlist-meta {
display: flex;
gap: 20px;
font-size: 13px;
color: #666;
}
.playlist-meta span {
display: flex;
align-items: center;
gap: 5px;
}
.status-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.status-idle {
background: #e0e0e0;
color: #666;
}
.status-syncing {
background: #fff3cd;
color: #856404;
}
.status-success {
background: #d4edda;
color: #155724;
}
.status-error {
background: #f8d7da;
color: #721c24;
}
.playlist-actions {
display: flex;
gap: 10px;
}
.playlist-actions button {
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: all 0.2s;
}
.btn-sync {
background: #667eea;
color: white;
}
.btn-sync:hover {
background: #5568d3;
}
.btn-sync:disabled {
background: #ccc;
cursor: not-allowed;
}
.btn-delete {
background: #dc3545;
color: white;
}
.btn-delete:hover {
background: #c82333;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
}
.empty-state svg {
width: 80px;
height: 80px;
margin-bottom: 20px;
opacity: 0.5;
}
.loading {
text-align: center;
padding: 40px;
color: #666;
}
.error-message {
background: #f8d7da;
color: #721c24;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
display: none;
}
.success-message {
background: #d4edda;
color: #155724;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
display: none;
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 0.8s linear infinite;
animation: spin 1s linear infinite;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<h1>🎵 网易云音乐同步到 Navidrome</h1>
<div class="error-message" id="errorMessage"></div>
<div class="success-message" id="successMessage"></div>
<div class="card">
<div class="add-playlist">
<input type="text" id="playlistInput" placeholder="输入网易云音乐歌单ID或分享链接...">
<button onclick="addPlaylist()">添加歌单</button>
<body class="text-white custom-scrollbar selection:bg-netease selection:text-white">
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- Header -->
<header class="flex flex-col md:flex-row items-center justify-between mb-10 gap-6">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-netease to-red-700 flex items-center justify-center shadow-lg shadow-netease/30">
<i class="fa-solid fa-cloud text-xl"></i>
</div>
<div>
<h1 class="text-2xl font-bold tracking-tight">网易云音乐同步</h1>
<p class="text-gray-400 text-sm">Sync Netease Cloud Music to Navidrome</p>
</div>
</div>
<div id="playlistList" class="playlist-list">
<div class="loading">加载中...</div>
<div class="glass-panel rounded-full p-1.5 flex w-full md:w-auto max-w-md">
<input
type="text"
id="playlistInput"
placeholder="输入歌单 ID 或链接..."
class="bg-transparent border-none text-white px-4 py-2 w-full focus:outline-none placeholder-gray-500 text-sm"
>
<button
onclick="addPlaylist()"
class="bg-netease hover:bg-red-700 text-white px-6 py-2 rounded-full font-medium text-sm transition-all shadow-lg shadow-netease/20 flex items-center gap-2 whitespace-nowrap"
>
<i class="fa-solid fa-plus"></i>
<span>添加</span>
</button>
</div>
</header>
<!-- Notifications -->
<div id="toast-container" class="fixed top-6 right-6 z-50 flex flex-col gap-3 pointer-events-none"></div>
<!-- Content -->
<main>
<!-- Stats Overview -->
<div id="stats-container" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8 hidden">
<div class="glass-panel rounded-2xl p-4 flex flex-col items-center justify-center text-center">
<span class="text-3xl font-bold text-white mb-1" id="stat-total">0</span>
<span class="text-xs text-gray-400 uppercase tracking-wider">总歌单</span>
</div>
<div class="glass-panel rounded-2xl p-4 flex flex-col items-center justify-center text-center">
<span class="text-3xl font-bold text-green-400 mb-1" id="stat-synced">0</span>
<span class="text-xs text-gray-400 uppercase tracking-wider">已同步</span>
</div>
<div class="glass-panel rounded-2xl p-4 flex flex-col items-center justify-center text-center">
<span class="text-3xl font-bold text-blue-400 mb-1" id="stat-songs">0</span>
<span class="text-xs text-gray-400 uppercase tracking-wider">总歌曲</span>
</div>
<div class="glass-panel rounded-2xl p-4 flex flex-col items-center justify-center text-center">
<span class="text-3xl font-bold text-yellow-400 mb-1" id="stat-syncing">0</span>
<span class="text-xs text-gray-400 uppercase tracking-wider">同步中</span>
</div>
</div>
<!-- Empty State -->
<div id="empty-state" class="hidden text-center py-20">
<div class="w-24 h-24 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fa-solid fa-music text-4xl text-white/20"></i>
</div>
<h3 class="text-xl font-medium text-white mb-2">还没有歌单</h3>
<p class="text-gray-500 max-w-sm mx-auto">在上方输入框粘贴网易云音乐歌单链接或 ID，开始构建你的私人音乐库。</p>
</div>
<!-- Grid Layout -->
<div id="playlist-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Cards will be injected here -->
</div>
</main>
</div>
<!-- Templates -->
<template id="playlist-card-template">
<div class="glass-panel rounded-2xl overflow-hidden group hover:bg-white/5 transition-all duration-300 relative">
<!-- Cover Image & Gradient Overlay -->
<div class="aspect-square relative overflow-hidden bg-gray-800">
<img src="" alt="Cover" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 playlist-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-80 group-hover:opacity-60 transition-opacity"></div>
<!-- Status Badge -->
<div class="absolute top-3 right-3">
<span class="playlist-status px-2.5 py-1 rounded-full text-xs font-medium backdrop-blur-md bg-black/40 border border-white/10">
待同步
</span>
</div>
<!-- Action Buttons (Hover) -->
<div class="absolute inset-0 flex items-center justify-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black/40 backdrop-blur-sm">
<button class="action-sync w-12 h-12 rounded-full bg-white text-black hover:scale-110 transition-transform flex items-center justify-center shadow-xl">
<i class="fa-solid fa-rotate"></i>
</button>
<button class="action-delete w-12 h-12 rounded-full bg-red-500/80 text-white hover:bg-red-500 hover:scale-110 transition-all flex items-center justify-center shadow-xl backdrop-blur-md">
<i class="fa-solid fa-trash"></i>
</button>
</div>
<!-- Progress Bar Overlay (When Syncing) -->
<div class="sync-overlay absolute inset-x-0 bottom-0 bg-black/80 backdrop-blur-md p-4 transform translate-y-full transition-transform duration-300">
<div class="flex justify-between text-xs text-gray-300 mb-1.5">
<span class="sync-message truncate pr-2">准备中...</span>
<span class="sync-percent font-mono">0%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-1.5 overflow-hidden">
<div class="sync-progress-bar bg-netease h-1.5 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
</div>
</div>
<!-- Info Section -->
<div class="p-5">
<h3 class="playlist-name font-bold text-lg mb-1 truncate group-hover:text-netease transition-colors">歌单名称</h3>
<div class="flex items-center gap-2 text-xs text-gray-400 mb-4">
<span class="flex items-center gap-1 bg-white/5 px-2 py-0.5 rounded">
<i class="fa-solid fa-music text-[10px]"></i>
<span class="playlist-count">0</span>
</span>
<span class="playlist-date">刚刚</span>
</div>
<div class="flex items-center justify-between text-xs text-gray-500 border-t border-white/5 pt-3 mt-1">
<span class="font-mono playlist-id opacity-50">ID: 000000</span>
<a href="#" target="_blank" class="playlist-link hover:text-white transition-colors flex items-center gap-1">
打开网易云 <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i>
</a>
</div>
</div>
</div>
</div>
</template>
<script src="app.js"></script>
</body>