's'

2026-03-13 21:38:04 -05:00
parent 0885e00b25
commit 04995f91dd
22 changed files with 856 additions and 482 deletions
--- a/app/topic/components/TopicFooter.tsx
+++ b/app/topic/components/TopicFooter.tsx
@@ -1,14 +1,26 @@
 "use client";

+import { useState, useEffect } from "react";
 import Link from "next/link";
 import { getTopicConfig } from "../config";
+import { isPaid } from "@/app/cloudphone/lib/payment";

 type TopicFooterProps = {
  topicId: string;
 };

+const CHAT_URL = "https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot";
+
 export function TopicFooter({ topicId }: TopicFooterProps) {
  const config = getTopicConfig(topicId);
+  const [paid, setPaid] = useState(false);
+
+  useEffect(() => {
+    setPaid(isPaid());
+    const onPayUpdate = () => setPaid(isPaid());
+    window.addEventListener("pay:updated", onPayUpdate);
+    return () => window.removeEventListener("pay:updated", onPayUpdate);
+  }, []);

  return (
    <footer className="border-t border-[var(--border)] py-6 sm:py-8">
@@ -23,17 +35,30 @@ export function TopicFooter({ topicId }: TopicFooterProps) {
          >
            模块列表
          </Link>
-          <a
-            href="https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)]/15 px-4 py-2 text-sm font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/25"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-            </svg>
-            即时问答
-          </a>
+          {paid ? (
+            <a
+              href={CHAT_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)]/15 px-4 py-2 text-sm font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/25"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+              </svg>
+              即时问答
+            </a>
+          ) : (
+            <Link
+              href="/"
+              className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)]/15 px-4 py-2 text-sm font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/25"
+              title="开通VIP解锁即时问答"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+              </svg>
+              即时问答
+            </Link>
+          )}
        </div>
        <div className="text-center text-sm text-[var(--muted-foreground)]">
          {config ? `${config.icon} ${config.title} · 异度星球` : "异度星球 · 数字游民社群"}
--- a/app/topic/components/TopicHeader.tsx
+++ b/app/topic/components/TopicHeader.tsx
@@ -2,10 +2,10 @@

 import { useState, useEffect } from "react";
 import Link from "next/link";
-import { useParams } from "next/navigation";
 import { ThemeToggle } from "@/app/components/ThemeToggle";
 import { getTopicConfig } from "../config";
 import { isPaid } from "@/app/cloudphone/lib/payment";
+import { triggerPay } from "@/app/lib/triggerPay";

 type TopicHeaderProps = {
  topicId: string;
@@ -22,11 +22,7 @@ export function TopicHeader({ topicId }: TopicHeaderProps) {
    return () => window.removeEventListener("pay:updated", onPayUpdate);
  }, []);

