script.js

// 缓存图床 Logo
const imageCache = new Map();
function preloadImages(urls) {
    urls.forEach(url => {
        if (!imageCache.has(url)) {
            const img = new Image();
            img.src = url;
            img.onload = () => imageCache.set(url, img);
            img.onerror = () => console.warn(`Logo 加载失败: ${url}`);
        }
    });
}

// 调试信息显示
let debugTimer;
function showDebugInfo(message) {
    const debugEl = document.getElementById('debugInfo');
    debugEl.textContent = message;
    clearTimeout(debugTimer);
    debugTimer = setTimeout(() => debugEl.textContent = '', 5000);
}

// 实时时钟
function updateTime() {
    const now = new Date();
    document.getElementById('currentTime').textContent = 
        `${now.getHours().toString().padStart(2, '0')}:` +
        `${now.getMinutes().toString().padStart(2, '0')}:` +
        `${now.getSeconds().toString().padStart(2, '0')}`;
}
setInterval(updateTime, 1000);
updateTime();

// 获取天气
async function getWeather() {
    const cacheKey = 'weather_data';
    const cacheTime = 3600 * 1000;
    const cached = localStorage.getItem(cacheKey);
    if (cached) {
        const { data, timestamp } = JSON.parse(cached);
        if (Date.now() - timestamp < cacheTime) {
            renderWeather(data);
            return;
        }
    }
    try {
        const response = await retryFetch('https://api.kxzjoker.cn/api/Weather');
        const data = await response.json();
        if (data.code !== 200) throw new Error('天气获取失败');
        localStorage.setItem(cacheKey, JSON.stringify({ data, timestamp: Date.now() }));
        renderWeather(data);
    } catch (error) {
        renderWeather(null);
        showDebugInfo('欢迎访问本服务');
    }
}

function renderWeather(data) {
    const widget = document.getElementById('weatherWidget');
    widget.innerHTML = data ? `🌤️ ${data.data.tianqi.temperature}°C` : `🌤️ 未知天气`;
    if (data) showDebugInfo(`👏欢迎来自${data.data.ipdata.info.split('-')[0]}的用户`);
}

// 随机文案
async function getRandomQuote() {
    const cacheKey = 'random_quote';
    const cacheTime = 3600 * 1000;
    const cached = localStorage.getItem(cacheKey);
    if (cached) {
        const { text, timestamp } = JSON.parse(cached);
        if (Date.now() - timestamp < cacheTime) {
            document.getElementById('random-quote').textContent = text;
            return;
        }
    }
    try {
        const response = await fetch('https://api.suyanw.cn/api/weimei.php?type=json');
        const data = await response.json();
        const text = data.text || '生活就像魔法，总有惊喜等着你！';
        localStorage.setItem(cacheKey, JSON.stringify({ text, timestamp: Date.now() }));
        document.getElementById('random-quote').textContent = text;
    } catch (error) {
        document.getElementById('random-quote').textContent = '生活就像魔法，总有惊喜等着你！';
    }
}
setInterval(getRandomQuote, 30000);
getRandomQuote();

