diff --git a/templates/index.html b/templates/index.html
index 2544cfb..8af0b6b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -23,6 +23,10 @@
overflow-x: hidden;
}
+ :root {
+ --console-offset: 52px; /* app切换行 + 状态条的预留高度，运行时同步 */
+ }
+
.container {
max-width: 100vw;
height: 100vh; /* 固定高度为视口高度 */
@@ -177,7 +181,7 @@
.upload-button input[type="file"] {
position: absolute;
left: 0;
- top: 0;
+ top: 52px; /* 运行时再用JS同步为app-switcher的真实高度 */
width: 100%;
height: 100%;
opacity: 0;
@@ -238,6 +242,7 @@
background-color: #ffffff;
min-height: 0; /* 允许子元素缩小 */
overflow: hidden; /* 防止内容溢出 */
+ position: relative; /* 让状态栏悬浮不占用布局空间 */
}
/* 应用切换按钮 */
@@ -330,7 +335,11 @@
/* 控制台状态栏 - 显示系统消息而不干扰日志查看 */
.console-status-bar {
- height: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 26px;
overflow: hidden;
background: linear-gradient(180deg, rgba(0, 120, 0, 0.95) 0%, rgba(0, 100, 0, 0.9) 100%);
color: #00ff00;
@@ -342,13 +351,17 @@
display: flex;
justify-content: space-between;
align-items: center;
- transition: height 0.3s ease, padding 0.3s ease;
+ pointer-events: none; /* 不抢占滚动 */
+ z-index: 2;
+ opacity: 0;
+ transform: translateY(-110%);
+ transition: transform 0.2s ease, opacity 0.2s ease;
line-height: 26px;
}
.console-status-bar.visible {
- height: 26px;
- padding: 0 15px;
+ opacity: 1;
+ transform: translateY(0);
}
.console-status-bar .status-message {
@@ -372,7 +385,7 @@
left: 0;
width: 100%;
height: 100%; /* 填满整个黑色框 */
- padding: 15px; /* 图层内边距 */
+ padding: var(--console-offset, 52px) 15px 15px; /* 顶部预留给状态栏与按钮，不影响滚动计算 */
overflow-y: auto; /* 允许独立滚动 */
overflow-x: hidden;
box-sizing: border-box; /* 包含padding在width/height内 */
@@ -1540,8 +1553,13 @@
this.maxVisible = 150; // ↑ from 120（增加可见行数）
this.maxLines = 50000; // ↑ from 10000（5倍提升，约5MB/app）
this.trimTarget = 40000; // ↑ from 8000（保留更多历史）
- this.maxPoolSize = 300; // ↑ from 200（更大DOM池）
this.preRenderBuffer = 90; // 新增：上下各预渲染90行，提升滚动流畅度
+ this.minPoolSize = 220; // 保底DOM池，避免窗口渲染空白
+ this.poolHardLimit = 800; // 池子硬上限，防止撑爆内存
+ this.maxPoolSize = Math.max(
+ this.minPoolSize,
+ this.maxVisible + this.preRenderBuffer * 2 + 50
+ ); // 默认覆盖可视窗口+缓冲区，再留一些余量
this.rafId = null;
this.autoScrollEnabled = true;
this.resumeDelay = 3000;
@@ -1553,6 +1571,10 @@
this.scrollHandler = null;
this.beforeSpacer = null;
this.afterSpacer = null;
+ this.watchdogTimer = null;
+ this.lastRenderAt = 0;
+ this.idleTimer = null;
+ this.idleTimeout = 3000; // 用户3秒不滚动后自动吸附
// 【优化吸附逻辑】记录用户滚动位置，用于智能恢复
this.lastUserScrollPosition = 0; // 用户上次滚动的位置
@@ -1605,6 +1627,90 @@
}
}
+ clearIdleTimer() {
+ if (this.idleTimer) {
+ clearTimeout(this.idleTimer);
+ this.idleTimer = null;
+ }
+ }
+
+ startIdleTimer() {
+ this.clearIdleTimer();
+ this.idleTimer = setTimeout(() => {
+ this.autoScrollEnabled = true;
+ this.needsScroll = true;
+ this.clearResumeTimer();
+ this.scrollToBottom();
+ }, this.idleTimeout);
+ }
+
+ // 保障DOM池容量，避免可视窗口比池子大导致空白
+ ensurePoolCapacity(neededCount) {
+ if (!Number.isFinite(neededCount)) return;
+
+ // 根据需求量和基线计算DOM池大小，避免窗口比池子大
+ const baseline = Math.min(this.minPoolSize, neededCount + 80);
+ const targetSize = Math.min(
+ Math.max(neededCount, baseline, this.pool.length),
+ this.poolHardLimit
+ );
+
+ if (targetSize > this.maxPoolSize) {
+ this.maxPoolSize = targetSize;
+ }
+
+ const missing = Math.max(0, targetSize - this.pool.length);
+ for (let i = 0; i < missing; i++) {
+ const node = document.createElement('div');
+ node.className = 'console-line';
+ this.pool.push(node);
+ }
+ }
+
+ // DOM意外空白时强制刷新
+ forceRenderIfBlank() {
+ if (!this.container) return false;
+ if (this.lines.length === 0) return false;
+ if (this.container.querySelector('.console-line')) return false;
+ this.lastRenderHash = null;
+ this.needsScroll = true;
+ this.scheduleRender(true);
+ return true;
+ }
+
+ startWatchdog() {
+ if (this.watchdogTimer) return;
+ this.watchdogTimer = setInterval(() => {
+ if (!this.container) return;
+ // 黑屏兜底：有数据但没有节点时强制渲染
+ const hasLines = this.lines.length > 0;
+ const hasNodes = !!this.container.querySelector('.console-line');
+ if (hasLines && !hasNodes && !this.isRendering) {
+ this.lastRenderHash = null;
+ this.needsScroll = true;
+ this.updateStatusBar('正在恢复显示...', '检测到渲染延迟', false, 1200);
+ this.scheduleRender(true);
+ return;
+ }
+
+ // 渲染长时间未推进时，提醒并触发一次刷新
+ const now = performance.now();
+ if (hasLines && this.pending.length > 0 && now - this.lastRenderAt > 1500 && !this.isRendering) {
+ this.lastRenderHash = null;
+ this.needsScroll = true;
+ this.updateStatusBar('日志渲染中...', `${this.pending.length} 条待显示`, false, 1200);
+ this.scheduleRender(true);
+ }
+ }, 800);
+ }
+
+ stopWatchdog() {
+ if (this.watchdogTimer) {
+ clearInterval(this.watchdogTimer);
+ this.watchdogTimer = null;
+ }
+ }
+
attachScroll() {
if (!this.scrollElement) return;
if (this.scrollHandler) return; // 防止重复绑定
@@ -1673,6 +1779,9 @@
// 显示状态栏
this.statusBar.classList.add('visible');
+ if (this.layoutCache) {
+ this.layoutCache.invalidate();
+ }
// 清除之前的自动隐藏定时器
if (this.statusBarTimer) {
@@ -1686,6 +1795,9 @@
if (this.statusBar) {
this.statusBar.classList.remove('visible');
}
+ if (this.layoutCache) {
+ this.layoutCache.invalidate();
+ }
this.statusBarTimer = null;
}, duration);
}
@@ -1699,6 +1811,9 @@
this.statusBarTimer = null;
}
this.statusBar.classList.remove('visible');
+ if (this.layoutCache) {
+ this.layoutCache.invalidate();
+ }
}
// 添加清理方法
@@ -1707,6 +1822,7 @@
console.log('[性能统计] 最终统计:', this.getPerformanceStats());
// 清理定时器
+ this.stopWatchdog();
if (this.rafId) {
cancelAnimationFrame(this.rafId);
this.rafId = null;
@@ -1716,6 +1832,7 @@
clearTimeout(this.flushTimer);
this.flushTimer = null;
}
+ this.clearIdleTimer();
if (this.statusBarTimer) {
clearTimeout(this.statusBarTimer);
this.statusBarTimer = null;
@@ -1779,7 +1896,7 @@
// 计算距离底部的距离
const distanceFromBottom = scrollHeight - clientHeight - currentScrollTop;
- const atBottom = distanceFromBottom <= 50; // 50px阈值
+ const atBottom = distanceFromBottom <= 80; // 更宽松的阈值，减少误判
if (atBottom) {
// 用户主动滚动到底部，立即启用自动滚动
@@ -1808,6 +1925,7 @@
this.clearResumeTimer();
const delay = this.calculateResumeDelay(distanceFromBottom);
this.startResumeTimer(delay);
+ this.startIdleTimer();
return;
}
@@ -1815,10 +1933,12 @@
console.log(`[自动吸附] 用户离开底部 ${Math.round(distanceFromBottom)}px，禁用自动滚动`);
this.autoScrollEnabled = false;
this.clearResumeTimer();
+ this.clearIdleTimer();
// 智能计算恢复时间
const delay = this.calculateResumeDelay(distanceFromBottom);
this.startResumeTimer(delay);
+ this.startIdleTimer();
}
/**
@@ -1847,6 +1967,7 @@
console.log(`[自动吸附] ${delay}ms后恢复自动滚动，吸附到最新日志`);
this.autoScrollEnabled = true;
this.userScrollDistance = 0;
+ this.needsScroll = true;
// 【优化】恢复时立即吸附到最新
// 如果有新内容已经渲染完成，直接滚动到最新位置
@@ -1891,10 +2012,11 @@
}
// 【优化判断】智能阈值：
- // - 如果内容少（scrollHeight < 1000px），阈值30px（宽容）
- // - 如果内容多，阈值50px（标准）
- // 这样能更好地适应不同内容量的情况
- const threshold = scrollHeight < 1000 ? 30 : 50;
+ // - 超小内容时使用30px
+ // - 常规50px
+ // - 当存在状态条/顶部padding时，再增加20px缓冲
+ const baseThreshold = scrollHeight < 1000 ? 30 : 50;
+ const threshold = baseThreshold + 20;
const distanceFromBottom = scrollHeight - clientHeight - scrollTop;
return distanceFromBottom <= threshold;
@@ -1915,9 +2037,42 @@
return this.isNearBottom();
}
+ // 将最新一行吸附到可视区域内，而不是盲目对齐到底部
+ scrollLatestIntoView(margin = 12) {
+ if (!this.scrollElement || this.scrollLocked) return false;
+ const lastLine = this.scrollElement.querySelector('.console-line:last-of-type');
+ if (!lastLine) return false;
+
+ const container = this.scrollElement;
+ // 最新一行希望落在视口内并留出少量下边距
+ const desiredBottom = container.clientHeight - margin;
+ const delta = lastLine.offsetTop + lastLine.offsetHeight - desiredBottom;
+ if (delta > 1 || delta < -1) {
+ this.scrollLocked = true;
+ requestAnimationFrame(() => {
+ container.scrollTop = Math.max(0, container.scrollTop + delta);
+ if (this.layoutCache) {
+ this.layoutCache.invalidate();
+ }
+ setTimeout(() => {
+ this.scrollLocked = false;
+ }, 80);
+ });
+ }
+ return true;
+ }
+
scrollToBottom() {
if (!this.scrollElement) return;
+ // 优先将最新一行吸附到视口内，保留边距，避免“对齐页面底部”的跳动
+ const snapped = this.scrollLatestIntoView(16);
+ if (snapped) {
+ this.needsScroll = false;
+ this.startIdleTimer();
+ return;
+ }
+
// 【修复黑屏】如果正在渲染，延迟滚动避免冲突
if (this.isRendering) {
requestAnimationFrame(() => this.scrollToBottom());
@@ -1989,6 +2144,7 @@
}
}
this.needsScroll = false;
+ this.startIdleTimer();
// 解锁滚动（平滑滚动需要更长时间）
setTimeout(() => {
@@ -2016,9 +2172,12 @@
this.isActive = active;
if (active) {
+ this.startWatchdog();
+
// 【新增逻辑】切换引擎时，重置为自动吸附状态
// 默认用户鼠标未滑动3秒以上
this.autoScrollEnabled = true;
+ this.needsScroll = true;
this.clearResumeTimer();
// 【修复】窗口激活时，清除渲染哈希，确保强制渲染
@@ -2112,6 +2271,17 @@
});
}
}
+
+ // 保证切换后立即同步最新内容
+ this.scheduleRender(true);
+ this.startIdleTimer();
+
+ if (this.lines.length > 0) {
+ requestAnimationFrame(() => this.scrollToBottom());
+ }
+ } else {
+ this.stopWatchdog();
+ this.clearIdleTimer();
}
}
@@ -2179,12 +2349,25 @@
}
append(text, className = 'console-line') {
+ const nearBottom = this.isNearBottom();
+
// 在添加内容前检查是否在底部，如果是则标记需要滚动
- if (this.autoScrollEnabled && this.isNearBottom()) {
+ if (this.autoScrollEnabled && nearBottom) {
this.needsScroll = true;
+ } else if (!this.autoScrollEnabled && nearBottom) {
+ // 用户并未真正离开底部，自动恢复吸附
+ this.autoScrollEnabled = true;
+ this.needsScroll = true;
+ this.clearResumeTimer();
}
this.pending.push({ text, className });
+ this.pendingHighWaterMark = Math.max(this.pendingHighWaterMark, this.pending.length);
+
+ // 队列堆积时给出进度提示（仅当前活动窗口）
+ if (this.isActive && this.pending.length > 150) {
+ this.updateStatusBar('日志渲染中...', `${this.pending.length} 条排队`, false, 1200);
+ }
// 【修复黑屏】统一批处理逻辑 - 所有窗口都实时渲染
// 清除之前的定时器
@@ -2206,6 +2389,9 @@
}, this.batchDelay);
}
+ // 如果容器当前是空的，强制渲染一次，避免“黑屏等待”
+ this.forceRenderIfBlank();
+
this.maybeTrim();
}
@@ -2332,6 +2518,7 @@
this.beforeSpacer = null;
this.afterSpacer = null;
}
+ this.lastRenderAt = performance.now();
return;
}
@@ -2349,6 +2536,7 @@
}
this.lastRenderHash = contentHash;
this.lastRenderLineCount = total;
+ this.lastRenderAt = performance.now();
// 【优化】计算可见区域
const lh = this.lineHeight;
@@ -2374,14 +2562,33 @@
const bufferStart = Math.max(0, rawStart - this.preRenderBuffer);
const bufferEnd = Math.min(total, rawStart + visible + this.preRenderBuffer);
- const start = bufferStart;
- const end = bufferEnd;
+ let start = bufferStart;
+ let end = bufferEnd;
+ let needed = Math.max(0, end - start);
+
+ // 【修复白屏】先保证DOM池容量足够覆盖当前窗口
+ this.ensurePoolCapacity(needed);
+
+ // 如果窗口仍超过池容量，收缩窗口贴近最新日志，防止中间缺口
+ if (needed > this.pool.length) {
+ const windowSize = this.pool.length || this.minPoolSize;
+ end = Math.min(total, Math.max(end, windowSize));
+ start = Math.max(0, end - windowSize);
+ needed = Math.max(0, end - start);
+ }
+
+ if (needed === 0 && total > 0) {
+ // 极端情况下兜底展示最新日志，避免空白
+ end = total;
+ start = Math.max(0, end - Math.min(this.maxVisible, total));
+ needed = end - start;
+ this.ensurePoolCapacity(needed);
+ }
+
const beforeHeight = start * lh;
const afterHeight = (total - end) * lh;
- const needed = Math.max(0, end - start);
-
- // 【优化】限制DOM节点池大小
+ // 【优化】限制DOM节点池大小（在更新池容量后执行）
if (this.pool.length > this.maxPoolSize) {
const excess = this.pool.length - this.maxPoolSize;
this.pool.splice(this.maxPoolSize, excess).forEach(node => {
@@ -2391,16 +2598,8 @@
});
}
- // 【优化】批量创建DOM节点，减少DOM操作
- const nodesToCreate = needed - this.pool.length;
- if (nodesToCreate > 0 && this.pool.length < this.maxPoolSize) {
- const fragment = document.createDocumentFragment();
- for (let i = 0; i < Math.min(nodesToCreate, this.maxPoolSize - this.pool.length); i++) {
- const node = document.createElement('div');
- node.className = 'console-line';
- this.pool.push(node);
- }
- }
+ // 再次兜底，确保池容量与窗口一致
+ this.ensurePoolCapacity(needed);
// 【优化】复用或创建占位符
if (!this.beforeSpacer) {
@@ -2479,6 +2678,8 @@
this.scrollToBottom();
});
}
+
+ this.lastRenderAt = performance.now();
});
} else {
// 【优化】增量更新：智能diff算法，只更新必要的节点
@@ -2579,6 +2780,8 @@
this.scrollToBottom();
});
}
+
+ this.lastRenderAt = performance.now();
}
/**
@@ -2607,6 +2810,7 @@
const batchSize = 200; // 每批渲染200行
let currentBatch = 0;
const totalBatches = Math.ceil(total / batchSize);
+ this.lastRenderAt = performance.now();
// 显示渲染进度
const showProgress = () => {
@@ -2654,6 +2858,7 @@
// 隐藏状态栏
this.hideStatusBar();
+ this.lastRenderAt = performance.now();
// 【优化吸附】渲染完成后的智能滚动
// 1. 自动滚动已启用 -> 直接吸附
@@ -2783,6 +2988,7 @@
// 初始化
document.addEventListener('DOMContentLoaded', function() {
initializeConsoleLayers();
+ syncStatusBarPosition();
initializeSocket();
initializeEventListeners();
ensureSystemReadyOnLoad();
@@ -2829,6 +3035,9 @@
// 连接探测定时器（保持运行）
startConnectionProbe();
+
+ // 窗口尺寸变化时同步状态栏位置
+ window.addEventListener('resize', syncStatusBarPosition);
});
// Socket.IO连接
@@ -3628,6 +3837,20 @@
return document.getElementById('consoleOutput');
}
+ // 同步状态栏位置，避免覆盖应用切换按钮
+ function syncStatusBarPosition() {
+ const bar = document.getElementById('consoleStatusBar');
+ const switcher = document.querySelector('.app-switcher');
+ if (!bar || !switcher) return;
+
+ const offset = switcher.offsetHeight || 0;
+ const barHeight = bar.offsetHeight || 26;
+ const totalOffset = offset + barHeight + 6; // 额外预留6px缓冲
+
+ bar.style.top = `${offset}px`;
+ document.documentElement.style.setProperty('--console-offset', `${totalOffset}px`);
+ }
+
function initializeConsoleLayers() {
const container = getConsoleContainer();
if (!container) return;
@@ -3646,11 +3869,7 @@
container.appendChild(layer);
consoleLayers[app] = layer;
logRenderers[app] = new LogVirtualList(layer);
-
- // 【图层优化】标记活动窗口
- if (app === currentApp) {
- logRenderers[app].isActive = true;
- }
+ logRenderers[app].setActive(app === currentApp);
// 【FIX Bug #3】初始提示立即渲染，避免黑屏
logRenderers[app].clear(`[系统] ${appNames[app] || app} 日志就绪`);
@@ -3680,11 +3899,7 @@
container.appendChild(layer);
consoleLayers[app] = layer;
logRenderers[app] = new LogVirtualList(layer);
-
- // 【图层优化】标记活动窗口
- if (app === currentApp) {
- logRenderers[app].isActive = true;
- }
+ logRenderers[app].setActive(app === currentApp);
return layer;
}
@@ -3718,6 +3933,8 @@
const renderer = logRenderers[app];
if (renderer) {
renderer.setActive(true); // 会在内部异步渲染待处理内容
+ renderer.needsScroll = true;
+ renderer.scheduleRender(true);
// 确保滚动到底部
if (renderer.autoScrollEnabled) {
@@ -4485,6 +4702,28 @@
// 创建全局日志管理器实例
const reportLogManager = new ReportLogManager();
+ // 新任务时重置报告日志，避免残留历史输出
+ function resetReportLogsForNewTask(taskId, reason = '开始新的报告任务，日志已重置') {
+ if (!taskId) return;
+ if (reportTaskId === taskId) return; // 已是同一任务，无需重复清空
+
+ // 停止当前流与轮询，防止旧日志混入
+ safeCloseReportStream();
+ reportLogManager.stop();
+ reportLogManager.reset();
+
+ // 重置前端计数与缓存
+ reportLogLineCount = 0;
+ lastLineCount['report'] = 0;
+
+ clearConsoleLayer('report', `[系统] ${reason}`);
+ resetReportStreamOutput('Report Engine 正在启动...');
+
+ // 重新启动轮询，确保新任务日志即时接入
+ reportLogManager.start();
+ reportTaskId = taskId;
+ }
+
// 【调试】测试日志管理器
window.testReportLogManager = function() {
console.log('[测试] ===== 开始测试Report日志管理器 =====');
@@ -5025,12 +5264,14 @@
if (statusData.current_task) {
updateTaskProgressStatus(statusData.current_task);
if (statusData.current_task.status === 'running') {
- reportTaskId = statusData.current_task.task_id;
+ const taskId = statusData.current_task.task_id;
+ resetReportLogsForNewTask(taskId, '检测到正在运行的报告任务，日志已重新开始');
+ reportTaskId = taskId;
reportAutoPreviewLoaded = false;
if (window.EventSource) {
openReportStream(reportTaskId);
} else {
- startProgressPolling(reportTaskId);
+ startProgressPolling(taskId);
}
} else if (statusData.current_task.status === 'completed') {
lastCompletedReportTask = statusData.current_task;
@@ -5527,6 +5768,9 @@
// 更新进度显示（保持向后兼容）
function updateProgressDisplay(task) {
+ if (task && task.task_id && task.status === 'running') {
+ resetReportLogsForNewTask(task.task_id, '检测到新的报告任务，日志已同步重置');
+ }
updateTaskProgressStatus(task);
}
@@ -5735,6 +5979,9 @@
const task = payload.task;
if (eventType === 'status' && task) {
+ if (task.status === 'running') {
+ resetReportLogsForNewTask(task.task_id, '收到流式状态事件，已重置日志');
+ }
updateTaskProgressStatus(task);
reportTaskId = task.status === 'running' ? task.task_id : null;
if (task.status === 'completed') {