fix: PC 端基金详情弹框滚动问题

app/components/PcFundTable.jsx

@@ -1077,6 +1077,7 @@ export default function PcFundTable({
   const totalHeaderWidth = headerGroup?.headers?.reduce((acc, h) => acc + h.column.getSize(), 0) ?? 0;
 
   return (
+    <>
       <div className="pc-fund-table" ref={tableContainerRef}>
         <style>{`
         .table-row-scroll {
@@ -1257,46 +1258,6 @@ export default function PcFundTable({
             confirmText="重置"
           />
         )}
-      <PcTableSettingModal
-        open={settingModalOpen}
-        onClose={() => setSettingModalOpen(false)}
-        columns={columnOrder.map((id) => ({ id, header: COLUMN_HEADERS[id] ?? id }))}
-        onColumnReorder={(newOrder) => {
-          setColumnOrder(newOrder);
-        }}
-        columnVisibility={columnVisibility}
-        onToggleColumnVisibility={handleToggleColumnVisibility}
-        onResetColumnOrder={handleResetColumnOrder}
-        onResetColumnVisibility={handleResetColumnVisibility}
-        onResetSizing={() => setResetConfirmOpen(true)}
-        showFullFundName={showFullFundName}
-        onToggleShowFullFundName={handleToggleShowFullFundName}
-      />
-      <Dialog
-        open={!!(cardDialogRow && getFundCardProps)}
-        onOpenChange={(open) => {
-          if (!open && !blockDialogClose) setCardDialogRow(null);
-        }}
-      >
-        <DialogContent
-          className="sm:max-w-2xl max-h-[88vh] flex flex-col p-0 overflow-hidden"
-          onPointerDownOutside={blockDialogClose ? (e) => e.preventDefault() : undefined}
-        >
-          <DialogHeader className="flex-shrink-0 flex flex-row items-center justify-between gap-2 space-y-0 px-6 pb-4 pt-6 text-left border-b border-[var(--border)]">
-            <DialogTitle className="text-base font-semibold text-[var(--text)]">
-              基金详情
-            </DialogTitle>
-          </DialogHeader>
-          <div
-          className="flex-1 min-h-0 overflow-y-auto px-6 py-4 scrollbar-y-styled"
-          >
-            {cardDialogRow && getFundCardProps ? (
-              <FundCard {...getFundCardProps(cardDialogRow)} layoutMode="drawer" />
-            ) : null}
-          </div>
-        </DialogContent>
-      </Dialog>
-
         {showPortalHeader && ReactDOM.createPortal(
           <div
             className="pc-fund-table pc-fund-table-portal-header"
@@ -1341,5 +1302,54 @@ export default function PcFundTable({
           document.body
         )}
       </div>
+      {!!(cardDialogRow && getFundCardProps) && (
+        <FundDetailDialog blockDialogClose={blockDialogClose} cardDialogRow={cardDialogRow} getFundCardProps={getFundCardProps} setCardDialogRow={setCardDialogRow} />
+      )}
+      <PcTableSettingModal
+        open={settingModalOpen}
+        onClose={() => setSettingModalOpen(false)}
+        columns={columnOrder.map((id) => ({ id, header: COLUMN_HEADERS[id] ?? id }))}
+        onColumnReorder={(newOrder) => {
+          setColumnOrder(newOrder);
+        }}
+        columnVisibility={columnVisibility}
+        onToggleColumnVisibility={handleToggleColumnVisibility}
+        onResetColumnOrder={handleResetColumnOrder}
+        onResetColumnVisibility={handleResetColumnVisibility}
+        onResetSizing={() => setResetConfirmOpen(true)}
+        showFullFundName={showFullFundName}
+        onToggleShowFullFundName={handleToggleShowFullFundName}
+      />
+    </>
+
   );
 }
+
+function FundDetailDialog({ blockDialogClose, cardDialogRow, getFundCardProps, setCardDialogRow}) {
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open && !blockDialogClose) setCardDialogRow(null);
+      }}
+    >
+      <DialogContent
+        className="sm:max-w-2xl max-h-[88vh] flex flex-col p-0 overflow-hidden"
+        onPointerDownOutside={blockDialogClose ? (e) => e.preventDefault() : undefined}
+      >
+        <DialogHeader className="flex-shrink-0 flex flex-row items-center justify-between gap-2 space-y-0 px-6 pb-4 pt-6 text-left border-b border-[var(--border)]">
+          <DialogTitle className="text-base font-semibold text-[var(--text)]">
+            基金详情
+          </DialogTitle>
+        </DialogHeader>
+        <div
+          className="flex-1 min-h-0 overflow-y-auto px-6 py-4 scrollbar-y-styled"
+        >
+          {cardDialogRow && getFundCardProps ? (
+            <FundCard {...getFundCardProps(cardDialogRow)} layoutMode="drawer" />
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

app/hooks/useBodyScrollLock.js

@@ -15,9 +15,11 @@ function lockBodyScroll() {
     originalBodyPosition = document.body.style.position || "";
     originalBodyTop = document.body.style.top || "";
 
-    document.body.style.position = "fixed";
+    requestAnimationFrame(() => {
       document.body.style.top = `-${lockedScrollY}px`;
       document.body.style.width = "100%";
+      document.body.style.position = "fixed";
+    });
   }
 }
 
@@ -28,12 +30,15 @@ function unlockBodyScroll() {
 
   // 只有全部弹框都关闭时才恢复滚动位置
   if (scrollLockCount === 0) {
+    const scrollY = lockedScrollY;
+
     document.body.style.position = originalBodyPosition;
     document.body.style.top = originalBodyTop;
     document.body.style.width = "";
 
-    // 恢复到锁定前的滚动位置，而不是跳到顶部
-    window.scrollTo(0, lockedScrollY);
+    requestAnimationFrame(() => {
+      window.scrollTo(0, scrollY);
+    });
   }
 }
 

components/ui/dialog.jsx

@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-import { XIcon } from "lucide-react"
 import { Dialog as DialogPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
@@ -86,6 +85,8 @@ function DialogContent({
       <DialogOverlay className={overlayClassName} style={overlayStyle} />
       <DialogPrimitive.Content
         data-slot="dialog-content"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onCloseAutoFocus={(e) => e.preventDefault()}
         className={cn(
           "fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[16px] border border-[var(--border)] text-[var(--foreground)] p-6 dialog-content-shadow outline-none duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           "mobile-dialog-glass",