285 lines
11 KiB
TypeScript
285 lines
11 KiB
TypeScript
import { motion } from 'motion/react';
|
|
|
|
import type { CustomWorldGenerationProgress } from '../../packages/shared/src/contracts/runtime';
|
|
import type { CustomWorldStructuredAnchorEntry } from '../services/customWorldAgentGenerationProgress';
|
|
|
|
interface CustomWorldGenerationViewProps {
|
|
settingText: string;
|
|
anchorEntries?: CustomWorldStructuredAnchorEntry[];
|
|
progress: CustomWorldGenerationProgress | null;
|
|
isGenerating: boolean;
|
|
error: string | null;
|
|
onBack: () => void;
|
|
onEditSetting: () => void;
|
|
onRetry: () => void;
|
|
onInterrupt?: () => void;
|
|
backLabel?: string;
|
|
settingActionLabel?: string;
|
|
retryLabel?: string;
|
|
interruptLabel?: string;
|
|
settingTitle?: string;
|
|
settingDescription?: string;
|
|
progressTitle?: string;
|
|
activeBadgeLabel?: string;
|
|
pausedBadgeLabel?: string;
|
|
idleBadgeLabel?: string;
|
|
structuredEmptyText?: string;
|
|
}
|
|
|
|
function formatDuration(ms: number) {
|
|
const safeMs = Math.max(0, Math.round(ms));
|
|
const totalSeconds = Math.ceil(safeMs / 1000);
|
|
const minutes = Math.floor(totalSeconds / 60);
|
|
const seconds = totalSeconds % 60;
|
|
|
|
if (minutes <= 0) {
|
|
return `${Math.max(1, seconds)} 秒`;
|
|
}
|
|
|
|
if (seconds === 0) {
|
|
return `${minutes} 分钟`;
|
|
}
|
|
|
|
return `${minutes} 分 ${seconds} 秒`;
|
|
}
|
|
|
|
function getProgressPercentage(progress: CustomWorldGenerationProgress | null) {
|
|
return Math.max(0, Math.min(100, progress?.overallProgress ?? 0));
|
|
}
|
|
|
|
function buildFallbackRenderKey(
|
|
value: string | null | undefined,
|
|
fallback: string,
|
|
) {
|
|
const normalizedValue = value?.trim();
|
|
return normalizedValue ? normalizedValue : fallback;
|
|
}
|
|
|
|
export function CustomWorldGenerationView({
|
|
settingText,
|
|
anchorEntries = [],
|
|
progress,
|
|
isGenerating,
|
|
error,
|
|
onBack,
|
|
onEditSetting,
|
|
onRetry,
|
|
onInterrupt,
|
|
backLabel = '返回',
|
|
settingActionLabel = '修改设定',
|
|
retryLabel = '重新开始生成',
|
|
interruptLabel = '中断世界生成',
|
|
settingTitle = '玩家设定',
|
|
settingDescription = '这段文本会直接驱动本轮世界框架、角色与场景生成。',
|
|
progressTitle = '生成进度',
|
|
activeBadgeLabel = '世界建设中',
|
|
pausedBadgeLabel = '生成已暂停',
|
|
idleBadgeLabel = '等待操作',
|
|
structuredEmptyText = '正在整理当前设定结构，请稍后。',
|
|
}: CustomWorldGenerationViewProps) {
|
|
const progressValue = getProgressPercentage(progress);
|
|
const steps = progress?.steps ?? [];
|
|
const hasStructuredAnchors = anchorEntries.length > 0;
|
|
const estimatedWaitText =
|
|
progress?.estimatedRemainingMs != null
|
|
? `预计还需 ${formatDuration(progress.estimatedRemainingMs)}`
|
|
: '正在校准预计等待时间';
|
|
const elapsedText =
|
|
progress != null
|
|
? `已耗时 ${formatDuration(progress.elapsedMs)}`
|
|
: '正在启动世界生成';
|
|
|
|
return (
|
|
<div
|
|
className="flex h-full min-h-0 flex-col overflow-y-auto overscroll-y-contain pr-1 pb-[max(1rem,env(safe-area-inset-bottom))]"
|
|
style={{ WebkitOverflowScrolling: 'touch' }}
|
|
>
|
|
<div className="platform-sticky-fade sticky top-0 z-20 -mx-3 mb-4 flex items-center justify-between gap-3 px-3 pb-3 pt-1 backdrop-blur-sm sm:static sm:mx-0 sm:bg-none sm:px-0 sm:pb-0 sm:pt-0 sm:backdrop-blur-none">
|
|
<button
|
|
type="button"
|
|
onClick={onBack}
|
|
disabled={isGenerating}
|
|
className={`platform-button platform-button--ghost min-h-0 px-3 py-1.5 text-[11px] ${isGenerating ? 'cursor-not-allowed opacity-45' : ''}`}
|
|
>
|
|
{backLabel}
|
|
</button>
|
|
<div className="platform-pill platform-pill--cool px-3 py-1 text-[10px] tracking-[0.2em]">
|
|
{isGenerating
|
|
? activeBadgeLabel
|
|
: error
|
|
? pausedBadgeLabel
|
|
: idleBadgeLabel}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-none flex-col gap-4 xl:min-h-0 xl:flex-1">
|
|
<section className="platform-surface platform-surface--soft flex flex-col px-4 py-3.5 xl:min-h-0 xl:flex-1">
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="min-w-0">
|
|
<div className="text-[11px] font-bold tracking-[0.2em] text-zinc-400">
|
|
{progressTitle}
|
|
</div>
|
|
<div className="mt-1 text-xl font-black leading-tight text-[var(--platform-text-strong)] sm:text-[2rem]">
|
|
{progress?.phaseLabel ?? '正在启动世界生成'}
|
|
</div>
|
|
<div className="mt-2 max-w-[36rem] text-sm leading-6 text-zinc-300">
|
|
{progress?.phaseDetail ?? '正在初始化世界生成链路与阶段监控。'}
|
|
</div>
|
|
</div>
|
|
<div className="shrink-0 sm:text-right">
|
|
<div className="text-[11px] tracking-[0.16em] text-zinc-500">
|
|
总进度
|
|
</div>
|
|
<div className="mt-1 text-3xl font-black text-[var(--platform-cool-text)] sm:text-4xl">
|
|
{progressValue}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="platform-progress-track mt-4 h-4 overflow-hidden rounded-full">
|
|
<motion.div
|
|
className="h-full bg-[linear-gradient(90deg,#ff4f8b_0%,#ff8a73_52%,#ffd2a6_100%)]"
|
|
animate={{ width: `${progressValue}%` }}
|
|
transition={{ duration: 0.35, ease: 'easeOut' }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-4 grid gap-2 sm:grid-cols-3">
|
|
<div className="platform-subpanel rounded-2xl px-4 py-3">
|
|
<div className="text-[11px] tracking-[0.16em] text-zinc-500">
|
|
当前批次
|
|
</div>
|
|
<div className="mt-1 text-sm font-semibold text-white">
|
|
{progress?.batchLabel ?? '准备中'}
|
|
</div>
|
|
</div>
|
|
<div className="platform-subpanel rounded-2xl px-4 py-3">
|
|
<div className="text-[11px] tracking-[0.16em] text-zinc-500">
|
|
预计等待
|
|
</div>
|
|
<div className="mt-1 text-sm font-semibold text-white">
|
|
{estimatedWaitText}
|
|
</div>
|
|
</div>
|
|
<div className="platform-subpanel rounded-2xl px-4 py-3">
|
|
<div className="text-[11px] tracking-[0.16em] text-zinc-500">
|
|
计时
|
|
</div>
|
|
<div className="mt-1 text-sm font-semibold text-white">
|
|
{elapsedText}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 space-y-2 xl:min-h-0 xl:flex-1 xl:overflow-y-auto xl:pr-1">
|
|
{steps.map((step, index) => (
|
|
<div
|
|
key={buildFallbackRenderKey(step.id, `progress-step-${index}`)}
|
|
className={`rounded-2xl border px-4 py-3 transition-colors ${
|
|
step.status === 'completed'
|
|
? 'border-emerald-400/16 bg-emerald-500/8'
|
|
: step.status === 'active'
|
|
? 'border-sky-300/22 bg-sky-500/10'
|
|
: 'platform-subpanel'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="text-sm font-semibold text-white">
|
|
{step.label}
|
|
</div>
|
|
<div className="text-xs text-zinc-300">
|
|
{step.completed}/{step.total}
|
|
</div>
|
|
</div>
|
|
<div className="mt-1 text-xs leading-6 text-zinc-400">
|
|
{step.detail}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{error ? (
|
|
<div className="mt-4 rounded-2xl border border-rose-400/18 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-100">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="mt-4 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:justify-end">
|
|
{!isGenerating ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={onEditSetting}
|
|
className="platform-button platform-button--ghost min-h-0 rounded-full px-4 py-2 text-sm"
|
|
>
|
|
{settingActionLabel}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onRetry}
|
|
className="platform-button platform-button--primary w-full sm:w-auto"
|
|
>
|
|
{retryLabel}
|
|
</button>
|
|
</>
|
|
) : onInterrupt ? (
|
|
<button
|
|
type="button"
|
|
onClick={onInterrupt}
|
|
className="rounded-full border border-rose-300/18 bg-rose-500/10 px-4 py-2 text-sm text-rose-100 transition-colors hover:text-white"
|
|
>
|
|
{interruptLabel}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="platform-surface platform-surface--soft overflow-hidden px-4 py-3.5">
|
|
<div className="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="min-w-0">
|
|
<div className="text-[11px] font-bold tracking-[0.2em] text-[var(--platform-cool-text)]">
|
|
{settingTitle}
|
|
</div>
|
|
<div className="mt-1 text-sm text-zinc-400">
|
|
{settingDescription}
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onEditSetting}
|
|
disabled={isGenerating}
|
|
className={`platform-button platform-button--ghost min-h-0 px-3 py-1.5 text-[11px] ${isGenerating ? 'cursor-not-allowed opacity-40' : ''}`}
|
|
>
|
|
{settingActionLabel}
|
|
</button>
|
|
</div>
|
|
{hasStructuredAnchors ? (
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
{anchorEntries.map((entry, index) => (
|
|
<div
|
|
key={buildFallbackRenderKey(
|
|
entry.id,
|
|
`anchor-entry-${index}`,
|
|
)}
|
|
className="platform-subpanel rounded-2xl px-4 py-4"
|
|
>
|
|
<div className="text-[11px] font-bold tracking-[0.18em] text-zinc-500">
|
|
{entry.label}
|
|
</div>
|
|
<div className="mt-2 whitespace-pre-line text-sm leading-7 text-zinc-100">
|
|
{entry.value}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="platform-subpanel whitespace-pre-line rounded-2xl px-4 py-4 text-sm leading-7 text-zinc-200 md:max-h-[16rem] md:overflow-y-auto">
|
|
{settingText || structuredEmptyText}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|