feat: implement history and future forecast modals, alongside a new Pro feature paywall component.
This commit is contained in:
2569718930@qq.com
@@ -550,246 +550,180 @@ 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",
|
||||
store.loadingState.marketScan && "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"
|
||||
: "刷新数据"
|
||||
}
|
||||
>
|
||||
<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>
|
||||
<button
|
||||
type="button"
|
||||
className="modal-close"
|
||||
aria-label={
|
||||
isToday ? t("future.closeTodayAria") : t("future.closeDateAria")
|
||||
}
|
||||
onClick={store.closeFutureModal}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
{isProLoading ? (
|
||||
<div
|
||||
className="modal-content large"
|
||||
style={{ padding: "40px", textAlign: "center" }}
|
||||
>
|
||||
<div style={{ color: "var(--text-muted)" }}>
|
||||
{t("dashboard.loading")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-body future-modal-body">
|
||||
{isProLoading ? (
|
||||
<div
|
||||
style={{
|
||||
color: "var(--text-muted)",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
padding: "28px 0",
|
||||
}}
|
||||
) : !isPro ? (
|
||||
<ProFeaturePaywall
|
||||
feature={isToday ? "today" : "future"}
|
||||
onClose={store.closeFutureModal}
|
||||
/>
|
||||
) : (
|
||||
<div className="modal-content large future-modal">
|
||||
<div className="modal-header">
|
||||
<h2
|
||||
id="future-modal-title"
|
||||
className="future-modal-title-with-actions"
|
||||
>
|
||||
{t("dashboard.loading")}
|
||||
</div>
|
||||
) : !isPro ? (
|
||||
<ProFeaturePaywall feature={isToday ? "today" : "future"} />
|
||||
) : isToday ? (
|
||||
<div className="future-v2-layout">
|
||||
<aside className="future-v2-left">
|
||||
<section className="future-v2-card future-v2-hero-card">
|
||||
<h3 className="future-v2-hero-title">
|
||||
{locale === "en-US"
|
||||
? "Current Conditions"
|
||||
: "实况与气象特征"}
|
||||
</h3>
|
||||
<div className="future-v2-hero-main">
|
||||
<div className="future-v2-hero-temp">{currentTempText}</div>
|
||||
<div className="future-v2-hero-divider" />
|
||||
<div className="future-v2-hero-weather">
|
||||
<span className="future-v2-hero-icon">
|
||||
<WeatherIcon
|
||||
emoji={weatherSummary.weatherIcon}
|
||||
size={42}
|
||||
/>
|
||||
</span>
|
||||
<span>{weatherSummary.weatherText}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="future-v2-hero-obs">
|
||||
@{detail.current?.obs_time || "--"}
|
||||
</div>
|
||||
<div className="future-v2-mini-grid">
|
||||
<div className="future-v2-mini-item">
|
||||
<span>
|
||||
{locale === "en-US" ? "High So Far" : "目前最高温"}
|
||||
</span>
|
||||
<strong>
|
||||
{topObservedTemp ?? "--"}
|
||||
{detail.temp_symbol}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>{locale === "en-US" ? "Sunrise" : "日出时间"}</span>
|
||||
<strong>{detail.forecast?.sunrise || "--"}</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>{locale === "en-US" ? "Sunset" : "日落时间"}</span>
|
||||
<strong>{detail.forecast?.sunset || "--"}</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>
|
||||
{locale === "en-US" ? "Sunshine" : "日照时长"}
|
||||
</span>
|
||||
<strong>
|
||||
{detail.forecast?.sunshine_hours != null
|
||||
? `${detail.forecast.sunshine_hours}h`
|
||||
: "--"}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="future-v2-card">
|
||||
<h4 className="future-v2-card-title">
|
||||
{locale === "en-US" ? "Current Metrics" : "当前指标"}
|
||||
</h4>
|
||||
<div className="future-v2-mini-grid future-v2-mini-grid-tight">
|
||||
<div className="future-v2-mini-item">
|
||||
<span>{locale === "en-US" ? "Humidity" : "湿度"}</span>
|
||||
<strong>{humidityText}</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>{locale === "en-US" ? "Dew Point" : "露点"}</span>
|
||||
<strong>{dewpointText}</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>{locale === "en-US" ? "Wind" : "风速"}</span>
|
||||
<strong>{windText}</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>
|
||||
{locale === "en-US" ? "Visibility" : "能见度"}
|
||||
</span>
|
||||
<strong>{visibilityText}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="future-v2-card">
|
||||
<h4 className="future-v2-card-title">
|
||||
{locale === "en-US" ? "Market Alignment" : "市场对照"}
|
||||
</h4>
|
||||
<div className="future-v2-market-v3">
|
||||
{/* Loading Overlay */}
|
||||
{store.loadingState.marketScan && (
|
||||
<div className="market-layer-loading-overlay">
|
||||
<div
|
||||
className="loading-spinner"
|
||||
style={{
|
||||
marginBottom: "8px",
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
borderWidth: "2px",
|
||||
}}
|
||||
/>
|
||||
{locale === "en-US"
|
||||
? "Crunching Polymarket Edges..."
|
||||
: "正在计算市场对手盘..."}
|
||||
<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",
|
||||
store.loadingState.marketScan && "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"
|
||||
: "刷新数据"
|
||||
}
|
||||
>
|
||||
<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>
|
||||
<button
|
||||
type="button"
|
||||
className="modal-close"
|
||||
aria-label={
|
||||
isToday ? t("future.closeTodayAria") : t("future.closeDateAria")
|
||||
}
|
||||
onClick={store.closeFutureModal}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body future-modal-body">
|
||||
{isToday ? (
|
||||
<div className="future-v2-layout">
|
||||
<aside className="future-v2-left">
|
||||
<section className="future-v2-card future-v2-hero-card">
|
||||
<h3 className="future-v2-hero-title">
|
||||
{locale === "en-US"
|
||||
? "Current Conditions"
|
||||
: "实况与气象特征"}
|
||||
</h3>
|
||||
<div className="future-v2-hero-main">
|
||||
<div className="future-v2-hero-temp">
|
||||
{currentTempText}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Layer 1: Target & Edge */}
|
||||
<div className="market-layer-target">
|
||||
<div className="market-target-header">
|
||||
<span>
|
||||
{locale === "en-US"
|
||||
? "Target Bucket:"
|
||||
: "结算温度区间："}
|
||||
<div className="future-v2-hero-divider" />
|
||||
<div className="future-v2-hero-weather">
|
||||
<span className="future-v2-hero-icon">
|
||||
<WeatherIcon
|
||||
emoji={weatherSummary.weatherIcon}
|
||||
size={42}
|
||||
/>
|
||||
</span>
|
||||
<strong className="market-target-bucket">
|
||||
{settlementBucketLabel}
|
||||
</strong>
|
||||
<span>{weatherSummary.weatherText}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Layer 3: Context */}
|
||||
<div className="market-layer-context">
|
||||
<div className="market-sub-title">
|
||||
👀 {locale === "en-US" ? "Market Radar" : "情绪雷达"}
|
||||
</div>
|
||||
<div className="market-context-row">
|
||||
<div className="future-v2-hero-obs">
|
||||
@{detail.current?.obs_time || "--"}
|
||||
</div>
|
||||
<div className="future-v2-mini-grid">
|
||||
<div className="future-v2-mini-item">
|
||||
<span>
|
||||
{locale === "en-US"
|
||||
? "Top Volume Bucket:"
|
||||
: "市场当前押注最热:"}
|
||||
{locale === "en-US" ? "High So Far" : "目前最高温"}
|
||||
</span>
|
||||
<strong>
|
||||
{hottestBucketLabel}{" "}
|
||||
{hottestBucketProb !== "--"
|
||||
? `(${hottestBucketProb})`
|
||||
: ""}
|
||||
{topObservedTemp ?? "--"}
|
||||
{detail.temp_symbol}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>
|
||||
{locale === "en-US" ? "Sunrise" : "日出时间"}
|
||||
</span>
|
||||
<strong>{detail.forecast?.sunrise || "--"}</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>
|
||||
{locale === "en-US" ? "Sunset" : "日落时间"}
|
||||
</span>
|
||||
<strong>{detail.forecast?.sunset || "--"}</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>
|
||||
{locale === "en-US" ? "Sunshine" : "日照时长"}
|
||||
</span>
|
||||
<strong>
|
||||
{detail.forecast?.sunshine_hours != null
|
||||
? `${detail.forecast.sunshine_hours}h`
|
||||
: "--"}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="future-v2-market-signal mt-3">
|
||||
{locale === "en-US" ? "Signal" : "信号"}:{" "}
|
||||
<strong>{marketSignal}</strong>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<DailyTemperatureChart dateStr={dateStr} />
|
||||
</section>
|
||||
<section className="future-v2-card">
|
||||
<h4 className="future-v2-card-title">
|
||||
{locale === "en-US" ? "Current Metrics" : "当前指标"}
|
||||
</h4>
|
||||
<div className="future-v2-mini-grid future-v2-mini-grid-tight">
|
||||
<div className="future-v2-mini-item">
|
||||
<span>{locale === "en-US" ? "Humidity" : "湿度"}</span>
|
||||
<strong>{humidityText}</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>{locale === "en-US" ? "Dew Point" : "露点"}</span>
|
||||
<strong>{dewpointText}</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>{locale === "en-US" ? "Wind" : "风速"}</span>
|
||||
<strong>{windText}</strong>
|
||||
</div>
|
||||
<div className="future-v2-mini-item">
|
||||
<span>
|
||||
{locale === "en-US" ? "Visibility" : "能见度"}
|
||||
</span>
|
||||
<strong>{visibilityText}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="future-modal-grid">
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.probability")}</h3>
|
||||
<div style={{ position: "relative", minHeight: "120px" }}>
|
||||
<section className="future-v2-card">
|
||||
<h4 className="future-v2-card-title">
|
||||
{locale === "en-US" ? "Market Alignment" : "市场对照"}
|
||||
</h4>
|
||||
<div className="future-v2-market-v3">
|
||||
{/* Loading Overlay */}
|
||||
{store.loadingState.marketScan && (
|
||||
<div className="market-layer-loading-overlay">
|
||||
@@ -804,16 +738,247 @@ export function FutureForecastModal() {
|
||||
/>
|
||||
{locale === "en-US"
|
||||
? "Crunching Polymarket Edges..."
|
||||
: "正在同步市场挂单..."}
|
||||
: "正在计算市场对手盘..."}
|
||||
</div>
|
||||
)}
|
||||
<ProbabilityDistribution
|
||||
|
||||
{/* Layer 1: Target & Edge */}
|
||||
<div className="market-layer-target">
|
||||
<div className="market-target-header">
|
||||
<span>
|
||||
{locale === "en-US"
|
||||
? "Target Bucket:"
|
||||
: "结算温度区间："}
|
||||
</span>
|
||||
<strong className="market-target-bucket">
|
||||
{settlementBucketLabel}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Layer 3: Context */}
|
||||
<div className="market-layer-context">
|
||||
<div className="market-sub-title">
|
||||
👀 {locale === "en-US" ? "Market Radar" : "情绪雷达"}
|
||||
</div>
|
||||
<div className="market-context-row">
|
||||
<span>
|
||||
{locale === "en-US"
|
||||
? "Top Volume Bucket:"
|
||||
: "市场当前押注最热:"}
|
||||
</span>
|
||||
<strong>
|
||||
{hottestBucketLabel}{" "}
|
||||
{hottestBucketProb !== "--"
|
||||
? `(${hottestBucketProb})`
|
||||
: ""}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="future-v2-market-signal mt-3">
|
||||
{locale === "en-US" ? "Signal" : "信号"}:{" "}
|
||||
<strong>{marketSignal}</strong>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<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>
|
||||
<DailyTemperatureChart dateStr={dateStr} />
|
||||
</section>
|
||||
|
||||
<div className="future-modal-grid">
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.probability")}</h3>
|
||||
<div style={{ position: "relative", minHeight: "120px" }}>
|
||||
{/* Loading Overlay */}
|
||||
{store.loadingState.marketScan && (
|
||||
<div className="market-layer-loading-overlay">
|
||||
<div
|
||||
className="loading-spinner"
|
||||
style={{
|
||||
marginBottom: "8px",
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
borderWidth: "2px",
|
||||
}}
|
||||
/>
|
||||
{locale === "en-US"
|
||||
? "Crunching Polymarket Edges..."
|
||||
: "正在同步市场挂单..."}
|
||||
</div>
|
||||
)}
|
||||
<ProbabilityDistribution
|
||||
detail={detail}
|
||||
targetDate={dateStr}
|
||||
hideTitle
|
||||
marketScan={marketScan}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.models")}</h3>
|
||||
<ModelForecast
|
||||
detail={detail}
|
||||
targetDate={dateStr}
|
||||
hideTitle
|
||||
marketScan={marketScan}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="future-modal-grid">
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.structureToday")}</h3>
|
||||
<div className="future-front-score">
|
||||
<div className="future-front-bar" style={barStyle}>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: "50%",
|
||||
width: "2px",
|
||||
background: "rgba(255, 255, 255, 0.2)",
|
||||
transform: "translateX(-50%)",
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="future-front-meta">
|
||||
<span className="future-front-pill">
|
||||
{t("future.judgement")}: {view.front.label}
|
||||
</span>
|
||||
<span className="future-front-pill">
|
||||
{t("future.confidence")}:{" "}
|
||||
{t(`confidence.${view.front.confidence}`)}
|
||||
</span>
|
||||
<span className="future-front-pill">
|
||||
{t("future.maxPrecip")}:{" "}
|
||||
{Math.round(view.front.precipMax)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="future-trend-grid">
|
||||
{view.front.metrics.slice(0, 6).map((metric) => (
|
||||
<div key={metric.label} className="future-trend-card">
|
||||
<div className="future-trend-label">
|
||||
{metric.label}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"future-trend-value",
|
||||
metric.tone === "warm" && "warm",
|
||||
metric.tone === "cold" && "cold",
|
||||
)}
|
||||
>
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="future-trend-note">
|
||||
{metric.note}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.ai")}</h3>
|
||||
<div className="future-text-block">
|
||||
{ai.summary ? (
|
||||
<div>{ai.summary}</div>
|
||||
) : (
|
||||
<div>{t("future.noAi")}</div>
|
||||
)}
|
||||
{ai.bullets.length > 0 && (
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
{ai.bullets.slice(0, 3).map((item) => (
|
||||
<div key={item}>{item}</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ marginTop: "12px" }}>
|
||||
{nowcastRows.slice(0, 4).map(([label, value]) => (
|
||||
<div key={label}>
|
||||
<strong>{label}: </strong>
|
||||
{value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{riskLines.length > 0 && (
|
||||
<div style={{ marginTop: "12px" }}>
|
||||
<strong>
|
||||
{locale === "en-US" ? "Risk" : "风险"}:{" "}
|
||||
</strong>
|
||||
{riskLines[0]}
|
||||
</div>
|
||||
)}
|
||||
{climateDrivers.length > 0 && (
|
||||
<div style={{ marginTop: "8px" }}>
|
||||
<strong>
|
||||
{locale === "en-US" ? "Climate" : "气候"}:{" "}
|
||||
</strong>
|
||||
{climateDrivers[0].text}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="history-stats">
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("future.targetForecast")}</span>
|
||||
<span className="val">
|
||||
{view.forecastEntry?.max_temp ?? "--"}
|
||||
{detail.temp_symbol}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("future.deb")}</span>
|
||||
<span className="val">
|
||||
{view.deb ?? "--"}
|
||||
{detail.temp_symbol}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("future.mu")}</span>
|
||||
<span className="val">
|
||||
{view.mu != null
|
||||
? `${view.mu.toFixed(1)}${detail.temp_symbol}`
|
||||
: "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("future.score")}</span>
|
||||
<span className="val">
|
||||
{view.front.score > 0 ? "+" : ""}
|
||||
{view.front.score}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.targetTempTrend")}</h3>
|
||||
<DailyTemperatureChart dateStr={dateStr} />
|
||||
</section>
|
||||
|
||||
<div className="future-modal-grid">
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.probability")}</h3>
|
||||
<ProbabilityDistribution
|
||||
detail={detail}
|
||||
targetDate={dateStr}
|
||||
hideTitle
|
||||
marketScan={marketScan}
|
||||
/>
|
||||
</section>
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.models")}</h3>
|
||||
@@ -824,166 +989,11 @@ export function FutureForecastModal() {
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="future-modal-grid">
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.structureToday")}</h3>
|
||||
<div className="future-front-score">
|
||||
<div className="future-front-bar" style={barStyle}>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: "50%",
|
||||
width: "2px",
|
||||
background: "rgba(255, 255, 255, 0.2)",
|
||||
transform: "translateX(-50%)",
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="future-front-meta">
|
||||
<span className="future-front-pill">
|
||||
{t("future.judgement")}: {view.front.label}
|
||||
</span>
|
||||
<span className="future-front-pill">
|
||||
{t("future.confidence")}:{" "}
|
||||
{t(`confidence.${view.front.confidence}`)}
|
||||
</span>
|
||||
<span className="future-front-pill">
|
||||
{t("future.maxPrecip")}:{" "}
|
||||
{Math.round(view.front.precipMax)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="future-trend-grid">
|
||||
{view.front.metrics.slice(0, 6).map((metric) => (
|
||||
<div key={metric.label} className="future-trend-card">
|
||||
<div className="future-trend-label">
|
||||
{metric.label}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"future-trend-value",
|
||||
metric.tone === "warm" && "warm",
|
||||
metric.tone === "cold" && "cold",
|
||||
)}
|
||||
>
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="future-trend-note">{metric.note}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.ai")}</h3>
|
||||
<div className="future-text-block">
|
||||
{ai.summary ? (
|
||||
<div>{ai.summary}</div>
|
||||
) : (
|
||||
<div>{t("future.noAi")}</div>
|
||||
)}
|
||||
{ai.bullets.length > 0 && (
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
{ai.bullets.slice(0, 3).map((item) => (
|
||||
<div key={item}>{item}</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ marginTop: "12px" }}>
|
||||
{nowcastRows.slice(0, 4).map(([label, value]) => (
|
||||
<div key={label}>
|
||||
<strong>{label}: </strong>
|
||||
{value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{riskLines.length > 0 && (
|
||||
<div style={{ marginTop: "12px" }}>
|
||||
<strong>
|
||||
{locale === "en-US" ? "Risk" : "风险"}:{" "}
|
||||
</strong>
|
||||
{riskLines[0]}
|
||||
</div>
|
||||
)}
|
||||
{climateDrivers.length > 0 && (
|
||||
<div style={{ marginTop: "8px" }}>
|
||||
<strong>
|
||||
{locale === "en-US" ? "Climate" : "气候"}:{" "}
|
||||
</strong>
|
||||
{climateDrivers[0].text}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="history-stats">
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("future.targetForecast")}</span>
|
||||
<span className="val">
|
||||
{view.forecastEntry?.max_temp ?? "--"}
|
||||
{detail.temp_symbol}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("future.deb")}</span>
|
||||
<span className="val">
|
||||
{view.deb ?? "--"}
|
||||
{detail.temp_symbol}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("future.mu")}</span>
|
||||
<span className="val">
|
||||
{view.mu != null
|
||||
? `${view.mu.toFixed(1)}${detail.temp_symbol}`
|
||||
: "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("future.score")}</span>
|
||||
<span className="val">
|
||||
{view.front.score > 0 ? "+" : ""}
|
||||
{view.front.score}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.targetTempTrend")}</h3>
|
||||
<DailyTemperatureChart dateStr={dateStr} />
|
||||
</section>
|
||||
|
||||
<div className="future-modal-grid">
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.probability")}</h3>
|
||||
<ProbabilityDistribution
|
||||
detail={detail}
|
||||
targetDate={dateStr}
|
||||
hideTitle
|
||||
marketScan={marketScan}
|
||||
/>
|
||||
</section>
|
||||
<section className="future-modal-section">
|
||||
<h3>{t("future.models")}</h3>
|
||||
<ModelForecast
|
||||
detail={detail}
|
||||
targetDate={dateStr}
|
||||
hideTitle
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,101 +20,101 @@ function HistoryChart() {
|
||||
store.selectedCity === "ankara" &&
|
||||
summary.mgms.some((value) => value != null);
|
||||
|
||||
const canvasRef = useChart(
|
||||
() => {
|
||||
const datasets: NonNullable<ChartConfiguration<"line">["data"]>["datasets"] = [
|
||||
{
|
||||
backgroundColor: "rgba(248, 113, 113, 0.1)",
|
||||
borderColor: "#f87171",
|
||||
borderWidth: 2,
|
||||
data: summary.actuals,
|
||||
label: locale === "en-US" ? "Observed High" : "实测最高温",
|
||||
pointBackgroundColor: "#f87171",
|
||||
pointBorderColor: "#fff",
|
||||
pointHoverRadius: 7,
|
||||
pointRadius: 5,
|
||||
tension: 0.2,
|
||||
},
|
||||
{
|
||||
backgroundColor: "transparent",
|
||||
borderColor: "#34d399",
|
||||
borderDash: [5, 4],
|
||||
borderWidth: 2,
|
||||
data: summary.debs,
|
||||
label: locale === "en-US" ? "DEB Fusion" : "DEB 融合",
|
||||
pointHoverRadius: 6,
|
||||
pointRadius: 4,
|
||||
tension: 0.2,
|
||||
},
|
||||
];
|
||||
const canvasRef = useChart(() => {
|
||||
const datasets: NonNullable<
|
||||
ChartConfiguration<"line">["data"]
|
||||
>["datasets"] = [
|
||||
{
|
||||
backgroundColor: "rgba(248, 113, 113, 0.1)",
|
||||
borderColor: "#f87171",
|
||||
borderWidth: 2,
|
||||
data: summary.actuals,
|
||||
label: locale === "en-US" ? "Observed High" : "实测最高温",
|
||||
pointBackgroundColor: "#f87171",
|
||||
pointBorderColor: "#fff",
|
||||
pointHoverRadius: 7,
|
||||
pointRadius: 5,
|
||||
tension: 0.2,
|
||||
},
|
||||
{
|
||||
backgroundColor: "transparent",
|
||||
borderColor: "#34d399",
|
||||
borderDash: [5, 4],
|
||||
borderWidth: 2,
|
||||
data: summary.debs,
|
||||
label: locale === "en-US" ? "DEB Fusion" : "DEB 融合",
|
||||
pointHoverRadius: 6,
|
||||
pointRadius: 4,
|
||||
tension: 0.2,
|
||||
},
|
||||
];
|
||||
|
||||
if (hasMgm) {
|
||||
datasets.push({
|
||||
backgroundColor: "transparent",
|
||||
borderColor: "#fb923c",
|
||||
borderWidth: 2,
|
||||
data: summary.mgms,
|
||||
label: locale === "en-US" ? "MGM Official Forecast" : "MGM 官方预报",
|
||||
pointHoverRadius: 6,
|
||||
pointRadius: 4,
|
||||
tension: 0.2,
|
||||
});
|
||||
}
|
||||
if (hasMgm) {
|
||||
datasets.push({
|
||||
backgroundColor: "transparent",
|
||||
borderColor: "#fb923c",
|
||||
borderWidth: 2,
|
||||
data: summary.mgms,
|
||||
label: locale === "en-US" ? "MGM Official Forecast" : "MGM 官方预报",
|
||||
pointHoverRadius: 6,
|
||||
pointRadius: 4,
|
||||
tension: 0.2,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
datasets,
|
||||
labels: summary.dates,
|
||||
},
|
||||
options: {
|
||||
interaction: { intersect: false, mode: "index" },
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
boxHeight: 12,
|
||||
boxWidth: 34,
|
||||
color: "#94a3b8",
|
||||
font: { family: "Inter", size: 14 },
|
||||
padding: 18,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(15, 23, 42, 0.9)",
|
||||
borderColor: "rgba(255, 255, 255, 0.1)",
|
||||
borderWidth: 1,
|
||||
bodyFont: { family: "Inter", size: 13 },
|
||||
titleFont: { family: "Inter", size: 13, weight: 600 },
|
||||
callbacks: {
|
||||
label: (ctx) => `${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}°`,
|
||||
},
|
||||
return {
|
||||
data: {
|
||||
datasets,
|
||||
labels: summary.dates,
|
||||
},
|
||||
options: {
|
||||
interaction: { intersect: false, mode: "index" },
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
boxHeight: 12,
|
||||
boxWidth: 34,
|
||||
color: "#94a3b8",
|
||||
font: { family: "Inter", size: 14 },
|
||||
padding: 18,
|
||||
},
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
ticks: {
|
||||
color: "#64748b",
|
||||
font: { family: "Inter", size: 12 },
|
||||
padding: 8,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
ticks: {
|
||||
color: "#64748b",
|
||||
font: { family: "Inter", size: 12 },
|
||||
padding: 8,
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(15, 23, 42, 0.9)",
|
||||
borderColor: "rgba(255, 255, 255, 0.1)",
|
||||
borderWidth: 1,
|
||||
bodyFont: { family: "Inter", size: 13 },
|
||||
titleFont: { family: "Inter", size: 13, weight: 600 },
|
||||
callbacks: {
|
||||
label: (ctx) =>
|
||||
`${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}°`,
|
||||
},
|
||||
},
|
||||
},
|
||||
type: "line",
|
||||
} satisfies ChartConfiguration<"line">;
|
||||
},
|
||||
[hasMgm, summary, locale],
|
||||
);
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
ticks: {
|
||||
color: "#64748b",
|
||||
font: { family: "Inter", size: 12 },
|
||||
padding: 8,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
ticks: {
|
||||
color: "#64748b",
|
||||
font: { family: "Inter", size: 12 },
|
||||
padding: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
type: "line",
|
||||
} satisfies ChartConfiguration<"line">;
|
||||
}, [hasMgm, summary, locale]);
|
||||
|
||||
if (!summary.recentData.length) return null;
|
||||
|
||||
@@ -150,77 +150,75 @@ 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>
|
||||
<button
|
||||
type="button"
|
||||
className="modal-close"
|
||||
aria-label={t("history.closeAria")}
|
||||
onClick={store.closeHistory}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
{isProLoading ? (
|
||||
<div
|
||||
className="modal-content"
|
||||
style={{ padding: "40px", textAlign: "center" }}
|
||||
>
|
||||
<div style={{ color: "var(--text-muted)" }}>
|
||||
{t("dashboard.loading")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
{isProLoading ? (
|
||||
<div
|
||||
style={{
|
||||
color: "var(--text-muted)",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
padding: "28px 0",
|
||||
}}
|
||||
) : !isPro ? (
|
||||
<ProFeaturePaywall feature="history" onClose={store.closeHistory} />
|
||||
) : (
|
||||
<div className="modal-content history-modal">
|
||||
<div className="modal-header">
|
||||
<h2 id="history-modal-title">
|
||||
{t("history.title", {
|
||||
city: store.selectedCity?.toUpperCase() || "",
|
||||
})}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="modal-close"
|
||||
aria-label={t("history.closeAria")}
|
||||
onClick={store.closeHistory}
|
||||
>
|
||||
{t("dashboard.loading")}
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="history-stats">
|
||||
{isLoading ? (
|
||||
<span style={{ color: "var(--text-muted)" }}>
|
||||
{t("history.loading")}
|
||||
</span>
|
||||
) : error ? (
|
||||
<span style={{ color: "var(--accent-red)" }}>
|
||||
{t("history.error")}
|
||||
</span>
|
||||
) : !summary.recentData.length ? (
|
||||
<span style={{ color: "var(--text-muted)" }}>
|
||||
{t("history.empty")}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("history.hitRate")}</span>
|
||||
<span className="val">
|
||||
{summary.hitRate != null ? `${summary.hitRate}%` : "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("history.mae")}</span>
|
||||
<span className="val">
|
||||
{summary.debMae != null ? `${summary.debMae}°` : "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("history.sample")}</span>
|
||||
<span className="val">
|
||||
{t("history.sampleDays", { count: summary.settledCount })}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : !isPro ? (
|
||||
<ProFeaturePaywall feature="history" />
|
||||
) : (
|
||||
<>
|
||||
<div className="history-stats">
|
||||
{isLoading ? (
|
||||
<span style={{ color: "var(--text-muted)" }}>
|
||||
{t("history.loading")}
|
||||
</span>
|
||||
) : error ? (
|
||||
<span style={{ color: "var(--accent-red)" }}>
|
||||
{t("history.error")}
|
||||
</span>
|
||||
) : !summary.recentData.length ? (
|
||||
<span style={{ color: "var(--text-muted)" }}>
|
||||
{t("history.empty")}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("history.hitRate")}</span>
|
||||
<span className="val">
|
||||
{summary.hitRate != null ? `${summary.hitRate}%` : "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("history.mae")}</span>
|
||||
<span className="val">
|
||||
{summary.debMae != null ? `${summary.debMae}°` : "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{t("history.sample")}</span>
|
||||
<span className="val">
|
||||
{t("history.sampleDays", { count: summary.settledCount })}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{!isLoading && !error && <HistoryChart />}
|
||||
</>
|
||||
)}
|
||||
{!isLoading && !error && <HistoryChart />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,112 +8,176 @@ import {
|
||||
Lock,
|
||||
ShieldCheck,
|
||||
Sparkles,
|
||||
X,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { useI18n } from "@/hooks/useI18n";
|
||||
import { useDashboardStore } from "@/hooks/useDashboardStore";
|
||||
import { useState } from "react";
|
||||
|
||||
type ProFeaturePaywallProps = {
|
||||
feature: "today" | "history" | "future";
|
||||
onClose?: () => void;
|
||||
};
|
||||
|
||||
function getFeatureLabel(
|
||||
locale: "zh-CN" | "en-US",
|
||||
feature: "today" | "history" | "future",
|
||||
) {
|
||||
if (locale === "en-US") {
|
||||
if (feature === "today") return "Intraday Analysis";
|
||||
if (feature === "history") return "History Reconciliation";
|
||||
return "Future-date Analysis";
|
||||
}
|
||||
if (feature === "today") return "今日日内分析";
|
||||
if (feature === "history") return "历史对账";
|
||||
return "未来日期分析";
|
||||
}
|
||||
|
||||
export function ProFeaturePaywall({ feature }: ProFeaturePaywallProps) {
|
||||
export function ProFeaturePaywall({
|
||||
feature,
|
||||
onClose,
|
||||
}: ProFeaturePaywallProps) {
|
||||
const { locale } = useI18n();
|
||||
const featureLabel = getFeatureLabel(locale, feature);
|
||||
const { proAccess } = useDashboardStore();
|
||||
const [usePoints, setUsePoints] = useState(true);
|
||||
|
||||
const isEn = locale === "en-US";
|
||||
|
||||
// Redemption logic: 500 points = $1 discount
|
||||
// Max discount $3 (requires 1500 points)
|
||||
const maxRedeemablePoints = 1500;
|
||||
const pointsAvailable = proAccess.points || 0;
|
||||
const effectivePoints = Math.min(pointsAvailable, maxRedeemablePoints);
|
||||
const discountAmount = usePoints ? Math.floor(effectivePoints / 500) : 0;
|
||||
const originalPrice = 5.0;
|
||||
const finalPrice = originalPrice - discountAmount;
|
||||
const pointsToConsume = discountAmount * 500;
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col items-center justify-center py-10 md:py-16">
|
||||
<div className="relative w-full max-w-4xl rounded-[2.5rem] border border-white/10 bg-slate-900/60 backdrop-blur-xl p-8 shadow-2xl md:p-12">
|
||||
<div className="absolute left-1/2 top-0 flex h-20 w-20 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-[1.5rem] border-4 border-slate-950 bg-gradient-to-tr from-amber-500 via-orange-500 to-yellow-400 text-white shadow-2xl shadow-orange-500/40">
|
||||
<Crown size={32} fill="currentColor" />
|
||||
<div className="flex w-full flex-col items-center justify-center py-6 md:py-10">
|
||||
<div className="relative w-full max-w-xl rounded-[2.5rem] border border-white/10 bg-slate-900/80 p-8 shadow-3xl backdrop-blur-3xl md:p-12">
|
||||
{onClose && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute right-6 top-6 flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-slate-400 transition hover:bg-white/10 hover:text-white z-10"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Crown Badge */}
|
||||
<div className="absolute left-1/2 top-0 flex h-20 w-20 -translate-x-1/2 -translate-y-1/2 rotate-[-6deg] items-center justify-center rounded-[1.5rem] border-4 border-slate-950 bg-gradient-to-tr from-amber-400 via-orange-500 to-yellow-500 text-white shadow-2xl shadow-orange-500/30">
|
||||
<Crown size={32} fill="white" />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-center">
|
||||
<h3 className="text-3xl font-extrabold tracking-tight text-white md:text-4xl">
|
||||
{isEn ? "Unlock PolyWeather Pro" : "开启 PolyWeather Pro"}
|
||||
</h3>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-lg text-slate-300">
|
||||
<p className="mx-auto mt-4 max-w-sm text-base leading-relaxed text-slate-400">
|
||||
{isEn
|
||||
? `This module (${featureLabel}) is available for subscribers only. Upgrade to unlock advanced weather intelligence.`
|
||||
: `当前模块（${featureLabel}）仅对订阅用户开放。升级后可解锁更完整的气象分析能力。`}
|
||||
? "Unlock 15-day precision trends, real-time radar, and ad-free experience across all platforms."
|
||||
: "解锁 15 天高精度趋势分析、实时雷达与闪电追踪。尊享全平台无广告体验。"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{[
|
||||
{
|
||||
icon: Zap,
|
||||
text: isEn
|
||||
? "Real-time radar and lightning tracking"
|
||||
: "实时雷达与闪电追踪",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
text: isEn
|
||||
? "15-day high-precision trend analysis"
|
||||
: "15 天高精度趋势分析",
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
text: isEn
|
||||
? "Pro-grade station raw data"
|
||||
: "专业级气象站原始数据",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
text: isEn
|
||||
? "Ad-free experience across all surfaces"
|
||||
: "全平台无广告体验",
|
||||
},
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.text}
|
||||
className="flex items-center gap-4 rounded-2xl border border-white/5 bg-white/5 px-5 py-4 transition hover:bg-white/10"
|
||||
>
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-cyan-500/10 text-cyan-300">
|
||||
<item.icon size={20} />
|
||||
</div>
|
||||
<span className="text-base font-medium text-slate-200">
|
||||
{item.text}
|
||||
{/* Pricing Cards */}
|
||||
<div className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{/* Plan Card */}
|
||||
<div className="relative overflow-hidden rounded-3xl border border-blue-500/30 bg-blue-500/5 p-6 transition hover:bg-blue-500/10">
|
||||
<div className="absolute -right-2 -top-1 rotate-12 rounded-lg bg-blue-500 px-2 py-0.5 text-[10px] font-bold text-white uppercase tracking-tighter shadow-lg">
|
||||
{isEn ? "Monthly" : "月付套餐"}
|
||||
</div>
|
||||
<div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">
|
||||
PRO PLAN
|
||||
</div>
|
||||
<div className="mt-2 flex items-baseline">
|
||||
<span className="text-3xl font-black text-white">$5.00</span>
|
||||
<span className="ml-1 text-sm font-medium text-slate-500">
|
||||
/ {isEn ? "mo" : "月"}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Points Card */}
|
||||
<div
|
||||
className={`relative rounded-3xl border p-6 transition ${
|
||||
usePoints && pointsAvailable >= 500
|
||||
? "border-indigo-500/30 bg-indigo-500/5"
|
||||
: "border-white/5 bg-white/5 opacity-60"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span
|
||||
className={`text-[10px] font-bold uppercase tracking-widest ${
|
||||
usePoints && pointsAvailable >= 500
|
||||
? "text-indigo-400"
|
||||
: "text-slate-500"
|
||||
}`}
|
||||
>
|
||||
{isEn ? "Points Credit" : "积分抵扣"}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setUsePoints(!usePoints)}
|
||||
disabled={pointsAvailable < 500}
|
||||
className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${
|
||||
usePoints && pointsAvailable >= 500
|
||||
? "bg-indigo-600"
|
||||
: "bg-slate-700"
|
||||
} ${pointsAvailable < 500 ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${
|
||||
usePoints && pointsAvailable >= 500
|
||||
? "translate-x-5"
|
||||
: "translate-x-0"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-2 flex items-baseline">
|
||||
<span
|
||||
className={`text-3xl font-black ${usePoints && pointsAvailable >= 500 ? "text-emerald-400" : "text-slate-500"}`}
|
||||
>
|
||||
-${discountAmount.toFixed(2)}
|
||||
</span>
|
||||
<span className="ml-1 text-[10px] font-bold text-slate-500 uppercase">
|
||||
OFF
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 text-[10px] font-medium text-slate-500">
|
||||
{pointsAvailable < 500
|
||||
? isEn
|
||||
? "Need 500+ points"
|
||||
: `积分不足 (当前 ${pointsAvailable})`
|
||||
: isEn
|
||||
? `Auto-consume ${pointsToConsume} points`
|
||||
: `已自动消耗 ${pointsToConsume} 积分`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-10">
|
||||
{/* Total & Action */}
|
||||
<div className="mt-10 space-y-6">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<span className="text-sm font-medium text-slate-400">
|
||||
{isEn ? "Total Due:" : "应付总计:"}
|
||||
</span>
|
||||
<span className="text-3xl font-black text-white">
|
||||
${finalPrice.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/account"
|
||||
className="group flex w-full items-center justify-center rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-5 text-xl font-bold text-white shadow-xl shadow-blue-600/20 transition hover:from-blue-500 hover:to-indigo-500 active:scale-[0.98]"
|
||||
className="group flex w-full items-center justify-center rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-5 text-lg font-bold text-white shadow-2xl shadow-blue-600/30 transition hover:from-blue-500 hover:to-indigo-500 active:scale-[0.98]"
|
||||
>
|
||||
{isEn ? "Upgrade now - $5 / month" : "立即升级 - $5 / 月"}
|
||||
{isEn ? "Connect Wallet & Pay" : "连接钱包并支付"}
|
||||
<ArrowRight
|
||||
size={22}
|
||||
size={20}
|
||||
className="ml-2 transition-transform group-hover:translate-x-1"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 border-t border-white/10 pt-6 text-center text-xs text-slate-400">
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Lock size={14} className="text-slate-500" />
|
||||
{isEn
|
||||
? "Payments are secured with AES-256 encryption"
|
||||
: "所有交易均经过 AES-256 加密保护"}
|
||||
</span>
|
||||
<div className="flex items-center justify-center gap-6">
|
||||
<span className="flex items-center gap-1.5 text-[10px] font-medium text-slate-500">
|
||||
<Lock size={12} className="opacity-50" />
|
||||
{isEn ? "Secured Payment" : "安全加密支付"}
|
||||
</span>
|
||||
<Link
|
||||
href="/account"
|
||||
className="text-[10px] font-medium text-slate-500 transition hover:text-slate-300"
|
||||
>
|
||||
{isEn ? "FAQ" : "常见问题 (FAQ)"}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -75,6 +75,7 @@ function getInitialProAccessState(): ProAccessState {
|
||||
loading: true,
|
||||
authenticated: false,
|
||||
subscriptionActive: false,
|
||||
points: 0,
|
||||
error: null,
|
||||
};
|
||||
}
|
||||
@@ -235,7 +236,10 @@ export function DashboardStoreProvider({
|
||||
? cityDetailsByName[selectedCity] || null
|
||||
: null;
|
||||
const selectedMarketDate =
|
||||
futureModalDate || selectedForecastDate || selectedDetail?.local_date || null;
|
||||
futureModalDate ||
|
||||
selectedForecastDate ||
|
||||
selectedDetail?.local_date ||
|
||||
null;
|
||||
const selectedMarketScanKey = selectedCity
|
||||
? getMarketScanCacheKey(selectedCity, selectedMarketDate)
|
||||
: null;
|
||||
@@ -402,11 +406,13 @@ export function DashboardStoreProvider({
|
||||
const payload = (await response.json()) as {
|
||||
authenticated?: boolean;
|
||||
subscription_active?: boolean | null;
|
||||
points?: number;
|
||||
};
|
||||
setProAccess({
|
||||
loading: false,
|
||||
authenticated: Boolean(payload.authenticated),
|
||||
subscriptionActive: payload.subscription_active === true,
|
||||
points: payload.points ?? 0,
|
||||
error: null,
|
||||
});
|
||||
} catch (error) {
|
||||
@@ -414,6 +420,7 @@ export function DashboardStoreProvider({
|
||||
loading: false,
|
||||
authenticated: false,
|
||||
subscriptionActive: false,
|
||||
points: 0,
|
||||
error: String(error),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -318,6 +318,7 @@ export interface ProAccessState {
|
||||
loading: boolean;
|
||||
authenticated: boolean;
|
||||
subscriptionActive: boolean;
|
||||
points: number;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
|
||||
@@ -41,6 +41,7 @@ def extract_bearer_token(auth_header: Optional[str]) -> str:
|
||||
class SupabaseIdentity:
|
||||
user_id: str
|
||||
email: str
|
||||
points: int = 0
|
||||
|
||||
|
||||
class SupabaseEntitlementService:
|
||||
@@ -120,9 +121,15 @@ class SupabaseEntitlementService:
|
||||
user_id = str(data.get("id") or "").strip()
|
||||
if not user_id:
|
||||
return None
|
||||
|
||||
# Extract points from user_metadata
|
||||
metadata = data.get("user_metadata") or {}
|
||||
points = int(metadata.get("points") or metadata.get("total_points") or 0)
|
||||
|
||||
identity = SupabaseIdentity(
|
||||
user_id=user_id,
|
||||
email=str(data.get("email") or "").strip(),
|
||||
points=points,
|
||||
)
|
||||
with self._identity_cache_lock:
|
||||
self._identity_cache[access_token] = {
|
||||
@@ -133,6 +140,9 @@ class SupabaseEntitlementService:
|
||||
except Exception as exc:
|
||||
logger.warning(f"supabase auth user check failed: {exc}")
|
||||
return None
|
||||
except Exception as exc:
|
||||
logger.warning(f"supabase auth user check failed: {exc}")
|
||||
return None
|
||||
|
||||
def _query_active_subscription(self, user_id: str) -> bool:
|
||||
if not user_id:
|
||||
|
||||
@@ -117,6 +117,7 @@ def _bind_optional_supabase_identity(request: Request) -> None:
|
||||
return
|
||||
request.state.auth_user_id = identity.user_id
|
||||
request.state.auth_email = identity.email
|
||||
request.state.auth_points = identity.points
|
||||
|
||||
|
||||
def _assert_entitlement(request: Request) -> None:
|
||||
@@ -1093,6 +1094,7 @@ async def auth_me(request: Request):
|
||||
"authenticated": bool(user_id),
|
||||
"user_id": user_id,
|
||||
"email": getattr(request.state, "auth_email", None),
|
||||
"points": getattr(request.state, "auth_points", 0),
|
||||
"entitlement_mode": (
|
||||
"supabase_required"
|
||||
if SUPABASE_ENTITLEMENT.enabled and _SUPABASE_AUTH_REQUIRED
|
||||
|
||||
Reference in New Issue
Block a user