// 平台数据
const platforms = [
    { name: '抖音', url: 'https://www.douyin.com', logo: 'https://img.zlee.de/file/logo图片/1747377427291_dy.png' },
    { name: '快手', url: 'https://www.kuaishou.com', logo: 'https://img.zlee.de/file/logo图片/1747377484677_OIP-C.png' },
    { name: '火山视频', url: 'https://www.huoshan.com', logo: 'https://img.zlee.de/file/logo图片/1747377480732_hssp.png' },
    { name: '西瓜视频', url: 'https://www.ixigua.com', logo: 'https://img.zlee.de/file/logo图片/1747377479737_xgsp-black.png' },
    { name: '皮皮虾', url: 'https://www.pipix.com', logo: 'https://img.zlee.de/file/logo图片/1747377485180_ppx.png' },
    { name: '秒拍', url: 'https://www.miaopai.com', logo: 'https://img.zlee.de/file/logo图片/1747377885467_mp (1).png' },
    { name: '头条视频', url: 'https://www.toutiao.com', logo: 'https://img.zlee.de/file/logo图片/1747377883945_ttsp.png' },
    { name: '腾讯微视', url: 'https://weishi.qq.com', logo: 'https://img.zlee.de/file/logo图片/1747377891436_腾讯微视.png' },
    { name: '美图秀秀', url: 'https://www.meitu.com', logo: 'https://img.zlee.de/file/logo图片/1747377886033_mtxx.png' },
    { name: '美拍', url: 'https://www.meipai.com', logo: 'https://img.zlee.de/file/logo图片/1747377887635_mp.png' },
    { name: '微博', url: 'https://weibo.com', logo: 'https://img.zlee.de/file/logo图片/1747377888691_wb.png' },
    { name: '小红书', url: 'https://www.xiaohongshu.com', logo: 'https://img.zlee.de/file/logo图片/1747377889452_xhs.png' },
    { name: '网易云', url: 'https://music.163.com', logo: 'https://img.zlee.de/file/logo图片/1747377894287_wyy.png' }
];

// 渲染平台列表
function renderPlatforms() {
    const list = document.querySelector('.platform-list');
    list.innerHTML = platforms.map(p => `
        <a href="${p.url}" target="_blank" rel="noopener noreferrer" class="platform-item" aria-label="${p.name}" role="listitem" title="访问${p.name}">
            <img src="${p.logo}" alt="${p.name}图标" class="platform-icon" loading="lazy" onerror="this.src='assets/icons/fallback.png'">
            ${p.name}
            <span class="platform-tooltip">${p.name}</span>
            <span id="platform-desc-${p.name.replace(/\s/g, '-')}" class="sr-only">${p.name}官方网站</span>
        </a>
    `).join('');
    validatePlatforms();
    // 添加键盘导航和 Logo 预览事件
    document.querySelectorAll('.platform-item').forEach(item => {
        const img = item.querySelector('.platform-icon');
        img.addEventListener('click', e => {
            e.preventDefault();
            showFullImage(img.src);
        });
    });
}

// 校验平台链接和图标
function validatePlatforms() {
    const items = document.querySelectorAll('.platform-item');
    items.forEach((item, index) => {
        const expected = platforms[index];
        if (item.href !== expected.url || item.querySelector('img').src !== expected.logo) {
            console.warn(`平台错误: ${expected.name} (URL: ${item.href}, Logo: ${item.querySelector('img').src})`);
            showDebugInfo(`警告: ${expected.name} 配置可能错误`);
        }
    });
}

// URL提取
function extractURL(text) {
    try {
        const urlRegex = /(https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*))/g;
        const matches = text.match(urlRegex);
        return matches ? matches[0] : null;
    } catch (e) {
        console.error('URL提取错误:', e);
        return null;
    }
}

// 剪贴板自动识别
async function checkClipboard() {
    try {
        if (!navigator.clipboard) return;
        const text = await navigator.clipboard.readText();
        const url = extractURL(text);
        if (url) {
            const input = document.getElementById('urlInput');
            if (!input.value) {
                input.value = url;
                showAlert('📋 已自动填充剪贴板链接！');
            }
        }
    } catch (error) {
        console.warn('剪贴板读取失败:', error);
    }
}

