From 1145a5300457c4ffbfeddbfe0f046e75bacd2566 Mon Sep 17 00:00:00 2001
From: JustMe <mr.toing@outlook.com>
Date: Mon, 12 Oct 2026 02:21:56 +0800
Subject: [PATCH] style(display): refine overview line layout [CI]

---
 web/display/src/LineStrips.tsx     |  7 +++++--
 web/display/src/display.css        | 33 ++++++++++++++++++++++++++----
 web/display/src/pages/Overview.tsx |  2 +-
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/web/display/src/LineStrips.tsx b/web/display/src/LineStrips.tsx
index add8ee5..3a82a68 100644
--- a/web/display/src/LineStrips.tsx
+++ b/web/display/src/LineStrips.tsx
@@ -62,9 +62,12 @@ export function LineStrips({ lineId, range, m }: Props) {
   const retransValue = m['tcp.retrans']
   const retransTone = levelOf(retransValue)
   const retransText = retransValue === null || retransValue === undefined ? '重传 —' : `${fmtPct(retransValue)} 重传`
+  const hasMeasurements = Object.values(s?.values ?? {}).some((values) => values.some((value) => value !== null && value !== undefined))
   return (
     <div className="strips" ref={box} onMouseMove={onMove} onMouseLeave={() => setHover(null)}>
-      <div className="line-mini-stack">
+      {s && !hasMeasurements ? (
+        <div className="line-no-data">近 {info.hours} 小时暂无测量数据</div>
+      ) : <div className="line-mini-stack">
         <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>
@@ -101,7 +104,7 @@ export function LineStrips({ lineId, range, m }: Props) {
             ))}
           </div>
         </div>
-      </div>
+      </div>}
       <div className={`pop num${hover !== null && at !== null ? ' open' : ''}`} role="tooltip" aria-hidden={hover === null}>
         {at !== null ? (
           <>
diff --git a/web/display/src/display.css b/web/display/src/display.css
index 0a0dc76..cfde1c1 100644
--- a/web/display/src/display.css
+++ b/web/display/src/display.css
@@ -70,6 +70,12 @@
   padding: 40px 24px 80px;
 }
 
+/* 总览线路多，宽屏时使用可用横向空间，避免卡片挤在左侧。 */
+.overview-page {
+  width: min(100%, 1640px);
+  max-width: 1640px;
+}
+
 /* 线路页是数据工作区：宽屏充分利用空间，图表和辅助文字保持清晰对比。 */
 .line-page {
   --line-secondary: color-mix(in srgb, var(--app-ink) 58%, var(--app-ink-muted));
@@ -1983,8 +1989,8 @@ input {
 
 .line-grid {
   display: grid;
-  gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
 }
 
 .line-card {
@@ -1992,14 +1998,33 @@ input {
 }
 
 .line-card .line-name {
-  flex-wrap: wrap;
-  row-gap: 2px;
+  min-width: 0;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.line-card .line-name .name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.line-card .line-name .arrow {
+  flex: none;
 }
 
 .line-card .line-name .arrow {
   color: var(--app-ink-faint);
 }
 
+.line-no-data {
+  padding: 8px 2px 2px;
+  color: var(--app-ink-faint);
+  font-size: 12px;
+}
+
 /* 线路面板：按三网分组 */
 .carrier-group + .carrier-group {
   margin-top: 18px;
diff --git a/web/display/src/pages/Overview.tsx b/web/display/src/pages/Overview.tsx
index b1143fb..a31a111 100644
--- a/web/display/src/pages/Overview.tsx
+++ b/web/display/src/pages/Overview.tsx
@@ -234,7 +234,7 @@ export function Overview() {
   }
 
   return (
-    <main className="page">
+    <main className="page overview-page">
       <section className="hero">
         <h1>总览</h1>
         <p className="sub">