fix: builder error

@@ -7,14 +7,16 @@ const cwd = process.cwd();
 
 module.exports = {
   output: {
-    filename: 'index.js',
+    filename: 'qx-[name]-[contenthash].bundle.js',
     libraryTarget: 'umd',
+    clean: true,
   },
   entry: path.resolve(cwd, './src/index.tsx'),
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
           options: {
@@ -29,14 +31,23 @@ module.exports = {
         },
       },
       {
-        test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+        test: /\.(png|jpeg|jpg|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
         use: {
           loader: 'file-loader',
         },
       },
       {
         test: /\.less$/i,
-        use: ['style-loader', 'css-loader', 'less-loader'],
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'less-loader',
+            options: {
+              additionalData: `@import '@qx/ui/dist/src/style/variable.less';`,
+            },
+          },
+        ],
       },
       {
         test: /\.svg$/,

@@ -24,6 +24,7 @@
   "license": "ISC",
   "dependencies": {
     "@ant-design/icons": "^5.2.5",
+    "@qx/common": "0.2.31-alpha.5",
     "@qx/flow": "1.0.0-alpha.10",
     "@qx/icon-btn": "^0.0.13",
     "@qx/ui": "0.0.3-beta.1",

-import React, { memo } from 'react';
-
-const DynamicComponent: React.FC<DynamicComponentProps> = (props) => {
-  return <div>DynamicComponent</div>;
-};
-
-interface DynamicComponentProps {
-  loader: (path: string) => any;
-}
-
-export default memo(DynamicComponent);

@@ -26,6 +26,7 @@ const FlowVersion: React.FC<FlowVersionProps> = (props) => {
   return (
     <>
       {versionText ||
+      // @ts-ignore
       (statusEnums || FlowStatusEnums)[status || 'UNPUBLISHED'] ? (
         <div
           className={cls(
@@ -51,6 +52,7 @@ const FlowVersion: React.FC<FlowVersionProps> = (props) => {
         >
           {!!versionText ? <span>V&nbsp;{versionText}</span> : null}
           {!!status ? (
+            // @ts-ignore
             <span>{(statusEnums || FlowStatusEnums)[status]}</span>
           ) : null}
         </div>

+import React, { Suspense } from 'react';
+import { Skeleton } from 'antd';
+
+const lazyComponent = (importComp: () => any) => {
+  const Comp = React.lazy(importComp);
+  return (
+    <Suspense fallback={<Skeleton.Input />}>
+      <Comp></Comp>
+    </Suspense>
+  );
+};
+
+export default lazyComponent;

@@ -62,6 +62,7 @@ const NameDescriptionSetting: React.FC<NameDescriptionSettingProps> = (
         if (_.isEmpty(values)) {
           form.resetFields();
         } else {
+          // @ts-ignore
           form.setValues(values);
         }
       }, 100);
@@ -114,6 +115,7 @@ const NameDescriptionSetting: React.FC<NameDescriptionSettingProps> = (
           form={form}
           schema={FORM_SCHEMA}
           onMount={() => {}}
+          // @ts-ignore
           onFinish={onFinish}
           watch={{}}
         />

@@ -2,12 +2,13 @@ import React, { memo, useContext, useEffect, useState } from 'react';
 import { BuilderContext } from '@qx/flow';
 import { Drawer, Spin, Tabs } from 'antd';
 import NodeList, { NodeItemsProps } from './components/node-list';
-import { useLocation, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from '@/hooks';
 import { getListGroupNode } from '@/services';
 import { QxIcon } from '@/components';
 import { ReactSortable } from 'react-sortablejs';
 import { cloneDeep } from 'lodash-es';
 import { v4 as uuid } from 'uuid';
+// @ts-ignore
 import type { INodePanelProps } from '@qx/flow';
 import Empty from './img/empty.png';
 
@@ -31,10 +32,10 @@ const panelTabs = [
 ];
 
 const NodePanel: React.FC<NodePanelProps> = (props) => {
-  const { visible, onClose } = props;
   // @ts-ignore
-  const [searchParams] = useSearchParams();
-  const appId = searchParams.get('appId');
+  const { visible, onClose } = props;
+  const [query] = useSearchParams<any>();
+  const appId = query?.appId;
   const { registerNodes } = useContext(BuilderContext);
   const [loading, setLoading] = useState(false);
   const [activeKey, setActiveKey] = useState('SYSTEM');

 export * from './useTheme';
+export * from './useSearchParams';
+export * from './useFlowTableScrollY';

+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+// 表格 Scroll 高度计算
+export const useFlowTableScrollY = (
+  deps: {
+    columns: any[];
+    size?: 'small' | 'middle' | 'default';
+    tableBoxClassName?: string;
+    classNames?: string[]; // 表格DOM内嵌元素 列名 添加在此,
+    hasPagination?: boolean;
+    listProps?: any;
+  } = {
+    size: 'small',
+    tableBoxClassName: '',
+    classNames: [],
+    hasPagination: false,
+    columns: [],
+    listProps: {},
+  },
+) => {
+  const itemHeaderHeight =
+    (deps?.size === 'middle' ? 48 : deps?.size === 'default' ? 56 : 40) + 1;
+  const TABLE_VIEW_LIST = deps?.tableBoxClassName || 'qx-data-flow-table';
+  let tableHeader = itemHeaderHeight;
+  const tableViewListDefaultHeight = 400;
+  const defaultPagePadding = 0;
+
+  const $ = (selectors: string) =>
+    document.querySelector<HTMLElement>(selectors);
+
+  const defaultScrollY = useMemo(
+    () => document.body.clientHeight,
+    [tableHeader],
+  );
+
+  const [scrollY, setScrollY] = useState<number>(defaultScrollY ?? 200);
+
+  // @ts-ignore
+  const timer = useRef<NodeJS.Timer>();
+
+  const getScrollY = () => {
+    const tableViewList = $(`.${TABLE_VIEW_LIST}`);
+
+    const tableViewListClientHeight =
+      tableViewList?.clientHeight || tableViewListDefaultHeight;
+    // 分页大小 目前已经固定 所以直接用56px
+    const antPaginationHeight = deps?.hasPagination ? 56 : 0;
+
+    const _domHeightByClassName = (deps?.classNames || []).map(
+      (_v: string) => $(`.${_v}`)?.clientHeight ?? 0,
+    );
+    let result =
+      tableViewListClientHeight -
+      tableHeader -
+      defaultPagePadding -
+      antPaginationHeight;
+    if (!!_domHeightByClassName?.length) {
+      result = result - eval(_domHeightByClassName.join('+'));
+    }
+
+    if (tableViewList) {
+      tableViewList.style.overflowY = result < 200 ? 'auto' : 'hidden';
+    }
+
+    setScrollY(result < 100 ? 100 : result);
+  };
+
+  const observer = () => {
+    window.addEventListener('resize', getScrollY);
+  };
+
+  const removeObserver = () => {
+    if (timer.current) window.clearTimeout(timer.current);
+    window.removeEventListener('resize', getScrollY);
+  };
+
+  useEffect(() => {
+    observer();
+    return () => {
+      removeObserver();
+    };
+  }, [tableHeader]);
+
+  useEffect(() => {
+    if (deps) {
+      timer.current = setTimeout(() => {
+        getScrollY();
+      }, 100);
+    }
+  }, [JSON.stringify(deps)]);
+
+  return [scrollY, getScrollY];
+};

+import { useMemo } from 'react';
+import { useSearchParams as useRouterDOMSearchParams } from 'react-router-dom';
+
+export const useSearchParams = <T = Record<string, any>>() => {
+  const [searchParams, setQuery] = useRouterDOMSearchParams();
+
+  const query = useMemo<T>(() => {
+    const params = {} as T;
+    searchParams.forEach((value, key) => {
+      (params as Record<string, any>)[key] = value;
+    });
+    return params;
+  }, []);
+
+  return [query, setQuery];
+};

@@ -17,7 +17,7 @@ import { Start, End } from './nodes';
 import { NodeTypes, ProcessItemProps, FlowStatusEnums } from '@/interface';
 import { handleWindowOpen } from '@qx/utils';
 // import { history } from '@@/core/history';
-import { useLocation, useSearchParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useTitle } from 'ahooks';
 // 头部相关
 import {
@@ -31,6 +31,7 @@ import cls from 'classnames';
 import styles from '@/components/header/index.module.less';
 import { getIcon } from '@/utils';
 import { QxIcon } from '@/components';
+import { useSearchParams } from '@/hooks';
 import {
   getProcessDetailsById,
   publishProcessById,
@@ -71,8 +72,7 @@ const systemNodes: IRegisterNode[] = [
 export default () => {
   const [nodes, setNodes] = useState<INode[]>([]);
   const [remoteNodes, setRemoteNodes] = useState<IRegisterRemoteNode[]>([]);
-  // @ts-ignore
-  const [searchParams] = useSearchParams();
+  const [query, setQuery] = useSearchParams<any>();
   const [showEditTitle, setShowEditTitle] = useState(false);
   const {
     appId, // 应用id
@@ -80,13 +80,7 @@ export default () => {
     returnUrl, // 来自页面跳转返回可跳转
     processId, // 流程Id preview
     type, // 流程类型 edit 编辑  preview 预览
-  } = {
-    appId: searchParams.get('appId'),
-    funCode: searchParams.get('funCode'),
-    returnUrl: searchParams.get('returnUrl'),
-    processId: searchParams.get('processId'),
-    type: searchParams.get('type'),
-  };
+  } = query;
 
   const [processDetails, setProcessDetails] = useState<ProcessItemProps>({
     id: '',
@@ -116,6 +110,7 @@ export default () => {
       .catch((err: { msg?: string }) => {
         message.warning(err?.msg || '流程详情数据请求失败', 5);
         setProcessDetails(
+          // @ts-ignore
           _data || {
             id: _id,
             name: '未命名流程',
@@ -198,7 +193,7 @@ export default () => {
         // 发布流程
         // TODO 要先校验是否保存 才能发布
         publishProcessById(processDetails.id || '')
-          .then((res) => {
+          .then((res: any) => {
             console.log('res ====', res);
           })
           .catch((err: { msg?: string }) => {
@@ -237,11 +232,8 @@ export default () => {
                 remark: data.remark,
               });
               if (!processDetails?.id) {
-                history.replace({
-                  query: {
-                    ...query,
-                    processId: res,
-                  },
+                setQuery({
+                  processId: res,
                 });
               }
             }
@@ -389,6 +381,7 @@ export default () => {
   useEffect(() => {
     let _data: ProcessItemProps = {};
     _data.name = '未命名流程';
+    // @ts-ignore
     _data.appId = appId;
     if (!!funCode) {
       _data.funCode = funCode;
@@ -416,6 +409,7 @@ export default () => {
     defaultTools: INode[],
     actions: any,
   ) => {
+    console.log('nodes', nodes);
     const { copyNodeAndChildren } = actions;
     switch (node.type) {
       case 'condition':
@@ -452,6 +446,7 @@ export default () => {
         registerNodes={systemNodes}
         historyTool
         zoomTool
+        // @ts-ignore
         expandAllTool
         DrawerComponent={Drawer}
         PopoverComponent={Popover}
@@ -463,6 +458,7 @@ export default () => {
         registerRemoteNodes={remoteNodes}
         ConfigDrawerContainer={ConfigDrawer}
         NodePanel={NodesPanel}
+        // @ts-ignore
         getNodeTool={getNodeTool}
       />
       <NameDescriptionSetting cRef={formModalRef} handleClick={handleClick} />

 import React, { useContext, memo, useImperativeHandle } from 'react';
-import { useForm } from '@qx/form-render';
-import QxFormRender from '@/packages/qx-form-generator/src/form-render';
-import { conditionSetting } from '../../setting-configs';
+// import { useForm } from '@qx/form-render';
+// import QxFormRender from '@/packages/qx-form-generator/src/form-render';
+// import { conditionSetting } from '../../setting-configs';
 import styles from './index.less';
 import type { IConfigComponent } from '@qx/flow';
 
 const StartConfigComponent = React.forwardRef<any, StartConfigComponentProps>(
   (props, ref) => {
-    const form = useForm();
+    // const form = useForm();
 
     const handleValuesChange = (values: any) => {
       props?.onChange(values);
     };
 
     useImperativeHandle(ref, () => ({
-      validateFields: form.validateFields,
+      // validateFields: form.validateFields,
     }));
 
     return (
       <div className={styles['qx-flow-single-records-config']}>
-        <QxFormRender
+        {/* <QxFormRender
           form={form}
           schema={conditionSetting}
           widgets={{}}
           watch={{}}
           onValuesChange={handleValuesChange}
-        />
+        /> */}
       </div>
     );
   },

 import React, { useContext, memo } from 'react';
-import { useForm } from '@qx/form-render';
+// import { useForm } from '@qx/form-render';
 import { useDrawer } from '@qx/flow';
-import { ConfigComponentFooter } from '../../components';
-import QxFormRender from '@/packages/qx-form-generator/src/form-render';
-import { startSetting } from '../../setting-configs';
+// import { ConfigComponentFooter } from '../../components';
+// import QxFormRender from '@/packages/qx-form-generator/src/form-render';
+// import { startSetting } from '../../setting-configs';
 import styles from './index.less';
 import type { IConfigComponent } from '@qx/flow';
 
 const EndConfigComponent: React.FC<EndConfigComponentProps> = (props) => {
-  const form = useForm();
-  const { closeDrawer: cancel, saveDrawer: save } = useDrawer();
+  // const form = useForm();
 
-  const onSave = async () => {
-    try {
-      await form.submit();
-      const values = form.getValues();
-      console.log('values', values);
-      save(values);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  return (
-    <div className={styles['qx-flow-single-records-config']}>
-      <QxFormRender form={form} schema={startSetting} widgets={{}} watch={{}} />
-      <ConfigComponentFooter onSave={onSave} onCancel={cancel} />
-    </div>
-  );
+  return <div className={styles['qx-flow-single-records-config']}></div>;
 };
 
 interface EndConfigComponentProps extends IConfigComponent {}

 import React, { memo } from 'react';
-// import { ReactComponent as Icon } from "../../public/icons/outlined.svg";
+import { Button, Typography } from 'antd';
+import { useAction } from '@qx/flow';
+const { Text } = Typography;
 import type { IDisplayComponent, INode } from '@qx/flow';
-import './index.less';
+
+const paramsEnums: Record<string, string> = {
+  STRING: '文本',
+  NUMBER: '数字',
+  TIME: '日期',
+  BOOL: '布尔',
+  OBJECT: '对象',
+  ARRAY: '数组',
+  ANNEX: '附件',
+  PIC: '图片',
+  FORM: '表单',
+  USER: '人员',
+  ORG: '部门',
+};
 
 const DisplayComponent: React.FC<DisplayComponentProps> = (props) => {
   const { node, nodes } = props;
 
+  const handleChangeName = (newValue: string) => {
+    node.name = newValue;
+    props.onChange?.([...nodes]);
+  };
+
+  const { clickNode } = useAction();
+
   return (
     <div className="qx-flow-default-node">
       <div className="qx-flow-default-node__header">
@@ -16,13 +38,38 @@ const DisplayComponent: React.FC<DisplayComponentProps> = (props) => {
           <span className="qx-flow-default-node__title--name">{node.name}</span>
         </span>
       </div>
-      <div className="qx-flow-default-node__content">
-        {!node.data ? (
-          <span className="qx-flow-start-node__button">设置入参</span>
-        ) : (
-          <span>节点配置内容</span>
-        )}
-      </div>
+      {!!node?.data?.params?.length ? (
+        <>
+          <div className="qx-flow-default-node__content">
+            {props?.node?.data?.params.map((_v: any) => {
+              return (
+                <Text
+                  style={{
+                    width: '100%',
+                    lineHeight: '22px',
+                  }}
+                  ellipsis={{
+                    tooltip: `${paramsEnums?.[_v.type || '']}&nbsp;${
+                      _v.title || '未命名'
+                    }`,
+                  }}
+                >
+                  {paramsEnums?.[_v.type || '']}&nbsp;{_v.title || '未命名'}
+                </Text>
+              );
+            })}
+          </div>
+        </>
+      ) : (
+        <Button
+          style={{ marginTop: 8 }}
+          type="link"
+          size="small"
+          // onClick={() => clickNode()}
+        >
+          设置入参
+        </Button>
+      )}
     </div>
   );
 };

 export { default as Start } from './start';
 export { default as End } from './end';
 // export { default as Condition } from './condition';
-export { default as Loop } from './loop';

-import React, { useContext, memo } from 'react';
-import { useForm } from '@qx/form-render';
-import { useDrawer } from '@qx/flow';
-import { ConfigComponentFooter } from '../../components';
-import QxFormRender from '@/packages/qx-form-generator/src/form-render';
-import { loopSetting } from '../../setting-configs';
-import styles from './index.less';
-import type { IConfigComponent } from '@qx/flow';
-
-const LoopConfigComponent: React.FC<LoopConfigComponentProps> = (props) => {
-  const form = useForm();
-  const { closeDrawer: cancel, saveDrawer: save } = useDrawer();
-
-  const onSave = async () => {
-    try {
-      await form.submit();
-      const values = form.getValues();
-      console.log('values', values);
-      save(values);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  return (
-    <div className={styles['qx-flow-single-records-config']}>
-      <QxFormRender form={form} schema={LoopSetting} widgets={{}} watch={{}} />
-      <ConfigComponentFooter onSave={onSave} onCancel={cancel} />
-    </div>
-  );
-};
-
-interface LoopConfigComponentProps extends IConfigComponent {}
-
-export default memo(LoopConfigComponent);

-import React, { memo, useContext } from 'react';
-import { useAction } from '@qx/flow';
-import type { IDisplayComponent } from '@qx/flow';
-
-const ConditionDisplayComponent: React.FC<ConditionDisplayComponentProps> = (
-  props,
-) => {
-  return <>条件节点内容</>;
-};
-
-interface ConditionDisplayComponentProps extends IDisplayComponent {}
-
-export default memo(ConditionDisplayComponent);

-import ConfigComponent from './configComponent';
-import DisplayComponent from './displayComponent';
-
-export default {
-  // DisplayComponent,
-  // ConfigComponent,
-};

-import React, {
-  useContext,
-  memo,
-  useState,
-  useEffect,
-  useImperativeHandle,
-} from 'react';
-import { Checkbox, Form, Input, Radio, Space, Tooltip } from 'antd';
-import type { CheckboxChangeEvent, RadioChangeEvent } from 'antd/es/checkbox';
-
+import React, { memo, useState, useEffect, useImperativeHandle } from 'react';
+import { Checkbox, Form, Radio, Space, Tooltip } from 'antd';
+import type { RadioChangeEvent } from 'antd';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 import type { IConfigComponent } from '@qx/flow';
 import { QxParameterSetting } from '@qx/common';
 import { QxIcon } from '@/components';
-import _ from 'lodash';
+import { isEmpty, isEqual, cloneDeep } from 'lodash-es';
+
+const propagationList: {
+  value: string;
+  label: string;
+  tips: string;
+}[] = [
+  {
+    value: 'REQUIRED',
+    label: '需要事务',
+    tips: '如果当前存在事务，则加入该事务；如果不存在事务，则创建一个新的事务',
+  },
+  {
+    value: 'SUPPORTS',
+    label: '支持当前事务',
+    tips: '如果当前存在事务，则加入该事务；如果不存在事务，则直接执行',
+  },
+  {
+    value: 'REQUIRES_NEW',
+    label: '新建事务',
+    tips: '不管当前是否存在事务，必定创建一个新事务，如果当前存在事务这个事务会被挂起。新事务在层级上与之前的事务是平级的，两者互不干扰',
+  },
+];
+
+const isolationList: {
+  value: string;
+  label: string;
+  tips: string;
+}[] = [
+  {
+    value: 'READ_UNCOMMITTED',
+    label: '读未提交',
+    tips: '可以读到其它事务未提交的数据',
+  },
+  {
+    value: 'READ_COMMITTED',
+    label: '已提交读取',
+    tips: '可以读到其它事务已提交的数据',
+  },
+  {
+    value: 'REPEATABLE_READ',
+    label: '可重复读取',
+    tips: '不会读到其它事务已提交的数据',
+  },
+  {
+    value: 'SERIALIZABLE',
+    label: '可串行化的',
+    tips: '串行化读',
+  },
+];
 
-import { isolationList, propagationList } from '../../setting-configs/start';
 interface PropagationSettingProps {
   value: string;
   onChange: (val: string) => void;
@@ -63,29 +105,24 @@ const StartConfigComponent: React.FC<StartConfigComponentProps> =
     }));
 
     const [values, setValues] = useState<{
-      params: any[];
-      enablePropagation: boolean;
-      propagation: string;
-      isolation: string;
-    }>({
-      params: [],
-      enablePropagation: false,
-      propagation: 'REQUIRED',
-      isolation: 'REPEATABLE_READ',
-    });
-
+      params?: any[];
+      enablePropagation?: boolean;
+      propagation?: string;
+      isolation?: string;
+    }>();
     useEffect(() => {
-      if (_.isEmpty(props?.node?.data)) {
+      if (isEmpty(props?.node?.data)) {
         return;
       }
-      if (_.isEqual(props?.node?.data, values)) {
+      if (isEqual(props?.node?.data, values)) {
         return;
       }
-      setValues(props?.node?.data);
-    }, [props?.node?.data]);
+      setValues({ ...props?.node?.data });
+      form.setFieldsValue({ ...props?.node?.data });
+    }, [JSON.stringify(props?.node?.data)]);
 
     const onCheckedChange = (e: CheckboxChangeEvent) => {
-      const _cloneVal = _.cloneDeep(values);
+      const _cloneVal = !!values ? cloneDeep(values) : {};
       setValues({
         ..._cloneVal,
         enablePropagation: e.target.checked,
@@ -93,11 +130,11 @@ const StartConfigComponent: React.FC<StartConfigComponentProps> =
     };
 
     useEffect(() => {
-      if (_.isEqual(props?.node?.data, values)) {
+      if (!values || isEqual(props?.node?.data, values)) {
         return;
       }
       props.onChange(values);
-    }, [values]);
+    }, [JSON.stringify(values)]);
 
     return (
       <Form
@@ -109,37 +146,55 @@ const StartConfigComponent: React.FC<StartConfigComponentProps> =
           isolation: 'REPEATABLE_READ',
         }}
       >
-        <Form.Item name="params">
+        <Form.Item
+          style={{
+            marginBottom: '24px',
+          }}
+          name="params"
+        >
           <h3 className={'qx-flow-form__label-title'}>入参设置</h3>
           <p className={'qx-flow-form__label-tips'}>
             参数可以被后面的所有数据流节点使用
           </p>
           <QxParameterSetting
-            value={values.params}
+            // @ts-ignore
+            value={values?.params || []}
             onChange={(_v: any) => {
-              console.log('参数 === ', _v);
+              const _cloneVal = cloneDeep(values);
+              setValues({
+                ..._cloneVal,
+                params: _v,
+              });
             }}
           />
         </Form.Item>
-        <Form.Item name="enablePropagation">
+        <Form.Item
+          style={{
+            marginBottom: '16px',
+          }}
+          name="enablePropagation"
+        >
           <h3 className={'qx-flow-form__label-title'}>事务控制</h3>
           <Checkbox
-            checked={values.enablePropagation}
+            checked={values?.enablePropagation}
             onChange={onCheckedChange}
           >
             设置事务的传播行为和隔离级别
           </Checkbox>
         </Form.Item>
         <Form.Item
-          hidden={!values.enablePropagation}
+          hidden={!values?.enablePropagation}
           label="事务传播行为"
           name="propagation"
+          style={{
+            marginBottom: '16px',
+          }}
         >
           <PropagationSetting
             optionsList={propagationList}
-            value={'REQUIRED'}
+            value={values?.propagation || 'REQUIRED'}
             onChange={(_v: string) => {
-              const _cloneVal = _.cloneDeep(values);
+              const _cloneVal = cloneDeep(values);
               setValues({
                 ..._cloneVal,
                 propagation: _v,
@@ -148,15 +203,15 @@ const StartConfigComponent: React.FC<StartConfigComponentProps> =
           />
         </Form.Item>
         <Form.Item
-          hidden={!values.enablePropagation}
+          hidden={!values?.enablePropagation}
           label="事务隔离级别"
           name="isolation"
         >
           <PropagationSetting
             optionsList={isolationList}
-            value={'REPEATABLE_READ'}
+            value={values?.isolation || 'REPEATABLE_READ'}
             onChange={(_v: string) => {
-              const _cloneVal = _.cloneDeep(values);
+              const _cloneVal = cloneDeep(values);
               setValues({
                 ..._cloneVal,
                 isolation: _v,

 import React, { memo } from 'react';
-// import { ReactComponent as Icon } from '../../public/icons/outlined.svg';
+import { Button, Typography } from 'antd';
+import { useAction } from '@qx/flow';
+const { Text } = Typography;
 import type { IDisplayComponent, INode } from '@qx/flow';
-// import './index.less';
+
+const paramsEnums: Record<string, string> = {
+  STRING: '文本',
+  NUMBER: '数字',
+  TIME: '日期',
+  BOOL: '布尔',
+  OBJECT: '对象',
+  ARRAY: '数组',
+  ANNEX: '附件',
+  PIC: '图片',
+  FORM: '表单',
+  USER: '人员',
+  ORG: '部门',
+};
 
 const DisplayComponent: React.FC<DisplayComponentProps> = (props) => {
   const { node, nodes } = props;
@@ -11,6 +26,8 @@ const DisplayComponent: React.FC<DisplayComponentProps> = (props) => {
     props.onChange?.([...nodes]);
   };
 
+  const { clickNode } = useAction();
+
   return (
     <div className="qx-flow-default-node">
       <div className="qx-flow-default-node__header">
@@ -21,13 +38,38 @@ const DisplayComponent: React.FC<DisplayComponentProps> = (props) => {
           <span className="qx-flow-default-node__title--name">{node.name}</span>
         </span>
       </div>
-      <div className="qx-flow-default-node__content">
-        {!node.data ? (
-          <span className="qx-flow-end-node__button">设置入参</span>
-        ) : (
-          <span>节点配置内容</span>
-        )}
-      </div>
+      {!!node?.data?.params?.length ? (
+        <>
+          <div className="qx-flow-default-node__content">
+            {props?.node?.data?.params.map((_v: any) => {
+              return (
+                <Text
+                  style={{
+                    width: '100%',
+                    lineHeight: '22px',
+                  }}
+                  ellipsis={{
+                    tooltip: `${paramsEnums?.[_v.type || '']}&nbsp;${
+                      _v.title || '未命名'
+                    }`,
+                  }}
+                >
+                  {paramsEnums?.[_v.type || '']}&nbsp;{_v.title || '未命名'}
+                </Text>
+              );
+            })}
+          </div>
+        </>
+      ) : (
+        <Button
+          style={{ marginTop: 8 }}
+          type="link"
+          size="small"
+          // onClick={() => clickNode()}
+        >
+          设置入参
+        </Button>
+      )}
     </div>
   );
 };

@@ -9,8 +9,9 @@ import { QxIcon } from '@/components';
 import { isEmpty } from 'lodash-es';
 import { handleWindowOpen } from '@qx/utils';
 // import {} from '@/src/services/data-flow';
-import { getIcon, useFlowTableScrollY } from '@/utils';
+import { getIcon } from '@/utils';
 import { useDebounceEffect } from 'ahooks';
+import { useFlowTableScrollY } from '@/hooks';
 
 const { Text } = Typography;
 

@@ -16,7 +16,8 @@ import { useDebounceEffect, useDebounceFn } from 'ahooks';
 import { isEmpty, cloneDeep } from 'lodash-es';
 
 import { FlowSettingProps } from '@/page/view/constant';
-import { getIcon, useFlowTableScrollY } from '@/utils';
+import { getIcon } from '@/utils';
+import { useFlowTableScrollY } from '@/hooks';
 import actions from '@/utils/actions';
 
 import { copyProcessById, deleteProcessById, getListProcess } from '@/services';

 import React from 'react';
 // import { history } from '@@/core/history';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from '@/hooks';
 import { useTitle } from 'ahooks';
 // @ts-ignore;
 import { handleWindowOpen } from '@qx/utils';
@@ -13,16 +13,12 @@ import styles from '@/page/view/index.module.less';
 const prefix = 'qx-data-flow';
 
 const DataFlowView: React.FC = ({}) => {
-  const [searchParams] = useSearchParams();
+  const [query] = useSearchParams<any>();
   const {
     appId, // 应用id
     funCode, // 表单id
     returnUrl, // 来自页面跳转返回可跳转
-  } = {
-    appId: searchParams.get('appId'),
-    funCode: searchParams.get('funCode'),
-    returnUrl: searchParams.get('returnUrl'),
-  };
+  } = query;
 
   // 添加标题
   if (!!appId && !funCode) {

@@ -44,94 +44,3 @@ export const getIcon = (icon: string, type?: string) => {
     );
   }
 };
-
-// 表格 Scroll 高度计算
-export const useFlowTableScrollY = (
-  deps: {
-    columns: any[];
-    size?: 'small' | 'middle' | 'default';
-    tableBoxClassName?: string;
-    classNames?: string[]; // 表格DOM内嵌元素 列名 添加在此,
-    hasPagination?: boolean;
-    listProps?: any;
-  } = {
-    size: 'small',
-    tableBoxClassName: '',
-    classNames: [],
-    hasPagination: false,
-    columns: [],
-    listProps: {},
-  },
-) => {
-  const itemHeaderHeight =
-    (deps?.size === 'middle' ? 48 : deps?.size === 'default' ? 56 : 40) + 1;
-  const TABLE_VIEW_LIST = deps?.tableBoxClassName || 'qx-data-flow-table';
-  let tableHeader = itemHeaderHeight;
-  const tableViewListDefaultHeight = 400;
-  const defaultPagePadding = 0;
-
-  const $ = (selectors: string) =>
-    document.querySelector<HTMLElement>(selectors);
-
-  const defaultScrollY = useMemo(
-    () => document.body.clientHeight,
-    [tableHeader],
-  );
-
-  const [scrollY, setScrollY] = useState<number>(defaultScrollY ?? 200);
-
-  const timer = useRef<NodeJS.Timer>();
-
-  const getScrollY = () => {
-    const tableViewList = $(`.${TABLE_VIEW_LIST}`);
-
-    const tableViewListClientHeight =
-      tableViewList?.clientHeight || tableViewListDefaultHeight;
-    // 分页大小 目前已经固定 所以直接用56px
-    const antPaginationHeight = deps?.hasPagination ? 56 : 0;
-
-    const _domHeightByClassName = (deps?.classNames || []).map(
-      (_v: string) => $(`.${_v}`)?.clientHeight ?? 0,
-    );
-    let result =
-      tableViewListClientHeight -
-      tableHeader -
-      defaultPagePadding -
-      antPaginationHeight;
-    if (!!_domHeightByClassName?.length) {
-      result = result - eval(_domHeightByClassName.join('+'));
-    }
-
-    if (tableViewList) {
-      tableViewList.style.overflowY = result < 200 ? 'auto' : 'hidden';
-    }
-
-    setScrollY(result < 100 ? 100 : result);
-  };
-
-  const observer = () => {
-    window.addEventListener('resize', getScrollY);
-  };
-
-  const removeObserver = () => {
-    if (timer.current) window.clearTimeout(timer.current);
-    window.removeEventListener('resize', getScrollY);
-  };
-
-  useEffect(() => {
-    observer();
-    return () => {
-      removeObserver();
-    };
-  }, [tableHeader]);
-
-  useEffect(() => {
-    if (deps) {
-      timer.current = setTimeout(() => {
-        getScrollY();
-      }, 100);
-    }
-  }, [JSON.stringify(deps)]);
-
-  return [scrollY, getScrollY];
-};

@@ -11,14 +11,13 @@ import {
   Avatar,
 } from 'antd';
 
-import { SettingOutlined } from '@ant-design/icons/lib';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from '@/hooks';
 import { useTitle } from 'ahooks';
 import { QxIcon } from '@/components';
 import { handleWindowOpen } from '@qx/utils';
 import { FlowHeader, FlowVersion } from '@/components';
 
-import { useFlowTableScrollY } from '@/utils';
+import { useFlowTableScrollY } from '@/hooks';
 import actions from '@/utils/actions';
 
 import { isEmpty, cloneDeep } from 'lodash-es';
@@ -33,17 +32,12 @@ import { FlowVersionStatusEnums } from '@/interface';
 const prefix = 'qx-flow-setting';
 
 const DataFlowVersion: React.FC = ({}) => {
-  // @ts-ignore
-  const [searchParams] = useSearchParams();
+  const [query] = useSearchParams<any>();
   const {
     processId, // 流程ID
     name, // 流程名称
     returnUrl, // 来自页面跳转返回可跳转
-  } = {
-    processId: searchParams.get('processId'),
-    name: searchParams.get('name'),
-    returnUrl: searchParams.get('returnUrl'),
-  };
+  } = query;
   const [pageData, setPageData] = useState<any[]>([]);
   const [tableLoading, setTableLoading] = useState<boolean>(true); // 表格loading
   // 表格是否添加scroll 属性

 import { createHashRouter, RouterProvider } from 'react-router-dom';
 import Root from '../page/root';
-import About from '../page/about';
-import Designer from '../page/designer';
-import List from '../page/view/list';
-import Version from '../page/view/version';
+import lazyComponent from '@/components/lazy-component';
 
 export default () => (
   <RouterProvider
@@ -14,19 +11,27 @@ export default () => (
         children: [
           {
             path: '/about',
-            element: <About />,
+            element: lazyComponent(
+              () => import(/*qx-dataflow-about*/ '@/page/about'),
+            ),
           },
           {
             path: '/designer',
-            element: <Designer />,
+            element: lazyComponent(
+              () => import(/*qx-dataflow-designer*/ '@/page/designer'),
+            ),
           },
           {
             path: '/list',
-            element: <List />,
+            element: lazyComponent(
+              () => import(/*qx-dataflow-list*/ '@/page/view/list'),
+            ),
           },
           {
             path: '/version',
-            element: <Version />,
+            element: lazyComponent(
+              () => import(/*qx-dataflow-version*/ '@/page/view/version'),
+            ),
           },
         ],
       },

@@ -4,6 +4,7 @@ import request from '@/request';
 const qxSdk = new QxSdk();
 
 qxSdk.registerSdk({
+  // @ts-ignore
   getFormFields(appCode: string, funCode: string, viewCode: string) {
     return request.get(
       `/qx-apaas-lowcode/app/${appCode}/form/${funCode}/field/option/${viewCode}?withRel=true`,

-import React, { useEffect, useMemo, useRef, useState } from 'react';
-
-import { Button, Image, message, Modal, Tooltip, Upload } from 'antd';
+import { Image, Skeleton } from 'antd';
 import { QxIcon } from '@/components';
 
-import defaultImg from '@/components/default/default_cover.png';
+import defaultImg from '@/public/imgs/default_cover.png';
 
 const defaultIcon: Record<string, string> = {
   form: 'icon-app-file-fill',
@@ -44,94 +42,3 @@ export const getIcon = (icon: string, type?: string) => {
     );
   }
 };
-
-// 表格 Scroll 高度计算
-export const useFlowTableScrollY = (
-  deps: {
-    columns: any[];
-    size?: 'small' | 'middle' | 'default';
-    tableBoxClassName?: string;
-    classNames?: string[]; // 表格DOM内嵌元素 列名 添加在此,
-    hasPagination?: boolean;
-    listProps?: any;
-  } = {
-    size: 'small',
-    tableBoxClassName: '',
-    classNames: [],
-    hasPagination: false,
-    columns: [],
-    listProps: {},
-  },
-) => {
-  const itemHeaderHeight =
-    (deps?.size === 'middle' ? 48 : deps?.size === 'default' ? 56 : 40) + 1;
-  const TABLE_VIEW_LIST = deps?.tableBoxClassName || 'qx-data-flow-table';
-  let tableHeader = itemHeaderHeight;
-  const tableViewListDefaultHeight = 400;
-  const defaultPagePadding = 0;
-
-  const $ = (selectors: string) =>
-    document.querySelector<HTMLElement>(selectors);
-
-  const defaultScrollY = useMemo(
-    () => document.body.clientHeight,
-    [tableHeader],
-  );
-
-  const [scrollY, setScrollY] = useState<number>(defaultScrollY ?? 200);
-
-  const timer = useRef<NodeJS.Timer>();
-
-  const getScrollY = () => {
-    const tableViewList = $(`.${TABLE_VIEW_LIST}`);
-
-    const tableViewListClientHeight =
-      tableViewList?.clientHeight || tableViewListDefaultHeight;
-    // 分页大小 目前已经固定 所以直接用56px
-    const antPaginationHeight = deps?.hasPagination ? 56 : 0;
-
-    const _domHeightByClassName = (deps?.classNames || []).map(
-      (_v: string) => $(`.${_v}`)?.clientHeight ?? 0,
-    );
-    let result =
-      tableViewListClientHeight -
-      tableHeader -
-      defaultPagePadding -
-      antPaginationHeight;
-    if (!!_domHeightByClassName?.length) {
-      result = result - eval(_domHeightByClassName.join('+'));
-    }
-
-    if (tableViewList) {
-      tableViewList.style.overflowY = result < 200 ? 'auto' : 'hidden';
-    }
-
-    setScrollY(result < 100 ? 100 : result);
-  };
-
-  const observer = () => {
-    window.addEventListener('resize', getScrollY);
-  };
-
-  const removeObserver = () => {
-    if (timer.current) window.clearTimeout(timer.current);
-    window.removeEventListener('resize', getScrollY);
-  };
-
-  useEffect(() => {
-    observer();
-    return () => {
-      removeObserver();
-    };
-  }, [tableHeader]);
-
-  useEffect(() => {
-    if (deps) {
-      timer.current = setTimeout(() => {
-        getScrollY();
-      }, 100);
-    }
-  }, [JSON.stringify(deps)]);
-
-  return [scrollY, getScrollY];
-};