feat: 添加路由页面

-const { defineConfig } = require('vite')
+const { defineConfig } = require('vite');
 
 
-module.exports = defineConfig({
+const process = require('process');
+const path = require('path');
+
+const cwd = process.cwd();
 
 
-})
+module.exports = defineConfig({
+  resolve: {
+    extensions: ['.json', '.jsx', '.js', '.ts', '.tsx'],
+    alias: {
+      '@': path.resolve(cwd, './src/'),
+      '@/src': path.resolve(cwd, './src/'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+        additionalData: `@import '@qx/ui/dist/src/style/variable.less';`,
+      },
+    },
+  },
+});

@@ -52,6 +52,7 @@ module.exports = {
     extensions: ['.json', '.jsx', '.js', '.ts', '.tsx'],
     extensions: ['.json', '.jsx', '.js', '.ts', '.tsx'],
     alias: {
     alias: {
       '@': path.resolve(cwd, './src/'),
       '@': path.resolve(cwd, './src/'),
+      '@/src': path.resolve(cwd, './src/'),
     },
     },
   },
   },
   plugins: [
   plugins: [

@@ -23,19 +23,36 @@
   "author": "",
   "author": "",
   "license": "ISC",
   "license": "ISC",
   "dependencies": {
   "dependencies": {
+    "@ant-design/icons": "^5.2.5",
+    "@qx/flow": "1.0.0-alpha.10",
+    "@qx/icon-btn": "^0.0.13",
+    "@qx/ui": "0.0.3-beta.1",
+    "@qx/utils": "0.0.56-alpha.4",
+    "ahooks": "^3.7.8",
+    "antd": "^5.8.4",
+    "classnames": "^2.3.2",
     "hox": "^2.1.1",
     "hox": "^2.1.1",
+    "lodash-es": "^4.17.21",
+    "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react": "^18.2.0",
+    "react-cookies": "^0.1.1",
     "react-dom": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.15.0",
     "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0"
+    "react-router-dom": "^6.15.0",
+    "react-sortablejs": "^6.1.4",
+    "sortablejs": "^1.15.0",
+    "uuid": "^9.0.0"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "@babel/core": "^7.22.9",
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
+    "@qx/types": "^0.0.2",
     "@svgr/webpack": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
+    "@types/lodash-es": "^4.17.8",
     "@types/react": "^18.2.21",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-dom": "^18.2.7",
+    "@types/uuid": "^9.0.2",
     "babel-loader": "^9.1.3",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "css-loader": "^6.8.1",

+//抽屉 蒙层样式全局覆盖
+.ant-drawer .ant-drawer-mask {
+  background-color: transparent;
+  transition: none;
+  animation: none;
+}
+
+//开始节点 配置 抽屉页面 样式覆盖
+.qx-df-start-setting-drawer {
+  .ant-drawer-body {
+    padding: 0;
+  }
+
+  .ant-form.ant-form-vertical {
+    height: calc(100% - 57px);
+    padding: 24px 18px 24px 24px;
+    font-size: 14px;
+    background-color: #fff;
+    overflow-y: hidden;
+    scrollbar-gutter: stable;
+
+    &:hover {
+      overflow-y: auto;
+    }
+
+    .qx-data-flow-tooltip-opt {
+      margin-left: 4px;
+      color: @N6;
+    }
+
+    .qx-flow-form__label-title {
+      margin-bottom: 16px;
+      line-height: 22px;
+      font-size: 14px;
+      font-weight: 600;
+      color: @N9;
+    }
+
+    .qx-flow-form__label-tips {
+      margin-bottom: 8px;
+      line-height: 22px;
+      font-size: 14px;
+      font-weight: 400;
+      color: @N8;
+    }
+
+    .ant-row.ant-form-item:not(:first-child) {
+      margin-bottom: 16px;
+    }
+
+    .ant-col.ant-form-item-control {
+      color: @N9;
+
+      .ant-checkbox-wrapper,
+      .ant-radio-wrapper {
+        color: @N9;
+      }
+    }
+
+    .ant-col ant-form-item-label {
+      color: @N8;
+    }
+  }
+}

+import React, { memo, useRef, useContext, useState } from 'react';
+import { Drawer, Button } from 'antd';
+import {
+  IDrawerComponent,
+  BuilderContext,
+  useHistory,
+  useDrawer,
+} from '@qx/flow';
+import { QxIcon } from '@/components';
+import './index.less';
+import cls from 'classnames';
+import commonStyles from '@/components/header/index.module.less';
+// 头部相关
+import FlowHeader from '../header';
+import FlowNameEditor from '../name-editor';
+import { merge } from 'lodash-es';
+
+const ConfigDrawerContainer: React.FC<ConfigDrawerContainerProps> = (props) => {
+  const configRef = useRef<any>();
+
+  const { selectedNode, setSelectedNode, onChange, nodes } =
+    useContext(BuilderContext);
+
+  const [showEdit, setShowEdit] = useState<boolean>(false);
+
+  const { pushHistory } = useHistory();
+
+  const { saveDrawer } = useDrawer();
+
+  const handleChange = async (values: any, extra: Record<string, any>) => {
+    if (selectedNode) {
+      selectedNode.data = values;
+      try {
+        await configRef.current?.validateFields?.();
+        selectedNode.validateStatusError = false;
+      } catch (error) {
+        selectedNode.validateStatusError = true;
+      }
+
+      merge(setSelectedNode, extra);
+      onChange([...nodes], 'config-change');
+    }
+  };
+
+  const handleClose = () => {
+    if (selectedNode) {
+      selectedNode.configuring = false;
+    }
+    setSelectedNode(undefined);
+    pushHistory();
+    onChange([...nodes], 'close-drawer');
+  };
+  // console.log('数据展示 nodes ===', nodes);
+  // console.log('数据展示 selectedNode ===', selectedNode);
+
+  return (
+    <Drawer
+      {...props}
+      title={null}
+      closable={false}
+      maskClosable={true}
+      drawerStyle={{
+        boxShadow: '-4px 0 16px 0 rgba(36, 40, 53, 0.1)',
+      }}
+      width={480}
+      destroyOnClose={true}
+      className={'qx-df-start-setting-drawer'}
+      onClose={handleClose}
+    >
+      <FlowHeader
+        extraStyles={{ padding: '0 24px' }}
+        renderLeft={
+          <FlowNameEditor
+            nodeName={selectedNode?.name || ''}
+            nodeIcon={<QxIcon type={'icon-two-dimensional-code'} />}
+            editTitle={showEdit}
+            setEditTitle={setShowEdit}
+            onChange={(val) => {
+              if (selectedNode) {
+                selectedNode.name = val;
+                onChange([...nodes], 'config-change');
+              }
+            }}
+          />
+        }
+        renderRight={
+          <Button
+            className={cls(commonStyles['qx-data-flow__modal-close'])}
+            type="text"
+            onClick={handleClose}
+            icon={<QxIcon type={'icon-close'} />}
+          />
+        }
+      />
+      {props.children &&
+        React.cloneElement(props.children as React.ReactElement, {
+          ref: configRef,
+          onChange: handleChange,
+        })}
+    </Drawer>
+  );
+};
+
+interface ConfigDrawerContainerProps extends IDrawerComponent {}
+
+export default memo(ConfigDrawerContainer);

+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);

+@prefix-cls: ~'qx-flow-version';
+
+.@{prefix-cls} {
+  width: auto;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  font-size: 14px;
+  font-weight: 400;
+  color: @N9;
+  background-color: @N3;
+  border-radius: 4px;
+  border: 1px solid @N3;
+
+  &.operational {
+    cursor: pointer;
+
+    &:hover {
+      color: @B8;
+      border-color: @B8;
+    }
+  }
+
+  &.published {
+    color: #00b42a;
+    background-color: #e8ffea;
+    border-color: #e8ffea;
+
+    &.operational:hover {
+      color: #00b42a;
+      background-color: #aff0b5;
+      border-color: #e8ffea;
+    }
+  }
+
+  &.edit {
+    color: #ff7d00;
+    background-color: #fff7e8;
+    border-color: #e8ffea;
+
+    &.operational:hover {
+      color: #ff7d00;
+      background-color: #ffe4ba;
+      border-color: #ffe4ba;
+    }
+  }
+}

+// 数据流名称编辑通用组件
+import React from 'react';
+
+import {
+  FlowStatusEnums,
+  FlowStatusProps,
+  FlowVersionStatusProps,
+} from '@/interface';
+
+// 样式
+import cls from 'classnames';
+import styles from './index.module.less';
+
+const prefix = 'qx-flow-version';
+
+interface FlowVersionProps {
+  versionText?: string | number;
+  status?: FlowVersionStatusProps | FlowStatusProps;
+  statusEnums?: Record<string, string>; // 状态枚举
+  handleClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void; // 调用方法
+}
+
+const FlowVersion: React.FC<FlowVersionProps> = (props) => {
+  const { handleClick, status, versionText, statusEnums } = props;
+
+  return (
+    <>
+      {versionText ||
+      (statusEnums || FlowStatusEnums)[status || 'UNPUBLISHED'] ? (
+        <div
+          className={cls(
+            styles[`${prefix}`],
+            styles[`${(status || 'DRAFT').toLowerCase()}`],
+            !!handleClick && versionText && Number(versionText) > 1
+              ? styles['operational']
+              : ' ',
+            !!handleClick && versionText && Number(versionText) > 1
+              ? ' qx-flow-version__default-operational'
+              : ' qx-flow-version__default',
+          )}
+          onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            if (handleClick && versionText && Number(versionText) > 1)
+              handleClick(e);
+          }}
+          style={{
+            minWidth:
+              (!!versionText ? (versionText + '').length + 1 : 0) * 14 +
+              (!!status ? 3 : 0) * 14 +
+              'px',
+          }}
+        >
+          {!!versionText ? <span>V&nbsp;{versionText}</span> : null}
+          {!!status ? (
+            <span>{(statusEnums || FlowStatusEnums)[status]}</span>
+          ) : null}
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default FlowVersion;

+@prefix-cls: ~'qx-data-flow__header';
+
+.qx-data-flow__container {
+  height: 100%;
+
+  :global {
+    .qx-flow-wrap {
+      height: calc(100% - 57px);
+
+      &.is-full {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.@{prefix-cls} {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  width: 100%;
+  height: 57px;
+  background-color: #fff;
+  border-bottom: 1px solid @N4;
+  box-sizing: border-box;
+}
+
+.@{prefix-cls}__left {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 16px;
+  color: @N9;
+  cursor: pointer;
+
+  :global {
+    .anticon {
+      font-size: 16px;
+    }
+  }
+}
+
+.@{prefix-cls}__left-return {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  cursor: pointer;
+  transform: rotate(90deg);
+  color: @N9;
+  cursor: pointer;
+}
+
+.@{prefix-cls}__left-title {
+  margin: 0 8px;
+  font-size: 16px;
+  color: @N9;
+  font-weight: 600;
+}
+
+.@{prefix-cls}__left-custom {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 16px;
+}
+
+.@{prefix-cls}__left-custom__opt {
+  margin-right: 16px;
+
+  :global {
+    .ant-btn-icon-only {
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .anticon {
+      font-size: 16px;
+      color: @N7;
+      cursor: pointer;
+
+      &:hover {
+        color: @B8;
+      }
+    }
+  }
+}
+
+.@{prefix-cls}__right {
+  :global {
+    .ant-btn-text {
+      &:focus,
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    .ant-btn-default {
+      color: @N8;
+      border-color: @N4;
+
+      &:focus,
+      &:hover {
+        color: @N8;
+      }
+
+      &:hover {
+        color: @B8;
+        border-color: @B8;
+      }
+    }
+
+    .ant-btn-primary {
+      &:focus,
+      &:hover {
+        background-color: transparent;
+      }
+
+      &:hover {
+        background-color: @B7;
+      }
+    }
+  }
+}
+
+.qx-data-flow__modal-close {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :global {
+    .anticon {
+      font-size: 12px !important;
+      color: @N7;
+    }
+  }
+
+  &:hover {
+    :global {
+      .anticon {
+        color: @N9;
+      }
+    }
+  }
+}

+// 数据流 头部组件
+import React, { useEffect, useState } from 'react';
+import { Button, Space } from 'antd';
+// import { useLocation } from 'umi';
+import { useLocation } from 'react-router-dom';
+import { QxIcon } from '@/components';
+
+// 样式
+import cls from 'classnames';
+import styles from './index.module.less';
+
+const prefix = 'qx-data-flow__header';
+
+interface FlowHeaderProps {
+  handleClick?: (type: string) => void;
+  type?: 'FLOW' | 'VERSION'; // 数据流 | 数据流详情页 | 流程版本
+  renderLeft?: React.ReactNode;
+  title?: string;
+  renderRight?: React.ReactNode;
+  extraStyles?: React.CSSProperties;
+}
+
+const FlowHeader: React.FC<FlowHeaderProps> = (props) => {
+  const {
+    handleClick,
+    type = 'FLOW',
+    renderLeft,
+    title,
+    renderRight,
+    extraStyles,
+  } = props;
+
+  // @ts-ignore
+  const { query } = useLocation();
+
+  return (
+    <header className={cls(styles[`${prefix}`])} style={extraStyles}>
+      {!!renderLeft ? (
+        renderLeft
+      ) : (
+        <div
+          className={cls(styles[`${prefix}__left`])}
+          onClick={() => {
+            handleClick && handleClick('RETURN');
+          }}
+        >
+          <QxIcon
+            className={cls(styles[`${prefix}__left-return`])}
+            type={'icon-common-arrow'}
+          />
+          <div className={cls(styles[`${prefix}__left-title`])}>
+            {title || '数据流'}
+          </div>
+        </div>
+      )}
+      <div className={cls(styles[`${prefix}__right`])}>
+        {!!renderRight ? (
+          renderRight
+        ) : (
+          <>
+            {type === 'FLOW' ? (
+              <Button
+                type="primary"
+                // loading={false}
+                onClick={() => {
+                  handleClick && handleClick('ADD');
+                }}
+              >
+                新建数据流
+              </Button>
+            ) : null}
+          </>
+        )}
+      </div>
+    </header>
+  );
+};
+
+export default FlowHeader;

+export { default as FlowHeader } from './header';
+export { default as FlowVersion } from './flow-version';
+export { default as NameDescriptionSetting } from './name-description-setting';
+export { default as ConfigDrawer } from './config-drawer';
+export { default as NodesPanel } from './nodes-panel';
+export { default as NameEditor } from './name-editor';
+export { default as QxIcon } from './qx-icon';

+.qx-name-description-modal {
+  .qx-data-flow-input--clear {
+    .fr-item-wrapper .fr-item-status-error input[class~='ant-input'],
+    .fr-item-wrapper .fr-item-status-error textarea[class~='ant-input'] {
+      &:hover,
+      &:focus {
+        border: none !important; // 由于该样式使用了!important，所以覆盖还是使用!important
+        box-shadow: none !important;
+      }
+    }
+
+    .fr-item-wrapper textarea[class~='ant-input'] + span.ant-input-clear-icon {
+      top: unset;
+      bottom: 8px;
+    }
+  }
+
+  .ant-modal-body {
+    .fr-container .field-block,
+    .fr-container .error-message {
+      min-height: 24px !important;
+    }
+  }
+}

+// 数据流名称编辑通用组件
+import React, { useImperativeHandle, useState } from 'react';
+import { Button, Modal, Space } from 'antd';
+// import { useForm } from '@qx/form-render';
+import { QxIcon } from '@/components';
+
+import _ from 'lodash-es';
+import '@/styles/modal-reset.less';
+import './index.less';
+import { Form } from 'antd';
+// import QxFormRender from '@/packages/qx-form-generator/src/form-render';
+
+const FORM_SCHEMA: object = {
+  type: 'object',
+  properties: {
+    id: {
+      type: 'string',
+      hidden: true,
+    },
+    name: {
+      title: '名称',
+      type: 'string',
+      max: 20,
+      placeholder: '请输入名称',
+      required: true,
+      props: {
+        allowClear: true,
+      },
+      className: 'qx-data-flow-input--clear',
+    },
+    remark: {
+      type: 'string',
+      widget: 'textarea',
+      title: '说明',
+      placeholder: '请输入说明',
+      max: 200,
+      props: {
+        allowClear: true,
+        //   showCount: true, // 显示字数提示
+      },
+      className: 'qx-data-flow-input--clear',
+    },
+  },
+};
+
+interface NameDescriptionSettingProps {
+  cRef: any;
+  handleClick: (type: string, data?: any) => void; // 名称变化调用方法
+}
+
+const NameDescriptionSetting: React.FC<NameDescriptionSettingProps> = (
+  props,
+) => {
+  const { cRef, handleClick } = props;
+  const [form] = Form.useForm();
+  const [visible, setVisible] = useState(false);
+
+  useImperativeHandle(cRef, () => ({
+    // 暴露给父组件
+    open: (values: any) => {
+      setTimeout(() => {
+        if (_.isEmpty(values)) {
+          form.resetFields();
+        } else {
+          form.setValues(values);
+        }
+      }, 100);
+      setVisible(true);
+    },
+  }));
+
+  const onFinish = async (data: any, error: any) => {
+    // console.log('表单数据:',data);
+    if (error.length > 0) {
+      return;
+    }
+    // 校验成功 保存名称、说明
+    handleClick('SAVE_NAME', data);
+    setVisible(false);
+  };
+
+  return (
+    <div>
+      <Modal
+        width={480}
+        title="编辑名称与说明"
+        onCancel={() => setVisible(false)}
+        keyboard={false}
+        maskClosable={false}
+        visible={visible}
+        footer={
+          <Space size={8}>
+            <Button onClick={() => setVisible(false)}>取消</Button>
+            <Button
+              type={'primary'}
+              onClick={() => {
+                form.submit();
+              }}
+            >
+              保存
+            </Button>
+          </Space>
+        }
+        wrapClassName={'qx-data-flow__modal qx-name-description-modal'}
+        closeIcon={
+          <QxIcon
+            className={'qx-data-flow__modal__close'}
+            type={'icon-close'}
+          />
+        }
+        destroyOnClose
+      >
+        <Form
+          form={form}
+          schema={FORM_SCHEMA}
+          onMount={() => {}}
+          onFinish={onFinish}
+          watch={{}}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default NameDescriptionSetting;

+@prefix-cls: ~'qx-name-editor';
+
+.@{prefix-cls} {
+  width: auto;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 16px;
+
+  :global {
+    .anticon {
+      font-size: 16px;
+      color: @N7;
+    }
+  }
+
+  .@{prefix-cls}__title--edit {
+    cursor: pointer;
+
+    &:hover {
+      color: @B8;
+    }
+  }
+
+  .@{prefix-cls}__input {
+    margin-left: 8px !important;
+  }
+}
+
+.@{prefix-cls}__title {
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  :global {
+    .ant-typography {
+      margin: 0 8px;
+      font-size: 16px;
+      line-height: 1.5;
+      color: @N9;
+      font-weight: 600;
+    }
+  }
+}

+// 数据流名称编辑通用组件
+import React, { useEffect, useState } from 'react';
+import { Input, Typography } from 'antd';
+import { QxIcon } from '@/components';
+
+const { Text } = Typography;
+// 样式
+import cls from 'classnames';
+import styles from './index.module.less';
+
+const prefix = 'qx-name-editor';
+
+interface FlowNameEditorProps {
+  noValueView?: string; // 无名称 展示文本
+  nodeName: string; // 节点名称
+  nodeIcon?: React.ReactNode; // 节点 icon
+  editTitle: boolean; // 可编辑 参数
+  setEditTitle: (val: boolean) => void; // 可编辑 参数
+  onChange: (data: string) => void; // 名称变化调用方法
+  nameMaxLength?: number; // 名称最长多少 展示省略号 默认 8
+}
+
+const FlowNameEditor: React.FC<FlowNameEditorProps> = (props) => {
+  const {
+    noValueView = '未命名',
+    nodeName,
+    nodeIcon,
+    editTitle,
+    setEditTitle,
+    onChange,
+    nameMaxLength,
+  } = props;
+
+  const [nameLocal, setNameLocal] = useState<string>('');
+
+  const inputRef = React.useRef<any>(null);
+
+  useEffect(() => {
+    setNameLocal(nodeName);
+  }, [nodeName]);
+
+  useEffect(() => {
+    if (Boolean(editTitle)) {
+      inputRef.current!.focus({
+        cursor: 'end',
+      });
+    }
+  }, [editTitle]);
+
+  return (
+    <div className={cls(styles[`${prefix}`])}>
+      {!!nodeIcon ? nodeIcon : null}
+      {editTitle ? (
+        <Input
+          ref={inputRef}
+          className={cls(styles[`${prefix}__input`])}
+          style={{
+            maxWidth: (nameMaxLength || 8) * 16 * 1.2 + 20 + 'px',
+          }}
+          value={nameLocal}
+          maxLength={20}
+          onChange={(e) => setNameLocal(e.target.value)}
+          onPressEnter={() => {
+            setEditTitle(false);
+            if (!nameLocal) {
+              setNameLocal(nodeName);
+            }
+            onChange(nameLocal || nodeName);
+          }}
+          onBlur={() => {
+            setEditTitle(false);
+            if (!nameLocal) {
+              setNameLocal(nodeName);
+            }
+            onChange(nameLocal || nodeName);
+          }}
+        />
+      ) : (
+        <>
+          <div
+            className={cls(styles[`${prefix}__title`])}
+            onClick={() => setEditTitle(true)}
+          >
+            <Text
+              style={{ maxWidth: (nameMaxLength || 8) * 16 * 1.2 + 'px' }}
+              ellipsis={{
+                tooltip: nameLocal ? nameLocal : noValueView ? noValueView : '',
+              }}
+            >
+              {nameLocal ? nameLocal : noValueView ? noValueView : ''}
+            </Text>
+            <QxIcon
+              className={cls(styles[`${prefix}__title--edit`])}
+              type={'icon-frame-edit'}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default FlowNameEditor;

+import React from 'react';
+import { NodeProps, NodeItemsProps } from './node-list';
+import { QxIcon } from '@/components';
+import { CloseOutlined } from '@ant-design/icons';
+import { useAction } from '@qx/flow';
+
+const prefix = 'qx-flow-node-panel';
+const NodeItem: React.FC<NodeItemProps> = (props) => {
+  const { nodeItem, isManage, setNodeList, index, parentId } = props;
+
+  const { addNode } = useAction();
+  const handleAdd = (nodeType: string) => {
+    addNode(nodeType);
+  };
+
+  const deleteNode = () => {
+    setNodeList((nodeItems: NodeItemsProps[]) => {
+      const tempList = [...nodeItems];
+      tempList.forEach((el) => {
+        if (el.id === parentId) {
+          el.nodes?.splice(index, 1);
+        }
+      });
+      return tempList;
+    });
+  };
+
+  return (
+    <div
+      className={`${prefix}__item`}
+      onClick={() => {
+        if (isManage) return;
+        console.log('点击我了，lllll');
+        handleAdd(nodeItem.nodeType);
+      }}
+    >
+      <QxIcon className={`${prefix}__item-icon`} type={'icon-frame-todolist'} />
+      <span className={`${prefix}__item-name`}>{nodeItem.nodeName}</span>
+      {isManage ? (
+        <CloseOutlined
+          className={`${prefix}__item--close`}
+          onClick={() => deleteNode()}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+interface NodeItemProps {
+  nodeItem: NodeProps;
+  isManage?: boolean;
+  setNodeList?: any;
+  index: number;
+  parentId?: string;
+}
+
+export default NodeItem;

+import React, { useEffect, useState } from 'react';
+import NodeItem from './node-item';
+import { QxIcon } from '@/components';
+import { ReactSortable } from 'react-sortablejs';
+import { Input } from 'antd';
+
+import empty from '../img/empty.png';
+
+const prefix = 'qx-flow-node-panel';
+
+const NodeList: React.FC<NodeListProps> = (props) => {
+  const { listItem, isManage, setNodeList, nodeIndex, setNodeEdit } = props;
+  const [open, setOpen] = useState(true);
+  const [name, setName] = useState(listItem.name);
+  const [edit, setEdit] = useState(listItem?.edit || false);
+
+  useEffect(() => {
+    setNodeEdit(edit);
+  }, [edit]);
+
+  const sortableOptionsComponent = {
+    disabled: !isManage || edit,
+    animation: 150,
+    fallbackOnBody: true,
+    swapThreshold: 0.65,
+    ghostClass: 'qx-node-panel--drag',
+    group: 'component',
+    onSort: () => {
+      if (!open) {
+        setOpen(!open);
+      }
+    },
+  };
+
+  const editName = (_value: string) => {
+    if (_value) {
+      setNodeList((nodeItems: NodeItemsProps[]) => {
+        const tempList = [...nodeItems];
+        tempList.forEach((el) => {
+          if (el.id === listItem.id) {
+            el.name = _value;
+          }
+          if (el.edit) delete el.edit;
+        });
+        return tempList;
+      });
+    }
+    setEdit(false);
+  };
+
+  const deleteGroup = () => {
+    setNodeList((nodeItems: NodeItemsProps[]) => {
+      const tempList = [...nodeItems];
+      tempList.splice(nodeIndex, 1);
+      return tempList;
+    });
+  };
+
+  return (
+    <div className={`${prefix}__list`}>
+      <div className={`${prefix}__list-title`}>
+        <div className={`${prefix}__list-title-left`}>
+          <QxIcon
+            className={`${prefix}__left-icon`}
+            type={open ? 'icon-down' : 'icon-right'}
+            onClick={() => setOpen(!open)}
+          />
+          {edit ? (
+            <Input
+              defaultValue={name}
+              value={name}
+              autoFocus
+              onChange={(e) => setName(e.target.value)}
+              onBlur={(e) => {
+                const _value = e.target.value;
+                editName(_value);
+              }}
+              onPressEnter={(e: any) => {
+                const _value = e.target.value;
+                editName(_value);
+              }}
+            />
+          ) : (
+            <span
+              className={`${prefix}__left-span`}
+              onClick={() => {
+                if (!isManage) return;
+                setEdit(true);
+              }}
+            >
+              {listItem.name}
+            </span>
+          )}
+        </div>
+        {!listItem.nodes?.length ? (
+          <QxIcon
+            className={`${prefix}__list-title-right`}
+            type={'icon-frame-delete'}
+            onClick={() => deleteGroup()}
+          />
+        ) : null}
+      </div>
+      <ReactSortable
+        className={`${prefix}__list-box`}
+        list={listItem?.nodes || []}
+        setList={(list) => {
+          setNodeList((nodeItems: NodeItemsProps[]) => {
+            const tempList = [...nodeItems];
+            tempList[nodeIndex]['nodes'] = list;
+            return tempList;
+          });
+        }}
+        {...sortableOptionsComponent}
+      >
+        {!open ? null : (
+          <>
+            {listItem?.nodes?.length ? (
+              <>
+                {(listItem?.nodes || []).map((item, index) => {
+                  return (
+                    <NodeItem
+                      key={item.id}
+                      nodeItem={item || []}
+                      isManage={isManage}
+                      setNodeList={setNodeList}
+                      index={index}
+                      parentId={listItem.id}
+                    />
+                  );
+                })}
+              </>
+            ) : (
+              <div className={`${prefix}--empty`}>
+                <img src={empty} alt={'暂无数据'} />
+                <span>暂无数据</span>
+              </div>
+            )}
+          </>
+        )}
+      </ReactSortable>
+    </div>
+  );
+};
+export interface NodeProps {
+  id: string;
+  groupId: string;
+  nodeMode: string;
+  nodeType: string;
+  nodeName: string;
+  configJson: any; // 待规划
+}
+export interface NodeItemsProps {
+  id: string;
+  name: string;
+  nodes?: NodeProps[];
+  disabled: boolean;
+  edit?: boolean;
+}
+interface NodeListProps {
+  listItem: NodeItemsProps;
+  isManage?: boolean;
+  setNodeList?: any;
+  nodeIndex: number;
+  setNodeEdit: (status: boolean) => void;
+}
+
+export default NodeList;

+.qx-flow-node-panel {
+  .ant-drawer-body {
+    padding: 0;
+    overflow: hidden;
+  }
+  &__title {
+    height: 56px;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: @N9;
+    border-bottom: 1px solid @N4;
+    .qx-flow-node-panel__title-left {
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .qx-flow-node-panel__title-right {
+      font-size: 14px;
+      span {
+        cursor: pointer;
+        margin-left: 12px;
+        transition: all 0.3s;
+      }
+    }
+  }
+
+  &--save {
+    color: @B8;
+    &:hover {
+      color: @B7;
+    }
+  }
+
+  &--manage {
+    &:hover {
+      color: @B8;
+    }
+  }
+
+  &__tabs {
+    .ant-tabs-nav {
+      margin: 0 !important;
+      &::before {
+        border: none;
+      }
+      .ant-tabs-nav-list {
+        width: 100%;
+
+        .ant-tabs-tab {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 600;
+          color: @N8;
+          padding: 9px 0;
+          .ant-tabs-tab-btn {
+          }
+        }
+        .ant-tabs-tab-active {
+          position: relative;
+          &::before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            width: 88px;
+            height: 2px;
+            margin-left: -44px;
+            border-radius: 2px;
+            background-color: @B8;
+            transition:
+              width 0.3s,
+              left 0.3s,
+              right 0.3s;
+          }
+        }
+
+        .ant-tabs-ink-bar {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &__content {
+    height: calc(100vh - 56px - 40px);
+    overflow-y: auto;
+    padding: 16px;
+
+    &--manage {
+      height: calc(100vh - 56px - 40px - 44px);
+    }
+  }
+
+  &__list {
+    margin-bottom: 16px;
+    width: 100%;
+
+    .qx-flow-node-panel__list-title {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: @N7;
+      font-size: 14px;
+      width: 100%;
+    }
+
+    .qx-flow-node-panel__list-title-left {
+      display: flex;
+      align-items: center;
+      flex: 1;
+
+      input {
+        flex: 1;
+      }
+      .qx-flow-node-panel__left-icon {
+        margin-right: 4px;
+        width: 14px;
+        height: 14px;
+      }
+
+      .qx-flow-node-panel__left-span {
+        cursor: pointer;
+        font-weight: 600;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 300px;
+      }
+    }
+
+    .qx-flow-node-panel__list-title-right {
+      margin-left: 18px;
+      cursor: pointer;
+    }
+
+    .qx-flow-node-panel__list-box {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      transition: all 0.3s;
+    }
+  }
+  &__item {
+    margin: 8px 8px 0 0;
+    width: 30%;
+    height: 40px;
+    border-radius: 4px;
+    border: 1px solid @N4;
+    background: @N2;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    max-width: 142px;
+    flex: 1;
+    position: relative;
+    cursor: pointer;
+
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+
+    .qx-flow-node-panel__item-icon {
+      width: 28px;
+      height: 28px;
+      border-radius: 14px;
+      background-color: pink;
+      color: #fff;
+      font-size: 16px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .qx-flow-node-panel__item-name {
+      margin-left: 8px;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: @N9;
+      font-size: 14px;
+    }
+  }
+
+  .qx-flow-node-panel__item--close {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    color: #fff;
+    background-color: @E3;
+    top: -8px;
+    right: -8px;
+    font-size: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  &--empty {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-top: 8px;
+    img {
+      width: 190px;
+      height: 126px;
+    }
+    span {
+      margin-top: 4px;
+      line-height: 22px;
+      font-weight: 600;
+      color: @N7;
+    }
+
+    &-max {
+      margin-top: 24px;
+    }
+  }
+
+  .qx-flow-node-panel__loading {
+    width: 100%;
+    margin-top: 100px;
+  }
+
+  &__opt {
+    position: static;
+    padding: 16px 16px 0;
+    height: 44px;
+    background-color: #fff;
+    color: @B8;
+    display: flex;
+    align-items: center;
+
+    &-icon {
+      margin-right: 16px;
+      cursor: pointer;
+      &:hover {
+        color: @B7;
+      }
+      > span {
+        margin-right: 4px;
+      }
+    }
+  }
+}

+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 { getListGroupNode } from '@/services';
+import { QxIcon } from '@/components';
+import { ReactSortable } from 'react-sortablejs';
+import { cloneDeep } from 'lodash-es';
+import { v4 as uuid } from 'uuid';
+import type { INodePanelProps } from '@qx/flow';
+import Empty from './img/empty.png';
+
+import './index.less';
+
+const prefix = 'qx-flow-node-panel';
+
+const panelTabs = [
+  {
+    name: '系统节点',
+    key: 'SYSTEM',
+  },
+  {
+    name: '扩展节点',
+    key: 'EXTEND',
+  },
+  {
+    name: '开发节点',
+    key: 'DEVELOP',
+  },
+];
+
+const NodePanel: React.FC<NodePanelProps> = (props) => {
+  const { visible, onClose } = props;
+  // @ts-ignore
+  const [searchParams] = useSearchParams();
+  const appId = searchParams.get('appId');
+  const { registerNodes } = useContext(BuilderContext);
+  const [loading, setLoading] = useState(false);
+  const [activeKey, setActiveKey] = useState('SYSTEM');
+  const [isManage, setIsManage] = useState<boolean>(false);
+  const [nodeList, setNodeList] = useState<NodeItemsProps[]>([]);
+  const [originalNodeList, setOriginalNodeList] = useState<NodeItemsProps[]>(
+    [],
+  );
+  const [nodeEdit, setNodeEdit] = useState(false);
+  const [nameList, setNameList] = useState<string[]>([]);
+  // console.log('registerNodes', registerNodes, props);
+
+  useEffect(() => {
+    if (!isManage) return;
+    if (!nodeList?.length) {
+      setNameList([]);
+    } else {
+      const _list: string[] = [];
+      nodeList.forEach((el) => {
+        if (el.name.includes('未命名分组（')) {
+          _list.push(el.name);
+        }
+      });
+      setNameList(_list);
+    }
+  }, [JSON.stringify(nodeList), isManage]);
+
+  useEffect(() => {
+    setIsManage(false);
+    setNameList([]);
+    if (!appId || !visible) return;
+    setLoading(true);
+    // TODO
+    getListGroupNode(appId, {
+      type: activeKey,
+    })
+      .then((data: NodeItemsProps[]) => {
+        setLoading(false);
+        if (data?.length) {
+          setOriginalNodeList(cloneDeep(data));
+          setNodeList(data.filter((el) => !el.disabled) || []);
+          return;
+        }
+        setNodeList([]);
+        setOriginalNodeList([]);
+      })
+      .catch(() => {
+        setLoading(false);
+        setNodeList([]);
+        setOriginalNodeList([]);
+      });
+  }, [activeKey, visible]);
+
+  useEffect(() => {
+    if (!visible) {
+      setActiveKey('SYSTEM');
+    }
+  }, [visible]);
+
+  // const detailNodeList = (_isManage: boolean) => {
+  //   return nodeList.filter((el) => _isManage || !el.disabled) || [];
+  // };
+
+  const sortableOptionsPage = {
+    disabled: !isManage || nodeEdit,
+    animation: 150,
+    fallbackOnBody: true,
+    swapThreshold: 0.65,
+    ghostClass: 'qx-node-panel--drag',
+    group: 'page',
+  };
+
+  const onExit = () => {
+    setIsManage(false);
+    setNodeList(cloneDeep(originalNodeList));
+  };
+
+  useEffect(() => {
+    const _data = cloneDeep(originalNodeList);
+    setNodeList(_data.filter((el) => isManage || !el.disabled) || []);
+  }, [isManage]);
+  const generateUniqueName = () => {
+    if (nameList?.length) {
+      let numberList: number[] = [];
+      nameList.forEach((el) => {
+        const a = /未命名分组\（(.*?)\）/gi;
+        const b = el.match(a);
+        const c = el.split(b?.[0] || ''); // 判断前后是否还有字符
+        const _firstStr = b?.[0].replace(a, '$1');
+        if (!isNaN(Number(_firstStr)) && !c[1] && !c[0]) {
+          numberList.push(Number(_firstStr));
+        }
+      });
+      if (numberList.length) {
+        numberList = numberList.sort();
+        const _length = numberList.length;
+        for (let i = 1; i <= numberList[_length - 1]; i++) {
+          if (!numberList.includes(i)) {
+            return `未命名分组（${i}）`;
+          }
+        }
+        return `未命名分组（${_length + 1}）`;
+      }
+      return '未命名分组（1）';
+    }
+    return '未命名分组（1）';
+  };
+
+  // 新增分组
+  const addGroup = () => {
+    setNodeList((list) => {
+      const _list = cloneDeep(list || []);
+      _list.push({
+        id: uuid(),
+        name: generateUniqueName(),
+        disabled: false,
+        nodes: [],
+        edit: true,
+      });
+      return _list;
+    });
+  };
+
+  const saveData = () => {
+    console.log(nodeList, 'llllllnodeList');
+  };
+
+  return (
+    <Drawer
+      visible={visible}
+      onClose={onClose}
+      width={475}
+      className={`${prefix}`}
+      title={null}
+      closable={false}
+    >
+      <div className={`${prefix}__title`}>
+        <div className={`${prefix}__title-left`}>节点类型</div>
+        <div className={`${prefix}__title-right`}>
+          {activeKey !== 'SYSTEM' && !isManage ? (
+            <span
+              className={`${prefix}--manage`}
+              onClick={() => setIsManage(true)}
+            >
+              管理
+            </span>
+          ) : null}
+          {isManage ? (
+            <>
+              <span onClick={() => onExit()}>退出</span>
+              <span className={`${prefix}--save`} onClick={() => saveData()}>
+                保存
+              </span>
+            </>
+          ) : null}
+        </div>
+      </div>
+      <Tabs
+        activeKey={activeKey}
+        className={`${prefix}__tabs`}
+        onChange={(key) => setActiveKey(key)}
+      >
+        {panelTabs.map((item) => {
+          return (
+            <Tabs.TabPane tab={item.name} key={item.key}>
+              {isManage && !loading ? (
+                <div className={`${prefix}__opt`}>
+                  <span
+                    className={`${prefix}__opt-icon`}
+                    onClick={() => addGroup()}
+                  >
+                    <QxIcon
+                      className={`${prefix}__left-icon`}
+                      type={'icon-frame-todolist'}
+                    />
+                    分组
+                  </span>
+                  {activeKey === 'DEVELOP' ? (
+                    <span className={`${prefix}__opt-icon`} onClick={() => {}}>
+                      <QxIcon
+                        className={`${prefix}__left-icon`}
+                        type={'icon-frame-todolist'}
+                      />
+                      开发节点管理
+                    </span>
+                  ) : null}
+                </div>
+              ) : null}
+              <div
+                className={`${prefix}__content ${
+                  isManage ? `${prefix}__content--manage` : ''
+                }`}
+              >
+                {loading ? (
+                  <Spin className={`${prefix}__loading`} />
+                ) : (
+                  <>
+                    {nodeList?.length ? (
+                      <ReactSortable
+                        list={nodeList}
+                        setList={setNodeList}
+                        {...sortableOptionsPage}
+                      >
+                        {nodeList.map((bl, index) => {
+                          return (
+                            <NodeList
+                              key={bl.id}
+                              listItem={bl}
+                              isManage={isManage}
+                              setNodeList={setNodeList}
+                              nodeIndex={index}
+                              setNodeEdit={setNodeEdit}
+                            />
+                          );
+                        })}
+                      </ReactSortable>
+                    ) : (
+                      <div className={`${prefix}--empty ${prefix}--empty-max`}>
+                        <img src={Empty} alt={'暂无数据'} />
+                        <span>暂无数据</span>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </Tabs.TabPane>
+          );
+        })}
+      </Tabs>
+    </Drawer>
+  );
+};
+
+interface NodePanelProps extends INodePanelProps {}
+
+export default memo(NodePanel);

+import { createFromIconfontCN } from '@ant-design/icons';
+// @ts-ignore
+import '@qx/icon-btn/svg/icon-park';
+
+const QxIcon = createFromIconfontCN({
+  scriptUrl: [],
+});
+
+export default QxIcon;

+export * from './useTheme';

+import { useEffect } from 'react';
+import { ConfigProvider } from 'antd';
+import { Outlet } from 'react-router-dom';
+import { defaultTheme, setTheme } from '@qx/ui';
+
+export const useTheme = () => {
+  const userTheme = JSON.parse(
+    window.localStorage.getItem('qx-system-theme') || 'null',
+  );
+
+  const theme = {
+    token: {
+      colorPrimary: userTheme?.themeColor || defaultTheme.themeColor,
+      borderRadius: 4,
+    },
+  };
+
+  const handleGenerateThemeColors = () => {
+    if (!userTheme) {
+      setTheme(defaultTheme.themeColor);
+    }
+  };
+
+  useEffect(() => {
+    handleGenerateThemeColors();
+    ConfigProvider.config({
+      theme,
+    });
+  }, []);
+
+  return (
+    <ConfigProvider theme={theme}>
+      <Outlet />
+    </ConfigProvider>
+  );
+};

+export type FlowVersionStatusProps =
+  | 'DRAFT'
+  | 'DISABLED'
+  | 'PUBLISHED'
+  | 'EDIT'
+  | 'DELETED';
+export type FlowStatusProps =
+  | 'UNPUBLISHED'
+  | 'DISABLED'
+  | 'PUBLISHED'
+  | 'MODIFY'
+  | 'DELETED';
+
+export const FlowVersionStatusEnums = {
+  DRAFT: '未发布',
+  DISABLED: '已停用',
+  PUBLISHED: '已发布',
+  EDIT: '有修改',
+  DELETED: '已删除',
+};
+
+export const FlowStatusEnums = {
+  UNPUBLISHED: '未发布',
+  DISABLED: '已停用',
+  PUBLISHED: '已发布',
+  MODIFY: '有修改',
+  DELETED: '已删除',
+};
+
+export enum NodeTypes {
+  /**
+   * 开始
+   */
+  START = 'DF_START',
+  /**
+   * 结束
+   */
+  END = 'DF_END',
+  /**
+   * 查询单条记录
+   */
+  DQ_MODEL = 'DF_DQ_MODEL',
+  /**
+   * 查询多条记录
+   */
+  DQ_MODEL_MORE = 'DF_DQ_MODEL_MORE',
+  /**
+   * 新增记录
+   */
+  DO_C = 'DF_DO_C',
+  /**
+   * 查询部门
+   */
+  DQ_ORG = 'DF_DQ_ORG',
+  /**
+   * 查询人员
+   */
+  DQ_USER = 'DF_DQ_USER',
+  /**
+   * 填写记录
+   */
+  DO_FILL = 'DF_DO_FILL',
+  /**
+   * 延迟执行
+   */
+  APRV_DLAY = 'DF_APRV_DLAY',
+  /**
+   * 服务调用
+   */
+  WEB_HOOK = 'DF_WEB_HOOK',
+  /**
+   * 脚本节点
+   */
+  CODE = 'DF_CODE',
+  /**
+   * 删除记录
+   */
+  DO_D = 'DF_DO_D',
+  /**
+   * 更新记录
+   */
+  DO_U = 'DF_DO_U',
+  /**
+   * 设置参数
+   */
+  DO_PARAM = 'DF_DO_PARAM',
+  /**
+   * 公式运算
+   */
+  DO_CAL = 'DF_DO_CAL',
+}
+
+export interface ProcessItemProps {
+  name?: string;
+  appId?: string;
+  id?: string;
+  funCode?: string;
+  processJson?: string;
+  remark?: string;
+  funId?: string;
+  latestConfigStatus?: FlowStatusProps;
+  curVersion?: string | number;
+}

 import React, { memo } from 'react';
 import React, { memo } from 'react';
-import './styles.less';
 
 
 const About: React.FC<AboutProps> = (props) => {
 const About: React.FC<AboutProps> = (props) => {
-  return <div className="about">About</div>;
+  return <div>About</div>;
 };
 };
 
 
 interface AboutProps {}
 interface AboutProps {}

-.about {
-  background-color: #ccc;
-}

+import React, { useEffect, useRef, useState, useContext } from 'react';
+import FlowBuilder, { IQxNode, dataConversion, BuilderContext } from '@qx/flow';
+import {
+  Button,
+  Drawer,
+  message,
+  Popconfirm,
+  Popover,
+  Space,
+  Tooltip,
+  Typography,
+  Dropdown,
+  Menu,
+  Modal,
+} from 'antd';
+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 { useTitle } from 'ahooks';
+// 头部相关
+import {
+  FlowHeader,
+  FlowVersion,
+  NameDescriptionSetting,
+  NodesPanel,
+  ConfigDrawer,
+} from '@/components';
+import cls from 'classnames';
+import styles from '@/components/header/index.module.less';
+import { getIcon } from '@/utils';
+import { QxIcon } from '@/components';
+import {
+  getProcessDetailsById,
+  publishProcessById,
+  saveProcessSetting,
+} from '@/services';
+import type { IRegisterNode, INode, IRegisterRemoteNode } from '@qx/flow';
+
+const prefix = 'qx-data-flow';
+
+const { Text } = Typography;
+
+const nameMaxLength = 20; // 数据流名称 最长文字 限制
+
+// TODO: 后续 systemNodes 要删掉，所有节点都是 registerRemoteNode
+const systemNodes: IRegisterNode[] = [
+  {
+    type: NodeTypes.START,
+    name: '开始节点',
+    // displayComponent: Start.DisplayComponent,
+    // configComponent: Start.ConfigComponent,
+    isStart: true,
+  },
+  {
+    type: NodeTypes.END,
+    name: '结束节点',
+    // displayComponent: End.DisplayComponent,
+    // configComponent: End.ConfigComponent,
+    isEnd: true,
+  },
+  // {
+  //   type: 'condition',
+  //   name: '条件节点',
+  //   displayComponent: Condition.DisplayComponent,
+  //   configComponent: Condition.ConfigComponent,
+  // },
+];
+
+export default () => {
+  const [nodes, setNodes] = useState<INode[]>([]);
+  const [remoteNodes, setRemoteNodes] = useState<IRegisterRemoteNode[]>([]);
+  // @ts-ignore
+  const [searchParams] = useSearchParams();
+  const [showEditTitle, setShowEditTitle] = useState(false);
+  const {
+    appId, // 应用id
+    funCode, // 表单id
+    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'),
+  };
+
+  const [processDetails, setProcessDetails] = useState<ProcessItemProps>({
+    id: '',
+    appId: '',
+    name: '',
+    remark: '',
+  }); // 数据流 详细数据
+
+  const [showExtendModal, setShowExtendModal] = useState(false);
+  const [showSimple, setShowSimple] = useState<boolean>(false);
+
+  useTitle(processDetails?.name || '未命名流程'); // 动态变化 文档标题
+
+  const formModalRef = useRef({
+    open: (data?: any) => {},
+  });
+
+  // 获取详情
+  const getDetailsData = (_id: string, _data?: ProcessItemProps) => {
+    getProcessDetailsById(_id)
+      .then((res: any) => {
+        setProcessDetails({
+          ..._data,
+          ...(res || {}),
+        });
+      })
+      .catch((err: { msg?: string }) => {
+        message.warning(err?.msg || '流程详情数据请求失败', 5);
+        setProcessDetails(
+          _data || {
+            id: _id,
+            name: '未命名流程',
+            appId,
+          },
+        );
+      });
+  };
+
+  // 点击事件
+  const handleClick = (
+    type: string,
+    data?: any,
+    e?: React.MouseEvent<HTMLElement, MouseEvent>,
+  ) => {
+    const { host, pathname, protocol, hash } = location;
+    let _params: ProcessItemProps = {}; // 接口调用参数
+
+    if (!!e) {
+      e.stopPropagation();
+    }
+
+    _params = {
+      appId: processDetails?.appId,
+    };
+    if (!!processDetails?.id) {
+      _params.id = processDetails?.id;
+    }
+    if (!!processDetails?.funCode) {
+      _params.funCode = processDetails?.funCode;
+    }
+
+    switch (type) {
+      case 'RETURN':
+        // 返回上一页
+        if (!!returnUrl) {
+          handleWindowOpen(
+            `${protocol}//${host}${pathname}${returnUrl}`,
+            '_self',
+          );
+        } else {
+          window.history.back();
+        }
+        break;
+      case 'SAVE':
+        // TODO 保存草稿 保存节点相关 参数 processJson
+        console.log('SAVE === ', dataConversion(nodes));
+        _params.processJson = JSON.stringify({
+          dataJson: [...dataConversion(nodes)],
+        });
+        saveProcessSetting(_params)
+          .then((res: string) => {
+            console.log('res ===', res);
+            if (!!res) {
+              // setProcessDetails({
+              //   ...processDetails,
+              //   id: processDetails?.id || res,
+              //   name: data.name,
+              //   remark: data.remark,
+              // });
+              // if (!processDetails?.id) {
+              //   history.replace({
+              //     query: {
+              //       ...query,
+              //       processId: res,
+              //     }
+              //   });
+              // }
+            }
+          })
+          .catch((err: { msg?: string }) => {
+            message.warning(err?.msg || '节点配置不完善', 5);
+          });
+        break;
+      case 'DEBUG':
+        // 调试
+        console.log('DEBUG === ');
+        break;
+      case 'RELEASE':
+        // 发布流程
+        // TODO 要先校验是否保存 才能发布
+        publishProcessById(processDetails.id || '')
+          .then((res) => {
+            console.log('res ====', res);
+          })
+          .catch((err: { msg?: string }) => {
+            message.warning(err?.msg || '节点配置不完善', 5);
+          });
+        break;
+      case 'EDIT':
+        // 编辑数据流名称
+        const obj: ProcessItemProps = {
+          id: processDetails.id || '',
+          name: processDetails.name || '',
+          remark: processDetails.remark || '',
+        };
+        formModalRef.current.open(obj);
+        break;
+      case 'VERSION':
+        // 版本管理跳转
+        handleWindowOpen(
+          `${protocol}//${host}${pathname}#/design/data-flow-view/version?processId=${
+            data?.id || ''
+          }&name=${data?.name || ''}&returnUrl=${hash}`,
+          '_self',
+        );
+        break;
+      case 'SAVE_NAME':
+        _params.name = data.name;
+        _params.remark = data?.remark || '';
+        // 保存 名称、说明
+        saveProcessSetting(_params)
+          .then((res: string) => {
+            if (!!res) {
+              setProcessDetails({
+                ...processDetails,
+                id: processDetails?.id || res,
+                name: data.name,
+                remark: data.remark,
+              });
+              if (!processDetails?.id) {
+                history.replace({
+                  query: {
+                    ...query,
+                    processId: res,
+                  },
+                });
+              }
+            }
+          })
+          .catch((err: { msg?: string }) => {
+            message.warning(err?.msg || '当前保存操作失败', 5);
+          });
+        break;
+      case 'SIMPLE':
+        // 精简模式
+        setShowSimple(!showSimple);
+        break;
+      default:
+        break;
+    }
+  };
+
+  // 头部 左侧 自定义
+  const renderLeft = () => {
+    return (
+      <section className={cls(styles[`${prefix}__header__left-custom`])}>
+        <div
+          className={cls(styles[`${prefix}__header__left`])}
+          onClick={() => {
+            handleClick('RETURN');
+          }}
+        >
+          <QxIcon
+            className={cls(styles[`${prefix}__header__left-return`])}
+            type={'icon-common-arrow'}
+          />
+          <Text
+            className={cls(styles[`${prefix}__header__left-title`])}
+            style={{ maxWidth: nameMaxLength * 16 * 1.2 + 'px' }}
+            ellipsis={{ tooltip: processDetails?.name || '' }}
+          >
+            {processDetails?.name || ''}
+          </Text>
+        </div>
+        <div className={cls(styles[`${prefix}__header__left-custom__opt`])}>
+          {!!processDetails?.remark ? (
+            <Tooltip placement="bottom" title={processDetails?.remark}>
+              <Button type="link" icon={<QxIcon type={'icon-frame-help'} />} />
+            </Tooltip>
+          ) : null}
+          {type === 'preview' ? null : (
+            <Tooltip placement="bottom" title={'编辑名称与说明'}>
+              <Button
+                type="link"
+                icon={<QxIcon type={'icon-frame-edit'} />}
+                onClick={() => {
+                  handleClick('EDIT');
+                }}
+              />
+            </Tooltip>
+          )}
+        </div>
+        <Space size={8}>
+          {type === 'preview' ? (
+            <FlowVersion versionText={processDetails?.curVersion || 1} />
+          ) : (
+            <FlowVersion
+              versionText={processDetails?.curVersion || 1}
+              handleClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                handleClick(
+                  'VERSION',
+                  {
+                    id: processDetails?.id,
+                    name: processDetails?.name,
+                  },
+                  e,
+                );
+              }}
+            />
+          )}
+          <FlowVersion
+            status={processDetails?.latestConfigStatus || 'DRAFT'}
+            statusEnums={FlowStatusEnums}
+          />
+        </Space>
+      </section>
+    );
+  };
+
+  const renderRight = () => {
+    return (
+      <Space size={12}>
+        <Button
+          onClick={() => {
+            handleClick && handleClick('SIMPLE');
+          }}
+        >
+          {!showSimple ? '精简模式' : '退出精简'}
+        </Button>
+        <Button
+          disabled={false} // 需要校验 是否禁用
+          onClick={() => {
+            handleClick && handleClick('DEBUG');
+          }}
+        >
+          调试
+        </Button>
+        <Button
+          disabled={false} // 需要校验 是否禁用
+          onClick={() => {
+            handleClick && handleClick('SAVE');
+          }}
+        >
+          保存
+        </Button>
+        <Button
+          disabled={false} // 需要校验 是否禁用
+          type="primary"
+          // loading={false}
+          onClick={() => {
+            handleClick && handleClick('RELEASE');
+          }}
+        >
+          发布流程
+        </Button>
+      </Space>
+    );
+  };
+
+  const handleChange = (nodes: INode[]) => {
+    setNodes(nodes);
+  };
+
+  const handleGetRemoteNodes = () => {
+    setRemoteNodes([
+      {
+        url: 'https://unpkg.com/react-flow-builder-pkg-demo@1.2.0/dist/index.umd.js',
+      },
+    ]);
+  };
+
+  useEffect(() => {
+    // setNodes(dataConversion(defaultNodes as IQxNode[], true));
+    handleGetRemoteNodes();
+  }, []);
+
+  useEffect(() => {
+    console.log('nodes ==== ', nodes);
+  }, [nodes]);
+  useEffect(() => {
+    let _data: ProcessItemProps = {};
+    _data.name = '未命名流程';
+    _data.appId = appId;
+    if (!!funCode) {
+      _data.funCode = funCode;
+    } else {
+      if (!!_data.funCode) delete _data.funCode;
+    }
+    if (!processId) {
+      setProcessDetails(_data);
+    } else {
+      getDetailsData(processId, _data);
+    }
+  }, [appId, funCode, processId]);
+
+  const handleOpenExtendModal = () => {
+    setShowExtendModal(true);
+  };
+
+  const handleCloseExtendModal = () => {
+    setShowExtendModal(false);
+  };
+
+  const getNodeTool = (
+    node: INode,
+    nodes: INode[],
+    defaultTools: INode[],
+    actions: any,
+  ) => {
+    const { copyNodeAndChildren } = actions;
+    switch (node.type) {
+      case 'condition':
+        return [
+          ...defaultTools,
+          {
+            name: '复制分支',
+            icon: '复制分支',
+            onClick: () => copyNodeAndChildren(),
+          },
+        ];
+      default:
+        return [
+          ...defaultTools,
+          {
+            name: '封装节点',
+            icon: '封装节点',
+            onClick: () => handleOpenExtendModal(),
+          },
+        ];
+    }
+  };
+
+  return (
+    <div className={cls(styles[`${prefix}__container`])}>
+      <FlowHeader
+        renderLeft={renderLeft()}
+        handleClick={handleClick}
+        renderRight={type === 'preview' ? null : renderRight()}
+      />
+      <FlowBuilder
+        readonly={type === 'preview'}
+        nodes={nodes}
+        registerNodes={systemNodes}
+        historyTool
+        zoomTool
+        expandAllTool
+        DrawerComponent={Drawer}
+        PopoverComponent={Popover}
+        PopconfirmComponent={Popconfirm}
+        DropdownComponent={Dropdown}
+        MenuComponent={Menu}
+        // CommonDisplay={CommonDisplay}
+        onChange={handleChange}
+        registerRemoteNodes={remoteNodes}
+        ConfigDrawerContainer={ConfigDrawer}
+        NodePanel={NodesPanel}
+        getNodeTool={getNodeTool}
+      />
+      <NameDescriptionSetting cRef={formModalRef} handleClick={handleClick} />
+      <Modal
+        title="扩展节点"
+        visible={showExtendModal}
+        onCancel={handleCloseExtendModal}
+      />
+    </div>
+  );
+};

+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 styles from './index.less';
+import type { IConfigComponent } from '@qx/flow';
+
+const StartConfigComponent = React.forwardRef<any, StartConfigComponentProps>(
+  (props, ref) => {
+    const form = useForm();
+
+    const handleValuesChange = (values: any) => {
+      props?.onChange(values);
+    };
+
+    useImperativeHandle(ref, () => ({
+      validateFields: form.validateFields,
+    }));
+
+    return (
+      <div className={styles['qx-flow-single-records-config']}>
+        <QxFormRender
+          form={form}
+          schema={conditionSetting}
+          widgets={{}}
+          watch={{}}
+          onValuesChange={handleValuesChange}
+        />
+      </div>
+    );
+  },
+);
+
+interface StartConfigComponentProps extends IConfigComponent {
+  onChange: (values: any) => void;
+}
+
+export default memo(StartConfigComponent);

+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 } 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 { 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 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>
+  );
+};
+
+interface EndConfigComponentProps extends IConfigComponent {}
+
+export default memo(EndConfigComponent);

+import React, { memo } from 'react';
+// import { ReactComponent as Icon } from "../../public/icons/outlined.svg";
+import type { IDisplayComponent, INode } from '@qx/flow';
+import './index.less';
+
+const DisplayComponent: React.FC<DisplayComponentProps> = (props) => {
+  const { node, nodes } = props;
+
+  return (
+    <div className="qx-flow-default-node">
+      <div className="qx-flow-default-node__header">
+        <span className="qx-flow-default-node__title">
+          <span className="qx-flow-default-node__title--icon">
+            {/* <Icon /> */}
+          </span>
+          <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>
+    </div>
+  );
+};
+
+interface DisplayComponentProps extends IDisplayComponent {
+  onChange?: (nodes: INode[]) => void;
+}
+
+export default memo(DisplayComponent);

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

+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 type { IConfigComponent } from '@qx/flow';
+import { QxParameterSetting } from '@qx/common';
+import { QxIcon } from '@/components';
+import _ from 'lodash';
+
+import { isolationList, propagationList } from '../../setting-configs/start';
+interface PropagationSettingProps {
+  value: string;
+  onChange: (val: string) => void;
+  optionsList: {
+    value: string;
+    label: string;
+    tips: string;
+  }[];
+}
+const PropagationSetting: React.FC<PropagationSettingProps> = (props) => {
+  const { value, onChange, optionsList } = props;
+
+  return (
+    <Radio.Group
+      onChange={(e: RadioChangeEvent) => {
+        onChange(e.target.value);
+      }}
+      value={value}
+    >
+      <Space direction="vertical">
+        {(optionsList || []).map(
+          (_options: { value: string; label: string; tips: string }) => {
+            return (
+              <Radio value={_options.value}>
+                <span>{_options.label}</span>
+                <Tooltip placement="right" title={_options.tips}>
+                  <QxIcon
+                    className={'qx-data-flow-tooltip-opt'}
+                    type={'icon-frame-help'}
+                  />
+                </Tooltip>
+              </Radio>
+            );
+          },
+        )}
+      </Space>
+    </Radio.Group>
+  );
+};
+
+const StartConfigComponent: React.FC<StartConfigComponentProps> =
+  React.forwardRef((props, ref) => {
+    const [form] = Form.useForm();
+
+    useImperativeHandle(ref, () => ({
+      validateFields: form.validateFields,
+    }));
+
+    const [values, setValues] = useState<{
+      params: any[];
+      enablePropagation: boolean;
+      propagation: string;
+      isolation: string;
+    }>({
+      params: [],
+      enablePropagation: false,
+      propagation: 'REQUIRED',
+      isolation: 'REPEATABLE_READ',
+    });
+
+    useEffect(() => {
+      if (_.isEmpty(props?.node?.data)) {
+        return;
+      }
+      if (_.isEqual(props?.node?.data, values)) {
+        return;
+      }
+      setValues(props?.node?.data);
+    }, [props?.node?.data]);
+
+    const onCheckedChange = (e: CheckboxChangeEvent) => {
+      const _cloneVal = _.cloneDeep(values);
+      setValues({
+        ..._cloneVal,
+        enablePropagation: e.target.checked,
+      });
+    };
+
+    useEffect(() => {
+      if (_.isEqual(props?.node?.data, values)) {
+        return;
+      }
+      props.onChange(values);
+    }, [values]);
+
+    return (
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={{
+          enablePropagation: false,
+          propagation: 'REQUIRED',
+          isolation: 'REPEATABLE_READ',
+        }}
+      >
+        <Form.Item name="params">
+          <h3 className={'qx-flow-form__label-title'}>入参设置</h3>
+          <p className={'qx-flow-form__label-tips'}>
+            参数可以被后面的所有数据流节点使用
+          </p>
+          <QxParameterSetting
+            value={values.params}
+            onChange={(_v: any) => {
+              console.log('参数 === ', _v);
+            }}
+          />
+        </Form.Item>
+        <Form.Item name="enablePropagation">
+          <h3 className={'qx-flow-form__label-title'}>事务控制</h3>
+          <Checkbox
+            checked={values.enablePropagation}
+            onChange={onCheckedChange}
+          >
+            设置事务的传播行为和隔离级别
+          </Checkbox>
+        </Form.Item>
+        <Form.Item
+          hidden={!values.enablePropagation}
+          label="事务传播行为"
+          name="propagation"
+        >
+          <PropagationSetting
+            optionsList={propagationList}
+            value={'REQUIRED'}
+            onChange={(_v: string) => {
+              const _cloneVal = _.cloneDeep(values);
+              setValues({
+                ..._cloneVal,
+                propagation: _v,
+              });
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          hidden={!values.enablePropagation}
+          label="事务隔离级别"
+          name="isolation"
+        >
+          <PropagationSetting
+            optionsList={isolationList}
+            value={'REPEATABLE_READ'}
+            onChange={(_v: string) => {
+              const _cloneVal = _.cloneDeep(values);
+              setValues({
+                ..._cloneVal,
+                isolation: _v,
+              });
+            }}
+          />
+        </Form.Item>
+      </Form>
+    );
+  });
+
+interface StartConfigComponentProps extends IConfigComponent {
+  onChange: (values: any) => void;
+}
+
+export default memo(StartConfigComponent);

+import React, { memo } from 'react';
+// import { ReactComponent as Icon } from '../../public/icons/outlined.svg';
+import type { IDisplayComponent, INode } from '@qx/flow';
+// import './index.less';
+
+const DisplayComponent: React.FC<DisplayComponentProps> = (props) => {
+  const { node, nodes } = props;
+
+  const handleChangeName = (newValue: string) => {
+    node.name = newValue;
+    props.onChange?.([...nodes]);
+  };
+
+  return (
+    <div className="qx-flow-default-node">
+      <div className="qx-flow-default-node__header">
+        <span className="qx-flow-default-node__title">
+          <span className="qx-flow-default-node__title--icon">
+            {/* <Icon /> */}
+          </span>
+          <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>
+    </div>
+  );
+};
+
+interface DisplayComponentProps extends IDisplayComponent {
+  onChange?: (nodes: INode[]) => void;
+}
+
+export default memo(DisplayComponent);

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

 import React, { memo } from 'react';
 import React, { memo } from 'react';
-import { Outlet } from 'react-router-dom';
+import { useTheme } from '@/hooks';
+import '@/utils/actions';
+import '@/styles/normalize.less';
 
 
 const Root: React.FC = (props) => {
 const Root: React.FC = (props) => {
-  return (
-    <div>
-      <Outlet />
-    </div>
-  );
+  const ThemeConfigProvider = useTheme();
+  return <>{ThemeConfigProvider}</>;
 };
 };
 
 
 export default memo(Root);
 export default memo(Root);

+.qx-flow-quote-container {
+  .ant-modal {
+    .ant-modal-body {
+      padding-top: 16px;
+      padding-bottom: 16px;
+
+      .qx-flow-quote__header {
+        font-size: 16px;
+        line-height: 32px;
+        padding-bottom: 12px;
+        color: @N8;
+      }
+    }
+  }
+}

+import React, {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+import { Button, Modal, Space, Table, Typography } from 'antd';
+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 { useDebounceEffect } from 'ahooks';
+
+const { Text } = Typography;
+
+import '@/styles/modal-reset.less';
+import cls from 'classnames';
+import commonStyles from '@/page/view/index.module.less';
+import './index.less';
+
+const prefix = 'qx-flow-setting';
+
+interface FlowQuoteSettingProps {
+  cRef: any;
+}
+
+interface ParamsDataProps {
+  id?: string;
+  name?: string;
+  pageSize?: number;
+  pageNum?: number;
+}
+
+const FlowQuoteSetting: React.FC<FlowQuoteSettingProps> = (props) => {
+  const { cRef } = props;
+  const [visible, setVisible] = useState(false);
+  const [paramsData, setParamsData] = useState<ParamsDataProps>({
+    id: '',
+    name: '',
+    pageSize: 10,
+    pageNum: 1,
+  });
+  const [pageData, setPageData] = useState<any[]>([]);
+  // 表格是否添加scroll 属性
+  const [isScrollY, setIsScrollY] = useState<boolean>(false);
+  const [tableLoading, setTableLoading] = useState<boolean>(true); // 表格loading
+
+  useImperativeHandle(cRef, () => ({
+    // 暴露给父组件
+    open: (values: ParamsDataProps) => {
+      if (isEmpty(values)) {
+        return;
+      }
+      // 打开弹框 传参
+      setParamsData({
+        id: values?.id || '',
+        name: values?.name || '',
+      });
+      setVisible(true);
+    },
+  }));
+
+  // list 操作
+  const handleClick = (
+    type: string,
+    data?: any,
+    e?: React.MouseEvent<HTMLElement, MouseEvent>,
+  ) => {
+    const { host, pathname, protocol, hash } = location;
+    if (!!e) {
+      e.stopPropagation();
+    }
+    console.log('type ==== ', type, data);
+
+    switch (type) {
+      case 'JUMP':
+        // 功能名称 跳转 详情
+        // handleWindowOpen(
+        //   `${protocol}//${host}${pathname}#/design/data-flow?appId=${data?.appId || ''}&funCode=${
+        //     data?.funCode || ''
+        //   }&funId=${data?.funId || ''}&type=edit&processId=${data.id}&returnUrl=${hash}`,
+        //   '_self',
+        // );
+        break;
+      default:
+        break;
+    }
+  };
+
+  const cols = useMemo(() => {
+    return [
+      {
+        title: () => {
+          return (
+            <span className={cls(commonStyles[`${prefix}__col-title`])}>
+              应用名称
+            </span>
+          );
+        },
+        dataIndex: 'name',
+        width: 230,
+        className: 'qx-flow-table-cell',
+        render: (text: any, row: any) => {
+          return (
+            <span
+              className={cls(commonStyles[`${prefix}__colspan`])}
+              style={{ width: '100%' }}
+            >
+              <Text
+                style={{
+                  marginRight: 4,
+                  maxWidth: '100%',
+                }}
+                ellipsis={{ tooltip: text || '' }}
+              >
+                {text}
+              </Text>
+            </span>
+          );
+        },
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(commonStyles[`${prefix}__col-title`])}>
+              表单名称
+            </span>
+          );
+        },
+        dataIndex: 'curVersion',
+        render: (text: any, row: any) => {
+          return (
+            <span
+              className={cls(commonStyles[`${prefix}__colspan`])}
+              style={{ width: '100%' }}
+            >
+              <Text
+                style={{
+                  marginRight: 4,
+                  maxWidth: '100%',
+                }}
+                ellipsis={{ tooltip: text || '' }}
+              >
+                {text}
+              </Text>
+            </span>
+          );
+        },
+        width: 160,
+        className: 'qx-flow-table-cell',
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(commonStyles[`${prefix}__col-title`])}>
+              使用功能
+            </span>
+          );
+        },
+        dataIndex: 'latestConfigStatus',
+        className: 'qx-flow-table-cell',
+        render: (text: any, row: any) => {
+          return (
+            <span
+              className={cls(commonStyles[`${prefix}__colspan`])}
+              style={{ width: '100%' }}
+            >
+              <Text
+                style={{
+                  marginRight: 4,
+                  maxWidth: '100%',
+                }}
+                ellipsis={{ tooltip: text || '' }}
+              >
+                {text}
+              </Text>
+            </span>
+          );
+        },
+        width: 120,
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(commonStyles[`${prefix}__col-title`])}>
+              功能名称
+            </span>
+          );
+        },
+        dataIndex: 'updatedAt',
+        width: 140,
+        className: 'qx-flow-table-cell',
+        render: (text: any, row: any) => {
+          // console.log('流程使用情况 === 1', text);
+          // console.log('流程使用情况 === 2', row);
+
+          return (
+            <span
+              className={cls(commonStyles[`${prefix}__colspan`])}
+              style={{ width: '100%' }}
+            >
+              <Button
+                type="link"
+                size="small"
+                icon={getIcon('icon-field-rel')}
+                onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) =>
+                  handleClick('FLOW_QUOTE', row, e)
+                }
+              >
+                等待提供字段
+              </Button>
+            </span>
+          );
+        },
+      },
+    ];
+  }, [JSON.stringify(paramsData), JSON.stringify(pageData)]);
+
+  // 查询list
+  const handleSearch = (params?: ParamsDataProps) => {
+    setTableLoading(true);
+    let _cloneParams: ParamsDataProps = {};
+    if (isEmpty(params)) {
+      _cloneParams = { ...paramsData };
+    } else {
+      _cloneParams = { ...paramsData, ...params };
+    }
+    setParamsData(_cloneParams);
+    // @ts-ignore
+    // window.qx.actions.cancelToken(); // 多次请求 取最新请求 其他取消
+    /*getListProcess(_cloneParams)
+    .then((res: any) => {
+      // 处理数据 符合表格渲染格式
+      const _cloneList: any[] = [];
+      const getColumnList = (data: any[]) => {
+        data.forEach((item: any) => {
+          _cloneList.push(_.cloneDeep(item));
+          if (!!item?.processes?.length) {
+            getColumnList(item?.processes);
+          }
+        });
+      };
+      getColumnList(_.cloneDeep(res || []));
+      setPageData(_.cloneDeep(_cloneList));
+      // setExpandedKeys(_cloneList.map((item: any) => item.key));
+      setTableLoading(false);
+    })
+    .catch(() => {
+      console.warn('数据列表获取失败');
+      setPageData([]);
+      setTableLoading(false);
+    });*/
+  };
+
+  // 表格滚动高度获取
+  const [scrollY] = useFlowTableScrollY({
+    columns: cols,
+    listProps: {
+      paramsData,
+      pageData,
+    },
+    hasPagination: true,
+  }) as any[];
+
+  useEffect(() => {
+    if (!paramsData?.id) {
+      return;
+    }
+    setPageData([]);
+    setTableLoading(false);
+
+    // handleSearch({id: paramsData?.id});
+  }, [paramsData]);
+
+  useDebounceEffect(
+    () => {
+      if (scrollY >= 100 && !!pageData?.length) {
+        const itemHeaderHeight = 41;
+        setIsScrollY(pageData.length * itemHeaderHeight >= scrollY);
+      }
+    },
+    [pageData, scrollY],
+    { wait: 200 },
+  );
+
+  return (
+    <div>
+      <Modal
+        width={720}
+        centered
+        title="流程使用情况"
+        onCancel={() => setVisible(false)}
+        visible={visible}
+        footer={null}
+        closeIcon={
+          <QxIcon
+            className={'qx-data-flow__modal__close'}
+            type={'icon-close'}
+          />
+        }
+        destroyOnClose
+        wrapClassName={'qx-data-flow__modal qx-flow-quote-container'}
+      >
+        <section className={'qx-flow-quote__header'}>
+          【{paramsData?.name || ''}】正在使用中
+        </section>
+        <div
+          className={cls(
+            commonStyles[`${prefix}-container`],
+            'qx-data-flow-table',
+          )}
+        >
+          <Table
+            loading={tableLoading}
+            columns={cols}
+            dataSource={pageData}
+            scroll={
+              isScrollY
+                ? {
+                    x: '100%',
+                    y: scrollY,
+                  }
+                : { x: '100%' }
+            }
+            size={'small'}
+            bordered
+            rowKey={(record: any) => {
+              return `${record?.type || ''}${record?.id || ''}${Math.random()
+                .toString(36)
+                .replaceAll(/[0-9]/g, '')
+                .slice(2, 4)}`;
+            }}
+          />
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default FlowQuoteSetting;

+.qx-flow-setting {
+  &__top {
+    height: 32px;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__top-tip {
+    height: 32px;
+    line-height: 32px;
+    color: @N8;
+  }
+
+  &__top-tip__opt {
+    display: inline-block;
+    position: relative;
+    padding-left: 20px;
+    margin-left: 8px;
+    color: @N8;
+    height: 32px;
+    line-height: 32px;
+    cursor: pointer;
+
+    :global {
+      .qx-data-flow__icon {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        margin-top: -8px;
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        color: @N6;
+      }
+    }
+
+    &:hover {
+      color: @N9;
+
+      :global {
+        .qx-data-flow__icon {
+          color: @N8;
+        }
+      }
+    }
+  }
+
+  &__top-search {
+  }
+
+  &__top-search__input {
+    :global {
+      .qx-data-flow__icon {
+        color: @N6;
+      }
+    }
+  }
+}

+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Button,
+  Input,
+  message,
+  Modal,
+  Space,
+  Table,
+  Tooltip,
+  Typography,
+  Avatar,
+} from 'antd';
+import { useDebounceEffect, useDebounceFn } from 'ahooks';
+// TODO: 去掉 view-render
+// import { QxIconAppImg } from '@qx/view-render';
+import { isEmpty, cloneDeep } from 'lodash-es';
+
+import { FlowSettingProps } from '@/page/view/constant';
+import { getIcon, useFlowTableScrollY } from '@/utils';
+import actions from '@/utils/actions';
+
+import { copyProcessById, deleteProcessById, getListProcess } from '@/services';
+import { handleWindowOpen } from '@qx/utils';
+import { FlowVersion } from '@/components';
+import FlowQuoteSetting from '../flow-quote-setting';
+import cls from 'classnames';
+import styles from './index.module.less';
+import commonStyles from '../../index.module.less';
+import { FlowStatusEnums } from '@/interface';
+const prefix = 'qx-flow-setting';
+const { Text } = Typography;
+
+interface ListParamsProps {
+  appId?: string; // 所属应用 必需
+  funId?: string; // 表单 funId
+  funCode?: string; // 表单 funCode
+  name?: string; //流程名称 模糊查询
+}
+
+// 表格 可收起 使用该方法
+const getColumnListExpand = (data: any[]) => {
+  const _cloneData: any[] = [];
+  data.forEach((item: any) => {
+    if (!!item?.processes?.length) {
+      _cloneData.push({
+        key: item?.id || new Date().getTime().toString(),
+        children: getColumnListExpand(item?.processes),
+        ...item,
+      });
+    } else {
+      _cloneData.push({
+        key: item?.id || new Date().getTime().toString(),
+        ...item,
+      });
+    }
+  });
+  return _cloneData;
+};
+
+const FlowSetting: React.FC<FlowSettingProps> = (props) => {
+  const { params, type } = props;
+  const [queryParams, setQueryParams] = useState<ListParamsProps>({
+    appId: '',
+  });
+
+  const [pageData, setPageData] = useState<any[]>([]);
+  // 表格是否添加scroll 属性
+  const [isScrollY, setIsScrollY] = useState<boolean>(false);
+  const [expandedKeys, setExpandedKeys] = useState<readonly React.Key[]>([]); // 表格 多级展开
+  const [tableLoading, setTableLoading] = useState<boolean>(true); // 表格loading
+  const [keyword, setKeyword] = useState(''); // 搜索框字段
+  // 流程引用弹框
+  const quoteModalRef = useRef({
+    open: (data?: any) => {},
+  });
+
+  // list 操作
+  const handleClick = (
+    type: string,
+    data?: any,
+    e?: React.MouseEvent<HTMLElement, MouseEvent>,
+  ) => {
+    const { host, pathname, protocol, hash } = location;
+    if (!!e) {
+      e.stopPropagation();
+    }
+    console.log('type ==== ', type, data);
+
+    switch (type) {
+      case 'EDIT':
+        // 编辑数据流 跳转
+        handleWindowOpen(
+          `${protocol}//${host}${pathname}#/design/data-flow?appId=${
+            params?.appId || ''
+          }&funCode=${params?.funCode || ''}&funId=${
+            data?.funId || ''
+          }&type=edit&processId=${data.id}&returnUrl=${hash}`,
+          '_self',
+        );
+        break;
+      case 'FLOW_QUOTE':
+        // 流程使用 弹框打开
+        quoteModalRef.current.open(data || {});
+        break;
+      case 'VERSION':
+        // 版本管理跳转
+        handleWindowOpen(
+          `${protocol}//${host}${pathname}#/design/data-flow-view/version?processId=${
+            data?.id || ''
+          }&name=${data?.name || ''}&returnUrl=${hash}`,
+          '_self',
+        );
+        break;
+      case 'DELETE':
+        // 删除
+        if (!!data?.id) {
+          Modal.confirm({
+            title: '删除',
+            content: `确定删除【${data?.name || ''}】？`,
+            cancelText: '取消',
+            okText: '确定',
+            onOk: () => {
+              deleteProcessById(data?.id)
+                .then(() => {
+                  message.success('删除成功');
+                  handleSearch();
+                })
+                .catch((err: any) => {
+                  console.log('err ====', err);
+                  message.success('删除失败');
+                });
+            },
+          });
+        }
+        break;
+      case 'COPY':
+        // 复制
+        if (!!data?.id) {
+          Modal.confirm({
+            title: '复制',
+            content: `确定复制【${data?.name || ''}】的所有节点与配置？`,
+            cancelText: '取消',
+            okText: '确定',
+            onOk: () => {
+              copyProcessById(data?.id)
+                .then(() => {
+                  message.success('复制成功');
+                  handleSearch();
+                })
+                .catch((err: any) => {
+                  console.log('err ====', err);
+                  message.success('复制失败');
+                });
+            },
+          });
+        }
+        break;
+      default:
+        break;
+    }
+  };
+
+  const cols = useMemo(() => {
+    return [
+      {
+        title: () => {
+          return (
+            <span className={cls(commonStyles[`${prefix}__col-title`])}>
+              流程名称
+            </span>
+          );
+        },
+        dataIndex: 'name',
+        width: 230,
+        className: 'qx-flow-table-cell',
+        render: (text: any, row: any) => {
+          let _maxWidth: string = '';
+          let _classNameStr: string = '';
+          if (['APP', 'FUN'].includes(row?.type || '')) {
+            _maxWidth = 'calc(100% - 24px)';
+            _classNameStr = ' ';
+          } else {
+            _classNameStr = `${prefix}__colspan-flow`;
+            if (!!row?.remark) {
+              _maxWidth = 'calc(100% - 20px)';
+            } else {
+              _maxWidth = '100%';
+            }
+          }
+
+          return (
+            <span
+              className={cls(
+                commonStyles[`${prefix}__colspan`],
+                commonStyles[_classNameStr],
+              )}
+              style={{ width: '100%' }}
+            >
+              {['APP', 'FUN'].includes(row?.type || '') ? (
+                <span className={cls(commonStyles[`${prefix}__colspan-icon`])}>
+                  {/* <QxIconAppImg
+                    item={{
+                      icon: row?.icon || '',
+                      iconColor: row?.iconColor || '',
+                    }}
+                  /> */}
+                </span>
+              ) : null}
+              <Text
+                style={{
+                  marginRight: 4,
+                  maxWidth: _maxWidth,
+                }}
+                ellipsis={{ tooltip: text || '' }}
+              >
+                {text}
+              </Text>
+              {row?.remark ? (
+                <Tooltip placement="top" title={row?.remark}>
+                  <span>{getIcon('icon-frame-help')}</span>
+                </Tooltip>
+              ) : null}
+            </span>
+          );
+        },
+        onCell: (record: any) => {
+          return {
+            colSpan: ['APP', 'FUN'].includes(record?.type || '') ? 7 : 1,
+          };
+        },
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(commonStyles[`${prefix}__col-title`])}>
+              当前版本
+            </span>
+          );
+        },
+        dataIndex: 'curVersion',
+        render: (text: any, row: any) => {
+          return (
+            <span
+              className={cls(commonStyles[`${prefix}__colspan`])}
+              style={{ width: '100%' }}
+            >
+              <FlowVersion
+                versionText={text}
+                handleClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                  handleClick('VERSION', row, e);
+                }}
+              />
+            </span>
+          );
+        },
+        width: 160,
+        className: 'qx-flow-table-cell',
+        onCell: (record: any) => {
+          return {
+            colSpan: ['APP', 'FUN'].includes(record?.type || '') ? 0 : 1,
+          };
+        },
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(commonStyles[`${prefix}__col-title`])}>
+              状态
+            </span>
+          );
+        },
+        dataIndex: 'latestConfigStatus',
+        className: 'qx-flow-table-cell',
+        render: (text: any) => {
+          return (
+            <span
+              className={cls(commonStyles[`${prefix}__colspan`])}
+              style={{ width: '100%' }}
+            >
+              <FlowVersion status={text} statusEnums={FlowStatusEnums} />
+            </span>
+          );
+        },
+        width: 120,
+        onCell: (record: any) => {
+          return {
+            colSpan: ['APP', 'FUN'].includes(record?.type || '') ? 0 : 1,
+          };
+        },
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(commonStyles[`${prefix}__col-title`])}>
+              流程使用情况
+            </span>
+          );
+        },
+        dataIndex: 'updatedAt',
+        width: 140,
+        className: 'qx-flow-table-cell',
+        render: (text: any, row: any) => {
+          // console.log('流程使用情况 === 1', text);
+          // console.log('流程使用情况 === 2', row);
+
+          return (
+            <span
+              className={cls(commonStyles[`${prefix}__colspan`])}
+              style={{ width: '100%' }}
+            >
+              <Button
+                type="link"
+                size="small"
+                icon={getIcon('icon-field-rel')}
+                onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) =>
+                  handleClick('FLOW_QUOTE', row, e)
+                }
+              >
+                等待提供字段
+              </Button>
+            </span>
+          );
+        },
+        onCell: (record: any) => {
+          return {
+            colSpan: ['APP', 'FUN'].includes(record?.type || '') ? 0 : 1,
+          };
+        },
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(commonStyles[`${prefix}__col-title`])}>
+              更新时间
+            </span>
+          );
+        },
+        dataIndex: 'updatedAt',
+        width: 200,
+        className: 'qx-flow-table-cell',
+        render: (text: any) => {
+          return (
+            <span
+              className={cls(commonStyles[`${prefix}__colspan`])}
+              style={{ width: '100%' }}
+            >
+              {text}
+            </span>
+          );
+        },
+        onCell: (record: any) => {
+          return {
+            colSpan: ['APP', 'FUN'].includes(record?.type || '') ? 0 : 1,
+          };
+        },
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(commonStyles[`${prefix}__col-title`])}>
+              创建人
+            </span>
+          );
+        },
+        dataIndex: 'createdByUser',
+        className: 'qx-flow-table-cell qx-flow-table-cell-user',
+        render: (text: any, row: any) => {
+          if (isEmpty(text)) {
+            return '--';
+          }
+          let _imgError = false;
+          return (
+            <span
+              className={cls(commonStyles[`${prefix}__colspan-user`])}
+              style={{ width: '100%' }}
+            >
+              <Avatar
+                className={'qx-flow-table-cell__avatar'}
+                size={24}
+                alt="avatar"
+                src={row?.createdByUser?.faceUrl || ''}
+                onError={() => {
+                  _imgError = true;
+                  return true;
+                }}
+              >
+                {(!!row?.createdByUser?.faceUrl && _imgError) ||
+                !row?.createdByUser?.faceUrl
+                  ? !!row?.createdByUser?.name?.length
+                    ? row?.createdByUser?.name[
+                        row?.createdByUser?.name?.length - 1
+                      ]
+                    : null
+                  : null}
+              </Avatar>
+              <Text
+                className={'qx-flow-table-cell__avatar-name'}
+                ellipsis={{ tooltip: row?.createdByUser?.name || '' }}
+              >
+                {row?.createdByUser?.name || ''}
+              </Text>
+            </span>
+          );
+        },
+        width: 200,
+        onCell: (record: any) => {
+          return {
+            colSpan: ['APP', 'FUN'].includes(record?.type || '') ? 0 : 1,
+          };
+        },
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(commonStyles[`${prefix}__col-title`])}>
+              操作
+            </span>
+          );
+        },
+        dataIndex: 'control',
+        render: (text: any, row: any) => (
+          <Space
+            size={8}
+            className={cls(commonStyles[`${prefix}__colspan`])}
+            style={{ width: '100%' }}
+          >
+            <Button
+              type="link"
+              size="small"
+              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                e.stopPropagation();
+                handleClick('EDIT', row);
+              }}
+            >
+              编辑
+            </Button>
+            <Button
+              type="link"
+              size="small"
+              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) =>
+                handleClick('COPY', row, e)
+              }
+            >
+              复制
+            </Button>
+            {/* TODO 字段待确定 有流程引用 不能删除*/}
+            <Button
+              type="link"
+              size="small"
+              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) =>
+                handleClick('DELETE', row, e)
+              }
+            >
+              删除
+            </Button>
+          </Space>
+        ),
+        width: 140,
+        className: 'qx-flow-table-cell',
+        onCell: (record: any) => {
+          return {
+            colSpan: ['APP', 'FUN'].includes(record?.type || '') ? 0 : 1,
+          };
+        },
+      },
+    ];
+  }, [JSON.stringify(queryParams), JSON.stringify(pageData)]);
+
+  // 查询list
+  const handleSearch = (params?: ListParamsProps) => {
+    setTableLoading(true);
+    let _cloneParams: ListParamsProps = {};
+    if (isEmpty(params)) {
+      _cloneParams = { ...queryParams };
+    } else {
+      _cloneParams = { ...queryParams, ...params };
+    }
+    setQueryParams(_cloneParams);
+
+    actions.cancelToken(); // 多次请求 取最新请求 其他取消
+
+    getListProcess(_cloneParams)
+      .then((res: any) => {
+        // 处理数据 符合表格渲染格式
+        const _cloneList: any[] = [];
+        const getColumnList = (data: any[]) => {
+          data.forEach((item: any) => {
+            _cloneList.push(cloneDeep(item));
+            if (!!item?.processes?.length) {
+              getColumnList(item?.processes);
+            }
+          });
+        };
+        getColumnList(cloneDeep(res || []));
+        setPageData(cloneDeep(_cloneList));
+        // setExpandedKeys(_cloneList.map((item: any) => item.key));
+        setTableLoading(false);
+      })
+      .catch(() => {
+        console.warn('数据列表获取失败');
+        setPageData([]);
+        setTableLoading(false);
+      });
+  };
+
+  // 表格滚动高度获取
+  const [scrollY] = useFlowTableScrollY({
+    columns: cols,
+    listProps: {
+      queryParams,
+      pageData,
+    },
+  }) as any[];
+
+  // 搜索框查询
+  const { run: changeSearch } = useDebounceFn(
+    (keyword) => {
+      handleSearch({ name: keyword });
+    },
+    {
+      wait: 300,
+    },
+  );
+
+  useEffect(() => {
+    if (!params?.appId) {
+      return;
+    }
+    if (!!params?.appId) {
+      if (!!params?.funCode) {
+        handleSearch({ appId: params?.appId, funCode: params?.funCode });
+      } else {
+        handleSearch({ appId: params?.appId });
+      }
+    }
+  }, [params]);
+
+  useDebounceEffect(
+    () => {
+      if (scrollY >= 100 && !!pageData?.length) {
+        const itemHeaderHeight = 41;
+        setIsScrollY(pageData.length * itemHeaderHeight >= scrollY);
+      }
+    },
+    [pageData, scrollY],
+    { wait: 200 },
+  );
+
+  return (
+    <>
+      <header className={cls(styles[`${prefix}__top`])}>
+        <section className={cls(styles[`${prefix}__top-tip`])}>
+          <span>
+            数据流是一个强大的数据处理编排器，接受约定的参数传入，流程执行后输出结果参数。
+          </span>
+          <span
+            className={cls(styles[`${prefix}__top-tip__opt`])}
+            onClick={() => {
+              // 点击跳转
+            }}
+          >
+            {getIcon('icon-frame-help')}帮助
+          </span>
+        </section>
+        <section className={cls(styles[`${prefix}__top-search`])}>
+          {type === 'form' ? (
+            <Button
+              type="primary"
+              // loading={false}
+              onClick={() => {
+                const { host, pathname, protocol, hash } = location;
+                handleWindowOpen(
+                  `${protocol}//${host}${pathname}#/design/data-flow?appId=${
+                    params?.appId || ''
+                  }&type=edit&funCode=${
+                    params?.funCode || ''
+                  }&returnUrl=${hash}`,
+                  '_self',
+                );
+              }}
+            >
+              新建数据流
+            </Button>
+          ) : (
+            <Input
+              className={cls(styles[`${prefix}__top-search__input`])}
+              placeholder={'流程名称搜索'}
+              value={keyword}
+              allowClear
+              prefix={getIcon('icon-search')}
+              onChange={(e) => {
+                let _v = e.target.value;
+                if (_v) {
+                  _v = _v.trim();
+                }
+                setKeyword(_v);
+                changeSearch(_v);
+              }}
+            />
+          )}
+        </section>
+      </header>
+
+      <div
+        className={cls(
+          commonStyles[`${prefix}-container`],
+          'qx-data-flow-table',
+        )}
+      >
+        <Table
+          loading={tableLoading}
+          columns={cols}
+          dataSource={pageData}
+          scroll={
+            isScrollY
+              ? {
+                  x: '100%',
+                  y: scrollY,
+                }
+              : { x: '100%' }
+          }
+          pagination={false}
+          size={'small'}
+          bordered
+          expandable={{
+            indentSize: 0,
+            // defaultExpandAllRows: true,
+            // expandedRowKeys: expandedKeys,
+            // onExpandedRowsChange: (expandedRows: readonly React.Key[]) => {
+            //   setExpandedKeys(expandedRows);
+            // },
+          }}
+          rowKey={(record: any) => {
+            return `${record?.type || ''}${record?.id || ''}${Math.random()
+              .toString(36)
+              .replaceAll(/[0-9]/g, '')
+              .slice(2, 4)}`;
+          }}
+        />
+      </div>
+      <FlowQuoteSetting cRef={quoteModalRef} />
+    </>
+  );
+};
+
+export default FlowSetting;

