feat: simplify WorkflowNodeCard and WorkflowNodeIcon by removing tone handling and unused imports

This commit is contained in:
mlogclub
2026-06-28 12:51:03 +08:00
parent 1525f2e919
commit 298f65ee96
3 changed files with 18 additions and 54 deletions
@@ -2,7 +2,6 @@ import type { ReactNode } from "react"
import { cn } from "@/lib/utils"
import type { AIWorkflowNodeSpec } from "@/lib/api/admin"
import { getWorkflowNodeMeta } from "./workflow-node-meta"
import { WorkflowNodeIcon } from "./workflow-node-icon"
export function WorkflowNodeCard({
@@ -20,8 +19,6 @@ export function WorkflowNodeCard({
width?: "normal" | "wide"
children?: ReactNode
}) {
const meta = getWorkflowNodeMeta(nodeType)
return (
<div
className={cn(
@@ -34,7 +31,7 @@ export function WorkflowNodeCard({
>
<div className="overflow-hidden rounded-lg border border-transparent bg-background">
<div className="flex items-center gap-2 px-3 pb-2 pt-3">
<WorkflowNodeIcon type={nodeType} tone={meta.tone} />
<WorkflowNodeIcon type={nodeType} />
<div className="min-w-0 flex-1">
<div className="truncate text-sm font-semibold leading-5 text-foreground">
{title}
@@ -1,31 +1,23 @@
import { cn } from "@/lib/utils"
import {
getWorkflowNodeIconClass,
getWorkflowNodeMeta,
type WorkflowNodeTone,
} from "./workflow-node-meta"
import { getWorkflowNodeMeta } from "./workflow-node-meta"
export function WorkflowNodeIcon({
type,
tone,
size = "md",
className,
}: {
type: string
tone?: WorkflowNodeTone
size?: "sm" | "md"
className?: string
}) {
const meta = getWorkflowNodeMeta(type)
const Icon = meta.icon
const resolvedTone = tone ?? meta.tone
return (
<span
className={cn(
"flex shrink-0 items-center justify-center rounded-lg shadow-sm",
"flex shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground shadow-sm",
size === "md" ? "size-7" : "size-6",
getWorkflowNodeIconClass(resolvedTone),
className
)}
>
@@ -17,52 +17,27 @@ import {
type LucideIcon,
} from "lucide-react"
export type WorkflowNodeTone =
| "blue"
| "cyan"
| "emerald"
| "indigo"
| "amber"
| "violet"
| "rose"
| "slate"
export type WorkflowNodeMeta = {
icon: LucideIcon
tone: WorkflowNodeTone
}
const workflowNodeMetaByType: Record<string, WorkflowNodeMeta> = {
start: { icon: PlayCircleIcon, tone: "blue" },
conversation_understanding: { icon: MessageCircleIcon, tone: "indigo" },
reply_policy: { icon: ShieldCheckIcon, tone: "violet" },
knowledge_retrieve: { icon: BookOpenIcon, tone: "emerald" },
answerability_gate: { icon: HelpCircleIcon, tone: "cyan" },
llm_reply: { icon: BotIcon, tone: "indigo" },
condition: { icon: GitBranchIcon, tone: "cyan" },
analyze_conversation: { icon: SearchIcon, tone: "blue" },
prepare_ticket_draft: { icon: ClipboardListIcon, tone: "amber" },
human_confirm: { icon: UserCheckIcon, tone: "amber" },
create_ticket: { icon: TicketIcon, tone: "rose" },
handoff_to_human: { icon: HeadphonesIcon, tone: "amber" },
send_reply: { icon: SendIcon, tone: "emerald" },
end: { icon: FlagIcon, tone: "slate" },
start: { icon: PlayCircleIcon },
conversation_understanding: { icon: MessageCircleIcon },
reply_policy: { icon: ShieldCheckIcon },
knowledge_retrieve: { icon: BookOpenIcon },
answerability_gate: { icon: HelpCircleIcon },
llm_reply: { icon: BotIcon },
condition: { icon: GitBranchIcon },
analyze_conversation: { icon: SearchIcon },
prepare_ticket_draft: { icon: ClipboardListIcon },
human_confirm: { icon: UserCheckIcon },
create_ticket: { icon: TicketIcon },
handoff_to_human: { icon: HeadphonesIcon },
send_reply: { icon: SendIcon },
end: { icon: FlagIcon },
}
export function getWorkflowNodeMeta(type: string): WorkflowNodeMeta {
return workflowNodeMetaByType[type] ?? { icon: FileTextIcon, tone: "slate" }
}
export function getWorkflowNodeIconClass(tone: WorkflowNodeTone) {
const classes: Record<WorkflowNodeTone, string> = {
blue: "bg-blue-500 text-white shadow-blue-500/20",
cyan: "bg-cyan-500 text-white shadow-cyan-500/20",
emerald: "bg-emerald-500 text-white shadow-emerald-500/20",
indigo: "bg-indigo-500 text-white shadow-indigo-500/20",
amber: "bg-amber-500 text-white shadow-amber-500/20",
violet: "bg-violet-500 text-white shadow-violet-500/20",
rose: "bg-rose-500 text-white shadow-rose-500/20",
slate: "bg-slate-600 text-white shadow-slate-600/20",
}
return classes[tone]
return workflowNodeMetaByType[type] ?? { icon: FileTextIcon }
}