65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { AlertTriangle, RefreshCw } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
type ZooDesignStudioFrameProps = {
|
|
isReady: boolean;
|
|
sourceLabel: string;
|
|
src: string;
|
|
};
|
|
|
|
export function ZooDesignStudioFrame({
|
|
isReady,
|
|
sourceLabel,
|
|
src,
|
|
}: ZooDesignStudioFrameProps) {
|
|
const [loaded, setLoaded] = useState(false);
|
|
|
|
if (!isReady) {
|
|
return (
|
|
<div className="flex h-svh w-full items-center justify-center overflow-hidden bg-[#10100e] p-6 text-[#f8f6ef]">
|
|
<div className="w-full max-w-xl rounded-lg border border-[#3a352c] bg-[#171510] p-6 shadow-2xl">
|
|
<div className="flex items-start gap-3">
|
|
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-300" />
|
|
<div className="min-w-0">
|
|
<h1 className="font-semibold text-lg">
|
|
HiCAD 官方前端尚未构建
|
|
</h1>
|
|
<p className="mt-2 text-[#d3cabb] text-sm leading-6">
|
|
请运行
|
|
<code className="mx-1 rounded bg-white/10 px-1.5 py-0.5">
|
|
pnpm zoo-modeling-app:vendor
|
|
</code>
|
|
生成官方 Zoo Design Studio 前端。生成后刷新本页即可使用。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="relative h-svh w-full overflow-hidden bg-[#10100e]">
|
|
{!loaded && (
|
|
<div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-[#10100e] text-[#d3cabb]">
|
|
<div className="flex items-center gap-3 rounded-lg border border-[#3a352c] bg-[#171510]/95 px-4 py-3 shadow-xl">
|
|
<RefreshCw className="h-4 w-4 animate-spin" />
|
|
<span className="text-sm">正在加载 {sourceLabel}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<iframe
|
|
allow="clipboard-read; clipboard-write; fullscreen; gamepad; pointer-lock; web-share; xr-spatial-tracking"
|
|
className="h-full w-full border-0"
|
|
onLoad={() => setLoaded(true)}
|
|
referrerPolicy="strict-origin-when-cross-origin"
|
|
sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts"
|
|
src={src}
|
|
title="HiCAD"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|