<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片批量下载器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #4a6ee0 0%, #8a3ab9 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .content {
            padding: 30px;
        }
        
        .section {
            margin-bottom: 30px;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 12px;
            border-left: 5px solid #667eea;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        
        h2 {
            color: #2d3748;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        h3 {
            color: #4a5568;
            margin: 20px 0 15px 0;
            font-weight: 600;
        }
        
        .section-desc {
            color: #4a5568;
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        .url-format-tip {
            background: #e8f4fd;
            border: 1px solid #b8daff;
            border-radius: 8px;
            padding: 12px 15px;
            margin: 15px 0;
            font-size: 0.9em;
            color: #0c5460;
        }
        
        .url-format-tip strong {
            color: #155724;
        }
        
        .url-format-tip .highlight {
            background: #fff3cd;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Consolas', monospace;
            color: #856404;
            font-weight: bold;
        }
        
        .url-format-tip ul {
            margin: 8px 0;
            padding-left: 20px;
        }
        
        .url-format-tip li {
            margin: 5px 0;
            line-height: 1.4;
        }
        
        textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-family: 'Consolas', monospace;
            resize: vertical;
            font-size: 14px;
            transition: border-color 0.3s;
            min-height: 200px;
        }
        
        /* 新增：浅灰色大字体背景提示样式 */
        .links-input-wrapper {
            position: relative;
            width: 100%;
        }
        
        .paste-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 20px;
            color: #999;
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            background: rgba(240, 240, 240, 0.9);
            border: 2px dashed #ccc;
            border-radius: 10px;
            text-align: center;
            opacity: 0.7;
            transition: all 0.3s ease;
        }
        
        .paste-placeholder.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        textarea:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .input-hint {
            color: #718096;
            font-size: 0.85em;
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .input-hint i {
            color: #667eea;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        button {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: bold;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-success {
            background: #28a745;
            color: white;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }
        
        .progress-area {
            margin-top: 20px;
        }
        
        .progress-bar {
            width: 100%;
            height: 20px;
            background: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            width: 0%;
            transition: width 0.3s;
        }
        
        .progress-text {
            text-align: center;
            font-weight: bold;
            color: #333;
        }
        
        .log-container {
            background: #1a1a1a;
            color: #00ff00;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Consolas', monospace;
            max-height: 300px;
            overflow-y: auto;
            margin-top: 20px;
            font-size: 13px;
        }
        
        .log-line {
            margin: 5px 0;
            padding: 3px 0;
            border-bottom: 1px solid #333;
        }
        
        .success { color: #4CAF50; }
        .error { color: #f44336; }
        .info { color: #2196F3; }
        .warning { color: #FF9800; }
        
        .status {
            padding: 12px 15px;
            border-radius: 8px;
            margin: 10px 0;
            font-weight: bold;
        }
        
        .status.success { background: #e8f5e9; color: #2e7d32; border-left: 4px solid #4CAF50; }
        .status.error { background: #ffebee; color: #c62828; border-left: 4px solid #f44336; }
        .status.info { background: #e3f2fd; color: #1565c0; border-left: 4px solid #2196F3; }
        
        .setting-item {
            margin: 10px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }
        
        .footer {
            text-align: center;
            padding: 20px;
            color: #666;
            border-top: 1px solid #dee2e6;
            margin-top: 30px;
            font-size: 13px;
        }
        
        .ai-support {
            color: #667eea;
            font-weight: normal;
            font-size: 12px;
            text-decoration: none;
        }
        
        .ai-support:hover {
            color: #764ba2;
            text-decoration: underline;
        }
        
        .download-mode-info {
            background: #e3f2fd;
            padding: 12px 15px;
            border-radius: 8px;
            margin: 10px 0;
            border-left: 4px solid #2196F3;
            font-size: 14px;
        }
        
        /* 预览区域样式 */
        .preview-container {
            margin-top: 20px;
            display: none;
        }
        
        .preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .preview-scroll-wrapper {
            max-height: 280px; /* 限制高度，约两行 */
            overflow-y: auto;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            padding: 12px;
            background: #fff;
        }
        
        .preview-scroll-wrapper::-webkit-scrollbar {
            width: 8px;
        }
        
        .preview-scroll-wrapper::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        
        .preview-scroll-wrapper::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }
        
        .preview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 12px;
        }
        
        .preview-item {
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s;
            background: white;
        }
        
        .preview-item:hover {
            border-color: #667eea;
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
        }
        
        .preview-img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .preview-info {
            padding: 8px;
            text-align: center;
            overflow: hidden;
            background: #f8f9fa;
        }
        
        /* 加大图片名称字体大小 */
        .preview-name {
            font-weight: 600;
            color: #2d3748;
            font-size: 0.95em; /* 从0.85em加大到0.95em */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 4px;
        }
        
        .preview-size {
            font-size: 0.8em; /* 微调大小显示字体 */
            color: #718096;
            font-weight: 500;
        }
        
        .preview-count {
            font-size: 0.9em;
            color: #667eea;
            font-weight: bold;
            background: #e6f7ff;
            padding: 4px 10px;
            border-radius: 12px;
        }
        
        code {
            background: #f1f3f4;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.9em;
            color: #d63384;
        }
        
        @media (max-width: 768px) {
            .container {
                margin: 10px;
                border-radius: 10px;
            }
            
            .content {
                padding: 15px;
            }
            
            button {
                flex: 1;
                min-width: 150px;
            }
            
            .preview-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }
            
            .preview-name {
                font-size: 0.9em; /* 移动端字体大小 */
            }
            
            .paste-placeholder {
                font-size: 20px;
                padding: 15px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-images"></i> 图片批量下载器</h1>
            <p>高效批量下载图片，支持自动打包和预览功能</p>
        </div>
        
        <div class="content">
            <!-- 输入区域 -->
            <div class="section">
                <h2><i class="fas fa-list-ol"></i> 第一步：输入图片链接</h2>
                <p class="section-desc">请按照以下格式输入图片链接，每行一个条目。支持HTTP/HTTPS协议的所有图片链接。</p>
                
                <!-- 输入提示区域 -->
                <div class="url-format-tip">
                    <strong><i class="fas fa-lightbulb"></i> 输入格式要求：</strong>
                    <ul>
                        <li>每行一个图片链接，格式为：<span class="highlight">图片名称 图片URL</span></li>
                        <li><strong>图片名称</strong>与<strong>URL地址</strong>之间用<strong>空格或制表符</strong>分隔</li>
                        <li>图片名称不能包含特殊字符：<code>&lt; &gt; : " / \ | ? *</code></li>
                        <li>URL必须以 <code>http://</code> 或 <code>https://</code> 开头</li>
                    </ul>
                    <p style="margin: 8px 0 0 0; font-size: 0.85em;">
                        <i class="fas fa-info-circle"></i> 提示：可以使用<button class="btn-primary" onclick="loadExample()" style="padding: 4px 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; margin: 0 5px;"><i class="fas fa-book"></i>加载示例</button>按钮快速测试
                    </p>
                </div>
                
                <!-- 修改后的链接粘贴区域 -->
                <div class="links-input-wrapper">
                    <textarea id="linksInput" rows="8" placeholder=" "></textarea>
                    <div class="paste-placeholder" id="pastePlaceholder">
                        <div>
                            <i class="fas fa-paste" style="font-size: 40px; margin-bottom: 10px; display: block; color: #667eea;"></i>
                            <div style="font-size: 24px; font-weight: bold; color: #667eea; margin-bottom: 5px;">粘贴此处</div>
                            <div style="font-size: 16px; font-weight: normal; color: #666; margin-top: 5px;">
                                格式：图片名称 图片URL<br>
                                每行一个链接
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="input-hint">
                    <i class="fas fa-exclamation-circle"></i>
                    注意：图片名称将作为下载后的文件名
                </div>
                
                <div class="button-group">
                    <button class="btn-primary" onclick="loadExample()">
                        <i class="fas fa-book"></i> 加载示例
                    </button>
                    <button class="btn-secondary" onclick="clearInput()">
                        <i class="fas fa-trash"></i> 清空
                    </button>
                </div>
            </div>
            
            <!-- 设置区域 -->
            <div class="section">
                <h2><i class="fas fa-cog"></i> 第二步：下载设置</h2>
                <p class="section-desc">根据您的需求配置下载选项，自动下载和打包功能可大大提高效率。</p>
                
                <div class="setting-item">
                    <label class="checkbox-label">
                        <input type="checkbox" id="autoDownload" checked>
                        <i class="fas fa-bolt"></i> 自动下载（推荐）
                    </label>
                </div>
                
                <div class="setting-item">
                    <label class="checkbox-label">
                        <input type="checkbox" id="zipDownload" checked>
                        <i class="fas fa-file-archive"></i> 打包为ZIP文件下载
                    </label>
                </div>
                
                <div class="setting-item">
                    <label class="checkbox-label">
                        <input type="checkbox" id="showPreview">
                        <i class="fas fa-eye"></i> 显示图片预览
                    </label>
                </div>
                
                <div id="downloadModeInfo" class="download-mode-info">
                    <i class="fas fa-info-circle"></i>
                    <strong>当前模式：</strong>
                    <span id="modeText">下载完成后自动打包为ZIP文件</span>
                </div>
            </div>
            
            <!-- 控制区域 -->
            <div class="section">
                <h2><i class="fas fa-play-circle"></i> 第三步：开始下载</h2>
                <p class="section-desc">配置完成后，点击开始按钮开始批量下载。下载过程中可以实时查看进度和预览。</p>
                
                <div class="button-group">
                    <button id="startBtn" class="btn-success" onclick="startDownload()">
                        <i class="fas fa-play"></i> 开始批量下载
                    </button>
                    <button id="stopBtn" class="btn-secondary" onclick="stopDownload()" disabled>
                        <i class="fas fa-stop"></i> 停止下载
                    </button>
                </div>
                
                <div class="progress-area" id="progressArea" style="display: none;">
                    <div class="progress-text">
                        进度：<span id="currentCount">0</span>/<span id="totalCount">0</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill"></div>
                    </div>
                    <div class="progress-text">
                        状态：<span id="statusText">等待开始...</span>
                    </div>
                </div>
                
                <!-- 优化后的预览区域 -->
                <div class="preview-container" id="previewContainer">
                    <div class="preview-header">
                        <h3><i class="fas fa-image"></i> 图片预览</h3>
                        <span class="preview-count" id="previewCount">0 张图片</span>
                    </div>
                    <div class="preview-scroll-wrapper" id="previewScrollWrapper">
                        <div class="preview-grid" id="previewGrid"></div>
                    </div>
                </div>
                
                <div style="margin-top: 20px;">
                    <h3><i class="fas fa-terminal"></i> 下载日志</h3>
                    <p class="section-desc">实时显示下载状态和结果，帮助您了解下载过程。</p>
                    <div class="log-container" id="logContainer">
                        <div class="log-line info">欢迎使用图片批量下载器！</div>
                        <div class="log-line info">输入链接后点击"开始批量下载"</div>
                    </div>
                </div>
                
                <div class="download-links" id="downloadOptions" style="display: none;">
                    <h3><i class="fas fa-check-circle"></i> 下载完成</h3>
                    <div class="status success" id="finalStats">
                        共下载 <span id="finalCount">0</span> 个文件，用时 <span id="finalTime">0</span> 秒
                    </div>
                    <div class="button-group">
                        <button class="btn-success" onclick="manualDownload()" id="downloadBtn">
                            <i class="fas fa-download"></i> 手动下载
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>技术支持：<a href="https://www.funirst.com" target="_blank" class="ai-support">泛思网络·技术支持</a></p>
            <p style="margin-top: 5px; font-size: 0.85em; color: #888;">© 2026 图片批量下载器 - 本工具仅用于学习和技术交流</p>
        </div>
    </div>

    <!-- 引入JSZip库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <script>
        // 全局变量
        let isDownloading = false;
        let startTime = null;
        let timerInterval = null;
        let downloadedFiles = [];
        let totalFiles = 0;
        
        // DOM元素
        const elements = {
            linksInput: document.getElementById('linksInput'),
            pastePlaceholder: document.getElementById('pastePlaceholder'),
            startBtn: document.getElementById('startBtn'),
            stopBtn: document.getElementById('stopBtn'),
            progressArea: document.getElementById('progressArea'),
            logContainer: document.getElementById('logContainer'),
            progressFill: document.getElementById('progressFill'),
            currentCount: document.getElementById('currentCount'),
            totalCount: document.getElementById('totalCount'),
            statusText: document.getElementById('statusText'),
            downloadOptions: document.getElementById('downloadOptions'),
            finalCount: document.getElementById('finalCount'),
            finalTime: document.getElementById('finalTime'),
            finalStats: document.getElementById('finalStats'),
            downloadBtn: document.getElementById('downloadBtn'),
            modeText: document.getElementById('modeText'),
            downloadModeInfo: document.getElementById('downloadModeInfo'),
            previewContainer: document.getElementById('previewContainer'),
            previewGrid: document.getElementById('previewGrid'),
            previewCount: document.getElementById('previewCount'),
            previewScrollWrapper: document.getElementById('previewScrollWrapper')
        };
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateDownloadMode();
            
            // 监听设置变化
            document.getElementById('autoDownload').addEventListener('change', updateDownloadMode);
            document.getElementById('zipDownload').addEventListener('change', updateDownloadMode);
            document.getElementById('showPreview').addEventListener('change', function() {
                if (this.checked && downloadedFiles.length > 0) {
                    showPreviews();
                } else {
                    elements.previewContainer.style.display = 'none';
                }
            });
            
            // 监听输入框变化，控制占位符显示
            elements.linksInput.addEventListener('input', function() {
                if (this.value.trim()) {
                    elements.pastePlaceholder.classList.add('hidden');
                } else {
                    elements.pastePlaceholder.classList.remove('hidden');
                }
            });
            
            // 监听输入框聚焦事件
            elements.linksInput.addEventListener('focus', function() {
                elements.pastePlaceholder.classList.add('hidden');
            });
            
            // 监听输入框失去焦点事件
            elements.linksInput.addEventListener('blur', function() {
                if (!this.value.trim()) {
                    elements.pastePlaceholder.classList.remove('hidden');
                }
            });
        });
        
        // 更新下载模式显示
        function updateDownloadMode() {
            const autoDownload = document.getElementById('autoDownload').checked;
            const zipDownload = document.getElementById('zipDownload').checked;
            
            let mode = '';
            if (autoDownload && zipDownload) {
                mode = '下载完成后自动打包为ZIP文件';
            } else if (autoDownload && !zipDownload) {
                mode = '下载完成后自动逐个下载文件';
            } else if (!autoDownload && zipDownload) {
                mode = '下载完成后需要手动点击打包下载ZIP文件';
            } else {
                mode = '下载完成后需要手动点击下载文件';
            }
            
            elements.modeText.textContent = mode;
        }
        
        // 加载示例
        function loadExample() {
            const example = `猫咪图片 https://picsum.photos/300/200?random=1
风景照片 https://picsum.photos/300/200?random=2
可爱动物 https://picsum.photos/300/200?random=3
美丽花朵 https://picsum.photos/300/200?random=4
城市建筑 https://picsum.photos/300/200?random=5`;
            
            elements.linksInput.value = example;
            elements.pastePlaceholder.classList.add('hidden');
            addLog('已加载示例链接（5个测试图片）', 'success');
        }
        
        // 清空输入
        function clearInput() {
            elements.linksInput.value = '';
            elements.pastePlaceholder.classList.remove('hidden');
            addLog('已清空输入框', 'info');
        }
        
        // 添加日志
        function addLog(message, type = 'info') {
            const logLine = document.createElement('div');
            logLine.className = `log-line ${type}`;
            
            const timestamp = new Date().toLocaleTimeString();
            const icons = {
                success: '✅',
                error: '❌',
                warning: '⚠️',
                info: 'ℹ️'
            };
            
            logLine.innerHTML = `<span style="opacity: 0.7;">[${timestamp}]</span> ${icons[type] || ''} ${message}`;
            elements.logContainer.appendChild(logLine);
            elements.logContainer.scrollTop = elements.logContainer.scrollHeight;
        }
        
        // 开始下载
        async function startDownload() {
            console.log('开始下载函数被调用');
            
            const inputText = elements.linksInput.value.trim();
            if (!inputText) {
                addLog('请输入链接列表！', 'error');
                return;
            }
            
            // 解析链接
            const links = parseLinks(inputText);
            if (links.length === 0) {
                addLog('没有找到有效的链接！请检查格式是否正确。', 'error');
                return;
            }
            
            addLog(`找到 ${links.length} 个下载任务，开始下载...`, 'info');
            
            // 初始化状态
            downloadedFiles = [];
            isDownloading = true;
            startTime = Date.now();
            totalFiles = links.length;
            
            // 清空预览
            elements.previewGrid.innerHTML = '';
            elements.previewContainer.style.display = 'none';
            elements.previewCount.textContent = '0 张图片';
            
            // 更新UI
            updateUIForStart(links.length);
            
            // 开始计时
            startTimer();
            
            // 获取设置
            const autoDownload = document.getElementById('autoDownload').checked;
            const zipDownload = document.getElementById('zipDownload').checked;
            const showPreview = document.getElementById('showPreview').checked;
            
            // 下载文件
            const result = await downloadAllFiles(links, autoDownload, zipDownload, showPreview);
            
            // 完成下载
            finishDownload(result.successCount, result.failCount, autoDownload, zipDownload, showPreview);
        }
        
        // 解析链接
        function parseLinks(text) {
            const lines = text.split('\n');
            const links = [];
            
            for (let i = 0; i < lines.length; i++) {
                const line = lines[i].trim();
                if (!line) continue;
                
                const parts = line.split(/\s+/);
                if (parts.length >= 2) {
                    const name = parts[0];
                    const url = parts.slice(1).join(' ');
                    
                    if (url && (url.startsWith('http://') || url.startsWith('https://'))) {
                        links.push({
                            name: name,
                            url: url,
                            index: i + 1
                        });
                    }
                }
            }
            
            return links;
        }
        
        // 更新UI为开始状态
        function updateUIForStart(total) {
            elements.startBtn.disabled = true;
            elements.stopBtn.disabled = false;
            elements.progressArea.style.display = 'block';
            elements.downloadOptions.style.display = 'none';
            
            elements.totalCount.textContent = total;
            elements.currentCount.textContent = '0';
            elements.progressFill.style.width = '0%';
            elements.statusText.textContent = '开始下载...';
        }
        
        // 开始计时器
        function startTimer() {
            clearInterval(timerInterval);
            timerInterval = setInterval(() => {
                if (startTime) {
                    const elapsed = Math.floor((Date.now() - startTime) / 1000);
                    // 更新时间显示
                }
            }, 1000);
        }
        
        // 下载所有文件
        async function downloadAllFiles(links, autoDownload, zipDownload, showPreview) {
            let successCount = 0;
            let failCount = 0;
            
            for (let i = 0; i < links.length; i++) {
                if (!isDownloading) break;
                
                const item = links[i];
                const currentIndex = i + 1;
                
                // 更新进度
                updateProgress(currentIndex);
                
                // 下载单个文件
                const result = await downloadSingleFile(item, currentIndex, showPreview);
                
                if (result.success) {
                    successCount++;
                    downloadedFiles.push(result);
                    addLog(`✅ ${item.name} 下载成功`, 'success');
                    
                    // 如果启用了预览，添加预览
                    if (showPreview) {
                        addPreview(result);
                        elements.previewCount.textContent = `${successCount} 张图片`;
                    }
                    
                    // 如果启用了自动下载且未启用打包下载，立即下载单个文件
                    if (autoDownload && !zipDownload) {
                        downloadFileImmediately(result);
                    }
                } else {
                    failCount++;
                    addLog(`❌ ${item.name} 下载失败: ${result.error}`, 'error');
                }
                
                // 延迟一下
                await delay(1000);
            }
            
            return { successCount, failCount };
        }
        
        // 更新进度
        function updateProgress(current) {
            const progress = (current / totalFiles) * 100;
            elements.progressFill.style.width = `${progress}%`;
            elements.currentCount.textContent = current;
            elements.statusText.textContent = `下载中... ${current}/${totalFiles}`;
        }
        
        // 下载单个文件
        async function downloadSingleFile(item, index, showPreview) {
            try {
                console.log(`正在下载: ${item.name} (${item.url})`);
                
                // 使用fetch下载
                const response = await fetch(item.url, {
                    headers: {
                        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }
                
                const blob = await response.blob();
                
                if (blob.size < 100) {
                    throw new Error('文件太小');
                }
                
                // 获取扩展名
                const contentType = response.headers.get('content-type') || '';
                let extension = 'jpg';
                if (contentType.includes('png')) extension = 'png';
                if (contentType.includes('gif')) extension = 'gif';
                if (contentType.includes('webp')) extension = 'webp';
                
                // 清理文件名
                const cleanName = item.name.replace(/[<>:"/\\|?*]/g, '_');
                const filename = cleanName ? `${cleanName}.${extension}` : `image_${index}.${extension}`;
                
                // 创建对象URL
                const objectUrl = URL.createObjectURL(blob);
                
                // 生成预览数据URL
                let previewDataUrl = null;
                if (showPreview) {
                    previewDataUrl = await blobToDataUrl(blob);
                }
                
                return {
                    success: true,
                    name: filename,
                    blob: blob,
                    size: blob.size,
                    url: objectUrl,
                    previewUrl: previewDataUrl
                };
                
            } catch (error) {
                console.error('下载失败:', error);
                return {
                    success: false,
                    error: error.message
                };
            }
        }
        
        // blob转DataURL
        function blobToDataUrl(blob) {
            return new Promise((resolve) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    resolve(e.target.result);
                };
                reader.readAsDataURL(blob);
            });
        }
        
        // 添加预览
        function addPreview(fileInfo) {
            if (!fileInfo.previewUrl) return;
            
            const previewItem = document.createElement('div');
            previewItem.className = 'preview-item';
            
            const sizeKB = (fileInfo.size / 1024).toFixed(2);
            
            previewItem.innerHTML = `
                <img src="${fileInfo.previewUrl}" alt="${fileInfo.name}" class="preview-img">
                <div class="preview-info">
                    <div class="preview-name" title="${fileInfo.name}">${fileInfo.name.substring(0, 15)}${fileInfo.name.length > 15 ? '...' : ''}</div>
                    <div class="preview-size">${sizeKB} KB</div>
                </div>
            `;
            
            elements.previewGrid.appendChild(previewItem);
            elements.previewContainer.style.display = 'block';
        }
        
        // 显示所有预览
        function showPreviews() {
            if (downloadedFiles.length === 0) return;
            
            elements.previewGrid.innerHTML = '';
            elements.previewContainer.style.display = 'block';
            
            downloadedFiles.forEach(file => {
                if (file.previewUrl) {
                    addPreview(file);
                } else {
                    // 如果没有预览数据，重新生成
                    blobToDataUrl(file.blob).then(dataUrl => {
                        file.previewUrl = dataUrl;
                        addPreview(file);
                    });
                }
            });
            
            elements.previewCount.textContent = `${downloadedFiles.length} 张图片`;
        }
        
        // 立即下载文件
        function downloadFileImmediately(fileInfo) {
            try {
                const link = document.createElement('a');
                link.href = fileInfo.url;
                link.download = fileInfo.name;
                link.style.display = 'none';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                // 清理对象URL
                setTimeout(() => {
                    try {
                        URL.revokeObjectURL(fileInfo.url);
                    } catch (e) {
                        // 忽略错误
                    }
                }, 1000);
                
            } catch (error) {
                console.error('立即下载失败:', error);
            }
        }
        
        // 完成下载
        async function finishDownload(successCount, failCount, autoDownload, zipDownload, showPreview) {
            isDownloading = false;
            clearInterval(timerInterval);
            
            const totalTime = Math.floor((Date.now() - startTime) / 1000);
            
            addLog('='.repeat(50), 'info');
            addLog(`🎉 下载完成！成功: ${successCount}，失败: ${failCount}，用时: ${totalTime}秒`, 
                  successCount > 0 ? 'success' : 'warning');
            addLog('='.repeat(50), 'info');
            
            elements.statusText.textContent = `完成: ${successCount}成功，${failCount}失败`;
            elements.startBtn.disabled = false;
            elements.stopBtn.disabled = true;
            
            // 显示下载选项
            if (successCount > 0) {
                elements.finalCount.textContent = successCount;
                elements.finalTime.textContent = `${totalTime}秒`;
                elements.downloadOptions.style.display = 'block';
                
                // 如果启用了预览，显示预览
                if (showPreview) {
                    showPreviews();
                }
                
                // 如果启用了自动下载和打包下载，自动下载ZIP
                if (autoDownload && zipDownload && successCount > 0) {
                    addLog('正在自动打包为ZIP文件...', 'info');
                    setTimeout(() => {
                        downloadAsZip(true);
                    }, 500);
                }
                
                // 更新手动下载按钮文本
                const useZip = document.getElementById('zipDownload').checked;
                if (useZip && successCount > 1) {
                    elements.downloadBtn.innerHTML = '<i class="fas fa-file-archive"></i> 手动下载ZIP文件';
                } else {
                    elements.downloadBtn.innerHTML = '<i class="fas fa-download"></i> 手动下载文件';
                }
            }
        }
        
        // 停止下载
        function stopDownload() {
            isDownloading = false;
            clearInterval(timerInterval);
            addLog('下载已停止', 'warning');
            elements.statusText.textContent = '已停止';
            elements.startBtn.disabled = false;
            elements.stopBtn.disabled = true;
        }
        
        // 手动下载
        function manualDownload() {
            if (downloadedFiles.length === 0) {
                addLog('没有可下载的文件', 'error');
                return;
            }
            
            const useZip = document.getElementById('zipDownload').checked;
            
            if (useZip && downloadedFiles.length > 1) {
                // 打包下载
                downloadAsZip(false);
            } else {
                // 逐个下载
                downloadFilesIndividually();
            }
        }
        
        // 打包为ZIP下载
        async function downloadAsZip(autoDownload) {
            try {
                if (!autoDownload) {
                    addLog('正在创建ZIP文件...', 'info');
                    elements.downloadBtn.disabled = true;
                    elements.downloadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 打包中...';
                }
                
                // 创建JSZip实例
                const zip = new JSZip();
                
                // 添加所有文件到ZIP
                downloadedFiles.forEach((file, index) => {
                    zip.file(file.name, file.blob);
                    console.log(`添加文件到ZIP: ${file.name}`);
                });
                
                // 生成ZIP文件
                const content = await zip.generateAsync({
                    type: "blob",
                    compression: "DEFLATE",
                    compressionOptions: {
                        level: 6
                    }
                });
                
                // 创建下载链接
                const zipUrl = URL.createObjectURL(content);
                const timestamp = new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-');
                const zipFilename = `图片批量下载_${timestamp}_${downloadedFiles.length}个文件.zip`;
                
                const link = document.createElement('a');
                link.href = zipUrl;
                link.download = zipFilename;
                link.style.display = 'none';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                // 清理
                setTimeout(() => {
                    URL.revokeObjectURL(zipUrl);
                    if (!autoDownload) {
                        addLog(`✅ ZIP文件创建成功: ${zipFilename}`, 'success');
                    }
                    
                    // 清理对象URL
                    downloadedFiles.forEach(file => {
                        if (file.url && file.url.startsWith('blob:')) {
                            URL.revokeObjectURL(file.url);
                        }
                    });
                }, 100);
                
                if (autoDownload) {
                    addLog(`✅ 已自动打包下载ZIP文件: ${zipFilename}`, 'success');
                }
                
            } catch (error) {
                addLog(`❌ ZIP创建失败: ${error.message}`, 'error');
                console.error('ZIP创建错误:', error);
                
                // 如果ZIP失败，改为逐个下载
                if (!autoDownload) {
                    await downloadFilesIndividually();
                }
            } finally {
                if (!autoDownload) {
                    elements.downloadBtn.disabled = false;
                    const useZip = document.getElementById('zipDownload').checked;
                    elements.downloadBtn.innerHTML = useZip && downloadedFiles.length > 1 ? 
                        '<i class="fas fa-file-archive"></i> 手动下载ZIP文件' : 
                        '<i class="fas fa-download"></i> 手动下载文件';
                }
            }
        }
        
        // 逐个下载文件
        async function downloadFilesIndividually() {
            addLog(`开始下载 ${downloadedFiles.length} 个文件...`, 'info');
            
            for (let i = 0; i < downloadedFiles.length; i++) {
                const file = downloadedFiles[i];
                
                // 延迟防止浏览器阻止
                if (i > 0) await delay(500);
                
                const link = document.createElement('a');
                link.href = file.url;
                link.download = file.name;
                link.style.display = 'none';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                addLog(`已下载: ${file.name}`, 'success');
            }
            
            addLog('所有文件下载完成！', 'success');
        }
        
        // 辅助函数
        function delay(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }
        
        // 页面关闭提示
        window.addEventListener('beforeunload', function(e) {
            if (isDownloading) {
                e.preventDefault();
                e.returnValue = '下载正在进行中，确定要离开吗？';
            }
        });
        
        // 初始化
        console.log('页面加载完成');
        addLog('图片批量下载器已就绪！', 'success');
        loadExample();
    </script>
</body>
</html>