feat: 表头排序加手形+悬停高亮 v1.3.9

app.py

@@ -592,7 +592,7 @@ def api_cpu_advise():
             tops[0].get("name"), tops[0].get("cpu"), tops[0].get("pid")))
     if vm is not None and vm.percent > 85:
         tips.append("💾 内存已用 %s%%，内存不足会拖慢 CPU（频繁 swap）。先点内存页「一键回收」，或加内存条。" % vm.percent)
-    tips.append("🧹 点下方「一键优化系统」：自动数据落盘 + 回收内存缓存 + 内存碎片整理，1 分钟见效。")
+    tips.append("🧹 点下方「一键优化系统」：自动数据落盘 + 回收内存缓存，约20秒见效。")
     tips.append("📦 精简开机自启与常驻 Docker 容器，不用的先停掉（docker stop），负载立降。")
     tips.append("🌡️ 检查散热：CPU 过热会自动降频，清理灰尘、保证通风，频率上去了自然流畅。")
     return jsonify({"load": [round(x, 2) for x in load], "cpu": round(cpu_pct or 0, 1),
@@ -600,8 +600,8 @@ def api_cpu_advise():
                     "level": level, "verdict": verdict, "tips": tips,
                     "top_cpu": [{"name": t.get("name"), "cpu": t.get("cpu"), "pid": t.get("pid")} for t in tops]})
 
-_OPT_JOB = {"running": False, "done": False, "steps": [], "freed": 0,
-            "available": 0, "started": 0}
+_OPT_JOB = {"running": False, "done": False, "cancelled": False, "cancel": False,
+            "steps": [], "freed": 0, "available": 0, "started": 0}
 
 def _optimize_worker():
     job = _OPT_JOB
@@ -615,6 +615,17 @@ def _optimize_worker():
         steps.append("数据落盘(sync)完成")
     except Exception as e:
         steps.append("数据落盘跳过: %s" % e)
+    if job.get("cancel"):
+        job["steps"] = steps + ["已手动停止,后续步骤取消"]
+        job["cancelled"] = True
+        job["done"] = False
+        job["running"] = False
+        job["cancel"] = False
+        try:
+            job["available"] = psutil.virtual_memory().available
+        except Exception:
+            pass
+        return
     try:
         p = os.environ.get("PROCFS_PATH", "/proc")
         with open(os.path.join(p, "sys", "vm", "drop_caches"), "w") as f:
@@ -630,6 +641,7 @@ def _optimize_worker():
     job["freed"] = max(0, after_mem - before_mem)
     job["available"] = after_mem
     job["done"] = True
+    job["cancelled"] = False
     job["running"] = False
 
 @app.route("/api/sys/optimize", methods=["POST"])
@@ -639,11 +651,19 @@ def api_sys_optimize():
     if _OPT_JOB.get("running"):
         return jsonify({"ok": False, "running": True,
                         "msg": "优化正在进行中,请稍候"}), 409
-    _OPT_JOB.update({"running": True, "done": False, "steps": [],
-                     "freed": 0, "available": 0, "started": time.time()})
+    _OPT_JOB.update({"running": True, "done": False, "cancelled": False, "cancel": False,
+                     "steps": [], "freed": 0, "available": 0, "started": time.time()})
     threading.Thread(target=_optimize_worker, daemon=True).start()
     return jsonify({"ok": True, "started": True, "eta": 20})
 
+@app.route("/api/sys/optimize/cancel", methods=["POST"])
+def api_sys_optimize_cancel():
+    """停止优化: 置取消标记,worker 在步骤间隙退出,不阻塞"""
+    if not _OPT_JOB.get("running"):
+        return jsonify({"ok": False, "msg": "当前没有正在进行的优化"})
+    _OPT_JOB["cancel"] = True
+    return jsonify({"ok": True, "msg": "已发送停止信号"})
+
 @app.route("/api/sys/optimize/status")
 def api_sys_optimize_status():
     job = _OPT_JOB
