fix: 详情弹窗使用 Portal 渲染到 body,确保始终居中

父级 .page-enter 动画中的 transform 创建了新的 CSS containing block,
导致 position:fixed 相对父级而非视口定位。改用 createPortal 渲染到
document.body 绕过此限制。
This commit is contained in:
2026-05-25 21:31:27 +08:00
parent 55aaa26549
commit 882e05955b
+4 -2
View File
@@ -1,4 +1,5 @@
import { useEffect, useState, useMemo } from 'react'
import { createPortal } from 'react-dom'
import { getRecentAssets } from '../api/generate'
import type { RecentAssetItem } from '../api/types'
@@ -40,7 +41,7 @@ function matchCategory(item: RecentAssetItem, cat: string): boolean {
function DetailModal({ item, onClose }: { item: RecentAssetItem; onClose: () => void }) {
const downloadUrl = `/api/v1/assets/download?key=${encodeURIComponent(item.key)}`
return (
return createPortal(
<div
style={{
position: 'fixed',
@@ -128,7 +129,8 @@ function DetailModal({ item, onClose }: { item: RecentAssetItem; onClose: () =>
</button>
</div>
</div>
</div>
</div>,
document.body
)
}