fix: 增加标题校验，样式优化

@@ -15,7 +15,6 @@ Demo:
 import { QxParameterSetting, request } from '@qx/common';
 import { QxParameterSetting, request } from '@qx/common';
 import { Input } from 'antd';
 import { Input } from 'antd';
 import React, { useState } from 'react';
 import React, { useState } from 'react';
-import { appFormList } from './mock';
 export default () => {
 export default () => {
   const [value, setValue] = useState([
   const [value, setValue] = useState([
     {
     {
@@ -26,10 +25,10 @@ export default () => {
       title: '爱的人翁热',
       title: '爱的人翁热',
       required: true,
       required: true,
       qxProps: {},
       qxProps: {},
-      disabled: false,
+      disabled: true,
       type: 'FORM',
       type: 'FORM',
     },
     },
-      {
+    {
       id: '6370b8fd52484b83ab2222270b05f',
       id: '6370b8fd52484b83ab2222270b05f',
       pid: '',
       pid: '',
       code: 'kwkwkw',
       code: 'kwkwkw',

@@ -219,6 +219,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
 
 
   // @ts-ignore
   // @ts-ignore
   const handleChange = (e?: any, data?: any, code?: string) => {
   const handleChange = (e?: any, data?: any, code?: string) => {
+    console.log('handleChange');
     let value,
     let value,
       oldValue,
       oldValue,
       _qxProps = {};
       _qxProps = {};
@@ -480,7 +481,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
             code,
             code,
             type: _type,
             type: _type,
             pid: _pid,
             pid: _pid,
-            title: code,
+            title: '',
             qxProps: getDefaultQxProps(_type),
             qxProps: getDefaultQxProps(_type),
           });
           });
           return;
           return;
@@ -495,7 +496,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
         id,
         id,
         code,
         code,
         type: _type,
         type: _type,
-        title: code,
+        title: '',
         qxProps: getDefaultQxProps(_type),
         qxProps: getDefaultQxProps(_type),
         pid: '',
         pid: '',
       });
       });
@@ -514,9 +515,9 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
         const code = uidGen(undefined, 6);
         const code = uidGen(undefined, 6);
         if (item.id === pid) {
         if (item.id === pid) {
           if (item.child && item.child.length > 0) {
           if (item.child && item.child.length > 0) {
-            item.child.push({ id, type: 'STRING', pid, code, title: code });
+            item.child.push({ id, type: 'STRING', pid, code, title: '' });
           } else {
           } else {
-            item.child = [{ id, type: 'STRING', pid, code, title: code }];
+            item.child = [{ id, type: 'STRING', pid, code, title: '' }];
           }
           }
         } else {
         } else {
           if (item.child) {
           if (item.child) {
@@ -613,13 +614,32 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
 
 
   // 渲染节点
   // 渲染节点
   const renderTitle = (nodeData: any) => {
   const renderTitle = (nodeData: any) => {
+    let level = [];
+    const treeList = generateList(treeData);
+    const loop = (list: any[]) => {
+      if (!!list.pid) {
+        const index = treeList.findIndex((o: any) => o.id === list.pid);
+        level.push(treeList[index]);
+        loop(treeList[index]);
+      } else {
+        return level;
+      }
+    };
+    loop(nodeData);
+    const treeLevel2 = !!nodeData.pid ? level.length : 0;
+    const treeLevel = nodeData.child && nodeData.child.length > 0 ? 1 : 0;
+    const leftD = 22 + treeLevel * 22 + treeLevel2 * 24;
     const strTitle = (nodeData.title as string) || '';
     const strTitle = (nodeData.title as string) || '';
     const index = strTitle.indexOf(searchValue);
     const index = strTitle.indexOf(searchValue);
     const isShowTree = checkShowTree(nodeData);
     const isShowTree = checkShowTree(nodeData);
     const disabled = !!props.type ? true : nodeData.disabled;
     const disabled = !!props.type ? true : nodeData.disabled;
     return (
     return (
       <div>
       <div>
-        <Icon component={SubDropIcon} className="drop-icon" />
+        <Icon
+          component={SubDropIcon}
+          className={`drop-icon`}
+          style={{ left: `-${leftD}px` }}
+        />
         <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
         <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
           <div
           <div
             style={{
             style={{
@@ -650,15 +670,17 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
                 })}
                 })}
               </Select>
               </Select>
               {(nodeData.type === 'OBJECT' || nodeData.type === 'ARRAY') &&
               {(nodeData.type === 'OBJECT' || nodeData.type === 'ARRAY') &&
-                isShowTree && (
-                  <Button
-                    icon={<Icon component={SubNodeIcon} />}
-                    disabled={disabled}
-                    type="link"
-                    className="title-btn"
-                    onClick={() => onAddTree(nodeData.id)}
-                  />
-                )}
+              isShowTree ? (
+                <Button
+                  icon={<Icon component={SubNodeIcon} />}
+                  disabled={disabled}
+                  type="link"
+                  className="title-btn"
+                  onClick={() => onAddTree(nodeData.id)}
+                />
+              ) : (
+                <div style={{ opacity: 0, height: 32, width: 32 }} />
+              )}
               <Button
               <Button
                 className="title-btn-del"
                 className="title-btn-del"
                 icon={
                 icon={
@@ -674,7 +696,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
             </div>
             </div>
             <div className="opt-left">
             <div className="opt-left">
               <Input
               <Input
-                className={index > -1 && searchValue ? 'search-selected' : ''}
+                status={!nodeData.title ? 'error' : ''}
+                placeholder={!nodeData.title ? '请输入参数名' : ''}
+                className={
+                  index > -1 && searchValue ? 'search-selected' : 'sp-input'
+                }
                 draggable={true}
                 draggable={true}
                 onDragStart={(event) => {
                 onDragStart={(event) => {
                   event.stopPropagation();
                   event.stopPropagation();

@@ -32,15 +32,47 @@
   margin-top: 20px;
   margin-top: 20px;
 
 
   .ant-tree .ant-tree-switcher {
   .ant-tree .ant-tree-switcher {
-    // margin-top: 6.5px;
-    width: 34px;
+    // width: 34px;
+    margin-top: 11.5px;
+    display: flex;
+    // justify-content: flex-end;
+  }
+
+  .ant-tree-switcher_open,
+  .ant-tree-switcher_close {
     margin-top: 11.5px;
     margin-top: 11.5px;
     margin-right: 10px;
     margin-right: 10px;
+    margin-left: 10px;
     display: flex;
     display: flex;
     justify-content: flex-end;
     justify-content: flex-end;
   }
   }
+
+  .drop-icon {
+    &-child {
+      left: -42px !important;
+      position: absolute;
+      top: 10px;
+      opacity: 1;
+      display: block;
+    }
+  }
 }
 }
 
 
+// .ant-tree-treenode-leaf-last {
+//   .ant-tree-switcher {
+//     // width: 34px;
+
+//   }
+
+//   .drop-icon {
+//     position: absolute;
+//     top: 10px;
+//     left: -42px !important;
+//     opacity: 1;
+//     display: block;
+//   }
+// }
+
 .border-none
 .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-customize-input
@@ -130,6 +162,12 @@
   .ant-input-affix-wrapper {
   .ant-input-affix-wrapper {
     border-color: @N4;
     border-color: @N4;
   }
   }
+
+  .sp-input {
+    &::placeholder {
+      color: red !important;
+    }
+  }
 }
 }
 
 
 .opt-left-down {
 .opt-left-down {
@@ -270,7 +308,7 @@
 .drop-icon {
 .drop-icon {
   position: absolute;
   position: absolute;
   top: 10px;
   top: 10px;
-  left: -46px;
+  left: -22px;
   opacity: 1;
   opacity: 1;
   display: block;
   display: block;
 }
 }
@@ -287,7 +325,7 @@
     .drop-icon {
     .drop-icon {
       position: absolute;
       position: absolute;
       top: 10px;
       top: 10px;
-      left: -46px;
+      left: -22px;
       opacity: 1;
       opacity: 1;
       display: block;
       display: block;
     }
     }