feat(workflow): show variables in drawer

frontend/src/components/workflow/WorkflowCanvas.tsx

@@ -153,7 +153,9 @@ export function WorkflowCanvas({
   onSettingsChange,
   modelOptions,
   activeNodeId,
-  onOpenDynamicVariables,
+  dynamicVariablesOpen,
+  onDynamicVariablesOpenChange,
+  dynamicVariablesPanel,
   editingNodeId,
   onEditingNodeIdChange,
   editingEdgeId,
@@ -288,6 +290,7 @@ export function WorkflowCanvas({
       setAddSourceId(null);
       setAddPosition(null);
       setSettingsOpen(false);
+      onDynamicVariablesOpenChange(false);
       onDebugOpenChange(false);
       onEditingEdgeIdChange(null);
       onEditingNodeIdChange(id);
@@ -297,6 +300,7 @@ export function WorkflowCanvas({
       addSourceId,
       nodes,
       onDebugOpenChange,
+      onDynamicVariablesOpenChange,
       onEditingEdgeIdChange,
       onEditingNodeIdChange,
       screenToFlowPosition,
@@ -456,11 +460,13 @@ export function WorkflowCanvas({
   );
   const openSettings = useCallback(() => {
     onDebugOpenChange(false);
+    onDynamicVariablesOpenChange(false);
     onEditingNodeIdChange(null);
     onEditingEdgeIdChange(null);
     setSettingsOpen(true);
   }, [
     onDebugOpenChange,
+    onDynamicVariablesOpenChange,
     onEditingEdgeIdChange,
     onEditingNodeIdChange,
     setSettingsOpen,
@@ -470,6 +476,7 @@ export function WorkflowCanvas({
     () => ({
       edit: (id: string) => {
         setSettingsOpen(false);
+        onDynamicVariablesOpenChange(false);
         onDebugOpenChange(false);
         onEditingEdgeIdChange(null);
         onEditingNodeIdChange(id);
@@ -481,6 +488,7 @@ export function WorkflowCanvas({
       deleteNode,
       duplicateNode,
       onDebugOpenChange,
+      onDynamicVariablesOpenChange,
       onEditingEdgeIdChange,
       onEditingNodeIdChange,
       setSettingsOpen,
@@ -490,6 +498,7 @@ export function WorkflowCanvas({
     () => ({
       edit: (id: string) => {
         setSettingsOpen(false);
+        onDynamicVariablesOpenChange(false);
         onDebugOpenChange(false);
         onEditingNodeIdChange(null);
         onEditingEdgeIdChange(id);
@@ -499,11 +508,25 @@ export function WorkflowCanvas({
     [
       deleteEdge,
       onDebugOpenChange,
+      onDynamicVariablesOpenChange,
       onEditingEdgeIdChange,
       onEditingNodeIdChange,
       setSettingsOpen,
     ],
   );
+  const openDynamicVariables = useCallback(() => {
+    setSettingsOpen(false);
+    onDebugOpenChange(false);
+    onEditingNodeIdChange(null);
+    onEditingEdgeIdChange(null);
+    onDynamicVariablesOpenChange(true);
+  }, [
+    onDebugOpenChange,
+    onDynamicVariablesOpenChange,
+    onEditingEdgeIdChange,
+    onEditingNodeIdChange,
+    setSettingsOpen,
+  ]);
 
   const editingNode = nodes.find((n) => n.id === editingNodeId);
   const editingSpec = editingNode ? specsByType[editingNode.type as string] : null;
@@ -580,6 +603,7 @@ export function WorkflowCanvas({
                             className="h-10 w-10 rounded-full shadow-sm"
                             aria-label="添加节点"
                             onClick={() => {
+                              onDynamicVariablesOpenChange(false);
                               setAddSourceId(null);
                               setAddPosition(null);
                               setAddOpen(true);
@@ -613,7 +637,7 @@ export function WorkflowCanvas({
                             variant="outline"
                             className="h-10 w-10 rounded-full border-hairline-strong bg-card text-foreground shadow-sm hover:bg-surface-strong"
                             aria-label="动态变量"
-                            onClick={onOpenDynamicVariables}
+                            onClick={openDynamicVariables}
                           >
                             <Braces size={17} />
                           </Button>
@@ -642,6 +666,7 @@ export function WorkflowCanvas({
             />
 
             {(debugOpen ||
+              dynamicVariablesOpen ||
               settingsOpen ||
               (editingNode && editingSpec) ||
               editingEdge) && (
@@ -649,24 +674,30 @@ export function WorkflowCanvas({
                 title={
                   debugOpen
                     ? undefined
-                    : settingsOpen
-                      ? "工作流设置"
-                      : editingEdge
-                        ? "编辑连接条件"
-                        : `编辑${editingSpec?.displayName ?? "节点"}`
+                    : dynamicVariablesOpen
+                      ? "动态变量"
+                      : settingsOpen
+                        ? "工作流设置"
+                        : editingEdge
+                          ? "编辑连接条件"
+                          : `编辑${editingSpec?.displayName ?? "节点"}`
                 }
                 closeLabel={
-                  settingsOpen
-                    ? "关闭工作流设置"
-                    : editingEdge
-                      ? "关闭边编辑"
-                      : "关闭节点编辑"
+                  dynamicVariablesOpen
+                    ? "关闭动态变量"
+                    : settingsOpen
+                      ? "关闭工作流设置"
+                      : editingEdge
+                        ? "关闭边编辑"
+                        : "关闭节点编辑"
                 }
                 onClose={
                   debugOpen
                     ? undefined
                     : () => {
-                        if (settingsOpen) setSettingsOpen(false);
+                        if (dynamicVariablesOpen) {
+                          onDynamicVariablesOpenChange(false);
+                        } else if (settingsOpen) setSettingsOpen(false);
                         else if (editingEdge) onEditingEdgeIdChange(null);
                         else onEditingNodeIdChange(null);
                       }
@@ -674,6 +705,8 @@ export function WorkflowCanvas({
               >
                 {debugOpen ? (
                   debugPanel
+                ) : dynamicVariablesOpen ? (
+                  dynamicVariablesPanel
                 ) : (
                     <div className="scrollbar-subtle min-h-0 flex-1 overflow-y-auto bg-canvas-soft px-4 pb-5 pt-4">
                       {settingsOpen ? (