's'

2026-03-11 23:47:45 -05:00
parent 296d703307
commit 0c2ccadb6b
35 changed files with 2399 additions and 195 deletions
--- a/app/topic/components/TopicHeader.tsx
+++ b/app/topic/components/TopicHeader.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+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";
+
+type TopicHeaderProps = {
+  topicId: string;
+};
+
+export function TopicHeader({ topicId }: TopicHeaderProps) {
+  const [paid, setPaid] = useState(false);
+  const config = getTopicConfig(topicId);
+
+  useEffect(() => {
+    setPaid(isPaid());
+    const onPayUpdate = () => setPaid(isPaid());
+    window.addEventListener("pay:updated", onPayUpdate);
+    return () => window.removeEventListener("pay:updated", onPayUpdate);
+  }, []);
+
+  const ctaHref = config?.externalUrl
+    ? config.externalUrl
+    : paid
+      ? "/cloudphone/course/0/0"
+      : config?.payUrl ?? "/";
+
+  return (
+    <header
+      className="fixed left-0 right-0 top-0 z-50 border-b border-[var(--border)] bg-[var(--background)]/95 backdrop-blur-xl"
+      style={{ animationFillMode: "both" }}
+    >
+      <div className="mx-auto flex h-12 max-w-6xl items-center justify-between gap-2 px-3 sm:h-14 sm:gap-4 sm:px-4 md:h-16 md:px-6">
+        <Link
+          href="/"
+          className="min-w-0 truncate text-sm font-medium text-[var(--foreground)] sm:text-base md:text-lg"
+        >
+          🌍 异度星球
+        </Link>
+        <nav className="flex shrink-0 items-center gap-1.5 sm:gap-3">
+          <ThemeToggle />
+          <Link
+            href="/"
+            className="text-sm text-[var(--muted-foreground)] transition hover:text-[var(--foreground)]"
+          >
+            首页
+          </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>
+        </nav>
+      </div>
+    </header>
+  );
+}