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 { useEffect, useState, useMemo } from 'react'
|
||||||
|
import { createPortal } from 'react-dom'
|
||||||
import { getRecentAssets } from '../api/generate'
|
import { getRecentAssets } from '../api/generate'
|
||||||
import type { RecentAssetItem } from '../api/types'
|
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 }) {
|
function DetailModal({ item, onClose }: { item: RecentAssetItem; onClose: () => void }) {
|
||||||
const downloadUrl = `/api/v1/assets/download?key=${encodeURIComponent(item.key)}`
|
const downloadUrl = `/api/v1/assets/download?key=${encodeURIComponent(item.key)}`
|
||||||
|
|
||||||
return (
|
return createPortal(
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
@@ -128,7 +129,8 @@ function DetailModal({ item, onClose }: { item: RecentAssetItem; onClose: () =>
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>,
|
||||||
|
document.body
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user