From c65b9986cafde15000385c35515196564fbbfa46 Mon Sep 17 00:00:00 2001
From: cbb <2625274797@qq.com>
Date: Sun, 18 Oct 2026 17:13:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(monitor):=20=E5=BD=93=E5=89=8D=E9=98=B6?=
 =?UTF-8?q?=E6=AE=B5=E8=BF=9B=E5=BA=A6=E6=94=BE=E5=A4=A7=E2=80=94=E2=80=94?=
 =?UTF-8?q?=E3=80=8C=E5=BD=93=E5=89=8D=E6=AD=A5=E9=AA=A4=20=C2=B7=20X?=
 =?UTF-8?q?=E3=80=8D=E7=9A=84=E7=99=BE=E5=88=86=E6=AF=94=2020px=20?=
 =?UTF-8?q?=E5=8A=A0=E7=B2=97=E3=80=81=E9=98=B6=E6=AE=B5=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E6=9D=A1=2014px=20=E9=AB=98=EF=BC=88=E5=8E=9F=E6=9D=A5=2012.5p?=
 =?UTF-8?q?x/8px=20=E5=A4=AA=E5=B0=8F=EF=BC=89=EF=BC=9B=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E6=AD=A5=E9=AA=A4=E6=9D=A1=E5=BD=93=E5=89=8D=E6=A0=BC=E7=9A=84?=
 =?UTF-8?q?=E7=99=BE=E5=88=86=E6=AF=94=E4=B9=9F=E6=94=BE=E5=A4=A7=E5=8A=A0?=
 =?UTF-8?q?=E8=89=B2=EF=BC=9B=E9=A1=BA=E5=B8=A6=E6=8A=8A=E5=B7=B2=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E6=A0=BC=E5=AD=90=E7=9A=84=E3=80=8C=E7=94=A8=E6=97=B6?=
 =?UTF-8?q?=E3=80=8D=E6=94=B9=E7=94=A8=E7=B4=AF=E8=AE=A1=E5=80=BC=EF=BC=88?=
 =?UTF-8?q?=E7=BB=AD=E8=B7=91=E7=9A=84=E9=98=B6=E6=AE=B5=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E5=8F=AA=E6=98=BE=E7=A4=BA=E6=9C=80=E5=90=8E=E4=B8=80=E6=AE=B5?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ml/monitor.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/ml/monitor.html b/ml/monitor.html
