feat: implement dashboard opportunity table and supporting UI components for weather market analysis

frontend/components/dashboard/Dashboard.module.css

@@ -5089,6 +5089,28 @@
   transition: all 0.2s;
   margin-left: 8px;
 }
+
+.root :global(.scan-select) {
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #00e0a4, #00b383);
+  color: #000;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 4px 12px rgba(0, 224, 164, 0.2);
+}
+
+.root :global(.scan-cta-button:hover:not(:disabled)) {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(0, 224, 164, 0.4);
+  filter: brightness(1.1);
+}
+
+.root :global(.scan-cta-button:active:not(:disabled)) {
+  transform: translateY(1px);
+}
+
 .root :global(.history-btn:hover) {
   background: rgba(34, 211, 238, 0.2);
   border-color: var(--accent-cyan);
@@ -8231,6 +8253,7 @@
   color: var(--text-primary);
   outline: none;
   cursor: pointer;
+  width: 100%;
 }
 
 .root :global(.scan-select:focus) {
@@ -8310,18 +8333,44 @@
 }
 
 .root :global(.scan-kpi-card) {
-  background: var(--bg-card);
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  padding: 14px 16px;
+  background: rgba(13, 17, 23, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 16px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  transition: border-color 0.2s;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .root :global(.scan-kpi-card:hover) {
-  border-color: var(--border-glass);
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(0, 224, 164, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.5);
+}
+
+.root :global(.scan-kpi-card::after) {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(0, 224, 164, 0.5),
+    transparent
+  );
+  transform: translateX(-100%);
+  transition: transform 0.5s;
+}
+
+.root :global(.scan-kpi-card:hover::after) {
+  transform: translateX(100%);
 }
 
 .root :global(.scan-kpi-green) {
@@ -8403,7 +8452,9 @@
   right: 0;
   height: 2px;
   background: #00e0a4;
-  border-radius: 2px 2px 0 0;
+  border-radius: 4px;
+  opacity: 0.8;
+  transition: all 0.3s ease;
 }
 
 /* ── Opportunity Table ── */
@@ -8435,19 +8486,25 @@
   display: grid;
   grid-template-columns: 48px 200px 160px 1fr 150px 90px 64px 40px;
   align-items: center;
-  padding: 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  background: rgba(13, 17, 23, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
   cursor: pointer;
-  transition: background 0.15s;
+  transition: all 0.15s ease;
+  user-select: none;
+  padding: 12px;
 }
 
 .root :global(.scan-table-row:hover) {
-  background: rgba(255, 255, 255, 0.02);
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.15);
+  transform: scale(1.002);
 }
 
 .root :global(.scan-table-row.selected) {
-  background: rgba(0, 224, 164, 0.04);
-  border-left: 2px solid #00e0a4;
+  background: rgba(0, 224, 164, 0.08);
+  border-color: rgba(0, 224, 164, 0.3);
+  box-shadow: inset 0 0 12px rgba(0, 224, 164, 0.05);
 }
 
 .root :global(.scan-table-row.tradable) {

frontend/components/dashboard/OpportunityTable.tsx

@@ -145,11 +145,21 @@ function MiniProbabilityChart({
   );
 }
 
+function getDisplayScore(rawScore: number): number {
+  if (rawScore <= 0) return Math.max(0, 70 + rawScore / 1000);
+  if (rawScore > 1000) {
+    return Math.min(100, 80 + (rawScore - 1000) / 30);
+  }
+  return Math.min(80, Math.max(0, (rawScore / 1000) * 80));
+}
+
 function ScoreRing({ score }: { score: number }) {
+  const displayScore = getDisplayScore(score);
   const radius = 20;
   const circumference = 2 * Math.PI * radius;
-  const progress = (score / 100) * circumference;
-  const color = score >= 80 ? "#00E0A4" : score >= 60 ? "#FFB020" : "#FF4D6A";
+  const progress = (displayScore / 100) * circumference;
+  const color =
+    displayScore >= 85 ? "#00E0A4" : displayScore >= 70 ? "#FFB020" : "#FF4D6A";
 
   return (
     <div className="scan-score-ring">
@@ -175,7 +185,7 @@ function ScoreRing({ score }: { score: number }) {
         />
       </svg>
       <span className="scan-score-value" style={{ color }}>
-        {score}
+        {displayScore.toFixed(0)}
       </span>
     </div>
   );

frontend/components/dashboard/PolyWeatherDashboard.tsx

@@ -11,6 +11,7 @@ import {
   type FormEvent,
   type PointerEvent as ReactPointerEvent,
 } from "react";
+import { Search } from "lucide-react";
 import styles from "./Dashboard.module.css";
 import detailChromeStyles from "./DetailPanelChrome.module.css";
 import modalChromeStyles from "./ModalChrome.module.css";
@@ -218,8 +219,18 @@ function getBucketMatchKey(bucket?: {
 
 function normalizeProbabilityValue(value: number | null | undefined) {
   if (!Number.isFinite(Number(value))) return null;
-  const numeric = Number(value);
-  return Math.abs(numeric) <= 1 ? numeric : numeric / 100;
+  return Number(value);
+}
+
+function getDisplayScore(rawScore: number): number {
+  if (rawScore <= 0) return Math.max(0, 70 + rawScore / 1000); // Penalty cases
+  // Scale the positive scores to 80-100
+  // rawScore for tradable is roughly 1000 + edge*10 + risk*100 + hitRate*100
+  // typical high score is 1000 + 50 + 400 + 90 = 1540
+  if (rawScore > 1000) {
+    return Math.min(100, 80 + (rawScore - 1000) / 30);
+  }
+  return Math.min(80, Math.max(0, (rawScore / 1000) * 80));
 }
 
 function buildMarketAlignedProbabilities(
@@ -2979,7 +2990,7 @@ function DashboardScreen() {
                   );
                   return acc + (edge ?? 0);
                 }, 0);
-                return (sum / tradable.length) * 100;
+                return sum / tradable.length;
               })(),
               totalWinRate: (() => {
                 const tradable = homepageSnapshots.filter(
@@ -3011,13 +3022,13 @@ function DashboardScreen() {
 
           <div className="scan-view-tabs">
             <button className="scan-view-tab active">
-              {t("dashboard.opportunityList") || "机会列表"}
+              {t("dashboard.opportunityList")}
             </button>
             <button className="scan-view-tab">
-              {t("dashboard.distributionView") || "分布视图"}
+              {t("dashboard.distributionView")}
             </button>
             <button className="scan-view-tab">
-              {t("dashboard.calendarView") || "日历视图"}
+              {t("dashboard.calendarView")}
             </button>
           </div>
 
@@ -3220,18 +3231,21 @@ function DashboardScreen() {
                       const snap = homepageSnapshots.find(
                         (s) => s.city.name === store.selectedCity,
                       );
-                      const score = snap?.score ?? 0;
-                      return score >= 80
+                      const displayScore = getDisplayScore(snap?.score ?? 0);
+                      return displayScore >= 85
                         ? "#00E0A4"
-                        : score >= 60
+                        : displayScore >= 70
                           ? "#FFB020"
                           : "#FF4D6A";
                     })(),
                   }}
                 >
-                  {homepageSnapshots.find(
-                    (s) => s.city.name === store.selectedCity,
-                  )?.score ?? "--"}
+                  {(() => {
+                    const snap = homepageSnapshots.find(
+                      (s) => s.city.name === store.selectedCity,
+                    );
+                    return snap ? getDisplayScore(snap.score).toFixed(1) : "--";
+                  })()}
                 </span>
                 <span className="scan-detail-score-suffix"> /100</span>
               </div>
@@ -3244,12 +3258,12 @@ function DashboardScreen() {
                     const snap = homepageSnapshots.find(
                       (s) => s.city.name === store.selectedCity,
                     );
-                    const score = snap?.score ?? 0;
-                    const filled = score >= i * 20;
+                    const displayScore = getDisplayScore(snap?.score ?? 0);
+                    const filled = displayScore >= i * 20;
                     return (
                       <span
                         key={i}
-                        className={`scan-confidence-dot ${filled ? "filled" : ""} ${score < 60 ? "red" : score < 80 ? "amber" : ""}`}
+                        className={`scan-confidence-dot ${filled ? "filled" : ""} ${displayScore < 70 ? "red" : displayScore < 85 ? "amber" : ""}`}
                       />
                     );
                   })}
@@ -3258,9 +3272,10 @@ function DashboardScreen() {
             </div>
           </aside>
         ) : (
-          <aside className="scan-detail-panel">
-            <div className="scan-detail-empty">
-              {t("detail.selectCity") || "← 点击左侧行查看详情"}
+          <aside className="scan-detail-panel scan-detail-empty">
+            <div className="scan-empty-state">
+              <Search size={48} />
+              <p>{t("detail.selectCity") || "← 点击左侧行查看详情"}</p>
             </div>
           </aside>
         )}

