'界面功能优化'

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