feat: polish BI dashboards and bump version

src/modules/mileage/StatisticsView.tsx

@@ -79,6 +79,14 @@ export default function StatisticsView() {
   const selectedTarget = targets.find(t => t.id === selectedTargetId);
   const selectedAssessment = selectedTarget ? getTargetAssessment(selectedTarget, assessmentYearMap[selectedTarget.id]) : null;
   const selectedCompletion = selectedAssessment?.completionRate ?? selectedTarget?.avgCompletion ?? 0;
+  const selectedRemaining = selectedAssessment?.remaining ?? 0;
+  const selectedDaysLeft = selectedAssessment?.daysLeft ?? selectedTarget?.daysLeft ?? 0;
+  const selectedDailyTarget = selectedAssessment?.dailyTarget ?? (selectedDaysLeft > 0 ? selectedRemaining / selectedDaysLeft : 0);
+  const selectedQualifiedRate = selectedAssessment?.qualifiedRate ?? (selectedTarget?.vehicleCount ? selectedTarget.yearQualifiedCount / selectedTarget.vehicleCount * 100 : 0);
+  const latestTrend = trendData[trendData.length - 1];
+  const previousTrend = trendData[trendData.length - 2];
+  const trendDelta = latestTrend && previousTrend ? latestTrend.mileage - previousTrend.mileage : 0;
+  const pressureLevel = selectedCompletion >= 90 ? '健康' : selectedCompletion >= 70 ? '关注' : '高压';
 
   // Load targets on mount
   useEffect(() => {
@@ -102,6 +110,12 @@ export default function StatisticsView() {
   // Load trend when selectedTargetId changes
   useEffect(() => {
     if (selectedTargetId === null) return;
+    setExpandedTargetId(selectedTargetId);
+    if (!targetVehiclesMap[selectedTargetId]) {
+      fetchTargetVehicles(selectedTargetId).then(vehicles => {
+        setTargetVehiclesMap(prev => ({ ...prev, [selectedTargetId]: vehicles }));
+      }).catch(() => {});
+    }
     fetchTrend(selectedTargetId).then(setTrendData).catch(() => setTrendData([]));
   }, [selectedTargetId]);
 
@@ -121,7 +135,10 @@ export default function StatisticsView() {
         {targets.map(target => (
           <button
             key={target.id}
-            onClick={() => setSelectedTargetId(target.id)}
+            onClick={() => {
+              setSelectedTargetId(target.id);
+              setExpandedTargetId(target.id);
+            }}
             className={`px-4 py-2 rounded-xl text-xs font-bold transition-all whitespace-nowrap ${
               selectedTargetId === target.id
                 ? 'bg-blue-600 text-white shadow-md shadow-blue-200'
@@ -133,6 +150,45 @@ export default function StatisticsView() {
         ))}
       </div>
 
+      {selectedTarget && (
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="grid grid-cols-2 gap-2 md:grid-cols-4"
+        >
+          <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
+            <div className="text-[10px] font-black uppercase tracking-wide text-slate-400">考核压力</div>
+            <div className={`mt-1 text-lg font-black ${pressureLevel === '健康' ? 'text-emerald-600' : pressureLevel === '关注' ? 'text-amber-600' : 'text-rose-600'}`}>
+              {pressureLevel}
+            </div>
+            <div className="mt-1 text-[10px] font-bold text-slate-400">完成率 {fmtPercent(selectedCompletion)}</div>
+          </div>
+          <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
+            <div className="text-[10px] font-black uppercase tracking-wide text-slate-400">剩余缺口</div>
+            <div className="mt-1 text-lg font-black text-slate-900">{fmtKm(Math.max(0, selectedRemaining))}<span className="ml-1 text-[10px] text-slate-400">km</span></div>
+            <div className="mt-1 text-[10px] font-bold text-slate-400">剩余 {selectedDaysLeft} 天</div>
+          </div>
+          <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
+            <div className="text-[10px] font-black uppercase tracking-wide text-slate-400">日均需完成</div>
+            <div className="mt-1 text-lg font-black text-blue-600">
+              {selectedDaysLeft > 0 ? (
+                <>
+                  {fmtKm(selectedDailyTarget)}<span className="ml-1 text-[10px] text-slate-400">km</span>
+                </>
+              ) : '已到期'}
+            </div>
+            <div className="mt-1 text-[10px] font-bold text-slate-400">按当前考核口径</div>
+          </div>
+          <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
+            <div className="text-[10px] font-black uppercase tracking-wide text-slate-400">最新日变化</div>
+            <div className={`mt-1 text-lg font-black ${trendDelta >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
+              {trendDelta >= 0 ? '+' : ''}{fmtKm(trendDelta)}
+            </div>
+            <div className="mt-1 text-[10px] font-bold text-slate-400">达标率 {fmtPercent(selectedQualifiedRate)}</div>
+          </div>
+        </motion.div>
+      )}
+
       <div className="flex flex-col landscape:flex-row gap-4 flex-1 landscape:overflow-hidden">
         {/* Left Side: Trend Chart / Dashboard Sidebar */}
         <div className="flex-none landscape:flex-1 landscape:w-2/3 space-y-4 flex flex-col overflow-y-auto no-scrollbar min-w-0">
@@ -193,9 +249,8 @@ export default function StatisticsView() {
                 ))}
               </div>
             </div>
-            <div className="flex-1 w-full min-h-[250px] relative">
-              <div className="absolute inset-0">
-                <ResponsiveContainer width="100%" height="100%">
+            <div className="h-[280px] w-full min-w-0">
+                <ResponsiveContainer width="100%" height={280} minWidth={0}>
                 {chartType === 'bar' ? (
                   <BarChart data={trendData} margin={{ top: 20, right: 10, left: 0, bottom: 0 }}>
                     <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" strokeOpacity={0.6} />
@@ -237,7 +292,6 @@ export default function StatisticsView() {
                   </AreaChart>
                 )}
                 </ResponsiveContainer>
-              </div>
             </div>
           </div>
         </div>
@@ -245,9 +299,12 @@ export default function StatisticsView() {
         {/* Right Side: Summary Section */}
         <div className="w-full landscape:w-1/3 flex-shrink-0 space-y-2 flex flex-col landscape:overflow-hidden">
           <div className="flex items-center justify-between px-2 flex-shrink-0">
-            <div className="flex items-center gap-2">
+            <div className="flex min-w-0 items-center gap-2">
               <div className="w-1 h-4 bg-blue-600 rounded-full" />
-              <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest">车型考核里程汇总</h3>
+              <div className="min-w-0">
+                <h3 className="truncate text-xs font-black text-slate-700">当前车型考核详情</h3>
+                <p className="mt-0.5 truncate text-[9px] font-bold text-slate-400">{selectedTarget?.targetName || '请选择车型'}</p>
+              </div>
             </div>
             <button
               onClick={() => setIsTableFullscreen(true)}
@@ -258,7 +315,7 @@ export default function StatisticsView() {
           </div>
 
           <div className="grid grid-cols-1 gap-1.5 overflow-y-auto no-scrollbar pb-2">
-            {targets.map((target, idx) => (
+            {(selectedTarget ? [selectedTarget] : []).map((target, idx) => (
               (() => {
                 const assessment = getTargetAssessment(target, assessmentYearMap[target.id]);
                 const primaryCompletion = assessment?.completionRate ?? target.avgCompletion;
@@ -269,7 +326,7 @@ export default function StatisticsView() {
                 key={idx}
                 className="bg-white px-3 py-2 rounded-xl border border-slate-100 shadow-sm flex flex-col active:bg-slate-50 transition-all cursor-pointer"
                 onClick={() => {
-                  setExpandedTargetId(expandedTargetId === target.id ? null : target.id);
+                  setExpandedTargetId(target.id);
                   if (!targetVehiclesMap[target.id]) {
                     fetchTargetVehicles(target.id).then(data => {
                       setTargetVehiclesMap(prev => ({ ...prev, [target.id]: data }));
@@ -309,7 +366,7 @@ export default function StatisticsView() {
                       </div>
                     </div>
                     <motion.div
-                      animate={{ rotate: expandedTargetId === target.id ? 180 : 0 }}
+                      animate={{ rotate: 180 }}
                       className="text-slate-300"
                     >
                       <ChevronDown size={14} />