diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts index 37e1ea0..5c90150 100644 --- a/src/views/inputArea.ts +++ b/src/views/inputArea.ts @@ -36,7 +36,7 @@ export function getInputAreaContent( maxIcon: string = '' ): string { return ` -
+
@@ -82,6 +82,23 @@ export function getInputAreaStyles(): string { border-top: 1px solid var(--vscode-panel-border); padding-top: 15px; flex-shrink: 0; + transition: all 0.3s ease; + } + /* 居中模式:未发起对话时 */ + .input-area.centered { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: calc(100% - 40px); + max-width: 800px; + border-top: none; + padding-top: 0; + } + /* 底部模式:发起对话后 */ + .input-area.bottom { + position: relative; + transform: none; } .input-group { display: flex; @@ -269,11 +286,28 @@ export function getInputAreaScript(): string { // 对话状态管理 let isConversationActive = false; + let hasMessages = false; // 是否已有消息 // 工作区检测状态 let hasCheckedWorkspace = false; // 是否已经检测过工作区 let hasWorkspace = true; // 工作区状态 + // 切换输入框布局模式 + function updateInputAreaLayout() { + const inputArea = document.getElementById('inputArea'); + if (!inputArea) return; + + if (hasMessages) { + // 有消息时,移到底部 + inputArea.classList.remove('centered'); + inputArea.classList.add('bottom'); + } else { + // 无消息时,居中显示 + inputArea.classList.add('centered'); + inputArea.classList.remove('bottom'); + } + } + // 自动调整 textarea 高度 function autoResizeTextarea() { if (messageInput) { @@ -359,6 +393,10 @@ export function getInputAreaScript(): string { addMessage(text, 'user'); + // 标记已有消息,切换布局到底部 + hasMessages = true; + updateInputAreaLayout(); + // 切换按钮为暂停状态 setSendButtonState(true); @@ -370,5 +408,28 @@ export function getInputAreaScript(): string { // 重置优化状态 resetOptimizeButton(); } + + // 全局函数:重置输入框布局(用于清空对话时) + window.resetInputAreaLayout = function() { + hasMessages = false; + updateInputAreaLayout(); + }; + + // 全局函数:检查是否有消息(用于页面加载时) + window.checkMessagesAndUpdateLayout = function() { + const messagesContainer = document.getElementById('messages'); + if (messagesContainer) { + const messageElements = messagesContainer.querySelectorAll('.message'); + hasMessages = messageElements.length > 0; + updateInputAreaLayout(); + } + }; + + // 页面加载时检查消息状态 + setTimeout(() => { + if (window.checkMessagesAndUpdateLayout) { + window.checkMessagesAndUpdateLayout(); + } + }, 100); `; } diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts index e3f9eeb..3c37bb9 100644 --- a/src/views/webviewContent.ts +++ b/src/views/webviewContent.ts @@ -662,6 +662,10 @@ export function getWebviewContent( if (messagesContainer) { messagesContainer.innerHTML = ''; } + // 重置输入框布局到居中 + if (typeof window.resetInputAreaLayout === 'function') { + window.resetInputAreaLayout(); + } break; case 'addUserMessage': @@ -669,6 +673,10 @@ export function getWebviewContent( if (message.text) { addMessage(message.text, 'user'); } + // 检查并更新输入框布局 + if (typeof window.checkMessagesAndUpdateLayout === 'function') { + window.checkMessagesAndUpdateLayout(); + } break; case 'addAiMessage': @@ -676,6 +684,10 @@ export function getWebviewContent( if (message.text) { addMessage(message.text, 'bot'); } + // 检查并更新输入框布局 + if (typeof window.checkMessagesAndUpdateLayout === 'function') { + window.checkMessagesAndUpdateLayout(); + } break; case 'switchMode':