'界面功能优化'

2026-03-13 21:45:12 -05:00
parent 04995f91dd
commit df12c7af4a
11 changed files with 135 additions and 35 deletions
--- a/app/cloudphone/components/ChatFloatButton.tsx
+++ b/app/cloudphone/components/ChatFloatButton.tsx
@@ -1,13 +1,14 @@
 "use client";

 import { useState, useEffect } from "react";
-import Link from "next/link";
 import { isPaid } from "../lib/payment";
+import { InstantQaVipModal } from "@/app/components/InstantQaVipModal";

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

 export function ChatFloatButton() {
  const [paid, setPaid] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);

  useEffect(() => {
    setPaid(isPaid());
@@ -39,16 +40,20 @@ export function ChatFloatButton() {
  }

  return (
-    <Link
-      href="/"
-      className={`${baseClass} ${lockedClass}`}
-      style={{ animationDelay: "0.5s", animationFillMode: "both" }}
-      aria-label="即时问答（开通VIP解锁）"
-      title="开通VIP解锁即时问答"
-    >
-      <svg width="22" height="22" 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>
+    <>
+      <button
+        type="button"
+        onClick={() => setModalOpen(true)}
+        className={`${baseClass} ${lockedClass}`}
+        style={{ animationDelay: "0.5s", animationFillMode: "both" }}
+        aria-label="即时问答（开通VIP解锁）"
+        title="即时问答"
+      >
+        <svg width="22" height="22" 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>
+      </button>
+      <InstantQaVipModal open={modalOpen} onClose={() => setModalOpen(false)} />
+    </>
  );
 }
--- a/app/cloudphone/components/Footer.tsx
+++ b/app/cloudphone/components/Footer.tsx
@@ -4,11 +4,13 @@ import { useState, useEffect } from "react";
 import Link from "next/link";
 import { SITE_CONFIG } from "../config/course";
 import { isPaid } from "../lib/payment";
+import { InstantQaVipModal } from "@/app/components/InstantQaVipModal";

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

 export function Footer() {
  const [paid, setPaid] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);

  useEffect(() => {
    setPaid(isPaid());
@@ -40,22 +42,23 @@ export function Footer() {
              即时问答
            </a>
          ) : (
-            <Link
-              href="/"
+            <button
+              type="button"
+              onClick={() => setModalOpen(true)}
              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>
+            </button>
          )}
        </div>
        <div className="text-center text-sm text-[var(--muted-foreground)]">
          {SITE_CONFIG.footer}
        </div>
      </div>
+      <InstantQaVipModal open={modalOpen} onClose={() => setModalOpen(false)} />
    </footer>
  );
 }
--- a/app/cloudphone/components/Header.tsx
+++ b/app/cloudphone/components/Header.tsx
@@ -6,9 +6,11 @@ import { SITE_CONFIG } from "../config/course";
 import { isPaid } from "../lib/payment";
 import { triggerPay } from "@/app/lib/triggerPay";
 import { ThemeToggle } from "@/app/components/ThemeToggle";
