@@ -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();
}
});
`;