diff --git a/src/App.tsx b/src/App.tsx index c8e2cd8..f60e661 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback, useMemo } from 'react'; +import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'; import { Truck, Warehouse, @@ -35,6 +35,76 @@ import type { SummaryData, TypeSummary, VehicleListItem, DeptGroup, RegionGroup, import { fetchSummary, fetchByType, fetchVehicleList, fetchWeeklyDetail, fetchDeptStats, fetchRegionStats, fetchCustomerStats, fetchInventoryStats, fetchRegionChart } from './api'; import type { WeeklyDetailItem } from './api'; +// --- SearchSelect Component --- +function SearchSelect({ value, onChange, options, placeholder, className }: { + value: string; + onChange: (v: string) => void; + options: string[]; + placeholder: string; + className?: string; +}) { + const [open, setOpen] = useState(false); + const [query, setQuery] = useState(''); + const ref = useRef(null); + + useEffect(() => { + const handler = (e: MouseEvent) => { + if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); + }; + document.addEventListener('mousedown', handler); + return () => document.removeEventListener('mousedown', handler); + }, []); + + const filtered = useMemo(() => { + if (!query) return options; + const q = query.toLowerCase(); + return options.filter((o) => o.toLowerCase().includes(q)); + }, [options, query]); + + const displayValue = value || ''; + + return ( +
+
setOpen(!open)} + > + { setQuery(e.target.value); if (!open) setOpen(true); }} + onFocus={() => { setOpen(true); setQuery(''); }} + /> + +
+ {open && ( +
+
{ onChange(''); setQuery(''); setOpen(false); }} + > + {placeholder} +
+ {filtered.map((o) => ( +
{ onChange(o); setQuery(''); setOpen(false); }} + > + {o} +
+ ))} + {filtered.length === 0 && ( +
无匹配项
+ )} +
+ )} +
+ ); +} + // --- Constants --- const TABS = [ { id: 'overview', label: '总览' }, @@ -983,10 +1053,7 @@ export default function App() {
- + setInventoryFilters({...inventoryFilters, model: v})} options={uniqueInventoryModels} placeholder="全部车型" />
@@ -1872,10 +1939,7 @@ export default function App() {
- + setRegionFilters(prev => ({ ...prev, customer: v }))} options={uniqueCustomerNames} placeholder="所有客户" className="text-xs py-2 px-2" />
@@ -2180,18 +2244,12 @@ export default function App() {
- + setCustomerFilters(prev => ({ ...prev, customer: v }))} options={uniqueCustomerNames} placeholder="所有客户" className="text-xs py-2 px-2" />
- + setCustomerFilters(prev => ({ ...prev, manager: v }))} options={uniqueCustomerManagers} placeholder="所有负责人" className="text-xs py-2 px-2" />
@@ -2466,10 +2524,7 @@ export default function App() { {/* Quick Search always visible when collapsed */} {!isModalFilterExpanded && (
e.stopPropagation()}> - + setModalFilters({...modalFilters, plateNumber: v})} options={uniqueModalPlates} placeholder="快速搜索车牌..." className="text-[11px] py-1 px-2" />
)}
- + setModalFilters({...modalFilters, plateNumber: v})} options={uniqueModalPlates} placeholder="全部车牌" className="text-[11px] py-1.5 px-2" />