Refine dashboard detail panel layout
This commit is contained in:
2569718930@qq.com
@@ -17,6 +17,7 @@ import {
|
||||
getCityProfileStats,
|
||||
getRiskBadgeLabel,
|
||||
getTemperatureChartData,
|
||||
getWeatherSummary,
|
||||
} from "@/lib/dashboard-utils";
|
||||
|
||||
function DetailMiniTemperatureChart({ detail }: { detail: CityDetail }) {
|
||||
@@ -154,16 +155,9 @@ export function DetailPanel() {
|
||||
const isProStateLoading = store.proAccess.loading;
|
||||
const panelRef = useRef<HTMLElement | null>(null);
|
||||
const [heavyContentReady, setHeavyContentReady] = useState(false);
|
||||
const isOverlayOpen =
|
||||
Boolean(store.futureModalDate) ||
|
||||
store.historyState.isOpen;
|
||||
const isVisible =
|
||||
store.isPanelOpen &&
|
||||
Boolean(store.selectedCity) &&
|
||||
!isOverlayOpen;
|
||||
const hasBasicPanelContent = Boolean(
|
||||
detail || selectedSummary || selectedCityItem,
|
||||
);
|
||||
const isOverlayOpen = Boolean(store.futureModalDate) || store.historyState.isOpen;
|
||||
const isVisible = store.isPanelOpen && Boolean(store.selectedCity) && !isOverlayOpen;
|
||||
const hasBasicPanelContent = Boolean(detail || selectedSummary || selectedCityItem);
|
||||
const panelDisplayName =
|
||||
detail?.display_name ||
|
||||
selectedSummary?.display_name ||
|
||||
@@ -188,6 +182,9 @@ export function DetailPanel() {
|
||||
[detail, locale],
|
||||
);
|
||||
const scenery = getCityScenery(detail?.name);
|
||||
const weatherSummary = detail
|
||||
? getWeatherSummary(detail, locale)
|
||||
: { weatherIcon: "", weatherText: "" };
|
||||
const basicCurrentTemp = selectedSummary?.current?.temp;
|
||||
const basicObsTime = selectedSummary?.current?.obs_time;
|
||||
const basicDeb = selectedSummary?.deb?.prediction;
|
||||
@@ -200,11 +197,35 @@ export function DetailPanel() {
|
||||
selectedCityItem?.airport ||
|
||||
selectedSummary?.icao ||
|
||||
(locale === "en-US" ? "Airport pending" : "机场待确认");
|
||||
const isBasicSummaryLoading =
|
||||
!detail && !selectedSummary && store.loadingState.cityDetail;
|
||||
const activeTempSymbol = detail?.temp_symbol || selectedSummary?.temp_symbol || "°C";
|
||||
const heroCurrentTemp = detail?.current?.temp ?? basicCurrentTemp;
|
||||
const heroCurrentTempText =
|
||||
heroCurrentTemp != null ? `${heroCurrentTemp}${activeTempSymbol}` : "--";
|
||||
const heroObsTimeLabel =
|
||||
detail?.current?.obs_time ||
|
||||
basicObsTime ||
|
||||
(locale === "en-US" ? "Observation pending" : "观测时间待更新");
|
||||
const heroDebValue = detail?.deb?.prediction ?? basicDeb;
|
||||
const heroDebText =
|
||||
heroDebValue != null
|
||||
? `${heroDebValue}${activeTempSymbol}`
|
||||
: locale === "en-US"
|
||||
? "Pending"
|
||||
: "待更新";
|
||||
const heroSettlementLabel =
|
||||
detail?.current?.settlement_source_label || basicSettlementLabel;
|
||||
const heroAirportLabel = detail?.risk?.airport || basicAirportLabel;
|
||||
const heroWeatherText = detail
|
||||
? weatherSummary.weatherText
|
||||
: locale === "en-US"
|
||||
? "City snapshot"
|
||||
: "城市快照";
|
||||
const heroWeatherIcon = detail ? weatherSummary.weatherIcon : "";
|
||||
const isBasicSummaryLoading = !detail && !selectedSummary && store.loadingState.cityDetail;
|
||||
const shouldShowSyncCard =
|
||||
!detail &&
|
||||
(store.loadingState.cityDetail || isProStateLoading || isAuthenticated);
|
||||
|
||||
const blurActiveElement = () => {
|
||||
if (typeof document === "undefined") return;
|
||||
const active = document.activeElement;
|
||||
@@ -212,6 +233,7 @@ export function DetailPanel() {
|
||||
active.blur();
|
||||
}
|
||||
};
|
||||
|
||||
const handleFeatureAccess = (feature: "today" | "history") => {
|
||||
blurActiveElement();
|
||||
|
||||
@@ -251,10 +273,7 @@ export function DetailPanel() {
|
||||
|
||||
if (!isVisible) {
|
||||
panel.setAttribute("inert", "");
|
||||
if (
|
||||
typeof document !== "undefined" &&
|
||||
panel.contains(document.activeElement)
|
||||
) {
|
||||
if (typeof document !== "undefined" && panel.contains(document.activeElement)) {
|
||||
const active = document.activeElement;
|
||||
if (active instanceof HTMLElement) {
|
||||
active.blur();
|
||||
@@ -303,10 +322,7 @@ export function DetailPanel() {
|
||||
}, [detail, isVisible]);
|
||||
|
||||
return (
|
||||
<aside
|
||||
ref={panelRef}
|
||||
className={clsx("detail-panel", isVisible && "visible")}
|
||||
>
|
||||
<aside ref={panelRef} className={clsx("detail-panel", isVisible && "visible")}>
|
||||
<div className="panel-header">
|
||||
<button
|
||||
type="button"
|
||||
@@ -320,7 +336,23 @@ export function DetailPanel() {
|
||||
×
|
||||
</button>
|
||||
<div className="panel-title-area">
|
||||
<h2>{panelDisplayName.toUpperCase()}</h2>
|
||||
<div className="panel-title-stack">
|
||||
<div className="panel-overline">
|
||||
<span>{locale === "en-US" ? "City briefing" : "城市简报"}</span>
|
||||
<span className="panel-overline-sep">•</span>
|
||||
<span>{panelDisplayName.toUpperCase()}</span>
|
||||
</div>
|
||||
<h2>{panelDisplayName}</h2>
|
||||
<div className="panel-subtitle">
|
||||
{detail
|
||||
? locale === "en-US"
|
||||
? "Primary settlement posture and local evidence."
|
||||
: "先看当前口径，再补结算证据与周边对照。"
|
||||
: locale === "en-US"
|
||||
? "Summary first. Deep detail fills in automatically."
|
||||
: "基础快照先到，深度内容随后补齐。"}
|
||||
</div>
|
||||
</div>
|
||||
{store.loadingState.cityDetail && (
|
||||
<div className="panel-loading-hint" role="status" aria-live="polite">
|
||||
<span className="panel-loading-spinner" aria-hidden="true" />
|
||||
@@ -335,161 +367,207 @@ export function DetailPanel() {
|
||||
<span className={clsx("risk-badge", panelRiskLevel)}>
|
||||
{getRiskBadgeLabel(panelRiskLevel, locale)}
|
||||
</span>
|
||||
<div className="relative group">
|
||||
{marketUrl ? (
|
||||
<a
|
||||
className="history-btn"
|
||||
href={marketUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title={
|
||||
locale === "en-US"
|
||||
? "Open today's Polymarket market"
|
||||
: "打开今日 Polymarket 题目页"
|
||||
}
|
||||
>
|
||||
{locale === "en-US" ? "Open Market" : "打开 Polymarket"}
|
||||
</a>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
className={clsx("history-btn", !isPro && "pro-locked")}
|
||||
<span className="panel-meta-chip panel-meta-chip-strong">{heroSettlementLabel}</span>
|
||||
<span className="panel-meta-chip panel-meta-chip-muted">{heroAirportLabel}</span>
|
||||
</div>
|
||||
<div className="panel-actions">
|
||||
{marketUrl ? (
|
||||
<a
|
||||
className="panel-action-button panel-action-button-ghost"
|
||||
href={marketUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title={
|
||||
isPro
|
||||
? t("detail.todayAnalysis")
|
||||
: `${t("detail.todayAnalysis")} (Pro)`
|
||||
locale === "en-US"
|
||||
? "Open today's Polymarket market"
|
||||
: "打开今日 Polymarket 题目页"
|
||||
}
|
||||
onClick={() => handleFeatureAccess("today")}
|
||||
disabled={!store.selectedCity}
|
||||
>
|
||||
{isPro
|
||||
? t("detail.todayAnalysis")
|
||||
: `${t("detail.todayAnalysis")} · Pro`}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx("history-btn", !isPro && "pro-locked")}
|
||||
title={
|
||||
isPro ? t("detail.history") : `${t("detail.history")} (Pro)`
|
||||
}
|
||||
onClick={() => handleFeatureAccess("history")}
|
||||
disabled={!store.selectedCity}
|
||||
>
|
||||
{isPro ? t("detail.history") : `${t("detail.history")} · Pro`}
|
||||
</button>
|
||||
</div>
|
||||
{locale === "en-US" ? "Market" : "市场页"}
|
||||
</a>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(
|
||||
"panel-action-button",
|
||||
"panel-action-button-primary",
|
||||
!isPro && "pro-locked",
|
||||
)}
|
||||
title={
|
||||
isPro ? t("detail.todayAnalysis") : `${t("detail.todayAnalysis")} (Pro)`
|
||||
}
|
||||
onClick={() => handleFeatureAccess("today")}
|
||||
disabled={!store.selectedCity}
|
||||
>
|
||||
{isPro ? t("detail.todayAnalysis") : `${t("detail.todayAnalysis")} · Pro`}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(
|
||||
"panel-action-button",
|
||||
"panel-action-button-secondary",
|
||||
!isPro && "pro-locked",
|
||||
)}
|
||||
title={isPro ? t("detail.history") : `${t("detail.history")} (Pro)`}
|
||||
onClick={() => handleFeatureAccess("history")}
|
||||
disabled={!store.selectedCity}
|
||||
>
|
||||
{isPro ? t("detail.history") : `${t("detail.history")} · Pro`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="panel-body">
|
||||
{!hasBasicPanelContent ? (
|
||||
<section>
|
||||
<section className="detail-summary-shell detail-empty-state">
|
||||
<div className="detail-section-head">
|
||||
<div>
|
||||
<div className="detail-section-kicker">
|
||||
{locale === "en-US" ? "No city selected" : "尚未选择城市"}
|
||||
</div>
|
||||
<h3>{locale === "en-US" ? "Pick a city to start." : "先选择一个城市。"}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ color: "var(--text-muted)", fontSize: "13px" }}>
|
||||
{store.loadingState.cityDetail
|
||||
? t("detail.loading")
|
||||
: t("detail.emptyHint")}
|
||||
{store.loadingState.cityDetail ? t("detail.loading") : t("detail.emptyHint")}
|
||||
</div>
|
||||
</section>
|
||||
) : !detail ? (
|
||||
<>
|
||||
<section className="detail-section">
|
||||
<h3>{locale === "en-US" ? "City Snapshot" : "城市概览"}</h3>
|
||||
<section className="detail-summary-shell">
|
||||
<div className="detail-section-head">
|
||||
<div>
|
||||
<div className="detail-section-kicker">
|
||||
{locale === "en-US" ? "Quick read" : "基础快照"}
|
||||
</div>
|
||||
<h3>{locale === "en-US" ? "Summary before deep sync." : "先看基础结论，再等深度详情。"}</h3>
|
||||
</div>
|
||||
</div>
|
||||
{isBasicSummaryLoading ? (
|
||||
<div className="detail-mini-meta">
|
||||
{locale === "en-US"
|
||||
? "Syncing public city snapshot..."
|
||||
: "正在同步城市基础信息..."}
|
||||
{locale === "en-US" ? "Syncing public city snapshot..." : "正在同步城市基础信息..."}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="detail-grid">
|
||||
<div className="detail-card">
|
||||
<span className="detail-label">
|
||||
{locale === "en-US" ? "Current temp" : "当前温度"}
|
||||
</span>
|
||||
<span className="detail-value">
|
||||
{basicCurrentTemp != null
|
||||
? `${basicCurrentTemp}${selectedSummary?.temp_symbol || ""}`
|
||||
: locale === "en-US"
|
||||
? "--"
|
||||
: "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="detail-card">
|
||||
<span className="detail-label">
|
||||
{locale === "en-US" ? "Observed" : "观测时间"}
|
||||
</span>
|
||||
<span className="detail-value">
|
||||
{basicObsTime || (locale === "en-US" ? "Pending" : "待更新")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="detail-card">
|
||||
<span className="detail-label">DEB</span>
|
||||
<span className="detail-value">
|
||||
{basicDeb != null
|
||||
? `${basicDeb}${selectedSummary?.temp_symbol || ""}`
|
||||
: locale === "en-US"
|
||||
? isBasicSummaryLoading
|
||||
? "Syncing..."
|
||||
: "Pending"
|
||||
: isBasicSummaryLoading
|
||||
? "同步中..."
|
||||
: "待更新"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="detail-card">
|
||||
<span className="detail-label">
|
||||
{locale === "en-US" ? "Settlement" : "结算口径"}
|
||||
</span>
|
||||
<span className="detail-value">{basicSettlementLabel}</span>
|
||||
</div>
|
||||
<div className="detail-card">
|
||||
<span className="detail-label">
|
||||
{locale === "en-US" ? "Airport" : "结算机场"}
|
||||
</span>
|
||||
<span className="detail-value">{basicAirportLabel}</span>
|
||||
<div className="detail-summary-main">
|
||||
<article className="detail-card detail-card-hero">
|
||||
<span className="detail-label">{locale === "en-US" ? "Current posture" : "当前态势"}</span>
|
||||
<span className="detail-summary-temp">{heroCurrentTempText}</span>
|
||||
<span className="detail-summary-supporting">@{heroObsTimeLabel}</span>
|
||||
<span className="detail-summary-supporting">{heroWeatherText}</span>
|
||||
</article>
|
||||
<div className="detail-summary-grid">
|
||||
<article className="detail-card">
|
||||
<span className="detail-label">DEB</span>
|
||||
<span className="detail-value">{heroDebText}</span>
|
||||
</article>
|
||||
<article className="detail-card">
|
||||
<span className="detail-label">{locale === "en-US" ? "Settlement" : "结算口径"}</span>
|
||||
<span className="detail-value">{heroSettlementLabel}</span>
|
||||
</article>
|
||||
<article className="detail-card">
|
||||
<span className="detail-label">{locale === "en-US" ? "Airport" : "结算机场"}</span>
|
||||
<span className="detail-value">{heroAirportLabel}</span>
|
||||
</article>
|
||||
<article className="detail-card">
|
||||
<span className="detail-label">{locale === "en-US" ? "Sync status" : "同步状态"}</span>
|
||||
<span className="detail-value-muted">
|
||||
{locale === "en-US" ? "Deep detail pending" : "深度详情补齐中"}
|
||||
</span>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="detail-section">
|
||||
<div className="detail-card">
|
||||
<span className="detail-label">
|
||||
<section className="detail-summary-shell detail-summary-shell-live">
|
||||
<div className="detail-section-head">
|
||||
<div>
|
||||
<div className="detail-section-kicker">
|
||||
{shouldShowSyncCard
|
||||
? locale === "en-US"
|
||||
? "Background sync"
|
||||
: "后台同步"
|
||||
: locale === "en-US"
|
||||
? "Pro workflow"
|
||||
: "Pro 工作流"}
|
||||
</div>
|
||||
<h3>
|
||||
{shouldShowSyncCard
|
||||
? locale === "en-US"
|
||||
? "Deep evidence will appear automatically."
|
||||
: "更深层的结算证据会自动补齐。"
|
||||
: locale === "en-US"
|
||||
? "Intraday and history live behind the analysis flow."
|
||||
: "今日日内分析和历史对账会在分析流中继续展开。"}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="detail-callout-card">
|
||||
<span className="detail-value-muted">
|
||||
{shouldShowSyncCard
|
||||
? locale === "en-US"
|
||||
? "Detail sync"
|
||||
: "详情同步"
|
||||
? "Full city detail is still syncing. Nearby stations, source links, and mini trend will land here once ready."
|
||||
: "完整城市详情仍在同步中。周边站点、官方参考和温度微趋势会在完成后自动出现在这里。"
|
||||
: locale === "en-US"
|
||||
? "Pro features"
|
||||
: "Pro 功能"}
|
||||
</span>
|
||||
<span className="detail-value" style={{ fontSize: "15px" }}>
|
||||
{shouldShowSyncCard
|
||||
? locale === "en-US"
|
||||
? "Full city detail is still syncing. The deeper panel will appear automatically."
|
||||
: "完整城市详情仍在同步中，深度面板会自动补齐。"
|
||||
: locale === "en-US"
|
||||
? "Intraday analysis, history reconciliation, and deeper structure signals require Pro."
|
||||
: "今日日内分析、历史对账和更深入的结构信号需要 Pro。"}
|
||||
? "Intraday analysis, history reconciliation, and deeper structure signals stay available from the action bar."
|
||||
: "今日日内分析、历史对账和更深层结构信号会从上方操作区继续展开。"}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<section className="detail-summary-shell">
|
||||
<div className="detail-section-head">
|
||||
<div>
|
||||
<div className="detail-section-kicker">
|
||||
{locale === "en-US" ? "Settlement snapshot" : "结算快照"}
|
||||
</div>
|
||||
<h3>{locale === "en-US" ? "Start from the active settlement posture." : "先看当前结算姿态，再判断偏差和风险。"}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="detail-summary-main">
|
||||
<article className="detail-card detail-card-hero">
|
||||
<span className="detail-label">{locale === "en-US" ? "Current reading" : "当前读数"}</span>
|
||||
<span className="detail-summary-temp">{heroCurrentTempText}</span>
|
||||
<span className="detail-summary-supporting">@{heroObsTimeLabel}</span>
|
||||
<span className="detail-summary-supporting">
|
||||
{heroWeatherIcon ? `${heroWeatherIcon} ` : ""}
|
||||
{heroWeatherText}
|
||||
</span>
|
||||
</article>
|
||||
<div className="detail-summary-grid">
|
||||
<article className="detail-card">
|
||||
<span className="detail-label">DEB</span>
|
||||
<span className="detail-value">{heroDebText}</span>
|
||||
</article>
|
||||
<article className="detail-card">
|
||||
<span className="detail-label">{locale === "en-US" ? "Settlement" : "结算口径"}</span>
|
||||
<span className="detail-value">{heroSettlementLabel}</span>
|
||||
</article>
|
||||
<article className="detail-card">
|
||||
<span className="detail-label">{locale === "en-US" ? "Airport" : "结算机场"}</span>
|
||||
<span className="detail-value">{heroAirportLabel}</span>
|
||||
</article>
|
||||
<article className="detail-card">
|
||||
<span className="detail-label">{locale === "en-US" ? "Risk level" : "风险等级"}</span>
|
||||
<span className="detail-value">{getRiskBadgeLabel(panelRiskLevel, locale)}</span>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="detail-scenery-card">
|
||||
{scenery ? (
|
||||
<>
|
||||
<img
|
||||
className="detail-scenery-image"
|
||||
src={scenery.imageUrl}
|
||||
alt={t("detail.sceneryAlt", { city: detail?.display_name || "" })}
|
||||
alt={t("detail.sceneryAlt", { city: detail.display_name || "" })}
|
||||
/>
|
||||
<div className="detail-scenery-overlay">
|
||||
<div className="detail-scenery-copy">
|
||||
<span className="detail-scenery-kicker">
|
||||
{detail?.display_name}
|
||||
</span>
|
||||
<span className="detail-scenery-kicker">{detail.display_name}</span>
|
||||
</div>
|
||||
<a
|
||||
className="detail-scenery-credit"
|
||||
@@ -503,34 +581,40 @@ export function DetailPanel() {
|
||||
</>
|
||||
) : (
|
||||
<div className="detail-scenery-fallback">
|
||||
<span className="detail-scenery-kicker">
|
||||
{detail?.display_name}
|
||||
</span>
|
||||
<strong className="detail-scenery-title">
|
||||
{t("detail.sceneryTitle")}
|
||||
</strong>
|
||||
<span className="detail-scenery-subtitle">
|
||||
{t("detail.sceneryFallback")}
|
||||
</span>
|
||||
<span className="detail-scenery-kicker">{detail.display_name}</span>
|
||||
<strong className="detail-scenery-title">{t("detail.sceneryTitle")}</strong>
|
||||
<span className="detail-scenery-subtitle">{t("detail.sceneryFallback")}</span>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="detail-section">
|
||||
<h3>{t("detail.profile")}</h3>
|
||||
<section className="detail-structured-section">
|
||||
<div className="detail-section-head">
|
||||
<div>
|
||||
<div className="detail-section-kicker">{locale === "en-US" ? "Profile" : "城市画像"}</div>
|
||||
<h3>{t("detail.profile")}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="detail-grid">
|
||||
{profileStats.map((item) => (
|
||||
<div key={item.label} className="detail-card">
|
||||
<article key={item.label} className="detail-card">
|
||||
<span className="detail-label">{item.label}</span>
|
||||
<span className="detail-value">{item.value}</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{officialLinks.length > 0 ? (
|
||||
<section className="detail-section">
|
||||
<h3>{locale === "en-US" ? "Official Sources" : "官方参考"}</h3>
|
||||
<section className="detail-structured-section">
|
||||
<div className="detail-section-head">
|
||||
<div>
|
||||
<div className="detail-section-kicker">
|
||||
{locale === "en-US" ? "Primary references" : "官方参考"}
|
||||
</div>
|
||||
<h3>{locale === "en-US" ? "Settlement and observation references" : "结算与观测参考来源"}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="detail-source-note">
|
||||
{locale === "en-US"
|
||||
? "AGENCY = national meteorological service, METAR = airport observation, AIRPORT = airport official page."
|
||||
@@ -545,9 +629,7 @@ export function DetailPanel() {
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<span className="detail-source-kind">
|
||||
{link.kind.toUpperCase()}
|
||||
</span>
|
||||
<span className="detail-source-kind">{link.kind.toUpperCase()}</span>
|
||||
<span className="detail-source-label">{link.label}</span>
|
||||
</a>
|
||||
))}
|
||||
@@ -555,10 +637,17 @@ export function DetailPanel() {
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
<section className="detail-section rounded-2xl">
|
||||
<h3>{t("detail.todayMiniTrend")}</h3>
|
||||
<section className="detail-structured-section rounded-2xl">
|
||||
<div className="detail-section-head">
|
||||
<div>
|
||||
<div className="detail-section-kicker">
|
||||
{locale === "en-US" ? "Mini trend" : "温度微趋势"}
|
||||
</div>
|
||||
<h3>{t("detail.todayMiniTrend")}</h3>
|
||||
</div>
|
||||
</div>
|
||||
{heavyContentReady ? (
|
||||
<DetailMiniTemperatureChart detail={detail!} />
|
||||
<DetailMiniTemperatureChart detail={detail} />
|
||||
) : (
|
||||
<div className="detail-mini-meta">{t("detail.loading")}</div>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,213 @@
|
||||
.root :global(.panel-title-stack) {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.root :global(.panel-overline) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.root :global(.panel-overline-sep) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.root :global(.panel-subtitle) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.root :global(.panel-weather-chip) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.root :global(.panel-meta-chip) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.root :global(.panel-meta-chip-strong) {
|
||||
color: var(--text-primary);
|
||||
background: rgba(34, 211, 238, 0.1);
|
||||
border-color: rgba(34, 211, 238, 0.2);
|
||||
}
|
||||
|
||||
.root :global(.panel-meta-chip-muted) {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.root :global(.panel-actions) {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.root :global(.panel-action-button) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 38px;
|
||||
padding: 0 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
|
||||
}
|
||||
|
||||
.root :global(.panel-action-button:hover) {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.root :global(.panel-action-button-primary) {
|
||||
color: #05111f;
|
||||
background: linear-gradient(135deg, #67e8f9, #38bdf8);
|
||||
border-color: rgba(103, 232, 249, 0.3);
|
||||
}
|
||||
|
||||
.root :global(.panel-action-button-secondary) {
|
||||
color: var(--text-primary);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.root :global(.panel-action-button-ghost) {
|
||||
color: var(--accent-cyan);
|
||||
background: rgba(34, 211, 238, 0.08);
|
||||
border-color: rgba(34, 211, 238, 0.16);
|
||||
}
|
||||
|
||||
.root :global(.detail-summary-shell) {
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018));
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 18px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 18px 42px rgba(2, 6, 23, 0.18);
|
||||
}
|
||||
|
||||
.root :global(.panel-body section.detail-summary-shell) {
|
||||
padding: 16px;
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
|
||||
.root :global(.detail-summary-shell-live) {
|
||||
background: linear-gradient(180deg, rgba(22, 78, 99, 0.18), rgba(15, 23, 42, 0.3));
|
||||
}
|
||||
|
||||
.root :global(.detail-section-head) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.root :global(.detail-section-kicker) {
|
||||
display: inline-block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--accent-cyan);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.root :global(.detail-summary-main) {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.root :global(.detail-summary-hero) {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.root :global(.detail-summary-temp) {
|
||||
color: var(--text-primary);
|
||||
font-size: 38px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.root :global(.detail-summary-supporting) {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.root :global(.detail-summary-grid) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.root :global(.detail-card) {
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.root :global(.detail-card-hero) {
|
||||
background: rgba(34, 211, 238, 0.08);
|
||||
border-color: rgba(34, 211, 238, 0.16);
|
||||
}
|
||||
|
||||
.root :global(.detail-card-wide) {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.root :global(.detail-callout-card) {
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
|
||||
.root :global(.detail-value-muted) {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.root :global(.detail-structured-section) {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 18px;
|
||||
padding: 16px 16px 18px;
|
||||
}
|
||||
|
||||
.root :global(.detail-empty-state) {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@@ -1155,58 +1155,74 @@ export function FutureForecastModal() {
|
||||
) : (
|
||||
<div className="modal-content large future-modal">
|
||||
<div className="modal-header">
|
||||
<h2
|
||||
id="future-modal-title"
|
||||
className="future-modal-title-with-actions"
|
||||
>
|
||||
<span>
|
||||
{isToday
|
||||
? t("future.todayTitle", {
|
||||
city: detail.display_name.toUpperCase(),
|
||||
})
|
||||
: t("future.dateTitle", {
|
||||
city: detail.display_name.toUpperCase(),
|
||||
date: dateStr,
|
||||
})}
|
||||
</span>
|
||||
<button
|
||||
className={clsx(
|
||||
"future-refresh-btn",
|
||||
isAnyLayerSyncing && "spinning",
|
||||
)}
|
||||
disabled={!isPro || isProLoading}
|
||||
onClick={() => {
|
||||
if (isToday) {
|
||||
void store.openTodayModal(true);
|
||||
return;
|
||||
}
|
||||
store.openFutureModal(dateStr, true);
|
||||
}}
|
||||
title={
|
||||
!isPro
|
||||
? locale === "en-US"
|
||||
? "Pro subscription required"
|
||||
: "需要 Pro 订阅"
|
||||
: locale === "en-US"
|
||||
? "Refresh Data"
|
||||
: "刷新数据"
|
||||
}
|
||||
<div className="modal-title-stack">
|
||||
<div className="modal-overline">
|
||||
<span>{locale === "en-US" ? "Analysis workspace" : "分析工作台"}</span>
|
||||
<span className="modal-overline-sep">•</span>
|
||||
<span>{detail.display_name.toUpperCase()}</span>
|
||||
</div>
|
||||
<h2
|
||||
id="future-modal-title"
|
||||
className="future-modal-title-with-actions"
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
<span>
|
||||
{isToday
|
||||
? t("future.todayTitle", {
|
||||
city: detail.display_name.toUpperCase(),
|
||||
})
|
||||
: t("future.dateTitle", {
|
||||
city: detail.display_name.toUpperCase(),
|
||||
date: dateStr,
|
||||
})}
|
||||
</span>
|
||||
<button
|
||||
className={clsx(
|
||||
"future-refresh-btn",
|
||||
isAnyLayerSyncing && "spinning",
|
||||
)}
|
||||
disabled={!isPro || isProLoading}
|
||||
onClick={() => {
|
||||
if (isToday) {
|
||||
void store.openTodayModal(true);
|
||||
return;
|
||||
}
|
||||
store.openFutureModal(dateStr, true);
|
||||
}}
|
||||
title={
|
||||
!isPro
|
||||
? locale === "en-US"
|
||||
? "Pro subscription required"
|
||||
: "需要 Pro 订阅"
|
||||
: locale === "en-US"
|
||||
? "Refresh Data"
|
||||
: "刷新数据"
|
||||
}
|
||||
>
|
||||
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
|
||||
<path d="M3 3v5h5" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
|
||||
<path d="M3 3v5h5" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div className="modal-subtitle">
|
||||
{isToday
|
||||
? locale === "en-US"
|
||||
? "Base signal first, market and deep structure follow."
|
||||
: "先看基础信号，市场层和深度结构随后补齐。"
|
||||
: locale === "en-US"
|
||||
? "Forward date view with phased model and structure sync."
|
||||
: "未来日期视图，模型层与结构层分阶段补齐。"}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="modal-close"
|
||||
@@ -1237,18 +1253,7 @@ export function FutureForecastModal() {
|
||||
))}
|
||||
</section>
|
||||
{isNoaaSettlement && (
|
||||
<div
|
||||
style={{
|
||||
marginBottom: "16px",
|
||||
padding: "12px 14px",
|
||||
border: "1px solid rgba(56, 189, 248, 0.24)",
|
||||
borderRadius: "12px",
|
||||
background: "rgba(14, 165, 233, 0.08)",
|
||||
color: "var(--text-secondary)",
|
||||
fontSize: "13px",
|
||||
lineHeight: 1.6,
|
||||
}}
|
||||
>
|
||||
<div className="modal-callout modal-callout-info">
|
||||
{locale === "en-US"
|
||||
? `${detail.display_name} now settles against NOAA ${noaaStationCode} (${noaaStationName}). The market uses the highest rounded whole-degree Celsius reading in the Temp column after the day is finalized.`
|
||||
: `${detail.display_name} 当前按 NOAA ${noaaStationCode}（${noaaStationName}）结算。市场最终采用该日 Temp 列完成质控后的最高整度摄氏值，不按小数温度结算。`}
|
||||
@@ -1491,19 +1496,29 @@ export function FutureForecastModal() {
|
||||
|
||||
<main className="future-v2-right">
|
||||
<section className="future-modal-section future-v2-main-chart">
|
||||
<h3>
|
||||
{locale === "en-US"
|
||||
? "Today's temperature forecast (obs + market)"
|
||||
: "今日气温预测（观测 + 市场）"}
|
||||
</h3>
|
||||
<div className="modal-section-heading">
|
||||
<div className="modal-section-kicker">
|
||||
{locale === "en-US" ? "Primary view" : "主视图"}
|
||||
</div>
|
||||
<h3>
|
||||
{locale === "en-US"
|
||||
? "Today's temperature forecast (obs + market)"
|
||||
: "今日气温预测（观测 + 市场）"}
|
||||
</h3>
|
||||
</div>
|
||||
<DailyTemperatureChart dateStr={dateStr} />
|
||||
</section>
|
||||
|
||||
<div className="future-modal-grid">
|
||||
<section className="future-modal-section">
|
||||
<h3>
|
||||
{locale === "en-US" ? "Current Hit Odds" : "当前命中胜率"}
|
||||
</h3>
|
||||
<div className="modal-section-heading">
|
||||
<div className="modal-section-kicker">
|
||||
{locale === "en-US" ? "Probability layer" : "概率层"}
|
||||
</div>
|
||||
<h3>
|
||||
{locale === "en-US" ? "Current Hit Odds" : "当前命中胜率"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="future-text-block" style={{ marginBottom: "12px" }}>
|
||||
{probabilitySummary}
|
||||
</div>
|
||||
@@ -1516,9 +1531,14 @@ export function FutureForecastModal() {
|
||||
</div>
|
||||
</section>
|
||||
<section className="future-modal-section">
|
||||
<h3>
|
||||
{locale === "en-US" ? "Model Range & Spread" : "模型区间与分歧"}
|
||||
</h3>
|
||||
<div className="modal-section-heading">
|
||||
<div className="modal-section-kicker">
|
||||
{locale === "en-US" ? "Model layer" : "模型层"}
|
||||
</div>
|
||||
<h3>
|
||||
{locale === "en-US" ? "Model Range & Spread" : "模型区间与分歧"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="future-text-block" style={{ marginBottom: "12px" }}>
|
||||
{modelSummary}
|
||||
</div>
|
||||
@@ -1532,7 +1552,12 @@ export function FutureForecastModal() {
|
||||
|
||||
{showDeferredTodaySections ? (
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.structureToday")}</h3>
|
||||
<div className="modal-section-heading">
|
||||
<div className="modal-section-kicker">
|
||||
{locale === "en-US" ? "Structure layer" : "结构层"}
|
||||
</div>
|
||||
<h3>{t("future.structureToday")}</h3>
|
||||
</div>
|
||||
<div className="future-front-score">
|
||||
<div className="future-front-bar" style={barStyle}>
|
||||
<div
|
||||
@@ -1691,7 +1716,12 @@ export function FutureForecastModal() {
|
||||
</section>
|
||||
) : (
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.structureToday")}</h3>
|
||||
<div className="modal-section-heading">
|
||||
<div className="modal-section-kicker">
|
||||
{locale === "en-US" ? "Structure layer" : "结构层"}
|
||||
</div>
|
||||
<h3>{t("future.structureToday")}</h3>
|
||||
</div>
|
||||
<div className="future-trend-summary future-trend-summary-muted">
|
||||
{locale === "en-US"
|
||||
? "Surface structure, upper-air diagnostics, and trade commentary are loading after the primary chart."
|
||||
|
||||
@@ -228,30 +228,40 @@ export function HistoryModal() {
|
||||
) : (
|
||||
<div className="modal-content history-modal">
|
||||
<div className="modal-header">
|
||||
<h2 id="history-modal-title">
|
||||
{t("history.title", {
|
||||
city: store.selectedCity?.toUpperCase() || "",
|
||||
})}
|
||||
</h2>
|
||||
{meta?.mode === "preview" ? (
|
||||
<div
|
||||
style={{
|
||||
color: "var(--text-muted)",
|
||||
fontSize: "12px",
|
||||
marginLeft: "12px",
|
||||
}}
|
||||
>
|
||||
{isRecordsLoading
|
||||
? locale === "en-US"
|
||||
? "Loading full records in background..."
|
||||
: "完整历史正在后台补齐..."
|
||||
: meta.hasMore
|
||||
? locale === "en-US"
|
||||
? `Preview ${meta.previewCount}/${meta.fullCount}`
|
||||
: `预览 ${meta.previewCount}/${meta.fullCount}`
|
||||
: null}
|
||||
<div className="modal-title-stack">
|
||||
<div className="modal-overline">
|
||||
<span>{locale === "en-US" ? "Audit workspace" : "对账工作台"}</span>
|
||||
<span className="modal-overline-sep">•</span>
|
||||
<span>{store.selectedCity?.toUpperCase() || ""}</span>
|
||||
</div>
|
||||
) : null}
|
||||
<h2 id="history-modal-title">
|
||||
{t("history.title", {
|
||||
city: store.selectedCity?.toUpperCase() || "",
|
||||
})}
|
||||
</h2>
|
||||
<div className="modal-subtitle">
|
||||
{locale === "en-US"
|
||||
? "Observed highs, DEB path, and historical baseline consistency."
|
||||
: "查看实测最高温、DEB 路径与历史基线是否一致。"}
|
||||
</div>
|
||||
{meta?.mode === "preview" ? (
|
||||
<div className="modal-header-meta">
|
||||
<span className="modal-meta-pill">
|
||||
{isRecordsLoading
|
||||
? locale === "en-US"
|
||||
? "Full records syncing"
|
||||
: "完整记录补齐中"
|
||||
: meta.hasMore
|
||||
? locale === "en-US"
|
||||
? `Preview ${meta.previewCount}/${meta.fullCount}`
|
||||
: `预览 ${meta.previewCount}/${meta.fullCount}`
|
||||
: locale === "en-US"
|
||||
? "Full set loaded"
|
||||
: "完整记录已到齐"}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="modal-close"
|
||||
@@ -263,18 +273,7 @@ export function HistoryModal() {
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
{isNoaaSettlement && (
|
||||
<div
|
||||
style={{
|
||||
marginBottom: "16px",
|
||||
padding: "12px 14px",
|
||||
border: "1px solid rgba(56, 189, 248, 0.24)",
|
||||
borderRadius: "12px",
|
||||
background: "rgba(14, 165, 233, 0.08)",
|
||||
color: "var(--text-secondary)",
|
||||
fontSize: "13px",
|
||||
lineHeight: 1.6,
|
||||
}}
|
||||
>
|
||||
<div className="modal-callout modal-callout-info">
|
||||
{t("lang") === "en-US"
|
||||
? `${store.selectedDetail?.display_name || store.selectedCity || "This city"} historical actuals are aligned to NOAA ${noaaStationCode} (${noaaStationName}) settlement rules: use the highest rounded whole-degree Celsius reading after the date is finalized.`
|
||||
: `${store.selectedDetail?.display_name || store.selectedCity || "该城市"}历史对账已按 NOAA ${noaaStationCode}（${noaaStationName}）结算口径对齐：采用该日最终完成质控后的最高整度摄氏值。`}
|
||||
@@ -316,6 +315,21 @@ export function HistoryModal() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="modal-section-heading">
|
||||
<div className="modal-section-kicker">
|
||||
{locale === "en-US" ? "Performance snapshot" : "表现快照"}
|
||||
</div>
|
||||
<h3>
|
||||
{locale === "en-US"
|
||||
? "Recent settlement performance"
|
||||
: "近期结算表现"}
|
||||
</h3>
|
||||
<div className="modal-section-note">
|
||||
{locale === "en-US"
|
||||
? "Hit rate, MAE, and baseline comparison across recent settled days."
|
||||
: "查看近期已结算样本里的命中率、误差与基线对照。"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="history-stats">
|
||||
{error ? (
|
||||
<span style={{ color: "var(--accent-red)" }}>
|
||||
@@ -371,10 +385,20 @@ export function HistoryModal() {
|
||||
{!error && <HistoryChart />}
|
||||
{!error && settledPeakRows.length > 0 && (
|
||||
<div className="history-peak-reference">
|
||||
<div className="history-peak-reference-title">
|
||||
{locale === "en-US"
|
||||
? "Peak-12h DEB Reference (Approx.)"
|
||||
: "峰值前 12 小时 DEB 参考（近似）"}
|
||||
<div className="modal-section-heading">
|
||||
<div className="modal-section-kicker">
|
||||
{locale === "en-US" ? "Reference table" : "参考表"}
|
||||
</div>
|
||||
<div className="history-peak-reference-title">
|
||||
{locale === "en-US"
|
||||
? "Peak-12h DEB Reference (Approx.)"
|
||||
: "峰值前 12 小时 DEB 参考（近似）"}
|
||||
</div>
|
||||
<div className="modal-section-note">
|
||||
{locale === "en-US"
|
||||
? "Use peak-minus-12h DEB as a fast sanity check for settled highs."
|
||||
: "用峰值前 12 小时的 DEB 作为历史结算高温的快速校验。"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="history-peak-reference-scroll">
|
||||
{settledPeakRows.map((row) => (
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
.root :global(.modal-title-stack) {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.root :global(.modal-overline) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.root :global(.modal-overline-sep) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.root :global(.modal-subtitle) {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.root :global(.modal-header-meta) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.root :global(.modal-meta-pill) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(34, 211, 238, 0.08);
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.root :global(.modal-callout) {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.root :global(.modal-callout-info) {
|
||||
border-color: rgba(56, 189, 248, 0.24);
|
||||
background: rgba(14, 165, 233, 0.08);
|
||||
}
|
||||
|
||||
.root :global(.modal-section-heading) {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.root :global(.modal-section-kicker) {
|
||||
color: var(--accent-cyan);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.root :global(.modal-section-note) {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
"use client";
|
||||
import clsx from "clsx";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useEffect } from "react";
|
||||
import styles from "./Dashboard.module.css";
|
||||
import detailChromeStyles from "./DetailPanelChrome.module.css";
|
||||
import modalChromeStyles from "./ModalChrome.module.css";
|
||||
import {
|
||||
DashboardStoreProvider,
|
||||
useDashboardStore,
|
||||
@@ -92,7 +95,13 @@ function DashboardScreen() {
|
||||
!activeSummary;
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<div
|
||||
className={clsx(
|
||||
styles.root,
|
||||
detailChromeStyles.root,
|
||||
modalChromeStyles.root,
|
||||
)}
|
||||
>
|
||||
<MapCanvas />
|
||||
<HeaderBar />
|
||||
<CitySidebar />
|
||||
|
||||
Reference in New Issue
Block a user