From cb620e51010d93eea214c97fa32d1d2f6f6eeeb8 Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Wed, 1 Apr 2026 23:18:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=AD=9B=E9=80=89=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E5=B1=95=E7=A4=BA+=E5=8D=95=E7=8B=AC?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4+=E6=B8=85=E9=99=A4=E5=85=A8=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

筛选后在 KPI 卡片上方展示活跃筛选条件标签（蓝色圆角），
每个标签可单独点×删除，右侧"清除"按钮重置所有筛选。
支持：部门/项目/主体/车牌/搜索/里程范围/地区。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/modules/mileage/MonitoringView.tsx | 32 ++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/modules/mileage/MonitoringView.tsx b/src/modules/mileage/MonitoringView.tsx
index 52f6e82..d5c56f9 100644
--- a/src/modules/mileage/MonitoringView.tsx
+++ b/src/modules/mileage/MonitoringView.tsx
@@ -710,6 +710,38 @@ export default function MonitoringView() {
         )}
       </AnimatePresence>
 
+      {/* Active Filter Tags */}
+      {(() => {
+        const tags: { label: string; onClear: () => void }[] = [];
+        if (filterDept !== 'All') tags.push({ label: `部门: ${filterDept}`, onClear: () => setFilterDept('All') });
+        if (filterProject !== 'All') tags.push({ label: `项目: ${filterProject}`, onClear: () => setFilterProject('All') });
+        if (filterEntity !== 'All') tags.push({ label: `主体: ${filterEntity}`, onClear: () => setFilterEntity('All') });
+        if (filterPlate !== 'All') tags.push({ label: `车牌: ${filterPlate}`, onClear: () => setFilterPlate('All') });
+        if (searchTerm) tags.push({ label: `搜索: ${searchTerm}`, onClear: () => setSearchTerm('') });
+        if (appliedMileageRange.min) tags.push({ label: `里程≥${appliedMileageRange.min}`, onClear: () => { setFilterMileageRange(prev => ({ ...prev, min: '' })); setAppliedMileageRange(prev => ({ ...prev, min: '' })); } });
+        if (appliedMileageRange.max) tags.push({ label: `里程≤${appliedMileageRange.max}`, onClear: () => { setFilterMileageRange(prev => ({ ...prev, max: '' })); setAppliedMileageRange(prev => ({ ...prev, max: '' })); } });
+        if (filterRegionCode !== 'All') tags.push({ label: `地区: ${filterRegionCode}`, onClear: () => setFilterRegionCode('All') });
+        if (tags.length === 0) return null;
+        const clearAll = () => {
+          setFilterDept('All'); setFilterProject('All'); setFilterEntity('All');
+          setFilterPlate('All'); setSearchTerm(''); setFilterRegionCode('All');
+          setFilterMileageRange({ min: '', max: '' }); setAppliedMileageRange({ min: '', max: '' });
+        };
+        return (
+          <div className="flex items-center gap-2 flex-wrap">
+            {tags.map((tag, i) => (
+              <span key={i} className="inline-flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-600 rounded-lg text-[10px] font-bold">
+                {tag.label}
+                <button onClick={tag.onClear} className="hover:text-blue-800 ml-0.5">&times;</button>
+              </span>
+            ))}
+            <button onClick={clearAll} className="text-[10px] font-bold text-rose-500 hover:text-rose-600 ml-auto">
+              清除
+            </button>
+          </div>
+        );
+      })()}
+
       {/* High Density KPI Grid */}
       <div className="grid grid-cols-4 gap-2">
         <div className="col-span-2 bg-slate-900 p-3 rounded-2xl text-white relative overflow-hidden">