feat: 实现计划管理工具和进度条实时更新
- 添加 plan_step_add/remove/update 和 plan_summary_update 事件支持 - 添加 onPhaseProgress 回调，联动独立进度条组件 - 扩展 MessageSegment 接口支持 progress 类型 - 映射 phaseId (sim -> simulation) 适配进度条
This commit is contained in:
XiaoFeng
@ -18,7 +18,7 @@ import { getUserIdFromToken } from '../utils/jwtUtils';
|
||||
* 消息段落类型
|
||||
*/
|
||||
export interface MessageSegment {
|
||||
type: 'text' | 'tool' | 'question' | 'agent' | 'plan';
|
||||
type: 'text' | 'tool' | 'question' | 'agent' | 'plan' | 'progress';
|
||||
content?: string;
|
||||
toolName?: string;
|
||||
toolStatus?: 'running' | 'success' | 'error';
|
||||
@ -33,8 +33,11 @@ export interface MessageSegment {
|
||||
agentSteps?: AgentStep[];
|
||||
// 计划相关字段
|
||||
planTitle?: string;
|
||||
planPhases?: import('../types/api').PlanPhase[];
|
||||
planSteps?: string[];
|
||||
planSummary?: string;
|
||||
// 进度条相关字段（独立于 plan，用于执行模式）
|
||||
progressPhases?: import('../types/api').PlanPhase[];
|
||||
}
|
||||
|
||||
/**
|
||||
@ -63,7 +66,7 @@ export interface DialogCallbacks {
|
||||
/** 工具确认请求（Ask 模式） */
|
||||
onToolConfirm?: (confirmId: number, toolName: string, toolInput: Record<string, unknown>) => void;
|
||||
/** 计划确认请求（Plan 模式） */
|
||||
onPlanConfirm?: (confirmId: number, title: string, steps: string[], summary: string) => void;
|
||||
onPlanConfirm?: (confirmId: number, title: string, phases: import('../types/api').PlanPhase[] | undefined, steps: string[] | undefined, summary: string) => void;
|
||||
/** 显示问题（ask_user） */
|
||||
onQuestion?: (askId: string, question: string, options: string[]) => void;
|
||||
/** 实时更新段落（流式过程中） */
|
||||
@ -76,6 +79,8 @@ export interface DialogCallbacks {
|
||||
onNotification?: (message: string) => void;
|
||||
/** 上下文使用量更新 */
|
||||
onContextUsage?: (data: { currentTokens: number; maxTokens: number; percentage: number }) => void;
|
||||
/** 阶段进度更新 */
|
||||
onPhaseProgress?: (phaseId: string, status: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -530,10 +535,12 @@ export class DialogSession {
|
||||
const askId = `ask_${data.confirmId}`;
|
||||
|
||||
// 添加计划段落到聊天界面（包含 askId 用于响应）
|
||||
// 支持新格式（phases）和旧格式（steps）
|
||||
this.segments.push({
|
||||
type: 'plan',
|
||||
askId: askId,
|
||||
planTitle: data.title,
|
||||
planPhases: data.phases,
|
||||
planSteps: data.steps,
|
||||
planSummary: data.summary
|
||||
});
|
||||
@ -554,7 +561,108 @@ export class DialogSession {
|
||||
}
|
||||
|
||||
// 调用回调通知 UI
|
||||
callbacks.onPlanConfirm?.(data.confirmId, data.title, data.steps, data.summary);
|
||||
callbacks.onPlanConfirm?.(data.confirmId, data.title, data.phases, data.steps, data.summary);
|
||||
},
|
||||
|
||||
onPhaseProgress: (data: import('../types/api').PhaseProgressEvent) => {
|
||||
console.log('[DialogSession] onPhaseProgress:', data.phaseId, data.status);
|
||||
|
||||
// 1. 尝试更新 plan segment（兼容旧逻辑）
|
||||
for (let i = this.segments.length - 1; i >= 0; i--) {
|
||||
const seg = this.segments[i];
|
||||
if (seg.type === 'plan' && seg.planPhases) {
|
||||
seg.planPhases = seg.planPhases.map(phase => {
|
||||
if (phase.id === data.phaseId) {
|
||||
return { ...phase, status: data.status };
|
||||
}
|
||||
return phase;
|
||||
});
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 通知外部更新独立进度条
|
||||
callbacks.onPhaseProgress?.(data.phaseId, data.status);
|
||||
},
|
||||
|
||||
onPlanStepAdd: (data: import('../types/api').PlanStepAddEvent) => {
|
||||
console.log('[DialogSession] onPlanStepAdd:', data.phaseId, data.step);
|
||||
|
||||
for (let i = this.segments.length - 1; i >= 0; i--) {
|
||||
const seg = this.segments[i];
|
||||
if (seg.type === 'plan' && seg.planPhases) {
|
||||
seg.planPhases = seg.planPhases.map(phase => {
|
||||
if (phase.id === data.phaseId) {
|
||||
const newSteps = [...(phase.steps || [])];
|
||||
if (data.index >= 0 && data.index < newSteps.length) {
|
||||
newSteps.splice(data.index, 0, data.step);
|
||||
} else {
|
||||
newSteps.push(data.step);
|
||||
}
|
||||
return { ...phase, steps: newSteps };
|
||||
}
|
||||
return phase;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
},
|
||||
|
||||
onPlanStepRemove: (data: import('../types/api').PlanStepRemoveEvent) => {
|
||||
console.log('[DialogSession] onPlanStepRemove:', data.phaseId, data.stepIndex);
|
||||
|
||||
for (let i = this.segments.length - 1; i >= 0; i--) {
|
||||
const seg = this.segments[i];
|
||||
if (seg.type === 'plan' && seg.planPhases) {
|
||||
seg.planPhases = seg.planPhases.map(phase => {
|
||||
if (phase.id === data.phaseId && phase.steps) {
|
||||
const newSteps = [...phase.steps];
|
||||
newSteps.splice(data.stepIndex, 1);
|
||||
return { ...phase, steps: newSteps };
|
||||
}
|
||||
return phase;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
},
|
||||
|
||||
onPlanStepUpdate: (data: import('../types/api').PlanStepUpdateEvent) => {
|
||||
console.log('[DialogSession] onPlanStepUpdate:', data.phaseId, data.stepIndex);
|
||||
|
||||
for (let i = this.segments.length - 1; i >= 0; i--) {
|
||||
const seg = this.segments[i];
|
||||
if (seg.type === 'plan' && seg.planPhases) {
|
||||
seg.planPhases = seg.planPhases.map(phase => {
|
||||
if (phase.id === data.phaseId && phase.steps) {
|
||||
const newSteps = [...phase.steps];
|
||||
if (data.stepIndex >= 0 && data.stepIndex < newSteps.length) {
|
||||
newSteps[data.stepIndex] = data.step;
|
||||
}
|
||||
return { ...phase, steps: newSteps };
|
||||
}
|
||||
return phase;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
},
|
||||
|
||||
onPlanSummaryUpdate: (data: import('../types/api').PlanSummaryUpdateEvent) => {
|
||||
console.log('[DialogSession] onPlanSummaryUpdate');
|
||||
|
||||
for (let i = this.segments.length - 1; i >= 0; i--) {
|
||||
const seg = this.segments[i];
|
||||
if (seg.type === 'plan') {
|
||||
seg.planSummary = data.summary;
|
||||
break;
|
||||
}
|
||||
}
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
},
|
||||
|
||||
onAskUser: async (data: AskUserEvent) => {
|
||||
|
||||
@ -45,6 +45,16 @@ export interface SSECallbacks {
|
||||
onToolConfirm?: (data: ToolConfirmEvent) => void;
|
||||
/** 收到计划确认请求（Plan 模式） */
|
||||
onPlanConfirm?: (data: PlanConfirmEvent) => void;
|
||||
/** 阶段进度更新 */
|
||||
onPhaseProgress?: (data: import('../types/api').PhaseProgressEvent) => void;
|
||||
/** 添加计划步骤 */
|
||||
onPlanStepAdd?: (data: import('../types/api').PlanStepAddEvent) => void;
|
||||
/** 删除计划步骤 */
|
||||
onPlanStepRemove?: (data: import('../types/api').PlanStepRemoveEvent) => void;
|
||||
/** 更新计划步骤 */
|
||||
onPlanStepUpdate?: (data: import('../types/api').PlanStepUpdateEvent) => void;
|
||||
/** 更新计划摘要 */
|
||||
onPlanSummaryUpdate?: (data: import('../types/api').PlanSummaryUpdateEvent) => void;
|
||||
/** 工具开始执行 */
|
||||
onToolStart?: (data: ToolStartEvent) => void;
|
||||
/** 工具执行完成 */
|
||||
@ -289,6 +299,21 @@ function dispatchEvent(
|
||||
case 'plan_confirm':
|
||||
callbacks.onPlanConfirm?.(data as PlanConfirmEvent);
|
||||
break;
|
||||
case 'phase_progress':
|
||||
callbacks.onPhaseProgress?.(data as import('../types/api').PhaseProgressEvent);
|
||||
break;
|
||||
case 'plan_step_add':
|
||||
callbacks.onPlanStepAdd?.(data as import('../types/api').PlanStepAddEvent);
|
||||
break;
|
||||
case 'plan_step_remove':
|
||||
callbacks.onPlanStepRemove?.(data as import('../types/api').PlanStepRemoveEvent);
|
||||
break;
|
||||
case 'plan_step_update':
|
||||
callbacks.onPlanStepUpdate?.(data as import('../types/api').PlanStepUpdateEvent);
|
||||
break;
|
||||
case 'plan_summary_update':
|
||||
callbacks.onPlanSummaryUpdate?.(data as import('../types/api').PlanSummaryUpdateEvent);
|
||||
break;
|
||||
case 'tool_start':
|
||||
callbacks.onToolStart?.(data as ToolStartEvent);
|
||||
break;
|
||||
|
||||
@ -56,6 +56,11 @@ export type SSEEventType =
|
||||
| "tool_call" // 客户端工具调用请求
|
||||
| "tool_confirm" // 工具确认请求（Ask 模式）
|
||||
| "plan_confirm" // 计划确认请求（Plan 模式）
|
||||
| "phase_progress" // 阶段进度更新
|
||||
| "plan_step_add" // 添加计划步骤
|
||||
| "plan_step_remove" // 删除计划步骤
|
||||
| "plan_step_update" // 更新计划步骤
|
||||
| "plan_summary_update" // 更新计划摘要
|
||||
| "tool_start" // 工具开始执行
|
||||
| "tool_complete" // 工具执行完成
|
||||
| "tool_error" // 工具执行错误
|
||||
@ -109,20 +114,83 @@ export interface ToolConfirmEvent {
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/** 计划步骤 */
|
||||
export interface PlanStep {
|
||||
/** 步骤名称 */
|
||||
name: string;
|
||||
/** 步骤描述 */
|
||||
description?: string;
|
||||
}
|
||||
|
||||
/** 计划阶段 */
|
||||
export interface PlanPhase {
|
||||
/** 阶段ID: spec/design/sim/done */
|
||||
id: string;
|
||||
/** 阶段名称 */
|
||||
name: string;
|
||||
/** 阶段状态: skipped/completed/current/pending */
|
||||
status: string;
|
||||
/** 跳过原因 */
|
||||
reason?: string;
|
||||
/** 阶段内的步骤 */
|
||||
steps: PlanStep[];
|
||||
}
|
||||
|
||||
/** plan_confirm 事件数据（Plan 模式计划确认） */
|
||||
export interface PlanConfirmEvent {
|
||||
/** 确认ID */
|
||||
confirmId: number;
|
||||
/** 计划标题 */
|
||||
title: string;
|
||||
/** 执行步骤列表 */
|
||||
steps: string[];
|
||||
/** 四阶段计划列表（新格式） */
|
||||
phases?: PlanPhase[];
|
||||
/** 执行步骤列表（旧格式，兼容） */
|
||||
steps?: string[];
|
||||
/** 计划摘要 */
|
||||
summary: string;
|
||||
/** 时间戳 */
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/** phase_progress 事件数据（阶段进度更新） */
|
||||
export interface PhaseProgressEvent {
|
||||
/** 阶段ID: spec/design/sim/done */
|
||||
phaseId: string;
|
||||
/** 状态: current/completed */
|
||||
status: string;
|
||||
/** 时间戳 */
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/** plan_step_add 事件数据（添加计划步骤） */
|
||||
export interface PlanStepAddEvent {
|
||||
phaseId: string;
|
||||
step: PlanStep;
|
||||
index: number;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/** plan_step_remove 事件数据（删除计划步骤） */
|
||||
export interface PlanStepRemoveEvent {
|
||||
phaseId: string;
|
||||
stepIndex: number;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/** plan_step_update 事件数据（更新计划步骤） */
|
||||
export interface PlanStepUpdateEvent {
|
||||
phaseId: string;
|
||||
stepIndex: number;
|
||||
step: PlanStep;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/** plan_summary_update 事件数据（更新计划摘要） */
|
||||
export interface PlanSummaryUpdateEvent {
|
||||
summary: string;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/** ask_user 事件数据 */
|
||||
export interface AskUserEvent {
|
||||
askId: string;
|
||||
|
||||
@ -288,6 +288,36 @@ async function handleUserMessageWithBackend(
|
||||
percentage: data.percentage,
|
||||
});
|
||||
},
|
||||
|
||||
onPhaseProgress: (phaseId, status) => {
|
||||
// 发送阶段进度更新到 WebView
|
||||
// 映射 phaseId: sim -> simulation
|
||||
const stepMap: Record<string, string> = {
|
||||
spec: "spec",
|
||||
design: "design",
|
||||
sim: "simulation",
|
||||
done: "done",
|
||||
};
|
||||
const step = stepMap[phaseId] || phaseId;
|
||||
|
||||
if (status === "current") {
|
||||
// 显示进度条并更新到当前步骤
|
||||
panel.webview.postMessage({ type: "showProgress" });
|
||||
panel.webview.postMessage({ type: "updateProgress", step });
|
||||
} else if (status === "completed") {
|
||||
// 更新到下一步（或完成）
|
||||
const steps = ["spec", "design", "simulation", "done"];
|
||||
const currentIndex = steps.indexOf(step);
|
||||
if (currentIndex < steps.length - 1) {
|
||||
panel.webview.postMessage({
|
||||
type: "updateProgress",
|
||||
step: steps[currentIndex + 1],
|
||||
});
|
||||
} else {
|
||||
panel.webview.postMessage({ type: "completeProgress" });
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mode,
|
||||
serviceTier // 传递服务等级
|
||||
|
||||
@ -211,6 +211,168 @@ export function getPlanCardStyles(): string {
|
||||
.plan-actions .custom-submit:hover {
|
||||
background: var(--vscode-button-hoverBackground);
|
||||
}
|
||||
|
||||
/* 阶段进度条样式 */
|
||||
.phase-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background: var(--vscode-sideBar-background);
|
||||
border-bottom: 1px solid var(--vscode-input-border);
|
||||
}
|
||||
.phase-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
.phase-item.current {
|
||||
color: var(--vscode-textLink-foreground);
|
||||
font-weight: 600;
|
||||
}
|
||||
.phase-item.completed {
|
||||
color: #4caf50;
|
||||
}
|
||||
.phase-item.skipped {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.phase-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--vscode-input-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.phase-dot.current {
|
||||
background: var(--vscode-textLink-foreground);
|
||||
box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2);
|
||||
}
|
||||
.phase-dot.completed {
|
||||
background: #4caf50;
|
||||
}
|
||||
.phase-dot.skipped {
|
||||
background: var(--vscode-descriptionForeground);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.phase-line {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: var(--vscode-input-border);
|
||||
margin: 0 8px;
|
||||
}
|
||||
.phase-line.completed {
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
/* 阶段列表样式 */
|
||||
.plan-phases {
|
||||
font-size: 13px;
|
||||
}
|
||||
.plan-phase {
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid var(--vscode-input-border);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.plan-phase:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.phase-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
background: var(--vscode-list-hoverBackground);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.phase-header:hover {
|
||||
background: var(--vscode-list-activeSelectionBackground);
|
||||
}
|
||||
.phase-toggle {
|
||||
font-size: 10px;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.phase-toggle.expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.phase-name {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
.phase-status {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
background: var(--vscode-badge-background);
|
||||
color: var(--vscode-badge-foreground);
|
||||
}
|
||||
.phase-status.current {
|
||||
background: var(--vscode-textLink-foreground);
|
||||
color: white;
|
||||
}
|
||||
.phase-status.skipped {
|
||||
background: var(--vscode-descriptionForeground);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.phase-status.completed {
|
||||
background: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
.phase-content {
|
||||
padding: 0 12px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease, padding 0.3s ease;
|
||||
}
|
||||
.phase-content.expanded {
|
||||
padding: 12px;
|
||||
max-height: 500px;
|
||||
}
|
||||
.phase-reason {
|
||||
font-size: 12px;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
font-style: italic;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.phase-steps {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.phase-step-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid var(--vscode-input-border);
|
||||
}
|
||||
.phase-step-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.phase-step-checkbox {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid var(--vscode-textLink-foreground);
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.phase-step-text {
|
||||
flex: 1;
|
||||
}
|
||||
.phase-step-name {
|
||||
font-weight: 500;
|
||||
color: var(--vscode-foreground);
|
||||
}
|
||||
.phase-step-desc {
|
||||
font-size: 12px;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
margin-top: 2px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -330,6 +492,89 @@ export function getPlanCardScript(): string {
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 渲染阶段进度条
|
||||
function renderPhaseProgress(phases) {
|
||||
if (!phases || phases.length === 0) return '';
|
||||
|
||||
const phaseNames = { spec: 'Spec', design: 'Design', sim: 'Sim', done: 'Done' };
|
||||
let html = '<div class="phase-progress">';
|
||||
|
||||
phases.forEach((phase, i) => {
|
||||
const name = phaseNames[phase.id] || phase.name || phase.id;
|
||||
const status = phase.status || 'pending';
|
||||
|
||||
html += \`<div class="phase-item \${status}">
|
||||
<span class="phase-dot \${status}"></span>
|
||||
<span>\${name}</span>
|
||||
</div>\`;
|
||||
|
||||
// 添加连接线（最后一个不加）
|
||||
if (i < phases.length - 1) {
|
||||
const lineStatus = (status === 'completed' || status === 'skipped') ? 'completed' : '';
|
||||
html += \`<div class="phase-line \${lineStatus}"></div>\`;
|
||||
}
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
// 渲染阶段列表（两级结构）
|
||||
function renderPlanPhases(phases) {
|
||||
if (!phases || phases.length === 0) return '';
|
||||
|
||||
const statusLabels = {
|
||||
skipped: '跳过',
|
||||
completed: '已完成',
|
||||
current: '当前',
|
||||
pending: '待执行'
|
||||
};
|
||||
|
||||
return phases.map((phase, i) => {
|
||||
const status = phase.status || 'pending';
|
||||
const statusLabel = statusLabels[status] || status;
|
||||
const isExpanded = status === 'current';
|
||||
const hasSteps = phase.steps && phase.steps.length > 0;
|
||||
const hasReason = phase.reason && status === 'skipped';
|
||||
|
||||
let stepsHtml = '';
|
||||
if (phase.steps && phase.steps.length > 0) {
|
||||
stepsHtml = phase.steps.map(step => \`
|
||||
<li class="phase-step-item">
|
||||
<span class="phase-step-checkbox"></span>
|
||||
<div class="phase-step-text">
|
||||
<div class="phase-step-name">\${step.name || ''}</div>
|
||||
\${step.description ? \`<div class="phase-step-desc">\${step.description}</div>\` : ''}
|
||||
</div>
|
||||
</li>
|
||||
\`).join('');
|
||||
}
|
||||
|
||||
return \`
|
||||
<div class="plan-phase" data-phase-id="\${phase.id}">
|
||||
<div class="phase-header" onclick="togglePhase(this)">
|
||||
<span class="phase-toggle \${isExpanded ? 'expanded' : ''}">▶</span>
|
||||
<span class="phase-name">\${phase.name || phase.id}</span>
|
||||
<span class="phase-status \${status}">\${statusLabel}</span>
|
||||
</div>
|
||||
<div class="phase-content \${isExpanded ? 'expanded' : ''}">
|
||||
\${hasReason ? \`<div class="phase-reason">\${phase.reason}</div>\` : ''}
|
||||
\${hasSteps ? \`<ul class="phase-steps">\${stepsHtml}</ul>\` : ''}
|
||||
\${!hasSteps && !hasReason ? '<div class="phase-reason">暂无步骤</div>' : ''}
|
||||
</div>
|
||||
</div>
|
||||
\`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 切换阶段展开/折叠
|
||||
function togglePhase(header) {
|
||||
const toggle = header.querySelector('.phase-toggle');
|
||||
const content = header.nextElementSibling;
|
||||
toggle.classList.toggle('expanded');
|
||||
content.classList.toggle('expanded');
|
||||
}
|
||||
|
||||
// 渲染计划卡片（在 updateSegmentsRealtime 中使用）
|
||||
function renderPlanCardInSegment(segment, segmentDiv, answeredQuestions) {
|
||||
segmentDiv.className += ' segment-plan';
|
||||
@ -342,8 +587,15 @@ export function getPlanCardScript(): string {
|
||||
segmentDiv.classList.add('answered');
|
||||
}
|
||||
|
||||
// 解析并渲染步骤
|
||||
const stepsHtml = renderPlanSteps(segment.planSteps || []);
|
||||
// 判断是否有 phases（新格式）还是 steps（旧格式）
|
||||
const hasPhases = segment.planPhases && segment.planPhases.length > 0;
|
||||
|
||||
// 渲染阶段进度条和阶段列表（新格式）
|
||||
const progressHtml = hasPhases ? renderPhaseProgress(segment.planPhases) : '';
|
||||
const phasesHtml = hasPhases ? renderPlanPhases(segment.planPhases) : '';
|
||||
|
||||
// 兼容旧格式：渲染步骤列表
|
||||
const stepsHtml = !hasPhases ? renderPlanSteps(segment.planSteps || []) : '';
|
||||
|
||||
// 选项按钮
|
||||
const options = ['确认执行', '修改计划', '取消'];
|
||||
@ -361,9 +613,10 @@ export function getPlanCardScript(): string {
|
||||
<span class="plan-icon">${plannerIconSvg}</span>
|
||||
<span class="plan-title">\${segment.planTitle || '执行计划'}</span>
|
||||
</div>
|
||||
\${progressHtml}
|
||||
<div class="plan-body">
|
||||
<div class="plan-summary">\${summaryHtml}</div>
|
||||
<div class="plan-steps">\${stepsHtml}</div>
|
||||
\${hasPhases ? \`<div class="plan-phases">\${phasesHtml}</div>\` : \`<div class="plan-steps">\${stepsHtml}</div>\`}
|
||||
</div>
|
||||
<div class="plan-actions">
|
||||
<div class="question-options" data-ask-id="\${segment.askId}">\${optionsHtml}</div>
|
||||
@ -424,7 +677,16 @@ export function getPlanCardScript(): string {
|
||||
// 渲染计划卡片（在 renderSegments 中使用）
|
||||
function renderPlanCardStatic(segment, segmentDiv) {
|
||||
segmentDiv.className += ' segment-plan';
|
||||
const stepsHtml = renderPlanSteps(segment.planSteps || []);
|
||||
|
||||
// 判断是否有 phases（新格式）还是 steps（旧格式）
|
||||
const hasPhases = segment.planPhases && segment.planPhases.length > 0;
|
||||
|
||||
// 渲染阶段进度条和阶段列表（新格式）
|
||||
const progressHtml = hasPhases ? renderPhaseProgress(segment.planPhases) : '';
|
||||
const phasesHtml = hasPhases ? renderPlanPhases(segment.planPhases) : '';
|
||||
|
||||
// 兼容旧格式：渲染步骤列表
|
||||
const stepsHtml = !hasPhases ? renderPlanSteps(segment.planSteps || []) : '';
|
||||
|
||||
// 渲染 Markdown 格式的摘要
|
||||
const summaryHtml = renderPlanMarkdown(segment.planSummary || '');
|
||||
@ -435,9 +697,10 @@ export function getPlanCardScript(): string {
|
||||
<span class="plan-icon">📋</span>
|
||||
<span class="plan-title">\${segment.planTitle || '执行计划'}</span>
|
||||
</div>
|
||||
\${progressHtml}
|
||||
<div class="plan-body">
|
||||
<div class="plan-summary">\${summaryHtml}</div>
|
||||
<div class="plan-steps">\${stepsHtml}</div>
|
||||
\${hasPhases ? \`<div class="plan-phases">\${phasesHtml}</div>\` : \`<div class="plan-steps">\${stepsHtml}</div>\`}
|
||||
</div>
|
||||
<div class="plan-actions">
|
||||
<button class="plan-btn plan-btn-confirm" data-action="confirm">确认执行</button>
|
||||
|
||||
Reference in New Issue
Block a user