From c5ee78e892e32120b242864b24f650fbbc116bfe Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Thu, 2 Apr 2026 00:11:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Tab=E6=A0=8F=E5=92=8CKPI=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=90=B8=E9=A1=B6=E5=9B=BA=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

滚动列表时：
- Tab栏（实时监控/统计报表/每日汇报）sticky固定在顶部
- KPI统计卡片sticky固定在Tab栏下方，略缩小间距
- 背景色匹配页面避免透出内容

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/modules/mileage/MileageModule.tsx  |  4 +--
 src/modules/mileage/MonitoringView.tsx | 50 ++++++++++++++------------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/modules/mileage/MileageModule.tsx b/src/modules/mileage/MileageModule.tsx
index 93b170e..82e369e 100644
--- a/src/modules/mileage/MileageModule.tsx
+++ b/src/modules/mileage/MileageModule.tsx
@@ -11,8 +11,8 @@ export default function MileageModule() {
   return (
     <div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative overflow-x-hidden">
       <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 landscape:pb-0 landscape:h-full landscape:flex-1 landscape:overflow-hidden">
-        {/* Sub-navigation */}
-        <div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-6">
+        {/* Sub-navigation — sticky */}
+        <div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-6 sticky top-0 z-30">
           <button
             onClick={() => setActiveSubTab('monitoring')}
             className={`flex items-center gap-2 py-1 transition-all relative ${activeSubTab === 'monitoring' ? 'text-blue-600' : 'text-slate-400'}`}
diff --git a/src/modules/mileage/MonitoringView.tsx b/src/modules/mileage/MonitoringView.tsx
index 2a8d688..e6ddb11 100644
--- a/src/modules/mileage/MonitoringView.tsx
+++ b/src/modules/mileage/MonitoringView.tsx
@@ -708,31 +708,35 @@ export default function MonitoringView() {
         );
       })()}
 
-      {/* High Density KPI Grid */}
-      <div className="grid grid-cols-4 gap-2">
-        <div className="col-span-2 bg-slate-900 p-3 rounded-2xl text-white relative overflow-hidden">
-          <div className="text-[8px] font-bold text-slate-500 uppercase tracking-wider mb-1">
-            {sortBy === 'today' ? '今日' : '累计'}总里程 (KM)
+      {/* High Density KPI Grid — sticky below tab bar */}
+      <div className="sticky top-[44px] z-20 bg-[#F8F9FB] py-1">
+        <div className="grid grid-cols-4 gap-2">
+          <div className="col-span-2 bg-slate-900 p-2.5 rounded-xl text-white relative overflow-hidden">
+            <div className="flex items-baseline justify-between">
+              <div>
+                <div className="text-[7px] font-bold text-slate-500 uppercase tracking-wider">{sortBy === 'today' ? '今日' : '累计'}总里程</div>
+                <div className="text-lg font-black tracking-tighter leading-tight flex items-baseline gap-1">
+                  {Math.round(sortBy === 'today' ? stats.totalToday : stats.totalAll).toLocaleString()}
+                  <span className="text-[8px] text-slate-400">km</span>
+                  {sortBy === 'today' && stats.yesterdayTotal > 0 && (() => {
+                    const change = ((stats.totalToday - stats.yesterdayTotal) / stats.yesterdayTotal) * 100;
+                    const isUp = change >= 0;
+                    return <span className={`text-[9px] font-bold ${isUp ? 'text-blue-400' : 'text-rose-400'}`}>{isUp ? '\u2191' : '\u2193'}{Math.abs(change).toFixed(1)}%</span>;
+                  })()}
+                </div>
+              </div>
+            </div>
           </div>
-          <div className="text-2xl font-black tracking-tighter flex items-baseline gap-1">
-            {Math.round(sortBy === 'today' ? stats.totalToday : stats.totalAll).toLocaleString()}
-            {sortBy === 'today' && stats.yesterdayTotal > 0 && (() => {
-              const change = ((stats.totalToday - stats.yesterdayTotal) / stats.yesterdayTotal) * 100;
-              const isUp = change >= 0;
-              return <span className={`text-[10px] font-bold ${isUp ? 'text-blue-400' : 'text-rose-400'}`}>{isUp ? '\u2191' : '\u2193'}{Math.abs(change).toFixed(1)}%</span>;
-            })()}
+          <div className="bg-white p-2.5 rounded-xl border border-gray-100 shadow-sm">
+            <div className="text-[7px] font-bold text-slate-400 uppercase">平均单车</div>
+            <div className="text-sm font-black text-slate-800 leading-tight">{(stats.vehicleCount > 0 ? (sortBy === 'today' ? stats.totalToday : stats.totalAll) / stats.vehicleCount : 0).toFixed(0)}</div>
+            <div className="text-[7px] text-slate-400">km/台</div>
+          </div>
+          <div className="bg-white p-2.5 rounded-xl border border-gray-100 shadow-sm">
+            <div className="text-[7px] font-bold text-slate-400 uppercase">监控台数</div>
+            <div className="text-sm font-black text-slate-800 leading-tight">{stats.vehicleCount}</div>
+            <div className="text-[7px] text-slate-400">台</div>
           </div>
-          <div className="absolute -right-4 -bottom-4 w-12 h-12 bg-blue-500/10 rounded-full blur-xl"></div>
-        </div>
-        <div className="bg-white p-3 rounded-2xl border border-gray-100 shadow-sm">
-          <div className="text-[8px] font-bold text-slate-400 uppercase mb-1">平均单车</div>
-          <div className="text-sm font-black text-slate-800">{(stats.vehicleCount > 0 ? (sortBy === 'today' ? stats.totalToday : stats.totalAll) / stats.vehicleCount : 0).toFixed(0)}</div>
-          <div className="text-[7px] text-slate-400 mt-0.5">KM/台</div>
-        </div>
-        <div className="bg-white p-3 rounded-2xl border border-gray-100 shadow-sm">
-          <div className="text-[8px] font-bold text-slate-400 uppercase mb-1">监控台数</div>
-          <div className="text-sm font-black text-slate-800">{stats.vehicleCount}</div>
-          <div className="text-[7px] text-slate-400 mt-0.5">台</div>
         </div>
       </div>