<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>file-transfer — 离线二维码文件传输</title>
    <style>
        :root {
            --bg: #0f172a;
            --panel: #1e293b;
            --border: #334155;
            --text: #e2e8f0;
            --text2: #94a3b8;
            --accent: #38bdf8;
            --accent2: #0ea5e9;
            --success: #34d399;
            --warn: #fbbf24;
            --danger: #f87171;
            --radius: 14px;
            --shadow: 0 4px 24px rgba(0, 0, 0, .4);
            --font: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
            --mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Menlo', 'Monaco', monospace;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: var(--bg);
            color: var(--text);
            font-family: var(--font);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
        }
        .app {
            width: 100%;
            max-width: 720px;
            background: var(--panel);
            border-radius: 20px;
            box-shadow: var(--shadow);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--border);
        }
        .header {
            padding: 18px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            background: #1a2740;
        }
        .header .logo {
            font-size: 1.3rem;
            font-weight: 700;
            letter-spacing: -.02em;
            color: var(--accent);
            white-space: nowrap;
        }
        .header .badge {
            font-size: .7rem;
            padding: 4px 10px;
            border-radius: 20px;
            background: #0f1f33;
            color: var(--text2);
            border: 1px solid var(--border);
            letter-spacing: .03em;
            white-space: nowrap;
        }
        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
            background: #182133;
        }
        .tab-btn {
            flex: 1;
            padding: 14px 20px;
            border: none;
            background: transparent;
            color: var(--text2);
            font-size: .95rem;
            cursor: pointer;
            font-family: var(--font);
            font-weight: 600;
            letter-spacing: .02em;
            transition: all .2s;
            position: relative;
            white-space: nowrap;
        }
        .tab-btn.active {
            color: var(--accent);
            background: #1a2a3f;
        }
        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 20%;
            right: 20%;
            height: 3px;
            background: var(--accent);
            border-radius: 3px 3px 0 0;
        }
        .tab-btn:hover {
            color: #cbd5e1;
            background: #1a2838;
        }
        .tab-btn:active {
            background: #162433;
        }
        .content {
            padding: 20px 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            flex: 1;
            min-height: 420px;
        }
        .panel {
            display: none;
            flex-direction: column;
            gap: 16px;
            flex: 1;
        }
        .panel.active {
            display: flex;
        }
        .card {
            background: #1a2740;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .card-title {
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--text2);
            font-weight: 600;
        }
        .row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }
        .row.gap-sm {
            gap: 6px;
        }
        .btn {
            padding: 10px 18px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: #1e3550;
            color: var(--text);
            cursor: pointer;
            font-family: var(--font);
            font-size: .88rem;
            font-weight: 600;
            letter-spacing: .02em;
            transition: all .2s;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 42px;
        }
        .btn:hover {
            background: #264060;
            border-color: #4b6b90;
        }
        .btn:active {
            background: #1a2f48;
            transform: scale(.97);
        }
        .btn.accent {
            background: var(--accent2);
            border-color: var(--accent2);
            color: #fff;
            font-weight: 700;
        }
        .btn.accent:hover {
            background: #38bdf8;
            border-color: #38bdf8;
        }
        .btn.success {
            background: #059669;
            border-color: #059669;
            color: #fff;
        }
        .btn.danger {
            background: #b91c1c;
            border-color: #b91c1c;
            color: #fff;
        }
        .btn:disabled {
            opacity: .45;
            pointer-events: none;
            cursor: not-allowed;
        }
        .btn.sm {
            padding: 6px 12px;
            font-size: .78rem;
            min-height: 32px;
            border-radius: 8px;
        }
        input[type="file"] {
            display: none;
        }
        .file-label {
            cursor: pointer;
            padding: 14px 20px;
            border: 2px dashed var(--border);
            border-radius: var(--radius);
            text-align: center;
            color: var(--text2);
            transition: all .2s;
            font-size: .9rem;
            background: #151f30;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .file-label:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: #1a2a3f;
        }
        .file-label.has-file {
            border-color: var(--success);
            color: var(--success);
            border-style: solid;
        }
        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 4px;
            background: #334155;
            outline: none;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--accent);
            cursor: pointer;
            border: 2px solid #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
        }
        .setting-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1;
            min-width: 100px;
        }
        .setting-group label {
            font-size: .75rem;
            color: var(--text2);
            letter-spacing: .04em;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
        }
        .setting-group label span.val {
            color: var(--accent);
            font-family: var(--mono);
        }
        .canvas-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
            border-radius: var(--radius);
            overflow: hidden;
            position: relative;
            min-height: 260px;
            border: 1px solid var(--border);
        }
        .canvas-wrap canvas {
            display: block;
            max-width: 100%;
            height: auto;
            image-rendering: pixelated;
        }
        .canvas-wrap .overlay-status {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, .75);
            color: #fff;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: .78rem;
            font-weight: 600;
            letter-spacing: .04em;
            pointer-events: none;
            font-family: var(--mono);
        }
        .progress-bar-wrap {
            background: #334155;
            border-radius: 10px;
            height: 14px;
            overflow: hidden;
            position: relative;
        }
        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #0ea5e9, #38bdf8);
            border-radius: 10px;
            transition: width .3s;
            width: 0%;
        }
        .progress-text {
            font-size: .75rem;
            color: var(--text2);
            font-family: var(--mono);
            text-align: center;
        }
        .chunk-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 3px;
            max-height: 80px;
            overflow-y: auto;
            padding: 4px;
        }
        .chunk-dot {
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background: #334155;
            flex-shrink: 0;
            transition: background .2s;
        }
        .chunk-dot.received {
            background: var(--success);
        }
        .chunk-dot.missing {
            background: var(--danger);
        }
        .toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            color: #fff;
            padding: 10px 20px;
            border-radius: 24px;
            font-size: .85rem;
            font-weight: 600;
            letter-spacing: .02em;
            z-index: 999;
            pointer-events: none;
            opacity: 0;
            transition: opacity .3s;
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
        }
        .toast.show {
            opacity: 1;
        }
        @media (max-width: 500px) {
            .content {
                padding: 12px 10px;
                gap: 10px;
            }
            .card {
                padding: 12px 10px;
                gap: 6px;
            }
            .btn {
                padding: 8px 12px;
                font-size: .8rem;
                min-height: 36px;
                border-radius: 8px;
            }
            .header {
                padding: 12px 14px;
                gap: 6px;
            }
            .header .logo {
                font-size: 1.1rem;
            }
            .tab-btn {
                padding: 10px 12px;
                font-size: .82rem;
            }
            .canvas-wrap {
                min-height: 200px;
            }
            .row {
                gap: 6px;
            }
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="header">
            <span class="logo">📦 file-transfer</span>
            <span class="badge">离线 · 二维码传输</span>
            <span class="badge" id="browserSupport" style="background:#0f331f;color:#34d399;">🔍 检测中...</span>
        </div>
        <div class="tabs">
            <button class="tab-btn active" data-tab="send">📤 发送文件</button>
            <button class="tab-btn" data-tab="receive">📥 接收文件</button>
        </div>
        <div class="content">
            <!-- 发送面板 -->
            <div class="panel active" id="panel-send">
                <div class="card">
                    <div class="card-title">📎 选择文件</div>
                    <label class="file-label" id="fileLabel" for="fileInput">
                        <span>📁 点击选择文件 或拖放到此处</span>
                    </label>
                    <input type="file" id="fileInput">
                    <div class="row gap-sm" style="font-size:.75rem;color:var(--text2);" id="fileInfo"></div>
                </div>
                <div class="card">
                    <div class="card-title">⚙️ 传输参数</div>
                    <div class="row">
                        <div class="setting-group">
                            <label>分块大小 <span class="val" id="valChunkSize">400</span> 字符</label>
                            <input type="range" id="chunkSize" min="150" max="800" value="400" step="10">
                        </div>
                        <div class="setting-group">
                            <label>帧率 <span class="val" id="valFPS">3</span> FPS</label>
                            <input type="range" id="fps" min="1" max="10" value="3" step="1">
                        </div>
                    </div>
                    <div class="row">
                        <div class="setting-group">
                            <label>ECC纠错 <span class="val" id="valECC">M</span></label>
                            <input type="range" id="ecc" min="0" max="3" value="1" step="1" style="width:100%;">
                            <span style="font-size:.65rem;color:var(--text2);">L(0) / M(1) / Q(2) / H(3)</span>
                        </div>
                        <div class="setting-group">
                            <label>QR码尺寸 <span class="val" id="valQRSize">320</span> px</label>
                            <input type="range" id="qrSize" min="200" max="500" value="320" step="20">
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">📺 二维码播放</div>
                    <div class="canvas-wrap" id="sendCanvasWrap">
                        <canvas id="sendCanvas"></canvas>
                        <div class="overlay-status" id="sendStatus">⏳ 等待开始</div>
                    </div>
                    <div class="row" style="justify-content:center;">
                        <button class="btn accent" id="btnStart">▶ 开始播放</button>
                        <button class="btn" id="btnPause" disabled>⏸ 暂停</button>
                        <button class="btn danger" id="btnStop" disabled>⏹ 停止</button>
                    </div>
                    <div class="progress-text" id="sendProgress"></div>
                </div>
            </div>
            <!-- 接收面板 -->
            <div class="panel" id="panel-receive">
                <div class="card">
                    <div class="card-title">📷 摄像头扫描</div>
                    <div class="canvas-wrap" id="receiveCanvasWrap" style="position:relative;">
                        <video id="receiveVideo" autoplay playsinline muted style="display:none;"></video>
                        <canvas id="receiveCanvas" style="width:100%;max-width:400px;"></canvas>
                        <div class="overlay-status" id="receiveStatus">🔴 摄像头未启动</div>
                    </div>
                    <div class="row" style="justify-content:center;">
                        <button class="btn accent" id="btnStartCam">📷 启动摄像头</button>
                        <button class="btn danger" id="btnStopCam" disabled>⏹ 停止</button>
                    </div>
                </div>
                <div class="card" id="receiveInfoCard" style="display:none;">
                    <div class="card-title">📋 传输信息</div>
                    <div style="font-size:.82rem;color:var(--text2);" id="receiveFileInfo"></div>
                    <div class="progress-bar-wrap"><div class="progress-bar-fill" id="receiveProgressBar"></div></div>
                    <div class="progress-text" id="receiveProgressText">0 / 0 分块</div>
                    <div class="chunk-grid" id="chunkGrid"></div>
                    <div class="row gap-sm" style="flex-wrap:wrap;" id="missingInfo"></div>
                </div>
                <div class="card" id="downloadCard" style="display:none;">
                    <div class="card-title">✅ 传输完成</div>
                    <div style="font-size:.82rem;color:var(--success);" id="downloadInfo"></div>
                    <button class="btn success" id="btnDownload">⬇ 下载文件</button>
                </div>
            </div>
        </div>
    </div>
    <div class="toast" id="toast"></div>

    <script>
        (function() {
            // ============ DOM引用 ============
            const $ = (s) => document.querySelector(s);
            const $$ = (s) => document.querySelectorAll(s);

            const tabBtns = $$('.tab-btn');
            const panelSend = $('#panel-send');
            const panelReceive = $('#panel-receive');
            const fileInput = $('#fileInput');
            const fileLabel = $('#fileLabel');
            const fileInfo = $('#fileInfo');
            const chunkSizeSlider = $('#chunkSize');
            const fpsSlider = $('#fps');
            const eccSlider = $('#ecc');
            const qrSizeSlider = $('#qrSize');
            const valChunkSize = $('#valChunkSize');
            const valFPS = $('#valFPS');
            const valECC = $('#valECC');
            const valQRSize = $('#valQRSize');
            const sendCanvas = $('#sendCanvas');
            const sendCanvasWrap = $('#sendCanvasWrap');
            const sendStatus = $('#sendStatus');
            const sendProgress = $('#sendProgress');
            const btnStart = $('#btnStart');
            const btnPause = $('#btnPause');
            const btnStop = $('#btnStop');
            const receiveVideo = $('#receiveVideo');
            const receiveCanvas = $('#receiveCanvas');
            const receiveCanvasWrap = $('#receiveCanvasWrap');
            const receiveStatus = $('#receiveStatus');
            const btnStartCam = $('#btnStartCam');
            const btnStopCam = $('#btnStopCam');
            const receiveInfoCard = $('#receiveInfoCard');
            const receiveFileInfo = $('#receiveFileInfo');
            const receiveProgressBar = $('#receiveProgressBar');
            const receiveProgressText = $('#receiveProgressText');
            const chunkGrid = $('#chunkGrid');
            const missingInfo = $('#missingInfo');
            const downloadCard = $('#downloadCard');
            const downloadInfo = $('#downloadInfo');
            const btnDownload = $('#btnDownload');
            const toast = $('#toast');
            const browserSupport = $('#browserSupport');

            // ============ 状态变量 ============
            let selectedFile = null;
            let fileArrayBuffer = null;
            let chunks = []; // [{idx, base64str}]
            let headerStr = '';
            let totalChunks = 0;
            let crc32Hex = '';
            let isPlaying = false;
            let isPaused = false;
            let playInterval = null;
            let playIndex = 0; // 0=header, 1..N=chunks
            let fps = 3;
            let chunkSize = 400;
            let eccLevel = 1; // 0=L,1=M,2=Q,3=H
            let qrSize = 320;

            // 接收状态
            let receiveStream = null;
            let receiveHeader = null; // {total, filename, sizeBytes, crc32hex}
            let receivedChunks = {}; // {idx: base64str}
            let receiveScanning = false;
            let lastScannedData = new Set(); // 去重近期扫描结果
            let scanDedupWindow = 800; // ms内相同数据去重
            let lastScanTime = 0;

            // ============ 工具函数 ============
            function showToast(msg, duration = 1800) {
                toast.textContent = msg;
                toast.classList.add('show');
                clearTimeout(toast._timeout);
                toast._timeout = setTimeout(() => toast.classList.remove('show'), duration);
            }

            function formatBytes(bytes) {
                if (bytes < 1024) return bytes + ' B';
                if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
                return (bytes / 1048576).toFixed(2) + ' MB';
            }

            function base64ToArrayBuffer(base64) {
                const binary = atob(base64);
                const len = binary.length;
                const buf = new ArrayBuffer(len);
                const view = new Uint8Array(buf);
                for (let i = 0; i < len; i++) view[i] = binary.charCodeAt(i);
                return buf;
            }

            function arrayBufferToBase64(buffer) {
                const bytes = new Uint8Array(buffer);
                let binary = '';
                for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
                return btoa(binary);
            }

            // CRC32 (标准实现，与常见crc32包兼容)
            function crc32(buf) {
                const table = new Int32Array(256);
                for (let i = 0; i < 256; i++) {
                    let c = i;
                    for (let j = 0; j < 8; j++) c = (c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1);
                    table[i] = c;
                }
                const bytes = new Uint8Array(buf);
                let crc = 0xFFFFFFFF;
                for (let i = 0; i < bytes.length; i++) {
                    crc = table[(crc ^ bytes[i]) & 0xFF] ^ (crc >>> 8);
                }
                crc = (crc ^ 0xFFFFFFFF) >>> 0;
                return crc.toString(16).padStart(8, '0');
            }

            // ============ QR码生成器(内嵌精简版) ============
            // 基于 Kazuhiko Arase 的 qrcode-generator (MIT License)
            const QRCodeGen = (function() {
                const PAD0 = 0xEC;
                const PAD1 = 0x11;

                function createBytes(data) {
                    const bytes = [];
                    for (let i = 0; i < data.length; i++) {
                        const c = data.charCodeAt(i);
                        if (c < 0x80) { bytes.push(c); } else if (c < 0x800) { bytes.push(0xC0 | (c >> 6),
                                0x80 | (c & 0x3F)); } else if (c < 0x10000) { bytes.push(0xE0 | (c >> 12), 0x80 | ((
                                c >> 6) & 0x3F), 0x80 | (c & 0x3F)); } else { bytes.push(0xF0 | (c >> 18), 0x80 | ((
                                c >> 12) & 0x3F), 0x80 | ((c >> 6) & 0x3F), 0x80 | (c & 0x3F)); }
                    }
                    return bytes;
                }

                function gfMul(a, b) {
                    let r = 0;
                    for (let i = 0; i < 8; i++) { if (b & 1) r ^= a;
                        const hi = a & 0x80;
                        a = (a << 1) & 0xFF; if (hi) a ^= 0x1D;
                        b >>= 1; }
                    return r;
                }

                function generatePoly(degree) {
                    let p = [1];
                    for (let i = 0; i < degree; i++) {
                        p.push(0);
                        for (let j = p.length - 1; j > 0; j--) p[j] = p[j - 1] ^ gfMul(p[j], i + 1);
                        p[0] = gfMul(p[0], i + 1);
                    }
                    return p;
                }

                function rsEncode(data, ecCount) {
                    const gen = generatePoly(ecCount);
                    let res = new Array(data.length + ecCount).fill(0);
                    for (let i = 0; i < data.length; i++) res[i] = data[i];
                    for (let i = 0; i < data.length; i++) {
                        const coef = res[i];
                        if (coef !== 0) {
                            for (let j = 0; j < gen.length; j++) res[i + j] ^= gfMul(gen[j], coef);
                        }
                    }
                    for (let i = 0; i < data.length; i++) res[i] = data[i];
                    return res;
                }

                const ECC_CODEWORDS = [
                    [7, 10, 13, 17],
                    [10, 16, 22, 28],
                    [15, 26, 36, 44],
                    [20, 34, 48, 60],
                    [26, 44, 62, 76],
                    [34, 58, 82, 102],
                    [42, 72, 102, 126],
                    [52, 88, 124, 152],
                    [64, 110, 154, 190],
                    [76, 132, 186, 230],
                    [90, 156, 220, 272],
                    [106, 184, 260, 322],
                    [124, 216, 304, 376],
                    [144, 252, 354, 438],
                    [166, 290, 408, 504],
                    [190, 334, 468, 580],
                    [216, 380, 534, 660],
                    [244, 430, 604, 746],
                    [274, 484, 678, 838],
                    [306, 540, 756, 934],
                    [340, 600, 840, 1038],
                    [376, 664, 930, 1148],
                    [414, 732, 1024, 1264],
                    [454, 802, 1122, 1384],
                    [496, 876, 1224, 1510],
                    [540, 954, 1332, 1642],
                    [586, 1036, 1446, 1782],
                    [634, 1120, 1564, 1928],
                    [684, 1208, 1686, 2078],
                    [736, 1300, 1812, 2232],
                    [790, 1396, 1944, 2396],
                    [846, 1494, 2080, 2564],
                    [904, 1596, 2220, 2736],
                    [964, 1702, 2366, 2914],
                    [1026, 1812, 2518, 3102],
                    [1090, 1926, 2674, 3294],
                    [1156, 2042, 2834, 3490],
                    [1224, 2162, 2998, 3692],
                    [1294, 2286, 3166, 3898],
                    [1366, 2414, 3338, 4108]
                ];
                const TOTAL_CODEWORDS = [26, 44, 70, 100, 134, 172, 196, 242, 292, 346, 404, 466, 532, 581, 655, 733, 815,
                    901, 991, 1085, 1156, 1258, 1364, 1474, 1588, 1706, 1828, 1921, 2051, 2185, 2323, 2465, 2611, 2761,
                    2876, 3034, 3196, 3362, 3532, 3706
                ];
                const ALIGN_PATTERN = [
                    [],
                    [],
                    [6, 18],
                    [6, 22],
                    [6, 26],
                    [6, 30],
                    [6, 34],
                    [6, 22, 38],
                    [6, 24, 42],
                    [6, 26, 46],
                    [6, 28, 50],
                    [6, 30, 54],
                    [6, 32, 58],
                    [6, 34, 62],
                    [6, 26, 46, 66],
                    [6, 26, 48, 70],
                    [6, 26, 50, 74],
                    [6, 30, 54, 78],
                    [6, 30, 56, 82],
                    [6, 30, 58, 86],
                    [6, 34, 62, 90],
                    [6, 28, 50, 72, 94],
                    [6, 26, 50, 74, 98],
                    [6, 30, 54, 78, 102],
                    [6, 28, 54, 80, 106],
                    [6, 32, 58, 84, 110],
                    [6, 30, 58, 86, 114],
                    [6, 34, 62, 90, 118],
                    [6, 26, 50, 74, 98, 122],
                    [6, 30, 54, 78, 102, 126],
                    [6, 26, 52, 78, 104, 130],
                    [6, 30, 56, 82, 108, 134],
                    [6, 34, 60, 86, 112, 138],
                    [6, 30, 58, 86, 114, 142],
                    [6, 34, 62, 90, 118, 146],
                    [6, 30, 54, 78, 102, 126, 150],
                    [6, 24, 50, 76, 102, 128, 154],
                    [6, 28, 54, 80, 106, 132, 158],
                    [6, 32, 58, 84, 110, 136, 162],
                    [6, 26, 54, 82, 110, 138, 166],
                    [6, 30, 58, 86, 114, 142, 170]
                ];

                function getVersionForData(dataBytes, ecLevel) {
                    for (let v = 0; v < 40; v++) {
                        const totalCW = TOTAL_CODEWORDS[v];
                        const ecCW = ECC_CODEWORDS[v][ecLevel];
                        const dataCW = totalCW - ecCW;
                        if (dataBytes <= dataCW) return v + 1;
                    }
                    return null;
                }

                function makeMatrix(version, dataBytes, ecLevel) {
                    const size = version * 4 + 17;
                    const matrix = Array.from({ length: size }, () => new Array(size).fill(null));
                    // 定位图案
                    function placeFinder(r, c) {
                        for (let dr = -1; dr <= 7; dr++)
                            for (let dc = -1; dc <= 7; dc++) {
                                if (r + dr < 0 || c + dc < 0 || r + dr >= size || c + dc >= size) continue;
                                const val = (dr >= 0 && dr <= 6 && dc >= 0 && dc <= 6 && (dr === 0 || dr === 6 || dc ===
                                    0 || dc === 6 || (dr >= 2 && dr <= 4 && dc >= 2 && dc <= 4)));
                                matrix[r + dr][c + dc] = val;
                            }
                    }
                    placeFinder(0, 0);
                    placeFinder(0, size - 7);
                    placeFinder(size - 7, 0);
                    // 时序图案
                    for (let i = 8; i < size - 8; i++) matrix[i][6] = matrix[6][i] = (i % 2 === 0);
                    // 对齐图案
                    const alignPos = ALIGN_PATTERN[version - 1];
                    for (const ar of alignPos) {
                        for (const ac of alignPos) {
                            if ((ar === 0 && ac === 0) || (ar === 0 && ac === size - 7) || (ar === size - 7 && ac ===
                                0)) continue;
                            for (let dr = -2; dr <= 2; dr++)
                                for (let dc = -2; dc <= 2; dc++) {
                                    if (ar + dr < 0 || ac + dc < 0 || ar + dr >= size || ac + dc >= size) continue;
                                    matrix[ar + dr][ac + dc] = (Math.abs(dr) === 2 || Math.abs(dc) === 2 || (dr === 0 &&
                                        dc === 0));
                                }
                        }
                    }
                    // 保留区域
                    for (let i = 0; i < 8; i++) matrix[i][8] = matrix[8][i] = null;
                    for (let i = size - 8; i < size; i++) matrix[i][8] = matrix[8][i] = null;
                    matrix[size - 8][8] = true;
                    // 格式信息占位
                    for (let i = 0; i < 9; i++) { if (matrix[i][8] === null) matrix[i][8] = false; if (matrix[8][i] ===
                            null) matrix[8][i] = false; }
                    for (let i = 0; i < 8; i++) { if (matrix[size - 1 - i][8] === null) matrix[size - 1 - i][
                            8
                        ] = false; if (matrix[8][size - 1 - i] === null) matrix[8][size - 1 - i] = false; }
                    // 编码数据
                    const totalCW = TOTAL_CODEWORDS[version - 1];
                    const ecCW = ECC_CODEWORDS[version - 1][ecLevel];
                    const dataCW = totalCW - ecCW;
                    const allData = new Array(totalCW).fill(0);
                    for (let i = 0; i < dataBytes.length; i++) allData[i] = dataBytes[i];
                    // 填充
                    let ptr = dataBytes.length;
                    allData[ptr++] = 0x00;
                    while (ptr < dataCW) {
                        allData[ptr++] = PAD0;
                        if (ptr < dataCW) allData[ptr++] = PAD1;
                    }
                    const encoded = rsEncode(allData.slice(0, dataCW), ecCW);
                    for (let i = 0; i < totalCW; i++) allData[i] = encoded[i];
                    // 放置数据位
                    const bits = [];
                    for (let i = 0; i < totalCW; i++) {
                        for (let j = 7; j >= 0; j--) bits.push((allData[i] >> j) & 1);
                    }
                    let bitIdx = 0;
                    let col = size - 1;
                    let dir = -1;
                    while (col > 0) {
                        if (col === 6) col--;
                        const rows = dir === -1 ? Array.from({ length: size }, (_, i) => size - 1 - i) : Array.from({
                            length: size
                        }, (_, i) => i);
                        for (const row of rows) {
                            for (let c = col; c >= col - 1; c--) {
                                if (matrix[row][c] === null && bitIdx < bits.length) {
                                    matrix[row][c] = !!bits[bitIdx++];
                                }
                            }
                        }
                        col -= 2;
                        dir = -dir;
                    }
                    // 格式信息
                    const formatBits = [
                        [1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1],
                        [1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 1, 1],
                        [1, 1, 1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 1, 0, 1],
                        [1, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0]
                    ][ecLevel];
                    const fm = [...formatBits];
                    for (let i = 0; i < 6; i++) matrix[i][8] = fm[i];
                    for (let i = 0; i < 8; i++) matrix[8][size - 1 - i] = fm[i];
                    fm[7] = fm[8];
                    for (let i = 0; i < 6; i++) matrix[size - 6 + i][8] = fm[7 + i];
                    for (let i = 0; i < 7; i++) matrix[8][5 - i] = fm[9 + i];
                    matrix[7][8] = fm[6];
                    matrix[8][8] = fm[7];
                    matrix[8][7] = fm[8];
                    matrix[size - 7][8] = fm[14];
                    // 填充null为false
                    for (let r = 0; r < size; r++)
                        for (let c = 0; c < size; c++) { if (matrix[r][c] === null) matrix[r][c] = false; }
                    return matrix;
                }

                function renderToCanvas(matrix, canvas, moduleSize) {
                    const size = matrix.length;
                    canvas.width = size * moduleSize;
                    canvas.height = size * moduleSize;
                    const ctx = canvas.getContext('2d');
                    ctx.fillStyle = '#FFFFFF';
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    ctx.fillStyle = '#000000';
                    for (let r = 0; r < size; r++)
                        for (let c = 0; c < size; c++) {
                            if (matrix[r][c]) {
                                ctx.fillRect(c * moduleSize, r * moduleSize, moduleSize, moduleSize);
                            }
                        }
                }

                return {
                    generate(dataStr, ecLevel, canvas, moduleSize) {
                        const bytes = createBytes(dataStr);
                        const version = getVersionForData(bytes.length, ecLevel);
                        if (!version) return { error: '数据过大，无法放入单个QR码。请减小分块大小。' };
                        if (version > 40) return { error: '需要QR版本>' + version + '，超出限制。' };
                        const matrix = makeMatrix(version, bytes, ecLevel);
                        const mSize = Math.max(2, Math.floor(moduleSize / matrix.length));
                        renderToCanvas(matrix, canvas, mSize);
                        return { version, size: matrix.length, moduleSize: mSize, error: null };
                    },
                    maxBytesForECC(ecLevel) {
                        const v = 40;
                        const totalCW = TOTAL_CODEWORDS[v - 1];
                        const ecCW = ECC_CODEWORDS[v - 1][ecLevel];
                        return totalCW - ecCW - 1;
                    }
                };
            })();

            // ============ BarcodeDetector API检测 ============
            let barcodeDetectorSupported = false;
            let barcodeDetector = null;

            async function checkBarcodeDetector() {
                if ('BarcodeDetector' in window) {
                    try {
                        barcodeDetector = new BarcodeDetector({ formats: ['qr_code'] });
                        barcodeDetectorSupported = true;
                        browserSupport.textContent = '✅ BarcodeDetector';
                        browserSupport.style.background = '#0f331f';
                        browserSupport.style.color = '#34d399';
                        return true;
                    } catch (e) {
                        barcodeDetectorSupported = false;
                    }
                }
                browserSupport.textContent = '⚠ 需Chrome/Edge 83+';
                browserSupport.style.background = '#332a0f';
                browserSupport.style.color = '#fbbf24';
                return false;
            }

            // ============ 文件选择 ============
            fileInput.addEventListener('change', handleFileSelect);
            fileLabel.addEventListener('dragover', (e) => { e.preventDefault();
                fileLabel.style.borderColor = 'var(--accent)'; });
            fileLabel.addEventListener('dragleave', () => { fileLabel.style.borderColor = 'var(--border)'; });
            fileLabel.addEventListener('drop', (e) => {
                e.preventDefault();
                fileLabel.style.borderColor = 'var(--border)';
                if (e.dataTransfer.files.length > 0) {
                    fileInput.files = e.dataTransfer.files;
                    handleFileSelect();
                }
            });

            function handleFileSelect() {
                const file = fileInput.files[0];
                if (!file) return;
                selectedFile = file;
                fileLabel.classList.add('has-file');
                fileLabel.querySelector('span').textContent = '📁 ' + file.name;
                fileInfo.textContent = '大小: ' + formatBytes(file.size) + ' | 类型: ' + (file.type || '未知');
                // 读取文件
                const reader = new FileReader();
                reader.onload = function() {
                    fileArrayBuffer = reader.result;
                    crc32Hex = crc32(fileArrayBuffer);
                    fileInfo.textContent += ' | CRC32: ' + crc32Hex;
                    prepareChunks();
                };
                reader.readAsArrayBuffer(file);
            }

            function prepareChunks() {
                if (!fileArrayBuffer) return;
                const rawBytes = new Uint8Array(fileArrayBuffer);
                const chunkRawSize = Math.floor(chunkSize * 0.75);
                chunks = [];
                let offset = 0;
                let idx = 1;
                while (offset < rawBytes.length) {
                    const end = Math.min(offset + chunkRawSize, rawBytes.length);
                    const slice = rawBytes.slice(offset, end);
                    const b64 = arrayBufferToBase64(slice.buffer.slice(slice.byteOffset, slice.byteOffset + slice
                    .byteLength));
                    chunks.push({ idx, base64str: b64 });
                    offset = end;
                    idx++;
                }
                totalChunks = chunks.length;
                const filename = selectedFile ? selectedFile.name : 'file.bin';
                headerStr = 'QRX1|H|' + totalChunks + '|' + filename + '|' + fileArrayBuffer.byteLength + '|' + crc32Hex;
                updateSendUI();
            }

            function updateSendUI() {
                if (chunks.length > 0 && headerStr) {
                    btnStart.disabled = false;
                    sendProgress.textContent = '共 ' + totalChunks + ' 个数据分块 + 1 个Header | 预计循环: ' + (totalChunks +
                        1) + ' 帧 @ ' + fps + ' FPS ≈ ' + ((totalChunks + 1) / fps).toFixed(1) + ' 秒/轮';
                } else {
                    btnStart.disabled = true;
                    sendProgress.textContent = '';
                }
                valChunkSize.textContent = chunkSize;
                valFPS.textContent = fps;
                const eccNames = ['L', 'M', 'Q', 'H'];
                valECC.textContent = eccNames[eccLevel];
                valQRSize.textContent = qrSize;
            }

            // ============ 发送端播放 ============
            function getPlaySequence() {
                const seq = [{ type: 'header', data: headerStr, label: 'Header' }];
                for (const ch of chunks) {
                    seq.push({ type: 'data', data: 'QRX1|D|' + ch.idx + '|' + ch.base64str, label: 'Chunk ' + ch.idx +
                            '/' + totalChunks });
                }
                return seq;
            }

            function renderQRToCanvas(dataStr, canvas, size) {
                const ctx = canvas.getContext('2d');
                ctx.fillStyle = '#FFFFFF';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                const result = QRCodeGen.generate(dataStr, eccLevel, canvas, size);
                if (result.error) {
                    ctx.fillStyle = '#FF4444';
                    ctx.font = '14px ' + getComputedStyle(document.body).fontFamily;
                    ctx.textAlign = 'center';
                    ctx.fillText(result.error, canvas.width / 2, canvas.height / 2);
                    return result;
                }
                return result;
            }

            function displayQR(seqItem) {
                const result = renderQRToCanvas(seqItem.data, sendCanvas, qrSize);
                if (result.error) {
                    sendStatus.textContent = '⚠ ' + result.error;
                    sendStatus.style.color = '#f87171';
                } else {
                    sendStatus.textContent = '📺 ' + seqItem.label + ' | 版本' + result.version + ' | ' + result.size +
                        '×' + result.size;
                    sendStatus.style.color = '#fff';
                }
            }

            function startPlayback() {
                if (!headerStr || chunks.length === 0) {
                    showToast('⚠ 请先选择文件');
                    return;
                }
                const seq = getPlaySequence();
                if (seq.length === 0) return;
                isPlaying = true;
                isPaused = false;
                playIndex = 0;
                displayQR(seq[playIndex]);
                btnStart.disabled = true;
                btnPause.disabled = false;
                btnStop.disabled = false;
                btnPause.textContent = '⏸ 暂停';
                sendStatus.textContent = '▶ 播放中...';
                const intervalMs = Math.floor(1000 / fps);
                playInterval = setInterval(() => {
                    if (!isPaused && isPlaying) {
                        playIndex = (playIndex + 1) % seq.length;
                        displayQR(seq[playIndex]);
                    }
                }, intervalMs);
                sendProgress.textContent = '循环播放中 | 当前: ' + seq[playIndex].label + ' | ' + seq.length + ' 帧/轮 @ ' +
                    fps + ' FPS';
                // 更新进度
                const progressUpdater = setInterval(() => {
                    if (!isPlaying) { clearInterval(progressUpdater); return; }
                    const current = seq[playIndex];
                    sendProgress.textContent = '循环播放中 | 当前: ' + current.label + ' | ' + seq.length + ' 帧/轮 @ ' +
                        fps + ' FPS';
                }, 500);
                playInterval._progressUpdater = progressUpdater;
            }

            function pausePlayback() {
                if (!isPlaying) return;
                isPaused = !isPaused;
                if (isPaused) {
                    btnPause.textContent = '▶ 恢复';
                    sendStatus.textContent = '⏸ 已暂停';
                } else {
                    btnPause.textContent = '⏸ 暂停';
                    sendStatus.textContent = '▶ 播放中...';
                }
            }

            function stopPlayback() {
                isPlaying = false;
                isPaused = false;
                if (playInterval) {
                    clearInterval(playInterval);
                    if (playInterval._progressUpdater) clearInterval(playInterval._progressUpdater);
                    playInterval = null;
                }
                playIndex = 0;
                btnStart.disabled = false;
                btnPause.disabled = true;
                btnStop.disabled = true;
                btnPause.textContent = '⏸ 暂停';
                sendStatus.textContent = '⏹ 已停止';
                sendProgress.textContent = '共 ' + totalChunks + ' 个数据分块 | 准备就绪';
                const ctx = sendCanvas.getContext('2d');
                ctx.fillStyle = '#1a1a2e';
                ctx.fillRect(0, 0, sendCanvas.width, sendCanvas.height);
                ctx.fillStyle = '#555';
                ctx.font = '16px ' + getComputedStyle(document.body).fontFamily;
                ctx.textAlign = 'center';
                ctx.fillText('已停止播放', sendCanvas.width / 2, sendCanvas.height / 2);
            }

            btnStart.addEventListener('click', startPlayback);
            btnPause.addEventListener('click', pausePlayback);
            btnStop.addEventListener('click', stopPlayback);

            // ============ 接收端 ============
            async function startCamera() {
                if (!barcodeDetectorSupported) {
                    showToast('⚠ 需要Chrome/Edge 83+支持BarcodeDetector API。请使用支持的浏览器。', 3000);
                    return;
                }
                try {
                    receiveStream = await navigator.mediaDevices.getUserMedia({
                        video: { facingMode: 'environment', width: { ideal: 640 }, height: { ideal: 480 } }
                    });
                    receiveVideo.srcObject = receiveStream;
                    await receiveVideo.play();
                    receiveScanning = true;
                    btnStartCam.disabled = true;
                    btnStopCam.disabled = false;
                    receiveStatus.textContent = '🟢 扫描中...对准发送端QR码';
                    receiveStatus.style.color = '#34d399';
                    receivedChunks = {};
                    receiveHeader = null;
                    lastScannedData.clear();
                    receiveInfoCard.style.display = 'none';
                    downloadCard.style.display = 'none';
                    updateReceiveUI();
                    requestAnimationFrame(scanLoop);
                } catch (err) {
                    console.error('摄像头错误:', err);
                    showToast('❌ 无法访问摄像头: ' + err.message, 3000);
                    receiveStatus.textContent = '🔴 摄像头访问失败';
                    receiveStatus.style.color = '#f87171';
                }
            }

            function stopCamera() {
                receiveScanning = false;
                if (receiveStream) {
                    receiveStream.getTracks().forEach(t => t.stop());
                    receiveStream = null;
                }
                receiveVideo.srcObject = null;
                btnStartCam.disabled = false;
                btnStopCam.disabled = true;
                receiveStatus.textContent = '🔴 摄像头已停止';
                receiveStatus.style.color = '#f87171';
                const rctx = receiveCanvas.getContext('2d');
                rctx.fillStyle = '#1a1a2e';
                rctx.fillRect(0, 0, receiveCanvas.width, receiveCanvas.height);
            }

            function scanLoop(timestamp) {
                if (!receiveScanning) return;
                if (receiveVideo.readyState >= 2) {
                    const vw = receiveVideo.videoWidth;
                    const vh = receiveVideo.videoHeight;
                    if (vw > 0 && vh > 0) {
                        const maxDim = 400;
                        let cw = vw,
                            ch = vh;
                        if (cw > maxDim || ch > maxDim) {
                            const scale = maxDim / Math.max(cw, ch);
                            cw = Math.round(cw * scale);
                            ch = Math.round(ch * scale);
                        }
                        receiveCanvas.width = cw;
                        receiveCanvas.height = ch;
                        const rctx = receiveCanvas.getContext('2d');
                        rctx.drawImage(receiveVideo, 0, 0, cw, ch);
                        // 使用BarcodeDetector
                        if (barcodeDetectorSupported && barcodeDetector) {
                            detectQRFromCanvas(receiveCanvas).then(result => {
                                if (result && receiveScanning) {
                                    processScannedData(result);
                                }
                            }).catch(() => {});
                        }
                    }
                }
                if (receiveScanning) {
                    setTimeout(() => requestAnimationFrame(scanLoop), 1000 / 15);
                }
            }

            async function detectQRFromCanvas(canvas) {
                try {
                    const imageBitmap = await createImageBitmap(canvas);
                    const barcodes = await barcodeDetector.detect(imageBitmap);
                    imageBitmap.close();
                    if (barcodes.length > 0) {
                        return barcodes[0].rawValue;
                    }
                } catch (e) {
                    // 忽略检测错误
                }
                return null;
            }

            function processScannedData(data) {
                const now = Date.now();
                // 去重
                const dedupKey = data;
                if (lastScannedData.has(dedupKey) && (now - lastScanTime) < scanDedupWindow) {
                    return;
                }
                lastScannedData.add(dedupKey);
                lastScanTime = now;
                // 清理旧去重数据
                if (lastScannedData.size > 100) {
                    const arr = [...lastScannedData];
                    lastScannedData = new Set(arr.slice(-50));
                }

                if (!data.startsWith('QRX1|')) return;
                const parts = data.split('|');
                if (parts.length < 3) return;

                if (parts[1] === 'H') {
                    // Header
                    if (parts.length >= 6) {
                        const total = parseInt(parts[2]);
                        const filename = parts[3];
                        const sizeBytes = parseInt(parts[4]);
                        const crc = parts[5];
                        if (receiveHeader && receiveHeader.total === total && receiveHeader.crc32hex === crc) {
                            return; // 相同header，忽略
                        }
                        receiveHeader = { total, filename, sizeBytes, crc32hex: crc };
                        receivedChunks = {};
                        receiveInfoCard.style.display = 'flex';
                        downloadCard.style.display = 'none';
                        receiveFileInfo.textContent = '文件: ' + filename + ' | 大小: ' + formatBytes(sizeBytes) +
                            ' | 分块: ' + total + ' | CRC32: ' + crc;
                        updateReceiveUI();
                        showToast('📋 检测到新文件: ' + filename + ' (' + total + ' 分块)', 2000);
                    }
                } else if (parts[1] === 'D' && receiveHeader) {
                    // Data chunk
                    if (parts.length >= 4) {
                        const idx = parseInt(parts[2]);
                        const b64 = parts[3];
                        if (idx >= 1 && idx <= receiveHeader.total && !(idx in receivedChunks)) {
                            receivedChunks[idx] = b64;
                            updateReceiveUI();
                            checkCompletion();
                        }
                    }
                }
            }

            function updateReceiveUI() {
                if (!receiveHeader) {
                    receiveInfoCard.style.display = 'none';
                    return;
                }
                receiveInfoCard.style.display = 'flex';
                const total = receiveHeader.total;
                const received = Object.keys(receivedChunks).length;
                const pct = total > 0 ? Math.round((received / total) * 100) : 0;
                receiveProgressBar.style.width = pct + '%';
                receiveProgressText.textContent = received + ' / ' + total + ' 分块 (' + pct + '%)';
                // 分块网格
                let gridHTML = '';
                for (let i = 1; i <= total; i++) {
                    const cls = (i in receivedChunks) ? 'received' : 'missing';
                    gridHTML += '<div class="chunk-dot ' + cls + '" title="Chunk ' + i + '"></div>';
                }
                chunkGrid.innerHTML = gridHTML;
                // 缺失分块
                const missing = [];
                for (let i = 1; i <= total; i++) {
                    if (!(i in receivedChunks)) missing.push(i);
                }
                if (missing.length > 0 && missing.length <= 20) {
                    missingInfo.innerHTML = '<span style="color:#fbbf24;">⚠ 缺失分块: ' + missing.join(', ') + '</span>';
                } else if (missing.length > 20) {
                    missingInfo.innerHTML = '<span style="color:#fbbf24;">⚠ 缺失 ' + missing.length +
                        ' 个分块（等待下一轮循环...）</span>';
                } else if (missing.length === 0 && received > 0) {
                    missingInfo.innerHTML = '<span style="color:#34d399;">✅ 所有分块已接收</span>';
                } else {
                    missingInfo.innerHTML = '';
                }
            }

            function checkCompletion() {
                if (!receiveHeader) return;
                const total = receiveHeader.total;
                const received = Object.keys(receivedChunks).length;
                if (received >= total) {
                    // 重组文件
                    const orderedChunks = [];
                    for (let i = 1; i <= total; i++) {
                        if (i in receivedChunks) {
                            orderedChunks.push(receivedChunks[i]);
                        } else {
                            return; // 还有缺失
                        }
                    }
                    // 拼接Base64
                    const fullBase64 = orderedChunks.join('');
                    const fullBuffer = base64ToArrayBuffer(fullBase64);
                    const computedCRC = crc32(fullBuffer);
                    if (computedCRC === receiveHeader.crc32hex) {
                        // CRC校验通过
                        downloadCard.style.display = 'flex';
                        downloadInfo.textContent = '✅ CRC32校验通过 (' + computedCRC + ') | 文件: ' + receiveHeader
                            .filename + ' | 大小: ' + formatBytes(fullBuffer.byteLength);
                        receiveStatus.textContent = '✅ 传输完成！';
                        receiveStatus.style.color = '#34d399';
                        showToast('✅ 文件接收完成！CRC校验通过！', 3000);
                        // 存储重组数据
                        downloadCard._fileBuffer = fullBuffer;
                        downloadCard._filename = receiveHeader.filename;
                        btnDownload.onclick = function() {
                            const blob = new Blob([fullBuffer]);
                            const url = URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = receiveHeader.filename;
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                            URL.revokeObjectURL(url);
                            showToast('⬇ 下载中: ' + receiveHeader.filename, 2000);
                        };
                    } else {
                        downloadCard.style.display = 'flex';
                        downloadInfo.textContent = '❌ CRC32校验失败！期望: ' + receiveHeader.crc32hex + ' 实际: ' +
                            computedCRC + '。请重新扫描。';
                        downloadInfo.style.color = '#f87171';
                        downloadCard.querySelector('.btn').style.display = 'none';
                        showToast('❌ CRC校验失败，请重新扫描', 3000);
                    }
                }
            }

            btnStartCam.addEventListener('click', startCamera);
            btnStopCam.addEventListener('click', stopCamera);

            // ============ 标签切换 ============
            tabBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    tabBtns.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    const tab = btn.dataset.tab;
                    if (tab === 'send') {
                        panelSend.classList.add('active');
                        panelReceive.classList.remove('active');
                        stopCamera();
                    } else {
                        panelReceive.classList.add('active');
                        panelSend.classList.remove('active');
                        stopPlayback();
                    }
                });
            });

            // ============ 参数滑块 ============
            chunkSizeSlider.addEventListener('input', () => {
                chunkSize = parseInt(chunkSizeSlider.value);
                valChunkSize.textContent = chunkSize;
                if (fileArrayBuffer) prepareChunks();
                updateSendUI();
            });
            fpsSlider.addEventListener('input', () => {
                fps = parseInt(fpsSlider.value);
                valFPS.textContent = fps;
                updateSendUI();
                if (isPlaying) {
                    stopPlayback();
                    startPlayback();
                }
            });
            eccSlider.addEventListener('input', () => {
                eccLevel = parseInt(eccSlider.value);
                const eccNames = ['L', 'M', 'Q', 'H'];
                valECC.textContent = eccNames[eccLevel];
                updateSendUI();
            });
            qrSizeSlider.addEventListener('input', () => {
                qrSize = parseInt(qrSizeSlider.value);
                valQRSize.textContent = qrSize;
                updateSendUI();
                if (isPlaying && playInterval) {
                    const seq = getPlaySequence();
                    displayQR(seq[playIndex]);
                }
            });

            // ============ 初始化 ============
            async function init() {
                await checkBarcodeDetector();
                updateSendUI();
                // 初始化发送Canvas
                sendCanvas.width = qrSize;
                sendCanvas.height = qrSize;
                const sctx = sendCanvas.getContext('2d');
                sctx.fillStyle = '#1a1a2e';
                sctx.fillRect(0, 0, sendCanvas.width, sendCanvas.height);
                sctx.fillStyle = '#555';
                sctx.font = '14px ' + getComputedStyle(document.body).fontFamily;
                sctx.textAlign = 'center';
                sctx.fillText('选择文件后开始', sendCanvas.width / 2, sendCanvas.height / 2);
                // 初始化接收Canvas
                receiveCanvas.width = 400;
                receiveCanvas.height = 300;
                const rctx = receiveCanvas.getContext('2d');
                rctx.fillStyle = '#1a1a2e';
                rctx.fillRect(0, 0, receiveCanvas.width, receiveCanvas.height);
                rctx.fillStyle = '#555';
                rctx.font = '14px ' + getComputedStyle(document.body).fontFamily;
                rctx.textAlign = 'center';
                rctx.fillText('点击启动摄像头', receiveCanvas.width / 2, receiveCanvas.height / 2);
                btnStart.disabled = true;
                btnPause.disabled = true;
                btnStop.disabled = true;
                btnStopCam.disabled = true;
                receiveInfoCard.style.display = 'none';
                downloadCard.style.display = 'none';
                console.log('📦 file-transfer 初始化完成');
                console.log('   BarcodeDetector API:', barcodeDetectorSupported ? '✅ 可用' : '⚠ 不可用');
                console.log('   协议: QRX1|H/D|...');
                console.log('   完全离线 · 单文件 · 二维码传输');
            }

            init().catch(console.error);

            // ============ 键盘快捷键 ============
            document.addEventListener('keydown', (e) => {
                if (e.key === ' ' && document.activeElement === document.body) {
                    e.preventDefault();
                    if (panelSend.classList.contains('active')) {
                        if (isPlaying && !isPaused) pausePlayback();
                        else if (isPlaying && isPaused) pausePlayback();
                        else if (!isPlaying && selectedFile) startPlayback();
                    }
                }
                if (e.key === 'Escape') {
                    if (isPlaying) stopPlayback();
                    if (receiveScanning) stopCamera();
                }
            });

            console.log('%c📦 file-transfer %c已就绪 %c| %c完全离线 · 单文件HTML · 二维码传输',
                'font-size:1.2em;font-weight:bold;color:#38bdf8;',
                'color:#34d399;',
                '',
                'color:#94a3b8;');
            console.log('%c💡 提示: %c使用Chrome/Edge获得最佳BarcodeDetector体验',
                'color:#fbbf24;', 'color:#e2e8f0;');
            console.log('%c📋 协议: %cQRX1|H|<total>|<filename>|<sizeBytes>|<crc32hex> %c| %cQRX1|D|<idx>|<base64chunk>',
                'color:#fbbf24;', 'color:#e2e8f0;', '', 'color:#e2e8f0;');
        })();
    </script>
</body>
</html>