91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
import { X } from 'lucide-react';
|
||
|
||
type CustomWorldAgentLauncherModalProps = {
|
||
isOpen: boolean;
|
||
seedText: string;
|
||
isBusy: boolean;
|
||
error: string | null;
|
||
onClose: () => void;
|
||
onSeedTextChange: (value: string) => void;
|
||
onConfirm: () => void;
|
||
};
|
||
|
||
export function CustomWorldAgentLauncherModal({
|
||
isOpen,
|
||
seedText,
|
||
isBusy,
|
||
error,
|
||
onClose,
|
||
onSeedTextChange,
|
||
onConfirm,
|
||
}: CustomWorldAgentLauncherModalProps) {
|
||
if (!isOpen) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-[90] flex items-center justify-center bg-black/72 p-4 backdrop-blur-sm">
|
||
<div className="flex max-h-[92vh] w-full max-w-2xl flex-col overflow-hidden rounded-[2rem] border border-white/10 bg-[#11161f] shadow-[0_30px_90px_rgba(0,0,0,0.6)]">
|
||
<div className="flex items-center justify-between border-b border-white/10 px-5 py-4">
|
||
<div>
|
||
<div className="text-base font-semibold text-white">
|
||
开始和 Agent 共创
|
||
</div>
|
||
<div className="mt-1 text-xs text-zinc-400">
|
||
输入一段种子灵感，先进入新的工作区。
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
disabled={isBusy}
|
||
className="rounded-full border border-white/10 bg-white/5 p-2 text-zinc-300 transition hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="min-h-0 flex-1 overflow-y-auto px-5 py-5">
|
||
<label className="block">
|
||
<div className="mb-2 text-sm font-medium text-zinc-200">
|
||
Seed Text
|
||
</div>
|
||
<textarea
|
||
value={seedText}
|
||
onChange={(event) => onSeedTextChange(event.target.value)}
|
||
rows={7}
|
||
placeholder="例：一个被潮雾切碎的列岛世界，灯塔守望者、沉船秘术与旧盟约残片正在重新苏醒。"
|
||
className="w-full rounded-3xl border border-white/10 bg-black/30 px-4 py-3 text-sm leading-7 text-white outline-none transition focus:border-sky-400/40"
|
||
/>
|
||
</label>
|
||
|
||
{error ? (
|
||
<div className="mt-4 rounded-3xl border border-rose-400/25 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-100">
|
||
{error}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="flex flex-wrap items-center justify-end gap-3 border-t border-white/10 px-5 py-4">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
disabled={isBusy}
|
||
className="rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-zinc-300 transition hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={onConfirm}
|
||
disabled={isBusy}
|
||
className="rounded-2xl bg-sky-400 px-4 py-2 text-sm font-semibold text-slate-950 transition hover:bg-sky-300 disabled:cursor-not-allowed disabled:opacity-45"
|
||
>
|
||
{isBusy ? '处理中...' : '开始共创'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|