feat(scheduling): add SuggestionList component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/modules/scheduling/SuggestionList.tsx

@@ -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>
+  );
+}