pref: 根据antd5 做迭代处理；以及 lodash 全局处理为按需引用

@@ -4,7 +4,7 @@ export default defineConfig({
   apiParser: {},
   outputPath: 'docs-dist',
   themeConfig: {
-    name: '@qx/common ',
+    name: '@qx/common',
   },
   resolve: {
     // 配置入口文件路径，API 解析将从这里开始

@@ -11,6 +11,7 @@
       "dependencies": {
         "@ant-design/icons": "^5.2.5",
         "@qx/ui": "0.0.3-beta.1",
+        "classnames": "^2.3.2",
         "codemirror": "5.65.8",
         "dayjs": "^1.11.9",
         "lodash-es": "^4.17.21",

@@ -49,7 +49,8 @@
     "dayjs": "^1.11.9",
     "lodash-es": "^4.17.21",
     "rc-virtual-list": "^3.4.13",
-    "react-codemirror2": "^7.2.1"
+    "react-codemirror2": "^7.2.1",
+    "classnames": "^2.3.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",

 export * from './qx-filter-condition';
 export * from './qx-parameter-setting';
 export * from './qx-sort-condition';
+export * from './qx-base-icon';
 // export * from './qx-btn';
 // export { default as FieldSetter } from './qx-field-setter';

-import { DownOutlined, SearchOutlined } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 import {
   Input,
   Menu,
@@ -10,7 +10,7 @@ import {
   // TreeSelect,
   Typography,
 } from 'antd';
-import _ from 'lodash';
+import { cloneDeep } from 'lodash-es';
 import React, { useEffect, useMemo, useState } from 'react';
 import {
   getAggreList,
@@ -20,6 +20,7 @@ import {
 } from './service';
 // import { FRWidgetProps } from '@/packages/qx-form-generator/src';
 import type { ModalProps } from 'antd';
+import {QxBaseIcon} from '@qx/common';
 
 import './styles.less';
 
@@ -80,6 +81,9 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
     const _item = props.item || {};
     let targetItem: any = {};
     getAppList(request, { from: props.from }).then((res: any) => {
+      if (!res?.length) {
+        return;
+      }
       // eslint-disable-next-line array-callback-return
       res.map((item: any) => {
         if (item.code === _item['currentId']) {
@@ -192,6 +196,9 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
     } else {
       if (e.target.value === 'join' && !aggreList.length) {
         getAggreList(request).then((res: any) => {
+          if (!res?.length) {
+            return;
+          }
           // eslint-disable-next-line array-callback-return
           res.map((item: any) => {
             item.label = item.name;
@@ -240,7 +247,7 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
 
     const filter = (word: string) => {
       if (list) {
-        const _data = _.cloneDeep(list);
+        const _data = cloneDeep(list);
         _data.forEach((it: Item) => {
           it.deleted = !(it.name.indexOf(word) > -1);
         });
@@ -264,7 +271,7 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
             className={'qx-selector-sub-search'}
             placeholder={'输入名称，回车搜索'}
             allowClear
-            prefix={<SearchOutlined />}
+            prefix={<QxBaseIcon type={'icon-app-search-line'} />}
             onChange={(e) => {
               handleChange(e.target.value);
             }}

+@import '~@qx/ui/src/style/variable.less';
+
 .ant-input.select-source {
   display: flex;
   flex-direction: row;
@@ -13,7 +15,7 @@
 
   > .anticon {
     padding: 0 6px;
-    color: rgba(0, 0, 0, 25%);
+    color: @N5;
     font-size: 12px;
   }
 }

+@import '~@qx/ui/src/style/variable.less';
+
 .qx-formula-cm {
   .CodeMirror {
     height: auto;
@@ -6,8 +8,8 @@
 }
 
 .cm-bg .CodeMirror {
-  background-color: #f9f9f9 !important;
-  border: 1px solid #e7e6e6;
+  background-color: @N2 !important;
+  border: 1px solid @N4;
 }
 
 .qx-copy-send-cm {
@@ -22,6 +24,6 @@
   position: absolute;
   right: 8px;
   bottom: 8px;
-  color: #bcb9b9;
+  color: @N4;
   font-size: 14px;
 }

 import React, { useEffect, useState } from 'react';
 import { UnControlled as CodeMirror } from 'react-codemirror2';
-import _ from 'lodash';
+import { cloneDeep, flatten, sortBy, size, isEqual, forEach, debounce } from 'lodash-es';
 import type { VariableMappingProps } from '../qx-field-setter';
 import funObjects from './functions';
 import 'codemirror/lib/codemirror.css';
@@ -36,7 +36,7 @@ export type VariableProps = {
  * @param code
  */
 export const getAllVariable = (code: string) => {
-  let codeLocal: string = _.clone(code);
+  let codeLocal: string = cloneDeep(code);
   if (!codeLocal) {
     return [];
   }
@@ -126,11 +126,11 @@ const CodeEditor: React.FC<CodeHighLightProps> = ({
   const [isInitDone, setIsInitDone] = useState<boolean>(false);
   const [focusFun, setFocusFun] = useState<string>();
 
-  const funObjs = _.flatten(funObjects.map((item: any) => item.children));
+  const funObjs = flatten(funObjects.map((item: any) => item.children));
   const funObjSimple = {};
   funObjs.map((item) => Object.assign(funObjSimple, { [item.title]: item.title }));
   // 以变量字符长度排序，确保`DATAIF`比`IF`优先匹配
-  const funObjsSort = _.sortBy(funObjs, function (o) {
+  const funObjsSort = sortBy(funObjs, function (o) {
     return 0 - o.title.length;
   });
 
@@ -141,7 +141,7 @@ const CodeEditor: React.FC<CodeHighLightProps> = ({
         setValueLocal(value);
       }
 
-      if (_.size(variableObj) > 0) {
+      if (size(variableObj) > 0) {
         setVariableObjLocal(variableObj);
       }
     }
@@ -180,7 +180,7 @@ const CodeEditor: React.FC<CodeHighLightProps> = ({
         return;
       }
 
-      const code = _.cloneDeep(editor.getValue());
+      const code = cloneDeep(editor.getValue());
       // 换行分隔
       const codeArr = code.split('\n');
       const variReplace = (cm: any, line: number) => {
@@ -276,7 +276,7 @@ const CodeEditor: React.FC<CodeHighLightProps> = ({
     cmUtils.variableRender(editor);
 
     // TODO 默认值bug修复 暂时注释
-    // const isSame = _.isEqual(valueLocal, val);
+    // const isSame = isEqual(valueLocal, val);
     // if (isSame) {
     //   return;
     // }
@@ -310,7 +310,7 @@ const CodeEditor: React.FC<CodeHighLightProps> = ({
     let flag: boolean = false;
     let funName: string = '';
 
-    _.forEach(funObjsSort, (v) => {
+    forEach(funObjsSort, (v) => {
       if (flag) {
         return;
       }
@@ -351,7 +351,7 @@ const CodeEditor: React.FC<CodeHighLightProps> = ({
           // 滚动（false，默认）或自动换行
           lineWrapping: true,
         }}
-        onChange={_.debounce(onValueChange, 300)}
+        onChange={debounce(onValueChange, 300)}
         onCursor={(editor) => {
           const funName = findFocusFun(editor);
           setFocusFun(funName);

@@ -31,7 +31,7 @@
     cursor: pointer;
 
     &:hover {
-      background-color: @item-hover-bg;
+      background-color: @N3;
     }
   }
 }
@@ -44,7 +44,7 @@
   &.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
     margin-top: 0;
     margin-bottom: 1px;
-    background-color: #fafafa;
+    background-color: @N2;
   }
 
   .ant-menu-sub.ant-menu-inline {
@@ -59,7 +59,7 @@
 
     &:hover {
       color: inherit;
-      background-color: @item-hover-bg;
+      background-color: @N3;
     }
   }
 
@@ -74,5 +74,5 @@
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 24px;
-  border-top: 1px solid #f0f0f0;
+  border-top: 1px solid @N4;
 }

@@ -5,7 +5,7 @@ import type { ReactElement } from 'react';
 import { useEffect, useState } from 'react';
 import QxFieldItem from '../qx-field/src/item';
 import { useDebounceFn } from 'ahooks';
-import _ from 'lodash';
+import { isEmpty } from 'lodash-es';
 import { QxBaseIcon } from '../qx-base-icon';
 import './index.less';
 
@@ -100,7 +100,7 @@ export const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => {
     });
   };
   useEffect(() => {
-    if (!_.isEmpty(props.data)) {
+    if (!isEmpty(props.data)) {
       const _fields = excludeFields(props.data);
       setFields(_fields);
       setFilterFields(_fields);
@@ -316,10 +316,9 @@ export const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => {
       // getPopupContainer={(triggerNode) => triggerNode}
       content={fieldsPopContent()}
       placement={'bottomRight'}
-      // TODO 默认hover改成click 因为个别电脑输入法 输入会触发气泡的失焦事件 弹框消失
-      trigger={props.disabled ? '' : props.trigger || 'click'}
-      visible={visible}
-      onVisibleChange={(v) => {
+      trigger={props.disabled ? undefined : props.trigger || 'click'}
+      open={visible}
+      onOpenChange={(v) => {
         if (!v) {
           setTimeout(() => {
             setKeyword('');

@@ -194,10 +194,10 @@ export const OrgSetter: React.FC<OrgSetterProps> = ({
         overlayClassName={'qx-pop-select'}
         getPopupContainer={(triggerNode) => triggerNode}
         arrowContent={false}
-        visible={popVisible}
-        onVisibleChange={handlePopVisibleChange}
+        open={popVisible}
+        onOpenChange={handlePopVisibleChange}
         placement="bottom"
-        trigger={disabled ? '' : 'click'}
+        trigger={disabled ? undefined : 'click'}
       >
         <div
           style={style || {}}

 import React, { useEffect, useState, useMemo, useRef } from 'react';
 import { Input, Cascader } from 'antd';
 import { getDictDetail } from '../service';
-import _ from 'lodash';
+import { cloneDeep, isEqual, isEmpty } from 'lodash-es';
 
 export interface FRWidgetProps {
   title?: string;
@@ -96,7 +96,7 @@ const QxAddress: React.FC<FRWidgetProps> = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
     const options: any = [];
     Object.keys(opArr).forEach((key) => {
-      let num = _.cloneDeep(level);
+      let num = cloneDeep(level);
       const option: any = {
         value: opArr[key].value,
         label: opArr[key].label,
@@ -142,10 +142,10 @@ const QxAddress: React.FC<FRWidgetProps> = (props) => {
       _localCasValue = [];
       _localTextValue = '';
     }
-    if (!_.isEqual(_localCasValue, localCasValue)) {
+    if (!isEqual(_localCasValue, localCasValue)) {
       setLocalCasValue(_localCasValue);
     }
-    if (!_.isEqual(_localTextValue, localTextValue)) {
+    if (!isEqual(_localTextValue, localTextValue)) {
       setLocalTextValue(_localTextValue);
     }
   }, [props.value]);
@@ -191,10 +191,10 @@ const QxAddress: React.FC<FRWidgetProps> = (props) => {
 
   const handleChange = (changeObj: any) => {
     const newObj = { localCasValue, localTextValue, ...changeObj };
-    if (!_.isEqual(localCasValue, newObj.localCasValue)) {
+    if (!isEqual(localCasValue, newObj.localCasValue)) {
       setLocalCasValue(newObj.localCasValue);
     }
-    if (!_.isEqual(localTextValue, newObj.localTextValue)) {
+    if (!isEqual(localTextValue, newObj.localTextValue)) {
       setLocalTextValue(newObj.localTextValue);
     }
 
@@ -248,7 +248,7 @@ const QxAddress: React.FC<FRWidgetProps> = (props) => {
         />
         {detail ? (
           <Input
-            disabled={props.disabled || _.isEmpty(localCasValue) || isDisabled}
+            disabled={props.disabled || isEmpty(localCasValue) || isDisabled}
             //  defaultValue={finalProps.textDefaultValue}
             value={localTextValue}
             style={{ marginTop: '10px' }}

 import React, { useEffect, useState } from 'react';
 import { Empty, Input, List, Modal, Tag } from 'antd';
-import { CheckOutlined, CloseOutlined, SearchOutlined } from '@ant-design/icons';
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { getPreviewSelect, getSelect } from '../service';
 import VirtualList from 'rc-virtual-list';
 import { ParamValueType } from '../../qx-filter-condition/filter';
@@ -14,6 +14,7 @@ interface UserSelectProps {
   getName: (str: string[]) => string;
   modalClassName?: string | undefined; // 弹框类名自定义 用于自定义以及覆盖样式
 }
+import {QxBaseIcon} from '@qx/common';
 
 const CONTAINER_HEIGHT = 300;
 
@@ -273,8 +274,8 @@ export const RelSetter: React.FC<UserSelectProps> = ({
         title="选择"
         width={'640px'}
         className={'qx-table-selector'}
-        visible={visible}
-        destroyOnClose={true}
+        open={visible}
+        destroyOnClose
         onOk={handleOk}
         onCancel={handleCancel}
         wrapClassName={props?.modalClassName || ''}
@@ -285,7 +286,7 @@ export const RelSetter: React.FC<UserSelectProps> = ({
               className={'qx-selector-sub-search'}
               placeholder={'输入关键字，回车搜索'}
               allowClear
-              prefix={<SearchOutlined />}
+              prefix={<QxBaseIcon type={'icon-app-search-line'} />}
               onChange={handleChange}
               onPressEnter={(e) => {
                 handleSearch(e);

 import React, { useCallback, useEffect, useState } from 'react';
 import { Empty, Input, Modal, Spin, Tag, Tree } from 'antd';
-import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
+import { CloseOutlined } from '@ant-design/icons';
 import { getPreviewSelect, getSelect } from '../service';
 import { ParamValueType } from '../../qx-filter-condition/filter';
+import {QxBaseIcon} from '@qx/common';
 
 interface UserSelectProps {
   value?: string[];
@@ -295,8 +296,8 @@ export const RelTreeSetter: React.FC<UserSelectProps> = ({
         title="选择"
         width={'640px'}
         className={'qx-table-selector'}
-        visible={visible}
-        destroyOnClose={true}
+        open={visible}
+        destroyOnClose
         onOk={handleOk}
         onCancel={handleCancel}
         wrapClassName={props?.modalClassName || ''}
@@ -307,7 +308,7 @@ export const RelTreeSetter: React.FC<UserSelectProps> = ({
             style={{ borderBottom: '1px solid #f0f0f0' }}
             placeholder={'请输入关键字，按回车键搜索'}
             allowClear
-            prefix={<SearchOutlined />}
+            prefix={<QxBaseIcon type={'icon-app-search-line'} />}
             onChange={(e) => {
               handleChange(e);
             }}

@@ -196,10 +196,10 @@ export const UserSetter: React.FC<UserSelectProps> = ({
         overlayClassName={'qx-pop-select'}
         getPopupContainer={(triggerNode) => triggerNode}
         arrowContent={false}
-        visible={popVisible}
-        onVisibleChange={handlePopVisibleChange}
+        open={popVisible}
+        onOpenChange={handlePopVisibleChange}
         placement="bottom"
-        trigger={disabled ? '' : 'click'}
+        trigger={disabled ? undefined : 'click'}
       >
         <div
           style={style || {}}

@@ -14,7 +14,7 @@ import moment from 'dayjs';
 import type { MappingValueProps } from '../qx-filter-condition/filter';
 import CodeEditor, { getAllVariable, VariableProps } from '../qx-code-editor';
 import { CloseOutlined, ControlOutlined, RightOutlined } from '@ant-design/icons';
-import _ from 'lodash';
+import { cloneDeep, isEqual, isEmpty, findIndex, size } from 'lodash-es';
 import { RelTreeSetter } from './components/rel-tree-setter';
 import { AddressSetter } from './components/address-setter';
 import {QxFieldPopover} from '../qx-field-popover';
@@ -185,11 +185,11 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
   const currentElem = useRef<any>();
   const [valueLocal, setValueLocal] = useState<MappingValueProps[]>();
   useEffect(() => {
-    setValueLocal(_.cloneDeep(value));
+    setValueLocal(cloneDeep(value));
   }, [JSON.stringify(value)]);
 
   useEffect(() => {
-    const isSame = _.isEqual(value, valueLocal);
+    const isSame = isEqual(value, valueLocal);
     if (!valueLocal || isSame) {
       if (props.formula === 'MOD' && (valueLocal || []).length > 2) {
         onChange((valueLocal || []).slice(0, 2));
@@ -290,7 +290,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
     index?: number,
     isReplace?: boolean,
   ) => {
-    const valCp: string[] = _.cloneDeep(val);
+    const valCp: string[] = cloneDeep(val);
     let valueFin: string[] = valCp;
     if (isMultiTag) {
       if (Boolean(isReplace)) {
@@ -313,14 +313,14 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
     }
 
     if (isRange) {
-      const oldVal = _.cloneDeep(valueLocal || []).map((v) => v.value) || [];
-      oldVal[index || 0] = _.cloneDeep(valueFin)[0];
+      const oldVal = cloneDeep(valueLocal || []).map((v) => v.value) || [];
+      oldVal[index || 0] = cloneDeep(valueFin)[0];
       valueFin = oldVal;
     }
     const mappingValuesNew: MappingValueProps[] = [];
     (valueFin || []).map((v: string) => {
       if (isMultiTag) {
-        const i = _.findIndex(mappingValuesNew, (o: any) => {
+        const i = findIndex(mappingValuesNew, (o: any) => {
           return o.type === valueType && o.value === v;
         });
         if (i > -1) {
@@ -342,7 +342,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
 
   const onFilterExtValueChange = (val: any) => {
     setValueLocal((prevState) => {
-      const valCp = _.cloneDeep(prevState);
+      const valCp = cloneDeep(prevState);
       if (valCp && valCp?.length > 0) {
         valCp[0].extVal = val || '';
       }
@@ -580,7 +580,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
    * @param type
    */
   function getMappingValues(mValues: MappingValueProps[], type?: ParamValueType) {
-    if (!mValues || _.size(mValues) === 0) {
+    if (!mValues || size(mValues) === 0) {
       return [];
     }
     if (type) {
@@ -592,7 +592,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
   }
 
   function getMappingExtValue(mValues: MappingValueProps[], type?: ParamValueType) {
-    if (!mValues || _.size(mValues) === 0) {
+    if (!mValues || size(mValues) === 0) {
       return [];
     }
     if (type) {
@@ -767,7 +767,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
   );
 
   // "值选项集"按查询参数对应类型过滤
-  const colsTreeCurr = _.cloneDeep(colsTree);
+  const colsTreeCurr = cloneDeep(colsTree);
   // 是人员、组织、日期类型时，按类型过滤数据
   let colsTreeProps = colsTreeCurr || [];
   // 类型匹配处理，当前为只列出类型相同的属性 todo
@@ -776,7 +776,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
   }
 
   // 禁用选项
-  if (excludeKeys && _.size(excludeKeys) > 0) {
+  if (excludeKeys && size(excludeKeys) > 0) {
     colsTreeProps = colsTreeProps?.filter((co: ColsTreeProps) => excludeKeys.includes(co.key));
     colsTreeProps.map((col) => {
       col.children = col?.children?.filter((co: ColsTreeProps) => excludeKeys.includes(co.key));
@@ -1326,7 +1326,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
                   // 原值类型
                   let valueType: any;
                   // 查询原值（如果存在于`valueLocal`下）类型
-                  const i = _.findIndex(valueLocal, (it) => {
+                  const i = findIndex(valueLocal, (it) => {
                     return it?.value === val[0];
                   });
 
@@ -1519,7 +1519,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
           }
           placeholder="请输入日期（时间）"
           defaultValue={
-            !_.isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
+            !isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
               ? moment(
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   formatEnum[
@@ -1533,7 +1533,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
               : undefined
           }
           value={
-            !_.isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
+            !isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
               ? moment(
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   formatEnum[
@@ -1555,7 +1555,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
           style={{ width: '100%', marginTop: '6px' }}
           placeholder="请输入时间"
           defaultValue={
-            !_.isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
+            !isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
               ? moment(
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   formatEnum[
@@ -1569,7 +1569,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
               : undefined
           }
           value={
-            !_.isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
+            !isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
               ? moment(
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   formatEnum[
@@ -1594,7 +1594,7 @@ export const FieldSetter: React.FC<paramColSelectProps> = ({
           }
           onChange={(date, dateString) => {
             setValueLocal((prevState) => {
-              let valCp: any = _.cloneDeep(prevState);
+              let valCp: any = cloneDeep(prevState);
               if (valCp && valCp?.length > 0) {
                 valCp[0].value = '__action_time';
                 valCp[0].extVal = dateString || '';

@@ -5,9 +5,9 @@ import { FC, ReactElement, useEffect, useState } from 'react';
 import type { OptionField } from '../type';
 import { getUsefulFieldProp } from '../util';
 import QxFieldItem from '../item';
-import { SearchOutlined } from '@ant-design/icons';
 import './style.less';
 import Checkbox from 'antd/es/checkbox/Checkbox';
+import {QxBaseIcon} from '@qx/common';
 
 interface QxFieldPopoverProp {
   data: OptionField[];
@@ -42,7 +42,7 @@ const FieldsCheckboxGroup: FC<FieldsCheckboxGroupProps> = (props) => {
         className={'qx-selector-sub-search'}
         placeholder={'请输入字段名'}
         allowClear
-        prefix={<SearchOutlined />}
+        prefix={<QxBaseIcon type={'icon-app-search-line'} />}
         onChange={(e) => {
           setKey(e.target.value.trim());
         }}
@@ -90,6 +90,7 @@ interface QxCheckboxFieldPopoverProp extends QxFieldPopoverProp {
     isChecked: boolean,
   ) => void;
   values?: string[];
+  children?: any;
 }
 
 const QxCheckboxFieldPopover: React.FC<QxCheckboxFieldPopoverProp> = (props) => {
@@ -131,13 +132,13 @@ const QxCheckboxFieldPopover: React.FC<QxCheckboxFieldPopoverProp> = (props) =>
         <FieldsCheckboxGroup fields={fields} onChange={props.onChange} values={props.values} />
       }
       placement={'bottomRight'}
-      trigger={props.disabled ? '' : props.trigger || 'hover'}
-      visible={visible}
-      onVisibleChange={(v) => {
+      trigger={props.disabled ? undefined : props.trigger || 'hover'}
+      open={visible}
+      onOpenChange={(v) => {
         setVisible(v);
       }}
     >
-      {props.children}
+      {props?.children}
     </Popover>
   );
 };

@@ -7,11 +7,10 @@ import type { OptionField } from '../type';
 import { getUsefulFieldProp } from '../util';
 // import {flatFields, getUsefulFieldProp} from '../util';
 import QxFieldItem from '../item';
-// import classNames from "classnames";
-import { SearchOutlined } from '@ant-design/icons';
+import {QxBaseIcon} from '@qx/common';
 import './style.less';
 import { useDebounceFn } from 'ahooks';
-import _ from 'lodash';
+import { isEmpty } from 'lodash-es';
 
 interface QxFieldPopoverProp {
   data: OptionField[];
@@ -55,7 +54,7 @@ const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => {
     });
   };
   useEffect(() => {
-    if (!_.isEmpty(props.data)) {
+    if (!isEmpty(props.data)) {
       const _fields = excludeFields(props.data);
       setFields(_fields);
       setFilterFields(_fields);
@@ -132,7 +131,7 @@ const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => {
               className={'qx-selector-sub-search'}
               placeholder={'搜索'}
               allowClear
-              prefix={<SearchOutlined />}
+              prefix={<QxBaseIcon type={'icon-app-search-line'} />}
               style={{ paddingTop: '6px' }}
               onChange={(e) => {
                 handleChange(e.target.value);
@@ -242,13 +241,13 @@ const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => {
       // getPopupContainer={(triggerNode) => triggerNode}
       content={fieldsPopContent()}
       placement={'bottomRight'}
-      trigger={props.disabled ? '' : props.trigger || 'hover'}
-      visible={visible}
-      onVisibleChange={(v) => {
+      trigger={props.disabled ? undefined : props.trigger || 'hover'}
+      open={visible}
+      onOpenChange={(v) => {
         setVisible(v);
       }}
     >
-      {props.children}
+      {props?.children}
     </Popover>
   );
 };

+@import '~@qx/ui/src/style/variable.less';
+
 .qx-fields-popover {
   padding-top: 0;
 
@@ -22,7 +24,7 @@
     cursor: pointer;
 
     &:hover {
-      background-color: @item-hover-bg;
+      background-color: @N3;
     }
   }
 }
@@ -35,7 +37,7 @@
   &.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
     margin-top: 0;
     margin-bottom: 1px;
-    background-color: #fafafa;
+    background-color: @N2;
   }
 
   .ant-menu-sub.ant-menu-inline {
@@ -50,7 +52,7 @@
 
     &:hover {
       color: inherit;
-      background-color: @item-hover-bg;
+      background-color: @N3;
     }
   }
 }
@@ -58,5 +60,5 @@
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 24px;
-  border-top: 1px solid #f0f0f0;
+  border-top: 1px solid @N4;
 }

@@ -2,7 +2,7 @@ import { Input, Popover, Tree } from 'antd';
 import React from 'react';
 import { FC, ReactElement, useEffect, useState } from 'react';
 import type { OptionField } from '../type';
-import { SearchOutlined } from '@ant-design/icons';
+import {QxBaseIcon} from '@qx/common';
 import './style.less';
 
 interface QxFieldPopoverProp {
@@ -29,8 +29,8 @@ const ParametersTreeGroup: FC<FieldsCheckboxGroupProps> = (props) => {
   const [keyword, setKey] = useState('');
 
   const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
-  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
-  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
+  const [expandedKeys, setExpandedKeys] = useState<any>([]);
+  const [checkedKeys, setCheckedKeys] = useState<any>([]);
 
   const [treeData, setTreeData] = useState<any[]>([]);
 
@@ -67,7 +67,7 @@ const ParametersTreeGroup: FC<FieldsCheckboxGroupProps> = (props) => {
     setAutoExpandParent(false);
   };
 
-  const onCheck = (checkedKeysValue: React.Key[], Item: any) => {
+  const onCheck = (checkedKeysValue: any, Item: any) => {
     console.log('onCheck', checkedKeysValue, Item, checkedKeysValue?.checked);
     setCheckedKeys(checkedKeysValue);
     const chooseId = Item?.node?.id;
@@ -83,7 +83,7 @@ const ParametersTreeGroup: FC<FieldsCheckboxGroupProps> = (props) => {
 
   const KeysArr: any[] = [];
   const loop = (data: any): any =>
-    data.map((item) => {
+    data.map((item: any) => {
       const strTitle = item.title as string;
       const index = strTitle.indexOf(keyword);
       const beforeStr = strTitle.substring(0, index);
@@ -123,7 +123,7 @@ const ParametersTreeGroup: FC<FieldsCheckboxGroupProps> = (props) => {
         className={'qx-selector-sub-search'}
         placeholder={'请输入参数名称搜索'}
         allowClear
-        prefix={<SearchOutlined />}
+        prefix={<QxBaseIcon type={'icon-app-search-line'} />}
         onChange={(e) => {
           setKey(e.target.value.trim());
         }}
@@ -152,6 +152,7 @@ const ParametersTreeGroup: FC<FieldsCheckboxGroupProps> = (props) => {
 interface QxTreeParameterPopoverProp extends QxFieldPopoverProp {
   onChange: (selectedKey: string, selectedItem: OptionField, isChecked: boolean) => void;
   values?: string[];
+  children?: any;
 }
 
 const QxTreeParameterPopover: React.FC<QxTreeParameterPopoverProp> = (props) => {
@@ -172,7 +173,7 @@ const QxTreeParameterPopover: React.FC<QxTreeParameterPopoverProp> = (props) =>
     // console.log(props.data);
     if (props.data) {
       const _fields = excludeFields(props?.data);
-      setFields(_fields);
+      setFields(_fields || []);
     }
   }, [props.data]);
 
@@ -183,13 +184,13 @@ const QxTreeParameterPopover: React.FC<QxTreeParameterPopoverProp> = (props) =>
         <ParametersTreeGroup fields={fields} onChange={props.onChange} values={props.values} />
       }
       placement={'bottomRight'}
-      trigger={props.disabled ? '' : props.trigger || 'hover'}
-      visible={visible}
-      onVisibleChange={(v) => {
+      trigger={props.disabled ? undefined : props.trigger || 'hover'}
+      open={visible}
+      onOpenChange={(v) => {
         setVisible(v);
       }}
     >
-      {props.children}
+      {props?.children}
     </Popover>
   );
 };

@@ -87,7 +87,7 @@ const QxFieldSelect: React.FC = (props: any) => {
   useEffect(() => {
     if (schemaProps && !schemaProps.data && schemaProps.params && fields.length === 0) {
       const { ...otherParams } = schemaProps.params;
-      getFieldOptions(appCode, funCode, otherParams).then((res) => {
+      getFieldOptions(appCode, funCode, otherParams).then((res: any) => {
         setFields(includeFields(res));
       });
     } else if (schemaProps && schemaProps.data) {
@@ -126,7 +126,7 @@ const QxFieldSelect: React.FC = (props: any) => {
               // @ts-ignore
               return (
                 ((fields || []) as any)
-                  .filter((field) => field.code === option.key)[0]
+                  .filter((field: { code: string }) => field.code === option.key)[0]
                   .name?.indexOf(input) > -1
               );
             }

+@import '~@qx/ui/src/style/variable.less';
+
 .select_mask {
   position: absolute;
   z-index: 9;
   width: 100%;
   height: 100%;
   text-align: center;
-  background-color: @red-1;
-  border: 1px solid @btn-danger-border;
-  border-radius: @btn-border-radius-base;
+  background-color: @E1;
+  border: 1px solid @E2;
+  border-radius: 4px;
   pointer-events: none;
 }
 
 .select_mask_text {
   z-index: 13;
-  color: @error-color;
+  color: @E3;
   font-size: 14px;
   line-height: 30px;
   text-align: center;

@@ -29,7 +29,7 @@ export const getUsefulFieldProp = (field: any) => {
  * @param excludeWidgets
  */
 export const flatFields = (fields: WidgetField[] | OptionField[], excludeWidgets?: string[]) => {
-  const fieldFlatten = {};
+  const fieldFlatten: any = {};
   fields.forEach((field: any) => {
     const { code, widget } = getUsefulFieldProp(field);
     if (excludeWidgets && excludeWidgets.indexOf(widget) > -1) {

+import React, { useCallback, useRef } from 'react';
 import { BlockOutlined } from '@ant-design/icons';
 import { useSetState } from 'ahooks';
 import { Button } from 'antd';
 import cls from 'classnames';
-import React, { useCallback, useRef } from 'react';
 import { QxAppSelector } from '../qx-app-selector';
 import type { InputSelectProps } from '../qx-input-select';
 import { QxInputSelect } from '../qx-input-select';

+@import '~@qx/ui/src/style/variable.less';
+
 @prefix: ~'qx-datasource-select';
 
 .@{prefix} {
@@ -8,6 +10,6 @@
     height: 50px !important;
     text-align: left !important;
     background-color: #fff !important;
-    border-top: 1px solid #e6eaf2 !important;
+    border-top: 1px solid @N4 !important;
   }
 }

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { useCallback, useEffect, useImperativeHandle, useState } from 'react';
 import { Checkbox, Empty, Input, Spin } from 'antd';
 import Menu from 'antd/es/menu';
-import {  SearchOutlined } from '@ant-design/icons';
+import {QxBaseIcon} from '@qx/common';
 import { getGroups } from './service';
-import _ from 'lodash';
+import { cloneDeep } from 'lodash-es';
 
 type GroupCoreProps = {
   appId?: string;
@@ -144,7 +144,7 @@ const GroupSelCore: React.FC<GroupCoreProps> = ({
     };
 
     if (data) {
-      const _data = _.cloneDeep(data);
+      const _data = cloneDeep(data);
       _data.forEach((item) => {
         traverse(item);
       });
@@ -189,7 +189,7 @@ const GroupSelCore: React.FC<GroupCoreProps> = ({
         className={'qx-selector-sub-search'}
         placeholder={placeholder || '请输入群组名称，按回车键搜索'}
         allowClear
-        prefix={<SearchOutlined />}
+        prefix={<QxBaseIcon type={'icon-app-search-line'} />}
         onChange={(e) => {
           handleChange(e);
         }}

-import { SearchOutlined } from '@ant-design/icons';
-import { useScroll } from 'ahooks';
-import { Empty, Input, Menu, Spin } from 'antd';
-import cls from 'classnames';
-import { debounce } from 'lodash';
 import React, {
   memo,
   useCallback,
@@ -11,6 +6,11 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import {QxBaseIcon} from '@qx/common';
+import { useScroll } from 'ahooks';
+import { Empty, Input, Menu, Spin } from 'antd';
+import cls from 'classnames';
+import { debounce } from 'lodash-es';
 import './styles.less';
 const prefix = 'qx-input-select-dropdown';
 
@@ -115,7 +115,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>(
         {showSearch ? (
           <Input
             placeholder={placeholder || '输入名称搜索'}
-            prefix={<SearchOutlined />}
+            prefix={<QxBaseIcon type={'icon-app-search-line'} />}
             className={`${prefix}__input`}
             onChange={onSearch}
           />

@@ -62,11 +62,11 @@ export const QxInputSelect = React.forwardRef<any, InputSelectProps>(
     return (
       <div className={cls(prefix, className)}>
         <Dropdown
-          visible={state.visible}
+          open={state.visible}
           destroyPopupOnHide
           trigger={['click']}
           className={`${prefix}__dropdown`}
-          overlay={() => (
+          dropdownRender={() => (
             <DropdownContent
               options={options}
               onChange={handleChange}
@@ -74,7 +74,7 @@ export const QxInputSelect = React.forwardRef<any, InputSelectProps>(
             />
           )}
           getPopupContainer={(triggerNode) => triggerNode}
-          onVisibleChange={onVisibleChange}
+          onOpenChange={onVisibleChange}
           disabled={disabled}
         >
           <Input

@@ -31,7 +31,7 @@
           margin-bottom: 0;
 
           &:hover {
-            background-color: #f5f5f5;
+            background-color: @N3;
           }
         }
       }
@@ -54,7 +54,7 @@
       padding-bottom: 5px !important;
       padding-left: 0 !important;
       border: none !important;
-      border-bottom: 1px solid #e6eaf2 !important;
+      border-bottom: 1px solid @N4 !important;
       outline: none !important;
       box-shadow: none !important;
 

+@import '~@qx/ui/src/style/variable.less';
+
 .qx-search-tree__wrap {
   height: 100%;
   overflow: auto;
@@ -8,8 +10,8 @@
 
   .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
     // TODO 主题色更改 颜色暂时写死
-    color: #1764ff;
-    background-color: #e6f7ff;
+    color: @B8;
+    background-color: @B3;
   }
 }
 

@@ -3,8 +3,9 @@ import { useCallback, useEffect, useImperativeHandle, useState } from 'react';
 import { Empty, Input, Spin, Tooltip, Tree } from 'antd';
 import './core.less';
 import { getOrgTree } from './service';
-import _ from 'lodash';
-import { PartitionOutlined, SearchOutlined } from '@ant-design/icons';
+import { cloneDeep } from 'lodash-es';
+import { PartitionOutlined } from '@ant-design/icons';
+import {QxBaseIcon} from '@qx/common';
 
 type OrgCoreProps = {
   cRef?: any;
@@ -243,7 +244,7 @@ const OrgCore: React.FC<OrgCoreProps> = (props) => {
     };
 
     if (data) {
-      const _data = _.cloneDeep(data);
+      const _data = cloneDeep(data);
       if (word != '') {
         traverse(_data);
       }
@@ -301,7 +302,7 @@ const OrgCore: React.FC<OrgCoreProps> = (props) => {
         className={'qx-selector-sub-search'}
         placeholder={props.placeholder || '请输入部门名称，按回车键搜索'}
         allowClear
-        prefix={<SearchOutlined />}
+        prefix={<QxBaseIcon type={'icon-app-search-line'} />}
         onChange={(e) => {
           handleChange(e);
         }}

-import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Modal, Tag } from 'antd';
 import OrgCore from './core';
 
@@ -56,7 +55,7 @@ const OrgSelectorDialog: React.FC<OrgSelectorDialogProps> = (props) => {
     <Modal
       title={props.title || '选择部门'}
       width={560}
-      visible={props.visible}
+      open={props.visible}
       className={'qx-org-selector__dialog'}
       onOk={handleOk}
       onCancel={handleCancel}

@@ -103,7 +103,7 @@ const QxOrgSelector: React.FC<QxOrgSelectorProps> = (props) => {
   }, [JSON.stringify(props.defaultData)]);
 
   // getUserList()
-  const handleOk = (keys: [], data: []) => {
+  const handleOk = (keys: any[], data: any[]) => {
     let _value: [] | string = keys;
     if (!props.multiple && keys && keys.length > 0) {
       // @ts-ignore

+@import '~@qx/ui/src/style/variable.less';
+
 .qx-org-selector {
   padding-left: 8px;
   line-height: 0;
@@ -55,7 +57,7 @@
 
   .qx-selector-sub-search.ant-input-affix-wrapper {
     margin-bottom: 8px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid @N4;
   }
 }
 
@@ -68,7 +70,7 @@
   height: 60px;
   padding: 5px;
   overflow: auto;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid @N4;
 
   .ant-tag {
     margin: 1px 2px;
@@ -82,14 +84,14 @@
 
 .qx-org-tree__include {
   margin-left: 10px;
-  color: #999;
+  color: @N7;
   font-size: 16px;
 
   &:hover {
-    color: #333;
+    color: @N9;
   }
 
   .active {
-    color: #1890ff;
+    color: @B8;
   }
 }

@@ -3,7 +3,6 @@
 import {
   DeleteOutlined,
   PlusOutlined,
-  SearchOutlined,
   SisternodeOutlined,
   SnippetsOutlined,
 } from '@ant-design/icons';
@@ -40,8 +39,10 @@ import { formatEnum } from './constant';
 //   typeTranslateItemtype,
 // } from './constant';
 // import { Controlled as CodeMirror } from 'react-codemirror2'
-import _ from 'lodash';
+import { cloneDeep } from 'lodash-es';
 import moment from 'dayjs';
+import {QxBaseIcon} from '@qx/common';
+
 const valueOptions = [
   { key: 'STRING', title: '文本' },
   { key: 'NUMBER', title: '数字' },
@@ -125,7 +126,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
 
   //判断数组是否只有一个子节点
   const checkShowAdd = (_data: any) => {
-    const _newTreeData = _.cloneDeep(treeData);
+    const _newTreeData = cloneDeep(treeData);
     if (!!_data.pid) {
       const pidIndex = _newTreeData.findIndex(
         (item: any) => item.id === _data.pid,
@@ -870,7 +871,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       const dropId =
         dropCol.getAttribute('data-row-key') ||
         dropCol.getAttribute('id')?.slice(4);
-      const _newTreeData = _.cloneDeep(treeData);
+      const _newTreeData = cloneDeep(treeData);
       const dragIndex = _newTreeData.findIndex(
         (item: any) => item.id === dragId,
       ); //要drop的index
@@ -947,7 +948,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     <>
       <Modal
         title="高级参数设计器"
-        visible={visible}
+        open={visible}
         destroyOnClose
         footer={null}
         // onOk={handleCancel}
@@ -986,7 +987,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
               <Input
                 className={'qx-parameter-setting--search'}
                 placeholder="按名称搜索"
-                prefix={<SearchOutlined />}
+                prefix={<QxBaseIcon type={'icon-app-search-line'} />}
                 onChange={onChange}
                 style={{ width: 219 }}
               />
@@ -1019,11 +1020,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
             // <Form form={form}>
             <Table
               components={components}
-              defaultExpandAllRows
+              expandable={{
+                defaultExpandAllRows: true,
+                childrenColumnName: 'child'
+              }}
               onRow={() => onRow()}
               scroll={{ x: 1600 }}
-              childrenColumnName={'child'}
-              // className={'param-setting-table'}
               rowClassName={() => 'editable-row'}
               bordered
               pagination={false}

@@ -585,4 +585,5 @@ export interface ParamDesignModel extends DataNode {
   title?: string;
   qxProps?: any;
   child?: ParamDesignModel[];
+  mappingValues?: any;
 }

@@ -5,7 +5,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import {
   DeleteOutlined,
   PlusOutlined,
-  SearchOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
 import {
@@ -30,10 +29,12 @@ import { formatEnum } from './constant';
 //   typeTranslateItemtype,
 // } from './constant';
 
-import _ from 'lodash';
+import { cloneDeep } from 'lodash-es';
 import moment from 'dayjs';
 import type { ParamDesignModel } from './constant';
 import { uidGen } from './stringUtil';
+import {QxBaseIcon} from '@qx/common';
+
 import './style.less';
 
 const valueOptions = [
@@ -106,7 +107,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
 
   useEffect(() => {
     if (props?.value?.length > 0) {
-      const value = _.cloneDeep(props?.value);
+      const value = cloneDeep(props?.value);
       const expandedArray: any = [];
       (value || []).map((_item: ParamDesignModel) => {
         expandedArray.push(_item.id);
@@ -115,7 +116,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
       setTreeData(value);
       // const newData = generateTreeData(value, '')
       const Treelist = generateList(value);
-      const newList = _.cloneDeep(Treelist);
+      const newList = cloneDeep(Treelist);
       newList.map((_item) => {
         delete _item.child;
       });
@@ -153,7 +154,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
     data: ParamDesignModel,
     // newType: string,
   ) => {
-    let treeList = _.cloneDeep(list);
+    let treeList = cloneDeep(list);
     // todo 编辑重名bug 貌似有点问题 待修改
     treeList = (treeList || []).filter((item) => item.id != data.id);
     if (!treeList || treeList.length == 0) {
@@ -217,7 +218,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
 
     const isProps = code.indexOf('qxProps');
     const _newCode = isProps > -1 ? code.slice(8) : '';
-    const _newData = _.cloneDeep(treeData);
+    const _newData = cloneDeep(treeData);
     if (code == 'code') {
       data.code = value;
       const codeValid = validateCode(data);
@@ -290,7 +291,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
       okText: '确认',
       okType: 'danger',
       onOk: () => {
-        const listData = _.cloneDeep(treeData);
+        const listData = cloneDeep(treeData);
         // const newData = generateTreeData(listData, '');
         const loopDeleteTree = (treeList: ParamDesignModel[]) => {
           for (let i = 0; i < treeList.length; i++) {
@@ -334,7 +335,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
       }
     };
 
-    let data = _.cloneDeep(treeData);
+    let data = cloneDeep(treeData);
     // Find dragObject
     let dragObj: ParamDesignModel;
     loop(data, dragKey, (item, index, arr) => {
@@ -525,8 +526,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
   //     return undefined;
   // };
 
-  const changeField = (val: string, data: amy) => {
-    const _newData = _.cloneDeep(treeData);
+  const changeField = (val: any, data: any) => {
+    const _newData = cloneDeep(treeData);
     const _qxProps = {};
 
     const loopChangeTree = (treeList: ParamDesignModel[]) => {
@@ -543,8 +544,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
             treeList[i].mappingValues = [val[0].value];
           }
           return;
-        } else if (treeList[i].child) {
-          loopChangeTree(treeList[i].child);
+        } else if (!!treeList[i]?.child?.length) {
+          loopChangeTree(treeList[i].child || []);
         }
       }
     };
@@ -663,13 +664,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
           <Dropdown
             trigger={['click']}
             className={'hidden-select'}
-            overlay={
-              <Menu
-                items={valueOptions}
-                className={'dropdown'}
-                onClick={onSelect}
-              />
-            }
+            menu={{
+              items: valueOptions,
+              className: 'dropdown',
+              onClick: onSelect
+            }}
           >
             <Button type={'link'}>
               <PlusOutlined />
@@ -690,7 +689,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
           <Input
             className={'qx-parameter-setting--search'}
             placeholder="按名称搜索"
-            prefix={<SearchOutlined />}
+            prefix={<QxBaseIcon type={'icon-app-search-line'} />}
             onChange={onChange}
           />
         )}

+@import '~@qx/ui/src/style/variable.less';
+
 /* stylelint-disable declaration-block-no-redundant-longhand-properties */
 .border-none .ant-select:not(.ant-select-customize-input) .ant-select-selector {
   border: none;
@@ -10,22 +12,6 @@
   flex-direction: row-reverse;
   flex-wrap: nowrap;
   justify-content: space-between;
-  // flex-shrink:0;
-  // min-height: 32px;
-  // padding: 1px;
-  // position: 'relative', display: 'flex', flexWrap: 'wrap'
-
-  // > .ant-tag {
-  //   margin: 3px;
-
-  //   &:first-child {
-  //     margin-left: 10px;
-  //   }
-
-  //   ~ .qx-tags-input__box {
-  //     padding-left: 5px;
-  //   }
-  // }
 }
 
 .tree-wrapper {
@@ -36,7 +22,7 @@
     border-radius: 4px;
 
     &:hover {
-      background-color: #f4f4f5;
+      background-color: @N3;
     }
   }
 
@@ -49,24 +35,6 @@
   }
 }
 
-// .ant-tree-node-selected:hover ~ .ant-tree-treenode:hover{
-// 	background-color: #bae7ff !important;
-// }
-
-// .ant-tree-node-content-wrapper :hover ~ .ant-tree-treenode{
-// 	// background-color: #F4F4F5;
-//   // padding-top: 4px;
-// }
-
-// .tree-list :hover{
-//   background-color: #ff72;
-// }
-
-// .ant-tree .ant-tree-treenode :hover{
-//   background-color: #00f;
-//   border-radius:4px;
-// }
-
 .border-none
   .ant-select-focused:not(.ant-select-disabled).ant-select:not(
     .ant-select-customize-input
@@ -98,7 +66,7 @@
     color: #666;
 
     &:hover {
-      color: red;
+      color: @E3;
       opacity: 1;
     }
   }
@@ -131,7 +99,7 @@
   // min-width: 100px;
   margin-bottom: 2px;
   overflow: hidden;
-  text-overflow: ellipsi;
+  text-overflow: ellipsis;
 }
 
 .opt-left-down {
@@ -145,7 +113,7 @@
   margin-top: 2px;
   margin-bottom: 2px;
   overflow: hidden;
-  text-overflow: ellipsi;
+  text-overflow: ellipsis;
 }
 
 // .ant-tree-node-content-wrapper :hover .select-tree {
@@ -237,13 +205,13 @@
 
 .btn-high-del {
   &:hover {
-    color: red !important;
+    color: @E3 !important;
   }
 }
 
 .editable-row:hover .editable-cell-value-wrap {
   padding: 4px 11px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid @N4;
   border-radius: 2px;
 }
 
@@ -306,41 +274,6 @@
   text-align: center !important;
 }
 
-//TODO 写法不行
-// #root .hidden-select {
-//   .ant-select-tree
-//     .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
-//     // background-color: #bae7ff;
-//     background-color: @primary-2;
-//   }
-// }
-// .ant-form-item
-// .qx-parameter-setting__tree-list {
-//   .ant-tree-draggable-icon {
-//     line-height: 32px;
-//   }
-
-//   &.ant-tree
-//     .ant-tree-treenode:not(.ant-tree-treenode-disabled)
-//     .ant-tree-node-content-wrapper {
-//     border-radius: 4px;
-
-//     &.ant-tree-node-selected {
-//       background-color: transparent;
-//     }
-
-//     &:hover,
-//     &.ant-tree-node-selected:hover {
-//       background-color: @N3;
-//       // opacity: 1 !important;
-//       // background-color: #91d5ff;
-//     }
-//   }
-// }
-
-// .ant-form-item{
-//   margin-bottom: 0;
-// }
 
 .json-editor {
   width: 90%;

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { useCallback, useEffect, useImperativeHandle, useState } from 'react';
 import { Checkbox, Empty, Input, Spin } from 'antd';
 import { getPositions } from './service';
-import _ from 'lodash';
-import { SearchOutlined } from '@ant-design/icons';
+import { cloneDeep } from 'lodash-es';
+import {QxBaseIcon} from '@qx/common';
 import Menu from 'antd/es/menu';
 
 type PosCoreProps = {
@@ -143,7 +143,7 @@ const PosCore: React.FC<PosCoreProps> = (props) => {
     };
 
     if (data) {
-      const _data = _.cloneDeep(data);
+      const _data = cloneDeep(data);
       _data.forEach((item) => {
         traverse(item);
       });
@@ -186,7 +186,7 @@ const PosCore: React.FC<PosCoreProps> = (props) => {
         className={'qx-selector-sub-search'}
         placeholder={props.placeholder || '请输入岗位名称，按回车键搜索'}
         allowClear
-        prefix={<SearchOutlined />}
+        prefix={<QxBaseIcon type={'icon-app-search-line'} />}
         onChange={(e) => {
           handleChange(e);
         }}

@@ -52,7 +52,7 @@ const PosSelectorDialog: React.FC<PosSelectorDialogProps> = (props) => {
     <Modal
       title={props.title || '选择岗位'}
       width={560}
-      visible={props.visible}
+      open={props.visible}
       className={'qx-pos-selector__dialog'}
       onOk={handleOk}
       onCancel={handleCancel}

@@ -32,7 +32,7 @@ const QxPosSelector: React.FC<QxPosSelectorProps> = (props) => {
   }, []);
 
   // getUserList()
-  const handleOk = (keys: [], data: []) => {
+  const handleOk = (keys: [], data: any[]) => {
     let _value: [] | string = keys;
     if (!props.multiple && keys && keys.length > 0) {
       // @ts-ignore

+@import '~@qx/ui/src/style/variable.less';
+
 .qx-pos-selector__dialog {
   //.ant-popover-arrow {
   //  display: none;
@@ -27,7 +29,7 @@
   height: 60px;
   padding: 5px;
   overflow: auto;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid @N4;
 
   .ant-tag {
     margin: 1px 2px;

@@ -85,7 +85,7 @@ const QxPagination: React.FC<QxPaginationProps> = (props) => {
       <Popover
         overlayClassName={'qx-pagination__overlay'}
         content={pageContent}
-        trigger={total === 0 ? '' : 'click'}
+        trigger={total === 0 ? undefined : 'click'}
         placement={'bottom'}
       >
         <li className={'ant-pagination-simple-pager'}>

+@import '~@qx/ui/src/style/variable.less';
+
 .qx-pagination {
   > .anticon {
-    color: rgba(0, 0, 0, 0.25);
+    color: @N7;
   }
 
   .ant-pagination-simple-pager {
     cursor: pointer;
 
     &:hover {
-      color: #007ef3;
+      color: @B8;
     }
   }
 }

@@ -2,9 +2,7 @@ import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { Empty, Input, Spin} from 'antd';
 import { getAllRole } from '../service';
-import {
-  SearchOutlined,
-} from '@ant-design/icons';
+import {QxBaseIcon} from '@qx/common';
 import Menu from 'antd/es/menu';
 
 type RoleProps = {
@@ -188,7 +186,7 @@ const Role: React.FC<RoleProps> = (props) => {
         className={'qx-selector-sub-search'}
         placeholder={props.placeholder || '请输入角色名称，按回车键搜索'}
         allowClear
-        prefix={<SearchOutlined />}
+        prefix={<QxBaseIcon type={'icon-app-search-line'} />}
         onChange={(e) => {
           handleChange(e);
         }}

@@ -6,7 +6,7 @@ import { Checkbox, Empty, Input, Spin } from 'antd';
 // import { InputRef } from 'antd/es/input';
 import QxPagination from './qx-pagination';
 import type { CheckboxChangeEvent } from 'antd/es/checkbox';
-import { SearchOutlined } from '@ant-design/icons';
+import {QxBaseIcon} from '@qx/common';
 // import type { InputRef } from 'antd/lib/input';
 
 type UserItem = { id: string; name: string; code: string; relName?: string };
@@ -202,7 +202,7 @@ const UserList: React.FC<UserListProps> = (props) => {
               }}
               onChange={(e) => handleChange(e)}
               allowClear
-              prefix={<SearchOutlined style={{ color: 'rgba(0,0,0,.45)' }} />}
+              prefix={<QxBaseIcon style={{ color: 'rgba(0,0,0,.45)' }} type={'icon-app-search-line'} />}
             />
           </div>
           <QxPagination

@@ -222,7 +222,7 @@ const UserSelectorDialog: React.FC<UserSelectorDialogProps> = (props) => {
     <Modal
       title={dialogTitle}
       width={700}
-      visible={props.visible}
+      open={props.visible}
       className={'qx-user-selector__dialog'}
       onOk={handleOk}
       onCancel={handleCancel}

@@ -6,7 +6,7 @@ import './style.less';
 import type { UserItem } from './dialog';
 import UserSelectorDialog from './dialog';
 import { searchUserByAllType, SearchUserAllData } from './service';
-import _ from 'lodash';
+import { debounce } from 'lodash-es';
 
 export type QxUserSelectorProps = {
   cRef?: any;
@@ -266,7 +266,7 @@ const QxUserSelector: React.FC<QxUserSelectorProps> = (props) => {
     }
   }, [popVisible]);
 
-  const handleSearch = _.debounce((_keywords: string | undefined) => {
+  const handleSearch = debounce((_keywords: string | undefined) => {
     if (!_keywords) {
       setUserList(null);
       return;
@@ -384,12 +384,12 @@ const QxUserSelector: React.FC<QxUserSelectorProps> = (props) => {
       <Popover
         content={userDropContent}
         placement={'bottom'}
-        visible={
+        open={
           ((props?.params?.range || !userId) && !userList) || props.readOnly ? false : popVisible
         }
         trigger={'click'}
         overlayClassName={'qx-user-selector--input__pop'}
-        onVisibleChange={(v: boolean) => setPopVisible(v)}
+        onOpenChange={(v: boolean) => setPopVisible(v)}
       >
         <div
           className={

+@import '~@qx/ui/src/style/variable.less';
+
 .qx-user-input__box {
   padding-left: 0;
   background-color: transparent;
@@ -100,7 +102,7 @@
     color: #999;
     font-weight: normal;
     font-size: 14px;
-    border-bottom: 1px solid #efefef;
+    border-bottom: 1px solid @N4;
     &:first-child {
       margin-top: 0;
     }
@@ -114,41 +116,41 @@
     cursor: pointer;
     &.qx-user-selector-more {
       margin-top: 5px;
-      color: #4ba9ff;
+      color: @B8;
       &:hover {
-        color: #4ba9ff;
+        color: @B7;
       }
     }
     &.disabled {
-      color: #ccc;
+      color: @N5;
       cursor: default;
       &:hover {
-        color: #ccc;
+        color: @N5;
       }
       .qx-user-selector-code {
-        color: #ccc;
+        color: @N5;
       }
     }
 
     &:hover {
-      color: #000;
-      background-color: #fafafa;
+      color: @N9;
+      background-color: @N2;
     }
     &.qx-user-selector-pop-empty {
       padding: 10px;
-      color: #aaa;
+      color: @N5;
       text-align: center;
-      background-color: #fbfbfb;
+      background-color: @N2;
       cursor: default;
       &:hover {
-        color: #aaa;
+        color: @N5;
       }
     }
   }
 }
 
 .qx-user-selector-code {
-  color: rgb(102, 102, 102);
+  color: @N7;
 }
 .qx-user-selector__dialog {
   .ant-modal-body {
@@ -183,7 +185,7 @@
   height: 60px;
   padding: 5px;
   overflow: auto;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid @N4;
 
   .ant-tag {
     margin: 1px 2px;
@@ -198,7 +200,7 @@
 .qx-user-selector__left {
   height: @contentHeight;
   overflow: hidden;
-  border-right: 1px solid #f0f0f0;
+  border-right: 1px solid @N4;
 
   .qx-user-selector__collapse {
     border: none;
@@ -211,11 +213,11 @@
   }
 
   .ant-collapse-content {
-    border-color: #f0f0f0;
+    border-color: @N4;
   }
 
   .ant-collapse > .ant-collapse-item {
-    border-color: #f0f0f0;
+    border-color: @N4;
   }
 }
 
@@ -223,7 +225,7 @@
   display: flex;
   flex-direction: column;
   height: @contentHeight;
-  border-left: 1px solid #f0f0f0;
+  border-left: 1px solid @N4;
   border-left: none;
 
   &__header {
@@ -232,7 +234,7 @@
     justify-content: space-between;
     height: 40px;
     padding: 0 10px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid @N4;
 
     .ant-checkbox-wrapper {
       white-space: nowrap;
@@ -260,13 +262,13 @@
   .ant-table-pagination.ant-pagination {
     margin: 0;
     padding: 11px;
-    border-top: 1px solid #f0f0f0;
+    border-top: 1px solid @N4;
   }
 }
 
 .qx-user-selector__user-search {
   padding: 7px 10px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid @N4;
 }
 
 .qx-selector-tab {
@@ -339,7 +341,7 @@
     cursor: pointer;
 
     &:hover {
-      background-color: #fafafa;
+      background-color: @N2;
     }
 
     .ant-checkbox-wrapper,