fix ：样式修改

@@ -76,7 +76,6 @@ export const QxBaseCondition: React.FC<QxBaseConditionProps> = (props) => {
     );
   };
 
-  console.log('props', props);
   const RenderCondition = props.value?.map((item, key) => (
     <div className="qx-base-condition-list-item" key={item.code || key}>
       {(props?.showIdx ?? true) && (

@@ -7,7 +7,6 @@ import {
   Col,
   DatePicker,
   Divider,
-  Form,
   Input,
   InputNumber,
   Modal,
@@ -15,6 +14,7 @@ import {
   Select,
   Space,
   Table,
+  Tooltip,
   message,
 } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -148,30 +148,24 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       ),
       dataIndex: 'code',
       className: 'code-header',
-      width: '200px',
+      width: '150px',
       key: 'code',
       render: (text, record) => {
         const strTitle = (text as string) || '';
         const index = strTitle.indexOf(searchValue);
         return (
-          <Form.Item
-            name={'code' + record.id}
-            style={{ margin: 0 }}
-            // initialValue={record.code}
-          >
-            <Input
-              style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
-              draggable={true}
-              onDragStart={(event) => {
-                event.stopPropagation();
-                event.preventDefault();
-              }}
-              defaultValue={record.code}
-              bordered={false}
-              disabled={record.disabled || typeDis}
-              onBlur={(e) => handleChange(e, record, 'code')}
-            />
-          </Form.Item>
+          <Input
+            style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
+            draggable={true}
+            onDragStart={(event) => {
+              event.stopPropagation();
+              event.preventDefault();
+            }}
+            defaultValue={record.code}
+            bordered={false}
+            disabled={record.disabled || typeDis}
+            onBlur={(e) => handleChange(e, record, 'code')}
+          />
         );
       },
     },
@@ -190,24 +184,18 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
         const strTitle = (record.title as string) || '';
         const index = strTitle.indexOf(searchValue);
         return (
-          <Form.Item
-            name={'title' + record.id}
-            style={{ margin: 0 }}
-            // initialValue={record.title}
-          >
-            <Input
-              style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
-              draggable={true}
-              onDragStart={(event) => {
-                event.stopPropagation();
-                event.preventDefault();
-              }}
-              defaultValue={record.title}
-              bordered={false}
-              disabled={record.disabled || typeDis}
-              onBlur={(e) => handleChange(e, record, 'title')}
-            />
-          </Form.Item>
+          <Input
+            style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
+            draggable={true}
+            onDragStart={(event) => {
+              event.stopPropagation();
+              event.preventDefault();
+            }}
+            defaultValue={record.title}
+            bordered={false}
+            disabled={record.disabled || typeDis}
+            onBlur={(e) => handleChange(e, record, 'title')}
+          />
         );
       },
     },
@@ -220,29 +208,25 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       ),
       dataIndex: 'type',
       className: 'ps-table-cell',
-      width: '102px',
+      width: '95px',
       key: 'type',
       render: (text, record) => (
-        <Form.Item
-          style={{ margin: 0 }}
-          name={'type' + record.id}
-          // initialValue={record.type}
+        <Select
+          bordered={false}
+          disabled={record.disabled || typeDis}
+          defaultValue={record.type}
+          popupMatchSelectWidth
+          // dropdownStyle={{width: '1000px'}}
+          onSelect={(e) => handleChange(e, record, 'type')}
         >
-          <Select
-            bordered={false}
-            disabled={record.disabled || typeDis}
-            defaultValue={record.type}
-            onSelect={(e) => handleChange(e, record, 'type')}
-          >
-            {valueOptions.map((item) => {
-              return (
-                <Select.Option key={item.key} value={item.key}>
-                  {item.title}
-                </Select.Option>
-              );
-            })}
-          </Select>
-        </Form.Item>
+          {valueOptions.map((item) => {
+            return (
+              <Select.Option key={item.key} value={item.key}>
+                {item.title}
+              </Select.Option>
+            );
+          })}
+        </Select>
       ),
     },
     {
@@ -253,7 +237,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       ),
       dataIndex: 'valueMapping',
       className: 'ps-table-cell',