frontend/lib/i18n.ts

@@ -6,12 +6,12 @@ const DEFAULT_LOCALE: Locale = "zh-CN";
 export const LOCALE_STORAGE_KEY = "polyweather.locale";
 
 const MESSAGES: Record<Locale, Record<string, string>> = {
-    "zh-CN": {
-      "header.subtitle": "天气衍生品智能分析",
-      "header.home": "主页",
-      "header.homeAria": "返回主地图主页",
-      "header.docs": "文档",
-      "header.docsAria": "打开产品文档中心",
+  "zh-CN": {
+    "header.subtitle": "天气衍生品智能分析",
+    "header.home": "主页",
+    "header.homeAria": "返回主地图主页",
+    "header.docs": "文档",
+    "header.docsAria": "打开产品文档中心",
     "header.info": "技术说明",
     "header.infoAria": "查看系统技术说明",
     "header.account": "账户",
@@ -34,6 +34,12 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
     "sidebar.group.other": "样本不足",
 
     "dashboard.loading": "正在同步站点观测与结算站点信息，请稍候...",
+    "dashboard.opportunityTitle": "可交易机会",
+    "dashboard.opportunitySubtitle":
+      "基于当前时间、实况数据和模型预测，筛选出最具交易价值的市场",
+    "dashboard.opportunityList": "机会列表",
+    "dashboard.distributionView": "分布视图",
+    "dashboard.calendarView": "日历视图",
 
     "detail.closeAria": "关闭城市详情面板",
     "detail.waitSelect": "等待选择城市",
@@ -48,6 +54,14 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
     "detail.profile": "城市档案",
     "detail.todayMiniTrend": "今日日内走势（简版）",
     "detail.chartLegendEmpty": "暂无小时级实测或预测曲线。",
+    "detail.currentTemp": "当前温度",
+    "detail.todayHigh": "今日最高",
+    "detail.targetTemp": "目标温度",
+    "detail.gap": "距目标差距",
+    "detail.peakWindow": "预计峰值",
+    "detail.compositeScore": "综合得分",
+    "detail.selectCity": "← 点击左侧行查看详情",
+    "detail.localTime": "当前时间",
 
     "forecast.title": "多日预报",
     "forecast.empty": "暂无多日预报",
@@ -122,6 +136,22 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
     "section.airport": "机场",
     "section.distance": "距离",
     "section.note": "注意",
+    "section.currentConditions": "当前概况",
+    "section.tradeRecommendation": "推荐交易",
+
+    "filter.mode": "扫描模式",
+    "filter.tradable": "可交易机会",
+    "filter.early": "早期机会",
+    "filter.touch": "触达博弈",
+    "filter.trend": "趋势确认",
+    "filter.conditions": "匹配条件",
+    "filter.priceRange": "价格区间",
+    "filter.edgeRange": "最小边际优势",
+    "filter.onlyTradable": "只允许可交易",
+    "filter.liquidity": "流动性级别",
+    "filter.liquidityHigh": "最高流动性",
+    "filter.timeRange": "时间周期",
+    "filter.scanCta": "开始扫描",
 
     "account.title": "账户中心",
     "account.subtitle": "查看身份、权限与 Bot 绑定信息",
@@ -171,12 +201,12 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
 
     "common.na": "--",
   },
-    "en-US": {
-      "header.subtitle": "Weather Derivatives Intelligence",
-      "header.home": "Home",
-      "header.homeAria": "Return to the main map homepage",
-      "header.docs": "Docs",
-      "header.docsAria": "Open product documentation",
+  "en-US": {
+    "header.subtitle": "Weather Derivatives Intelligence",
+    "header.home": "Home",
+    "header.homeAria": "Return to the main map homepage",
+    "header.docs": "Docs",
+    "header.docsAria": "Open product documentation",
     "header.info": "Tech Notes",
     "header.infoAria": "Open system technical notes",
     "header.account": "Account",
@@ -200,6 +230,12 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
 
     "dashboard.loading":
       "Synchronizing station observations and settlement station data...",
+    "dashboard.opportunityTitle": "Tradable Opportunities",
+    "dashboard.opportunitySubtitle":
+      "Identify high-value markets based on real-time data, model predictions, and current time window.",
+    "dashboard.opportunityList": "Opportunity List",
+    "dashboard.distributionView": "Distribution",
+    "dashboard.calendarView": "Calendar",
 
     "detail.closeAria": "Close city detail panel",
     "detail.waitSelect": "Waiting for city selection",
@@ -215,6 +251,14 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
     "detail.todayMiniTrend": "Today's Intraday Trend (Compact)",
     "detail.chartLegendEmpty":
       "No hourly observations or forecast curve available.",
+    "detail.currentTemp": "Current Temp",
+    "detail.todayHigh": "Today's High",
+    "detail.targetTemp": "Target Temp",
+    "detail.gap": "Gap to Target",
+    "detail.peakWindow": "Peak Window",
+    "detail.compositeScore": "Composite Score",
+    "detail.selectCity": "← Select a city from the list",
+    "detail.localTime": "Local Time",
 
     "forecast.title": "Multi-day Forecast",
     "forecast.empty": "No multi-day forecast available",
@@ -292,6 +336,22 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
     "section.airport": "Airport",
     "section.distance": "Distance",
     "section.note": "Note",
+    "section.currentConditions": "Current Conditions",
+    "section.tradeRecommendation": "Recommendation",
+
+    "filter.mode": "Scan Mode",
+    "filter.tradable": "Tradable",
+    "filter.early": "Early Stage",
+    "filter.touch": "Touch Play",
+    "filter.trend": "Trend Confirm",
+    "filter.conditions": "Conditions",
+    "filter.priceRange": "Price Range",
+    "filter.edgeRange": "Min Edge",
+    "filter.onlyTradable": "Only Tradable",
+    "filter.liquidity": "Liquidity",
+    "filter.liquidityHigh": "High Liquidity",
+    "filter.timeRange": "Time Period",
+    "filter.scanCta": "Start Scan",
 
     "account.title": "Account Center",
     "account.subtitle": "Review identity, access status, and bot binding info",