diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css index 892a75d89..6ac2b6a2a 100644 --- a/apps/web/src/pages/editing-planner/EditingPlanner.css +++ b/apps/web/src/pages/editing-planner/EditingPlanner.css @@ -6048,3 +6048,78 @@ color: #ef4444; background: #fef2f2; } + + +/* ═══ 生成进度 - 片段状态列表 ═══ */ + +.ep-gen-clip-list { + margin-top: 16px; + max-height: 200px; + overflow-y: auto; + border: 1px solid var(--border-color, #e5e7eb); + border-radius: 8px; + padding: 4px 0; +} + +.ep-gen-clip-item { + display: flex; + align-items: center; + gap: 10px; + padding: 6px 12px; + font-size: 13px; +} + +.ep-gen-clip-item + .ep-gen-clip-item { + border-top: 1px solid var(--border-color-light, #f3f4f6); +} + +.ep-gen-clip-index { + width: 22px; + height: 22px; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-secondary, #f3f4f6); + border-radius: 4px; + font-size: 11px; + color: var(--text-secondary, #6b7280); + flex-shrink: 0; +} + +.ep-gen-clip-name { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--text-primary, #1f2937); +} + +.ep-gen-clip-status { + flex-shrink: 0; + font-size: 12px; + font-weight: 500; +} + +.ep-gen-clip-status.status-completed { + color: #10b981; +} + +.ep-gen-clip-status.status-failed { + color: #ef4444; +} + +.ep-gen-clip-status.status-processing { + color: #3b82f6; + animation: pulse 1.5s infinite; +} + +.ep-gen-clip-status.status-pending, +.ep-gen-clip-status.status-queued { + color: #9ca3af; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx index 485f53ebf..045af65c6 100755 --- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx +++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx @@ -278,6 +278,7 @@ const EditingPlanner: React.FC = () => { const [genError, setGenError] = useState(null); const [genCancelled, setGenCancelled] = useState(false); const [currentGenTaskId, setCurrentGenTaskId] = useState(null); + const [genClipStatuses, setGenClipStatuses] = useState([]); const genTimerRef = useRef | null>(null); /* ── 播放 ── */ @@ -1084,6 +1085,7 @@ const EditingPlanner: React.FC = () => { ).length; setGenDoneClips(done); setGenTotalClips(total); + setGenClipStatuses(status.clips || []); setGenProgress(total > 0 ? Math.round((done / total) * 100) : 5); if (status.plan_status === "completed") { @@ -1465,7 +1467,32 @@ const EditingPlanner: React.FC = () => {

已处理 {genDoneClips}/{genTotalClips} 个片段

-

+ {genClipStatuses.length > 0 && ( +

+ {genClipStatuses.map((clip, index) => ( +
+ {index + 1} + + {clip.text_content + ? clip.text_content.slice(0, 20) + : clip.clip_type || `片段${index + 1}`} + + + {clip.status === "completed" + ? "✓ 完成" + : clip.status === "failed" + ? "✗ 失败" + : clip.status === "processing" + ? "⟳ 处理中" + : "⏳ 等待中"} + +
+ ))} +
+ )} +

请耐心等待,生成过程中请勿关闭页面