Simplify homepage focus card modules
This commit is contained in:
2569718930@qq.com
@@ -73,6 +73,42 @@
|
||||
linear-gradient(180deg, #040914 0%, #02050d 100%);
|
||||
}
|
||||
|
||||
:global(html.light) .root {
|
||||
--bg-primary: #edf5ff;
|
||||
--bg-secondary: #f7fbff;
|
||||
--bg-card: #ffffff;
|
||||
--bg-glass: rgba(248, 252, 255, 0.84);
|
||||
--border-glass: rgba(48, 77, 112, 0.18);
|
||||
--border-subtle: rgba(48, 77, 112, 0.1);
|
||||
--text-primary: #0b1726;
|
||||
--text-secondary: #42546c;
|
||||
--text-muted: #6b7b91;
|
||||
background: #edf5ff;
|
||||
color: #0b1726;
|
||||
background-image:
|
||||
radial-gradient(circle at 18% 18%, rgba(14, 165, 233, 0.16), transparent 25%),
|
||||
radial-gradient(circle at 82% 12%, rgba(59, 130, 246, 0.12), transparent 22%),
|
||||
linear-gradient(180deg, #f8fbff 0%, #e9f3ff 100%);
|
||||
}
|
||||
|
||||
:global(html.light) .root :global(.header),
|
||||
:global(html.light) .root :global(.city-list),
|
||||
:global(html.light) .root :global(.home-intelligence-panel.full),
|
||||
:global(html.light) .root :global(.home-opportunity-strip),
|
||||
:global(html.light) .root :global(.home-summary-card),
|
||||
:global(html.light) .root :global(.opportunity-card),
|
||||
:global(html.light) .root :global(.home-deb-card),
|
||||
:global(html.light) .root :global(.home-card-section) {
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
color: #0b1726;
|
||||
border-color: rgba(48, 77, 112, 0.18);
|
||||
}
|
||||
|
||||
:global(html.light) .root :global(.map) {
|
||||
background: #dbeafe;
|
||||
filter: saturate(0.95) brightness(1.12);
|
||||
}
|
||||
|
||||
/* ── Map ── */
|
||||
.root :global(.map) {
|
||||
position: absolute;
|
||||
@@ -1217,6 +1253,9 @@
|
||||
transparent 32%
|
||||
),
|
||||
linear-gradient(165deg, rgba(3, 10, 22, 0.96), rgba(5, 18, 38, 0.94));
|
||||
box-shadow:
|
||||
inset 1px 0 0 rgba(255, 255, 255, 0.04),
|
||||
-10px 0 34px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.root :global(.home-intelligence-panel.full::-webkit-scrollbar) {
|
||||
@@ -1348,32 +1387,82 @@
|
||||
|
||||
.root :global(.home-weather-hero) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 92px;
|
||||
gap: 8px 16px;
|
||||
grid-template-columns: minmax(0, 1fr) 130px;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(34, 211, 238, 0.14);
|
||||
border-radius: 18px;
|
||||
background:
|
||||
radial-gradient(circle at 88% 24%, rgba(245, 158, 11, 0.12), transparent 24%),
|
||||
linear-gradient(180deg, rgba(8, 16, 30, 0.62), rgba(4, 10, 22, 0.36));
|
||||
}
|
||||
|
||||
.root :global(.home-weather-hero strong) {
|
||||
.root :global(.home-weather-main strong) {
|
||||
display: block;
|
||||
color: #f8fafc;
|
||||
font-size: 58px;
|
||||
font-size: 62px;
|
||||
font-weight: 900;
|
||||
line-height: 0.96;
|
||||
letter-spacing: -0.08em;
|
||||
}
|
||||
|
||||
.root :global(.home-weather-hero span) {
|
||||
.root :global(.home-weather-label),
|
||||
.root :global(.home-weather-sub),
|
||||
.root :global(.home-weather-stat span),
|
||||
.root :global(.home-weather-stat small) {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: rgba(148, 163, 184, 0.88);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.root :global(.home-weather-label) {
|
||||
margin-bottom: 8px;
|
||||
color: #67e8f9;
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.root :global(.home-weather-sub) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.root :global(.home-weather-side) {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.root :global(.home-weather-icon) {
|
||||
position: relative;
|
||||
width: 88px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.root :global(.home-weather-stat) {
|
||||
min-width: 118px;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.12);
|
||||
border-radius: 12px;
|
||||
background: rgba(2, 8, 18, 0.35);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.root :global(.home-weather-stat strong) {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
color: #f8fafc;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.root :global(.home-weather-stat small) {
|
||||
margin-top: 2px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.root :global(.home-weather-icon .sun),
|
||||
.root :global(.home-weather-icon .mist),
|
||||
.root :global(.home-weather-icon .wind),
|
||||
|
||||
@@ -9,7 +9,10 @@ import {
|
||||
RotateCw,
|
||||
BookOpen,
|
||||
MoreHorizontal,
|
||||
Moon,
|
||||
Sun,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useDashboardStore } from "@/hooks/useDashboardStore";
|
||||
import { useI18n } from "@/hooks/useI18n";
|
||||
|
||||
@@ -37,6 +40,7 @@ export function HeaderBar({
|
||||
const store = useDashboardStore();
|
||||
const { locale, t } = useI18n();
|
||||
const pathname = usePathname();
|
||||
const [theme, setTheme] = useState<"dark" | "light">("dark");
|
||||
const isAuthenticated = store.proAccess.authenticated;
|
||||
const docsHref = "/docs/intro";
|
||||
const docsActive = pathname?.startsWith("/docs");
|
||||
@@ -119,6 +123,25 @@ export function HeaderBar({
|
||||
? `Pro ${Math.max(expiryInfo?.daysLeft || 0, 0)}d left`
|
||||
: `Pro 还剩 ${Math.max(expiryInfo?.daysLeft || 0, 0)} 天`;
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme =
|
||||
typeof window !== "undefined"
|
||||
? window.localStorage.getItem("polyweather_theme")
|
||||
: null;
|
||||
const nextTheme = savedTheme === "light" ? "light" : "dark";
|
||||
setTheme(nextTheme);
|
||||
document.documentElement.classList.toggle("dark", nextTheme === "dark");
|
||||
document.documentElement.classList.toggle("light", nextTheme === "light");
|
||||
}, []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
const nextTheme = theme === "dark" ? "light" : "dark";
|
||||
setTheme(nextTheme);
|
||||
document.documentElement.classList.toggle("dark", nextTheme === "dark");
|
||||
document.documentElement.classList.toggle("light", nextTheme === "light");
|
||||
window.localStorage.setItem("polyweather_theme", nextTheme);
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="brand">
|
||||
@@ -160,6 +183,20 @@ export function HeaderBar({
|
||||
<RotateCw size={16} strokeWidth={2} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="header-utility-btn"
|
||||
aria-label={theme === "dark" ? "切换到明亮模式" : "切换到暗黑模式"}
|
||||
title={theme === "dark" ? "明亮模式" : "暗黑模式"}
|
||||
onClick={toggleTheme}
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<Sun size={15} strokeWidth={2} />
|
||||
) : (
|
||||
<Moon size={15} strokeWidth={2} />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<Link
|
||||
href={docsHref}
|
||||
className={clsx("header-utility-btn", docsActive && "active")}
|
||||
|
||||
@@ -27,7 +27,6 @@ import {
|
||||
getTemperatureChartData,
|
||||
getWeatherSummary,
|
||||
} from "@/lib/dashboard-utils";
|
||||
import { normalizeObservationSourceLabel } from "@/lib/source-labels";
|
||||
|
||||
const loadHistoryModal = () =>
|
||||
import("@/components/dashboard/HistoryModal").then(
|
||||
@@ -181,21 +180,6 @@ function formatEdge(value: number | null | undefined) {
|
||||
return `${sign}${normalized.toFixed(1)}%`;
|
||||
}
|
||||
|
||||
function getModelLabels(detail?: CityDetail | null) {
|
||||
const date = detail?.local_date || "";
|
||||
const dailyModels = date ? detail?.multi_model_daily?.[date]?.models : null;
|
||||
const modelMap = dailyModels || detail?.multi_model || {};
|
||||
const labels = Object.keys(modelMap)
|
||||
.filter((key) => Number.isFinite(Number(modelMap[key])))
|
||||
.map((key) =>
|
||||
key
|
||||
.replace(/^open_meteo_/i, "")
|
||||
.replace(/_/g, " ")
|
||||
.replace(/\b\w/g, (letter) => letter.toUpperCase()),
|
||||
);
|
||||
return ["DEB", ...labels].slice(0, 6);
|
||||
}
|
||||
|
||||
function buildSparklinePoints(values: number[] | undefined) {
|
||||
if (!values?.length) return "";
|
||||
const width = 92;
|
||||
@@ -724,13 +708,6 @@ function HomeIntelligencePanel({ snapshots }: { snapshots: CitySnapshot[] }) {
|
||||
city.risk_level ||
|
||||
summary?.risk?.level ||
|
||||
detail?.risk?.level;
|
||||
const deviation = summary?.deviation_monitor || detail?.deviation_monitor;
|
||||
const observationSource = normalizeObservationSourceLabel(
|
||||
summary?.current?.settlement_source_label ||
|
||||
detail?.current?.settlement_source_label ||
|
||||
city.settlement_source_label,
|
||||
"METAR",
|
||||
);
|
||||
const probabilityBuckets =
|
||||
detail?.probabilities?.distribution ||
|
||||
(detail?.local_date
|
||||
@@ -738,7 +715,6 @@ function HomeIntelligencePanel({ snapshots }: { snapshots: CitySnapshot[] }) {
|
||||
: undefined) ||
|
||||
[];
|
||||
const displayedProbabilities = probabilityBuckets.slice(0, 4);
|
||||
const modelLabels = getModelLabels(detail);
|
||||
const marketScan = detail?.market_scan;
|
||||
const marketBucket =
|
||||
marketScan?.temperature_bucket || marketScan?.top_buckets?.[0] || null;
|
||||
@@ -772,9 +748,7 @@ function HomeIntelligencePanel({ snapshots }: { snapshots: CitySnapshot[] }) {
|
||||
maxTime,
|
||||
localTime,
|
||||
riskLevel,
|
||||
observationSource,
|
||||
displayedProbabilities,
|
||||
modelLabels,
|
||||
marketScan,
|
||||
showOpportunityLabel: !marketScan || spotlight.tradableOpportunity,
|
||||
marketLabel: marketBucket
|
||||
@@ -823,29 +797,6 @@ function HomeIntelligencePanel({ snapshots }: { snapshots: CitySnapshot[] }) {
|
||||
? "Pro locked"
|
||||
: "PRO 锁定",
|
||||
forecastDays: buildHomeForecastDays(detail, locale),
|
||||
keySignals: [
|
||||
{
|
||||
active: Number(marketEdge) > 0,
|
||||
label:
|
||||
locale === "en-US" ? "DEB > Market implied" : "DEB 高于市场隐含",
|
||||
tone: "green",
|
||||
},
|
||||
{
|
||||
active:
|
||||
deviation?.trend === "expanding" || deviation?.direction === "hot",
|
||||
label: locale === "en-US" ? "Rising temps trend" : "升温趋势",
|
||||
tone: "green",
|
||||
},
|
||||
{
|
||||
active: Boolean(detail?.peak?.hours?.length),
|
||||
label: detail?.peak?.hours?.length
|
||||
? `${locale === "en-US" ? "High impact window" : "高影响窗口"} ${detail.peak.hours[0]}-${detail.peak.hours[detail.peak.hours.length - 1]}`
|
||||
: locale === "en-US"
|
||||
? "High impact window pending"
|
||||
: "高影响窗口待确认",
|
||||
tone: "amber",
|
||||
},
|
||||
],
|
||||
};
|
||||
}, [
|
||||
locale,
|
||||
@@ -867,9 +818,7 @@ function HomeIntelligencePanel({ snapshots }: { snapshots: CitySnapshot[] }) {
|
||||
maxTime,
|
||||
localTime,
|
||||
riskLevel,
|
||||
observationSource,
|
||||
displayedProbabilities,
|
||||
modelLabels,
|
||||
marketScan,
|
||||
tradableOpportunity,
|
||||
showOpportunityLabel,
|
||||
@@ -897,7 +846,6 @@ function HomeIntelligencePanel({ snapshots }: { snapshots: CitySnapshot[] }) {
|
||||
marketModelLabel,
|
||||
proLabel,
|
||||
forecastDays,
|
||||
keySignals,
|
||||
} = spotlightView;
|
||||
const subtitle = `${cityCode} · ${localizedAirportName}`;
|
||||
const proCard = (
|
||||
@@ -975,34 +923,38 @@ function HomeIntelligencePanel({ snapshots }: { snapshots: CitySnapshot[] }) {
|
||||
{proCard}
|
||||
|
||||
<div className="home-weather-hero">
|
||||
<div>
|
||||
<div className="home-weather-main">
|
||||
<span className="home-weather-label">
|
||||
{locale === "en-US" ? "Observed now" : "当前实况"}
|
||||
</span>
|
||||
<strong>{formatTemperature(currentTemp, symbol)}</strong>
|
||||
<span>
|
||||
{locale === "en-US" ? "Feels like" : "体感接近"}{" "}
|
||||
<span className="home-weather-sub">
|
||||
{locale === "en-US" ? "Feels near" : "体感接近"}{" "}
|
||||
{formatTemperature(currentTemp, symbol)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={clsx("home-weather-icon", `weather-${weatherIconKind}`)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span className="sun" />
|
||||
<span className="cloud cloud-a" />
|
||||
<span className="cloud cloud-b" />
|
||||
<span className="mist mist-a" />
|
||||
<span className="mist mist-b" />
|
||||
<span className="wind wind-a" />
|
||||
<span className="wind wind-b" />
|
||||
<span className="rain rain-a" />
|
||||
<span className="rain rain-b" />
|
||||
<span className="rain rain-c" />
|
||||
<span className="bolt" />
|
||||
</div>
|
||||
<div className="home-max-so-far">
|
||||
<span>{locale === "en-US" ? "Max so far" : "当前最高"}</span>
|
||||
<strong>
|
||||
{formatTemperature(maxSoFar, symbol)} <small>{maxTime}</small>
|
||||
</strong>
|
||||
<div className="home-weather-side">
|
||||
<div
|
||||
className={clsx("home-weather-icon", `weather-${weatherIconKind}`)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span className="sun" />
|
||||
<span className="cloud cloud-a" />
|
||||
<span className="cloud cloud-b" />
|
||||
<span className="mist mist-a" />
|
||||
<span className="mist mist-b" />
|
||||
<span className="wind wind-a" />
|
||||
<span className="wind wind-b" />
|
||||
<span className="rain rain-a" />
|
||||
<span className="rain rain-b" />
|
||||
<span className="rain rain-c" />
|
||||
<span className="bolt" />
|
||||
</div>
|
||||
<div className="home-weather-stat">
|
||||
<span>{locale === "en-US" ? "Day high" : "日内高点"}</span>
|
||||
<strong>{formatTemperature(maxSoFar, symbol)}</strong>
|
||||
<small>{maxTime}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1095,18 +1047,6 @@ function HomeIntelligencePanel({ snapshots }: { snapshots: CitySnapshot[] }) {
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="home-card-section">
|
||||
<h3>{locale === "en-US" ? "Model stack" : "模型栈"}</h3>
|
||||
<div className="home-model-stack">
|
||||
{modelLabels.map((label) => (
|
||||
<span key={label}>
|
||||
<i />
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="home-card-section probability">
|
||||
<h3>
|
||||
{probabilityTitle} <small>{dayMaxLabel}</small>
|
||||
@@ -1145,7 +1085,8 @@ function HomeIntelligencePanel({ snapshots }: { snapshots: CitySnapshot[] }) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={clsx("home-card-section market", !isPro && "locked")}>
|
||||
{tradableOpportunity ? (
|
||||
<div className={clsx("home-card-section market", !isPro && "locked")}>
|
||||
<div className="home-market-header">
|
||||
<h3>
|
||||
{marketTitle} <small>ⓘ</small>
|
||||
@@ -1191,20 +1132,8 @@ function HomeIntelligencePanel({ snapshots }: { snapshots: CitySnapshot[] }) {
|
||||
{locale === "en-US" ? "Unlock market layer" : "解锁市场层"}
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="home-card-section key-signals">
|
||||
<h3>{locale === "en-US" ? "Key signals" : "关键信号"}</h3>
|
||||
<ul>
|
||||
{keySignals.map((signal) => (
|
||||
<li key={signal.label}>
|
||||
<span>{signal.label}</span>
|
||||
<i className={clsx(signal.tone, signal.active && "active")} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p>{observationSource}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
</aside>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user