-      width: '116px',
+      width: '200px',
       key: 'valueMapping',
       render: (text, record) => (
         <div className="editable-cell-default ">
@@ -319,24 +303,18 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       key: 'description',
       width: '120px',
       render: (text, record) => (
-        <Form.Item
-          name={'description' + record.id}
-          style={{ margin: 0 }}
-          // initialValue={text}
-        >
-          <Input
-            draggable={true}
-            onDragStart={(event) => {
-              event.stopPropagation();
-              event.preventDefault();
-            }}
-            key={inputKey}
-            defaultValue={text}
-            bordered={false}
-            disabled={record.disabled || typeDis}
-            onBlur={(e) => handleChange(e, record, 'description')}
-          />
-        </Form.Item>
+        <Input
+          draggable={true}
+          onDragStart={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+          }}
+          key={inputKey}
+          defaultValue={text}
+          bordered={false}
+          disabled={record.disabled || typeDis}
+          onBlur={(e) => handleChange(e, record, 'description')}
+        />
       ),
     },
     {
@@ -357,11 +335,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
               <Button
                 size={'small'}
                 type="link"
-                disabled={record.disabled || typeDis}
+                disabled={typeDis}
                 icon={
-                  <QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />
+                  <QxBaseIcon
+                    className={'title-btn'}
+                    style={{ fontSize: 16 }}
+                    type={'qx-icon-plus'}
+                  />
                 }
-                onClick={() => handleAdd(record.pid)}
+                onClick={() => handleAdd(record)}
               />
             )}
             {(record.type === 'OBJECT' || record.type === 'ARRAY') &&
@@ -371,25 +353,32 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
                   type="link"
                   disabled={record.disabled || typeDis}
                   icon={
-                    <Icon style={{ fontSize: 16 }} component={SubNodeIcon} />
+                    <Icon
+                      style={{ fontSize: 16 }}
+                      className={'title-btn'}
+                      component={SubNodeIcon}
+                    />
                   }
                   onClick={() => handleAddTree(record.id)}
                 />
               )}
-            <Button
-              size={'small'}
-              type="link"
-              className="btn-high-del"
-              disabled={record.disabled || typeDis}
-              icon={
-                <QxBaseIcon
-                  style={{ fontSize: 16 }}
-                  className={'title-btn-del-btn'}
-                  type={'qx-icon-delete'}
-                />
-              }
-              onClick={() => handleDelete(record)}
-            />
+
+            {!record.disabled && (
+              <Button
+                size={'small'}
+                type="link"
+                className="btn-high-del"
+                disabled={record.disabled || typeDis}
+                icon={
+                  <QxBaseIcon
+                    style={{ fontSize: 16 }}
+                    className={'title-btn title-btn-del-btn'}
+                    type={'qx-icon-delete'}
+                  />
+                }
+                onClick={() => handleDelete(record)}
+              />
+            )}
           </Space>
         );
       },
@@ -404,7 +393,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     ),
     dataIndex: 'qxProps',
     className: 'ps-table-cell',
-    width: '350px',
+    width: '360px',
     key: 'qxProps',
     render: (qxProps: any, record: any) => {
       switch (record.type) {
@@ -592,17 +581,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     key: 'required',
     width: '86px',
     render: (text, record) => (
-      <Form.Item name={'required' + record.id} style={{ margin: 0 }}>
-        <Select
-          defaultValue={text || false}
-          bordered={false}
-          disabled={record.disabled || typeDis}
-          onSelect={(e) => props.handleChange(e, record, 'required')}
-        >
-          <Select.Option value={true}>是</Select.Option>
-          <Select.Option value={false}>否</Select.Option>
-        </Select>
-      </Form.Item>
+      <Select
+        defaultValue={text || false}
+        bordered={false}
+        disabled={record.disabled || typeDis}
+        onSelect={(e) => props.handleChange(e, record, 'required')}
+      >
+        <Select.Option value={true}>是</Select.Option>
+        <Select.Option value={false}>否</Select.Option>
+      </Select>
     ),
   };
 
@@ -789,17 +776,37 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     setMidData(_data);
   };
 
