feat:进度条收起的功能和发起对话才展示
This commit is contained in:
@ -141,6 +141,9 @@ export async function showICHelperPanel(
|
|||||||
// 切换到当前面板的任务上下文
|
// 切换到当前面板的任务上下文
|
||||||
historyManager.switchToPanelTask(panelId);
|
historyManager.switchToPanelTask(panelId);
|
||||||
|
|
||||||
|
// 显示进度条
|
||||||
|
panel.webview.postMessage({ type: 'showProgress' });
|
||||||
|
|
||||||
handleUserMessage(
|
handleUserMessage(
|
||||||
panel,
|
panel,
|
||||||
message.text,
|
message.text,
|
||||||
|
|||||||
@ -12,7 +12,13 @@
|
|||||||
*/
|
*/
|
||||||
export function getProgressBarContent(): string {
|
export function getProgressBarContent(): string {
|
||||||
return `
|
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-steps">
|
||||||
<div class="progress-step" data-step="spec">
|
<div class="progress-step" data-step="spec">
|
||||||
<div class="step-circle">
|
<div class="step-circle">
|
||||||
@ -62,18 +68,67 @@ export function getProgressBarContent(): string {
|
|||||||
export function getProgressBarStyles(): string {
|
export function getProgressBarStyles(): string {
|
||||||
return `
|
return `
|
||||||
.progress-bar-container {
|
.progress-bar-container {
|
||||||
padding: 10px 20px;
|
|
||||||
background: var(--vscode-editor-background);
|
background: var(--vscode-editor-background);
|
||||||
border-bottom: 1px solid var(--vscode-panel-border);
|
border-bottom: 1px solid var(--vscode-panel-border);
|
||||||
margin-bottom: 5px;
|
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 {
|
.progress-steps {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
max-width: 700px;
|
max-width: 700px;
|
||||||
margin: 0 auto;
|
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 {
|
.progress-step {
|
||||||
@ -213,12 +268,60 @@ export function getProgressBarScript(): string {
|
|||||||
const ProgressBar = {
|
const ProgressBar = {
|
||||||
steps: ['spec', 'design', 'simulation', 'done'],
|
steps: ['spec', 'design', 'simulation', 'done'],
|
||||||
currentStep: 'spec',
|
currentStep: 'spec',
|
||||||
|
isCollapsed: false,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 初始化进度条
|
* 初始化进度条
|
||||||
*/
|
*/
|
||||||
init() {
|
init() {
|
||||||
this.updateProgress('spec');
|
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();
|
ProgressBar.reset();
|
||||||
} else if (message.type === 'completeProgress') {
|
} else if (message.type === 'completeProgress') {
|
||||||
ProgressBar.complete();
|
ProgressBar.complete();
|
||||||
|
} else if (message.type === 'showProgress') {
|
||||||
|
ProgressBar.show();
|
||||||
|
} else if (message.type === 'hideProgress') {
|
||||||
|
ProgressBar.hide();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
`;
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user