InfoGenie/frontend/60sapi/热搜榜单/网易云榜单/js/app.js

/**
 * 网易云音乐榜单 - 主应用脚本
 * 功能：获取API数据、渲染榜单、处理错误、自动切换API接口
 */

// 全局变量
const apiUrls = [];
let currentApiIndex = 0;
let rankData = null;

// DOM元素
const loadingElement = document.getElementById('loading');
const errorElement = document.getElementById('error-message');
const rankListElement = document.getElementById('rank-list');
const updateTimeElement = document.getElementById('update-time');
const retryButton = document.getElementById('retry-button');

// 初始化函数
async function init() {
    try {
        // 获取API接口列表
        await loadApiUrls();
        
        // 获取榜单数据
        await fetchRankData();
        
        // 添加音符装饰
        createMusicNotes();
    } catch (error) {
        console.error('初始化失败:', error);
        showError();
    }
}

// 加载API接口列表
async function loadApiUrls() {
    try {
        const response = await fetch('./接口集合.json');
        if (!response.ok) {
            throw new Error('无法加载API接口列表');
        }
        const data = await response.json();
        if (Array.isArray(data) && data.length > 0) {
            apiUrls.push(...data);
            console.log('已加载API接口列表:', apiUrls);
        } else {
            throw new Error('API接口列表为空');
        }
    } catch (error) {
        console.error('加载API接口列表失败:', error);
        // 使用默认API
        apiUrls.push('https://60s.api.shumengya.top/v2/ncm-rank');
    }
}

// 获取榜单数据
async function fetchRankData() {
    showLoading();
    
    // 如果没有API接口，显示错误
    if (apiUrls.length === 0) {
        throw new Error('没有可用的API接口');
    }
    
    try {
        const apiUrl = apiUrls[currentApiIndex];
        const response = await fetch(apiUrl);
        
        if (!response.ok) {
            throw new Error(`API请求失败: ${response.status}`);
        }
        
        const data = await response.json();
        
        if (data.code === 200 && data.data && Array.isArray(data.data)) {
            rankData = data;
            renderRankList(data.data);
            updateLastUpdateTime(data);
            hideLoading();
        } else {
            throw new Error('API返回数据格式错误');
        }
    } catch (error) {
        console.error('获取榜单数据失败:', error);
        // 尝试切换到下一个API
        if (tryNextApi()) {
            return fetchRankData();
        } else {
            showError();
        }
    }
}

// 尝试切换到下一个API
function tryNextApi() {
    if (currentApiIndex < apiUrls.length - 1) {
        currentApiIndex++;
        console.log(`切换到下一个API: ${apiUrls[currentApiIndex]}`);
        return true;
    }
    return false;
}

// 渲染榜单列表
function renderRankList(ranks) {
    if (!Array.isArray(ranks) || ranks.length === 0) {
        showError('没有榜单数据');
        return;
    }
    
    rankListElement.innerHTML = '';
    
    ranks.forEach(rank => {
        const rankItem = document.createElement('div');
        rankItem.className = 'rank-item';
        
        // 构建榜单项HTML
        rankItem.innerHTML = `
            <div class="rank-cover">
                <img src="${rank.cover}" alt="${rank.name}" loading="lazy">
                <div class="rank-update">${rank.update_frequency || '定期更新'}</div>
            </div>
            <div class="rank-info">
                <h3 class="rank-name">${rank.name}</h3>
                <p class="rank-desc">${rank.description || '暂无描述'}</p>
                <div class="rank-meta">
                    <span class="rank-updated">更新: ${formatDate(rank.updated)}</span>
                </div>
                <a href="${rank.link}" target="_blank" class="rank-link">查看详情</a>
            </div>
        `;
        
        rankListElement.appendChild(rankItem);
    });
    
    rankListElement.style.display = 'grid';
}

// 更新最后更新时间
function updateLastUpdateTime(data) {
    if (data && data.data && data.data.length > 0) {
        const latestRank = data.data.reduce((latest, current) => {
            const latestDate = latest.updated_at || 0;
            const currentDate = current.updated_at || 0;
            return currentDate > latestDate ? current : latest;
        }, data.data[0]);
        
        if (latestRank && latestRank.updated) {
            updateTimeElement.textContent = `最近更新: ${formatDate(latestRank.updated)}`;
        } else {
            updateTimeElement.textContent = '数据已更新';
        }
    }
}

// 格式化日期
function formatDate(dateStr) {
    if (!dateStr) return '未知';
    
    try {
        const date = new Date(dateStr.replace('2025-', '2024-'));
        if (isNaN(date.getTime())) return dateStr;
        
        return date.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        }).replace(/\//g, '-');
    } catch (e) {
        return dateStr;
    }
}

// 创建音符装饰
function createMusicNotes() {
    const notesContainer = document.getElementById('music-notes-container');
    const notes = ['♪', '♫', '♬', '♩', '♭', '♮'];
    const containerWidth = window.innerWidth;
    const containerHeight = window.innerHeight;
    
    // 清空容器
    notesContainer.innerHTML = '';
    
    // 创建15个音符
    for (let i = 0; i < 15; i++) {
        const note = document.createElement('div');
        note.className = 'music-note';
        note.textContent = notes[Math.floor(Math.random() * notes.length)];
        
        // 随机位置
        const left = Math.random() * containerWidth;
        const top = Math.random() * containerHeight;
        
        // 随机动画延迟
        const delay = Math.random() * 20;
        const duration = 15 + Math.random() * 15;
        
        // 设置样式
        note.style.left = `${left}px`;
        note.style.top = `${top}px`;
        note.style.animationDelay = `${delay}s`;
        note.style.animationDuration = `${duration}s`;
        
        notesContainer.appendChild(note);
    }
}

// 显示加载中
function showLoading() {
    loadingElement.style.display = 'block';
    errorElement.style.display = 'none';
    rankListElement.style.display = 'none';
}

// 隐藏加载中
function hideLoading() {
    loadingElement.style.display = 'none';
}

// 显示错误信息
function showError(message = '加载失败，请稍后再试') {
    loadingElement.style.display = 'none';
    errorElement.querySelector('p').textContent = message;
    errorElement.style.display = 'block';
}

// 重试按钮点击事件
retryButton.addEventListener('click', () => {
    // 重置API索引
    currentApiIndex = 0;
    // 重新获取数据
    fetchRankData();
});

// 窗口大小改变时重新创建音符
window.addEventListener('resize', debounce(createMusicNotes, 300));

// 防抖函数
function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
    };
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', init);