skills
/
deerflow2
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(artifact)：Artifact 预览 iframe 增加加载中转圈

This commit is contained in:
肖应宇 2026-04-03 11:26:17 +08:00
parent 54295642a2
commit 86722a09a7
1 changed files with 55 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
View File

@ -9,6 +9,7 @@ import {
useEffect, useEffect,
useMemo, useMemo,
useState, useState,
type ComponentProps,
type HTMLAttributes, type HTMLAttributes,
} from "react"; } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
@ -477,7 +478,7 @@ export function ArtifactFileDetail({
)} )}
{isCodeFile && viewMode === "code" && ( {isCodeFile && viewMode === "code" && (
<div className="min-h-full mb-[180px] rounded-b-[10px] bg-white p-0 mb-0"> <div className="min-h-full mb-[207px] rounded-b-[10px] bg-white p-0 mb-0">
<CodeEditor <CodeEditor
className="size-full resize-none rounded-none border-none py-[20px]" className="size-full resize-none rounded-none border-none py-[20px]"
value={displayContent ?? ""} value={displayContent ?? ""}
@ -487,14 +488,13 @@ export function ArtifactFileDetail({
</div> </div>
)} )}
{!isCodeFile && ( {!isCodeFile && (
<div className="h-full mb-[180px]"> <PreviewIframe
<iframe className="size-full border-0"
className="size-full border-0" containerClassName="h-full mb-[207px]"
srcDoc={artifactViewerSrcDoc} srcDoc={artifactViewerSrcDoc}
sandbox="allow-same-origin allow-scripts allow-downloads" sandbox="allow-same-origin allow-scripts allow-downloads"
title={`Artifact preview: ${fileName}`} title={`Artifact preview: ${fileName}`}
/> />
</div>
)} )}
</ArtifactContent> </ArtifactContent>
</Artifact> </Artifact>
@ -515,7 +515,7 @@ export function ArtifactFilePreview({
if (language === "markdown") { if (language === "markdown") {
return ( return (
<div <div
className={cn("w-full bg-white mb-[207px] p-[20px]")} className={cn("w-full bg-white mb-[207px] p-[20px]")}
style={{ "--zoom-scale": zoomScale } as React.CSSProperties} style={{ "--zoom-scale": zoomScale } as React.CSSProperties}
> >
<Streamdown <Streamdown
@ -531,21 +531,57 @@ export function ArtifactFilePreview({
} }
if (language === "html") { if (language === "html") {
return ( return (
<div className="h-full mb-[180px]"> <PreviewIframe
<iframe className="size-full"
className="size-full" containerClassName="h-full mb-[207px]"
title="Artifact preview" title="Artifact preview"
srcDoc={content} srcDoc={content}
sandbox="allow-scripts allow-forms" sandbox="allow-scripts allow-forms"
style={{ zoom: zoomScale }} style={{ zoom: zoomScale }}
/> />
</div>
); );
} }
return null; return null;
} }
function PreviewIframe({
className,
containerClassName,
onLoad,
src,
srcDoc,
...props
}: ComponentProps<"iframe"> & {
containerClassName?: string;
}) {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setIsLoading(true);
}, [src, srcDoc]);
return (
<div className={cn("relative", containerClassName)}>
<iframe
className={className}
src={src}
srcDoc={srcDoc}
onLoad={(event) => {
setIsLoading(false);
onLoad?.(event);
}}
{...props}
/>
{isLoading && (
<div className="absolute inset-0 z-10 flex items-center justify-center bg-white/85">
<LoaderIcon className="text-muted-foreground size-5 animate-spin" />
</div>
)}
</div>
);
}
type ArtifactPreviewKind = type ArtifactPreviewKind =
| "html" | "html"
| "image" | "image"