mirror of
https://github.com/Minidoracat/mcp-feedback-enhanced.git
synced 2025-07-27 10:42:25 +08:00
🔨 將會話管理轉移到頁籤，避免有些人有瀏覽器問題
This commit is contained in:
Minidoracat
parent
a1f02e2b9d
commit
7e0745deb8
@ -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",
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
"summary": "📋 AI 总结",
|
||||
"commands": "⚡ 命令",
|
||||
"command": "⚡ 命令",
|
||||
"sessions": "📋 会话管理",
|
||||
"settings": "⚙️ 设置",
|
||||
"combined": "📝 工作区",
|
||||
"about": "ℹ️ 关于"
|
||||
@ -205,6 +206,7 @@
|
||||
},
|
||||
"sessionManagement": {
|
||||
"title": "会话管理",
|
||||
"description": "管理当前会话和历史会话记录，查看会话统计信息。",
|
||||
"currentSession": "当前会话",
|
||||
"sessionHistory": "会话历史",
|
||||
"statistics": "统计信息",
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"summary": "📋 AI 摘要",
|
||||
"commands": "⚡ 命令",
|
||||
"command": "⚡ 命令",
|
||||
"sessions": "📋 會話管理",
|
||||
"settings": "⚙️ 設定",
|
||||
"combined": "📝 工作區",
|
||||
"about": "ℹ️ 關於"
|
||||
@ -210,6 +211,7 @@
|
||||
},
|
||||
"sessionManagement": {
|
||||
"title": "會話管理",
|
||||
"description": "管理當前會話和歷史會話記錄，查看會話統計資訊。",
|
||||
"currentSession": "當前會話",
|
||||
"sessionHistory": "會話歷史",
|
||||
"statistics": "統計資訊",
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 (重構版) 清理完成');
|
||||
};
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -476,83 +476,9 @@
|
||||
|
||||
|
||||
<!-- ===== 主內容區域 ===== -->
|
||||
<main class="main-content" style="display: flex; gap: 0;">
|
||||
<!-- ===== 左側會話管理面板 ===== -->
|
||||
<div class="session-management-panel" id="sessionPanel">
|
||||
<!-- 面板標題 -->
|
||||
<div class="panel-header">
|
||||
<h3 data-i18n="sessionManagement.title">會話管理</h3>
|
||||
<div class="panel-controls">
|
||||
<button class="btn-icon" id="refreshSessions" data-i18n-title="sessionManagement.refresh" title="重新整理">
|
||||
🔄
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-content">
|
||||
<!-- 當前活躍會話 -->
|
||||
<div class="current-session-section">
|
||||
<h4 data-i18n="sessionManagement.currentSession">當前會話</h4>
|
||||
<div class="session-card active" id="currentSessionCard">
|
||||
<div class="session-header">
|
||||
<div class="session-id"><span data-i18n="sessionManagement.sessionId">會話 ID</span>: {{ session_id[:8] if session_id else 'loading' }}...</div>
|
||||
<div class="session-status">
|
||||
<span class="status-badge waiting" data-i18n="connectionMonitor.waiting">等待中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-info">
|
||||
<div class="session-time"><span data-i18n="sessionManagement.createdTime">建立時間</span>: --:--:--</div>
|
||||
<div class="session-project"><span data-i18n="sessionManagement.project">專案</span>: {{ project_directory }}</div>
|
||||
<div class="session-summary"><span data-i18n="sessionManagement.aiSummary">AI 摘要</span>: <span data-i18n="sessionManagement.loading">載入中...</span></div>
|
||||
</div>
|
||||
<div class="session-actions">
|
||||
<button class="btn-small" id="viewSessionDetails" data-i18n="sessionManagement.viewDetails">詳細資訊</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 會話歷史記錄 -->
|
||||
<div class="session-history-section">
|
||||
<h4 data-i18n="sessionManagement.sessionHistory">會話歷史</h4>
|
||||
<div class="session-list" id="sessionHistoryList">
|
||||
<div class="no-sessions" data-i18n="sessionManagement.noHistory">暫無歷史會話</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 會話統計 -->
|
||||
<div class="session-stats-section">
|
||||
<h4 data-i18n="sessionManagement.statistics">統計資訊</h4>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value stat-today-count">0</div>
|
||||
<div class="stat-label" data-i18n="sessionManagement.todaySessions">今日會話</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value stat-average-duration">--</div>
|
||||
<div class="stat-label" data-i18n="sessionManagement.todayAverageDuration">今日平均時長</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 邊緣收合/展開按鈕 -->
|
||||
<div class="panel-edge-toggle" id="panelEdgeToggle">
|
||||
<button class="edge-toggle-btn" id="edgeToggleBtn" data-i18n-title="sessionManagement.collapsePanel" title="收合面板">
|
||||
<span class="toggle-icon">◀</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收合狀態下的展開按鈕 -->
|
||||
<div class="collapsed-panel-toggle" id="collapsedPanelToggle" style="display: none;">
|
||||
<button class="collapsed-toggle-btn" id="collapsedToggleBtn" data-i18n-title="sessionManagement.expandPanel" title="展開會話面板">
|
||||
<span class="toggle-icon">▶</span>
|
||||
<span class="toggle-text" data-i18n="sessionManagement.sessionPanel">會話</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ===== 右側主要內容區域 ===== -->
|
||||
<div class="main-content-area" style="flex: 1; min-width: 0;">
|
||||
<main class="main-content">
|
||||
<!-- ===== 主要內容區域 ===== -->
|
||||
<div class="main-content-area">
|
||||
|
||||
<!-- 分頁導航 -->
|
||||
<div class="tabs">
|
||||
@ -570,6 +496,9 @@
|
||||
<button class="tab-button" data-tab="command" data-i18n="tabs.command">
|
||||
⚡ 命令
|
||||
</button>
|
||||
<button class="tab-button" data-tab="sessions" data-i18n="tabs.sessions">
|
||||
📋 會話管理
|
||||
</button>
|
||||
<button class="tab-button" data-tab="settings" data-i18n="tabs.settings">
|
||||
⚙️ 設定
|
||||
</button>
|
||||
@ -735,6 +664,69 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 會話管理分頁 ===== -->
|
||||
<div id="tab-sessions" class="tab-content">
|
||||
<div class="section-description" data-i18n="sessionManagement.description">
|
||||
管理當前會話和歷史會話記錄，查看會話統計資訊。
|
||||
</div>
|
||||
|
||||
<!-- 面板標題和控制 -->
|
||||
<div class="session-panel-header">
|
||||
<h3 data-i18n="sessionManagement.title">會話管理</h3>
|
||||
<div class="panel-controls">
|
||||
<button class="btn-icon" id="refreshSessions" data-i18n-title="sessionManagement.refresh" title="重新整理">
|
||||
🔄
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="session-panel-content">
|
||||
<!-- 當前活躍會話 -->
|
||||
<div class="current-session-section">
|
||||
<h4 data-i18n="sessionManagement.currentSession">當前會話</h4>
|
||||
<div class="session-card active" id="currentSessionCard">
|
||||
<div class="session-header">
|
||||
<div class="session-id"><span data-i18n="sessionManagement.sessionId">會話 ID</span>: {{ session_id[:8] if session_id else 'loading' }}...</div>
|
||||
<div class="session-status">
|
||||
<span class="status-badge waiting" data-i18n="connectionMonitor.waiting">等待中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-info">
|
||||
<div class="session-time"><span data-i18n="sessionManagement.createdTime">建立時間</span>: --:--:--</div>
|
||||
<div class="session-project"><span data-i18n="sessionManagement.project">專案</span>: {{ project_directory }}</div>
|
||||
<div class="session-summary"><span data-i18n="sessionManagement.aiSummary">AI 摘要</span>: <span data-i18n="sessionManagement.loading">載入中...</span></div>
|
||||
</div>
|
||||
<div class="session-actions">
|
||||
<button class="btn-small" id="viewSessionDetails" data-i18n="sessionManagement.viewDetails">詳細資訊</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 會話歷史記錄 -->
|
||||
<div class="session-history-section">
|
||||
<h4 data-i18n="sessionManagement.sessionHistory">會話歷史</h4>
|
||||
<div class="session-list" id="sessionHistoryList">
|
||||
<div class="no-sessions" data-i18n="sessionManagement.noHistory">暫無歷史會話</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 會話統計 -->
|
||||
<div class="session-stats-section">
|
||||
<h4 data-i18n="sessionManagement.statistics">統計資訊</h4>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value stat-today-count">0</div>
|
||||
<div class="stat-label" data-i18n="sessionManagement.todaySessions">今日會話</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value stat-average-duration">--</div>
|
||||
<div class="stat-label" data-i18n="sessionManagement.todayAverageDuration">今日平均時長</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 設定分頁 -->
|
||||
<div id="tab-settings" class="tab-content">
|
||||
<!-- 介面設定卡片 -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user