'界面功能优化'

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