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;
    }
    .attachment-fault-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 5000;
        align-items: center;
        justify-content: center;
        padding: 16px;
        box-sizing: border-box;
    }
    .attachment-fault-modal.is-open {
        display: flex;
    }
    .attachment-fault-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.45);
    }
    .attachment-fault-dialog {
        position: relative;
        background: #fff;
        border-radius: 12px;
        max-width: 520px;
        width: 100%;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }
    .attachment-fault-dialog h3 {
        margin: 0;
        padding: 16px 18px 8px;
        font-size: 1.1em;
        color: #c62828;
    }
    .attachment-fault-body {
        margin: 0 18px 12px;
        padding: 12px;
        background: #fff5f5;
        border: 1px solid #ffcdd2;
        border-radius: 8px;
        font-size: 0.8em;
        line-height: 1.45;
        color: #333;
        white-space: pre-wrap;
        word-break: break-word;
        font-family: ui-monospace, Consolas, monospace;
        overflow-y: auto;
        max-height: min(50vh, 320px);
    }
    .attachment-fault-actions {
        padding: 0 18px 16px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .attachment-log-panel {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #e8e8e8;
    }
    .attachment-log-panel.collapsed .attachment-log-body {
        display: none;
    }
    .attachment-log-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }
    .attachment-log-toolbar .attachment-ua-label {
        margin-bottom: 0;
        flex: 1 1 auto;
    }
    .attachment-log-body {
        margin: 0;
        padding: 12px 14px;
        background: #1e1e1e;
        color: #d4d4d4;
        border-radius: 8px;
        font-size: 0.7em;
        line-height: 1.4;
        white-space: pre-wrap;
        word-break: break-word;
        font-family: ui-monospace, Consolas, monospace;
        max-height: 240px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
</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 class="attachment-log-panel" id="screenLogPanel" aria-label="运行日志">
            <div class="attachment-log-toolbar">
                <span class="attachment-ua-label">运行日志（手机端无开发者工具时可在此查看）</span>
                <button type="button" class="btn btn-info" id="btnLogToggle" style="padding:8px 14px;font-size:0.85em;">收起</button>
                <button type="button" class="btn btn-warning" id="btnLogClear" style="padding:8px 14px;font-size:0.85em;">清空</button>
                <button type="button" class="btn btn-primary" id="btnLogCopy" style="padding:8px 14px;font-size:0.85em;">复制全部</button>
            </div>
            <pre id="screenLog" class="attachment-log-body" role="log"></pre>
        </div>
    </div>

    <div id="faultModal" class="attachment-fault-modal" role="dialog" aria-modal="true" aria-labelledby="faultModalTitle" aria-hidden="true">
        <div class="attachment-fault-backdrop" id="faultModalBackdrop"></div>
        <div class="attachment-fault-dialog">
            <h3 id="faultModalTitle">故障信息</h3>
            <pre id="faultModalBody" class="attachment-fault-body"></pre>
            <div class="attachment-fault-actions">
                <button type="button" class="btn btn-info" id="faultModalCopy">复制详情</button>
                <button type="button" class="btn btn-primary" id="faultModalClose">确定</button>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';
    var MAX_LINES = 200;
    var buffer = [];
    function fmtArg(a) {
        if (a instanceof Error) {
            return a.message + (a.stack ? '\n' + a.stack : '');
        }
        if (typeof a === 'object' && a !== null) {
            try {
                return JSON.stringify(a);
            } catch (e) {
                return String(a);
            }
        }
        return String(a);
    }
    function flushScreenLog() {
        var el = document.getElementById('screenLog');
        if (!el) return;
        el.textContent = buffer.join('\n');
        el.scrollTop = el.scrollHeight;
    }
    function appendScreenLog(level, args) {
        var t = new Date().toISOString().slice(11, 23);
        var msg = [].slice.call(args).map(fmtArg).join(' ');
        var line = '[' + t + '] ' + level + ' ' + msg;
        buffer.push(line);
        if (buffer.length > MAX_LINES) {
            buffer.shift();
        }
        flushScreenLog();
    }
    function patchConsole() {
        if (typeof console === 'undefined') return;
        ['log', 'warn', 'error', 'info', 'debug'].forEach(function (name) {
            var orig = console[name];
            if (typeof orig !== 'function') return;
            console[name] = function () {
                try {
                    orig.apply(console, arguments);
                } catch (e) { /* ignore */ }
                appendScreenLog(name.toUpperCase(), arguments);
            };
        });
    }
    window.__attachmentLogAppend = function (level, str) {
        appendScreenLog(level || 'LOG', [str]);
    };
    window.__attachmentLogClear = function () {
        buffer = [];
        flushScreenLog();
    };
    window.__attachmentLogGetText = function () {
        return buffer.join('\n');
    };
    patchConsole();
    window.addEventListener('error', function (ev) {
        appendScreenLog('WINDOW', [
            (ev.message || '') + ' @' + (ev.filename || '') + ':' + (ev.lineno || 0) + ':' + (ev.colno || 0)
        ]);
    });
    window.addEventListener('unhandledrejection', function (ev) {
        var r = ev.reason;
        appendScreenLog('REJECT', [r instanceof Error ? r : String(r)]);
    });
})();
</script>
<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 || '(不可用)';
    }

    var faultModal = document.getElementById('faultModal');
    var faultModalBody = document.getElementById('faultModalBody');
    var faultModalTitle = document.getElementById('faultModalTitle');
    var faultModalBackdrop = document.getElementById('faultModalBackdrop');
    var faultModalClose = document.getElementById('faultModalClose');
    var faultModalCopy = document.getElementById('faultModalCopy');
    var lastFaultText = '';

    function formatErrorDetail(err) {
        if (err == null) return '(无详情)';
        if (err instanceof Error) {
            return err.name + ': ' + err.message + (err.stack ? '\n\n' + err.stack : '');
        }
        if (typeof err === 'string') return err;
        try {
            return JSON.stringify(err, null, 2);
        } catch (e) {
            return String(err);
        }
    }

    function showFaultModal(title, detail) {
        var text = formatErrorDetail(detail);
        lastFaultText = (title ? title + '\n\n' : '') + text;
        if (faultModalTitle) faultModalTitle.textContent = title || '故障信息';
        if (faultModalBody) faultModalBody.textContent = lastFaultText;
        if (faultModal) {
            faultModal.classList.add('is-open');
            faultModal.setAttribute('aria-hidden', 'false');
        }
        console.error('[attachment-test]', title || 'fault', detail);
    }

    function hideFaultModal() {
        if (faultModal) {
            faultModal.classList.remove('is-open');
            faultModal.setAttribute('aria-hidden', 'true');
        }
    }

    if (faultModalClose) faultModalClose.addEventListener('click', hideFaultModal);
    if (faultModalBackdrop) faultModalBackdrop.addEventListener('click', hideFaultModal);
    if (faultModalCopy) {
        faultModalCopy.addEventListener('click', function () {
            if (!lastFaultText) return;
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(lastFaultText).then(function () {
                    showMessage('故障详情已复制到剪贴板');
                }).catch(function (e) {
                    showFaultModal('复制失败', e);
                });
            } else {
                showFaultModal('无法复制', '当前环境不支持 clipboard API');
            }
        });
    }
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && faultModal && faultModal.classList.contains('is-open')) {
            hideFaultModal();
        }
    });

    var screenLogPanel = document.getElementById('screenLogPanel');
    var btnLogToggle = document.getElementById('btnLogToggle');
    var btnLogClear = document.getElementById('btnLogClear');
    var btnLogCopy = document.getElementById('btnLogCopy');
    if (btnLogToggle && screenLogPanel) {
        btnLogToggle.addEventListener('click', function () {
            var collapsed = screenLogPanel.classList.toggle('collapsed');
            btnLogToggle.textContent = collapsed ? '展开' : '收起';
        });
    }
    if (btnLogClear && window.__attachmentLogClear) {
        btnLogClear.addEventListener('click', function () {
            window.__attachmentLogClear();
            if (window.__attachmentLogAppend) {
                window.__attachmentLogAppend('LOG', '日志已清空');
            }
        });
    }
    if (btnLogCopy) {
        btnLogCopy.addEventListener('click', function () {
            var text = window.__attachmentLogGetText ? window.__attachmentLogGetText() : '';
            if (!text) {
                showMessage('暂无日志', 'error');
                return;
            }
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(function () {
                    showMessage('日志已复制');
                }).catch(function (e) {
                    showFaultModal('复制日志失败', e);
                });
            } else {
                showFaultModal('无法复制', '当前环境不支持 clipboard');
            }
        });
    }
    if (window.__attachmentLogAppend) {
        window.__attachmentLogAppend('LOG', '运行日志已启用（含 im-sdk 与页面内 console）');
    }

    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 '';
    }

    /** 选择图片/视频成功回调：处理 im-sdk 超时或 postMessage 失败返回的 errMsg */
    function handleNativePickResult(res) {
        try {
            if (res && res.errMsg) {
                showFaultModal('原生调用失败', res.errMsg);
                return;
            }
            uploadNativePath(nativeTempPath(res));
        } catch (e) {
            showFaultModal('处理原生选择结果时异常', e);
        }
    }

    function uploadNativePath(filePath) {
        try {
            if (!filePath) {
                showFaultModal('未获取到文件路径', '壳子未返回 tempFilePath / tempFilePaths，或用户取消选择');
                return;
            }
            var uploadUrl = window.location.origin + '/api/attachment_test/upload';
            var timeoutId = setTimeout(function () {
                showLoading(false);
                showFaultModal('上传超时', '120 秒内未完成。请检查 App 是否实现 uploadFile、接口是否可达、Cookie 是否携带');
            }, 120000);
            showLoading(true);
            imSDK.uploadFile({
                url: uploadUrl,
                filePath: filePath,
                name: 'file',
                success: function (res) {
                    try {
                        clearTimeout(timeoutId);
                        showLoading(false);
                        if (res && res.errMsg) {
                            showFaultModal('上传通道失败', res.errMsg);
                            return;
                        }
                        var data = parseNativeUploadResponse(res);
                        if (data && data.success) {
                            showMessage(data.message || '上传成功');
                            renderPreview({
                                has_file: true,
                                filename: data.filename,
                                url: data.url
                            });
                        } else {
                            showFaultModal('服务器返回失败', (data && data.message) ? data.message : JSON.stringify(data));
                        }
                    } catch (e) {
                        showLoading(false);
                        clearTimeout(timeoutId);
                        showFaultModal('解析上传结果异常', e);
                    }
                }
            });
        } catch (e) {
            showLoading(false);
            showFaultModal('发起原生上传异常', e);
        }
    }

    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) {
            showFaultModal('加载附件状态失败', e);
        }
    }

    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 {
                showFaultModal('上传被拒绝', data.message || JSON.stringify(data));
            }
        } catch (e) {
            showFaultModal('浏览器上传失败', e);
        } 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) return;
            uploadFile(f);
        });
    }
    ['inpCameraPhoto', 'inpCameraVideo', 'inpGalleryImage', 'inpGalleryVideo', 'inpAnyFile'].forEach(wireInput);

    function triggerFileInput(id) {
        try {
            var el = document.getElementById(id);
            if (el) el.click();
        } catch (e) {
            showFaultModal('无法打开文件选择', e);
        }
    }

    document.getElementById('btnCameraPhoto').addEventListener('click', function () {
        try {
            if (useUniNative()) {
                imSDK.chooseImage({
                    count: 1,
                    sourceType: ['camera'],
                    success: handleNativePickResult
                });
            } else {
                triggerFileInput('inpCameraPhoto');
            }
        } catch (e) {
            showFaultModal('拍照', e);
        }
    });
    document.getElementById('btnCameraVideo').addEventListener('click', function () {
        try {
            if (useUniNative()) {
                imSDK.chooseVideo({
                    sourceType: ['camera'],
                    maxDuration: 120,
                    camera: 'back',
                    success: handleNativePickResult
                });
            } else {
                triggerFileInput('inpCameraVideo');
            }
        } catch (e) {
            showFaultModal('拍视频', e);
        }
    });
    document.getElementById('btnGalleryImage').addEventListener('click', function () {
        try {
            if (useUniNative()) {
                imSDK.chooseImage({
                    count: 1,
                    sourceType: ['album'],
                    success: handleNativePickResult
                });
            } else {
                triggerFileInput('inpGalleryImage');
            }
        } catch (e) {
            showFaultModal('相册图片', e);
        }
    });
    document.getElementById('btnGalleryVideo').addEventListener('click', function () {
        try {
            if (useUniNative()) {
                imSDK.chooseVideo({
                    sourceType: ['album'],
                    maxDuration: 120,
                    camera: 'back',
                    success: handleNativePickResult
                });
            } else {
                triggerFileInput('inpGalleryVideo');
            }
        } catch (e) {
            showFaultModal('相册视频', e);
        }
    });
    document.getElementById('btnAnyFile').addEventListener('click', function () {
        try {
            if (useUniNative()) {
                imSDK.chooseFile({
                    count: 1,
                    extension: [],
                    success: function (res) {
                        try {
                            if (res && res.errMsg) {
                                showFaultModal('原生选择文件失败', res.errMsg);
                                return;
                            }
                            var path = nativeTempPath(res);
                            if (!path && res.tempFiles && res.tempFiles[0]) path = res.tempFiles[0].path;
                            uploadNativePath(path);
                        } catch (e) {
                            showFaultModal('处理选择文件结果异常', e);
                        }
                    }
                });
            } else {
                triggerFileInput('inpAnyFile');
            }
        } catch (e) {
            showFaultModal('选择文件', e);
        }
    });

    document.getElementById('btnShare').addEventListener('click', async function () {
        try {
            if (!currentUrl) {
                showFaultModal('无法分享', '当前没有可分享的附件链接，请先上传');
                return;
            }
            if (navigator.share) {
                try {
                    await navigator.share({ title: '附件链接', text: currentFilename, url: currentUrl });
                    return;
                } catch (e) {
                    if (e.name === 'AbortError') return;
                    console.warn('[attachment-test] share failed, fallback clipboard', e);
                }
            }
            try {
                await navigator.clipboard.writeText(currentUrl);
                showMessage('链接已复制到剪贴板');
            } catch (e) {
                urlBox.style.display = 'block';
                urlBox.textContent = currentUrl;
                showFaultModal('复制链接失败', e);
            }
        } catch (e) {
            showFaultModal('分享', e);
        }
    });

    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 {
                showFaultModal('删除失败', data.message || JSON.stringify(data));
            }
        } catch (e) {
            showFaultModal('删除请求异常', e);
        } finally {
            showLoading(false);
        }
    });

    window.addEventListener('unhandledrejection', function (ev) {
        console.error('[attachment-test] unhandledrejection', ev.reason);
        showFaultModal('未处理的 Promise 异常', ev.reason instanceof Error ? ev.reason : String(ev.reason));
    });

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