refactor: streamline WorkflowConfigPanel layout by adjusting spacing and removing unused panelMeta
This commit is contained in:
@@ -54,7 +54,6 @@ export function WorkflowConfigPanel({
|
||||
const panelTitle = selectedBranchItem
|
||||
? selectedBranchItem.name || selectedBranchItem.id
|
||||
: selectedNode?.data?.title || selectedNodeSpec?.title || selectedNode?.type || ""
|
||||
const panelMeta = selectedBranchItem ? "条件分支" : selectedNode?.type || ""
|
||||
const panelDescription = selectedBranchItem
|
||||
? ""
|
||||
: selectedNodeSpec?.description || ""
|
||||
@@ -127,53 +126,42 @@ export function WorkflowConfigPanel({
|
||||
>
|
||||
<span className="h-12 w-1 rounded-full bg-slate-300/80 transition-colors group-hover:bg-blue-400" />
|
||||
</div>
|
||||
<section className="pointer-events-auto relative flex min-h-0 w-full flex-col overflow-hidden rounded-lg bg-white shadow-[0_18px_45px_rgba(15,23,42,0.18)] backdrop-blur">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-2 top-2 z-10 size-7 shrink-0 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700"
|
||||
aria-label="关闭属性面板"
|
||||
onClick={onClose}
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
</Button>
|
||||
<section className="pointer-events-auto flex min-h-0 w-full flex-col overflow-hidden rounded-lg bg-white shadow-[0_18px_45px_rgba(15,23,42,0.18)] backdrop-blur">
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div className="pb-3 pt-11">
|
||||
<div className="px-3 pb-2">
|
||||
<div className="overflow-hidden rounded-md border border-slate-200 bg-white">
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex min-w-0 items-center gap-2.5">
|
||||
<WorkflowNodeIcon
|
||||
icon={panelIcon}
|
||||
size="sm"
|
||||
className="rounded-md shadow-none"
|
||||
<div className="py-3">
|
||||
<div className="px-4 pb-3">
|
||||
<div className="flex min-w-0 items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2.5">
|
||||
<WorkflowNodeIcon
|
||||
icon={panelIcon}
|
||||
size="sm"
|
||||
className="rounded-md shadow-none"
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<Input
|
||||
value={panelTitle}
|
||||
placeholder={selectedBranchItem ? selectedBranchItem.id : selectedNodeSpec?.title || selectedNode.type}
|
||||
className="h-7 w-full rounded-md border-transparent bg-transparent px-1 text-sm font-semibold leading-5 text-slate-900 shadow-none transition-colors hover:border-slate-200 hover:bg-slate-50 focus-visible:border-blue-300 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-blue-100"
|
||||
onChange={(event) => updatePanelTitle(event.target.value)}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<Input
|
||||
value={panelTitle}
|
||||
placeholder={selectedBranchItem ? selectedBranchItem.id : selectedNodeSpec?.title || selectedNode.type}
|
||||
className="h-7 w-full rounded-md border-slate-200 bg-slate-50 px-2 text-sm font-semibold leading-5 text-slate-900 shadow-none transition-colors hover:border-slate-300 hover:bg-white focus-visible:border-blue-300 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-blue-100"
|
||||
onChange={(event) => updatePanelTitle(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{panelDescription ? (
|
||||
<div className="mt-2 line-clamp-2 text-xs leading-5 text-slate-500">
|
||||
{panelDescription}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{panelMeta ? (
|
||||
<div className="border-t border-slate-100 px-3 py-2">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<span className="inline-flex h-6 items-center rounded-full border border-slate-200 bg-slate-50 px-2 font-mono text-[11px] text-slate-600">
|
||||
{panelMeta}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7 shrink-0 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700"
|
||||
aria-label="关闭属性面板"
|
||||
onClick={onClose}
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{panelDescription ? (
|
||||
<div className="mt-1 pl-9 text-xs leading-5 text-slate-500">
|
||||
{panelDescription}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{selectedBranchItem && selectedBranch ? (
|
||||
<ConditionBranchConfigPanel
|
||||
|
||||
Reference in New Issue
Block a user