feat: Implement subscription-based premium features, payment processing, and enhanced dashboard components.

frontend/components/dashboard/DetailPanel.tsx

@@ -128,6 +128,7 @@ export function DetailPanel() {
   const store = useDashboardStore();
   const { locale, t } = useI18n();
   const detail = store.selectedDetail;
+  const isPro = store.proAccess.subscriptionActive;
   const panelRef = useRef<HTMLElement | null>(null);
   const isOverlayOpen =
     Boolean(store.futureModalDate) ||
@@ -201,26 +202,30 @@ export function DetailPanel() {
             <button
               type="button"
               className="history-btn"
-              title={t("detail.todayAnalysis")}
+              title={
+                isPro
+                  ? t("detail.todayAnalysis")
+                  : `${t("detail.todayAnalysis")} (Pro)`
+              }
               onClick={() => {
                 blurActiveElement();
                 void store.openTodayModal();
               }}
               disabled={!detail}
             >
-              {t("detail.todayAnalysis")}
+              {isPro ? t("detail.todayAnalysis") : `${t("detail.todayAnalysis")} · Pro`}
             </button>
             <button
               type="button"
               className="history-btn"
-              title={t("detail.history")}
+              title={isPro ? t("detail.history") : `${t("detail.history")} (Pro)`}
               onClick={() => {
                 blurActiveElement();
                 void store.openHistory();
               }}
               disabled={!detail}
             >
-              {t("detail.history")}
+              {isPro ? t("detail.history") : `${t("detail.history")} · Pro`}
             </button>
           </div>
         </div>

frontend/components/dashboard/FutureForecastModal.tsx

@@ -18,6 +18,7 @@ import { CSSProperties } from "react";
 import { useChart } from "@/hooks/useChart";
 import { useDashboardStore } from "@/hooks/useDashboardStore";
 import { useI18n } from "@/hooks/useI18n";
+import { ProFeaturePaywall } from "@/components/dashboard/ProFeaturePaywall";
 import {
   ModelForecast,
   ProbabilityDistribution,
@@ -438,6 +439,8 @@ export function FutureForecastModal() {
   const detail = store.selectedDetail;
   const marketScan = store.selectedMarketScan;
   const dateStr = store.futureModalDate;
+  const isPro = store.proAccess.subscriptionActive;
+  const isProLoading = store.proAccess.loading;
 
   if (!detail || !dateStr) return null;
 
@@ -568,6 +571,7 @@ export function FutureForecastModal() {
                 "future-refresh-btn",
                 store.loadingState.marketScan && "spinning",
               )}
+              disabled={!isPro || isProLoading}
               onClick={() => {
                 if (isToday) {
                   void store.openTodayModal(true);
@@ -575,7 +579,15 @@ export function FutureForecastModal() {
                 }
                 store.openFutureModal(dateStr, true);
               }}
-              title={locale === "en-US" ? "Refresh Data" : "刷新数据"}
+              title={
+                !isPro
+                  ? locale === "en-US"
+                    ? "Pro subscription required"
+                    : "需要 Pro 订阅"
+                  : locale === "en-US"
+                    ? "Refresh Data"
+                    : "刷新数据"
+              }
             >
               <svg
                 width="14"
@@ -605,7 +617,20 @@ export function FutureForecastModal() {
         </div>
 
         <div className="modal-body future-modal-body">
-          {isToday ? (
+          {isProLoading ? (
+            <div
+              style={{
+                color: "var(--text-muted)",
+                display: "flex",
+                justifyContent: "center",
+                padding: "28px 0",
+              }}
+            >
+              {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">

frontend/components/dashboard/HistoryModal.tsx

@@ -5,6 +5,7 @@ import { useMemo } from "react";
 import { useChart } from "@/hooks/useChart";
 import { useDashboardStore, useHistoryData } from "@/hooks/useDashboardStore";
 import { useI18n } from "@/hooks/useI18n";
+import { ProFeaturePaywall } from "@/components/dashboard/ProFeaturePaywall";
 import { getHistorySummary } from "@/lib/dashboard-utils";
 
 function HistoryChart() {
@@ -128,6 +129,8 @@ export function HistoryModal() {
   const store = useDashboardStore();
   const { t } = useI18n();
   const { data, error, isLoading, isOpen } = useHistoryData();
+  const isPro = store.proAccess.subscriptionActive;
+  const isProLoading = store.proAccess.loading;
   const summary = useMemo(
     () => getHistorySummary(data, store.selectedDetail?.local_date),
     [data, store.selectedDetail?.local_date],
@@ -162,37 +165,60 @@ export function HistoryModal() {
           </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}%` : "--"}
+          {isProLoading ? (
+            <div
+              style={{
+                color: "var(--text-muted)",
+                display: "flex",
+                justifyContent: "center",
+                padding: "28px 0",
+              }}
+            >
+              {t("dashboard.loading")}
+            </div>
+          ) : !isPro ? (
+            <ProFeaturePaywall feature="history" />
+          ) : (
+            <>
+              <div className="history-stats">
+                {isLoading ? (
+                  <span style={{ color: "var(--text-muted)" }}>
+                    {t("history.loading")}
                   </span>
-                </div>
-                <div className="h-stat-card">
-                  <span className="label">{t("history.mae")}</span>
-                  <span className="val">
-                    {summary.debMae != null ? `${summary.debMae}°` : "--"}
+                ) : error ? (
+                  <span style={{ color: "var(--accent-red)" }}>
+                    {t("history.error")}
                   </span>
-                </div>
-                <div className="h-stat-card">
-                  <span className="label">{t("history.sample")}</span>
-                  <span className="val">
-                    {t("history.sampleDays", { count: summary.settledCount })}
+                ) : !summary.recentData.length ? (
+                  <span style={{ color: "var(--text-muted)" }}>
+                    {t("history.empty")}
                   </span>
-                </div>
-              </>
-            )}
-          </div>
-          {!isLoading && !error && <HistoryChart />}
+                ) : (
+                  <>
+                    <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 />}
+            </>
+          )}
         </div>
       </div>
     </div>

frontend/components/dashboard/ProFeaturePaywall.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import Link from "next/link";
+import {
+  ArrowRight,
+  BarChart3,
+  Crown,
+  Lock,
+  ShieldCheck,
+  Sparkles,
+  Zap,
+} from "lucide-react";
+import { useI18n } from "@/hooks/useI18n";
+
+type ProFeaturePaywallProps = {
+  feature: "today" | "history" | "future";
+};
+
+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) {
+  const { locale } = useI18n();
+  const featureLabel = getFeatureLabel(locale, feature);
+  const isEn = locale === "en-US";
+
+  return (
+    <div className="mx-auto w-full max-w-4xl rounded-[2rem] border border-white/10 bg-gradient-to-b from-slate-800/95 to-slate-950/95 p-8 md:p-10">
+      <div className="mx-auto mb-5 flex h-16 w-16 -translate-y-12 items-center justify-center rounded-2xl bg-gradient-to-tr from-amber-500 to-orange-400 text-white shadow-xl shadow-amber-500/20">
+        <Crown size={28} />
+      </div>
+
+      <div className="-mt-6 text-center">
+        <h3 className="text-3xl font-bold text-white">
+          {isEn ? "Unlock PolyWeather Pro" : "开启 PolyWeather Pro"}
+        </h3>
+        <p className="mx-auto mt-4 max-w-2xl text-base text-slate-300">
+          {isEn
+            ? `This module (${featureLabel}) is available for subscribers only. Upgrade to unlock advanced weather intelligence.`
+            : `当前模块（${featureLabel}）仅对订阅用户开放。升级后可解锁更完整的气象分析能力。`}
+        </p>
+      </div>
+
+      <div className="mt-8 grid grid-cols-1 gap-3 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-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3"
+          >
+            <item.icon size={17} className="text-cyan-300" />
+            <span className="text-sm text-slate-200">{item.text}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-8">
+        <Link
+          href="/account"
+          className="group flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 px-5 py-4 text-lg font-semibold text-white shadow-lg shadow-blue-600/20 transition hover:from-blue-500 hover:to-indigo-500"
+        >
+          {isEn ? "Upgrade now - $5 / month" : "立即升级 - $5 / 月"}
+          <ArrowRight
+            size={19}
+            className="ml-2 transition-transform group-hover:translate-x-1"
+          />
+        </Link>
+      </div>
+
+      <div className="mt-6 border-t border-white/10 pt-4 text-center text-xs text-slate-400">
+        <span className="inline-flex items-center gap-1.5">
+          <Lock size={12} />
+          {isEn ? "Payments are secured with AES-256 encryption" : "所有交易均经过 AES-256 加密保护"}
+        </span>
+      </div>
+    </div>
+  );
+}