From e57b8d8801491b328855f7f4804680b2ad8e9645 Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Thu, 2 Apr 2026 00:38:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=85=A8=E5=B1=8F=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1=E4=B8=BA=E7=BA=B5=E5=90=91?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 去掉 CSS transform 旋转（移动端不兼容）
- KPI 改为单行横排4个卡片
- 标题栏+KPI 紧凑排列在顶部
- 表格区域占满剩余空间，可滚动查看所有列
- 移动端和桌面端统一布局

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

diff --git a/src/modules/mileage/MonitoringView.tsx b/src/modules/mileage/MonitoringView.tsx
index b26ae05..d0886bb 100644
--- a/src/modules/mileage/MonitoringView.tsx
+++ b/src/modules/mileage/MonitoringView.tsx
@@ -241,82 +241,53 @@ export default function MonitoringView() {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 z-[100] bg-slate-950 flex flex-row p-4 gap-4 overflow-hidden portrait:origin-top-left"
-            style={{
-              ...(typeof window !== 'undefined' && window.innerHeight > window.innerWidth
-                ? { transform: 'rotate(90deg) translateY(-100%)', width: window.innerHeight, height: window.innerWidth, transformOrigin: 'top left' }
-                : {}),
-            }}
+            className="fixed inset-0 z-[100] bg-slate-950 flex flex-col overflow-hidden"
           >
-            {/* Sidebar Stats */}
-            <div className="flex flex-col gap-4 w-72 flex-shrink-0">
+            {/* Top bar: title + KPI row + close */}
+            <div className="flex-shrink-0 p-3 border-b border-slate-800 space-y-2">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
-                  <div className="w-1 h-6 bg-blue-500 rounded-full"></div>
-                  <h2 className="text-white font-bold text-lg">全屏监控</h2>
+                  <div className="w-1 h-5 bg-blue-500 rounded-full"></div>
+                  <h2 className="text-white font-bold text-sm">全屏监控</h2>
                 </div>
                 <div className="flex items-center gap-2">
                   <button
-                    onClick={() => {
-                      setFilterDept('All');
-                      setFilterProject('All');
-                      setFilterPlate('All');
-                      setSearchTerm('');
-                    }}
-                    className="p-2 bg-slate-800 text-slate-400 rounded-full hover:text-blue-400 transition-colors"
-                    title="重置筛选"
+                    onClick={() => { setFilterDept('All'); setFilterCustomer('All'); setFilterPlate('All'); setSearchTerm(''); }}
+                    className="p-1.5 bg-slate-800 text-slate-400 rounded-full hover:text-blue-400 transition-colors"
                   >
-                    <RotateCcw size={16} />
+                    <RotateCcw size={14} />
                   </button>
-                  <button
-                    onClick={toggleFullscreen}
-                    className="p-2 bg-slate-800 text-slate-400 rounded-full hover:text-white transition-colors"
-                  >
-                    <Minimize2 size={20} />
+                  <button onClick={toggleFullscreen} className="p-1.5 bg-slate-800 text-slate-400 rounded-full hover:text-white transition-colors">
+                    <Minimize2 size={16} />
                   </button>
                 </div>
               </div>
-
-              {/* KPI Cards in Fullscreen */}
-              <div className="grid grid-cols-2 landscape:grid-cols-1 gap-3">
-                <div className={`bg-slate-900/50 border p-4 rounded-2xl transition-all ${sortBy === 'today' ? 'border-blue-500/50 ring-1 ring-blue-500/20' : 'border-slate-800'}`}>
-                  <div className="text-[10px] font-bold text-slate-500 uppercase mb-1">今日总里程</div>
-                  <div className="text-2xl font-black text-white tracking-tighter">
-                    {stats.totalToday.toLocaleString()}
-                    <span className="text-blue-400 text-xs ml-2">KM</span>
-                  </div>
+              {/* KPI — single row */}
+              <div className="flex gap-2">
+                <div className={`flex-1 bg-slate-900/50 border px-3 py-2 rounded-xl ${sortBy === 'today' ? 'border-blue-500/50' : 'border-slate-800'}`}>
+                  <div className="text-[8px] font-bold text-slate-500 uppercase">今日总里程</div>
+                  <div className="text-base font-black text-white">{Math.round(stats.totalToday).toLocaleString()} <span className="text-blue-400 text-[9px]">km</span></div>
                 </div>
-                <div className={`bg-slate-900/50 border p-4 rounded-2xl transition-all ${sortBy === 'total' ? 'border-blue-500/50 ring-1 ring-blue-500/20' : 'border-slate-800'}`}>
-                  <div className="text-[10px] font-bold text-slate-500 uppercase mb-1">累计总里程</div>
-                  <div className="text-2xl font-black text-white tracking-tighter">
-                    {stats.totalAll.toLocaleString()}
-                    <span className="text-blue-400 text-xs ml-2">KM</span>
-                  </div>
+                <div className={`flex-1 bg-slate-900/50 border px-3 py-2 rounded-xl ${sortBy === 'total' ? 'border-blue-500/50' : 'border-slate-800'}`}>
+                  <div className="text-[8px] font-bold text-slate-500 uppercase">累计总里程</div>
+                  <div className="text-base font-black text-white">{Math.round(stats.totalAll).toLocaleString()} <span className="text-blue-400 text-[9px]">km</span></div>
                 </div>
-                <div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl">
-                  <div className="text-[10px] font-bold text-slate-500 uppercase mb-1">监控台数</div>
-                  <div className="text-2xl font-black text-white tracking-tighter">
-                    {stats.vehicleCount}
-                    <span className="text-blue-400 text-xs ml-2">台</span>
-                  </div>
+                <div className="flex-1 bg-slate-900/50 border border-slate-800 px-3 py-2 rounded-xl">
+                  <div className="text-[8px] font-bold text-slate-500 uppercase">监控台数</div>
+                  <div className="text-base font-black text-white">{stats.vehicleCount} <span className="text-blue-400 text-[9px]">台</span></div>
                 </div>
-                <div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl">
-                  <div className="text-[10px] font-bold text-slate-500 uppercase mb-1">
-                    平均单车 ({sortBy === 'today' ? '今日' : '累计'})
-                  </div>
-                  <div className="text-2xl font-black text-white tracking-tighter">
-                    {(stats.vehicleCount > 0 ? (sortBy === 'today' ? stats.totalToday : stats.totalAll) / stats.vehicleCount : 0).toFixed(0)}
-                    <span className="text-blue-400 text-xs ml-2">KM</span>
-                  </div>
+                <div className="flex-1 bg-slate-900/50 border border-slate-800 px-3 py-2 rounded-xl">
+                  <div className="text-[8px] font-bold text-slate-500 uppercase">平均单车</div>
+                  <div className="text-base font-black text-white">{(stats.vehicleCount > 0 ? (sortBy === 'today' ? stats.totalToday : stats.totalAll) / stats.vehicleCount : 0).toFixed(0)} <span className="text-blue-400 text-[9px]">km</span></div>
                 </div>
               </div>
             </div>
 
-            {/* Main Table Area */}
-            <div className="flex-1 bg-slate-900/30 border border-slate-800 rounded-2xl overflow-hidden flex flex-col">
-              <div className="p-4 border-b border-slate-800 flex justify-between items-center bg-slate-900/50">
-                <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">车辆实时明细数据</span>
-                <div className="flex items-center gap-4 text-[10px] text-slate-500">
+            {/* Table Area */}
+            <div className="flex-1 overflow-hidden flex flex-col">
+              <div className="px-3 py-2 border-b border-slate-800 flex justify-between items-center flex-shrink-0">
+                <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">车辆实时明细数据</span>
+                <div className="flex items-center gap-3 text-[9px] text-slate-500">
                   <div className="flex items-center gap-1">
                     <div className="w-2 h-2 rounded-full bg-green-500"></div>
                     <span>在线</span>