feat(display): explain QUIC state and compact panels [CI]

web/display/src/LineStrips.tsx

@@ -6,9 +6,9 @@ import { useQuery } from '@shared/hooks'
 
 /** 总览卡片可以看的时长，以及每一格的长度（格数约 36～48，太多就挤了）。 */
 export const OVERVIEW_RANGES = [
-  { value: '3h', label: '3 小时', hours: 3, step: '5m', stepMin: 5 },
-  { value: '6h', label: '6 小时', hours: 6, step: '10m', stepMin: 10 },
-  { value: '12h', label: '12 小时', hours: 12, step: '15m', stepMin: 15 },
+  { value: '3h', label: '近 3 小时', hours: 3, step: '5m', stepMin: 5 },
+  { value: '6h', label: '近 6 小时', hours: 6, step: '10m', stepMin: 10 },
+  { value: '12h', label: '近 12 小时', hours: 12, step: '15m', stepMin: 15 },
 ] as const
 
 export type OverviewRange = (typeof OVERVIEW_RANGES)[number]['value']
@@ -68,32 +68,38 @@ export function LineStrips({ lineId, range, m }: Props) {
         <div className="line-mini-quic-head" title={`QUIC RTT p50 ${fmtMs(m['rtt.p50'])} · p95 ${fmtMs(m['rtt.p95'])} · p99 ${fmtMs(m['rtt.p99'])}`}>
           <span>QUIC</span><strong className="num">{fmtMs(m['rtt.p50'])}</strong><small>悬停看 p95 / p99</small>
         </div>
-        <div className="line-mini-direction-row" title={`去程 Probe → Agent 丢包 ${fmtPct(up)}`}>
-          <span>去程</span>
+        <div className="line-mini-direction">
+          <div className="line-mini-direction-head" title={`去程 Probe → Agent 丢包 ${fmtPct(up)}`}>
+            <span>去程</span>
+            <span className={`line-mini-badge ${levelOf(up)}`}>{upText}</span>
+          </div>
           <div className="bars" role="img" aria-label={`近 ${common.hoursText}每 ${common.stepText}的去程丢包`}>
             {(s ? lossUp : Array.from({ length: common.cells }, () => null)).map((value, i) => (
               <span key={`up-${t[i] ?? i}`} className={`bar ${s ? levelOf(value) : 'none'}${hover === i ? ' on' : ''}`} />
             ))}
           </div>
-          <span className={`line-mini-badge ${levelOf(up)}`}>{upText}</span>
         </div>
-        <div className="line-mini-direction-row" title={`回程 Agent → Probe 丢包 ${fmtPct(down)}`}>
-          <span>回程</span>
+        <div className="line-mini-direction">
+          <div className="line-mini-direction-head" title={`回程 Agent → Probe 丢包 ${fmtPct(down)}`}>
+            <span>回程</span>
+            <span className={`line-mini-badge ${levelOf(down)}`}>{downText}</span>
+          </div>
           <div className="bars" role="img" aria-label={`近 ${common.hoursText}每 ${common.stepText}的回程丢包`}>
             {(s ? lossDown : Array.from({ length: common.cells }, () => null)).map((value, i) => (
               <span key={`down-${t[i] ?? i}`} className={`bar ${s ? levelOf(value) : 'none'}${hover === i ? ' on' : ''}`} />
             ))}
           </div>
-          <span className={`line-mini-badge ${levelOf(down)}`}>{downText}</span>
         </div>
-        <div className="line-mini-tcp-row" title={`TCP RTT p50 ${fmtMs(m['tcp.rtt.p50'])}`}>
-          <span>TCP</span><strong className="num">{fmtMs(m['tcp.rtt.p50'])}</strong>
+        <div className="line-mini-tcp">
+          <div className="line-mini-tcp-head" title={`TCP RTT p50 ${fmtMs(m['tcp.rtt.p50'])}`}>
+            <span>TCP</span><strong className="num">{fmtMs(m['tcp.rtt.p50'])}</strong>
+            <span className={`line-mini-badge ${retransTone}`}>{retransText}</span>
+          </div>
           <div className="bars" role="img" aria-label={`近 ${common.hoursText}每 ${common.stepText}的 TCP 重传`}>
             {(s ? retrans : Array.from({ length: common.cells }, () => null)).map((value, i) => (
               <span key={`retrans-${t[i] ?? i}`} className={`bar ${s ? levelOf(value) : 'none'}${hover === i ? ' on' : ''}`} />
             ))}
           </div>
-          <span className={`line-mini-badge ${retransTone}`}>{retransText}</span>
         </div>
       </div>
       <div className={`pop num${hover !== null && at !== null ? ' open' : ''}`} role="tooltip" aria-hidden={hover === null}>