's'

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 && (