From 24789cc4956ec0cbe1e024650b87d3a975b19355 Mon Sep 17 00:00:00 2001 From: Zylan Date: Thu, 3 Apr 2025 03:21:34 +0800 Subject: [PATCH] debug --- static/js/settings.js | 26 ++++++-- static/js/ui.js | 134 +++++++++++++++++++++++++----------------- 2 files changed, 101 insertions(+), 59 deletions(-) diff --git a/static/js/settings.js b/static/js/settings.js index f319eb2..cea2223 100644 --- a/static/js/settings.js +++ b/static/js/settings.js @@ -1053,16 +1053,34 @@ class SettingsManager { } } - this.createToast('密钥已保存', 'success'); + // 改用全局UIManager的showToast方法来显示成功消息 + if (window.uiManager) { + window.uiManager.showToast('密钥已保存', 'success'); + } else { + // 如果UIManager不可用，使用自己的方法作为备选 + this.createToast('密钥已保存', 'success'); + } } else { - this.createToast('保存密钥失败: ' + result.message, 'error'); + if (window.uiManager) { + window.uiManager.showToast('保存密钥失败: ' + result.message, 'error'); + } else { + this.createToast('保存密钥失败: ' + result.message, 'error'); + } } } else { - this.createToast('无法连接到服务器', 'error'); + if (window.uiManager) { + window.uiManager.showToast('无法连接到服务器', 'error'); + } else { + this.createToast('无法连接到服务器', 'error'); + } } } catch (error) { console.error('保存密钥出错:', error); - this.createToast('保存密钥出错: ' + error.message, 'error'); + if (window.uiManager) { + window.uiManager.showToast('保存密钥出错: ' + error.message, 'error'); + } else { + this.createToast('保存密钥出错: ' + error.message, 'error'); + } } } diff --git a/static/js/ui.js b/static/js/ui.js index 5b7047e..250b262 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -82,64 +82,88 @@ class UIManager { * @returns {HTMLElement} 返回创建的Toast元素，可用于后续移除 */ showToast(message, type = 'success', displayTime) { - if (!this.toastContainer) { - console.error('Toast容器不存在，无法显示消息'); - return null; - } - - // 检查是否已经存在相同内容的提示 - const existingToasts = this.toastContainer.querySelectorAll('.toast'); - for (const existingToast of existingToasts) { - const existingMessage = existingToast.querySelector('span').textContent; - if (existingMessage === message) { - // 已经存在相同的提示，不再创建新的 - return existingToast; - } - } - - const toast = document.createElement('div'); - toast.className = `toast ${type}`; - - // 根据类型设置图标 - let icon = 'check-circle'; - if (type === 'error') icon = 'exclamation-circle'; - else if (type === 'warning') icon = 'exclamation-triangle'; - else if (type === 'info') icon = 'info-circle'; - - toast.innerHTML = ` - - ${message} - `; - - // 如果是持续显示的Toast，添加关闭按钮 - if (displayTime === -1) { - const closeButton = document.createElement('button'); - closeButton.className = 'toast-close'; - closeButton.innerHTML = ''; - closeButton.addEventListener('click', (e) => { - this.hideToast(toast); - }); - toast.appendChild(closeButton); - toast.classList.add('persistent'); - } - - this.toastContainer.appendChild(toast); - - // 为不同类型的提示设置不同的显示时间 - if (displayTime !== -1) { - // 如果没有指定时间，则根据消息类型和内容长度设置默认时间 - if (displayTime === undefined) { - displayTime = message === '截图成功' ? 1500 : - type === 'error' ? 5000 : - message.length > 50 ? 4000 : 3000; + try { + if (!message) { + console.warn('尝试显示空消息'); + message = ''; } - setTimeout(() => { - this.hideToast(toast); - }, displayTime); + if (!this.toastContainer) { + console.error('Toast容器不存在，正在创建新容器'); + this.toastContainer = this.createToastContainer(); + if (!this.toastContainer) { + console.error('无法创建Toast容器，放弃显示消息'); + return null; + } + } + + // 检查是否已经存在相同内容的提示 + try { + const existingToasts = this.toastContainer.querySelectorAll('.toast'); + for (const existingToast of existingToasts) { + try { + const spanElement = existingToast.querySelector('span'); + if (spanElement && spanElement.textContent === message) { + // 已经存在相同的提示，不再创建新的 + return existingToast; + } + } catch (e) { + console.warn('检查现有toast时出错:', e); + // 继续检查其他toast元素 + } + } + } catch (e) { + console.warn('查询现有toast时出错:', e); + // 继续创建新的toast + } + + const toast = document.createElement('div'); + toast.className = `toast ${type}`; + + // 根据类型设置图标 + let icon = 'check-circle'; + if (type === 'error') icon = 'exclamation-circle'; + else if (type === 'warning') icon = 'exclamation-triangle'; + else if (type === 'info') icon = 'info-circle'; + + toast.innerHTML = ` + + ${message} + `; + + // 如果是持续显示的Toast，添加关闭按钮 + if (displayTime === -1) { + const closeButton = document.createElement('button'); + closeButton.className = 'toast-close'; + closeButton.innerHTML = ''; + closeButton.addEventListener('click', (e) => { + this.hideToast(toast); + }); + toast.appendChild(closeButton); + toast.classList.add('persistent'); + } + + this.toastContainer.appendChild(toast); + + // 为不同类型的提示设置不同的显示时间 + if (displayTime !== -1) { + // 如果没有指定时间，则根据消息类型和内容长度设置默认时间 + if (displayTime === undefined) { + displayTime = message === '截图成功' ? 1500 : + type === 'error' ? 5000 : + message.length > 50 ? 4000 : 3000; + } + + setTimeout(() => { + this.hideToast(toast); + }, displayTime); + } + + return toast; + } catch (error) { + console.error('显示Toast消息时出错:', error); + return null; } - - return toast; } /**