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

refactor(scheduling): polish overall color scheme and UX

Browse Source 
- Modal header: unified dark slate-800 with directional icon (↓ rescue, ↑ release)
- Modal click-outside to close
- Candidate metrics: table-style with bg-slate-50 + dividers, more scannable
- Send button: dark slate instead of blue (avoids color overload)
- Reason section: warm amber accent
- Consistent font sizing and spacing throughout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-16 21:13:12 +08:00
parent 6f7555a407
commit 73080a605d
1 changed files with 77 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import { import {
X, MapPin, AlertTriangle, CheckCircle, Send, ArrowRight, X, MapPin, AlertTriangle, CheckCircle, Send, ArrowDown, ArrowUp,
} from 'lucide-react'; } from 'lucide-react';
import { motion } from 'motion/react'; import { motion } from 'motion/react';
import { sendNotify } from './api'; import { sendNotify } from './api';
@@ -18,6 +18,10 @@ function fmtKm(value: number): string {
return value.toLocaleString(); return value.toLocaleString();
} }
function fmtRate(rate: number): string {
return (rate * 100).toFixed(1) + '%';
}
export default function SuggestionDetail({ suggestion: s, onClose, onNotifySuccess }: Props) { export default function SuggestionDetail({ suggestion: s, onClose, onNotifySuccess }: Props) {
const [sending, setSending] = useState(false); const [sending, setSending] = useState(false);
const [sentPlates, setSentPlates] = useState<Set<string>>(new Set()); const [sentPlates, setSentPlates] = useState<Set<string>>(new Set());
@@ -48,18 +52,25 @@ 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-end sm:items-center justify-center"> <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[60] flex items-end sm:items-center justify-center" onClick={onClose}>
<motion.div <motion.div
initial={{ y: 40, opacity: 0 }} initial={{ y: 40, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
onClick={e => e.stopPropagation()}
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-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"
> >
{/* Header */} {/* Header — unified dark slate */}
<div className={`${isRescue ? 'bg-rose-600' : 'bg-amber-500'} px-4 py-3 flex items-center justify-between flex-shrink-0`}> <div className="bg-slate-800 px-4 py-3 flex items-center justify-between flex-shrink-0">
<span className="text-white font-bold text-sm"> <div className="flex items-center gap-2">
{isRescue ? '抢救低里程车辆' : '释放已达标车辆'} {isRescue
</span> ? <ArrowDown size={14} className="text-rose-400" />
<button onClick={onClose} className="text-white/70 hover:text-white transition-colors p-1"> : <ArrowUp size={14} className="text-emerald-400" />
}
<span className="text-white font-bold text-sm">
{isRescue ? '抢救低里程' : '释放已达标'}
</span>
</div>
<button onClick={onClose} className="text-slate-400 hover:text-white transition-colors p-1 cursor-pointer">
<X size={18} /> <X size={18} />
</button> </button>
</div> </div>
@@ -67,43 +78,43 @@ export default function SuggestionDetail({ suggestion: s, onClose, onNotifySucce
{/* Body */} {/* Body */}
<div className="overflow-y-auto flex-1 no-scrollbar"> <div className="overflow-y-auto flex-1 no-scrollbar">
{/* Current Vehicle — compact header */} {/* Current Vehicle */}
<div className={`px-4 py-3 ${isRescue ? 'bg-rose-50' : 'bg-amber-50'}`}> <div className="px-4 py-3 bg-slate-50 border-b border-slate-100">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-1.5">
<div className="flex items-center gap-2"> <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-base font-black text-slate-900 font-mono"><Blur>{v.plateNumber}</Blur></span>
<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 className="text-[9px] px-1.5 py-0.5 rounded bg-white text-slate-500 font-bold border border-slate-200">{v.vehicleType}</span>
</div>
<div className="text-right">
<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)}%
</span>
</div> </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>
{/* Key metrics in a single compact row */} <div className="text-[10px] text-slate-500 space-y-0.5">
<div className="flex items-center gap-3 text-[10px] text-slate-500 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<span>{v.targetName}</span> <span className="text-slate-400">{v.targetName}</span>
<span className="text-slate-300">|</span> <span className="text-slate-200">|</span>
<span>本年已跑 <span className="text-slate-700 font-bold">{fmtKm(v.currentYearMileage)}</span> km</span> <span>已跑 <b className="text-slate-700">{fmtKm(v.currentYearMileage)}</b></span>
<span>本年考核 <span className="text-slate-700 font-bold">{fmtKm(v.yearTarget)}</span> km</span> <span>考核 <b className="text-slate-700">{fmtKm(v.yearTarget)}</b> km</span>
<span><MapPin size={9} className="inline -mt-px" /> {v.region}</span> <span className="flex items-center gap-0.5"><MapPin size={9} /> {v.region}</span>
</div> </div>
<div className="flex items-center gap-3 text-[10px] text-slate-500 mt-1"> <div className="flex items-center gap-2">
<span>客户 <span className="text-slate-700 font-medium"><Blur>{v.customer || '-'}</Blur></span></span> <span>客户 <b className="text-slate-700"><Blur>{v.customer || '-'}</Blur></b></span>
<span>日均 <span className="text-slate-700 font-bold">{Math.round(v.customerAvgDaily)}</span> km</span> <span>日均 <b className="text-slate-700">{Math.round(v.customerAvgDaily)}</b> km</span>
</div>
</div> </div>
</div> </div>
{/* Reason — one line */} {/* Reason */}
<div className="px-4 py-2 bg-blue-50 border-y border-blue-100 text-[11px] text-blue-700 leading-relaxed"> <div className="px-4 py-2 text-[11px] text-slate-500 leading-relaxed border-b border-slate-100 bg-amber-50/50">
{s.reason} <span className="text-amber-700 font-bold">建议：</span>
<span className="text-slate-600">{s.reason}</span>
</div> </div>
{/* Candidates */} {/* Candidates */}
<div className="px-4 py-3"> <div className="px-4 py-3">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2.5">
<span className="text-xs font-bold text-slate-700">推荐替换车辆</span> <span className="text-xs font-bold text-slate-700">推荐替换</span>
<span className="text-[10px] text-slate-400">{s.candidates.length} 辆可选</span> <span className="text-[10px] text-slate-400">{s.candidates.length} 辆可选</span>
</div> </div>
@@ -111,58 +122,60 @@ export default function SuggestionDetail({ suggestion: s, onClose, onNotifySucce
{s.candidates.map(c => { {s.candidates.map(c => {
const sent = sentPlates.has(c.plateNumber); const sent = sentPlates.has(c.plateNumber);
return ( return (
<div key={c.plateNumber} className="border border-slate-150 rounded-xl overflow-hidden"> <div key={c.plateNumber} className="rounded-xl border border-slate-200 overflow-hidden bg-white">
{/* Candidate header row */} {/* Header */}
<div className="flex items-center justify-between px-3 py-2 bg-slate-50/50"> <div className="flex items-center justify-between px-3 py-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-xs font-black text-slate-900 font-mono"><Blur>{c.plateNumber}</Blur></span> <span className="text-xs font-black text-slate-900 font-mono"><Blur>{c.plateNumber}</Blur></span>
<span className="text-[9px] text-slate-400">{c.vehicleType}</span> <span className="text-[9px] text-slate-400">{c.vehicleType}</span>
<span className="text-[9px] text-slate-300">{c.targetName || '库存'}</span> <span className="text-[9px] text-slate-300">{c.targetName || '库存'}</span>
</div> </div>
{c.canQualifyAfterSwap ? ( {c.canQualifyAfterSwap ? (
<span className="text-[9px] font-bold text-emerald-600 flex items-center gap-0.5"> <span className="text-[9px] font-bold text-emerald-600 flex items-center gap-0.5 bg-emerald-50 px-1.5 py-0.5 rounded">
<CheckCircle size={10} /> 换后可达标 <CheckCircle size={10} /> 可达标
</span> </span>
) : ( ) : (
<span className="text-[9px] font-bold text-amber-500 flex items-center gap-0.5"> <span className="text-[9px] font-bold text-amber-500 flex items-center gap-0.5 bg-amber-50 px-1.5 py-0.5 rounded">
<AlertTriangle size={10} /> 需关注 <AlertTriangle size={10} /> 需关注
</span> </span>
)} )}
</div> </div>
{/* Metrics row — compact inline */} {/* Metrics — compact table style */}
<div className="px-3 py-2 flex items-center gap-0 text-[10px] flex-wrap"> <div className="px-3 pb-2">
<div className="flex-1 min-w-[60px]"> <div className="flex text-[10px] bg-slate-50 rounded-lg overflow-hidden divide-x divide-slate-200">
<div className="text-slate-400">当前</div> <div className="flex-1 py-1.5 px-2 text-center">
<div className="font-bold text-slate-700">{fmtKm(c.totalMileage)}</div> <div className="text-slate-400">当前</div>
</div> <div className="font-bold text-slate-700">{fmtKm(c.totalMileage)}</div>
<div className="flex-1 min-w-[60px]"> </div>
<div className="text-blue-400">考核</div> <div className="flex-1 py-1.5 px-2 text-center">
<div className="font-bold text-blue-700">{c.yearTarget ? fmtKm(c.yearTarget) : '-'}</div> <div className="text-blue-400">考核</div>
</div> <div className="font-bold text-blue-700">{c.yearTarget ? fmtKm(c.yearTarget) : '-'}</div>
<div className="flex-1 min-w-[60px]"> </div>
<div className="text-rose-400">缺口</div> <div className="flex-1 py-1.5 px-2 text-center">
<div className="font-bold text-rose-600">{fmtKm(c.mileageGap)}</div> <div className="text-rose-400">缺口</div>
</div> <div className="font-bold text-rose-600">{fmtKm(c.mileageGap)}</div>
<div className="flex-1 min-w-[40px]"> </div>
<div className="text-slate-400">区域</div> <div className="flex-1 py-1.5 px-2 text-center">
<div className="font-bold text-slate-700">{c.region}</div> <div className="text-slate-400">区域</div>
</div> <div className="font-bold text-slate-700">{c.region}</div>
<div className="flex-1 min-w-[60px]"> </div>
<div className="text-slate-400">换后</div> <div className="flex-1 py-1.5 px-2 text-center">
<div className={`font-bold ${c.canQualifyAfterSwap ? 'text-emerald-600' : 'text-amber-600'}`}>{fmtKm(c.predictedAfterSwap)}</div> <div className="text-slate-400">换后</div>
<div className={`font-bold ${c.canQualifyAfterSwap ? 'text-emerald-600' : 'text-amber-600'}`}>{fmtKm(c.predictedAfterSwap)}</div>
</div>
</div> </div>
</div> </div>
{/* Action */} {/* Action */}
<div className="px-3 pb-2"> <div className="px-3 pb-2.5">
<button <button
onClick={() => handleNotify(c)} onClick={() => handleNotify(c)}
disabled={sending || sent} disabled={sending || sent}
className={`w-full flex items-center justify-center gap-1 text-[11px] font-bold py-2 rounded-lg transition-all cursor-pointer ${ className={`w-full flex items-center justify-center gap-1.5 text-[11px] font-bold py-2 rounded-lg transition-all cursor-pointer ${
sent sent
? 'bg-slate-50 text-slate-400' ? 'bg-slate-100 text-slate-400'
: 'bg-blue-600 hover:bg-blue-700 text-white active:scale-[0.98]' : 'bg-slate-800 hover:bg-slate-900 text-white active:scale-[0.98] shadow-sm'
}`} }`}
> >
{sent ? <><CheckCircle size={12} /> 已发送</> : <><Send size={12} /> 发送替换通知</>} {sent ? <><CheckCircle size={12} /> 已发送</> : <><Send size={12} /> 发送替换通知</>}