feat:顶部添加进度条
This commit is contained in:
Roe-xin
304
src/views/progressBar.ts
Normal file
304
src/views/progressBar.ts
Normal file
@ -0,0 +1,304 @@
|
||||
/**
|
||||
* 进度条模块
|
||||
*
|
||||
* 功能说明:
|
||||
* - 显示开发流程进度: Spec -> Design代码编写 -> 仿真检查 -> AST -> Done
|
||||
* - 支持动态更新当前进度状态
|
||||
* - 提供视觉反馈显示已完成和进行中的步骤
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取进度条的 HTML 内容
|
||||
*/
|
||||
export function getProgressBarContent(): string {
|
||||
return `
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-steps">
|
||||
<div class="progress-step" data-step="spec">
|
||||
<div class="step-circle">
|
||||
<span class="step-number">1</span>
|
||||
<span class="step-check">✓</span>
|
||||
</div>
|
||||
<div class="step-label">Spec设计文档</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-line"></div>
|
||||
|
||||
<div class="progress-step" data-step="design">
|
||||
<div class="step-circle">
|
||||
<span class="step-number">2</span>
|
||||
<span class="step-check">✓</span>
|
||||
</div>
|
||||
<div class="step-label">Design代码编写</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-line"></div>
|
||||
|
||||
<div class="progress-step" data-step="simulation">
|
||||
<div class="step-circle">
|
||||
<span class="step-number">3</span>
|
||||
<span class="step-check">✓</span>
|
||||
</div>
|
||||
<div class="step-label">Sim仿真检查</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-line"></div>
|
||||
|
||||
<div class="progress-step" data-step="done">
|
||||
<div class="step-circle">
|
||||
<span class="step-number">4</span>
|
||||
<span class="step-check">✓</span>
|
||||
</div>
|
||||
<div class="step-label">Done完成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取进度条的样式
|
||||
*/
|
||||
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-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--vscode-input-background);
|
||||
border: 2px solid var(--vscode-input-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--vscode-foreground);
|
||||
}
|
||||
|
||||
.step-check {
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
color: var(--vscode-button-foreground);
|
||||
}
|
||||
|
||||
.step-label {
|
||||
margin-top: 4px;
|
||||
font-size: 10px;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: var(--vscode-input-border);
|
||||
margin: 0 6px;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
/* 已完成状态 */
|
||||
.progress-step.completed .step-circle {
|
||||
background: var(--vscode-button-background);
|
||||
border-color: var(--vscode-button-background);
|
||||
}
|
||||
|
||||
.progress-step.completed .step-number {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-step.completed .step-check {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress-step.completed .step-label {
|
||||
color: var(--vscode-foreground);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.progress-step.completed + .progress-line {
|
||||
background: var(--vscode-button-background);
|
||||
}
|
||||
|
||||
/* 进行中状态 */
|
||||
.progress-step.active .step-circle {
|
||||
background: var(--vscode-button-background);
|
||||
border-color: var(--vscode-button-background);
|
||||
box-shadow: 0 0 0 2px var(--vscode-button-background)33;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.progress-step.active .step-number {
|
||||
color: var(--vscode-button-foreground);
|
||||
}
|
||||
|
||||
.progress-step.active .step-label {
|
||||
color: var(--vscode-foreground);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 2px var(--vscode-button-background)33;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 4px var(--vscode-button-background)1a;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.progress-steps {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取进度条的脚本
|
||||
*/
|
||||
export function getProgressBarScript(): string {
|
||||
return `
|
||||
// 进度条管理
|
||||
const ProgressBar = {
|
||||
steps: ['spec', 'design', 'simulation', 'done'],
|
||||
currentStep: 'spec',
|
||||
|
||||
/**
|
||||
* 初始化进度条
|
||||
*/
|
||||
init() {
|
||||
this.updateProgress('spec');
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新进度到指定步骤
|
||||
* @param {string} stepName - 步骤名称
|
||||
*/
|
||||
updateProgress(stepName) {
|
||||
if (!this.steps.includes(stepName)) {
|
||||
console.warn('Invalid step name:', stepName);
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentStep = stepName;
|
||||
const currentIndex = this.steps.indexOf(stepName);
|
||||
|
||||
// 更新所有步骤的状态
|
||||
document.querySelectorAll('.progress-step').forEach((step, index) => {
|
||||
step.classList.remove('completed', 'active');
|
||||
|
||||
if (index < currentIndex) {
|
||||
step.classList.add('completed');
|
||||
} else if (index === currentIndex) {
|
||||
step.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 更新连接线
|
||||
document.querySelectorAll('.progress-line').forEach((line, index) => {
|
||||
if (index < currentIndex) {
|
||||
line.style.background = 'var(--vscode-button-background)';
|
||||
} else {
|
||||
line.style.background = 'var(--vscode-input-border)';
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 前进到下一步
|
||||
*/
|
||||
nextStep() {
|
||||
const currentIndex = this.steps.indexOf(this.currentStep);
|
||||
if (currentIndex < this.steps.length - 1) {
|
||||
this.updateProgress(this.steps[currentIndex + 1]);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置进度条
|
||||
*/
|
||||
reset() {
|
||||
this.updateProgress('spec');
|
||||
},
|
||||
|
||||
/**
|
||||
* 完成所有步骤
|
||||
*/
|
||||
complete() {
|
||||
this.updateProgress('done');
|
||||
// 将最后一步也标记为完成
|
||||
const lastStep = document.querySelector('.progress-step[data-step="done"]');
|
||||
if (lastStep) {
|
||||
lastStep.classList.remove('active');
|
||||
lastStep.classList.add('completed');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化进度条
|
||||
ProgressBar.init();
|
||||
|
||||
// 监听来自扩展的消息以更新进度
|
||||
window.addEventListener('message', (event) => {
|
||||
const message = event.data;
|
||||
if (message.type === 'updateProgress') {
|
||||
ProgressBar.updateProgress(message.step);
|
||||
} else if (message.type === 'resetProgress') {
|
||||
ProgressBar.reset();
|
||||
} else if (message.type === 'completeProgress') {
|
||||
ProgressBar.complete();
|
||||
}
|
||||
});
|
||||
`;
|
||||
}
|
||||
@ -18,6 +18,11 @@ import {
|
||||
getMessageAreaScript,
|
||||
} from "./messageArea";
|
||||
import { getAgentCardStyles, getAgentCardScript } from "./agentCard";
|
||||
import {
|
||||
getProgressBarContent,
|
||||
getProgressBarStyles,
|
||||
getProgressBarScript,
|
||||
} from "./progressBar";
|
||||
import { getCurrentEnv } from "../config/settings";
|
||||
/**
|
||||
* 获取 WebView 面板的 HTML 内容
|
||||
@ -80,6 +85,7 @@ export function getWebviewContent(
|
||||
${getAgentCardStyles()}
|
||||
${getWaveformPreviewContent()}
|
||||
${getConversationHistoryBarStyles()}
|
||||
${getProgressBarStyles()}
|
||||
${getInputAreaStyles()}
|
||||
|
||||
.file-editor-section {
|
||||
@ -385,6 +391,7 @@ export function getWebviewContent(
|
||||
</head>
|
||||
<body>
|
||||
${getConversationHistoryBarContent()}
|
||||
${getProgressBarContent()}
|
||||
<div class="header">
|
||||
<div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
|
||||
<img src="${iconUri}" alt="IC Coder" style="width: 28px; height: 28px;" />
|
||||
@ -701,6 +708,7 @@ export function getWebviewContent(
|
||||
${getAgentCardScript()}
|
||||
${getWaveformPreviewScript()}
|
||||
${getConversationHistoryBarScript()}
|
||||
${getProgressBarScript()}
|
||||
${getInputAreaScript()}
|
||||
</script></body>
|
||||
</html>`;
|
||||
|
||||
Reference in New Issue
Block a user