feat:进度条收起的功能和发起对话才展示
This commit is contained in:
@ -141,6 +141,9 @@ export async function showICHelperPanel(
|
||||
// 切换到当前面板的任务上下文
|
||||
historyManager.switchToPanelTask(panelId);
|
||||
|
||||
// 显示进度条
|
||||
panel.webview.postMessage({ type: 'showProgress' });
|
||||
|
||||
handleUserMessage(
|
||||
panel,
|
||||
message.text,
|
||||
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user