genealogy-app/templates/upload.html

{% extends "layout.html" %}

{% block title %}上传文件 - 家谱管理系统{% endblock %}

{% block extra_css %}
<style>
    .drop-shadow { filter: drop-shadow(0 0 4px rgba(0,0,0,0.5)); }
    
    .upload-container {
        padding: var(--spacing-lg);
        max-width: 900px;
        margin: 0 auto;
    }
    
    .upload-card {
        background: var(--color-bg-card);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-card);
        overflow: hidden;
    }
    
    .upload-header {
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
        padding: var(--spacing-lg);
        color: white;
    }
    
    .upload-title {
        font-family: var(--font-family-heading);
        font-size: 1.25rem;
        letter-spacing: 0.05em;
        margin: 0;
    }
    
    .upload-body {
        padding: var(--spacing-xl);
    }
    
    .form-section {
        margin-bottom: var(--spacing-xl);
    }
    
    .section-label {
        font-family: var(--font-family-primary);
        font-weight: 600;
        color: var(--color-text-secondary);
        margin-bottom: var(--spacing-md);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }
    
    .file-input-wrapper {
        border: 2px dashed var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        text-align: center;
        background: var(--color-bg-main);
        transition: all var(--transition-fast);
        cursor: pointer;
    }
    
    .file-input-wrapper:hover {
        border-color: var(--color-primary);
        background: rgba(139, 105, 20, 0.03);
    }
    
    .file-input-wrapper.dragover {
        border-color: var(--color-primary);
        background: rgba(139, 105, 20, 0.08);
        transform: scale(1.02);
    }
    
    .file-input-icon {
        font-size: 3rem;
        color: var(--color-primary);
        margin-bottom: var(--spacing-md);
    }
    
    .file-input-text {
        font-family: var(--font-family-primary);
        color: var(--color-text-secondary);
        margin-bottom: var(--spacing-sm);
    }
    
    .file-input-hint {
        font-size: 0.85rem;
        color: var(--color-text-muted);
    }
    
    .form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-md);
    }
    
    .form-group {
        margin-bottom: var(--spacing-md);
    }
    
    .form-label {
        font-family: var(--font-family-primary);
        font-size: 0.85rem;
        color: var(--color-text-secondary);
        margin-bottom: var(--spacing-sm);
        display: block;
    }
    
    .form-control {
        border-radius: var(--radius-md);
        border-color: var(--color-border);
        transition: all var(--transition-fast);
    }
    
    .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(139, 105, 20, 0.1);
    }
    
    .alert-info {
        background: rgba(139, 105, 20, 0.08);
        border: 1px solid rgba(139, 105, 20, 0.2);
        border-radius: var(--radius-md);
        color: var(--color-text-secondary);
        padding: var(--spacing-md);
    }
    
    .preview-card {
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    
    .preview-img {
        height: 200px;
        object-fit: cover;
        background: var(--color-bg-main);
        transition: opacity var(--transition-fast);
    }
    
    .preview-img:hover {
        opacity: 0.8;
    }
    
    .preview-click-area {
        cursor: pointer;
        position: relative;
    }
    
    .preview-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        opacity: 0;
        transition: opacity var(--transition-fast);
        pointer-events: none;
    }
    
    .preview-click-area:hover .preview-overlay {
        opacity: 1;
    }
</style>
{% endblock %}

