fix: 详情弹窗使用 Portal 渲染到 body,确保始终居中
父级 .page-enter 动画中的 transform 创建了新的 CSS containing block, 导致 position:fixed 相对父级而非视口定位。改用 createPortal 渲染到 document.body 绕过此限制。
This commit is contained in:
@@ -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
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user