Refine scan terminal opportunity layout
This commit is contained in:
2569718930@qq.com
@@ -40,6 +40,7 @@ frontend/node_modules/
|
||||
frontend/.next/
|
||||
frontend/.vercel/
|
||||
frontend/*.tsbuildinfo
|
||||
frontend/.codex-next-dev*.log
|
||||
|
||||
.npm-cache/
|
||||
.codex-tmp/
|
||||
|
||||
@@ -8998,7 +8998,7 @@
|
||||
|
||||
.root :global(.scan-terminal) {
|
||||
display: grid;
|
||||
grid-template-columns: 248px minmax(0, 1fr) 324px;
|
||||
grid-template-columns: minmax(0, 1fr) 324px;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
@@ -9302,6 +9302,8 @@
|
||||
.root :global(.scan-topbar-actions) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
color: #b4c8e2;
|
||||
font-size: 14px;
|
||||
@@ -9364,6 +9366,31 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.root :global(.scan-primary-button) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 42px;
|
||||
padding: 11px 16px;
|
||||
border: 1px solid rgba(23, 217, 139, 0.38);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, #1ddb8d, #0eb96d);
|
||||
color: #031411;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 10px 24px rgba(14, 185, 109, 0.18);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.root :global(.scan-primary-button:hover:not(:disabled)) {
|
||||
filter: brightness(1.06);
|
||||
}
|
||||
|
||||
.root :global(.scan-primary-button:disabled) {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.root :global(.scan-cta-ghost) {
|
||||
color: #27ea98;
|
||||
border-color: rgba(23, 217, 139, 0.3);
|
||||
@@ -9618,7 +9645,7 @@
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
padding: 16px 18px;
|
||||
padding: 16px 18px 14px;
|
||||
border-bottom: 1px solid rgba(90, 123, 166, 0.1);
|
||||
background: rgba(13, 28, 48, 0.62);
|
||||
}
|
||||
@@ -9636,15 +9663,43 @@
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-city span) {
|
||||
overflow: hidden;
|
||||
.root :global(.scan-opportunity-models) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-models span) {
|
||||
display: inline-flex;
|
||||
gap: 5px;
|
||||
align-items: baseline;
|
||||
min-width: 0;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid rgba(122, 154, 196, 0.14);
|
||||
border-radius: 8px;
|
||||
background: rgba(4, 12, 22, 0.28);
|
||||
color: #9fb4cf;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-models em) {
|
||||
color: #6f88aa;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-models b) {
|
||||
overflow: hidden;
|
||||
color: #dceaff;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-phase) {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@@ -9665,42 +9720,74 @@
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-items) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px 12px 12px;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-item) {
|
||||
display: grid;
|
||||
grid-template-columns: 24px minmax(190px, 1.1fr) minmax(92px, 0.45fr) minmax(92px, 0.45fr) minmax(90px, 0.38fr);
|
||||
gap: 12px;
|
||||
grid-template-columns: 18px minmax(190px, 1fr) minmax(96px, 0.42fr) minmax(88px, 0.36fr) minmax(98px, 0.38fr);
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding: 10px 18px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(90, 123, 166, 0.08);
|
||||
background: transparent;
|
||||
min-height: 56px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(90, 123, 166, 0.1);
|
||||
border-radius: 12px;
|
||||
background: rgba(5, 14, 25, 0.42);
|
||||
color: #b8c9e1;
|
||||
text-align: left;
|
||||
transition:
|
||||
background 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
transform 0.18s ease;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-item:last-child) {
|
||||
border-bottom: 0;
|
||||
border-bottom: 1px solid rgba(90, 123, 166, 0.1);
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-item:hover) {
|
||||
background: rgba(30, 70, 110, 0.18);
|
||||
background: rgba(22, 48, 78, 0.5);
|
||||
border-color: rgba(109, 145, 190, 0.2);
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-item.selected) {
|
||||
background: rgba(10, 74, 65, 0.38);
|
||||
box-shadow: inset 3px 0 0 rgba(23, 217, 139, 0.78);
|
||||
background: linear-gradient(180deg, rgba(6, 50, 47, 0.72), rgba(7, 35, 39, 0.72));
|
||||
border-color: rgba(23, 217, 139, 0.42);
|
||||
box-shadow: inset 3px 0 0 rgba(23, 217, 139, 0.82);
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-branch) {
|
||||
color: rgba(159, 180, 207, 0.72);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-branch::before) {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
bottom: 50%;
|
||||
left: 8px;
|
||||
width: 1px;
|
||||
background: rgba(122, 154, 196, 0.28);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-branch i) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 8px;
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
background: rgba(122, 154, 196, 0.32);
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-trade) {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-action) {
|
||||
@@ -9719,27 +9806,47 @@
|
||||
color: #ff7474;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-item span:not(.scan-opportunity-branch)) {
|
||||
.root :global(.scan-opportunity-stat) {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 2px;
|
||||
justify-items: start;
|
||||
color: #d0ddf0;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-stat small) {
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
color: #718bac;
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-stat b) {
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
color: #dceaff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-weight: 900;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-item em) {
|
||||
.root :global(.scan-opportunity-stat.edge) {
|
||||
justify-self: end;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
justify-items: end;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-item em.positive) {
|
||||
.root :global(.scan-opportunity-stat b.positive) {
|
||||
color: #1de28f;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-item em.negative) {
|
||||
.root :global(.scan-opportunity-stat b.negative) {
|
||||
color: #ff6868;
|
||||
}
|
||||
|
||||
@@ -10588,7 +10695,6 @@
|
||||
.root :global(.scan-terminal.light .scan-hero p),
|
||||
.root :global(.scan-terminal.light .scan-topbar-title span),
|
||||
.root :global(.scan-terminal.light .scan-city-sub),
|
||||
.root :global(.scan-terminal.light .scan-opportunity-city span),
|
||||
.root :global(.scan-terminal.light .scan-opportunity-phase),
|
||||
.root :global(.scan-terminal.light .scan-opportunity-phase em),
|
||||
.root :global(.scan-terminal.light .panel-overline),
|
||||
@@ -10608,6 +10714,8 @@
|
||||
|
||||
.root :global(.scan-terminal.light .scan-list-tabs button),
|
||||
.root :global(.scan-terminal.light .scan-mode-tab-sub),
|
||||
.root :global(.scan-terminal.light .scan-opportunity-models em),
|
||||
.root :global(.scan-terminal.light .scan-opportunity-stat small),
|
||||
.root :global(.scan-terminal.light .panel-meta-chip),
|
||||
.root :global(.scan-terminal.light .panel-weather-chip),
|
||||
.root :global(.scan-terminal.light .scan-distribution-card),
|
||||
@@ -10692,8 +10800,10 @@
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-opportunity-item) {
|
||||
background: rgba(255, 255, 255, 0.62);
|
||||
color: #405977;
|
||||
border-bottom-color: rgba(35, 72, 118, 0.08);
|
||||
border-color: rgba(35, 72, 118, 0.1);
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-opportunity-item:hover) {
|
||||
@@ -10701,7 +10811,23 @@
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-opportunity-item.selected) {
|
||||
background: rgba(222, 250, 238, 0.82);
|
||||
background: linear-gradient(180deg, rgba(222, 250, 238, 0.9), rgba(241, 250, 247, 0.96));
|
||||
border-color: rgba(10, 160, 100, 0.34);
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-opportunity-models span) {
|
||||
border-color: rgba(35, 72, 118, 0.1);
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-opportunity-models b),
|
||||
.root :global(.scan-terminal.light .scan-opportunity-stat b) {
|
||||
color: #14253a;
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-opportunity-branch::before),
|
||||
.root :global(.scan-terminal.light .scan-opportunity-branch i) {
|
||||
background: rgba(56, 86, 126, 0.24);
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .panel-header),
|
||||
@@ -10731,6 +10857,12 @@
|
||||
color: #1f3654;
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-primary-button) {
|
||||
color: #032019;
|
||||
border-color: rgba(10, 160, 100, 0.34);
|
||||
background: linear-gradient(180deg, #25d990, #10b870);
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-cta-ghost),
|
||||
.root :global(.scan-terminal.light .scan-detail-analysis-button) {
|
||||
border-color: rgba(7, 160, 100, 0.24);
|
||||
@@ -10756,7 +10888,7 @@
|
||||
|
||||
@media (max-width: 1480px) {
|
||||
.root :global(.scan-terminal) {
|
||||
grid-template-columns: 240px minmax(0, 1fr);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal > .detail-panel.scan-city-detail-rail) {
|
||||
@@ -10813,8 +10945,9 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-item em) {
|
||||
.root :global(.scan-opportunity-stat.edge) {
|
||||
justify-self: start;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.root :global(.scan-trade-cards) {
|
||||
@@ -10845,7 +10978,7 @@
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.root :global(.scan-opportunity-city span) {
|
||||
.root :global(.scan-opportunity-models span) {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -305,10 +305,22 @@ export const OpportunityTable = React.memo(function OpportunityTable({
|
||||
<div className="scan-opportunity-group-head">
|
||||
<div className="scan-opportunity-city">
|
||||
<strong>{group.cityName}</strong>
|
||||
<span>
|
||||
DEB {group.debLabel} · EMOS peak {group.peakLabel}
|
||||
{group.peakProbability != null ? ` · ${formatPercent(group.peakProbability)}` : ""}
|
||||
</span>
|
||||
<div className="scan-opportunity-models">
|
||||
<span>
|
||||
<em>DEB</em>
|
||||
<b>{group.debLabel}</b>
|
||||
</span>
|
||||
<span>
|
||||
<em>EMOS peak</em>
|
||||
<b>{group.peakLabel}</b>
|
||||
</span>
|
||||
{group.peakProbability != null ? (
|
||||
<span>
|
||||
<em>{isEn ? "Peak prob" : "峰值概率"}</em>
|
||||
<b>{formatPercent(group.peakProbability)}</b>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="scan-opportunity-phase">
|
||||
<span>{group.localTime || "--"}</span>
|
||||
@@ -339,19 +351,28 @@ export const OpportunityTable = React.memo(function OpportunityTable({
|
||||
className={`scan-opportunity-item ${selected ? "selected" : ""}`}
|
||||
onClick={() => onSelectRow?.(row)}
|
||||
>
|
||||
<span className="scan-opportunity-branch">
|
||||
{rowIndex === group.rows.length - 1 ? "└" : "├"}
|
||||
<span className="scan-opportunity-branch" aria-hidden="true">
|
||||
<i />
|
||||
</span>
|
||||
<strong className={`scan-opportunity-action ${side === "no" ? "sell" : "buy"}`}>
|
||||
{formatAction(row, locale, tempSymbol)}
|
||||
</strong>
|
||||
<span>EMOS {formatPercent(modelProbability)}</span>
|
||||
<span>
|
||||
{priceLabel} {formatQuoteCents(row.ask)}
|
||||
<span className="scan-opportunity-trade">
|
||||
<strong className={`scan-opportunity-action ${side === "no" ? "sell" : "buy"}`}>
|
||||
{formatAction(row, locale, tempSymbol)}
|
||||
</strong>
|
||||
</span>
|
||||
<span className="scan-opportunity-stat">
|
||||
<small>EMOS</small>
|
||||
<b>{formatPercent(modelProbability)}</b>
|
||||
</span>
|
||||
<span className="scan-opportunity-stat">
|
||||
<small>{priceLabel}</small>
|
||||
<b>{formatQuoteCents(row.ask)}</b>
|
||||
</span>
|
||||
<span className="scan-opportunity-stat edge">
|
||||
<small>edge</small>
|
||||
<b className={edgePositive ? "positive" : "negative"}>
|
||||
{formatPercent(row.edge_percent, true)}
|
||||
</b>
|
||||
</span>
|
||||
<em className={edgePositive ? "positive" : "negative"}>
|
||||
edge {formatPercent(row.edge_percent, true)}
|
||||
</em>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -5,6 +5,7 @@ import Link from "next/link";
|
||||
import {
|
||||
RefreshCw,
|
||||
Moon,
|
||||
Search,
|
||||
Sun,
|
||||
UserRound,
|
||||
} from "lucide-react";
|
||||
@@ -19,10 +20,6 @@ import {
|
||||
import styles from "./Dashboard.module.css";
|
||||
import detailChromeStyles from "./DetailPanelChrome.module.css";
|
||||
import modalChromeStyles from "./ModalChrome.module.css";
|
||||
import {
|
||||
FilterState,
|
||||
ScanFilterPanel,
|
||||
} from "@/components/dashboard/ScanFilterPanel";
|
||||
import { DetailPanel as CityDetailPanel } from "@/components/dashboard/DetailPanel";
|
||||
import { FutureForecastModal } from "@/components/dashboard/FutureForecastModal";
|
||||
import { MapCanvas } from "@/components/dashboard/MapCanvas";
|
||||
@@ -37,6 +34,7 @@ import { I18nProvider, useI18n } from "@/hooks/useI18n";
|
||||
import { dashboardClient } from "@/lib/dashboard-client";
|
||||
import type {
|
||||
ScanOpportunityRow,
|
||||
ScanTerminalFilters,
|
||||
ScanTerminalResponse,
|
||||
} from "@/lib/dashboard-types";
|
||||
import { getLocalizedCityName } from "@/lib/dashboard-home-copy";
|
||||
@@ -56,6 +54,8 @@ const DEFAULT_FILTERS: FilterState = {
|
||||
|
||||
const SCAN_AUTO_REFRESH_MS = 5 * 60 * 1000;
|
||||
|
||||
interface FilterState extends ScanTerminalFilters {}
|
||||
|
||||
type ContentView = "list" | "map" | "calendar";
|
||||
type ThemeMode = "dark" | "light";
|
||||
function formatShortDate(value?: string | null, locale = "zh-CN") {
|
||||
@@ -249,7 +249,6 @@ function ScanTerminalScreen() {
|
||||
const accountHref = store.proAccess.authenticated
|
||||
? "/account"
|
||||
: "/auth/login?next=%2Faccount";
|
||||
const [draftFilters, setDraftFilters] = useState<FilterState>(DEFAULT_FILTERS);
|
||||
const [activeFilters, setActiveFilters] = useState<FilterState>(DEFAULT_FILTERS);
|
||||
const [terminalData, setTerminalData] = useState<ScanTerminalResponse | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -491,16 +490,6 @@ function ScanTerminalScreen() {
|
||||
return (
|
||||
<div className={clsx(styles.root, detailChromeStyles.root, modalChromeStyles.root)}>
|
||||
<div className={clsx("scan-terminal", themeMode === "light" && "light")}>
|
||||
<ScanFilterPanel
|
||||
value={draftFilters}
|
||||
onChange={setDraftFilters}
|
||||
onScan={(filters) => {
|
||||
setDraftFilters(filters);
|
||||
void fetchTerminal(filters, true);
|
||||
}}
|
||||
isScanning={loading}
|
||||
/>
|
||||
|
||||
<main className="scan-data-grid">
|
||||
<div className="scan-topbar">
|
||||
<div className="scan-topbar-title">
|
||||
@@ -533,6 +522,21 @@ function ScanTerminalScreen() {
|
||||
<span className="scan-topbar-time">
|
||||
{userLocalTime}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="scan-primary-button"
|
||||
onClick={() => void fetchTerminal(activeFilters, true)}
|
||||
disabled={loading}
|
||||
>
|
||||
<Search size={14} />
|
||||
{loading
|
||||
? isEn
|
||||
? "Scanning..."
|
||||
: "扫描中..."
|
||||
: isEn
|
||||
? "Start Scan"
|
||||
: "开始扫描"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="scan-theme-button"
|
||||
|
||||
Reference in New Issue
Block a user