diff --git a/src/mcp_feedback_enhanced/web/static/css/styles.css b/src/mcp_feedback_enhanced/web/static/css/styles.css index 8fe2ad2..72aac9b 100644 --- a/src/mcp_feedback_enhanced/web/static/css/styles.css +++ b/src/mcp_feedback_enhanced/web/static/css/styles.css @@ -1304,110 +1304,3 @@ h3.combined-section-title { margin: 0; } -.auto-refresh-controls { - display: flex; - align-items: center; - gap: 8px; - font-size: 14px; - background: var(--bg-tertiary); - border: 1px solid var(--border-color); - border-radius: 6px; - padding: 6px 10px; - transition: all 0.3s ease; -} - -.auto-refresh-controls:hover { - border-color: var(--accent-color); - background: var(--surface-color); -} - -.auto-refresh-toggle { - display: flex; - align-items: center; - gap: 4px; - cursor: pointer; - user-select: none; -} - -.auto-refresh-toggle input[type="checkbox"] { - appearance: none; - width: 14px; - height: 14px; - border: 1px solid var(--border-color); - border-radius: 2px; - background: var(--bg-primary); - cursor: pointer; - transition: all 0.3s ease; - position: relative; -} - -.auto-refresh-toggle input[type="checkbox"]:checked { - background: var(--accent-color); - border-color: var(--accent-color); -} - -.auto-refresh-toggle input[type="checkbox"]:checked::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-size: 9px; - font-weight: bold; -} - -.toggle-label { - color: var(--text-primary); - font-size: 14px; - font-weight: 500; - white-space: nowrap; -} - -.auto-refresh-interval { - display: flex; - align-items: center; - gap: 2px; -} - -.auto-refresh-interval input[type="number"] { - width: 50px; - background: var(--bg-primary); - color: var(--text-primary); - border: 1px solid var(--border-color); - border-radius: 3px; - padding: 4px 6px; - font-size: 13px; - text-align: center; -} - -.auto-refresh-interval input[type="number"]:focus { - outline: none; - border-color: var(--accent-color); -} - -.interval-unit { - color: var(--text-secondary); - font-size: 14px; - white-space: nowrap; -} - -.auto-refresh-status { - display: flex; - align-items: center; - gap: 3px; - padding: 1px 4px; - background: var(--bg-primary); - border-radius: 3px; - border: 1px solid var(--border-color); -} - -.auto-refresh-status .status-indicator { - font-size: 13px; -} - -.auto-refresh-status .status-text { - color: var(--text-secondary); - font-size: 14px; - white-space: nowrap; -} \ No newline at end of file diff --git a/src/mcp_feedback_enhanced/web/static/js/app.js b/src/mcp_feedback_enhanced/web/static/js/app.js index 16c1fc6..e13c2d0 100644 --- a/src/mcp_feedback_enhanced/web/static/js/app.js +++ b/src/mcp_feedback_enhanced/web/static/js/app.js @@ -31,7 +31,6 @@ this.imageHandler = null; this.settingsManager = null; this.uiManager = null; - this.autoRefreshManager = null; // 應用程式狀態 this.isInitialized = false; @@ -183,28 +182,16 @@ } }); - // 9. 初始化自動刷新管理器 - self.autoRefreshManager = new window.MCPFeedback.AutoRefreshManager({ - autoRefreshEnabled: settings.autoRefreshEnabled, - autoRefreshInterval: settings.autoRefreshInterval, - lastKnownSessionId: self.currentSessionId, - onSessionUpdate: function(sessionData) { - self.handleSessionUpdate(sessionData); - }, - onSettingsChange: function() { - self.saveAutoRefreshSettings(); - } - }); + // 8. 應用設定到 UI self.settingsManager.applyToUI(); - // 9. 初始化各個管理器 + // 8. 初始化各個管理器 self.uiManager.initTabs(); self.imageHandler.init(); - self.autoRefreshManager.init(); - // 10. 建立 WebSocket 連接 + // 9. 建立 WebSocket 連接 self.webSocketManager.connect(); resolve(); @@ -314,10 +301,7 @@ this.imageHandler.updateSettings(settings); } - // 更新自動刷新管理器設定 - if (this.autoRefreshManager) { - this.autoRefreshManager.updateSettings(settings); - } + // 更新 UI 管理器佈局模式 if (this.uiManager && settings.layoutMode) { @@ -336,9 +320,7 @@ this.uiManager.updateStatusIndicator(); } - if (this.autoRefreshManager) { - this.autoRefreshManager.updateAutoRefreshStatus(); - } + }; /** @@ -381,15 +363,7 @@ } }; - /** - * 保存自動刷新設定 - */ - FeedbackApp.prototype.saveAutoRefreshSettings = function() { - if (this.autoRefreshManager && this.settingsManager) { - const settings = this.autoRefreshManager.getSettings(); - this.settingsManager.setMultiple(settings); - } - }; + /** * 處理 WebSocket 開啟 @@ -546,10 +520,7 @@ // 重置回饋狀態為等待新回饋 this.uiManager.setFeedbackState(window.MCPFeedback.Utils.CONSTANTS.FEEDBACK_WAITING, newSessionId); - // 更新自動刷新管理器的會話 ID - if (this.autoRefreshManager) { - this.autoRefreshManager.setLastKnownSessionId(newSessionId); - } + // 更新頁面標題 if (data.session_info.project_directory) { @@ -926,9 +897,7 @@ this.imageHandler.cleanup(); } - if (this.autoRefreshManager) { - this.autoRefreshManager.cleanup(); - } + console.log('✅ 應用程式資源清理完成'); }; diff --git a/src/mcp_feedback_enhanced/web/static/js/i18n.js b/src/mcp_feedback_enhanced/web/static/js/i18n.js index 48363d0..592eaf3 100644 --- a/src/mcp_feedback_enhanced/web/static/js/i18n.js +++ b/src/mcp_feedback_enhanced/web/static/js/i18n.js @@ -182,10 +182,7 @@ class I18nManager { window.feedbackApp.uiManager.updateStatusIndicator(); } - // 更新自動檢測狀態文字 - if (window.feedbackApp.autoRefreshManager && typeof window.feedbackApp.autoRefreshManager.updateAutoRefreshStatus === 'function') { - window.feedbackApp.autoRefreshManager.updateAutoRefreshStatus(); - } + } } diff --git a/src/mcp_feedback_enhanced/web/static/js/modules/auto-refresh-manager.js b/src/mcp_feedback_enhanced/web/static/js/modules/auto-refresh-manager.js deleted file mode 100644 index ae98bec..0000000 --- a/src/mcp_feedback_enhanced/web/static/js/modules/auto-refresh-manager.js +++ /dev/null @@ -1,351 +0,0 @@ -/** - * MCP Feedback Enhanced - 自動刷新管理模組 - * ======================================= - * - * 處理自動檢測會話更新和頁面內容刷新 - */ - -(function() { - 'use strict'; - - // 確保命名空間和依賴存在 - window.MCPFeedback = window.MCPFeedback || {}; - const Utils = window.MCPFeedback.Utils; - - /** - * 自動刷新管理器建構函數 - */ - function AutoRefreshManager(options) { - options = options || {}; - - // 設定 - this.autoRefreshEnabled = options.autoRefreshEnabled || false; - this.autoRefreshInterval = options.autoRefreshInterval || 5; // 秒 - this.lastKnownSessionId = options.lastKnownSessionId || null; - - // 定時器 - this.autoRefreshTimer = null; - - // UI 元素 - this.autoRefreshCheckbox = null; - this.autoRefreshIntervalInput = null; - this.refreshStatusIndicator = null; - this.refreshStatusText = null; - - // 回調函數 - this.onSessionUpdate = options.onSessionUpdate || null; - this.onSettingsChange = options.onSettingsChange || null; - - this.initUIElements(); - } - - /** - * 初始化 UI 元素 - */ - AutoRefreshManager.prototype.initUIElements = function() { - this.autoRefreshCheckbox = Utils.safeQuerySelector('#autoRefreshEnabled'); - this.autoRefreshIntervalInput = Utils.safeQuerySelector('#autoRefreshInterval'); - this.refreshStatusIndicator = Utils.safeQuerySelector('#refreshStatusIndicator'); - this.refreshStatusText = Utils.safeQuerySelector('#refreshStatusText'); - - console.log('🔄 自動刷新 UI 元素初始化完成'); - }; - - /** - * 初始化自動刷新功能 - */ - AutoRefreshManager.prototype.init = function() { - console.log('🔄 初始化自動刷新功能...'); - - if (!this.autoRefreshCheckbox || !this.autoRefreshIntervalInput) { - console.warn('⚠️ 自動刷新元素不存在,跳過初始化'); - return; - } - - this.setupEventListeners(); - this.applySettings(); - - // 延遲更新狀態指示器,確保 i18n 已完全載入 - const self = this; - setTimeout(function() { - self.updateAutoRefreshStatus(); - - if (self.autoRefreshEnabled) { - console.log('🔄 自動刷新已啟用,啟動自動檢測...'); - self.startAutoRefresh(); - } - }, 100); - - console.log('✅ 自動刷新功能初始化完成'); - }; - - /** - * 設置事件監聽器 - */ - AutoRefreshManager.prototype.setupEventListeners = function() { - const self = this; - - // 設置開關事件監聽器 - this.autoRefreshCheckbox.addEventListener('change', function(e) { - self.autoRefreshEnabled = e.target.checked; - self.handleAutoRefreshToggle(); - if (self.onSettingsChange) { - self.onSettingsChange(); - } - }); - - // 設置間隔輸入事件監聽器 - this.autoRefreshIntervalInput.addEventListener('change', function(e) { - const newInterval = parseInt(e.target.value); - if (newInterval >= 5 && newInterval <= 300) { - self.autoRefreshInterval = newInterval; - if (self.onSettingsChange) { - self.onSettingsChange(); - } - - // 如果自動刷新已啟用,重新啟動定時器 - if (self.autoRefreshEnabled) { - self.stopAutoRefresh(); - self.startAutoRefresh(); - } - } - }); - }; - - /** - * 應用設定 - */ - AutoRefreshManager.prototype.applySettings = function() { - if (this.autoRefreshCheckbox) { - this.autoRefreshCheckbox.checked = this.autoRefreshEnabled; - } - if (this.autoRefreshIntervalInput) { - this.autoRefreshIntervalInput.value = this.autoRefreshInterval; - } - }; - - /** - * 處理自動刷新開關切換 - */ - AutoRefreshManager.prototype.handleAutoRefreshToggle = function() { - if (this.autoRefreshEnabled) { - this.startAutoRefresh(); - } else { - this.stopAutoRefresh(); - } - this.updateAutoRefreshStatus(); - }; - - /** - * 啟動自動刷新 - */ - AutoRefreshManager.prototype.startAutoRefresh = function() { - if (this.autoRefreshTimer) { - clearInterval(this.autoRefreshTimer); - } - - const self = this; - this.autoRefreshTimer = setInterval(function() { - self.checkForSessionUpdate(); - }, this.autoRefreshInterval * 1000); - - console.log('🔄 自動刷新已啟動,間隔: ' + this.autoRefreshInterval + '秒'); - }; - - /** - * 停止自動刷新 - */ - AutoRefreshManager.prototype.stopAutoRefresh = function() { - if (this.autoRefreshTimer) { - clearInterval(this.autoRefreshTimer); - this.autoRefreshTimer = null; - } - console.log('⏸️ 自動刷新已停止'); - }; - - /** - * 檢查會話更新 - */ - AutoRefreshManager.prototype.checkForSessionUpdate = function() { - const self = this; - - this.updateAutoRefreshStatus('checking'); - - fetch('/api/current-session') - .then(function(response) { - if (!response.ok) { - throw new Error('API 請求失敗: ' + response.status); - } - return response.json(); - }) - .then(function(sessionData) { - // 檢查會話 ID 是否變化 - if (sessionData.session_id && sessionData.session_id !== self.lastKnownSessionId) { - console.log('🔄 檢測到新會話: ' + self.lastKnownSessionId + ' -> ' + sessionData.session_id); - - // 更新記錄的會話 ID - self.lastKnownSessionId = sessionData.session_id; - - // 觸發會話更新回調 - if (self.onSessionUpdate) { - self.onSessionUpdate(sessionData); - } - - self.updateAutoRefreshStatus('detected'); - - // 短暫顯示檢測成功狀態,然後恢復為檢測中 - setTimeout(function() { - if (self.autoRefreshEnabled) { - self.updateAutoRefreshStatus('enabled'); - } - }, 2000); - } else { - self.updateAutoRefreshStatus('enabled'); - } - }) - .catch(function(error) { - console.error('❌ 自動刷新檢測失敗:', error); - self.updateAutoRefreshStatus('error'); - - // 短暫顯示錯誤狀態,然後恢復 - setTimeout(function() { - if (self.autoRefreshEnabled) { - self.updateAutoRefreshStatus('enabled'); - } - }, 3000); - }); - }; - - /** - * 更新自動刷新狀態指示器 - */ - AutoRefreshManager.prototype.updateAutoRefreshStatus = function(status) { - status = status || (this.autoRefreshEnabled ? 'enabled' : 'disabled'); - - console.log('🔧 updateAutoRefreshStatus 被調用,status: ' + status); - console.log('🔧 refreshStatusIndicator: ' + (this.refreshStatusIndicator ? 'found' : 'null')); - console.log('🔧 refreshStatusText: ' + (this.refreshStatusText ? 'found' : 'null')); - - if (!this.refreshStatusIndicator || !this.refreshStatusText) { - console.log('⚠️ 自動檢測狀態元素未找到,跳過更新'); - return; - } - - let indicator = '⏸️'; - let textKey = 'autoRefresh.disabled'; - - switch (status) { - case 'enabled': - indicator = '🔄'; - textKey = 'autoRefresh.enabled'; - break; - case 'checking': - indicator = '🔍'; - textKey = 'autoRefresh.checking'; - break; - case 'detected': - indicator = '✅'; - textKey = 'autoRefresh.detected'; - break; - case 'error': - indicator = '❌'; - textKey = 'autoRefresh.error'; - break; - case 'disabled': - default: - indicator = '⏸️'; - textKey = 'autoRefresh.disabled'; - break; - } - - this.refreshStatusIndicator.textContent = indicator; - - // 使用多語系翻譯 - if (window.i18nManager) { - const translatedText = window.i18nManager.t(textKey); - console.log('🔄 自動檢測狀態翻譯: ' + textKey + ' -> ' + translatedText + ' (語言: ' + window.i18nManager.currentLanguage + ')'); - this.refreshStatusText.textContent = translatedText; - } else { - // 備用翻譯 - const fallbackTexts = { - 'autoRefresh.enabled': '已啟用', - 'autoRefresh.checking': '檢測中...', - 'autoRefresh.detected': '檢測到更新', - 'autoRefresh.error': '檢測錯誤', - 'autoRefresh.disabled': '已停用' - }; - this.refreshStatusText.textContent = fallbackTexts[textKey] || '未知狀態'; - } - }; - - /** - * 更新設定 - */ - AutoRefreshManager.prototype.updateSettings = function(settings) { - if (settings.autoRefreshEnabled !== undefined) { - this.autoRefreshEnabled = settings.autoRefreshEnabled; - } - if (settings.autoRefreshInterval !== undefined) { - this.autoRefreshInterval = settings.autoRefreshInterval; - } - - this.applySettings(); - - // 根據新設定調整自動刷新狀態 - if (this.autoRefreshEnabled && !this.autoRefreshTimer) { - this.startAutoRefresh(); - } else if (!this.autoRefreshEnabled && this.autoRefreshTimer) { - this.stopAutoRefresh(); - } - - this.updateAutoRefreshStatus(); - }; - - /** - * 設置最後已知會話 ID - */ - AutoRefreshManager.prototype.setLastKnownSessionId = function(sessionId) { - this.lastKnownSessionId = sessionId; - }; - - /** - * 獲取當前設定 - */ - AutoRefreshManager.prototype.getSettings = function() { - return { - autoRefreshEnabled: this.autoRefreshEnabled, - autoRefreshInterval: this.autoRefreshInterval - }; - }; - - /** - * 檢查是否已啟用 - */ - AutoRefreshManager.prototype.isEnabled = function() { - return this.autoRefreshEnabled; - }; - - /** - * 手動觸發檢查 - */ - AutoRefreshManager.prototype.manualCheck = function() { - if (!this.autoRefreshEnabled) { - console.log('🔄 手動觸發會話檢查...'); - this.checkForSessionUpdate(); - } - }; - - /** - * 清理資源 - */ - AutoRefreshManager.prototype.cleanup = function() { - this.stopAutoRefresh(); - console.log('🧹 自動刷新管理器已清理'); - }; - - // 將 AutoRefreshManager 加入命名空間 - window.MCPFeedback.AutoRefreshManager = AutoRefreshManager; - - console.log('✅ AutoRefreshManager 模組載入完成'); - -})(); diff --git a/src/mcp_feedback_enhanced/web/static/js/modules/settings-manager.js b/src/mcp_feedback_enhanced/web/static/js/modules/settings-manager.js index 5c04b3d..965f423 100644 --- a/src/mcp_feedback_enhanced/web/static/js/modules/settings-manager.js +++ b/src/mcp_feedback_enhanced/web/static/js/modules/settings-manager.js @@ -25,8 +25,6 @@ language: 'zh-TW', imageSizeLimit: 0, enableBase64Detail: false, - autoRefreshEnabled: false, - autoRefreshInterval: 5, activeTab: 'combined', sessionPanelCollapsed: false }; @@ -314,9 +312,6 @@ // 應用圖片設定 this.applyImageSettings(); - - // 應用自動刷新設定 - this.applyAutoRefreshSettings(); }; /** @@ -379,20 +374,7 @@ }.bind(this)); }; - /** - * 應用自動刷新設定 - */ - SettingsManager.prototype.applyAutoRefreshSettings = function() { - const autoRefreshCheckbox = Utils.safeQuerySelector('#autoRefreshEnabled'); - if (autoRefreshCheckbox) { - autoRefreshCheckbox.checked = this.currentSettings.autoRefreshEnabled; - } - const autoRefreshIntervalInput = Utils.safeQuerySelector('#autoRefreshInterval'); - if (autoRefreshIntervalInput) { - autoRefreshIntervalInput.value = this.currentSettings.autoRefreshInterval; - } - }; /** * 設置事件監聽器 @@ -438,23 +420,7 @@ }); } - // 自動刷新設定 - const autoRefreshCheckbox = Utils.safeQuerySelector('#autoRefreshEnabled'); - if (autoRefreshCheckbox) { - autoRefreshCheckbox.addEventListener('change', function(e) { - self.set('autoRefreshEnabled', e.target.checked); - }); - } - const autoRefreshIntervalInput = Utils.safeQuerySelector('#autoRefreshInterval'); - if (autoRefreshIntervalInput) { - autoRefreshIntervalInput.addEventListener('change', function(e) { - const newInterval = parseInt(e.target.value); - if (newInterval >= 5 && newInterval <= 300) { - self.set('autoRefreshInterval', newInterval); - } - }); - } }; // 將 SettingsManager 加入命名空間 diff --git a/src/mcp_feedback_enhanced/web/templates/feedback.html b/src/mcp_feedback_enhanced/web/templates/feedback.html index 1005e8d..7814e46 100644 --- a/src/mcp_feedback_enhanced/web/templates/feedback.html +++ b/src/mcp_feedback_enhanced/web/templates/feedback.html @@ -633,22 +633,8 @@