refactor(scheduling): optimize UI for clarity and information density
- 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
@@ -1,4 +1,4 @@
|
||||
import { ArrowRightLeft, AlertTriangle, CheckCircle } from 'lucide-react';
|
||||
import { ArrowRightLeft, ChevronRight } from 'lucide-react';
|
||||
import { motion } from 'motion/react';
|
||||
import type { SchedulingSuggestion } from './types';
|
||||
import Blur from '../../components/Blur';
|
||||
@@ -13,112 +13,74 @@ function fmtKm(value: number): string {
|
||||
return value.toLocaleString();
|
||||
}
|
||||
|
||||
function fmtRate(rate: number): string {
|
||||
return (rate * 100).toFixed(1) + '%';
|
||||
}
|
||||
|
||||
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 className="bg-white rounded-2xl border border-slate-100 shadow-sm p-12 text-center">
|
||||
<ArrowRightLeft className="w-8 h-8 text-slate-200 mx-auto mb-2" />
|
||||
<p className="text-sm text-slate-400">暂无调度建议</p>
|
||||
</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">
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 border-b border-slate-100">
|
||||
<div className="w-1 h-4 rounded-full bg-blue-500" />
|
||||
<span className="text-sm font-bold 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">
|
||||
{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';
|
||||
const isRescue = s.type === 'rescue_hopeless';
|
||||
const v = s.currentVehicle;
|
||||
|
||||
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"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: Math.min(idx * 0.02, 0.3) }}
|
||||
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)}
|
||||
>
|
||||
<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" />
|
||||
)}
|
||||
{/* Left: color bar */}
|
||||
<div className={`w-1 h-10 rounded-full flex-shrink-0 ${isRescue ? 'bg-rose-400' : 'bg-emerald-400'}`} />
|
||||
|
||||
{/* Center: info */}
|
||||
<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">
|
||||
<Blur>{v.plateNumber}</Blur>
|
||||
</span>
|
||||
<span className={`text-[9px] px-1.5 py-px rounded font-bold ${
|
||||
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>
|
||||
|
||||
{/* 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 className="flex items-center gap-3 mt-0.5 text-[10px] text-slate-400">
|
||||
<span><Blur>{v.customer || '-'}</Blur></span>
|
||||
<span>日均 <span className="text-slate-600 font-medium">{Math.round(v.customerAvgDaily)}</span> km</span>
|
||||
<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>
|
||||
</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>
|
||||
{/* Right: candidate count + arrow */}
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<span className="text-xs font-bold text-blue-600">{s.candidates.length}</span>
|
||||
<span className="text-[9px] text-slate-400">辆</span>
|
||||
<ChevronRight size={14} className="text-slate-300" />
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user