@@ -653,6 +673,7 @@ def api_sys_optimize_status():
         elapsed = 0
     return jsonify({"running": job.get("running", False),
                     "done": job.get("done", False),
+                    "cancelled": job.get("cancelled", False),
                     "steps": job.get("steps", []),
                     "freed": job.get("freed", 0),
                     "available": job.get("available", 0),

public/index.html

@@ -20,7 +20,7 @@ body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;backgr
 .stat .v{font-size:15px}
 .v.green{color:#20a53a}
 table{width:calc(100% - 32px);margin:0 16px 20px;border-collapse:collapse;font-size:13px;table-layout:fixed}
-thead th{background:#f7f7f7;color:#555;font-weight:400;text-align:left;padding:10px 8px;white-space:nowrap;overflow:hidden}
+thead th{background:#f7f7f7;color:#555;font-weight:400;text-align:left;padding:10px 8px;white-space:nowrap;overflow:hidden}thead th[onclick]{cursor:pointer;user-select:none}thead th[onclick]:hover{color:#20a53a}
 tbody td{padding:9px 8px;border-bottom:1px solid #f2f2f2;vertical-align:top;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 tbody td.desc{max-width:340px}
 a.proc{color:#20a53a;text-decoration:none;white-space:nowrap}
@@ -56,7 +56,7 @@ button.refresh{background:#20a53a;color:#fff;border:none;border-radius:3px;paddi
 <div class="tab" data-t="disk">磁盘</div>
 <div class="tab" data-t="net">网络</div>
 <div style="margin-left:auto;display:flex;align-items:center;gap:12px;padding-right:16px;font-size:12px">
-<span style="color:#999">v1.3.5</span>
+<span style="color:#999">v1.3.9</span>
 <label style="color:#999">刷新 <select id="ival" onchange="setIval(this.value)" style="border:1px solid #ddd;border-radius:3px;padding:2px 4px;color:#333"><option value="3">3s</option><option value="5">5s</option><option value="10">10s</option><option value="30">30s</option><option value="60">60s</option></select></label>
 <button id="pauseBtn" onclick="togglePause()" style="background:#ff9900;color:#fff;border:none;border-radius:3px;padding:3px 10px;cursor:pointer">⏸ 停止刷新</button>
 <a href="https://nav.88531.cn" target="_blank" style="color:#20a53a;text-decoration:none">资享导航站</a>
@@ -86,11 +86,14 @@ function fmtR(b){return fmtB(b)+'/s'}
 function esc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;')}
 async function dropMem(){if(!confirm('一键回收未使用的内存（drop caches）？'))return;const r=await fetch('/api/mem/drop',{method:'POST'});const j=await r.json();alert(j.ok?('已回收，可用 '+fmtB(j.available)):('失败: '+j.error));load(true)}
 let optPoll=null;
-async function optimizeSys(){const b=document.getElementById('optBtn');if(!b||b.disabled)return;try{const r=await fetch('/api/sys/optimize',{method:'POST'});const j=await r.json();if(r.status===409&&j.running){return}if(!j.started&&!j.ok){const s=document.getElementById('optStatus');if(s)s.textContent='启动失败，请稍后重试';return}b.disabled=true;b.style.cssText='background:#ccc;color:#fff;border:none;border-radius:3px;padding:6px 14px;cursor:not-allowed';const s=document.getElementById('optStatus');if(s)s.textContent='⏳ 正在优化系统，预计约20秒，页面数据照常刷新…';if(optPoll)clearInterval(optPoll);optPoll=setInterval(pollOptStatus,2000)}catch(e){const s=document.getElementById('optStatus');if(s)s.textContent='启动失败：网络异常'}}
-async function pollOptStatus(){try{const r=await fetch('/api/sys/optimize/status');const j=await r.json();const s=document.getElementById('optStatus');if(j.running){if(s)s.textContent='⏳ 正在优化系统，已用时 '+j.elapsed+' 秒，预计约20秒，页面数据照常刷新…';return}if(optPoll){clearInterval(optPoll);optPoll=null}const b=document.getElementById('optBtn');if(b){b.disabled=false;b.style.cssText='';b.className='bigbtn'}if(j.done&&s){s.textContent='✅ 优化完成：'+j.steps.join('；')+'，释放 '+fmtB(j.freed)+'，当前可用 '+fmtB(j.available)}load(true)}catch(e){}}
+let optState={running:false,text:''};
+function restoreOptUI(){const b=document.getElementById('optBtn');const st=document.getElementById('optStopBtn');const s=document.getElementById('optStatus');if(!b||!st||!s)return;if(optState.running){b.disabled=true;b.style.cssText='background:#ccc;color:#fff;border:none;border-radius:3px;padding:6px 14px;cursor:not-allowed';st.style.display='';}else{st.style.display='none';}if(optState.text)s.textContent=optState.text;}
+async function optimizeSys(){const b=document.getElementById('optBtn');const st=document.getElementById('optStopBtn');if(!b||b.disabled)return;try{const r=await fetch('/api/sys/optimize',{method:'POST'});const j=await r.json();if(r.status===409&&j.running){return}if(!j.started&&!j.ok){const s=document.getElementById('optStatus');if(s)s.textContent='启动失败，请稍后重试';return}b.disabled=true;b.style.cssText='background:#ccc;color:#fff;border:none;border-radius:3px;padding:6px 14px;cursor:not-allowed';const s=document.getElementById('optStatus');optState={running:true,text:'⏳ 正在优化系统，预计约20秒，页面数据照常刷新…'};if(s)s.textContent=optState.text;if(st)st.style.display='';if(optPoll)clearInterval(optPoll);optPoll=setInterval(pollOptStatus,2000)}catch(e){const s=document.getElementById('optStatus');if(s)s.textContent='启动失败：网络异常'}}
+async function stopOpt(){let j=null;try{const r=await fetch('/api/sys/optimize/cancel',{method:'POST'});j=await r.json()}catch(e){}if(!j||!j.ok)return;const st=document.getElementById('optStopBtn');if(st)st.disabled=true;optState={running:true,stopping:true,text:'⏳ 正在停止优化…'};const s=document.getElementById('optStatus');if(s)s.textContent=optState.text}
+async function pollOptStatus(){try{const r=await fetch('/api/sys/optimize/status');const j=await r.json();const s=document.getElementById('optStatus');if(j.running){optState={running:true,stopping:!!optState.stopping,text:optState.stopping?'⏳ 正在停止优化…（已用时 '+j.elapsed+' 秒）':'⏳ 正在优化系统，已用时 '+j.elapsed+' 秒，预计约20秒，页面数据照常刷新…'};if(s)s.textContent=optState.text;return}if(optPoll){clearInterval(optPoll);optPoll=null}const b=document.getElementById('optBtn');const st=document.getElementById('optStopBtn');if(b){b.disabled=false;b.style.cssText='';b.className='bigbtn'}if(st){st.style.display='none';st.disabled=false}if(j.cancelled){optState={running:false,text:'⏹ 已停止优化：'+j.steps.join('；')}}else if(j.done){optState={running:false,text:'✅ 优化完成：'+j.steps.join('；')+'，释放 '+fmtB(j.freed)+'，当前可用 '+fmtB(j.available)}}if(s&&optState.text)s.textContent=optState.text;load(true);setTimeout(restoreOptUI,500)}catch(e){}}
 let lastAdvise=0;
 async function cpuSensor(){const el=document.getElementById('cpusensor');try{const r=await fetch('/api/sensors');const j=await r.json();el.style.display='';let h='<div class="model">🌡️ 温度 / 🌀 风扇</div>';if(j.temps&&j.temps.length){const cpu=j.temps.filter(t=>t.name.indexOf('CPU')===0);const oth=j.temps.filter(t=>t.name.indexOf('CPU')!==0);const chip=t=>{const c=t.value>=85?'#f00':(t.value>=70?'#ff9900':'#20a53a');return `<span style="display:inline-block;margin:2px 10px 2px 0">${esc(t.name)} <b style="color:${c}">${t.value}°C</b></span>`};if(cpu.length)h+='<div>'+cpu.map(chip).join('')+'</div>';if(oth.length)h+='<div class="mut">'+oth.map(chip).join('')+'</div>'}if(j.fans&&j.fans.length){h+='<div>'+j.fans.map(f=>`<span style="display:inline-block;margin:2px 10px 2px 0">🌀 ${esc(f.name)} <b>${f.value} RPM</b></span>`).join('')+'</div>'}else{h+='<div class="mut">🌀 风扇转速：宿主未暴露（家用 NAS/主板多无此传感器，属正常）</div>'}if(j.note&&!j.temps.length)h+=`<div class="mut">${esc(j.note)}</div>`;el.innerHTML=h}catch(e){el.style.display='';el.innerHTML='<div class="mut">🌡️ 温度读取失败</div>'}}
-async function cpuAdvise(){const el=document.getElementById('cpuadvise');const now=Date.now();if(now-lastAdvise<15000){if(el.innerHTML)el.style.display='';return;}lastAdvise=now;try{const r=await fetch('/api/cpu/advise');const j=await r.json();const col=j.level==='轻松'||j.level==='正常'?'#20a53a':(j.level==='偏高'?'#ff9900':'#f00');document.getElementById('cpuadvise').style.display='';document.getElementById('cpuadvise').innerHTML=`<div class="model">📊 负载诊断：<b style="color:${col}">${j.level}</b> <span class="mut">（1分钟负载 ${j.load[0]} ÷ ${j.logical}核 = 单核 ${j.per_core}）</span></div><div style="margin:4px 0">${esc(j.verdict)}</div><div class="mut">如何更流畅：</div><div>${j.tips.map(t=>`<div>· ${esc(t)}</div>`).join('')}</div><div style="margin-top:6px"><button class="bigbtn" id="optBtn" onclick="optimizeSys()">🚀 一键优化系统</button><div class="mut" id="optDesc" style="margin-top:4px">会做两件事：① 把内存里暂存的数据写回硬盘（sync，防断电丢数据）；② 回收系统缓存占用的内存（drop caches，只清缓存、不动正在运行的程序）。全程不重启、不杀进程，页面照常刷新。</div><div class="mut" id="optStatus"></div></div>`}catch(e){}}
+async function cpuAdvise(){const el=document.getElementById('cpuadvise');const now=Date.now();if(now-lastAdvise<15000){if(el.innerHTML)el.style.display='';return;}lastAdvise=now;try{const r=await fetch('/api/cpu/advise');const j=await r.json();const col=j.level==='轻松'||j.level==='正常'?'#20a53a':(j.level==='偏高'?'#ff9900':'#f00');document.getElementById('cpuadvise').style.display='';document.getElementById('cpuadvise').innerHTML=`<div class="model">📊 负载诊断：<b style="color:${col}">${j.level}</b> <span class="mut">（1分钟负载 ${j.load[0]} ÷ ${j.logical}核 = 单核 ${j.per_core}）</span></div><div style="margin:4px 0">${esc(j.verdict)}</div><div class="mut">如何更流畅：</div><div>${j.tips.map(t=>`<div>· ${esc(t)}</div>`).join('')}</div><div style="margin-top:6px"><button class="bigbtn" id="optBtn" onclick="optimizeSys()">🚀 一键优化系统</button> <button id="optStopBtn" onclick="stopOpt()" style="display:none;background:#f00;color:#fff;border:none;border-radius:3px;padding:6px 14px;cursor:pointer">⏹ 停止</button><div class="mut" id="optDesc" style="margin-top:4px">会做两件事：① 把内存里暂存的数据写回硬盘（sync，防断电丢数据）；② 回收系统缓存占用的内存（drop caches，只清缓存、不动正在运行的程序）。全程不重启、不杀进程，页面照常刷新。</div><div class="mut" id="optStatus"></div></div>`;restoreOptUI()}catch(e){}}
 async function kill(pid,name){if(!confirm('结束进程 '+name+' (PID '+pid+') ?'))return;const r=await fetch('/api/kill',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({pid})});const j=await r.json();alert(j.ok?'已发送结束信号':('失败: '+j.error));load(true)}
 function cmpVal(p,key){
  if(key==='name')return String(p.name||'');