1

src/components/creative-agent/CreativeAgentProcessPanel.tsx

@@ -0,0 +1,119 @@
+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;