+interface ParamsProps {
+  name?: string;
+  funCode?: string;
+  appId: string;
+  type?: string;
+}
+
+export interface FlowSettingProps {
+  params: ParamsProps;
+  type?: 'form';
+}

+.qx-data-flow {
+  width: 100%;
+  height: 100%;
+  background-color: @body-bg;
+}
+
+.qx-data-flow__img.ant-image,
+.qx-data-flow__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 100%;
+  font-size: 16px;
+  line-height: 1;
+  color: inherit;
+}
+
+.qx-data-flow__main {
+  display: flex;
+  padding: 16px;
+  width: 100%;
+  height: calc(100% - 57px);
+
+  /*.main-aside {
+    width: 240px;
+    border-radius: 8px;
+    background-color: #fff;
+  }
+
+  .main-aside-menus {
+    padding-top: 12px;
+    height: 100%;
+    border-radius: 8px;
+
+    // 菜单覆盖
+    :global {
+      .ant-menu-item {
+        width: calc(100% - 24px);
+        margin: 0 6px 0 12px;
+        padding-top: 0;
+        padding-bottom: 0;
+        border-radius: 4px;
+
+        &:hover {
+          color: @N8;
+          background-color: @N3;
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 4px;
+        }
+
+        &.ant-menu-item-selected {
+          color: @B8;
+          background-color: @B3;
+
+          a {
+            color: @B8;
+          }
+
+          &:hover {
+            color: @B8;
+            background-color: @B3;
+          }
+        }
+      }
+    }
+  }*/
+
+  .main-content {
+    flex: 1;
+    width: 100%;
+    //width: calc(100% - 240px - 16px);
+    height: 100%;
+    padding: 16px;
+    min-height: 0;
+    //margin-left: 16px;
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+}
+
+.qx-flow-setting {
+  &-container {
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    height: calc(100% - 48px);
+
+    :global {
+      // 创建人 单元格 样式迭代
+      td.ant-table-cell.qx-flow-table-cell {
+        height: 40px;
+        line-height: initial !important;
+
+        &.qx-flow-table-cell-user {
+          padding: 0 8px !important;
+          height: 100% !important;
+        }
+
+        .anticon.qx-data-flow__icon {
+          font-size: 16px;
+          color: @N7;
+
+          &:hover {
+            color: @N9;
+          }
+        }
+
+        .ant-btn.ant-btn-link.ant-btn-sm {
+          flex: 1;
+          display: inline-flex;
+          align-items: center;
+          justify-content: flex-start;
+          height: 24px !important;
+          padding: 0 !important;
+          color: @B8;
+
+          span {
+            height: 100%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: flex-start;
+          }
+
+          &:hover {
+            color: @B7;
+
+            .anticon.qx-data-flow__icon {
+              color: @B7;
+            }
+          }
+
+          .anticon.qx-data-flow__icon {
+            color: @B8;
+
+            &:hover {
+              color: @B7;
+            }
+          }
+        }
+      }
+
+      // 覆盖单元格 hover样式变化
+      td.qx-flow-table-cell.ant-table-cell-row-hover {
+        //cursor: pointer;
+
+        .qx-flow-version__default,
+        .qx-flow-version__default-operational {
+          background-color: @N4 !important;
+          border-color: @N4 !important;
+        }
+
+        .qx-flow-version__default-operational:hover {
+          border-color: @B8 !important;
+        }
+
+        .qx-flow-table-cell__avatar-name.ant-typography {
+          background-color: @N4 !important;
+        }
+      }
+    }
+  }
+
+  &__col-title,
+  &__colspan,
+  &__colspan-user {
+    height: 100%;
+    padding: 0 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  &__colspan {
+    :global {
+      .ant-typography {
+        color: @N8;
+      }
+    }
+  }
+
+  &__colspan-flow {
+    :global {
+      .ant-typography {
+        color: @N9;
+      }
+    }
+  }
+
+  &__colspan-icon {
+    width: 20px;
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 4px;
+
+    :global {
+      .qx-icon-aggregate-img,
+      .anticon.qx-icon-aggregate {
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        font-size: 14px;
+        overflow: hidden;
+        line-height: 1;
+      }
+    }
+  }
+
+  &__colspan-user {
+    display: inline-block;
+    width: 100%;
+    max-width: 100%;
+    min-width: 100%;
+    position: relative;
+
+    :global {
+      //覆盖头像样式
+      .qx-flow-table-cell__avatar.ant-avatar {
+        position: absolute;
+        font-size: 12px !important;
+        top: 50%;
+        margin-top: -12px;
+        left: 8px;
+        background-color: @B8;
+      }
+
+      .qx-flow-table-cell__avatar-name.ant-typography {
+        padding-left: 28px;
+        padding-right: 8px;
+        max-width: 144px;
+        height: 100%;
+        line-height: 24px;
+        font-size: 12px;
+        color: @N9;
+        background-color: @N3;
+        border-radius: 100px;
+      }
+    }
+  }
+}

+import React from 'react';
+// import { history } from '@@/core/history';
+import { useSearchParams } from 'react-router-dom';
+import { useTitle } from 'ahooks';
+// @ts-ignore;
+import { handleWindowOpen } from '@qx/utils';
+import { FlowHeader, QxIcon } from '@/components';
+import FlowSetting from '../components/flow-setting';
+
+// 样式
+import cls from 'classnames';
+import styles from '@/page/view/index.module.less';
+const prefix = 'qx-data-flow';
+
+const DataFlowView: React.FC = ({}) => {
+  const [searchParams] = useSearchParams();
+  const {
+    appId, // 应用id
+    funCode, // 表单id
+    returnUrl, // 来自页面跳转返回可跳转
+  } = {
+    appId: searchParams.get('appId'),
+    funCode: searchParams.get('funCode'),
+    returnUrl: searchParams.get('returnUrl'),
+  };
+
+  // 添加标题
+  if (!!appId && !funCode) {
+    useTitle('数据流');
+  }
+
+  const handleClick = (type: string) => {
+    const { host, pathname, protocol, hash } = location;
+
+    switch (type) {
+      case 'RETURN':
+        // 返回上一页
+        if (!!returnUrl) {
+          const { host, pathname, protocol } = location;
+          // 返回上一页
+          handleWindowOpen(
+            `${protocol}//${host}${pathname}${returnUrl}`,
+            '_self',
+          );
+        } else {
+          // history.goBack();
+          window.history.back();
+        }
+        break;
+      case 'ADD':
+        // 新建数据流
+        handleWindowOpen(
+          `${protocol}//${host}${pathname}#/designer?appId=${
+            appId || ''
+          }&type=edit&returnUrl=${hash}`,
+          '_self',
+        );
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div className={cls(styles[prefix])}>
+      <FlowHeader handleClick={handleClick} type={'FLOW'} />
+      <section className={cls(styles[`${prefix}__main`])}>
+        <section className={cls(styles['main-content'])}>
+          <FlowSetting
+            params={{
+              appId: appId || '',
+              funCode: funCode || '',
+            }}
+          />
+        </section>
+      </section>
+    </div>
+  );
+};
+
+export default DataFlowView;

+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+import { Button, Image, message, Modal, Tooltip, Upload } from 'antd';
+import { QxIcon } from '@/components';
+
+import defaultImg from '@/components/default/default_cover.png';
+
+const defaultIcon: Record<string, string> = {
+  form: 'icon-app-file-fill',
+  group: 'icon-app-folder-2-fill',
+  report: 'icon-app-performance-fill',
+  url: 'icon-app-share-forward-fill',
+  page: 'icon-app-tablicon-app-fill',
+  dataset: 'icon-app-presentation-2-fill',
+  datasetCube: 'icon-app-box-3-fill',
+  app: 'icon-app-grid-2-fill',
+};
+
+// 数据流 图标展示
+export const getIcon = (icon: string, type?: string) => {
+  if ((icon as string)?.startsWith('http')) {
+    return (
+      <Image
+        className={'qx-data-flow__img'}
+        src={icon}
+        fallback={defaultImg}
+        preview={false}
+        width={'16px'}
+        height={'16px'}
+        style={{
+          width: '16px',
+          height: '16px',
+          borderRadius: '4px',
+        }}
+        alt=""
+      />
+    );
+  } else {
+    return (
+      <QxIcon
+        className={'qx-data-flow__icon'}
+        type={icon || defaultIcon[type || 'form']}
+      />
+    );
+  }
+};
+
+// 表格 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];
+};

+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Button,
+  Input,
+  message,
+  Modal,
+  Space,
+  Table,
+  Tooltip,
+  Typography,
+  Avatar,
+} from 'antd';
+
+import { SettingOutlined } from '@ant-design/icons/lib';
+import { useSearchParams } from 'react-router-dom';
+import { useTitle } from 'ahooks';
+import { QxIcon } from '@/components';
+import { handleWindowOpen } from '@qx/utils';
+import { FlowHeader, FlowVersion } from '@/components';
+
+import { useFlowTableScrollY } from '@/utils';
+import actions from '@/utils/actions';
+
+import { isEmpty, cloneDeep } from 'lodash-es';
+
+const { Text } = Typography;
+
+// 样式
+import cls from 'classnames';
+import styles from '../index.module.less';
+import { getProcessVersions } from '@/services';
+import { FlowVersionStatusEnums } from '@/interface';
+const prefix = 'qx-flow-setting';
+
+const DataFlowVersion: React.FC = ({}) => {
+  // @ts-ignore
+  const [searchParams] = useSearchParams();
+  const {
+    processId, // 流程ID
+    name, // 流程名称
+    returnUrl, // 来自页面跳转返回可跳转
+  } = {
+    processId: searchParams.get('processId'),
+    name: searchParams.get('name'),
+    returnUrl: searchParams.get('returnUrl'),
+  };
+  const [pageData, setPageData] = useState<any[]>([]);
+  const [tableLoading, setTableLoading] = useState<boolean>(true); // 表格loading
+  // 表格是否添加scroll 属性
+  const [isScrollY, setIsScrollY] = useState<boolean>(false);
+  // 添加标题
+  useTitle(name || '未命名流程');
+
+  const handleClick = (
+    type: string,
+    data?: any,
+    e?: React.MouseEvent<HTMLElement, MouseEvent>,
+  ) => {
+    const { host, pathname, protocol, hash } = location;
+
+    if (!!e) {
+      e.stopPropagation();
+    }
+
+    switch (type) {
+      case 'RETURN':
+        // 返回上一页
+        if (!!returnUrl) {
+          // 返回上一页
+          handleWindowOpen(
+            `${protocol}//${host}${pathname}${returnUrl}`,
+            '_self',
+          );
+        } else {
+          // history.goBack();
+          window.history.back();
+        }
+        break;
+      case 'VIEW':
+        // 查看
+        console.log('VIEW === ', data);
+        break;
+      case 'RESTORE':
+        // 恢复
+        console.log('RESTORE === ', data);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const cols = useMemo(() => {
+    return [
+      {
+        title: () => {
+          return (
+            <span className={cls(styles[`${prefix}__col-title`])}>
+              流程版本
+            </span>
+          );
+        },
+        dataIndex: 'version',
+        render: (text: any, row: any) => {
+          return (
+            <span
+              className={cls(styles[`${prefix}__colspan`])}
+              style={{ width: '100%' }}
+            >
+              <FlowVersion versionText={text} />
+            </span>
+          );
+        },
+        width: 170,
+        className: 'qx-flow-table-cell',
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(styles[`${prefix}__col-title`])}>状态</span>
+          );
+        },
+        dataIndex: 'status',
+        className: 'qx-flow-table-cell',
+        render: (text: any) => {
+          return (
+            <span
+              className={cls(styles[`${prefix}__colspan`])}
+              style={{ width: '100%' }}
+            >
+              <FlowVersion status={text} statusEnums={FlowVersionStatusEnums} />
+            </span>
+          );
+        },
+        width: 170,
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(styles[`${prefix}__col-title`])}>
+              更新时间
+            </span>
+          );
+        },
+        dataIndex: 'updatedAt',
+        width: 200,
+        className: 'qx-flow-table-cell',
+        render: (text: any) => {
+          return (
+            <span
+              className={cls(styles[`${prefix}__colspan`])}
+              style={{ width: '100%' }}
+            >
+              {text}
+            </span>
+          );
+        },
+        onCell: (record: any) => {
+          return {
+            colSpan: ['APP', 'FUN'].includes(record?.type || '') ? 0 : 1,
+          };
+        },
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(styles[`${prefix}__col-title`])}>更新人</span>
+          );
+        },
+        dataIndex: 'updatedByUser',
+        className: 'qx-flow-table-cell qx-flow-table-cell-user',
+        render: (text: any, row: any) => {
+          if (isEmpty(text)) {
+            return '--';
+          }
+          let _imgError = false;
+          return (
+            <span
+              className={cls(styles[`${prefix}__colspan-user`])}
+              style={{ width: '100%' }}
+            >
+              <Avatar
+                className={'qx-flow-table-cell__avatar'}
+                size={24}
+                alt="avatar"
+                src={row?.updatedByUser?.faceUrl || ''}
+                onError={() => {
+                  _imgError = true;
+                  return true;
+                }}
+              >
+                {(!!row?.updatedByUser?.faceUrl && _imgError) ||
+                !row?.updatedByUser?.faceUrl
+                  ? !!row?.updatedByUser?.name?.length
+                    ? row?.updatedByUser?.name[
+                        row?.updatedByUser?.name?.length - 1
+                      ]
+                    : null
+                  : null}
+              </Avatar>
+              <Text
+                className={'qx-flow-table-cell__avatar-name'}
+                ellipsis={{ tooltip: row?.updatedByUser?.name || '' }}
+              >
+                {row?.updatedByUser?.name || ''}
+              </Text>
+            </span>
+          );
+        },
+        width: 200,
+      },
+      {
+        title: () => {
+          return (
+            <span className={cls(styles[`${prefix}__col-title`])}>操作</span>
+          );
+        },
+        dataIndex: 'control',
+        render: (text: any, row: any) => (
+          <Space
+            size={8}
+            className={cls(styles[`${prefix}__colspan`])}
+            style={{ width: '100%' }}
+          >
+            <Button
+              type="link"
+              size="small"
+              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                e.stopPropagation();
+                handleClick('VIEW', row);
+              }}
+            >
+              查看
+            </Button>
+            <Button
+              type="link"
+              size="small"
+              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) =>
+                handleClick('RESTORE', row, e)
+              }
+            >
+              恢复
+            </Button>
+          </Space>
+        ),
+        width: 140,
+        className: 'qx-flow-table-cell',
+      },
+    ];
+  }, [JSON.stringify(pageData)]);
+
+  // 查询list
+  const handleSearch = () => {
+    setTableLoading(true);
+
+    actions.cancelToken(); // 多次请求 取最新请求 其他取消
+
+    getProcessVersions('')
+      .then((res: any) => {
+        // 处理数据 符合表格渲染格式
+        const _cloneList: any[] = [];
+        const getColumnList = (data: any[]) => {
+          data.forEach((item: any) => {
+            _cloneList.push(cloneDeep(item));
+            if (!!item?.processes?.length) {
+              getColumnList(item?.processes);
+            }
+          });
+        };
+        getColumnList(cloneDeep(res || []));
+        setPageData(cloneDeep(_cloneList));
+        // setExpandedKeys(_cloneList.map((item: any) => item.key));
+        setTableLoading(false);
+      })
+      .catch(() => {
+        console.warn('数据列表获取失败');
+        setPageData([]);
+        setTableLoading(false);
+      });
+  };
+
+  // 表格滚动高度获取
+  const [scrollY] = useFlowTableScrollY({
+    columns: cols,
+    listProps: {
+      pageData,
+    },
+  }) as any[];
+
+  return (
+    <div className={cls(styles['qx-data-flow'])}>
+      <FlowHeader
+        title={name || '未命名流程'}
+        handleClick={handleClick}
+        type={'VERSION'}
+      />
+      <section className={cls(styles['qx-data-flow__main'])}>
+        <section className={cls(styles['main-content'])}>
+          <div
+            className={cls(styles[`${prefix}-container`], 'qx-data-flow-table')}
+          >
+            <Table
+              loading={tableLoading}
+              columns={cols}
+              dataSource={pageData}
+              scroll={
+                isScrollY
+                  ? {
+                      x: '100%',
+                      y: scrollY,
+                    }
+                  : { x: '100%' }
+              }
+              pagination={false}
+              size={'small'}
+              bordered
+              rowKey={(record: any) => {
+                return `${record?.type || ''}${record?.id || ''}${Math.random()
+                  .toString(36)
+                  .replaceAll(/[0-9]/g, '')
+                  .slice(2, 4)}`;
+              }}
+            />
+          </div>
+        </section>
+      </section>
+    </div>
+  );
+};
+
+export default DataFlowVersion;

