feat: qx-flow-node-selector

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

@@ -15,5 +15,7 @@ export * from './qx-btn';
 export * from './qx-progress';
 export * from './qx-progress';
 export * from './qx-search-input';
 export * from './qx-search-input';
 export * from './qx-dynamic-component';
 export * from './qx-dynamic-component';
+export * from './qx-widget-icon';
+export * from './qx-flow-node-selector';
 
 
 
 

@@ -53,16 +53,10 @@
       color: @N7;
       color: @N7;
     }
     }
 
 
-    &-value-render {
-      position: absolute;
-      background-color: #fff;
-      width: calc(100% - 33px);
-      height: 30px;
-      display: flex;
-      align-items: center;
-      top: 1px;
-      left: 8px;
-      z-index: 1;
+    .qx-field-setter {
+      .ant-tag {
+        display: flex;
+      }
     }
     }
   }
   }
 
 

 import { ControlOutlined } from '@ant-design/icons';
 import { ControlOutlined } from '@ant-design/icons';
-import { Select, Tooltip, Input } from 'antd';
+import { Select, Tooltip } from 'antd';
 import { size } from 'lodash-es';
 import { size } from 'lodash-es';
 import React, { useState } from 'react';
 import React, { useState } from 'react';
 import type { QxBaseConditionField } from '../qx-base-condition';
 import type { QxBaseConditionField } from '../qx-base-condition';
 import { QxBaseIcon } from '../qx-base-icon';
 import { QxBaseIcon } from '../qx-base-icon';
 import { QxFieldSetter } from '../qx-field-setter';
 import { QxFieldSetter } from '../qx-field-setter';
+import type { INode } from '../qx-flow-node-selector';
+import {
+  QxFlowNodeFieldSelector,
+  useNodeFieldDisplay,
+} from '../qx-flow-node-selector';
+import { QxWidgetIcon } from '../qx-widget-icon';
 
 
 import './index.less';
 import './index.less';
 
 
@@ -666,147 +672,22 @@ const optValTypeCheck = {
   },
   },
 };
 };
 
 
-export const WidgetsIcon = ({ widgetName }: { widgetName: string }) => {
-  let iconType: string = '';
-  switch (widgetName) {
-    case 'qxInput':
-      iconType = 'icon-field-text';
-      break;
-    case 'qxNumber':
-      iconType = 'icon-field-num';
-      break;
-    case 'dateTime':
-    case 'qxDatetime':
-      iconType = 'icon-field-datetime';
-      break;
-    case 'qxTime':
-      iconType = 'icon-field-time';
-      break;
-    case 'qxSwitch':
-      iconType = 'icon-field-boolean';
-      break;
-    case 'qxSelect':
-      iconType = 'icon-field-select';
-      break;
-    case 'qxMultiSelect':
-      iconType = 'icon-field-multi-select';
-      break;
-    case 'qxMobile':
-      iconType = 'icon-field-mobile';
-      break;
-    case 'qxMoney':
-      iconType = 'icon-field-finance';
-      break;
-    case 'qxEmail':
-      iconType = 'icon-field-email';
-      break;
-    case 'qxPercent':
-      iconType = 'icon-field-percent';
-      break;
-    case 'qxUpload':
-      iconType = 'icon-field-file';
-      break;
-    case 'qxUploadImage':
-      iconType = 'icon-field-img';
-      break;
-    case 'qxAddress':
-      iconType = 'icon-field-address';
-      break;
-    case 'qxRichText':
-      iconType = 'icon-field-richtext';
-      break;
-    case 'qxLocation':
-      iconType = 'icon-field-location';
-      break;
-    case 'orgSelector':
-      iconType = 'icon-field-department';
-      break;
-    case 'userSelector':
-      iconType = 'icon-field-user';
-      break;
-    case 'createdBy':
-    case 'created_by':
-      iconType = 'icon-field-created-by';
-      break;
-    case 'createdAt':
-    case 'created_at':
-      iconType = 'icon-field-created-at';
-      break;
-    case 'updatedBy':
-    case 'updated_by':
-      iconType = 'icon-field-updated-by';
-      break;
-    case 'updatedAt':
-    case 'updated_at':
-      iconType = 'icon-field-updated-at';
-      break;
-    case 'qxBizNo':
-      iconType = 'icon-field-no';
-      break;
-    case 'relSelector':
-      iconType = 'icon-field-rel';
-      break;
-    case 'relField':
-      iconType = 'icon-field-ref';
-      break;
-    case 'subform':
-    case 'table':
-      iconType = 'icon-field-subform';
-      break;
-    case 'qxTree':
-      iconType = 'icon-field-tree';
-      break;
-    case 'qxFormula':
-      iconType = 'icon-field-formula';
-      break;
-    case 'qxDivider':
-      iconType = 'icon-field-divider';
-      break;
-    case 'qxRemark':
-      iconType = 'icon-field-remark';
-      break;
-    case 'qxEmbed':
-      iconType = 'icon-field-embed ';
-      break;
-    case 'qxTabs':
-      iconType = 'icon-editor_tab';
-      break;
-    case 'qxLayout':
-      iconType = 'icon-editor_grid';
-      break;
-    case 'simple':
-      iconType = 'icon-editor_layout';
-      break;
-    case 'tabC':
-      iconType = 'icon-editor_tab';
-      break;
-    case 'layout':
-      iconType = 'icon-editor_grid';
-      break;
-    default:
-      iconType = 'icon-field-text';
-      break;
-  }
-  return <QxBaseIcon type={iconType} />;
-};
-
 export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
 export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
   value,
   value,
   field,
   field,
   remove,
   remove,
   onChange,
   onChange,
   mode = 'condition',
   mode = 'condition',
