feat: enhance NodeConfigPanel and VariableSelector with improved styling and description handling

web/app/dashboard/ai-workflows/_components/node-config-panel.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import type { ReactNode } from "react"
 import { Trash2Icon } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
@@ -37,6 +38,9 @@ const CONDITION_OPERATOR_OPTIONS = [
   { value: "empty", label: "为空" },
 ]
 
+const cardInputClassName = "h-8 rounded-md border-slate-200 bg-white text-xs shadow-none"
+const cardComboboxClassName = "h-8 rounded-md border-slate-200 bg-white text-xs shadow-none"
+
 export function NodeConfigPanel({
   node,
   nodeSpec,
@@ -125,25 +129,36 @@ export function NodeConfigPanel({
           </div>
         </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-title-${node.id}`}>标题</Label>
-          <Input
-            id={`node-title-${node.id}`}
-            value={node.data?.title ?? ""}
-            placeholder={nodeSpec?.title || node.type}
-            onChange={(event) => updateData({ title: event.target.value })}
-          />
-        </div>
+      <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 ? (
-          <div className="space-y-3">
-            <div className="text-sm font-medium">输入</div>
+          <ConfigCard title="输入" meta={`${inputSchema.length} 项`}>
+            <div className="space-y-3">
             {inputSchema.map((input) => {
               const value = inputsValues[input.name]
               return (
                 <div key={input.name} className="space-y-1.5">
-                  <Label className="flex items-center gap-1">
+                  <Label className="flex items-center gap-1 text-xs text-slate-600">
                     <span>{input.label || input.name}</span>
                     {input.required ? <span className="text-destructive">*</span> : null}
                   </Label>
@@ -151,6 +166,7 @@ export function NodeConfigPanel({
                     value={isRefValue(value) ? value : undefined}
                     variables={availableVariables ?? []}
                     placeholder="选择变量"
+                    triggerClassName={cardComboboxClassName}
                     onChange={(next) => {
                       updateData({
                         inputsValues: {
@@ -163,7 +179,8 @@ export function NodeConfigPanel({
                 </div>
               )
             })}
-          </div>
+            </div>
+          </ConfigCard>
         ) : null}
 
         {showConditionBranches && (node.type === "condition" || branches.length > 0) ? (
@@ -221,51 +238,57 @@ export function ConditionBranchConfigPanel({
   }
 
   return (
-    <div className="min-h-0 flex-1 space-y-5 overflow-y-auto p-4">
-      <div className="space-y-2">
-        <Label htmlFor={`condition-branch-name-${node.id}-${branch.id}`}>分支名称</Label>
-        <Input
-          id={`condition-branch-name-${node.id}-${branch.id}`}
-          value={branch.name ?? ""}
-          placeholder={branch.id}
-          onChange={(event) => updateBranch({ ...branch, name: event.target.value })}
-        />
-      </div>
+    <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3">
+      <ConfigCard title="基础信息" meta={branch.default ? "默认" : "条件"}>
+        <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-2">
-        <Label>目标节点</Label>
-        <OptionCombobox
-          value={branch.targetNodeId}
-          options={targetOptions}
-          placeholder="选择目标节点"
-          onChange={(targetNodeId) => updateBranch({ ...branch, targetNodeId })}
-        />
-      </div>
+          <div className="space-y-1.5">
+            <Label className="text-xs text-slate-600">目标节点</Label>
+            <OptionCombobox
+              value={branch.targetNodeId}
+              options={targetOptions}
+              placeholder="选择目标节点"
+              triggerClassName={cardComboboxClassName}
+              onChange={(targetNodeId) => updateBranch({ ...branch, targetNodeId })}
+            />
+          </div>
 
-      <label className="flex items-center gap-2 text-sm">
-        <input
-          type="checkbox"
-          checked={branch.default === true}
-          className="size-4"
-          onChange={(event) => updateBranch({
-            ...branch,
-            default: event.target.checked,
-            condition: event.target.checked ? undefined : branch.condition,
-          })}
-        />
-        默认分支
-      </label>
+          <label className="flex items-center gap-2 text-xs text-slate-600">
+            <input
+              type="checkbox"
+              checked={branch.default === true}
+              className="size-3.5"
+              onChange={(event) => updateBranch({
+                ...branch,
+                default: event.target.checked,
+                condition: event.target.checked ? undefined : branch.condition,
+              })}
+            />
+            默认分支
+          </label>
+        </div>
+      </ConfigCard>
 
       {branch.default ? (
-        <div className="rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground">
+        <div className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs text-slate-500">
           默认分支不需要条件表达式，会在其他条件不匹配时执行。
         </div>
       ) : (
-        <ConditionFields
-          branch={branch}
-          variables={variables}
-          onChange={updateBranch}
-        />
+        <ConfigCard title="条件表达式">
+          <ConditionFields branch={branch} variables={variables} onChange={updateBranch} />
+        </ConfigCard>
       )}
 
       {branch.default ? null : (
@@ -273,7 +296,7 @@ export function ConditionBranchConfigPanel({
           type="button"
           variant="ghost"
           size="sm"
-          className="h-8 px-2 text-xs text-muted-foreground hover:text-destructive"
+          className="h-8 px-2 text-xs text-slate-500 hover:text-destructive"
           onClick={() => onDelete(branch.id)}
         >
           删除条件
@@ -303,27 +326,32 @@ function ConditionBranchesEditor({
   const targetOptions = buildTargetOptions(nodes, currentNodeId)
 
   return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between gap-2">
-        <div className="text-sm font-medium">条件分支</div>
-        <Button type="button" variant="outline" size="sm" className="h-7 px-2 text-xs" onClick={onAdd}>
+    <ConfigCard
+      title="条件分支"
+      meta={`${branches.length} 项`}
+      action={
+        <Button type="button" variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={onAdd}>
           添加
         </Button>
-      </div>
+      }
+    >
       {branches.length === 0 ? (
-        <div className="rounded-md border bg-muted/20 p-3 text-xs text-muted-foreground">
+        <div className="rounded-md border border-dashed border-slate-200 bg-slate-50 px-3 py-3 text-xs text-slate-500">
           暂无分支。条件节点需要至少一个默认分支或条件分支。
         </div>
       ) : null}
-      <div className="space-y-3">
+      <div className="space-y-2">
         {branches.map((branch) => {
           return (
-            <div key={branch.id} className="space-y-3 rounded-md border p-3">
+            <div key={branch.id} className="space-y-2 rounded-lg border border-slate-200 bg-slate-50/60 p-2.5">
               <div className="flex items-center justify-between gap-2">
+                <span className="inline-flex h-5 shrink-0 items-center rounded-full border border-slate-200 bg-white px-2 font-mono text-[10px] font-semibold text-slate-600">
+                  {branch.default ? "ELSE" : "IF"}
+                </span>
                 <Input
                   value={branch.name ?? ""}
                   placeholder={branch.id}
-                  className="h-8"
+                  className={cn(cardInputClassName, "min-w-0 flex-1 border-transparent bg-white font-medium")}
                   onChange={(event) => onChange({ ...branch, name: event.target.value })}
                 />
                 {branch.default ? null : (
@@ -331,7 +359,7 @@ function ConditionBranchesEditor({
                     type="button"
                     variant="ghost"
                     size="sm"
-                    className="h-8 px-2 text-xs text-muted-foreground hover:text-destructive"
+                    className="h-7 px-2 text-xs text-slate-500 hover:text-destructive"
                     onClick={() => onDelete(branch.id)}
                   >
                     删除
@@ -339,21 +367,22 @@ function ConditionBranchesEditor({
                 )}
               </div>
 
-              <div className="space-y-1.5">
-                <Label>目标节点</Label>
+              <div className="grid grid-cols-[64px_minmax(0,1fr)] items-center gap-2">
+                <Label className="text-xs text-slate-500">目标节点</Label>
                 <OptionCombobox
                   value={branch.targetNodeId}
                   options={targetOptions}
                   placeholder="选择目标节点"
+                  triggerClassName={cardComboboxClassName}
                   onChange={(targetNodeId) => onChange({ ...branch, targetNodeId })}
                 />
               </div>
 
-              <label className="flex items-center gap-2 text-sm">
+              <label className="flex items-center gap-2 text-xs text-slate-500">
                 <input
                   type="checkbox"
                   checked={branch.default === true}
-                  className="size-4"
+                  className="size-3.5"
                   onChange={(event) => onChange({
                     ...branch,
                     default: event.target.checked,
@@ -364,13 +393,15 @@ function ConditionBranchesEditor({
               </label>
 
               {branch.default ? null : (
-                <ConditionFields branch={branch} variables={variables} onChange={onChange} />
+                <div className="border-t border-slate-200 pt-2">
+                  <ConditionFields branch={branch} variables={variables} onChange={onChange} compact />
+                </div>
               )}
             </div>
           )
         })}
       </div>
-    </div>
+    </ConfigCard>
   )
 }
 
@@ -378,45 +409,51 @@ function ConditionFields({
   branch,
   variables,
   onChange,
+  compact = false,
 }: {
   branch: WorkflowConditionBranch
   variables: WorkflowVariableRef[]
   onChange: (branch: WorkflowConditionBranch) => void
+  compact?: boolean
 }) {
   const condition = branch.condition ?? {}
 
   return (
-    <div className="space-y-3">
-      <div className="space-y-1.5">
-        <Label>左值</Label>
+    <div className={cn("space-y-3", compact && "space-y-2")}>
+      <div className={cn("space-y-1.5", compact && "grid grid-cols-[64px_minmax(0,1fr)] items-center gap-2 space-y-0")}>
+        <Label className="text-xs text-slate-500">左值</Label>
         <VariableSelector
           value={isRefValue(condition.left) ? condition.left : undefined}
           variables={variables}
           placeholder="选择变量"
+          triggerClassName={cardComboboxClassName}
           onChange={(left) => onChange({
             ...branch,
             condition: { ...condition, left },
           })}
         />
       </div>
-      <div className="grid grid-cols-[1fr_1fr] gap-2">
-        <div className="space-y-1.5">
-          <Label>操作符</Label>
+      <div className={cn("grid grid-cols-[1fr_1fr] gap-2", compact && "grid-cols-[64px_minmax(0,1fr)_96px] items-center")}>
+        {compact ? <Label className="text-xs text-slate-500">判断</Label> : null}
+        <div className={cn("space-y-1.5", compact && "space-y-0")}>
+          {compact ? null : <Label className="text-xs text-slate-500">操作符</Label>}
           <OptionCombobox
             value={condition.operator ?? ""}
             options={CONDITION_OPERATOR_OPTIONS}
             placeholder="选择操作符"
+            triggerClassName={cardComboboxClassName}
             onChange={(operator) => onChange({
               ...branch,
               condition: { ...condition, operator },
             })}
           />
         </div>
-        <div className={cn("space-y-1.5", ["exists", "empty"].includes(condition.operator ?? "") && "opacity-50")}>
-          <Label>右值</Label>
+        <div className={cn("space-y-1.5", compact && "space-y-0", ["exists", "empty"].includes(condition.operator ?? "") && "opacity-50")}>
+          {compact ? null : <Label className="text-xs text-slate-500">右值</Label>}
           <Input
             value={stringifyConditionRight(condition.right)}
             disabled={["exists", "empty"].includes(condition.operator ?? "")}
+            className={cardInputClassName}
             onChange={(event) => onChange({
               ...branch,
               condition: { ...condition, right: event.target.value },
@@ -428,6 +465,33 @@ function ConditionFields({
   )
 }
 
+function ConfigCard({
+  title,
+  meta,
+  action,
+  children,
+}: {
+  title: string
+  meta?: string
+  action?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <section className="overflow-hidden rounded-lg border border-slate-200 bg-white">
+      <div className="flex min-h-10 items-center justify-between gap-2 border-b border-slate-100 px-3 py-2">
+        <div className="min-w-0">
+          <div className="truncate text-[13px] font-semibold text-slate-900">{title}</div>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          {meta ? <span className="text-xs text-slate-500">{meta}</span> : null}
+          {action}
+        </div>
+      </div>
+      <div className="p-3">{children}</div>
+    </section>
+  )
+}
+
 function buildTargetOptions(nodes: AIWorkflowDefinition["nodes"], currentNodeId: string) {
   return nodes
     .filter((node) => node.id !== currentNodeId && node.type !== "start")

web/app/dashboard/ai-workflows/_components/variable-selector.tsx

@@ -15,11 +15,13 @@ export function VariableSelector({
   variables,
   onChange,
   placeholder = "选择变量",
+  triggerClassName,
 }: {
   value?: WorkflowVariableSelector
   variables: WorkflowVariableRef[]
   onChange: (value: WorkflowVariableSelector) => void
   placeholder?: string
+  triggerClassName?: string
 }) {
   const selected = value ? `${refNodeId(value)}.${refField(value)}` : ""
   const options = variables.map((variable) => ({
@@ -33,6 +35,7 @@ export function VariableSelector({
       value={selected}
       options={options}
       placeholder={placeholder}
+      triggerClassName={triggerClassName}
       onChange={(next) => {
         const variable = variables.find((item) => `${item.nodeId}.${item.field}` === next)
         if (variable) {

web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx

@@ -7,6 +7,7 @@ import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
 
 import type { SelectedWorkflowBranch } from "./workflow-branch-selection"
 import { ConditionBranchConfigPanel, NodeConfigPanel } from "./node-config-panel"
+import { WorkflowNodeIcon } from "./workflow-node-icon"
 import {
   getAvailableVariables,
   normalizeNodeConfig,
@@ -49,6 +50,7 @@ export function WorkflowConfigPanel({
   const panelDescription = selectedBranchItem
     ? "配置该条件分支的匹配规则和目标节点。"
     : selectedNodeSpec?.description || ""
+  const panelIcon = selectedBranchItem ? "GitBranchIcon" : selectedNodeSpec?.icon
 
   if (!selectedNode) {
     return null
@@ -67,30 +69,52 @@ export function WorkflowConfigPanel({
   }
 
   return (
-    <div className="pointer-events-none absolute inset-y-3 right-3 z-50 flex w-[360px] max-w-[calc(100%-1.5rem)]">
-      <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="truncate text-sm font-medium">{panelTitle}</div>
+    <div className="pointer-events-none absolute inset-y-3 right-3 z-50 flex w-[380px] max-w-[calc(100%-1.5rem)]">
+      <section className="pointer-events-auto flex min-h-0 w-full flex-col overflow-hidden rounded-xl border border-slate-200 bg-[#f8fafc] shadow-lg backdrop-blur">
+        <div className="shrink-0 p-3 pb-2">
+          <div className="overflow-hidden rounded-lg border border-slate-200 bg-white">
+            <div className="flex items-start justify-between gap-3 px-3 py-3">
+              <div className="flex min-w-0 items-start gap-2.5">
+                <WorkflowNodeIcon
+                  icon={panelIcon}
+                  size="sm"
+                  className="rounded-md bg-slate-100 text-slate-600 shadow-none"
+                />
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-semibold leading-5 text-slate-900">
+                    {panelTitle}
+                  </div>
+                  {panelDescription ? (
+                    <div className="mt-1 line-clamp-2 text-xs leading-5 text-slate-500">
+                      {panelDescription}
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+              <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>
             {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 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>
+                  <span className="inline-flex h-6 items-center rounded-full border border-blue-100 bg-blue-50 px-2 text-[11px] text-blue-700">
+                    可配置
+                  </span>
+                </div>
               </div>
             ) : null}
           </div>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="size-8 shrink-0 text-muted-foreground"
-            aria-label="关闭属性面板"
-            onClick={onClose}
-          >
-            <XIcon className="size-4" />
-          </Button>
         </div>
         <div className="min-h-0 flex-1">
           {selectedBranchItem && selectedBranch ? (
@@ -109,7 +133,6 @@ export function WorkflowConfigPanel({
               nodes={definition.nodes}
               availableVariables={availableVariables}
               showHeader={false}
-              showConditionBranches={selectedNode.type !== "condition"}
               onChange={onChangeNodeData}
               onDelete={onDeleteNode}
             />

web/components/option-combobox.tsx

@@ -33,6 +33,7 @@ type OptionComboboxProps = {
   searchPlaceholder?: string
   emptyText?: string
   disabled?: boolean
+  triggerClassName?: string
   onChange: (value: string) => void
   renderOptionAction?: (option: ComboboxOption) => ReactNode
 }
@@ -44,6 +45,7 @@ export function OptionCombobox({
   searchPlaceholder,
   emptyText,
   disabled = false,
+  triggerClassName,
   onChange,
   renderOptionAction,
 }: OptionComboboxProps) {
@@ -59,7 +61,7 @@ export function OptionCombobox({
           <Button
             variant="outline"
             role="combobox"
-            className="m-0 w-full justify-between font-normal"
+            className={cn("m-0 w-full justify-between font-normal", triggerClassName)}
             disabled={disabled}
           />
         }