From 258def4fdd620b8e88438a4516cc6860a8f4153a Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Sat, 28 Mar 2026 23:51:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=93=E5=AD=98=E7=AD=9B=E9=80=89"?=
 =?UTF-8?q?=E8=BD=A6=E5=9E=8B=E5=90=8D=E7=A7=B0"=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E9=80=89=E6=8B=A9"=E8=BD=A6=E5=9E=8B?=
 =?UTF-8?q?=E2=86=92=E6=89=B9=E6=AC=A1"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增车型下拉(4.5T普货/冷链/18T/49T/挂车/其他)
- 批次下拉根据所选车型联动过滤，显示该车型下的具体型号
- 切换车型时自动清空批次选择
- 筛选标签栏对应更新：车型/批次

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

diff --git a/src/App.tsx b/src/App.tsx
index a2d42c6..370bd9a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -172,7 +172,7 @@ export default function App() {
   const [inventoryTab, setInventoryTab] = useState<'region' | 'model'>('region');
   const [expandedInventoryRegions, setExpandedInventoryRegions] = useState<Set<string>>(new Set());
   const [expandedInventoryTypes, setExpandedInventoryTypes] = useState<Set<string>>(new Set(['4.5T普货']));
-  const [inventoryFilters, setInventoryFilters] = useState({ region: '', city: '', brand: '', batch: '', model: '' });
+  const [inventoryFilters, setInventoryFilters] = useState({ region: '', city: '', brand: '', type: '', model: '' });
   const [isInventoryFilterOpen, setIsInventoryFilterOpen] = useState(false);
 
   // Chart view states
@@ -363,15 +363,23 @@ export default function App() {
     const mr = !inventoryFilters.region || s.region === inventoryFilters.region;
     const mc = !inventoryFilters.city || s.city === inventoryFilters.city;
     const mb = !inventoryFilters.brand || s.brand === inventoryFilters.brand;
-    const mbt = !inventoryFilters.batch || s.batch === inventoryFilters.batch;
+    const mt = !inventoryFilters.type || s.type === inventoryFilters.type;
     const mm = !inventoryFilters.model || s.model === inventoryFilters.model;
-    return mr && mc && mb && mbt && mm;
+    return mr && mc && mb && mt && mm;
   }), [inventoryData, inventoryFilters]);
 
   const uniqueInventoryBrands = useMemo(() => Array.from(new Set(inventoryData.map((s) => s.brand).filter(Boolean))), [inventoryData]);
   const uniqueInventoryRegions = useMemo(() => Array.from(new Set(inventoryData.map((s) => s.region))), [inventoryData]);
   const uniqueInventoryCities = useMemo(() => Array.from(new Set(inventoryData.map((s) => s.city).filter(Boolean))), [inventoryData]);
