perf: defer recharge modal bundle

src/components/AppShell.tsx

@@ -19,10 +19,10 @@ import { ossAssets } from "../data/ossAssets";
 import { canManageCommunityCases, canReviewCommunity } from "../features/community-review/communityPermissions";
 import type { WebNavItem, WebNotification, WebUsageSummary, WebUserSession, WebViewKey } from "../types";
 import NotificationCenter from "./NotificationCenter";
-import { RechargeModal } from "./RechargeModal/RechargeModal";
 import { AnimatedPanel } from "./AnimatedPanel";
 import AdminMonitor from "./AdminMonitor";
 import CookieConsentBanner from "./CookieConsentBanner";
+import { loadRechargeModal, type RechargeModalComponent } from "./RechargeModal/loadRechargeModal";
 
 interface AppShellProps {
   activeView: WebViewKey;
@@ -93,6 +93,7 @@ function AppShell({
   const submenuHideTimerRef = useRef<number | null>(null);
   const [profileOpen, setProfileOpen] = useState(false);
   const [rechargeOpen, setRechargeOpen] = useState(false);
+  const [RechargeModal, setRechargeModal] = useState<RechargeModalComponent | null>(null);
   const [infoOpen, setInfoOpen] = useState(false);
   const infoRef = useRef<HTMLDivElement>(null);
   const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
@@ -192,6 +193,21 @@ function AppShell({
     };
   }, []);
 
+  useEffect(() => {
+    if (!rechargeOpen || RechargeModal) return;
+
+    let cancelled = false;
+    void loadRechargeModal().then((component) => {
+      if (!cancelled) {
+        setRechargeModal(() => component);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [RechargeModal, rechargeOpen]);
+
   const showSubmenu = (key: WebViewKey) => {
     if (submenuHideTimerRef.current) {
       window.clearTimeout(submenuHideTimerRef.current);
@@ -491,7 +507,9 @@ function AppShell({
         </main>
       </div>
       {session?.user.role === "admin" ? <AdminMonitor /> : null}
-      <RechargeModal open={rechargeOpen} onClose={() => setRechargeOpen(false)} currentBalance={displayedBalanceCents} />
+      {rechargeOpen && RechargeModal ? (
+        <RechargeModal open={rechargeOpen} onClose={() => setRechargeOpen(false)} currentBalance={displayedBalanceCents} />
+      ) : null}
       <CookieConsentBanner />
     </div>
   );

src/components/RechargeModal/RechargeModal.tsx

@@ -1,5 +1,6 @@
 import { CheckCircleOutlined, CloseOutlined, CrownOutlined, RocketOutlined } from "@ant-design/icons";
 import { useMemo, useState, type ReactNode } from "react";
+import "../../styles/components/recharge-modal.css";
 import { keyServerClient, type RechargeOrderResult } from "../../api/keyServerClient";
 import { toast } from "../toast/toastStore";
 
@@ -116,7 +117,7 @@ const paymentMethods: Array<{ id: PaymentMethod; label: string; hint: string }>
   { id: "bank", label: "对公转账", hint: "企业客户可联系客服确认" },
 ];
 
-interface RechargeModalProps {
+export interface RechargeModalProps {
   open: boolean;
   onClose: () => void;
   currentBalance?: number;

src/components/RechargeModal/loadRechargeModal.ts

@@ -0,0 +1,14 @@
+import type { ComponentType } from "react";
+import type { RechargeModalProps } from "./RechargeModal";
+
+export type RechargeModalComponent = ComponentType<RechargeModalProps>;
+
+let rechargeModalPromise: Promise<RechargeModalComponent> | null = null;
+
+export function loadRechargeModal(): Promise<RechargeModalComponent> {
+  if (!rechargeModalPromise) {
+    rechargeModalPromise = import("./RechargeModal").then((module) => module.RechargeModal);
+  }
+
+  return rechargeModalPromise;
+}