// 解析内容
let isParsing = false;
async function parseContent() {
    if (isParsing) return;
    isParsing = true;
    const parseBtn = document.querySelector('.parse-btn');
    parseBtn.disabled = true;
    parseBtn.classList.add('parsing');
    parseBtn.setAttribute('aria-busy', 'true');
    showDebugInfo('开始解析流程...');
    try {
        const input = document.getElementById('urlInput');
        if (!input) throw new Error('找不到输入框元素');
        const url = extractURL(input.value);
        showDebugInfo(`提取到URL: ${url || '无'}`);
        if (!url) {
            showAlert('🚨 请输入有效的链接哦～ (´•̥ ̯ •̥`)');
            return;
        }
        toggleLoading(true);
        showDebugInfo(`正在解析中: ${url}`);
        let data, response;
        try {
            const apiUrl1 = `https://api.kxzjoker.cn/api/jiexi_video_2?url=${encodeURIComponent(url)}`;
            response = await retryFetch(apiUrl1);
            data = await response.json();
        } catch (error) {
            showDebugInfo('主接口失败，尝试备用接口...');
            const apiUrl2 = `https://api.kxzjoker.cn/api/jiexi_video?url=${encodeURIComponent(url)}`;
            response = await retryFetch(apiUrl2);
            data = await response.json();
        }
        showDebugInfo(`收到响应状态: ${response.status}`);
        if (!response.ok) {
            throw new Error(`API请求失败: ${response.status} ${response.statusText}`);
        }
        if (!data || (data.success !== 200 && data.success !== true)) {
            throw new Error('API返回数据格式异常');
        }
        renderContent(data.data);
        saveHistory(url, data.data.title || '未命名');
        input.value = '';
        showDebugInfo('内容渲染完成');
    } catch (error) {
        console.error('解析流程错误:', error);
        showDebugInfo(`错误: ${error.message}`);
        const message = error.message.includes('API') ? '❌ 解析失败，服务器可能繁忙' :
                       error.message.includes('URL') ? '❌ 无效的链接格式' : '❌ 发生错误，请重试';
        showAlert(message);
    } finally {
        toggleLoading(false);
        parseBtn.disabled = false;
        parseBtn.classList.remove('parsing');
        parseBtn.setAttribute('aria-busy', 'false');
        isParsing = false;
    }
}

// 渲染内容
function renderContent(data) {
    const contentBox = document.getElementById('contentBox');
    if (!contentBox) throw new Error('找不到内容容器');
    contentBox.innerHTML = '';
    try {
        if (data.images) {
            renderImages(contentBox, data);
        } else if (data.video_url) {
            renderVideo(contentBox, data);
        }
        contentBox.style.opacity = 1;
    } catch (e) {
        console.error('渲染错误:', e);
        showAlert('内容渲染失败，请检查数据格式');
    }
}

