perf: defer recharge modal bundle

src/features/workbench/WorkbenchPage.tsx

@@ -41,7 +41,7 @@ import { claimGenerationSlot, getActiveGenerationTaskCount, getGenerationUserKey
 import { preUploadReference, resolvePreUploadedUrl } from "../../api/referenceUploadService";
 import { assetClient } from "../../api/assetClient";
 import { communityClient } from "../../api/communityClient";
-import { RechargeModal } from "../../components/RechargeModal/RechargeModal";
+import { loadRechargeModal, type RechargeModalComponent } from "../../components/RechargeModal/loadRechargeModal";
 import { useGenerationTasks } from "../../hooks/useGenerationTasks";
 
 import { conversationClient, type ConversationSummary } from "../../api/conversationClient";
@@ -268,6 +268,7 @@ function WorkbenchPage({
   const [isGenerating, setIsGenerating] = useState(false);
   const [generationStatus, setGenerationStatus] = useState("准备就绪");
   const [showRechargeModal, setShowRechargeModal] = useState(false);
+  const [RechargeModal, setRechargeModal] = useState<RechargeModalComponent | null>(null);
   const [savedAssetMentionItems, setSavedAssetMentionItems] = useState<
     Pick<ReferenceItem, "id" | "kind" | "name" | "previewUrl" | "remoteUrl" | "token">[]
   >([]);
@@ -291,6 +292,21 @@ function WorkbenchPage({
     activeConversationIdRef.current = activeConversationId;
   }, []);
 
+  useEffect(() => {
+    if (!showRechargeModal || RechargeModal) return;
+
+    let cancelled = false;
+    void loadRechargeModal().then((component) => {
+      if (!cancelled) {
+        setRechargeModal(() => component);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [RechargeModal, showRechargeModal]);
+
   useEffect(() => {
     if (!isAuthenticated) return;
     let cancelled = false;
@@ -3191,7 +3207,9 @@ function WorkbenchPage({
 
       {renderMessagePreviewOverlay()}
       {renderDeleteDialog()}
-      <RechargeModal open={showRechargeModal} onClose={() => setShowRechargeModal(false)} currentBalance={session?.user?.balanceCents} />
+      {showRechargeModal && RechargeModal ? (
+        <RechargeModal open={showRechargeModal} onClose={() => setShowRechargeModal(false)} currentBalance={session?.user?.balanceCents} />
+      ) : null}
     </section>
   );
 }