fix: 聊天区系统消息也原地更新进度,不复用 appendSystemMessage 刷屏

通过 sysmsg-video-progress class 标记,进度回调中 querySelector 原地更新 textContent
This commit is contained in:
thzxx
2026-06-18 11:56:38 +08:00
parent a25ce068f9
commit 1246e5c86f
+16 -7
View File
@@ -252,19 +252,22 @@ async function handleVideoPath(filePath: string): Promise<void> {
const name = filePath.split(/[/\\]/).pop() || filePath; const name = filePath.split(/[/\\]/).pop() || filePath;
// 日志:开始 → 进度(原地更新) → 完成 // 聊天区:开始消息(带 class 标记,后续原地更新进度)
logInfo('🎬 正在提取视频帧', name); logInfo('🎬 正在提取视频帧', name);
appendSystemMessage(`🎬 正在提取视频帧 (1fps): ${name}...`); appendSystemMessage(`🎬 正在提取视频帧 (1fps): ${name}...`, 'sysmsg-video-progress');
pendingVideoMeta = { fileName: name, duration: 0, width: 0, height: 0 }; pendingVideoMeta = { fileName: name, duration: 0, width: 0, height: 0 };
renderVideoPreview(); renderVideoPreview();
resetVideoProgress(name); resetVideoProgress(name);
// 监听提取进度:实时更新日志条目 + 视频芯片 // 监听提取进度:实时更新日志条目 + 视频芯片 + 聊天区系统消息
let progressEl: HTMLElement | null = null; let progressEl: HTMLElement | null = null;
bridge.video.onProgress(({ current }) => { bridge.video.onProgress(({ current }) => {
updateVideoProgress(current); updateVideoProgress(current);
if (!progressEl) progressEl = videoPreviewEl.querySelector('.video-meta'); if (!progressEl) progressEl = videoPreviewEl.querySelector('.video-meta');
if (progressEl) progressEl.textContent = `提取中 · ${current}`; if (progressEl) progressEl.textContent = `提取中 · ${current}`;
// 聊天区系统消息原地更新
const sysMsg = document.querySelector('.sysmsg-video-progress');
if (sysMsg) sysMsg.textContent = `🎬 正在提取视频帧 (1fps): ${name}... ${current}`;
}); });
try { try {
@@ -272,10 +275,11 @@ async function handleVideoPath(filePath: string): Promise<void> {
bridge.video.removeProgressListener(); bridge.video.removeProgressListener();
if (!result.success) { if (!result.success) {
const sysMsg = document.querySelector('.sysmsg-video-progress');
if (sysMsg) { sysMsg.classList.remove('sysmsg-video-progress'); sysMsg.textContent = `❌ 视频帧提取失败: ${result.error || ''}`; }
pendingVideoFrames = []; pendingVideoFrames = [];
pendingVideoMeta = null; pendingVideoMeta = null;
renderVideoPreview(); renderVideoPreview();
appendSystemMessage(`❌ 视频帧提取失败: ${result.error || ''}`);
logError('视频帧提取失败', result.error || ''); logError('视频帧提取失败', result.error || '');
return; return;
} }
@@ -283,16 +287,21 @@ async function handleVideoPath(filePath: string): Promise<void> {
pendingVideoFrames = result.frames!; pendingVideoFrames = result.frames!;
pendingVideoMeta = { fileName: name, ...result.videoInfo! }; pendingVideoMeta = { fileName: name, ...result.videoInfo! };
// 完成:新加一条 success 日志,进度条目保留原地 // 完成:聊天区系统消息原地更新为完成
const sysMsg = document.querySelector('.sysmsg-video-progress');
if (sysMsg) {
sysMsg.classList.remove('sysmsg-video-progress');
sysMsg.textContent = `${name}: 已提取 ${pendingVideoFrames.length} 帧 (1fps 采样)`;
}
logSuccess('✅ 视频帧提取完成', `${pendingVideoFrames.length} 帧 / ${pendingVideoMeta.duration.toFixed(1)}s (1fps)`); logSuccess('✅ 视频帧提取完成', `${pendingVideoFrames.length} 帧 / ${pendingVideoMeta.duration.toFixed(1)}s (1fps)`);
appendSystemMessage(`${name}: 已提取 ${pendingVideoFrames.length} 帧 (1fps 采样)`);
renderVideoPreview(); renderVideoPreview();
} catch (err) { } catch (err) {
bridge.video.removeProgressListener(); bridge.video.removeProgressListener();
const sysMsg = document.querySelector('.sysmsg-video-progress');
if (sysMsg) { sysMsg.classList.remove('sysmsg-video-progress'); sysMsg.textContent = `❌ 视频处理失败: ${(err as Error).message}`; }
pendingVideoFrames = []; pendingVideoFrames = [];
pendingVideoMeta = null; pendingVideoMeta = null;
renderVideoPreview(); renderVideoPreview();
appendSystemMessage(`❌ 视频处理失败: ${(err as Error).message}`);
logError('视频帧提取失败', (err as Error).message); logError('视频帧提取失败', (err as Error).message);
} }
} }