Makelore 2.0 initial clean snapshot
This commit is contained in:
inman
251
src/pages/Chat/GameAssetBrowser.tsx
Normal file
251
src/pages/Chat/GameAssetBrowser.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Archive, Check, Headphones, Image as ImageIcon, Loader2, RefreshCw, Search, X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { hostApiFetch } from '@/lib/host-api';
|
||||
import type { GameAssetReviewAction } from '@/lib/game-asset-selection-message';
|
||||
import {
|
||||
classifyGameAssetReviewLoadFailure,
|
||||
isGameAssetReviewResponse,
|
||||
type GameAssetCandidate,
|
||||
type GameAssetReviewLoadFailure,
|
||||
type GameAssetReviewSnapshot,
|
||||
} from './game-asset-review-recovery';
|
||||
|
||||
export type { GameAssetCandidate } from './game-asset-review-recovery';
|
||||
|
||||
type GameAssetDecisionDraft = Record<string, GameAssetReviewAction>;
|
||||
|
||||
export function GameAssetBrowser(props: {
|
||||
invocationId: string;
|
||||
candidateIds?: string[];
|
||||
onSubmit?: (assets: GameAssetCandidate[], decisions: GameAssetDecisionDraft) => void | Promise<void>;
|
||||
}) {
|
||||
const [assets, setAssets] = useState<GameAssetCandidate[]>([]);
|
||||
const [review, setReview] = useState<GameAssetReviewSnapshot | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadFailure, setLoadFailure] = useState<GameAssetReviewLoadFailure | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [previewAsset, setPreviewAsset] = useState<GameAssetCandidate | null>(null);
|
||||
const [draftDecisions, setDraftDecisions] = useState<GameAssetDecisionDraft>({});
|
||||
const [showSubmitDialog, setShowSubmitDialog] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setLoadFailure(null);
|
||||
setError(null);
|
||||
|
||||
const params = new URLSearchParams({ invocationId: props.invocationId });
|
||||
if (props.candidateIds?.length) params.set('candidateIds', JSON.stringify(props.candidateIds));
|
||||
const path = `/api/files/game-asset-review?${params.toString()}`;
|
||||
|
||||
try {
|
||||
for (let attempt = 0; attempt < 2; attempt += 1) {
|
||||
try {
|
||||
const response = await hostApiFetch<unknown>(path);
|
||||
if (!isGameAssetReviewResponse(response)) {
|
||||
setLoadFailure('stale');
|
||||
return;
|
||||
}
|
||||
setReview(response.review);
|
||||
setAssets(response.assets);
|
||||
setDraftDecisions({});
|
||||
setShowSubmitDialog(false);
|
||||
return;
|
||||
} catch (loadError) {
|
||||
const failure = classifyGameAssetReviewLoadFailure(loadError);
|
||||
if (failure === 'stale' || attempt === 1) {
|
||||
setLoadFailure(failure);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [props.candidateIds, props.invocationId]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const chooseAction = (assetId: string, action: GameAssetReviewAction) => {
|
||||
if (submitting) return;
|
||||
setDraftDecisions((current) => ({ ...current, [assetId]: action }));
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const selectedCount = assets.filter((asset) => Boolean(draftDecisions[asset.id])).length;
|
||||
const allAssetsSelected = assets.length > 0 && selectedCount === assets.length;
|
||||
const actionLabel = (action: GameAssetReviewAction): string => (
|
||||
action === 'approve' ? '纳入开发' : action === 'discard' ? '舍弃' : '重新寻找'
|
||||
);
|
||||
|
||||
const submitBatch = async () => {
|
||||
if (!review || !allAssetsSelected || submitting) return;
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
const decisions = assets.flatMap((asset) => {
|
||||
const action = draftDecisions[asset.id];
|
||||
return action ? [{ assetId: asset.id, action }] : [];
|
||||
});
|
||||
try {
|
||||
const response = await hostApiFetch<{ success: boolean; review: GameAssetReviewSnapshot }>('/api/files/game-asset-review', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
invocationId: props.invocationId,
|
||||
candidateIds: review.candidateIds,
|
||||
decisions,
|
||||
}),
|
||||
});
|
||||
setReview(response.review);
|
||||
setAssets([]);
|
||||
setDraftDecisions({});
|
||||
setShowSubmitDialog(false);
|
||||
try {
|
||||
await props.onSubmit?.(assets, Object.fromEntries(decisions.map((item) => [item.assetId, item.action])));
|
||||
} catch {
|
||||
setError('审核结果已保存，但暂时无法通知伙伴，请稍后继续对话');
|
||||
}
|
||||
} catch {
|
||||
setShowSubmitDialog(false);
|
||||
setError('素材审核结果暂时无法保存，请稍后重试');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const approvedCount = review ? Object.values(review.decisions).filter((decision) => decision === 'approved').length : 0;
|
||||
const discardedCount = review ? Object.values(review.decisions).filter((decision) => decision !== 'approved').length : 0;
|
||||
|
||||
if (loading) {
|
||||
return <section data-testid="game-asset-browser" className="flex min-h-28 w-full items-center justify-center rounded-md border-2 border-[#26384D] bg-[#e9fff9] text-[#26384D] shadow-[3px_3px_0_#26384D]"><Loader2 className="h-5 w-5 animate-spin" /></section>;
|
||||
}
|
||||
|
||||
if (loadFailure === 'stale') {
|
||||
return (
|
||||
<section
|
||||
data-testid="game-asset-browser-stale"
|
||||
className="flex min-h-24 w-full items-center rounded-md border-2 border-[#26384D] bg-[#FFFFFF] px-4 py-3 text-[#26384D] shadow-[3px_3px_0_#26384D]"
|
||||
>
|
||||
<p className="text-pretty text-sm font-bold">旧素材卡片已失效，已自动跳过，不影响继续对话</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
if (loadFailure === 'retryable') {
|
||||
return (
|
||||
<section
|
||||
data-testid="game-asset-browser-retryable"
|
||||
className="flex min-h-24 w-full items-center justify-between gap-3 rounded-md border-2 border-[#26384D] bg-[#FFFFFF] px-4 py-3 text-[#26384D] shadow-[3px_3px_0_#26384D]"
|
||||
>
|
||||
<p className="text-pretty text-sm font-bold">素材卡片暂时无法加载，不影响继续对话</p>
|
||||
<Button
|
||||
type="button"
|
||||
className="h-10 shrink-0 border-2 border-[#26384D] bg-[#DCE6EF] font-black text-[#26384D] transition-transform active:scale-[0.96]"
|
||||
onClick={() => void load()}
|
||||
>
|
||||
<RefreshCw className="mr-1 h-4 w-4" />重新加载
|
||||
</Button>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
if (review?.status === 'resolved' && review.candidateIds.length > 0) {
|
||||
return (
|
||||
<section data-testid="game-asset-review-summary" className="w-full rounded-md border-2 border-[#26384D] bg-[#e9fff9] px-3 py-3 text-[#26384D] shadow-[3px_3px_0_#26384D]">
|
||||
<div className="flex items-start gap-2">
|
||||
<Check className="mt-0.5 h-4 w-4 shrink-0 text-emerald-700" />
|
||||
<div>
|
||||
<p className="text-sm font-black">本轮审核已完成</p>
|
||||
<p className="mt-1 text-xs font-medium leading-5 text-[#68788B]">纳入开发 {approvedCount} 个，舍弃 {discardedCount} 个。未处理素材不会自动带入下一轮。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section data-testid="game-asset-browser" className="w-full rounded-md border-2 border-[#26384D] bg-[#e9fff9] px-3 py-3 text-[#26384D] shadow-[3px_3px_0_#26384D]">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="text-sm font-black">素材审核台</h3>
|
||||
<p className="text-xs font-bold text-[#68788B]">先逐项选择，全部选完后一次性提交审核结果。</p>
|
||||
</div>
|
||||
{review ? <span className="rounded border-2 border-[#26384D] bg-white px-2 py-1 text-[10px] font-black">待处理 {review.pendingAssetIds.length} 个</span> : null}
|
||||
</div>
|
||||
|
||||
{error ? <p className="mt-3 rounded border-2 border-red-400 bg-red-50 p-2 text-xs font-bold text-red-700">{error}</p> : null}
|
||||
{!error && assets.length === 0 ? (
|
||||
<p className="mt-3 rounded border-2 border-dashed border-[#26384D] bg-white p-3 text-xs font-bold">Agent 本次没有提交可审核的素材。未处理内容不会自动从旧批次带入。</p>
|
||||
) : null}
|
||||
{assets.length > 0 ? (
|
||||
<div className="mt-3 flex gap-3 overflow-x-auto pb-2" data-testid="game-asset-candidate-list">
|
||||
{assets.map((asset) => {
|
||||
const selectedAction = draftDecisions[asset.id];
|
||||
return (
|
||||
<article key={asset.id} className={`w-56 shrink-0 overflow-hidden rounded-md border-2 border-[#26384D] bg-white shadow-[3px_3px_0_#26384D] ${selectedAction ? 'ring-4 ring-[#F26A3D]/60' : ''}`}>
|
||||
<button type="button" className="flex h-28 w-full items-center justify-center overflow-hidden border-b-2 border-[#26384D] bg-[#FFFFFF]" onClick={() => setPreviewAsset(asset)}>
|
||||
{asset.previewDataUrl ? <img src={asset.previewDataUrl} alt={asset.name} className="h-full w-full object-contain" />
|
||||
: asset.mediaKind === 'audio' ? <Headphones className="h-10 w-10 text-[#3A5578]" />
|
||||
: asset.mediaKind === 'bundle' ? <Archive className="h-10 w-10 text-[#F26A3D]" />
|
||||
: <ImageIcon className="h-10 w-10 text-slate-400" />}
|
||||
</button>
|
||||
<div className="space-y-2 p-3">
|
||||
<div className="flex items-start justify-between gap-2"><strong className="line-clamp-2 text-xs">{asset.name}</strong><Badge className="border border-[#26384D] bg-[#EEF3F7] text-[9px] text-[#26384D]">{selectedAction ? actionLabel(selectedAction) : asset.status}</Badge></div>
|
||||
<p className="line-clamp-2 text-[11px] font-medium">{asset.purpose || '未填写用途'}</p>
|
||||
<p className="truncate text-[10px] text-[#68788B]">来源：{asset.source || '未填写'}</p>
|
||||
<p className="truncate text-[10px] text-[#68788B]">授权：{asset.license || '未填写'}</p>
|
||||
{asset.audioDataUrl ? <audio controls preload="metadata" className="h-8 w-full" src={asset.audioDataUrl} /> : null}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button type="button" size="sm" disabled={submitting} className={`h-8 border-2 border-[#26384D] text-[11px] font-black text-[#26384D] ${selectedAction === 'approve' ? 'bg-[#DCE6EF]' : 'bg-white'}`} aria-pressed={selectedAction === 'approve'} aria-label={`纳入开发 ${asset.name}`} onClick={() => chooseAction(asset.id, 'approve')}>纳入开发</Button>
|
||||
<Button type="button" size="sm" variant="outline" disabled={submitting} className={`h-8 border-2 border-[#26384D] text-[11px] font-black ${selectedAction === 'discard' ? 'bg-[#ffd8c2]' : ''}`} aria-pressed={selectedAction === 'discard'} aria-label={`舍弃 ${asset.name}`} onClick={() => chooseAction(asset.id, 'discard')}>舍弃</Button>
|
||||
</div>
|
||||
<Button type="button" size="sm" variant="outline" disabled={submitting} className={`h-8 w-full border-2 border-[#26384D] text-[11px] font-black ${selectedAction === 'replace' ? 'bg-[#EEF3F7]' : ''}`} aria-pressed={selectedAction === 'replace'} aria-label={`重新寻找 ${asset.name}`} onClick={() => chooseAction(asset.id, 'replace')}><Search className="mr-1 h-3 w-3" />不合适，重新寻找</Button>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{assets.length > 0 ? (
|
||||
<div className="mt-2 flex items-center justify-between gap-3 border-t-2 border-[#26384D]/20 pt-3">
|
||||
<p className="text-[10px] font-bold text-[#68788B]">已选择 {selectedCount} / {assets.length} 个{allAssetsSelected ? '，可以提交' : `，还需选择 ${assets.length - selectedCount} 个`}</p>
|
||||
<Button type="button" size="sm" disabled={!allAssetsSelected || submitting} className="border-2 border-[#26384D] bg-[#DCE6EF] text-[11px] font-black text-[#26384D]" onClick={() => setShowSubmitDialog(true)}>查看并提交本轮结果</Button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{review && (approvedCount > 0 || discardedCount > 0) ? <p className="mt-2 text-[10px] font-bold text-[#68788B]">本轮已提交：纳入 {approvedCount} 个，舍弃 {discardedCount} 个。未处理素材不会自动带入下一轮。</p> : null}
|
||||
|
||||
{showSubmitDialog ? (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-5" role="dialog" aria-modal="true" aria-label="确认提交本轮素材审核结果">
|
||||
<div className="max-h-[85vh] w-full max-w-2xl overflow-auto rounded-lg border-4 border-[#26384D] bg-[#FFFFFF] p-5 shadow-[8px_8px_0_#26384D]">
|
||||
<div className="flex items-start justify-between gap-3"><div><h3 className="text-lg font-black">确认提交本轮审核</h3><p className="text-sm font-bold text-[#68788B]">将一次性保存全部决定，并只发送一条汇总对话。</p></div><Button type="button" size="icon" variant="outline" aria-label="关闭提交确认" className="border-2 border-[#26384D]" onClick={() => setShowSubmitDialog(false)}><X className="h-4 w-4" /></Button></div>
|
||||
<div className="mt-4 grid gap-2 sm:grid-cols-3">
|
||||
{(['approve', 'discard', 'replace'] as const).map((action) => {
|
||||
const selected = assets.filter((asset) => draftDecisions[asset.id] === action);
|
||||
return <div key={action} className="rounded border-2 border-[#26384D] bg-white p-3 text-xs"><p className="font-black">{actionLabel(action)}：{selected.length} 个</p><p className="mt-1 line-clamp-3 text-[#68788B]">{selected.map((asset) => asset.name).join('、') || '无'}</p></div>;
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-5 flex justify-end gap-2"><Button type="button" variant="outline" disabled={submitting} className="border-2 border-[#26384D] font-black" onClick={() => setShowSubmitDialog(false)}>返回修改</Button><Button type="button" disabled={submitting} className="border-2 border-[#26384D] bg-[#DCE6EF] font-black text-[#26384D]" onClick={() => void submitBatch()}>{submitting ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null}确认并一次性提交</Button></div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{previewAsset ? (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-5" role="dialog" aria-modal="true" aria-label={`${previewAsset.name} 素材预览`}>
|
||||
<div className="max-h-[85vh] w-full max-w-3xl overflow-auto rounded-lg border-4 border-[#26384D] bg-[#FFFFFF] p-5 shadow-[8px_8px_0_#26384D]">
|
||||
<div className="flex items-start justify-between gap-3"><div><h3 className="text-lg font-black">{previewAsset.name}</h3><p className="text-sm font-bold text-[#68788B]">{previewAsset.purpose}</p></div><Button type="button" size="icon" variant="outline" aria-label="关闭素材预览" className="border-2 border-[#26384D]" onClick={() => setPreviewAsset(null)}><X className="h-4 w-4" /></Button></div>
|
||||
{previewAsset.previewDataUrl ? <img src={previewAsset.previewDataUrl} alt={previewAsset.name} className="mt-4 max-h-[50vh] w-full rounded border-2 border-[#26384D] bg-white object-contain" /> : null}
|
||||
{previewAsset.audioDataUrl ? <audio controls autoPlay className="mt-4 w-full" src={previewAsset.audioDataUrl} /> : null}
|
||||
{previewAsset.manifest.length > 0 ? <div className="mt-4"><h4 className="text-sm font-black">文件清单</h4><ul className="mt-2 max-h-52 overflow-auto rounded border-2 border-[#26384D] bg-white p-3 text-xs">{previewAsset.manifest.map((item) => <li key={item} className="py-0.5">{item}</li>)}</ul></div> : null}
|
||||
{previewAsset.unavailableReason ? <p className="mt-4 rounded border-2 border-amber-400 bg-amber-50 p-3 text-xs font-bold">{previewAsset.unavailableReason}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user