'界面功能优化'

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