+  const RenderTitle = (
+    <div>
+      高级参数设计器
+      <Tooltip placement="top" title="帮助">
+        <span
+          className={'render-right__help'}
+          // onClick={() => {
+          //   const _url = GoToHelpUrl(selectedNode?.type || '');
+          //   _url && handleWindowOpen(_url);
+          // }}
+        >
+          <QxBaseIcon
+            className={'qx-data-flow__icon'}
+            type={'qx-icon-help-circle-fill'}
+          />
+        </span>
+      </Tooltip>
+    </div>
+  );
+
   return (
     <>
       <Modal
-        title="高级参数设计器"
+        title={RenderTitle}
         open={visible}
         destroyOnClose
         footer={null}
         // onOk={handleCancel}
         onCancel={onCancel}
         width={1200}
-        wrapClassName={'qx-common__modal'}
+        wrapClassName={'qx-common__modal qx-parameter-setting__modal'}
         closeIcon={
           <QxBaseIcon
             className={'qx-common__modal--close'}
@@ -914,7 +921,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
             }}
             className="parameter-setting-table"
             onRow={onRow}
-            scroll={{ x: 1000 }}
+            scroll={{ y: 350 }}
             bordered
             pagination={false}
             size={'small'}

@@ -12,7 +12,7 @@ import {
   message,
 } from 'antd';
 import type { TreeProps } from 'antd/lib/tree';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ParameterModal from './ParameterModal';
 import { formatEnum } from './constant';
 // import type { InputRef } from 'antd';
@@ -31,7 +31,6 @@ import { uidGen } from './stringUtil';
 import './style.less';
 
 import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
-
 const valueOptions = [
   { key: 'STRING', label: '文本' },
   { key: 'NUMBER', label: '数字' },
@@ -109,6 +108,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
   const [defaultExpandedKeys, setDefaultExpandedKeys] = useState<React.Key[]>(); //树节点的id 有了则展开
   const [autoExpandParent, setAutoExpandParent] = useState(true);
   const [searchValue, setSearchValue] = useState('');
+  const inputRef = useRef<any>(null);
+
   // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1';
   // const inputRef = useRef<InputRef>(null);
   //把所有子节点都展开拿出来
@@ -467,20 +468,39 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
   };
 
   //普通增加节点，高级增加当前层级节点