// 渲染图片图集
function renderImages(contentBox, data) {
    const galleryHTML = data.images.map((img, index) => `
        <div class="gallery-item" onclick="showFullImage('${img}')" role="button" aria-label="查看图片 ${index + 1}">
            <img src="${img}" alt="图集 ${index + 1}" loading="lazy" style="border-radius: 10px; width: 100%; aspect-ratio: 1/1; object-fit: cover; cursor: zoom-in;">
            <div class="image-index">${index + 1}</div>
        </div>
    `).join('');
    contentBox.innerHTML = `
        <div class="media-card">
            <h2 style="color: #9370DB; margin-bottom: 15px;">
                🖼️ ${data.title || '未命名图集'}
            </h2>
            <progress class="progress-bar" value="0" max="100" aria-label="下载进度"></progress>
            <div class="download-info" aria-live="polite"></div>
            <div style="margin-top: 15px; text-align: center;">
                <a href="#" class="download-all-btn" aria-label="打包下载图片">
                    📦 打包保存
                </a>
            </div>
            <br>
            <div style="display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
                ${galleryHTML}
            </div>
        </div>
    `;
    const downloadBtn = contentBox.querySelector('.download-all-btn');
    const progressBar = contentBox.querySelector('.progress-bar');
    const downloadInfo = contentBox.querySelector('.download-info');
    downloadBtn.addEventListener('click', async (e) => {
        e.preventDefault();
        try {
            downloadBtn.innerHTML = `<i class="spinner-icon">⏳</i> 准备中...`;
            downloadBtn.disabled = true;
            const zip = new JSZip();
            const imgFolder = zip.folder("images");
            const maxConcurrent = 4;
            let completed = 0;
            let totalBytes = 0;
            let startTime = Date.now();
            const downloadPromises = [];
            for (let i = 0; i < data.images.length; i++) {
                downloadPromises.push(async () => {
                    try {
                        const imgUrl = data.images[i];
                        const response = await fetch(imgUrl);
                        if (!response.ok) throw new Error(`图片${i+1}下载失败`);
                        const blob = await response.blob();
                        totalBytes += blob.size;
                        imgFolder.file(`image_${i+1}.${getFileExtension(imgUrl)}`, blob);
                    } catch (error) {
                        console.warn(`图片${i+1}下载失败:`, error);
                    } finally {
                        completed++;
                        const progress = Math.round((completed / data.images.length) * 100);
                        progressBar.value = progress;
                        const elapsed = (Date.now() - startTime) / 1000;
                        const speed = elapsed > 0 ? (totalBytes / elapsed / 1024).toFixed(2) : 0;
                        downloadInfo.textContent = `进度: ${progress}% 速度: ${speed} KB/s`;
                    }
                });
            }
            await Promise.all(downloadPromises.map((fn, idx) => idx < maxConcurrent ? fn() : downloadPromises[idx - maxConcurrent].then(fn)));
            const zipBlob = await zip.generateAsync({
                type: "blob",
                compression: "DEFLATE",
                compressionOptions: { level: 6 }
            });
            const cleanTitle = data.title ? data.title.replace(/[<>:"/\\|?*]/g, '') : '未命名图集';
            saveAs(zipBlob, `${cleanTitle}.zip`);
            showAlert('✅ 图片打包下载完成！');
        } catch (error) {
            console.error('打包下载失败:', error);
            showAlert('❌ 打包下载失败，请重试');
        } finally {
            downloadBtn.innerHTML = `📦 打包下载`;
            downloadBtn.disabled = false;
            progressBar.value = 0;
            downloadInfo.textContent = '';
        }
    });
}

// 渲染视频
function renderVideo(contentBox, data) {
    const cover = data.cover_url || 'https://via.placeholder.com/640x360?text=视频封面';
    contentBox.innerHTML = `
        <div class="media-card">
            <h2 style="color: #9370DB; margin-bottom: 15px;">
                🎥 ${data.video_title || '未命名视频'}
            </h2>
            <div class="video-container">
                <img src="${cover}" alt="视频封面" class="video-cover" loading="lazy">
                <video controls preload="metadata">
                    <source src="${data.video_url}" type="video/mp4">
                    您的浏览器不支持视频播放
                </video>
            </div>
            <progress class="progress-bar" value="0" max="100" aria-label="下载进度"></progress>
            <div class="download-info" aria-live="polite"></div>
            <div style="margin-top: 15px; text-align: center;">
                <a href="#" class="download-btn" aria-label="下载视频">
                    ⬇ 保存视频
                </a>
            </div>
        </div>
    `;
    const downloadBtn = contentBox.querySelector('.download-btn');
    const progressBar = contentBox.querySelector('.progress-bar');
    const downloadInfo = contentBox.querySelector('.download-info');
    downloadBtn.addEventListener('click', async (e) => {
        e.preventDefault();
        try {
            downloadBtn.innerHTML = `<i class="spinner-icon">⏳</i> 下载中...`;
            downloadBtn.disabled = true;
            const startTime = Date.now();
            let downloadedBytes = 0;
            const response = await fetch(data.download_url);
            if (!response.ok) throw new Error(`HTTP 错误！状态码: ${response.status}`);
            const contentLength = response.headers.get('content-length');
            const totalBytes = contentLength ? parseInt(contentLength) : 0;
            const reader = response.body.getReader();
            const chunks = [];
            while (true) {
                const { done, value } = await reader.read();
                if (done) break;
                chunks.push(value);
                downloadedBytes += value.length;
                if (totalBytes) {
                    const progress = Math.round((downloadedBytes / totalBytes) * 100);
                    progressBar.value = progress;
                    const elapsed = (Date.now() - startTime) / 1000;
                    const speed = elapsed > 0 ? (downloadedBytes / elapsed / 1024).toFixed(2) : 0;
                    downloadInfo.textContent = `进度: ${progress}% 速度: ${speed} KB/s`;
                }
            }
            const blob = new Blob(chunks);
            const fileName = `${data.video_title || '未命名视频'}.mp4`;
            saveAs(blob, fileName);
            showAlert('✅ 视频下载完成！');
        } catch (error) {
            console.error('下载失败:', error);
            showAlert('❌ 视频下载失败，请重试');
        } finally {
            downloadBtn.innerHTML = `⬇ 保存视频`;
            downloadBtn.disabled = false;
            progressBar.value = 0;
            downloadInfo.textContent = '';
        }
    });
}

// 显示完整图片
function showFullImage(url) {
    const overlay = document.createElement('div');
    overlay.style.cssText = `
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.8); display: flex; justify-content: center;
        align-items: center; z-index: 9999; cursor: zoom-out;
    `;
    const img = document.createElement('img');
    img.src = url;
    img.style.cssText = 'max-width: 90%; max-height: 90%; border-radius: 10px;';
    overlay.onclick = () => overlay.remove();
    overlay.appendChild(img);
    document.body.appendChild(overlay);
}

// 工具函数
function toggleLoading(show) {
    document.getElementById('loading').style.display = show ? 'block' : 'none';
}

function showAlert(message) {
    const alert = document.createElement('div');
    alert.style.cssText = `
        position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.95); padding: 15px 30px;
        border-radius: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        color: #6A5ACD; z-index: 10000;
    `;
    alert.innerHTML = message;
    document.body.appendChild(alert);
    setTimeout(() => alert.remove(), 3000);
}

function getFileExtension(url) {
    try {
        const ext = url.split('.').pop().split(/[#?]/)[0].toLowerCase();
        const validExtensions = ['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp'];
        return validExtensions.includes(ext) ? ext : 'jpg';
    } catch (e) {
        return 'jpg';
    }
}

async function retryFetch(url, options = {}, retries = 3) {
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 10000);
    try {
        const response = await fetch(url, { ...options, signal: controller.signal });
        clearTimeout(timeout);
        return response;
    } catch (error) {
        clearTimeout(timeout);
        if (retries > 1) {
            showDebugInfo(`请求失败，重试中... (${retries - 1})`);
            return retryFetch(url, options, retries - 1);
        }
        throw error;
    }
}

// 历史记录
function saveHistory(url, title) {
    const history = JSON.parse(localStorage.getItem('parse_history') || '[]');
    if (!history.some(item => item.url === url)) {
        history.unshift({ url, title });
        if (history.length > 5) history.pop();
        localStorage.setItem('parse_history', JSON.stringify(history));
    }
    renderHistory();
}

function renderHistory() {
    const historyList = document.getElementById('history-list');
    const history = JSON.parse(localStorage.getItem('parse_history') || '[]');
    historyList.innerHTML = history.map(item => `
        <div class="history-item" role="button" aria-label="重新解析 ${item.title}" onclick="reuseHistory('${item.url}')">
            <span>${item.title.slice(0, 30)}${item.title.length > 30 ? '...' : ''}</span>
            <button class="delete-history" aria-label="删除记录" onclick="deleteHistory('${item.url}', event)">×</button>
        </div>
    `).join('');
}

function deleteHistory(url, event) {
    event.stopPropagation();
    let history = JSON.parse(localStorage.getItem('parse_history') || '[]');
    history = history.filter(item => item.url !== url);
    localStorage.setItem('parse_history', JSON.stringify(history));
    renderHistory();
}

function reuseHistory(url) {
    document.getElementById('urlInput').value = url;
    parseContent();
}

// 主题切换
function initTheme() {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const theme = localStorage.getItem('theme') || (prefersDark ? 'dark' : 'light');
    document.documentElement.dataset.theme = theme;
    updateThemeIcon(theme);
}

function toggleTheme() {
    const current = document.documentElement.dataset.theme;
    const newTheme = current === 'dark' ? 'light' : 'dark';
    document.documentElement.dataset.theme = newTheme;
    localStorage.setItem('theme', newTheme);
    updateThemeIcon(newTheme);
}

function updateThemeIcon(theme) {
    const icon = document.querySelector('#theme-toggle i');
    icon.textContent = theme === 'dark' ? '☀️' : '🌙';
}

// 自定义主题色
function applyThemeColor(color) {
    const colors = {
        pink: { main: '#FFA1C9', accent: '#9370DB' },
        blue: { main: '#87CEEB', accent: '#4682B4' },
        green: { main: '#98FB98', accent: '#228B22' }
    };
    const selected = colors[color] || colors.pink;
    document.documentElement.style.setProperty('--main-pink', selected.main);
    document.documentElement.style.setProperty('--deep-purple', selected.accent);
    localStorage.setItem('theme_color', color);
}

// 分享功能
function initShare() {
    document.getElementById('copy-link').addEventListener('click', async () => {
        try {
            await navigator.clipboard.writeText(window.location.href);
            showAlert('✅ 链接已复制到剪贴板！');
        } catch (error) {
            showAlert('❌ 复制失败，请手动复制！');
        }
    });
    document.querySelectorAll('.share-btn:not(#copy-link)').forEach(btn => {
        btn.addEventListener('click', () => showAlert('分享功能开发中，请复制链接分享！'));
    });
}

// 用户反馈
function initFeedback() {
    const btn = document.getElementById('feedback-btn');
    const form = document.getElementById('feedback-form');
    const closeBtn = document.getElementById('close-feedback');
    btn.addEventListener('click', () => {
        form.style.display = 'block';
    });
    closeBtn.addEventListener('click', () => {
        form.style.display = 'none';
    });
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        showAlert('✅ 反馈已提交，感谢您的支持！');
        form.style.display = 'none';
        form.reset();
    });
}

// 访客统计
function initVisitorCount() {
    let count = parseInt(localStorage.getItem('visitor_count') || '0');
    count++;
    localStorage.setItem('visitor_count', count);
    document.getElementById('visitor-count').textContent = `访客数：${count}`;
}

// 返回顶部
function initBackToTop() {
    const btn = document.querySelector('.back-to-top');
    window.addEventListener('scroll', () => {
        btn.style.display = window.scrollY > 300 ? 'block' : 'none';
    });
    btn.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
}

// 事件绑定
document.querySelector('.parse-btn').addEventListener('click', parseContent);
document.getElementById('urlInput').addEventListener('keypress', (e) => {
    if (e.key === 'Enter' || (e.ctrlKey && e.key === 'Enter')) parseContent();
});
document.getElementById('urlInput').addEventListener('focus', checkClipboard);
document.querySelector('#theme-toggle').addEventListener('click', toggleTheme);

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    // 预加载图床 Logo
    preloadImages(platforms.map(p => p.logo));
    renderPlatforms();
    initTheme();
    renderHistory();
    getWeather();
    initShare();
    initFeedback();
    initVisitorCount();
    initBackToTop();
    applyThemeColor(localStorage.getItem('theme_color') || 'pink');
    if (!window.saveAs) {
        console.warn('FileSaver.js 未加载！下载功能将不可用');
        showDebugInfo('警告：文件保存功能需要 FileSaver.js 支持');
    }
    if (!window.JSZip) {
        console.warn('JSZip 未加载！打包下载功能不可用');
        showDebugInfo('警告：打包下载需要 JSZip 库支持');
    }
});