fix: show full key history alert when expanded in scroll panel

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-09 16:22:46 +08:00
parent 4a043e65e3
commit 77aef229e9
+29 -6
View File
@@ -1,6 +1,9 @@
<style> <style>
.key-row-collapse{border:1px solid #2a3348;border-radius:10px;background:#141923;overflow:hidden} .key-panel-scroll.panel-scroll.pos-list{max-height:min(70vh,640px);overflow:auto;min-height:200px;padding-bottom:6px}
.key-row-collapse+.key-row-collapse{margin-top:0} .key-row-collapse{border:1px solid #2a3348;border-radius:10px;background:#141923}
.key-row-collapse:not([open]){overflow:hidden}
.key-row-collapse[open]{overflow:visible}
.key-row-collapse+.key-row-collapse{margin-top:8px}
.key-row-collapse-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;cursor:pointer;list-style:none;font-size:.8rem;color:#c5cde0;line-height:1.45} .key-row-collapse-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;cursor:pointer;list-style:none;font-size:.8rem;color:#c5cde0;line-height:1.45}
.key-row-collapse-summary::-webkit-details-marker{display:none} .key-row-collapse-summary::-webkit-details-marker{display:none}
.key-row-collapse-summary::before{content:"▸";flex:0 0 auto;color:#6d7a99;margin-top:1px;transition:transform .15s ease} .key-row-collapse-summary::before{content:"▸";flex:0 0 auto;color:#6d7a99;margin-top:1px;transition:transform .15s ease}
@@ -11,10 +14,10 @@
.key-row-summary-line{color:#9aa8c4;font-size:.76rem;word-break:break-word} .key-row-summary-line{color:#9aa8c4;font-size:.76rem;word-break:break-word}
.key-row-summary-live{color:#8fc8ff;font-size:.74rem} .key-row-summary-live{color:#8fc8ff;font-size:.74rem}
.key-row-summary-actions{flex:0 0 auto;display:flex;gap:6px;align-items:center} .key-row-summary-actions{flex:0 0 auto;display:flex;gap:6px;align-items:center}
.key-row-collapse-body{padding:0 12px 12px;border-top:1px solid #232b3d} .key-row-collapse-body{padding:0 12px 16px;border-top:1px solid #232b3d}
.key-row-collapse-body .pos-meta{margin-top:10px;margin-bottom:10px} .key-row-collapse-body .pos-meta{margin-top:10px;margin-bottom:10px}
.key-row-collapse-body .pos-grid{margin-bottom:8px} .key-row-collapse-body .pos-grid{margin-bottom:8px}
.key-history-alert{font-size:.75rem;color:#aab;margin-top:8px;white-space:pre-wrap;line-height:1.45} .key-history-alert{font-size:.75rem;color:#aab;margin-top:8px;margin-bottom:2px;padding-bottom:4px;white-space:pre-wrap;word-break:break-word;line-height:1.5}
</style> </style>
{% macro key_direction_label(k) -%} {% macro key_direction_label(k) -%}
@@ -77,7 +80,7 @@
<summary class="tip-collapse-summary">关键位监控规则说明</summary> <summary class="tip-collapse-summary">关键位监控规则说明</summary>
<div class="tip-collapse-body rule-tip">{{ key_gate_rule_text }}</div> <div class="tip-collapse-body rule-tip">{{ key_gate_rule_text }}</div>
</details> </details>
<div class="panel-scroll pos-list"> <div class="panel-scroll pos-list key-panel-scroll">
{% for k in key %} {% for k in key %}
<details class="key-row-collapse" id="key-row-{{ k.id }}"> <details class="key-row-collapse" id="key-row-{{ k.id }}">
<summary class="key-row-collapse-summary"> <summary class="key-row-collapse-summary">
@@ -127,7 +130,7 @@
<div class="card"> <div class="card">
<h2 style="margin-bottom:8px">关键位历史</h2> <h2 style="margin-bottom:8px">关键位历史</h2>
<div class="sub" style="font-size:.72rem;color:#8892b0;margin-bottom:8px">失效或已结案的关键位 · 点击展开详情</div> <div class="sub" style="font-size:.72rem;color:#8892b0;margin-bottom:8px">失效或已结案的关键位 · 点击展开详情</div>
<div class="panel-scroll pos-list"> <div class="panel-scroll pos-list key-panel-scroll">
{% for h in key_history %} {% for h in key_history %}
<details class="key-row-collapse"> <details class="key-row-collapse">
<summary class="key-row-collapse-summary"> <summary class="key-row-collapse-summary">
@@ -173,4 +176,24 @@ function paintKeyMonitorSummary(id, snap){
const gate = snap.gate_summary || "—"; const gate = snap.gate_summary || "—";
el.innerText = `现价 ${px} · 门控 ${gate}`; el.innerText = `现价 ${px} · 门控 ${gate}`;
} }
document.querySelectorAll(".key-row-collapse").forEach((row)=>{
row.addEventListener("toggle", ()=>{
if(!row.open) return;
requestAnimationFrame(()=>{
const body = row.querySelector(".key-row-collapse-body");
const panel = row.closest(".key-panel-scroll");
if(body && panel){
const bodyRect = body.getBoundingClientRect();
const panelRect = panel.getBoundingClientRect();
if(bodyRect.bottom > panelRect.bottom - 8){
panel.scrollTop += bodyRect.bottom - panelRect.bottom + 16;
} else if(bodyRect.top < panelRect.top + 8){
panel.scrollTop -= panelRect.top - bodyRect.top + 16;
}
} else {
row.scrollIntoView({block:"nearest", behavior:"smooth"});
}
});
});
});
</script> </script>