Merge remote-tracking branch 'origin/feature/dataflow' into feature/dataflow

 {
   "name": "@qx/common",
-  "version": "3.0.0-alpha.30",
+  "version": "3.0.0-alpha.31",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",

+import { createContext } from 'react'
+
+export interface QxFieldExtract {
+  widget: string;
+  $base?: boolean;
+  allowSelect?: boolean;
+  fieldKey: string;
+  fieldType: string;
+  fieldGroupType?: string;
+  relId?: string;
+  [key: string]: any;
+}
+
+export interface QxField {
+  name: string;
+  code: string;
+  extract: QxFieldExtract;
+}
+
+export interface  FieldContextType {
+  fields: QxField[];
+  setFields: (fields: QxField[]) => void
+}
+
+export const FieldContext = createContext<FieldContextType>({} as FieldContextType)

+import React, { useState } from 'react';
+import { FieldContext, QxField } from '../../context';
+
+export const QxFieldProvider: React.FC<QxFieldProviderProps> = (props) => {
+  const [fields, setFields] = useState<QxField[]>([]);
+
+  return (
+    <FieldContext.Provider value={{ fields, setFields }}>
+      {props.children}
+    </FieldContext.Provider>
+  );
+};
+
+interface QxFieldProviderProps {
+  children?: React.ReactNode;
+}

@@ -2,7 +2,7 @@ import { QxWidgetIcon } from '@qx/common';
 import { Collapse, Dropdown, Empty, Tag } from 'antd';
 import cls from 'classnames';
 import { cloneDeep } from 'lodash-es';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { FieldBaseType } from '../qx-base-condition';
 import { QxBaseIcon } from '../qx-base-icon';
 import { request } from '../utils';
@@ -99,60 +99,75 @@ export const useNodeFieldDisplay = ({
   const [inputDisplay, setInputDisplay] = useState<React.ReactNode>();
   const [optionalNodes, setOptionalNodes] = useState<INode[]>([]); // 根据 fieldType 过滤后的 nodes
 
-  const getId = (val?: string) => {
-    if (!val) return;
+  const getIds = (val?: string) => {
+    if (!val) return [];
+    let newVal = val;
     const startIndex = val.indexOf('|') + 1;
     const endIndex = val.indexOf('}');
     if (startIndex < endIndex) {
-      return val.substring(startIndex, endIndex);
+      newVal = val.substring(startIndex, endIndex);
     }
-    return null;
-  };
-
-  const getDisplayConfig = (value: string, nodes: INode[] = optionalNodes) => {
-    const itemId = getId(value);
-    if (!itemId) return [];
-    let displayConfig: any[] = [];
-    let n = true;
-    let index = 0;
-    while (n && index <= 20) {
-      displayConfig = [];
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      const curNode = cloneDeep(nodes[index]) || {};
-      displayConfig.push({
-        title: curNode.name,
-        icon: curNode.icon,
-        ...curNode,
-      });
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      recursionNodeResult(curNode.data?.result);
-      index++;
-    }
-
-    function recursionNodeResult(result: FiledType[], idx = 1) {
-      if (Array.isArray(result)) {
-        for (let i = 0; i < result.length; i++) {
-          const item = result[i];
-          if (!n) return;
 
-          displayConfig.splice(idx, 1, item);
-          displayConfig = displayConfig.slice(0, idx + 1);
+    const nodeId = val.split('|')[0].substring(2);
 
-          if (itemId === item.id) {
-            n = false;
-            return;
-          }
-
-          if (Array.isArray(item.child)) {
-            recursionNodeResult(item.child, idx + 1);
-          }
-        }
+    return [nodeId, ...newVal.split('.').reduce<string[]>((pre, cur, idx) => {
+      if (idx === 0) {
+        pre.push(`${nodeId}|${cur}`);
       } else {
-        n = false;
+        pre.push(`${pre[idx - 1]}.${cur}`);
       }
-    }
 
-    return displayConfig;
+      return pre;
+    }, [])];
+  };
+
+  const getDisplayConfig = (value: string, nodes: INode[] = optionalNodes) => {
+    const itemIds = getIds(value);
+
+    if (!itemIds || !itemIds.length) return [];
+
+    // let displayConfig: any[] = [];
+    // let n = true;
+    // let index = 0;
+    // while (n && index <= 20) {
+    //   displayConfig = [];
+    //   // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    //   const curNode = cloneDeep(nodes[index]) || {};
+    //   displayConfig.push({
+    //     title: curNode.name,
+    //     icon: curNode.icon,
+    //     ...curNode,
+    //   });
+    //   // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    //   recursionNodeResult(curNode.data?.result);
+    //   index++;
+    // }
+
+    // function recursionNodeResult(result: FiledType[], idx = 1) {
+    //   if (Array.isArray(result)) {
+    //     for (let i = 0; i < result.length; i++) {
+    //       const item = result[i];
+    //       if (!n) return;
+
+    //       displayConfig.splice(idx, 1, item);
+    //       displayConfig = displayConfig.slice(0, idx + 1);
+
+    //       if (itemId === item.id) {
+    //         n = false;
+    //         return;
+    //       }
+
+    //       if (Array.isArray(item.child)) {
+    //         recursionNodeResult(item.child, idx + 1);
+    //       }
+    //     }
+    //   } else {
+    //     n = false;
+    //   }
+    // }
+
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    return itemIds.map((id) => resultFieldMaps[id]);
   };
 
   const genDisplayDom = (value: string, nodes: INode[] = optionalNodes) => {
@@ -171,7 +186,7 @@ export const useNodeFieldDisplay = ({
                 FieldMapType[item.type] &&
                 !item.icon &&
                 `[${FieldMapType[item.type]}]`}
-              {item.title}
+              {item.title || item.name}
             </span>
             {idx !== displayConfig.length - 1 && (
               <span className="qx-node-select-input__content-item__arrow">
@@ -274,22 +289,36 @@ export const useNodeFieldDisplay = ({
     return sourceParentNodes;
   };
 
-  const correctionNodeField = (fields: FiledType[] | FiledType) => {
+  /**
+   * 统一字段格式
+   */
+  const correctionNodeField = (
+    fields: FiledType[] | FiledType,
+    nodeId: string,
+    parent?: FiledType | INode,
+  ) => {
     if (Array.isArray(fields)) {
       for (let i = 0; i <= fields.length; i++) {
-        correctionNodeField(fields[i]);
+        correctionNodeField(fields[i], nodeId, parent);
       }
     } else if (fields) {
       Object.assign(fields, {
         ...fields,
         name: fields.title,
+        code: parent
+          ? `${parent.code}.${fields.code}`
+          : `${nodeId}|${fields.code}`,
         extract: {
           ...(fields.extract || {}),
           fieldType: fields.type,
           fieldKey: fields.code,
         },
-        child: correctionNodeField(fields.child!),
       });
+      fields.child = correctionNodeField(
+        fields.child!,
+        nodeId,
+        fields,
+      ) as FiledType[];
     }
 
     return fields;
@@ -299,7 +328,10 @@ export const useNodeFieldDisplay = ({
     const targetParentNodes = await handleGetAppsFields();
 
     for (let i = 0; i < targetParentNodes.length; i++) {
-      correctionNodeField(targetParentNodes[i].data?.result || []);
+      correctionNodeField(
+        targetParentNodes[i].data?.result || [],
+        targetParentNodes[i].id,
+      );
     }
 
     if (!limitTypes || !limitTypes.length) {
@@ -308,11 +340,14 @@ export const useNodeFieldDisplay = ({
       return;
     }
 
+    /**
+     * 根据 limitType 获取可选择的字段
+     */
     function getEffectiveResult(result: FiledType[]) {
       const newResult = [];
       for (let i = 0; i < result.length; i++) {
         const resultItem = result[i] || {};
-        correctionNodeField(resultItem);
+        // correctionNodeField(resultItem,  nodeId, parent);
 
         if (resultItem.child) {
           resultItem.child = getEffectiveResult(resultItem.child);
@@ -355,6 +390,27 @@ export const useNodeFieldDisplay = ({
     renderInputDisplay([...newNodes]);
   };
 
+  const resultFieldMaps = useMemo(() => {
+    const resultMap: Record<string, FiledType | INode> = {};
+    function genResultMap(result: FiledType[]) {
+      if (Array.isArray(result)) {
+        result.forEach((i) => {
+          resultMap[i.code] = i;
+          if (i.child) {
+            genResultMap(i.child);
+          }
+        });
+      }
+    }
+
+    for (let i = 0; i < optionalNodes.length; i++) {
+      resultMap[optionalNodes[i].id] = optionalNodes[i];
+      genResultMap(optionalNodes[i]?.data?.result);
+    }
+
+    return resultMap;
+  }, [optionalNodes]);
+
   useEffect(() => {
     getOptionalNodes();
   }, []);
@@ -365,6 +421,7 @@ export const useNodeFieldDisplay = ({
     renderInputDisplay,
     getDisplayConfig,
     inputDisplay,
+    resultFieldMaps,
   };
 };
 
@@ -456,7 +513,6 @@ export const QxFlowNodeFieldSelector: React.FC<NodeFieldSelectProps> = (
     useNodeFieldDisplay(props);
 
   const getOptions = () => {
-    console.log('optionalNodes', optionalNodes);
     return optionalNodes.map((node) => ({
       label: (
         <div className={cls('qx-node-select-dropdown-header')}>
@@ -485,7 +541,7 @@ export const QxFlowNodeFieldSelector: React.FC<NodeFieldSelectProps> = (
   };
 
   const handleItemClick = (nodeKey: string, item: any) => {
-    const newValue = '${' + `${nodeKey}|${item.id}` + '}';
+    const newValue = '${' + item.code + '}';
     props.onChange?.(newValue, item);
     if (!props.children) {
       renderInputDisplay(optionalNodes, newValue);