diff --git a/app.js b/app.js index 2b9e615..1e56d3b 100644 --- a/app.js +++ b/app.js @@ -3157,14 +3157,14 @@ class CLIProxyManager { ${i18n.t('stats.failure')}: ${fileStats.failure} -
- - -
@@ -3176,6 +3176,9 @@ class CLIProxyManager { // 绑定筛选按钮事件 this.bindAuthFileFilterEvents(); + + // 绑定认证文件操作按钮事件(使用事件委托) + this.bindAuthFileActionEvents(); } // 更新筛选按钮显示 @@ -3229,11 +3232,6 @@ class CLIProxyManager { } else { filterContainer.appendChild(btn); } - - // 添加点击事件 - btn.addEventListener('click', (e) => { - this.handleFilterClick(e.target); - }); } }); } @@ -3253,9 +3251,9 @@ class CLIProxyManager { const fileItems = document.querySelectorAll('.file-item'); fileItems.forEach(item => { if (filterType === 'all' || item.dataset.fileType === filterType) { - item.style.display = 'flex'; + item.classList.remove('hidden'); } else { - item.style.display = 'none'; + item.classList.add('hidden'); } }); } @@ -3270,6 +3268,52 @@ class CLIProxyManager { }); } + // 绑定认证文件操作按钮事件(使用事件委托) + bindAuthFileActionEvents() { + const container = document.getElementById('auth-files-list'); + if (!container) return; + + // 移除旧的事件监听器(如果存在) + const oldListener = container._authFileActionListener; + if (oldListener) { + container.removeEventListener('click', oldListener); + } + + // 创建新的事件监听器 + const listener = (e) => { + // 查找最近的按钮元素 + const button = e.target.closest('button[data-action]'); + if (!button) return; + + // 获取操作类型和文件名 + const action = button.dataset.action; + const actionsContainer = button.closest('.item-actions'); + if (!actionsContainer) return; + + const filename = actionsContainer.dataset.filename; + if (!filename) return; + + // 根据操作类型调用相应的方法 + switch (action) { + case 'showDetails': + this.showAuthFileDetails(filename); + break; + case 'download': + this.downloadAuthFile(filename); + break; + case 'delete': + this.deleteAuthFile(filename); + break; + } + }; + + // 保存监听器引用以便后续移除 + container._authFileActionListener = listener; + + // 添加事件监听器 + container.addEventListener('click', listener); + } + // 格式化文件大小 formatFileSize(bytes) { if (bytes === 0) return '0 Bytes'; @@ -3355,7 +3399,7 @@ class CLIProxyManager {

${filename}

-
@@ -3363,10 +3407,10 @@ class CLIProxyManager {
${this.escapeHtml(jsonContent)}
@@ -3383,13 +3427,40 @@ class CLIProxyManager { // 添加新模态框 document.body.insertAdjacentHTML('beforeend', modalHtml); - // 添加点击背景关闭功能 + // 获取模态框元素 const modal = document.getElementById('json-modal'); + + // 添加点击背景关闭功能 modal.addEventListener('click', (e) => { if (e.target === modal) { this.closeJsonModal(); } }); + + // 绑定模态框按钮事件(使用事件委托) + this.bindJsonModalEvents(modal); + } + + // 绑定JSON模态框按钮事件(使用事件委托) + bindJsonModalEvents(modal) { + modal.addEventListener('click', (e) => { + // 查找最近的按钮元素 + const button = e.target.closest('button[data-action]'); + if (!button) return; + + // 获取操作类型 + const action = button.dataset.action; + + // 根据操作类型调用相应的方法 + switch (action) { + case 'copy': + this.copyJsonContent(); + break; + case 'close': + this.closeJsonModal(); + break; + } + }); } // 关闭JSON模态框 @@ -3413,13 +3484,6 @@ class CLIProxyManager { } } - // HTML转义函数 - escapeHtml(text) { - const div = document.createElement('div'); - div.textContent = text; - return div.innerHTML; - } - // 下载认证文件 async downloadAuthFile(filename) { try { diff --git a/styles.css b/styles.css index 1d87d29..11a2410 100644 --- a/styles.css +++ b/styles.css @@ -1701,6 +1701,10 @@ input:checked+.slider:before { transition: all 0.3s ease; } +.file-item.hidden { + display: none; +} + .key-item:hover, .provider-item:hover, .file-item:hover {