feat:输入框居中展示

- 点击历史记录和发起对话之后回到底部
This commit is contained in:
Roe-xin
2026-01-05 15:18:03 +08:00
parent de3e84aa4e
commit 27e3351b55
2 changed files with 74 additions and 1 deletions

View File

@ -36,7 +36,7 @@ export function getInputAreaContent(
maxIcon: string = '' maxIcon: string = ''
): string { ): string {
return ` return `
<div class="input-area"> <div class="input-area centered" id="inputArea">
<div class="input-group"> <div class="input-group">
<div class="input-wrapper"> <div class="input-wrapper">
<!-- 顶部工具栏 --> <!-- 顶部工具栏 -->
@ -82,6 +82,23 @@ export function getInputAreaStyles(): string {
border-top: 1px solid var(--vscode-panel-border); border-top: 1px solid var(--vscode-panel-border);
padding-top: 15px; padding-top: 15px;
flex-shrink: 0; 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 { .input-group {
display: flex; display: flex;
@ -269,11 +286,28 @@ export function getInputAreaScript(): string {
// 对话状态管理 // 对话状态管理
let isConversationActive = false; let isConversationActive = false;
let hasMessages = false; // 是否已有消息
// 工作区检测状态 // 工作区检测状态
let hasCheckedWorkspace = false; // 是否已经检测过工作区 let hasCheckedWorkspace = false; // 是否已经检测过工作区
let hasWorkspace = true; // 工作区状态 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 高度 // 自动调整 textarea 高度
function autoResizeTextarea() { function autoResizeTextarea() {
if (messageInput) { if (messageInput) {
@ -359,6 +393,10 @@ export function getInputAreaScript(): string {
addMessage(text, 'user'); addMessage(text, 'user');
// 标记已有消息,切换布局到底部
hasMessages = true;
updateInputAreaLayout();
// 切换按钮为暂停状态 // 切换按钮为暂停状态
setSendButtonState(true); setSendButtonState(true);
@ -370,5 +408,28 @@ export function getInputAreaScript(): string {
// 重置优化状态 // 重置优化状态
resetOptimizeButton(); 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);
`; `;
} }

View File

@ -662,6 +662,10 @@ export function getWebviewContent(
if (messagesContainer) { if (messagesContainer) {
messagesContainer.innerHTML = ''; messagesContainer.innerHTML = '';
} }
// 重置输入框布局到居中
if (typeof window.resetInputAreaLayout === 'function') {
window.resetInputAreaLayout();
}
break; break;
case 'addUserMessage': case 'addUserMessage':
@ -669,6 +673,10 @@ export function getWebviewContent(
if (message.text) { if (message.text) {
addMessage(message.text, 'user'); addMessage(message.text, 'user');
} }
// 检查并更新输入框布局
if (typeof window.checkMessagesAndUpdateLayout === 'function') {
window.checkMessagesAndUpdateLayout();
}
break; break;
case 'addAiMessage': case 'addAiMessage':
@ -676,6 +684,10 @@ export function getWebviewContent(
if (message.text) { if (message.text) {
addMessage(message.text, 'bot'); addMessage(message.text, 'bot');
} }
// 检查并更新输入框布局
if (typeof window.checkMessagesAndUpdateLayout === 'function') {
window.checkMessagesAndUpdateLayout();
}
break; break;
case 'switchMode': case 'switchMode':