106 lines
4.2 KiB
TypeScript
106 lines
4.2 KiB
TypeScript
import { ArrowLeft, Edit3, Sparkles } from 'lucide-react';
|
|
|
|
import type { Match3DAgentSessionSnapshot } from '../../../packages/shared/src/contracts/match3dAgent';
|
|
|
|
type Match3DDraftReadyViewProps = {
|
|
session: Match3DAgentSessionSnapshot;
|
|
isBusy?: boolean;
|
|
error?: string | null;
|
|
onBack: () => void;
|
|
};
|
|
|
|
export function Match3DDraftReadyView({
|
|
session,
|
|
isBusy = false,
|
|
error = null,
|
|
onBack,
|
|
}: Match3DDraftReadyViewProps) {
|
|
const draft = session.draft;
|
|
const title = draft?.gameName || '抓大鹅草稿';
|
|
|
|
return (
|
|
<div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-4xl flex-col">
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onBack}
|
|
disabled={isBusy}
|
|
className={`platform-button platform-button--ghost min-h-0 self-start px-3 py-1.5 text-[11px] ${isBusy ? 'opacity-45' : ''}`}
|
|
>
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<ArrowLeft className="h-3.5 w-3.5" />
|
|
返回
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<section className="platform-subpanel min-h-0 flex-1 overflow-y-auto rounded-[1.5rem] p-4 sm:p-5">
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-start">
|
|
<div className="grid aspect-square w-full max-w-[10rem] shrink-0 place-items-center rounded-[1.2rem] bg-[radial-gradient(circle_at_30%_25%,rgba(190,242,100,0.36),transparent_34%),linear-gradient(135deg,rgba(16,185,129,0.18),rgba(251,146,60,0.16))] text-emerald-800">
|
|
<Sparkles className="h-10 w-10" />
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-2xl font-black leading-tight text-[var(--platform-text-strong)] sm:text-3xl">
|
|
{title}
|
|
</div>
|
|
<div className="mt-2 text-sm leading-6 text-[var(--platform-text-base)]">
|
|
{draft?.summaryText ?? session.lastAssistantReply ?? ''}
|
|
</div>
|
|
|
|
{draft ? (
|
|
<div className="mt-5 grid gap-2 sm:grid-cols-3">
|
|
<div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/68 px-3 py-3">
|
|
<div className="text-[11px] font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
|
|
题材
|
|
</div>
|
|
<div className="mt-1 truncate text-sm font-semibold text-[var(--platform-text-strong)]">
|
|
{draft.themeText}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/68 px-3 py-3">
|
|
<div className="text-[11px] font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
|
|
消除
|
|
</div>
|
|
<div className="mt-1 text-sm font-semibold text-[var(--platform-text-strong)]">
|
|
{draft.clearCount} 次
|
|
</div>
|
|
</div>
|
|
<div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/68 px-3 py-3">
|
|
<div className="text-[11px] font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
|
|
难度
|
|
</div>
|
|
<div className="mt-1 text-sm font-semibold text-[var(--platform-text-strong)]">
|
|
{draft.difficulty}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{error ? (
|
|
<div className="platform-banner platform-banner--danger mt-4 rounded-[1.25rem] text-sm leading-6">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="mt-4 flex justify-end pb-[max(0.25rem,env(safe-area-inset-bottom))]">
|
|
<button
|
|
type="button"
|
|
disabled
|
|
className="platform-button platform-button--primary cursor-not-allowed opacity-55"
|
|
>
|
|
<span className="inline-flex items-center gap-2">
|
|
<Edit3 className="h-4 w-4" />
|
|
继续编辑
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Match3DDraftReadyView;
|