shishengliang/ln-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(scheduling): optimize UI for clarity and information density

Browse Source 
- Summary cards: white bg + color border, remove icons, more compact
- SuggestionList: replace badge stacking with compact 2-line layout,
  use color bars for priority, fix completion rate format (0.16 → 16.4%)
- SuggestionDetail: bottom-sheet on mobile, compact inline metrics
  instead of grid cards, reduce vertical space per candidate
- Follows ui-ux-pro-max Data-Dense Dashboard guidelines

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-16 21:04:26 +08:00
parent 495f4bf44f
commit 6ee811c937
3 changed files with 139 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/modules/scheduling/SchedulingModule.tsx
View File

@@ -81,51 +81,21 @@ export default function SchedulingModule() {
<> <>
{/* Summary Cards */} {/* Summary Cards */}
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
{/* Card 1: 已达标车辆 */} <div className="bg-white border border-emerald-100 p-3 rounded-2xl">
<div className="bg-emerald-50 border border-emerald-100 p-4 rounded-2xl"> <div className="text-[10px] font-bold text-emerald-600 mb-1">已达标</div>
<div className="flex items-center gap-1.5 mb-2"> <div className="text-xl font-black text-emerald-700">{data.summary.qualifiedCount}<span className="text-[10px] font-normal text-emerald-400 ml-1">台</span></div>
<CheckCircle size={14} className="text-emerald-600" />
<span className="text-[11px] font-semibold text-emerald-700">已达标车辆</span>
</div>
<div className="text-2xl font-black text-emerald-700">{data.summary.qualifiedCount}</div>
<div className="text-[10px] text-emerald-500 mt-1">达标概率 ≥ 120%</div>
</div> </div>
<div className="bg-white border border-rose-100 p-3 rounded-2xl">
{/* Card 2: 无望达标 */} <div className="text-[10px] font-bold text-rose-500 mb-1">无望达标</div>
<div className="bg-rose-50 border border-rose-100 p-4 rounded-2xl"> <div className="text-xl font-black text-rose-700">{data.summary.hopelessCount}<span className="text-[10px] font-normal text-rose-400 ml-1">台</span></div>
<div className="flex items-center gap-1.5 mb-2">
<AlertTriangle size={14} className="text-rose-600" />
<span className="text-[11px] font-semibold text-rose-700">无望达标</span>
</div>
<div className="text-2xl font-black text-rose-700">{data.summary.hopelessCount}</div>
<div className="text-[10px] text-rose-500 mt-1">达标概率 &lt; 60%</div>
</div> </div>
<div className="bg-white border border-blue-100 p-3 rounded-2xl">
{/* Card 3: 可干预 */} <div className="text-[10px] font-bold text-blue-600 mb-1">可干预</div>
<div className="bg-blue-50 border border-blue-100 p-4 rounded-2xl"> <div className="text-xl font-black text-blue-700">{data.summary.suggestionCount}<span className="text-[10px] font-normal text-blue-400 ml-1">条</span></div>
<div className="flex items-center gap-1.5 mb-2"> <div className="text-[9px] text-blue-400 mt-0.5">+{data.summary.estimatedGain} 台可达标</div>
<TrendingUp size={14} className="text-blue-600" />
<span className="text-[11px] font-semibold text-blue-700">可干预</span>
</div>
<div className="text-2xl font-black text-blue-700">{data.summary.suggestionCount}</div>
<div className="text-[10px] text-blue-500 mt-1">
预计可新增达标 +{data.summary.estimatedGain} 台
</div>
</div> </div>
</div> </div>
{/* Refresh Button */}
<div className="flex justify-end">
<button
onClick={loadData}
disabled={loading}
className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-600 transition-colors px-3 py-1.5 rounded-xl hover:bg-slate-100"
>
<RotateCcw size={13} className={loading ? 'animate-spin' : ''} />
刷新
</button>
</div>
{/* Suggestion List */} {/* Suggestion List */}
<SuggestionList <SuggestionList
suggestions={data.suggestions} suggestions={data.suggestions}

230
src/modules/scheduling/SuggestionDetail.tsx
View File

@@ -1,11 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import { import {
X, X, MapPin, AlertTriangle, CheckCircle, Send, ArrowRight,
Truck,
MapPin,
AlertTriangle,
CheckCircle,
Send,
} from 'lucide-react'; } from 'lucide-react';
import { motion } from 'motion/react'; import { motion } from 'motion/react';
import { sendNotify } from './api'; import { sendNotify } from './api';
@@ -30,20 +25,6 @@ export default function SuggestionDetail({ suggestion: s, onClose, onNotifySucce
const v = s.currentVehicle; const v = s.currentVehicle;
const isRescue = s.type === 'rescue_hopeless'; const isRescue = s.type === 'rescue_hopeless';
const headerBg = isRescue ? 'bg-rose-600' : 'bg-amber-600';
const title = isRescue ? '智能调度干预 — 抢救低里程' : '智能调度干预 — 释放已达标';
const cardBg = isRescue
? 'bg-rose-50 border border-rose-100'
: 'bg-amber-50 border border-amber-100';
const completionColor =
v.completionRate >= 1
? 'text-emerald-600'
: v.completionRate >= 0.6
? 'text-amber-600'
: 'text-rose-600';
const handleNotify = async (candidate: CandidateVehicle) => { const handleNotify = async (candidate: CandidateVehicle) => {
if (sending || sentPlates.has(candidate.plateNumber)) return; if (sending || sentPlates.has(candidate.plateNumber)) return;
setSending(true); setSending(true);
@@ -59,7 +40,7 @@ export default function SuggestionDetail({ suggestion: s, onClose, onNotifySucce
} else { } else {
alert(result.message || '发送失败'); alert(result.message || '发送失败');
} }
} catch (e) { } catch {
alert('网络错误，请重试'); alert('网络错误，请重试');
} finally { } finally {
setSending(false); setSending(false);
@@ -67,169 +48,126 @@ export default function SuggestionDetail({ suggestion: s, onClose, onNotifySucce
}; };
return ( return (
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[60] flex items-center justify-center p-4"> <div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[60] flex items-end sm:items-center justify-center">
<motion.div <motion.div
initial={{ scale: 0.9, opacity: 0, y: 20 }} initial={{ y: 40, opacity: 0 }}
animate={{ scale: 1, opacity: 1, y: 0 }} animate={{ y: 0, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0, y: 20 }} className="bg-white rounded-t-2xl sm:rounded-2xl shadow-2xl w-full sm:max-w-lg overflow-hidden flex flex-col max-h-[92vh] sm:max-h-[85vh] sm:mx-4"
className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden flex flex-col max-h-[90vh]"
> >
{/* Header */} {/* Header */}
<div className={`${headerBg} px-5 py-3 flex items-center justify-between flex-shrink-0`}> <div className={`${isRescue ? 'bg-rose-600' : 'bg-amber-500'} px-4 py-3 flex items-center justify-between flex-shrink-0`}>
<span className="text-white font-semibold text-sm">{title}</span> <span className="text-white font-bold text-sm">
<button {isRescue ? '抢救低里程车辆' : '释放已达标车辆'}
onClick={onClose} </span>
className="text-white/80 hover:text-white transition-colors" <button onClick={onClose} className="text-white/70 hover:text-white transition-colors p-1">
>
<X size={18} /> <X size={18} />
</button> </button>
</div> </div>
{/* Scrollable body */} {/* Body */}
<div className="overflow-y-auto flex-1 p-4 space-y-3"> <div className="overflow-y-auto flex-1 no-scrollbar">
{/* Current Vehicle Card */}
<div className={`${cardBg} rounded-xl p-4`}> {/* Current Vehicle — compact header */}
<div className="flex items-center justify-between mb-3"> <div className={`px-4 py-3 ${isRescue ? 'bg-rose-50' : 'bg-amber-50'}`}>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-bold text-base tracking-wide"> <span className="text-base font-black text-slate-900 font-mono"><Blur>{v.plateNumber}</Blur></span>
<Blur>{v.plateNumber}</Blur> <span className="text-[10px] px-1.5 py-0.5 rounded bg-white/80 text-slate-500 font-bold border border-slate-200">{v.vehicleType}</span>
</span>
<span className="text-xs text-gray-500 bg-white/70 px-2 py-0.5 rounded-full border border-gray-200">
{v.vehicleType}
</span>
</div> </div>
<div className="text-right"> <div className="text-right">
<span className={`text-lg font-bold ${completionColor}`}> <span className={`text-lg font-black ${v.completionRate >= 1 ? 'text-emerald-600' : v.completionRate >= 0.5 ? 'text-amber-600' : 'text-rose-600'}`}>
{(v.completionRate * 100).toFixed(1)}% {(v.completionRate * 100).toFixed(1)}%
</span> </span>
<div className="text-xs text-gray-400">完成率</div>
</div> </div>
</div> </div>
<div className="text-xs text-gray-500 mb-2">{v.targetName}</div> {/* Key metrics in a single compact row */}
<div className="flex items-center gap-3 text-[10px] text-slate-500 flex-wrap">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs mb-3"> <span>{v.targetName}</span>
<div className="bg-white/60 rounded-lg p-2"> <span className="text-slate-300">|</span>
<div className="text-gray-400 mb-0.5">累计里程</div> <span>累计 <span className="text-slate-700 font-bold">{fmtKm(v.totalMileage)}</span> km</span>
<div className="font-semibold text-gray-700">{fmtKm(v.totalMileage)} km</div> <span>考核 <span className="text-slate-700 font-bold">{fmtKm(v.yearTarget)}</span> km</span>
</div> <span><MapPin size={9} className="inline -mt-px" /> {v.region}</span>
<div className="bg-white/60 rounded-lg p-2"> </div>
<div className="text-gray-400 mb-0.5">本年考核</div> <div className="flex items-center gap-3 text-[10px] text-slate-500 mt-1">
<div className="font-semibold text-gray-700">{fmtKm(v.yearTarget)} km</div> <span>客户 <span className="text-slate-700 font-medium"><Blur>{v.customer || '-'}</Blur></span></span>
</div> <span>日均 <span className="text-slate-700 font-bold">{Math.round(v.customerAvgDaily)}</span> km</span>
<div className="bg-white/60 rounded-lg p-2">
<div className="text-gray-400 mb-0.5 flex items-center gap-0.5">
<MapPin size={10} />区域
</div>
<div className="font-semibold text-gray-700 truncate">{v.region}</div>
</div>
<div className="bg-white/60 rounded-lg p-2">
<div className="text-gray-400 mb-0.5">客户日均</div>
<div className="font-semibold text-gray-700">{fmtKm(v.customerAvgDaily)} km</div>
</div>
</div> </div>
{v.customer && (
<div className="text-xs text-gray-500">
客户：<span className="font-medium text-gray-700"><Blur>{v.customer}</Blur></span>
</div>
)}
</div> </div>
{/* Reason Card */} {/* Reason — one line */}
<div className="bg-blue-50 border border-blue-100 rounded-xl p-3 text-sm"> <div className="px-4 py-2 bg-blue-50 border-y border-blue-100 text-[11px] text-blue-700 leading-relaxed">
<span className="font-semibold text-blue-700 mr-2">建议原因</span> {s.reason}
<span className="text-blue-600">{s.reason}</span>
</div> </div>
{/* Candidates Section */} {/* Candidates */}
<div> <div className="px-4 py-3">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center justify-between mb-2">
<Truck size={15} className="text-gray-500" /> <span className="text-xs font-bold text-slate-700">推荐替换车辆</span>
<span className="font-semibold text-gray-800 text-sm">推荐替换车辆</span> <span className="text-[10px] text-slate-400">{s.candidates.length} 辆可选</span>
</div> </div>
<div className="text-xs text-gray-400 mb-2">基于车型、区域及里程匹配</div>
<div className="space-y-3"> <div className="space-y-2">
{s.candidates.map(c => { {s.candidates.map(c => {
const alreadySent = sentPlates.has(c.plateNumber); const sent = sentPlates.has(c.plateNumber);
const predColor =
c.canQualifyAfterSwap ? 'text-emerald-600' : 'text-amber-600';
return ( return (
<div <div key={c.plateNumber} className="border border-slate-150 rounded-xl overflow-hidden">
key={c.plateNumber} {/* Candidate header row */}
className="border border-gray-200 rounded-xl p-3 bg-white" <div className="flex items-center justify-between px-3 py-2 bg-slate-50/50">
>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-bold text-sm tracking-wide"> <span className="text-xs font-black text-slate-900 font-mono"><Blur>{c.plateNumber}</Blur></span>
<Blur>{c.plateNumber}</Blur> <span className="text-[9px] text-slate-400">{c.vehicleType}</span>
</span> <span className="text-[9px] text-slate-300">{c.targetName || '库存'}</span>
<span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
{c.vehicleType}
</span>
{c.targetName ? (
<span className="text-xs text-gray-400">{c.targetName}</span>
) : (
<span className="text-xs text-gray-400">库存</span>
)}
</div> </div>
{c.canQualifyAfterSwap ? ( {c.canQualifyAfterSwap ? (
<span className="flex items-center gap-1 text-xs font-medium text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 py-0.5 rounded-full"> <span className="text-[9px] font-bold text-emerald-600 flex items-center gap-0.5">
<CheckCircle size={11} />换后可达标 <CheckCircle size={10} /> 换后可达标
</span> </span>
) : ( ) : (
<span className="flex items-center gap-1 text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 px-2 py-0.5 rounded-full"> <span className="text-[9px] font-bold text-amber-500 flex items-center gap-0.5">
<AlertTriangle size={11} />需关注 <AlertTriangle size={10} /> 需关注
</span> </span>
)} )}
</div> </div>
<div className="grid grid-cols-3 sm:grid-cols-5 gap-2 text-xs mb-3"> {/* Metrics row — compact inline */}
<div className="bg-gray-50 rounded-lg p-2"> <div className="px-3 py-2 flex items-center gap-0 text-[10px] flex-wrap">
<div className="text-gray-400 mb-0.5">当前里程</div> <div className="flex-1 min-w-[60px]">
<div className="font-semibold text-gray-700">{fmtKm(c.totalMileage)} km</div> <div className="text-slate-400">当前</div>
<div className="font-bold text-slate-700">{fmtKm(c.totalMileage)}</div>
</div> </div>
<div className="bg-blue-50 rounded-lg p-2"> <div className="flex-1 min-w-[60px]">
<div className="text-blue-400 mb-0.5">本年考核</div> <div className="text-blue-400">考核</div>
<div className="font-semibold text-blue-700">{c.yearTarget ? fmtKm(c.yearTarget) + ' km' : '-'}</div> <div className="font-bold text-blue-700">{c.yearTarget ? fmtKm(c.yearTarget) : '-'}</div>
</div> </div>
<div className="bg-rose-50 rounded-lg p-2"> <div className="flex-1 min-w-[60px]">
<div className="text-rose-400 mb-0.5">里程缺口</div> <div className="text-rose-400">缺口</div>
<div className="font-semibold text-rose-600">{fmtKm(c.mileageGap)} km</div> <div className="font-bold text-rose-600">{fmtKm(c.mileageGap)}</div>
</div> </div>
<div className="bg-gray-50 rounded-lg p-2"> <div className="flex-1 min-w-[40px]">
<div className="text-gray-400 mb-0.5 flex items-center gap-0.5"> <div className="text-slate-400">区域</div>
<MapPin size={10} />区域 <div className="font-bold text-slate-700">{c.region}</div>
</div>
<div className="font-semibold text-gray-700 truncate">{c.region}</div>
</div> </div>
<div className="bg-gray-50 rounded-lg p-2"> <div className="flex-1 min-w-[60px]">
<div className="text-gray-400 mb-0.5">换后预测</div> <div className="text-slate-400">换后</div>
<div className={`font-semibold ${predColor}`}>{fmtKm(c.predictedAfterSwap)} km</div> <div className={`font-bold ${c.canQualifyAfterSwap ? 'text-emerald-600' : 'text-amber-600'}`}>{fmtKm(c.predictedAfterSwap)}</div>
</div> </div>
</div> </div>
<button {/* Action */}
onClick={() => handleNotify(c)} <div className="px-3 pb-2">
disabled={sending || alreadySent} <button
className={`w-full flex items-center justify-center gap-1.5 text-xs font-medium py-2 rounded-lg transition-colors ${ onClick={() => handleNotify(c)}
alreadySent disabled={sending || sent}
? 'bg-gray-100 text-gray-400 cursor-not-allowed' className={`w-full flex items-center justify-center gap-1 text-[11px] font-bold py-2 rounded-lg transition-all cursor-pointer ${
: 'bg-indigo-600 hover:bg-indigo-700 text-white disabled:opacity-50 disabled:cursor-not-allowed' sent
}`} ? 'bg-slate-50 text-slate-400'
> : 'bg-blue-600 hover:bg-blue-700 text-white active:scale-[0.98]'
{alreadySent ? ( }`}
<> >
<CheckCircle size={13} />已发送 {sent ? <><CheckCircle size={12} /> 已发送</> : <><Send size={12} /> 发送替换通知</>}
</> </button>
) : ( </div>
<>
<Send size={13} />发送替换通知
</>
)}
</button>
</div> </div>
); );
})} })}
@@ -238,10 +176,10 @@ export default function SuggestionDetail({ suggestion: s, onClose, onNotifySucce
</div> </div>
{/* Footer */} {/* Footer */}
<div className="border-t border-gray-100 px-4 py-3 flex justify-end flex-shrink-0"> <div className="border-t border-slate-100 px-4 py-2.5 flex-shrink-0">
<button <button
onClick={onClose} onClick={onClose}
className="px-5 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors" className="w-full py-2 text-xs font-bold text-slate-500 bg-slate-50 hover:bg-slate-100 rounded-lg transition-colors cursor-pointer"
> >
关闭 关闭
</button> </button>

128
src/modules/scheduling/SuggestionList.tsx
View File

@@ -1,4 +1,4 @@
import { ArrowRightLeft, AlertTriangle, CheckCircle } from 'lucide-react'; import { ArrowRightLeft, ChevronRight } from 'lucide-react';
import { motion } from 'motion/react'; import { motion } from 'motion/react';
import type { SchedulingSuggestion } from './types'; import type { SchedulingSuggestion } from './types';
import Blur from '../../components/Blur'; import Blur from '../../components/Blur';
@@ -13,112 +13,74 @@ function fmtKm(value: number): string {
return value.toLocaleString(); return value.toLocaleString();
} }
function fmtRate(rate: number): string {
return (rate * 100).toFixed(1) + '%';
}
export default function SuggestionList({ suggestions, onSelect }: Props) { export default function SuggestionList({ suggestions, onSelect }: Props) {
if (suggestions.length === 0) { if (suggestions.length === 0) {
return ( return (
<div className="flex flex-col items-center justify-center py-16 px-6"> <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-12 text-center">
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-10 flex flex-col items-center gap-3 w-full max-w-sm"> <ArrowRightLeft className="w-8 h-8 text-slate-200 mx-auto mb-2" />
<ArrowRightLeft className="w-10 h-10 text-slate-300" /> <p className="text-sm text-slate-400">暂无调度建议</p>
<p className="text-sm font-semibold text-slate-600">暂无调度建议</p>
<p className="text-xs text-slate-400 text-center">所有车辆当前无需干预</p>
</div>
</div> </div>
); );
} }
return ( return (
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden"> <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
{/* Header */} <div className="flex items-center gap-2 px-4 py-2.5 border-b border-slate-100">
<div className="flex items-center gap-3 px-4 py-3 border-b border-slate-100"> <div className="w-1 h-4 rounded-full bg-blue-500" />
<div className="w-1 h-5 rounded-full bg-blue-500 flex-shrink-0" /> <span className="text-sm font-bold text-slate-700 flex-1">调度干预清单</span>
<span className="text-sm font-semibold text-slate-700 flex-1">智能调度干预清单</span> <span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">
<span className="text-[11px] font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">
{suggestions.length} {suggestions.length}
</span> </span>
</div> </div>
{/* Rows */}
<div className="divide-y divide-slate-50"> <div className="divide-y divide-slate-50">
{suggestions.map((s, idx) => { {suggestions.map((s, idx) => {
const isHigh = s.priority === 'high' || s.type === 'rescue_hopeless'; const isRescue = s.type === 'rescue_hopeless';
const v = s.currentVehicle;
return ( return (
<motion.div <motion.div
key={s.id} key={s.id}
initial={{ opacity: 0, y: 8 }} initial={{ opacity: 0 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1 }}
transition={{ delay: idx * 0.03, duration: 0.2 }} transition={{ delay: Math.min(idx * 0.02, 0.3) }}
className="p-4 hover:bg-slate-50/50 cursor-pointer transition-colors active:bg-slate-100" className="px-4 py-3 hover:bg-slate-50/60 cursor-pointer transition-colors active:bg-slate-100 flex items-center gap-3"
onClick={() => onSelect(s)} onClick={() => onSelect(s)}
> >
<div className="flex items-start gap-3"> {/* Left: color bar */}
{/* Priority icon */} <div className={`w-1 h-10 rounded-full flex-shrink-0 ${isRescue ? 'bg-rose-400' : 'bg-emerald-400'}`} />
<div
className={`w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0 ${ {/* Center: info */}
isHigh ? 'bg-rose-50' : 'bg-amber-50' <div className="flex-1 min-w-0">
}`} <div className="flex items-center gap-2">
> <span className="text-xs font-black text-slate-900 font-mono">
{isHigh ? ( <Blur>{v.plateNumber}</Blur>
<AlertTriangle className="w-4 h-4 text-rose-500" /> </span>
) : ( <span className={`text-[9px] px-1.5 py-px rounded font-bold ${
<CheckCircle className="w-4 h-4 text-amber-500" /> isRescue ? 'bg-rose-50 text-rose-500' : 'bg-emerald-50 text-emerald-500'
)} }`}>
{isRescue ? '无望' : '达标'}
</span>
<span className="text-[9px] text-slate-400">{v.vehicleType}</span>
<span className="text-[9px] text-slate-300">·</span>
<span className="text-[9px] text-slate-400">{v.region}</span>
</div> </div>
<div className="flex items-center gap-3 mt-0.5 text-[10px] text-slate-400">
{/* Content */} <span><Blur>{v.customer || '-'}</Blur></span>
<div className="flex-1 min-w-0"> <span>日均 <span className="text-slate-600 font-medium">{Math.round(v.customerAvgDaily)}</span> km</span>
{/* Top row: plate + badges */} <span>完成 <span className={`font-medium ${v.completionRate >= 1 ? 'text-emerald-600' : v.completionRate >= 0.5 ? 'text-amber-600' : 'text-rose-500'}`}>{fmtRate(v.completionRate)}</span></span>
<div className="flex items-center gap-1.5 flex-wrap">
<Blur>
<span className="text-xs font-black text-slate-900 font-mono">
{s.currentVehicle.plateNumber}
</span>
</Blur>
{/* Type badge */}
<span
className={`text-[8px] px-1.5 py-0.5 rounded-full font-bold ${
s.type === 'rescue_hopeless'
? 'bg-rose-100 text-rose-600'
: 'bg-emerald-100 text-emerald-600'
}`}
>
{s.type === 'rescue_hopeless' ? '无望达标' : '已达标'}
</span>
{/* Vehicle type badge */}
<span className="text-[8px] px-1.5 py-0.5 rounded-full font-bold bg-slate-100 text-slate-500">
{s.currentVehicle.vehicleType}
</span>
{/* Region badge */}
<span className="text-[8px] px-1.5 py-0.5 rounded-full font-bold bg-slate-100 text-slate-500">
{s.currentVehicle.region}
</span>
</div>
{/* Info line */}
<div className="flex items-center gap-2 mt-1 flex-wrap">
<span className="text-[10px] text-slate-400">
客户:{' '}
<Blur>
<span>{s.currentVehicle.customer ?? '—'}</span>
</Blur>
</span>
<span className="text-[10px] text-slate-400">
日均: {fmtKm(s.currentVehicle.customerAvgDaily)} KM
</span>
<span className="text-[10px] text-slate-400">
完成率: {s.currentVehicle.completionRate}%
</span>
</div>
</div> </div>
</div>
{/* Right: candidate count */} {/* Right: candidate count + arrow */}
<div className="flex-shrink-0 flex flex-col items-end justify-center self-center"> <div className="flex items-center gap-1 flex-shrink-0">
<span className="text-sm font-bold text-slate-700">{s.candidates.length}</span> <span className="text-xs font-bold text-blue-600">{s.candidates.length}</span>
<span className="text-[10px] text-slate-400">辆</span> <span className="text-[9px] text-slate-400">辆</span>
</div> <ChevronRight size={14} className="text-slate-300" />
</div> </div>
</motion.div> </motion.div>
); );