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;
    }
    .attachment-ua-footer {
        margin-top: 28px;
        padding-top: 20px;
        border-top: 1px solid #e8e8e8;
    }
    .attachment-ua-label {
        font-size: 0.85em;
        color: #888;
        margin-bottom: 8px;
    }
    .attachment-ua-text {
        margin: 0;
        padding: 12px 14px;
        background: #f4f6f8;
        border-radius: 8px;
        font-size: 0.75em;
        line-height: 1.45;
        color: #444;
        white-space: pre-wrap;
        word-break: break-all;
        font-family: ui-monospace, Consolas, monospace;
        max-height: 200px;
        overflow-y: auto;
    }
</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" id="btnCameraPhoto">拍照</button>
            <button type="button" class="btn btn-primary" id="btnCameraVideo">拍视频</button>
            <button type="button" class="btn btn-info" id="btnGalleryImage">相册图片</button>
            <button type="button" class="btn btn-info" id="btnGalleryVideo">相册视频</button>
            <button type="button" class="btn btn-warning" id="btnAnyFile">选择文件</button>
        </div>
        <p id="uniappHint" style="display:none;color:#666;font-size:0.9em;margin-bottom:12px;">当前为 UniApp WebView，已使用原生拍照/录像/相册与上传通道。</p>

        <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 class="attachment-ua-footer" id="uaFooter" aria-label="浏览器标识">
            <div class="attachment-ua-label">浏览器 User-Agent</div>
            <pre id="userAgentText" class="attachment-ua-text"></pre>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('main.serve_templates_js', filename='im-sdk.js') }}"></script>
<script>
(function () {
    let currentUrl = '';
    let currentFilename = '';

    const previewWrap = document.getElementById('previewWrap');
    const previewActions = document.getElementById('previewActions');
    const urlBox = document.getElementById('urlBox');
    const uniappHint = document.getElementById('uniappHint');
    const userAgentText = document.getElementById('userAgentText');
    if (userAgentText) {
        userAgentText.textContent = navigator.userAgent || '(不可用)';
    }

    function useUniNative() {
        return window.imSDK && typeof imSDK.isUniAppIm === 'function' && imSDK.isUniAppIm();
    }

    function refreshUniHint() {
        if (uniappHint && useUniNative()) uniappHint.style.display = 'block';
    }
    refreshUniHint();
    setTimeout(refreshUniHint, 400);

    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 parseNativeUploadResponse(res) {
        if (res == null) return null;
        if (typeof res === 'string') {
            try { return JSON.parse(res); } catch (e) { return null; }
        }
        if (typeof res.data === 'string') {
            try { return JSON.parse(res.data); } catch (e) { return null; }
        }
        if (res.data && typeof res.data === 'object') return res.data;
        return res;
    }

    function nativeTempPath(res) {
        if (!res) return '';
        if (res.tempFilePaths && res.tempFilePaths.length) return res.tempFilePaths[0];
        if (res.tempFilePath) return res.tempFilePath;
        if (res.apFilePath) return res.apFilePath;
        return '';
    }

    function uploadNativePath(filePath) {
        if (!filePath) {
            showMessage('未获取到本地文件路径', 'error');
            return;
        }
        var uploadUrl = window.location.origin + '/api/attachment_test/upload';
        var timeoutId = setTimeout(function () {
            showLoading(false);
            showMessage('上传超时，请检查 App 是否实现 uploadFile 与 Cookie', 'error');
        }, 120000);
        showLoading(true);
        imSDK.uploadFile({
            url: uploadUrl,
            filePath: filePath,
            name: 'file',
            success: function (res) {
                clearTimeout(timeoutId);
                showLoading(false);
                var data = parseNativeUploadResponse(res);
                if (data && data.success) {
                    showMessage(data.message || '上传成功');
                    renderPreview({
                        has_file: true,
                        filename: data.filename,
                        url: data.url
                    });
                } else {
                    showMessage((data && data.message) || '上传失败', 'error');
                }
            }
        });
    }

    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);

    function triggerFileInput(id) {
        var el = document.getElementById(id);
        if (el) el.click();
    }

    document.getElementById('btnCameraPhoto').addEventListener('click', function () {
        if (useUniNative()) {
            imSDK.chooseImage({
                count: 1,
                sourceType: ['camera'],
                success: function (res) { uploadNativePath(nativeTempPath(res)); }
            });
        } else {
            triggerFileInput('inpCameraPhoto');
        }
    });
    document.getElementById('btnCameraVideo').addEventListener('click', function () {
        if (useUniNative()) {
            imSDK.chooseVideo({
                sourceType: ['camera'],
                maxDuration: 120,
                camera: 'back',
                success: function (res) { uploadNativePath(nativeTempPath(res)); }
            });
        } else {
            triggerFileInput('inpCameraVideo');
        }
    });
    document.getElementById('btnGalleryImage').addEventListener('click', function () {
        if (useUniNative()) {
            imSDK.chooseImage({
                count: 1,
                sourceType: ['album'],
                success: function (res) { uploadNativePath(nativeTempPath(res)); }
            });
        } else {
            triggerFileInput('inpGalleryImage');
        }
    });
    document.getElementById('btnGalleryVideo').addEventListener('click', function () {
        if (useUniNative()) {
            imSDK.chooseVideo({
                sourceType: ['album'],
                maxDuration: 120,
                camera: 'back',
                success: function (res) { uploadNativePath(nativeTempPath(res)); }
            });
        } else {
            triggerFileInput('inpGalleryVideo');
        }
    });
    document.getElementById('btnAnyFile').addEventListener('click', function () {
        if (useUniNative()) {
            imSDK.chooseFile({
                count: 1,
                extension: [],
                success: function (res) {
                    var path = nativeTempPath(res);
                    if (!path && res.tempFiles && res.tempFiles[0]) path = res.tempFiles[0].path;
                    uploadNativePath(path);
                }
            });
        } else {
            triggerFileInput('inpAnyFile');
        }
    });

    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 %}