Redesign the scan terminal layout for EMOS

frontend/components/dashboard/ScanKPIBar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import { TrendingUp, BarChart3, Radio, DollarSign, Target } from "lucide-react";
 import { useI18n } from "@/hooks/useI18n";
 import type { ScanTerminalResponse } from "@/lib/dashboard-types";
 
@@ -17,68 +16,54 @@ export function ScanKPIBar({ data }: { data: KPIData }) {
   const { locale } = useI18n();
   const isEn = locale === "en-US";
 
-  const kpis = [
+  const cards = [
     {
-      icon: Target,
       label: isEn ? "Recommended" : "推荐机会",
       value: String(data.recommended_count),
-      delta: `${isEn ? "Showing" : "当前展示"} ${data.visible_count}`,
-      accent: "green" as const,
+      note: `${isEn ? "Visible" : "当前展示"} ${data.visible_count}`,
+      tone: "green",
     },
     {
-      icon: TrendingUp,
       label: isEn ? "Avg Edge" : "平均边际优势",
       value:
         data.avg_edge_percent != null
           ? `+${data.avg_edge_percent.toFixed(1)}%`
           : "--",
-      delta: `${isEn ? "Candidates" : "候选总数"} ${data.candidate_total}`,
-      accent: "green" as const,
+      note: `${isEn ? "Candidates" : "候选总数"} ${data.candidate_total}`,
+      tone: "purple",
     },
     {
-      icon: BarChart3,
       label: isEn ? "Avg Confidence" : "平均主信号置信度",
       value:
         data.avg_primary_confidence != null
-          ? `${data.avg_primary_confidence.toFixed(0)}`
+          ? `+${data.avg_primary_confidence.toFixed(1)}%`
           : "--",
-      delta: isEn ? "Main signal score" : "主信号评分",
-      accent: "green" as const,
+      note: isEn ? "Main signal score" : "主信号评分",
+      tone: "blue",
     },
     {
-      icon: Radio,
       label: isEn ? "Tradable Markets" : "可交易市场",
       value: String(data.tradable_market_count),
-      delta: data.resolved_market_type || "maxtemp",
-      accent: "purple" as const,
+      note: `${isEn ? "Filtered" : "过滤后"} / ${data.candidate_total || 0}`,
+      tone: "orange",
     },
     {
-      icon: DollarSign,
       label: isEn ? "Total Volume" : "总成交量",
       value: formatVolume(data.total_volume),
-      delta: isEn ? "Past 24h" : "过去 24 小时",
-      accent: "purple" as const,
+      note: isEn ? "Past 24 hours" : "过去 24 小时",
+      tone: "neutral",
     },
   ];
 
   return (
-    <div className="scan-kpi-bar">
-      {kpis.map((kpi) => {
-        const Icon = kpi.icon;
-        return (
-          <div
-            key={kpi.label}
-            className={`scan-kpi-card scan-kpi-${kpi.accent}`}
-          >
-            <div className="scan-kpi-header">
-              <Icon size={14} className="scan-kpi-icon" />
-              <span className="scan-kpi-label">{kpi.label}</span>
-            </div>
-            <div className="scan-kpi-value">{kpi.value}</div>
-            {kpi.delta && <div className="scan-kpi-delta">{kpi.delta}</div>}
-          </div>
-        );
-      })}
-    </div>
+    <section className="scan-kpi-bar">
+      {cards.map((card) => (
+        <article key={card.label} className={`scan-kpi-card ${card.tone}`}>
+          <div className="scan-kpi-label">{card.label}</div>
+          <div className="scan-kpi-value">{card.value}</div>
+          <div className="scan-kpi-note">{card.note}</div>
+        </article>
+      ))}
+    </section>
   );
 }