Commit dc5de128 by luoqi

fix(web): artifact 放大窗 portal 到 body — 小窗 transform 祖先把 fixed 圈住致其困在助手窗内

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
parent 9dc2093f
'use client'; 'use client';
import { useEffect, useMemo, useRef, useState } from 'react'; import { useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';
import { import {
...@@ -349,8 +350,12 @@ function ArtifactView({ artifact }: { artifact: Artifact }) { ...@@ -349,8 +350,12 @@ function ArtifactView({ artifact }: { artifact: Artifact }) {
</div> </div>
<ArtifactFrame artifact={artifact} autoHeight /> <ArtifactFrame artifact={artifact} autoHeight />
{/* 居中放大窗:与内联卡同源同流(streaming 时这里同步在"长") */} {/* 居中放大窗:与内联卡同源同流(streaming 时这里同步在"长")。
{expanded && ( ⚠️ portal 到 body —— 助手小窗容器带 transform(滑出动画),CSS 规定 transform 祖先
会把后代 fixed 圈进自己坐标系 → 不 portal 大窗就被困在小窗里(2026-06 实测)。 */}
{expanded &&
typeof document !== 'undefined' &&
createPortal(
<div className="fixed inset-0 z-[70] flex items-center justify-center p-4"> <div className="fixed inset-0 z-[70] flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/40" onClick={() => setExpanded(false)} /> <div className="absolute inset-0 bg-black/40" onClick={() => setExpanded(false)} />
<div className="relative z-10 flex h-[min(86vh,920px)] w-[min(980px,94vw)] flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl"> <div className="relative z-10 flex h-[min(86vh,920px)] w-[min(980px,94vw)] flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl">
...@@ -382,7 +387,8 @@ function ArtifactView({ artifact }: { artifact: Artifact }) { ...@@ -382,7 +387,8 @@ function ArtifactView({ artifact }: { artifact: Artifact }) {
</div> </div>
<ArtifactFrame artifact={artifact} autoHeight={false} className="min-h-0 flex-1" /> <ArtifactFrame artifact={artifact} autoHeight={false} className="min-h-0 flex-1" />
</div> </div>
</div> </div>,
document.body,
)} )}
</div> </div>
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment