feat:输入框居中展示
- 点击历史记录和发起对话之后回到底部
This commit is contained in:
@ -36,7 +36,7 @@ export function getInputAreaContent(
|
||||
maxIcon: string = ''
|
||||
): string {
|
||||
return `
|
||||
<div class="input-area">
|
||||
<div class="input-area centered" id="inputArea">
|
||||
<div class="input-group">
|
||||
<div class="input-wrapper">
|
||||
<!-- 顶部工具栏 -->
|
||||
@ -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);
|
||||
`;
|
||||
}
|
||||
|
||||
@ -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':
|
||||
|
||||
Reference in New Issue
Block a user