-  ValueAssignmentPopup,
+  node,
+  nodes,
 }) => {
 }) => {
-  const [CustomValueRender, setCustomValueRender] =
-    useState<() => React.ReactNode>();
-
+  const valuesObj = value?.valuesObj?.[0] || {};
   const [open, setOpen] = useState(false);
   const [open, setOpen] = useState(false);
 
 
-  const handleChange = (val: any) => {
+  const handleChange = (val: any[]) => {
     onChange?.({
     onChange?.({
       ...(value || {}),
       ...(value || {}),
-      mappingValues: val?.map((i: any) => i.value),
+      mappingValues: val?.length ? val?.map((i: any) => i.value) : [],
       valuesObj: val,
       valuesObj: val,
     });
     });
   };
   };
@@ -841,23 +722,23 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
     onChange?.(newValue);
     onChange?.(newValue);
   };
   };
 
 
-  const handleDefaultValueSettingChange = (
-    val: any,
-    valueRender: () => React.ReactNode,
-  ) => {
-    handleChange(val);
-    setCustomValueRender(() => valueRender);
+  const handleAssignment = (value: string) => {
+    handleChange([{ type: 'FIELD', value }]);
+    setOpen(false);
   };
   };
 
 
-  const handleOpenChange = setOpen;
+  const { genDisplayDom } = useNodeFieldDisplay({
+    node: node,
+    nodes: nodes,
+    limitTypes: [field.fieldType],
+  });
+
+  const getName = (values: any[]) => {
+    return values.map((value) => genDisplayDom(value))
+  }
 
 
   const RenderContent = (
   const RenderContent = (
     <>
     <>
-      {typeof CustomValueRender === 'function' && (
-        <div className="qx-base-condition-item__content-value-render">
-          {CustomValueRender()}
-        </div>
-      )}
       <QxFieldSetter
       <QxFieldSetter
         value={value?.valuesObj}
         value={value?.valuesObj}
         fieldGroupType={value?.fieldGroupType}
         fieldGroupType={value?.fieldGroupType}
@@ -865,11 +746,12 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
         isMultiple={multipleType.includes(value?.fieldGroupType)}
         isMultiple={multipleType.includes(value?.fieldGroupType)}
         isRange={optValTypeCheck.isRangeType(value?.opt)}
         isRange={optValTypeCheck.isRangeType(value?.opt)}
         disabled={optValTypeCheck.isEmptyType(value?.opt)}
         disabled={optValTypeCheck.isEmptyType(value?.opt)}
+        getName={getName}
       />
       />
-      {typeof ValueAssignmentPopup !== 'undefined' && (
+      {mode === 'variable' && (
         <ControlOutlined
         <ControlOutlined
           onClick={() => {
           onClick={() => {
-            handleOpenChange(!open);
+            setOpen(!open);
           }}
           }}
           className="qx-base-condition-item__content-suffix"
           className="qx-base-condition-item__content-suffix"
         />
         />
@@ -900,7 +782,7 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
       <div className="qx-base-condition-item__header">
       <div className="qx-base-condition-item__header">
         <div className="qx-base-condition-item__header-left">
         <div className="qx-base-condition-item__header-left">
           <span className="qx-base-condition-item__header-icon">
           <span className="qx-base-condition-item__header-icon">
-            <WidgetsIcon widgetName={field?.extract?.widget} />
+            <QxWidgetIcon widgetName={field?.extract?.widget} />
           </span>
           </span>
           <span className="qx-base-condition-item__header-text">
           <span className="qx-base-condition-item__header-text">
             {field.fieldName}
             {field.fieldName}
@@ -921,16 +803,18 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
         </div>
         </div>
       </div>
       </div>
       <div className="qx-base-condition-item__content">
       <div className="qx-base-condition-item__content">
-        {typeof ValueAssignmentPopup !== 'undefined' ? (
-          <ValueAssignmentPopup
+        {mode === 'variable' ? (
+          <QxFlowNodeFieldSelector
+            mode={mode}
+            node={node!}
+            nodes={nodes!}
             open={open}
             open={open}
-            value={value}
-            field={field}
-            onChange={handleDefaultValueSettingChange}
-            onOpenChange={handleOpenChange}
+            value={valuesObj?.value}
+            onChange={handleAssignment}
+            limitTypes={[field.fieldType]}
           >
           >
             {RenderContent}
             {RenderContent}
-          </ValueAssignmentPopup>
+          </QxFlowNodeFieldSelector>
         ) : (
         ) : (
           RenderContent
           RenderContent
         )}
         )}
@@ -942,9 +826,10 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
 export interface ValueAssignmentPopupProps
 export interface ValueAssignmentPopupProps
   extends Omit<QxBaseConditionItemProps, 'onChange'> {
   extends Omit<QxBaseConditionItemProps, 'onChange'> {
   children?: React.ReactNode;
   children?: React.ReactNode;
-  onChange?: (val: any, valueRender: () => React.ReactNode) => void;
+  onChange?: (val: any) => void;
   open?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   onOpenChange?: (open: boolean) => void;
+  onClear?: () => void;
 }
 }
 
 
 export interface QxBaseConditionItemProps {
 export interface QxBaseConditionItemProps {
@@ -952,6 +837,9 @@ export interface QxBaseConditionItemProps {
   value?: any;
   value?: any;
   onChange?: (val: any) => void;
   onChange?: (val: any) => void;
   remove?: (field: QxBaseConditionField) => void;
   remove?: (field: QxBaseConditionField) => void;
-  ValueAssignmentPopup?: React.FC<ValueAssignmentPopupProps>;
+  ValueAssignment?: React.FC<ValueAssignmentPopupProps>;
   mode?: string;
   mode?: string;
+  node?: INode;
+  nodes?: INode[];
+  // customDisplay?: (val: string) => React.ReactNode;
 }
 }

 import React, { useEffect, useState } from 'react';
 import React, { useEffect, useState } from 'react';
-import type { ValueAssignmentPopupProps } from '../qx-base-condition-item';
 import { QxBaseConditionItem } from '../qx-base-condition-item';
 import { QxBaseConditionItem } from '../qx-base-condition-item';
 import './index.less';
 import './index.less';
+import { INode } from '../qx-flow-node-selector';
 
 
 export enum FieldBaseType {
 export enum FieldBaseType {
   STRING = 'TEXT',
   STRING = 'TEXT',
@@ -56,14 +56,11 @@ export const QxBaseCondition: React.FC<QxBaseConditionProps> = (props) => {
           getDefaultConditionOptions(item),
           getDefaultConditionOptions(item),
           props.value?.[key] || {},
           props.value?.[key] || {},
         )}
         )}
+        nodes={props.nodes}
+        node={props.node}
         field={item}
         field={item}
         onChange={(val) => handleItemChange(val, key)}
         onChange={(val) => handleItemChange(val, key)}
         remove={() => handleDelete(key)}
         remove={() => handleDelete(key)}
-        ValueAssignmentPopup={
-          item.showValueAssignmentPopup ?? true
-            ? props.ValueAssignmentPopup
-            : undefined
-        }
       />
       />
     </div>
     </div>
   ));
   ));
@@ -85,7 +82,7 @@ export interface QxBaseConditionField {
 }
 }
 
 
 export interface QxBaseConditionOptionsProps extends QxBaseConditionField {
 export interface QxBaseConditionOptionsProps extends QxBaseConditionField {
-  showValueAssignmentPopup?: boolean;
+  showValueAssignment?: boolean;
   isMultiple?: boolean;
   isMultiple?: boolean;
   isRange?: boolean;
   isRange?: boolean;
   [key: string]: any;
   [key: string]: any;
@@ -99,5 +96,6 @@ export interface QxBaseConditionProps {
   options: QxBaseConditionOptionsProps[];
   options: QxBaseConditionOptionsProps[];
   value: any[];
   value: any[];
   onChange?: (val: any[]) => void;
   onChange?: (val: any[]) => void;
-  ValueAssignmentPopup?: React.FC<ValueAssignmentPopupProps>;
+  nodes?: INode[]
+  node?: INode
 }
 }

@@ -156,6 +156,7 @@ export interface paramColSelectProps extends ColSelectProps {
   iconText?: string; // Popover-icon 自定义 后面跟随文本
   iconText?: string; // Popover-icon 自定义 后面跟随文本
   allowClear?: boolean;
   allowClear?: boolean;
   popupOnBody?: boolean; // 下拉 跟随 body 还是自身
   popupOnBody?: boolean; // 下拉 跟随 body 还是自身
+  getName?: (val: any) => void
 }
 }
 
 
 export const QxFieldSetter: React.FC<paramColSelectProps> = ({
 export const QxFieldSetter: React.FC<paramColSelectProps> = ({
@@ -355,7 +356,7 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
    * @param str 字符串形式
    * @param str 字符串形式
    * @param joinParent 拼接父节点
    * @param joinParent 拼接父节点
    */
    */
-  const getName = (val: string[], str?: boolean, joinParent?: boolean) => {
+  const getName = props?.getName || ((val: string[], str?: boolean, joinParent?: boolean) => {
     const name: any[] = [];
     const name: any[] = [];
     let flag: boolean = false;
     let flag: boolean = false;
     (colsTree || []).map((tree) => {
     (colsTree || []).map((tree) => {
@@ -440,7 +441,7 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
     } else {
     } else {
       return flag ? name : val;
       return flag ? name : val;
     }
     }
-  };
+  });
 
 
   /**
   /**
    * 名称转换
    * 名称转换

+@import '~@qx/ui/src/style/variable.less';
+@ant-prefix-cls: ~'ant';
+
+.qx-node-select {
+  &-dropdown {
+    max-height: calc(8 * 32px);
+    overflow: auto;
+    background-color: white;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    border-radius: 8px;
+
+    &-header {
+      display: flex;
+      align-items: center;
+      &__icon {
+        width: 14px;
+        height: 14px;
+        font-size: 14px;
+        line-height: 14px;
+        // color: @N7;
+        margin-right: 4px;
+        display: inline-block;
+        border-radius: 50%;
+        overflow: hidden;
+        // border: 1px solid @N6;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        > img {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+
+    .qx-node-select-item__icon {
+      margin-right: 4px;
+    }
+
+    .@{ant-prefix-cls}-collapse-header,
+    .@{ant-prefix-cls}-collapse-content {
+      padding: 7px !important;
+      font-size: 14px;
+    }
+
+    .@{ant-prefix-cls}-collapse-content {
+      background-color: @N3 !important;
+      padding: 0 !important;
+
+      &-box {
+        padding: 0 !important;
+      }
+    }
+  }
+
+  &-item {
+    width: 100%;
+    padding: 7px 16px 7px 32px !important;
+    &:hover {
+      background-color: @N4;
+      cursor: pointer;
+    }
+
+    &__group {
+      padding: 0 0 0px 32px !important;
+
+      &:hover {
+        background-color: transparent;
+      }
+      .@{ant-prefix-cls}-collapse-header {
+        padding: 7px 0 !important;
+      }
+    }
+  }
+
+  &-input {
+    box-sizing: border-box;
+    margin: 0;
+    font-variant: tabular-nums;
+    list-style: none;
+    font-feature-settings: 'tnum', 'tnum';
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 32px;
+    min-width: 0;
+    padding: 4px 32px 4px 4px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    line-height: 1.5715;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: @B8;
+    }
+
+    &__content {
+      display: inline-flex;
+      color: @N9;
+      font-size: 14px;
+
+      &-item {
+        margin-right: 4px;
+        display: flex;
+        align-items: center;
+
+        &__icon {
+          width: 14px;
+          height: 14px;
+          font-size: 14px;
+          line-height: 14px;
+          // color: @N7;
+          margin-right: 4px;
+          display: inline-block;
+          border-radius: 50%;
+          // overflow: hidden;
+          // border: 1px solid @N6;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          > img {
+            width: inherit;
+            height: inherit;
+          }
+        }
+
+        &__arrow {
+          display: inline-flex;
+          align-items: center;
+          color: @N6;
+        }
+      }
+    }
+
+    &__suffix {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+:global {
+  .qx-node-select-dropdown {
+    > .@{ant-prefix-cls}-collapse {
+      > .@{ant-prefix-cls}-collapse-item {
+        > .@{ant-prefix-cls}-collapse-content {
+          padding-right: 7px !important;
+        }
+      }
+    }
+  }
+}

+import { ControlOutlined } from '@ant-design/icons';
+import { QxWidgetIcon } from '@qx/common';
+import { Collapse, Dropdown, Empty, Tag } from 'antd';
+import cls from 'classnames';
+import { cloneDeep } from 'lodash-es';
+import React, { useEffect, useMemo, useState } from 'react';
+import { QxBaseIcon } from '../qx-base-icon';
+import { request } from '../utils';
+import styles from './index.less';
+// import type { FiledType } from '@/interface';
+// import type { INode } from '@qx/flow';
+
+const getAppsFields = (params: string[], appId = 'default') => {
+  return request.post(`/qx-apaas-lowcode/app/${appId}/fields`, {
+    data: params,
+  });
+};
+
+export const getNodesMap = (
+  nodes: INode[],
+  map: Record<string, INode> = {},
+) => {
+  if (!nodes) return {};
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (!map[node.id]) {
+      map[node.id] = node;
+    }
+
+    if (node.children && Array.isArray(node.children)) {
+      getNodesMap(node.children, map);
+    }
+  }
+
+  return map;
+};
+
+export const getParentNodes = (
+  node?: INode,
+  treeNodes?: INode[],
+  parentNode: INode[] = [],
+  allNodes = getNodesMap(treeNodes!),
+) => {
+  if (!node || !treeNodes) return [];
+  if (node.previousId) {
+    parentNode.push(allNodes[node.previousId]);
+    getParentNodes(allNodes[node.previousId], treeNodes, parentNode, allNodes);
+  }
+
+  return parentNode;
+};
+
+export enum FileTypeMap {
+  'STRING' = '文本',
+  'NUMBER' = '数字',
+  'BOOL' = '布尔',
+  'TIME' = '日期',
+  'OBJECT' = '对象',
+  'ARRAY' = '数组',
+  'FORM' = '表单',
+  'USER' = '人员',
+  'ORG' = '部门',
+  'FILE' = '文件',
+  'PIC' = '图片',
+}
+
+interface NodeFieldDisPlay {
+  node?: INode;
+  nodes?: INode[];
+  limitTypes?: string[];
+}
+
+const icon = (icon: any) => {
+  if (icon?.$$typeof) {
+    return icon;
+  }
+  if (typeof icon !== 'string' && icon) {
+    return <QxBaseIcon type={icon.props.type} />;
+  }
+
+  return <img src={icon} />;
+};
+
+export const useNodeFieldDisplay = ({
+  node,
+  nodes,
+  limitTypes,
+}: NodeFieldDisPlay) => {
+  const sourceParentNodes =
+    getParentNodes(node, nodes).filter(
+      (node) => !['default_DF_BRANCH'].includes(node.type),
+    ) || [];
+
+  const optionalNodes = useMemo(() => {
+    const targetParentNodes = cloneDeep(sourceParentNodes);
+    if (!limitTypes) return targetParentNodes;
+
+    function getEffectiveNodes(nodes: INode[]) {
+      return nodes.reduce<INode[]>((pre, cur) => {
+        const curNode = cur;
+
+        if (Array.isArray(curNode.data?.result)) {
+          const resultNodes = (curNode.data.result as FiledType[]).filter(
+            (i) => {
+              if (i.child && Array.isArray(i.child)) {
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                i.child = getEffectiveResult(i.child);
+              }
+              return limitTypes!.includes(i.type);
+            },
+          );
+
+          if (resultNodes?.length) {
+            curNode.data.result = resultNodes;
+            pre.push(curNode);
+          }
+        }
+
+        return pre;
+      }, []);
+    }
+
+    function getEffectiveResult(result: FiledType[]) {
+      return result.filter((item) => {
+        if (item.child && Array.isArray(item.child)) {
+          item.child = getEffectiveResult(item.child);
+        }
+        return limitTypes?.includes(item.fieldType);
+      });
+    }
+
+    return getEffectiveNodes(targetParentNodes);
+  }, [limitTypes, sourceParentNodes]);
+
+  const getId = (val?: string) => {
+    if (!val) return;
+    const startIndex = val.indexOf('|') + 1;
+    const endIndex = val.indexOf('}');
+    if (startIndex < endIndex) {
+      return val.substring(startIndex, endIndex);
+    }
+    return null;
+  };
+
+  const genDisplayDom = (value: string) => {
+    const itemId = getId(value);
+    if (!itemId) return;
+    let displayConfig: any[] = [];
+    let n = true;
+    let index = 0;
+    while (n && index <= 20) {
+      displayConfig = [];
+      const curNode = optionalNodes[index] || {};
+      displayConfig.push({
+        title: curNode.name,
+        icon: curNode.icon,
+        ...(optionalNodes[index] || {}),
+      });
+      // 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;
+      }
+    }
+
+    return (
+      <>
+        {displayConfig?.map((item, idx) => (
+          <div
+            key={idx}
+            className={styles['qx-node-select-input__content-item']}
+          >
+            {item.icon && (
+              <span
+                className={styles['qx-node-select-input__content-item__icon']}
+              >
+                {icon(item.icon)}
+              </span>
+            )}
+            <span
+              className={styles['qx-node-select-input__content-item__text']}
+            >
+              {item.type &&
+                FileTypeMap[item.type] &&
+                !item.icon &&
+                `[${FileTypeMap[item.type]}]`}
+              {item.title}
+            </span>
+            {idx !== displayConfig.length - 1 && (
+              <span
+                className={styles['qx-node-select-input__content-item__arrow']}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  fill="currentColor"
+                >
+                  <path d="M5.80469 13.6423L4.86188 12.6995L9.57592 7.98548L4.86188 3.27143L5.80469 2.32863L10.9901 7.51403C10.9901 7.51406 10.9901 7.51407 10.5187 7.98548L10.9901 7.51403L11.4615 7.98548L5.80469 13.6423Z" />
+                </svg>
+              </span>
+            )}
+          </div>
+        ))}
+      </>
+    );
+  };
+
+  return {
+    genDisplayDom,
+    optionalNodes,
+  };
+};
+
+const SelectItem = (props: any) => {
+  if (props.type === 'FORM') {
+    return (
+      <div className={cls('qx-node-select-item', 'qx-node-select-item__group')}>
+        <Collapse
+          ghost
+          expandIconPosition="end"
+          items={[
+            {
+              label: (
+                <span>
+                  {/* @ts-ignore */}
+                  {`[${FileTypeMap[props.type]}]`}
+                  {props.title}
+                </span>
+              ),
+              key: props.id,
+              children: props.child?.map((item: any, idx: number) => {
+                return (
+                  <SelectItem
+                    key={item.code || idx}
+                    {...item}
+                    onClick={props.onClick}
+                  />
+                );
+              }),
+            },
+          ]}
+        />
+      </div>
+    );
+  }
+
+  if (!props.child) {
+    return (
+      <div
+        className={cls('qx-node-select-item')}
+        onClick={() => props.onClick(props)}
+      >
+        {/* @ts-ignore */}
+        {props.icon ? props.icon : `[${FileTypeMap[props.type]}]`}
+        {props.title}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cls('qx-node-select-item', 'qx-node-select-item__group')}>
+      <Collapse
+        ghost
+        expandIconPosition="end"
+        items={[
+          {
+            label: (
+              <span>
+                {/* @ts-ignore */}
+                {`[${FileTypeMap[props.type]}]`}
+                {props.title}
+              </span>
+            ),
+            key: props.id,
+            children: props.child?.map((item: any, idx: number) => {
+              return (
+                <SelectItem
+                  key={item.code || idx}
+                  {...item}
+                  onClick={props.onClick}
+                />
+              );
+            }),
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export const QxFlowNodeFieldSelector: React.FC<NodeFieldSelectProps> = (
+  props,
+) => {
+  const { mode = 'select' } = props;
+
+  const [visible, setVisible] = useState(false);
+
+  const [inputDisplay, setInputDisplay] = useState<React.ReactNode>();
+
+  const { optionalNodes, genDisplayDom } = useNodeFieldDisplay(props);
+
+  const getOptions = () => {
+    if (!optionalNodes.length) {
+      return <Empty />;
+    }
+    return optionalNodes.map((node) => ({
+      label: (
+        <div className={cls('qx-node-select-dropdown-header')}>
+          <span className={cls('qx-node-select-dropdown-header__icon')}>
+            {icon(node.icon)}
+          </span>
+          {node.name}
+        </div>
+      ),
+      key: node.id,
+      children: Array.isArray(node.data?.result)
+        ? (node.data.result as FiledType[])?.map((item) => {
+            return (
+              <SelectItem
+                key={item.id}
+                {...item}
+                onClick={(value: FiledType) => {
+                  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                  handleItemClick(node.id, value || item);
+                }}
+              />
+            );
+          })
+        : [],
+    }));
+  };
+
+  const getForms = () => {
+    const forms: FiledType[] = [];
+    optionalNodes.forEach((node) => {
+      if (Array.isArray(node.data?.result)) {
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        recursionNodeResult(node.data?.result);
+      }
+    });
+
+    function recursionNodeResult(result: FiledType[] | FiledType) {
+      if (!Array.isArray(result) && result) {
+        if (result.qxProps && result.qxProps?.formId) {
+          forms.push(result);
+        }
+      }
+      if (Array.isArray(result)) {
+        result.forEach((i) => {
+          if (i.qxProps && i.qxProps?.formId) {
+            forms.push(i);
+          } else if (i.child) {
+            recursionNodeResult(i.child);
+          }
+        });
+      }
+    }
+
+    return forms;
+  };
+
+  const renderInputDisplay = (val: string = props.value || '') => {
+    setInputDisplay(
+      <Tag bordered={false} className="qx-node-select-input__content">
+        {genDisplayDom(val)}
+      </Tag>,
+    );
+  };
+
+  const handleGetAppsFields = async () => {
+    const forms = getForms();
+    const ids = forms.map(
+      (item) => item.qxProps?.formId && !props.limitTypes?.includes(item.type),
+    );
+    console.log(ids, 'ids')
+    if (Array.isArray(ids) && ids.length) {
+      try {
+        const data = await getAppsFields(ids as any[]);
+        Object.keys(data).forEach((id) => {
+          forms.forEach((i) => {
+            if (i.qxProps?.formId === id) {
+              if (Array.isArray(i.child)) {
+                i.child.push(
+                  data[id].map((item: FiledType) => ({
+                    icon: (
+                      <span className="qx-node-select-item__icon">
+                        <QxWidgetIcon
+                          widgetName={item.extract?.widget || 'qxInput'}
+                        />
+                      </span>
+                    ),
+                    title: item.name,
+                    code: item.code,
+                    id: item.code,
+                    type: item.extract?.fieldType,
+                  })),
+                );
+              } else {
+                i.child = data[id].map((item: FiledType) => ({
+                  icon: (
+                    <span className="qx-node-select-item__icon">
+                      <QxWidgetIcon
+                        widgetName={item.extract?.widget || 'qxInput'}
+                      />
+                    </span>
+                  ),
+                  title: item.name,
+                  code: item.code,
+                  id: item.code,
+                  type: item.extract?.fieldType,
+                }));
+              }
+            }
+          });
+        });
+        renderInputDisplay();
+      } catch (error) {
+        // appsFields = {};
+      }
+    }
+  };
+
+  const handleItemClick = (nodeKey: string, item: any) => {
+    const newValue = '${' + `${nodeKey}|${item.id}` + '}';
+    props.onChange?.(newValue, item);
+    if (!props.children) {
+      renderInputDisplay(newValue);
+    }
+    setVisible(false);
+  };
+
+  useEffect(() => {
+    handleGetAppsFields();
+  }, []);
+
+  useEffect(() => {
+    setVisible(props.open ?? false);
+  }, [props.open]);
+
+  return (
+    <div className={cls('qx-node-select')}>
+      <Dropdown
+        trigger={['click']}
+        overlayStyle={{ width: `${props?.width}px` }}
+        overlayClassName={cls('qx-node-select-dropdown')}
+        open={visible}
+        dropdownRender={() => (
+          <Collapse ghost expandIconPosition="end" items={getOptions()} />
+        )}
+        onOpenChange={(open) => {
+          if (mode === 'select') {
+            setVisible(open);
+          }
+        }}
+      >
+        {props.children ? (
+          props.children
+        ) : (
+          <div className={cls('qx-node-select-input')}>
+            {inputDisplay}
+            {mode === 'variable' && (
+              <span
+                className="qx-node-select-input__suffix"
+                onClick={() => setVisible(!visible)}
+              >
+                <ControlOutlined />
+              </span>
+            )}
+          </div>
+        )}
+      </Dropdown>
+    </div>
+  );
+};
+
+export interface NodeFieldSelectProps {
+  node: INode;
+  nodes: INode[];
+  onChange?: (val: any, opt?: FiledType) => void;
+  value?: string;
+  children?: React.ReactNode;
+  limitTypes?: string[];
+  width?: number;
+  mode?: 'select' | 'variable';
+  open?: boolean;
+}
+
+export interface FiledType {
+  type: string;
+  id: string;
+  title: string;
+  code: string;
+  valueOpt?: string;
+  mappingValues?: any[];
+  detailValues?: any;
+  condition?: any;
+  child?: FiledType[];
+  qxProps?: {
+    formId?: string;
+  };
+  [key: string]: any;
+}
+
+export interface INode {
+  id: string;
+  type: string;
+  name: string;
+  data?: any;
+  children?: INode[];
+  path?: string[];
+  configuring?: boolean;
+  validateStatusError?: boolean;
+  next?: string[];
+  tools?: string[] | React.FC<any>[];
+  debuggerError?: boolean;
+  debuggerSuccess?: boolean;
+  [key: string]: any;
+}

+---
+nav:
+  path: /component
+  title: 组件
+  order: 1
+group:
+  path: /common
+  title: 表单字段图标
+  order: 0
+---
+
+## QxWidgetIcon 表单字段图标
+
+### 表单字段图标
+
+```tsx
+import { QxWidgetIcon } from '@qx/common';
+
+export default () => {
+  return <QxWidgetIcon widgetName="qxInput" />;
+};
+```

+import { QxBaseIcon } from '../qx-base-icon';
+
+export const QxWidgetIcon = ({ widgetName }: { widgetName: string }) => {
+  let iconType: string = '';
+  switch (widgetName) {
+    case 'qxInput':
+      iconType = 'icon-field-text';
+      break;
+    case 'qxNumber':
+      iconType = 'icon-field-num';
+      break;
+    case 'dateTime':
+    case 'qxDatetime':
+      iconType = 'icon-field-datetime';
+      break;
+    case 'qxTime':
+      iconType = 'icon-field-time';
+      break;
+    case 'qxSwitch':
+      iconType = 'icon-field-boolean';
+      break;
+    case 'qxSelect':
+      iconType = 'icon-field-select';
+      break;
+    case 'qxMultiSelect':
+      iconType = 'icon-field-multi-select';
+      break;
+    case 'qxMobile':
+      iconType = 'icon-field-mobile';
+      break;
+    case 'qxMoney':
+      iconType = 'icon-field-finance';
+      break;
+    case 'qxEmail':
+      iconType = 'icon-field-email';
+      break;
+    case 'qxPercent':
+      iconType = 'icon-field-percent';
+      break;
+    case 'qxUpload':
+      iconType = 'icon-field-file';
+      break;
+    case 'qxUploadImage':
+      iconType = 'icon-field-img';
+      break;
+    case 'qxAddress':
+      iconType = 'icon-field-address';
+      break;
+    case 'qxRichText':
+      iconType = 'icon-field-richtext';
+      break;
+    case 'qxLocation':
+      iconType = 'icon-field-location';
+      break;
+    case 'orgSelector':
+      iconType = 'icon-field-department';
+      break;
+    case 'userSelector':
+      iconType = 'icon-field-user';
+      break;
+    case 'createdBy':
+    case 'created_by':
+      iconType = 'icon-field-created-by';
+      break;
+    case 'createdAt':
+    case 'created_at':
+      iconType = 'icon-field-created-at';
+      break;
+    case 'updatedBy':
+    case 'updated_by':
+      iconType = 'icon-field-updated-by';
+      break;
+    case 'updatedAt':
+    case 'updated_at':
+      iconType = 'icon-field-updated-at';
+      break;
+    case 'qxBizNo':
+      iconType = 'icon-field-no';
+      break;
+    case 'relSelector':
+      iconType = 'icon-field-rel';
+      break;
+    case 'relField':
+      iconType = 'icon-field-ref';
+      break;
+    case 'subform':
+    case 'table':
+      iconType = 'icon-field-subform';
+      break;
+    case 'qxTree':
+      iconType = 'icon-field-tree';
+      break;
+    case 'qxFormula':
+      iconType = 'icon-field-formula';
+      break;
+    case 'qxDivider':
+      iconType = 'icon-field-divider';
+      break;
+    case 'qxRemark':
+      iconType = 'icon-field-remark';
+      break;
+    case 'qxEmbed':
+      iconType = 'icon-field-embed ';
+      break;
+    case 'qxTabs':
+      iconType = 'icon-editor_tab';
+      break;
+    case 'qxLayout':
+      iconType = 'icon-editor_grid';
+      break;
+    case 'simple':
+      iconType = 'icon-editor_layout';
+      break;
+    case 'tabC':
+      iconType = 'icon-editor_tab';
+      break;
+    case 'layout':
+      iconType = 'icon-editor_grid';
+      break;
+    default:
+      iconType = 'icon-field-text';
+      break;
+  }
+  return <QxBaseIcon type={iconType} />;
+};