From de3e84aa4e2b966a7fe7667785fc059f2b3cd92a Mon Sep 17 00:00:00 2001 From: Roe-xin Date: Mon, 5 Jan 2026 11:27:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E9=A1=B6=E9=83=A8=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/progressBar.ts | 304 ++++++++++++++++++++++++++++++++++++ src/views/webviewContent.ts | 8 + 2 files changed, 312 insertions(+) create mode 100644 src/views/progressBar.ts diff --git a/src/views/progressBar.ts b/src/views/progressBar.ts new file mode 100644 index 0000000..de4aad9 --- /dev/null +++ b/src/views/progressBar.ts @@ -0,0 +1,304 @@ +/** + * 进度条模块 + * + * 功能说明: + * - 显示开发流程进度: Spec -> Design代码编写 -> 仿真检查 -> AST -> Done + * - 支持动态更新当前进度状态 + * - 提供视觉反馈显示已完成和进行中的步骤 + */ + +/** + * 获取进度条的 HTML 内容 + */ +export function getProgressBarContent(): string { + return ` +
+
+
+
+ 1 + ✓ +
+
Spec设计文档
+
+ +
+ +
+
+ 2 + ✓ +
+
Design代码编写
+
+ +
+ +
+
+ 3 + ✓ +
+
Sim仿真检查
+
+ +
+ +
+
+ 4 + ✓ +
+
Done完成
+
+
+
+ `; +} + +/** + * 获取进度条的样式 + */ +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(); + } + }); + `; +} diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts index 47a2633..e3f9eeb 100644 --- a/src/views/webviewContent.ts +++ b/src/views/webviewContent.ts @@ -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( ${getConversationHistoryBarContent()} + ${getProgressBarContent()}
IC Coder @@ -701,6 +708,7 @@ export function getWebviewContent( ${getAgentCardScript()} ${getWaveformPreviewScript()} ${getConversationHistoryBarScript()} + ${getProgressBarScript()} ${getInputAreaScript()} `;