's'

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

+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { isPaid } from "../lib/payment";
+
 const CHAT_URL = "https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot";

 export function ChatFloatButton() {
+  const [paid, setPaid] = useState(false);
+
+  useEffect(() => {
+    setPaid(isPaid());
+    const onPayUpdate = () => setPaid(isPaid());
+    window.addEventListener("pay:updated", onPayUpdate);
+    return () => window.removeEventListener("pay:updated", onPayUpdate);
+  }, []);
+
+  const baseClass =
+    "animate__animated animate__bounceIn fixed bottom-6 right-6 z-40 flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-all hover:scale-110";
+  const paidClass = "bg-[var(--accent)] text-[var(--accent-foreground)] shadow-[var(--accent)]/30 hover:shadow-xl hover:shadow-[var(--accent)]/40";
+  const lockedClass = "bg-[var(--accent)] text-[var(--accent-foreground)] shadow-[var(--accent)]/30 hover:shadow-xl hover:shadow-[var(--accent)]/40";
+
+  if (paid) {
+    return (
+      <a
+        href={CHAT_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={`${baseClass} ${paidClass}`}
+        style={{ animationDelay: "0.5s", animationFillMode: "both" }}
+        aria-label="即时问答"
+      >
+        <svg width="22" height="22" 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>
+    );
+  }
+
  return (
-    <a
-      href={CHAT_URL}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="animate__animated animate__bounceIn fixed bottom-6 right-6 z-40 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--accent)] text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/30 transition-all hover:scale-110 hover:shadow-xl hover:shadow-[var(--accent)]/40"
+    <Link
+      href="/"
+      className={`${baseClass} ${lockedClass}`}
      style={{ animationDelay: "0.5s", animationFillMode: "both" }}
-      aria-label="即时问答"
+      aria-label="即时问答（开通VIP解锁）"
+      title="开通VIP解锁即时问答"
    >
      <svg width="22" height="22" 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" />
+        <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>
-    </a>
+    </Link>
  );
 }
--- a/app/cloudphone/components/Footer.tsx
+++ b/app/cloudphone/components/Footer.tsx
@@ -1,11 +1,22 @@
 "use client";

+import { useState, useEffect } from "react";
 import Link from "next/link";
 import { SITE_CONFIG } from "../config/course";
+import { isPaid } from "../lib/payment";

 const CHAT_URL = "https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot";

 export function Footer() {
+  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="animate__animated animate__fadeInUp border-t border-[var(--border)] py-6 sm:py-8" style={{ animationDelay: "0.1s", animationFillMode: "both" }}>
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
@@ -16,17 +27,30 @@ export function Footer() {
          <Link href="/cloudphone" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
            课程首页
          </Link>
-          <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 hover:text-[var(--accent)]"
-          >
-            <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 hover:text-[var(--accent)]"
+            >
+              <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 hover:text-[var(--accent)]"
+              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)]">
          {SITE_CONFIG.footer}
--- a/app/cloudphone/components/Header.tsx
+++ b/app/cloudphone/components/Header.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import Link from "next/link";
 import { SITE_CONFIG } from "../config/course";
 import { isPaid } from "../lib/payment";
+import { triggerPay } from "@/app/lib/triggerPay";
 import { ThemeToggle } from "@/app/components/ThemeToggle";

 export function Header() {
@@ -23,35 +24,71 @@ export function Header() {
        </Link>
        <div className="flex shrink-0 items-center gap-1.5 sm:gap-3">
          <ThemeToggle />
-          <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>
+          {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>
+          )}
          <Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
            首页
          </Link>
-          <Link
-            href={paid ? "/cloudphone/course/0/0" : "/cloudphone/pay"}
-            className="hidden rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
-          >
-            {paid ? "进入课程 →" : "立即报名 →"}
-          </Link>
-          <Link
-            href={paid ? "/cloudphone/course/0/0" : "/cloudphone/pay"}
-            className="inline-flex rounded-full bg-[var(--accent)] p-2 text-[var(--accent-foreground)] sm:hidden"
-            aria-label={paid ? "进入课程" : "立即报名"}
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M5 12h14M12 5l7 7-7 7" />
-            </svg>
-          </Link>
+          {paid ? (
+            <Link
+              href="/cloudphone/course/0/0"
+              className="hidden rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
+            >
+              进入课程 →
+            </Link>
+          ) : (
+            <button
+              type="button"
+              onClick={() => triggerPay()}
+              className="hidden rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
+            >
+              立即报名 →
+            </button>
+          )}
+          {paid ? (
+            <Link
+              href="/cloudphone/course/0/0"
+              className="inline-flex rounded-full bg-[var(--accent)] p-2 text-[var(--accent-foreground)] sm:hidden"
+              aria-label="进入课程"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </Link>
+          ) : (
+            <button
+              type="button"
+              onClick={() => triggerPay()}
+              className="inline-flex rounded-full bg-[var(--accent)] p-2 text-[var(--accent-foreground)] sm:hidden"
+              aria-label="立即报名"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </button>
+          )}
        </div>
      </div>
    </header>
--- a/app/cloudphone/components/sections/CTASection.tsx
+++ b/app/cloudphone/components/sections/CTASection.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import Link from "next/link";
 import { CTA_CONFIG } from "../../config/course";
 import { isPaid } from "../../lib/payment";
+import { triggerPay } from "@/app/lib/triggerPay";

 export function CTASection() {
  const [paid, setPaid] = useState(false);
@@ -34,12 +35,22 @@ export function CTASection() {
            </span>
          ))}
        </div>
-        <Link
-          href={paid ? "/cloudphone/course/0/0" : "/cloudphone/pay"}
-          className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition-all duration-300 hover:scale-105 hover:opacity-95 hover:shadow-xl hover:shadow-[var(--accent)]/30 sm:px-10"
-        >
-          {paid ? "开始学习 →" : "立即加入 →"}
-        </Link>
+        {paid ? (
+          <Link
+            href="/cloudphone/course/0/0"
+            className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition-all duration-300 hover:scale-105 hover:opacity-95 hover:shadow-xl hover:shadow-[var(--accent)]/30 sm:px-10"
+          >
+            开始学习 →
+          </Link>
+        ) : (
+          <button
+            type="button"
+            onClick={() => triggerPay()}
+            className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition-all duration-300 hover:scale-105 hover:opacity-95 hover:shadow-xl hover:shadow-[var(--accent)]/30 sm:px-10"
+          >
+            立即加入 →
+          </button>
+        )}
      </div>
    </section>
  );
--- a/app/cloudphone/components/sections/Hero.tsx
+++ b/app/cloudphone/components/sections/Hero.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import Link from "next/link";
 import { HERO_CONFIG, CURRICULUM_CONFIG } from "../../config/course";
 import { isPaid } from "../../lib/payment";
+import { triggerPay } from "@/app/lib/triggerPay";
 import { getLastWatched, getProgress } from "../../lib/learning";
 import { ParticleBackground } from "../ParticleBackground";

@@ -74,13 +75,21 @@ export function Hero() {
            >
              继续学习 →
            </Link>
-          ) : (
+          ) : paid ? (
            <Link
-              href={paid ? "/cloudphone/course/0/0" : "/cloudphone/pay"}
+              href="/cloudphone/course/0/0"
              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"
            >
-              {paid ? "进入课程 →" : "立即报名 →"}
+              进入课程 →
            </Link>
+          ) : (
+            <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>
          )}
        </div>
        {paid && progress.completed > 0 && (