From fa532a647b7ff5fc1654da810ed11ad6dbf4e318 Mon Sep 17 00:00:00 2001 From: Minidoracat Date: Sat, 7 Jun 2025 04:34:54 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E5=84=AA=E5=8C=96=E5=9C=96?= =?UTF-8?q?=E7=89=87=E4=BA=8B=E4=BB=B6=E7=9B=A3=E8=81=BD=E5=99=A8=E7=9A=84?= =?UTF-8?q?=E8=A8=AD=E7=BD=AE=E8=88=87=E7=A7=BB=E9=99=A4=E9=82=8F=E8=BC=AF?= =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=97=A5=E8=AA=8C=E8=BC=B8=E5=87=BA?= =?UTF-8?q?=E4=BB=A5=E4=BE=BF=E6=96=BC=E8=AA=BF=E8=A9=A6=EF=BC=8C=E7=A2=BA?= =?UTF-8?q?=E4=BF=9D=E4=BA=8B=E4=BB=B6=E8=99=95=E7=90=86=E7=9A=84=E5=AE=89?= =?UTF-8?q?=E5=85=A8=E6=80=A7=E8=88=87=E6=AD=A3=E7=A2=BA=E6=80=A7=E3=80=82?= =?UTF-8?q?=E7=A7=BB=E9=99=A4=E9=87=8D=E8=A4=87=E7=9A=84=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E7=9B=A3=E8=81=BD=E5=99=A8=E8=A8=AD=E7=BD=AE=EF=BC=8C=E4=B8=A6?= =?UTF-8?q?=E7=B5=B1=E4=B8=80=E7=AE=A1=E7=90=86=E5=9C=96=E7=89=87=E4=B8=8A?= =?UTF-8?q?=E5=82=B3=E5=8A=9F=E8=83=BD=E7=9A=84=E4=BA=8B=E4=BB=B6=E7=9B=A3?= =?UTF-8?q?=E8=81=BD=E5=99=A8=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/static/js/app.js | 83 +++++++++++-------- 1 file changed, 49 insertions(+), 34 deletions(-) diff --git a/src/mcp_feedback_enhanced/web/static/js/app.js b/src/mcp_feedback_enhanced/web/static/js/app.js index fa46a44..07c356d 100644 --- a/src/mcp_feedback_enhanced/web/static/js/app.js +++ b/src/mcp_feedback_enhanced/web/static/js/app.js @@ -427,15 +427,28 @@ class FeedbackApp { * 設置圖片事件監聽器 */ setupImageEventListeners() { + console.log(`🖼️ 設置圖片事件監聽器 - imageInput: ${this.imageInput?.id}, imageUploadArea: ${this.imageUploadArea?.id}`); + // 文件選擇事件 this.imageChangeHandler = (e) => { + console.log(`📁 文件選擇事件觸發 - input: ${e.target.id}, files: ${e.target.files.length}`); this.handleFileSelect(e.target.files); }; this.imageInput.addEventListener('change', this.imageChangeHandler); - // 點擊上傳區域 - this.imageClickHandler = () => { - this.imageInput.click(); + // 點擊上傳區域 - 使用更安全的方式確保只觸發對應的 input + this.imageClickHandler = (e) => { + e.preventDefault(); + e.stopPropagation(); + + // 確保我們觸發的是正確的 input 元素 + const targetInput = this.imageInput; + if (targetInput) { + console.log(`🖱️ 點擊上傳區域 - 觸發 input: ${targetInput.id}`); + targetInput.click(); + } else { + console.warn('⚠️ 沒有找到對應的 input 元素'); + } }; this.imageUploadArea.addEventListener('click', this.imageClickHandler); @@ -469,8 +482,10 @@ class FeedbackApp { // 重新初始化圖片元素（確保使用最新的佈局模式） this.initImageElements(); + console.log(`🔍 檢查圖片元素 - imageUploadArea: ${this.imageUploadArea?.id || 'null'}, imageInput: ${this.imageInput?.id || 'null'}`); + if (!this.imageUploadArea || !this.imageInput) { - console.warn('⚠️ 圖片處理初始化失敗 - 缺少必要元素'); + console.warn(`⚠️ 圖片處理初始化失敗 - imageUploadArea: ${!!this.imageUploadArea}, imageInput: ${!!this.imageInput}`); return; } @@ -504,6 +519,7 @@ class FeedbackApp { * 移除舊的圖片事件監聽器 */ removeImageEventListeners() { + // 移除當前主要元素的事件監聽器 if (this.imageInput && this.imageChangeHandler) { this.imageInput.removeEventListener('change', this.imageChangeHandler); } @@ -521,6 +537,32 @@ class FeedbackApp { this.imageUploadArea.removeEventListener('drop', this.imageDropHandler); } } + + // 額外清理：移除所有可能的圖片上傳區域的 click 事件監聽器 + const allImageUploadAreas = [ + document.getElementById('feedbackImageUploadArea'), + document.getElementById('combinedImageUploadArea') + ].filter(area => area); + + allImageUploadAreas.forEach(area => { + if (area && this.imageClickHandler) { + area.removeEventListener('click', this.imageClickHandler); + console.log(`🧹 已移除 ${area.id} 的 click 事件監聽器`); + } + }); + + // 清理所有可能的 input 元素的 change 事件監聽器 + const allImageInputs = [ + document.getElementById('feedbackImageInput'), + document.getElementById('combinedImageInput') + ].filter(input => input); + + allImageInputs.forEach(input => { + if (input && this.imageChangeHandler) { + input.removeEventListener('change', this.imageChangeHandler); + console.log(`🧹 已移除 ${input.id} 的 change 事件監聽器`); + } + }); } /** @@ -2073,36 +2115,9 @@ class FeedbackApp { setupImageUploadSync() { // 設置合併模式的圖片上傳功能 - const combinedImageInput = document.getElementById('combinedImageInput'); - const combinedImageUploadArea = document.getElementById('combinedImageUploadArea'); - - if (combinedImageInput && combinedImageUploadArea) { - // 簡化的圖片上傳同步 - 只需要基本的事件監聽器 - combinedImageInput.addEventListener('change', (e) => { - this.handleFileSelect(e.target.files); - }); - - combinedImageUploadArea.addEventListener('click', () => { - combinedImageInput.click(); - }); - - // 拖放事件 - combinedImageUploadArea.addEventListener('dragover', (e) => { - e.preventDefault(); - combinedImageUploadArea.classList.add('dragover'); - }); - - combinedImageUploadArea.addEventListener('dragleave', (e) => { - e.preventDefault(); - combinedImageUploadArea.classList.remove('dragover'); - }); - - combinedImageUploadArea.addEventListener('drop', (e) => { - e.preventDefault(); - combinedImageUploadArea.classList.remove('dragover'); - this.handleFileSelect(e.dataTransfer.files); - }); - } + // 注意：所有事件監聽器現在由 setupImageEventListeners() 統一處理 + // 這個函數保留用於未來可能的同步邏輯，但不再設置重複的事件監聽器 + console.log('🔄 setupImageUploadSync: 事件監聽器由 setupImageEventListeners() 統一處理'); } resetSettings() {