-  const handleAdd = (_pid?: string, _type: string = 'STRING') => {
+  const handleAdd = (itemData?: any, _type: string = 'STRING') => {
     const _treeData = [...treeData];
     const id = uidGen();
     const code = uidGen(undefined, 6);
 
     // @ts-ignore
-    const loopAddTree = (treeList: any[]) => {
+    const loopAddTreePid = (treeList: any[]) => {
       for (let i = 0; i < treeList.length; i++) {
-        if (treeList[i].id == _pid) {
+        if (treeList[i].id == itemData.pid) {
           treeList[i].child.push({
             id,
             code,
             type: _type,
-            pid: _pid,
+            pid: itemData.pid,
+            title: '',
+            qxProps: getDefaultQxProps(_type),
+          });
+          return;
+        } else if (treeList[i].child) {
+          loopAddTreePid(treeList[i].child);
+        }
+      }
+    };
+
+    const loopAddTree = (treeList: any[]) => {
+      for (let i = 0; i < treeList.length; i++) {
+        if (treeList[i].id == itemData.id) {
+          const index = treeList.findIndex((item) => item.id == itemData.id);
+          treeList.splice(index + 1, 0, {
+            id,
+            code,
+            type: _type,
+            // pid: itemData.pid,
             title: '',
             qxProps: getDefaultQxProps(_type),
           });
@@ -491,7 +511,9 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
       }
     };
 
-    if (!_pid) {
+    if (itemData && !itemData.pid) {
+      loopAddTree(_treeData);
+    } else if (!itemData) {
       _treeData.push({
         id,
         code,
@@ -500,11 +522,16 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
         qxProps: getDefaultQxProps(_type),
         pid: '',
       });
-    } else {
-      loopAddTree(_treeData);
+    } else if (itemData && !!itemData.pid) {
+      loopAddTreePid(_treeData);
     }
     setTreeData(_treeData);
     props?.onChange(_treeData);
+
+    setTimeout(() => {
+      let myInput = document.getElementById(id);
+      myInput.focus();
+    }, 0);
   };
 
   //增加子节点
@@ -688,9 +715,13 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
             </div>
             <div className="opt-left">
               <Input
+                id={nodeData.id}
+                ref={inputRef}
                 status={!nodeData.title ? 'error' : ''}
                 placeholder={!nodeData.title ? '请输入参数名' : ''}
-                className={index > -1 && searchValue ? 'search-selected' : ''}
+                className={
+                  index > -1 && searchValue ? 'search-selected' : 'title-input'
+                }
                 draggable={true}
                 onDragStart={(event) => {
                   event.stopPropagation();

@@ -162,6 +162,32 @@
   .ant-input-affix-wrapper {
     border-color: @N4;
   }
+
+  .ant-input-status-error {
+    box-shadow: 0 0 4px 0 #e34d5980;
+  }
+
+  .ant-input-status-error {
+    &:focus-within {
+      border: 1px solid @B8 !important;
+      box-shadow: 0 0 4px 0 #1764ff80;
+
+      // box-shadow: 0 0 0 2px rgba(15, 112, 121, 0.269);
+    }
+  }
+}
+
+.render-right__help {
+  margin: 0 8px;
+  width: 20px;
+  height: 24px;
+  font-size: 16px;
+  color: @N6;
+  cursor: pointer;
+
+  &:hover {
+    color: @B8;
+  }
 }
 
 .opt-left-down {
@@ -203,6 +229,10 @@
   justify-content: flex-start;
   flex-wrap: nowrap;
 
+  .ant-btn-default {
+    border: 0;
+  }
+
   .range-cell {
     display: flex;
     align-content: center;
@@ -222,15 +252,48 @@
 }
 
 .editable-cell-default {
+  overflow: auto;
+  // overflow-x:hidden;
+
+  // ::-webkit-scrollbar{
+  //   width: 0 !important;
+  // }
+
   .qx-base-condition-item {
     margin: 0;
   }
 
   .qx-field-setter {
     border-width: 0;
+
+    .ant-select-selector {
+      background-color: transparent;
+    }
+
+    .qx-tags-input {
+      max-width: 140px;
+      min-width: 30px;
+      max-height: 40px;
+
+      .qx-tags-input__box {
+        max-width: 140px;
+        min-width: 30px;
+        background-color: transparent !important;
+      }
+    }
+  }
+
+  .qx-node-select {
+    .qx-base-condition-item__content-suffix {
+      background-color: transparent !important;
+    }
   }
 }
 
+.editable-cell-default::-webkit-scrollbar {
+  display: none;
+}
+
 .search-selected {
   // .ant-input {
   color: #1890ff;
@@ -318,6 +381,27 @@
   display: block;
 }
 
+.ant-table-body {
+  .ps-table-cell {
+    transition: all 0.2s ease;
+
+    &:hover {
+      border: 1px solid @N6 !important;
+      border-radius: 2px;
+    }
+
+    &:focus-within {
+      border: 1px solid #1764ff !important;
+      border-radius: 2px;
+    }
+
+    // display: flex;
+    // .title-btn{
+    //   color: @B8;
+    // }
+  }
+}
+
 .qx-parameter-tree-list .ant-tree-list {
   .ant-tree-treenode:not(.ant-tree-treenode-disabled) {
     background-color: transparent !important;
@@ -389,5 +473,17 @@
 
 .parameter-setting-table .ant-table-cell {
   height: 40px;
-  padding: 4px 16px 0 4px !important;
+  padding: 4px 16px 4px 4px !important;
+}
+
+.qx-parameter-setting__modal {
+  .ant-modal-content {
+    min-height: 400px;
+    max-height: 600px;
+    // padding-bottom: 24px !important;
+  }
+
+  .ant-modal-body {
+    overflow-y: hidden !important;
+  }
 }