From 797582bb0ad8149e72c9cc3f35f0ff8cd61b8b06 Mon Sep 17 00:00:00 2001
From: ThreeFish <aureliusshu@gmail.com>
Date: Sat, 4 Jul 2026 12:20:29 +0800
Subject: [PATCH] =?UTF-8?q?style(dashboard):=20KPI=20=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=9B=BA=E5=AE=9A=206=20=E5=88=97=E9=98=B2=E6=8A=98=E8=A1=8C?=
 =?UTF-8?q?=20+=20=E5=85=A8=E9=A1=B5=20UI/UX=20=E5=8A=A0=E5=9B=BA;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 布局: .kpi-grid 由 auto-fit(minmax 200px) 改为 repeat(6, minmax(0,1fr))，
  使 6 张 KPI 卡在桌面/笔记本/平板横屏(≥1024px)恒定单行不折行，杜绝横向溢出;
  gap 5px 归一为 --gap-section(12px)。
- 排版: .kpi-value 采用 clamp(20px,2.2vw,32px) 平滑缩放，中宽度不裁剪数值;
  费用卡 #kpi-cost-today 允许在 " + " 处换行，双币种始终完整可见。
- 响应式: 新增 ≤1023px→3 列、≤480px→2 列 优雅降级; header 加 flex-wrap
  修复窄屏横向溢出。
- 可访问性: 为 .range-btn/.btn-refresh/.page-btn/.copy-btn 补 :focus-visible
  键盘焦点环; 新增 prefers-reduced-motion 降级动效。
- 缺陷修复: 补定义 --bg-secondary / --text-muted 两个未定义 CSS 变量
  (消除 Model Calling 行透明背景回退); JetBrains Mono 补载 700 字重，
  修正 .kpi-value 合成粗体。

🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist)
Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
---
 src/coding/proxy/server/dashboard.py | 43 ++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/coding/proxy/server/dashboard.py b/src/coding/proxy/server/dashboard.py
index b40515d..2694440 100644
--- a/src/coding/proxy/server/dashboard.py
+++ b/src/coding/proxy/server/dashboard.py
@@ -149,18 +149,20 @@ def line(x0: float, y0: float, x1: float, y1: float) -> None:
   <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
   <style>
     :root {
       --bg: #0a0e14;
       --bg-card: #12161e;
       --bg-card-hover: #181d27;
+      --bg-secondary: #161b24;
       --border: rgba(255,255,255,.06);
       --border-subtle: rgba(255,255,255,.04);
       --text-primary: #e6edf3;
       --text-secondary: #8b949e;
       --text-tertiary: #6e7681;
+      --text-muted: #6e7681;
       --accent-blue: #58a6ff;
       --accent-green: #3fb950;
       --accent-yellow: #d29922;
@@ -202,11 +204,14 @@ def line(x0: float, y0: float, x1: float, y1: float) -> None:
       display: flex;
       align-items: center;
       justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 8px 16px;
       position: sticky;
       top: 0;
       z-index: 100;
     }
-    .header-left { display: flex; align-items: center; gap: 12px; }
+    .header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
+    .header-left h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     .logo {
       width: 32px; height: 32px;
       display: flex; align-items: center; justify-content: center;
@@ -241,8 +246,8 @@ def line(x0: float, y0: float, x1: float, y1: float) -> None:
     /* ── KPI 卡片 ── */
     .kpi-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 5px;
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+      gap: var(--gap-section);
       margin-bottom: var(--gap-section);
     }
     .kpi-card {
@@ -280,12 +285,25 @@ def line(x0: float, y0: float, x1: float, y1: float) -> None:
     .kpi-icon { font-size: 15px; opacity: .8; }
     .kpi-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; letter-spacing: .2px; }
     .kpi-value {
-      font-size: 32px; font-weight: 700; line-height: 1.2;
+      font-size: clamp(20px, 2.2vw, 32px); font-weight: 700; line-height: 1.2;
       font-family: 'JetBrains Mono', monospace;
       letter-spacing: -1px;
     }
-    #kpi-cost-today { font-size: 20px; white-space: nowrap; }
+    #kpi-cost-today {
+      font-size: clamp(15px, 1.3vw + 0.25rem, 20px);
+      white-space: normal;
+      word-break: keep-all;
+      overflow-wrap: anywhere;
+      line-height: 1.25;
+    }
     .kpi-sub { font-size: 13px; color: var(--text-tertiary); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+    /* ── KPI 响应式：桌面/笔记本/平板横屏(≥1024px)强制 6 列单行，杜绝数值裁剪；窄屏优雅降级 ── */
+    @media (max-width: 1023px) {
+      .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    }
+    @media (max-width: 480px) {
+      .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    }
     .color-blue { color: var(--accent-blue); }
     .color-green { color: var(--accent-green); }
     .color-yellow { color: var(--accent-yellow); }
@@ -664,6 +682,10 @@ def line(x0: float, y0: float, x1: float, y1: float) -> None:
       border-color: rgba(88,166,255,.2);
     }
     .tab-btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
+    .range-btn:focus-visible,
+    .btn-refresh:focus-visible,
+    .page-btn:focus-visible,
+    .copy-btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
     .tab-pane { display: none; }
     .tab-pane.active { display: block; }
 
@@ -793,6 +815,15 @@ def line(x0: float, y0: float, x1: float, y1: float) -> None:
       0%,100% { color: inherit; }
       40% { color: #f87171; }
     }
+    /* ── 尊重「减少动态效果」系统偏好（前庭敏感用户）── */
+    @media (prefers-reduced-motion: reduce) {
+      .kpi-card, .card { animation: none !important; }
+      *, *::before, *::after {
+        transition-duration: .01ms !important;
+        animation-duration: .01ms !important;
+        animation-iteration-count: 1 !important;
+      }
+    }
   </style>
 </head>
 <body>