From c2d227059c7fb1d62fa4c4ac4a4a16caeeb6888f Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Thu, 2 Apr 2026 18:10:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E6=97=B6=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB=20-=20KPI=E9=AA=A8?=
 =?UTF-8?q?=E6=9E=B6=E5=B1=8F+=E8=BD=A6=E8=BE=86=E5=88=97=E8=A1=A8skeleton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/modules/mileage/MonitoringView.tsx | 33 +++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/modules/mileage/MonitoringView.tsx b/src/modules/mileage/MonitoringView.tsx
index aad7a0d..21f8387 100644
--- a/src/modules/mileage/MonitoringView.tsx
+++ b/src/modules/mileage/MonitoringView.tsx
@@ -123,6 +123,7 @@ export default function MonitoringView() {
   const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
+  const [pageLoading, setPageLoading] = useState(true);
   const [showBackToTop, setShowBackToTop] = useState(false);
   const PAGE_SIZE = 50;
 
@@ -131,6 +132,7 @@ export default function MonitoringView() {
 
   // 加载首页数据
   const loadFirstPage = useCallback(() => {
+    setPageLoading(true);
     fetchMonitoring({
       sortBy,
       sortOrder,
@@ -155,7 +157,7 @@ export default function MonitoringView() {
       setTotal(d.total);
       setPage(1);
       setHasMore(d.page < d.totalPages);
-    }).catch(() => {});
+    }).catch(() => {}).finally(() => setPageLoading(false));
   }, [sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterProject, filterEntity, filterRentStatus, filterPlatePrefix, filterTargetName, filterPlate, appliedMileageRange, filterDate]);
 
   // 加载更多
@@ -760,22 +762,21 @@ export default function MonitoringView() {
 
       {/* Sticky header: KPI + 清单标题 */}
       <div className="sticky top-[44px] z-20 bg-[#F8F9FB] pt-1 pb-1 space-y-2">
-        <div className="grid grid-cols-4 gap-2">
+        <div className={`grid grid-cols-4 gap-2 transition-opacity ${pageLoading ? 'opacity-60' : ''}`}>
           <div className="col-span-2 bg-slate-900 p-2.5 rounded-xl text-white relative overflow-hidden">
             <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>
+              {pageLoading ? <div className="h-5 w-20 bg-slate-700 rounded animate-pulse"></div> : <>{Math.round(sortBy === 'today' ? stats.totalToday : stats.totalAll).toLocaleString()} <span className="text-[8px] text-slate-400">km</span></>}
             </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 > 0 ? (sortBy === 'today' ? stats.totalToday : stats.totalAll) / stats.vehicleCount : 0).toFixed(0)}</div>
+            <div className="text-sm font-black text-slate-800 leading-tight">{pageLoading ? <div className="h-4 w-8 bg-slate-100 rounded animate-pulse"></div> : (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-sm font-black text-slate-800 leading-tight">{pageLoading ? <div className="h-4 w-8 bg-slate-100 rounded animate-pulse"></div> : stats.vehicleCount}</div>
             <div className="text-[7px] text-slate-400">台</div>
           </div>
         </div>
@@ -788,6 +789,26 @@ export default function MonitoringView() {
       {/* Vehicle List */}
       <div className="space-y-1.5">
 
+        {pageLoading && (
+          <div className="space-y-1.5">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="bg-white px-3 py-3 rounded-xl border border-slate-50 shadow-sm flex items-center justify-between animate-pulse">
+                <div className="flex items-center gap-3 flex-1">
+                  <div className="w-8 h-8 rounded-lg bg-slate-100"></div>
+                  <div className="space-y-1.5 flex-1">
+                    <div className="h-3 bg-slate-100 rounded w-24"></div>
+                    <div className="h-2 bg-slate-50 rounded w-36"></div>
+                  </div>
+                </div>
+                <div className="space-y-1.5 text-right">
+                  <div className="h-4 bg-slate-100 rounded w-16 ml-auto"></div>
+                  <div className="h-2 bg-slate-50 rounded w-20 ml-auto"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
         <div className="grid grid-cols-1 gap-1.5">
           {filteredVehicles.map((v) => (
             <motion.div