'init'

app/pay/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Suspense, useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { Header } from "@/app/components";
+import { PayButton } from "@/app/components/PayButton";
+
+function PayContent() {
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (typeof window !== "undefined" && searchParams.get("test") === "ok") {
+      localStorage.setItem("pay", "ok");
+      window.location.href = "/pay/paid";
+    }
+  }, [searchParams]);
+
+  if (searchParams.get("test") === "ok") {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p className="text-[var(--muted-foreground)]">正在跳转...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
+      <Header />
+      <main className="flex min-h-[80vh] flex-col items-center justify-center px-4">
+        <h1 className="mb-2 text-2xl font-bold">报名数字游民实战课</h1>
+        <p className="mb-6 text-[var(--muted-foreground)]">
+          ¥0.80 加入课程，解锁全部 21 节视频
+        </p>
+        <div className="mb-8 flex flex-col gap-3 sm:flex-row sm:gap-4">
+          <PayButton size="lg" channel="alipay">支付宝支付</PayButton>
+          <PayButton size="lg" channel="wxpay">微信支付</PayButton>
+        </div>
+        <p className="mb-4 text-xs text-[var(--muted-foreground)]">
+          测试：<Link href="/pay?test=ok" className="text-[var(--accent)] underline">点击模拟支付成功</Link>
+        </p>
+        <Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
+          返回首页
+        </Link>
+      </main>
+    </div>
+  );
+}
+
+export default function PayPage() {
+  return (
+    <Suspense fallback={
+      <div className="flex min-h-screen items-center justify-center bg-[var(--background)]">
+        <p className="text-[var(--muted-foreground)]">加载中...</p>
+      </div>
+    }>
+      <PayContent />
+    </Suspense>
+  );
+}

app/pay/paid/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+import { Header } from "@/app/components";
+
+const PAY_STORAGE_KEY = "pay";
+
+export default function PayPaidPage() {
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem(PAY_STORAGE_KEY, "ok");
+      window.dispatchEvent(new CustomEvent("pay:updated"));
+    }
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
+      <Header />
+      <main className="flex min-h-[80vh] flex-col items-center justify-center px-4">
+        <div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20 text-4xl">
+          ✓
+        </div>
+        <h1 className="mb-2 text-2xl font-bold">支付成功</h1>
+        <p className="mb-8 text-[var(--muted-foreground)]">
+          已解锁全部课程视频，开始学习吧
+        </p>
+        <Link
+          href="/"
+          className="rounded-full bg-[var(--accent)] px-8 py-3 font-medium text-[var(--accent-foreground)] transition hover:opacity-90"
+        >
+          返回课程首页
+        </Link>
+      </main>
+    </div>
+  );
+}