feat(scheduling): add SuggestionList component
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
kkfluous
129
src/modules/scheduling/SuggestionList.tsx
Normal file
129
src/modules/scheduling/SuggestionList.tsx
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
import { ArrowRightLeft, AlertTriangle, CheckCircle } from 'lucide-react';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import type { SchedulingSuggestion } from './types';
|
||||||
|
import Blur from '../../components/Blur';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
suggestions: SchedulingSuggestion[];
|
||||||
|
onSelect: (s: SchedulingSuggestion) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtKm(value: number): string {
|
||||||
|
if (value >= 10000) return (value / 10000).toFixed(1) + '万';
|
||||||
|
return value.toLocaleString();
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SuggestionList({ suggestions, onSelect }: Props) {
|
||||||
|
if (suggestions.length === 0) {
|
||||||
|
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-10 flex flex-col items-center gap-3 w-full max-w-sm">
|
||||||
|
<ArrowRightLeft className="w-10 h-10 text-slate-300" />
|
||||||
|
<p className="text-sm font-semibold text-slate-600">暂无调度建议</p>
|
||||||
|
<p className="text-xs text-slate-400 text-center">所有车辆当前无需干预</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center gap-3 px-4 py-3 border-b border-slate-100">
|
||||||
|
<div className="w-1 h-5 rounded-full bg-blue-500 flex-shrink-0" />
|
||||||
|
<span className="text-sm font-semibold text-slate-700 flex-1">智能调度干预清单</span>
|
||||||
|
<span className="text-[11px] font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">
|
||||||
|
{suggestions.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Rows */}
|
||||||
|
<div className="divide-y divide-slate-50">
|
||||||
|
{suggestions.map((s, idx) => {
|
||||||
|
const isHigh = s.priority === 'high' || s.type === 'rescue_hopeless';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={s.id}
|
||||||
|
initial={{ opacity: 0, y: 8 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: idx * 0.03, duration: 0.2 }}
|
||||||
|
className="p-4 hover:bg-slate-50/50 cursor-pointer transition-colors active:bg-slate-100"
|
||||||
|
onClick={() => onSelect(s)}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
{/* Priority icon */}
|
||||||
|
<div
|
||||||
|
className={`w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0 ${
|
||||||
|
isHigh ? 'bg-rose-50' : 'bg-amber-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isHigh ? (
|
||||||
|
<AlertTriangle className="w-4 h-4 text-rose-500" />
|
||||||
|
) : (
|
||||||
|
<CheckCircle className="w-4 h-4 text-amber-500" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
{/* Top row: plate + badges */}
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* Right: candidate count */}
|
||||||
|
<div className="flex-shrink-0 flex flex-col items-end justify-center self-center">
|
||||||
|
<span className="text-sm font-bold text-slate-700">{s.candidates.length}</span>
|
||||||
|
<span className="text-[10px] text-slate-400">辆</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user