Spaces:

mistpe
/

fileadd

Sleeping

App Files Files Community

mistpe commited on Jul 2, 2025

Commit

f50acb2

verified ·

1 Parent(s): 53f22b0

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +1010 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,1010 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GitHub 文件合并器</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Consolas', 'Monaco', monospace;
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
+            color: #00ff88;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            position: relative;
+        }
+        .title {
+            font-size: 3rem;
+            color: #00ff88;
+            text-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88;
+            margin-bottom: 10px;
+            animation: glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes glow {
+            from { text-shadow: 0 0 20px #00ff88, 0 0 30px #00ff88, 0 0 40px #00ff88; }
+            to { text-shadow: 0 0 30px #00ff88, 0 0 40px #00ff88, 0 0 50px #00ff88; }
+        }
+        .subtitle {
+            color: #66ccff;
+            font-size: 1.2rem;
+            opacity: 0.8;
+        }
+        .cyber-panel {
+            background: rgba(0, 20, 40, 0.8);
+            border: 2px solid #00ff88;
+            border-radius: 10px;
+            padding: 30px;
+            margin-bottom: 30px;
+            box-shadow:
+                0 0 30px rgba(0, 255, 136, 0.3),
+                inset 0 0 30px rgba(0, 255, 136, 0.1);
+            backdrop-filter: blur(10px);
+            position: relative;
+            overflow: hidden;
+        }
+        .cyber-panel::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, #00ff88, #66ccff, #00ff88);
+            border-radius: 10px;
+            z-index: -1;
+            animation: borderGlow 3s linear infinite;
+        }
+        @keyframes borderGlow {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .input-group {
+            margin-bottom: 25px;
+        }
+        .input-label {
+            display: block;
+            margin-bottom: 10px;
+            color: #66ccff;
+            font-weight: bold;
+            font-size: 1.1rem;
+        }
+        .cyber-input {
+            width: 100%;
+            padding: 15px;
+            background: rgba(0, 0, 0, 0.6);
+            border: 2px solid #00ff88;
+            border-radius: 8px;
+            color: #00ff88;
+            font-family: 'Consolas', monospace;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+        .cyber-input:focus {
+            outline: none;
+            border-color: #66ccff;
+            box-shadow: 0 0 20px rgba(102, 204, 255, 0.5);
+            background: rgba(0, 0, 0, 0.8);
+        }
+        .cyber-input::placeholder {
+            color: rgba(0, 255, 136, 0.5);
+        }
+        .cyber-button {
+            background: linear-gradient(45deg, #00ff88, #66ccff);
+            border: none;
+            padding: 15px 30px;
+            border-radius: 8px;
+            color: #000;
+            font-weight: bold;
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            position: relative;
+            overflow: hidden;
+        }
+        .cyber-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(0, 255, 136, 0.4);
+        }
+        .source-tabs {
+            display: flex;
+            margin-bottom: 20px;
+            border-radius: 8px;
+            overflow: hidden;
+            border: 2px solid #00ff88;
+        }
+        .tab-button {
+            flex: 1;
+            padding: 15px 20px;
+            background: rgba(0, 0, 0, 0.6);
+            border: none;
+            color: #00ff88;
+            font-family: 'Consolas', monospace;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        .tab-button:hover {
+            background: rgba(0, 255, 136, 0.1);
+        }
+        .tab-button.active {
+            background: linear-gradient(45deg, #00ff88, #66ccff);
+            color: #000;
+            font-weight: bold;
+        }
+        .tab-content {
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .file-upload-area {
+            border: 2px dashed #00ff88;
+            border-radius: 8px;
+            padding: 40px 20px;
+            text-align: center;
+            background: rgba(0, 0, 0, 0.3);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .file-upload-area:hover {
+            border-color: #66ccff;
+            background: rgba(0, 255, 136, 0.05);
+            transform: translateY(-2px);
+        }
+        .file-upload-area.dragover {
+            border-color: #66ccff;
+            background: rgba(102, 204, 255, 0.1);
+            transform: scale(1.02);
+        }
+        .file-input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+        }
+        .upload-icon {
+            font-size: 3rem;
+            margin-bottom: 15px;
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+        .upload-text p {
+            margin: 8px 0;
+            color: #00ff88;
+        }
+        .upload-hint {
+            color: #66ccff !important;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+        .upload-limit {
+            color: rgba(0, 255, 136, 0.6) !important;
+            font-size: 0.8rem;
+        }
+        .file-selected {
+            background: rgba(0, 255, 136, 0.1) !important;
+            border-color: #66ccff !important;
+        }
+        .file-info {
+            display: none;
+            background: rgba(0, 20, 40, 0.8);
+            border: 1px solid #66ccff;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 15px 0;
+        }
+        .file-info.show {
+            display: block;
+        }
+        .file-name {
+            color: #00ff88;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .file-size {
+            color: #66ccff;
+            font-size: 0.9rem;
+        }
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .progress-container {
+            display: none;
+            margin: 20px 0;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: 4px;
+            overflow: hidden;
+            border: 1px solid #00ff88;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #00ff88, #66ccff);
+            width: 0%;
+            transition: width 0.3s ease;
+            box-shadow: 0 0 10px #00ff88;
+        }
+        .progress-text {
+            text-align: center;
+            margin-top: 10px;
+            color: #66ccff;
+            font-weight: bold;
+        }
+        .file-tree-container {
+            display: none;
+            max-height: 600px;
+            overflow-y: auto;
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid #00ff88;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 20px 0;
+        }
+        .file-tree-container::-webkit-scrollbar {
+            width: 8px;
+        }
+        .file-tree-container::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 4px;
+        }
+        .file-tree-container::-webkit-scrollbar-thumb {
+            background: #00ff88;
+            border-radius: 4px;
+        }
+        .file-item {
+            padding: 8px 12px;
+            margin: 2px 0;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            user-select: none;
+        }
+        .file-item:hover {
+            background: rgba(0, 255, 136, 0.1);
+            transform: translateX(5px);
+        }
+        .file-item.selected {
+            background: rgba(0, 255, 136, 0.2);
+            border-left: 3px solid #00ff88;
+        }
+        .file-item.folder {
+            color: #66ccff;
+            font-weight: bold;
+        }
+        .file-item.file {
+            color: #00ff88;
+        }
+        .file-icon {
+            margin-right: 10px;
+            font-size: 1.2rem;
+        }
+        .controls {
+            display: none;
+            text-align: center;
+            margin: 30px 0;
+        }
+        .controls .cyber-button {
+            margin: 0 10px;
+        }
+        .stats {
+            background: rgba(0, 20, 40, 0.6);
+            border: 1px solid #66ccff;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 20px 0;
+            text-align: center;
+        }
+        .stats-item {
+            display: inline-block;
+            margin: 0 20px;
+            color: #66ccff;
+        }
+        .stats-value {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #00ff88;
+        }
+        .error-message {
+            background: rgba(255, 0, 0, 0.1);
+            border: 1px solid #ff3366;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 20px 0;
+            color: #ff3366;
+            text-align: center;
+            display: none;
+        }
+        .success-message {
+            background: rgba(0, 255, 136, 0.1);
+            border: 1px solid #00ff88;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 20px 0;
+            color: #00ff88;
+            text-align: center;
+            display: none;
+        }
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 2px solid rgba(0, 255, 136, 0.3);
+            border-radius: 50%;
+            border-top-color: #00ff88;
+            animation: spin 1s ease-in-out infinite;
+            margin-right: 10px;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .matrix-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.05;
+            pointer-events: none;
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+            .title {
+                font-size: 2rem;
+            }
+            .cyber-panel {
+                padding: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <canvas class="matrix-bg" id="matrixCanvas"></canvas>
+    <div class="container">
+        <div class="header">
+            <h1 class="title">GitHub 文件合并器</h1>
+            <p class="subtitle">下载、解析、合并 - 一键搞定</p>
+        </div>
+        <div class="cyber-panel">
+            <div class="input-group">
+                <label class="input-label">选择数据源</label>
+                <div class="source-tabs">
+                    <button class="tab-button active" id="githubTab">GitHub 仓库</button>
+                    <button class="tab-button" id="uploadTab">本地上传</button>
+                </div>
+            </div>
+            <div class="tab-content" id="githubContent">
+                <div class="input-group">
+                    <label class="input-label">GitHub 仓库 URL</label>
+                    <input type="text" id="githubUrl" class="cyber-input"
+                           placeholder="https://github.com/username/repository">
+                </div>
+                <button id="downloadBtn" class="cyber-button">
+                    开始下载
+                </button>
+            </div>
+            <div class="tab-content" id="uploadContent" style="display: none;">
+                <div class="input-group">
+                    <label class="input-label">选择文件或压缩包</label>
+                    <div class="file-upload-area" id="fileUploadArea">
+                        <div class="upload-icon">📁</div>
+                        <div class="upload-text">
+                            <p>拖拽文件到此处或点击选择</p>
+                            <p class="upload-hint">支持 ZIP, RAR, 7Z, TAR 等压缩包，以及常见代码文件</p>
+                            <p class="upload-limit">最大文件大小: 500MB</p>
+                        </div>
+                        <input type="file" id="fileInput" class="file-input"
+                               accept=".zip,.rar,.7z,.tar,.tar.gz,.tgz,.tar.bz2,.tar.xz,.py,.js,.html,.css,.java,.cpp,.c,.h,.php,.rb,.go,.rs,.ts,.vue,.jsx,.tsx,.md,.txt,.json,.xml,.yaml,.yml,.ini,.cfg,.conf,.sh,.bat,.ps1,.sql">
+                    </div>
+                </div>
+                <button id="uploadBtn" class="cyber-button" disabled>
+                    开始上传
+                </button>
+            </div>
+            <div class="file-info" id="fileInfo">
+                <div class="file-name" id="fileName"></div>
+                <div class="file-size" id="fileSize"></div>
+            </div>
+            <div class="progress-container" id="progressContainer">
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progressFill"></div>
+                </div>
+                <div class="progress-text" id="progressText">准备下载...</div>
+            </div>
+            <div class="error-message" id="errorMessage"></div>
+            <div class="success-message" id="successMessage"></div>
+        </div>
+        <div class="cyber-panel" id="filePanel" style="display: none;">
+            <h3 style="color: #66ccff; margin-bottom: 20px;">📁 文件树结构</h3>
+            <div class="stats" id="statsPanel">
+                <div class="stats-item">
+                    <div class="stats-value" id="totalFiles">0</div>
+                    <div>总文件数</div>
+                </div>
+                <div class="stats-item">
+                    <div class="stats-value" id="selectedFiles">0</div>
+                    <div>已选择</div>
+                </div>
+            </div>
+            <div class="controls">
+                <button id="selectAllBtn" class="cyber-button">全选</button>
+                <button id="clearSelectionBtn" class="cyber-button">清除选择</button>
+                <button id="mergeBtn" class="cyber-button">合并文件</button>
+            </div>
+            <div class="file-tree-container" id="fileTree"></div>
+        </div>
+    </div>
+    <script>
+        let currentSessionId = null;
+        let selectedFiles = new Set();
+        let allFiles = [];
+        let selectedFile = null;
+        // 标签页切换
+        function switchTab(activeTab) {
+            const tabs = document.querySelectorAll('.tab-button');
+            const contents = document.querySelectorAll('.tab-content');
+            tabs.forEach(tab => tab.classList.remove('active'));
+            contents.forEach(content => content.style.display = 'none');
+            document.getElementById(activeTab + 'Tab').classList.add('active');
+            document.getElementById(activeTab + 'Content').style.display = 'block';
+        }
+        // 文件上传相关功能
+        function initFileUpload() {
+            const fileUploadArea = document.getElementById('fileUploadArea');
+            const fileInput = document.getElementById('fileInput');
+            const uploadBtn = document.getElementById('uploadBtn');
+            const fileInfo = document.getElementById('fileInfo');
+            // 点击上传区域
+            fileUploadArea.addEventListener('click', () => {
+                fileInput.click();
+            });
+            // 文件选择
+            fileInput.addEventListener('change', handleFileSelect);
+            // 拖拽上传
+            fileUploadArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                fileUploadArea.classList.add('dragover');
+            });
+            fileUploadArea.addEventListener('dragleave', (e) => {
+                e.preventDefault();
+                fileUploadArea.classList.remove('dragover');
+            });
+            fileUploadArea.addEventListener('drop', (e) => {
+                e.preventDefault();
+                fileUploadArea.classList.remove('dragover');
+                const files = e.dataTransfer.files;
+                if (files.length > 0) {
+                    fileInput.files = files;
+                    handleFileSelect();
+                }
+            });
+        }
+        // 处理文件选择
+        function handleFileSelect() {
+            const fileInput = document.getElementById('fileInput');
+            const uploadBtn = document.getElementById('uploadBtn');
+            const fileInfo = document.getElementById('fileInfo');
+            const fileUploadArea = document.getElementById('fileUploadArea');
+            if (fileInput.files.length > 0) {
+                selectedFile = fileInput.files[0];
+                // 显示文件信息
+                document.getElementById('fileName').textContent = selectedFile.name;
+                document.getElementById('fileSize').textContent = formatFileSize(selectedFile.size);
+                fileInfo.classList.add('show');
+                // 更新上传区域样式
+                fileUploadArea.classList.add('file-selected');
+                // 启用上传按钮
+                uploadBtn.disabled = false;
+                uploadBtn.textContent = '开始上传';
+            } else {
+                selectedFile = null;
+                fileInfo.classList.remove('show');
+                fileUploadArea.classList.remove('file-selected');
+                uploadBtn.disabled = true;
+                uploadBtn.textContent = '请先选择文件';
+            }
+        }
+        // 上传文件
+        async function uploadFile() {
+            if (!selectedFile) {
+                showError('请先选择文件');
+                return;
+            }
+            const uploadBtn = document.getElementById('uploadBtn');
+            const progressContainer = document.getElementById('progressContainer');
+            uploadBtn.disabled = true;
+            uploadBtn.innerHTML = '<span class="loading"></span>上传中...';
+            progressContainer.style.display = 'block';
+            currentSessionId = Date.now().toString();
+            try {
+                const formData = new FormData();
+                formData.append('file', selectedFile);
+                const response = await fetch('/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (data.error) {
+                    showError(data.error);
+                    return;
+                }
+                currentSessionId = data.session_id;
+                // 监控处理进度
+                monitorProgress(currentSessionId);
+            } catch (error) {
+                showError('上传失败: ' + error.message);
+                resetUploadButton();
+            }
+        }
+        // 重置上传按钮
+        function resetUploadButton() {
+            const uploadBtn = document.getElementById('uploadBtn');
+            uploadBtn.disabled = selectedFile === null;
+            uploadBtn.textContent = selectedFile ? '开始上传' : '请先选择文件';
+            document.getElementById('progressContainer').style.display = 'none';
+        }
+        // Matrix 背景效果
+        function initMatrix() {
+            const canvas = document.getElementById('matrixCanvas');
+            const ctx = canvas.getContext('2d');
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            const matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
+            const matrixArray = matrix.split("");
+            const fontSize = 10;
+            const columns = canvas.width / fontSize;
+            const drops = [];
+            for(let x = 0; x < columns; x++) {
+                drops[x] = 1;
+            }
+            function draw() {
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.fillStyle = '#00ff88';
+                ctx.font = fontSize + 'px monospace';
+                for(let i = 0; i < drops.length; i++) {
+                    const text = matrixArray[Math.floor(Math.random() * matrixArray.length)];
+                    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+                    if(drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                        drops[i] = 0;
+                    }
+                    drops[i]++;
+                }
+            }
+            setInterval(draw, 35);
+        }
+        // 下载仓库
+        async function downloadRepo() {
+            const url = document.getElementById('githubUrl').value.trim();
+            if (!url) {
+                showError('请输入GitHub仓库URL');
+                return;
+            }
+            const downloadBtn = document.getElementById('downloadBtn');
+            const progressContainer = document.getElementById('progressContainer');
+            downloadBtn.disabled = true;
+            downloadBtn.innerHTML = '<span class="loading"></span>下载中...';
+            progressContainer.style.display = 'block';
+            currentSessionId = Date.now().toString();
+            try {
+                const response = await fetch('/download', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        url: url,
+                        session_id: currentSessionId
+                    })
+                });
+                const data = await response.json();
+                if (data.error) {
+                    showError(data.error);
+                    return;
+                }
+                // 监控下载进度
+                monitorProgress(currentSessionId);
+            } catch (error) {
+                showError('下载失败: ' + error.message);
+                resetDownloadButton();
+            }
+        }
+        // 监控下载进度
+        async function monitorProgress(sessionId) {
+            const checkProgress = async () => {
+                try {
+                    const response = await fetch(`/progress/${sessionId}`);
+                    const progress = await response.json();
+                    const progressFill = document.getElementById('progressFill');
+                    const progressText = document.getElementById('progressText');
+                    progressFill.style.width = progress.progress + '%';
+                    if (progress.status === 'starting') {
+                        progressText.textContent = '准备下载...';
+                    } else if (progress.status === 'downloading') {
+                        progressText.textContent = '正在下载仓库...';
+                    } else if (progress.status === 'extracting') {
+                        progressText.textContent = '正在解压文件...';
+                    } else if (progress.status === 'completed') {
+                        progressText.textContent = '下载完成！';
+                        setTimeout(() => loadFileTree(sessionId), 1000);
+                        return;
+                    } else if (progress.status === 'error') {
+                        showError(progress.message);
+                        resetDownloadButton();
+                        return;
+                    }
+                    setTimeout(checkProgress, 1000);
+                } catch (error) {
+                    showError('获取进度失败: ' + error.message);
+                    resetDownloadButton();
+                }
+            };
+            checkProgress();
+        }
+        // 加载文件树
+        async function loadFileTree(sessionId) {
+            try {
+                const response = await fetch(`/files/${sessionId}`);
+                const data = await response.json();
+                if (data.error) {
+                    showError(data.error);
+                    return;
+                }
+                allFiles = data.files;
+                renderFileTree(data.files);
+                document.getElementById('filePanel').style.display = 'block';
+                document.querySelector('.controls').style.display = 'block';
+                updateStats();
+                resetDownloadButton();
+                resetUploadButton();
+                showSuccess('文件处理完成，请选择要合并的文件');
+            } catch (error) {
+                showError('加载文件树失败: ' + error.message);
+                resetDownloadButton();
+            }
+        }
+        // 渲染文件树
+        function renderFileTree(files) {
+            const fileTree = document.getElementById('fileTree');
+            fileTree.innerHTML = '';
+            files.forEach(file => {
+                const fileItem = document.createElement('div');
+                fileItem.className = `file-item ${file.type}`;
+                fileItem.style.paddingLeft = (file.level * 20 + 12) + 'px';
+                const icon = file.type === 'folder' ? '📁' : '📄';
+                const size = file.type === 'file' ? ` (${formatFileSize(file.size)})` : '';
+                fileItem.innerHTML = `
+                    <span class="file-icon">${icon}</span>
+                    <span>${file.name}${size}</span>
+                `;
+                if (file.type === 'file') {
+                    fileItem.addEventListener('click', () => toggleFileSelection(file, fileItem));
+                }
+                fileTree.appendChild(fileItem);
+            });
+        }
+        // 切换文件选择状态
+        function toggleFileSelection(file, element) {
+            if (selectedFiles.has(file.path)) {
+                selectedFiles.delete(file.path);
+                element.classList.remove('selected');
+            } else {
+                selectedFiles.add(file.path);
+                element.classList.add('selected');
+            }
+            updateStats();
+        }
+        // 更新统计信息
+        function updateStats() {
+            const totalFileCount = allFiles.filter(f => f.type === 'file').length;
+            document.getElementById('totalFiles').textContent = totalFileCount;
+            document.getElementById('selectedFiles').textContent = selectedFiles.size;
+        }
+        // 全选文件
+        function selectAllFiles() {
+            selectedFiles.clear();
+            allFiles.filter(f => f.type === 'file').forEach(file => {
+                selectedFiles.add(file.path);
+            });
+            document.querySelectorAll('.file-item.file').forEach(item => {
+                item.classList.add('selected');
+            });
+            updateStats();
+        }
+        // 清除选择
+        function clearSelection() {
+            selectedFiles.clear();
+            document.querySelectorAll('.file-item.selected').forEach(item => {
+                item.classList.remove('selected');
+            });
+            updateStats();
+        }
+        // 合并文件
+        async function mergeFiles() {
+            if (selectedFiles.size === 0) {
+                showError('请至少选择一个文件');
+                return;
+            }
+            const mergeBtn = document.getElementById('mergeBtn');
+            mergeBtn.disabled = true;
+            mergeBtn.innerHTML = '<span class="loading"></span>合并中...';
+            try {
+                const response = await fetch('/merge', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        session_id: currentSessionId,
+                        selected_files: Array.from(selectedFiles)
+                    })
+                });
+                const data = await response.json();
+                if (data.error) {
+                    showError(data.error);
+                } else {
+                    showSuccess('文件合并完成！');
+                    // 下载合并后的文件
+                    const link = document.createElement('a');
+                    link.href = data.download_url;
+                    link.click();
+                }
+            } catch (error) {
+                showError('合并文件失败: ' + error.message);
+            } finally {
+                mergeBtn.disabled = false;
+                mergeBtn.textContent = '合并文件';
+            }
+        }
+        // 辅助函数
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 B';
+            const k = 1024;
+            const sizes = ['B', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+        function showError(message) {
+            const errorDiv = document.getElementById('errorMessage');
+            errorDiv.textContent = message;
+            errorDiv.style.display = 'block';
+            setTimeout(() => {
+                errorDiv.style.display = 'none';
+            }, 5000);
+        }
+        function showSuccess(message) {
+            const successDiv = document.getElementById('successMessage');
+            successDiv.textContent = message;
+            successDiv.style.display = 'block';
+            setTimeout(() => {
+                successDiv.style.display = 'none';
+            }, 5000);
+        }
+        function resetDownloadButton() {
+            const downloadBtn = document.getElementById('downloadBtn');
+            downloadBtn.disabled = false;
+            downloadBtn.textContent = '开始下载';
+            document.getElementById('progressContainer').style.display = 'none';
+        }
+        // 事件监听器
+        document.getElementById('githubTab').addEventListener('click', () => switchTab('github'));
+        document.getElementById('uploadTab').addEventListener('click', () => switchTab('upload'));
+        document.getElementById('downloadBtn').addEventListener('click', downloadRepo);
+        document.getElementById('uploadBtn').addEventListener('click', uploadFile);
+        document.getElementById('selectAllBtn').addEventListener('click', selectAllFiles);
+        document.getElementById('clearSelectionBtn').addEventListener('click', clearSelection);
+        document.getElementById('mergeBtn').addEventListener('click', mergeFiles);
+        // 回车键下载
+        document.getElementById('githubUrl').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                downloadRepo();
+            }
+        });
+        // 初始化
+        window.addEventListener('load', () => {
+            initMatrix();
+            initFileUpload();
+        });
+        // 响应式处理
+        window.addEventListener('resize', () => {
+            const canvas = document.getElementById('matrixCanvas');
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        });
+    </script>
+</body>
+</html>