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

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}
             />