120 lines
4.3 KiB
TypeScript
120 lines
4.3 KiB
TypeScript
import {
|
|
CheckCircle2,
|
|
CircleDot,
|
|
Clock3,
|
|
Loader2,
|
|
TriangleAlert,
|
|
} from 'lucide-react';
|
|
|
|
import type { CreativeAgentProcessItem } from './creativeAgentViewModel';
|
|
|
|
type CreativeAgentProcessPanelProps = {
|
|
items: CreativeAgentProcessItem[];
|
|
isStreaming: boolean;
|
|
};
|
|
|
|
const PROCESS_TONE_CLASS: Record<CreativeAgentProcessItem['tone'], string> = {
|
|
active: 'border-[rgba(255,105,145,0.38)] bg-white/82',
|
|
done: 'border-emerald-200/80 bg-emerald-50/82',
|
|
info: 'border-[var(--platform-subpanel-border)] bg-white/68',
|
|
warning: 'border-amber-200/80 bg-amber-50/82',
|
|
danger: 'border-red-200/80 bg-red-50/86',
|
|
};
|
|
|
|
function ProcessIcon({ item }: { item: CreativeAgentProcessItem }) {
|
|
if (item.tone === 'active') {
|
|
return <Loader2 className="h-3.5 w-3.5 animate-spin" />;
|
|
}
|
|
if (item.tone === 'done') {
|
|
return <CheckCircle2 className="h-3.5 w-3.5" />;
|
|
}
|
|
if (item.tone === 'warning' || item.tone === 'danger') {
|
|
return <TriangleAlert className="h-3.5 w-3.5" />;
|
|
}
|
|
return <CircleDot className="h-3.5 w-3.5" />;
|
|
}
|
|
|
|
export function CreativeAgentProcessPanel({
|
|
items,
|
|
isStreaming,
|
|
}: CreativeAgentProcessPanelProps) {
|
|
const visibleItems = items.slice(-12).reverse();
|
|
|
|
if (visibleItems.length === 0) {
|
|
return (
|
|
<section className="platform-subpanel rounded-[1.35rem] p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="text-xs font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
|
|
过程
|
|
</div>
|
|
<Clock3 className="h-4 w-4 text-[var(--platform-text-soft)]" />
|
|
</div>
|
|
<div className="mt-3 text-sm font-semibold text-[var(--platform-text-base)]">
|
|
等待新的创作输入
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="platform-subpanel rounded-[1.35rem] p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="flex items-center gap-2 text-xs font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
|
|
{isStreaming ? (
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
) : null}
|
|
过程
|
|
</div>
|
|
<div className="rounded-full border border-[var(--platform-subpanel-border)] bg-white/62 px-2.5 py-1 text-[11px] font-bold text-[var(--platform-text-base)]">
|
|
{items.length} 条
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3 max-h-[22rem] space-y-2 overflow-y-auto pr-1">
|
|
{visibleItems.map((item) => (
|
|
<article
|
|
key={item.id}
|
|
className={`rounded-[1rem] border px-3 py-3 ${PROCESS_TONE_CLASS[item.tone]}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<span className="mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white/82 text-[var(--platform-text-strong)] shadow-sm">
|
|
<ProcessIcon item={item} />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="rounded-full bg-white/72 px-2 py-0.5 text-[11px] font-black text-[var(--platform-text-soft)]">
|
|
{item.meta}
|
|
</span>
|
|
<div className="min-w-0 flex-1 text-sm font-black leading-5 text-[var(--platform-text-strong)]">
|
|
{item.title}
|
|
</div>
|
|
</div>
|
|
{item.detail ? (
|
|
<div className="mt-1 text-xs leading-5 text-[var(--platform-text-base)]">
|
|
{item.detail}
|
|
</div>
|
|
) : null}
|
|
{item.detailLines.length > 0 ? (
|
|
<div className="mt-2 space-y-1">
|
|
{item.detailLines.map((line, index) => (
|
|
<div
|
|
key={`${item.id}-line-${index}`}
|
|
className="truncate rounded-[0.7rem] bg-white/58 px-2 py-1 text-[11px] font-semibold leading-4 text-[var(--platform-text-base)]"
|
|
title={line}
|
|
>
|
|
{line}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default CreativeAgentProcessPanel;
|