diff --git a/web/static/css/style.css b/web/static/css/style.css index 1921d298..f11b62d1 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -457,6 +457,104 @@ body { flex-shrink: 0; height: 100%; overflow: hidden; + position: relative; + transition: width 0.2s ease; +} + +/* 对话页左侧列表折叠(腾出空间给主对话区) */ +.conversation-sidebar.collapsed { + width: 56px; +} + +/* 对话列表头部:折叠 + 新对话同一行,不重叠 */ +.conversation-sidebar-header { + display: flex; + flex-direction: row; + align-items: stretch; + gap: 8px; + flex-shrink: 0; +} + +.conversation-sidebar-header .new-chat-btn { + flex: 1; + min-width: 0; + width: auto; /* 覆盖 .new-chat-btn 的 width:100%,让 flex 分配剩余空间 */ +} + +.conversation-sidebar-collapse-btn { + /* 不再使用 absolute,避免盖住「新对话」 */ + position: static; + flex-shrink: 0; + align-self: center; + width: 36px; + height: 36px; + min-width: 36px; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: 8px; + background: var(--bg-primary); + border: 1px solid var(--border-color); + color: var(--text-secondary); + transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); +} + +.conversation-sidebar-collapse-btn:hover { + background: var(--bg-tertiary); + color: var(--text-primary); + border-color: var(--accent-color); +} + +/* 折叠后箭头朝右表示「展开」 */ +.conversation-sidebar.collapsed .conversation-sidebar-collapse-btn { + transform: rotate(180deg); +} + +.conversation-sidebar-collapse-btn svg { + width: 16px; + height: 16px; + stroke: currentColor; +} + +.conversation-sidebar.collapsed .sidebar-content { + display: none; +} + +.conversation-sidebar.collapsed .conversation-sidebar-header { + flex-direction: column; + align-items: center; + padding: 12px 8px; + gap: 10px; + border-bottom: none; +} + +.conversation-sidebar.collapsed .conversation-sidebar-collapse-btn { + order: 2; +} + +.conversation-sidebar.collapsed .new-chat-btn { + order: 1; /* 窄条:先「+」再折叠,纵向排列 */ + width: 40px; + height: 40px; + min-width: 40px; + padding: 0; + margin: 0; + border-radius: 8px; + gap: 0; + flex: none; +} + +/* 折叠时只保留「+」,隐藏「新对话」文案 */ +.conversation-sidebar.collapsed .new-chat-btn span:last-child { + display: none; +} + +.conversation-sidebar.collapsed .new-chat-btn span:first-child { + font-size: 1.5em; + margin: 0; } header { @@ -2593,6 +2691,11 @@ header { height: 100%; overflow: hidden; } + + /* 对话列表折叠态在窄屏下仍保持窄条,避免被 240px 覆盖 */ + .conversation-sidebar.collapsed { + width: 56px; + } .sidebar-content { min-height: 0; diff --git a/web/static/i18n/en-US.json b/web/static/i18n/en-US.json index 9c042d07..5822ed86 100644 --- a/web/static/i18n/en-US.json +++ b/web/static/i18n/en-US.json @@ -104,6 +104,7 @@ }, "chat": { "newChat": "New chat", + "toggleConversationPanel": "Collapse/expand conversation list", "searchHistory": "Search history...", "conversationGroups": "Conversation groups", "addGroup": "New group", @@ -404,7 +405,12 @@ "totalCount": "Total", "enabledCount": "Enabled", "disabledCount": "Disabled", - "connectedCount": "Connected" + "connectedCount": "Connected", + "toolsCountValue": "🔧 {{count}} tools", + "connectionErrorLabel": "Connection error:", + "secondsUnit": "s", + "urlLabel": "URL", + "loadExternalMCPFailed": "Load failed" }, "settings": { "title": "System settings", diff --git a/web/static/i18n/zh-CN.json b/web/static/i18n/zh-CN.json index 90fd5293..3c2d7390 100644 --- a/web/static/i18n/zh-CN.json +++ b/web/static/i18n/zh-CN.json @@ -104,6 +104,7 @@ }, "chat": { "newChat": "新对话", + "toggleConversationPanel": "折叠/展开对话列表", "searchHistory": "搜索历史记录...", "conversationGroups": "对话分组", "addGroup": "新建分组", @@ -404,7 +405,12 @@ "totalCount": "总数", "enabledCount": "已启用", "disabledCount": "已停用", - "connectedCount": "已连接" + "connectedCount": "已连接", + "toolsCountValue": "🔧 {{count}} 个工具", + "connectionErrorLabel": "连接错误:", + "secondsUnit": "秒", + "urlLabel": "URL", + "loadExternalMCPFailed": "加载失败" }, "settings": { "title": "系统设置", diff --git a/web/static/js/router.js b/web/static/js/router.js index 19866608..31c9520c 100644 --- a/web/static/js/router.js +++ b/web/static/js/router.js @@ -243,7 +243,8 @@ function initPage(pageId) { } break; case 'chat': - // 对话页面已由chat.js初始化 + // 恢复对话列表折叠状态(从其他页返回时保持用户选择) + initConversationSidebarState(); break; case 'info-collect': // 信息收集页面 @@ -421,11 +422,36 @@ function initSidebarState() { sidebar.classList.add('collapsed'); } } + initConversationSidebarState(); +} + +// 切换对话页左侧列表折叠/展开 +function toggleConversationSidebar() { + const sidebar = document.getElementById('conversation-sidebar'); + if (sidebar) { + sidebar.classList.toggle('collapsed'); + const isCollapsed = sidebar.classList.contains('collapsed'); + localStorage.setItem('conversationSidebarCollapsed', isCollapsed ? 'true' : 'false'); + } +} + +// 恢复对话列表折叠状态(进入对话页时生效) +function initConversationSidebarState() { + const sidebar = document.getElementById('conversation-sidebar'); + if (sidebar) { + const savedState = localStorage.getItem('conversationSidebarCollapsed'); + if (savedState === 'true') { + sidebar.classList.add('collapsed'); + } else { + sidebar.classList.remove('collapsed'); + } + } } // 导出函数供其他脚本使用 window.switchPage = switchPage; window.toggleSubmenu = toggleSubmenu; window.toggleSidebar = toggleSidebar; +window.toggleConversationSidebar = toggleConversationSidebar; window.currentPage = function() { return currentPage; }; diff --git a/web/static/js/settings.js b/web/static/js/settings.js index 1f114f0f..a44d9f13 100644 --- a/web/static/js/settings.js +++ b/web/static/js/settings.js @@ -1166,7 +1166,8 @@ async function loadExternalMCPs() { console.error('加载外部MCP列表失败:', error); const list = document.getElementById('external-mcp-list'); if (list) { - list.innerHTML = `