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('');
         };

src/modules/mileage/PlateMultiSelect.tsx

@@ -0,0 +1,198 @@
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { ChevronDown, X, AlertTriangle } from 'lucide-react';
+
+interface Props {
+  allPlates: string[];
+  selected: string[];
+  onChange: (plates: string[]) => void;
+  placeholder?: string;
+}
+
+function parseInput(text: string): string[] {
+  return text
+    .split(/[\s,;，；、]+/)
+    .map(s => s.trim())
+    .filter(Boolean);
+}
+
+export default function PlateMultiSelect({ allPlates, selected, onChange, placeholder = '按车牌（可多选/粘贴）' }: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [text, setText] = useState('');
+  const [search, setSearch] = useState('');
+  const [unmatched, setUnmatched] = useState<string[]>([]);
+  const wrapRef = useRef<HTMLDivElement>(null);
+
+  const allSet = useMemo(() => new Set(allPlates), [allPlates]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setIsOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [isOpen]);
+
+  const filtered = useMemo(() => {
+    if (!search) return allPlates.slice(0, 200);
+    const q = search.toLowerCase();
+    return allPlates.filter(p => p.toLowerCase().includes(q)).slice(0, 200);
+  }, [allPlates, search]);
+
+  const selectedSet = useMemo(() => new Set(selected), [selected]);
+
+  const apply = (input: string) => {
+    const tokens = parseInput(input);
+    if (tokens.length === 0) return;
+    const matched: string[] = [];
+    const missed: string[] = [];
+    const seen = new Set(selected);
+    for (const t of tokens) {
+      if (allSet.has(t)) {
+        if (!seen.has(t)) {
+          matched.push(t);
+          seen.add(t);
+        }
+      } else {
+        missed.push(t);
+      }
+    }
+    if (matched.length > 0) onChange([...selected, ...matched]);
+    setUnmatched(missed);
+    setText('');
+  };
+
+  const togglePlate = (plate: string) => {
+    if (selectedSet.has(plate)) {
+      onChange(selected.filter(p => p !== plate));
+    } else {
+      onChange([...selected, plate]);
+    }
+  };
+
+  const removePlate = (plate: string) => {
+    onChange(selected.filter(p => p !== plate));
+  };
+
+  const clearAll = () => {
+    onChange([]);
+    setUnmatched([]);
+    setText('');
+  };
+
+  const display = selected.length === 0
+    ? placeholder
+    : selected.length === 1
+      ? selected[0]
+      : `${selected[0]} 等 ${selected.length} 个车牌`;
+
+  return (
+    <div className="relative" ref={wrapRef}>
+      <div
+        onClick={() => setIsOpen(o => !o)}
+        className={`w-full bg-slate-50 rounded-lg py-1.5 px-2 text-[10px] font-bold cursor-pointer flex items-center justify-between gap-1 ${selected.length > 0 ? 'text-blue-600 ring-1 ring-blue-200' : 'text-slate-600'}`}
+      >
+        <span className="truncate">{display}</span>
+        <ChevronDown size={10} className="text-slate-400 flex-shrink-0" />
+      </div>
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: -5 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -5 }}
+            className="absolute z-50 left-0 right-0 mt-1 bg-white border border-slate-100 rounded-xl shadow-xl w-[280px] max-w-[calc(100vw-32px)]"
+            style={{ minWidth: '100%' }}
+          >
+            <div className="p-2 space-y-2">
+              <textarea
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                onPaste={(e) => {
+                  const pasted = e.clipboardData.getData('text');
+                  if (pasted && /[\s,;，；、]/.test(pasted)) {
+                    e.preventDefault();
+                    apply(text + (text ? ' ' : '') + pasted);
+                  }
+                }}
+                placeholder="粘贴或输入车牌&#10;支持换行/逗号/空格分隔"
+                className="w-full bg-slate-50 border-none rounded-lg p-2 text-[11px] text-slate-700 outline-none focus:ring-1 focus:ring-blue-500/30 resize-none"
+                rows={3}
+              />
+              <div className="flex justify-between items-center">
+                <span className="text-[10px] text-slate-400">已选 <span className="font-bold text-blue-600">{selected.length}</span> 个</span>
+                <div className="flex gap-1">
+                  <button
+                    onClick={() => apply(text)}
+                    disabled={!text.trim()}
+                    className="px-2 py-1 bg-blue-600 text-white rounded-md text-[10px] font-bold disabled:bg-slate-200 disabled:text-slate-400"
+                  >添加</button>
+                  <button
+                    onClick={clearAll}
+                    className="px-2 py-1 bg-slate-100 text-slate-500 rounded-md text-[10px] font-bold"
+                  >清空</button>
+                </div>
+              </div>
+
+              {unmatched.length > 0 && (
+                <div className="bg-amber-50 border border-amber-200 rounded-lg p-2 space-y-1">
+                  <div className="flex items-center gap-1 text-amber-700">
+                    <AlertTriangle size={10} />
+                    <span className="text-[10px] font-bold">{unmatched.length} 个车牌未匹配</span>
+                    <button
+                      onClick={() => setUnmatched([])}
+                      className="ml-auto text-amber-500 hover:text-amber-700"
+                    ><X size={10} /></button>
+                  </div>
+                  <div className="text-[10px] text-amber-600 break-all max-h-16 overflow-y-auto leading-relaxed">
+                    {unmatched.join('，')}
+                  </div>
+                </div>
+              )}
+
+              {selected.length > 0 && (
+                <div className="flex flex-wrap gap-1 max-h-20 overflow-y-auto p-1 bg-slate-50 rounded-lg">
+                  {selected.map(p => (
+                    <span key={p} className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-white border border-blue-100 text-blue-600 rounded text-[10px] font-bold">
+                      {p}
+                      <button onClick={() => removePlate(p)} className="text-blue-400 hover:text-blue-700"><X size={9} /></button>
+                    </span>
+                  ))}
+                </div>
+              )}
+
+              <div className="border-t border-slate-100 pt-2">
+                <input
+                  type="text"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="搜索车牌"
+                  className="w-full bg-slate-50 border-none rounded-lg py-1.5 px-2 text-[10px] text-slate-700 outline-none focus:ring-1 focus:ring-blue-500/30"
+                />
+                <div className="mt-1 max-h-40 overflow-y-auto">
+                  {filtered.map(p => (
+                    <div
+                      key={p}
+                      onClick={() => togglePlate(p)}
+                      className={`px-2 py-1 text-[10px] font-bold cursor-pointer flex items-center gap-1.5 rounded ${selectedSet.has(p) ? 'bg-blue-50 text-blue-600' : 'text-slate-600 hover:bg-slate-50'}`}
+                    >
+                      <span className={`w-3 h-3 rounded border ${selectedSet.has(p) ? 'bg-blue-600 border-blue-600' : 'border-slate-300'} flex items-center justify-center`}>
+                        {selectedSet.has(p) && <span className="text-white text-[8px] leading-none">✓</span>}
+                      </span>
+                      {p}
+                    </div>
+                  ))}
+                  {filtered.length === 0 && (
+                    <div className="px-2 py-1 text-[10px] text-slate-300 italic">无匹配项</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

src/modules/mileage/api.ts

@@ -16,6 +16,7 @@ export async function fetchMonitoring(params?: {
   rentStatus?: string;
   platePrefix?: string;
   targetName?: string;
+  region?: string;
   plate?: string;
   mileageMin?: string;
   mileageMax?: string;
@@ -34,6 +35,7 @@ export async function fetchMonitoring(params?: {
   if (params?.rentStatus) query.set('rentStatus', params.rentStatus);
   if (params?.platePrefix) query.set('platePrefix', params.platePrefix);
   if (params?.targetName) query.set('targetName', params.targetName);
+  if (params?.region) query.set('region', params.region);
   if (params?.plate) query.set('plate', params.plate);
   if (params?.mileageMin) query.set('mileageMin', params.mileageMin);
   if (params?.mileageMax) query.set('mileageMax', params.mileageMax);

src/modules/mileage/types.ts

@@ -12,6 +12,7 @@ export interface MonitoringVehicle {
   rentStatus: string | null;
   entity: string | null;
   project: string | null;
+  region: string | null;
 }
 
 export interface MonitoringStats {
@@ -30,6 +31,7 @@ export interface MonitoringFilters {
   rentStatuses: string[];
   platePrefixes: { prefix: string; count: number }[];
   targetNames: string[];
+  regions: string[];
 }
 
 export interface MonitoringData {

src/modules/mileage/xlsx-export.ts

@@ -0,0 +1,81 @@
+import * as XLSX from 'xlsx';
+import type { MonitoringVehicle } from './types';
+
+interface ExportContext {
+  date: string;
+  sortBy: 'today' | 'total';
+}
+
+const HEADERS = [
+  '状态', '车牌号', '客户', '业务部门', '项目', '租赁状态',
+  '运营区域', '今日里程(km)', '累计里程(km)',
+] as const;
+
+function statusLabel(v: MonitoringVehicle): string {
+  if (!v.isDataSynced) return '未对接';
+  return v.isOnline ? '在线' : '离线';
+}
+
+function mileageCell(v: MonitoringVehicle, kind: 'today' | 'total'): string | number {
+  if (!v.isDataSynced) return '未对接';
+  if (kind === 'today') return Math.max(0, Math.round(v.dailyKm || 0));
+  return v.totalKm != null ? Math.round(v.totalKm) : '未对接';
+}
+
+export function exportMileageXlsx(vehicles: MonitoringVehicle[], ctx: ExportContext): void {
+  const data: (string | number)[][] = [
+    [...HEADERS],
+    ...vehicles.map(v => [
+      statusLabel(v),
+      v.plate,
+      v.customer || '',
+      v.department || '',
+      v.project || '',
+      v.rentStatus || '',
+      v.region || '',
+      mileageCell(v, 'today'),
+      mileageCell(v, 'total'),
+    ]),
+  ];
+
+  const ws = XLSX.utils.aoa_to_sheet(data);
+
+  ws['!cols'] = [
+    { wch: 8 },   // 状态
+    { wch: 12 },  // 车牌号
+    { wch: 28 },  // 客户
+    { wch: 14 },  // 业务部门
+    { wch: 16 },  // 项目
+    { wch: 10 },  // 租赁状态
+    { wch: 12 },  // 运营区域
+    { wch: 14 },  // 今日里程
+    { wch: 14 },  // 累计里程
+  ];
+
+  ws['!freeze'] = { xSplit: 0, ySplit: 1 } as never;
+
+  // 表头样式（在客户端 SheetJS 社区版仅基本样式生效）
+  for (let c = 0; c < HEADERS.length; c++) {
+    const ref = XLSX.utils.encode_cell({ r: 0, c });
+    if (ws[ref]) {
+      (ws[ref] as { s?: unknown }).s = {
+        font: { bold: true, color: { rgb: 'FFFFFF' } },
+        fill: { fgColor: { rgb: '2563EB' } },
+        alignment: { horizontal: 'center', vertical: 'center' },
+      };
+    }
+  }
+
+  const wb = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(wb, ws, '里程明细');
+
+  const now = new Date();
+  const y = now.getFullYear();
+  const m = String(now.getMonth() + 1).padStart(2, '0');
+  const d = String(now.getDate()).padStart(2, '0');
+  const hh = String(now.getHours()).padStart(2, '0');
+  const mm = String(now.getMinutes()).padStart(2, '0');
+  const dateTag = ctx.date ? ctx.date.replace(/-/g, '') : `${y}${m}${d}`;
+  const filename = `里程看板_${dateTag}_${hh}${mm}_${ctx.sortBy === 'today' ? '今日' : '累计'}.xlsx`;
+  XLSX.writeFile(wb, filename);
+}