+import { createRequest } from '@qx/utils';
+
+export default createRequest();

 import { createHashRouter, RouterProvider } from 'react-router-dom';
 import { createHashRouter, RouterProvider } from 'react-router-dom';
 import Root from '../page/root';
 import Root from '../page/root';
 import About from '../page/about';
 import About from '../page/about';
+import Designer from '../page/designer';
+import List from '../page/view/list';
+import Version from '../page/view/version';
 
 
 export default () => (
 export default () => (
   <RouterProvider
   <RouterProvider
@@ -13,6 +16,18 @@ export default () => (
             path: '/about',
             path: '/about',
             element: <About />,
             element: <About />,
           },
           },
+          {
+            path: '/designer',
+            element: <Designer />,
+          },
+          {
+            path: '/list',
+            element: <List />,
+          },
+          {
+            path: '/version',
+            element: <Version />,
+          },
         ],
         ],
       },
       },
     ])}
     ])}

+import { lazy } from 'react';
+import { QxSdk } from '@qx/utils';
+import request from '@/request';
+const qxSdk = new QxSdk();
+
+qxSdk.registerSdk({
+  getFormFields(appCode: string, funCode: string, viewCode: string) {
+    return request.get(
+      `/qx-apaas-lowcode/app/${appCode}/form/${funCode}/field/option/${viewCode}?withRel=true`,
+    );
+  },
+
+  getCommonComponent() {
+    return {
+      // QxAppSelector: lazy(async () => (await import(/* webpackChunkName: "qx-common" */  '@qx/common')).QxOrgSelector)
+    };
+  },
+});
+
+export default qxSdk;