{% block content %}
<div class="upload-container">
    <div class="page-header">
        <div class="page-title">
            <div class="page-title-icon">
                <i class="bi bi-cloud-upload"></i>
            </div>
            <div>
                <h1 class="page-title-text">上传家谱扫描件</h1>
                <p class="member-meta mt-1">上传图片格式的家谱扫描件，支持批量上传</p>
            </div>
        </div>
    </div>

    <div class="upload-card">
        <div class="upload-header">
            <h2 class="upload-title"><i class="bi bi-cloud-upload me-2"></i>上传家谱扫描件</h2>
        </div>
        <div class="upload-body">
            <form method="POST" enctype="multipart/form-data" id="uploadForm">
                <div class="form-section">
                    <label class="section-label">选择文件</label>
                    <div class="file-input-wrapper" id="fileDropArea">
                        <input type="file" name="file" id="fileInput" class="form-control" multiple accept=".jpg,.jpeg,.png" required style="display: none;">
                        <div class="file-input-icon"><i class="bi bi-images"></i></div>
                        <div class="file-input-text">点击或拖拽文件到此处上传</div>
                        <div class="file-input-hint">支持图片 (JPG, PNG) 格式的扫描件。图片支持多选（一次最多10张）。上传后将自动识别或提取页码。</div>
                    </div>
                </div>

                <div class="form-section">
                    <label class="section-label">基本信息</label>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">版本名称 <span class="text-danger">*</span></label>
                            <input type="text" name="genealogy_version" class="form-control" placeholder="如：衢州1926版" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">版本来源 <span class="text-danger">*</span></label>
                            <input type="text" name="genealogy_source" class="form-control" placeholder="如：留越收藏" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">文件提供人</label>
                            <input type="text" name="upload_person" class="form-control" placeholder="默认：当前系统登录账号">
                        </div>
                    </div>
                </div>

                <div class="form-section" id="globalPageWrapper">
                    <label class="section-label">手动指定页码 (可选)</label>
                    <div class="input-group">
                        <input type="number" name="manual_page" id="initialPage" class="form-control" placeholder="如不输入则由 OCR 自动识别">
                        <button class="btn btn-secondary" type="button" onclick="document.getElementById('initialPage').value = {{ suggested_page }}">
                            提示：第 {{ suggested_page }} 页？
                        </button>
                    </div>
                    <div class="form-text mt-1" style="color: var(--color-text-muted);">
                        建议值为当前数据库最大页码 + 1。
                    </div>
                </div>
                
                <div id="previewContainer" class="form-section" style="display: none;">
                    <label class="section-label">文件预览及页码设置</label>
                    <div class="row g-3" id="previewGrid">
                    </div>
                </div>
                
                <div class="alert-info">
                    <i class="bi bi-info-circle me-2"></i>
                    提示：文件将上传至云端 OSS 存储，处理过程可能需要几秒钟。
                </div>

                <div class="d-flex gap-2 justify-content-end">
                    <a href="{{ url_for('index') }}" class="btn btn-secondary">取消</a>
                    <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">
                        <i class="bi bi-check-lg me-1"></i> 开始上传
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true" style="z-index: 1060;">
    <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 95vw;">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-header border-0 pb-0 position-absolute top-0 end-0" style="z-index: 1070;">
                <button type="button" class="btn-close btn-close-white bg-dark p-2 rounded-circle shadow" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0 text-center position-relative d-flex justify-content-center align-items-center" style="min-height: 50vh;">
                <img id="largePreviewImage" src="" class="img-fluid rounded shadow-lg" style="max-height: 90vh; max-width: 100%; object-fit: contain; pointer-events: none;">
                
                <button class="btn btn-dark position-absolute top-50 start-0 translate-middle-y ms-3 ms-md-5 rounded-circle shadow" id="prevImageBtn" style="width: 48px; height: 48px; opacity: 0.8; z-index: 1065;">
                    <i class="bi bi-chevron-left fs-4"></i>
                </button>
                <button class="btn btn-dark position-absolute top-50 end-0 translate-middle-y me-3 me-md-5 rounded-circle shadow" id="nextImageBtn" style="width: 48px; height: 48px; opacity: 0.8; z-index: 1065;">
                    <i class="bi bi-chevron-right fs-4"></i>
                </button>
                
                <div class="position-absolute bottom-0 start-50 translate-middle-x mb-3" style="z-index: 1065;">
                    <span class="badge bg-dark bg-opacity-75 fs-6 px-3 py-2 rounded-pill shadow" id="imageIndexIndicator">1 / 1</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.getElementById('uploadForm').addEventListener('submit', function(e) {
        const btn = document.getElementById('submitBtn');
        if (btn.classList.contains('disabled')) {
            e.preventDefault();
            return;
        }
        
        btn.classList.add('disabled');
        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 上传处理中...';
        
        setTimeout(() => {
            btn.disabled = true;
        }, 10);
    });

    const fileDropArea = document.getElementById('fileDropArea');
    const fileInput = document.getElementById('fileInput');

    fileDropArea.addEventListener('click', () => fileInput.click());

    fileDropArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        fileDropArea.classList.add('dragover');
    });

    fileDropArea.addEventListener('dragleave', () => {
        fileDropArea.classList.remove('dragover');
    });

    fileDropArea.addEventListener('drop', (e) => {
        e.preventDefault();
        fileDropArea.classList.remove('dragover');
        if (e.dataTransfer.files.length > 0) {
            fileInput.files = e.dataTransfer.files;
            fileInput.dispatchEvent(new Event('change'));
        }
    });

    let currentPreviewFiles = [];
    let currentPreviewIndex = 0;
    
    window.showLargePreview = function(index) {
        if (currentPreviewFiles.length === 0 || index < 0 || index >= currentPreviewFiles.length) {
            return;
        }
        
        currentPreviewIndex = index;
        const file = currentPreviewFiles[index];
        const objectUrl = URL.createObjectURL(file);
        
        const imgEl = document.getElementById('largePreviewImage');
        imgEl.src = objectUrl;
        
        document.getElementById('imageIndexIndicator').textContent = `${index + 1} / ${currentPreviewFiles.length}`;
        
        document.getElementById('prevImageBtn').style.display = index === 0 ? 'none' : 'block';
        document.getElementById('nextImageBtn').style.display = index === currentPreviewFiles.length - 1 ? 'none' : 'block';
        
        const modalEl = document.getElementById('imagePreviewModal');
        let modal = bootstrap.Modal.getInstance(modalEl);
        if (!modal) {
            modal = new bootstrap.Modal(modalEl);
        }
        
        imgEl.style.maxHeight = '85vh';
        imgEl.style.maxWidth = '100%';
        imgEl.style.objectFit = 'contain';
        imgEl.style.pointerEvents = 'auto';
        
        modal.show();
    };
    
    document.getElementById('prevImageBtn').addEventListener('click', (e) => {
        e.stopPropagation();
        if (currentPreviewIndex > 0) window.showLargePreview(currentPreviewIndex - 1);
    });
    
    document.getElementById('nextImageBtn').addEventListener('click', (e) => {
        e.stopPropagation();
        if (currentPreviewIndex < currentPreviewFiles.length - 1) window.showLargePreview(currentPreviewIndex + 1);
    });
    
    document.getElementById('imagePreviewModal').addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') {
            if (currentPreviewIndex > 0) window.showLargePreview(currentPreviewIndex - 1);
        } else if (e.key === 'ArrowRight') {
            if (currentPreviewIndex < currentPreviewFiles.length - 1) window.showLargePreview(currentPreviewIndex + 1);
        }
    });

    document.getElementById('fileInput').addEventListener('change', function(e) {
        let files = e.target.files;
        let imgCount = 0;

        for (let i = 0; i < files.length; i++) {
            if (files[i].type.startsWith('image/')) {
                imgCount++;
            } else if (files[i].name.toLowerCase().endsWith('.pdf')) {
                alert('扫描件管理仅支持图片上传，请在家谱管理中上传PDF文件。');
                e.target.value = '';
                document.getElementById('previewContainer').style.display = 'none';
                document.getElementById('globalPageWrapper').style.display = 'block';
                return;
            }
        }

        if (imgCount > 10) {
            alert('一次最多只能上传10张图片，请重新选择。');
            e.target.value = '';
            document.getElementById('previewContainer').style.display = 'none';
            document.getElementById('globalPageWrapper').style.display = 'block';
            return;
        }
        
        const previewContainer = document.getElementById('previewContainer');
        const previewGrid = document.getElementById('previewGrid');
        const globalPageWrapper = document.getElementById('globalPageWrapper');
        
        previewGrid.innerHTML = '';
        
        if (files.length > 0) {
            previewContainer.style.display = 'block';
            globalPageWrapper.style.display = 'none';
            
            let startPage = parseInt('{{ suggested_page }}') || 1;
            
            currentPreviewFiles = [];
            
            Array.from(files).forEach((file, index) => {
                if (file.type.startsWith('image/')) {
                    currentPreviewFiles.push(file);
                }
            });
            
            let imageIndexCounter = 0;

            Array.from(files).forEach((file, index) => {
                const isImage = file.type.startsWith('image/');
                if (!isImage) return;
                
                const currentIndex = imageIndexCounter++;
                const objectUrl = URL.createObjectURL(file);
                const col = document.createElement('div');
                col.className = 'col-md-6 col-lg-4';
                col.innerHTML = `
                    <div class="preview-card h-100">
                        <div class="preview-click-area" data-index="${currentIndex}">
                            <img src="${objectUrl}" class="preview-img w-full" alt="预览图">
                            <div class="preview-overlay">
                                <i class="bi bi-zoom-in fs-1 drop-shadow"></i>
                            </div>
                        </div>
                        <div class="p-2 border-top">
                            <div class="text-truncate small mb-2" style="color: var(--color-text-muted);" title="${file.name}">${file.name}</div>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text" style="background: var(--color-bg-main); color: var(--color-text-secondary);">指定页码</span>
                                <input type="number" name="page_number_${index}" class="form-control" value="${startPage + currentIndex}">
                            </div>
                        </div>
                    </div>
                `;
                
                const clickArea = col.querySelector('.preview-click-area');
                if (clickArea) {
                    clickArea.addEventListener('click', function(evt) {
                        evt.preventDefault();
                        evt.stopPropagation();
                        window.showLargePreview(currentIndex);
                    });
                }
                
                previewGrid.appendChild(col);
            });
        } else {
            previewContainer.style.display = 'none';
            globalPageWrapper.style.display = 'block';
        }
    });
</script>
{% endblock %}