feat(mileage): 外部三选筛选 + 车牌多选粘贴 + 运营区域 + xlsx 下载

- 外部行改为 批次型号 / 运营区域 / 车牌多选；按部门、按客户移入详情面板
- 车牌多选支持从 Excel 粘贴（换行/逗号/空格分隔），未匹配项显示警告
- 新增运营区域筛选：基于 136 批次区域映射（华东/华南/西南/西北）
- 新增 xlsx 数据下载，导出当前筛选结果（带表头样式与列宽）

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

src/modules/mileage/MonitoringView.tsx

@@ -1,13 +1,15 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
 import {
-  Truck, Search, Filter, ChevronDown,
+  Truck, Filter, ChevronDown,
   Maximize2, Minimize2, RotateCcw,
-  ArrowUp, ArrowDown, ChevronsUp,
+  ArrowUp, ArrowDown, ChevronsUp, Download,
 } from 'lucide-react';
 import type { MonitoringVehicle, MonitoringStats, MonitoringFilters } from './types';
 import { fetchMonitoring } from './api';
 import Blur from '../../components/Blur';
+import PlateMultiSelect from './PlateMultiSelect';
+import { exportMileageXlsx } from './xlsx-export';
 
 const SearchableSelect = ({
   options,
@@ -102,15 +104,17 @@ export default function MonitoringView() {
   const [fullscreenLoading, setFullscreenLoading] = useState(false);
 
   // New filters from image
-  const [filterPlate, setFilterPlate] = useState('All');
+  const [filterPlates, setFilterPlates] = useState<string[]>([]);
   const [filterCustomer, setFilterCustomer] = useState('All');
   const [filterProject, setFilterProject] = useState('All');
   const [filterEntity, setFilterEntity] = useState('All');
   const [filterRentStatus, setFilterRentStatus] = useState('All');
   const [filterPlatePrefix, setFilterPlatePrefix] = useState('All');
   const [filterTargetName, setFilterTargetName] = useState('All');
+  const [filterRegion, setFilterRegion] = useState('All');
   const [filterMileageRange, setFilterMileageRange] = useState({ min: '', max: '' });
   const [appliedMileageRange, setAppliedMileageRange] = useState({ min: '', max: '' });
+  const [exporting, setExporting] = useState(false);
   const [filterDate, setFilterDate] = useState(() => {
     const now = new Date();
     if (now.getHours() < 5) now.setDate(now.getDate() - 1);
@@ -119,7 +123,7 @@ export default function MonitoringView() {
 
   const [vehicles, setVehicles] = useState<MonitoringVehicle[]>([]);
   const [stats, setStats] = useState<MonitoringStats>({ totalToday: 0, totalAll: 0, vehicleCount: 0, yesterdayTotal: 0 });
-  const [filterOptions, setFilterOptions] = useState<MonitoringFilters>({ departments: [], customers: [], plates: [], projects: [], entities: [], rentStatuses: [], platePrefixes: [], targetNames: [] });
+  const [filterOptions, setFilterOptions] = useState<MonitoringFilters>({ departments: [], customers: [], plates: [], projects: [], entities: [], rentStatuses: [], platePrefixes: [], targetNames: [], regions: [] });
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(true);
@@ -147,7 +151,8 @@ export default function MonitoringView() {
       rentStatus: filterRentStatus !== 'All' ? filterRentStatus : undefined,
       platePrefix: filterPlatePrefix !== 'All' ? filterPlatePrefix : undefined,
       targetName: filterTargetName !== 'All' ? filterTargetName : undefined,
-      plate: filterPlate !== 'All' ? filterPlate : undefined,
+      region: filterRegion !== 'All' ? filterRegion : undefined,
+      plate: filterPlates.length > 0 ? filterPlates.join(',') : undefined,
       mileageMin: appliedMileageRange.min || undefined,
       mileageMax: appliedMileageRange.max || undefined,
       date: filterDate || undefined,
@@ -159,7 +164,7 @@ export default function MonitoringView() {
       setPage(1);
       setHasMore(d.page < d.totalPages);
     }).catch(() => {}).finally(() => setPageLoading(false));
-  }, [sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterProject, filterEntity, filterRentStatus, filterPlatePrefix, filterTargetName, filterPlate, appliedMileageRange, filterDate]);
+  }, [sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterProject, filterEntity, filterRentStatus, filterPlatePrefix, filterTargetName, filterRegion, filterPlates, appliedMileageRange, filterDate]);
 
   // 加载更多
   const loadMore = useCallback(() => {
@@ -179,7 +184,8 @@ export default function MonitoringView() {
       rentStatus: filterRentStatus !== 'All' ? filterRentStatus : undefined,
       platePrefix: filterPlatePrefix !== 'All' ? filterPlatePrefix : undefined,
       targetName: filterTargetName !== 'All' ? filterTargetName : undefined,
-      plate: filterPlate !== 'All' ? filterPlate : undefined,
+      region: filterRegion !== 'All' ? filterRegion : undefined,
+      plate: filterPlates.length > 0 ? filterPlates.join(',') : undefined,
       mileageMin: appliedMileageRange.min || undefined,
       mileageMax: appliedMileageRange.max || undefined,
       date: filterDate || undefined,
@@ -188,13 +194,45 @@ export default function MonitoringView() {
       setPage(nextPage);
       setHasMore(nextPage < d.totalPages);
     }).catch(() => {}).finally(() => setLoadingMore(false));
-  }, [sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterProject, filterEntity, filterRentStatus, filterPlate, appliedMileageRange, filterDate, page, loadingMore, hasMore]);
+  }, [sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterProject, filterEntity, filterRentStatus, filterPlatePrefix, filterTargetName, filterRegion, filterPlates, appliedMileageRange, filterDate, page, loadingMore, hasMore]);
 
   // 筛选/排序变化时重新加载
   useEffect(() => {
     loadFirstPage();
   }, [loadFirstPage]);
 
