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

refactor(scheduling): redesign current vehicle card to match candidate card style
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
kkfluous
2026-04-16 23:00:22 +08:00
parent aa9a29fed8
commit c3de4ebaf5
1 changed files with 35 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -85,40 +85,42 @@ export default function SuggestionDetail({ suggestion: s, onClose, onNotifySucce
{/* Body */}
<div className="overflow-y-auto flex-1 no-scrollbar">
{/* Current Vehicle */}
<div className="px-4 py-3 bg-slate-50 border-b border-slate-100">
<div className="flex items-center justify-between mb-1.5">
<div className="flex items-center gap-2">
<span className="text-base font-black text-slate-900 font-mono"><Blur>{v.plateNumber}</Blur></span>
<span className="text-[9px] px-1.5 py-0.5 rounded bg-white text-slate-500 font-bold border border-slate-200">{v.vehicleType}</span>
{/* Current Vehicle — same format as candidate cards */}
<div className="px-4 py-3 border-b border-slate-100">
<div className="rounded-xl border border-slate-200 overflow-hidden bg-white">
{/* Header — same style as candidate header */}
<div className="flex items-center justify-between px-3 py-2">
<div className="flex items-center gap-2 flex-wrap">
<span className="text-xs font-black text-slate-900 font-mono"><Blur>{v.plateNumber}</Blur></span>
<span className="text-[9px] text-slate-500 bg-slate-100 px-1.5 py-0.5 rounded flex items-center gap-0.5"><MapPin size={9} />{v.region}</span>
<span className="text-[9px] text-slate-400">{v.vehicleType}</span>
<span className="text-[9px] text-slate-300">{v.targetName}</span>
<span className="text-[9px] text-slate-400">剩余{v.daysLeft}天</span>
</div>
<span className={`text-sm font-black tabular-nums ${v.completionRate >= 1 ? 'text-emerald-600' : 'text-rose-500'}`}>
{fmtRate(v.completionRate)}
</span>
</div>
<span className={`text-lg font-black tabular-nums ${v.completionRate >= 1 ? 'text-emerald-600' : v.completionRate >= 0.5 ? 'text-amber-600' : 'text-rose-600'}`}>
{fmtRate(v.completionRate)}
</span>
</div>
<div className="flex items-center gap-2 text-[10px] text-slate-500 flex-wrap">
<span className="text-slate-400">{v.targetName}</span>
<span className="flex items-center gap-0.5"><MapPin size={9} /> {v.region}</span>
<span className="text-slate-200">|</span>
<span>客户 <b className="text-slate-700"><Blur>{v.customer || '-'}</Blur></b></span>
<span>日均 <b className="text-slate-700">{Math.round(v.customerAvgDaily)}</b> km</span>
</div>
{/* Metrics row */}
<div className="mt-2.5">
<div className="flex text-[10px] bg-white rounded-lg overflow-hidden divide-x divide-slate-200 border border-slate-200">
<div className="flex-1 py-1.5 px-2 text-center">
<div className="text-slate-400">当前</div>
<div className="font-bold text-slate-700">{fmtKm(v.currentYearMileage)}</div>
</div>
<div className="flex-1 py-1.5 px-2 text-center">
<div className="text-slate-400">考核期结束预估</div>
<div className={`font-bold ${v.completionRate >= 1 ? 'text-emerald-600' : 'text-rose-500'}`}>{fmtKm(v.currentYearMileage + v.customerAvgDaily * v.daysLeft)}</div>
</div>
<div className="flex-1 py-1.5 px-2 text-center">
<div className="text-blue-400">考核</div>
<div className="font-bold text-blue-700">{fmtKm(v.yearTarget)}</div>
{/* Customer info */}
<div className="px-3 pb-1.5 flex items-center gap-2 text-[10px] text-slate-500">
<span>客户 <b className="text-slate-700"><Blur>{v.customer || '-'}</Blur></b></span>
<span>日均 <b className="text-slate-700">{Math.round(v.customerAvgDaily)}</b> km</span>
</div>
{/* Metrics */}
<div className="px-3 pb-2">
<div className="flex text-[10px] bg-slate-50 rounded-lg overflow-hidden divide-x divide-slate-200">
<div className="flex-1 py-1.5 px-2 text-center">
<div className="text-slate-400">当前</div>
<div className="font-bold text-slate-700">{fmtKm(v.currentYearMileage)}</div>
</div>
<div className="flex-1 py-1.5 px-2 text-center">
<div className="text-slate-400">考核期结束预估</div>
<div className={`font-bold ${v.completionRate >= 1 ? 'text-emerald-600' : 'text-rose-500'}`}>{fmtKm(v.currentYearMileage + v.customerAvgDaily * v.daysLeft)}</div>
</div>
<div className="flex-1 py-1.5 px-2 text-center">
<div className="text-blue-400">考核</div>
<div className="font-bold text-blue-700">{fmtKm(v.yearTarget)}</div>
</div>
</div>
</div>
</div>