From 7ffafe97e778786d4f659b05e61de54d86534788 Mon Sep 17 00:00:00 2001
From: 13315423919 <13315423919@qq.com>
Date: Fri, 7 Nov 2025 09:05:36 +0800
Subject: [PATCH] Add File

---
 src/landppt/web/templates/image_gallery.html | 1580 ++++++++++++++++++
 1 file changed, 1580 insertions(+)
 create mode 100644 src/landppt/web/templates/image_gallery.html

diff --git a/src/landppt/web/templates/image_gallery.html b/src/landppt/web/templates/image_gallery.html
new file mode 100644
index 0000000..01a4c6c
--- /dev/null
+++ b/src/landppt/web/templates/image_gallery.html
@@ -0,0 +1,1580 @@
+{% extends "base.html" %}
+
+{% block title %}本地图床管理 - LandPPT{% endblock %}
+
+{% block content %}
+<div style="text-align: center; margin-bottom: 40px;">
+    <h2 style="color: #2c3e50; margin-bottom: 20px;">🖼️ 本地图床管理</h2>
+    <p style="font-size: 1.1em; color: #7f8c8d;">
+        管理和浏览您的本地图片库
+    </p>
+</div>
+
+<!-- 操作工具栏 -->
+<div class="toolbar" style="margin-bottom: 30px;">
+    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
+        <div style="display: flex; gap: 15px; align-items: center; flex-wrap: wrap;">
+            <!-- 分类筛选 -->
+            <select id="category-filter" onchange="filterImages()">
+                <option value="all">全部分类</option>
+                <option value="ai_generated">AI生成</option>
+                <option value="web_search">网络搜索</option>
+                <option value="local_storage">本地上传</option>
+            </select>
+            
+            <!-- 搜索框 -->
+            <div style="position: relative;">
+                <input type="text" id="search-input" placeholder="搜索图片..." 
+                       style="padding: 10px 40px 10px 15px; border: 2px solid #e9ecef; border-radius: 8px; width: 250px;"
+                       onkeyup="searchImages(event)">
+                <span style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #7f8c8d;">🔍</span>
+            </div>
+            
+            <!-- 排序选项 -->
+            <select id="sort-option" onchange="sortImages()">
+                <option value="created_desc">最新创建</option>
+                <option value="created_asc">最早创建</option>
+                <option value="accessed_desc">最近访问</option>
+                <option value="size_desc">文件大小↓</option>
+                <option value="size_asc">文件大小↑</option>
+            </select>
+        </div>
+        
+        <div style="display: flex; gap: 10px; align-items: center;">
+            <!-- 上传按钮 -->
+            <button onclick="showUploadModal()" class="btn btn-primary">
+                📤 上传图片
+            </button>
+
+            <!-- 批量操作 -->
+            <button onclick="toggleBatchMode()" class="btn btn-info" id="batch-mode-btn">
+                ☑️ 批量选择
+            </button>
+
+            <!-- 刷新按钮 -->
+            <button onclick="refreshGallery()" class="btn btn-success">
+                🔄 刷新
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- 批量操作工具栏 -->
+<div id="batch-toolbar" class="batch-toolbar" style="display: none; margin-bottom: 20px;">
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
+        <div>
+            <span id="selected-count">0</span> 张图片已选择
+        </div>
+        <div style="display: flex; gap: 10px;">
+            <button onclick="selectAll()" class="btn btn-info">全选</button>
+            <button onclick="clearSelection()" class="btn btn-warning">清除选择</button>
+            <button onclick="batchDelete()" class="btn btn-danger">删除选中</button>
+            <button onclick="batchDownload()" class="btn btn-success">下载选中</button>
+            <button onclick="clearAllImages()" class="btn btn-danger" style="margin-left: 20px; border: 2px solid #dc3545;">🗑️ 清空图床</button>
+        </div>
+    </div>
+</div>
+
+<!-- 图片网格 -->
+<div id="image-grid" class="image-grid">
+    <div class="loading-placeholder" style="text-align: center; padding: 60px; color: #7f8c8d;">
+        <div style="font-size: 3em; margin-bottom: 20px;">⏳</div>
+        <p>正在加载图片库...</p>
+    </div>
+</div>
+
+<!-- 分页控件 -->
+<div id="pagination" class="pagination" style="display: none; margin-top: 30px; text-align: center;">
+    <!-- 分页按钮将通过JavaScript动态生成 -->
+</div>
+
+<!-- 上传模态框 -->
+<div id="upload-modal" class="modal" style="display: none;">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3>📤 上传图片</h3>
+            <button onclick="closeUploadModal()" class="close-btn">&times;</button>
+        </div>
+        <div class="modal-body">
+            <div class="upload-area" id="upload-area"
+                 ondrop="handleDrop(event)"
+                 ondragover="handleDragOver(event)"
+                 ondragleave="handleDragLeave(event)">
+                <div class="upload-content">
+                    <div style="font-size: 3em; margin-bottom: 15px; color: #3498db;">📁</div>
+                    <p style="margin-bottom: 15px;">拖拽图片到此处或点击选择文件</p>
+                    <input type="file" id="file-input" multiple accept="image/*" onchange="handleFileSelect(event)" style="display: none;">
+                    <button onclick="document.getElementById('file-input').click()" class="btn btn-primary">选择文件</button>
+                </div>
+            </div>
+
+            <!-- 图片信息输入区域 -->
+            <div id="image-info-section" style="display: none; margin-top: 20px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background: #f9f9f9;">
+                <h4 style="margin-bottom: 15px; color: #2c3e50;">📝 图片信息</h4>
+
+                <div style="margin-bottom: 15px;">
+                    <label for="image-title" style="display: block; margin-bottom: 5px; font-weight: bold;">标题：</label>
+                    <input type="text" id="image-title" placeholder="请输入图片标题（可选）"
+                           style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
+                </div>
+
+                <div style="margin-bottom: 15px;">
+                    <label for="image-description" style="display: block; margin-bottom: 5px; font-weight: bold;">描述：</label>
+                    <textarea id="image-description" placeholder="请输入图片描述，有助于AI搜索匹配（推荐填写）"
+                              rows="3" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; resize: vertical;"></textarea>
+                </div>
+
+                <div style="margin-bottom: 15px;">
+                    <label for="image-tags" style="display: block; margin-bottom: 5px; font-weight: bold;">标签：</label>
+                    <input type="text" id="image-tags" placeholder="请输入标签，用逗号分隔（如：商务,图表,数据分析）"
+                           style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
+                    <small style="color: #666; font-size: 0.9em;">标签有助于AI智能匹配，建议添加相关关键词</small>
+                </div>
+
+                <div style="margin-bottom: 15px;">
+                    <label for="image-category" style="display: block; margin-bottom: 5px; font-weight: bold;">分类：</label>
+                    <select id="image-category" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
+                        <option value="business">商务</option>
+                        <option value="technology">技术</option>
+                        <option value="education">教育</option>
+                        <option value="design">设计</option>
+                        <option value="nature">自然</option>
+                        <option value="people">人物</option>
+                        <option value="abstract">抽象</option>
+                        <option value="other">其他</option>
+                    </select>
+                </div>
+
+                <div style="text-align: right;" class="upload-button-container">
+                    <button onclick="startUpload()" class="btn btn-success" id="start-upload-btn">
+                        🚀 开始上传
+                    </button>
+                </div>
+            </div>
+
+            <div id="upload-progress" style="display: none; margin-top: 20px;">
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progress-fill"></div>
+                </div>
+                <p id="upload-status">准备上传...</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 图片详情模态框 -->
+<div id="image-detail-modal" class="modal" style="display: none;">
+    <div class="modal-content" style="max-width: 800px;">
+        <div class="modal-header">
+            <h3 id="image-detail-title">图片详情</h3>
+            <button onclick="closeImageDetailModal()" class="close-btn">&times;</button>
+        </div>
+        <div class="modal-body">
+            <div style="display: grid; grid-template-columns: 1fr 300px; gap: 20px;">
+                <div class="image-preview">
+                    <img id="detail-image" style="width: 100%; height: auto; border-radius: 8px;">
+                </div>
+                <div class="image-info">
+                    <!-- 可编辑的图片信息 -->
+                    <div class="info-section">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+                            <h4>图片信息</h4>
+                            <button id="edit-toggle-btn" onclick="toggleEditMode()" class="btn btn-sm btn-outline">
+                                <i class="fas fa-edit"></i> 编辑
+                            </button>
+                        </div>
+
+                        <!-- 显示模式 -->
+                        <div id="info-display-mode">
+                            <div class="info-item">
+                                <label>标题:</label>
+                                <span id="display-title">-</span>
+                            </div>
+                            <div class="info-item">
+                                <label>描述:</label>
+                                <span id="display-description">-</span>
+                            </div>
+                            <div class="info-item">
+                                <label>标签:</label>
+                                <span id="display-tags">-</span>
+                            </div>
+                            <div class="info-item">
+                                <label>分类:</label>
+                                <span id="display-category">-</span>
+                            </div>
+                        </div>
+
+                        <!-- 编辑模式 -->
+                        <div id="info-edit-mode" style="display: none;">
+                            <div class="edit-item">
+                                <label for="edit-title">标题:</label>
+                                <input type="text" id="edit-title" class="form-input" placeholder="请输入图片标题">
+                            </div>
+                            <div class="edit-item">
+                                <label for="edit-description">描述:</label>
+                                <textarea id="edit-description" class="form-textarea" rows="3" placeholder="请输入图片描述"></textarea>
+                            </div>
+                            <div class="edit-item">
+                                <label for="edit-tags">标签:</label>
+                                <input type="text" id="edit-tags" class="form-input" placeholder="用逗号分隔多个标签">
+                                <small class="form-help">例如: 风景, 自然, 山水</small>
+                            </div>
+                            <div class="edit-item">
+                                <label for="edit-category">分类:</label>
+                                <select id="edit-category" class="form-select">
+                                    <option value="">请选择分类</option>
+                                    <option value="ai_generated">AI生成</option>
+                                    <option value="web_search">网络搜索</option>
+                                    <option value="local_storage">本地上传</option>
+                                </select>
+                            </div>
+                            <div class="edit-actions">
+                                <button onclick="saveImageInfo()" class="btn btn-success btn-sm">
+                                    <i class="fas fa-save"></i> 保存
+                                </button>
+                                <button onclick="cancelEdit()" class="btn btn-secondary btn-sm">
+                                    <i class="fas fa-times"></i> 取消
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="info-section">
+                        <h4>文件信息</h4>
+                        <div class="info-item">
+                            <label>文件名:</label>
+                            <span id="detail-filename">-</span>
+                        </div>
+                        <div class="info-item">
+                            <label>大小:</label>
+                            <span id="detail-size">-</span>
+                        </div>
+                        <div class="info-item">
+                            <label>尺寸:</label>
+                            <span id="detail-dimensions">-</span>
+                        </div>
+                        <div class="info-item">
+                            <label>格式:</label>
+                            <span id="detail-format">-</span>
+                        </div>
+                        <div class="info-item">
+                            <label>来源:</label>
+                            <span id="detail-source">-</span>
+                        </div>
+                        <div class="info-item">
+                            <label>创建时间:</label>
+                            <span id="detail-created">-</span>
+                        </div>
+                        <div class="info-item">
+                            <label>访问次数:</label>
+                            <span id="detail-access-count">-</span>
+                        </div>
+                    </div>
+
+                    <div class="info-section">
+                        <h4>操作</h4>
+                        <div style="display: flex; flex-direction: column; gap: 10px;">
+                            <button onclick="downloadImage()" class="btn btn-primary">下载图片</button>
+                            <button onclick="copyImageUrl()" class="btn btn-info">复制链接</button>
+                            <button onclick="deleteImage()" class="btn btn-danger">删除图片</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}
+
+{% block extra_js %}
+<script>
+// 全局变量
+let currentImages = [];
+let filteredImages = [];
+let currentPage = 1;
+let itemsPerPage = 20;
+let batchMode = false;
+let selectedImages = new Set();
+let currentImageDetail = null;
+
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', function() {
+    loadImages();
+});
+
+// 加载图片列表
+async function loadImages(page = 1) {
+    try {
+        const category = document.getElementById('category-filter').value;
+        const search = document.getElementById('search-input').value;
+        const sort = document.getElementById('sort-option').value;
+
+        const params = new URLSearchParams({
+            page: page,
+            per_page: itemsPerPage,
+            category: category === 'all' ? '' : category,
+            search: search,
+            sort: sort
+        });
+
+        const response = await fetch(`/api/image/gallery/list?${params}`);
+        const data = await response.json();
+
+        if (data.success) {
+            currentImages = data.images;
+            filteredImages = currentImages;
+            currentPage = page;
+
+            renderImageGrid();
+            renderPagination(data.pagination);
+        } else {
+            showError('加载图片失败: ' + data.message);
+        }
+    } catch (error) {
+        console.error('Failed to load images:', error);
+        showError('加载图片失败');
+    }
+}
+
+// 渲染图片网格
+function renderImageGrid() {
+    const grid = document.getElementById('image-grid');
+
+    if (filteredImages.length === 0) {
+        grid.innerHTML = `
+            <div class="loading-placeholder" style="text-align: center; padding: 60px; color: #7f8c8d; grid-column: 1 / -1;">
+                <div style="font-size: 3em; margin-bottom: 20px;">📷</div>
+                <p>暂无图片</p>
+            </div>
+        `;
+        return;
+    }
+
+    grid.innerHTML = filteredImages.map(image => `
+        <div class="image-item ${selectedImages.has(image.image_id) ? 'selected' : ''}" data-image-id="${image.image_id}">
+            ${batchMode ? `<input type="checkbox" class="batch-checkbox" ${selectedImages.has(image.image_id) ? 'checked' : ''} onchange="toggleImageSelection('${image.image_id}')">` : ''}
+            <img src="${window.location.origin}/api/image/thumbnail/${image.image_id}"
+                 alt="${image.title || image.filename}"
+                 class="image-thumbnail"
+                 onclick="showImageDetail('${image.image_id}')"
+                 onerror="this.src='/static/images/placeholder.svg'">
+            <div class="image-info">
+                <div class="image-title">${image.title || image.filename}</div>
+                <div class="image-meta">
+                    <span class="image-source">${getSourceLabel(image.source_type)}</span>
+                    <span>${formatFileSize(image.file_size)}</span>
+                </div>
+                <div class="image-actions">
+                    <button onclick="copySingleImageUrl('${image.image_id}')" class="btn btn-sm btn-info" title="复制链接">📋</button>
+                    <button onclick="downloadSingleImage('${image.image_id}')" class="btn btn-sm btn-primary" title="下载">⬇️</button>
+                    <button onclick="deleteSingleImage('${image.image_id}')" class="btn btn-sm btn-danger" title="删除">🗑️</button>
+                </div>
+            </div>
+        </div>
+    `).join('');
+}
+
+// 渲染分页控件
+function renderPagination(pagination) {
+    const paginationDiv = document.getElementById('pagination');
+
+    if (pagination.total_pages <= 1) {
+        paginationDiv.style.display = 'none';
+        return;
+    }
+
+    paginationDiv.style.display = 'flex';
+
+    let paginationHTML = '';
+
+    // 上一页按钮
+    paginationHTML += `<button onclick="loadImages(${pagination.current_page - 1})" ${!pagination.has_prev ? 'disabled' : ''}>上一页</button>`;
+
+    // 页码按钮
+    const startPage = Math.max(1, pagination.current_page - 2);
+    const endPage = Math.min(pagination.total_pages, pagination.current_page + 2);
+
+    if (startPage > 1) {
+        paginationHTML += `<button onclick="loadImages(1)">1</button>`;
+        if (startPage > 2) {
+            paginationHTML += `<span>...</span>`;
+        }
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+        paginationHTML += `<button onclick="loadImages(${i})" ${i === pagination.current_page ? 'class="active"' : ''}>${i}</button>`;
+    }
+
+    if (endPage < pagination.total_pages) {
+        if (endPage < pagination.total_pages - 1) {
+            paginationHTML += `<span>...</span>`;
+        }
+        paginationHTML += `<button onclick="loadImages(${pagination.total_pages})">${pagination.total_pages}</button>`;
+    }
+
+    // 下一页按钮
+    paginationHTML += `<button onclick="loadImages(${pagination.current_page + 1})" ${!pagination.has_next ? 'disabled' : ''}>下一页</button>`;
+
+    paginationDiv.innerHTML = paginationHTML;
+}
+
+// 筛选图片
+function filterImages() {
+    loadImages(1);
+}
+
+// 搜索图片
+function searchImages(event) {
+    if (event.key === 'Enter' || event.type === 'input') {
+        loadImages(1);
+    }
+}
+
+// 排序图片
+function sortImages() {
+    loadImages(1);
+}
+
+// 刷新图库
+function refreshGallery() {
+    loadImages(currentPage);
+}
+
+// 获取来源标签
+function getSourceLabel(sourceType) {
+    const labels = {
+        'ai_generated': 'AI生成',
+        'web_search': '网络搜索',
+        'local_storage': '本地上传'
+    };
+    return labels[sourceType] || sourceType;
+}
+
+// 格式化文件大小
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
+
+// 显示错误信息
+function showError(message) {
+    // 这里可以集成现有的通知系统
+    alert(message);
+}
+
+// 显示成功信息
+function showSuccess(message) {
+    // 这里可以集成现有的通知系统
+    alert(message);
+}
+
+// 批量选择相关功能
+function toggleBatchMode() {
+    batchMode = !batchMode;
+    const btn = document.getElementById('batch-mode-btn');
+    const toolbar = document.getElementById('batch-toolbar');
+
+    if (batchMode) {
+        btn.textContent = '❌ 退出批量';
+        btn.className = 'btn btn-warning';
+        toolbar.style.display = 'block';
+    } else {
+        btn.textContent = '☑️ 批量选择';
+        btn.className = 'btn btn-info';
+        toolbar.style.display = 'none';
+        selectedImages.clear();
+    }
+
+    renderImageGrid();
+    updateSelectedCount();
+}
+
+function toggleImageSelection(imageId) {
+    if (selectedImages.has(imageId)) {
+        selectedImages.delete(imageId);
+    } else {
+        selectedImages.add(imageId);
+    }
+
+    renderImageGrid();
+    updateSelectedCount();
+}
+
+function selectAll() {
+    filteredImages.forEach(image => selectedImages.add(image.image_id));
+    renderImageGrid();
+    updateSelectedCount();
+}
+
+function clearSelection() {
+    selectedImages.clear();
+    renderImageGrid();
+    updateSelectedCount();
+}
+
+function updateSelectedCount() {
+    document.getElementById('selected-count').textContent = selectedImages.size;
+}
+
+// 批量删除
+async function batchDelete() {
+    if (selectedImages.size === 0) {
+        showError('请先选择要删除的图片');
+        return;
+    }
+
+    if (!confirm(`确定要删除选中的 ${selectedImages.size} 张图片吗？此操作不可撤销。`)) {
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/image/gallery/batch-delete', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                image_ids: Array.from(selectedImages)
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showSuccess(`成功删除 ${data.deleted_count} 张图片`);
+            selectedImages.clear();
+            refreshGallery();
+        } else {
+            showError('批量删除失败: ' + data.message);
+        }
+    } catch (error) {
+        console.error('Batch delete failed:', error);
+        showError('批量删除失败');
+    }
+}
+
+// 批量下载
+async function batchDownload() {
+    if (selectedImages.size === 0) {
+        showError('请先选择要下载的图片');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/image/gallery/batch-download', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                image_ids: Array.from(selectedImages)
+            })
+        });
+
+        if (response.ok) {
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `images_${new Date().getTime()}.zip`;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(a);
+
+            showSuccess(`成功下载 ${selectedImages.size} 张图片`);
+        } else {
+            showError('批量下载失败');
+        }
+    } catch (error) {
+        console.error('Batch download failed:', error);
+        showError('批量下载失败');
+    }
+}
+
+// 清空图床
+async function clearAllImages() {
+    // 第一次确认
+    if (!confirm('⚠️ 警告：此操作将删除图床中的所有图片！\n\n确定要继续吗？')) {
+        return;
+    }
+
+    // 第二次确认
+    if (!confirm('🚨 最后确认：删除后无法恢复！\n\n请再次确认是否要清空整个图床？')) {
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/image/gallery/clear-all', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showSuccess(`成功清空图床，删除了 ${data.deleted_count} 张图片`);
+
+            // 清除选择状态
+            selectedImages.clear();
+
+            // 退出批量模式
+            if (batchMode) {
+                toggleBatchMode();
+            }
+
+            // 刷新图库
+            refreshGallery();
+        } else {
+            showError('清空图床失败: ' + data.message);
+        }
+    } catch (error) {
+        console.error('Clear all images failed:', error);
+        showError('清空图床失败');
+    }
+}
+
+// 单张图片操作
+async function copySingleImageUrl(imageId) {
+    const url = `${window.location.origin}/api/image/view/${imageId}`;
+
+    try {
+        await navigator.clipboard.writeText(url);
+        showSuccess('图片链接已复制到剪贴板');
+    } catch (error) {
+        // 降级方案
+        const textArea = document.createElement('textarea');
+        textArea.value = url;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+        showSuccess('图片链接已复制到剪贴板');
+    }
+}
+
+async function downloadSingleImage(imageId) {
+    try {
+        const response = await fetch(`/api/image/download/${imageId}`);
+
+        if (response.ok) {
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+
+            // 从响应头获取文件名
+            const contentDisposition = response.headers.get('Content-Disposition');
+            let filename = 'image';
+            if (contentDisposition) {
+                const filenameMatch = contentDisposition.match(/filename="(.+)"/);
+                if (filenameMatch) {
+                    filename = filenameMatch[1];
+                }
+            }
+
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(a);
+        } else {
+            showError('下载失败');
+        }
+    } catch (error) {
+        console.error('Download failed:', error);
+        showError('下载失败');
+    }
+}
+
+async function deleteSingleImage(imageId) {
+    if (!confirm('确定要删除这张图片吗？此操作不可撤销。')) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/image/delete/${imageId}`, {
+            method: 'DELETE'
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showSuccess('图片删除成功');
+            refreshGallery();
+        } else {
+            showError('删除失败: ' + data.message);
+        }
+    } catch (error) {
+        console.error('Delete failed:', error);
+        showError('删除失败');
+    }
+}
+
+// 上传相关功能
+function showUploadModal() {
+    document.getElementById('upload-modal').style.display = 'flex';
+}
+
+function closeUploadModal() {
+    document.getElementById('upload-modal').style.display = 'none';
+    document.getElementById('upload-progress').style.display = 'none';
+    document.getElementById('image-info-section').style.display = 'none';
+    document.getElementById('progress-fill').style.width = '0%';
+    document.getElementById('file-input').value = '';
+
+    // 重置输入字段
+    document.getElementById('image-title').value = '';
+    document.getElementById('image-description').value = '';
+    document.getElementById('image-tags').value = '';
+    document.getElementById('image-category').value = 'business';
+
+    // 清空选中的文件
+    selectedFiles = [];
+}
+
+function handleDragOver(event) {
+    event.preventDefault();
+    event.currentTarget.classList.add('drag-over');
+}
+
+function handleDragLeave(event) {
+    event.preventDefault();
+    event.currentTarget.classList.remove('drag-over');
+}
+
+function handleDrop(event) {
+    event.preventDefault();
+    event.currentTarget.classList.remove('drag-over');
+
+    const files = event.dataTransfer.files;
+    handleFiles(files);
+}
+
+function handleFileSelect(event) {
+    const files = event.target.files;
+    handleFiles(files);
+}
+
+let selectedFiles = [];
+
+function handleFiles(files) {
+    if (files.length === 0) return;
+
+    // 验证文件类型
+    const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'];
+    const validFiles = Array.from(files).filter(file => validTypes.includes(file.type));
+
+    if (validFiles.length === 0) {
+        showError('请选择有效的图片文件 (JPG, PNG, WebP, GIF)');
+        return;
+    }
+
+    if (validFiles.length !== files.length) {
+        showError(`已过滤掉 ${files.length - validFiles.length} 个无效文件`);
+    }
+
+    selectedFiles = validFiles;
+
+    // 显示图片信息输入区域
+    document.getElementById('image-info-section').style.display = 'block';
+
+    // 如果只有一个文件，自动填入文件名作为标题
+    if (validFiles.length === 1) {
+        document.getElementById('image-title').value = validFiles[0].name.split('.')[0];
+    } else {
+        document.getElementById('image-title').placeholder = `批量上传 ${validFiles.length} 个文件`;
+    }
+}
+
+async function startUpload() {
+    if (selectedFiles.length === 0) {
+        showError('请先选择文件');
+        return;
+    }
+
+    // 获取用户输入的信息
+    const title = document.getElementById('image-title').value.trim();
+    const description = document.getElementById('image-description').value.trim();
+    const tags = document.getElementById('image-tags').value.trim();
+    const category = document.getElementById('image-category').value;
+
+    // 隐藏信息输入区域，显示进度条
+    document.getElementById('image-info-section').style.display = 'none';
+    document.getElementById('upload-progress').style.display = 'block';
+
+    let uploadedCount = 0;
+    const totalFiles = selectedFiles.length;
+
+    for (let i = 0; i < selectedFiles.length; i++) {
+        const file = selectedFiles[i];
+
+        try {
+            document.getElementById('upload-status').textContent = `正在上传 ${file.name} (${i + 1}/${totalFiles})`;
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            // 使用用户输入的信息，如果为空则使用默认值
+            const fileTitle = title || file.name.split('.')[0];
+            formData.append('title', fileTitle);
+            formData.append('description', description);
+            formData.append('tags', tags);
+            formData.append('category', category);
+
+            const response = await fetch('/api/image/upload', {
+                method: 'POST',
+                body: formData
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                uploadedCount++;
+            } else {
+                console.error(`Upload failed for ${file.name}:`, data.message);
+            }
+
+            // 更新进度条
+            const progress = ((i + 1) / totalFiles) * 100;
+            document.getElementById('progress-fill').style.width = `${progress}%`;
+
+        } catch (error) {
+            console.error(`Upload error for ${file.name}:`, error);
+        }
+    }
+
+    // 上传完成
+    document.getElementById('upload-status').textContent = `上传完成！成功上传 ${uploadedCount}/${totalFiles} 个文件`;
+
+    if (uploadedCount > 0) {
+        setTimeout(() => {
+            closeUploadModal();
+            refreshGallery();
+            showSuccess(`成功上传 ${uploadedCount} 张图片`);
+        }, 2000);
+    }
+}
+
+// 图片详情相关功能
+async function showImageDetail(imageId) {
+    try {
+        const response = await fetch(`/api/image/detail/${imageId}`);
+        const data = await response.json();
+
+        if (data.success) {
+            currentImageDetail = data.image;
+            console.log('当前图片详情:', currentImageDetail);
+
+            // 填充详情信息
+            document.getElementById('image-detail-title').textContent = data.image.title || data.image.filename;
+            document.getElementById('detail-image').src = `${window.location.origin}/api/image/view/${imageId}`;
+
+            // 填充可编辑的图片信息
+            document.getElementById('display-title').textContent = data.image.title || '未设置';
+            document.getElementById('display-description').textContent = data.image.description || '未设置';
+            document.getElementById('display-tags').textContent = data.image.tags || '未设置';
+            document.getElementById('display-category').textContent = getCategoryLabel(data.image.category) || '未设置';
+
+            // 填充文件信息
+            document.getElementById('detail-filename').textContent = data.image.filename;
+            document.getElementById('detail-size').textContent = formatFileSize(data.image.file_size);
+            document.getElementById('detail-dimensions').textContent = `${data.image.width} × ${data.image.height}`;
+            document.getElementById('detail-format').textContent = data.image.format.toUpperCase();
+            document.getElementById('detail-source').textContent = getSourceLabel(data.image.source_type);
+            document.getElementById('detail-created').textContent = new Date(data.image.created_at * 1000).toLocaleString();
+            document.getElementById('detail-access-count').textContent = data.image.access_count || 0;
+
+            // 重置编辑模式
+            exitEditMode();
+
+            // 显示模态框
+            document.getElementById('image-detail-modal').style.display = 'flex';
+        } else {
+            showError('获取图片详情失败: ' + data.message);
+        }
+    } catch (error) {
+        console.error('Failed to load image detail:', error);
+        showError('获取图片详情失败');
+    }
+}
+
+function closeImageDetailModal() {
+    // 退出编辑模式
+    exitEditMode();
+
+    document.getElementById('image-detail-modal').style.display = 'none';
+    currentImageDetail = null;
+}
+
+async function downloadImage() {
+    if (!currentImageDetail) return;
+    await downloadSingleImage(currentImageDetail.image_id);
+}
+
+async function copyImageUrl() {
+    if (!currentImageDetail) return;
+
+    const url = `${window.location.origin}/api/image/view/${currentImageDetail.image_id}`;
+
+    try {
+        await navigator.clipboard.writeText(url);
+        showSuccess('图片链接已复制到剪贴板');
+    } catch (error) {
+        // 降级方案
+        const textArea = document.createElement('textarea');
+        textArea.value = url;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+        showSuccess('图片链接已复制到剪贴板');
+    }
+}
+
+async function deleteImage() {
+    if (!currentImageDetail) return;
+
+    await deleteSingleImage(currentImageDetail.image_id);
+    closeImageDetailModal();
+}
+
+// 图片信息编辑功能
+function toggleEditMode() {
+    const displayMode = document.getElementById('info-display-mode');
+    const editMode = document.getElementById('info-edit-mode');
+    const toggleBtn = document.getElementById('edit-toggle-btn');
+
+    if (editMode.style.display === 'none') {
+        // 进入编辑模式
+        enterEditMode();
+    } else {
+        // 退出编辑模式
+        exitEditMode();
+    }
+}
+
+function enterEditMode() {
+    if (!currentImageDetail) return;
+
+    const displayMode = document.getElementById('info-display-mode');
+    const editMode = document.getElementById('info-edit-mode');
+    const toggleBtn = document.getElementById('edit-toggle-btn');
+
+    // 填充编辑表单
+    document.getElementById('edit-title').value = currentImageDetail.title || '';
+    document.getElementById('edit-description').value = currentImageDetail.description || '';
+    document.getElementById('edit-tags').value = currentImageDetail.tags || '';
+    document.getElementById('edit-category').value = currentImageDetail.category || '';
+
+    // 切换显示模式
+    displayMode.style.display = 'none';
+    editMode.style.display = 'block';
+    toggleBtn.innerHTML = '<i class="fas fa-eye"></i> 查看';
+}
+
+function exitEditMode() {
+    const displayMode = document.getElementById('info-display-mode');
+    const editMode = document.getElementById('info-edit-mode');
+    const toggleBtn = document.getElementById('edit-toggle-btn');
+
+    displayMode.style.display = 'block';
+    editMode.style.display = 'none';
+    toggleBtn.innerHTML = '<i class="fas fa-edit"></i> 编辑';
+}
+
+function cancelEdit() {
+    exitEditMode();
+}
+
+async function saveImageInfo() {
+    if (!currentImageDetail) return;
+
+    const title = document.getElementById('edit-title').value.trim();
+    const description = document.getElementById('edit-description').value.trim();
+    const tags = document.getElementById('edit-tags').value.trim();
+    const category = document.getElementById('edit-category').value;
+
+    try {
+        const response = await fetch(`/api/image/${currentImageDetail.image_id}/update`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                title: title,
+                description: description,
+                tags: tags,
+                category: category
+            })
+        });
+
+        console.log('API响应状态:', response.status);
+
+        if (!response.ok) {
+            let errorMessage = `HTTP ${response.status}`;
+            try {
+                const errorResult = await response.json();
+                errorMessage += ': ' + (errorResult.detail || errorResult.message || '未知错误');
+            } catch (e) {
+                errorMessage += ': ' + response.statusText;
+            }
+            throw new Error(errorMessage);
+        }
+
+        const result = await response.json();
+        console.log('API响应数据:', result);
+
+        if (result.success) {
+            // 更新当前图片详情数据
+            currentImageDetail.title = title;
+            currentImageDetail.description = description;
+            currentImageDetail.tags = tags;
+            currentImageDetail.category = category;
+
+            // 更新显示内容
+            document.getElementById('display-title').textContent = title || '未设置';
+            document.getElementById('display-description').textContent = description || '未设置';
+            document.getElementById('display-tags').textContent = tags || '未设置';
+            document.getElementById('display-category').textContent = getCategoryLabel(category) || '未设置';
+            document.getElementById('image-detail-title').textContent = title || currentImageDetail.filename;
+
+            // 退出编辑模式
+            exitEditMode();
+
+            // 刷新图片列表以显示更新后的信息
+            loadImages();
+
+            showSuccess('图片信息已更新');
+        } else {
+            showError('更新失败: ' + (result.message || '未知错误'));
+        }
+    } catch (error) {
+        console.error('Failed to update image info:', error);
+        if (error.message) {
+            showError('更新失败: ' + error.message);
+        } else {
+            showError('更新失败，请重试');
+        }
+    }
+}
+
+// 获取分类标签
+function getCategoryLabel(category) {
+    const categoryLabels = {
+        'ai_generated': 'AI生成',
+        'web_search': '网络搜索',
+        'local_storage': '本地上传'
+    };
+    return categoryLabels[category] || category;
+}
+
+// 键盘快捷键
+document.addEventListener('keydown', function(event) {
+    // ESC键关闭模态框
+    if (event.key === 'Escape') {
+        if (document.getElementById('upload-modal').style.display === 'flex') {
+            closeUploadModal();
+        }
+        if (document.getElementById('image-detail-modal').style.display === 'flex') {
+            closeImageDetailModal();
+        }
+    }
+
+    // Ctrl+A 全选（在批量模式下）
+    if (event.ctrlKey && event.key === 'a' && batchMode) {
+        event.preventDefault();
+        selectAll();
+    }
+
+    // Delete键删除选中项
+    if (event.key === 'Delete' && batchMode && selectedImages.size > 0) {
+        batchDelete();
+    }
+});
+</script>
+{% endblock %}
+
+{% block extra_css %}
+<style>
+/* 图片网格样式 */
+.image-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.image-item {
+    background: var(--glass-bg);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    border-radius: 15px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.image-item:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 35px rgba(31, 38, 135, 0.4);
+}
+
+.image-item.selected {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
+}
+
+.image-thumbnail {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    cursor: pointer;
+}
+
+.image-info {
+    padding: 15px;
+}
+
+.image-title {
+    font-weight: 600;
+    margin-bottom: 5px;
+    color: var(--text-primary);
+    font-size: 0.9em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.image-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+    margin-bottom: 10px;
+}
+
+.image-source {
+    background: var(--primary-color);
+    color: white;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 0.7em;
+}
+
+.image-actions {
+    display: flex;
+    gap: 5px;
+    justify-content: center;
+}
+
+.image-actions button {
+    padding: 5px 10px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 0.8em;
+    transition: all 0.3s ease;
+}
+
+/* 批量选择复选框 */
+.batch-checkbox {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 20px;
+    height: 20px;
+    z-index: 10;
+}
+
+/* 上传区域样式 */
+.upload-area {
+    border: 2px dashed #ddd;
+    border-radius: 10px;
+    padding: 40px;
+    text-align: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.upload-area:hover,
+.upload-area.drag-over {
+    border-color: var(--primary-color);
+    background: rgba(102, 126, 234, 0.1);
+}
+
+/* 进度条样式 */
+.progress-bar {
+    width: 100%;
+    height: 20px;
+    background: #f0f0f0;
+    border-radius: 10px;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+
+.progress-fill {
+    height: 100%;
+    background: var(--primary-gradient);
+    width: 0%;
+    transition: width 0.3s ease;
+}
+
+/* 模态框样式 */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.modal-content {
+    background: white;
+    border-radius: 15px;
+    max-width: 600px;
+    width: 100%;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid #eee;
+}
+
+.modal-body {
+    padding: 20px;
+    flex: 1;
+    overflow-y: auto;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    font-size: 1.5em;
+    cursor: pointer;
+    color: #999;
+}
+
+.close-btn:hover {
+    color: #333;
+}
+
+/* 信息项样式 */
+.info-section {
+    margin-bottom: 20px;
+}
+
+.info-section h4 {
+    margin-bottom: 10px;
+    color: var(--primary-color);
+}
+
+.info-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    padding: 5px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.info-item label {
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+/* 编辑表单样式 */
+.edit-item {
+    margin-bottom: 15px;
+}
+
+.edit-item label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 14px;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    background: white;
+}
+
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
+}
+
+.form-textarea {
+    resize: vertical;
+    min-height: 60px;
+}
+
+.form-help {
+    display: block;
+    margin-top: 4px;
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+.edit-actions {
+    margin-top: 20px;
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+}
+
+.btn-sm {
+    padding: 6px 12px;
+    font-size: 13px;
+}
+
+.btn-outline {
+    background: transparent;
+    border: 1px solid var(--primary-color);
+    color: var(--primary-color);
+}
+
+.btn-outline:hover {
+    background: var(--primary-color);
+    color: white;
+}
+
+.btn-success {
+    background: #28a745;
+    border-color: #28a745;
+    color: white;
+}
+
+.btn-success:hover {
+    background: #218838;
+    border-color: #1e7e34;
+}
+
+.btn-secondary {
+    background: #6c757d;
+    border-color: #6c757d;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #5a6268;
+    border-color: #545b62;
+}
+
+/* 分页样式 */
+.pagination {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+.pagination button {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    background: white;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.pagination button:hover {
+    background: var(--primary-color);
+    color: white;
+}
+
+.pagination button.active {
+    background: var(--primary-color);
+    color: white;
+}
+
+.pagination button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .image-grid {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 15px;
+    }
+
+    .toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .modal {
+        padding: 10px;
+        align-items: flex-start;
+        padding-top: 20px;
+    }
+
+    .modal-content {
+        width: 100%;
+        max-width: none;
+        max-height: calc(100vh - 40px);
+        margin: 0;
+    }
+
+    .modal-header {
+        padding: 15px;
+        flex-shrink: 0;
+    }
+
+    .modal-body {
+        padding: 15px;
+        overflow-y: auto;
+    }
+
+    /* 确保上传按钮区域在小屏幕上可见 */
+    #image-info-section {
+        margin-top: 15px !important;
+        padding: 15px !important;
+    }
+
+    #image-info-section > div:last-child {
+        position: sticky;
+        bottom: 0;
+        background: #f9f9f9;
+        padding: 15px 0 0 0;
+        margin: 15px -15px -15px -15px;
+        padding-left: 15px;
+        padding-right: 15px;
+        border-top: 1px solid #ddd;
+    }
+
+    /* 上传进度区域优化 */
+    #upload-progress {
+        margin-top: 15px !important;
+        position: sticky;
+        bottom: 0;
+        background: white;
+        padding: 15px 0;
+        border-top: 1px solid #eee;
+        margin-left: -15px;
+        margin-right: -15px;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+}
+
+/* 超小屏幕优化 */
+@media (max-width: 480px) {
+    .modal {
+        padding: 5px;
+        padding-top: 10px;
+    }
+
+    .modal-content {
+        border-radius: 10px;
+        max-height: calc(100vh - 20px);
+    }
+
+    .modal-header {
+        padding: 10px 15px;
+    }
+
+    .modal-header h3 {
+        font-size: 1.1em;
+    }
+
+    .modal-body {
+        padding: 10px 15px;
+    }
+
+    .upload-area {
+        padding: 20px 15px;
+    }
+
+    .upload-area p {
+        font-size: 0.9em;
+    }
+
+    /* 表单元素优化 */
+    #image-info-section input,
+    #image-info-section textarea,
+    #image-info-section select {
+        font-size: 16px; /* 防止iOS缩放 */
+    }
+
+    /* 按钮优化 */
+    .btn {
+        padding: 12px 20px;
+        font-size: 14px;
+        min-height: 44px; /* 触摸友好 */
+    }
+
+    #start-upload-btn {
+        width: 100%;
+        margin-top: 10px;
+    }
+
+    .upload-button-container {
+        text-align: center !important;
+    }
+}
+
+/* 确保按钮在所有设备上都可见 */
+.upload-button-container {
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #eee;
+}
+
+/* 防止模态框内容溢出 */
+.modal-content * {
+    box-sizing: border-box;
+}
+
+/* 优化滚动条样式 */
+.modal-content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.modal-content::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+.modal-content::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+
+.modal-content::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+</style>
+{% endblock %}