@gadmin2n/schematics 0.0.138 → 0.0.140

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/EnhancedFlowRenderer.tsx

@@ -1,24 +1,48 @@
-import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import {
-  ReactFlow,
-  ReactFlowProvider,
+  applyNodeChanges,
   Background,
+  ConnectionMode,
   Controls,
+  MarkerType,
   MiniMap,
-  ConnectionMode,
+  ReactFlow,
+  ReactFlowProvider,
   useReactFlow,
-  type Node,
-  type Edge,
   type Connection,
-  type NodeChange,
+  type Edge,
   type EdgeChange,
-  applyNodeChanges,
+  type Node,
+  type NodeChange,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import React, {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import type { WorkflowDSL, WorkflowNodeType } from '../types';
+import {
+  appendLookupPipelineEdge,
+  createLookupCall,
+  replaceLookupCall,
+  resolveLookupCall,
+  resolveLookupPipelineConnection,
+  type ResolvedLookupCall,
+} from '../utils/lookupConnection';
+import { withNewNodeDefaults } from '../utils/newNodeConfig';
+import { removeWorkflowEdges } from '../utils/removeWorkflowEdges';
+import {
+  resolveLookupPorts,
+  resolveRuntimePorts,
+} from '../utils/resolveLookupPorts';
+import { resolveOutputLabels, resolveOutputs } from '../utils/resolveOutputs';
 import { CustomNode } from './CustomNode';
+import { DeletableEdge } from './DeletableEdge';
 import { ExecutionStatusNode } from './ExecutionStatusNode';
-import type { WorkflowDSL, WorkflowNodeType } from '../types';
-import { resolveOutputs } from '../utils/resolveOutputs';
+import { LookupConnectionDialog } from './LookupConnectionDialog';
 
 interface NodeExecution {
   id: string;
@@ -34,6 +58,7 @@ interface NodeExecution {
 }
 
 const nodeTypes = { custom: CustomNode, executionStatus: ExecutionStatusNode };
+const edgeTypes = { deletable: DeletableEdge };
 
 interface EnhancedFlowRendererProps {
   dsl: WorkflowDSL | null;
@@ -75,11 +100,28 @@ function EnhancedFlowCanvas({
   nodeExecutions,
   showExecutionStatus,
 }: EnhancedFlowRendererProps) {
+  const { t } = useTranslation('workflow');
   const reactFlowInstance = useReactFlow();
   const dslRef = useRef(dsl);
   dslRef.current = dsl;
   const containerRef = useRef<HTMLDivElement>(null);
   const hasSetViewport = useRef(false);
+  const [pendingLookup, setPendingLookup] = useState<ResolvedLookupCall>();
+  const [selectedEdgeId, setSelectedEdgeId] = useState<string>();
+
+  const deleteEdges = useCallback(
+    (edgeId: string) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange || readonly || showExecutionStatus)
+        return;
+      onDslChange({
+        ...currentDsl,
+        edges: removeWorkflowEdges(currentDsl.edges, [edgeId]),
+      });
+      setSelectedEdgeId(undefined);
+    },
+    [onDslChange, readonly, showExecutionStatus],
+  );
 
   // Build execution map: nodeId -> execution record
   const executionMap = useMemo(() => {
@@ -96,6 +138,7 @@ function EnhancedFlowCanvas({
 
     const rfNodes: Node[] = dsl.nodes.map((n) => {
       const category = nodeTypeMap?.[n.type]?.category || 'ACTION';
+      const lookupPorts = resolveLookupPorts(n);
       // Transpose x/y for vertical (top-to-bottom) layout
       // Scale y down to compress vertical spacing (original x-step=250 → 120)
       // Add y offset so top node isn't clipped
@@ -106,10 +149,18 @@ function EnhancedFlowCanvas({
       const nodeType = showExecutionStatus ? 'executionStatus' : 'custom';
 
       const nodeData: any = {
-        label: n.label,
+        label:
+          n.type === 'approval_request_trigger'
+            ? t('nodeTypes.callable_trigger')
+            : n.type === 'webhook_trigger'
+              ? t('nodeTypes.webhook_trigger')
+              : n.label,
         category,
         type: n.type,
         outputs: resolveOutputs(n, nodeTypeMap?.[n.type]),
+        outputLabels: resolveOutputLabels(n),
+        lookupPorts,
+        runtimePorts: resolveRuntimePorts(n),
         isSelected: n.id === selectedNodeId,
         readonly: !!readonly,
       };
@@ -132,7 +183,6 @@ function EnhancedFlowCanvas({
         id: n.id,
         type: nodeType,
         position,
-        measured: { width: 140, height: 40 },
         selected: n.id === selectedNodeId,
         data: nodeData,
       };
@@ -140,16 +190,53 @@ function EnhancedFlowCanvas({
 
     const rfEdges: Edge[] = dsl.edges.map((e) => ({
       id: e.id,
+      selected: e.id === selectedEdgeId,
       source: e.source,
       target: e.target,
       sourceHandle: e.sourceHandle,
-      label: e.label,
-      type: 'smoothstep',
-      animated: showExecutionStatus ? false : true, // Disable animation when showing execution
+      targetHandle: e.targetHandle,
+      label:
+        e.kind === 'CALL'
+          ? t('edge.call')
+          : e.kind === 'RETURN'
+            ? (e.label ?? t('edge.return'))
+            : e.kind === 'DATA'
+              ? `${e.sourcePath ?? 'data'} → ${e.targetHandle ?? 'input'}`
+              : e.label,
+      type: 'deletable',
+      data: {
+        onDelete: readonly || showExecutionStatus ? undefined : deleteEdges,
+      },
+      markerEnd:
+        e.kind === 'CALL' || e.kind === 'RETURN'
+          ? {
+              type: MarkerType.ArrowClosed,
+              color: e.kind === 'CALL' ? '#fa8c16' : '#1677ff',
+            }
+          : undefined,
+      animated: showExecutionStatus ? false : e.kind !== 'DATA',
+      style:
+        e.kind === 'CALL'
+          ? { stroke: '#fa8c16', strokeWidth: 2 }
+          : e.kind === 'RETURN'
+            ? { stroke: '#1677ff', strokeWidth: 2 }
+            : e.kind === 'DATA'
+              ? { stroke: '#1677ff', strokeDasharray: '6 4' }
+              : undefined,
     }));
 
     return { nodes: rfNodes, edges: rfEdges };
-  }, [dsl, nodeTypeMap, selectedNodeId, executionMap, showExecutionStatus]);
+  }, [
+    dsl,
+    nodeTypeMap,
+    selectedNodeId,
+    selectedEdgeId,
+    executionMap,
+    showExecutionStatus,
+    readonly,
+    deleteEdges,
+    t,
+  ]);
 
   // Set viewport once before first paint: horizontal center + vertical top padding
   useLayoutEffect(() => {
@@ -220,10 +307,10 @@ function EnhancedFlowCanvas({
 
       const removeChanges = changes.filter((c) => c.type === 'remove');
       if (removeChanges.length > 0) {
-        const removedIds = new Set(
-          removeChanges.map((c) => (c as any).id as string),
+        const newEdges = removeWorkflowEdges(
+          currentDsl.edges,
+          removeChanges.map((change) => (change as any).id as string),
         );
-        const newEdges = currentDsl.edges.filter((e) => !removedIds.has(e.id));
         onDslChange({ ...currentDsl, edges: newEdges });
       }
     },
@@ -235,12 +322,34 @@ function EnhancedFlowCanvas({
       const currentDsl = dslRef.current;
       if (!currentDsl || !onDslChange) return;
 
+      const lookup = resolveLookupCall(currentDsl, connection);
+      if (lookup) {
+        setPendingLookup(lookup);
+        return;
+      }
+      const pipelineEdge = resolveLookupPipelineConnection(
+        currentDsl,
+        connection,
+      );
+      if (pipelineEdge) {
+        onDslChange({
+          ...currentDsl,
+          edges: appendLookupPipelineEdge(currentDsl.edges, pipelineEdge),
+        });
+        return;
+      }
+      if (
+        connection.sourceHandle?.startsWith('lookup:') ||
+        connection.targetHandle?.startsWith('approver:')
+      )
+        return;
       const newEdge = {
         id: `e-${connection.source}-${connection.target}-${Date.now()}`,
         source: connection.source!,
         target: connection.target!,
         sourceHandle: connection.sourceHandle || undefined,
-        label: undefined,
+        targetHandle: connection.targetHandle || undefined,
+        kind: 'FLOW' as const,
       };
       onDslChange({
         ...currentDsl,
@@ -250,6 +359,20 @@ function EnhancedFlowCanvas({
     [onDslChange],
   );
 
+  const isValidConnection = useCallback((connection: Edge | Connection) => {
+    const currentDsl = dslRef.current;
+    if (!currentDsl) return false;
+    if (resolveLookupCall(currentDsl, connection as Connection)) return true;
+    if (resolveLookupPipelineConnection(currentDsl, connection as Connection))
+      return true;
+    const sourceHandle = connection.sourceHandle ?? '';
+    const targetHandle = connection.targetHandle ?? '';
+    return (
+      !sourceHandle.startsWith('lookup:') &&
+      !targetHandle.startsWith('approver:')
+    );
+  }, []);
+
   const onDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault();
     event.dataTransfer.dropEffect = 'move';
@@ -286,7 +409,8 @@ function EnhancedFlowCanvas({
       const schema = nodeType.configSchema as any;
       if (schema?.properties) {
         for (const [key, prop] of Object.entries<any>(schema.properties)) {
-          if (prop.type === 'string') initialConfig[key] = '';
+          if (prop.default !== undefined) initialConfig[key] = prop.default;
+          else if (prop.type === 'string') initialConfig[key] = '';
           else if (prop.type === 'number') initialConfig[key] = undefined;
           else if (prop.type === 'boolean') initialConfig[key] = false;
           else if (prop.type === 'array') initialConfig[key] = [];
@@ -299,7 +423,7 @@ function EnhancedFlowCanvas({
         type: nodeType.type,
         label: nodeType.label,
         position,
-        config: initialConfig,
+        config: withNewNodeDefaults(nodeType.type, initialConfig),
       };
 
       const newDsl: WorkflowDSL = currentDsl
@@ -322,6 +446,7 @@ function EnhancedFlowCanvas({
           nodes={[]}
           edges={[]}
           nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
           fitView
           onDragOver={onDragOver}
           onDrop={onDrop}
@@ -339,9 +464,11 @@ function EnhancedFlowCanvas({
         nodes={nodes}
         edges={edges}
         nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
+        isValidConnection={isValidConnection}
         onDragOver={onDragOver}
         onDrop={onDrop}
         nodesDraggable={!showExecutionStatus}
@@ -354,9 +481,15 @@ function EnhancedFlowCanvas({
         zoomOnPinch={false}
         zoomOnDoubleClick={false}
         onNodeClick={(_event, node) => {
+          setSelectedEdgeId(undefined);
           onNodeClick?.(node.id);
         }}
+        onEdgeClick={(_event, edge) => {
+          if (!readonly && !showExecutionStatus) setSelectedEdgeId(edge.id);
+          onNodeClick?.('');
+        }}
         onPaneClick={() => {
+          setSelectedEdgeId(undefined);
           onNodeClick?.('');
         }}
       >
@@ -381,6 +514,27 @@ function EnhancedFlowCanvas({
           pannable
         />
       </ReactFlow>
+      <LookupConnectionDialog
+        open={Boolean(pendingLookup)}
+        apPortLabel={pendingLookup?.apPortLabel}
+        httpNodeLabel={pendingLookup?.httpNode.label}
+        onCancel={() => setPendingLookup(undefined)}
+        onConfirm={() => {
+          const currentDsl = dslRef.current;
+          if (pendingLookup && currentDsl && onDslChange) {
+            const call = createLookupCall(pendingLookup);
+            onDslChange({
+              ...currentDsl,
+              edges: replaceLookupCall(
+                currentDsl.edges,
+                pendingLookup,
+                call.edge,
+              ),
+            });
+          }
+          setPendingLookup(undefined);
+        }}
+      />
     </div>
   );
 }

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/ExecutionStatusNode.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { describe, expect, it } from 'vitest';
+import { ExecutionStatusNode } from './ExecutionStatusNode';
+
+describe('ExecutionStatusNode', () => {
+  it('renders the named handles used by lookup pipeline edges', () => {
+    const { container } = render(
+      <ReactFlowProvider>
+        <ExecutionStatusNode
+          {...({
+            id: 'node-1',
+            data: {
+              label: '审批人查询',
+              category: 'ACTION',
+              isSelected: false,
+              readonly: true,
+              lookupPorts: [
+                {
+                  id: 'approver:dynamic_user_groups',
+                  label: 'User groups IN',
+                  direction: 'input',
+                  kind: 'RETURN',
+                },
+                {
+                  id: 'lookup:dynamic_user_groups',
+                  label: 'Find user groups OUT',
+                  direction: 'output',
+                  kind: 'CALL',
+                },
+              ],
+              runtimePorts: {
+                inputId: 'request-in',
+                inputLabel: 'Request IN',
+                outputId: 'response-out',
+                outputLabel: 'Response OUT',
+              },
+            },
+          } as any)}
+        />
+      </ReactFlowProvider>,
+    );
+
+    expect(
+      container.querySelector('[data-handleid="request-in"].target'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('[data-handleid="response-out"].source'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        '[data-handleid="approver:dynamic_user_groups"].target',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        '[data-handleid="lookup:dynamic_user_groups"].source',
+      ),
+    ).toBeInTheDocument();
+  });
+});

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/ExecutionStatusNode.tsx

@@ -1,11 +1,13 @@
-import React, { memo } from 'react';
-import { Handle, Position, type NodeProps } from '@xyflow/react';
 import {
   CheckCircleOutlined,
   ClockCircleOutlined,
   CloseCircleOutlined,
   LoadingOutlined,
 } from '@ant-design/icons';
+import { Handle, Position, type NodeProps } from '@xyflow/react';
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { LookupPort, RuntimePorts } from '../utils/resolveLookupPorts';
 
 const CATEGORY_COLORS: Record<string, { bg: string; border: string }> = {
   TRIGGER: { bg: '#e6f7ff', border: '#91caff' },
@@ -30,6 +32,10 @@ export interface ExecutionStatusNodeData {
   category: string;
   type?: string;
   outputs?: string[];
+  outputLabels?: Record<string, string>;
+  dataInputs?: Array<{ id: string; label: string }>;
+  lookupPorts?: LookupPort[];
+  runtimePorts?: RuntimePorts;
   isSelected: boolean;
   readonly?: boolean;
   executionStatus?:
@@ -75,9 +81,28 @@ function getStatusIcon(status?: string) {
 }
 
 export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
+  const { t } = useTranslation('workflow');
   const nodeData = data as ExecutionStatusNodeData;
   const colors = CATEGORY_COLORS[nodeData.category] || CATEGORY_COLORS.ACTION;
   const isNotExecuted = nodeData.executionStatus === 'NOT_EXECUTED';
+  const lookupPorts = nodeData.lookupPorts ?? [];
+  const lookupInputs = lookupPorts.filter((port) => port.direction === 'input');
+  const lookupOutputs = lookupPorts.filter(
+    (port) => port.direction === 'output',
+  );
+  const lookupRowCount = Math.max(lookupInputs.length, lookupOutputs.length);
+  const runtimePorts = nodeData.runtimePorts ?? {
+    inputLabel: 'IN',
+    outputLabel: 'OUT',
+  };
+  const outputLabel = (id: string) => {
+    if (nodeData.outputLabels?.[id]) return nodeData.outputLabels[id];
+    if (nodeData.type === 'approval' || nodeData.type === 'human_approval') {
+      if (id === 'true') return t('approval.approvedBranch');
+      if (id === 'false') return t('approval.rejectedBranch');
+    }
+    return id;
+  };
 
   // If there's execution status, use status color as background; otherwise use category color
   const bgColor = nodeData.executionStatus
@@ -103,7 +128,11 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
         borderRadius: 8,
         padding: '8px 12px',
         fontSize: 13,
-        minWidth: 140,
+        minWidth: lookupPorts.length
+          ? 280
+          : runtimePorts.emphasized
+            ? 190
+            : 140,
         textAlign: 'center',
         opacity: isNotExecuted ? 0.6 : 1,
         boxShadow: nodeData.isSelected
@@ -117,6 +146,7 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
     >
       {!nodeData.readonly && (
         <Handle
+          id={runtimePorts.inputId}
           type="target"
           position={Position.Top}
           style={{
@@ -130,6 +160,7 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
       )}
       {nodeData.readonly && (
         <Handle
+          id={runtimePorts.inputId}
           type="target"
           position={Position.Top}
           style={{
@@ -141,6 +172,61 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
           }}
         />
       )}
+      {(nodeData.dataInputs ?? []).map((input, index) => (
+        <Handle
+          key={input.id}
+          id={input.id}
+          type="target"
+          position={Position.Left}
+          style={{
+            width: 0,
+            height: 0,
+            border: 'none',
+            background: 'transparent',
+            visibility: 'hidden',
+            top: 48 + index * 18,
+          }}
+        />
+      ))}
+      {Array.from({ length: lookupRowCount }).map((_, index) => {
+        const input = lookupInputs[index];
+        const output = lookupOutputs[index];
+        const top = 48 + index * 26;
+        return (
+          <React.Fragment key={input?.id ?? output?.id ?? index}>
+            {input && (
+              <Handle
+                id={input.id}
+                type="target"
+                position={Position.Left}
+                style={{
+                  width: 0,
+                  height: 0,
+                  border: 'none',
+                  background: 'transparent',
+                  visibility: 'hidden',
+                  top,
+                }}
+              />
+            )}
+            {output && (
+              <Handle
+                id={output.id}
+                type="source"
+                position={Position.Right}
+                style={{
+                  width: 0,
+                  height: 0,
+                  border: 'none',
+                  background: 'transparent',
+                  visibility: 'hidden',
+                  top,
+                }}
+              />
+            )}
+          </React.Fragment>
+        );
+      })}
 
       {/* Status icon in top-right corner */}
       {nodeData.executionStatus && (
@@ -239,14 +325,16 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
                       style={{
                         position: 'absolute',
                         bottom: -18,
-                        left: `${((idx + 1) / (outputs.length + 1)) * 100 - 5}%`,
+                        left: `${
+                          ((idx + 1) / (outputs.length + 1)) * 100 - 5
+                        }%`,
                         fontSize: 11,
                         color: '#8c8c8c',
                         pointerEvents: 'none',
                         whiteSpace: 'nowrap',
                       }}
                     >
-                      {id}
+                      {outputLabel(id)}
                     </span>
                   ))}
                 </>
@@ -256,6 +344,7 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
         }
         return (
           <Handle
+            id={runtimePorts.outputId}
             type="source"
             position={Position.Bottom}
             style={handleStyle}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/ExportModal.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Button, Input, Modal, Space, message } from 'antd';
 import { CopyOutlined, LoadingOutlined } from '@ant-design/icons';
 import { customRequest } from 'helpers/http';
+import { useTranslation } from 'react-i18next';
 
 interface ExportModalProps {
   open: boolean;
@@ -10,6 +11,7 @@ interface ExportModalProps {
 }
 
 export function ExportModal({ open, workflowId, onClose }: ExportModalProps) {
+  const { t } = useTranslation('workflow');
   const [url, setUrl] = useState<string>('');
   const [loading, setLoading] = useState(false);
 
@@ -22,9 +24,7 @@ export function ExportModal({ open, workflowId, onClose }: ExportModalProps) {
         'POST',
       )
         .then((res) => setUrl(res.url))
-        .catch((e: any) =>
-          message.error(e?.message ?? 'Failed to generate export URL'),
-        )
+        .catch((e: any) => message.error(e?.message ?? t('export.failed')))
         .finally(() => setLoading(false));
     }
   }, [open, workflowId]);
@@ -32,7 +32,7 @@ export function ExportModal({ open, workflowId, onClose }: ExportModalProps) {
   const handleCopy = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(url);
-      message.success('URL copied to clipboard');
+      message.success(t('export.copied'));
     } catch {
       // Fallback for older browsers
       const textarea = document.getElementById(
@@ -40,25 +40,25 @@ export function ExportModal({ open, workflowId, onClose }: ExportModalProps) {
       ) as HTMLTextAreaElement;
       textarea?.select();
       document.execCommand('copy');
-      message.success('URL copied to clipboard');
+      message.success(t('export.copied'));
     }
   }, [url]);
 
   return (
     <Modal
-      title="Export Workflow"
+      title={t('export.title')}
       open={open}
       onCancel={onClose}
       footer={
         <Space>
-          <Button onClick={onClose}>Close</Button>
+          <Button onClick={onClose}>{t('common.close')}</Button>
           <Button
             type="primary"
             icon={<CopyOutlined />}
             onClick={handleCopy}
             disabled={!url}
           >
-            Copy URL
+            {t('export.copyUrl')}
           </Button>
         </Space>
       }
@@ -66,11 +66,16 @@ export function ExportModal({ open, workflowId, onClose }: ExportModalProps) {
       {loading ? (
         <div style={{ textAlign: 'center', padding: 24 }}>
           <LoadingOutlined style={{ fontSize: 24 }} />
-          <p>Generating export URL...</p>
+          <p>{t('export.generating')}</p>
         </div>
       ) : (
         <>
-          <p style={{ marginBottom: 8, color: '#666' }}>
+          <p
+            style={{
+              marginBottom: 8,
+              color: 'var(--ant-color-text-secondary)',
+            }}
+          >
             Export URL (valid for 30 minutes):
           </p>
           <Input.TextArea