'界面功能优化'

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="/"
+      <button
-      className={`${baseClass} ${lockedClass}`}
+        type="button"
-      style={{ animationDelay: "0.5s", animationFillMode: "both" }}
+        onClick={() => setModalOpen(true)}
-      aria-label="即时问答（开通VIP解锁）"
+        className={`${baseClass} ${lockedClass}`}
-      title="开通VIP解锁即时问答"
+        style={{ animationDelay: "0.5s", animationFillMode: "both" }}
-    >
+        aria-label="即时问答（开通VIP解锁）"
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        title="即时问答"
-        <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>
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-    </Link>
+          <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)} />
+    </>
   );
 }

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
+            <button
-              href="/"
+              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>
   );
 }

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
+            <button
-              href="/"
+              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)} />
+    </>
   );
 }

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);

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,

app/cloudphone/lib/payment.ts

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

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>
+  );
+}

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);

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
+            <button
-              href="/"
+              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>
   );
 }

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
+            <button
-              href="/"
+              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)} />
+    </>
   );
 }

config/content.config.ts

@@ -24,7 +24,7 @@ export const CLOUDPHONE_COURSE_CONFIG: CourseConfig = {
   courseId: "cloudphone",
   courseHomeHref: "/cloudphone",
   payHref: "/",
-  freeTrial: (m, l) => m === 0 && l < 2,
+  freeTrial: () => false, /* 暂时全部加锁，仅 VIP 可看 */
   videoStoragePrefix: "lms-cloudphone-video-",
   learningStoragePrefix: "lms-cloudphone-",
 };