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>

src/modules/scheduling/SuggestionDetail.tsx

@@ -1,11 +1,6 @@
 import { useState } from 'react';
 import {
-  X,
-  Truck,
-  MapPin,
-  AlertTriangle,
-  CheckCircle,
-  Send,
+  X, MapPin, AlertTriangle, CheckCircle, Send, ArrowRight,
 } from 'lucide-react';
 import { motion } from 'motion/react';
 import { sendNotify } from './api';
@@ -30,20 +25,6 @@ export default function SuggestionDetail({ suggestion: s, onClose, onNotifySucce
   const v = s.currentVehicle;
   const isRescue = s.type === 'rescue_hopeless';
 
-  const headerBg = isRescue ? 'bg-rose-600' : 'bg-amber-600';
-  const title = isRescue ? '智能调度干预 — 抢救低里程' : '智能调度干预 — 释放已达标';
-
-  const cardBg = isRescue
-    ? 'bg-rose-50 border border-rose-100'
-    : 'bg-amber-50 border border-amber-100';
-
-  const completionColor =
-    v.completionRate >= 1
-      ? 'text-emerald-600'
-      : v.completionRate >= 0.6
-        ? 'text-amber-600'
-        : 'text-rose-600';
-
   const handleNotify = async (candidate: CandidateVehicle) => {
     if (sending || sentPlates.has(candidate.plateNumber)) return;
     setSending(true);
@@ -59,7 +40,7 @@ export default function SuggestionDetail({ suggestion: s, onClose, onNotifySucce
       } else {
         alert(result.message || '发送失败');
       }
-    } catch (e) {
+    } catch {
       alert('网络错误，请重试');
     } finally {
       setSending(false);
@@ -67,169 +48,126 @@ export default function SuggestionDetail({ suggestion: s, onClose, onNotifySucce
   };
 
   return (
-    <div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[60] flex items-center justify-center p-4">
+    <div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[60] flex items-end sm:items-center justify-center">
       <motion.div
-        initial={{ scale: 0.9, opacity: 0, y: 20 }}
-        animate={{ scale: 1, opacity: 1, y: 0 }}
-        exit={{ scale: 0.9, opacity: 0, y: 20 }}
-        className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden flex flex-col max-h-[90vh]"
+        initial={{ y: 40, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        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 */}
-        <div className={`${headerBg} px-5 py-3 flex items-center justify-between flex-shrink-0`}>
-          <span className="text-white font-semibold text-sm">{title}</span>
-          <button
-            onClick={onClose}
-            className="text-white/80 hover:text-white transition-colors"
-          >
+        <div className={`${isRescue ? 'bg-rose-600' : 'bg-amber-500'} px-4 py-3 flex items-center justify-between flex-shrink-0`}>
+          <span className="text-white font-bold text-sm">
+            {isRescue ? '抢救低里程车辆' : '释放已达标车辆'}
+          </span>
+          <button onClick={onClose} className="text-white/70 hover:text-white transition-colors p-1">
             <X size={18} />
           </button>
         </div>
 
-        {/* Scrollable body */}
-        <div className="overflow-y-auto flex-1 p-4 space-y-3">
-          {/* Current Vehicle Card */}
-          <div className={`${cardBg} rounded-xl p-4`}>
-            <div className="flex items-center justify-between mb-3">
+        {/* Body */}
+        <div className="overflow-y-auto flex-1 no-scrollbar">
+
+          {/* Current Vehicle — compact header */}
+          <div className={`px-4 py-3 ${isRescue ? 'bg-rose-50' : 'bg-amber-50'}`}>
+            <div className="flex items-center justify-between mb-2">
               <div className="flex items-center gap-2">
-                <span className="font-bold text-base tracking-wide">
-                  <Blur>{v.plateNumber}</Blur>
-                </span>
-                <span className="text-xs text-gray-500 bg-white/70 px-2 py-0.5 rounded-full border border-gray-200">
-                  {v.vehicleType}
-                </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>
               </div>
               <div className="text-right">
-                <span className={`text-lg font-bold ${completionColor}`}>
+                <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 className="text-xs text-gray-400">完成率</div>
               </div>
             </div>
 
-            <div className="text-xs text-gray-500 mb-2">{v.targetName}</div>
-
-            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs mb-3">
-              <div className="bg-white/60 rounded-lg p-2">
-                <div className="text-gray-400 mb-0.5">累计里程</div>
-                <div className="font-semibold text-gray-700">{fmtKm(v.totalMileage)} km</div>
-              </div>
-              <div className="bg-white/60 rounded-lg p-2">
-                <div className="text-gray-400 mb-0.5">本年考核</div>
-                <div className="font-semibold text-gray-700">{fmtKm(v.yearTarget)} km</div>
-              </div>
-              <div className="bg-white/60 rounded-lg p-2">
-                <div className="text-gray-400 mb-0.5 flex items-center gap-0.5">
-                  <MapPin size={10} />区域
-                </div>
-                <div className="font-semibold text-gray-700 truncate">{v.region}</div>
-              </div>
-              <div className="bg-white/60 rounded-lg p-2">
-                <div className="text-gray-400 mb-0.5">客户日均</div>
-                <div className="font-semibold text-gray-700">{fmtKm(v.customerAvgDaily)} km</div>
-              </div>
+            {/* Key metrics in a single compact row */}
+            <div className="flex items-center gap-3 text-[10px] text-slate-500 flex-wrap">
+              <span>{v.targetName}</span>
+              <span className="text-slate-300">|</span>
+              <span>累计 <span className="text-slate-700 font-bold">{fmtKm(v.totalMileage)}</span> km</span>
+              <span>考核 <span className="text-slate-700 font-bold">{fmtKm(v.yearTarget)}</span> km</span>
+              <span><MapPin size={9} className="inline -mt-px" /> {v.region}</span>
+            </div>
+            <div className="flex items-center gap-3 text-[10px] text-slate-500 mt-1">
+              <span>客户 <span className="text-slate-700 font-medium"><Blur>{v.customer || '-'}</Blur></span></span>
+              <span>日均 <span className="text-slate-700 font-bold">{Math.round(v.customerAvgDaily)}</span> km</span>
             </div>
-
-            {v.customer && (
-              <div className="text-xs text-gray-500">
-                客户：<span className="font-medium text-gray-700"><Blur>{v.customer}</Blur></span>
-              </div>
-            )}
           </div>
 
-          {/* Reason Card */}
-          <div className="bg-blue-50 border border-blue-100 rounded-xl p-3 text-sm">
-            <span className="font-semibold text-blue-700 mr-2">建议原因</span>
-            <span className="text-blue-600">{s.reason}</span>
+          {/* Reason — one line */}
+          <div className="px-4 py-2 bg-blue-50 border-y border-blue-100 text-[11px] text-blue-700 leading-relaxed">
+            {s.reason}
           </div>
 
-          {/* Candidates Section */}
-          <div>
-            <div className="flex items-center gap-2 mb-1">
-              <Truck size={15} className="text-gray-500" />
-              <span className="font-semibold text-gray-800 text-sm">推荐替换车辆</span>
+          {/* Candidates */}
+          <div className="px-4 py-3">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-xs font-bold text-slate-700">推荐替换车辆</span>
+              <span className="text-[10px] text-slate-400">{s.candidates.length} 辆可选</span>
             </div>
-            <div className="text-xs text-gray-400 mb-2">基于车型、区域及里程匹配</div>
 
-            <div className="space-y-3">
+            <div className="space-y-2">
               {s.candidates.map(c => {
-                const alreadySent = sentPlates.has(c.plateNumber);
-                const predColor =
-                  c.canQualifyAfterSwap ? 'text-emerald-600' : 'text-amber-600';
-
+                const sent = sentPlates.has(c.plateNumber);
                 return (
-                  <div
-                    key={c.plateNumber}
-                    className="border border-gray-200 rounded-xl p-3 bg-white"
-                  >
-                    <div className="flex items-center justify-between mb-2">
+                  <div key={c.plateNumber} className="border border-slate-150 rounded-xl overflow-hidden">
+                    {/* Candidate header row */}
+                    <div className="flex items-center justify-between px-3 py-2 bg-slate-50/50">
                       <div className="flex items-center gap-2">
-                        <span className="font-bold text-sm tracking-wide">
-                          <Blur>{c.plateNumber}</Blur>
-                        </span>
-                        <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
-                          {c.vehicleType}
-                        </span>
-                        {c.targetName ? (
-                          <span className="text-xs text-gray-400">{c.targetName}</span>
-                        ) : (
-                          <span className="text-xs text-gray-400">库存</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-300">{c.targetName || '库存'}</span>
                       </div>
                       {c.canQualifyAfterSwap ? (
-                        <span className="flex items-center gap-1 text-xs font-medium text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 py-0.5 rounded-full">
-                          <CheckCircle size={11} />换后可达标
+                        <span className="text-[9px] font-bold text-emerald-600 flex items-center gap-0.5">
+                          <CheckCircle size={10} /> 换后可达标
                         </span>
                       ) : (
-                        <span className="flex items-center gap-1 text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 px-2 py-0.5 rounded-full">
-                          <AlertTriangle size={11} />需关注
+                        <span className="text-[9px] font-bold text-amber-500 flex items-center gap-0.5">
+                          <AlertTriangle size={10} /> 需关注
                         </span>
                       )}
                     </div>
 
-                    <div className="grid grid-cols-3 sm:grid-cols-5 gap-2 text-xs mb-3">
-                      <div className="bg-gray-50 rounded-lg p-2">
-                        <div className="text-gray-400 mb-0.5">当前里程</div>
-                        <div className="font-semibold text-gray-700">{fmtKm(c.totalMileage)} km</div>
+                    {/* Metrics row — compact inline */}
+                    <div className="px-3 py-2 flex items-center gap-0 text-[10px] flex-wrap">
+                      <div className="flex-1 min-w-[60px]">
+                        <div className="text-slate-400">当前</div>
+                        <div className="font-bold text-slate-700">{fmtKm(c.totalMileage)}</div>
                       </div>
-                      <div className="bg-blue-50 rounded-lg p-2">
-                        <div className="text-blue-400 mb-0.5">本年考核</div>
-                        <div className="font-semibold text-blue-700">{c.yearTarget ? fmtKm(c.yearTarget) + ' km' : '-'}</div>
+                      <div className="flex-1 min-w-[60px]">
+                        <div className="text-blue-400">考核</div>
+                        <div className="font-bold text-blue-700">{c.yearTarget ? fmtKm(c.yearTarget) : '-'}</div>
                       </div>
-                      <div className="bg-rose-50 rounded-lg p-2">
-                        <div className="text-rose-400 mb-0.5">里程缺口</div>
-                        <div className="font-semibold text-rose-600">{fmtKm(c.mileageGap)} km</div>
+                      <div className="flex-1 min-w-[60px]">
+                        <div className="text-rose-400">缺口</div>
+                        <div className="font-bold text-rose-600">{fmtKm(c.mileageGap)}</div>
                       </div>
-                      <div className="bg-gray-50 rounded-lg p-2">
-                        <div className="text-gray-400 mb-0.5 flex items-center gap-0.5">
-                          <MapPin size={10} />区域
-                        </div>
-                        <div className="font-semibold text-gray-700 truncate">{c.region}</div>
+                      <div className="flex-1 min-w-[40px]">
+                        <div className="text-slate-400">区域</div>
+                        <div className="font-bold text-slate-700">{c.region}</div>
                       </div>
-                      <div className="bg-gray-50 rounded-lg p-2">
-                        <div className="text-gray-400 mb-0.5">换后预测</div>
-                        <div className={`font-semibold ${predColor}`}>{fmtKm(c.predictedAfterSwap)} km</div>
+                      <div className="flex-1 min-w-[60px]">
+                        <div className="text-slate-400">换后</div>
+                        <div className={`font-bold ${c.canQualifyAfterSwap ? 'text-emerald-600' : 'text-amber-600'}`}>{fmtKm(c.predictedAfterSwap)}</div>
                       </div>
                     </div>
 
-                    <button
-                      onClick={() => handleNotify(c)}
-                      disabled={sending || alreadySent}
-                      className={`w-full flex items-center justify-center gap-1.5 text-xs font-medium py-2 rounded-lg transition-colors ${
-                        alreadySent
-                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                          : 'bg-indigo-600 hover:bg-indigo-700 text-white disabled:opacity-50 disabled:cursor-not-allowed'
-                      }`}
-                    >
-                      {alreadySent ? (
-                        <>
-                          <CheckCircle size={13} />已发送
-                        </>
-                      ) : (
-                        <>
-                          <Send size={13} />发送替换通知
-                        </>
-                      )}
-                    </button>
+                    {/* Action */}
+                    <div className="px-3 pb-2">
+                      <button
+                        onClick={() => handleNotify(c)}
+                        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 ${
+                          sent
+                            ? 'bg-slate-50 text-slate-400'
+                            : 'bg-blue-600 hover:bg-blue-700 text-white active:scale-[0.98]'
+                        }`}
+                      >
+                        {sent ? <><CheckCircle size={12} /> 已发送</> : <><Send size={12} /> 发送替换通知</>}
+                      </button>
+                    </div>
                   </div>
                 );
               })}
@@ -238,10 +176,10 @@ export default function SuggestionDetail({ suggestion: s, onClose, onNotifySucce
         </div>
 
         {/* Footer */}
-        <div className="border-t border-gray-100 px-4 py-3 flex justify-end flex-shrink-0">
+        <div className="border-t border-slate-100 px-4 py-2.5 flex-shrink-0">
           <button
             onClick={onClose}
-            className="px-5 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+            className="w-full py-2 text-xs font-bold text-slate-500 bg-slate-50 hover:bg-slate-100 rounded-lg transition-colors cursor-pointer"
           >
             关闭
           </button>