feat:进度条收起的功能和发起对话才展示

This commit is contained in:
Roe-xin
2026-01-05 15:27:40 +08:00
parent 27e3351b55
commit 9b0d2d5e01
2 changed files with 112 additions and 2 deletions

View File

@ -141,6 +141,9 @@ export async function showICHelperPanel(
// 切换到当前面板的任务上下文
historyManager.switchToPanelTask(panelId);
// 显示进度条
panel.webview.postMessage({ type: 'showProgress' });
handleUserMessage(
panel,
message.text,

View File

@ -12,7 +12,13 @@
*/
export function getProgressBarContent(): string {
return `
<div class="progress-bar-container">
<div class="progress-bar-container" style="display: none;">
<div class="progress-bar-header">
<span class="progress-bar-title">开发流程</span>
<button class="progress-bar-toggle" title="收起/展开">
<span class="toggle-icon">▼</span>
</button>
</div>
<div class="progress-steps">
<div class="progress-step" data-step="spec">
<div class="step-circle">
@ -62,18 +68,67 @@ export function getProgressBarContent(): string {
export function getProgressBarStyles(): string {
return `
.progress-bar-container {
padding: 10px 20px;
background: var(--vscode-editor-background);
border-bottom: 1px solid var(--vscode-panel-border);
margin-bottom: 5px;
}
.progress-bar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 20px;
cursor: pointer;
user-select: none;
}
.progress-bar-title {
font-size: 11px;
font-weight: 600;
color: var(--vscode-foreground);
}
.progress-bar-toggle {
background: none;
border: none;
color: var(--vscode-foreground);
cursor: pointer;
padding: 2px 6px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
transition: opacity 0.2s;
}
.progress-bar-toggle:hover {
opacity: 1;
}
.toggle-icon {
font-size: 10px;
transition: transform 0.3s ease;
}
.progress-bar-container.collapsed .toggle-icon {
transform: rotate(-90deg);
}
.progress-steps {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 700px;
margin: 0 auto;
padding: 0 20px 10px 20px;
max-height: 60px;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.progress-bar-container.collapsed .progress-steps {
max-height: 0;
padding: 0 20px;
}
.progress-step {
@ -213,12 +268,60 @@ export function getProgressBarScript(): string {
const ProgressBar = {
steps: ['spec', 'design', 'simulation', 'done'],
currentStep: 'spec',
isCollapsed: false,
/**
* 初始化进度条
*/
init() {
this.updateProgress('spec');
this.initToggle();
},
/**
* 初始化收起/展开功能
*/
initToggle() {
const container = document.querySelector('.progress-bar-container');
const header = document.querySelector('.progress-bar-header');
const toggle = document.querySelector('.progress-bar-toggle');
if (!container || !header || !toggle) return;
// 点击头部或按钮都可以切换
const handleToggle = (e) => {
e.stopPropagation();
this.isCollapsed = !this.isCollapsed;
if (this.isCollapsed) {
container.classList.add('collapsed');
} else {
container.classList.remove('collapsed');
}
};
header.addEventListener('click', handleToggle);
toggle.addEventListener('click', handleToggle);
},
/**
* 显示进度条
*/
show() {
const container = document.querySelector('.progress-bar-container');
if (container) {
container.style.display = 'block';
}
},
/**
* 隐藏进度条
*/
hide() {
const container = document.querySelector('.progress-bar-container');
if (container) {
container.style.display = 'none';
}
},
/**
@ -298,6 +401,10 @@ export function getProgressBarScript(): string {
ProgressBar.reset();
} else if (message.type === 'completeProgress') {
ProgressBar.complete();
} else if (message.type === 'showProgress') {
ProgressBar.show();
} else if (message.type === 'hideProgress') {
ProgressBar.hide();
}
});
`;