feat: 三个筛选区域增加已选条件标签栏，支持单个×和一键清除

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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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">