From ad7bb3d539fea276d6097b3e7f534ac12bec66bb Mon Sep 17 00:00:00 2001
From: ThreeFish <aureliusshu@gmail.com>
Date: Wed, 27 May 2026 19:26:59 +0800
Subject: [PATCH] =?UTF-8?q?style(dashboard):=20=E6=94=B6=E7=AA=84=E5=B9=B6?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E4=BB=AA=E8=A1=A8=E6=9D=BF=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E9=97=B4=E5=9E=82=E7=9B=B4=E9=97=B4=E8=B7=9D=E8=87=B3=2012px;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 CSS 变量 --gap-section: 12px 作为模块间距单一事实源
- 将 .time-range-bar / .kpi-grid / .model-calling-card / .charts-grid /
  .charts-grid-2 / .model-token-card 的 margin-bottom 统一指向该变量
- 消除底部 Token 用量卡片的 inline style，改用语义化 class

🤖 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 | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/coding/proxy/server/dashboard.py b/src/coding/proxy/server/dashboard.py
index 156c098..a04e1f9 100644
--- a/src/coding/proxy/server/dashboard.py
+++ b/src/coding/proxy/server/dashboard.py
@@ -89,6 +89,7 @@ def _build_favicon() -> bytes:
       --shadow-md: 0 8px 24px rgba(0,0,0,.3);
       --glow-blue: 0 0 0 1px rgba(88,166,255,.1), 0 8px 32px rgba(88,166,255,.04);
       --gradient-primary: linear-gradient(135deg, #667eea, #764ba2);
+      --gap-section: 12px;
     }
     @keyframes fadeInUp {
       from { opacity: 0; transform: translateY(10px); }
@@ -160,7 +161,7 @@ def _build_favicon() -> bytes:
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 5px;
-      margin-bottom: 24px;
+      margin-bottom: var(--gap-section);
     }
     .kpi-card {
       background: rgba(18,22,30,.7);
@@ -214,13 +215,13 @@ def _build_favicon() -> bytes:
       display: grid;
       grid-template-columns: 1fr 2fr;
       gap: 16px;
-      margin-bottom: 16px;
+      margin-bottom: var(--gap-section);
     }
     .charts-grid-2 {
       display: grid;
       grid-template-columns: 1fr 2fr;
       gap: 16px;
-      margin-bottom: 16px;
+      margin-bottom: var(--gap-section);
     }
     .charts-grid > .card,
     .charts-grid-2 > .card {
@@ -356,7 +357,7 @@ def _build_favicon() -> bytes:
     /* ── 时间区间选择栏 ── */
     .time-range-bar {
       display: flex; align-items: center; gap: 8px;
-      margin-bottom: 24px; flex-wrap: wrap;
+      margin-bottom: var(--gap-section); flex-wrap: wrap;
       padding: 8px 16px;
       background: rgba(18,22,30,.5);
       border: 1px solid rgba(255,255,255,.04);
@@ -560,7 +561,10 @@ def _build_favicon() -> bytes:
 
     /* ── Model Calling 实时状态 ────────────────────────── */
     .model-calling-card {
-      margin-bottom: 5px;
+      margin-bottom: var(--gap-section);
+    }
+    .model-token-card {
+      margin-bottom: var(--gap-section);
     }
     .mc-empty {
       text-align: center;
@@ -791,7 +795,7 @@ def _build_favicon() -> bytes:
   </div>
 
   <!-- Token 用量（按 Vendor / 模型）堆叠图 -->
-  <div class="card" style="margin-bottom:12px">
+  <div class="card model-token-card">
     <div class="card-title" id="title-model-token-timeline">近 7 天 Token 用量（按 Vendor / 模型）</div>
     <div class="chart-with-legend">
       <div class="chart-wrap-xl">