From 7e0745deb8acb8bdac1b7345579b29ae1d085725 Mon Sep 17 00:00:00 2001 From: Minidoracat Date: Sat, 14 Jun 2025 18:38:42 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20=E5=B0=87=E6=9C=83=E8=A9=B1?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E8=BD=89=E7=A7=BB=E5=88=B0=E9=A0=81=E7=B1=A4?= =?UTF-8?q?=EF=BC=8C=E9=81=BF=E5=85=8D=E6=9C=89=E4=BA=9B=E4=BA=BA=E6=9C=89?= =?UTF-8?q?=E7=80=8F=E8=A6=BD=E5=99=A8=E5=95=8F=E9=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/locales/en/translation.json | 2 + .../web/locales/zh-CN/translation.json | 2 + .../web/locales/zh-TW/translation.json | 2 + .../web/static/css/session-management.css | 200 ++--------------- .../web/static/js/modules/session-manager.js | 203 ++---------------- .../modules/session/session-details-modal.js | 19 +- .../web/templates/feedback.html | 146 ++++++------- 7 files changed, 113 insertions(+), 461 deletions(-) diff --git a/src/mcp_feedback_enhanced/web/locales/en/translation.json b/src/mcp_feedback_enhanced/web/locales/en/translation.json index 54065bf..8b51b80 100644 --- a/src/mcp_feedback_enhanced/web/locales/en/translation.json +++ b/src/mcp_feedback_enhanced/web/locales/en/translation.json @@ -16,6 +16,7 @@ "summary": "📋 AI Summary", "commands": "⚡ Commands", "command": "⚡ Commands", + "sessions": "📋 Session Management", "settings": "⚙️ Settings", "combined": "📝 Workspace", "about": "ℹ️ About" @@ -205,6 +206,7 @@ }, "sessionManagement": { "title": "Session Management", + "description": "Manage current and historical session records, view session statistics.", "currentSession": "Current Session", "sessionHistory": "Session History", "statistics": "Statistics", diff --git a/src/mcp_feedback_enhanced/web/locales/zh-CN/translation.json b/src/mcp_feedback_enhanced/web/locales/zh-CN/translation.json index f3ddf53..a2f072c 100644 --- a/src/mcp_feedback_enhanced/web/locales/zh-CN/translation.json +++ b/src/mcp_feedback_enhanced/web/locales/zh-CN/translation.json @@ -16,6 +16,7 @@ "summary": "📋 AI 总结", "commands": "⚡ 命令", "command": "⚡ 命令", + "sessions": "📋 会话管理", "settings": "⚙️ 设置", "combined": "📝 工作区", "about": "ℹ️ 关于" @@ -205,6 +206,7 @@ }, "sessionManagement": { "title": "会话管理", + "description": "管理当前会话和历史会话记录,查看会话统计信息。", "currentSession": "当前会话", "sessionHistory": "会话历史", "statistics": "统计信息", diff --git a/src/mcp_feedback_enhanced/web/locales/zh-TW/translation.json b/src/mcp_feedback_enhanced/web/locales/zh-TW/translation.json index a02d971..4265cf3 100644 --- a/src/mcp_feedback_enhanced/web/locales/zh-TW/translation.json +++ b/src/mcp_feedback_enhanced/web/locales/zh-TW/translation.json @@ -21,6 +21,7 @@ "summary": "📋 AI 摘要", "commands": "⚡ 命令", "command": "⚡ 命令", + "sessions": "📋 會話管理", "settings": "⚙️ 設定", "combined": "📝 工作區", "about": "ℹ️ 關於" @@ -210,6 +211,7 @@ }, "sessionManagement": { "title": "會話管理", + "description": "管理當前會話和歷史會話記錄,查看會話統計資訊。", "currentSession": "當前會話", "sessionHistory": "會話歷史", "statistics": "統計資訊", diff --git a/src/mcp_feedback_enhanced/web/static/css/session-management.css b/src/mcp_feedback_enhanced/web/static/css/session-management.css index 689e2eb..86ee2e9 100644 --- a/src/mcp_feedback_enhanced/web/static/css/session-management.css +++ b/src/mcp_feedback_enhanced/web/static/css/session-management.css @@ -430,46 +430,19 @@ border-color: var(--accent-color); } -/* ===== 會話管理面板 ===== */ -.session-management-panel { - width: 320px; - background: var(--panel-bg); - border-right: 1px solid var(--panel-border); - display: flex; - flex-direction: column; - height: 100%; - backdrop-filter: blur(10px); - transition: width var(--transition-slow) var(--easing-smooth), - opacity var(--transition-normal) var(--easing-smooth), - border-right var(--transition-normal) var(--easing-smooth); - position: relative; - flex-shrink: 0; - box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); -} - -.session-management-panel.collapsed { - width: 0; - min-width: 0; - border-right: none; - overflow: hidden; - opacity: 0; -} - -.panel-header { +/* ===== 會話管理頁籤樣式 ===== */ +.session-panel-header { display: flex; justify-content: space-between; align-items: center; - padding: 16px; - background: var(--panel-header-bg); - border-bottom: 1px solid var(--panel-border); - position: sticky; - top: 0; - z-index: 10; + padding: 16px 0; + margin-bottom: 20px; + border-bottom: 1px solid var(--border-color); } -.panel-header h3 { +.session-panel-header h3 { margin: 0; - font-size: 16px; + font-size: 18px; font-weight: 600; color: var(--text-primary); } @@ -479,114 +452,13 @@ gap: 8px; } -/* ===== 邊緣收合按鈕 ===== */ -.panel-edge-toggle { - position: absolute; - top: 50%; - right: -12px; - transform: translateY(-50%); - z-index: 200; -} - -.edge-toggle-btn { - width: 24px; - height: 48px; - background: var(--panel-header-bg); - border: 1px solid var(--panel-border); - border-left: none; - border-radius: 0 8px 8px 0; - color: var(--text-secondary); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: all var(--transition-normal) var(--easing-smooth); - backdrop-filter: blur(10px); - box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); -} - -.edge-toggle-btn:hover { - background: var(--accent-color); - color: white; - transform: scale(1.1); - box-shadow: 2px 0 12px rgba(0, 122, 204, 0.3); -} - -.edge-toggle-btn .toggle-icon { - font-size: 12px; - transition: transform var(--transition-normal) var(--easing-bounce); -} - -.edge-toggle-btn:hover .toggle-icon { - transform: translateX(2px) scale(1.1); -} - -/* ===== 收合狀態下的展開按鈕 ===== */ -.collapsed-panel-toggle { - position: fixed; - left: 0; - top: 50%; - transform: translateY(-50%); - z-index: 300; -} - -.collapsed-toggle-btn { - width: 40px; - height: 80px; - background: var(--panel-header-bg); - border: 1px solid var(--panel-border); - border-left: none; - border-radius: 0 12px 12px 0; - color: var(--text-secondary); - cursor: pointer; +.session-panel-content { display: flex; flex-direction: column; - align-items: center; - justify-content: center; - gap: 4px; - transition: all var(--transition-slow) var(--easing-smooth); - backdrop-filter: blur(10px); - box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2); - writing-mode: vertical-rl; - text-orientation: mixed; - animation: slideInFromLeft var(--transition-slow) var(--easing-smooth); + gap: 24px; } -@keyframes slideInFromLeft { - from { - opacity: 0; - transform: translateX(-100%); - } - to { - opacity: 1; - transform: translateX(0); - } -} -.collapsed-toggle-btn:hover { - background: var(--accent-color); - color: white; - transform: translateX(6px) scale(1.05); - width: 46px; - box-shadow: 4px 0 16px rgba(0, 122, 204, 0.4); -} - -.collapsed-toggle-btn .toggle-icon { - font-size: 14px; - margin-bottom: 4px; -} - -.collapsed-toggle-btn .toggle-text { - font-size: 11px; - font-weight: 500; - letter-spacing: 2px; -} - -.panel-content { - flex: 1; - overflow-y: auto; - padding: 16px; -} /* ===== 會話卡片 ===== */ .session-card { @@ -775,49 +647,7 @@ } /* ===== 響應式設計 ===== */ -@media (max-width: 1200px) { - .session-management-panel { - position: fixed; - left: 0; - top: 0; - height: 100vh; - z-index: 1000; - box-shadow: var(--panel-shadow); - } - - .session-management-panel.collapsed { - width: 0; - min-width: 0; - transform: translateX(-100%); - } - - .panel-edge-toggle { - display: none; - } - - .collapsed-panel-toggle { - display: block; - } -} - @media (max-width: 768px) { - .session-management-panel { - width: 100%; - height: auto; - max-height: 60vh; - top: auto; - bottom: 0; - transform: translateY(100%); - } - - .session-management-panel.collapsed { - transform: translateY(100%); - } - - .session-management-panel:not(.collapsed) { - transform: translateY(0); - } - .connection-monitor-bar { flex-direction: column; gap: 8px; @@ -855,6 +685,16 @@ justify-content: center; flex-wrap: wrap; } + + /* 會話管理頁籤響應式調整 */ + .session-panel-content { + gap: 16px; + } + + .stats-grid { + grid-template-columns: 1fr; + gap: 8px; + } } /* ===== 載入狀態 ===== */ @@ -917,7 +757,7 @@ width: 90%; max-height: 80vh; overflow: hidden; - animation: modalSlideIn var(--transition-normal) var(--easing-smooth); + animation: modalSlideIn var(--transition-fast) var(--easing-smooth); } @keyframes modalSlideIn { diff --git a/src/mcp_feedback_enhanced/web/static/js/modules/session-manager.js b/src/mcp_feedback_enhanced/web/static/js/modules/session-manager.js index c4befb7..4f7bc59 100644 --- a/src/mcp_feedback_enhanced/web/static/js/modules/session-manager.js +++ b/src/mcp_feedback_enhanced/web/static/js/modules/session-manager.js @@ -29,15 +29,8 @@ this.detailsModal = null; // UI 狀態 - this.isPanelVisible = true; this.isLoading = false; - // UI 元素 - this.panel = null; - this.edgeToggleBtn = null; - this.collapsedToggleBtn = null; - this.mainContent = null; - // 設定管理器引用 this.settingsManager = options.settingsManager || null; @@ -46,8 +39,7 @@ this.onSessionSelect = options.onSessionSelect || null; this.initializeModules(options); - this.initializeUI(); - this.loadPanelState(); + this.setupEventListeners(); console.log('📋 SessionManager (重構版) 初始化完成'); } @@ -86,33 +78,7 @@ }); }; - /** - * 初始化 UI 元素 - */ - SessionManager.prototype.initializeUI = function() { - const DOMUtils = getDOMUtils(); - if (!DOMUtils) { - console.warn('📋 DOMUtils 尚未載入,使用原生 DOM 方法'); - // 使用原生 DOM 方法作為後備 - this.panel = document.querySelector('.session-management-panel'); - this.edgeToggleBtn = document.querySelector('#edgeToggleBtn'); - this.collapsedToggleBtn = document.querySelector('#collapsedToggleBtn'); - this.mainContent = document.querySelector('.main-content'); - } else { - // 使用 DOMUtils - this.panel = DOMUtils.safeQuerySelector('.session-management-panel'); - this.edgeToggleBtn = DOMUtils.safeQuerySelector('#edgeToggleBtn'); - this.collapsedToggleBtn = DOMUtils.safeQuerySelector('#collapsedToggleBtn'); - this.mainContent = DOMUtils.safeQuerySelector('.main-content'); - } - - // 設置事件監聽器 - this.setupEventListeners(); - - // 初始化顯示 - this.updateDisplay(); - }; /** * 處理會話變更 @@ -156,19 +122,7 @@ const self = this; const DOMUtils = getDOMUtils(); - // 邊緣收合按鈕 - if (this.edgeToggleBtn) { - this.edgeToggleBtn.addEventListener('click', function() { - self.togglePanel(); - }); - } - // 收合狀態下的展開按鈕 - if (this.collapsedToggleBtn) { - this.collapsedToggleBtn.addEventListener('click', function() { - self.togglePanel(); - }); - } // 刷新按鈕 const refreshButton = DOMUtils ? @@ -214,69 +168,7 @@ - /** - * 切換面板顯示 - */ - SessionManager.prototype.togglePanel = function() { - if (!this.panel) return; - const DOMUtils = getDOMUtils(); - this.isPanelVisible = !this.isPanelVisible; - - if (this.isPanelVisible) { - // 展開面板 - this.panel.classList.remove('collapsed'); - if (this.mainContent) { - this.mainContent.classList.remove('panel-collapsed'); - } - - // 隱藏收合狀態下的展開按鈕 - const collapsedToggle = DOMUtils ? - DOMUtils.safeQuerySelector('#collapsedPanelToggle') : - document.querySelector('#collapsedPanelToggle'); - if (collapsedToggle) { - collapsedToggle.style.display = 'none'; - } - - // 更新邊緣按鈕圖示和提示 - this.updateToggleButton('◀', '收合面板'); - } else { - // 收合面板 - this.panel.classList.add('collapsed'); - if (this.mainContent) { - this.mainContent.classList.add('panel-collapsed'); - } - - // 顯示收合狀態下的展開按鈕 - const collapsedToggle = DOMUtils ? - DOMUtils.safeQuerySelector('#collapsedPanelToggle') : - document.querySelector('#collapsedPanelToggle'); - if (collapsedToggle) { - collapsedToggle.style.display = 'block'; - } - - // 更新邊緣按鈕圖示和提示 - this.updateToggleButton('▶', '展開面板'); - } - - // 保存面板狀態到設定 - this.savePanelState(); - - console.log('📋 會話面板', this.isPanelVisible ? '顯示' : '隱藏'); - }; - - /** - * 更新切換按鈕 - */ - SessionManager.prototype.updateToggleButton = function(iconText, title) { - if (this.edgeToggleBtn) { - const icon = this.edgeToggleBtn.querySelector('.toggle-icon'); - if (icon) { - icon.textContent = iconText; - } - this.edgeToggleBtn.setAttribute('title', title); - } - }; /** * 刷新會話數據 @@ -479,83 +371,7 @@ - /** - * 載入面板狀態 - */ - SessionManager.prototype.loadPanelState = function() { - if (!this.settingsManager) { - console.log('📋 沒有設定管理器,使用預設面板狀態'); - return; - } - const isCollapsed = this.settingsManager.get('sessionPanelCollapsed', false); - this.isPanelVisible = !isCollapsed; - - console.log('📋 載入面板狀態:', this.isPanelVisible ? '顯示' : '隱藏'); - - // 應用面板狀態 - this.applyPanelState(); - }; - - /** - * 保存面板狀態 - */ - SessionManager.prototype.savePanelState = function() { - if (!this.settingsManager) { - console.log('📋 沒有設定管理器,無法保存面板狀態'); - return; - } - - const isCollapsed = !this.isPanelVisible; - this.settingsManager.set('sessionPanelCollapsed', isCollapsed); - - console.log('📋 保存面板狀態:', isCollapsed ? '收合' : '展開'); - }; - - /** - * 應用面板狀態 - */ - SessionManager.prototype.applyPanelState = function() { - if (!this.panel) return; - - const DOMUtils = getDOMUtils(); - - if (this.isPanelVisible) { - // 展開面板 - this.panel.classList.remove('collapsed'); - if (this.mainContent) { - this.mainContent.classList.remove('panel-collapsed'); - } - - // 隱藏收合狀態下的展開按鈕 - const collapsedToggle = DOMUtils ? - DOMUtils.safeQuerySelector('#collapsedPanelToggle') : - document.querySelector('#collapsedPanelToggle'); - if (collapsedToggle) { - collapsedToggle.style.display = 'none'; - } - - // 更新邊緣按鈕圖示和提示 - this.updateToggleButton('◀', '收合面板'); - } else { - // 收合面板 - this.panel.classList.add('collapsed'); - if (this.mainContent) { - this.mainContent.classList.add('panel-collapsed'); - } - - // 顯示收合狀態下的展開按鈕 - const collapsedToggle = DOMUtils ? - DOMUtils.safeQuerySelector('#collapsedPanelToggle') : - document.querySelector('#collapsedPanelToggle'); - if (collapsedToggle) { - collapsedToggle.style.display = 'block'; - } - - // 更新邊緣按鈕圖示和提示 - this.updateToggleButton('▶', '展開面板'); - } - }; /** * 更新顯示 @@ -570,6 +386,17 @@ this.uiRenderer.renderStats(stats); }; + /** + * 顯示訊息 + */ + SessionManager.prototype.showMessage = function(message, type) { + if (window.MCPFeedback && window.MCPFeedback.Utils && window.MCPFeedback.Utils.showMessage) { + window.MCPFeedback.Utils.showMessage(message, type); + } else { + console.log('📋 ' + message); + } + }; + /** * 匯出會話歷史 */ @@ -681,11 +508,7 @@ this.detailsModal = null; } - // 清理 UI 引用 - this.panel = null; - this.edgeToggleBtn = null; - this.collapsedToggleBtn = null; - this.mainContent = null; + console.log('📋 SessionManager (重構版) 清理完成'); }; diff --git a/src/mcp_feedback_enhanced/web/static/js/modules/session/session-details-modal.js b/src/mcp_feedback_enhanced/web/static/js/modules/session/session-details-modal.js index de55fb9..b355fed 100644 --- a/src/mcp_feedback_enhanced/web/static/js/modules/session/session-details-modal.js +++ b/src/mcp_feedback_enhanced/web/static/js/modules/session/session-details-modal.js @@ -318,10 +318,8 @@ SessionDetailsModal.prototype.showModal = function() { if (!this.currentModal) return; - // 添加顯示類觸發動畫 - requestAnimationFrame(() => { - DOMUtils.safeAddClass(this.currentModal, 'show'); - }); + // 彈窗已經通過 CSS 動畫自動顯示,無需額外處理 + console.log('🔍 會話詳情彈窗已顯示'); }; /** @@ -336,16 +334,9 @@ this.keydownHandler = null; } - // 添加關閉動畫 - DOMUtils.safeAddClass(this.currentModal, 'hide'); - - // 延遲移除元素 - setTimeout(() => { - if (this.currentModal) { - DOMUtils.safeRemoveElement(this.currentModal); - this.currentModal = null; - } - }, 300); // 與 CSS 動畫時間一致 + // 立即移除元素,無延遲 + DOMUtils.safeRemoveElement(this.currentModal); + this.currentModal = null; }; /** diff --git a/src/mcp_feedback_enhanced/web/templates/feedback.html b/src/mcp_feedback_enhanced/web/templates/feedback.html index a4397cd..28ed78f 100644 --- a/src/mcp_feedback_enhanced/web/templates/feedback.html +++ b/src/mcp_feedback_enhanced/web/templates/feedback.html @@ -476,83 +476,9 @@ -
- -
- -
-

會話管理

-
- -
-
- -
- -
-

當前會話

-
-
-
會話 ID: {{ session_id[:8] if session_id else 'loading' }}...
-
- 等待中 -
-
-
-
建立時間: --:--:--
-
專案: {{ project_directory }}
-
AI 摘要: 載入中...
-
-
- -
-
-
- - -
-

會話歷史

-
-
暫無歷史會話
-
-
- - -
-

統計資訊

-
-
-
0
-
今日會話
-
-
-
--
-
今日平均時長
-
-
-
-
- - -
- -
-
- - - - - -
+
+ +
@@ -570,6 +496,9 @@ + @@ -735,6 +664,69 @@
+ +
+
+ 管理當前會話和歷史會話記錄,查看會話統計資訊。 +
+ + +
+

會話管理

+
+ +
+
+ +
+ +
+

當前會話

+
+
+
會話 ID: {{ session_id[:8] if session_id else 'loading' }}...
+
+ 等待中 +
+
+
+
建立時間: --:--:--
+
專案: {{ project_directory }}
+
AI 摘要: 載入中...
+
+
+ +
+
+
+ + +
+

會話歷史

+
+
暫無歷史會話
+
+
+ + +
+

統計資訊

+
+
+
0
+
今日會話
+
+
+
--
+
今日平均時長
+
+
+
+
+
+