feat:对话界面将输入框固定在底部

This commit is contained in:
Roe-xin
2025-12-16 15:19:33 +08:00
parent 07bb2d46b0
commit 92f6639741

View File

@ -16,6 +16,7 @@ export function getWebviewContent(iconUri?: string): string {
margin: 0; margin: 0;
padding: 20px; padding: 20px;
height: 100vh; height: 100vh;
box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -33,11 +34,14 @@ export function getWebviewContent(iconUri?: string): string {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0;
overflow: hidden;
} }
.messages { .messages {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
margin-bottom: 15px; margin-bottom: 15px;
min-height: 0;
} }
.message { .message {
margin-bottom: 12px; margin-bottom: 12px;
@ -57,6 +61,7 @@ export function getWebviewContent(iconUri?: string): string {
.input-area { .input-area {
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;
} }
.input-group { .input-group {
display: flex; display: flex;
@ -194,6 +199,7 @@ export function getWebviewContent(iconUri?: string): string {
gap: 8px; gap: 8px;
margin-top: 10px; margin-top: 10px;
flex-wrap: wrap; flex-wrap: wrap;
flex-shrink: 0;
} }
.quick-btn { .quick-btn {
padding: 6px 12px; padding: 6px 12px;
@ -205,11 +211,12 @@ export function getWebviewContent(iconUri?: string): string {
font-size: 12px; font-size: 12px;
} }
.file-reader-section { .file-reader-section {
margin-bottom: 20px; margin-bottom: 15px;
padding: 15px; padding: 15px;
background: var(--vscode-input-background); background: var(--vscode-input-background);
border: 1px solid var(--vscode-input-border); border: 1px solid var(--vscode-input-border);
border-radius: 8px; border-radius: 8px;
flex-shrink: 0;
} }
.file-reader-section h3 { .file-reader-section h3 {
margin: 0 0 10px 0; margin: 0 0 10px 0;
@ -234,7 +241,7 @@ export function getWebviewContent(iconUri?: string): string {
background: var(--vscode-editor-background); background: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border); border: 1px solid var(--vscode-panel-border);
border-radius: 4px; border-radius: 4px;
max-height: 300px; max-height: 120px;
overflow-y: auto; overflow-y: auto;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
font-size: 12px; font-size: 12px;
@ -254,12 +261,13 @@ export function getWebviewContent(iconUri?: string): string {
margin-top: 10px; margin-top: 10px;
} }
.file-editor-section { .file-editor-section {
margin-bottom: 20px; margin-bottom: 15px;
padding: 15px; padding: 15px;
background: var(--vscode-input-background); background: var(--vscode-input-background);
border: 1px solid var(--vscode-input-border); border: 1px solid var(--vscode-input-border);
border-radius: 8px; border-radius: 8px;
display: none; display: none;
flex-shrink: 0;
} }
.file-editor-section.active { .file-editor-section.active {
display: block; display: block;
@ -298,7 +306,6 @@ export function getWebviewContent(iconUri?: string): string {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 0 20px;
height: 40px; height: 40px;
background: transparent; background: transparent;
border: none; border: none;
@ -423,6 +430,7 @@ export function getWebviewContent(iconUri?: string): string {
<p>专注于真实FPGA研发的Verilog智能体编程平台</p> <p>专注于真实FPGA研发的Verilog智能体编程平台</p>
</div> </div>
<div class="chat-container">
<div class="file-reader-section"> <div class="file-reader-section">
<h3>📁 文件读取</h3> <h3>📁 文件读取</h3>
<div class="file-input-group"> <div class="file-input-group">
@ -447,8 +455,6 @@ export function getWebviewContent(iconUri?: string): string {
<button onclick="cancelEdit()" style="background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground);">取消</button> <button onclick="cancelEdit()" style="background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground);">取消</button>
</div> </div>
</div> </div>
<div class="chat-container">
<div id="messages" class="messages"> <div id="messages" class="messages">
<div class="message bot-message"> <div class="message bot-message">
👋 你好!我是 IC Coder 助手,可以帮你生成代码、回答问题。 👋 你好!我是 IC Coder 助手,可以帮你生成代码、回答问题。