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

src/modules/assets/components/OverviewView.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { AssetSummarySection } from './overview/AssetSummarySection';
 import { FlowStatisticsCard } from './overview/FlowStatisticsCard';
 import { InventoryStatisticsSection } from './overview/InventoryStatisticsSection';
@@ -5,8 +6,9 @@ import { SummaryMetrics } from './overview/SummaryMetrics';
 import type { OverviewViewProps } from './overview/types';
 
 export function OverviewView(props: OverviewViewProps) {
+  const [panel, setPanel] = useState<'inventory' | 'models' | 'flow'>('inventory');
   return (
-    <>
+    <div className="space-y-3">
       <SummaryMetrics
         summary={props.summary}
         operatingRate={props.operatingRate}
@@ -15,6 +17,11 @@ export function OverviewView(props: OverviewViewProps) {
         setVehicleSelection={props.setVehicleSelection}
       />
 
+      <nav aria-label="总览统计视图" className="grid grid-cols-3 gap-1 rounded-xl border border-slate-200 bg-slate-100 p-1">
+        {([{id:'inventory',label:'库存统计'},{id:'models',label:'车型资产'},{id:'flow',label:'交还车统计'}] as const).map(item => <button key={item.id} type="button" aria-pressed={panel===item.id} onClick={()=>setPanel(item.id)} className={`min-h-11 rounded-lg px-2 py-2 text-xs sm:text-sm font-semibold transition-colors ${panel===item.id?'bg-white text-blue-700 shadow-sm':'text-slate-600 hover:bg-white/60'}`}>{item.label}</button>)}
+      </nav>
+
+      <div hidden={panel !== 'flow'}>
       <FlowStatisticsCard
         flowRange={props.flowRange}
         setFlowRange={props.setFlowRange}
@@ -26,6 +33,8 @@ export function OverviewView(props: OverviewViewProps) {
         setSelectedFlow={props.setSelectedFlow}
       />
 
+      </div>
+      <div hidden={panel !== 'models'}>
       <AssetSummarySection
         processedData={props.processedData}
         theme={props.theme}
@@ -36,6 +45,8 @@ export function OverviewView(props: OverviewViewProps) {
         setVehicleSelection={props.setVehicleSelection}
       />
 
+      </div>
+      <div hidden={panel !== 'inventory'}>
       <InventoryStatisticsSection
         inventoryFilters={props.inventoryFilters}
         setInventoryFilters={props.setInventoryFilters}
@@ -59,6 +70,7 @@ export function OverviewView(props: OverviewViewProps) {
         toggleInventoryType={props.toggleInventoryType}
         setVehicleSelection={props.setVehicleSelection}
       />
-    </>
+      </div>
+    </div>
   );
 }