-  const ctaHref = config?.externalUrl
-    ? config.externalUrl
-    : paid
-      ? "/cloudphone/course/0/0"
-      : config?.payUrl ?? "/";
+  const isEnrollCta = !config?.externalUrl && !paid;

  return (
    <header
@@ -48,25 +44,55 @@ export function TopicHeader({ topicId }: TopicHeaderProps) {
          >
            首页
          </Link>
-          <a
-            href="https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hidden items-center gap-1.5 rounded-full border border-[var(--accent)]/40 bg-[var(--accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/20 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-            </svg>
-            即时问答
-          </a>
-          <Link
-            href={ctaHref}
-            target={config?.externalUrl ? "_blank" : undefined}
-            rel={config?.externalUrl ? "noopener noreferrer" : undefined}
-            className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-4 sm:py-2 sm:text-sm"
-          >
-            {config?.externalUrl ? "前往了解 →" : paid ? "进入课程 →" : "立即报名 →"}
-          </Link>
+          {paid ? (
+            <a
+              href="https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hidden items-center gap-1.5 rounded-full border border-[var(--accent)]/40 bg-[var(--accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/20 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+              </svg>
+              即时问答
+            </a>
+          ) : (
+            <Link
+              href="/"
+              className="hidden items-center gap-1.5 rounded-full border border-[var(--accent)]/40 bg-[var(--accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/20 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
+              title="开通VIP解锁即时问答"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+              </svg>
+              即时问答
+            </Link>
+          )}
+          {config?.externalUrl ? (
+            <Link
+              href={config.externalUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-4 sm:py-2 sm:text-sm"
+            >
+              前往了解 →
+            </Link>
+          ) : isEnrollCta ? (
+            <button
+              type="button"
+              onClick={() => triggerPay()}
+              className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-4 sm:py-2 sm:text-sm"
+            >
+              立即报名 →
+            </button>
+          ) : (
+            <Link
+              href="/cloudphone/course/0/0"
+              className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-4 sm:py-2 sm:text-sm"
+            >
+              进入课程 →
+            </Link>
+          )}
        </nav>
      </div>
    </header>
--- a/app/topic/components/TopicHero.tsx
+++ b/app/topic/components/TopicHero.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { getTopicConfig, getTopicCurriculum } from "../config";
 import { getLastWatched, getProgress } from "@/app/cloudphone/lib/learning";
 import { ParticleBackground } from "@/app/cloudphone/components/ParticleBackground";
+import { triggerPay } from "@/app/lib/triggerPay";

 type TopicHeroProps = {
  topicId: string;
@@ -33,11 +34,7 @@ export function TopicHero({ topicId }: TopicHeroProps) {

  if (!config) return null;

-  const ctaHref = config.externalUrl
-    ? config.externalUrl
-    : last
-      ? `/cloudphone/course/${last.moduleIndex}/${last.lessonIndex}`
-      : config.payUrl;
+  const isEnrollCta = !config.externalUrl && !last;

  return (
    <section className="relative overflow-hidden pt-24 pb-16 sm:pt-28 sm:pb-20 md:pt-32 md:pb-24">
@@ -82,14 +79,31 @@ export function TopicHero({ topicId }: TopicHeroProps) {
            className="animate__animated animate__fadeInDown flex flex-wrap justify-center gap-3 sm:gap-4"
            style={{ animationDelay: "0.6s", animationFillMode: "both" }}
          >
-            <Link
-              href={ctaHref}
-              target={config.externalUrl ? "_blank" : undefined}
-              rel={config.externalUrl ? "noopener noreferrer" : undefined}
-              className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-10"
-            >
-              {config.externalUrl ? "前往了解 →" : last ? "继续学习 →" : "立即报名 →"}
-            </Link>
+            {config.externalUrl ? (
+              <Link
+                href={config.externalUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-10"
+              >
+                前往了解 →
+              </Link>
+            ) : isEnrollCta ? (
+              <button
+                type="button"
+                onClick={() => triggerPay()}
+                className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-10"
+              >
+                立即报名 →
+              </button>
+            ) : (
+              <Link
+                href={`/cloudphone/course/${last!.moduleIndex}/${last!.lessonIndex}`}
+                className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-10"
+              >
+                继续学习 →
+              </Link>
+            )}
          </div>
        )}
        {curriculum?.hasContent && progress.completed > 0 && (
--- a/app/topic/config.ts
+++ b/app/topic/config.ts
@@ -31,7 +31,7 @@ export const TOPIC_CONFIGS: Record<string, TopicConfig> = {
      { value: "170+", label: "分钟视频" },
      { value: "5", label: "大模块" },
    ],
-    payUrl: "/cloudphone/pay",
+    payUrl: "/",
  },
  livestream: {
    id: "livestream",
@@ -45,7 +45,7 @@ export const TOPIC_CONFIGS: Record<string, TopicConfig> = {
      { value: "2", label: "大模块" },
    ],
    moduleIndices: [1, 2],
-    payUrl: "/cloudphone/pay",
+    payUrl: "/",
  },
  indie: {
    id: "indie",