script-build-and-framework-tmp/visualization/frontend/components/flow/StoryCard.tsx

import { ArrowRight, FileText } from "lucide-react";
import { Handle, Position, type NodeProps } from "@xyflow/react";
import type { CanvasNodeData } from "@/lib/layout";
import { SourceNoticeBadge, StatusBadge } from "@/components/ui/Badges";
import { CardFields } from "@/components/flow/CardFields";
import { SourceComparisonButton } from "@/components/flow/SourceComparisonButton";

export function StoryCard({ data }: NodeProps) {
  const { item, onOpen } = data as unknown as CanvasNodeData;
  if (!item || item.itemType !== "story") return null;
  const role = roleLabel(item.role);
  const actor = actorLabel(item.role);
  const hasFields = Boolean(item.card.primary || item.card.secondary.length);
  return <article className={`flowCard storyCard story-${item.kind} role-${item.role}`} data-focus-return={`${item.id}:card`} aria-label={`${item.title}`} tabIndex={0} onKeyDown={(event) => { if (event.target !== event.currentTarget) return; if (event.key === "Enter" || event.key === " ") { event.preventDefault(); onOpen(item, "business"); } }}>
    <Handle type="target" position={Position.Left} className="flowHandle" />
    <Handle type="source" position={Position.Right} className="flowHandle" />
    <header className="cardHeader"><div className="cardIdentity"><span className={`actorBadge actor-${actor.tone}`}>{actor.label}</span>{role !== item.title ? <span className="storyRole">{role}</span> : null}</div>{item.status ? <StatusBadge status={item.status} /> : null}</header>
    <h3>{item.title}</h3>
    <CardFields card={item.card} />
    <footer className="cardFooter">
      {item.detailRef || hasFields ? <button type="button" className="nodeAction nodrag nopan" data-focus-return={`${item.id}:business`} onClick={(event) => { event.stopPropagation(); onOpen(item, "business"); }}>查看详情<ArrowRight size={14} /></button> : null}
      <SourceComparisonButton item={item} onOpen={onOpen} />
      {item.artifactRef ? <button type="button" className="nodeAction nodrag nopan artifactAction" data-focus-return={`${item.id}:artifact`} onClick={(event) => { event.stopPropagation(); onOpen(item, "artifact"); }}><FileText size={14} />{item.role === "round-result" ? "查看本轮产出脚本表" : "查看完整候选脚本"}</button> : null}
    </footer>
    <SourceNoticeBadge notice={item.sourceNotice} />
  </article>;
}

function roleLabel(role: string) {
  return ({ "planning-analysis": "规划解析", objective: "创作目标", goal: "本轮目标", plan: "实现规划", "branch-task": "实现任务", "data-decision": "数据取舍", "candidate-output": "候选脚本", "domain-output": "领域事实", "multipath-review": "多方案评审", "multipath-decision": "多路决策", "round-evaluation": "主脚本整体评审", "round-result": "本轮产出", "final-result": "最终结果" } as Record<string, string>)[role] || "运行步骤";
}

function actorLabel(role: string) {
  if (role === "multipath-review" || role === "round-evaluation") return { label: role === "multipath-review" ? "多方案评审 Agent" : "整体评审 Agent", tone: "evaluator" };
  if (["branch-task", "data-decision", "candidate-output", "domain-output"].includes(role)) return { label: "实现 Agent", tone: "implementer" };
  return { label: "主 Agent", tone: "main" };
}