feat: update NodeConfigPanel and WorkflowConfigPanel with improved title handling and UI enhancements
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user