-  const uniqueInventoryBatches = useMemo(() => Array.from(new Set(inventoryData.map((s) => s.batch).filter(Boolean))), [inventoryData]);
+  const INVENTORY_TYPE_ORDER_LIST = ['4.5T普货', '4.5T冷链', '18T', '49T', '挂车', '其他'];
+  const uniqueInventoryTypes = useMemo(() => {
+    const types = Array.from(new Set(inventoryData.map((s) => s.type).filter(Boolean)));
+    return types.sort((a, b) => INVENTORY_TYPE_ORDER_LIST.indexOf(a) - INVENTORY_TYPE_ORDER_LIST.indexOf(b));
+  }, [inventoryData]);
+  const uniqueInventoryModelsForType = useMemo(() => {
+    const source = inventoryFilters.type ? inventoryData.filter((s) => s.type === inventoryFilters.type) : inventoryData;
+    return Array.from(new Set(source.map((s) => s.model).filter(Boolean)));
+  }, [inventoryData, inventoryFilters.type]);
 
   const inventoryByRegion = useMemo(() => {
     const result: Record<string, Record<string, RegionalInventoryStats[]>> = {};
@@ -992,14 +1000,14 @@ export default function App() {
                 <button
                   onClick={() => setIsInventoryFilterOpen(!isInventoryFilterOpen)}
                   className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${
-                    isInventoryFilterOpen || (inventoryFilters.region || inventoryFilters.city || inventoryFilters.brand || inventoryFilters.batch || inventoryFilters.model)
+                    isInventoryFilterOpen || (inventoryFilters.region || inventoryFilters.city || inventoryFilters.brand || inventoryFilters.type || inventoryFilters.model)
                       ? 'bg-blue-600 text-white shadow-md'
                       : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                   }`}
                 >
                   <Filter size={14} />
                   <span>筛选</span>
-                  {(inventoryFilters.region || inventoryFilters.city || inventoryFilters.brand || inventoryFilters.batch || inventoryFilters.model) && (
+                  {(inventoryFilters.region || inventoryFilters.city || inventoryFilters.brand || inventoryFilters.type || inventoryFilters.model) && (
                     <span className="w-2 h-2 bg-white rounded-full animate-pulse"></span>
                   )}
                 </button>
@@ -1017,7 +1025,7 @@ export default function App() {
                         <div className="flex justify-between items-center mb-4">
                           <h3 className="text-xs font-bold text-slate-800">库存统计 - 数据筛选</h3>
                           <button
-                            onClick={() => setInventoryFilters({ region: '', city: '', brand: '', batch: '', model: '' })}
+                            onClick={() => setInventoryFilters({ region: '', city: '', brand: '', type: '', model: '' })}
                             className="text-[10px] text-blue-500 hover:underline"
                           >
                             重置所有
@@ -1047,10 +1055,17 @@ export default function App() {
                             </select>
                           </div>
                           <div>
-                            <label className="text-[10px] text-slate-400 block mb-1">车型名称</label>
-                            <select value={inventoryFilters.model} onChange={(e) => setInventoryFilters({...inventoryFilters, model: e.target.value})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer">
+                            <label className="text-[10px] text-slate-400 block mb-1">车型</label>
+                            <select value={inventoryFilters.type} onChange={(e) => setInventoryFilters({...inventoryFilters, type: e.target.value, model: ''})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer">
                               <option value="">全部车型</option>
-                              {uniqueInventoryModels.map(m => <option key={m} value={m}>{m}</option>)}
+                              {uniqueInventoryTypes.map(t => <option key={t} value={t}>{t}</option>)}
+                            </select>
+                          </div>
+                          <div>
+                            <label className="text-[10px] text-slate-400 block mb-1">批次</label>
+                            <select value={inventoryFilters.model} onChange={(e) => setInventoryFilters({...inventoryFilters, model: e.target.value})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer">
+                              <option value="">全部批次</option>
+                              {uniqueInventoryModelsForType.map(m => <option key={m} value={m}>{m}</option>)}
                             </select>
                           </div>
                         </div>
@@ -1085,7 +1100,7 @@ export default function App() {
           </div>
 
           {/* Active Filters Bar */}
-          {(inventoryFilters.region || inventoryFilters.city || inventoryFilters.brand || inventoryFilters.batch || inventoryFilters.model) && (
+          {(inventoryFilters.region || inventoryFilters.city || inventoryFilters.brand || inventoryFilters.type || inventoryFilters.model) && (
             <div className="px-4 py-2 bg-white border-b border-slate-50 flex flex-wrap gap-2 items-center">
               <span className="text-[10px] text-slate-400 mr-1">当前筛选:</span>
               {inventoryFilters.region && (
@@ -1106,20 +1121,20 @@ export default function App() {
                   <button onClick={() => setInventoryFilters({...inventoryFilters, brand: ''})} className="hover:text-blue-800">×</button>
                 </span>
               )}
-              {inventoryFilters.batch && (
+              {inventoryFilters.type && (
                 <span className="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-[10px] flex items-center gap-1">
-                  批次: {inventoryFilters.batch}
-                  <button onClick={() => setInventoryFilters({...inventoryFilters, batch: ''})} className="hover:text-blue-800">×</button>
+                  车型: {inventoryFilters.type}
+                  <button onClick={() => setInventoryFilters({...inventoryFilters, type: '', model: ''})} className="hover:text-blue-800">×</button>
                 </span>
               )}
               {inventoryFilters.model && (
                 <span className="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-[10px] flex items-center gap-1">
-                  车型: {inventoryFilters.model}
+                  批次: {inventoryFilters.model}
                   <button onClick={() => setInventoryFilters({...inventoryFilters, model: ''})} className="hover:text-blue-800">×</button>
                 </span>
               )}
               <button
-                onClick={() => setInventoryFilters({ region: '', city: '', brand: '', batch: '', model: '' })}
+                onClick={() => setInventoryFilters({ region: '', city: '', brand: '', type: '', model: '' })}
                 className="text-[10px] text-slate-400 hover:text-red-500 ml-auto"
               >
                 清除全部