feat: update NodeConfigPanel and WorkflowConfigPanel with improved title handling and UI enhancements

This commit is contained in:
mlogclub
2026-06-28 19:30:42 +08:00
parent f99a58f9df
commit c4a2389965
2 changed files with 27 additions and 38 deletions
@@ -130,27 +130,6 @@ export function NodeConfigPanel({
</div> </div>
) : null} ) : null}
<div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3"> <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3">
<ConfigCard
title="基础信息"
meta={nodeSpec?.description ? "说明" : undefined}
>
<div className="space-y-2">
<Label htmlFor={`node-title-${node.id}`} className="text-xs text-slate-600">
</Label>
<Input
id={`node-title-${node.id}`}
value={node.data?.title ?? ""}
placeholder={nodeSpec?.title || node.type}
className={cardInputClassName}
onChange={(event) => updateData({ title: event.target.value })}
/>
</div>
{nodeSpec?.description ? (
<p className="mt-3 text-xs leading-5 text-slate-500">{nodeSpec.description}</p>
) : null}
</ConfigCard>
{inputSchema.length > 0 ? ( {inputSchema.length > 0 ? (
<ConfigCard title="输入" meta={`${inputSchema.length}`}> <ConfigCard title="输入" meta={`${inputSchema.length}`}>
<div className="space-y-3"> <div className="space-y-3">
@@ -239,21 +218,8 @@ export function ConditionBranchConfigPanel({
return ( return (
<div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3"> <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3">
<ConfigCard title="基础信息" meta={branch.default ? "默认" : "条件"}> <ConfigCard title="分支目标" meta={branch.default ? "默认" : "条件"}>
<div className="space-y-3"> <div className="space-y-3">
<div className="space-y-1.5">
<Label htmlFor={`condition-branch-name-${node.id}-${branch.id}`} className="text-xs text-slate-600">
</Label>
<Input
id={`condition-branch-name-${node.id}-${branch.id}`}
value={branch.name ?? ""}
placeholder={branch.id}
className={cardInputClassName}
onChange={(event) => updateBranch({ ...branch, name: event.target.value })}
/>
</div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-slate-600"></Label> <Label className="text-xs text-slate-600"></Label>
<OptionCombobox <OptionCombobox
@@ -3,6 +3,7 @@
import { XIcon } from "lucide-react" import { XIcon } from "lucide-react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin" import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
import type { SelectedWorkflowBranch } from "./workflow-branch-selection" import type { SelectedWorkflowBranch } from "./workflow-branch-selection"
@@ -67,6 +68,25 @@ export function WorkflowConfigPanel({
}) })
onSelectBranch(null) onSelectBranch(null)
} }
const updatePanelTitle = (title: string) => {
if (selectedBranchItem && selectedBranch) {
const config = normalizeNodeConfig(selectedNode.data?.config)
onChangeNodeData(selectedNode.id, {
...(selectedNode.data ?? {}),
config: {
...config,
branches: (config.branches ?? []).map((branch) => (
branch.id === selectedBranch.branchId ? { ...branch, name: title } : branch
)),
},
})
return
}
onChangeNodeData(selectedNode.id, {
...(selectedNode.data ?? {}),
title,
})
}
return ( return (
<div className="pointer-events-none absolute inset-y-3 right-3 z-50 flex w-[380px] max-w-[calc(100%-1.5rem)]"> <div className="pointer-events-none absolute inset-y-3 right-3 z-50 flex w-[380px] max-w-[calc(100%-1.5rem)]">
@@ -81,9 +101,12 @@ export function WorkflowConfigPanel({
className="rounded-md bg-slate-100 text-slate-600 shadow-none" className="rounded-md bg-slate-100 text-slate-600 shadow-none"
/> />
<div className="min-w-0"> <div className="min-w-0">
<div className="truncate text-sm font-semibold leading-5 text-slate-900"> <Input
{panelTitle} value={panelTitle}
</div> placeholder={selectedBranchItem ? selectedBranchItem.id : selectedNodeSpec?.title || selectedNode.type}
className="h-6 border-transparent bg-transparent px-0 text-sm font-semibold leading-5 text-slate-900 shadow-none hover:border-transparent focus-visible:ring-0"
onChange={(event) => updatePanelTitle(event.target.value)}
/>
{panelDescription ? ( {panelDescription ? (
<div className="mt-1 line-clamp-2 text-xs leading-5 text-slate-500"> <div className="mt-1 line-clamp-2 text-xs leading-5 text-slate-500">
{panelDescription} {panelDescription}