+  // 下载当前筛选结果为 xlsx
+  const handleDownload = useCallback(async () => {
+    if (exporting) return;
+    setExporting(true);
+    try {
+      const d = await fetchMonitoring({
+        sortBy,
+        sortOrder,
+        limit: 9999,
+        page: 1,
+        search: searchTerm || undefined,
+        dept: filterDept !== 'All' ? filterDept : undefined,
+        customer: filterCustomer !== 'All' ? filterCustomer : undefined,
+        project: filterProject !== 'All' ? filterProject : undefined,
+        entity: filterEntity !== 'All' ? filterEntity : undefined,
+        rentStatus: filterRentStatus !== 'All' ? filterRentStatus : undefined,
+        platePrefix: filterPlatePrefix !== 'All' ? filterPlatePrefix : undefined,
+        targetName: filterTargetName !== 'All' ? filterTargetName : undefined,
+        region: filterRegion !== 'All' ? filterRegion : undefined,
+        plate: filterPlates.length > 0 ? filterPlates.join(',') : undefined,
+        mileageMin: appliedMileageRange.min || undefined,
+        mileageMax: appliedMileageRange.max || undefined,
+        date: filterDate || undefined,
+      });
+      exportMileageXlsx(d.vehicles, { date: filterDate, sortBy });
+    } catch (err) {
+      console.error('export failed', err);
+    } finally {
+      setExporting(false);
+    }
+  }, [exporting, sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterProject, filterEntity, filterRentStatus, filterPlatePrefix, filterTargetName, filterRegion, filterPlates, appliedMileageRange, filterDate]);
+
   // 每分钟自动刷新
   useEffect(() => {
     const timer = setInterval(loadFirstPage, 60 * 1000);
@@ -260,14 +298,15 @@ export default function MonitoringView() {
       rentStatus: filterRentStatus !== 'All' ? filterRentStatus : undefined,
       platePrefix: filterPlatePrefix !== 'All' ? filterPlatePrefix : undefined,
       targetName: filterTargetName !== 'All' ? filterTargetName : undefined,
-      plate: filterPlate !== 'All' ? filterPlate : undefined,
+      region: filterRegion !== 'All' ? filterRegion : undefined,
+      plate: filterPlates.length > 0 ? filterPlates.join(',') : undefined,
       date: filterDate || undefined,
     }).then(d => {
       setFullscreenVehicles(d.vehicles);
       setFullscreenStats(d.stats);
       setFilterOptions(d.filters);
     }).catch(() => {}).finally(() => setFullscreenLoading(false));
-  }, [isFullscreen, sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterRentStatus, filterPlatePrefix, filterTargetName, filterPlate, filterDate, fullscreenRefresh]);
+  }, [isFullscreen, sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterRentStatus, filterPlatePrefix, filterTargetName, filterRegion, filterPlates, filterDate, fullscreenRefresh]);
 
   // 全屏时禁止背景滚动
   useEffect(() => {
@@ -391,14 +430,9 @@ export default function MonitoringView() {
                       <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
                         <div className="flex flex-col gap-1">
                           <span>车牌号</span>
-                          <select
-                            className="bg-slate-800 border-none rounded px-2 py-0.5 text-[9px] text-slate-300 outline-none focus:ring-1 focus:ring-blue-500/30"
-                            value={filterPlate}
-                            onChange={(e) => setFilterPlate(e.target.value)}
-                          >
-                            <option value="All">全部车牌</option>
-                            {plateNumbers.map(p => <option key={p} value={p}>{p}</option>)}
-                          </select>
+                          <span className="text-[9px] text-slate-500 font-normal">
+                            {filterPlates.length === 0 ? '全部' : `已选 ${filterPlates.length}`}
+                          </span>
                         </div>
                       </th>
                       <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
@@ -526,6 +560,14 @@ export default function MonitoringView() {
                 >
                   <Maximize2 size={14} />
                 </button>
+                <button
+                  onClick={handleDownload}
+                  disabled={exporting}
+                  className="p-1 text-slate-300 hover:text-blue-600 transition-colors disabled:text-slate-200"
+                  title="下载当前筛选结果"
+                >
+                  {exporting ? <RotateCcw size={14} className="animate-spin" /> : <Download size={14} />}
+                </button>
               </div>
               <div className="flex items-center gap-1.5 mt-1">
                 <span className="flex h-1.5 w-1.5 rounded-full bg-blue-500 animate-pulse"></span>
@@ -559,32 +601,32 @@ export default function MonitoringView() {
           </div>
         </div>
 
-        {/* Bottom Row: Quick Filters & Advanced Filter Icon */}
+        {/* Bottom Row: 外部三选 (批次型号 / 运营区域 / 车牌多选) + 详情筛选 */}
         <div className="flex items-center gap-2">
           <div className="flex-1 grid grid-cols-3 gap-1.5">
             <SearchableSelect
-              options={['__EMPTY__', ...departments]}
-              value={filterDept}
-              onChange={setFilterDept}
-              placeholder="按部门"
+              options={filterOptions.targetNames}
+              value={filterTargetName}
+              onChange={setFilterTargetName}
+              placeholder="批次型号"
             />
             <SearchableSelect
-              options={['__EMPTY__', ...filterOptions.customers]}
-              value={filterCustomer}
-              onChange={setFilterCustomer}
-              placeholder="按客户"
+              options={filterOptions.regions}
+              value={filterRegion}
+              onChange={setFilterRegion}
+              placeholder="运营区域"
             />
-            <SearchableSelect
-              options={plateNumbers}
-              value={filterPlate}
-              onChange={setFilterPlate}
+            <PlateMultiSelect
+              allPlates={plateNumbers}
+              selected={filterPlates}
+              onChange={setFilterPlates}
               placeholder="按车牌"
             />
           </div>
 
           <button
             onClick={() => setIsFilterOpen(!isFilterOpen)}
-            className={`p-1.5 rounded-lg transition-all flex-shrink-0 ${isFilterOpen || searchTerm || filterDept !== 'All' || filterCustomer !== 'All' || filterRentStatus !== 'All' || filterPlate !== 'All' || filterProject !== 'All' ? 'bg-blue-50 text-blue-600 border border-blue-100' : 'bg-slate-50 text-slate-400 border border-transparent'}`}
+            className={`p-1.5 rounded-lg transition-all flex-shrink-0 ${isFilterOpen || searchTerm || filterDept !== 'All' || filterCustomer !== 'All' || filterRentStatus !== 'All' || filterPlates.length > 0 || filterProject !== 'All' ? 'bg-blue-50 text-blue-600 border border-blue-100' : 'bg-slate-50 text-slate-400 border border-transparent'}`}
           >
             <Filter size={16} />
           </button>
@@ -612,23 +654,10 @@ export default function MonitoringView() {
                 />
               </div>
 
-              {/* Project */}
-              <div className="space-y-1.5">
-                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">项目</label>
-                <select
-                  className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
-                  value={filterProject}
-                  onChange={(e) => setFilterProject(e.target.value)}
-                >
-                  <option value="All">无限制</option>
-                  {filterOptions.projects.map(p => <option key={p} value={p}>{p}</option>)}
-                </select>
-              </div>
-
               <div className="grid grid-cols-2 gap-3">
                 {/* Department */}
                 <div className="space-y-1.5">
-                  <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">业务部门</label>
+                  <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">按部门</label>
                   <select
                     className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
                     value={filterDept}
@@ -640,6 +669,35 @@ export default function MonitoringView() {
                   </select>
                 </div>
 
+                {/* Customer */}
+                <div className="space-y-1.5">
+                  <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">按客户</label>
+                  <select
+                    className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
+                    value={filterCustomer}
+                    onChange={(e) => setFilterCustomer(e.target.value)}
+                  >
+                    <option value="All">无限制</option>
+                    <option value="__EMPTY__">无值</option>
+                    {filterOptions.customers.map(c => <option key={c} value={c}>{c}</option>)}
+                  </select>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                {/* Project */}
+                <div className="space-y-1.5">
+                  <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">项目</label>
+                  <select
+                    className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
+                    value={filterProject}
+                    onChange={(e) => setFilterProject(e.target.value)}
+                  >
+                    <option value="All">无限制</option>
+                    {filterOptions.projects.map(p => <option key={p} value={p}>{p}</option>)}
+                  </select>
+                </div>
+
                 {/* Rent Status */}
                 <div className="space-y-1.5">
                   <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">租赁状态</label>
@@ -669,19 +727,6 @@ export default function MonitoringView() {
                 </div>
               </div>
 
-              {/* Target Name */}
-              <div className="space-y-1.5">
-                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">型号批次</label>
-                <select
-                  className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
-                  value={filterTargetName}
-                  onChange={(e) => setFilterTargetName(e.target.value)}
-                >
-                  <option value="All">无限制</option>
-                  {filterOptions.targetNames.map(n => <option key={n} value={n}>{n}</option>)}
-                </select>
-              </div>
-
               {/* Plate Prefix */}
               <div className="space-y-1.5">
                 <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">车牌区域</label>
@@ -724,11 +769,13 @@ export default function MonitoringView() {
                   onClick={() => {
                     setSearchTerm('');
                     setFilterDept('All');
-                    setFilterPlate('All');
+                    setFilterPlates([]);
                     setFilterCustomer('All');
                     setFilterProject('All');
                     setFilterEntity('All');
                     setFilterPlatePrefix('All');
+                    setFilterTargetName('All');
+                    setFilterRegion('All');
                     setFilterMileageRange({ min: '', max: '' });
                     setAppliedMileageRange({ min: '', max: '' });
                   }}
@@ -754,22 +801,23 @@ export default function MonitoringView() {
       {/* Active Filter Tags */}
       {(() => {
         const tags: { label: string; onClear: () => void }[] = [];
+        if (filterTargetName !== 'All') tags.push({ label: `批次: ${filterTargetName}`, onClear: () => setFilterTargetName('All') });
+        if (filterRegion !== 'All') tags.push({ label: `区域: ${filterRegion}`, onClear: () => setFilterRegion('All') });
+        if (filterPlates.length > 0) tags.push({ label: `车牌: ${filterPlates.length === 1 ? filterPlates[0] : `${filterPlates[0]} 等${filterPlates.length}`}`, onClear: () => setFilterPlates([]) });
         if (filterRentStatus !== 'All') tags.push({ label: `状态: ${filterRentStatus}`, onClear: () => setFilterRentStatus('All') });
         if (filterDept !== 'All') tags.push({ label: `部门: ${filterDept === '__EMPTY__' ? '无值' : filterDept}`, onClear: () => setFilterDept('All') });
         if (filterCustomer !== 'All') tags.push({ label: `客户: ${filterCustomer === '__EMPTY__' ? '无值' : filterCustomer}`, onClear: () => setFilterCustomer('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 (filterTargetName !== 'All') tags.push({ label: `批次: ${filterTargetName}`, onClear: () => setFilterTargetName('All') });
-        if (filterPlatePrefix !== 'All') tags.push({ label: `区域: ${filterPlatePrefix}`, onClear: () => setFilterPlatePrefix('All') });
+        if (filterPlatePrefix !== 'All') tags.push({ label: `车牌段: ${filterPlatePrefix}`, onClear: () => setFilterPlatePrefix('All') });
         if (filterDate) tags.push({ label: `日期: ${filterDate}`, onClear: () => setFilterDate('') });
         if (tags.length === 0) return null;
         const clearAll = () => {
           setFilterDept('All'); setFilterCustomer('All'); setFilterRentStatus('All'); setFilterProject('All'); setFilterEntity('All');
-          setFilterPlate('All'); setSearchTerm(''); setFilterPlatePrefix('All'); setFilterTargetName('All');
+          setFilterPlates([]); setSearchTerm(''); setFilterPlatePrefix('All'); setFilterTargetName('All'); setFilterRegion('All');
           setFilterMileageRange({ min: '', max: '' }); setAppliedMileageRange({ min: '', max: '' });
           setFilterDate('');
         };