index bb33288..458ebf5 100644
--- a/ml/monitor.html
+++ b/ml/monitor.html
@@ -57,6 +57,7 @@
   .step.active .ic { background: #5aa9ff22; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px #5aa9ff1f; }
   .step.fail .ic { background: #f8717122; border-color: var(--bad); color: var(--bad); }
   .step .nm { font-size: 12.5px; color: var(--text); white-space: nowrap; } .step .ds { font-size: 11px; color: var(--dim2); white-space: nowrap; }
+  .step .ds.big { font-size: 14px; font-weight: 650; color: var(--accent); }
   .step.pending .nm { color: var(--dim); }
   .step.active .ds { color: var(--accent); }
 
@@ -127,8 +128,9 @@
   button.danger { color: var(--bad); border-color: #f8717166; } button.danger:hover { background: #f8717114; }
   .overall { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
   .overall .now { font-size: 13px; color: var(--dim); } .overall .now b { display: block; color: var(--text); font-size: 18px; font-weight: 650; margin: 2px 0 2px; }
-  .sublabel { font-size: 12.5px; color: var(--dim); display: flex; justify-content: space-between; margin-top: 4px; }
-  .bar.thin { height: 8px; margin: 8px 0 4px; } .bar.ind .fill { width: 30% !important; animation: ind 1.6s ease-in-out infinite; }
+  .sublabel { font-size: 15px; color: var(--dim); display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
+  .sublabel b { font: 700 20px/1 var(--mono); color: var(--text); }
+  .bar.thin { height: 14px; margin: 10px 0 4px; } .bar.ind .fill { width: 30% !important; animation: ind 1.6s ease-in-out infinite; }
   @keyframes ind { 0% { margin-left: 0; } 50% { margin-left: 70%; } 100% { margin-left: 0; } }
   .ctlrow { display: flex; gap: 10px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
   .ctlrow .hint { font-size: 12px; color: var(--dim2); }
@@ -500,11 +502,12 @@ function stages(s) {
   if (P) {   // 有流水线记录：以它为准
     const plan = P.plan && P.plan.length ? P.plan : STAGE_META.map(x => x[0]).filter(k => k !== 'setup');
     const keys = STAGE_META.map(x => x[0]).filter(k => plan.includes(k) || P.stages[k]);
+    const el = P.elapsed || {};   // 累计用时（跨停止/续跑），没有就退回本段
     return keys.map(k => {
       const r = P.stages[k], nm = SM[k].n;
       if (!r) return [nm, 'pending', '—'];
       if (P.current === k) return [nm, 'active', P.progress && P.progress.frac != null ? pct(P.progress.frac, 0) : '进行中'];
-      if (r.rc === 0) return [nm, 'done', '用时 ' + hmsShort(r.end - r.start)];
+      if (r.rc === 0) return [nm, 'done', '用时 ' + hmsShort(el[k] != null ? el[k] : r.end - r.start)];
       if (r.rc === -15 || r.rc === 143) return [nm, 'fail', '已停止'];
       if (r.rc != null) return [nm, 'fail', `失败（返回码 ${r.rc}）`];
       return [nm, 'fail', '中断'];
@@ -531,7 +534,7 @@ function stages(s) {
 }
 function renderStatus(s) {
   const L = stages(s);
-  $('steps').innerHTML = L.map(([nm, st, ds], i) => `<div class="step ${st}"><div class="ic">${st === 'done' ? '✓' : st === 'fail' ? '!' : i + 1}</div><div class="nm">${nm}</div><div class="ds">${ds}</div></div>`).join('');
+  $('steps').innerHTML = L.map(([nm, st, ds], i) => `<div class="step ${st}"><div class="ic">${st === 'done' ? '✓' : st === 'fail' ? '!' : i + 1}</div><div class="nm">${nm}</div><div class="ds${st === 'active' ? ' big' : ''}">${ds}</div></div>`).join('');
   const nDone = L.filter(x => x[1] === 'done').length; $('stepnote').textContent = `${nDone} / ${L.length} 完成`;
 
   // GPU + CPU（同一个框：上面是 GPU 环 + 显存/温度/功耗，下面接 CPU 总占用与每核条）
@@ -630,7 +633,7 @@ function renderPipe(s) {
   $('pipe').innerHTML = `<h2><span>全流程</span><span class="r">${doneN} / ${plan.length} 步完成</span></h2>
     <div class="overall">${head}<div class="bigpct">${(100 * frac).toFixed(1)}<small>%</small></div></div>
     <div class="bar ${cur ? '' : 'idle'}"><div class="fill" style="width:${100 * frac}%"></div></div>
-    ${cur ? `<div class="sublabel"><span>当前步骤 · ${SM[cur]?.n}</span><span>${pr.frac != null ? pct(pr.frac) : '无法计量，按用时估'}</span></div>
+    ${cur ? `<div class="sublabel"><span>当前步骤 · ${SM[cur]?.n}</span>${pr.frac != null ? `<b>${pct(pr.frac)}</b>` : '<span>无法计量，按用时估</span>'}</div>
       <div class="bar thin ${pr.frac == null ? 'ind' : ''}"><div class="fill" style="width:${pr.frac != null ? 100 * pr.frac : 30}%"></div></div>` : ''}
     <div class="facts">
       <div class="fact"><div class="k">总用时</div><div class="v">${hms(plan.reduce((a, k) => a + ((P.elapsed || {})[k] || 0), 0))}</div></div>