// ==UserScript== // @name 小雅爬爬爬 // @match https://*.ai-augmented.com/* // @grant none // @require https://scriptcat.org/lib/2770/1.0.0/jszip-min-js.js // @description 🚀 小雅平台课件下载利器！批量下载、排序、筛选、导出等一应俱全！更多功能等你发掘！ // @license MIT // @author Yi // @version 1.5.4 // @icon https://www.ai-augmented.com/static/logo3.1dbbea8f.png // @homepageURL https://xiaoya.zygame1314.site // @supportURL https://xiaoya.zygame1314.site // ==/UserScript== var isProgressBarVisible = true; var styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerText = ` body, body * { font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; } .custom-checkbox { appearance: none; width: 25px; height: 25px; background-color: #fff; border: 2px solid #ffa500; border-radius: 50%; margin-right: 10px; cursor: pointer; position: relative; transition: all 0.3s ease; overflow: hidden; } .custom-checkbox::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 15px; height: 15px; background-color: #ffa500; border-radius: 50%; transition: all 0.3s ease; } .custom-checkbox:checked::before { transform: translate(-50%, -50%) scale(1); animation: newpulse 0.5s ease; } .custom-checkbox:hover { } .custom-checkbox:checked { border-color: #ff8c00; animation: rotate 0.5s ease; } .glowing-text { background: linear-gradient(90deg, #ffa500, #ff8c00, #ffa500); background-size: 200% 100%; animation: flowingGradient 3s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @keyframes flowingGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes slideInFade { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideOutFade { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } } .new-history-item { animation: slideInFade 0.5s ease-out forwards; } .remove-history-item { animation: slideOutFade 0.5s ease-in forwards; } @keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } } .popup-show { animation: fadeIn 0.3s ease-out forwards; } .popup-hide { animation: fadeOut 0.3s ease-in forwards; } @keyframes glowPulse { 0% { box-shadow: 0 0 5px #fcbb34; } 50% { box-shadow: 0 0 15px #fcbb34, 0 0 20px #f0932b; /* 在中间加强发光 */ } 100% { box-shadow: 0 0 5px #fcbb34; } } #teacherInfoContainer, #userSearchContainer { .title { color: #333; border-bottom: 2px solid #fcbb34; padding-bottom: 10px; margin-bottom: 15px; } .teacher-list, .user-info { list-style-type: none; padding: 0; } .teacher-item, .user-info p { background-color: #fff; margin-bottom: 10px; padding: 10px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; } .teacher-item:hover, .user-info p:hover { background-color: #FFE0B2; transform: translateX(5px); } .teacher-name, .user-info strong { font-weight: bold; color: #e69b00; } .teacher-number { color: #757575; font-size: 0.9em; } .loading, .no-data { text-align: center; color: #757575; } .dot { animation: blink 1s infinite; } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .search-teacher-input { width: 200px; padding: 8px; border: 1px solid #FFD180; border-radius: 4px; margin-bottom: 10px; } .search-teacher-button { padding: 8px 12px; border: none; border-radius: 4px; background-color: #fcbb34; color: #fff; cursor: pointer; transition: background-color 0.3s ease; } .search-teacher-button:hover { background-color: #e69b00; } .search-teacher-results { margin-top: 10px; border: 1px solid #FFD180; padding: 10px; border-radius: 4px; background-color: #fff; } .search-teacher-hint { color: #757575; font-style: italic; text-align: center; margin-top: 10px; } } .failed-file { background-color: #ffeeee; padding: 5px; margin: 5px 0; border-radius: 5px; } .retry-btn { margin-left: 10px; padding: 2px 5px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; } .retry-btn:hover { background-color: #e0e0e0; } .failed-file { opacity: 0; transform: translateX(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .custom-select { position: relative; font-family: 'Microsoft YaHei', sans-serif; flex: 1; margin-right: 10px; z-index: 10000; } .custom-select select { display: none; } .select-selected { background-color: white; border: 2px solid #ffa500; border-radius: 20px; padding: 0 40px 0 15px; height: 38px; line-height: 38px; cursor: pointer; user-select: none; font-size: 14px; font-weight: bold; color: #ffa500; transition: all 0.3s ease; display: flex; align-items: center; } .select-selected:after { position: absolute; content: ""; top: 50%; right: 15px; width: 0; height: 0; border: 6px solid transparent; border-color: #ffa500 transparent transparent transparent; transition: all 0.3s ease; transform: translateY(-50%); } .select-selected.select-arrow-active { border-radius: 20px 20px 0 0; border-bottom-color: transparent; } .select-selected.select-arrow-active:after { border-color: transparent transparent #ffa500 transparent; top: 50%; transform: translateY(-25%); } .select-items div,.select-selected { font-weight: bold; color: #ffa500; padding: 8px 15px; cursor: pointer; user-select: none; } .select-items { position: absolute; background-color: white; top: 100%; left: 0; right: 0; z-index: 10001; border: 2px solid #ffa500; border-top: none; border-radius: 0 0 20px 20px; max-height: 200px; overflow-y: auto; box-shadow: 0 4px 8px rgba(255, 165, 0, 0.2); margin-top: -2px; } .select-hide { display: none; } .select-items div { padding: 8px 15px; display: flex; align-items: center; min-height: 38px; box-sizing: border-box; } .select-items div:hover, .same-as-selected { background-color: rgba(255, 165, 0, 0.2); } .select-selected:hover, .custom-select:focus-within .select-selected { border-color: #ff8c00; box-shadow: 0 0 8px rgba(255, 165, 0, 0.5); } .select-items::-webkit-scrollbar { width: 8px; } .select-items::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 0 0 20px 0; } .select-items::-webkit-scrollbar-thumb { background: #ffa500; border-radius: 10px; } .select-items::-webkit-scrollbar-thumb:hover { background: #ff8c00; } .select-items div:last-child { border-radius: 0 0 18px 18px; } `; document.head.appendChild(styleSheet); (function () { 'use strict'; const script = document.createElement('script'); script.src = 'https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs'; script.type = 'module'; document.head.appendChild(script); script.onload = () => { console.log('dotlottie-player模块已导入成功！'); }; script.onerror = () => { console.error('无法导入dotlottie-player模块！'); }; })(); // 加载自定义过滤器设置 function loadCustomFilters() { try { const savedFilters = localStorage.getItem('customQuickFilters'); if (savedFilters) { const parsedFilters = JSON.parse(savedFilters); if (Array.isArray(parsedFilters) && parsedFilters.length === window.quickFilters.length) { return parsedFilters; } } } catch (error) { console.error('加载自定义过滤器时出错:', error); } return null; } let course_resources; let courseVisitData; let historyListElement; let failedContainer; let failedToggleButton; let noErrorsMessage; let forcedExpandedItems = new Set(); let originalOrder = null; let historyPopup = null; let guideModal = null; let isEasterEggActivated = false; let downloadHistory = []; window.currentSearchKeyword = ''; window.currentFilterCategory = ''; // 定义快速筛选的类别选项 window.quickFilters = [ { label: "全部", value: "" }, { label: "文档", value: "doc,docx,pdf,txt,odt,rtf,html,htm,xls,xlsx,ppt,pptx,odp,xmind" }, { label: "图片", value: "jpg,jpeg,png,gif,bmp,tiff,svg,webp,tif" }, { label: "音频", value: "mp3,wav,ogg,flac,aac,m4a,wma,aiff,ape,midi" }, { label: "压缩包", value: "zip,rar,7z,gz,bz2,tar" } ]; const hostname = window.location.hostname; // 应用保存的自定义过滤器 const savedFilters = loadCustomFilters(); if (savedFilters) { window.quickFilters = savedFilters; } // 判断是否为视频文件 function isVideoFile(filename) { const videoExtensions = [ 'mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm', 'm4v', 'mpeg', 'mpg', '3gp', 'ts', 'vob', 'ogv', 'divx', 'rm', 'rmvb', 'f4v' ]; const extension = filename.split('.').pop().toLowerCase(); return videoExtensions.includes(extension); } // 获取课程访问token async function getCourseAccessToken(visitData) { if (!visitData) return null; const token = getCookie(); try { const authUrl = `https://${hostname}/api/jx-iresource/group/access/authorization`; const authResponse = await fetch(`${authUrl}?site_id=${visitData.site_id}&role_type=4`, { headers: { 'Authorization': `Bearer ${token}` } }); const authData = await authResponse.json(); return authData.data?.access_group_token; } catch (error) { console.error('获取访问token失败:', error); return null; } } async function getCourseResources(groupId, visitData) { const token = getCookie(); const url = `https://${hostname}/api/jx-iresource/resource/queryCourseResources?group_id=${groupId}`; try { let response = await fetch(url, { headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json; charset=utf-8' } }); let responseData = await response.json(); if (responseData.code === 50007) { const accessToken = await getCourseAccessToken(visitData); if (accessToken) { response = await fetch(url, { headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json; charset=utf-8', 'X-Course-Access': accessToken } }); responseData = await response.json(); } } if (!responseData.success) { throw new Error(`获取课程资源失败: ${responseData.message}`); } return responseData.data; } catch (error) { console.error('获取课程资源出错:', error); return null; } } async function getCourseVisitData(groupId) { const token = getCookie(); const url = `https://${hostname}/api/jx-iresource/statistics/group/visit`; try { const visitResponse = await fetch(url, { method: 'POST', headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json; charset=UTF-8' }, body: JSON.stringify({ group_id: groupId, role_type: "normal" }) }); const visitData = await visitResponse.json(); if (!visitData.success) { console.error('获取课程访问数据失败:', visitData.message); return null; } return visitData.data; } catch (error) { console.error('获取课程访问数据失败:', error); return null; } } function isValidCourseUrl() { return window.location.href.startsWith(`https://${hostname}/app/jx-web/mycourse/`); } function getGroupIdFromUrl() { try { if (!isValidCourseUrl()) { return null; } const pathname = window.location.pathname; const match = pathname.match(/\/mycourse\/(\d{19})/); if (!match) { console.warn('未找到有效的课程ID'); return null; } return match[1]; } catch (error) { console.error('获取课程ID时出错:', error); return null; } } function decryptFileUrl(encryptedUrl) { try { // 生产环境的key和vector const key = "94374647"; const vector = "99526255"; // 还原Base64 URL安全字符 const base64Str = encryptedUrl .replace(/_/g, '+') .replace(/\*/g, '/') .replace(/-/g, '='); // 创建DES-CBC解密器 const keyUtf8 = window.CryptoJS.enc.Utf8.parse(key); const ivUtf8 = window.CryptoJS.enc.Utf8.parse(vector); // 解密 const decrypted = window.CryptoJS.DES.decrypt({ ciphertext: window.CryptoJS.enc.Base64.parse(base64Str) }, keyUtf8, { iv: ivUtf8, mode: window.CryptoJS.mode.CBC, padding: window.CryptoJS.pad.Pkcs7 }); return decrypted.toString(window.CryptoJS.enc.Utf8); } catch (error) { console.error('URL解密失败:', error); return encryptedUrl; } } async function parseContent() { if (!isValidCourseUrl()) { return; } window.currentSearchKeyword = ''; window.currentFilterCategory = ''; const groupId = getGroupIdFromUrl(); if (!groupId) { showNotification('无法获取课程ID', 'error'); return; } const visitData = await getCourseVisitData(groupId); courseVisitData = visitData; const resources = await getCourseResources(groupId, visitData); course_resources = resources; if (!course_resources) { showNotification('获取课程资源失败', 'error'); return; } if (visitData) { console.log('课程名称:', visitData.name); console.log('课程站点ID:', visitData.site_id); console.log('教师信息:', visitData.teachers); } // 重置搜索筛选 const searchInput = document.getElementById("searchInput"); if (searchInput) { searchInput.value = ''; } const quickFilterSelect = document.getElementById("quickFilterSelect"); if (quickFilterSelect) { quickFilterSelect.selectedIndex = 0; } var download_list = document.getElementById("download_list"); download_list.innerHTML = '<h3 style="color:#fcbb34; font-weight:bold;">课程附件清单</h3>'; failedContainer = document.createElement('div'); failedContainer.id = 'failedContainer'; failedContainer.style.cssText = ` display: none; margin-top: 10px; border: 1px solid #ffcccc; border-radius: 5px; padding: 10px; background-color: #fff5f5; max-height: 200px; overflow-y: auto; `; noErrorsMessage = document.createElement('div'); noErrorsMessage.style.cssText = ` display: none; text-align: center; padding: 10px; color: #4caf50; font-weight: bold; `; noErrorsMessage.textContent = '太棒了！没有任何错误 (≧▽≦)'; failedToggleButton = document.createElement('button'); failedToggleButton.textContent = '显示失败项 (0)'; failedToggleButton.style.cssText = ` margin-top: 10px; padding: 5px 10px; background-color: #ff9999; border: none; border-radius: 5px; color: white; cursor: pointer; font-weight: bold; transition: transform 0.3s ease; `; failedToggleButton.onmouseover = () => { failedToggleButton.style.transform = 'scale(1.05)'; }; failedToggleButton.onmouseout = () => { failedToggleButton.style.transform = 'scale(1)'; }; failedToggleButton.onclick = toggleFailedContainer; download_list.appendChild(failedToggleButton); download_list.appendChild(failedContainer); failedContainer.appendChild(noErrorsMessage); updateFailedCount(); // 生成文件列表UI function createFileItem(resource) { let file_name = resource.name; let create_time = new Date(resource.created_at).toLocaleDateString(); let update_time = new Date(resource.updated_at).toLocaleDateString(); var file_container = document.createElement('div'); file_container.className = 'file-item'; var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.className = 'custom-checkbox'; checkbox.setAttribute('data-visible', 'true'); checkbox.id = 'file-checkbox-' + resource.id; checkbox.addEventListener('change', function () { updateTreeCheckbox(this); syncTreeWithDownloadList(); }); var fileIconInfo = getFileIconSvg(file_name); var fileIcon = document.createElement('span'); fileIcon.className = `file-icon ${fileIconInfo.colorClass}`; fileIcon.innerHTML = fileIconInfo.svg; var file_info = document.createElement('div'); file_info.className = 'file-info'; var fileName = document.createElement('div'); fileName.className = 'file-name'; fileName.textContent = file_name; fileName.title = file_name; var fileDetails = document.createElement('div'); fileDetails.className = 'file-details'; const svgIcons = { create: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>', update: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3"></path></svg>' }; var dateContainer = document.createElement('div'); dateContainer.style.display = 'flex'; dateContainer.style.justifyContent = 'space-between'; var dateElement = document.createElement('span'); dateElement.style.display = 'flex'; dateElement.style.alignItems = 'center'; if (create_time === update_time) { dateElement.innerHTML = `${svgIcons.create} 创建/更新: ${create_time}`; dateElement.title = '创建和更新日期'; } else { dateElement.innerHTML = ` ${svgIcons.create} 创建: ${create_time} <span style="margin: 0 8px;"></span> ${svgIcons.update} 更新: ${update_time} `; dateElement.title = '创建日期 / 更新日期'; } dateContainer.appendChild(dateElement); fileDetails.appendChild(dateContainer); file_info.appendChild(fileName); file_info.appendChild(fileDetails); var downloadLink = document.createElement('a'); downloadLink.className = 'download-link'; downloadLink.href = '#'; downloadLink.target = "_blank"; downloadLink.title = `下载 ${file_name}`; downloadLink.setAttribute('data-created-at', resource.created_at); downloadLink.setAttribute('data-updated-at', resource.updated_at); downloadLink.setAttribute('data-origin-name', file_name); downloadLink.setAttribute('data-resource-id', resource.id); downloadLink.setAttribute('data-path', resource.path); downloadLink.setAttribute('data-parent-id', resource.parent_id); downloadLink.setAttribute('data-quote-id', resource.quote_id); downloadLink.draggable = true; var downloadIcon = document.createElement('span'); downloadIcon.className = 'download-icon'; downloadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform: translateY(2px);"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>'; downloadLink.appendChild(downloadIcon); // 点击下载按钮时获取下载链接 downloadLink.addEventListener('click', async function (event) { event.preventDefault(); const downloadIcon = this.querySelector('.download-icon'); downloadIcon.innerHTML = '<span class="loading-spinner"></span>'; try { totalDownloads++; updateTotalProgress(); const fileUrl = await window.getDownloadUrl(resource.quote_id); courseDownload(fileUrl, file_name); } catch (error) { console.error('获取下载链接失败:', error); addFailedFileNotification(file_name); completedDownloads++; updateTotalProgress(); } finally { downloadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform: translateY(2px);"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>'; } }); var previewLink = document.createElement('a'); previewLink.className = 'preview-link'; previewLink.href = '#'; previewLink.title = `预览 ${file_name}`; previewLink.setAttribute('data-created-at', resource.created_at); previewLink.setAttribute('data-updated-at', resource.updated_at); previewLink.setAttribute('data-origin-name', file_name); previewLink.setAttribute('data-resource-id', resource.id); previewLink.setAttribute('data-path', resource.path); previewLink.setAttribute('data-parent-id', resource.parent_id); var previewIcon = document.createElement('span'); previewIcon.className = 'preview-icon'; previewIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform: translateY(2px);"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>'; previewLink.appendChild(previewIcon); previewLink.addEventListener('click', async function (event) { event.preventDefault(); const previewIcon = this.querySelector('.preview-icon'); previewIcon.innerHTML = '<span class="loading-spinner"></span>'; try { const fileUrl = await window.getDownloadUrl(resource.quote_id); previewFile(file_name, fileUrl); } catch (error) { console.error('获取预览链接失败:', error); showNotification('获取预览链接失败', 'error'); } finally { previewIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform: translateY(2px);"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>'; } }); file_container.appendChild(checkbox); file_container.appendChild(fileIcon); file_container.appendChild(file_info); file_container.appendChild(previewLink); file_container.appendChild(downloadLink); return file_container; } // 获取下载链接的函数 window.getDownloadUrl = async function (quoteId) { const maxRetries = 3; const retryDelay = 1000; let retryCount = 0; while (retryCount < maxRetries) { try { const token = getCookie(); const response = await fetch('https://' + hostname + '/api/jx-oresource/cloud/file_url/' + quoteId, { headers: { Authorization: `Bearer ${token}` } }); const data = await response.json(); if (data.success) { let fileUrl = data.data.url; if (data.data.is_encryption) { fileUrl = decryptFileUrl(fileUrl); } return fileUrl; } throw new Error('获取下载链接失败'); } catch (error) { retryCount++; if (retryCount === maxRetries) { throw error; } await new Promise(resolve => setTimeout(resolve, retryDelay)); } } } // 遍历资源生成列表 for (let i in course_resources) { let resource = course_resources[i]; if (resource.mimetype && resource.type !== 'folder' && !isVideoFile(resource.mimetype, resource.name)) { const fileItem = createFileItem(resource); download_list.appendChild(fileItem); } } function getFileIconSvg(fileName) { const extension = fileName.split('.').pop().toLowerCase(); let iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.06 8.11l1.415 1.415a7 7 0 0 1 0 9.9l-.354.353a7 7 0 0 1-9.9-9.9l1.415 1.415a5 5 0 1 0 7.071 7.071l.354-.354a5 5 0 0 0 0-7.07l-1.415-1.415 1.415-1.414zm6.718 6.011l-1.414-1.414a5 5 0 1 0-7.071-7.071l-.354.354a5 5 0 0 0 0 7.07l1.415 1.415-1.415 1.414-1.414-1.414a7 7 0 0 1 0-9.9l.354-.353a7 7 0 0 1 9.9 9.9z"/></svg>'; let colorClass = 'file-icon-default'; for (let filter of window.quickFilters) { if (filter.value.includes(extension)) { switch (filter.label) { case "文档": iconSvg = '<svg t="1723563293477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32502" width="24" height="24"><path d="M530.46 269c4.64 0 9.05 2.01 12.09 5.52l109.54 126.3A16.01 16.01 0 0 1 656 411.3V893c0 8.82-7.18 16-16 16H178c-8.82 0-16-7.18-16-16V285c0-8.82 7.18-16 16-16h352.46m0-64H178c-44.18 0-80 35.82-80 80v608c0 44.18 35.82 80 80 80h462c44.18 0 80-35.82 80-80V411.3c0-19.26-6.95-37.87-19.56-52.42L590.9 232.58A80.014 80.014 0 0 0 530.46 205z" p-id="32503" fill="#2c2c2c"></path><path d="M819.29 864h-45.92c-17.67 0-32-14.33-32-32s14.33-32 32-32h45.92c25.21 0 45.71-19.94 45.71-44.46V295.17c0-10.61-3.91-20.88-11.01-28.94L747.58 145.52c-8.7-9.87-21.35-15.52-34.7-15.52H370.49c-17.67 0-32-14.33-32-32s14.33-32 32-32h342.38c31.72 0 61.87 13.56 82.71 37.2L902 223.91c17.41 19.75 27 45.06 27 71.26v460.37C929 815.35 879.78 864 819.29 864z" p-id="32504" fill="#2c2c2c"></path><path d="M702 468H552.09c-41.96 0-76.09-31.47-76.09-70.15V240.5h64v157.35c0 1.88 4.57 6.15 12.09 6.15H702v64zM898 326H748.09c-41.96 0-76.09-31.47-76.09-70.15V98.5h64v157.35c0 1.88 4.57 6.15 12.09 6.15H898v64zM535.13 784.5H262.88c-17.67 0-32 14.33-32 32s14.33 32 32 32h272.25c17.67 0 32-14.33 32-32s-14.33-32-32-32zM535.13 638.75H262.88c-17.67 0-32 14.33-32 32s14.33 32 32 32h272.25c17.67 0 32-14.33 32-32s-14.33-32-32-32zM535.13 493H262.88c-17.67 0-32 14.33-32 32s14.33 32 32 32h272.25c17.67 0 32-14.33 32-32s-14.33-32-32-32z" p-id="32505" fill="#2c2c2c"></path></svg>'; colorClass = 'file-icon-document'; break; case "图片": iconSvg = '<svg t="1723563406253" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35753" width="24" height="24"><path d="M938.666667 553.92V768c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V256c0-64.8 52.533333-117.333333 117.333334-117.333333h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333333v297.92z m-64-74.624V256a53.333333 53.333333 0 0 0-53.333334-53.333333H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v344.48A290.090667 290.090667 0 0 1 192 597.333333a286.88 286.88 0 0 1 183.296 65.845334C427.029333 528.384 556.906667 437.333333 704 437.333333c65.706667 0 126.997333 16.778667 170.666667 41.962667z m0 82.24c-5.333333-8.32-21.130667-21.653333-43.648-32.917333C796.768 511.488 753.045333 501.333333 704 501.333333c-121.770667 0-229.130667 76.266667-270.432 188.693334-2.730667 7.445333-7.402667 20.32-13.994667 38.581333-7.68 21.301333-34.453333 28.106667-51.370666 13.056-16.437333-14.634667-28.554667-25.066667-36.138667-31.146667A222.890667 222.890667 0 0 0 192 661.333333c-14.464 0-28.725333 1.365333-42.666667 4.053334V768a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V561.525333zM320 480a96 96 0 1 1 0-192 96 96 0 0 1 0 192z m0-64a32 32 0 1 0 0-64 32 32 0 0 0 0 64z" fill="#2c2c2c" p-id="35754"></path></svg>'; colorClass = 'file-icon-image'; break; case "音频": iconSvg = '<svg t="1723887950224" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5126" width="24" height="24"><path d="M988.74783 23.733531a106.803451 106.803451 0 0 0-84.406083-22.397368L373.460126 81.902696c-60.536887 9.150925-107.955315 62.840616-107.955315 122.225639v514.627531a172.715706 172.715706 0 0 0-94.772864-28.156691C76.471022 690.599175 0.064 765.214407 0.064 857.299587 0.064 949.384767 76.471022 1024 170.731947 1024c94.196932 0 170.603954-74.615233 170.603954-166.700413V384.011199l606.776703-91.957195v331.673028a172.715706 172.715706 0 0 0-94.836856-28.156692c-94.196932 0-170.603954 74.679225-170.603954 166.764406 0 92.08518 76.407022 166.700413 170.603954 166.700412 94.260924 0 170.667947-74.615233 170.667946-166.700412V100.652493c0-30.204451-12.798496-58.233158-35.195864-76.918962zM170.795939 949.896707c-52.281857 0-94.836857-41.53112-94.836857-92.59712 0-51.129992 42.555-92.661112 94.836857-92.661112s94.772864 41.595113 94.772864 92.661112c0 51.066-42.491007 92.59712-94.772864 92.59712zM341.335901 309.012011v-104.947669c0-22.589346 20.477594-45.434661 43.770856-49.01824l530.881622-80.438548a29.052586 29.052586 0 0 1 23.421248 5.375368 25.852962 25.852962 0 0 1 8.702977 20.669571v116.466316L341.335901 308.948019z m511.939847 545.919855c-52.281857 0-94.772864-41.53112-94.772865-92.59712s42.491007-92.59712 94.772865-92.59712c52.281857 0 94.836857 41.53112 94.836856 92.59712s-42.555 92.59712-94.836856 92.59712z" fill="#2c2c2c" p-id="5127"></path></svg>'; colorClass = 'file-icon-music'; break; case "压缩包": iconSvg = '<svg t="1723563514606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="41199" width="24" height="24"><path d="M594.24 53.376h31.744c67.2-0.064 105.472-0.128 141.44 12.48 57.536 20.224 103.616 63.36 125.568 118.656v0.128c13.824 35.008 13.824 71.872 13.76 135.872v281.408c0 71.168 0 126.912-5.248 173.568-5.376 47.616-16.832 87.232-41.984 119.04a32 32 0 0 1-50.176-39.808c15.104-19.008 23.808-44.672 28.544-86.4 4.672-41.6 4.864-97.6 4.864-170.944V333.632c0-72.256-1.216-105.152-9.28-125.504a144.384 144.384 0 0 0-87.36-81.92c-22.784-7.936-58.496-8.832-135.232-8.832H572.8a109.632 109.632 0 0 0-107.072 110.08c0 6.4 0.448 13.632 0.96 21.376 1.28 22.08 2.944 48.896-4.48 76.544-9.472 35.52-37.312 63.36-72.832 72.896-27.648 7.36-54.4 5.76-76.48 4.416-7.68-0.512-14.848-0.96-21.248-0.96-61.248 0-110.272 49.024-110.272 110.272v116.352c0 65.536 0.064 113.984 4.224 149.248 4.16 35.328 11.584 55.872 24.96 72.768 8.512 10.624 18.56 20.096 29.952 28.16 31.552 22.208 82.048 27.52 186.368 28.096a32 32 0 0 1-0.384 64c-105.792-0.512-170.816-3.2-222.848-39.872a208 208 0 0 1-43.136-40.512c-22.784-28.608-33.472-63.552-38.4-105.088-4.736-40.448-4.736-88.576-4.736-151.424V503.04c0-115.648-0.064-178.816 22.272-235.136 35.712-90.24 111.04-160.64 205.568-193.92 58.944-20.672 125.44-20.672 249.024-20.608z m-410.304 321.92a173.248 173.248 0 0 1 107.712-37.568c10.048 0 19.968 0.384 29.44 0.64 20.8 0.768 39.36 1.408 51.648-1.92a39.232 39.232 0 0 0 27.776-27.712c3.264-12.288 2.624-30.912 1.92-51.776a844.16 844.16 0 0 1-0.64-29.44c0-40.064 13.632-76.992 36.48-106.496-29.824 2.496-52.544 6.528-71.872 13.376-77.952 27.328-138.688 84.8-167.296 156.992-8.384 21.248-12.8 47.104-15.168 83.84z" fill="#2c2c2c" p-id="41200"></path><path d="M572.864 705.728c-43.008 20.096-71.488 62.336-71.488 109.12v62.4c-0.256 19.264-0.384 34.048 8.256 50.752 8.192 15.808 21.632 28.16 37.76 35.392 16.768 7.552 31.424 7.424 51.84 7.296l9.536-0.064h50.624c20.416 0.192 35.2 0.32 51.968-7.232 16.128-7.296 29.44-19.584 37.632-35.392 8.704-16.896 8.576-31.744 8.448-51.2l-0.064-8.576v-53.376c0-46.784-28.544-89.024-71.488-109.12a133.888 133.888 0 0 0-113.024 0z m27.136 58.048c18.304-8.576 40.448-8.576 58.752 0 22.08 10.24 34.624 30.08 34.624 51.072v53.376c0 17.472-0.896 26.112-1.216 29.12-0.128 1.152-0.128 1.472 0 1.28a14.272 14.272 0 0 1-7.04 6.4c-0.448 0.192-9.6 1.6-35.2 1.6h-41.152c-25.6 0-34.688-1.408-35.2-1.6a14.656 14.656 0 0 1-7.04-6.4l-0.064-1.472a296.832 296.832 0 0 1-1.088-28.928v-53.376c0-20.992 12.544-40.832 34.624-51.072zM574.72 147.968a32 32 0 0 1 22.656-9.344H640a32 32 0 0 1 0 64h-42.624a32 32 0 0 1-22.656-54.656zM660.096 254.72a32 32 0 0 1 22.656-9.344h42.624a32 32 0 1 1 0 64h-42.624a32 32 0 0 1-22.656-54.656zM574.72 339.968a32 32 0 0 1 22.656-9.344H640a32 32 0 0 1 0 64h-42.624a32 32 0 0 1-22.656-54.656zM660.096 429.632a32 32 0 0 1 22.656-9.408h42.624a32 32 0 1 1 0 64h-42.624a32 32 0 0 1-22.656-54.592zM574.72 531.968a32 32 0 0 1 22.656-9.344H640a32 32 0 0 1 0 64h-42.624a32 32 0 0 1-22.656-54.656zM660.096 617.344a32 32 0 0 1 22.656-9.344h42.624a32 32 0 1 1 0 64h-42.624a32 32 0 0 1-22.656-54.656z" fill="#2c2c2c" p-id="41201"></path></svg>'; colorClass = 'file-icon-archive'; break; } break; } } return { svg: iconSvg, colorClass: colorClass }; } function toggleFailedContainer() { if (failedContainer.style.display === 'none') { failedContainer.style.display = 'block'; failedToggleButton.textContent = '隐藏失败项 (' + (failedContainer.children.length - 1) + ')'; } else { failedContainer.style.display = 'none'; failedToggleButton.textContent = '显示失败项 (' + (failedContainer.children.length - 1) + ')'; } } function updateFailedCount() { const count = failedContainer.children.length - 1; failedToggleButton.textContent = (failedContainer.style.display === 'none' ? '显示' : '隐藏') + '失败项 (' + count + ')'; if (count > 0) { failedToggleButton.style.display = 'block'; noErrorsMessage.style.display = 'none'; } else { failedToggleButton.style.display = 'none'; noErrorsMessage.style.display = 'block'; } } function addFailedFileNotification(fileName) { const failedItem = document.createElement('div'); failedItem.className = 'failed-file'; failedItem.style.cssText = ` display: flex; justify-content: space-between; align-items: center; padding: 10px; margin-bottom: 10px; background-color: #fff0f0; border-left: 4px solid #ff4d4d; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.3s ease; `; const fileNameSpan = document.createElement('span'); fileNameSpan.style.cssText = ` color: #ff4d4d; font-weight: bold; margin-right: 10px; `; fileNameSpan.textContent = `❌ 添加失败: ${fileName}`; const retryButton = document.createElement('button'); retryButton.className = 'retry-btn'; retryButton.textContent = '重试'; retryButton.style.cssText = ` background-color: #ff9999; color: white; border: none; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; outline: none; box-shadow: 0 2px 4px rgba(255, 77, 77, 0.3); `; retryButton.onmouseover = () => { retryButton.style.backgroundColor = '#ff7777'; retryButton.style.boxShadow = '0 4px 8px rgba(255, 77, 77, 0.5)'; }; retryButton.onmouseout = () => { retryButton.style.backgroundColor = '#ff9999'; retryButton.style.boxShadow = '0 2px 4px rgba(255, 77, 77, 0.3)'; }; retryButton.onclick = () => { failedItem.style.opacity = '0'; failedItem.style.transform = 'translateX(20px)'; setTimeout(() => { failedItem.remove(); const resource = Object.values(course_resources).find(r => r.name === fileName); updateFailedCount(); if (failedContainer.children.length === 1) { noErrorsMessage.style.display = 'block'; } }, 300); }; failedItem.appendChild(fileNameSpan); failedItem.appendChild(retryButton); failedContainer.appendChild(failedItem); updateFailedCount(); // 添加入场动画 setTimeout(() => { failedItem.style.opacity = '1'; failedItem.style.transform = 'translateX(0)'; }, 10); } noErrorsMessage.style.display = 'none'; } // 预览逻辑 function previewFile(fileName, fileUrl) { const extension = fileName.split('.').pop().toLowerCase(); const supportedDocs = ['pdf', 'txt', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'js', 'json', 'css', 'sql', 'xml', 'java', 'cs']; const supportedImages = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'ico']; const supportedAudio = ['mp3', 'wav', 'ogg']; const supportedArchives = ['zip', 'rar']; const supportedDocsForInfo = ['pdf', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']; const previewBaseUrl = 'https://vip.ow365.cn/?i=29353&ssl=1&draw=1'; if (!supportedDocs.includes(extension) && !supportedImages.includes(extension) && !supportedAudio.includes(extension) && !supportedArchives.includes(extension)) { showNotification('该类型文件不支持预览╯︿╰', 'warning'); return; } let previewModal = document.createElement('div'); previewModal.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.98); z-index: 1000; border-radius: 20px; box-shadow: 0 25px 50px rgba(0,0,0,0.25); width: 85%; height: 85%; overflow: hidden; opacity: 0; backdrop-filter: blur(15px); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border: 1px solid rgba(255,255,255,0.18); `; let dragPreviewHandle = document.createElement('div'); dragPreviewHandle.style.cssText = ` width: 100%; height: 40px; background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; cursor: move; border-top-left-radius: 20px; border-top-right-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; overflow: hidden; `; let style = document.createElement('style'); style.textContent = ` @keyframes shimmer { 0% {background-position: 200% 0;} 100% {background-position: -200% 0;} } `; document.head.appendChild(style); let dragPreviewIndicator = document.createElement('div'); dragPreviewIndicator.style.cssText = ` width: 50px; height: 5px; background-color: rgba(0,0,0,0.2); border-radius: 2.5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); `; dragPreviewHandle.appendChild(dragPreviewIndicator); let textLabel = document.createElement('span'); textLabel.textContent = '预览窗口'; textLabel.style.cssText = ` font-weight: bold; font-size: 14px; color: #555; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); opacity: 0.7; `; dragPreviewHandle.appendChild(textLabel); previewModal.appendChild(dragPreviewHandle); let isDragging = false; let startX, startY, startLeft, startTop; function onMouseMove(e) { if (!isDragging) return; let dx = e.clientX - startX; let dy = e.clientY - startY; requestAnimationFrame(() => { let newLeft = startLeft + dx; let newTop = startTop + dy; previewModal.style.left = `${newLeft}px`; previewModal.style.top = `${newTop}px`; }); } function onTouchMove(e) { if (!isDragging) return; e.preventDefault(); let dx = e.touches[0].clientX - startX; let dy = e.touches[0].clientY - startY; requestAnimationFrame(() => { let newLeft = startLeft + dx; let newTop = startTop + dy; previewModal.style.left = `${newLeft}px`; previewModal.style.top = `${newTop}px`; }); } function onMouseUp() { isDragging = false; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); document.removeEventListener('touchmove', onTouchMove); document.removeEventListener('touchend', onMouseUp); } dragPreviewHandle.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; startY = e.clientY; startLeft = previewModal.offsetLeft; startTop = previewModal.offsetTop; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); dragPreviewHandle.addEventListener('touchstart', (e) => { e.preventDefault(); isDragging = true; startX = e.touches[0].clientX; startY = e.touches[0].clientY; startLeft = previewModal.offsetLeft; startTop = previewModal.offsetTop; document.addEventListener('touchmove', onTouchMove, { passive: false }); document.addEventListener('touchend', onMouseUp); }); let closeButton = document.createElement('button'); closeButton.innerHTML = ` <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> `; closeButton.style.cssText = ` position: absolute; top: 5px; right: 5px; background-color: #FFA500; color: white; border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 1001; box-shadow: 0 4px 6px rgba(255, 165, 0, 0.3); `; closeButton.onmouseover = () => { closeButton.style.backgroundColor = '#FFB732'; closeButton.style.transform = 'scale(1.1) rotate(90deg)'; closeButton.style.boxShadow = '0 6px 8px rgba(255, 165, 0, 0.5)'; }; closeButton.onmouseout = () => { closeButton.style.backgroundColor = '#FFA500'; closeButton.style.transform = 'scale(1) rotate(0deg)'; closeButton.style.boxShadow = '0 4px 6px rgba(255, 165, 0, 0.3)'; }; closeButton.onclick = () => { previewModal.style.opacity = '0'; setTimeout(() => { document.body.removeChild(previewModal); }, 400); }; previewModal.appendChild(closeButton); let contentWrapper = document.createElement('div'); contentWrapper.style.cssText = ` width: 100%; height: calc(100% - 30px); display: flex; justify-content: center; align-items: center; padding: 30px; box-sizing: border-box; `; let iframe; if (supportedDocs.includes(extension) || supportedArchives.includes(extension)) { const previewUrl = `${previewBaseUrl}&furl=${encodeURIComponent(fileUrl)}`; iframe = document.createElement('iframe'); iframe.src = previewUrl; iframe.style.cssText = ` width: 100%; height: 100%; border: none; border-radius: 15px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); `; contentWrapper.appendChild(iframe); if (supportedDocsForInfo.includes(extension)) { let isShowingInfo = false; let infoContent = null; let infoButton = document.createElement('button'); infoButton.title = '切换文件信息/预览'; infoButton.innerHTML = ` <svg t="1726054601642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8140" width="24" height="24"><path d="M921.6 614.4a102.4 102.4 0 0 1 102.4 102.4v204.8a102.4 102.4 0 0 1-102.4 102.4h-204.8a102.4 102.4 0 0 1-102.4-102.4v-204.8a102.4 102.4 0 0 1 102.4-102.4h204.8zM78.3872 524.8l9.728 16.64c1.024 3.3792 2.3552 18.688 3.1744 24.4224a435.2 435.2 0 0 0 74.6496 186.0096 420.352 420.352 0 0 0 64.256 71.7824c77.1072 68.5056 153.4464 101.0176 229.8368 99.4816a38.4 38.4 0 1 1 1.536 76.8c-97.28 1.9456-191.6416-38.2976-282.368-118.8864a497.1008 497.1008 0 0 1-87.9104-102.4512l-1.6896-2.816v62.1568a38.4 38.4 0 0 1-76.8 0.0512l0.1024-288.768 0.512-4.2496 1.536-5.7856 63.4368-14.3872zM921.6 691.2h-204.8a25.6 25.6 0 0 0-25.1904 20.992L691.2 716.8v204.8a25.6 25.6 0 0 0 20.992 25.1904l4.608 0.4096h204.8a25.6 25.6 0 0 0 25.1904-20.992L947.2 921.6v-204.8a25.6 25.6 0 0 0-20.992-25.1904L921.6 691.2zM562.432 12.8512c97.28-1.9456 191.6416 38.2976 282.368 118.8864a497.1008 497.1008 0 0 1 87.9104 102.4512l1.6896 2.816V174.848a38.4 38.4 0 0 1 76.8-0.0512l-0.1024 288.768-0.512 4.2496-1.536 5.7856-63.4368 14.336-9.728-16.5888c-1.024-3.3792-2.3552-18.7392-3.1744-24.4224a435.2 435.2 0 0 0-74.6496-186.0096 420.352 420.352 0 0 0-64.256-71.7824c-77.1072-68.5056-153.4464-101.0176-229.8368-99.4816a38.4 38.4 0 0 1-1.536-76.8zM307.2 0a102.4 102.4 0 0 1 102.4 102.4v204.8a102.4 102.4 0 0 1-102.4 102.4H102.4a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4h204.8z m0 76.8H102.4a25.6 25.6 0 0 0-25.1904 20.992L76.8 102.4v204.8a25.6 25.6 0 0 0 20.992 25.1904L102.4 332.8h204.8a25.6 25.6 0 0 0 25.1904-20.992L332.8 307.2V102.4a25.6 25.6 0 0 0-20.992-25.1904L307.2 76.8z" fill="#ffffff" p-id="8141"></path></svg> `; infoButton.style.cssText = ` position: absolute; bottom: 50px; left: 5px;F background-color: #FFA500; color: white; border: none; border-radius: 50%; width: 56px; height: 56px; cursor: pointer; transition: all 0.3s ease; z-index: 1001; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); `; let style = document.createElement('style'); style.textContent = ` @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .rotating { animation: rotate 2s linear infinite; } .switch-icon { transition: transform 0.3s ease; } button:hover .switch-icon { transform: scale(1.1); } `; document.head.appendChild(style); infoButton.onmouseover = () => { infoButton.style.backgroundColor = '#FFB732'; infoButton.style.transform = 'scale(1.1)'; infoButton.style.boxShadow = '0 6px 8px rgba(0, 0, 0, 0.15)'; }; infoButton.onmouseout = () => { if (!infoButton.classList.contains('rotating')) { infoButton.style.backgroundColor = '#FFA500'; infoButton.style.transform = 'scale(1)'; infoButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)'; } }; infoButton.onclick = () => { if (isShowingInfo) { iframe.style.display = 'block'; infoContent.style.display = 'none'; isShowingInfo = false; infoButton.title = '查看文件信息'; } else { if (infoContent === null) { infoButton.classList.add('rotating'); infoButton.style.pointerEvents = 'none'; const infoUrl = `${previewBaseUrl}&info=0&furl=${encodeURIComponent(fileUrl)}`; fetch(infoUrl) .then(response => response.json()) .then(data => { infoContent = createInfoContent(data); contentWrapper.appendChild(infoContent); toggleInfoDisplay(); resetButton(); }) .catch(error => { console.error('获取文档信息失败:', error); showNotification('获取文档信息失败，请稍后重试。', 'error'); resetButton(); }); } else { toggleInfoDisplay(); } } }; function toggleInfoDisplay() { iframe.style.display = 'none'; infoContent.style.display = 'block'; isShowingInfo = true; infoButton.title = '返回文件预览'; } function resetButton() { infoButton.classList.remove('rotating'); infoButton.style.pointerEvents = 'auto'; } previewModal.appendChild(infoButton); } } else if (supportedImages.includes(extension)) { let img = document.createElement('img'); img.src = fileUrl; img.style.cssText = ` max-width: 100%; max-height: 100%; border-radius: 15px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); transition: transform 0.3s ease; `; img.onmouseover = () => { img.style.transform = 'scale(1.02)'; }; img.onmouseout = () => { img.style.transform = 'scale(1)'; }; contentWrapper.appendChild(img); } else if (supportedAudio.includes(extension)) { let audio = document.createElement('audio'); audio.controls = true; audio.src = fileUrl; audio.style.cssText = ` width: 80%; max-width: 500px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); border-radius: 30px; `; contentWrapper.appendChild(audio); } previewModal.appendChild(contentWrapper); document.body.appendChild(previewModal); requestAnimationFrame(() => { previewModal.style.opacity = '1'; }); } function createInfoContent(data) { let infoDiv = document.createElement('div'); infoDiv.style.cssText = ` width: 100%; height: 100%; overflow-y: auto; padding: 20px; box-sizing: border-box; background-color: #f0f4f8; display: none; `; const getIconForFileType = (fileName) => { const extension = fileName.split('.').pop().toLowerCase(); const icons = { pdf: '📄', doc: '📝', docx: '📝', xls: '📊', xlsx: '📊', ppt: '📽️', pptx: '📽️', default: '📁' }; return icons[extension] || icons.default; }; const fileIcon = getIconForFileType(data.FileName); const { formattedContent, characterCount } = formatTextContent(data.Text); let contentHtml = ` <div class="file-header"> <div class="file-icon">${fileIcon}</div> <h1>${data.FileName}</h1> </div> <div class="info-grid"> <div class="info-item"> <span class="icon">📏</span> <span class="label">文件大小:</span> <span class="value">${formatFileSize(data.FileSize)}</span> </div> <div class="info-item"> <span class="icon">🕒</span> <span class="label">创建时间:</span> <span class="value">${formatDate(data.CreateTime)}</span> </div> <div class="info-item"> <span class="icon">🔄</span> <span class="label">修改时间:</span> <span class="value">${formatDate(data.LastTime)}</span> </div> </div> `; if (data.PageCount !== undefined) { contentHtml += ` <div class="info-grid"> <div class="info-item"> <span class="icon">📚</span> <span class="label">页数:</span> <span class="value">${data.PageCount}</span> </div> <div class="info-item"> <span class="icon">🔤</span> <span class="label">字数:</span> <span class="value">${characterCount}</span> </div> </div> <h2 class="section-title">📝 文本内容提取</h2> <div class="search-container"> <div class="search-box"> <input type="text" id="searchInput" placeholder=" " /> <label for="searchInput">🔍 搜索文本...</label> <span class="search-border"></span> </div> <div class="search-buttons"> <button id="prevButton" disabled>⬆ 上一个</button> <button id="nextButton" disabled>⬇ 下一个</button> <button id="searchButton">搜索</button> </div> </div> <div class="text-content" id="textContent">${formattedContent}</div> `; } else if (data.SlideCount !== undefined) { contentHtml += ` <div class="info-grid"> <div class="info-item"> <span class="icon">🎞️</span> <span class="label">幻灯片数:</span> <span class="value">${data.SlideCount}</span> </div> <div class="info-item"> <span class="icon">📐</span> <span class="label">尺寸:</span> <span class="value">${data.Width} x ${data.Height}</span> </div> <div class="info-item"> <span class="icon">🔲</span> <span class="label">比例:</span> <span class="value">${data.Ratio}</span> </div> </div> <h2 class="section-title">🖥️ 幻灯片标题</h2> <ul class="slide-names"> ${data.SlideNames.split(';').map(name => `<li>${name.trim()}</li>`).join('')} </ul> `; } else if (data.SheetCount !== undefined) { contentHtml += ` <div class="info-grid"> <div class="info-item"> <span class="icon">📊</span> <span class="label">工作表数:</span> <span class="value">${data.SheetCount}</span> </div> </div> <h2 class="section-title">📑 工作表名称</h2> <ul class="sheet-names"> ${data.SheetNames.split(';').map(name => `<li>${name.trim()}</li>`).join('')} </ul> `; } infoDiv.innerHTML = contentHtml; if (data.PageCount !== undefined) { const searchInput = infoDiv.querySelector('#searchInput'); const searchButton = infoDiv.querySelector('#searchButton'); const prevButton = infoDiv.querySelector('#prevButton'); const nextButton = infoDiv.querySelector('#nextButton'); const textContentDiv = infoDiv.querySelector('#textContent'); let currentMatchIndex = -1; let matches = []; function highlightText(searchTerm) { const innerHTML = textContentDiv.innerHTML.replace(/<span class="highlight current">(.*?)<\/span>/gi, '$1') .replace(/<span class="highlight">(.*?)<\/span>/gi, '$1'); textContentDiv.innerHTML = innerHTML; if (!searchTerm) { matches = []; currentMatchIndex = -1; prevButton.disabled = true; nextButton.disabled = true; return; } const regex = new RegExp(`(${searchTerm})`, 'gi'); let matchCount = 0; const replacer = (match) => { matchCount++; return `<span class="highlight">${match}</span>`; }; textContentDiv.innerHTML = innerHTML.replace(regex, replacer); matches = textContentDiv.querySelectorAll('.highlight'); if (matches.length > 0) { currentMatchIndex = 0; updateCurrentMatch(); prevButton.disabled = false; nextButton.disabled = false; } else { currentMatchIndex = -1; prevButton.disabled = true; nextButton.disabled = true; } } function updateCurrentMatch() { matches.forEach((match) => match.classList.remove('current')); if (currentMatchIndex >= 0 && currentMatchIndex < matches.length) { const currentMatch = matches[currentMatchIndex]; currentMatch.classList.add('current'); currentMatch.scrollIntoView({ behavior: 'smooth', block: 'center' }); } } searchButton.addEventListener('click', () => { const searchTerm = searchInput.value.trim(); highlightText(searchTerm); }); searchInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { const searchTerm = searchInput.value.trim(); highlightText(searchTerm); } }); nextButton.addEventListener('click', () => { if (matches.length > 0) { currentMatchIndex = (currentMatchIndex + 1) % matches.length; updateCurrentMatch(); } }); prevButton.addEventListener('click', () => { if (matches.length > 0) { currentMatchIndex = (currentMatchIndex - 1 + matches.length) % matches.length; updateCurrentMatch(); } }); } const style = document.createElement('style'); style.textContent = ` * { box-sizing: border-box; } body { line-height: 1.6; color: #333; background-color: #f0f4f8; } .file-header { display: flex; align-items: center; margin-bottom: 30px; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .file-icon { font-size: 48px; margin-right: 20px; } h1 { font-size: 24px; color: #2c3e50; margin: 0; } h2.section-title { font-size: 20px; color: #34495e; border-bottom: 2px solid #3498db; padding-bottom: 10px; margin-top: 40px; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .info-item { background-color: #fff; border-radius: 8px; padding: 15px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; display: flex; flex-direction: column; } .info-item:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .info-item .icon { font-size: 24px; margin-bottom: 10px; } .info-item .label { font-weight: bold; color: #7f8c8d; margin-bottom: 5px; } .info-item .value { color: #2c3e50; font-size: 18px; } .text-content { background-color: #fff; padding: 25px; border-radius: 8px; margin-top: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-height: 500px; overflow-y: auto; font-size: 16px; line-height: 1.8; color: #34495e; border-left: 4px solid #3498db; } .text-content h3 { font-size: 20px; color: #2c3e50; margin-top: 20px; margin-bottom: 10px; border-bottom: 1px solid #ecf0f1; padding-bottom: 5px; } .text-content p { margin-bottom: 15px; } .text-content ul { padding-left: 20px; margin-bottom: 15px; } .text-content li { margin-bottom: 5px; } .text-content strong { color: #2c3e50; font-weight: 700; } .text-content::-webkit-scrollbar { width: 8px; } .text-content::-webkit-scrollbar-thumb { background-color: #bdc3c7; border-radius: 4px; } .text-content::-webkit-scrollbar-track { background-color: #ecf0f1; } .slide-names, .sheet-names { list-style-type: none; padding-left: 0; background-color: #fff; padding: 20px; border-radius: 8px; margin-top: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .slide-names li, .sheet-names li { margin-bottom: 10px; color: #3498db; font-size: 16px; transition: all 0.2s ease; padding: 10px; border-radius: 4px; background-color: #f7f9fc; } .slide-names li:hover, .sheet-names li:hover { color: #2980b9; transform: translateX(5px); background-color: #e8f0fe; } .search-container { display: flex; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .search-box { position: relative; flex: 1; min-width: 250px; } .search-box input[type="text"] { width: 100%; padding: 15px 20px; font-size: 16px; color: #2c3e50; border: none; border-bottom: 2px solid #ccc; background: transparent; outline: none; transition: border-color 0.3s; } .search-box input[type="text"]::placeholder { color: transparent; } .search-box label { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); color: #aaa; font-size: 16px; pointer-events: none; transition: all 0.3s; } .search-box input[type="text"]:focus + label, .search-box input[type="text"]:not(:placeholder-shown) + label { top: 5px; transform: translateY(-100%); font-size: 12px; color: #3498db; } .search-box .search-border { position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: #3498db; transition: width 0.3s; } .search-box input[type="text"]:focus ~ .search-border { width: 100%; } .search-buttons { display: flex; gap: 10px; } .search-buttons button { padding: 12px 15px; font-size: 16px; background: linear-gradient(135deg, #6dd5ed, #2193b0); color: #fff; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); outline: none; } .search-buttons button:disabled { background: #bdc3c7; cursor: not-allowed; box-shadow: none; } .search-buttons button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } .highlight { background-color: #ffeb3b; padding: 2px 0; transition: background-color 0.3s; } .highlight.current { background-color: #ffc107; } `; infoDiv.appendChild(style); return infoDiv; } function formatFileSize(bytes) { if (bytes < 1024) return bytes + ' bytes'; else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KB'; else if (bytes < 1073741824) return (bytes / 1048576).toFixed(2) + ' MB'; else return (bytes / 1073741824).toFixed(2) + ' GB'; } function formatDate(dateString) { const date = new Date(dateString); return date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }); } function formatTextContent(text) { if (typeof text !== 'string') { console.error('Invalid text input:', text); return { formattedContent: '', characterCount: 0, }; } // 处理特殊字符 text = text .replace(/\u0007/g, '\n') .replace(/\f/g, '\n') .replace(/\r/g, '\n') .trim(); const characterCount = text.length; const lines = text.split(/\n+/).map((line) => line.trim()).filter((line) => line); let formattedContent = ''; let inList = false; lines.forEach((line) => { if (line.match(/^[一二三四五六七八九十]+[、\.．]/)) { if (inList) { formattedContent += '</ul>'; inList = false; } formattedContent += `<h2>${line}</h2>`; } else if (line.match(/^\d+[\.\、\.．]/)) { if (inList) { formattedContent += '</ul>'; inList = false; } formattedContent += `<h3>${line}</h3>`; } else if (line.match(/^[①②③④⑤⑥⑦⑧⑨⑩]/)) { if (!inList) { formattedContent += '<ul>'; inList = true; } formattedContent += `<li>${line}</li>`; } else if (line.match(/^[•⚫-]/)) { if (!inList) { formattedContent += '<ul>'; inList = true; } formattedContent += `<li>${line.replace(/^[•⚫-]\s*/, '')}</li>`; } else { if (inList) { formattedContent += '</ul>'; inList = false; } formattedContent += `<p>${line}</p>`; } }); if (inList) { formattedContent += '</ul>'; inList = false; } return { formattedContent, characterCount, }; } let toggleButton; let downloadsContainer = document.getElementById('downloadsContainer'); let wrapperContainer = document.getElementById('downloadsWrapperContainer'); let totalProgressBar; let totalProgressText; let totalDownloads = 0; let completedDownloads = 0; if (!wrapperContainer) { wrapperContainer = document.createElement('div'); wrapperContainer.id = 'downloadsWrapperContainer'; Object.assign(wrapperContainer.style, { position: 'fixed', bottom: '150px', left: '10px', zIndex: '9999', display: 'flex', alignItems: 'center', overflow: 'visible', transition: 'transform 0.3s ease-in-out', transform: 'translateX(calc(-100% + 25px))' }); // 创建进度条容器 downloadsContainer = document.createElement('div'); downloadsContainer.id = 'downloadsContainer'; // 设置容器样式 Object.assign(downloadsContainer.style, { position: 'relative', bottom: 'auto', left: 'auto', right: 'auto', zIndex: '9999', backgroundColor: '#FFF3E0', boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)', borderRadius: '8px', padding: '30px', width: 'auto', minWidth: '600px', boxSizing: 'border-box', margin: '0 auto', border: '1px solid #FFD180', transition: 'transform 0.3s ease-in-out', maxHeight: '190px', overflowY: 'auto', overflowX: 'hidden', }); wrapperContainer.appendChild(downloadsContainer); // 创建总进度条 totalProgressBar = document.createElement('div'); totalProgressBar.id = 'totalProgressBar'; Object.assign(totalProgressBar.style, { width: '100%', height: '10px', backgroundColor: '#E0E0E0', borderRadius: '5px', overflow: 'hidden', marginBottom: '10px' }); let totalProgressInner = document.createElement('div'); Object.assign(totalProgressInner.style, { width: '0%', height: '100%', backgroundColor: '#4CAF50', borderRadius: '5px', transition: 'width 0.3s' }); totalProgressBar.appendChild(totalProgressInner); // 创建总进度文本 totalProgressText = document.createElement('div'); totalProgressText.id = 'totalProgressText'; Object.assign(totalProgressText.style, { textAlign: 'center', marginBottom: '10px', fontWeight: 'bold', color: '#4CAF50' }); totalProgressText.textContent = '总进度: 0%'; downloadsContainer.appendChild(totalProgressText); downloadsContainer.appendChild(totalProgressBar); // 创建收起/展示按钮 toggleButton = document.createElement('button'); toggleButton.title = '点击展开/收折进度条'; toggleButton.textContent = '▶'; // 设置按钮样式 Object.assign(toggleButton.style, { position: 'absolute', top: '50%', right: '10px', transform: 'translateY(-50%)', marginLeft: '5px', zIndex: '10000', border: 'none', boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.24), 0 4px 5px 0 rgba(0, 0, 0, 0.19)', background: 'linear-gradient(45deg, #FFC107, #FF9800)', borderRadius: '8px', padding: '4px 8px', paddingRight: '2px', paddingLeft: '2px', color: 'white', fontSize: '12px', cursor: 'pointer', transition: 'left 0.3s, transform 0.3s, background-color 0.3s, box-shadow 0.3s', textShadow: '0 0 0px transparent' }); // 按钮悬停效果 toggleButton.onmouseover = () => { Object.assign(toggleButton.style, { background: 'linear-gradient(45deg, #FFEB3B, #FFC107)', boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.24), 0 6px 10px 0 rgba(0, 0, 0, 0.19)', transform: 'translateY(-60%)' }); }; toggleButton.onmouseout = () => { Object.assign(toggleButton.style, { background: 'linear-gradient(45deg, #FFC107, #FF9800)', boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.24), 0 4px 5px 0 rgba(0, 0, 0, 0.19)', transform: 'translateY(-50%)' }); }; let isCollapsed = true; // 按钮点击事件 toggleButton.onclick = () => { isCollapsed = !isCollapsed; if (isCollapsed) { wrapperContainer.style.transform = 'translateX(calc(-100% + 25px))'; } else { wrapperContainer.style.transform = 'translateX(0)'; } toggleButton.textContent = isCollapsed ? '▶' : '◀'; }; wrapperContainer.appendChild(toggleButton); // 创建 dotlottie-player 容器 let lottieContainer = document.createElement('div'); Object.assign(lottieContainer.style, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', zIndex: '-1' }); lottieContainer.innerHTML = ` <dotlottie-player src="https://lottie.host/0500ecdb-7f3b-4f73-ab09-155a70f85ce3/ZCLltVc7A4.json" background="transparent" speed="1" style="width: 100%; height: 100%;" loop autoplay> </dotlottie-player> `; downloadsContainer.prepend(lottieContainer); } function addDownloadsContainer() { document.body.appendChild(wrapperContainer); } function updateContainerPosition() { let windowHeight = window.innerHeight; let downloadsContainerHeight = downloadsContainer.offsetHeight; let currentTop = downloadsContainer.getBoundingClientRect().top; if (currentTop + downloadsContainerHeight > windowHeight) { let newTop = windowHeight - downloadsContainerHeight - 10; downloadsContainer.style.top = `${newTop}px`; downloadsContainer.style.bottom = 'auto'; } } function updateIndicator() { let indicator = document.getElementById('progressIndicator'); let progressBarCount = downloadsContainer.querySelectorAll('.progressBar').length; if (!indicator) { indicator = document.createElement('div'); indicator.id = 'progressIndicator'; Object.assign(indicator.style, { position: 'absolute', top: '10px', right: '10px', zIndex: '10000', backgroundColor: '#f00', backgroundImage: 'linear-gradient(to bottom right, #ffcc80, #ff8c00)', color: 'white', textShadow: '0px 1px 2px rgba(0, 0, 0, 0.7)', borderRadius: '50%', width: '20px', height: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 'bold', boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.4)', transition: 'background-color 0.3s, box-shadow 0.3s' }); wrapperContainer.appendChild(indicator); } indicator.textContent = progressBarCount; } function updateDownloadsContainerVisibility() { const nonEmptyNodes = Array.from(downloadsContainer.children).filter(child => !child.classList.contains('slide-out') && child.tagName !== 'P' && child !== downloadsContainer.firstChild && child !== toggleButton && child.id !== 'progressIndicator' && child.id !== 'totalProgressBar' && child.id !== 'totalProgressText' ); if (nonEmptyNodes.length === 0) { if (!downloadsContainer.querySelector('p')) { let emptyText = document.createElement('p'); emptyText.innerHTML = ` 暂无下载内容 ᓚᘏᗢ<br> <span style="font-size: 10px;">(在右侧添加任务吧~)</span> `; Object.assign(emptyText.style, { color: '#FF9800', textAlign: 'center', fontSize: '16px', fontWeight: 'bold', padding: '20px', marginTop: '15px', borderRadius: '8px', opacity: '0', transition: 'opacity 1s ease-in-out, transform 1s', transform: 'translateY(-20px)', top: '50%' }); setTimeout(() => { emptyText.style.opacity = '1'; emptyText.style.transform = 'translateY(0)'; }, 100); emptyText.animate([ { transform: 'translateY(0)' }, { transform: 'translateY(-10px)' }, { transform: 'translateY(0)' } ], { duration: 3000, iterations: Infinity, easing: 'ease-in-out' }); downloadsContainer.appendChild(emptyText); } wrapperContainer.style.display = isProgressBarVisible ? 'flex' : 'none'; if (totalProgressBar) totalProgressBar.style.display = 'none'; if (totalProgressText) totalProgressText.style.display = 'none'; } else { let emptyText = downloadsContainer.querySelector('p'); if (emptyText) { downloadsContainer.removeChild(emptyText); } if (totalProgressBar) totalProgressBar.style.display = 'block'; if (totalProgressText) totalProgressText.style.display = 'block'; } toggleButton.style.display = isProgressBarVisible ? 'block' : 'none'; updateTotalProgress(); } // 更新总进度的函数 function updateTotalProgress() { if (totalDownloads === 0) { totalProgressBar.classList.add('hidden'); totalProgressText.classList.add('hidden'); setTimeout(() => { totalProgressBar.style.display = 'none'; totalProgressText.style.display = 'none'; totalProgressBar.classList.remove('hidden'); totalProgressText.classList.remove('hidden'); }, 500); return; } if (totalProgressBar.style.display === 'none') { totalProgressBar.style.display = 'block'; totalProgressText.style.display = 'block'; totalProgressBar.offsetHeight; totalProgressText.offsetHeight; totalProgressBar.classList.add('visible'); totalProgressText.classList.add('visible'); } if (completedDownloads === 0) { const progressInner = totalProgressBar.firstChild; progressInner.style.width = '0%'; progressInner.style.backgroundColor = 'hsl(0, 100%, 35%)'; totalProgressText.style.color = 'hsl(0, 100%, 35%)'; totalProgressText.textContent = `总进度: 0.00% (0/${totalDownloads})`; return; } const progressPercentage = (completedDownloads / totalDownloads) * 100; const nextProgressPoint = ((completedDownloads + 0.5) / totalDownloads) * 100; const progressInner = totalProgressBar.firstChild; const startProgress = parseFloat(progressInner.style.width) || 0; const duration = 500; const startTime = performance.now(); function animate(currentTime) { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); const easeProgress = 1 - Math.pow(1 - progress, 3); let currentProgress; if (completedDownloads < totalDownloads) { currentProgress = startProgress + (nextProgressPoint - startProgress) * easeProgress; } else { currentProgress = startProgress + (progressPercentage - startProgress) * easeProgress; } progressInner.style.width = `${currentProgress}%`; const hue = Math.floor(120 * (currentProgress / 100)); const color = `hsl(${hue}, 100%, 35%)`; progressInner.style.backgroundColor = color; totalProgressText.style.color = color; totalProgressText.textContent = `总进度: ${currentProgress.toFixed(2)}% (${completedDownloads}/${totalDownloads})`; if (progress < 1) { requestAnimationFrame(animate); } else if (progressPercentage === 100) { progressInner.style.backgroundColor = '#4CAF50'; totalProgressText.style.color = '#4CAF50'; setTimeout(() => { totalProgressBar.classList.add('hidden'); totalProgressText.classList.add('hidden'); setTimeout(() => { totalProgressBar.style.display = 'none'; totalProgressText.style.display = 'none'; totalProgressBar.classList.remove('hidden', 'visible'); totalProgressText.classList.remove('hidden', 'visible'); totalDownloads = 0; completedDownloads = 0; }, 500); }, 1500); } } requestAnimationFrame(animate); } if (!document.getElementById('total-progress-styles')) { const style = document.createElement('style'); style.id = 'total-progress-styles'; style.textContent = ` #totalProgressBar, #totalProgressText { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } #totalProgressBar.visible, #totalProgressText.visible { opacity: 1; transform: translateY(0); } #totalProgressBar.hidden, #totalProgressText.hidden { opacity: 0; transform: translateY(-20px); transition: opacity 0.5s ease-in, transform 0.5s ease-in; } #totalProgressBar > div { transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out; background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent ); background-size: 40px 40px; animation: progress-bar-stripes 1s linear infinite; } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } `; document.head.appendChild(style); } updateIndicator() updateDownloadsContainerVisibility(); function courseDownload(file_url, file_name) { return new Promise((resolve, reject) => { const useThirdPartyDownload = localStorage.getItem('useThirdPartyDownload') === 'true'; const token = getCookie(); const downloadsContainer = document.getElementById('downloadsContainer'); const controller = new AbortController(); const signal = controller.signal; // 创建进度条相关元素 const progressText = document.createElement('span'); const progressBar = document.createElement('div'); const progressBarContainer = document.createElement('div'); const progressContainer = document.createElement('div'); const progressPercentText = document.createElement('span'); const speedAndTimeContainer = document.createElement('div'); const speedText = document.createElement('span'); const remainingTimeText = document.createElement('span'); // 设置样式 const styles = { progressText: { color: '#FF9800', fontWeight: 'bold', fontSize: '16px', textShadow: '1px 1px 2px rgba(0, 0, 0, 0.1)', padding: '5px 0', borderRadius: '4px' }, progressBar: { height: '18px', width: '0%', borderRadius: '8px', className: 'progressBar' }, progressBarContainer: { background: '#E0E0E0', borderRadius: '8px', height: '18px', width: '100%', overflow: 'hidden', position: 'relative' }, progressContainer: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around' }, progressPercentText: { fontSize: '16px', marginLeft: '10px', position: 'absolute', left: '0', top: '0', width: '100%', textAlign: 'center', lineHeight: '18px', zIndex: '1', fontWeight: 'bold' }, speedAndTimeContainer: { display: 'flex', justifyContent: 'space-between', width: '100%', marginTop: '5px' }, speedText: { fontSize: '14px', color: '#4CAF50', fontWeight: 'bold' }, remainingTimeText: { fontSize: '14px', color: '#4CAF50', fontWeight: 'bold' } }; // 应用样式 Object.assign(progressText.style, styles.progressText); Object.assign(progressBar.style, styles.progressBar); Object.assign(progressBarContainer.style, styles.progressBarContainer); Object.assign(progressContainer.style, styles.progressContainer); Object.assign(progressPercentText.style, styles.progressPercentText); Object.assign(speedAndTimeContainer.style, styles.speedAndTimeContainer); Object.assign(speedText.style, styles.speedText); Object.assign(remainingTimeText.style, styles.remainingTimeText); progressText.innerText = `正在下载: ${file_name}`; progressBar.className = 'progressBar'; speedText.innerText = '速度: 0 B/s'; remainingTimeText.innerText = '剩余时间: 计算中...'; // 组装进度条元素 progressBarContainer.appendChild(progressBar); progressContainer.appendChild(progressText); progressContainer.appendChild(progressBarContainer); progressBarContainer.appendChild(progressPercentText); speedAndTimeContainer.appendChild(speedText); speedAndTimeContainer.appendChild(remainingTimeText); progressContainer.appendChild(speedAndTimeContainer); progressContainer.classList.add('slide-in'); updateIndicator(); updateDownloadsContainerVisibility(); downloadsContainer.appendChild(progressContainer); window.AbortController = window.AbortController || {}; window.AbortController[file_name] = controller; // 创建控制容器 const controlContainer = document.createElement('div'); const fileSizeSpan = document.createElement('span'); const stopButton = document.createElement('button'); Object.assign(controlContainer.style, { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }); Object.assign(fileSizeSpan.style, { fontSize: '14px', marginRight: 'auto', fontWeight: 'bold' }); Object.assign(stopButton.style, { padding: '5px 10px', border: 'none', borderRadius: '5px', backgroundColor: '#FF4136', color: 'white', cursor: 'pointer', fontSize: '14px', fontWeight: 'bold', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)', transition: 'transform 0.3s ease', marginTop: '10px' }); stopButton.textContent = '停止'; stopButton.onmouseover = () => { stopButton.style.transform = 'scale(1.2)'; }; stopButton.onmouseout = () => { stopButton.style.transform = 'scale(1)'; }; stopButton.onclick = () => { console.log(`尝试停止下载: ${file_name}`); controller.abort(); progressContainer.classList.add('slide-out'); progressContainer.addEventListener('animationend', () => { progressContainer.remove(); completedDownloads++; updateIndicator(); updateDownloadsContainerVisibility(); if (completedDownloads >= totalDownloads) { setTimeout(() => { totalProgressBar.classList.add('hidden'); totalProgressText.classList.add('hidden'); setTimeout(() => { totalProgressBar.style.display = 'none'; totalProgressText.style.display = 'none'; totalProgressBar.classList.remove('hidden', 'visible'); totalProgressText.classList.remove('hidden', 'visible'); totalDownloads = 0; completedDownloads = 0; }, 500); }, 1500); } }, { once: true }); }; controlContainer.appendChild(fileSizeSpan); controlContainer.appendChild(stopButton); progressContainer.appendChild(controlContainer); addProgressBarStyles(); updateIndicator(); updateDownloadsContainerVisibility(); updateContainerPosition(); // 保存下载历史 saveDownloadHistory(file_name, file_url); if (useThirdPartyDownload) { handleThirdPartyDownload(file_url, file_name, progressBar, progressPercentText, progressContainer, () => { completedDownloads++; updateTotalProgress(); resolve(); }); } else { handleFetchDownload(file_url, token, signal, fileSizeSpan, progressBar, progressPercentText, speedText, remainingTimeText, progressContainer, file_name, () => { completedDownloads++; updateTotalProgress(); resolve(); }, reject); } }); } function addProgressBarStyles() { if (!document.getElementById('progress-bar-styles')) { let styles = document.createElement('style'); styles.id = 'progress-bar-styles'; styles.textContent = ` .progressBar { background-color: #FF9800; background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent ); background-size: 40px 40px; animation: moveBackground 2s linear infinite; } @keyframes moveBackground { from { background-position: 0 0; } to { background-position: 40px 0; } } .slide-in { animation: slideIn 0.5s ease-out forwards; } .slide-out { animation: slideOut 0.5s ease-in forwards; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } `; document.head.appendChild(styles); } } function bytesToSize(bytes) { const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes === 0) return '0 Byte'; const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i]; } function handleThirdPartyDownload(file_url, file_name, progressBar, progressPercentText, progressContainer, resolve) { const downloadLink = document.createElement('a'); downloadLink.href = file_url; downloadLink.download = file_name; downloadLink.setAttribute('data-downloadurl', `application/octet-stream:${file_name}:${file_url}`); document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); let progress = 0; const interval = setInterval(() => { progress += 10; if (progress <= 100) { progressBar.style.width = `${progress}%`; progressPercentText.innerText = `${progress}%`; } else { clearInterval(interval); progressContainer.classList.add('slide-out'); progressContainer.addEventListener('animationend', () => { progressContainer.remove(); updateIndicator(); updateDownloadsContainerVisibility(); resolve(); }, { once: true }); } }, 200); } function handleFetchDownload(file_url, token, signal, fileSizeSpan, progressBar, progressPercentText, speedText, remainingTimeText, progressContainer, file_name, resolve, reject) { let startTime = Date.now(); let lastUpdateTime = startTime; let lastReceivedBytes = 0; fetch(file_url, { signal, headers: { Authorization: `Bearer ${token}` } }) .then(response => { const contentLength = response.headers.get('Content-Length'); if (contentLength) { const fileSize = bytesToSize(contentLength); fileSizeSpan.innerText = `文件大小: ${fileSize}`; } else { fileSizeSpan.innerText = `无法获取文件大小`; updateIndicator(); updateDownloadsContainerVisibility(); } const reader = response.body.getReader(); let receivedBytes = 0; let chunks = []; function processResult(result) { if (result.done) { const blob = new Blob(chunks, { type: 'application/octet-stream' }); const downloadUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = downloadUrl; a.download = file_name; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(downloadUrl); progressContainer.classList.add('slide-out'); progressContainer.addEventListener('animationend', () => { progressContainer.remove(); updateIndicator(); updateDownloadsContainerVisibility(); resolve(); }, { once: true }); return; } chunks.push(result.value); receivedBytes += result.value.length; // 更新进度条,但不调用resolve let percentComplete = (receivedBytes / contentLength) * 100; progressBar.style.width = `${percentComplete.toFixed(2)}%`; progressPercentText.innerText = `${percentComplete.toFixed(2)}%`; // 更新下载速度和剩余时间 const currentTime = Date.now(); const timeDiff = (currentTime - lastUpdateTime) / 1000; if (timeDiff >= 1) { const bytesPerSecond = (receivedBytes - lastReceivedBytes) / timeDiff; const speed = bytesToSize(bytesPerSecond) + '/s'; speedText.innerText = `速度: ${speed}`; const remainingBytes = contentLength - receivedBytes; const remainingTime = remainingBytes / bytesPerSecond; const remainingTimeFormatted = formatTime(remainingTime); remainingTimeText.innerText = `剩余: ${remainingTimeFormatted}`; lastUpdateTime = currentTime; lastReceivedBytes = receivedBytes; } reader.read().then(processResult); } reader.read().then(processResult); }) .catch(e => { progressContainer.remove(); updateIndicator(); updateDownloadsContainerVisibility(); reject(e); }); } // 格式化时间函数 function formatTime(seconds) { if (seconds === Infinity || isNaN(seconds)) { return '计算中...'; } const hours = Math.floor(seconds / 3600); const minutes = Math.floor((seconds % 3600) / 60); const remainingSeconds = Math.floor(seconds % 60); let timeString = ''; if (hours > 0) { timeString += `${hours}小时 `; } if (minutes > 0 || hours > 0) { timeString += `${minutes}分钟 `; } timeString += `${remainingSeconds}秒`; return timeString.trim(); } window.updateUI = function () { const download_list = document.getElementById("download_list"); const container = createOrUpdateContainer(download_list); // 创建或更新 UI 组件 createLottieAnimation(download_list); createOrUpdateSearchInput(container); createOrUpdateQuickFilterSelect(container); createOrUpdateSortSelect(container); createOrUpdateSelectAllCheckbox(download_list); createOrUpdateBulkDownloadButton(download_list); createOrUpdateTreeViewButton(download_list); } function createLottieAnimation(parent) { if (!document.getElementById("lottie-animation-container")) { const lottieContainer = document.createElement("div"); lottieContainer.id = "lottie-animation-container"; lottieContainer.innerHTML = ` <dotlottie-player src="https://lottie.host/f6cfdc36-5c9a-4dac-bb71-149cdf2e7d92/VRIhn9vXE5.json" background="transparent" speed="1" loop autoplay> </dotlottie-player>`; Object.assign(lottieContainer.style, { position: "absolute", top: "85%", right: "0", transform: "translateY(-50%)", zIndex: "-1", width: "300px", height: "130px", overflow: "hidden" }); const style = document.createElement('style'); style.textContent = ` #lottie-animation-container dotlottie-player { width: 300px !important; height: 300px !important; transform: scaleX(-1) translateY(-25%); } `; document.head.appendChild(style); parent.appendChild(lottieContainer); } } function createOrUpdateContainer(parent) { let container = document.getElementById("searchAndFilterContainer"); if (!container) { container = document.createElement("div"); container.id = "searchAndFilterContainer"; Object.assign(container.style, { position: "relative", display: "flex", flexDirection: "column", marginTop: '30px', marginBottom: '20px', padding: '15px', backgroundColor: 'rgba(255, 249, 230, 0.9)', borderRadius: '10px', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)', border: '2px solid #ffd700', zIndex: '10000' }); // 添加标题 const title = document.createElement("h3"); title.textContent = "资源筛选"; Object.assign(title.style, { margin: '0 0 15px 0', color: '#ffa500', textAlign: 'center', fontWeight: 'bold', zIndex: '2' }); container.appendChild(title); // 创建输入框容器 const inputContainer = document.createElement("div"); Object.assign(inputContainer.style, { display: "flex", justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px', zIndex: '2' }); container.appendChild(inputContainer); // 添加 Lottie 动画 const lottieContainer = document.createElement("div"); Object.assign(lottieContainer.style, { position: 'absolute', top: '5px', left: '10px', width: '40px', height: '40px', zIndex: '1' }); container.appendChild(lottieContainer); const player = document.createElement('dotlottie-player'); player.setAttribute('src', "https://lottie.host/fbd042e1-0e8e-43a9-8a29-3407c692f209/UNft7IfOMP.json"); player.setAttribute('autoplay', ''); player.setAttribute('loop', ''); player.style.width = "100%"; player.style.height = "100%"; lottieContainer.appendChild(player); player.addEventListener('ready', () => { player.play(); }); parent.prepend(container); if (document.readyState === 'complete') { initLottie(); } else { window.addEventListener('load', initLottie); } function initLottie() { document.querySelectorAll('.lottie-animation').forEach(element => { if (element.lottieInstance) { try { element.lottieInstance.play(); } catch (error) { console.warn('播放 Lottie 动画失败:', error); } } else { console.warn('Lottie 实例不存在:', element); } }); } } return container; } function createOrUpdateSearchInput(container) { let searchInput = document.getElementById("searchInput"); if (!searchInput) { searchInput = document.createElement("input"); searchInput.type = "text"; searchInput.placeholder = "搜索文件名/后缀名"; searchInput.id = "searchInput"; searchInput.className = "course-search-input search-input-with-icon"; Object.assign(searchInput.style, { width: '200px', height: '38px', padding: '0 40px 0 15px', flex: '1', marginRight: '10px', border: '2px solid #ffa500', borderRadius: '20px', outline: 'none', color: '#ffa500', fontSize: '14px', fontWeight: 'bold', backgroundColor: '#fff', transition: 'all 0.3s ease', boxShadow: '0 2px 5px rgba(255, 165, 0, 0.2)', }); searchInput.addEventListener("input", () => filterList(searchInput.value)); searchInput.addEventListener("focus", () => { searchInput.style.boxShadow = '0 0 8px rgba(255, 165, 0, 0.5)'; searchInput.style.borderColor = '#ff8c00'; }); searchInput.addEventListener("blur", () => { searchInput.style.boxShadow = '0 2px 5px rgba(255, 165, 0, 0.2)'; searchInput.style.borderColor = '#ffa500'; }); const style = document.createElement('style'); style.textContent = ` .course-search-input::placeholder{ color: #ffa500; } .search-input-with-icon { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23ffa500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>'); background-repeat: no-repeat; background-position: right 15px center; } `; document.head.appendChild(style); container.querySelector("div").appendChild(searchInput); } searchInput.value = window.currentSearchKeyword || ''; } function createOrUpdateQuickFilterSelect(container) { let quickFilterSelect = document.getElementById("quickFilterSelect"); if (!quickFilterSelect) { quickFilterSelect = createCustomSelect("quickFilterSelect", "筛选类别"); quickFilterSelect.addEventListener("change", (e) => filterListByCategory(e.detail)); container.querySelector("div").appendChild(quickFilterSelect); } updateCustomSelectOptions(quickFilterSelect, window.quickFilters); // 保持当前的筛选类别 setCustomSelectValue(quickFilterSelect, window.currentFilterCategory || ''); } function createOrUpdateSortSelect(container) { let sortSelect = document.getElementById("sortSelect"); if (!sortSelect) { sortSelect = createCustomSelect("sortSelect", "排序方式"); sortSelect.addEventListener("change", (e) => sortList(e.detail)); container.querySelector("div").appendChild(sortSelect); } updateCustomSelectOptions(sortSelect, [ { value: '', label: '排序方式' }, { value: 'date_asc', label: '日期升序' }, { value: 'date_desc', label: '日期降序' }, { value: 'xiaoya_order', label: '小雅排序' } ]); } function createCustomSelect(id, placeholder) { const select = document.createElement("div"); select.id = id; select.className = "custom-select"; select.innerHTML = ` <div class="select-selected" data-value="">${placeholder}</div> <div class="select-items select-hide"></div> `; const selected = select.querySelector(".select-selected"); const items = select.querySelector(".select-items"); selected.addEventListener("click", function (e) { e.stopPropagation(); // 阻止事件冒泡 closeAllSelect(this); items.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); items.addEventListener("click", function (e) { e.stopPropagation(); }); document.addEventListener("click", closeAllSelect); return select; } function updateCustomSelectOptions(select, options) { const items = select.querySelector(".select-items"); items.innerHTML = ''; options.forEach(option => { const div = document.createElement("div"); div.textContent = option.label; div.dataset.value = option.value; div.addEventListener("click", function (e) { e.stopPropagation(); const selected = this.parentNode.previousElementSibling; selected.textContent = this.textContent; selected.dataset.value = this.dataset.value; this.parentNode.querySelector(".same-as-selected")?.classList.remove("same-as-selected"); this.classList.add("same-as-selected"); select.dispatchEvent(new CustomEvent('change', { detail: this.dataset.value })); closeAllSelect(); }); items.appendChild(div); }); const rect = items.getBoundingClientRect(); if (rect.bottom > window.innerHeight) { items.style.bottom = '100%'; items.style.top = 'auto'; } else { items.style.top = '100%'; items.style.bottom = 'auto'; } } function setCustomSelectValue(select, value) { const items = select.querySelector(".select-items"); const selected = select.querySelector(".select-selected"); const option = items.querySelector(`[data-value="${value}"]`); if (option) { selected.textContent = option.textContent; selected.dataset.value = value; items.querySelector(".same-as-selected")?.classList.remove("same-as-selected"); option.classList.add("same-as-selected"); } } function closeAllSelect(elmnt) { const items = document.getElementsByClassName("select-items"); const selected = document.getElementsByClassName("select-selected"); for (let i = 0; i < selected.length; i++) { if (elmnt != selected[i]) { selected[i].classList.remove("select-arrow-active"); } } for (let i = 0; i < items.length; i++) { if (elmnt != items[i] && elmnt != selected[i]) { items[i].classList.add("select-hide"); } } } function applyCommonSelectStyle(select) { Object.assign(select.style, { padding: '10px 15px', flex: '1', marginRight: '10px', border: '2px solid #ffa500', borderRadius: '20px', outline: 'none', cursor: 'pointer', color: '#ffa500', fontWeight: 'bold', backgroundColor: '#fff', transition: 'all 0.3s ease', boxShadow: '0 2px 5px rgba(255, 165, 0, 0.2)', appearance: 'none', WebkitAppearance: 'none', MozAppearance: 'none' }); select.style.backgroundImage = 'url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFA500%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E")'; select.style.backgroundRepeat = 'no-repeat'; select.style.backgroundPosition = 'right 15px top 50%'; select.style.backgroundSize = '12px auto'; select.style.paddingRight = '30px'; select.addEventListener("focus", () => { select.style.boxShadow = '0 0 10px rgba(255, 165, 0, 0.5)'; }); select.addEventListener("blur", () => { select.style.boxShadow = '0 2px 5px rgba(255, 165, 0, 0.2)'; }); } function updateSelectOptions(select, options) { select.innerHTML = ''; options.forEach(option => { const opt = document.createElement("option"); opt.value = option.value; opt.text = option.label; opt.style.fontWeight = 'bold'; select.appendChild(opt); }); } function createOrUpdateSelectAllCheckbox(parent) { if (!document.getElementById("selectAllCheckbox")) { const checkboxContainer = document.createElement('div'); Object.assign(checkboxContainer.style, { display: 'flex', position: "relative", alignItems: 'center', padding: '5px 10px', marginBottom: '10px' }); const selectAllCheckbox = document.createElement('input'); selectAllCheckbox.type = 'checkbox'; selectAllCheckbox.className = 'custom-checkbox'; selectAllCheckbox.id = 'selectAllCheckbox'; selectAllCheckbox.style.marginRight = '10px'; const selectAllLabel = document.createElement('label'); selectAllLabel.htmlFor = 'selectAllCheckbox'; selectAllLabel.textContent = '全选'; Object.assign(selectAllLabel.style, { fontWeight: 'bold', color: '#FFA500', userSelect: 'none' }); checkboxContainer.appendChild(selectAllCheckbox); checkboxContainer.appendChild(selectAllLabel); parent.prepend(checkboxContainer); selectAllCheckbox.addEventListener('change', handleSelectAllChange); } } function handleSelectAllChange() { const selectAllCheckbox = document.getElementById("selectAllCheckbox"); const checkboxes = document.querySelectorAll("#download_list input[type='checkbox']:not(#selectAllCheckbox)"); checkboxes.forEach(checkbox => { if (checkbox.getAttribute('data-visible') === 'true') { checkbox.checked = selectAllCheckbox.checked; checkbox.dispatchEvent(new Event('change', { bubbles: true, cancelable: true })); } }); // 更新树状图 syncTreeWithDownloadList(); } // 按钮通用样式 function applyCommonButtonStyle(button, gradientColors) { Object.assign(button.style, { background: `linear-gradient(90deg, ${gradientColors.join(", ")})`, backgroundSize: '200% 100%', animation: 'flowingGradient 3s ease infinite', color: 'white', border: 'none', padding: '12px 24px', borderRadius: '30px', cursor: 'pointer', boxShadow: '0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08)', transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)', position: 'fixed', top: '20px', zIndex: 10000, fontSize: '16px', fontWeight: 'bold', textTransform: 'uppercase', letterSpacing: '1px', outline: 'none', }); button.addEventListener('mouseover', () => { button.style.transform = 'translateY(-2px)'; button.style.boxShadow = '0 7px 14px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.08)'; button.style.filter = 'brightness(110%)'; }); button.addEventListener('mouseout', () => { button.style.transform = 'translateY(0)'; button.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08)'; button.style.filter = 'brightness(100%)'; }); button.addEventListener('mousedown', () => { button.style.transform = 'translateY(1px)'; button.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.08)'; }); button.addEventListener('mouseup', () => { button.style.transform = 'translateY(-2px)'; button.style.boxShadow = '0 7px 14px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.08)'; }); button.addEventListener('focus', () => { button.style.boxShadow = '0 0 0 3px rgba(255,255,255,0.5), 0 4px 6px rgba(0,0,0,0.1)'; }); button.addEventListener('blur', () => { button.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08)'; }); } function createOrUpdateBulkDownloadButton(parent) { if (!document.getElementById("bulkDownloadButton")) { const bulkDownloadButton = document.createElement('button'); const bulkDownloadButtonGradient = ['#ffa500', '#ff8c00', '#ffa500']; bulkDownloadButton.innerHTML = '<span style="font-weight: bold;">批量下载</span>'; bulkDownloadButton.id = "bulkDownloadButton"; bulkDownloadButton.title = '点击下载所选文件'; applyCommonButtonStyle(bulkDownloadButton, bulkDownloadButtonGradient); bulkDownloadButton.style.right = '15px'; bulkDownloadButton.addEventListener('click', handleBulkDownload); parent.appendChild(bulkDownloadButton); } } // 批量下载处理函数 async function handleBulkDownload() { console.log('开始批量下载'); const checkboxes = document.querySelectorAll("#download_list input[type='checkbox']:checked"); if (checkboxes.length === 0) { showNotification('还啥都没选呢（；´д｀）ゞ', 'warning'); console.log('没有选择任何文件，批量下载已取消'); return; } const downloadQueue = Array.from(checkboxes) .filter(checkbox => checkbox.checked && checkbox.getAttribute('data-visible') === 'true') .map(checkbox => { const container = checkbox.closest('div'); const link = container.querySelector('a.download-link'); return { quoteId: link.getAttribute('data-quote-id'), name: link.getAttribute('data-origin-name') }; }); if (totalDownloads === 0) { totalDownloads = downloadQueue.length; completedDownloads = 0; } else { totalDownloads += downloadQueue.length; } console.log(`队列中的文件数: ${downloadQueue.length}`); if (downloadQueue.length > 10) { showNotification( `已选择 ${downloadQueue.length} 个文件，下载可能造成网络或性能瓶颈。确认继续？`, 'confirm', async () => { processDownloadQueue(downloadQueue); }, () => { showNotification('批量下载已取消', 'info'); console.log('用户取消了批量下载'); totalDownloads = 0; completedDownloads = 0; } ); } else { processDownloadQueue(downloadQueue); } } async function processDownloadQueue(downloadQueue) { const useThirdPartyDownload = localStorage.getItem('useThirdPartyDownload') === 'true'; for (let file of downloadQueue) { try { console.log(`准备下载: ${file.name}`); const fileUrl = await window.getDownloadUrl(file.quoteId); courseDownload(fileUrl, file.name).then(() => { console.log(`完成下载: ${file.name}`); }).catch(error => { console.error(`下载失败: ${file.name}`, error); }); if (useThirdPartyDownload) { await new Promise(resolve => setTimeout(resolve, 500)); } } catch (error) { console.error(`处理文件失败: ${file.name}`, error); } } } async function startBulkDownload(downloadQueue) { const useThirdPartyDownload = localStorage.getItem('useThirdPartyDownload') === 'true'; totalDownloads = downloadQueue.length; completedDownloads = 0; for (let file of downloadQueue) { try { console.log(`正在处理文件: ${file.name}`); const fileUrl = await window.getDownloadUrl(file.quoteId); await courseDownload(fileUrl, file.name); console.log(`成功下载: ${file.name}`); if (useThirdPartyDownload) { await new Promise(resolve => setTimeout(resolve, 1000)); } } catch (error) { console.error(`下载 ${file.name} 时发生错误:`, error); } } console.log('批量下载任务全部完成'); } function sortList(order) { const downloadList = document.getElementById("download_list"); const items = Array.from(downloadList.querySelectorAll(".file-item")); // 创建文件夹排序位置映射 const folderSortMap = {}; const pathStructureMap = {}; if (course_resources) { course_resources.forEach(resource => { folderSortMap[resource.id] = resource.sort_position || 0; if (resource.path) { const pathParts = resource.path.split('/'); let currentPath = ''; pathParts.forEach((part, index) => { const thisPath = currentPath ? `${currentPath}/${part}` : part; currentPath = thisPath; if (!pathStructureMap[part]) { pathStructureMap[part] = { depth: index, sort_position: resource.sort_position || 0, parent_id: index > 0 ? pathParts[index - 1] : null }; } }); } }); } items.sort((a, b) => { const aLink = a.querySelector('a'); const bLink = b.querySelector('a'); const aParentId = aLink.getAttribute('data-parent-id'); const bParentId = bLink.getAttribute('data-parent-id'); const aPath = aLink.getAttribute('data-path'); const bPath = bLink.getAttribute('data-path'); const aPathParts = aPath ? aPath.split('/') : []; const bPathParts = bPath ? bPath.split('/') : []; if (order === 'xiaoya_order') { const minLength = Math.min(aPathParts.length, bPathParts.length); for (let i = 0; i < minLength; i++) { const aId = aPathParts[i]; const bId = bPathParts[i]; if (aId !== bId) { const aSortPosition = folderSortMap[aId] || 0; const bSortPosition = folderSortMap[bId] || 0; return aSortPosition - bSortPosition; } } if (aPathParts.length !== bPathParts.length) { return aPathParts.length - bPathParts.length; } const aFolderPosition = folderSortMap[aParentId] || Infinity; const bFolderPosition = folderSortMap[bParentId] || Infinity; if (aFolderPosition !== bFolderPosition) { return aFolderPosition - bFolderPosition; } const aId = aLink.getAttribute('data-resource-id'); const bId = bLink.getAttribute('data-resource-id'); return aId.localeCompare(bId); } else { const aDate = new Date(aLink.getAttribute('data-created-at')); const bDate = new Date(bLink.getAttribute('data-created-at')); if (order === 'date_asc') { return aDate - bDate; } else if (order === 'date_desc') { return bDate - aDate; } } }); items.forEach(item => downloadList.appendChild(item)); // 重新应用筛选条件 applyFilters(); } window.toggleListVisibility = function () { var download_list = document.getElementById("download_list"); if (download_list.style.transform === 'scaleY(0)' || download_list.style.transform === '') { download_list.style.transform = "scaleY(1)"; download_list.style.opacity = "1"; download_list.style.overflowY = "auto"; } else { download_list.style.transform = "scaleY(0)"; download_list.style.opacity = "0"; } } function filterList(keyword) { window.currentSearchKeyword = keyword.toLowerCase(); const searchInput = document.getElementById("searchInput"); if (searchInput) { searchInput.value = keyword; } applyFilters(); } function filterListByCategory(categoryValue) { window.currentFilterCategory = categoryValue; applyFilters(); } function applyFilters() { var searchKeyword = window.currentSearchKeyword; var filterCategory = window.currentFilterCategory; var extensions = filterCategory ? filterCategory.split(',').map(ext => ext.trim()) : []; var containers = document.querySelectorAll("#download_list .file-item"); containers.forEach(function (container) { var file = container.querySelector("a"); var checkbox = container.querySelector("input[type='checkbox']"); var fileName = file.getAttribute('data-origin-name').toLowerCase(); var fileExtension = fileName.slice(((fileName.lastIndexOf(".") - 1) >>> 0) + 2); var isSearchMatch = searchKeyword === '' || fileName.includes(searchKeyword); var isFilterMatch = filterCategory === "" || extensions.includes(fileExtension); var isVisible = isSearchMatch && isFilterMatch; container.style.display = isVisible ? "flex" : "none"; checkbox.setAttribute('data-visible', isVisible.toString()); }); const selectAllCheckbox = document.getElementById('selectAllCheckbox'); if (selectAllCheckbox) { const visibleCheckboxes = Array.from(document.querySelectorAll("#download_list .file-item input[type='checkbox'][data-visible='true']")); const allVisibleChecked = visibleCheckboxes.every(checkbox => checkbox.checked); selectAllCheckbox.checked = visibleCheckboxes.length > 0 && allVisibleChecked; } var visibleItems = document.querySelectorAll("#download_list .file-item[style*='display: flex']"); // 获取下载列表容器 var download_list = document.getElementById("download_list"); var noResultsMessage = download_list.querySelector('p'); if (visibleItems.length === 0) { if (!noResultsMessage) { noResultsMessage = document.createElement('p'); noResultsMessage.style.color = '#FFA500'; noResultsMessage.style.textAlign = 'center'; noResultsMessage.style.fontWeight = 'bold'; noResultsMessage.innerHTML = '<span style="font-size: 1.2em;"><span style="color: red;">没有</span></span>课件( ´･･)ﾉ(._.`)'; download_list.appendChild(noResultsMessage); } } else { if (noResultsMessage) { download_list.removeChild(noResultsMessage); } } } // 配置对象 const TREE_VIEW_CONFIG = { buttonId: 'treeViewButton', containerId: 'treeContainer', contentId: 'treeContent', loadingId: 'loadingAnimation', buttonGradient: ['#27B4DB', '#2DC3FF', '#03A9F4'], buttonText: '课程结构', containerStyles: { width: '80%', minHeight: '600px', maxWidth: '600px', maxHeight: '80vh', backgroundColor: '#fefefe', padding: '20px', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', zIndex: 10000 } }; // 主函数 function createOrUpdateTreeViewButton(parent) { let treeViewButton = document.getElementById(TREE_VIEW_CONFIG.buttonId); let treeContainer = document.getElementById(TREE_VIEW_CONFIG.containerId); if (!treeViewButton) { treeViewButton = createTreeViewButton(); treeViewButton.title = '点击构建树状图'; parent.appendChild(treeViewButton); } if (!treeContainer) { treeContainer = createTreeContainer(); document.body.appendChild(treeContainer); makeDraggable(treeContainer); } treeContainer.innerHTML = ''; const dragHandle = createDragHandle(); treeContainer.appendChild(dragHandle); const closeButton = createCloseButton(treeContainer); dragHandle.appendChild(closeButton); const searchContainer = createSearchContainer(); treeContainer.appendChild(searchContainer); const clearSearchButton = searchContainer.querySelector('#treeClearSearchButton'); if (clearSearchButton) { clearSearchButton.addEventListener('click', clearTreeSearch); } const contentWrapper = document.createElement('div'); contentWrapper.id = 'treeContentWrapper'; contentWrapper.style.cssText = ` max-height: calc(80vh - 100px); overflow-y: auto; padding: 20px; `; treeContainer.appendChild(contentWrapper); const bulkDownloadButton = document.createElement('button'); bulkDownloadButton.id = 'treeBulkDownloadButton'; bulkDownloadButton.title = '点击下载所选文件'; bulkDownloadButton.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1="12" y1="15" x2="12" y2="3"></line> </svg> <span style="margin-left: 8px;">下载</span> `; bulkDownloadButton.style.cssText = ` position: fixed; bottom: 30px; right: 30px; padding: 12px 24px; border: none; border-radius: 50px; z-index: 9999; background-color: #4CAF50; color: white; cursor: pointer; font-family: 'Arial', sans-serif; font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; `; bulkDownloadButton.addEventListener('mouseover', function () { this.style.backgroundColor = '#45a049'; this.style.boxShadow = '0 6px 8px rgba(0, 0, 0, 0.15)'; this.style.transform = 'translateY(-2px)'; }); bulkDownloadButton.addEventListener('mouseout', function () { this.style.backgroundColor = '#4CAF50'; this.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)'; this.style.transform = 'translateY(0)'; }); bulkDownloadButton.addEventListener('click', handleBulkDownload); contentWrapper.appendChild(bulkDownloadButton); const loadingAnimation = createLoadingAnimation(); const treeContent = createTreeContent(); contentWrapper.appendChild(loadingAnimation); contentWrapper.appendChild(treeContent); const searchInput = searchContainer.querySelector('#treeSearchInput'); const searchButton = searchContainer.querySelector('#treeSearchButton'); const prevButton = searchContainer.querySelector('#treePrevButton'); const nextButton = searchContainer.querySelector('#treeNextButton'); let currentMatchIndex = -1; let matches = []; let highlightTimeout; if (searchInput && searchButton && prevButton && nextButton) { searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { performTreeSearch(); } }); searchButton.addEventListener('click', performTreeSearch); prevButton.addEventListener('click', () => navigateMatches(-1)); nextButton.addEventListener('click', () => navigateMatches(1)); } function performTreeSearch() { if (!searchInput) return; const searchTerm = searchInput.value.toLowerCase().trim(); if (searchTerm === '') { clearTreeSearch(); return; } forcedExpandedItems.clear(); const treeItems = treeContainer.querySelectorAll('.item-content'); matches = []; removeAllHighlights(); treeItems.forEach(item => { let textContent, span; const folderSpan = item.querySelector('.folder'); if (folderSpan) { textContent = folderSpan.textContent.trim(); span = folderSpan; } else { textContent = item.textContent.trim(); span = item.querySelector('span:not(.folder-toggle):not(.folder):not(.file-extension)'); } if (textContent && textContent.toLowerCase().includes(searchTerm)) { matches.push(span); const parentElements = getParentElements(item.closest('li')); parentElements.forEach(el => forcedExpandedItems.add(el)); expandParentFolders(item.closest('li')); } }); currentMatchIndex = matches.length > 0 ? 0 : -1; updateNavigationButtons(); updateSearchInfo(); if (matches.length > 0) { highlightCurrentMatch(); scrollToMatch(currentMatchIndex); } } function getParentElements(element) { const parents = []; let current = element; while (current && current !== treeContainer) { if (current.tagName === 'LI') { parents.push(current); } current = current.parentElement; } return parents; } function navigateMatches(direction) { if (matches.length === 0) return; currentMatchIndex += direction; if (currentMatchIndex < 0) currentMatchIndex = matches.length - 1; if (currentMatchIndex >= matches.length) currentMatchIndex = 0; updateNavigationButtons(); updateSearchInfo(); highlightCurrentMatch(); scrollToMatch(currentMatchIndex); } function updateSearchInfo() { const searchInfo = document.getElementById('treeSearchInfo'); if (searchInfo) { if (matches.length > 0) { searchInfo.textContent = `${currentMatchIndex + 1} / ${matches.length}`; } else { searchInfo.textContent = '无匹配结果'; } } } function highlightCurrentMatch() { removeAllHighlights(); if (currentMatchIndex >= 0 && currentMatchIndex < matches.length) { const currentMatch = matches[currentMatchIndex]; const fragment = document.createDocumentFragment(); while (currentMatch.firstChild) { fragment.appendChild(currentMatch.firstChild); } fragment.childNodes.forEach(node => { if (node.nodeType === Node.TEXT_NODE) { const highlightSpan = document.createElement('span'); highlightSpan.className = 'highlight'; highlightSpan.textContent = node.textContent; node.parentNode.replaceChild(highlightSpan, node); } }); currentMatch.appendChild(fragment); scrollToMatch(currentMatchIndex); clearTimeout(highlightTimeout); highlightTimeout = setTimeout(() => { removeAllHighlights(); }, 2000); } } function removeAllHighlights() { treeContainer.querySelectorAll('.highlight').forEach(el => { const parent = el.parentNode; while (el.firstChild) { parent.insertBefore(el.firstChild, el); } parent.removeChild(el); }); } function scrollToMatch(index) { if (index >= 0 && index < matches.length) { const contentWrapper = document.getElementById('treeContentWrapper'); const matchElement = matches[index]; const wrapperRect = contentWrapper.getBoundingClientRect(); const matchRect = matchElement.getBoundingClientRect(); contentWrapper.scrollTop += matchRect.top - wrapperRect.top - wrapperRect.height / 2 + matchRect.height / 2; matchElement.scrollIntoView({ block: "nearest", inline: "nearest" }); } } function clearTreeSearch() { const searchInput = document.getElementById('treeSearchInput'); const searchInfo = document.getElementById('treeSearchInfo'); if (searchInput) { searchInput.value = ''; } if (searchInfo) { searchInfo.textContent = ''; } forcedExpandedItems.clear(); removeAllHighlights(); matches = []; currentMatchIndex = -1; updateNavigationButtons(); const allFolders = treeContainer.querySelectorAll('.folder-toggle.open'); allFolders.forEach(toggle => { const li = toggle.closest('li'); const ul = li.querySelector('ul'); if (ul) { toggle.classList.remove('open'); ul.classList.remove('expanded'); ul.classList.add('collapsed'); ul.style.height = ul.scrollHeight + 'px'; ul.style.display = 'block'; ul.offsetHeight; ul.style.height = '0px'; ul.addEventListener('transitionend', function handler() { if (ul.classList.contains('collapsed')) { ul.style.display = 'none'; } ul.removeEventListener('transitionend', handler); }, { once: true }); } }); } function updateNavigationButtons() { prevButton.disabled = matches.length === 0; nextButton.disabled = matches.length === 0; } function expandParentFolders(element) { let current = element; while (current !== treeContainer) { if (current.tagName === 'LI') { const folderToggle = current.querySelector('.folder-toggle'); const ul = current.querySelector('ul'); if (folderToggle && ul) { folderToggle.classList.add('open'); ul.classList.remove('collapsed'); ul.classList.add('expanded'); ul.style.display = 'block'; ul.style.height = 'auto'; } } current = current.parentElement; } } setupTreeViewButtonEvents(treeViewButton, treeContainer, treeContent, loadingAnimation); setupTreeCheckboxEvents(treeContainer); addTreeViewStyles(); setInitialFoldState(treeContainer); } function setInitialFoldState(container) { const rootUl = container.querySelector('ul'); if (rootUl) { const subFolders = rootUl.querySelectorAll('li > ul'); subFolders.forEach(ul => { if (!ul.classList.contains('collapsed')) { ul.classList.add('collapsed'); ul.style.display = 'none'; const toggle = ul.parentElement.querySelector('.folder-toggle'); if (toggle) { toggle.classList.remove('open'); } } }); } } // 创建树状图按钮 function createTreeViewButton() { const button = document.createElement('button'); button.id = TREE_VIEW_CONFIG.buttonId; button.innerHTML = `<span style="font-weight: bold;">${TREE_VIEW_CONFIG.buttonText}</span>`; applyCommonButtonStyle(button, TREE_VIEW_CONFIG.buttonGradient); button.style.right = '150px'; return button; } function createDragHandle() { const dragHandle = document.createElement('div'); dragHandle.className = 'drag-handle'; dragHandle.innerHTML = ` <span>课程结构</span> <span class="drag-icon">&#x2630;</span> <span class="drag-hint">拖动区域</span> `; dragHandle.style.position = 'sticky'; dragHandle.style.top = '0'; dragHandle.style.zIndex = '1'; return dragHandle; } function createSearchContainer() { const searchContainer = document.createElement('div'); searchContainer.className = 'search-container'; searchContainer.innerHTML = ` <input type="text" id="treeSearchInput" placeholder="搜索..." style="font-weight: bold;" /> <button id="treeSearchButton" class="search-button" title="搜索"> <svg class="search-icon" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> </svg> </button> <button id="treeClearSearchButton" class="search-button" title="清除搜索并全部收起"> <svg class="search-icon" viewBox="0 0 24 24"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> </svg> </button> <button id="treePrevButton" class="search-button" title="上一个" disabled> <svg class="search-icon" viewBox="0 0 24 24"> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/> </svg> </button> <button id="treeNextButton" class="search-button" title="下一个" disabled> <svg class="search-icon" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> </button> <span id="treeSearchInfo" class="search-info"></span> `; return searchContainer; } // 创建树状图容器 function createTreeContainer() { const container = document.createElement('div'); container.id = TREE_VIEW_CONFIG.containerId; Object.assign(container.style, TREE_VIEW_CONFIG.containerStyles, { display: 'none', position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%) scale(1)', overflowY: 'hidden', transition: 'opacity 0.3s ease-out, transform 0.3s ease-out' }); container.close = function () { this.style.opacity = '0'; this.style.transform = 'translate(-50%, -50%) scale(0.95)'; this.addEventListener('transitionend', function closeHandler() { this.style.display = 'none'; this.removeEventListener('transitionend', closeHandler); disableControls(false); // 在关闭容器时启用控件 }, { once: true }); }; return container; } // 创建树状图内容区 function createTreeContent() { const content = document.createElement('div'); content.id = TREE_VIEW_CONFIG.contentId; content.innerHTML = ` <div style=" display: flex; justify-content: center; align-items: center; height: 600px; width: 100%; "> <div style="text-align: center; padding: 20px;"> <div style="font-size: 48px; margin-bottom: 20px;">🌱</div> <h3 style="margin-bottom: 15px;"> <span style=" background: linear-gradient(90deg, #1e90ff, #00bfff, #87cefa); background-size: 200% 100%; animation: flowingGradient 5s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; font-size: 24px; ">课程结构已改变</span> </h3> <p style=" font-size: 14px; font-weight: bold; color: #4682b4; max-width: 300px; margin: 0 auto; line-height: 1.6; "> 请重新构建树状图(ˉ﹃ˉ) </p> </div> </div> `; return content; } // 创建加载动画 function createLoadingAnimation() { const loading = document.createElement('div'); loading.id = TREE_VIEW_CONFIG.loadingId; loading.style.cssText = ` display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); z-index: 10001; `; const container = document.createElement('div'); container.style.cssText = ` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; `; loading.appendChild(container); const loader = document.createElement('div'); loader.className = 'loader'; container.appendChild(loader); const style = document.createElement('style'); style.textContent = ` .loader { font-weight: bold; font-size: 30px; display: inline-grid; color: #3498db; } .loader:before, .loader:after { content: "正在构建……"; grid-area: 1/1; line-height: 1em; -webkit-mask: linear-gradient(90deg, #000 50%, #0000 0) 0 50%/2ch 100%; -webkit-mask-position: calc(var(--s,0)*1ch) 50%; animation: l30 2s infinite; } .loader:after { --s:-1; } @keyframes l30 { 33% {transform: translateY(calc(var(--s,1)*50%));-webkit-mask-position:calc(var(--s,0)*1ch) 50%} 66% {transform: translateY(calc(var(--s,1)*50%));-webkit-mask-position:calc(var(--s,0)*1ch + 1ch) 50%} 100% {transform: translateY(calc(var(--s,1)*0%)); -webkit-mask-position:calc(var(--s,0)*1ch + 1ch) 50%} } `; document.head.appendChild(style); return loading; } // 创建关闭按钮 function createCloseButton(treeContainer) { const closeButton = document.createElement('span'); closeButton.textContent = '×'; closeButton.style.cssText = ` color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; margin-top: -10px; margin-right: -10px; padding: 5px; z-index: 10001; `; closeButton.addEventListener('click', (e) => { e.stopPropagation(); treeContainer.close(); // 使用容器的 close 方法 }); return closeButton; } // 设置树状图按钮事件 function setupTreeViewButtonEvents(button, container, content, loading) { button.onclick = () => { if (course_resources) { if (container.style.display === 'none') { // 打开树状图 container.style.display = 'block'; container.style.opacity = '0'; container.style.transform = 'translate(-50%, -50%) scale(0.95)'; loading.style.display = 'block'; content.innerHTML = ''; // 清除搜索输入和结果 const searchInput = container.querySelector('#treeSearchInput'); const searchInfo = container.querySelector('#treeSearchInfo'); if (searchInput) searchInput.value = ''; if (searchInfo) searchInfo.textContent = ''; // 禁用导航按钮 const prevButton = document.querySelector('#treePrevButton'); const nextButton = document.querySelector('#treeNextButton'); if (prevButton) prevButton.disabled = true; if (nextButton) nextButton.disabled = true; // 禁用搜索框、筛选框和排序框 disableControls(true); requestAnimationFrame(() => { container.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out'; container.style.opacity = '1'; container.style.transform = 'translate(-50%, -50%) scale(1)'; }); // 全部收起按钮的事件监听 const collapseAllButton = container.querySelector('#treeCollapseAllButton'); if (collapseAllButton) { collapseAllButton.addEventListener('click', () => { const allOpenFolders = container.querySelectorAll('.folder-toggle.open'); allOpenFolders.forEach(toggle => { const li = toggle.closest('li'); const ul = li.querySelector('ul'); if (ul) { toggle.classList.remove('open'); ul.classList.remove('expanded'); ul.classList.add('collapsed'); ul.style.height = ul.scrollHeight + 'px'; ul.offsetHeight; // 触发重排 ul.style.height = '0px'; ul.addEventListener('transitionend', function handler() { if (ul.classList.contains('collapsed')) { ul.style.display = 'none'; } ul.removeEventListener('transitionend', handler); }, { once: true }); } }); }); } const itemCount = countTreeItems(course_resources); const animationDuration = Math.min(Math.max(itemCount * 10, 500), 3000); setTimeout(() => { // 重新生成树状图内容 content.innerHTML = createTreeHTML(course_resources); addFolderToggle(content); syncTreeWithDownloadList(); setInitialFoldState(container); addPreviewButtonListeners(); loading.style.display = 'none'; content.style.opacity = '0'; requestAnimationFrame(() => { content.style.transition = 'opacity 0.3s ease-out'; content.style.opacity = '1'; }); // 启用搜索功能 const searchInput = container.querySelector('#treeSearchInput'); const searchButton = container.querySelector('#treeSearchButton'); if (searchInput && searchButton) { searchInput.disabled = false; searchButton.disabled = false; } }, animationDuration); } else { // 关闭树状图 container.close(); } } else { showNotification('课程资源尚未加载，请稍后再试。', 'warning'); } }; } // 递归计算树状图中的项目数量 function countTreeItems(resources) { if (!resources) return 0; if (Array.isArray(resources)) { let count = 0; for (const resource of resources) { count++; // 计算当前项 if (resource.children) { count += countTreeItems(resource.children); } } return count; } else if (typeof resources === 'object') { let count = 1; // 计算当前对象 for (const key in resources) { if (resources.hasOwnProperty(key) && typeof resources[key] === 'object') { count += countTreeItems(resources[key]); } } return count; } else { return 1; } } function disableControls(disable) { const container = document.getElementById('searchAndFilterContainer'); const searchInput = document.getElementById('searchInput'); const quickFilterSelect = document.getElementById('quickFilterSelect'); const sortSelect = document.getElementById('sortSelect'); if (container) { container.className = disable ? 'disabled' : ''; } if (searchInput) { searchInput.disabled = disable; searchInput.style.color = disable ? '#888' : '#ffa500'; } if (quickFilterSelect) quickFilterSelect.disabled = disable; if (sortSelect) sortSelect.disabled = disable; } // 设置树状图复选框事件 function setupTreeCheckboxEvents(container) { container.addEventListener('change', e => { if (e.target.classList.contains('tree-checkbox')) { handleTreeCheckboxChange(e.target); } }); } function handleTreeCheckboxChange(checkbox) { // 使用 requestAnimationFrame 来批量更新 UI requestAnimationFrame(() => { batchUpdate(checkbox); updateSelectAllCheckbox(); syncTreeWithDownloadList(); }); } function addPreviewButtonListeners() { const treePreviewButtons = document.querySelectorAll('#treeContainer .preview-button'); treePreviewButtons.forEach(button => { button.addEventListener('click', (e) => { e.stopPropagation(); const resourceId = button.getAttribute('data-resource-id'); const correspondingPreviewLink = document.querySelector(`#download_list .preview-link[data-resource-id="${resourceId}"]`); if (correspondingPreviewLink) { correspondingPreviewLink.click(); } else { console.error('找不到对应的预览链接'); showNotification('预览链接不存在，请刷新页面后重试。', 'error'); } }); }); } // 创建树状图 HTML function createTreeHTML() { let tree = {}; let folderNames = {}; let resourceSortMap = {}; course_resources.forEach(resource => { resourceSortMap[resource.id] = resource.sort_position || 0; if (resource.type === 1) { // 文件夹类型 folderNames[resource.id] = { name: resource.name, sort_position: resource.sort_position || 0 }; } }); document.querySelectorAll("#download_list .file-item").forEach(fileItem => { let fileInfo = fileItem.querySelector('a'); let checkbox = fileItem.querySelector('input[type="checkbox"]'); let resourceId = fileInfo.getAttribute('data-resource-id'); let resource = { id: resourceId, parent_id: fileInfo.getAttribute('data-parent-id'), name: fileInfo.getAttribute('data-origin-name'), path: fileInfo.getAttribute('data-path'), checkbox: checkbox, sort_position: resourceSortMap[resourceId] || 0 }; let pathIds = resource.path.split('/'); let current = tree; let currentPath = []; pathIds.forEach((id, index) => { // 获取文件夹名称和排序位置 let folderInfo = folderNames[id] || { name: (index === pathIds.length - 1 ? resource.name : id), sort_position: resourceSortMap[id] || 0 }; let name = folderInfo.name; currentPath.push(id); if (!current[name]) { current[name] = { children: {}, resources: [], sort_position: folderInfo.sort_position, id: id, name: name, isFolder: index < pathIds.length - 1, path: currentPath.join('/') }; } if (index === pathIds.length - 1) { current[name].resources.push(resource); current[name].id = resource.id; current[name].name = resource.name; current[name].sort_position = resource.sort_position; } current = current[name].children; }); }); return buildTreeHTML(tree); } // 递归构建树状图 HTML function buildTreeHTML(node, parentPath = '', level = 0) { let html = '<ul' + (level > 0 ? ' class="collapsed"' : '') + '>'; let folderEntries = []; let fileEntries = []; for (let key in node) { let item = node[key]; if (item.isFolder) { folderEntries.push({ key, item }); } else { fileEntries.push({ key, item }); } } // 文件夹按sort_position排序 folderEntries.sort((a, b) => { return (a.item.sort_position || 0) - (b.item.sort_position || 0); }); // 构建文件夹 HTML for (let { item } of folderEntries) { let currentPath = item.path; let folderContent = buildTreeHTML(item.children, currentPath, level + 1); html += ` <li> <div class="item-content"> <div class="item-content-left"> <input type="checkbox" class="tree-checkbox folder-checkbox" data-path="${currentPath}"> <span class="folder-toggle"></span> <span class="folder">${item.name}</span> </div> </div> ${folderContent} </li> `; } fileEntries.sort((a, b) => { return (a.item.sort_position || 0) - (b.item.sort_position || 0); }); for (let { item } of fileEntries) { for (let resource of item.resources) { let isChecked = resource.checkbox.checked ? 'checked' : ''; let fileIcon = getFileIcon(resource.name); html += ` <li> <div class="item-content"> <div class="item-content-left"> <input type="checkbox" class="tree-checkbox" data-path="${resource.path}" ${isChecked}> <span>${fileIcon} ${resource.name}</span> </div> <button class="preview-button" data-resource-id="${resource.id}" title="预览"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> </button> </div> </li> `; } } html += '</ul>'; return html; } // 批量更新复选框状态 function batchUpdate(checkbox) { const isChecked = checkbox.checked; const listItem = checkbox.closest('li'); const childCheckboxes = listItem.querySelectorAll('input.tree-checkbox'); const path = checkbox.getAttribute('data-path'); // 批量更新子复选框 childCheckboxes.forEach(child => { child.checked = isChecked; }); // 批量更新文件列表复选框 const fileListCheckboxes = document.querySelectorAll(`#download_list .file-item a[data-path^="${path}"]`); fileListCheckboxes.forEach(fileInfo => { const fileCheckbox = fileInfo.parentElement.querySelector('input[type="checkbox"]'); if (fileCheckbox.checked !== isChecked) { fileCheckbox.checked = isChecked; } }); // 更新父级复选框 updateParentCheckboxes(checkbox); } // 获取文件图标 function getFileIcon(filename) { let extension = filename.split('.').pop().toLowerCase(); let icon = '📄'; let colorClass = ''; let matched = false; for (let filter of window.quickFilters) { if (filter.value.includes(extension)) { switch (filter.label) { case "文档": icon = '📄'; colorClass = 'ext-other'; if (extension === 'ppt' || extension === 'pptx') { colorClass = 'ext-ppt'; } else if (extension === 'doc' || extension === 'docx') { colorClass = 'ext-doc'; } else if (extension === 'xls' || extension === 'xlsx') { colorClass = 'ext-xls'; } else if (extension === 'txt') { colorClass = 'ext-txt'; } else if (extension === 'pdf') { colorClass = 'ext-pdf'; } break; case "图片": icon = '🖼️'; colorClass = 'ext-img'; break; case "音频": icon = '🎵'; colorClass = 'ext-mp3'; break; case "压缩包": icon = '📦'; colorClass = 'ext-zip'; break; } matched = true; break; } } if (!matched) { colorClass = 'ext-other'; } return `${icon} <span class="file-extension ${colorClass}">${extension}</span>`; } // 添加树状图样式 function addTreeViewStyles() { const style = document.createElement('style'); style.textContent = ` #${TREE_VIEW_CONFIG.containerId} { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; background-color: white; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.15); display: flex; flex-direction: column; max-height: 80vh; } .drag-handle { flex-shrink: 0; z-index: 2; background-color: #e6f7ff; border-bottom: 1px solid #b3e0ff; padding: 10px 15px; cursor: move; user-select: none; display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: #0066cc; border-top-left-radius: 10px; border-top-right-radius: 10px; } #treeContainer > div:not(.drag-handle) { flex-grow: 1; overflow-y: auto; } .drag-icon { font-size: 20px; color: #0066cc; } .drag-hint { font-size: 12px; color: #666; margin-right: 10px; } .drag-handle:hover { background-color: #cce5ff; } .drag-handle:active { background-color: #b3d9ff; } #treeContainer { color: #333; background-color: #f0f8ff; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(135, 206, 235, 0.2); transition: all 0.3s ease; } #treeContentWrapper { flex-grow: 1; overflow-y: auto; } #treeContainer:hover { box-shadow: 0 15px 40px rgba(135, 206, 235, 0.3); } #treeContainer ul { overflow: hidden; list-style-type: none; padding-left: 25px; position: relative; transition: height 0.3s ease-out; } #treeContainer ul.collapsed { display: none; } #treeContainer li { margin: 20px 0; position: relative; } .tree-container li > ul { display: none; height: 0; overflow: hidden; transition: height 0.3s ease-out; } .tree-container li > ul.expanded { display: block; height: auto; } .tree-container li:hover > ul { display: block; } .tree-container li:hover > ul.collapsed { height: 0; } #treeContainer li::before { content: ""; position: absolute; top: -10px; left: -20px; border-left: 2px solid rgba(135, 206, 235, 0.5); border-bottom: 2px solid rgba(135, 206, 235, 0.5); width: 20px; height: 25px; border-bottom-left-radius: 8px; } #treeContainer .item-content { display: flex; align-items: center; padding: 12px 18px; border-radius: 40px; transition: all 0.3s ease; background-color: #fff; box-shadow: 0 4px 10px rgba(135, 206, 235, 0.1); justify-content: space-between; } #treeContainer .item-content > div:first-child { display: flex; align-items: center; flex-grow: 1; } #treeContainer .item-content:has(> .folder-toggle) { cursor: pointer; } #treeContainer .item-content span:not(.folder-toggle):not(.folder):not(.file-extension) { color: #555; font-size: 14px; font-weight: bold; max-width: 80%; } #treeContainer .item-content:hover { background-color: #e6f7ff; transform: translateX(5px); transition: all 0.1s ease-out; } #treeContainer .folder { cursor: pointer; font-weight: 600; margin-left: 10px; color: #1e90ff; } #treeContainer .folder-toggle { cursor: pointer; display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; background-color: #87CEEB; border-radius: 50%; margin-right: 12px; transition: transform 0.1s ease-out; box-shadow: 0 4px 10px rgba(135, 206, 235, 0.2); position: relative; } #treeContainer .folder-toggle::after { content: '▶'; color: #fff; font-size: 14px; transition: all 0.3s ease; } #treeContainer .folder-toggle:hover { background-color: #1e90ff; transform: rotate(15deg) scale(1.1); } #treeContainer .folder-toggle.open { transform: rotate(90deg); background-color: #1e90ff; } #treeContainer .tree-checkbox { margin-right: 12px; appearance: none; -webkit-appearance: none; display: flex; justify-content: center; align-items: center; width: 22px; height: 22px; border: 2px solid #87CEEB; border-radius: 5px; outline: none; transition: all 0.3s ease; position: relative; cursor: pointer; } #treeContainer .tree-checkbox:checked { background-color: #1e90ff; border-color: #1e90ff; } #treeContainer .tree-checkbox:checked::after { content: '✓'; color: white; font-size: 16px; font-weight: bold; } #treeContainer .tree-checkbox:indeterminate { background-color: #87CEEB; } #treeContainer .tree-checkbox:indeterminate::after { content: '-'; color: white; font-size: 20px; font-weight: bold; } @keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(135, 206, 235, 0.3); } 100% { box-shadow: 0 0 0 20px rgba(135, 206, 235, 0); } } #treeContainer .item-content:active { animation: ripple 0.6s linear; } @keyframes expand { from { height: 0; opacity: 0; transform: translateY(-50px); } to { height: auto; opacity: 1; transform: translateY(0); } } @keyframes collapse { from { height: auto; opacity: 1; transform: translateY(0); } to { height: 0; opacity: 0; transform: translateY(-50px); } } #treeContainer .expanded { animation: expand 0.3s ease-out forwards; } #treeContainer .collapsed { animation: collapse 0.4s ease-out forwards; } #treeContainer .folder::before { content: '📁'; margin-right: 8px; font-size: 18px; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } #searchAndFilterContainer { position: relative; } #searchAndFilterContainer.disabled::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } #searchAndFilterContainer.disabled .search-icon { color: #888 !important; } .course-search-input:disabled { background-color: #f0f0f0 !important; color: #888 !important; border-color: #ccc !important; opacity: 0.7; } .course-search-input:disabled::placeholder { color: #888 !important; } .search-input-with-icon:disabled { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') !important; } #searchAndFilterContainer.disabled .select-selected, #searchAndFilterContainer.disabled .select-items { background-color: #f0f0f0 !important; color: #888 !important; border-color: #ccc !important; opacity: 0.7; } #searchAndFilterContainer.disabled .select-selected:after { border-color: #888 transparent transparent transparent !important; } #searchAndFilterContainer.disabled .select-selected:hover, #searchAndFilterContainer.disabled .custom-select:focus-within .select-selected { border-color: #ccc !important; box-shadow: none !important; } #searchAndFilterContainer.disabled .select-items div:hover { background-color: transparent !important; } #searchAndFilterContainer.disabled .select-selected, #searchAndFilterContainer.disabled .select-items { pointer-events: none; } .tree-content-fade-in { animation: fadeIn 0.3s ease-out; } .file-extension { font-size: 10px; padding: 2px 4px; border-radius: 3px; margin-left: 5px; font-weight: bold; color: white; } .ext-ppt { background-color: #ed6c47; } .ext-doc { background-color: #0074D9; } .ext-xls { background-color: #2ECC40; } .ext-txt { background-color: #B10DC9; } .ext-img { background-color: #FFDC00; } .ext-mp3 { background-color: #00f7e3; } .ext-zip { background-color: #AAAAAA; } .ext-pdf { background-color: #cc2121; } .ext-other { background-color: #FF851B; } .search-container { top: 0; flex-shrink: 0; z-index: 1; position: sticky; padding: 15px; display: flex; background-color: #e6f7ff; align-items: center; border-bottom: 1px solid #b3e0ff; transition: all 0.3s ease; } .search-icon { width: 20px; height: 20px; fill: white; } #treeSearchInput { flex-grow: 1; padding: 10px 15px; margin-right: 10px; border: 2px solid #87CEEB; border-radius: 25px; font-size: 14px; outline: none; transition: all 0.3s ease; background-color: white; } #treeSearchInput:focus { border-color: #1e90ff; box-shadow: 0 0 5px rgba(30, 144, 255, 0.5); } .search-button { background-color: #87CEEB; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; margin-left: 10px; padding: 0; } .search-button:hover { background-color: #1e90ff; transform: scale(1.05); } .search-button:active { transform: scale(0.95); } .search-button:disabled { background-color: #cccccc; cursor: not-allowed; opacity: 0.7; } .search-button:disabled:hover { transform: none; } .search-button:disabled .search-icon { fill: #999999; } .search-info { margin-left: 10px; font-size: 14px; color: #666; font-weight: bold; } @keyframes simpleHighlight { 0% { background-color: rgba(255, 255, 0, 0.7); } 100% { background-color: transparent; } } #treeContainer .highlight { background-color: rgba(255, 255, 0, 0.3); border-radius: 3px; animation: simpleHighlight 2s ease-out forwards; } #treePrevButton, #treeNextButton { background-color: #87CEEB; } #treePrevButton:hover:not(:disabled), #treeNextButton:hover:not(:disabled) { background-color: #1e90ff; } .preview-button { background-color: transparent; border: none; color: #4CAF50; padding: 5px; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 12px; margin-left: 10px; cursor: pointer; border-radius: 50%; transition: background-color 0.3s, transform 0.2s; flex-shrink: 0; } .preview-button:hover { background-color: rgba(76, 175, 80, 0.1); transform: scale(1.1); } .preview-button:active { transform: scale(0.95); } .preview-button svg { transition: stroke 0.3s; } .preview-button:hover svg { stroke: #45a049; } `; document.head.appendChild(style); } // 添加文件夹展开/折叠功能 function addFolderToggle(container) { container.removeEventListener('click', folderToggleHandler); container.addEventListener('click', folderToggleHandler); } function folderToggleHandler(e) { const toggle = e.target.closest('.folder-toggle'); const folderContent = e.target.closest('.item-content'); const li = folderContent ? folderContent.closest('li') : null; if (e.target.classList.contains('tree-checkbox')) { return; } if (toggle || (folderContent && li && li.querySelector('ul'))) { e.stopPropagation(); const ul = li.querySelector('ul'); if (ul) { const isExpanding = !li.querySelector('.folder-toggle').classList.contains('open'); li.querySelector('.folder-toggle').classList.toggle('open'); ul.classList.toggle('collapsed'); ul.classList.toggle('expanded'); if (isExpanding) { ul.style.display = 'block'; ul.style.height = 'auto'; const height = ul.scrollHeight; ul.style.height = '0px'; ul.offsetHeight; ul.style.height = height + 'px'; ul.addEventListener('transitionend', function handler() { ul.style.height = 'auto'; ul.removeEventListener('transitionend', handler); }, { once: true }); } else { ul.style.height = ul.scrollHeight + 'px'; ul.offsetHeight; // 触发重排 ul.style.height = '0px'; ul.addEventListener('transitionend', function handler() { if (ul.classList.contains('collapsed')) { ul.style.display = 'none'; } ul.removeEventListener('transitionend', handler); }, { once: true }); } } } } // 更新父级复选框状态 function updateParentCheckboxes(checkbox) { let currentCheckbox = checkbox; while (currentCheckbox) { const parentLi = currentCheckbox.closest('li').parentElement.closest('li'); if (!parentLi) break; const parentCheckbox = parentLi.querySelector('.tree-checkbox'); updateFolderState(parentCheckbox); currentCheckbox = parentCheckbox; } } function updateFileListCheckbox(treeCheckbox) { const path = treeCheckbox.getAttribute('data-path'); const isChecked = treeCheckbox.checked; document.querySelectorAll(`#download_list .file-item a[data-path^="${path}"]`).forEach(fileInfo => { const checkbox = fileInfo.parentElement.querySelector('input[type="checkbox"]'); if (checkbox.checked !== isChecked) { checkbox.checked = isChecked; checkbox.dispatchEvent(new Event('change', { bubbles: true })); } }); updateSelectAllCheckbox(); } // 更新"全选"复选框 function updateSelectAllCheckbox() { const selectAllCheckbox = document.getElementById('selectAllCheckbox'); if (selectAllCheckbox) { const allCheckboxes = document.querySelectorAll("#download_list .file-item input[type='checkbox']"); let allChecked = true; for (let checkbox of allCheckboxes) { if (!checkbox.checked) { allChecked = false; break; } } selectAllCheckbox.checked = allChecked; } } // 同步树状图与下载列表 function syncTreeWithDownloadList() { const treeCheckboxes = document.querySelectorAll('#treeContainer .tree-checkbox'); const downloadCheckboxes = document.querySelectorAll('#download_list .file-item input[type="checkbox"]'); const downloadCheckboxMap = new Map(); downloadCheckboxes.forEach(cb => { const path = cb.parentElement.querySelector('a').getAttribute('data-path'); downloadCheckboxMap.set(path, cb.checked); }); treeCheckboxes.forEach(treeCheckbox => { const path = treeCheckbox.getAttribute('data-path'); if (downloadCheckboxMap.has(path)) { treeCheckbox.checked = downloadCheckboxMap.get(path); } }); // 从叶子节点开始更新文件夹状态 const folderCheckboxes = Array.from(document.querySelectorAll('#treeContainer .folder-checkbox')).reverse(); folderCheckboxes.forEach(updateFolderState); } // 更新树状图复选框 function updateTreeCheckbox(downloadCheckbox) { let path = downloadCheckbox.parentElement.querySelector('a').getAttribute('data-path'); let treeCheckbox = document.querySelector(`#treeContainer .tree-checkbox[data-path="${path}"]`); if (treeCheckbox) { treeCheckbox.checked = downloadCheckbox.checked; updateParentCheckboxes(treeCheckbox); } } // 更新文件夹状态 function updateFolderState(folderCheckbox) { const folderLi = folderCheckbox.closest('li'); const allDescendants = folderLi.querySelectorAll(':scope > ul .tree-checkbox'); let allChecked = true; let anyChecked = false; for (let cb of allDescendants) { if (cb.checked || cb.indeterminate) { anyChecked = true; } if (!cb.checked) { allChecked = false; } if (anyChecked && !allChecked) break; } folderCheckbox.checked = allChecked; folderCheckbox.indeterminate = !allChecked && anyChecked; } function makeDraggable(container) { let isDragging = false; let startX, startY, startLeft, startTop; let lastTouchTime = 0; let lastTouchX, lastTouchY; function onStart(e) { if (e.target.closest('.drag-handle') && !e.target.closest('.search-container')) { isDragging = true; if (e.type === 'mousedown') { startX = e.clientX; startY = e.clientY; } else if (e.type === 'touchstart') { startX = e.touches[0].clientX; startY = e.touches[0].clientY; lastTouchTime = new Date().getTime(); lastTouchX = startX; lastTouchY = startY; } startLeft = container.offsetLeft; startTop = container.offsetTop; if (e.type === 'mousedown') { e.preventDefault(); } } } function onMove(e) { if (!isDragging) return; let clientX, clientY; if (e.type === 'mousemove') { clientX = e.clientX; clientY = e.clientY; } else if (e.type === 'touchmove') { clientX = e.touches[0].clientX; clientY = e.touches[0].clientY; } const dx = clientX - startX; const dy = clientY - startY; container.style.left = `${startLeft + dx}px`; container.style.top = `${startTop + dy}px`; e.preventDefault(); } function onEnd(e) { if (isDragging) { isDragging = false; if (e.type === 'touchend') { const endTime = new Date().getTime(); const endX = e.changedTouches[0].clientX; const endY = e.changedTouches[0].clientY; const timeDiff = endTime - lastTouchTime; const distance = Math.sqrt(Math.pow(endX - lastTouchX, 2) + Math.pow(endY - lastTouchY, 2)); if (distance < 10 && timeDiff < 200) { const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true, view: window }); e.target.dispatchEvent(clickEvent); } } } } // 鼠标事件 container.addEventListener('mousedown', onStart); document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onEnd); // 触摸事件 container.addEventListener('touchstart', onStart, { passive: true }); document.addEventListener('touchmove', onMove, { passive: false }); document.addEventListener('touchend', onEnd); // 防止文本选择 container.addEventListener('selectstart', (e) => { if (isDragging) { e.preventDefault(); } }); } function add_download_button() { // 创建下载图标容器 var downloadIconContainer = document.createElement('div'); downloadIconContainer.id = "download_icon_container"; downloadIconContainer.innerHTML = ` <dotlottie-player class="downloadlist-icon" src="https://lottie.host/604bb467-91d8-46f3-a7ce-786e25f8fded/alw6gwjRdU.json" background="transparent" speed="1" style="width: 60px; height: 60px; margin: -15px;" loop autoplay onclick="toggleListVisibility()" title="点击展开或关闭列表"></dotlottie-player> `; // 设置下载图标容器的样式 downloadIconContainer.style.cssText = ` position: fixed; right: 10px; bottom: 10px; z-index: 9000; cursor: pointer; `; // 创建下载列表容器 var downloadListContainer = document.createElement('div'); downloadListContainer.id = "download_list"; downloadListContainer.style.cssText = ` z-index: 9999; backdrop-filter: blur(10px); border: 2px solid #fcbb34; border-radius: 15px; width: 600px; max-height: 600px; overflow-y: auto; padding: 20px; transform-origin: bottom; transform: scaleY(0); transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; opacity: 0; position: fixed; right: 30px; bottom: 50px; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); `; downloadListContainer.innerHTML = ` <div style=" display: flex; justify-content: center; align-items: center; height: 300px; width: 100%; "> <div style="text-align: center; padding: 20px;"> <div style="font-size: 48px; margin-bottom: 20px;">📚</div> <h3 style="margin-bottom: 15px;"> <span style=" background: linear-gradient(90deg, #ffa500, #ff8c00, #ffa500); background-size: 200% 100%; animation: flowingGradient 3s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; font-size: 24px; ">暂无课件♪(´▽｀)</span> </h3> <p style=" font-size: 14px; font-weight: bold; color: #888; max-width: 400px; margin: 0 auto; line-height: 1.6; "> （在课程首页才能获取到资源） </p> </div> </div> `; // 添加图标的样式 var downloadIconStyle = document.createElement('style'); downloadIconStyle.innerHTML = ` .download-icon, .preview-icon, .downloadlist-icon { background-color: rgba(255, 255, 255, 0); border-radius: 10px; transition: transform 0.3s ease; cursor: pointer; } .download-icon:hover, .preview-icon:hover, .downloadlist-icon:hover { background-color: rgba(255, 255, 255, 0.3); transform: scale(1.2); } .downloadlist-icon { padding: 2px; margin: -20px; } `; var newStyles = document.createElement('style'); newStyles.innerHTML = ` #download_list .file-item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #ffeeba; transition: all 0.3s ease; position: relative; overflow: hidden; } #download_list .file-item:last-child { border-bottom: none; } #download_list .file-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #fff9e6, #fff5d6); opacity: 0; transition: opacity 0.3s ease; z-index: -1; } #download_list .file-item:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; } #download_list .file-item:hover::before { opacity: 1; } #download_list .file-item .custom-checkbox { margin-right: 10px; flex-shrink: 0; } #download_list .file-item .file-icon { margin-right: 10px; font-size: 20px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; transition: transform 0.3s ease; } #download_list .file-item:hover .file-icon { transform: scale(1.1); } #download_list .file-item .file-info { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; overflow: hidden; max-width: calc(100% - 90px); } #download_list .file-item .file-name { font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffa500; line-height: 1.2; margin: 2px 0; cursor: help; transition: color 0.3s ease; } #download_list .file-item .file-details { color: #888; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; margin: 2px 0; cursor: help; transition: color 0.3s ease; } #download_list .file-item .download-link { text-decoration: none; color: #333; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background-color: #fff3cd; transition: all 0.3s ease; flex-shrink: 0; margin-left: 10px; } #download_list .file-item:hover .download-link { background-color: #ffc107; color: white; transform: rotate(360deg); } #download_list .file-item .preview-link { text-decoration: none; color: #333; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background-color: #fff3cd; transition: all 0.3s ease; flex-shrink: 0; margin-left: 10px; } #download_list .file-item:hover .preview-link { background-color: #ffc107; color: white; transform: rotate(360deg); } #download_list .file-icon-document { background-color: #fff3cd; color: #e69500; } #download_list .file-icon-image { background-color: #fff3cd; color: #e69500; } #download_list .file-icon-music { background-color: #fff3cd; color: #e69500; } #download_list .file-icon-archive { background-color: #fff3cd; color: #e69500; } #download_list .file-icon-default { background-color: #fff3cd; color: #e69500; } #searchAndFilterContainer { background-image: linear-gradient(45deg, #fff9e6 25%, #fff5d6 25%, #fff5d6 50%, #fff9e6 50%, #fff9e6 75%, #fff5d6 75%, #fff5d6 100%); background-size: 40px 40px; animation: moveBackgroundStripes 1s linear infinite; } @keyframes moveBackgroundStripes { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } } `; document.head.appendChild(newStyles); document.head.appendChild(downloadIconStyle); document.body.appendChild(downloadIconContainer); document.body.appendChild(downloadListContainer); } // 获取token令牌 function getCookie(keyword = 'prd-access-token') { const cookies = document.cookie.split('; '); for (const cookie of cookies) { const [name, value] = cookie.split('='); if (name.includes(keyword)) { return value; } } return null; } function showDownloadHistory() { if (historyPopup) { return; } historyPopup = document.createElement('div'); Object.assign(historyPopup.style, { position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', backgroundColor: '#fff', padding: '30px', borderRadius: '15px', boxShadow: '0 10px 25px rgba(0, 0, 0, 0.2)', zIndex: '10000', width: '80%', maxWidth: '800px', maxHeight: '80%', display: 'flex', flexDirection: 'column', overflow: 'hidden', opacity: '0', }); const title = document.createElement('h2'); title.textContent = '下载历史'; Object.assign(title.style, { textAlign: 'center', color: '#fcbb34', marginTop: '0', marginBottom: '20px', fontWeight: 'bold', }); historyPopup.historyListElement = document.createElement('ul'); Object.assign(historyPopup.historyListElement.style, { listStyleType: 'none', padding: '0', marginBottom: '20px', overflowY: 'auto', fontWeight: 'bold', flex: '1' }); const buttonContainer = document.createElement('div'); Object.assign(buttonContainer.style, { display: 'flex', justifyContent: 'space-between', marginTop: '20px' }); const clearButton = document.createElement('button'); clearButton.textContent = '清空历史'; Object.assign(clearButton.style, { padding: '10px 20px', border: 'none', borderRadius: '5px', backgroundColor: '#fcbb34', color: '#fff', cursor: 'pointer', fontWeight: 'bold', transition: 'background-color 0.3s' }); clearButton.onmouseover = () => { clearButton.style.backgroundColor = '#fba100'; }; clearButton.onmouseout = () => { clearButton.style.backgroundColor = '#fcbb34'; }; clearButton.onclick = () => { showNotification('确定要清空所有下载历史吗？此操作不可撤销。', 'confirm', () => { const items = historyPopup.historyListElement.querySelectorAll('li'); items.forEach((item, index) => { setTimeout(() => { item.classList.add('remove-history-item'); }, index * 50); }); setTimeout(() => { downloadHistory = []; localStorage.removeItem('downloadHistory'); updateHistoryList(); showNotification('下载历史已清空', 'info'); }, items.length * 50 + 500); }, () => { showNotification('操作已取消', 'info'); } ); }; const closeButton = document.createElement('button'); closeButton.textContent = '关闭'; Object.assign(closeButton.style, { padding: '10px 20px', border: 'none', borderRadius: '5px', backgroundColor: '#ccc', color: '#fff', cursor: 'pointer', fontWeight: 'bold', transition: 'background-color 0.3s' }); closeButton.onmouseover = () => { closeButton.style.backgroundColor = '#bbb'; }; closeButton.onmouseout = () => { closeButton.style.backgroundColor = '#ccc'; }; closeButton.onclick = () => { const rect = historyPopup.getBoundingClientRect(); const startX = rect.left; const startY = rect.top; // 设置起始位置 historyPopup.style.top = startY + 'px'; historyPopup.style.left = startX + 'px'; historyPopup.style.transform = 'none'; // 添加关闭动画类 historyPopup.classList.remove('popup-show'); historyPopup.classList.add('popup-hide'); historyPopup.addEventListener('animationend', function () { document.body.removeChild(historyPopup); historyPopup = null; // 重置historyPopup }, { once: true }); }; buttonContainer.appendChild(clearButton); buttonContainer.appendChild(closeButton); historyPopup.appendChild(title); historyPopup.appendChild(historyPopup.historyListElement); historyPopup.appendChild(buttonContainer); document.body.appendChild(historyPopup); // 添加搜索框 const searchContainer = createSearchBox(); historyPopup.insertBefore(searchContainer, historyPopup.historyListElement); document.body.appendChild(historyPopup); // 触发显示动画 setTimeout(() => { historyPopup.classList.add('popup-show'); }, 10); updateHistoryList(); } function createSearchBox() { const searchContainer = document.createElement('div'); Object.assign(searchContainer.style, { margin: '0 0 20px 0', position: 'relative', width: '100%' }); const searchInput = document.createElement('input'); Object.assign(searchInput.style, { width: '100%', padding: '10px 40px 10px 15px', fontSize: '16px', border: '2px solid #fcbb34', borderRadius: '25px', outline: 'none', boxSizing: 'border-box', transition: 'all 0.3s ease' }); searchInput.placeholder = '搜索下载历史...'; const searchIcon = document.createElement('div'); Object.assign(searchIcon.style, { position: 'absolute', right: '15px', top: '50%', transform: 'translateY(-50%)', width: '20px', height: '20px', backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fcbb34"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>')`, backgroundSize: 'cover', cursor: 'pointer' }); searchContainer.appendChild(searchInput); searchContainer.appendChild(searchIcon); // 添加搜索功能 searchInput.addEventListener('input', () => { filterHistory(searchInput.value); }); return searchContainer; } function filterHistory(searchTerm) { const items = historyPopup.historyListElement.querySelectorAll('li'); items.forEach((item, index) => { const text = item.textContent.toLowerCase(); const matchesSearch = text.includes(searchTerm.toLowerCase()); if (matchesSearch) { item.style.display = ''; resetListItemStyles(item); item.style.opacity = '0'; item.style.transform = 'translateY(-20px)'; setTimeout(() => { item.style.opacity = '1'; item.style.transform = 'translateY(0)'; }, index * 50); } else { item.style.display = 'none'; } }); } function resetListItemStyles(item) { Object.assign(item.style, { padding: '10px', borderBottom: '1px solid #eee', color: '#333', display: 'flex', justifyContent: 'space-between', alignItems: 'center', transition: 'opacity 0.3s, transform 0.3s' }); const redownloadButton = item.querySelector('button'); if (redownloadButton) { Object.assign(redownloadButton.style, { padding: '5px 10px', border: 'none', borderRadius: '3px', backgroundColor: '#4CAF50', color: '#fff', cursor: 'pointer', fontSize: '12px', transition: 'background-color 0.3s' }); } } function updateHistoryList() { if (!historyPopup || !historyPopup.historyListElement) return; const historyListElement = historyPopup.historyListElement; historyListElement.innerHTML = ''; // 过滤并保留最近3天的历史记录 const threeDaysAgo = new Date().getTime() - (3 * 24 * 60 * 60 * 1000); downloadHistory = downloadHistory.filter(item => item.time > threeDaysAgo); if (downloadHistory.length === 0) { const noHistory = showNoHistoryMessage(historyListElement); requestAnimationFrame(() => { noHistory.style.opacity = '1'; noHistory.style.transform = 'translateY(0)'; }); } else { downloadHistory.forEach((item, index) => { const listItem = createHistoryListItem(item, index); historyListElement.appendChild(listItem); setTimeout(() => { listItem.style.opacity = '1'; listItem.style.transform = 'translateY(0)'; }, index * 50); }); } // 更新本地存储 localStorage.setItem('downloadHistory', JSON.stringify(downloadHistory)); } function showNoHistoryMessage(historyListElement) { const noHistory = document.createElement('div'); noHistory.id = 'noHistoryMessage'; noHistory.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#fcbb34" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> <p>暂无下载历史</p> <span>开始下载以添加记录 (⌐■_■)</span> `; Object.assign(noHistory.style, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: '#888', textAlign: 'center', opacity: '0', transform: 'translateY(-20px)', transition: 'opacity 0.5s, transform 0.5s' }); const p = noHistory.querySelector('p'); Object.assign(p.style, { fontSize: '18px', fontWeight: 'bold', margin: '10px 0 5px', color: '#fcbb34' }); const span = noHistory.querySelector('span'); Object.assign(span.style, { fontSize: '14px', opacity: '0.8', fontWeight: 'bold' }); historyListElement.appendChild(noHistory); return noHistory; } function createHistoryListItem(item, index) { const listItem = document.createElement('li'); Object.assign(listItem.style, { padding: '10px', borderBottom: '1px solid #eee', color: '#333', display: 'flex', justifyContent: 'space-between', alignItems: 'center', opacity: '0', transform: 'translateY(-20px)' }); const itemInfo = document.createElement('span'); itemInfo.textContent = `${index + 1}. ${item.filename} - ${new Date(item.time).toLocaleString()}`; const redownloadButton = createRedownloadButton(item); listItem.appendChild(itemInfo); listItem.appendChild(redownloadButton); return listItem; } function createRedownloadButton(item) { const redownloadButton = document.createElement('button'); redownloadButton.textContent = '重新下载'; Object.assign(redownloadButton.style, { padding: '5px 10px', border: 'none', borderRadius: '3px', backgroundColor: '#4CAF50', color: '#fff', cursor: 'pointer', fontWeight: 'bold', transition: 'background-color 0.3s' }); redownloadButton.onmouseover = () => { redownloadButton.style.backgroundColor = '#45a049'; }; redownloadButton.onmouseout = () => { redownloadButton.style.backgroundColor = '#4CAF50'; }; redownloadButton.onclick = () => { courseDownload(item.url, item.filename); }; return redownloadButton; } function createDownloadHistoryPopup() { const popup = document.createElement('div'); popup.id = 'downloadHistoryPopup'; Object.assign(popup.style, { display: 'none', position: 'fixed', zIndex: '10002', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', backgroundColor: '#fff', padding: '30px', borderRadius: '15px', boxShadow: '0 10px 25px rgba(0, 0, 0, 0.2)', maxWidth: '80%', maxHeight: '80%', overflowY: 'auto', opacity: '0', transition: 'opacity 0.3s ease' }); document.body.appendChild(popup); } function saveDownloadHistory(filename, url) { const historyItem = { filename, url, time: new Date().getTime() }; downloadHistory.unshift(historyItem); // 过滤并保留最近3天的历史记录 const threeDaysAgo = new Date().getTime() - (3 * 24 * 60 * 60 * 1000); downloadHistory = downloadHistory.filter(item => item.time > threeDaysAgo); localStorage.setItem('downloadHistory', JSON.stringify(downloadHistory)); if (historyPopup && historyPopup.historyListElement) { const noHistoryMessage = historyPopup.historyListElement.querySelector('#noHistoryMessage'); if (noHistoryMessage) { noHistoryMessage.remove(); } const newListItem = createHistoryListItem(historyItem, 0); historyPopup.historyListElement.insertBefore(newListItem, historyPopup.historyListElement.firstChild); // 触发动画 setTimeout(() => { newListItem.classList.add('new-history-item'); }, 10); // 更新其他项的序号 const existingItems = historyPopup.historyListElement.querySelectorAll('li'); existingItems.forEach((item, index) => { if (index > 0) { const itemInfo = item.querySelector('span'); itemInfo.textContent = itemInfo.textContent.replace(/^\d+\./, `${index + 1}.`); } }); } } function loadDownloadHistory() { const savedHistory = localStorage.getItem('downloadHistory'); if (savedHistory) { downloadHistory = JSON.parse(savedHistory); const threeDaysAgo = new Date().getTime() - (3 * 24 * 60 * 60 * 1000); downloadHistory = downloadHistory.filter(item => item.time > threeDaysAgo); localStorage.setItem('downloadHistory', JSON.stringify(downloadHistory)); } } function createZipProgressIndicator() { const TextContainer = document.getElementById('zipTextContainer'); if (!TextContainer) { console.error('zipTextContainer not found'); return null; } // 清空容器 TextContainer.innerHTML = ''; // 创建图标容器 const iconContainer = document.createElement('div'); iconContainer.style.cssText = ` margin-bottom: 10px; font-size: 24px; `; iconContainer.innerHTML = '📁'; TextContainer.appendChild(iconContainer); // 创建文本元素 const progressText = document.createElement('p'); progressText.style.margin = '0'; progressText.textContent = 'ZIP导出准备就绪，等待操作...'; TextContainer.appendChild(progressText); // 创建进度条背景 const progressBackground = document.createElement('div'); progressBackground.style.cssText = ` position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #fff; `; TextContainer.appendChild(progressBackground); // 创建进度条 const zipProgressBar = document.createElement('div'); zipProgressBar.style.cssText = ` position: absolute; bottom: 0; left: 0; width: 0%; height: 4px; background-color: #fcbb34; transition: width 0.3s ease; `; TextContainer.appendChild(zipProgressBar); return { updateProgress: (text, progress = 0) => { progressText.textContent = text; zipProgressBar.style.width = `${progress}%`; // 更新图标 if (progress === 0) { iconContainer.innerHTML = '📁'; } else if (progress < 100) { iconContainer.innerHTML = '🗜️'; } else { iconContainer.innerHTML = '📦'; } }, hide: () => { progressText.textContent = 'ZIP导出准备就绪，等待操作...'; zipProgressBar.style.width = '0%'; iconContainer.innerHTML = '📁'; } }; } function initializeControlPanel() { const controlPanel = document.createElement('div'); const checkboxesContainer = document.createElement('div'); const downloadInterfaceCheckbox = document.createElement('input'); const downloadButtonCheckbox = document.createElement('input'); const progressBarCheckbox = document.createElement('input'); const videoCheckbox = document.createElement('input'); const toggleButton = document.createElement('button'); const tipsDisplay = document.createElement('div'); const showCourseNameText = document.createElement('div'); let isControlPanelVisible = false; // 创建Lottie动画播放器元素 const lottiePlayer = document.createElement('dotlottie-player'); lottiePlayer.setAttribute('src', "https://lottie.host/4f5910c1-63a3-4ffa-965c-7c0e46a29928/PCa2EgPj4N.json"); lottiePlayer.setAttribute('background', 'transparent'); lottiePlayer.setAttribute('speed', '1'); lottiePlayer.style.width = '100%'; lottiePlayer.style.height = '100%'; lottiePlayer.style.position = 'absolute'; lottiePlayer.style.zIndex = '-2'; lottiePlayer.style.top = '0'; lottiePlayer.style.left = '0'; lottiePlayer.setAttribute('loop', ''); lottiePlayer.setAttribute('autoplay', ''); // 模糊效果 const blurredBackground = document.createElement('div'); blurredBackground.style.position = 'absolute'; blurredBackground.style.top = '0'; blurredBackground.style.left = '0'; blurredBackground.style.right = '0'; blurredBackground.style.bottom = '0'; blurredBackground.style.zIndex = '-1'; blurredBackground.style.backdropFilter = 'blur(3px)'; blurredBackground.style.backgroundColor = 'rgba(255, 255, 255, 0.6)'; controlPanel.appendChild(blurredBackground); // 设置控制面板样式 controlPanel.style.position = 'fixed'; controlPanel.style.top = '210px'; controlPanel.style.right = isControlPanelVisible ? '40px' : '-740px'; controlPanel.style.zIndex = '10000'; controlPanel.style.backgroundColor = 'transparent'; controlPanel.style.padding = '10px'; controlPanel.style.borderRadius = '5px'; controlPanel.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; controlPanel.style.border = '1px solid #fcbb34'; controlPanel.style.transition = 'right 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out'; controlPanel.style.overflow = 'hidden'; controlPanel.style.width = '700px'; controlPanel.style.height = '260px'; controlPanel.appendChild(lottiePlayer); controlPanel.appendChild(tipsDisplay); controlPanel.appendChild(showCourseNameText); // 创建横向菜单容器 const menuContainer = document.createElement('div'); menuContainer.style.display = 'flex'; menuContainer.style.justifyContent = 'space-around'; menuContainer.style.marginBottom = '15px'; menuContainer.style.borderBottom = '2px solid #fcbb34'; menuContainer.style.padding = '10px 0'; const menuItems = [ { text: '<strong>消息管理</strong>', category: 'message', icon: '📨' }, { text: '<strong>下载管理</strong>', category: 'download', icon: '📥' }, { text: '<strong>导出功能</strong>', category: 'export', icon: '📤' }, { text: '<strong>显示设置</strong>', category: 'display', icon: '🖥️' }, { text: '<strong>自定义过滤器</strong>', category: 'customFilter', icon: '🔧' }, { text: '<strong>检查更新</strong>', category: 'update', icon: '🔎' } ]; menuItems.forEach(item => { const menuItem = document.createElement('div'); menuItem.innerHTML = `${item.icon} <span>${item.text}</span>`; menuItem.style.padding = '8px 12px'; menuItem.style.cursor = 'pointer'; menuItem.style.borderRadius = '20px'; menuItem.style.transition = 'all 0.3s ease'; menuItem.dataset.category = item.category; menuItem.addEventListener('mouseover', () => { menuItem.style.backgroundColor = 'rgba(252, 187, 52, 0.2)'; }); menuItem.addEventListener('mouseout', () => { if (!menuItem.classList.contains('active')) { menuItem.style.backgroundColor = 'transparent'; } }); menuContainer.appendChild(menuItem); }); menuContainer.addEventListener('click', (event) => { const clickedItem = event.target.closest('div[data-category]'); if (clickedItem) { const category = clickedItem.dataset.category; // 更新菜单项样式 menuContainer.querySelectorAll('div[data-category]').forEach(mi => { mi.classList.toggle('active', mi.dataset.category === category); mi.style.backgroundColor = mi.dataset.category === category ? 'rgba(252, 187, 52, 0.2)' : 'transparent'; mi.style.color = mi.dataset.category === category ? '#fcbb34' : '#000'; mi.style.fontWeight = mi.dataset.category === category ? 'bold' : 'normal'; }); if (category === 'customFilter') { controlPanel.style.width = '720px'; controlPanel.style.height = '610px'; } else if (category === 'display') { controlPanel.style.width = '700px'; controlPanel.style.height = '390px'; } else if (category === 'update') { controlPanel.style.width = '690px'; controlPanel.style.height = '330px'; } else if (category === 'export') { controlPanel.style.width = '690px'; controlPanel.style.height = '400px'; } else { controlPanel.style.width = '700px'; controlPanel.style.height = '260px'; } // 更新容器可见性 [messageContainer, downloadContainer, exportContainer, displayContainer, updateContainer, customFilterContainer].forEach(container => { container.style.display = container.dataset.category === category ? 'block' : 'none'; }); } }); // 添加动画效果 const styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerText = ` @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } #controlPanel > div { animation: fadeIn 0.3s ease-out; } `; document.head.appendChild(styleSheet); // 将菜单容器添加到控制面板 controlPanel.prepend(menuContainer); // 创建容器来包装按钮和装饰元素 const Beautifulupdater = document.createElement('div'); Beautifulupdater.style.position = 'relative'; Beautifulupdater.style.width = '200px'; Beautifulupdater.style.margin = '20px auto'; Beautifulupdater.style.display = 'flex'; Beautifulupdater.style.flexDirection = 'column'; Beautifulupdater.style.justifyContent = 'center'; Beautifulupdater.style.alignItems = 'center'; // 创建版本号容器 const versionContainer = document.createElement('div'); versionContainer.style.textAlign = 'center'; const versionWrapper = document.createElement('div'); versionWrapper.style.cssText = ` display: flex; flex-direction: column; align-items: center; gap: 10px; `; const versionDisplay = document.createElement('div'); versionDisplay.textContent = `V${GM_info.script.version}`; versionDisplay.style.cssText = ` font-size: 14px; font-weight: bold; color: #fff; padding: 4px 8px; border-radius: 4px; text-align: center; background: linear-gradient(45deg, #f0932b, #fcbb34); box-shadow: 0 0 10px rgba(255, 165, 0, 0.5); animation: glowPulse 2s ease-in-out infinite; cursor: pointer; `; const updateTip = document.createElement('div'); updateTip.innerHTML = ` <div style=" font-size: 12px; color: #666; margin-top: 5px; text-align: center; "> <span style="color: #e74c3c">⚡</span> 请通过 <a href="https://scriptcat.org/zh-CN/script-show-page/2771" target="_blank" style=" color: #3498db; text-decoration: none; font-weight: bold; " >ScriptCat</a> 获取更新 <br/> <small style="color: #95a5a6"> 愿世界和平，RIP Greasy Fork </small> </div> `; versionWrapper.appendChild(versionDisplay); versionWrapper.appendChild(updateTip); versionContainer.appendChild(versionWrapper); // 添加点击计数器和事件监听器 let clickCount = 0; let lastClickTime = 0; versionDisplay.addEventListener('click', (e) => { e.stopPropagation(); // 防止事件冒泡 const currentTime = new Date().getTime(); if (currentTime - lastClickTime > 1000) { clickCount = 0; } clickCount++; lastClickTime = currentTime; if (clickCount === 5) { activateEasterEgg(); clickCount = 0; } }); // 添加视觉反馈 versionDisplay.addEventListener('mousedown', () => { versionDisplay.style.transform = 'scale(0.95)'; }); versionDisplay.addEventListener('mouseup', () => { versionDisplay.style.transform = 'scale(1)'; }); // 创建装饰元素 const createDecorElement = (color, size, top, left, animationDelay) => { const decor = document.createElement('div'); decor.style.cssText = ` position: absolute; width: ${size}px; height: ${size}px; background-color: ${color}; border-radius: 50%; top: ${top}px; left: ${left}px; animation: float 3s ease-in-out ${animationDelay}s infinite; z-index: -1; `; return decor; }; // 添加装饰元素 Beautifulupdater.appendChild(createDecorElement('#FFD700', 10, 10, 20, 0)); Beautifulupdater.appendChild(createDecorElement('#FFA07A', 15, 70, 30, 0.5)); Beautifulupdater.appendChild(createDecorElement('#98FB98', 12, 20, 160, 1)); Beautifulupdater.appendChild(createDecorElement('#87CEFA', 8, 80, 170, 1.5)); // 添加到容器 Beautifulupdater.appendChild(versionContainer); // 添加动画样式 const style = document.createElement('style'); style.textContent = ` @keyframes flowingGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } `; document.head.appendChild(style); // 存放自定义过滤器的控件的容器 const customFilterContainer = document.createElement('div'); customFilterContainer.dataset.category = 'customFilter'; customFilterContainer.style.display = 'none'; // 生成过滤器编辑界面 function createFilterEditor() { const editor = document.createElement('div'); editor.style.padding = '20px'; editor.style.backgroundColor = 'rgba(252, 187, 52, 0.05)'; editor.style.borderRadius = '10px'; editor.style.marginBottom = '20px'; editor.style.boxShadow = '0 4px 15px rgba(252, 187, 52, 0.15)'; window.quickFilters.forEach((filter, index) => { if (filter.label === "全部") return; const filterRow = document.createElement('div'); filterRow.style.marginBottom = '20px'; filterRow.style.display = 'flex'; filterRow.style.alignItems = 'center'; filterRow.style.transition = 'all 0.3s ease'; const labelSpan = document.createElement('span'); labelSpan.textContent = filter.label + ': '; labelSpan.style.marginRight = '15px'; labelSpan.style.fontWeight = '600'; labelSpan.style.color = '#e67e22'; labelSpan.style.minWidth = '70px'; labelSpan.style.fontSize = '16px'; labelSpan.style.textShadow = '1px 1px 2px rgba(0, 0, 0, 0.1)'; labelSpan.style.letterSpacing = '0.5px'; const valueInput = document.createElement('input'); valueInput.type = 'text'; valueInput.value = filter.value; valueInput.placeholder = '文件扩展名（用逗号分隔）'; valueInput.style.flex = '1'; valueInput.style.padding = '10px 15px'; valueInput.style.borderRadius = '6px'; valueInput.style.border = '2px solid #fcbb34'; valueInput.style.outline = 'none'; valueInput.style.transition = 'all 0.3s ease'; valueInput.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'; valueInput.style.fontSize = '14px'; valueInput.style.color = '#333'; valueInput.style.fontWeight = 'bold'; valueInput.style.transform = 'skew(-10deg)'; valueInput.addEventListener('focus', () => { valueInput.style.boxShadow = '0 0 0 3px rgba(252, 187, 52, 0.3)'; filterRow.style.transform = 'translateX(5px)'; labelSpan.style.color = '#d35400'; }); valueInput.addEventListener('blur', () => { valueInput.style.boxShadow = 'none'; filterRow.style.transform = 'translateX(0)'; labelSpan.style.color = '#e67e22'; }); valueInput.addEventListener('input', () => { window.quickFilters[index].value = valueInput.value; }); filterRow.appendChild(labelSpan); filterRow.appendChild(valueInput); editor.appendChild(filterRow); }); // 添加说明文字 const instructionText = document.createElement('p'); instructionText.textContent = '注意：该规则也对树状图生效，建议是增加而不是删除。'; instructionText.style.marginTop = '15px'; instructionText.style.fontSize = '14px'; instructionText.style.color = '#666'; instructionText.style.fontStyle = 'italic'; instructionText.style.textAlign = 'center'; editor.appendChild(instructionText); return editor; } function updateFilterEditor() { const oldEditor = customFilterContainer.querySelector('.filter-editor'); const buttonsContainer = customFilterContainer.querySelector('.buttons-container'); if (oldEditor) { oldEditor.remove(); } const newEditor = createFilterEditor(); newEditor.classList.add('filter-editor'); if (buttonsContainer) { customFilterContainer.insertBefore(newEditor, buttonsContainer); } else { customFilterContainer.appendChild(newEditor); } } controlPanel.appendChild(customFilterContainer); updateFilterEditor(); // 定义默认的过滤器设置 const defaultQuickFilters = [ { label: "全部", value: "" }, { label: "文档", value: "doc,docx,pdf,txt,odt,rtf,html,htm,xls,xlsx,ppt,pptx,odp,xmind" }, { label: "图片", value: "jpg,jpeg,png,gif,bmp,tiff,svg,webp,tif" }, { label: "音频", value: "mp3,wav,ogg,flac,aac,m4a,wma,aiff,ape,midi" }, { label: "压缩包", value: "zip,rar,7z,gz,bz2,tar" } ]; function createSaveAndResetButtons() { const buttonContainer = document.createElement('div'); buttonContainer.classList.add('buttons-container'); buttonContainer.style.display = 'flex'; buttonContainer.style.justifyContent = 'space-between'; buttonContainer.style.marginTop = '20px'; const saveButton = document.createElement('button'); saveButton.textContent = '保存设置'; saveButton.title = '保存设置并刷新页面'; const resetButton = document.createElement('button'); resetButton.textContent = '重置设置'; resetButton.title = '重置为默认设置并刷新页面'; const buttonStyle = ` background-color: #3498db; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); `; saveButton.style.cssText = buttonStyle; resetButton.style.cssText = buttonStyle; resetButton.style.backgroundColor = '#e74c3c'; const addHoverEffect = (button, defaultColor, hoverColor) => { button.onmouseover = function () { this.style.backgroundColor = hoverColor; this.style.transform = 'translateY(-2px)'; this.style.boxShadow = '0px 6px 8px rgba(0, 0, 0, 0.15)'; }; button.onmouseout = function () { this.style.backgroundColor = defaultColor; this.style.transform = 'translateY(0)'; this.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.1)'; }; }; addHoverEffect(saveButton, '#3498db', '#2980b9'); addHoverEffect(resetButton, '#e74c3c', '#c0392b'); saveButton.onclick = () => { try { localStorage.setItem('customQuickFilters', JSON.stringify(window.quickFilters)); showNotification('设置已保存，页面将在3秒后自动刷新以应用修改', 'info'); setTimeout(() => { location.reload(); }, 3000); } catch (error) { showNotification('保存设置时出错，请重试', 'warning'); } }; resetButton.onclick = () => { showNotification('确定要重置所有过滤器设置吗？', 'confirm', () => { window.quickFilters = JSON.parse(JSON.stringify(defaultQuickFilters)); localStorage.removeItem('customQuickFilters'); showNotification('设置已重置为默认值，页面将在3秒后自动刷新以应用修改', 'info'); setTimeout(() => { location.reload(); }, 3000); }, () => { showNotification('重置操作已取消', 'info'); } ); }; buttonContainer.appendChild(saveButton); buttonContainer.appendChild(resetButton); return buttonContainer; } customFilterContainer.appendChild(createSaveAndResetButtons()); // 定义CSS const hoverGlowName = 'hover-glow'; const styleSheet1 = document.createElement('style'); styleSheet1.type = 'text/css'; styleSheet1.innerText = ` @keyframes ${hoverGlowName} { from { box-shadow: 0 0 8px #fcbb34; } to { box-shadow: 0 0 20px #fcbb34, 0 0 30px #fcbb34; } } #toggleButton:hover { animation: ${hoverGlowName} 1s ease-in-out infinite alternate; } .switch { position: relative; display: inline-block; width: 50px; height: 26px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 26px; } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: #FF8C00; /* 改为橙色 */ } input:checked + .slider:before { transform: translateX(24px); } /* 显示/隐藏图标 */ .slider:after { content: "•"; position: absolute; top: 50%; left: 30px; transform: translateY(-50%); color: white; font-size: 20px; opacity: 0; transition: .4s; } input:checked + .slider:after { opacity: 1; left: 8px; } .slider:hover { box-shadow: 0 0 5px rgba(255, 140, 0, 0.5); } .slider:hover:before { animation: newpulse 1.5s infinite; } @keyframes newpulse { 0% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 140, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0); } } .switch:hover .slider:before { animation: newpulse 1.5s infinite; } .switch::after { content: attr(data-label); position: absolute; right: -65px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #555; } input:checked + .slider:before { transform: translateX(24px); transition: .4s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .slider:before { transition: .4s, transform .2s; } input:checked + .slider:before { transform: translateX(24px) scale(1.1); } .slider { background: linear-gradient(to right, #ccc 50%, #FF8C00 50%); background-size: 200% 100%; background-position: left bottom; transition: all .4s ease; } input:checked + .slider { background-position: right bottom; } #allTipsContainer::-webkit-scrollbar { width: 10px; } #allTipsContainer::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } #allTipsContainer::-webkit-scrollbar-thumb { background: #fcbb34; border-radius: 10px; } #allTipsContainer::-webkit-scrollbar-thumb:hover { background: #e67e22; } .tip-item { background-color: #fff8e1; border-left: 4px solid #fcbb34; padding: 15px; margin-bottom: 15px; border-radius: 5px; transition: all 0.2s ease; } .tip-item:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } #closeTipsBtn { background-color: #fcbb34; color: white; border: none; padding: 10px 20px; border-radius: 25px; cursor: pointer; font-size: 16px; font-weight: bold; transition: all 0.2s ease; display: block; margin: 20px auto 0; } #closeTipsBtn:hover { background-color: #e67e22; transform: scale(1.05); } @keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -60%); } to { opacity: 1; transform: translate(-50%, -50%); } } #allTipsContainer.show { animation: fadeIn 0.3s ease-out forwards; } ${style.textContent} @keyframes popOutToCenter { 0% { transform: translate(var(--start-x), var(--start-y)) scale(0.7); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } @keyframes popInToOrigin { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(var(--end-x), var(--end-y)) scale(0.7); opacity: 0; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #fcbb34; } } .tip-item { background: linear-gradient(45deg, #f3f4f6, #fff); border-left: 4px solid #fcbb34; padding: 15px; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.3s ease; animation: fadeInUp 0.5s ease-out both; animation-play-state: paused; opacity: 0; } .tip-item:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .tip-number { display: inline-block; background-color: #fcbb34; color: white; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; margin-right: 10px; } .tip-text { display: inline-block; vertical-align: middle; } #allTipsContainer h2 { font-size: 28px; font-weight: bold; text-align: center; margin-bottom: 20px; color: #fcbb34; overflow: hidden; border-right: .15em solid #fcbb34; white-space: nowrap; letter-spacing: .15em; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } `; document.head.appendChild(styleSheet1); // 设置切换按钮样式 const gearIcon = document.createElement('span'); gearIcon.textContent = '⚙️'; gearIcon.style.fontSize = '16px'; // 齿轮图标的样式 gearIcon.style.transition = 'transform 0.3s ease'; gearIcon.style.display = 'inline-block'; gearIcon.style.verticalAlign = 'middle'; toggleButton.appendChild(gearIcon); toggleButton.id = 'toggleButton'; toggleButton.style.fontSize = '16px'; toggleButton.title = '控制面板'; toggleButton.style.position = 'fixed'; toggleButton.style.top = '210px'; toggleButton.style.right = '0'; toggleButton.style.zIndex = '10001'; toggleButton.style.backgroundColor = '#fcbb34'; toggleButton.style.boxShadow = '0 4px 8px 0 rgba(0, 0, 0, 0.2)'; toggleButton.style.color = '#fff'; toggleButton.style.border = 'none'; toggleButton.style.borderRadius = '5px 0 0 5px'; toggleButton.style.padding = '10px'; toggleButton.style.cursor = 'pointer'; toggleButton.style.transition = 'right 0.3s ease-in-out, transform 0.3s ease'; // 添加悬停效果 toggleButton.style.transform = 'scale(1)'; toggleButton.addEventListener('mouseover', function () { toggleButton.style.transform = 'scale(1.1)'; }); toggleButton.addEventListener('mouseout', function () { toggleButton.style.transform = 'scale(1)'; }); // 切换按钮点击事件 toggleButton.addEventListener('click', function () { isControlPanelVisible = !isControlPanelVisible; controlPanel.style.right = isControlPanelVisible ? '40px' : '-740px'; gearIcon.style.transform = 'rotate(360deg)'; gearIcon.addEventListener('transitionend', function () { gearIcon.style.transform = 'none'; }, { once: true }); }); // 创建分类容器 const messageContainer = document.createElement('div'); messageContainer.dataset.category = 'message'; messageContainer.style.justifyContent = 'space-between'; messageContainer.style.width = '100%'; const downloadContainer = document.createElement('div'); downloadContainer.dataset.category = 'download'; downloadContainer.style.justifyContent = 'space-between'; downloadContainer.style.width = '100%'; const exportContainer = document.createElement('div'); exportContainer.dataset.category = 'export'; exportContainer.style.justifyContent = 'space-between'; exportContainer.style.width = '100%'; const displayContainer = document.createElement('div'); displayContainer.dataset.category = 'display'; displayContainer.style.justifyContent = 'space-between'; displayContainer.style.width = '100%'; const updateContainer = document.createElement('div'); updateContainer.dataset.category = 'update'; updateContainer.style.justifyContent = 'space-between'; updateContainer.style.width = '100%'; // 初始化复选框状态 function initializeCheckboxState(checkbox, index) { const savedState = localStorage.getItem(`checkbox-${index}`); checkbox.checked = savedState === null ? true : savedState === 'true'; progressBarCheckbox.addEventListener('change', () => { isProgressBarVisible = progressBarCheckbox.checked; updateVisibility(); }); } // 保存复选框状态 function saveCheckboxState(checkbox, index) { localStorage.setItem(`checkbox-${index}`, checkbox.checked); } // 初始化复选框 [downloadInterfaceCheckbox, downloadButtonCheckbox, progressBarCheckbox, videoCheckbox].forEach((checkbox, index) => { checkbox.type = 'checkbox'; initializeCheckboxState(checkbox, index); checkbox.id = `checkbox-${index}`; checkbox.style.display = 'none'; const label = document.createElement('label'); label.className = 'switch'; label.htmlFor = `checkbox-${index}`; const slider = document.createElement('span'); slider.className = 'slider'; label.appendChild(checkbox); label.appendChild(slider); const labelText = document.createElement('span'); labelText.textContent = ['右上角下载栏', '右下角下载栏', '左下角进度条', '右侧视频组件'][index]; labelText.style.color = '#fcbb34'; labelText.style.marginRight = '15px'; labelText.style.fontWeight = '600'; labelText.style.fontSize = '16px'; labelText.style.letterSpacing = '0.5px'; labelText.style.textShadow = '1px 1px 2px rgba(0, 0, 0, 0.1)'; labelText.style.transition = 'all 0.3s ease'; labelText.style.cursor = 'pointer'; // 添加悬停效果 labelText.addEventListener('mouseover', () => { labelText.style.transform = 'translateY(-2px)'; labelText.style.textShadow = '2px 2px 4px rgba(0, 0, 0, 0.2)'; }); labelText.addEventListener('mouseout', () => { labelText.style.transform = 'translateY(0)'; labelText.style.textShadow = '1px 1px 2px rgba(0, 0, 0, 0.1)'; }); checkbox.addEventListener('change', () => { if (index === 1) { updateDownloadListVisibility(); } else { updateVisibility(); } saveCheckboxState(checkbox, index); }); const container = document.createElement('div'); container.style.display = 'flex'; container.style.justifyContent = 'space-between'; container.style.alignItems = 'center'; container.style.padding = '10px'; container.style.position = 'relative'; container.appendChild(labelText); // 创建装饰元素容器 const decorationContainer = document.createElement('div'); decorationContainer.style.display = 'flex'; decorationContainer.style.alignItems = 'center'; decorationContainer.style.margin = '0 15px'; // 添加装饰线 const decorativeLine = document.createElement('div'); decorativeLine.style.width = '40px'; decorativeLine.style.height = '2px'; decorativeLine.style.background = 'linear-gradient(to right, #ff9800, #ff5722)'; // 添加动态小圆点 (第一个) const dotContainer1 = document.createElement('div'); dotContainer1.style.position = 'relative'; dotContainer1.style.width = '20px'; dotContainer1.style.height = '20px'; const dot1 = document.createElement('div'); dot1.style.position = 'absolute'; dot1.style.top = '50%'; dot1.style.left = '50%'; dot1.style.width = '8px'; dot1.style.height = '8px'; dot1.style.borderRadius = '50%'; dot1.style.backgroundColor = '#ff9800'; dot1.style.transform = 'translate(-50%, -50%)'; dot1.style.animation = 'newpulse 2s infinite'; dotContainer1.appendChild(dot1); // 添加动态小圆点 (第二个) const dotContainer2 = document.createElement('div'); dotContainer2.style.position = 'relative'; dotContainer2.style.width = '20px'; dotContainer2.style.height = '20px'; const dot2 = document.createElement('div'); dot2.style.position = 'absolute'; dot2.style.top = '50%'; dot2.style.left = '50%'; dot2.style.width = '8px'; dot2.style.height = '8px'; dot2.style.borderRadius = '50%'; dot2.style.backgroundColor = '#ff9800'; dot2.style.transform = 'translate(-50%, -50%)'; dot2.style.animation = 'newpulse 2s infinite'; dotContainer2.appendChild(dot2); // 将装饰元素添加到装饰容器 decorationContainer.appendChild(dotContainer1); decorationContainer.appendChild(decorativeLine); decorationContainer.appendChild(dotContainer2); // 将装饰容器添加到主容器 container.appendChild(decorationContainer); // 添加开关 container.appendChild(label); checkboxesContainer.appendChild(container); }); // 创建第一个按钮容器（用于已读和清空消息按钮） const messageButtonContainer = document.createElement('div'); messageButtonContainer.style.display = 'flex'; messageButtonContainer.style.justifyContent = 'space-between'; messageButtonContainer.style.marginTop = '10px'; // 创建"已读所有消息"按钮 const markReadButton = document.createElement('button'); markReadButton.id = 'markReadButton'; markReadButton.textContent = '已读所有消息'; markReadButton.title = '标记所有消息为已读并刷新页面'; // 添加样式 markReadButton.style.cssText = ` background-color: #2ecc71; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); `; // 添加hover效果 markReadButton.onmouseover = function () { this.style.backgroundColor = '#27ae60'; this.style.transform = 'translateY(-2px)'; this.style.boxShadow = '0px 6px 8px rgba(0, 0, 0, 0.15)'; }; markReadButton.onmouseout = function () { this.style.backgroundColor = '#2ecc71'; this.style.transform = 'translateY(0)'; this.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.1)'; }; // 绑定点击事件处理函数 markReadButton.onclick = async function () { try { this.disabled = true; this.textContent = '正在处理...'; const result = await markAllMessagesAsRead(); if (result.hasUnreadMessages) { showNotification('所有消息已标记为已读，页面将刷新', 'info'); location.reload(); } else { showNotification('没有未读消息', 'info'); } } catch (error) { console.error('Error marking messages as read:', error); showNotification('标记消息时出错，请重试', 'warning'); } finally { this.disabled = false; this.textContent = '已读所有消息'; } }; // 定义标记所有消息为已读的函数 async function markAllMessagesAsRead() { const token = getCookie(); const hostname = window.location.hostname; const pageSize = 20; const messageTypes = ["todo", "group", "personal", "system"]; let hasUnreadMessages = false; for (const messageType of messageTypes) { try { let pageIndex = 1; let unreadMessageIds = []; while (true) { const apiUrl = `https://${hostname}/api/jx-iresource/message/im/${messageType}?page_size=${pageSize}&page_index=${pageIndex}&msg_status=0`; const response = await fetch(apiUrl, { headers: { "Authorization": `Bearer ${token}` } }); if (!response.ok) { throw new Error(`获取未读${messageType}消息失败: ${response.status} ${response.statusText}`); } const data = await response.json(); const messages = data.data.list; if (messages.length === 0 || pageIndex * pageSize >= data.data.total) { break; } unreadMessageIds = unreadMessageIds.concat(messages.map(message => message.id)); pageIndex++; } if (unreadMessageIds.length > 0) { hasUnreadMessages = true; const updateResponse = await fetch(`https://${hostname}/api/jx-iresource/message/im/updateStatus`, { method: "PUT", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token}` }, body: JSON.stringify({ message_ids: unreadMessageIds, status: 1 }) }); if (!updateResponse.ok) { throw new Error(`标记${messageType}消息失败: ${updateResponse.status} ${updateResponse.statusText}`); } console.log(`所有${messageType}消息已标记为已读`); } else { console.log(`没有未读${messageType}消息`); } } catch (error) { console.error(`Error processing ${messageType} messages:`, error); throw error; } } // 调用API更新未读消息计数 try { const updateCountResponse = await fetch(`https://${hostname}/api/jx-iresource/message/im/un_read_count`, { headers: { "Authorization": `Bearer ${token}` } }); if (!updateCountResponse.ok) { throw new Error(`更新未读消息计数失败: ${updateCountResponse.status} ${updateCountResponse.statusText}`); } const countData = await updateCountResponse.json(); console.log("未读消息计数已更新:", countData); } catch (error) { console.error("更新未读消息计数时发生错误:", error); } return { hasUnreadMessages }; } // 创建"清空所有消息"按钮 const clearMessagesButton = document.createElement('button'); clearMessagesButton.id = 'clearMessagesButton'; clearMessagesButton.textContent = '清空所有消息'; clearMessagesButton.title = '清空所有消息并刷新页面'; // 添加样式 clearMessagesButton.style.cssText = ` background-color: #e74c3c; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); `; // 添加hover效果 clearMessagesButton.onmouseover = function () { this.style.backgroundColor = '#c0392b'; this.style.transform = 'translateY(-2px)'; this.style.boxShadow = '0px 6px 8px rgba(0, 0, 0, 0.15)'; }; clearMessagesButton.onmouseout = function () { this.style.backgroundColor = '#e74c3c'; this.style.transform = 'translateY(0)'; this.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.1)'; }; // 绑定点击事件处理函数 clearMessagesButton.onclick = function () { showNotification("确定要清空所有消息吗？该操作无法撤销。", 'confirm', async () => { try { this.disabled = true; this.textContent = '正在清空...'; const result = await clearAllMessages(); if (result.hasMessagesToClear) { showNotification('所有消息已清空，页面将在3秒后刷新', 'info'); setTimeout(() => { location.reload(); }, 3000); } else { showNotification('没有消息可清空', 'info'); } } catch (error) { console.error('Error clearing messages:', error); showNotification('清空消息时出错，请重试', 'error'); } finally { this.disabled = false; this.textContent = '清空所有消息'; } }, () => { showNotification('清空操作已取消', 'info'); } ); }; async function clearAllMessages() { const token = getCookie(); const hostname = window.location.hostname; const pageSize = 20; const messageTypes = ["todo", "group", "personal", "system"]; let hasMessagesToClear = false; for (const messageType of messageTypes) { try { let pageIndex = 1; let messageIdsToClear = []; while (true) { const apiUrl = `https://${hostname}/api/jx-iresource/message/im/${messageType}?page_size=${pageSize}&page_index=${pageIndex}`; const response = await fetch(apiUrl, { headers: { "Authorization": `Bearer ${token}` } }); if (!response.ok) { throw new Error(`获取${messageType}消息失败: ${response.status} ${response.statusText}`); } const data = await response.json(); const messages = data.data.list; if (messages.length === 0 || pageIndex * pageSize >= data.data.total) { break; } messageIdsToClear = messageIdsToClear.concat(messages.map(message => message.id)); pageIndex++; } if (messageIdsToClear.length > 0) { hasMessagesToClear = true; const clearResponse = await fetch(`https://${hostname}/api/jx-iresource/message/im/selected/empty`, { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token}` }, body: JSON.stringify({ message_ids: messageIdsToClear }) }); if (!clearResponse.ok) { const errorText = await clearResponse.text(); throw new Error(`清空${messageType}消息失败: ${errorText}`); } console.log(`所有${messageType}消息已清空`); } else { console.log(`没有${messageType}消息可清空`); } } catch (error) { console.error(`Error processing ${messageType} messages:`, error); throw error; } } // 调用API更新未读消息计数 try { const updateCountResponse = await fetch(`https://${hostname}/api/jx-iresource/message/im/un_read_count`, { headers: { "Authorization": `Bearer ${token}` } }); if (!updateCountResponse.ok) { throw new Error(`更新未读消息计数失败: ${updateCountResponse.status} ${updateCountResponse.statusText}`); } const countData = await updateCountResponse.json(); console.log("未读消息计数已更新:", countData); } catch (error) { console.error("更新未读消息计数时发生错误:", error); } return { hasMessagesToClear }; } // 将按钮添加到第一个容器 messageButtonContainer.appendChild(markReadButton); messageButtonContainer.appendChild(clearMessagesButton); // 创建第二个按钮容器 const downloadButtonContainer = document.createElement('div'); downloadButtonContainer.style.display = 'flex'; downloadButtonContainer.style.justifyContent = 'space-between'; downloadButtonContainer.style.marginTop = '10px'; // 创建"查看下载历史"按钮 const showHistoryButton = document.createElement('button'); showHistoryButton.id = 'showHistoryButton'; showHistoryButton.textContent = '查看下载历史'; showHistoryButton.title = '导出的文件不会被记录'; // 添加样式 showHistoryButton.style.cssText = ` background-color: #3498db; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); `; // 添加hover效果 showHistoryButton.onmouseover = function () { showHistoryButton.style.backgroundColor = '#2980b9'; showHistoryButton.style.transform = 'translateY(-2px)'; showHistoryButton.style.boxShadow = '0px 6px 8px rgba(0, 0, 0, 0.15)'; }; showHistoryButton.onmouseout = function () { showHistoryButton.style.backgroundColor = '#3498db'; showHistoryButton.style.transform = 'translateY(0)'; showHistoryButton.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.1)'; }; showHistoryButton.onclick = showDownloadHistory; // 将"查看下载历史"按钮添加到第二个容器 downloadButtonContainer.appendChild(showHistoryButton); // 创建第三方下载切换按钮 const thirdPartyDownloadButton = document.createElement('button'); thirdPartyDownloadButton.id = 'thirdPartyDownloadButton'; thirdPartyDownloadButton.title = '切换下载方式'; // 添加样式 thirdPartyDownloadButton.style.cssText = ` background-color: #f39c12; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); `; // 添加hover效果 thirdPartyDownloadButton.onmouseover = function () { thirdPartyDownloadButton.style.transform = 'translateY(-2px)'; thirdPartyDownloadButton.style.boxShadow = '0px 6px 8px rgba(0, 0, 0, 0.15)'; }; thirdPartyDownloadButton.onmouseout = function () { thirdPartyDownloadButton.style.transform = 'translateY(0)'; thirdPartyDownloadButton.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.1)'; }; // 从localStorage中获取当前状态 let useThirdPartyDownload = localStorage.getItem('useThirdPartyDownload') === 'true'; updateThirdPartyDownloadButtonState(); thirdPartyDownloadButton.onclick = function () { useThirdPartyDownload = !useThirdPartyDownload; localStorage.setItem('useThirdPartyDownload', useThirdPartyDownload); updateThirdPartyDownloadButtonState(); }; function updateThirdPartyDownloadButtonState() { if (useThirdPartyDownload) { thirdPartyDownloadButton.textContent = '用第三方下载'; thirdPartyDownloadButton.style.backgroundColor = '#27ae60'; } else { thirdPartyDownloadButton.textContent = '用浏览器下载'; thirdPartyDownloadButton.style.backgroundColor = '#f39c12'; } } // 将按钮添加到第二个容器 downloadButtonContainer.appendChild(thirdPartyDownloadButton); // 创建第三个按钮容器 const exportButtonContainer = document.createElement('div'); exportButtonContainer.style.cssText = ` display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px; background-color: rgba(252, 187, 52, 0.1); border-radius: 8px; `; // 创建文本容器 const TextContainer = document.createElement('div'); TextContainer.id = 'zipTextContainer'; TextContainer.style.cssText = ` margin-top: 15px; padding: 15px 20px; background-color: #fff; border: 2px solid #fcbb34; border-radius: 12px; font-size: 14px; font-weight: bold; color: #333; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; position: relative; overflow: hidden; `; // 创建自定义下拉框 function createCustomDropdown(container, options) { const dropdownContainer = document.createElement('div'); dropdownContainer.className = 'custom-dropdown'; dropdownContainer.style.cssText = ` position: relative; width: 250px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; `; const selectedOption = document.createElement('div'); selectedOption.className = 'selected-option'; selectedOption.textContent = options[0].text; selectedOption.style.cssText = ` padding: 12px 40px 12px 15px; font-size: 16px; font-weight: bold; border: 2px solid #fcbb34; border-radius: 8px; background-color: #fff; color: #333; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(252, 187, 52, 0.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; line-height: 1.4; `; const arrow = document.createElement('div'); arrow.className = 'dropdown-arrow'; arrow.style.cssText = ` position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fcbb34; transition: all 0.3s ease; cursor: pointer; `; const optionsList = document.createElement('ul'); optionsList.className = 'options-list'; optionsList.style.cssText = ` position: fixed; background-color: #fff; border: 2px solid #e67e22; border-top: none; border-radius: 0 0 8px 8px; list-style-type: none; margin: 0; padding: 0; max-height: 250px; overflow-y: auto; display: none; z-index: 10001; box-shadow: 0 4px 10px rgba(230, 126, 34, 0.2); `; options.forEach(option => { const li = document.createElement('li'); li.textContent = option.text; li.dataset.value = option.value; li.style.cssText = ` padding: 12px 15px; cursor: pointer; transition: all 0.3s ease; font-size: 15px; font-weight: bold; color: #555; border-bottom: 1px solid #f0f0f0; letter-spacing: 0.2px; line-height: 1.3; `; li.onmouseover = () => { li.style.backgroundColor = '#fff5e6'; li.style.color = '#e67e22'; }; li.onmouseout = () => { li.style.backgroundColor = '#fff'; li.style.color = '#555'; }; li.onclick = (event) => { event.stopPropagation(); selectedOption.textContent = option.text; optionsList.style.display = 'none'; arrow.style.transform = 'translateY(-50%) rotate(0deg)'; // 恢复显示框的原始状态 selectedOption.style.borderRadius = '8px'; selectedOption.style.borderBottom = '2px solid #fcbb34'; selectedOption.style.borderColor = '#fcbb34'; selectedOption.style.color = '#333'; }; optionsList.appendChild(li); }); function positionOptionsList() { const rect = selectedOption.getBoundingClientRect(); optionsList.style.width = `${rect.width}px`; optionsList.style.left = `${rect.left}px`; const spaceBelow = window.innerHeight - rect.bottom; if (spaceBelow < 200 && rect.top > spaceBelow) { optionsList.style.top = 'auto'; optionsList.style.bottom = `${window.innerHeight - rect.top + 2}px`; optionsList.style.borderTop = '2px solid #e67e22'; optionsList.style.borderBottom = 'none'; optionsList.style.borderRadius = '8px 8px 0 0'; selectedOption.style.borderTopLeftRadius = '0'; selectedOption.style.borderTopRightRadius = '0'; selectedOption.style.borderTop = 'none'; } else { optionsList.style.top = `${rect.bottom - 2}px`; optionsList.style.bottom = 'auto'; optionsList.style.borderTop = 'none'; optionsList.style.borderBottom = '2px solid #e67e22'; optionsList.style.borderRadius = '0 0 8px 8px'; } } function toggleDropdown(event) { event.stopPropagation(); const isOpen = optionsList.style.display === 'block'; if (!isOpen) { positionOptionsList(); selectedOption.style.borderBottomLeftRadius = '0'; selectedOption.style.borderBottomRightRadius = '0'; selectedOption.style.borderBottom = 'none'; selectedOption.style.borderColor = '#e67e22'; selectedOption.style.color = '#e67e22'; optionsList.style.display = 'block'; optionsList.style.borderTop = 'none'; } else { selectedOption.style.borderRadius = '8px'; selectedOption.style.borderBottom = '2px solid #fcbb34'; selectedOption.style.borderColor = '#fcbb34'; selectedOption.style.color = '#333'; optionsList.style.display = 'none'; } arrow.style.transform = isOpen ? 'translateY(-50%) rotate(0deg)' : 'translateY(-50%) rotate(180deg)'; } selectedOption.onclick = toggleDropdown; arrow.onclick = (event) => { event.stopPropagation(); toggleDropdown(event); }; document.addEventListener('click', () => { optionsList.style.display = 'none'; arrow.style.transform = 'translateY(-50%) rotate(0deg)'; selectedOption.style.borderRadius = '8px'; selectedOption.style.borderBottom = '2px solid #fcbb34'; selectedOption.style.borderColor = '#fcbb34'; selectedOption.style.color = '#333'; }); window.addEventListener('resize', () => { if (optionsList.style.display === 'block') { positionOptionsList(); } }); dropdownContainer.appendChild(selectedOption); dropdownContainer.appendChild(arrow); document.body.appendChild(optionsList); container.appendChild(dropdownContainer); return { dropdownContainer, optionsList }; } // 创建下拉框容器 const selectWrapper = document.createElement('div'); selectWrapper.style.cssText = ` position: relative; margin-right: 15px; `; // 定义格式选项 const formats = [ { value: 'ef2', text: 'EF2 格式 (IDM专用)' }, { value: 'txt', text: 'TXT 格式 (通用)' }, { value: 'json', text: 'JSON 格式 (结构化数据)' }, { value: 'csv', text: 'CSV 格式 (电子表格)' }, { value: 'zip', text: 'ZIP 格式 (压缩文件)' } ]; // 创建自定义下拉框 const { dropdownContainer, optionsList } = createCustomDropdown(selectWrapper, formats); // 创建导出按钮 const exportButton = document.createElement('button'); exportButton.id = 'exportButton'; exportButton.textContent = '导出文件'; exportButton.style.cssText = ` background-color: #fcbb34; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); `; exportButton.onmouseover = function () { this.style.backgroundColor = '#e67e22'; this.style.transform = 'translateY(-2px)'; this.style.boxShadow = '0px 6px 8px rgba(0, 0, 0, 0.15)'; }; exportButton.onmouseout = function () { this.style.backgroundColor = '#fcbb34'; this.style.transform = 'translateY(0)'; this.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.1)'; }; // 导出按钮点击事件 exportButton.onclick = function () { const selectedOption = dropdownContainer.querySelector('.selected-option'); const selectedFormat = selectedOption.textContent.includes('EF2') ? 'ef2' : selectedOption.textContent.includes('JSON') ? 'json' : selectedOption.textContent.includes('CSV') ? 'csv' : selectedOption.textContent.includes('ZIP') ? 'zip' : 'txt'; if (selectedFormat === 'ef2') { exportToEf2(); } else if (selectedFormat === 'txt') { exportToTxt(); } else if (selectedFormat === 'json') { exportToJson(); } else if (selectedFormat === 'csv') { exportToCsv(); } else if (selectedFormat === 'zip') { exportToZip(); } }; exportButtonContainer.appendChild(selectWrapper); exportButtonContainer.appendChild(exportButton); addShowCourseNameText(); addTipsDisplay(); async function exportToEf2() { const checkedCheckboxes = document.querySelectorAll("#download_list input[type='checkbox']:checked:not(#selectAllCheckbox)"); // 获取选中文件的信息 const selectedFiles = Array.from(checkedCheckboxes).reduce((acc, checkbox) => { const container = checkbox.closest('div'); if (!container) return acc; const link = container.querySelector('a.download-link'); if (!link) return acc; const quoteId = link.getAttribute('data-quote-id'); const filename = link.getAttribute('data-origin-name'); if (!quoteId || !filename) return acc; acc.push({ quoteId, filename }); return acc; }, []); if (selectedFiles.length === 0) { showNotification('请选择要导出的文件', 'warning'); return; } // 显示进度提示 showNotification('正在获取下载链接...', 'info'); try { // 获取所有文件的下载链接 const filesWithUrls = await Promise.all( selectedFiles.map(async file => { const url = await window.getDownloadUrl(file.quoteId); return { ...file, url }; }) ); const referer = window.location.href; const cookieString = document.cookie; // 生成ef2内容 let ef2Content = ''; filesWithUrls.forEach(file => { ef2Content += '<\r\n'; ef2Content += `${file.url}\r\n`; ef2Content += `referer: ${referer}\r\n`; ef2Content += `cookie: ${cookieString}\r\n`; ef2Content += `User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0\r\n`; ef2Content += '>\r\n'; }); ef2Content += '\r\n'; // 下载ef2文件 const blob = new Blob([ef2Content], { type: 'text/plain' }); const downloadLink = document.createElement('a'); downloadLink.href = URL.createObjectURL(blob); downloadLink.download = `${await getCourseName()}_课件链接.ef2`; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); showNotification('导出成功!', 'info'); } catch (error) { console.error('导出ef2文件时发生错误:', error); showNotification('导出失败,请重试', 'error'); } } async function exportToTxt() { const checkedCheckboxes = document.querySelectorAll("#download_list input[type='checkbox']:checked:not(#selectAllCheckbox)"); // 获取选中文件信息 const selectedFiles = Array.from(checkedCheckboxes).reduce((acc, checkbox) => { const container = checkbox.closest('div'); if (!container) return acc; const link = container.querySelector('a.download-link'); if (!link) return acc; const quoteId = link.getAttribute('data-quote-id'); if (!quoteId) return acc; acc.push(quoteId); return acc; }, []); if (selectedFiles.length === 0) { showNotification('请选择要导出的文件', 'info'); return; } // 显示进度提示 showNotification('正在获取下载链接...', 'info'); try { // 获取所有下载链接 const urls = await Promise.all( selectedFiles.map(quoteId => window.getDownloadUrl(quoteId)) ); let txtContent = urls.join('\r\n'); console.log('TXT 内容长度:', txtContent.length); const blob = new Blob([txtContent], { type: 'text/plain;charset=utf-8;' }); const downloadLink = document.createElement('a'); downloadLink.href = URL.createObjectURL(blob); downloadLink.download = `${await getCourseName()}_课件链接.txt`; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); showNotification('导出成功!', 'info'); } catch (error) { console.error('导出txt文件时发生错误:', error); showNotification('导出失败,请重试', 'error'); } } async function exportToJson() { const checkedCheckboxes = document.querySelectorAll("#download_list input[type='checkbox']:checked:not(#selectAllCheckbox)"); const courseName = await getCourseName(); const selectedFiles = Array.from(checkedCheckboxes).reduce((acc, checkbox) => { const container = checkbox.closest('div'); if (checkbox.id === 'selectAllCheckbox') { return acc; } if (!container) { return acc; } const link = container.querySelector('a.download-link'); if (!link) { return acc; } acc.push({ quoteId: link.getAttribute('data-quote-id'), filename: link.getAttribute('data-origin-name'), course: courseName, createdAt: link.getAttribute('data-created-at'), updatedAt: link.getAttribute('data-updated-at'), resourceId: link.getAttribute('data-resource-id'), path: link.getAttribute('data-path'), parentId: link.getAttribute('data-parent-id') }); return acc; }, []); if (selectedFiles.length === 0) { showNotification('请选择要导出的文件', 'warning'); return; } showNotification('正在获取下载链接...', 'info'); try { // 获取所有文件的下载链接 const filesWithUrls = await Promise.all( selectedFiles.map(async file => { const url = await window.getDownloadUrl(file.quoteId); return { ...file, url }; }) ); const jsonContent = JSON.stringify({ exportDate: new Date().toISOString(), totalFiles: filesWithUrls.length, files: filesWithUrls }, null, 2); console.log('JSON 内容长度:', jsonContent.length); const blob = new Blob([jsonContent], { type: 'application/json;charset=utf-8;' }); const downloadLink = document.createElement('a'); downloadLink.href = URL.createObjectURL(blob); downloadLink.download = `${await getCourseName()}_课件数据.json`; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); showNotification('导出成功!', 'info'); } catch (error) { console.error('导出json文件时发生错误:', error); showNotification('导出失败,请重试', 'error'); } } async function exportToCsv() { const checkedCheckboxes = document.querySelectorAll("#download_list input[type='checkbox']:checked:not(#selectAllCheckbox)"); const headers = ['URL', '文件名', '课程', '创建时间', '更新时间', '资源ID', '路径', '父ID']; let csvContent = headers.join(',') + '\n'; const courseName = await getCourseName(); const selectedFiles = Array.from(checkedCheckboxes).reduce((acc, checkbox) => { const container = checkbox.closest('div'); if (checkbox.id === 'selectAllCheckbox') return acc; if (!container) return acc; const link = container.querySelector('a.download-link'); if (!link) return acc; acc.push({ quoteId: link.getAttribute('data-quote-id'), filename: link.getAttribute('data-origin-name'), course: courseName, createdAt: link.getAttribute('data-created-at'), updatedAt: link.getAttribute('data-updated-at'), resourceId: link.getAttribute('data-resource-id'), path: link.getAttribute('data-path'), parentId: link.getAttribute('data-parent-id') }); return acc; }, []); if (selectedFiles.length === 0) { showNotification('请选择要导出的文件', 'warning'); return; } showNotification('正在获取下载链接...', 'info'); try { // 获取所有文件的下载链接 const filesWithUrls = await Promise.all( selectedFiles.map(async file => { const url = await window.getDownloadUrl(file.quoteId); return { ...file, url }; }) ); // 生成CSV内容 csvContent = headers.join(',') + '\n'; filesWithUrls.forEach(file => { const row = [ file.url, file.filename, file.course, file.createdAt, file.updatedAt, file.resourceId, file.path, file.parentId ].map(item => `"${(item || '').replace(/"/g, '""')}"`); csvContent += row.join(',') + '\n'; }); console.log('CSV 内容长度:', csvContent.length); const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' }); const downloadLink = document.createElement('a'); downloadLink.href = URL.createObjectURL(blob); downloadLink.download = `${await getCourseName()}_课件表格.csv`; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); showNotification('导出成功!', 'info'); } catch (error) { console.error('导出CSV文件时发生错误:', error); showNotification('导出失败,请重试', 'error'); } } async function exportToZip() { const progressIndicator = createZipProgressIndicator(); if (!progressIndicator) { return; } const { updateProgress, hide } = progressIndicator; updateProgress("正在准备导出...", 0); const checkedCheckboxes = document.querySelectorAll("#download_list input[type='checkbox']:checked:not(#selectAllCheckbox)"); const selectedFiles = Array.from(checkedCheckboxes).reduce((acc, checkbox) => { const container = checkbox.closest('div'); if (!container) return acc; const link = container.querySelector('a.download-link'); if (!link) return acc; const quoteId = link.getAttribute('data-quote-id'); const filename = link.getAttribute('data-origin-name'); if (!quoteId || !filename) return acc; acc.push({ quoteId, filename }); return acc; }, []); if (selectedFiles.length === 0) { updateProgress('请选择要导出的文件', 0); setTimeout(hide, 3000); return; } const proceedWithZip = async () => { const zip = new window.JSZip(); const totalFiles = selectedFiles.length; let processedFiles = 0; updateProgress("正在获取下载链接...", 5); try { // 获取所有文件的下载链接 const filesWithUrls = await Promise.all( selectedFiles.map(async file => { const url = await window.getDownloadUrl(file.quoteId); return { ...file, url }; }) ); updateProgress("正在准备ZIP文件...", 20); const addFilePromises = filesWithUrls.map(file => { return fetch(file.url) .then(response => response.blob()) .then(blob => { zip.file(file.filename, blob); processedFiles++; const progress = 20 + (processedFiles / totalFiles) * 60; updateProgress(`正在添加文件 (${processedFiles}/${totalFiles})...`, progress); }) .catch(error => { console.error(`获取文件失败: ${file.filename}`, error); throw error; }); }); const courseName = await getCourseName(); await Promise.all(addFilePromises); updateProgress("正在生成ZIP文件...", 80); const content = await zip.generateAsync({ type: "blob" }); updateProgress("ZIP文件已生成，准备下载...", 90); const downloadLink = document.createElement('a'); downloadLink.href = URL.createObjectURL(content); downloadLink.download = `${courseName}_课件包.zip`; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); updateProgress("ZIP文件下载已开始", 100); setTimeout(hide, 3000); } catch (error) { updateProgress("创建ZIP文件时发生错误，请查看控制台获取详细信息。", 0); console.error("创建ZIP文件出错:", error); setTimeout(() => { hide(); showInterceptionMessage("创建ZIP文件时发生错误，可能是网络问题或被IDM拦截"); }, 1000); } }; if (selectedFiles.length > 10) { showNotification( `已选择 ${selectedFiles.length} 个文件，压缩大量文件可能需要较长时间。是否继续？`, 'confirm', () => { proceedWithZip(); }, () => { hide(); showNotification('压缩操作已取消', 'info'); } ); } else { proceedWithZip(); } } function showInterceptionMessage(message) { const messageHTML = ` <div id="interceptionMessage" style=" position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff9e6; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(255, 165, 0, 0.2); max-width: 550px; width: 90%; z-index: 9999; animation: fadeIn 0.5s ease-out; "> <div style=" display: flex; align-items: center; margin-bottom: 20px; "> <span style=" font-size: 28px; margin-right: 15px; ">⚠️</span> <h3 style=" color: #ffa500; margin: 0; font-size: 24px; font-weight: bold; ">下载遇到问题</h3> </div> <p style=" color: #5d4037; font-size: 16px; line-height: 1.6; margin-bottom: 20px; ">${message}</p> <p style=" color: #33691e; font-size: 18px; font-weight: bold; margin-bottom: 15px; ">可能的解决方法：</p> <ol style=" color: #5d4037; font-size: 14px; line-height: 1.7; padding-left: 0; margin-bottom: 25px; list-style-type: none; counter-reset: item; "> <li style=" margin-bottom: 15px; position: relative; padding-left: 35px; counter-increment: item; "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffa500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; left: 0; top: 0;"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> 网络问题：请检查网络连接，稍后重试。 </li> <li style=" margin-bottom: 15px; position: relative; padding-left: 35px; counter-increment: item; "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffa500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; left: 0; top: 0;"> <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect> <line x1="7" y1="2" x2="7" y2="22"></line> <line x1="17" y1="2" x2="17" y2="22"></line> <line x1="2" y1="12" x2="22" y2="12"></line> <line x1="2" y1="7" x2="7" y2="7"></line> <line x1="2" y1="17" x2="7" y2="17"></line> <line x1="17" y1="17" x2="22" y2="17"></line> <line x1="17" y1="7" x2="22" y2="7"></line> </svg> IDM拦截：如果你在使用IDM，以下是一种绕过手段： <ul style=" padding-left: 20px; margin-top: 10px; list-style-type: none; "> <li style="margin-bottom: 10px; position: relative; padding-left: 25px;"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffa500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; left: 0; top: 2px;"> <polyline points="9 18 15 12 9 6"></polyline> </svg> 在 IDM 中，转到“下载” > "选项" </li> <li style="margin-bottom: 10px; position: relative; padding-left: 25px;"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffa500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; left: 0; top: 2px;"> <polyline points="9 18 15 12 9 6"></polyline> </svg> 选择“文件类型”标签 </li> <li style="margin-bottom: 10px; position: relative; padding-left: 25px;"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffa500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; left: 0; top: 2px;"> <polyline points="9 18 15 12 9 6"></polyline> </svg> 在“下列站点不要自动开始下载”中添加 oss.ai-augmented.com（以空格分隔） </li> <li style="margin-bottom: 10px; position: relative; padding-left: 25px;"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffa500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; left: 0; top: 2px;"> <polyline points="9 18 15 12 9 6"></polyline> </svg> 点击“确定”保存设置 </li> <li style="margin-bottom: 10px; position: relative; padding-left: 25px;"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffa500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; left: 0; top: 2px;"> <polyline points="9 18 15 12 9 6"></polyline> </svg> 当然，你也可以在IDM的弹窗里选择“该站点不要自动开始下载(oss.ai-augmented.com)” </li> </ul> </li> <li style=" margin-bottom: 15px; position: relative; padding-left: 35px; counter-increment: item; "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffa500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; left: 0; top: 0;"> <polyline points="1 4 1 10 7 10"></polyline> <polyline points="23 20 23 14 17 14"></polyline> <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path> </svg> 也许我们可以试试刷新？（小声） </li> </ol> <button onclick=" const msgEl = document.getElementById('interceptionMessage'); msgEl.style.animation = 'fadeOut 0.5s ease-out'; setTimeout(() => msgEl.remove(), 500); " style=" background-color: #ffa500; color: white; padding: 12px 24px; border: none; border-radius: 25px; cursor: pointer; font-size: 16px; font-weight: bold; transition: all 0.3s; display: block; margin: 0 auto; box-shadow: 0 4px 6px rgba(255, 165, 0, 0.2); ">我知道了</button> </div> `; const messageElement = document.createElement('div'); messageElement.innerHTML = messageHTML; document.body.appendChild(messageElement); const button = messageElement.querySelector('button'); button.addEventListener('mouseover', () => { button.style.backgroundColor = '#ff8c00'; button.style.transform = 'translateY(-2px)'; }); button.addEventListener('mouseout', () => { button.style.backgroundColor = '#ffa500'; button.style.transform = 'translateY(0)'; }); } // 获取课程名称 function getCourseName() { if (courseVisitData && courseVisitData.name) { return courseVisitData.name; } else { console.warn('无法从课程访问数据中获取课程名称'); return '未知课程'; } } function addShowCourseNameText() { showCourseNameText.style.marginTop = '10px'; showCourseNameText.style.marginBottom = '10px'; showCourseNameText.style.fontSize = '16px'; showCourseNameText.style.backgroundColor = 'transparent'; showCourseNameText.style.width = '100%'; showCourseNameText.style.textAlign = 'center'; showCourseNameText.style.fontWeight = '600'; showCourseNameText.style.letterSpacing = '0.5px'; showCourseNameText.style.padding = '6px'; showCourseNameText.style.boxSizing = 'border-box'; showCourseNameText.className = 'glowing-text animated-text'; // 初始设置为加载中状态 showCourseNameText.textContent = '正在获取课程信息...'; // 添加 CSS 动画和样式 const style = document.createElement('style'); style.textContent = ` @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0px); } } @keyframes colorChange { 0% { color: #ff6600; text-shadow: 0 0 5px rgba(255, 102, 0, 0.7); } 50% { color: #ff9900; text-shadow: 0 0 8px rgba(255, 153, 0, 0.8); } 100% { color: #ff6600; text-shadow: 0 0 5px rgba(255, 102, 0, 0.7); } } @keyframes borderBlink { 0% { box-shadow: 0 0 0 1px rgba(255, 165, 0, 0.3); } 50% { box-shadow: 0 0 0 1px rgba(255, 165, 0, 0.8); } 100% { box-shadow: 0 0 0 1px rgba(255, 165, 0, 0.3); } } .animated-text { animation: float 3s ease-in-out infinite, colorChange 5s linear infinite, borderBlink 2s linear infinite; border-radius: 5px; } `; document.head.appendChild(style); let checkInterval = setInterval(async () => { try { const courseName = await getCourseName(); if (courseName && courseName !== '未知课程' && courseName !== showCourseNameText.getAttribute('data-course')) { showCourseNameText.setAttribute('data-course', courseName); typeWriter(`当前课程：${courseName}`, showCourseNameText); clearInterval(checkInterval); setupCourseNameObserver(); } } catch (error) { console.debug('尝试获取课程名称:', error); } }, 1000); function setupCourseNameObserver() { const observer = new MutationObserver(async () => { try { const courseName = await getCourseName(); if (courseName && courseName !== showCourseNameText.getAttribute('data-course')) { showCourseNameText.setAttribute('data-course', courseName); typeWriter(`当前课程：${courseName}`, showCourseNameText); } } catch (error) { console.debug('课程名称观察器错误:', error); } }); observer.observe(document.body, { childList: true, subtree: true, attributes: false }); } } // 打字机效果函数 function typeWriter(text, element, index = 0) { if (index < text.length) { element.textContent = text.substring(0, index + 1); setTimeout(() => typeWriter(text, element, index + 1), 50); } } function addTipsDisplay() { tipsDisplay.id = 'tipsDisplay'; tipsDisplay.id = 'tipsDisplay'; tipsDisplay.style.padding = '15px'; tipsDisplay.style.margin = '15px auto'; tipsDisplay.style.maxWidth = '800px'; tipsDisplay.style.width = '90%'; tipsDisplay.style.backgroundColor = 'rgba(252, 187, 52, 0.1)'; tipsDisplay.style.border = '2px solid #fcbb34'; tipsDisplay.style.color = '#e67e22'; tipsDisplay.style.borderRadius = '8px'; tipsDisplay.style.fontSize = '16px'; tipsDisplay.style.fontWeight = 'bold'; tipsDisplay.style.textAlign = 'center'; tipsDisplay.style.position = 'relative'; tipsDisplay.style.overflow = 'hidden'; tipsDisplay.style.cursor = 'pointer'; tipsDisplay.style.boxShadow = '0 4px 6px rgba(252, 187, 52, 0.2)'; tipsDisplay.style.maxHeight = '4em'; tipsDisplay.style.transition = 'all 0.3s ease, max-height 0.5s ease-out'; tipsDisplay.style.lineHeight = '1.6'; tipsDisplay.title = '点击以查看/收起所有提示。'; tipsDisplay.style.opacity = '1'; tipsDisplay.style.transform = 'translateY(0)'; // 添加脉动动画 tipsDisplay.style.animation = 'pulsate 2s infinite'; // 添加闪光效果 tipsDisplay.style.backgroundImage = 'linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%)'; tipsDisplay.style.backgroundSize = '200% 100%'; tipsDisplay.style.animation = 'pulsate 2s infinite, shine 3s infinite'; // 添加新的样式 const style = document.createElement('style'); style.textContent = ` #tipsDisplay:hover { background-color: rgba(252, 187, 52, 0.2); transform: translateY(-2px); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } #tipsDisplay { animation: fadeInUp 0.5s ease-out; } @keyframes pulsate { 0% { box-shadow: 0 0 0 0 rgba(252, 187, 52, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(252, 187, 52, 0); } 100% { box-shadow: 0 0 0 0 rgba(252, 187, 52, 0); } } @keyframes shine { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } `; document.head.appendChild(style); // 提示信息列表 const tipsList = [ '教程：https://xiaoya.zygame1314.site。', '右上角下载栏支持当前页面的单个文件下载。', '右下角下载栏支持批量下载多个文件。', '脚本需要获取到课程资源后才能正常工作。', '现版本已不需要通过定位到课程首页来获取资源。', '现版本已不依赖于树状图，多节点课程可以正常使用了。', '下载进度条位于左下角可折叠列表中。', '搜索栏支持按文件名、后缀名等多种条件进行筛选。', '图片和音频文件也可通过右键菜单直接选择“另存为”下载。', '控制面板提供下载方式切换，即浏览器下载和第三方下载。', 'IDM会自动接管所有下载请求，即便选择“用浏览器下载”。', '文件下载历史记录默认保留三天。', '导出文件前需在右下角列表中勾选要导出的项目。', '点击已读或清空按钮后，页面会自动刷新。', '仅在课程首页才能获取到教师信息和课程附件。', '搜索功能的准确性取决于用户填写的信息完整度。', '启用树状图视图时，部分功能组件会被暂时禁用。', '仅支持Office三件套和PDF的内容详情获取。', '只要是小雅能预览的，理论上都能预览（反之亦然）。', '如有功能建议或问题反馈，请在教程页面的评论区留言。', ]; let isPaused = false; let currentTipIndex = 0; let intervalId; let isShowingAllTips = false; function changeTip() { if (!isShowingAllTips && !isPaused) { currentTipIndex = (currentTipIndex + 1) % tipsList.length; tipsDisplay.style.transition = 'opacity 0.3s, transform 0.3s'; tipsDisplay.style.opacity = '0'; tipsDisplay.style.transform = 'translateX(-100%)'; } } function updateTipDisplay() { tipsDisplay.innerHTML = '<i class="fas fa-lightbulb" style="margin-right: 10px;"></i>' + tipsList[currentTipIndex]; tipsDisplay.style.opacity = '1'; tipsDisplay.style.transform = 'translateX(0)'; } tipsDisplay.addEventListener('transitionend', (event) => { if (event.propertyName === 'opacity' && tipsDisplay.style.opacity === '0' && !isShowingAllTips) { updateTipDisplay(); } }); // 创建元素来显示所有提示 const allTipsContainer = document.createElement('div'); allTipsContainer.id = 'allTipsContainer'; allTipsContainer.style.display = 'none'; allTipsContainer.style.position = 'fixed'; allTipsContainer.style.top = '50%'; allTipsContainer.style.left = '50%'; allTipsContainer.style.transform = 'translate(-50%, -50%)'; allTipsContainer.style.backgroundColor = '#fff'; allTipsContainer.style.padding = '30px'; allTipsContainer.style.borderRadius = '15px'; allTipsContainer.style.boxShadow = '0 10px 30px rgba(0,0,0,0.2)'; allTipsContainer.style.zIndex = '10002'; allTipsContainer.style.maxWidth = '600px'; allTipsContainer.style.width = '90%'; allTipsContainer.style.maxHeight = '80vh'; allTipsContainer.style.overflowY = 'auto'; allTipsContainer.style.color = '#333'; allTipsContainer.style.transition = 'none'; allTipsContainer.style.transformOrigin = 'center center'; // 获取提示框的位置 function getTipsDisplayPosition() { const rect = tipsDisplay.getBoundingClientRect(); return { left: rect.left + rect.width / 2, top: rect.top + rect.height / 2 }; } // 点击事件处理 tipsDisplay.addEventListener('click', () => { isShowingAllTips = !isShowingAllTips; clearInterval(intervalId); if (isShowingAllTips) { const position = getTipsDisplayPosition(); const startX = position.left - window.innerWidth / 2; const startY = position.top - window.innerHeight / 2; allTipsContainer.style.setProperty('--start-x', `${startX}px`); allTipsContainer.style.setProperty('--start-y', `${startY}px`); allTipsContainer.style.left = '50%'; allTipsContainer.style.top = '50%'; allTipsContainer.style.transform = `translate(${startX}px, ${startY}px) scale(0.7)`; allTipsContainer.style.opacity = '0'; allTipsContainer.innerHTML = ` <h2>所有提示</h2> ${tipsList.map((tip, index) => ` <div class="tip-item" style="animation: fadeInUp 0.5s ease-out ${index * 0.1}s both;"> <span class="tip-number">${index + 1}</span> <span class="tip-text">${tip}</span> </div> `).join('')} <button id="closeTipsBtn">关闭</button> `; allTipsContainer.style.display = 'block'; // 重置并启动打开动画 allTipsContainer.style.animation = 'none'; void allTipsContainer.offsetWidth; allTipsContainer.style.animation = 'popOutToCenter 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards'; // 添加关闭按钮事件 document.getElementById('closeTipsBtn').addEventListener('click', closeTips); } else { closeTips(); } }); tipsDisplay.addEventListener('mouseover', () => { pauseTips(); tipsDisplay.style.animation = 'pulsate 1s infinite, shine 2s infinite'; tipsDisplay.style.transform = 'scale(1.02)'; }); tipsDisplay.addEventListener('mouseout', () => { resumeTips(); tipsDisplay.style.animation = 'pulsate 2s infinite, shine 3s infinite'; tipsDisplay.style.transform = 'scale(1)'; }); function closeTips() { allTipsContainer.querySelectorAll('*').forEach(el => { el.style.animation = 'none'; void el.offsetWidth; // 强制重绘 }); allTipsContainer.style.animation = 'none'; void allTipsContainer.offsetWidth; const position = getTipsDisplayPosition(); const endX = position.left - window.innerWidth / 2; const endY = position.top - window.innerHeight / 2; allTipsContainer.style.setProperty('--end-x', `${endX}px`); allTipsContainer.style.setProperty('--end-y', `${endY}px`); // 设置关闭动画 allTipsContainer.style.animation = 'popInToOrigin 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards'; allTipsContainer.addEventListener('animationend', () => { allTipsContainer.style.display = 'none'; isShowingAllTips = false; resumeTips(); }, { once: true }); } function pauseTips() { isPaused = true; clearInterval(intervalId); // 停止移动动画 tipsDisplay.style.transition = 'none'; tipsDisplay.style.transform = 'translateX(0)'; } function resumeTips() { if (!isShowingAllTips) { isPaused = false; updateTipDisplay(); startTipInterval(); } } function startTipInterval() { clearInterval(intervalId); intervalId = setInterval(changeTip, 5000); } document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible' && !isShowingAllTips) { resumeTips(); } else { pauseTips(); } }); updateTipDisplay(); startTipInterval(); document.body.appendChild(allTipsContainer); return { pauseTips, resumeTips }; } function updateVisibility() { const downloadInterface = document.getElementById('downloadInterface'); const progressBarInterface = document.getElementById('downloadsWrapperContainer'); const downloadIconContainer = document.getElementById('download_icon_container'); const downloadListContainer = document.getElementById('download_list'); const videoAssistant = document.getElementById('tm-video-assistant'); if (downloadInterface) { downloadInterface.style.display = downloadInterfaceCheckbox.checked ? 'block' : 'none'; } if (videoAssistant) { videoAssistant.style.display = videoCheckbox.checked ? 'block' : 'none'; } if (progressBarInterface) { const isVisible = progressBarCheckbox.checked; progressBarInterface.style.display = isVisible ? 'block' : 'none'; isProgressBarVisible = isVisible; } } // 专门更新右下角下载列表可见性的函数 function updateDownloadListVisibility() { const downloadIconContainer = document.getElementById('download_icon_container'); const downloadListContainer = document.getElementById('download_list'); const isVisible = downloadButtonCheckbox.checked; if (downloadIconContainer && downloadListContainer) { downloadIconContainer.style.display = isVisible ? 'block' : 'none'; downloadListContainer.style.display = isVisible ? 'block' : 'none'; downloadListContainer.style.opacity = isVisible ? '1' : '0'; } } // 将控件移动到对应的分类容器中 messageContainer.appendChild(messageButtonContainer); downloadContainer.appendChild(downloadButtonContainer); exportContainer.appendChild(exportButtonContainer); exportContainer.appendChild(TextContainer); displayContainer.appendChild(checkboxesContainer); updateContainer.appendChild(Beautifulupdater); // 将分类容器添加到控制面板中 controlPanel.appendChild(messageContainer); controlPanel.appendChild(downloadContainer); controlPanel.appendChild(exportContainer); controlPanel.appendChild(displayContainer); controlPanel.appendChild(updateContainer); // 默认隐藏除了第一个分类以外的容器 downloadContainer.style.display = 'none'; exportContainer.style.display = 'none'; displayContainer.style.display = 'none'; updateContainer.style.display = 'none'; // 将控制面板和切换按钮添加到页面中 document.body.appendChild(controlPanel); document.body.appendChild(toggleButton); updateVisibility(); updateDownloadListVisibility(); } // 添加全局变量存储上一次的group id let lastGroupId = null; function watchGroupIdChange() { // 初始化 lastGroupId 为当前的 groupId lastGroupId = getGroupIdFromUrl(); setInterval(() => { const currentGroupId = getGroupIdFromUrl(); if (currentGroupId && currentGroupId !== lastGroupId) { lastGroupId = currentGroupId; parseContent(); // 更新教师信息的逻辑 if (isEasterEggActivated) { getTeacherInfo(currentGroupId).then((teacherInfo) => { if (teacherInfo) { updateTeacherInfo(teacherInfo); } else { updateTeacherInfo([]); // 清空之前的教师信息 console.error("无法获取教师信息"); } }); } } }, 1000); } // 延迟 1 秒执行所有代码 if (window.top === window.self) { setTimeout(() => { add_download_button(); // 添加下载按钮 loadDownloadHistory(); // 加载下载历史 initVideoAssistant(); // 初始化右侧下载组件 initCourseCapture(); // 初始化右上角下载组件 addDownloadsContainer(); // 添加进度条容器 watchGroupIdChange(); // 初始化 URL 监听 if (getGroupIdFromUrl()) { parseContent(); // 首次解析 } initializeControlPanel(); // 初始化控制面板 createZipProgressIndicator(); // 初始化ZIP导出 const observer = new MutationObserver(function (mutationsList) { for (let mutation of mutationsList) { if (mutation.type === 'childList' && mutation.target.id === 'download_list') { window.updateUI(); break; } } }); observer.observe(document.body, { childList: true, subtree: true }); }, 1000); } // 全局变量 let previewLink; let isDownloading = false; let currentTitle = ''; // 主函数 function initCourseCapture() { const list = createDownloadInterface(); createInitialPreviewLink(); observeTitleChanges(); handleXhrResponse(); } // 监听页面标题变化 function observeTitleChanges() { const titleElement = document.querySelector('title'); if (!titleElement) return; const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'childList' && mutation.target === titleElement) { const newTitle = document.title.split('|')[0].trim(); if (newTitle !== currentTitle) { currentTitle = newTitle; handleXhrResponse(); } } }); }); observer.observe(titleElement, { childList: true }); } // 创建下载界面 function createDownloadInterface() { const list = document.createElement("div"); initializeListStyles(list); addAnimationStyles(); return list; } // 初始化列表样式 function initializeListStyles(element) { element.id = "downloadInterface"; Object.assign(element.style, { position: "fixed", top: "100px", right: "0", width: "50px", height: "50px", borderRadius: "50%", overflow: "hidden", transition: "all 0.3s ease-in-out", zIndex: "9997", background: "linear-gradient(270deg, #ffc700, #ff8c00, #ff6500)", backgroundSize: "400% 400%", boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2)", cursor: "pointer" }); element.classList.add("dynamic-gradient"); element.innerHTML = ` <h3 style=" margin: 0; padding: 8px 12px; font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; font-weight: bold; color: #FFFFFF; border-radius: 8px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: all 0.3s ease; text-align: center; letter-spacing: 1px; "> 当前页面课件 </h3> `; element.querySelector('h3').style.opacity = 0; addLottieAnimation(element); addInteractivity(element); document.body.appendChild(element); } // 添加Lottie动画 function addLottieAnimation(element) { const lottieContainer = document.createElement('div'); Object.assign(lottieContainer.style, { position: "absolute", transition: "all 0.3s ease-in-out", width: "200%", height: "200%", left: "-60%", top: "-45%", overflow: "hidden", zIndex: "9998", pointerEvents: "none" }); const lottiePlayer = document.createElement('dotlottie-player'); lottiePlayer.setAttribute('src', "https://lottie.host/995b71c8-b7aa-45b0-bb77-94b850da5d5d/dyezqbvtia.json"); lottiePlayer.setAttribute('background', "transparent"); lottiePlayer.setAttribute('speed', "1"); lottiePlayer.setAttribute('style', "width: 125%; height: 100%; position: absolute; left: -12.5%;"); lottiePlayer.setAttribute('loop', ""); lottiePlayer.setAttribute('autoplay', ""); lottieContainer.appendChild(lottiePlayer); element.appendChild(lottieContainer); } // 添加交互性 function addInteractivity(element) { element.addEventListener("mouseover", () => { if (element.style.width === "50px") { element.style.transform = "scale(1.1)"; } }); element.addEventListener("mouseout", () => { if (element.style.width === "50px") { element.style.transform = "scale(1)"; } }); element.addEventListener("click", toggleInterfaceSize); } // 切换界面大小 function toggleInterfaceSize() { const element = document.getElementById("downloadInterface"); const lottieContainer = element.querySelector('div'); const h3 = element.querySelector('h3'); if (element.style.width === "50px") { Object.assign(element.style, { width: "400px", height: "100px", padding: "8px", borderRadius: "10px", overflow: "hidden", transform: "scale(1)" }); Object.assign(lottieContainer.style, { width: "70%", height: "100%", left: `${element.offsetWidth - lottieContainer.offsetWidth + 280}px`, top: "-20px" }); h3.style.opacity = 1; } else { Object.assign(element.style, { width: "50px", height: "50px", padding: "0", borderRadius: "50%", overflow: "hidden", transform: "scale(1)", }); Object.assign(lottieContainer.style, { width: "200%", height: "200%", left: "-60%", top: "-45%" }); h3.style.opacity = 0; } } // 添加动画样式 function addAnimationStyles() { const style = document.createElement('style'); style.innerHTML = ` @keyframes slideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes gradientBgAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .dynamic-gradient { animation: gradientBgAnimation 15s ease infinite; } #downloadInterface a { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #downloadInterface a span { overflow: hidden; text-overflow: ellipsis; } `; document.head.appendChild(style); } // 处理XHR响应 function handleXhrResponse() { if (isDownloading) return; isDownloading = true; const content = document.title.split('|')[0].trim(); const urlParts = window.location.href.split('/'); const id = urlParts[urlParts.length - 1]; let checkCount = 0; const maxChecks = 10; const checkInterval = 500; function checkResources() { if (course_resources && Object.keys(course_resources).length > 0) { processResources(); } else if (checkCount < maxChecks) { checkCount++; setTimeout(checkResources, checkInterval); } else { createInitialPreviewLink(); isDownloading = false; } } function isAssignmentResource() { const taskButton = document.querySelector( "#xy_app_content > div.ta-frame > div.ta_panel.ta_panel_group.ta_group > section > section > main > div > div.group-resource-header.flex_panel.hor > div.flex_align_center > div.entry_task_btn" ); return taskButton !== null; } function processResources() { let quoteId = null; let resourceMimetype = null; let resourceName = null; // 检查是否为作业资源 if (isAssignmentResource()) { createInitialPreviewLink(); showNotification('当前资源为作业，不支持下载。', 'info'); isDownloading = false; return; } for (const resourceId in course_resources) { if (course_resources[resourceId].id === id) { quoteId = course_resources[resourceId].quote_id; resourceMimetype = course_resources[resourceId].mimetype; resourceName = course_resources[resourceId].name; break; } } if (quoteId) { // 检查是否为视频文件 if (isVideoFile(resourceMimetype, resourceName)) { createInitialPreviewLink(); showNotification('当前资源为视频，请通过视频组件下载。', 'info'); isDownloading = false; return; } const url = 'https://' + hostname + '/api/jx-oresource/cloud/file_url/' + quoteId; const token = getCookie(); fetch(url, { headers: { 'Authorization': `Bearer ${token}` } }) .then(response => response.json()) .then(data => { let downloadUrl = data.data.url; if (data.data.is_encryption) { downloadUrl = decryptFileUrl(downloadUrl); } triggerNewLinkAnimation(); updatePreviewLink(downloadUrl, content); }) .catch(error => { console.error('获取文件下载地址失败:', error); createInitialPreviewLink(); showNotification('获取文件下载地址失败X﹏X（或者根本不是个文件？）', 'error'); }); } else { createInitialPreviewLink(); } isDownloading = false; } checkResources(); } // 显示通知的函数 function showNotification(message, type = 'info', onConfirm = null, onCancel = null) { if (!document.getElementById('custom-notification-styles')) { const style = document.createElement('style'); style.id = 'custom-notification-styles'; style.textContent = ` .custom-notification { position: fixed; top: 20px; right: 20px; padding: 12px 16px; border-radius: 16px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); background-color: #fff; color: #333; z-index: 10000; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0; display: flex; flex-direction: column; font-family: 'Baloo 2', cursive, sans-serif; overflow: hidden; width: auto; max-width: 600px; transform: translateX(100%); border: 2px solid #333; } .custom-notification.show { transform: translateX(0); opacity: 1; } .notification-content { display: flex; align-items: center; position: relative; } .notification-icon { font-size: 24px; margin-right: 12px; flex-shrink: 0; margin-top: 2px; } .notification-message { flex: 1; font-size: 15px; font-weight: bold; line-height: 1.5; word-break: break-word; padding-right: 30px; } .notification-close { position: absolute; top: 8px; right: 8px; font-size: 18px; cursor: pointer; color: #888; line-height: 1; } .notification-close:hover { color: #333; } .notification-buttons { margin-top: 12px; display: flex; justify-content: flex-end; } .notification-button { padding: 8px 16px; margin-left: 8px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: bold; transition: background-color 0.2s; } .notification-button.primary { background-color: #FFB400; color: #fff; } .notification-button.primary:hover { background-color: #e0a000; } .notification-button.secondary { background-color: #6c757d; color: #fff; } .notification-button.secondary:hover { background-color: #5a6268; } .notification-info { border-color: #00BFFF; background-color: #E0F7FF; } .notification-warning { border-color: #FFA500; background-color: #FFF5E6; } .notification-error { border-color: #FF6347; background-color: #FFEDED; } .notification-confirm { border-color: #32CD32; background-color: #E6FFE6; } .notification-countdown { position: absolute; bottom: 0; left: 0; height: 4px; background-color: rgba(0, 0, 0, 0.1); transition: width linear; } .notification-info .notification-countdown { background-color: #00BFFF; } .notification-warning .notification-countdown { background-color: #FFA500; } .notification-error .notification-countdown { background-color: #FF6347; } .notification-confirm .notification-countdown { background-color: #32CD32; } `; document.head.appendChild(style); } const notifications = document.querySelectorAll('.custom-notification'); const notificationHeight = 100; const spacing = 10; const offset = notifications.length * (notificationHeight + spacing); const notification = document.createElement('div'); notification.classList.add('custom-notification', `notification-${type}`); notification.style.top = `${20 + offset}px`; const content = document.createElement('div'); content.classList.add('notification-content'); const icon = document.createElement('div'); icon.classList.add('notification-icon'); icon.innerHTML = getIcon(type); const messageElement = document.createElement('div'); messageElement.classList.add('notification-message'); messageElement.textContent = message; content.appendChild(icon); content.appendChild(messageElement); notification.appendChild(content); const closeBtn = document.createElement('span'); closeBtn.classList.add('notification-close'); closeBtn.innerHTML = '&times;'; closeBtn.onclick = closeNotification; notification.appendChild(closeBtn); const notificationDuration = 4000; if (type !== 'confirm') { const countdownBar = document.createElement('div'); countdownBar.classList.add('notification-countdown'); countdownBar.style.width = '100%'; countdownBar.style.transitionDuration = `${notificationDuration}ms`; notification.appendChild(countdownBar); setTimeout(() => { countdownBar.style.width = '0%'; }, 10); } if (type === 'confirm') { const buttonContainer = document.createElement('div'); buttonContainer.classList.add('notification-buttons'); const createButton = (text, isPrimary, onClick) => { const button = document.createElement('button'); button.textContent = text; button.classList.add('notification-button'); if (isPrimary) { button.classList.add('primary'); } else { button.classList.add('secondary'); } button.onclick = onClick; return button; }; const cancelButton = createButton('取消', false, () => { if (onCancel) onCancel(); closeNotification(); }); const confirmButton = createButton('确认', true, () => { if (onConfirm) onConfirm(); closeNotification(); }); buttonContainer.appendChild(cancelButton); buttonContainer.appendChild(confirmButton); notification.appendChild(buttonContainer); } document.body.appendChild(notification); setTimeout(() => { notification.classList.add('show'); }, 10); function closeNotification() { notification.classList.remove('show'); setTimeout(() => { if (notification.parentNode) { notification.parentNode.removeChild(notification); const remainingNotifications = document.querySelectorAll('.custom-notification'); remainingNotifications.forEach((notif, index) => { notif.style.top = `${20 + index * (notificationHeight + spacing)}px`; }); } }, 300); } if (type !== 'confirm') { setTimeout(closeNotification, notificationDuration); } function getIcon(type) { switch (type) { case 'info': return `<svg t="1726300424717" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="9517" width="24" height="24"> <path d="M469.333333 217.6V170.666667h85.333334v46.933333c136.533333 21.333333 243.2 132.266667 256 273.066667V768H213.333333v-277.333333c12.8-140.8 119.466667-256 256-273.066667zM298.666667 682.666667h426.666666v-170.666667c0-119.466667-93.866667-213.333333-213.333333-213.333333s-213.333333 93.866667-213.333333 213.333333v170.666667z m85.333333 128h256v85.333333H384v-85.333333z" fill="#2c2c2c" p-id="9518"></path></svg>`; case 'warning': return `<svg t="1726300459989" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="10617" width="24" height="24"> <path d="M533.333333 170.666667L938.666667 853.333333H128l405.333333-682.666666z m-256 597.333333h512l-256-448-256 448z m213.333334-298.666667h85.333333v128h-85.333333v-128z m0 170.666667h85.333333v85.333333h-85.333333v-85.333333z" fill="#2c2c2c" p-id="10618"></path></svg>`; case 'error': return `<svg t="1726300541103" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="8245" width="24" height="24"> <path d="M469.333333 853.333333h85.333334v-85.333333h-85.333334v85.333333z m85.333334-128V170.666667h-85.333334v554.666666h85.333334z" fill="#2c2c2c" p-id="8246"></path></svg>`; case 'confirm': return `<svg t="1726300633974" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="8503" width="24" height="24"> <path d="M490.666667 507.733333L597.333333 401.066667l59.733334 59.733333-166.4 166.4-119.466667-119.466667 59.733333-59.733333 59.733334 59.733333zM213.333333 213.333333h597.333334v597.333334H213.333333V213.333333z m85.333334 85.333334v426.666666h426.666666V298.666667H298.666667z" fill="#2c2c2c" p-id="8504"></path></svg>`; default: return `<svg t="1726300692215" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="8809" width="24" height="24"> <path d="M469.333333 597.333333v-85.333333h-42.666666v-85.333333h128v170.666666h42.666666v85.333334h-170.666666v-85.333334h42.666666z m42.666667 256c-187.733333 0-341.333333-153.6-341.333333-341.333333s153.6-341.333333 341.333333-341.333333 341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m0-85.333333c140.8 0 256-115.2 256-256s-115.2-256-256-256-256 115.2-256 256 115.2 256 256 256z m42.666667-469.333333v85.333333h-85.333334V298.666667h85.333334z" fill="#2c2c2c" p-id="8810"></path></svg>`; } } } // 触发新链接动画 function triggerNewLinkAnimation() { const downloadInterface = document.getElementById("downloadInterface"); if (downloadInterface.style.width === "50px") { downloadInterface.style.animation = "newpulse 0.5s ease-in-out"; downloadInterface.addEventListener('animationend', () => { downloadInterface.style.animation = ''; }, { once: true }); } } // 创建初始预览链接 function createInitialPreviewLink() { if (!previewLink || !document.contains(previewLink)) { createPreviewLink("#", "等待课件...( ＿ ＿)ノ｜"); previewLink.removeAttribute("href"); Object.assign(previewLink.style, { pointerEvents: "none", color: "#DDD" }); } } // 创建或更新预览链接 function updatePreviewLink(href, content) { const list = document.getElementById("downloadInterface"); if (previewLink && document.contains(previewLink)) { previewLink.style.animation = "fadeOut 0.5s forwards"; previewLink.addEventListener('animationend', () => { list.removeChild(previewLink); list.removeChild(list.lastChild); createNewPreviewLink(href, content); }, { once: true }); } else { createNewPreviewLink(href, content); } } function createNewPreviewLink(href, content) { createPreviewLink(href, content); previewLink.style.animation = "slideIn 0.5s forwards"; } // 创建预览链接 function createPreviewLink(href, content) { previewLink = document.createElement("a"); Object.assign(previewLink.style, { background: "linear-gradient(45deg, #FF8E53, #FF6B35)", color: "white", padding: "10px 15px", margin: "5px auto", borderRadius: "8px", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", fontSize: "14px", fontWeight: "bold", display: "flex", alignItems: "center", justifyContent: "center", textDecoration: "none", transition: "all 0.3s ease", position: "relative", overflow: "hidden", maxWidth: "380px", width: "calc(100% - 30px)", whiteSpace: "nowrap", textOverflow: "ellipsis", }); const downloadIcon = ` <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px; flex-shrink: 0;"> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1="12" y1="15" x2="12" y2="3"></line> </svg> `; previewLink.innerHTML = `${downloadIcon}<span style="overflow: hidden; text-overflow: ellipsis;">${content}</span>`; previewLink.title = content; addPreviewLinkEventListeners(previewLink); const list = document.getElementById("downloadInterface"); list.appendChild(previewLink); list.appendChild(document.createElement("br")); Object.assign(previewLink, { href: href, target: "_blank" }); previewLink.style.animation = "slideIn 0.5s forwards"; } // 添加预览链接事件监听器 function addPreviewLinkEventListeners(previewLink) { let isPressed = false; previewLink.addEventListener('dragstart', (event) => { event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/plain', previewLink.dataset.downloadUrl); event.dataTransfer.setData('text/filename', previewLink.dataset.filename); }); previewLink.addEventListener('mouseover', () => { if (!isPressed) { previewLink.style.transform = "translateY(-3px)"; previewLink.style.boxShadow = "0 6px 12px rgba(0, 0, 0, 0.15)"; previewLink.style.filter = "brightness(1.1)"; } }); previewLink.addEventListener('mouseout', () => { if (!isPressed) { previewLink.style.transform = "translateY(0)"; previewLink.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)"; previewLink.style.filter = "brightness(1)"; } }); previewLink.addEventListener('mousedown', (event) => { isPressed = true; previewLink.style.transform = "translateY(2px)"; previewLink.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)"; previewLink.style.filter = "brightness(0.95)"; }); previewLink.addEventListener('mouseup', () => { isPressed = false; previewLink.style.transform = "translateY(-3px)"; previewLink.style.boxShadow = "0 6px 12px rgba(0, 0, 0, 0.15)"; previewLink.style.filter = "brightness(1.1)"; }); previewLink.addEventListener('mouseleave', () => { isPressed = false; previewLink.style.transform = "translateY(0)"; previewLink.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)"; previewLink.style.filter = "brightness(1)"; }); previewLink.addEventListener("click", function (event) { totalDownloads++; updateTotalProgress(); event.preventDefault(); event.stopPropagation(); courseDownload(previewLink.href, previewLink.textContent.trim()); }); } function createToggleButton(text) { const button = document.createElement('button'); button.textContent = text; button.style.cssText = ` position: absolute; top: 10px; left: 100%; padding: 8px 16px; background-color: #fcbb34; color: white; border: none; border-radius: 0 8px 8px 0; cursor: pointer; white-space: nowrap; z-index: 10001; transition: all 0.3s ease; font-size: 14px; font-weight: bold; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); outline: none; `; button.addEventListener('mouseover', () => { button.style.backgroundColor = '#e5a72e'; button.style.transform = 'translateX(5px)'; }); button.addEventListener('mouseout', () => { button.style.backgroundColor = '#fcbb34'; button.style.transform = 'translateX(0)'; }); button.addEventListener('mousedown', () => { button.style.transform = 'translateX(2px) scale(0.98)'; }); button.addEventListener('mouseup', () => { button.style.transform = 'translateX(5px) scale(1)'; }); return button; } function createDebuggerToggleButton(text) { const button = document.createElement('button'); button.textContent = text; button.style.cssText = ` position: fixed; top: 0; left: 50%; transform: translateX(-50%); padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 0 0 8px 8px; cursor: pointer; white-space: nowrap; z-index: 10003; transition: background-color 0.3s ease; font-size: 14px; font-weight: bold; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); outline: none; `; button.addEventListener('mouseover', () => { button.style.backgroundColor = '#45a049'; }); button.addEventListener('mouseout', () => { button.style.backgroundColor = '#4CAF50'; }); return button; } // 切换容器的显示/隐藏 function toggleContainer(container, button) { const isHidden = container.style.left === '-400px'; container.style.left = isHidden ? '0' : '-400px'; button.style.backgroundColor = isHidden ? '#e69b00' : '#fcbb34'; button.textContent = isHidden ? '关闭' : button.getAttribute('data-original-text'); } // 创建并设置教师信息容器 function createTeacherInfoContainer() { const container = document.createElement("div"); container.id = "teacherInfoContainer"; container.style.cssText = ` position: fixed; top: 30vh; left: -400px; z-index: 10000; background-color: #FFF3E0; border: 1px solid #FFD180; border-radius: 0 8px 8px 0; padding: 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); width: 400px; height: 130px; max-height: 60vh; transition: all 0.3s ease; font-weight: bold; `; const scrollContent = document.createElement('div'); scrollContent.style.cssText = ` height: 100%; overflow-y: auto; overflow-x: hidden; font-weight: bold; `; scrollContent.id = "teacherInfoContent"; scrollContent.innerHTML = ` <div class="loading-message" style="text-align: center; padding: 20px;"> <p style="margin-bottom: 10px; font-size: 16px;"> 等待获取教师信息... </p> <div class="loading-dots"> <span class="dot">.</span><span class="dot">.</span><span class="dot">.</span> </div> </div> `; const toggleButton = createToggleButton("教师信息"); toggleButton.setAttribute('data-original-text', "教师信息"); toggleButton.style.left = '400px'; toggleButton.style.fontWeight = 'bold'; toggleButton.onclick = (e) => { e.stopPropagation(); toggleContainer(container, toggleButton); }; container.appendChild(scrollContent); container.appendChild(toggleButton); document.body.appendChild(container); // 添加样式 const teacher_style = document.createElement('style'); teacher_style.textContent = ` @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .loading-dots .dot { animation: blink 1.4s infinite; animation-fill-mode: both; font-size: 24px; } .loading-dots .dot:nth-child(2) { animation-delay: 0.2s; } .loading-dots .dot:nth-child(3) { animation-delay: 0.4s; } `; document.head.appendChild(teacher_style); } function updateTeacherInfo(teacherInfo) { const content = document.getElementById("teacherInfoContent"); if (!content) return; if (teacherInfo && teacherInfo.length > 0) { content.innerHTML = ` <h3 class="title" style="font-weight: bold; margin-bottom: 15px; padding-left: 10px;">教师信息</h3> <div class="teacher-list" style="font-weight: bold;"> ${teacherInfo.map((teacher) => ` <div class="teacher-item" style="margin-bottom: 10px; padding: 10px; background-color: #FFE0B2; border-radius: 5px;"> <div class="teacher-name" style="margin-bottom: 5px;">${teacher.nickname}</div> <div class="teacher-number" style="color: #757575;">${teacher.studentNumber}</div> </div> `).join("")} </div> `; } else { content.innerHTML = ` <div style="text-align: center; padding: 20px;"> <p style="color: #757575; font-weight: bold; margin-bottom: 10px;"> 暂无教师信息或尚未打开课程 </p> <p style="color: #999; font-size: 14px;"> 请确保在课程页面中使用此功能 </p> </div> `; } } // 绕过反调试按钮 function createDebuggerDisablerContainer() { const container = document.createElement('div'); container.id = "debuggerDisablerContainer"; container.style.cssText = ` position: fixed; top: -280px; left: 50%; transform: translateX(-50%); z-index: 10002; background-color: #1a1a1a; border: 2px solid #ff6600; border-radius: 0 0 10px 10px; padding: 20px; box-shadow: 0 5px 15px rgba(255, 102, 0, 0.3); width: 300px; height: 220px; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); `; const content = document.createElement('div'); content.style.cssText = ` height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; color: #ff6600; `; content.innerHTML = ` <h3 style="margin: 0; color: #ff6600; text-align: center; font-size: 18px; letter-spacing: 2px;">反调试禁用器</h3> <div style="width: 100%; height: 2px; background: linear-gradient(to right, #1a1a1a, #ff6600, #1a1a1a);"></div> <p style="text-align: center; margin: 10px 0; font-size: 14px; font-weight: bold; color: #cccccc;">禁用小雅反调试措施</p> <button id="disableDebuggerBtn" style=" background-color: #1a1a1a; border: 2px solid #ff6600; color: #ff6600; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer; transition: all 0.3s ease; outline: none; letter-spacing: 1px; ">⚡点击禁用⚡</button> `; container.appendChild(content); const toggleButton = document.createElement('button'); toggleButton.id = "debuggerToggleButton" toggleButton.textContent = "🔑 打开"; toggleButton.style.cssText = ` position: fixed; top: 0; left: 50%; transform: translateX(-50%); padding: 8px 16px; background-color: #ff6600; color: #1a1a1a; border: none; border-radius: 0 0 5px 5px; cursor: pointer; z-index: 10003; transition: all 0.3s ease; font-size: 14px; font-weight: bold; letter-spacing: 1px; `; document.body.appendChild(toggleButton); document.body.appendChild(container); let isOpen = false; toggleButton.onclick = (e) => { e.stopPropagation(); isOpen = !isOpen; if (isOpen && !localStorage.getItem('debuggerDisablerShownWarning')) { // 首次打开组件时显示警告 showNotification("警告⚠️：此功能可能会影响网站的正常运行，请谨慎使用！", 'warning'); localStorage.setItem('debuggerDisablerShownWarning', 'true'); } container.style.top = isOpen ? '0' : '-280px'; toggleButton.style.backgroundColor = isOpen ? '#ff8533' : '#ff6600'; toggleButton.textContent = isOpen ? "🔒 关闭" : "🔑 打开"; toggleButton.style.top = isOpen ? '220px' : '0'; }; toggleButton.addEventListener('mouseover', () => { toggleButton.style.backgroundColor = '#ff8533'; }); toggleButton.addEventListener('mouseout', () => { toggleButton.style.backgroundColor = isOpen ? '#ff8533' : '#ff6600'; }); const disableDebuggerBtn = document.getElementById('disableDebuggerBtn'); disableDebuggerBtn.addEventListener('mouseover', () => { disableDebuggerBtn.style.backgroundColor = '#ff6600'; disableDebuggerBtn.style.color = '#1a1a1a'; }); disableDebuggerBtn.addEventListener('mouseout', () => { disableDebuggerBtn.style.backgroundColor = '#1a1a1a'; disableDebuggerBtn.style.color = '#ff6600'; }); disableDebuggerBtn.addEventListener('click', function () { (function () { 'use strict'; Function.prototype.constructor = function () { return function () { }; }; })(); this.textContent = '反调试已禁用'; this.style.backgroundColor = '#1a1a1a'; this.style.color = '#00ff00'; this.style.borderColor = '#00ff00'; this.disabled = true; this.style.cursor = 'default'; // 添加禁用后的动画效果 container.style.animation = 'glitch 0.5s'; }); // 添加动画 const style = document.createElement('style'); style.textContent = ` @keyframes glitch { 0% { transform: translateX(-50%) translate(2px, 2px); } 25% { transform: translateX(-50%) translate(-2px, -2px); } 50% { transform: translateX(-50%) translate(2px, -2px); } 75% { transform: translateX(-50%) translate(-2px, 2px); } 100% { transform: translateX(-50%) translate(0, 0); } } `; document.head.appendChild(style); return { container, toggleButton }; } let teacherInfoRequestTimeout; // 获取教师信息 async function getTeacherInfo(groupId) { // 清除之前的超时 if (teacherInfoRequestTimeout) { clearTimeout(teacherInfoRequestTimeout); } return new Promise((resolve) => { teacherInfoRequestTimeout = setTimeout(async () => { const visitData = await getCourseVisitData(groupId); if (!visitData) { resolve(null); return; } try { const teachers = visitData.teachers || []; resolve(teachers.map((teacher) => ({ nickname: teacher.nickname, studentNumber: teacher.studentNumber, }))); } catch (error) { console.error("处理教师信息时出错：", error); resolve(null); } }, 500); }); } function createUserSearchContainer() { const container = document.createElement('div'); container.id = "userSearchContainer"; container.style.cssText = ` position: fixed; top: 45vh; left: -400px; z-index: 9999; background-color: #FFF3E0; border: 1px solid #FFD180; border-radius: 0 8px 8px 0; padding: 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); width: 400px; height: 150px; transition: all 0.3s ease; font-weight: bold; `; const scrollContent = document.createElement('div'); scrollContent.style.cssText = ` height: 100%; overflow-y: auto; `; scrollContent.innerHTML = ` <input type="text" id="userSearchInput" placeholder="输入电话/一卡通号" class="search-teacher-input" style=" font-weight: normal; width: 70%; padding: 10px 15px; margin-right: 10px; border: 2px solid #FFD180; border-radius: 20px; font-size: 16px; color: #333; outline: none; transition: all 0.3s ease; "> <button id="userSearchButton" class="search-teacher-button" style=" font-weight: bold; padding: 10px 20px; cursor: pointer; background-color: #FFD180; color: #333; border: none; border-radius: 20px; font-size: 16px; transition: all 0.3s ease; ">搜索</button> <div id="userSearchResults" class="search-teacher-results" style=" margin-top: 15px; font-weight: normal; "> <p class="search-teacher-hint">请输入电话或一卡通号进行搜索</p> </div> `; const toggleButton = createToggleButton("用户搜索"); toggleButton.setAttribute('data-original-text', "用户搜索"); toggleButton.style.left = '400px'; toggleButton.style.fontWeight = 'bold'; toggleButton.onclick = (e) => { e.stopPropagation(); toggleContainer(container, toggleButton); // 检查是否是第一次打开 if (!localStorage.getItem('userSearchWarningShown')) { showUserSearchWarning(); localStorage.setItem('userSearchWarningShown', 'true'); } }; container.appendChild(scrollContent); container.appendChild(toggleButton); document.body.appendChild(container); setTimeout(() => { const input = document.getElementById("userSearchInput"); if (input) { input.addEventListener('focus', () => { input.style.borderColor = '#FFA000'; input.style.boxShadow = '0 0 5px rgba(255, 160, 0, 0.5)'; }); input.addEventListener('blur', () => { input.style.borderColor = '#FFD180'; input.style.boxShadow = 'none'; }); // 添加回车键搜索功能 input.addEventListener('keypress', async (e) => { if (e.key === 'Enter') { e.preventDefault(); await performSearch(); } }); } const button = document.getElementById("userSearchButton"); if (button) { button.addEventListener('mouseover', () => { button.style.backgroundColor = '#FFA000'; }); button.addEventListener('mouseout', () => { button.style.backgroundColor = '#FFD180'; }); button.addEventListener('click', performSearch); } }, 0); // 添加样式 const search_style = document.createElement('style'); search_style.textContent = ` #userSearchInput::placeholder { color: #999; opacity: 1; transition: opacity 0.3s ease; } #userSearchInput:focus::placeholder { opacity: 0.5; } `; document.head.appendChild(search_style); } // 执行搜索的函数 async function performSearch() { const input = document.getElementById("userSearchInput"); const resultsDiv = document.getElementById("userSearchResults"); if (input && resultsDiv) { const username = input.value.trim(); if (username.length > 0) { const userInfo = await searchUser(username); displayUserInfo(userInfo, resultsDiv); } else { resultsDiv.innerHTML = '<p class="search-teacher-hint">请输入用户名或学号进行搜索</p>'; } } } // 添加显示警告的函数 function showUserSearchWarning() { const overlay = document.createElement('div'); overlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 10001; opacity: 0; transition: opacity 0.3s ease; `; document.body.appendChild(overlay); const warningDiv = document.createElement('div'); warningDiv.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #FFF3E0; border: none; border-radius: 12px; padding: 40px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); z-index: 10002; max-width: 600px; width: 90%; text-align: center; opacity: 0; transition: opacity 0.3s ease; `; warningDiv.innerHTML = ` <h3 style=" color: #E65100; margin-top: 0; font-size: 28px; margin-bottom: 25px; font-weight: bold; ">⚠️ 警告</h3> <p style=" color: #555; font-size: 18px; line-height: 1.6; margin-bottom: 30px; ">请注意：用户搜索功能仅供学习和研究使用。不当用途可能违反相关法律法规和学校政策。请遵守相关规定，尊重他人隐私。</p> <button id="warningCloseBtn" style=" background-color: #FF9800; border: none; color: white; padding: 14px 28px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px; cursor: pointer; border-radius: 50px; transition: background-color 0.3s ease; outline: none; ">我已了解</button> `; document.body.appendChild(warningDiv); const closeBtn = document.getElementById('warningCloseBtn'); closeBtn.onmouseover = () => { closeBtn.style.backgroundColor = '#F57C00'; }; closeBtn.onmouseout = () => { closeBtn.style.backgroundColor = '#FF9800'; }; closeBtn.onclick = () => { fadeOutAndRemove(overlay); fadeOutAndRemove(warningDiv); }; // 淡入效果 setTimeout(() => { overlay.style.opacity = '1'; warningDiv.style.opacity = '1'; }, 10); } function fadeOutAndRemove(element) { element.style.opacity = '0'; element.addEventListener('transitionend', function handler() { element.removeEventListener('transitionend', handler); element.parentNode.removeChild(element); }); } // 搜索用户函数 async function searchUser(username) { const token = getCookie(); const apiUrl = `https://${hostname}/api/jx-iresource/auth/user/info?username=${username}`; try { const response = await fetch(apiUrl, { method: 'GET', headers: { 'Authorization': `Bearer ${token}` } }); if (response.ok) { const data = await response.json(); return data.data; } else { throw new Error(`API 请求失败：${response.status} ${response.statusText}`); } } catch (error) { console.error("搜索用户时出错：", error); return null; } } // 显示用户信息函数 function displayUserInfo(userInfo, resultsDiv) { if (userInfo && userInfo.length > 0) { const user = userInfo[0]; resultsDiv.innerHTML = ` <div class="user-info"> <p><strong>用户名:</strong> ${user.loginName || "未知"}</p> <p><strong>昵称:</strong> ${user.nickname || "未知"}</p> <p><strong>姓名:</strong> ${user.realname || "未知"}</p> <p><strong>性别:</strong> ${user.sex || "未知"}</p> <p><strong>邮箱:</strong> ${user.email || "未知"}</p> <p><strong>电话:</strong> ${user.phone || "未知"}</p> <p><strong>学校:</strong> ${user.schoolName || "未知"}</p> <p><strong>QQ:</strong> ${user.qq || "未知"}</p> </div> `; } else { resultsDiv.innerHTML = '<p class="no-data">未找到该用户</p>'; } } // 初始化函数 function initContainers() { createTeacherInfoContainer(); createUserSearchContainer(); createDebuggerDisablerContainer(); } // 初始化 Konami 代码序列 let konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']; let konamiIndex = 0; // 监听键盘事件 document.addEventListener('keydown', (e) => { // 如果彩蛋已经被激活，则直接返回 if (isEasterEggActivated) { return; } if (e.key === konamiCode[konamiIndex]) { konamiIndex++; if (konamiIndex === konamiCode.length) { activateEasterEgg(); konamiIndex = 0; } } else { konamiIndex = 0; } }); // 激活彩蛋功能 function activateEasterEgg() { if (isEasterEggActivated) { showNotification("彩蛋已激活！别再戳啦！", 'info'); return; } console.log("彩蛋已激活！"); initContainers(); interceptAndModifyRequests(); let groupId = null; for (const resourceId in course_resources) { if (course_resources[resourceId].group_id) { groupId = course_resources[resourceId].group_id; break; } } if (groupId) { getTeacherInfo(groupId).then((teacherInfo) => { if (teacherInfo) { updateTeacherInfo(teacherInfo); } else { console.error("无法获取老师信息"); } }); } else { console.warn("无法找到包含 group_id 属性的资源，无法获取老师信息"); } isEasterEggActivated = true; } function initVideoAssistant() { const token = getCookie(); const container = document.createElement('div'); container.id = 'tm-video-assistant'; container.innerHTML = ` <div id="tm-assistant-icon"> <dotlottie-player src="https://lottie.host/e0b82942-db68-44a1-b729-df62ceb4c75e/bBXqj2oy9a.json" background="transparent" speed="1" style="width: 50px; height: 50px;" loop autoplay ></dotlottie-player> </div> <div id="tm-assistant-content"> <div id="tm-header"> <h3>视频源检测</h3> <button id="tm-download-guide-button" class="tm-button"> <span class="tm-button-icon">📽️</span> 视频下载指南 </button> </div> <div id="tm-video-title-container" class="tm-info-container"> <div class="tm-info-label">视频标题:</div> <div id="tm-video-title" class="tm-info-content">等待获取视频标题...</div> </div> <div id="tm-video-src-container" class="tm-info-container"> <div class="tm-info-label">视频链接:</div> <div id="tm-video-src" class="tm-info-content">等待检测视频源...</div> </div> <div id="tm-button-container"> <button id="tm-copy-src" class="tm-button"> <span class="tm-button-icon">📋</span> <strong>复制链接</strong> </button> <button id="tm-open-src" class="tm-button"> <span class="tm-button-icon">🔗</span> <strong>打开链接</strong> </button> </div> <div id="tm-m3u8-container" class="tm-info-container"> <div class="tm-info-label">M3U8链接:</div> <div id="tm-m3u8-src" class="tm-info-content"">等待获取M3U8链接...</div> </div> <div id="tm-button-container"> <button id="tm-copy-m3u8" class="tm-button"> <span class="tm-button-icon">📋</span> <strong>复制M3U8</strong> </button> <button id="tm-download-m3u8" class="tm-button"> <span class="tm-button-icon">⬇️</span> <strong>下载M3U8</strong> </button> </div> <p id="tm-status"></p> </div> `; document.body.appendChild(container); // 设置样式 const style = document.createElement('style'); style.textContent = ` #tm-video-assistant { position: fixed; top: 320px; right: 0; width: 50px; height: 50px; background: linear-gradient(270deg, #ffc700, #ff8c00, #ff6500); background-size: 600% 600%; animation: gradientBgAnimation 15s ease infinite; border-radius: 25px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); color: #333; overflow-y: auto; z-index: 9999; transition: all 0.3s ease-in-out; cursor: pointer; } #tm-video-assistant:not(.expanded):hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(0,0,0,0.2); } @keyframes gradientBgAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } #tm-assistant-icon { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; } #tm-assistant-content { display: none; padding: 20px; flex-direction: column; align-items: flex-start; width: 100%; box-sizing: border-box; opacity: 0; transition: opacity 0.3s ease; } #tm-video-assistant.expanded #tm-assistant-content { opacity: 1; } #tm-video-assistant h3 { margin: 0 0 10px 0; font-size: 18px; font-weight: 600; color: #333; } .tm-info-container { width: 100%; margin: 10px 0; padding: 10px; border-radius: 5px; transition: all 0.3s ease; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; } #tm-video-title-container { background: rgba(255, 255, 255, 0.3); border-left: 4px solid #6495ff; } #tm-video-src-container { background: rgba(255, 255, 255, 0.2); border-left: 4px solid #ff2201; } .tm-info-label { font-size: 12px; font-weight: bold; margin-bottom: 5px; color: #555; } .tm-info-content { font-size: 14px; font-weight: bold; word-break: break-all; white-space: pre-wrap; flex-grow: 1; max-height: 80px; overflow-y: auto; } .tm-info-content::-webkit-scrollbar { width: 6px; } .tm-info-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } .tm-info-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } #tm-button-container { display: flex; justify-content: space-between; width: 100%; } .tm-button { background: rgba(255, 140, 0, 0.8); border: none; color: white; padding: 8px 15px; border-radius: 25px; cursor: pointer; font-size: 14px; transition: all 0.3s ease; width: 48%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .tm-button:hover { background: rgba(255, 215, 0, 0.9); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .tm-button-icon { margin-right: 5px; font-size: 16px; } #tm-status { font-size: 12px; margin-top: 10px; font-style: italic; width: 100%; text-align: center; color: #555; } #tm-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 15px; } #tm-download-guide-button { position: absolute; top: 10px; right: 10px; background: #4CAF50; border: none; color: white; padding: 5px 10px; border-radius: 15px; cursor: pointer; font-size: 12px; font-weight: bold; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 1; } #tm-download-guide-button:hover { background: #45a049; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } #tm-download-guide-button .tm-button-icon { margin-right: 4px; font-size: 14px; } @keyframes flash { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } } .flash-animation { animation: flash 1s ease-in-out; } #tm-m3u8-container { background: rgba(255, 255, 255, 0.25); border-left: 4px solid #9c27b0; padding: 10px; border-radius: 5px; transition: all 0.3s ease; box-sizing: border-box; } @keyframes newpulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } `; document.head.appendChild(style); let lastUrl = location.href; let isExpanded = false; let initialTop = null; let lastVideoId = null; let guideModal = null; async function getVideoInfo(maxAttempts = 10, interval = 1000) { const assistant = document.getElementById('tm-video-assistant'); for (let attempt = 0; attempt < maxAttempts; attempt++) { const playerDiv = document.querySelector('div.prism-player'); if (playerDiv) { const videoElement = playerDiv.querySelector('video'); if (videoElement && videoElement.src) { const newSrc = videoElement.src; const content = document.title.split('|')[0].trim(); const oldSrc = document.getElementById('tm-video-src').textContent; if (newSrc !== oldSrc) { document.getElementById('tm-video-src').textContent = newSrc; document.getElementById('tm-video-title').textContent = content; // 检查是否为blob URL，如果是则尝试获取m3u8链接 if (newSrc.startsWith('blob:')) { document.getElementById('tm-video-src').textContent = '流式视频不可直接打开，请使用下方M3U8链接'; document.getElementById('tm-m3u8-container').style.display = 'block'; getM3U8Link(newSrc); } else { document.getElementById('tm-video-src').style.color = ''; document.getElementById('tm-m3u8-container').style.display = 'none'; } if (!isExpanded) { assistant.style.animation = "newpulse 0.5s ease-in-out"; setTimeout(() => { assistant.style.animation = ""; }, 1000); } } return { src: newSrc, title: content }; } } await new Promise(resolve => setTimeout(resolve, interval)); } document.getElementById('tm-video-title').textContent = '未找到视频标题'; document.getElementById('tm-video-src').textContent = '未找到视频源'; document.getElementById('tm-m3u8-src').textContent = '未找到M3U8链接'; return null; } async function getM3U8Link(blobUrl) { try { document.getElementById('tm-m3u8-src').textContent = '正在获取M3U8链接...'; // 从页面URL或资源信息中提取视频ID const videoId = await extractVideoId(); if (!videoId) { document.getElementById('tm-m3u8-src').textContent = '无法获取视频ID'; return; } lastVideoId = videoId; // 请求VOD播放授权 const authUrl = `https://${location.hostname}/api/jx-oresource/vod/video/play_auth/${videoId}`; const authResponse = await fetch(authUrl, { headers: { "accept": "*/*", "content-type": "application/json; charset=utf-8", 'Authorization': `Bearer ${token}`, "x-language": "zh-CN", } }); const authData = await authResponse.json(); if (!authData.success) { document.getElementById('tm-m3u8-src').textContent = '获取授权失败'; return; } // 从返回数据中获取m3u8链接 const privateVod = authData.data.private_vod; if (privateVod && privateVod.length > 0 && privateVod[0].private_url) { const m3u8Url = privateVod[0].private_url; document.getElementById('tm-m3u8-src').textContent = m3u8Url; showStatus('已获取到M3U8链接'); return m3u8Url; } else { document.getElementById('tm-m3u8-src').textContent = '未找到M3U8链接'; } } catch (error) { console.error('获取M3U8链接失败:', error); document.getElementById('tm-m3u8-src').textContent = '获取M3U8链接失败'; } } // 从页面URL或其他请求中提取视频ID async function extractVideoId() { try { // 尝试从URL中获取资源ID const urlMatch = location.href.match(/resource\/.*?\/(\d+)/); if (!urlMatch) return null; const resourceId = urlMatch[1]; // 请求资源详情 const resourceUrl = `https://${location.hostname}/api/jx-iresource/resource/queryResource?node_id=${resourceId}`; const response = await fetch(resourceUrl, { headers: { "accept": "*/*", "content-type": "application/json; charset=utf-8", 'Authorization': `Bearer ${token}`, "x-language": "zh-CN", } }); const resourceData = await response.json(); if (resourceData.success && resourceData.data.resource && resourceData.data.resource.video_id) { return resourceData.data.resource.video_id; } return null; } catch (error) { console.error('提取视频ID失败:', error); return null; } } function checkUrlAndExecute() { if (lastUrl !== location.href) { lastUrl = location.href; getVideoInfo(); } } document.getElementById('tm-copy-src').addEventListener('click', function (e) { e.stopPropagation(); const src = document.getElementById('tm-video-src').textContent; if (src && src !== '等待检测视频源...' && src !== '未找到视频源') { navigator.clipboard.writeText(src).then(() => { showStatus('链接已复制！'); }).catch(err => { console.error('复制失败:', err); showStatus('复制失败，请重试'); }); } else { showStatus('暂无可复制的链接'); } }); document.getElementById('tm-open-src').addEventListener('click', function (e) { e.stopPropagation(); const src = document.getElementById('tm-video-src').textContent; if (src && src !== '等待检测视频源...' && src !== '未找到视频源') { window.open(src, '_blank'); showStatus('已打开（小心音量爆炸哦~）'); } else { showStatus('暂无可打开的链接'); } }); document.getElementById('tm-copy-m3u8').addEventListener('click', function (e) { e.stopPropagation(); const m3u8Src = document.getElementById('tm-m3u8-src').textContent; if (m3u8Src && m3u8Src !== '等待获取M3U8链接...' && m3u8Src !== '未找到M3U8链接' && m3u8Src !== '正在获取M3U8链接...') { navigator.clipboard.writeText(m3u8Src).then(() => { showStatus('M3U8链接已复制！'); }).catch(err => { console.error('复制失败:', err); showStatus('复制失败，请重试'); }); } else { showStatus('暂无可复制的M3U8链接'); } }); document.getElementById('tm-download-m3u8').addEventListener('click', function (e) { e.stopPropagation(); const m3u8Src = document.getElementById('tm-m3u8-src').textContent; if (m3u8Src && m3u8Src !== '等待获取M3U8链接...' && m3u8Src !== '未找到M3U8链接' && m3u8Src !== '正在获取M3U8链接...') { // 使用第三方M3U8下载器 const downloadUrl = `https://tools.thatwind.com/tool/m3u8downloader#${encodeURIComponent(m3u8Src)}`; window.open(downloadUrl, '_blank'); showStatus('已跳转到M3U8下载器'); } else { showStatus('暂无可下载的M3U8链接'); } }); function addGuideButtonListener() { const guideButton = document.getElementById('tm-download-guide-button'); if (guideButton) { guideButton.addEventListener('click', function (e) { e.stopPropagation(); showDownloadGuide(); }); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', addGuideButtonListener); } else { addGuideButtonListener(); } function showDownloadGuide() { if (guideModal) { closeGuide(); return; } guideModal = document.createElement('div'); guideModal.id = 'tm-guide-modal'; guideModal.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: linear-gradient(135deg, #FFF9C4, #FFE082); padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(255, 152, 0, 0.3), 0 0 0 1px rgba(255, 152, 0, 0.1); z-index: 10000; max-width: 90%; width: 500px; color: #5D4037; opacity: 0; transition: all 0.3s ease-in-out; overflow: hidden; `; // 添加动态背景 const background = document.createElement('div'); background.style.cssText = ` position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #FFF9C4, #FFE082); z-index: -1; animation: gradientBG 15s ease infinite; `; guideModal.appendChild(background); // 添加样式 const style = document.createElement('style'); style.textContent = ` @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .step-icon { width: 24px; height: 24px; } .step-content { display: block; } `; document.head.appendChild(style); const keywords = ['打开', '新标签页', '三点', '下载', '右键', '另存为', 'M3U8']; const highlightKeywords = (text) => { return keywords.reduce((acc, keyword) => { return acc.replace(new RegExp(keyword, 'g'), `<strong style="color: #E65100; font-weight: 600;">${keyword}</strong>`); }, text); }; const steps = [ { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>', text: '打开视频链接。' }, { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play-circle"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>', text: '在新标签页中找到播放器。' }, { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>', text: '点击右下角"三点"图标。' }, { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>', text: '选择下载选项。' }, { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>', text: '如果没有下载选项，尝试右键点击视频并选择"将视频另存为……"。' }, { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>', text: '对于流式视频，可使用M3U8下载按钮直接跳转到专业下载工具。' } ]; guideModal.innerHTML = ` <h2 style="margin-top: 0; color: #FF8F00; text-align: center; font-size: 28px; font-weight: 600;">如何下载视频</h2> <ol style="padding-left: 0; counter-reset: item; list-style-type: none;"> ${steps.map((step, index) => ` <li style="margin-bottom: 20px; position: relative; padding-left: 70px; line-height: 1.6; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; overflow: hidden; min-height: 40px;"> <span style="position: absolute; left: 0; top: 0; background: #FF8F00; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 2px 5px rgba(255, 143, 0, 0.3);">${index + 1}</span> <span class="step-icon" style="position: absolute; left: 35px; top: 2px;">${step.icon}</span> <span class="step-content" style="display: block; margin-left: 10px;">${highlightKeywords(step.text)}</span> </li> `).join('')} </ol> <button id="close-guide" style=" padding: 12px 25px; background: #FF8F00; color: white; border: none; border-radius: 25px; cursor: pointer; font-size: 18px; font-weight: 600; display: block; margin: 25px auto 0; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(255, 143, 0, 0.2); ">我知道了</button> `; document.body.appendChild(guideModal); const closeButton = document.getElementById('close-guide'); closeButton.addEventListener('click', closeGuide); closeButton.addEventListener('mouseover', () => { closeButton.style.background = '#F57C00'; closeButton.style.transform = 'translateY(-2px)'; closeButton.style.boxShadow = '0 6px 8px rgba(255, 143, 0, 0.3)'; }); closeButton.addEventListener('mouseout', () => { closeButton.style.background = '#FF8F00'; closeButton.style.transform = 'translateY(0)'; closeButton.style.boxShadow = '0 4px 6px rgba(255, 143, 0, 0.2)'; }); // 添加打开动画 setTimeout(() => { guideModal.style.opacity = '1'; guideModal.style.transform = 'translate(-50%, -50%) scale(1)'; // 逐步显示每个步骤 const steps = guideModal.querySelectorAll('li'); steps.forEach((step, index) => { setTimeout(() => { step.style.opacity = '1'; step.style.transform = 'translateY(0)'; }, 200 * (index + 1)); }); }, 50); } function closeGuide() { if (!guideModal) return; guideModal.style.opacity = '0'; guideModal.style.transform = 'translate(-50%, -50%) scale(0.9)'; setTimeout(() => { document.body.removeChild(guideModal); guideModal = null; }, 300); } function showStatus(message) { const statusElement = document.getElementById('tm-status'); statusElement.textContent = message; statusElement.style.opacity = '1'; setTimeout(() => { statusElement.style.opacity = '0'; }, 5000); } // 切换展开/收起状态 document.getElementById('tm-video-assistant').addEventListener('click', function () { if (!initialTop) { initialTop = this.offsetTop; } const centerY = initialTop + 25; const lottiePlayer = this.querySelector('dotlottie-player'); if (isExpanded) { this.style.width = '50px'; this.style.height = '50px'; this.style.borderRadius = '25px'; this.style.top = `${initialTop}px`; document.getElementById('tm-assistant-content').style.display = 'none'; lottiePlayer.style.transform = 'rotate(0deg)'; this.classList.remove('expanded'); this.style.animation = ''; } else { const expandedHeight = 420; this.style.width = '380px'; this.style.height = `${expandedHeight}px`; this.style.borderRadius = '15px'; this.style.top = `${centerY - expandedHeight / 5.5}px`; document.getElementById('tm-assistant-content').style.display = 'flex'; lottiePlayer.style.transform = 'rotate(360deg)'; this.classList.add('expanded'); } isExpanded = !isExpanded; }); getVideoInfo(); detectInterval = setInterval(checkUrlAndExecute, 1000); window.addEventListener('popstate', checkUrlAndExecute); } function interceptAndModifyRequests() { initRequestInterceptor(); initUIManager(); } function initRequestInterceptor() { monitorFetch(); monitorXHR(); } const urlPattern = /https:\/\/.*\.ai-augmented\.com\/api\/jx-oresource\/cloud\/file_url\/\d+\?.*encryption_status=1(\&.*)?$/; function monitorFetch() { const originalFetch = window.fetch; window.fetch = function () { let fetchArguments = Array.from(arguments); let requestInfo = fetchArguments[0]; let url; if (typeof requestInfo === 'string') { url = requestInfo; } else if (requestInfo instanceof Request) { url = requestInfo.url; } if (url && url.match(urlPattern)) { return originalFetch.apply(this, fetchArguments) .then(response => { const responseClone = response.clone(); responseClone.json().then(responseData => { console.log('监控的 fetch 请求响应:', responseData); handleResponse(responseData); }).catch(e => { console.error('解析 fetch 响应失败:', e); }); return response; }); } else { return originalFetch.apply(this, fetchArguments); } }; } function monitorXHR() { const originalXHROpen = XMLHttpRequest.prototype.open; const originalXHRSend = XMLHttpRequest.prototype.send; const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader; XMLHttpRequest.prototype.open = function (method, url, async, user, password) { if (url && url.match(urlPattern)) { this._monitor = true; } else { this._monitor = false; } this._url = url; this._method = method; this._async = async; this._requestHeaders = {}; return originalXHROpen.apply(this, [method, url, async, user, password]); }; XMLHttpRequest.prototype.setRequestHeader = function (header, value) { this._requestHeaders[header] = value; originalXHRSetRequestHeader.apply(this, arguments); }; XMLHttpRequest.prototype.send = function (body) { if (this._monitor) { this.addEventListener('load', function () { try { if (this.responseType === '' || this.responseType === 'text') { const responseData = JSON.parse(this.responseText); console.log('监控的 XHR 请求响应 (text):', responseData); handleResponse(responseData); } else if (this.responseType === 'blob') { blobToText(this.response).then(text => { const responseData = JSON.parse(text); console.log('监控的 XHR 请求响应 (blob):', responseData); handleResponse(responseData); }).catch(e => { console.error('读取 blob 响应失败:', e); }); } else { console.warn('未处理的 responseType:', this.responseType); } } catch (e) { console.error('解析响应失败:', e); } }); } return originalXHRSend.apply(this, arguments); }; } function blobToText(blob) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = () => reject(reader.error); reader.readAsText(blob); }); } function handleResponse(responseData) { if (responseData && responseData.data && responseData.data.url) { let url = responseData.data.url; if (responseData.data.is_encryption) { url = decryptFileUrl(url); } showDownloadLink(url); } } function initUIManager() { createFloatingButton(); createLinkContainer(); } let floatingButton; let linkDisplayContainer; let isExpanded = false; function createFloatingButton() { if (!floatingButton) { floatingButton = document.createElement('div'); floatingButton.id = 'floating-button'; floatingButton.style.position = 'fixed'; floatingButton.style.bottom = '5px'; floatingButton.style.left = '5px'; floatingButton.style.width = '60px'; floatingButton.style.height = '60px'; floatingButton.style.background = 'linear-gradient(270deg, #f7b733, #ff9900, #ffb347)'; floatingButton.style.backgroundSize = '400% 400%'; floatingButton.style.borderRadius = '50%'; floatingButton.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)'; floatingButton.style.cursor = 'pointer'; floatingButton.style.zIndex = '9999'; floatingButton.style.display = 'flex'; floatingButton.style.justifyContent = 'center'; floatingButton.style.alignItems = 'center'; floatingButton.style.transition = 'all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55)'; floatingButton.style.overflow = 'hidden'; floatingButton.style.animation = 'flowingGradient 5s ease infinite'; const buttonIcon = document.createElement('div'); buttonIcon.innerHTML = ` <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1="12" y1="15" x2="12" y2="3"></line> </svg> `; buttonIcon.style.transition = 'transform 0.4s ease'; floatingButton.appendChild(buttonIcon); floatingButton.addEventListener('click', toggleLinkContainer); floatingButton.addEventListener('mouseenter', () => { if (!isExpanded) { floatingButton.style.transform = 'scale(1.1) rotate(5deg)'; } }); floatingButton.addEventListener('mouseleave', () => { if (!isExpanded) { floatingButton.style.transform = 'scale(1) rotate(0deg)'; } }); document.body.appendChild(floatingButton); } } function createLinkContainer() { if (!linkDisplayContainer) { linkDisplayContainer = document.createElement('div'); linkDisplayContainer.id = 'download-link-container'; linkDisplayContainer.style.position = 'fixed'; linkDisplayContainer.style.bottom = '5px'; linkDisplayContainer.style.left = '5px'; linkDisplayContainer.style.width = '0'; linkDisplayContainer.style.height = '0'; linkDisplayContainer.style.background = 'linear-gradient(270deg, #f7b733, #ff9900, #ffb347)'; linkDisplayContainer.style.backgroundSize = '400% 400%'; linkDisplayContainer.style.borderRadius = '30px'; linkDisplayContainer.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)'; linkDisplayContainer.style.zIndex = '9998'; linkDisplayContainer.style.overflow = 'hidden'; linkDisplayContainer.style.transition = 'all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55)'; linkDisplayContainer.style.opacity = '0'; linkDisplayContainer.style.display = 'flex'; linkDisplayContainer.style.flexDirection = 'column'; linkDisplayContainer.style.justifyContent = 'center'; linkDisplayContainer.style.alignItems = 'center'; linkDisplayContainer.style.padding = '0'; linkDisplayContainer.style.color = '#ffffff'; linkDisplayContainer.style.animation = 'flowingGradient 5s ease infinite'; const title = document.createElement('h3'); title.innerText = '备用下载'; title.style.margin = '5px 0 5px 0'; title.style.opacity = '0'; title.style.fontWeight = 'bold'; title.style.transition = 'opacity 0.3s ease 0.2s'; linkDisplayContainer.appendChild(title); const description = document.createElement('p'); description.innerText = '点击按钮获取链接'; description.style.margin = '0 0 10px 0'; description.style.fontSize = '14px'; description.style.opacity = '0'; description.style.fontWeight = 'bold'; description.style.transition = 'opacity 0.3s ease 0.3s'; linkDisplayContainer.appendChild(description); document.body.appendChild(linkDisplayContainer); } } function toggleLinkContainer() { isExpanded = !isExpanded; if (isExpanded) { linkDisplayContainer.style.width = '300px'; linkDisplayContainer.style.height = '130px'; linkDisplayContainer.style.borderRadius = '10px'; linkDisplayContainer.style.opacity = '1'; linkDisplayContainer.style.padding = '20px'; setTimeout(() => { linkDisplayContainer.querySelectorAll('h3, p, #emergency-download-button').forEach(el => { el.style.opacity = '1'; }); }, 200); floatingButton.style.transform = 'scale(0.8) rotate(45deg)'; floatingButton.style.backgroundColor = '#d35400'; } else { linkDisplayContainer.style.width = '0'; linkDisplayContainer.style.height = '0'; linkDisplayContainer.style.borderRadius = '30px'; linkDisplayContainer.style.opacity = '0'; linkDisplayContainer.style.padding = '0'; linkDisplayContainer.querySelectorAll('h3, p, #emergency-download-button').forEach(el => { el.style.opacity = '0'; }); floatingButton.style.transform = 'scale(1) rotate(0deg)'; floatingButton.style.backgroundColor = '#f39c12'; } } function showDownloadLink(fileUrl) { let downloadButton = document.getElementById('emergency-download-button'); const fileName = document.title.split('|')[0].trim(); if (!downloadButton) { downloadButton = document.createElement('a'); downloadButton.id = 'emergency-download-button'; downloadButton.style.display = 'inline-block'; downloadButton.style.backgroundColor = '#2ecc71'; downloadButton.style.color = '#ffffff'; downloadButton.style.padding = '10px 20px'; downloadButton.style.borderRadius = '25px'; downloadButton.style.textDecoration = 'none'; downloadButton.style.fontSize = '16px'; downloadButton.style.fontWeight = 'bold'; downloadButton.style.transition = 'all 0.3s ease'; downloadButton.style.opacity = '0'; downloadButton.style.transition = 'opacity 0.3s ease 0.4s, background-color 0.3s ease, transform 0.3s ease'; downloadButton.addEventListener('mouseover', () => { downloadButton.style.backgroundColor = '#27ae60'; downloadButton.style.transform = 'scale(1.05)'; }); downloadButton.addEventListener('mouseout', () => { downloadButton.style.backgroundColor = '#2ecc71'; downloadButton.style.transform = 'scale(1)'; }); linkDisplayContainer.appendChild(downloadButton); } downloadButton.innerText = '获取下载链接'; downloadButton.onclick = function (event) { totalDownloads++; updateTotalProgress(); event.preventDefault(); courseDownload(fileUrl, fileName); }; requestAnimationFrame(() => { downloadButton.style.opacity = '0'; requestAnimationFrame(() => { downloadButton.style.opacity = '1'; }); }); triggerAnimation(downloadButton, 'flash-animation'); if (!isExpanded) { toggleLinkContainer(); } else { downloadButton.style.display = 'inline-block'; downloadButton.style.opacity = '1'; } } function triggerAnimation(element, animationClass) { element.classList.remove(animationClass); void element.offsetWidth; element.classList.add(animationClass); } let lastScrollTop = 0; window.addEventListener('scroll', () => { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > lastScrollTop && scrollTop > 200) { floatingButton.style.transform = 'translateY(100px)'; } else { floatingButton.style.transform = 'translateY(0)'; } lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; }, false);