feat: 表单参数添加选择列表

陈洋
1 parent 7c35ecb7
Showing 9 changed files with 413 additions and 90 deletions
src/qx-field-setter/index.less
src/qx-form-select/index.md
src/qx-form-select/index.tsx
src/qx-input-select/index.tsx
src/qx-parameter-setting/ParameterModal.tsx
src/qx-parameter-setting/index.tsx
src/qx-parameter-setting/mock.ts
src/qx-parameter-setting/style.less
src/qx-parameter-setting/sub-node.svg
--- a/src/qx-field-setter/index.less
View file @ac7c1ea
+++ b/src/qx-field-setter/index.less
View file @ac7c1ea
@@ -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;
   }
--- a/src/qx-form-select/index.md
View file @ac7c1ea
+++ b/src/qx-form-select/index.md
View file @ac7c1ea
 ### 选择表单
 ```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({});
--- a/src/qx-form-select/index.tsx
View file @ac7c1ea
+++ b/src/qx-form-select/index.tsx
View file @ac7c1ea
@@ -80,11 +80,12 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
           ),
         }}
         disabled={disabled}
+        popupOnBody={props?.popupOnBody}
       />
       {state.modalVisible ? (
         <QxAppSelector
-          title={title || placeholder || "选择数据源"}
+          title={title || placeholder || '选择数据源'}
           item={{
             flag: 'SINGLE',
             currentId: '',
@@ -113,6 +114,7 @@ interface FormSelectProps extends InputSelectProps {
   appId?: string;
   request?: any;
   disabled?: boolean;
+  popupOnBody?: boolean;
 }
 interface FormSelectState {
   visible: boolean;
--- a/src/qx-input-select/index.tsx
View file @ac7c1ea
+++ b/src/qx-input-select/index.tsx
View file @ac7c1ea
@@ -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;
--- a/src/qx-parameter-setting/ParameterModal.tsx
View file @ac7c1ea
+++ b/src/qx-parameter-setting/ParameterModal.tsx
View file @ac7c1ea
 /* 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>
@@ -648,6 +648,28 @@ 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 +700,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 +1063,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
--- a/src/qx-parameter-setting/index.tsx
View file @ac7c1ea
+++ b/src/qx-parameter-setting/index.tsx
View file @ac7c1ea
 /* 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>
   );
--- a/src/qx-parameter-setting/mock.ts 0 → 100644
View file @ac7c1ea
+++ b/src/qx-parameter-setting/mock.ts 0 → 100644
View file @ac7c1ea
+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',
+    },
+  },
+];
--- a/src/qx-parameter-setting/style.less
View file @ac7c1ea
+++ b/src/qx-parameter-setting/style.less
View file @ac7c1ea
@@ -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;
+  }
+}
--- a/src/qx-parameter-setting/sub-node.svg 0 → 100644
View file @ac7c1ea
+++ b/src/qx-parameter-setting/sub-node.svg 0 → 100644
View file @ac7c1ea
+<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>