feat: improve asset inventory statistics and responsive UX (v1.1.16)

src/modules/assets/components/overview/InventoryStatisticsSection.tsx

@@ -1,3 +1,4 @@
+import { InventoryStatusCounts } from './InventoryStatusCounts';
 import { Filter } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import { InventoryDesktopTable } from './InventoryDesktopTable';
@@ -39,20 +40,19 @@ export function InventoryStatisticsSection({
   };
 
   return (
-    <div className="bg-white rounded-2xl border border-gray-100 shadow-sm mb-6 overflow-hidden min-h-[420px]">
+    <div data-testid="inventory-statistics" className="bg-white rounded-2xl border border-gray-100 shadow-sm mb-6 overflow-hidden min-h-[420px]">
       <div className="p-3 sm:p-4 border-b border-gray-50 bg-white flex items-center justify-between relative">
         <div className="flex items-center gap-3">
           <div className="w-1.5 h-6 bg-blue-600 rounded-full"></div>
           <div className="flex flex-col">
             <h2 className="text-lg font-bold text-gray-800 leading-tight">库存统计</h2>
-            <span className="text-[10px] text-gray-400 font-medium">实时更新库存数据</span>
+            <span className="text-[10px] text-gray-400 font-medium">按区域或车型查看库存，点击数量查看车辆</span>
           </div>
         </div>
 
-        <div className="flex items-center gap-6 ml-auto pr-2">
-          <div className="flex flex-col items-end cursor-pointer hover:opacity-80 transition-opacity"
-               onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Inventory', source: 'asset', title: '库存总数' })}>
-            <span className="text-[10px] text-gray-400 font-bold tracking-wider uppercase mb-0.5">总库存数据</span>
+        <div className="flex items-center gap-3 ml-auto pr-2">
+          <div className="flex flex-col items-end">
+            <span className="text-[10px] text-gray-400 font-bold tracking-wider uppercase mb-0.5">当前库存</span>
             <span className="text-2xl font-black text-gray-900 leading-none">
               {filteredInventoryStats.reduce((acc, s) => acc + s.quantity, 0)}
               <span className="text-xs font-bold text-gray-400 ml-1">台</span>
@@ -78,14 +78,15 @@ export function InventoryStatisticsSection({
             <AnimatePresence>
               {isInventoryFilterOpen && (
                 <>
+                  <button type="button" aria-label="关闭库存筛选" className="fixed inset-0 z-40 bg-slate-900/30" onClick={()=>setIsInventoryFilterOpen(false)} />
                   <motion.div
                     initial={{ opacity: 0, y: 10, scale: 0.95 }}
                     animate={{ opacity: 1, y: 0, scale: 1 }}
                     exit={{ opacity: 0, y: 10, scale: 0.95 }}
-                    className="fixed inset-x-4 top-20 max-h-[80vh] overflow-auto sm:inset-auto sm:top-20 sm:right-4 sm:w-72 bg-white rounded-xl shadow-2xl border border-slate-100 z-50 p-4"
+                    className="asset-filter-panel fixed inset-x-4 top-20 max-h-[80vh] overflow-auto sm:inset-auto sm:top-20 sm:right-4 sm:w-72 bg-white rounded-xl shadow-2xl border border-slate-100 z-50 p-4"
                   >
                     <div className="flex justify-between items-center mb-4">
-                      <h3 className="text-xs font-bold text-slate-800">库存统计 - 数据筛选</h3>
+                      <h3 className="text-sm font-bold text-slate-800">筛选库存</h3>
                       <button onClick={() => setDraftInventoryFilters({ region: '', city: '', brand: '', type: '', model: '' })} className="text-[10px] text-blue-500 hover:underline">重置所有</button>
                     </div>
 
@@ -135,6 +136,11 @@ export function InventoryStatisticsSection({
         </div>
       </div>
 
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-b border-slate-100 px-4 py-3" data-testid="inventory-status-summary">
+        <InventoryStatusCounts rows={filteredInventoryStats} />
+        <span className="text-[10px] text-slate-400">随当前筛选统计，已包含在库存总数中</span>
+      </div>
+
       <div className="px-4 py-3 bg-gray-50/50 border-b border-gray-100">
         <div className="flex bg-gray-200/50 p-1 rounded-lg w-fit shadow-inner">
           <button
@@ -193,6 +199,7 @@ export function InventoryStatisticsSection({
         </div>
       )}
 
+      {filteredInventoryStats.length === 0 && <div className="py-12 text-center"><p className="text-sm font-medium text-slate-700">没有符合条件的库存</p><button type="button" onClick={()=>setInventoryFilters({region:'',city:'',brand:'',type:'',model:''})} className="mt-3 rounded-xl bg-blue-50 px-4 py-2 text-sm text-blue-700">清除筛选</button></div>}
       {/* Desktop View Table */}
       <InventoryDesktopTable {...listProps} />