From d3c85a62e6db49b62b3ec80f0ec8b27026e49dd4 Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Thu, 26 Mar 2026 15:06:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E6=88=AA=E6=96=AD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- KPI卡片添加 whitespace-nowrap 防止文字折行截断
- 小屏隐藏图标省空间
- 运营/库存明细换行展示（自营/租赁、库存/异动）
- 地区缩写改为完整名称（江浙沪/广东/北京/新疆/其他）

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/App.tsx | 66 +++++++++++++++++++++++++----------------------------
 1 file changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4dc6e0f..21b9e38 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -196,80 +196,76 @@ export default function App() {
       {/* Header Summary - Ultra Compact */}
       <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-2 mb-6">
         {/* Total Assets */}
-        <div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2">
-          <div className="w-7 h-7 rounded bg-gray-50 flex items-center justify-center text-gray-400">
+        <div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0">
+          <div className="w-7 h-7 rounded bg-gray-50 flex-shrink-0 flex items-center justify-center text-gray-400 hidden sm:flex">
             <Truck size={14} />
           </div>
-          <div>
-            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">资产总数</div>
+          <div className="min-w-0">
+            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5 whitespace-nowrap">资产总数</div>
             <div className="text-base font-bold text-gray-800 leading-none">{SUMMARY.totalAssets.toLocaleString()}</div>
           </div>
         </div>
 
         {/* Operating */}
-        <div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2">
-          <div className="w-7 h-7 rounded bg-blue-50 flex items-center justify-center text-blue-500">
+        <div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0">
+          <div className="w-7 h-7 rounded bg-blue-50 flex-shrink-0 flex items-center justify-center text-blue-500 hidden sm:flex">
             <Activity size={14} />
           </div>
-          <div>
-            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">总运营</div>
-            <div className="flex items-baseline gap-1">
-              <span className="text-base font-bold text-blue-600 leading-none">{SUMMARY.operating.total}</span>
-              <span className="text-[8px] text-gray-400 leading-none">
-                自{SUMMARY.operating.self} 租{SUMMARY.operating.leased}
-              </span>
+          <div className="min-w-0">
+            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5 whitespace-nowrap">总运营</div>
+            <div className="text-base font-bold text-blue-600 leading-none">{SUMMARY.operating.total}</div>
+            <div className="text-[8px] text-gray-400 leading-none mt-0.5 whitespace-nowrap">
+              自营{SUMMARY.operating.self} 租赁{SUMMARY.operating.leased}
             </div>
           </div>
         </div>
 
         {/* Inventory */}
-        <div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2">
-          <div className="w-7 h-7 rounded bg-gray-50 flex items-center justify-center text-gray-500">
+        <div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0">
+          <div className="w-7 h-7 rounded bg-gray-50 flex-shrink-0 flex items-center justify-center text-gray-500 hidden sm:flex">
             <Warehouse size={14} />
           </div>
-          <div>
-            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">总库存</div>
-            <div className="flex items-baseline gap-1">
-              <span className="text-base font-bold text-gray-800 leading-none">{SUMMARY.inventory.total}</span>
-              <span className="text-[8px] text-gray-400 leading-none">
-                库{SUMMARY.inventory.inStock} 异{SUMMARY.inventory.abnormal}
-              </span>
+          <div className="min-w-0">
+            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5 whitespace-nowrap">总库存</div>
+            <div className="text-base font-bold text-gray-800 leading-none">{SUMMARY.inventory.total}</div>
+            <div className="text-[8px] text-gray-400 leading-none mt-0.5 whitespace-nowrap">
+              库存{SUMMARY.inventory.inStock} 异动{SUMMARY.inventory.abnormal}
             </div>
           </div>
         </div>
 
         {/* Pending */}
         <div
-          className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 cursor-pointer hover:bg-blue-50 transition-colors"
+          className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0 cursor-pointer hover:bg-blue-50 transition-colors"
           onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Pending' })}
         >
-          <div className="w-7 h-7 rounded bg-blue-50 flex items-center justify-center text-blue-500">
+          <div className="w-7 h-7 rounded bg-blue-50 flex-shrink-0 flex items-center justify-center text-blue-500 hidden sm:flex">
             <PlusCircle size={14} />
           </div>
-          <div>
-            <div className="text-[9px] text-blue-500 font-bold uppercase leading-none mb-0.5">待交车</div>
+          <div className="min-w-0">
+            <div className="text-[9px] text-blue-500 font-bold uppercase leading-none mb-0.5 whitespace-nowrap">待交车</div>
             <div className="text-base font-bold text-blue-600 leading-none">{SUMMARY.pendingDelivery}</div>
           </div>
         </div>
 
         {/* New */}
-        <div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2">
-          <div className="w-7 h-7 rounded bg-green-50 flex items-center justify-center text-green-500">
+        <div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0">
+          <div className="w-7 h-7 rounded bg-green-50 flex-shrink-0 flex items-center justify-center text-green-500 hidden sm:flex">
             <PlusCircle size={14} />
           </div>
-          <div>
-            <div className="text-[9px] text-green-500 font-bold uppercase leading-none mb-0.5">本周新增</div>
+          <div className="min-w-0">
+            <div className="text-[9px] text-green-500 font-bold uppercase leading-none mb-0.5 whitespace-nowrap">本周新增</div>
             <div className="text-base font-bold text-green-600 leading-none">{SUMMARY.weeklyNew}</div>
           </div>
         </div>
 
         {/* Removed */}
-        <div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2">
-          <div className="w-7 h-7 rounded bg-red-50 flex items-center justify-center text-red-500">
+        <div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0">
+          <div className="w-7 h-7 rounded bg-red-50 flex-shrink-0 flex items-center justify-center text-red-500 hidden sm:flex">
             <MinusCircle size={14} />
           </div>
-          <div>
-            <div className="text-[9px] text-red-500 font-bold uppercase leading-none mb-0.5">本周移除</div>
+          <div className="min-w-0">
+            <div className="text-[9px] text-red-500 font-bold uppercase leading-none mb-0.5 whitespace-nowrap">本周移除</div>
             <div className="text-base font-bold text-red-600 leading-none">{SUMMARY.weeklyRemoved}</div>
           </div>
         </div>
@@ -626,7 +622,7 @@ export default function App() {
                                       {['嘉兴', '广东', '北京', '新疆', '其他'].map((reg) => (
                                         <div key={reg} className="text-center">
                                           <div className="text-[8px] text-gray-400 mb-0.5">
-                                            {reg === '嘉兴' ? '浙' : reg === '广东' ? '粤' : reg === '北京' ? '京' : reg === '新疆' ? '新' : '其'}
+                                            {reg === '嘉兴' ? '江浙沪' : reg}
                                           </div>
                                           {(model.inventoryRegions[reg] || 0) > 0 ? (
                                             <button