feat(assets): align flow statistics and separate abnormal inventory

Use operations signing times and delivery completion statuses; include replacement deliveries in delivery totals with range drilldowns and exports. Separate abnormal vehicles from inventory, add a date range picker, and enable CI for feature/asset-statistics.

src/modules/assets/components/FlowDetailModal.tsx

@@ -2,17 +2,18 @@ import React from 'react';
 import { Download, X } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import type { FlowDetailItem, FlowType } from '../api';
+import type { FlowSelection } from '../model';
 
 export const FLOW_META: Record<FlowType, { label: string; tone: string; chip: string }> = {
   delivered: { label: '交车', tone: 'text-blue-600 bg-blue-50 border-blue-100', chip: 'bg-blue-50 text-blue-700 border-blue-100' },
   returned: { label: '还车', tone: 'text-orange-600 bg-orange-50 border-orange-100', chip: 'bg-orange-50 text-orange-700 border-orange-100' },
-  replaced: { label: '替换', tone: 'text-violet-600 bg-violet-50 border-violet-100', chip: 'bg-violet-50 text-violet-700 border-violet-100' },
+  replaced: { label: '替换交车', tone: 'text-violet-600 bg-violet-50 border-violet-100', chip: 'bg-violet-50 text-violet-700 border-violet-100' },
 };
 
 interface FlowDetailModalProps {
-  selectedFlow: { date: string; type: FlowType } | null;
+  selectedFlow: FlowSelection | null;
   selectedFlowDetails: FlowDetailItem[];
-  setSelectedFlow: React.Dispatch<React.SetStateAction<{ date: string; type: FlowType } | null>>;
+  setSelectedFlow: React.Dispatch<React.SetStateAction<FlowSelection | null>>;
   exportFlowDetails: (rows?: FlowDetailItem[], title?: string) => void;
 }
 export function FlowDetailModal({
@@ -21,6 +22,9 @@ export function FlowDetailModal({
   setSelectedFlow,
   exportFlowDetails,
 }: FlowDetailModalProps) {
+  const dateLabel = selectedFlow
+    ? ('date' in selectedFlow ? selectedFlow.date : `${selectedFlow.start} 至 ${selectedFlow.end}`)
+    : '';
   return (
     <>
         {/* Flow Detail Modal */}
@@ -37,16 +41,17 @@ export function FlowDetailModal({
                 <div className="border-b border-slate-100 bg-slate-950 px-4 py-4 text-white sm:px-5">
                   <div className="flex items-start justify-between gap-3">
                     <div>
-                      <div className="text-[11px] font-black uppercase tracking-wide text-slate-400">提交时间口径</div>
+                      <div className="text-[11px] font-black uppercase tracking-wide text-slate-400">运维签章时间口径 · 单位：车次</div>
                       <h3 className="mt-1 text-lg font-black">
-                        {selectedFlow.date} · {FLOW_META[selectedFlow.type].label}明细
+                        {dateLabel} · {FLOW_META[selectedFlow.type].label}明细
                       </h3>
                       <div className="mt-1 text-[12px] font-bold text-slate-300">
-                        共 {selectedFlowDetails.length} 条，包含车牌、流转时间、提交时间、部门、负责人和客户
+                        共 {selectedFlowDetails.length} 车次，包含车牌、运维签章时间、建单时间、部门、负责人和客户
                       </div>
                     </div>
                     <button
                       type="button"
+                      aria-label="关闭流转明细"
                       onClick={() => setSelectedFlow(null)}
                       className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20"
                     >
@@ -56,7 +61,7 @@ export function FlowDetailModal({
                   <div className="mt-3 flex flex-wrap gap-2">
                     <button
                       type="button"
-                      onClick={() => exportFlowDetails(selectedFlowDetails, `${selectedFlow.date}-${FLOW_META[selectedFlow.type].label}明细`)}
+                      onClick={() => exportFlowDetails(selectedFlowDetails, `${dateLabel}-${FLOW_META[selectedFlow.type].label}明细`)}
                       disabled={selectedFlowDetails.length === 0}
                       className="inline-flex h-8 items-center gap-1 rounded-xl bg-white px-3 text-[11px] font-black text-slate-900 transition hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-40"
                     >
@@ -72,8 +77,8 @@ export function FlowDetailModal({
                       <thead className="bg-slate-50 text-[11px] font-black text-slate-400">
                         <tr>
                           <th className="w-28 px-3 py-3">车牌</th>
-                          <th className="w-40 px-3 py-3">{FLOW_META[selectedFlow.type].label}时间</th>
-                          <th className="w-40 px-3 py-3">提交时间</th>
+                          <th className="w-40 px-3 py-3">运维签章时间</th>
+                          <th className="w-40 px-3 py-3">建单时间</th>
                           <th className="w-36 px-3 py-3">部门</th>
                           <th className="w-28 px-3 py-3">业务负责人</th>
                           <th className="px-3 py-3">客户</th>
@@ -82,7 +87,7 @@ export function FlowDetailModal({
                       <tbody className="divide-y divide-slate-100 text-[12px] font-bold text-slate-700">
                         {selectedFlowDetails.map((item) => (
                           <tr key={item.id} className="hover:bg-blue-50/40">
-                            <td className="px-3 py-3 font-black text-slate-950">{item.plateNumber}</td>
+                            <td className="px-3 py-3 font-black text-slate-950">{item.plateNumber}{item.type === 'replaced' && <span className="mt-1 block text-[10px] text-violet-600">替换交车</span>}</td>
                             <td className="px-3 py-3 text-slate-500">{item.eventTime || '-'}</td>
                             <td className="px-3 py-3 text-blue-600">{item.submitTime || '-'}</td>
                             <td className="px-3 py-3">{item.department || '-'}</td>
@@ -105,13 +110,13 @@ export function FlowDetailModal({
                             </div>
                           </div>
                           <div className="text-right text-[10px] font-bold text-slate-400">
-                            <div>提交</div>
+                            <div>建单</div>
                             <div className="mt-0.5 text-[11px] text-blue-600">{item.submitTime?.slice(5, 16) || '-'}</div>
                           </div>
                         </div>
                         <div className="mt-3 grid grid-cols-2 gap-2 text-[11px]">
                           <div className="rounded-xl bg-slate-50 p-2">
-                            <div className="font-black text-slate-400">{item.typeLabel}时间</div>
+                            <div className="font-black text-slate-400">运维签章时间</div>
                             <div className="mt-1 font-bold text-slate-700">{item.eventTime || '-'}</div>
                           </div>
                           <div className="rounded-xl bg-slate-50 p-2">

src/modules/assets/components/VehicleDetailModal.tsx

@@ -66,6 +66,7 @@ export function VehicleDetailModal({
                        showPlateNumbers.category === 'Delivered' ? '本周已交车' :
                        showPlateNumbers.category === 'Returned' ? '已还车' :
                        showPlateNumbers.category === 'Replaced' ? '已替换' :
+                       showPlateNumbers.category === 'Abnormal' ? '异动' :
                        showPlateNumbers.category === 'Inventory' ? `${showPlateNumbers.location}库存` :
                        showPlateNumbers.category === 'Operating' ? '正在运营' : '全部状态'}
                     </p>

src/modules/assets/components/overview/AssetSummaryDesktopTable.tsx

@@ -14,7 +14,7 @@ export function AssetSummaryDesktopTable({
 }: AssetSummarySectionProps) {
   return (
     <div className="hidden lg:block overflow-x-auto">
-      <table className="w-full text-left border-collapse table-fixed min-w-[1200px]">
+      <table className="w-full text-left border-collapse table-fixed min-w-[1300px]">
         <thead>
           <tr className="bg-gray-50 text-[11px] text-gray-500 uppercase tracking-wider border-b border-gray-100">
             <th className="p-3 font-semibold border-r border-gray-100 w-24">车型</th>
@@ -26,6 +26,7 @@ export function AssetSummaryDesktopTable({
             <th className="p-3 font-semibold border-r border-gray-100 text-center w-24">库存-北京</th>
             <th className="p-3 font-semibold border-r border-gray-100 text-center w-24">库存-新疆</th>
             <th className="p-3 font-semibold border-r border-gray-100 text-center w-24">库存-其他</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center text-amber-600 w-24">异动</th>
             <th className="p-3 font-semibold border-r border-gray-100 text-center w-24">待交车</th>
             <th className="p-3 font-semibold border-r border-gray-100 text-center bg-green-50/30 w-24">当前在运营</th>
             <th className="p-3 font-semibold border-r border-gray-100 text-center bg-blue-50/20 w-24">本周交车</th>
@@ -43,7 +44,7 @@ export function AssetSummaryDesktopTable({
                 'bg-blue-50/50 hover:bg-blue-50 transition-colors'
               }`}
                   onClick={() => toggleAssetType(typeGroup.type)}>
-                <td colSpan={14} className={`p-3 font-bold ${theme === 'vibrant' ? 'text-white' : 'text-blue-700'}`}>
+                <td colSpan={15} className={`p-3 font-bold ${theme === 'vibrant' ? 'text-white' : 'text-blue-700'}`}>
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2">
                       {expandedAssetTypes.has(typeGroup.type) ?
@@ -55,6 +56,7 @@ export function AssetSummaryDesktopTable({
                     <div className={`flex gap-6 text-[11px] font-normal mr-4 ${theme === 'vibrant' ? 'text-white/80' : 'text-gray-500'}`}>
                       <span>资产 <span className={theme === 'vibrant' ? 'font-bold text-white' : 'font-bold text-gray-700'}>{typeGroup.totalAssets}</span></span>
                       <span>库存 <span className={theme === 'vibrant' ? 'font-bold text-white' : 'font-bold text-blue-600'}>{typeGroup.totalInventory}</span></span>
+                      <span>异动 <span className="font-bold">{typeGroup.totalAbnormal}</span></span>
                       <span>运营 <span className={theme === 'vibrant' ? 'font-bold text-white' : 'font-bold text-green-600'}>{typeGroup.totalOperating}</span></span>
                     </div>
                   </div>
@@ -119,6 +121,12 @@ export function AssetSummaryDesktopTable({
                           ) : ''}
                         </td>
                       ))}
+                      <td className="p-3 text-center border-r border-gray-100">
+                        <button type="button" className="font-bold text-amber-600 hover:underline"
+                          onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Abnormal', source: 'asset', title: `${model.model} - 异动` }); }}>
+                          {model.abnormal}
+                        </button>
+                      </td>
                       <td className="p-3 text-center border-r border-gray-100">
                         {model.pending > 0 ? (
                           <button

src/modules/assets/components/overview/AssetSummaryMobileCards.tsx

@@ -33,6 +33,7 @@ export function AssetSummaryMobileCards({
             <div className={`flex gap-3 text-[9px] font-normal ${theme === 'vibrant' ? 'opacity-90' : 'text-gray-500'}`}>
               <span>资产 <span className={theme === 'vibrant' ? 'font-bold' : 'font-bold text-gray-700'}>{typeGroup.totalAssets}</span></span>
               <span>库存 <span className={theme === 'vibrant' ? 'font-bold' : 'font-bold text-blue-600'}>{typeGroup.totalInventory}</span></span>
+              <span>异动 <span className="font-bold">{typeGroup.totalAbnormal}</span></span>
               <span>运营 <span className={theme === 'vibrant' ? 'font-bold' : 'font-bold text-green-600'}>{typeGroup.totalOperating}</span></span>
             </div>
           </div>
@@ -55,9 +56,10 @@ export function AssetSummaryMobileCards({
                         {expandedModels.has(model.model) ? <ChevronDown size={14} className="text-blue-500" /> : <ChevronRight size={14} className="text-gray-300" />}
                         <span className="text-xs font-bold text-gray-700">{model.model}</span>
                       </div>
-                      <div className="flex gap-2">
+                      <div className="flex flex-wrap justify-end gap-2">
                         <span className="text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-bold cursor-pointer active:bg-blue-100" onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', source: 'asset', title: model.model }); }}>资产 {model.total}</span>
                         <span className="text-[10px] bg-orange-50 text-orange-600 px-1.5 py-0.5 rounded font-bold cursor-pointer active:bg-orange-100" onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Inventory', source: 'asset', title: `${model.model} - 库存` }); }}>库存 {model.inventory}</span>
+                        <button type="button" className="text-[10px] bg-amber-50 text-amber-700 px-1.5 py-0.5 rounded font-bold" onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Abnormal', source: 'asset', title: `${model.model} - 异动` }); }}>异动 {model.abnormal}</button>
                         <span className="text-[10px] bg-green-50 text-green-600 px-1.5 py-0.5 rounded font-bold cursor-pointer active:bg-green-100" onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Operating', source: 'asset', title: `${model.model} - 在运营` }); }}>运营 {model.operating}</span>
                       </div>
                     </div>

src/modules/assets/components/overview/FlowDateRangePicker.tsx

@@ -0,0 +1,118 @@
+import { useRef, useState } from 'react';
+import { ArrowRight, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { getWeeklyFlowRange, type DateRange } from '../../model';
+
+const weekdays = ['一', '二', '三', '四', '五', '六', '日'];
+const ymd = (date: Date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+const parseDate = (value: string) => new Date(`${value}T12:00:00`);
+const shiftDay = (date: Date, offset: number) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + offset);
+const dayCount = (start: string, end: string) => Math.round((Date.parse(`${end}T00:00:00Z`) - Date.parse(`${start}T00:00:00Z`)) / 86400000) + 1;
+
+export function FlowDateRangePicker({ value, onChange }: { value: DateRange; onChange: (range: DateRange) => void }) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [draft, setDraft] = useState(value);
+  const [selecting, setSelecting] = useState<'start' | 'end'>('start');
+  const [month, setMonth] = useState(() => parseDate(value.start));
+  const [hovered, setHovered] = useState('');
+  const today = ymd(new Date());
+  const count = draft.end ? dayCount(draft.start, draft.end) : 0;
+  const valid = count > 0 && count <= 370;
+  const monthStart = new Date(month.getFullYear(), month.getMonth(), 1);
+  const previewEnd = draft.end || hovered || draft.start;
+  const rangeStart = draft.start < previewEnd ? draft.start : previewEnd;
+  const rangeEnd = draft.start > previewEnd ? draft.start : previewEnd;
+  const quickPicks = [
+    { label: '今天', range: { start: today, end: today } },
+    { label: '昨天', range: { start: ymd(shiftDay(new Date(), -1)), end: ymd(shiftDay(new Date(), -1)) } },
+    { label: '业务周', range: getWeeklyFlowRange() },
+    { label: '近 7 天', range: { start: ymd(shiftDay(new Date(), -6)), end: today } },
+    { label: '近 30 天', range: { start: ymd(shiftDay(new Date(), -29)), end: today } },
+  ];
+  const open = () => {
+    setDraft(value); setSelecting('start'); setMonth(parseDate(value.start)); setHovered('');
+    dialog.current?.showModal();
+  };
+  const choose = (date: string) => {
+    if (selecting === 'start') {
+      setDraft({ start: date, end: '' }); setSelecting('end');
+    } else {
+      setDraft(date < draft.start ? { start: date, end: draft.start } : { start: draft.start, end: date });
+      setSelecting('start');
+    }
+    setHovered('');
+  };
+  const calendar = (offset: number) => {
+    const current = new Date(monthStart.getFullYear(), monthStart.getMonth() + offset, 1);
+    const year = current.getFullYear(), m = current.getMonth();
+    const padding = (current.getDay() + 6) % 7;
+    const length = new Date(year, m + 1, 0).getDate();
+    return <div className={offset ? 'hidden sm:block' : ''} key={offset}>
+      <div className="mb-3 text-center text-sm font-bold text-slate-700">{year} 年 {m + 1} 月</div>
+      <div className="grid grid-cols-7 text-center">
+        {weekdays.map(day => <div key={day} className="py-2 text-[11px] font-medium text-slate-400">{day}</div>)}
+        {Array.from({ length: padding }, (_, i) => <div key={`blank-${i}`} />)}
+        {Array.from({ length }, (_, i) => {
+          const date = ymd(new Date(year, m, i + 1));
+          const endpoint = date === draft.start || date === draft.end;
+          const inRange = date >= rangeStart && date <= rangeEnd;
+          return <button key={date} type="button" aria-label={date} aria-pressed={endpoint}
+            onClick={() => choose(date)} onMouseEnter={() => { if (!draft.end) setHovered(date); }}
+            className={`relative my-0.5 h-10 text-xs font-semibold transition focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-blue-500 ${endpoint ? 'rounded-xl bg-blue-600 text-white shadow-sm' : inRange ? 'bg-blue-50 text-blue-700' : 'rounded-xl text-slate-600 hover:bg-slate-100'} ${date === today && !endpoint ? 'font-black text-blue-600' : ''}`}>
+            {i + 1}{date === today && <span className={`absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full ${endpoint ? 'bg-white' : 'bg-blue-500'}`} />}
+          </button>;
+        })}
+      </div>
+    </div>;
+  };
+  return <>
+    <button type="button" data-testid="asset-flow-date-range" aria-haspopup="dialog" onClick={open}
+      className="mt-3 flex w-full items-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-left shadow-sm transition hover:border-blue-300 hover:bg-blue-50/40 focus-visible:outline-2 focus-visible:outline-blue-500">
+      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-600"><CalendarDays size={18} /></span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-[10px] font-medium text-slate-400">统计日期 · 运维签章时间</span>
+        <span className="mt-1 flex items-center gap-2 text-[13px] font-bold text-slate-700"><span>{value.start.replaceAll('-', '/')}</span><ArrowRight size={13} className="shrink-0 text-slate-300" /><span>{value.end.replaceAll('-', '/')}</span></span>
+      </span>
+      <span className="hidden rounded-lg bg-slate-100 px-2 py-1 text-[11px] font-medium text-slate-500 sm:block">{dayCount(value.start, value.end)} 天</span>
+      <ChevronDown size={16} className="shrink-0 text-slate-400" />
+    </button>
+    <dialog ref={dialog} aria-labelledby="flow-date-title" onClick={e => { if (e.target === e.currentTarget) dialog.current?.close(); }}
+      className="fixed inset-0 m-auto max-h-[90dvh] w-[calc(100%-24px)] max-w-[680px] overflow-y-auto rounded-3xl border-0 bg-white p-0 text-slate-700 shadow-2xl backdrop:bg-slate-950/30 backdrop:backdrop-blur-sm">
+      <div className="p-5 sm:p-6">
+        <div className="flex items-start justify-between gap-3">
+          <div><h3 id="flow-date-title" className="text-base font-bold text-slate-900">选择统计日期</h3><p className="mt-1 text-xs text-slate-400">先选开始日期，再选结束日期</p></div>
+          <button type="button" aria-label="关闭日期选择" onClick={() => dialog.current?.close()} className="rounded-full p-2 text-slate-400 hover:bg-slate-100"><X size={18} /></button>
+        </div>
+        <div className="mt-4 flex flex-wrap gap-2">
+          {quickPicks.map(pick => <button key={pick.label} type="button" onClick={() => { setDraft(pick.range); setMonth(parseDate(pick.range.start)); setSelecting('start'); setHovered(''); }}
+            className={`rounded-lg border px-3 py-2 text-xs font-medium transition ${draft.start === pick.range.start && draft.end === pick.range.end ? 'border-blue-200 bg-blue-50 text-blue-600' : 'border-slate-100 text-slate-500 hover:border-blue-200 hover:bg-blue-50'}`}>{pick.label}</button>)}
+        </div>
+        <div className="mt-4 grid grid-cols-2 gap-3">
+          {(['start', 'end'] as const).map(field => <button key={field} type="button" onClick={() => { setSelecting(field); setHovered(''); setMonth(parseDate(draft[field] || draft.start)); }}
+            className={`rounded-xl border px-3 py-2.5 text-left transition ${selecting === field ? 'border-blue-400 bg-blue-50/60 ring-2 ring-blue-50' : 'border-slate-200 bg-slate-50/50'}`}>
+            <span className="block text-[10px] text-slate-400">{field === 'start' ? '开始日期' : '结束日期'}</span><span className="mt-1 block text-sm font-bold">{draft[field] || '请选择结束日期'}</span>
+          </button>)}
+        </div>
+        <div className="mt-5 flex items-center justify-between gap-2">
+          <button type="button" aria-label="上个月" onClick={() => setMonth(new Date(monthStart.getFullYear(), monthStart.getMonth() - 1, 1))} className="rounded-lg p-2 hover:bg-slate-100"><ChevronLeft size={18} /></button>
+          <div className="flex gap-2">
+            <select aria-label="年份" value={monthStart.getFullYear()} onChange={e => setMonth(new Date(Number(e.target.value), monthStart.getMonth(), 1))} className="rounded-lg bg-slate-50 px-2 py-1.5 text-xs font-semibold">
+              {Array.from({ length: Math.max(new Date().getFullYear() + 1, monthStart.getFullYear()) - Math.min(2016, monthStart.getFullYear()) + 1 }, (_, i) => Math.min(2016, monthStart.getFullYear()) + i).map(year => <option key={year} value={year}>{year} 年</option>)}
+            </select>
+            <select aria-label="月份" value={monthStart.getMonth()} onChange={e => setMonth(new Date(monthStart.getFullYear(), Number(e.target.value), 1))} className="rounded-lg bg-slate-50 px-2 py-1.5 text-xs font-semibold">
+              {Array.from({ length: 12 }, (_, i) => <option key={i} value={i}>{i + 1} 月</option>)}
+            </select>
+          </div>
+          <button type="button" aria-label="下个月" onClick={() => setMonth(new Date(monthStart.getFullYear(), monthStart.getMonth() + 1, 1))} className="rounded-lg p-2 hover:bg-slate-100"><ChevronRight size={18} /></button>
+        </div>
+        <div className="mt-3 grid gap-6 sm:grid-cols-2" onMouseLeave={() => setHovered('')}>{calendar(0)}{calendar(1)}</div>
+      </div>
+      <div className="sticky bottom-0 flex items-center justify-between gap-3 border-t border-slate-100 bg-white px-5 py-4 sm:px-6">
+        <span role="status" className={`text-xs ${count > 370 ? 'text-red-500' : 'text-slate-400'}`}>{!draft.end ? '请选择结束日期' : count > 370 ? '最多选择 370 天' : `已选 ${count} 天（包含首尾）`}</span>
+        <div className="flex shrink-0 gap-2">
+          <button type="button" onClick={() => dialog.current?.close()} className="rounded-xl px-3 py-2.5 text-xs font-semibold text-slate-500 hover:bg-slate-100">取消</button>
+          <button type="button" disabled={!valid} onClick={() => { onChange(draft); dialog.current?.close(); }} className="flex items-center gap-1 rounded-xl bg-blue-600 px-4 py-2.5 text-xs font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-40"><Check size={14} />应用日期</button>
+        </div>
+      </div>
+    </dialog>
+  </>;
+}

src/modules/assets/components/overview/FlowStatisticsCard.tsx

@@ -3,6 +3,7 @@ import { AnimatePresence, motion } from 'motion/react';
 import type { FlowType } from '../../api';
 import { FLOW_META } from '../FlowDetailModal';
 import type { FlowStatisticsCardProps } from './types';
+import { FlowDateRangePicker } from './FlowDateRangePicker';
 
 const FLOW_TYPES: FlowType[] = ['delivered', 'returned', 'replaced'];
 
@@ -23,7 +24,7 @@ export function FlowStatisticsCard({
           <div className="min-w-0">
             <div className="flex items-center gap-2 text-[13px] font-black text-slate-700">
               <CalendarDays size={14} className="text-blue-500" />
-              <span>交还车统计</span>
+              <span>交还车统计（车次）</span>
               {flowLoading && <Loader2 size={12} className="animate-spin text-slate-400" />}
             </div>
           </div>
@@ -39,37 +40,8 @@ export function FlowStatisticsCard({
             </button>
           </div>
         </div>
-        <div className="mt-2 rounded-xl border border-slate-100 bg-slate-50/80 px-2 py-1.5">
-          <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2">
-            <label className="relative cursor-pointer rounded-lg px-2 py-1 transition hover:bg-white">
-              <span className="block text-[9px] font-black text-slate-400">开始</span>
-              <span className="mt-0.5 flex items-center justify-between gap-2">
-                <span className="text-[12px] font-black text-slate-700">{flowRange.start.replaceAll('-', '/')}</span>
-                <CalendarDays size={12} className="text-slate-300" />
-              </span>
-              <input
-                type="date"
-                value={flowRange.start}
-                onChange={(e) => setFlowRange((prev) => ({ ...prev, start: e.target.value }))}
-                className="asset-date-input absolute inset-0 h-full w-full cursor-pointer opacity-0"
-              />
-            </label>
-            <div className="rounded-full bg-slate-200/70 px-2 py-0.5 text-[9px] font-black text-slate-400">至</div>
-            <label className="relative cursor-pointer rounded-lg px-2 py-1 transition hover:bg-white">
-              <span className="block text-[9px] font-black text-slate-400">结束</span>
-              <span className="mt-0.5 flex items-center justify-between gap-2">
-                <span className="text-[12px] font-black text-slate-700">{flowRange.end.replaceAll('-', '/')}</span>
-                <CalendarDays size={12} className="text-slate-300" />
-              </span>
-              <input
-                type="date"
-                value={flowRange.end}
-                onChange={(e) => setFlowRange((prev) => ({ ...prev, end: e.target.value }))}
-                className="asset-date-input absolute inset-0 h-full w-full cursor-pointer opacity-0"
-              />
-            </label>
-          </div>
-        </div>
+        <p className="mt-1 text-[11px] text-slate-400">按运维签章时间统计；交车包含替换交车，合计＝交车＋还车，同车多笔业务分别计次。</p>
+        <FlowDateRangePicker value={flowRange} onChange={setFlowRange} />
         <div className="mt-2 rounded-2xl border border-slate-100 bg-slate-50/70 px-2 py-2.5">
           <div className="grid grid-cols-4 items-center text-center">
             <div className="px-2">
@@ -77,12 +49,16 @@ export function FlowStatisticsCard({
               <div className="mt-1 text-[10px] font-black text-slate-400">合计</div>
             </div>
             {FLOW_TYPES.map((type) => (
-              <div key={type} className="border-l border-slate-200/70 px-2">
+              <button key={type} type="button"
+                data-testid={`asset-flow-total-${type}`}
+                disabled={flowLoading || !flowStats?.totals[type]}
+                onClick={() => flowStats && setSelectedFlow({ start: flowStats.start, end: flowStats.end, type })}
+                className="border-l border-slate-200/70 px-2 transition hover:bg-slate-100 focus-visible:outline-blue-500 disabled:cursor-not-allowed disabled:opacity-35">
                 <div className={`text-lg font-black leading-none ${type === 'delivered' ? 'text-blue-600' : type === 'returned' ? 'text-orange-600' : 'text-violet-600'}`}>
                   {flowStats?.totals[type] ?? 0}
                 </div>
-                <div className={`mt-1 text-[10px] font-black ${type === 'delivered' ? 'text-blue-500' : type === 'returned' ? 'text-orange-500' : 'text-violet-500'}`}>{FLOW_META[type].label}</div>
-              </div>
+                <div className={`mt-1 text-[10px] font-black ${type === 'delivered' ? 'text-blue-500' : type === 'returned' ? 'text-orange-500' : 'text-violet-500'}`}>{type === 'replaced' ? '其中：替换交车' : FLOW_META[type].label}</div>
+              </button>
             ))}
           </div>
         </div>
@@ -114,7 +90,7 @@ export function FlowStatisticsCard({
                   <div key={day.date} className="rounded-2xl border border-slate-100 bg-white px-3 py-3 shadow-sm">
                     <div className="flex items-center justify-between">
                       <div className="text-[11px] font-black text-slate-400">{day.date}</div>
-                      <div className="text-[10px] font-bold italic text-slate-300">提交时间</div>
+                      <div className="text-[10px] font-bold italic text-slate-300">运维签章时间</div>
                     </div>
                     <div className="mt-2 grid grid-cols-4 items-center text-center">
                       <div className="px-2">
@@ -133,7 +109,7 @@ export function FlowStatisticsCard({
                             className="border-l border-slate-100 px-2 text-center transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-35"
                           >
                             <div className={`text-lg font-black leading-none ${type === 'delivered' ? 'text-blue-600' : type === 'returned' ? 'text-orange-600' : 'text-violet-600'}`}>{count}</div>
-                            <div className={`mt-1 text-[10px] font-black ${type === 'delivered' ? 'text-blue-500' : type === 'returned' ? 'text-orange-500' : 'text-violet-500'}`}>{FLOW_META[type].label}</div>
+                            <div className={`mt-1 text-[10px] font-black ${type === 'delivered' ? 'text-blue-500' : type === 'returned' ? 'text-orange-500' : 'text-violet-500'}`}>{type === 'replaced' ? '其中：替换交车' : FLOW_META[type].label}</div>
                           </button>
                         );
                       })}

src/modules/assets/components/overview/SummaryMetrics.tsx

@@ -1,4 +1,4 @@
-import { Activity, PlusCircle, Truck, Warehouse } from 'lucide-react';
+import { Activity, TriangleAlert, PlusCircle, Truck, Warehouse } from 'lucide-react';
 import type { SummaryMetricsProps } from './types';
 
 export function SummaryMetrics({
@@ -11,7 +11,7 @@ export function SummaryMetrics({
   return (
     <>
       {/* Header Summary - Ultra Compact */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-2">
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-2 mb-2">
         {/* Total Assets */}
         <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm flex items-center gap-2 cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md"
              onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', source: 'asset', title: '资产概览' })}>
@@ -49,11 +49,21 @@ export function SummaryMetrics({
             <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">总库存</div>
             <div className="flex items-baseline gap-1">
               <span className="text-base font-bold text-gray-800 leading-none">{SUMMARY.inventory.total}</span>
-              <span className="text-[8px] text-gray-400 leading-none">库{SUMMARY.inventory.inStock} 异{SUMMARY.inventory.abnormal}</span>
+
             </div>
           </div>
         </div>
 
+        <button type="button" data-testid="asset-abnormal-card"
+          className="rounded-2xl border border-amber-100 bg-white p-3 shadow-sm flex items-center gap-2 text-left transition-all hover:-translate-y-0.5 hover:shadow-md"
+          onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Abnormal', source: 'asset', title: '异动车辆' })}>
+          <div className="w-8 h-8 rounded-xl bg-amber-50 flex items-center justify-center text-amber-600"><TriangleAlert size={14} /></div>
+          <div>
+            <div className="text-[9px] text-amber-600 font-bold leading-none mb-0.5">异动</div>
+            <div className="text-base font-bold text-amber-600 leading-none">{SUMMARY.inventory.abnormal}</div>
+          </div>
+        </button>
+
         {/* Pending */}
         <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm flex items-center gap-2 cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md"
              onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Pending', source: 'asset', title: '待交车' })}>
@@ -70,7 +80,7 @@ export function SummaryMetrics({
       <div data-testid="asset-operation-ratio-strip" className="mb-3 rounded-2xl border border-slate-100 bg-white/85 px-4 py-3 shadow-sm">
         <div className="flex items-center justify-between gap-3">
           <div className="shrink-0 text-[11px] font-black text-slate-400">运营概览</div>
-          <div className="grid min-w-0 flex-1 grid-cols-3 divide-x divide-slate-100 text-center">
+          <div className="grid min-w-0 flex-1 grid-cols-4 divide-x divide-slate-100 text-center">
             <div className="px-2">
               <div className="text-[10px] font-black text-slate-400">运营率</div>
               <div className="mt-0.5 text-base font-black text-blue-600">{operatingRate.toFixed(1)}%</div>
@@ -79,6 +89,10 @@ export function SummaryMetrics({
               <div className="text-[10px] font-black text-slate-400">库存率</div>
               <div className="mt-0.5 text-base font-black text-slate-700">{inventoryRate.toFixed(1)}%</div>
             </div>
+            <div className="px-2">
+              <div className="text-[10px] font-black text-slate-400">异动率</div>
+              <div className="mt-0.5 text-base font-black text-amber-600">{(SUMMARY.totalAssets > 0 ? SUMMARY.inventory.abnormal / SUMMARY.totalAssets * 100 : 0).toFixed(1)}%</div>
+            </div>
             <div className="px-2">
               <div className="text-[10px] font-black text-slate-400">待交率</div>
               <div className="mt-0.5 text-base font-black text-amber-600">{pendingRate.toFixed(1)}%</div>

src/modules/assets/components/overview/types.ts

@@ -2,6 +2,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { FlowDetailItem, FlowStatsResponse, FlowType } from '../../api';
 import type {
   DateRange,
+  FlowSelection,
   InventoryFilters,
   VehicleModalSelection,
 } from '../../model';
@@ -24,7 +25,7 @@ export interface FlowStatisticsCardProps {
   exportFlowDetails: (rows?: FlowDetailItem[], title?: string) => void;
   flowDailyExpanded: boolean;
   setFlowDailyExpanded: Dispatch<SetStateAction<boolean>>;
-  setSelectedFlow: Dispatch<SetStateAction<{ date: string; type: FlowType } | null>>;
+  setSelectedFlow: Dispatch<SetStateAction<FlowSelection | null>>;
 }
 
 export interface AssetSummarySectionProps {