+import { InstantQaVipModal } from "@/app/components/InstantQaVipModal";

 export function Header() {
  const [paid, setPaid] = useState(false);
+  const [qaModalOpen, setQaModalOpen] = useState(false);
  useEffect(() => {
    setPaid(isPaid());
    const onPayUpdate = () => setPaid(isPaid());
@@ -17,6 +19,7 @@ export function Header() {
  }, []);

  return (
+    <>
    <header className="animate__animated animate__fadeInDown fixed left-0 right-0 top-0 z-50 border-b border-[var(--border)] bg-[var(--background)]/90 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="/cloudphone" className="min-w-0 truncate text-sm font-medium sm:text-base md:text-xl">
@@ -37,16 +40,16 @@ export function Header() {
              即时问答
            </a>
          ) : (
-            <Link
-              href="/"
+            <button
+              type="button"
+              onClick={() => setQaModalOpen(true)}
              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>
+            </button>
          )}
          <Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
            首页
@@ -92,5 +95,7 @@ export function Header() {
        </div>
      </div>
    </header>
+    <InstantQaVipModal open={qaModalOpen} onClose={() => setQaModalOpen(false)} />
+    </>
  );
 }
--- a/app/cloudphone/components/sections/CurriculumSection.tsx
+++ b/app/cloudphone/components/sections/CurriculumSection.tsx
@@ -78,7 +78,7 @@ export function CurriculumSection() {
              {isOpen && (
                <ul className="border-t border-[var(--border)]">
                  {c.lessons.map((l) => {
-                    const free = l.moduleIndex === 0 && l.lessonIndex < 2;
+                    const free = false; /* 暂时全部加锁 */
                    const unlocked = canWatchLesson(l.moduleIndex, l.lessonIndex);
                    const key = `${l.moduleIndex}-${l.lessonIndex}`;
                    const bookmarked = isBookmarked(l.moduleIndex, l.lessonIndex);
--- a/app/cloudphone/course/[moduleIndex]/[lessonIndex]/page.tsx
+++ b/app/cloudphone/course/[moduleIndex]/[lessonIndex]/page.tsx
@@ -24,7 +24,7 @@ export default function LessonPage() {

  const lesson = getLesson(moduleIndex, lessonIndex);
  const unlocked = canWatchLesson(moduleIndex, lessonIndex);
-  const isFreeTrial = moduleIndex === 0 && lessonIndex < 2;
+  const isFreeTrial = false; /* 暂时全部加锁，仅 VIP 可看 */
  const [completed, setCompleted] = useState(() => getCompletedLessons().size);
  const { prev: prevLesson, next: nextLesson } = getPrevNextLesson(
    CURRICULUM_CONFIG.modules,
--- a/app/cloudphone/lib/payment.ts
+++ b/app/cloudphone/lib/payment.ts
@@ -10,9 +10,8 @@ export function isPaid(): boolean {
  return localStorage.getItem("paidType") === "vip";
 }

-/** 前 2 节为试看，无需支付 */
-export function isFreeTrial(moduleIndex: number, lessonIndex: number): boolean {
-  if (moduleIndex === 0 && lessonIndex < 2) return true;
+/** 暂时全部加锁，仅 VIP 可看（原前 2 节试看已关闭） */
+export function isFreeTrial(_moduleIndex: number, _lessonIndex: number): boolean {
  return false;
 }

--- a/app/components/InstantQaVipModal.tsx
+++ b/app/components/InstantQaVipModal.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect } from "react";
+import { triggerPay } from "@/app/lib/triggerPay";
+import styles from "@/app/vip/components/vip.module.css";
+
+type InstantQaVipModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+export function InstantQaVipModal({ open, onClose }: InstantQaVipModalProps) {
+  useEffect(() => {
+    if (open) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => { document.body.style.overflow = ""; };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const handleUnlock = () => {
+    onClose();
+    triggerPay();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="qa-vip-modal-title"
+    >
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <div
+        className="relative w-full max-w-[360px] rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-2xl animate__animated animate__fadeIn animate__faster"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="mb-4 flex items-center gap-3">
+          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--accent)]/20 text-xl">
+            💬
+          </span>
+          <h2 id="qa-vip-modal-title" className="text-lg font-semibold text-[var(--foreground)]" style={{ margin: 0 }}>
+            即时问答
+          </h2>
+        </div>
+        <p className="mb-6 text-sm leading-relaxed text-[var(--muted-foreground)]">
+          即时问答是会员专享的贴心服务，开通后即可获得一对一技术咨询支持，随时解答你的疑问～
+        </p>
+        <div className="flex flex-col gap-3">
+          <button
+            type="button"
+            onClick={handleUnlock}
+            className={`${styles.btnPrimary} ${styles.btnLarge} w-full`}
+          >
+            立即开通 →
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            className="w-full rounded-full border border-[var(--border)] py-2.5 text-sm text-[var(--muted-foreground)] transition hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+          >
+            稍后再说
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/topic/components/TopicCurriculum.tsx
+++ b/app/topic/components/TopicCurriculum.tsx
@@ -87,7 +87,7 @@ export function TopicCurriculum({ topicId }: TopicCurriculumProps) {
                  <ul className="border-t border-[var(--border)]">
                    {module.lessons.map((lesson, li) => {
                      const origMod = module.originalModuleIndex;
-                      const free = origMod === 0 && li < 2;
+                      const free = false; /* 暂时全部加锁 */
                      const unlocked = canWatchLesson(origMod, li);
                      const key = `${origMod}-${li}`;
                      const bookmarked = isBookmarked(origMod, li);
--- a/app/topic/components/TopicFooter.tsx
+++ b/app/topic/components/TopicFooter.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import Link from "next/link";
 import { getTopicConfig } from "../config";
 import { isPaid } from "@/app/cloudphone/lib/payment";
+import { InstantQaVipModal } from "@/app/components/InstantQaVipModal";

 type TopicFooterProps = {
  topicId: string;
@@ -14,6 +15,7 @@ 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);
+  const [modalOpen, setModalOpen] = useState(false);

  useEffect(() => {
    setPaid(isPaid());
@@ -48,22 +50,23 @@ export function TopicFooter({ topicId }: TopicFooterProps) {
              即时问答
            </a>
          ) : (
-            <Link
-              href="/"
+            <button
+              type="button"
+              onClick={() => setModalOpen(true)}
              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>
+            </button>
          )}
        </div>
        <div className="text-center text-sm text-[var(--muted-foreground)]">
          {config ? `${config.icon} ${config.title} · 异度星球` : "异度星球 · 数字游民社群"}
        </div>
      </div>
+      <InstantQaVipModal open={modalOpen} onClose={() => setModalOpen(false)} />
    </footer>
  );
 }
--- a/app/topic/components/TopicHeader.tsx
+++ b/app/topic/components/TopicHeader.tsx
@@ -6,6 +6,7 @@ import { ThemeToggle } from "@/app/components/ThemeToggle";
 import { getTopicConfig } from "../config";
 import { isPaid } from "@/app/cloudphone/lib/payment";
 import { triggerPay } from "@/app/lib/triggerPay";
+import { InstantQaVipModal } from "@/app/components/InstantQaVipModal";

 type TopicHeaderProps = {
  topicId: string;
@@ -13,6 +14,7 @@ type TopicHeaderProps = {

 export function TopicHeader({ topicId }: TopicHeaderProps) {
  const [paid, setPaid] = useState(false);
+  const [qaModalOpen, setQaModalOpen] = useState(false);
  const config = getTopicConfig(topicId);

  useEffect(() => {
@@ -25,6 +27,7 @@ export function TopicHeader({ topicId }: TopicHeaderProps) {
  const isEnrollCta = !config?.externalUrl && !paid;

  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" }}
@@ -57,16 +60,16 @@ export function TopicHeader({ topicId }: TopicHeaderProps) {
              即时问答
            </a>
          ) : (
-            <Link
-              href="/"
+            <button
+              type="button"
+              onClick={() => setQaModalOpen(true)}
              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>
+            </button>
          )}
          {config?.externalUrl ? (
            <Link
@@ -96,5 +99,7 @@ export function TopicHeader({ topicId }: TopicHeaderProps) {
        </nav>
      </div>
    </header>
+    <InstantQaVipModal open={qaModalOpen} onClose={() => setQaModalOpen(false)} />
+    </>
  );
 }