From d7575aeea2a9befd6108937a86151484cab76524 Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Sun, 29 Mar 2026 00:23:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=89=E4=B8=AA=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E5=A2=9E=E5=8A=A0=E5=B7=B2=E9=80=89=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=87=E7=AD=BE=E6=A0=8F=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=8D=95=E4=B8=AA=C3=97=E5=92=8C=E4=B8=80=E9=94=AE=E6=B8=85?=
 =?UTF-8?q?=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 库存/区域/客户统计在筛选按钮下方显示已选条件标签
- 每个标签可点×单独移除
- 右侧"清除"按钮一键重置所有条件
- 不需要打开筛选面板即可快速清除

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

diff --git a/src/App.tsx b/src/App.tsx
index 52b5905..e3a0224 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1128,44 +1128,38 @@ export default function App() {
 
           {/* Active Filters Bar */}
           {(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>
+            <div className="px-4 py-2 border-b border-gray-100 flex flex-wrap gap-2 items-center">
               {inventoryFilters.region && (
-                <span className="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-[10px] flex items-center gap-1">
+                <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-[10px] flex items-center gap-1">
                   区域: {inventoryFilters.region}
-                  <button onClick={() => setInventoryFilters({...inventoryFilters, region: ''})} className="hover:text-blue-800">×</button>
+                  <button onClick={() => setInventoryFilters({...inventoryFilters, region: ''})} className="hover:text-red-500 ml-0.5">×</button>
                 </span>
               )}
               {inventoryFilters.city && (
-                <span className="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-[10px] flex items-center gap-1">
+                <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-[10px] flex items-center gap-1">
                   城市: {inventoryFilters.city}
-                  <button onClick={() => setInventoryFilters({...inventoryFilters, city: ''})} className="hover:text-blue-800">×</button>
+                  <button onClick={() => setInventoryFilters({...inventoryFilters, city: ''})} className="hover:text-red-500 ml-0.5">×</button>
                 </span>
               )}
               {inventoryFilters.brand && (
-                <span className="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-[10px] flex items-center gap-1">
+                <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-[10px] flex items-center gap-1">
                   品牌: {inventoryFilters.brand}
-                  <button onClick={() => setInventoryFilters({...inventoryFilters, brand: ''})} className="hover:text-blue-800">×</button>
+                  <button onClick={() => setInventoryFilters({...inventoryFilters, brand: ''})} className="hover:text-red-500 ml-0.5">×</button>
                 </span>
               )}
               {inventoryFilters.type && (
-                <span className="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-[10px] flex items-center gap-1">
+                <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-[10px] flex items-center gap-1">
                   车型: {inventoryFilters.type}
-                  <button onClick={() => setInventoryFilters({...inventoryFilters, type: '', model: ''})} className="hover:text-blue-800">×</button>
+                  <button onClick={() => setInventoryFilters({...inventoryFilters, type: '', model: ''})} className="hover:text-red-500 ml-0.5">×</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">
+                <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-[10px] flex items-center gap-1">
                   批次: {inventoryFilters.model}
-                  <button onClick={() => setInventoryFilters({...inventoryFilters, model: ''})} className="hover:text-blue-800">×</button>
+                  <button onClick={() => setInventoryFilters({...inventoryFilters, model: ''})} className="hover:text-red-500 ml-0.5">×</button>
                 </span>
               )}
-              <button
-                onClick={() => setInventoryFilters({ region: '', city: '', brand: '', type: '', model: '' })}
-                className="text-[10px] text-slate-400 hover:text-red-500 ml-auto"
-              >
-                清除全部
-              </button>
+              <button onClick={() => setInventoryFilters({ region: '', city: '', brand: '', type: '', model: '' })} className="text-[11px] text-red-500 font-bold ml-auto hover:text-red-600">清除</button>
             </div>
           )}
 
@@ -2016,6 +2010,30 @@ export default function App() {
             </div>
           </div>
 
+          {Object.values(regionFilters).some(v => v !== '') && (
+            <div className="px-3 py-2 border-b border-gray-100 flex flex-wrap gap-2 items-center">
+              {regionFilters.customer && (
+                <span className="px-2 py-0.5 bg-slate-100 text-slate-700 rounded text-[10px] flex items-center gap-1">
+                  客户: {regionFilters.customer}
+                  <button onClick={() => setRegionFilters(prev => ({...prev, customer: ''}))} className="hover:text-red-500 ml-0.5">×</button>
+                </span>
+              )}
+              {regionFilters.region && (
+                <span className="px-2 py-0.5 bg-slate-100 text-slate-700 rounded text-[10px] flex items-center gap-1">
+                  区域: {regionFilters.region}
+                  <button onClick={() => setRegionFilters(prev => ({...prev, region: ''}))} className="hover:text-red-500 ml-0.5">×</button>
+                </span>
+              )}
+              {regionFilters.city && (
+                <span className="px-2 py-0.5 bg-slate-100 text-slate-700 rounded text-[10px] flex items-center gap-1">
+                  城市: {regionFilters.city}
+                  <button onClick={() => setRegionFilters(prev => ({...prev, city: ''}))} className="hover:text-red-500 ml-0.5">×</button>
+                </span>
+              )}
+              <button onClick={() => setRegionFilters({ region: '', city: '', customer: '' })} className="text-[11px] text-red-500 font-bold ml-auto hover:text-red-600">清除</button>
+            </div>
+          )}
+
           <div className="p-2">
             <div className="hidden lg:block overflow-x-auto">
               <table className="w-full text-left border-collapse min-w-[1000px]">
@@ -2332,6 +2350,42 @@ export default function App() {
             </div>
           </div>
 
+          {Object.values(customerFilters).some(v => v !== '') && (
+            <div className="px-3 py-2 border-b border-gray-100 flex flex-wrap gap-2 items-center">
+              {customerFilters.customer && (
+                <span className="px-2 py-0.5 bg-emerald-50 text-emerald-700 rounded text-[10px] flex items-center gap-1">
+                  客户: {customerFilters.customer}
+                  <button onClick={() => setCustomerFilters(prev => ({...prev, customer: ''}))} className="hover:text-red-500 ml-0.5">×</button>
+                </span>
+              )}
+              {customerFilters.manager && (
+                <span className="px-2 py-0.5 bg-emerald-50 text-emerald-700 rounded text-[10px] flex items-center gap-1">
+                  负责人: {customerFilters.manager}
+                  <button onClick={() => setCustomerFilters(prev => ({...prev, manager: ''}))} className="hover:text-red-500 ml-0.5">×</button>
+                </span>
+              )}
+              {customerFilters.brand && (
+                <span className="px-2 py-0.5 bg-emerald-50 text-emerald-700 rounded text-[10px] flex items-center gap-1">
+                  品牌: {customerFilters.brand}
+                  <button onClick={() => setCustomerFilters(prev => ({...prev, brand: ''}))} className="hover:text-red-500 ml-0.5">×</button>
+                </span>
+              )}
+              {customerFilters.department && (
+                <span className="px-2 py-0.5 bg-emerald-50 text-emerald-700 rounded text-[10px] flex items-center gap-1">
+                  部门: {customerFilters.department}
+                  <button onClick={() => setCustomerFilters(prev => ({...prev, department: ''}))} className="hover:text-red-500 ml-0.5">×</button>
+                </span>
+              )}
+              {customerFilters.region && (
+                <span className="px-2 py-0.5 bg-emerald-50 text-emerald-700 rounded text-[10px] flex items-center gap-1">
+                  区域: {customerFilters.region}
+                  <button onClick={() => setCustomerFilters(prev => ({...prev, region: ''}))} className="hover:text-red-500 ml-0.5">×</button>
+                </span>
+              )}
+              <button onClick={() => setCustomerFilters({ customer: '', brand: '', department: '', manager: '', region: '' })} className="text-[11px] text-red-500 font-bold ml-auto hover:text-red-600">清除</button>
+            </div>
+          )}
+
           <div className="p-0 sm:p-2">
             {/* Desktop Table View (Customer) */}
             <div className="hidden lg:block overflow-x-auto">