Merge branch 'feature/dataflow' of http://gitlab.qgutech.com/tianqiang/qx-common…

… into feature/dataflow

 {
   "name": "@qx/common",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-alpha.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@qx/common",
-      "version": "3.0.0-alpha.6",
+      "version": "3.0.0-alpha.8",
       "license": "MIT",
       "dependencies": {
         "@ant-design/icons": "^5.2.5",

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

@@ -35,10 +35,11 @@
 .qx-field-setter {
   display: flex;
   width: 100%;
-  background-color: transparent;
   border: 1px solid @N4;
   border-radius: 4px;
   min-height: 32px;
+  box-sizing: border-box;
+  background-color: transparent;
 
   &__icon-text {
     color: @N9;
@@ -64,48 +65,62 @@
     border-radius: 4px 0 0 4px;
     box-sizing: border-box;
   }
+
   .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
     padding: 0 4px 0 8px;
   }
+
   .ant-picker {
     padding: 4px 8px;
   }
+
   .ant-input-number-input {
     padding: 0 8px;
     line-height: 30px;
   }
+
   .ant-select.select.qx-filter-select {
-    width: calc(100% - 24px);
+    width: calc(100% - 32px);
     padding: 0;
     .ant-select-selector {
+      border-radius: 6px 0 0 6px;
+    }
+
+    .ant-select-selector {
       min-height: 32px;
       padding: 0 4px 4px 8px;
     }
+
     .ant-select-selection-overflow-item {
       height: 28px;
     }
+
     .ant-select-selection-placeholder {
       left: 8px;
     }
+
     .ant-select-selection-overflow-item-suffix {
       padding-top: 4px;
     }
   }
 
   .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
-    .ant-select-selector {
+  .ant-select-selector {
     box-shadow: none;
   }
+
   .ant-picker {
     padding: 4px 8px;
   }
 
   .ant-tag {
     font-size: 14px;
+
     .anticon + span {
       margin-left: 0;
     }
   }
+
   // todo 目前表单名字过长导致页面变形
   .qx-tags-input.ant-input .ant-tag,
   .tag.qx-select-tag {
@@ -131,10 +146,12 @@
       font-size: 8px;
     }
   }
+
   .qx-tags-input__box {
     margin-top: 4px;
     padding-left: 0;
   }
+
   .qx-tags-input.ant-input > .ant-tag:first-child {
     margin-left: unset;
   }

 ### 选择表单
 
 ```tsx
-import { request } from '@qx/common';
+import { request, QxFormSelect } from '@qx/common';
 import React, { useState } from 'react';
-import { QxFormSelect } from './index';
 
 export default () => {
   const [value, setValue] = useState({});

@@ -7,7 +7,6 @@ import { QxAppSelector } from '../qx-app-selector';
 import type { InputSelectProps } from '../qx-input-select';
 import { QxInputSelect } from '../qx-input-select';
 
-import { getFunInfo } from './service';
 import './styles.less';
 
 const prefix = 'qx-form-select';
@@ -26,7 +25,7 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
     request,
     disabled,
     placeholder,
-    title,
+    title
   } = props;
 
   const [state, setState] = useSetState<FormSelectState>({
@@ -40,25 +39,10 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
     if (!val?.code) return;
     function onOk() {
       if (val?.code) {
-        getFunInfo(request, val.code)
-          .then((res: any) => {
-            if (res) {
-              onChange?.({
-                ...res,
-                appId: res.extract?.appId || val.appId,
-                isTree: res.extract?.isTree,
-                funId: res.code,
-              });
-            }
-            setState({
-              visible: false,
-            });
-          })
-          .catch(() => {
-            setState({
-              visible: false,
-            });
-          });
+        onChange?.(val);
+        setState({
+          visible: false,
+        });
       }
     }
     onOk();
@@ -96,6 +80,7 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
           ),
         }}
         disabled={disabled}
+        popupOnBody={props?.popupOnBody}
       />
 
       {state.modalVisible ? (
@@ -129,6 +114,7 @@ interface FormSelectProps extends InputSelectProps {
   appId?: string;
   request?: any;
   disabled?: boolean;
+  popupOnBody?: boolean;
 }
 interface FormSelectState {
   visible: boolean;

-/**
- * 根据表单ID获取详细信息
- */
-export function getFunInfo(request: any, funId: string) {
-  return request.get(`/qx-apaas-lowcode/app/form/${funId}`);
-}

@@ -73,7 +73,13 @@ export const QxInputSelect = React.forwardRef<any, InputSelectProps>(
               {...dropdownProps}
             />
           )}
-          getPopupContainer={(triggerNode) => triggerNode}
+          getPopupContainer={(triggerNode) => {
+            if (props?.popupOnBody) {
+              return document.body;
+            } else {
+              return triggerNode;
+            }
+          }}
           onOpenChange={onVisibleChange}
           disabled={disabled}
         >
@@ -96,6 +102,7 @@ export interface InputSelectProps extends Omit<InputProps, 'onChange'> {
   options?: DropdownContentOptions[];
   dropdownProps?: DropdownContentProps;
   disabled?: boolean;
+  popupOnBody?: boolean;
 }
 export interface InputSelectState {
   visible: boolean;

 /* eslint-disable array-callback-return */
 /* eslint-disable eqeqeq */
 import {
-  DeleteOutlined,
-  PlusOutlined,
-  SisternodeOutlined,
   SnippetsOutlined,
 } from '@ant-design/icons';
 import {
@@ -30,7 +27,7 @@ import React, {
 } from 'react';
 import JSONEditor from './codeMirror';
 import './style.less';
-import { QxFieldSetter } from '@qx/common';
+import { QxFieldSetter, QxFormSelect, ValueOptionProps } from '@qx/common';
 import { formatEnum } from './constant';
 import {
   typeTranslateFieIdtype,
@@ -39,11 +36,10 @@ import {
   typeTranslateItemtype,
 } from './constant';
 // import { Controlled as CodeMirror } from 'react-codemirror2'
-import { cloneDeep, debounce } from 'lodash-es';
-import _ from 'lodash';
+import { cloneDeep, debounce, isEmpty } from 'lodash-es';
 import moment from 'dayjs';
 import { QxBaseIcon } from '@qx/common';
-
+import Icon from '@ant-design/icons';
 const valueOptions = [
   { key: 'STRING', title: '文本' },
   { key: 'NUMBER', title: '数字' },
@@ -58,6 +54,8 @@ const valueOptions = [
   { key: 'ORG', title: '部门' },
 ];
 
+import { ReactComponent as SubNodeIcon } from './sub-node.svg';
+
 const timeFormat = [
   { lable: '年', value: 'YEAR' },
   { lable: '年-月', value: 'YEAR_MONTH' },
@@ -77,9 +75,11 @@ interface ParameterSettingProps {
   handleChangeField: (val?: any, data?: any) => void;
   handleChange: (e?: any, data?: any, code?: string) => void;
   handleDrop: (val: any) => void;
-  handleAddtree: (val: any) => void;
+  handleAddTree: (val: any) => void;
   handleAdd: (val: any) => void;
   handleDelete: (val: any) => void;
+  appFormList?: any[]; // 当前应用表单list
+  request?: any,
 }
 const EditableContext = React.createContext<FormInstance<any> | null>(null);
 
@@ -115,7 +115,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     handleCancel,
     handleDrop,
     handleAdd,
-    handleAddtree,
+    handleAddTree,
     handleDelete,
     handleChange,
     handleChangeField,
@@ -139,7 +139,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
   };
 
   const checkShowTree = (_data: any) => {
-    console.log('_data', _data)
+    // console.log('_data', _data)
     if (_data.type == 'ARRAY') {
       if (_data.child && _data.child.length > 0) {
         return false;
@@ -243,36 +243,33 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       dataIndex: 'qxProps',
       editable: true,
       key: 'qxProps',
-      render: (text, record) => (
-        <div key={record.id}>
-          <span>
-            {record.type == 'TIME'
-              ? moment(text?.min).format(
-                formatEnum[text?.format] || 'YYYY-MM-DD',
-              )
-              : text?.min}
-          </span>
-          {text?.min && (
-            <Space style={{ marginLeft: 5, marginRight: 5 }}>-</Space>
-          )}
-          <span>
-            {record.type == 'TIME'
-              ? moment(text?.max).format(
-                formatEnum[text?.format] || 'YYYY-MM-DD',
-              )
-              : text?.max}
-          </span>
-        </div>
-        // <Form.Item
-        //   name={'qxProps' + record.id}
-        // >
-        //   <>
-        //     <Input disabled={record.disabled} defaultValue={text?.min} onBlur={(e) => props.handleChange(e, record, 'qxProps-min')} style={{ width: '45%' }} />
-        //     &nbsp; - &nbsp;
-        //     <Input disabled={record.disabled} defaultValue={text?.max} onBlur={(e) => props.handleChange(e, record, 'qxProps-max')} style={{ width: '45%' }} />
-        //   </>
-        // </Form.Item>
-      ),
+      render: (text: any, record: any) => {
+        console.log('record ====', record);
+        console.log('text ====', text);
+        return (
+          <>
+            {record.type === 'FORM' ? <>
+              <div key={record.id}>
+                <span>
+                  {text?.name}
+                </span>
+              </div>
+            </> : <>
+              <div key={record.id}>
+                <span>{record.type == 'TIME' ? moment(text?.min).format(
+                  formatEnum[text?.format] || 'YYYY-MM-DD') : text?.min}
+                </span>
+                {text?.min && (
+                  <Space style={{ marginLeft: 5, marginRight: 5 }}>-</Space>
+                )}
+                <span>{record.type == 'TIME' ? moment(text?.max).format(
+                  formatEnum[text?.format] || 'YYYY-MM-DD') : text?.max}
+                </span>
+              </div>
+            </>}
+          </>
+        )
+      },
     },
     {
       title: '必填',
@@ -343,26 +340,29 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
           <Space size="small">
             {isShowAdd && (
               <Button
+                size={'small'}
                 type="link"
                 disabled={record.disabled}
-                icon={<PlusOutlined />}
+                icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />}
                 onClick={() => handleAdd(record.pid)}
               />
             )}
             {(record.type === 'OBJECT' || record.type === 'ARRAY') &&
               isShowTree && (
                 <Button
+                  size={'small'}
                   type="link"
                   disabled={record.disabled}
-                  icon={<SisternodeOutlined />}
-                  onClick={() => handleAddtree(record.id)}
+                  icon={<Icon style={{ fontSize: 16 }} component={SubNodeIcon} />}
+                  onClick={() => handleAddTree(record.id)}
                 />
               )}
             <Button
+              size={'small'}
               type="link"
               className="btn-high-del"
               disabled={record.disabled}
-              icon={<DeleteOutlined />}
+              icon={<QxBaseIcon style={{ fontSize: 16 }} className={'title-btn-del-btn'} type={'qx-icon-delete'} />}
               onClick={() => handleDelete(record)}
             />
           </Space>
@@ -434,6 +434,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     const toggleEdit1 = (e) => {
       const values = form.getFieldsValue();
       e.persist();
+      // console.log('vae.target.tagNamelues', e.target.tagName)
       if (e.target.tagName == 'DIV') {
         setCurrentNode(e.target)
         // console.log('values', values)
@@ -452,11 +453,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       // form.setFieldsValue({ [dataIndex]: record[dataIndex] });
     };
 
-    // const onQxpropsChangen = (value) => {
+    // const test = (value) => {
     //   console.log('value', value)
-    //   form.setFieldsValue({
-    //     ['qxProps']: { value: value }
-    //   })
+    //   // form.setFieldsValue({
+    //   //   ['qxProps']: { value: value }
+    //   // })
     // }
     // const toggleEdit2 = (e) => {
     //   e.persist();
@@ -648,6 +649,29 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
               </Select>
             </div>
           );
+        case 'FORM':
+          return (
+            <div
+              key={record.id}
+              ref={inputRef}
+              className="editable-around-cell"
+              // onBlur={(e) => toggleEdit1(e)} 
+              tabIndex={
+                0
+              }
+            >
+              <QxFormSelect
+                value={qxProps}
+                request={props?.request}
+                options={props?.appFormList}
+                placeholder={'选择表单'}
+                popupOnBody={true}
+                onChange={(val: any) => {
+                  props.handleChange(val, record, 'qxProps');
+                }}
+              />
+            </div>
+          );
         default:
           return (
             <div
@@ -678,7 +702,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     };
 
     const handleField = (val) => {
-      if (!val || _.isEmpty(val)) {
+      if (!val || isEmpty(val)) {
         return;
       }
       if (val[0].extVal) {
@@ -1041,8 +1065,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
         ) : (
           <Row>
             <Col span={12}>
-              <Button type="link" onClick={() => onOpen()}>
-                {'</>JSON参数设置'}
+              <Button type="link" icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-flow-code'} />} onClick={() => onOpen()}>
+                JSON参数设置
               </Button>
             </Col>
             <Col

@@ -14,90 +14,22 @@
 Demo:
 
 ```tsx
-import { QxParameterSetting } from '@qx/common';
+import { QxParameterSetting, request } from '@qx/common';
 import { Input } from 'antd';
 import React, { useState } from 'react';
-
+import { appFormList } from './mock';
 export default () => {
   const [value, setValue] = useState([
     {
-      code: '29gnd',
-      id: 'f7724ff3557041588fcdcf69d31bec1d',
-      pid: '',
-      showCode: true,
-      qxProps: {
-        appId: 'HBZy3te6d9SxSMO3lLr',
-        formId: 'j9s5sUXvLiT2a1PJOsh',
-        formName: '合同管理',
-      },
-      required: false,
-      title: '流程类萨',
-      type: 'OBJECT',
-      disabled: true,
-      child: [
-        {
-          id: '519338cceed64b08aeadcc7f5b4c9d94',
-          pid: 'f7724ff3557041588fcdcf69d31bec1d',
-          code: '60edb3',
-          showCode: true,
-          title: '问问',
-          required: true,
-          qxProps: {
-            min: '2023-08-18',
-            max: '2023-08-08',
-            options: ['1231231231321'],
-            default: '2023-08-02',
-            format: 'YEAR_DATE',
-          },
-          disabled: false,
-          type: 'TIME',
-        },
-      ],
-    },
-    {
       id: '6370b8fd52484b83abd702379870b05f',
       pid: '',
       code: 'ufsqtk',
       showCode: true,
       title: '爱的人翁热',
       required: true,
-      qxProps: {
-        min: 1,
-        max: 10,
-        options: ['232312312323423'],
-        default: 112,
-        precision: 2,
-      },
-      disabled: false,
-      type: 'NUMBER',
-    },
-    {
-      id: '2df392beea224ad5af58ac96dad04e7b',
-      pid: '',
-      code: 'ci4ihw',
-      showCode: true,
-      title: '来来来',
-      required: false,
-      child: [
-        {
-          id: 'db1cd3c513534a82ae85f63e82cf0951',
-          pid: '2df392beea224ad5af58ac96dad04e7b',
-          code: 'b3cbef',
-          title: '啊实打实',
-          required: false,
-          qxProps: {
-            min: '2023-08-16',
-            max: '2023-08-01',
-            options: ["asdaa'd "],
-            default: '2023-08-03',
-            format: 'YEAR_DATE',
-          },
-          disabled: false,
-          type: 'TIME',
-        },
-      ],
+      qxProps: {},
       disabled: false,
-      type: 'ARRAY',
+      type: 'FORM',
     },
   ]);
   const handleChange = (newValue) => {
@@ -140,39 +72,70 @@ export default () => {
   };
 
   const isHide = true;
-  const isShow = true;
 
   const componentItem = {
     value: comValue,
     onChange: comHandleChange,
   };
+  const titleDom = (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'flex-start',
+        flexDirection: 'column',
+      }}
+    >
+      <span
+        style={{
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        }}
+      >
+        标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示
+      </span>
+      <span
+        style={{
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        }}
+      >
+        标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示
+      </span>
+    </div>
+  );
+
   return (
-    <QxParameterSetting
-      value={value}
-      nodeItem={nodeItem}
-      // componentItem={componentItem}
-      onChange={handleChange}
-      isHideSearch={isHide}
-      isShowTitle={isShow}
-      isShowField={true}
-      title={'sadaasdasdasdwwwwwwwasdasdasdsdsd'}
-      // component={QxTagsInput}
-    />
+    <div style={{ width: '400px' }}>
+      <QxParameterSetting
+        value={value}
+        nodeItem={nodeItem}
+        // componentItem={componentItem}
+        onChange={handleChange}
+        isHideSearch={isHide}
+        isShowField={true}
+        title={titleDom}
+        // component={QxTagsInput}
+        request={request}
+        appFormList={appFormList}
+      />
+    </div>
   );
 };
 ```
 
 ## 入参数据格式
 
-| 参数         | 说明                             | 类型   | 默认值 |
-| ------------ | -------------------------------- | ------ | ------ |
-| isHideSearch | 是否隐藏搜索框                   | bool   | -      |
-| nodeItem     | 节点信息，默认值右侧选择节点使用 | []     | -      |
-| value        |                                  | []     | -      |
-| isShowTitle  | 是否显示左侧标题                 | bool   | -      |
-| title        | 左侧标题                         | string | -      |
-| isShowField  | 是否显示下部默认值 item          | bool   | -      |
-| onChange     |                                  |        | -      |
+| 参数         | 说明                             | 类型            | 默认值 |
+| ------------ | -------------------------------- | --------------- | ------ |
+| isHideSearch | 是否隐藏搜索框                   | bool            | -      |
+| nodeItem     | 节点信息，默认值右侧选择节点使用 | []              | -      |
+| value        |                                  | []              | -      |
+| title        | 左侧标题                         | React.ReactNode | -      |
+| isShowField  | 是否显示下部默认值 item          | bool            | -      |
+| onChange     |                                  |                 | -      |
 
 ## 出参数据格式
 

 /* eslint-disable eqeqeq */
 /* eslint-disable array-callback-return */
 import React, { useCallback, useEffect, useState } from 'react';
-// import type { FRWidgetProps } from '@/packages/qx-form-generator/src';
-import {
-  DeleteOutlined,
-  PlusOutlined,
-  SettingOutlined,
-} from '@ant-design/icons';
 import {
   Button,
   Dropdown,
@@ -17,6 +11,7 @@ import {
   Tree,
   message,
 } from 'antd';
+import Icon from '@ant-design/icons';
 import type { TreeProps } from 'antd/lib/tree';
 import ParameterModal from './ParameterModal';
 import { formatEnum } from './constant';
@@ -36,6 +31,8 @@ import { QxFieldSetter, QxBaseIcon } from '@qx/common';
 
 import './style.less';
 
+import { ReactComponent as SubNodeIcon } from './sub-node.svg';
+
 const valueOptions = [
   { key: 'STRING', label: '文本' },
   { key: 'NUMBER', label: '数字' },
@@ -70,12 +67,13 @@ interface ParameterSettingProps {
   onChange: (val: any) => void;
   value: any;
   isHideSearch?: boolean; //是否隐藏搜索框
-  isShowTitle?: boolean; //是否显示左侧标题
-  isShowField?: boolean; //是否显示下部默认值组件
-  title?: string;
+  isShowField?: boolean; // 是否显示下部默认值组件
+  title?: React.ReactNode; // 左侧标题
   // component?: any;
   // componentItem?: any;
   // comHandleChange?: (val: any) => void;
+  appFormList?: any[]; // 当前应用表单list
+  request?: any,
 }
 
 export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
@@ -451,7 +449,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
   };
 
   //增加子节点
-  const onAddtree = (key: string) => {
+  const onAddTree = (key: string) => {
     function addNode(pid: string, data: any) {
       data.forEach((item) => {
         const id = uidGen();
@@ -623,18 +621,18 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
             {(nodeData.type === 'OBJECT' || nodeData.type === 'ARRAY') &&
               isShowTree && (
                 <Button
-                  icon={<PlusOutlined />}
+                  icon={<Icon component={SubNodeIcon} />}
                   disabled={disabled}
-                  type="text"
+                  type="link"
                   className="title-btn"
-                  onClick={() => onAddtree(nodeData.id)}
+                  onClick={() => onAddTree(nodeData.id)}
                 />
               )}
             <Button
               className="title-btn-del"
-              icon={<DeleteOutlined />}
+              icon={<QxBaseIcon className={'title-btn-del-btn'} type={'qx-icon-delete'} />}
               disabled={disabled}
-              type="text"
+              type="link"
               onClick={() => deleteParameter(nodeData)}
             />
           </div>
@@ -702,18 +700,28 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
               />
             )}
           >
-            <Button type={'link'}>
-              <PlusOutlined />
+            <Button
+              size={'small'}
+              type={'link'}
+              style={{
+                padding: '0 0 0 8px',
+              }}
+            >
+              <QxBaseIcon style={{fontSize: '16px'}} type={'qx-icon-plus'} />
               添加参数
             </Button>
           </Dropdown>
           <Button
+            size={'small'}
             type={'link'}
+            style={{
+              padding: '0 0 0 12px',
+            }}
             onClick={() => {
               openModal();
             }}
           >
-            <SettingOutlined />
+            <QxBaseIcon style={{fontSize: '16px'}} type={'icon-app-terminal-box-line'} />
             高级设置
           </Button>
         </div>
@@ -725,9 +733,9 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
             onChange={onChange}
           />
         )}
-        {props.isShowTitle && (
-          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            <span style={{ fontSize: '18px' }}>{props.title}</span>
+        {props.isHideSearch && !!props.title && (
+          <div className={'header-title'}>
+            {props.title}
           </div>
         )}
       </div>
@@ -749,8 +757,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
               onDrop={onDrop}
               draggable
               blockNode
-              selectable
-              checkStrictly={true} //??这是啥意思
               expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
               autoExpandParent={autoExpandParent}
               onExpand={onExpand}
@@ -769,8 +775,10 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
         handleDelete={deleteParameter}
         handleChange={handleChange}
         handleDrop={handleDrop}
-        handleAddtree={onAddtree}
+        handleAddTree={onAddTree}
         visible={visible}
+        request={props?.request}
+        appFormList={props?.appFormList}
       />
     </div>
   );

+export const appFormList = [
+  {
+    name: '地址',
+    code: 'UdXaoSj9EHYr3wZL253',
+    extract: {
+      code: 'o72gf',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '测试关联记录按钮',
+    code: 'ZRLa6NjJ98u3lFVLSur',
+    extract: {
+      code: 'vwxxw',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '测试关联记录权限',
+    code: 'SRqC0JJmcjKquqnn228',
+    extract: {
+      code: '60jte',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '子表',
+    code: 'GYsqE8yphn1amjVM2OY',
+    extract: {
+      code: 'oi0d2',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '关联基础',
+    code: '2wN04K7nF0fHjRbOAvu',
+    extract: {
+      code: '0jpbl',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '关联记录',
+    code: 's6k5W5aovjtiU7kvqVl',
+    extract: {
+      code: 'zbynu',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '关联记录-关联记录',
+    code: 'hfbs4k6Lbs4WV7tOept',
+    extract: {
+      code: 'fz7nl',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '关联属性-关联记录',
+    code: 'WPjXCOemcBxoXqeEX6x',
+    extract: {
+      code: 's585f',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '子表-关联记录',
+    code: 'H3moABKMnhVqjqcVbsa',
+    extract: {
+      code: 'snfhq',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '关联记录1',
+    code: 'PQspcwgyiewytF9iizd',
+    extract: {
+      code: 'f53ql',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '富文本',
+    code: 'On7QbrZv9u1qtVgMAGm',
+    extract: {
+      code: 'tmh23',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '关联记录删除',
+    code: 'MdUFSBxWOYKXSYGSqSk',
+    extract: {
+      code: 'uxenf',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '1',
+    code: 'HAJ8dEcoPLnjx81Uxjc',
+    extract: {
+      code: '3xtcr',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '基础表单',
+    code: 'oOY4njEfrHx7PlSlFRf',
+    extract: {
+      code: 'fd3eb',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '关联记录',
+    code: 'HaIdxngReF8WtKclakp',
+    extract: {
+      code: 'qbroi',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '筛选',
+    code: 'amWz1TlerTCrysLhKdD',
+    extract: {
+      code: 'ionr7',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '子表',
+    code: 'JV5IeD1Xc4MtwWdbPhB',
+    extract: {
+      code: 'x4lh4',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '附件图片',
+    code: 'jCfTNFw7tjERB5jnnWv',
+    extract: {
+      code: 'pqqko',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '日期时间',
+    code: 'WruqGjaxMj0jLsZ6Ufr',
+    extract: {
+      code: 'z15we',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '选人员部门',
+    code: 'wqsubyh5kJFsxXuHYyQ',
+    extract: {
+      code: '0h42r',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '数值',
+    code: 'HEsh8KhnUToggsWuboT',
+    extract: {
+      code: 'bb8ev',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+  {
+    name: '多字段',
+    code: 'deTV0Jjc1prqYZTERfN',
+    extract: {
+      code: 'hxaxj',
+      isTree: false,
+      appName: 'LT-表单',
+      type: 'form',
+    },
+  },
+];

@@ -12,6 +12,14 @@
   flex-direction: row-reverse;
   flex-wrap: nowrap;
   justify-content: space-between;
+  align-items: flex-end;
+
+  .header-title {
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow:ellipsis;
+  }
 }
 
 .tree-wrapper {
@@ -36,10 +44,10 @@
 }
 
 .border-none
-  .ant-select-focused:not(.ant-select-disabled).ant-select:not(
+.ant-select-focused:not(.ant-select-disabled).ant-select:not(
     .ant-select-customize-input
   )
-  .ant-select-selector {
+.ant-select-selector {
   border: none;
   box-shadow: none;
 }
@@ -61,24 +69,48 @@
   align-items: center;
   margin-left: 10px;
 
-  .title-btn-del {
-    display: none;
-    color: #666;
+  .ant-btn.ant-btn-icon-only,
+  .ant-btn.ant-btn-icon-only {
+    font-size: 16px;
+    color: @N7;
 
     &:hover {
-      color: @E3;
+      color: @B8;
       opacity: 1;
+
+      .anticon {
+        color: @B8;
+
+        &.title-btn-del-btn {
+          color: @E3;
+        }
+      }
+    }
+
+    &:disabled,
+    &.ant-btn-disabled {
+      color: @N5;
+
+      &:hover {
+        color: @N5;
+
+        .anticon {
+          color: @N5;
+
+          &.title-btn-del-btn {
+            color: @N5;
+          }
+        }
+      }
     }
   }
 
-  .title-btn {
+  .title-btn-del {
     display: none;
-    color: #666;
+  }
 
-    &:hover {
-      color: #91d5ff;
-      opacity: 1;
-    }
+  .title-btn {
+    display: none;
   }
 
   .select-tree {
@@ -100,6 +132,10 @@
   margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  .ant-input-affix-wrapper {
+    border-color: @N4;
+  }
 }
 
 .opt-left-down {
@@ -114,6 +150,8 @@
   margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
+  background-color: #fff;
+  border-radius: 4px;
 }
 
 // .ant-tree-node-content-wrapper :hover .select-tree {
@@ -298,3 +336,10 @@
     padding-top: 0 !important;
   }
 }
+
+.qx-parameter-setting--search {
+  .anticon {
+    font-size: 16px;
+    color: @N6;
+  }
+}

+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M6.333 5.333a1 1 0 0 0-1 1v3h-.667V2.667h10V1.333H1.333v1.334h2v6.666c0 .737.597 1.334 1.333 1.334h.667v3a1 1 0 0 0 1 1h7.333a1 1 0 0 0 1-1V6.333a1 1 0 0 0-1-1H6.333Zm.333 8V6.667h6.667v6.666H6.666Zm2.667-2.666h-2V9.333h2v-2h1.333v2h2v1.334h-2v2H9.333v-2Z" clip-rule="evenodd"/></svg>