重构首页为机构落地页，新增终端路由，时区感知 Polymarket 市场发现

2026-05-25 00:16:53 +08:00
parent 45e9c28437
commit e4d123d94d
23 changed files with 1232 additions and 623 deletions
@@ -7,7 +7,7 @@ export function createAccountCopy(isEn: boolean): Record<string, string> {
      signOut: isEn ? "Sign Out" : "退出",
      signIn: isEn ? "Sign In" : "登录",
      upgradePro: isEn ? "Upgrade Pro" : "升级 Pro",
-      guestUser: isEn ? "Guest User" : "游客用户",
+      guestUser: isEn ? "Signed-out account" : "未登录账户",
      joinedAt: isEn ? "Joined" : "加入时间",
      totalPoints: isEn ? "Total Points" : "总积分 (荣誉)",
      weeklyPoints: isEn ? "Weekly Points" : "本周积分 (竞技)",
@@ -129,7 +129,7 @@ export function createAccountCopy(isEn: boolean): Record<string, string> {
        ? "Wallet bound. Creating order and sending payment..."
        : "钱包已绑定，正在创建订单并发起支付...",
      proMember: "PRO MEMBER",
-      freeTier: "FREE TIER",
+      freeTier: isEn ? "UNSUBSCRIBED" : "未订阅",
      proPendingSync: isEn ? "Activated (pending sync)" : "已开通（待同步）",
      noProSubscription: isEn ? "No Pro subscription" : "暂无 Pro 订阅",
      proEndsSoonTitle: isEn ? "Pro renewal due soon" : "Pro 即将到期",
@@ -4,7 +4,19 @@ import { useEffect } from "react";

 export function RegisterSW() {
  useEffect(() => {
-    if ("serviceWorker" in navigator) {
+    if (process.env.NODE_ENV !== "production") {
+      if (typeof navigator !== "undefined" && "serviceWorker" in navigator) {
+        navigator.serviceWorker
+          .getRegistrations()
+          .then((registrations) =>
+            Promise.all(registrations.map((registration) => registration.unregister())),
+          )
+          .catch(() => {});
+      }
+      return;
+    }
+
+    if (typeof navigator !== "undefined" && "serviceWorker" in navigator) {
      navigator.serviceWorker.register("/sw.js").catch(() => {});
    }
  }, []);
@@ -102,12 +102,12 @@ export function AiPinnedForecastView({
      <div className="scan-ai-workspace empty">
        <div className="scan-empty-state">
          <div className="scan-empty-title">
-            {isEn ? "Click a city on the map" : "从分布视图点击城市"}
+            {isEn ? "Select a city from the market list" : "从市场列表选择城市"}
          </div>
          <div className="scan-empty-copy">
            {isEn
              ? "Selected cities will appear here as deep analysis blocks."
-              : "被点击的城市会加入深度分析页，并保留为城市分析区块。"}
+              : "选中的城市会加入深度分析页，并保留为城市分析区块。"}
          </div>
        </div>
      </div>
@@ -127,8 +127,8 @@ export function AiPinnedForecastView({
        </div>
        <p>
          {isEn
-            ? "Map clicks add cities here. City analysis stays here until you remove it."
-            : "地图点击会把城市加入这里；城市分析会保留，直到你手动移除。"}
+            ? "Market-list selections add cities here. City analysis stays here until you remove it."
+            : "市场列表选择会把城市加入这里；城市分析会保留，直到你手动移除。"}
        </p>
      </div>
      <div className="scan-ai-city-jumpbar" aria-label={isEn ? "Selected city shortcuts" : "已选城市快捷跳转"}>
@@ -3,12 +3,12 @@
 import clsx from "clsx";
 import Link from "next/link";
 import type { Dispatch, SetStateAction } from "react";
-import { LogIn, MessageCircle, Moon, Sun, UserRound } from "lucide-react";
+import { LogIn, UserRound } from "lucide-react";
 import { ProFeaturePaywall } from "@/components/dashboard/ProFeaturePaywall";
 import { LoadingSignal } from "@/components/dashboard/scan-terminal/LoadingSignal";
 import type { Locale } from "@/lib/i18n";

-export type ScanTerminalContentView = "city-list" | "analysis" | "map";
+export type ScanTerminalContentView = "city-list" | "analysis";

 type ThemeMode = "dark" | "light";

@@ -34,8 +34,8 @@ export function ScanTerminalLoadingScreen({
              </strong>
              <span>
                {isEn
-                  ? "Start from the map, then open city cards to verify weather evidence"
-                  : "从地图选城市，再打开决策卡验证天气证据"}
+                  ? "Loading paid decision cards, city evidence, and market signals"
+                  : "正在加载付费决策卡、城市证据和市场信号"}
              </span>
            </div>
            <div className="scan-topbar-actions">
@@ -91,8 +91,8 @@ export function ScanTerminalTopBar({
        </strong>
        <span>
          {isEn
-            ? "Start from the map, then open city cards to verify weather evidence"
-            : "从地图选城市，再打开决策卡验证天气证据"}
+            ? "Paid workspace for city evidence, model signals, and weather-market decisions"
+            : "面向付费用户的城市证据、模型信号与天气市场决策工作区"}
        </span>
      </div>
      <div className="scan-topbar-actions">
@@ -37,6 +37,9 @@ export function useScanTerminalQuery({
      showLoading?: boolean;
    } = {}) => {
      if (proAccessLoading || !isPro) return;
+      if (typeof fetch !== "function" || typeof AbortController === "undefined") {
+        return;
+      }
      if (forceRefresh) {
        lastForcedScanRefreshAtRef.current = Date.now();
      }
@@ -75,6 +78,13 @@ export function useScanTerminalQuery({

  useEffect(() => {
    if (proAccessLoading || !isPro) return;
+    if (
+      typeof window === "undefined" ||
+      typeof window.setInterval !== "function" ||
+      typeof window.clearInterval !== "function"
+    ) {
+      return;
+    }
    const intervalId = window.setInterval(() => {
      if (
        !shouldRunAutoTerminalRefresh({
@@ -10,6 +10,13 @@ export function useUserLocalClock() {

  useEffect(() => {
    setUserLocalTime(formatUserLocalTime());
+    if (
+      typeof window === "undefined" ||
+      typeof window.setInterval !== "function" ||
+      typeof window.clearInterval !== "function"
+    ) {
+      return;
+    }
    const intervalId = window.setInterval(() => {
      setUserLocalTime(formatUserLocalTime());
    }, 10_000);
@@ -0,0 +1,283 @@
+import Link from "next/link";
+import {
+  Activity,
+  ArrowRight,
+  BarChart3,
+  CheckCircle2,
+  CloudSun,
+  Gauge,
+  LineChart,
+  LockKeyhole,
+  Radar,
+  ShieldCheck,
+  TrendingUp,
+} from "lucide-react";
+
+const marketRows = [
+  ["New York", "91.8°F", "+2.4", "High", "Long Yes"],
+  ["Austin", "103.1°F", "+1.1", "Medium", "Wait"],
+  ["Seoul", "83.4°F", "-0.7", "Low", "No Trade"],
+  ["Tokyo", "88.2°F", "+1.8", "High", "Long Yes"],
+  ["London", "72.6°F", "-0.2", "Low", "Observe"],
+];
+
+const coverage = [
+  "Live airport observations",
+  "DEB blend forecast",
+  "Market-implied temperature",
+  "Intraday settlement windows",
+  "AI weather evidence",
+  "Paid Telegram alerts",
+];
+
+const platformCards = [
+  {
+    icon: Radar,
+    title: "Live Evidence",
+    body: "Airport observations and official station data are structured for settlement-aware decisions.",
+  },
+  {
+    icon: Gauge,
+    title: "Decision Workflow",
+    body: "City cards combine model forecast, current deviation, risk, and target contract context.",
+  },
+  {
+    icon: ShieldCheck,
+    title: "Paid Access",
+    body: "The product workspace is locked until the user has an active subscription.",
+  },
+];
+
+export function InstitutionalLandingPage() {
+  return (
+    <div className="min-h-screen bg-[#f4f7fb] text-slate-950">
+      <header className="sticky top-0 z-30 border-b border-slate-200 bg-white/95 backdrop-blur">
+        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+          <Link href="/" className="flex items-center gap-2 font-bold">
+            <span className="grid h-9 w-9 place-items-center rounded-lg bg-blue-600 text-white">
+              <CloudSun size={20} />
+            </span>
+            <span>PolyWeather</span>
+          </Link>
+          <nav className="hidden items-center gap-7 text-sm font-semibold text-slate-600 md:flex">
+            <a href="#platform" className="hover:text-slate-950">
+              Platform
+            </a>
+            <a href="#coverage" className="hover:text-slate-950">
+              Data Coverage
+            </a>
+            <a href="#pricing" className="hover:text-slate-950">
+              Pricing
+            </a>
+          </nav>
+          <div className="flex items-center gap-2">
+            <Link
+              href="/auth/login?next=%2Fterminal"
+              className="hidden rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-slate-400 hover:text-slate-950 sm:inline-flex"
+            >
+              Log in
+            </Link>
+            <Link
+              href="/terminal"
+              className="inline-flex items-center gap-2 rounded-lg border border-blue-700 bg-blue-600 px-3 py-2 text-sm font-bold text-white shadow-sm transition hover:bg-blue-700"
+            >
+              Enter Product
+              <ArrowRight size={15} />
+            </Link>
+          </div>
+        </div>
+      </header>
+
+      <main>
+        <section className="mx-auto grid min-h-[calc(100vh-64px)] max-w-7xl items-center gap-10 px-4 py-12 sm:px-6 lg:grid-cols-[0.9fr_1.1fr] lg:px-8">
+          <div>
+            <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-bold uppercase text-blue-700">
+              <LockKeyhole size={13} />
+              Paid professional terminal
+            </div>
+            <h1 className="max-w-2xl text-4xl font-black leading-[1.05] tracking-normal text-slate-950 sm:text-5xl lg:text-6xl">
+              Institutional weather market intelligence for paid users.
+            </h1>
+            <p className="mt-5 max-w-xl text-base leading-8 text-slate-600 sm:text-lg">
+              PolyWeather turns live METAR observations, DEB forecast blends,
+              model probabilities, and market settlement logic into one
+              professional decision workspace.
+            </p>
+            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
+              <Link
+                href="/terminal"
+                className="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-600 px-5 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-blue-700"
+              >
+                Enter product
+                <ArrowRight size={16} />
+              </Link>
+              <Link
+                href="/account"
+                className="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-5 py-3 text-sm font-bold text-slate-800 shadow-sm transition hover:border-slate-400 hover:text-slate-950"
+              >
+                Subscribe / Manage account
+              </Link>
+            </div>
+            <p className="mt-4 text-xs font-medium text-slate-500">
+              No free product access. Subscription is required before the
+              terminal opens.
+            </p>
+          </div>
+
+          <div className="rounded-2xl border border-slate-300 bg-white shadow-[0_24px_80px_rgba(15,23,42,0.16)]">
+            <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
+              <div className="flex items-center gap-2 text-sm font-bold">
+                <BarChart3 size={16} className="text-blue-700" />
+                Weather Markets Dashboard
+              </div>
+              <div className="flex items-center gap-2 text-xs font-semibold text-slate-500">
+                <span className="h-2 w-2 rounded-full bg-emerald-500" />
+                Live
+              </div>
+            </div>
+            <div className="grid gap-3 p-3 lg:grid-cols-[1fr_0.85fr]">
+              <div className="rounded-xl border border-slate-200">
+                <div className="flex items-center justify-between border-b border-slate-200 bg-slate-50 px-3 py-2">
+                  <strong className="text-sm">Temperature Contracts</strong>
+                  <span className="text-xs font-semibold text-slate-500">
+                    Price / Edge / Signal
+                  </span>
+                </div>
+                <div className="divide-y divide-slate-100">
+                  {marketRows.map((row) => (
+                    <div
+                      key={row[0]}
+                      className="grid grid-cols-[1.1fr_0.8fr_0.6fr_0.7fr_0.9fr] items-center gap-2 px-3 py-3 text-sm"
+                    >
+                      <span className="font-semibold">{row[0]}</span>
+                      <span className="font-mono text-slate-700">{row[1]}</span>
+                      <span
+                        className={
+                          row[2].startsWith("+")
+                            ? "font-mono font-bold text-emerald-700"
+                            : "font-mono font-bold text-red-600"
+                        }
+                      >
+                        {row[2]}
+                      </span>
+                      <span className="text-xs font-bold text-slate-500">
+                        {row[3]}
+                      </span>
+                      <span className="rounded bg-blue-50 px-2 py-1 text-xs font-bold text-blue-700">
+                        {row[4]}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="space-y-3">
+                <div className="rounded-xl border border-slate-200 p-4">
+                  <div className="mb-3 flex items-center justify-between">
+                    <strong className="text-sm">Model Stack</strong>
+                    <LineChart size={16} className="text-blue-700" />
+                  </div>
+                  <div className="space-y-3">
+                    {["DEB Blend", "Live METAR", "Market Implied"].map(
+                      (label, index) => (
+                        <div key={label}>
+                          <div className="mb-1 flex justify-between text-xs font-semibold text-slate-500">
+                            <span>{label}</span>
+                            <span>{[82, 67, 74][index]}%</span>
+                          </div>
+                          <div className="h-2 rounded-full bg-slate-100">
+                            <div
+                              className="h-2 rounded-full bg-blue-600"
+                              style={{ width: `${[82, 67, 74][index]}%` }}
+                            />
+                          </div>
+                        </div>
+                      ),
+                    )}
+                  </div>
+                </div>
+                <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4">
+                  <div className="mb-2 flex items-center gap-2 text-sm font-bold text-emerald-800">
+                    <TrendingUp size={16} />
+                    Current Signal
+                  </div>
+                  <p className="text-sm leading-6 text-emerald-900">
+                    New York high-temperature market shows a positive
+                    observation deviation with confirmed airport evidence.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section id="platform" className="border-y border-slate-200 bg-white">
+          <div className="mx-auto grid max-w-7xl gap-4 px-4 py-10 sm:px-6 md:grid-cols-3 lg:px-8">
+            {platformCards.map(({ body, icon: Icon, title }) => (
+              <article
+                key={title}
+                className="rounded-xl border border-slate-200 bg-slate-50 p-5"
+              >
+                <Icon className="mb-4 text-blue-700" size={22} />
+                <h2 className="text-lg font-bold">{title}</h2>
+                <p className="mt-2 text-sm leading-6 text-slate-600">{body}</p>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section id="coverage" className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
+          <div className="mb-7 flex flex-col justify-between gap-3 md:flex-row md:items-end">
+            <div>
+              <p className="text-xs font-bold uppercase text-blue-700">
+                Data Coverage
+              </p>
+              <h2 className="mt-2 text-3xl font-black">
+                Everything weather-market users need in one place.
+              </h2>
+            </div>
+            <p className="max-w-xl text-sm leading-6 text-slate-600">
+              Built for repeat professional use: dense tables, clear status
+              chips, restrained color, and fast entry into paid workflows.
+            </p>
+          </div>
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {coverage.map((item) => (
+              <div
+                key={item}
+                className="flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-4 text-sm font-semibold shadow-sm"
+              >
+                <CheckCircle2 size={17} className="text-emerald-600" />
+                {item}
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section id="pricing" className="bg-slate-950 text-white">
+          <div className="mx-auto flex max-w-7xl flex-col justify-between gap-6 px-4 py-12 sm:px-6 md:flex-row md:items-center lg:px-8">
+            <div>
+              <p className="text-xs font-bold uppercase text-blue-300">
+                Subscription Required
+              </p>
+              <h2 className="mt-2 text-3xl font-black">
+                Product access starts after payment.
+              </h2>
+              <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-300">
+                Users can read the landing page and account/payment guide
+                publicly, but the decision terminal opens only for active paid
+                accounts.
+              </p>
+            </div>
+            <Link
+              href="/account"
+              className="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-white/20 bg-white px-5 py-3 text-sm font-bold text-slate-950 transition hover:bg-blue-50"
+            >
+              <Activity size={16} />
+              Subscribe now
+            </Link>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}