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

feat: 实现状态栏显示功能

Browse Source 
- 在消息区域下方添加状态栏 UI（HTML、CSS、JS）
- 支持"思考中..."状态显示（蓝色脉冲动画）
- 支持"生成中..."状态显示（橙色脉冲动画）
- 支持工具执行时显示"正在执行 xxx..."
- 在 messageHandler 中添加状态栏消息发送逻辑
This commit is contained in:
XiaoFeng
2025-12-16 19:20:14 +08:00
parent 7c1f1fae07
commit c21ad95963
2 changed files with 84 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/webviewContent.ts
View File

@ -680,6 +680,41 @@ export function getWebviewContent(iconUri?: string): string {
.question-message.answered .custom-input-container {
display: none;
}
/* 状态栏样式 */
.status-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--vscode-textBlockQuote-background);
border-radius: 6px;
margin: 8px 0;
font-size: 13px;
color: var(--vscode-descriptionForeground);
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--vscode-charts-blue);
animation: statusPulse 1.5s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.status-bar.working .status-indicator {
background: var(--vscode-charts-orange);
}
.status-bar.success .status-indicator {
background: var(--vscode-charts-green);
animation: none;
}
.status-bar.error .status-indicator {
background: var(--vscode-charts-red);
animation: none;
}
</style>
</head>
<body>
@ -722,6 +757,12 @@ export function getWebviewContent(iconUri?: string): string {
</div>
</div>
<!-- 状态栏 -->
<div id="statusBar" class="status-bar" style="display: none;">
<div class="status-indicator"></div>
<span id="statusText">思考中...</span>
</div>
<div class="quick-actions">
<button class="quick-btn" onclick="quickAction('counter')">生成计数器</button>
<button class="quick-btn" onclick="quickAction('fsm')">生成状态机</button>
@ -1116,11 +1157,19 @@ export function getWebviewContent(iconUri?: string): string {
case 'hideLoading':
hideLoadingIndicator();
break;
case 'updateStatus':
updateStatusBar(message.text, message.type || 'thinking');
break;
case 'hideStatus':
hideStatusBar();
break;
case 'toolStart':
addToolStatus(message.toolName, 'start');
updateStatusBar('正在执行 ' + message.toolName + '...', 'working');
break;
case 'toolComplete':
addToolStatus(message.toolName, 'complete', message.result);
hideStatusBar();
break;
case 'toolError':
addToolStatus(message.toolName, 'error', message.error);
@ -1224,6 +1273,25 @@ export function getWebviewContent(iconUri?: string): string {
}
}
// 更新状态栏
function updateStatusBar(text, type) {
const statusBar = document.getElementById('statusBar');
const statusText = document.getElementById('statusText');
if (statusBar && statusText) {
statusText.textContent = text;
statusBar.className = 'status-bar ' + (type || 'thinking');
statusBar.style.display = 'flex';
}
}
// 隐藏状态栏
function hideStatusBar() {
const statusBar = document.getElementById('statusBar');
if (statusBar) {
statusBar.style.display = 'none';
}
}
// 添加工具状态消息
function addToolStatus(toolName, status, detail) {
const statusIcons = {