pengyejiatu/IC-Coder-Plugin
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(sendButton): 添加发送和暂停按钮图标及其状态管理功能

Browse Source
This commit is contained in:
Roe-xin
2025-12-29 14:41:15 +08:00
parent f7c2d86a46
commit 5b6ac43e13
3 changed files with 116 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/constants/toolIcons.ts
View File

@ -50,3 +50,23 @@ export const SearchCode = `
</svg>
</span>
`;
/**
* 发送按钮图标 SVG（向上箭头）
*/
export const sendIconSvg = `
<svg class="send-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M507.904 882.688c-18.432 0-33.28-14.848-33.28-33.28v-655.36c0-18.432 14.848-33.28 33.28-33.28s33.28 14.848 33.28 33.28v654.848c0 18.432-14.848 33.792-33.28 33.792z" fill="currentColor"></path>
<path d="M787.968 502.784c-8.704 0-16.896-3.072-23.552-9.728L507.904 236.544 251.392 493.056c-12.8 12.8-34.304 12.8-47.104 0-12.8-12.8-12.8-34.304 0-47.104l280.064-280.064c6.144-6.144 14.848-9.728 23.552-9.728s17.408 3.584 23.552 9.728l280.064 280.064c12.8 12.8 12.8 34.304 0 47.104-6.656 6.656-15.36 9.728-23.552 9.728z" fill="currentColor"></path>
</svg>
`;
/**
* 暂停按钮图标 SVG（圆形边框内的方块）
*/
export const stopIconSvg = `
<svg class="stop-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 936a424.1 424.1 0 0 1-165.05-814.66 424.1 424.1 0 0 1 330.1 781.33A421.38 421.38 0 0 1 512 936z m0-768c-189.68 0-344 154.32-344 344s154.32 344 344 344 344-154.32 344-344-154.32-344-344-344z" fill="currentColor"></path>
<path d="M349.75 349.75m57.15 0l210.2 0q57.15 0 57.15 57.15l0 210.2q0 57.15-57.15 57.15l-210.2 0q-57.15 0-57.15-57.15l0-210.2q0-57.15 57.15-57.15Z" fill="currentColor"></path>
</svg>
`;

72
src/views/inputArea.ts
View File

@ -29,6 +29,10 @@ import {
getOptimizeButtonStyles,
getOptimizeButtonScript
} from "./optimizeButton";
import {
sendIconSvg,
stopIconSvg
} from "../constants/toolIcons";
/**
* 获取输入区域的 HTML 内容
@ -56,7 +60,10 @@ export function getInputAreaContent(): string {
<div class="input-actions">
${getContextCompressContent()}
${getOptimizeButtonContent()}
<button onclick="sendMessage()">发送</button>
<button id="sendButton" onclick="handleSendOrStop()">
${sendIconSvg}
<span style="display: none;">${stopIconSvg}</span>
</button>
</div>
</div>
</div>
@ -221,6 +228,30 @@ export function getInputAreaStyles(): string {
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
button:hover {
background: var(--vscode-button-hoverBackground);
}
/* 发送按钮状态样式 */
#sendButton {
position: relative;
min-width: 32px;
padding: 6px 8px;
}
#sendButton svg {
width: 14px;
height: 14px;
display: block;
}
#sendButton.sending {
background: var(--vscode-button-background);
}
#sendButton.sending:hover {
background: var(--vscode-button-hoverBackground);
}
`;
}
@ -237,6 +268,9 @@ export function getInputAreaScript(): string {
${getPlanToggleScript()}
${getOptimizeButtonScript()}
// 对话状态管理
let isConversationActive = false;
// 自动调整 textarea 高度
function autoResizeTextarea() {
if (messageInput) {
@ -256,6 +290,38 @@ export function getInputAreaScript(): string {
messageInput.focus();
}
// 切换发送按钮状态
function setSendButtonState(isSending) {
const sendButton = document.getElementById('sendButton');
const children = sendButton.children;
const sendIconContainer = children[0]; // 第一个子元素是发送图标的 SVG
const stopIconContainer = children[1]; // 第二个子元素是包含暂停图标的 span
if (isSending) {
sendButton.classList.add('sending');
sendIconContainer.style.display = 'none';
stopIconContainer.style.display = 'block';
isConversationActive = true;
} else {
sendButton.classList.remove('sending');
sendIconContainer.style.display = 'block';
stopIconContainer.style.display = 'none';
isConversationActive = false;
}
}
// 处理发送或停止
function handleSendOrStop() {
if (isConversationActive) {
// 当前正在对话，执行停止操作
vscode.postMessage({ command: 'abortDialog' });
setSendButtonState(false);
} else {
// 当前未在对话，执行发送操作
sendMessage();
}
}
function sendMessage() {
const text = messageInput.value.trim();
if (!text) return;
@ -264,6 +330,10 @@ export function getInputAreaScript(): string {
const model = getCurrentModel(); // 从模型选择器组件获取当前模型
addMessage(text, 'user');
// 切换按钮为暂停状态
setSendButtonState(true);
vscode.postMessage({ command: 'sendMessage', text: text, mode: mode, model: model });
messageInput.value = '';
autoResizeTextarea(); // 重置输入框高度

25
src/views/webviewContent.ts
View File

@ -347,6 +347,27 @@ export function getWebviewContent(iconUri?: string): string {
background: var(--vscode-charts-red);
animation: none;
}
/* 快捷操作按钮样式 */
.quick-actions {
display: flex;
gap: 10px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.quick-btn {
padding: 8px 16px;
background: var(--vscode-button-secondaryBackground);
color: var(--vscode-button-secondaryForeground);
border: 1px solid var(--vscode-button-border);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
}
.quick-btn:hover {
background: var(--vscode-button-secondaryHoverBackground);
}
</style>
</head>
<body>
@ -437,6 +458,10 @@ export function getWebviewContent(iconUri?: string): string {
// 实时更新分段消息（按后端返回顺序）
console.log('[WebView] 实时更新段落, segments:', message.segments);
updateSegmentsRealtime(message.segments, message.isComplete);
// 如果对话完成，恢复发送按钮状态
if (message.isComplete && typeof setSendButtonState === 'function') {
setSendButtonState(false);
}
break;
case 'receiveSegments':