tv_show_v1/templates/attachment_test/index.html

{% extends "base.html" %}

{% block title %}附件上传测试{% endblock %}

{% block extra_styles %}
<style>
    .attachment-upload-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
    }
    .attachment-upload-grid .btn {
        flex: 1 1 auto;
        min-width: 140px;
    }
    .attachment-preview-wrap {
        background: #f8f9fa;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 20px;
        min-height: 120px;
    }
    .attachment-preview-wrap.empty {
        color: #888;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .attachment-preview-wrap img,
    .attachment-preview-wrap video {
        max-width: 100%;
        max-height: 360px;
        border-radius: 8px;
        display: block;
    }
    .attachment-file-meta {
        margin-top: 12px;
        word-break: break-all;
        font-size: 0.9em;
        color: #555;
    }
    .attachment-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 16px;
    }
    .attachment-url-box {
        font-size: 0.85em;
        color: #667eea;
        word-break: break-all;
        margin-top: 8px;
    }
</style>
{% endblock %}

{% block content %}
    <div class="module-header">
        <h2>📎 附件上传测试</h2>
    </div>

    <div class="sub-section">
        <h2 style="font-size: 1.1em; margin-bottom: 16px;">选择来源</h2>
        <p style="color: #666; margin-bottom: 12px; font-size: 0.95em;">每次仅保留一个附件；新上传会替换当前附件。</p>

        <div class="attachment-upload-grid">
            <button type="button" class="btn btn-primary" onclick="document.getElementById('inpCameraPhoto').click()">拍照</button>
            <button type="button" class="btn btn-primary" onclick="document.getElementById('inpCameraVideo').click()">拍视频</button>
            <button type="button" class="btn btn-info" onclick="document.getElementById('inpGalleryImage').click()">相册图片</button>
            <button type="button" class="btn btn-info" onclick="document.getElementById('inpGalleryVideo').click()">相册视频</button>
            <button type="button" class="btn btn-warning" onclick="document.getElementById('inpAnyFile').click()">选择文件</button>
        </div>

        <input type="file" id="inpCameraPhoto" accept="image/*" capture="environment" style="display:none" />
        <input type="file" id="inpCameraVideo" accept="video/*" capture="environment" style="display:none" />
        <input type="file" id="inpGalleryImage" accept="image/*" style="display:none" />
        <input type="file" id="inpGalleryVideo" accept="video/*" style="display:none" />
        <input type="file" id="inpAnyFile" style="display:none" />

        <h2 style="font-size: 1.1em; margin: 24px 0 12px;">当前附件</h2>
        <div id="previewWrap" class="attachment-preview-wrap empty">暂无附件，请使用上方按钮上传</div>
        <div id="previewActions" class="attachment-actions" style="display: none;">
            <button type="button" class="btn btn-primary" id="btnShare">分享链接</button>
            <button type="button" class="btn btn-secondary" id="btnDelete">删除</button>
        </div>
        <div id="urlBox" class="attachment-url-box" style="display: none;"></div>
    </div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    let currentUrl = '';
    let currentFilename = '';

    const previewWrap = document.getElementById('previewWrap');
    const previewActions = document.getElementById('previewActions');
    const urlBox = document.getElementById('urlBox');

    function isImageName(name) {
        return /\.(png|jpe?g|gif|bmp|webp|heic|heif)$/i.test(name || '');
    }
    function isVideoName(name) {
        return /\.(mp4|mov|webm|mkv|avi)$/i.test(name || '');
    }

    function clearInputs() {
        ['inpCameraPhoto', 'inpCameraVideo', 'inpGalleryImage', 'inpGalleryVideo', 'inpAnyFile'].forEach(function (id) {
            const el = document.getElementById(id);
            if (el) el.value = '';
        });
    }

    function renderPreview(data) {
        currentUrl = data.url || '';
        currentFilename = data.filename || '';
        urlBox.style.display = 'none';
        urlBox.textContent = '';

        if (!data.has_file || !data.url) {
            previewWrap.className = 'attachment-preview-wrap empty';
            previewWrap.textContent = '暂无附件，请使用上方按钮上传';
            previewActions.style.display = 'none';
            return;
        }

        previewWrap.className = 'attachment-preview-wrap';
        previewWrap.innerHTML = '';

        if (isImageName(data.filename)) {
            const img = document.createElement('img');
            img.src = data.url;
            img.alt = data.filename;
            previewWrap.appendChild(img);
        } else if (isVideoName(data.filename)) {
            const v = document.createElement('video');
            v.src = data.url;
            v.controls = true;
            v.playsInline = true;
            previewWrap.appendChild(v);
        } else {
            const p = document.createElement('p');
            p.textContent = '已上传文件（非预览类型）';
            previewWrap.appendChild(p);
        }
        const meta = document.createElement('div');
        meta.className = 'attachment-file-meta';
        meta.textContent = data.filename;
        previewWrap.appendChild(meta);

        previewActions.style.display = 'flex';
    }

    async function refreshStatus() {
        try {
            const r = await fetch('/api/attachment_test/status');
            const data = await r.json();
            if (data.success) {
                renderPreview(data);
            }
        } catch (e) {
            showMessage('加载状态失败: ' + e.message, 'error');
        }
    }

    async function uploadFile(file) {
        if (!file) return;
        const fd = new FormData();
        fd.append('file', file);
        showLoading(true);
        try {
            const r = await fetch('/api/attachment_test/upload', { method: 'POST', body: fd });
            const data = await r.json();
            if (data.success) {
                showMessage(data.message || '上传成功');
                renderPreview({
                    has_file: true,
                    filename: data.filename,
                    url: data.url,
                });
            } else {
                showMessage(data.message || '上传失败', 'error');
            }
        } catch (e) {
            showMessage('上传失败: ' + e.message, 'error');
        } finally {
            showLoading(false);
            clearInputs();
        }
    }

    function wireInput(id) {
        const el = document.getElementById(id);
        if (!el) return;
        el.addEventListener('change', function () {
            const f = this.files && this.files[0];
            if (f) uploadFile(f);
        });
    }
    ['inpCameraPhoto', 'inpCameraVideo', 'inpGalleryImage', 'inpGalleryVideo', 'inpAnyFile'].forEach(wireInput);

    document.getElementById('btnShare').addEventListener('click', async function () {
        if (!currentUrl) {
            showMessage('没有可分享的链接', 'error');
            return;
        }
        if (navigator.share) {
            try {
                await navigator.share({ title: '附件链接', text: currentFilename, url: currentUrl });
                return;
            } catch (e) {
                if (e.name === 'AbortError') return;
            }
        }
        try {
            await navigator.clipboard.writeText(currentUrl);
            showMessage('链接已复制到剪贴板');
        } catch (e) {
            urlBox.style.display = 'block';
            urlBox.textContent = currentUrl;
            showMessage('请手动复制上方链接', 'error');
        }
    });

    document.getElementById('btnDelete').addEventListener('click', async function () {
        if (!confirm('确定删除当前附件？')) return;
        showLoading(true);
        try {
            const r = await fetch('/api/attachment_test', { method: 'DELETE' });
            const data = await r.json();
            if (data.success) {
                showMessage(data.message || '已删除');
                renderPreview({ has_file: false });
            } else {
                showMessage(data.message || '删除失败', 'error');
            }
        } catch (e) {
            showMessage('删除失败: ' + e.message, 'error');
        } finally {
            showLoading(false);
        }
    });

    refreshStatus();
})();
</script>
{% endblock %}