feat: enhance NodeConfigPanel and WorkflowConfigPanel with improved title and description handling

This commit is contained in:
mlogclub
2026-06-28 17:36:43 +08:00
parent 988c8e7cfa
commit 89945f139b
2 changed files with 16 additions and 25 deletions
@@ -130,16 +130,6 @@ export function NodeConfigPanel({
</div>
) : null}
<div className="min-h-0 flex-1 space-y-5 overflow-y-auto p-4">
<div className="space-y-2">
<Label htmlFor={`node-type-${node.id}`}></Label>
<Input
id={`node-type-${node.id}`}
value={node.type}
readOnly
className="font-mono text-xs text-muted-foreground"
/>
</div>
<div className="space-y-2">
<Label htmlFor={`node-title-${node.id}`}></Label>
<Input
@@ -150,15 +140,6 @@ export function NodeConfigPanel({
/>
</div>
{nodeSpec?.description ? (
<div className="space-y-2">
<Label></Label>
<div className="rounded-md border bg-muted/30 px-3 py-2 text-xs leading-5 text-muted-foreground">
{nodeSpec.description}
</div>
</div>
) : null}
{inputSchema.length > 0 ? (
<div className="space-y-3">
<div className="text-sm font-medium"></div>
@@ -42,6 +42,13 @@ export function WorkflowConfigPanel({
const selectedBranchItem = selectedNode && selectedBranch?.nodeId === selectedNode.id
? normalizeNodeConfig(selectedNode.data?.config).branches?.find((branch) => branch.id === selectedBranch.branchId) ?? null
: null
const panelTitle = selectedBranchItem
? selectedBranchItem.name || selectedBranchItem.id
: selectedNode?.data?.title || selectedNodeSpec?.title || selectedNode?.type || ""
const panelMeta = selectedBranchItem ? "条件分支" : selectedNode?.type || ""
const panelDescription = selectedBranchItem
? "配置该条件分支的匹配规则和目标节点。"
: selectedNodeSpec?.description || ""
if (!selectedNode) {
return null
@@ -64,12 +71,15 @@ export function WorkflowConfigPanel({
<section className="pointer-events-auto flex min-h-0 w-full flex-col overflow-hidden rounded-md border bg-background/95 shadow-sm backdrop-blur">
<div className="flex shrink-0 items-start justify-between gap-3 border-b px-4 py-3">
<div className="min-w-0">
<div className="text-sm font-medium">{selectedBranchItem ? "条件属性" : "属性"}</div>
<div className="mt-0.5 truncate text-xs text-muted-foreground">
{selectedBranchItem
? selectedBranchItem.name || selectedBranchItem.id
: selectedNode.data?.title || selectedNodeSpec?.title || selectedNode.type}
</div>
<div className="truncate text-sm font-medium">{panelTitle}</div>
{panelMeta ? (
<div className="mt-1 truncate font-mono text-xs text-muted-foreground">{panelMeta}</div>
) : null}
{panelDescription ? (
<div className="mt-2 line-clamp-3 text-xs leading-5 text-muted-foreground">
{panelDescription}
</div>
) : null}
</div>
<Button
type="button"