From 9a2ef217eb191fc6d69cb38c8d6562872cf458ad Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Thu, 23 Apr 2026 23:03:26 +0800
Subject: [PATCH] feat: implement dashboard opportunity table and supporting UI
components for weather market analysis
---
.../components/dashboard/Dashboard.module.css | 85 ++++++++++++++++---
.../components/dashboard/OpportunityTable.tsx | 16 +++-
.../dashboard/PolyWeatherDashboard.tsx | 51 +++++++----
frontend/lib/i18n.ts | 84 +++++++++++++++---
4 files changed, 189 insertions(+), 47 deletions(-)
diff --git a/frontend/components/dashboard/Dashboard.module.css b/frontend/components/dashboard/Dashboard.module.css
index 0f35785c..31c45938 100644
--- a/frontend/components/dashboard/Dashboard.module.css
+++ b/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) {
diff --git a/frontend/components/dashboard/OpportunityTable.tsx b/frontend/components/dashboard/OpportunityTable.tsx
index 54f0ceeb..5bdafc02 100644
--- a/frontend/components/dashboard/OpportunityTable.tsx
+++ b/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 (
@@ -175,7 +185,7 @@ function ScoreRing({ score }: { score: number }) {
/>
- {score}
+ {displayScore.toFixed(0)}
);
diff --git a/frontend/components/dashboard/PolyWeatherDashboard.tsx b/frontend/components/dashboard/PolyWeatherDashboard.tsx
index 251aedfb..e950404b 100644
--- a/frontend/components/dashboard/PolyWeatherDashboard.tsx
+++ b/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() {
@@ -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) : "--";
+ })()}
/100
@@ -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 (
);
})}
@@ -3258,9 +3272,10 @@ function DashboardScreen() {
) : (
-