@alicloud/console-components-search 0.2.1 → 0.2.2

package/doc-dist/deps/main.os.css

@@ -1 +1 @@
-html body .xconsole-rcsearch-multi-pop .next-select-menu-item{padding-left:0!important}html body .xconsole-rcsearch-multi-pop .next-select-menu-item .next-menu-icon-selected{display:none}html body .xconsole-rcsearch-multi-pop .next-menu-group-label{padding-left:0}html body .xconsole-rc-search-popup{margin-top:4px}
+html body .xconsole-rcsearch-multi-pop.xconsole-rcsearch-multi-pop>ul{padding:8px}html body .xconsole-rcsearch-multi-pop .next-select-menu-item{padding-left:0!important}html body .xconsole-rcsearch-multi-pop .next-select-menu-item .next-menu-icon-selected{display:none}html body .xconsole-rcsearch-multi-pop .next-menu-group-label{padding-left:0}html body .xconsole-rc-search-popup{margin-top:4px}html .console-tags-tag.console-tags-tag{font-weight:600;color:var(--color-text1-9,#333)!important}html .console-tags-tag.console-tags-tag .console-tags-tag-label{color:var(--color-text1-6,grey);margin-right:8px}html .console-tags-tag.console-tags-tag[class*=tag-closable]>[class*=tag-close-btn]{margin-left:12px}html .console-tags-tag.console-tags-tag.console-tags-tag.console-tags-tag:hover [class*=-icon-close]{color:#181818}html .console-tags-tag.console-tags-tag.console-tags-tag.console-tags-tag [class*=-icon-close]:before{content:var(--icon-content-delete-filling)}html .console-tags-tag:not(:last-child){margin-right:8px}html .console-tags-tag_empty{color:var(--color-text1-6,grey)}html .console-tags-tag-dot.console-tags-tag-dot [class*=-badge-dot]{right:4px;top:0}

package/doc-dist/log-deps-build.log

@@ -1,13 +1,13 @@
 开始构建微应用external依赖...
 BreezrPluginStyledComponentsIsolation  The plugin will trying to use the package's name as isolation id of styled-components. This behavior usually occurred on dev mode. And if you were received this warning on publish mode then you should to set `options.styledComponentStyleSheetId` implicitly.
 ℹ Compiling Webpack
-✔ Webpack: Compiled successfully in 14.67s
+✔ Webpack: Compiled successfully in 12.79s
  WARN  asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
 This can impact web performance.
 Assets: 
-  main.js (2.46 MiB),entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
+  main.js (2.49 MiB),entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
 Entrypoints:
-  main (2.46 MiB)
+  main (2.49 MiB)
       main.css
       main.js
 ,webpack performance recommendations: 

package/es/constants.js

@@ -3,4 +3,7 @@ export var baseTagListClassName = "".concat(baseClassName, "-taglist"); // expor
 // export const titleContainerClassName = `${titleClassName}-container`
 // export const titleExtraClassName = `${titleClassName}-extra`
 // export const titleChildrenClassName = `${titleClassName}-children`
-// export const contentClassName = `${baseClassName}-content`
+// export const contentClassName = `${baseClassName}-content`
+
+export var SEARCH_FILTER_FIELD = 'filterInputValue';
+export var SEARCH_FILTER_VALUE_FIELD = 'searchValue';

package/es/modeSingleSingle/index2.js

@@ -15,6 +15,7 @@ import React, { useState, useRef } from "react";
 import { Button, Icon, Select, ConfigProvider, Field, Checkbox } from '@alicloud/console-components';
 import { SearchWarp, MultiBtnWarp } from "../style";
 import SearchConditionSelectPrefix from "./InputPrefix";
+import { SEARCH_FILTER_FIELD, SEARCH_FILTER_VALUE_FIELD } from "../constants";
 var AutoComplete = Select.AutoComplete;
 /**
  * 
@@ -68,12 +69,9 @@ var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, o
   }
 
   if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'multiple') {
-    var _opt$templateProps2, _opt$templateProps3;
+    var _opt$templateProps2;
 
-    console.log((_opt$templateProps2 = opt.templateProps) === null || _opt$templateProps2 === void 0 ? void 0 : _opt$templateProps2.dataSource.filter(function (d) {
-      return value.indexOf(d.value) !== -1;
-    }));
-    valueLabel = (_opt$templateProps3 = opt.templateProps) === null || _opt$templateProps3 === void 0 ? void 0 : _opt$templateProps3.dataSource.filter(function (d) {
+    valueLabel = (_opt$templateProps2 = opt.templateProps) === null || _opt$templateProps2 === void 0 ? void 0 : _opt$templateProps2.dataSource.filter(function (d) {
       return value.indexOf(d.value) !== -1;
     }).map(function (d) {
       return d.label;
@@ -88,6 +86,18 @@ var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, o
   };
 };
 
+var highlightKeyword = function highlightKeyword(value, keywords) {
+  var idx = value.toLowerCase().indexOf(keywords.toLowerCase());
+  var startValue = value.slice(0, idx);
+  var highlightValue = value.slice(idx, idx + keywords.length);
+  var endValue = value.slice(idx + keywords.length);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, startValue, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--color-brand1-6)'
+    }
+  }, highlightValue), endValue);
+};
+
 var ComplexSearch = function ComplexSearch(props) {
   var options = props.options,
       fuzzy = props.fuzzy,
@@ -125,14 +135,25 @@ var ComplexSearch = function ComplexSearch(props) {
     }
   }; //计算视图，根据内部状态和输入的 props 决定一些值
 
-  var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue('filterInputValue');
+  var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(SEARCH_FILTER_FIELD);
   var defaultFilter = options.find(function (t) {
     return t.dataIndex === defaultDataIndex;
   });
+
+  var highlightItem = function highlightItem(item, searchKey) {
+    var label = item.label;
+
+    if (searchKey && searchKey.length) {
+      label = highlightKeyword(item.label, searchKey);
+    }
+
+    return label;
+  };
   /**
    * 处理筛选类型选中的情况
    */
 
+
   var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
     var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     setSelectedFilterType(options.find(function (o) {
@@ -146,7 +167,7 @@ var ComplexSearch = function ComplexSearch(props) {
 
 
   var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy) {
-    var isFuzzySearch = isFuzzy && getValue('filterInputValue'); // 如果是模糊搜索，则直接处理
+    var isFuzzySearch = isFuzzy && getValue(SEARCH_FILTER_FIELD); // 如果是模糊搜索，则直接处理
 
     if (isFuzzySearch) {
       if (actionType !== 'change') {
@@ -169,10 +190,10 @@ var ComplexSearch = function ComplexSearch(props) {
 
   var handleSearch = function handleSearch() {
     if (onSearch) {
-      var value = getValue('searchValue');
+      var value = getValue(SEARCH_FILTER_VALUE_FIELD);
 
       if (defaultDataIndex && !selectedFilterType) {
-        onSearch(getValue('filterInputValue'), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue('filterInputValue'), options));
+        onSearch(getValue(SEARCH_FILTER_FIELD), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue(SEARCH_FILTER_FIELD), options));
       }
 
       if (selectedFilterType) {
@@ -181,6 +202,7 @@ var ComplexSearch = function ComplexSearch(props) {
     }
 
     reset();
+    document.body.click();
     setFocused(false);
   };
 
@@ -192,7 +214,7 @@ var ComplexSearch = function ComplexSearch(props) {
   };
 
   var renderMultipleSelectorItem = function renderMultipleSelectorItem(item) {
-    var searchValue = getValue('searchValue');
+    var searchValue = getValue(SEARCH_FILTER_VALUE_FIELD);
     var checked = isArray(searchValue) && searchValue.some(function (v) {
       return v === item.value;
     });
@@ -205,7 +227,7 @@ var ComplexSearch = function ComplexSearch(props) {
     var _selectedFilterType$t, _selectedFilterType$t2;
 
     var type = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template;
-    var searchValue = getValue('searchValue');
+    var searchValue = getValue(SEARCH_FILTER_VALUE_FIELD);
 
     var props = _objectSpread({
       hasBorder: false,
@@ -225,7 +247,7 @@ var ComplexSearch = function ComplexSearch(props) {
 
     switch (type) {
       case 'input':
-        return /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init('searchValue', {}), {
+        return /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_VALUE_FIELD, {}), {
           className: classNames('main-input', 'multi')
         }, props, {
           onKeyUp: handleKeyUp
@@ -234,7 +256,7 @@ var ComplexSearch = function ComplexSearch(props) {
       case 'select':
         return /*#__PURE__*/React.createElement(Select, _extends({
           className: classNames('main-input', 'select')
-        }, init('searchValue', {
+        }, init(SEARCH_FILTER_VALUE_FIELD, {
           props: {
             onChange: handleSearch
           }
@@ -243,7 +265,7 @@ var ComplexSearch = function ComplexSearch(props) {
       case 'multiple':
         return /*#__PURE__*/React.createElement(Select, _extends({
           className: classNames('main-input', 'multi')
-        }, init('searchValue', {}), props, selectProps, {
+        }, init(SEARCH_FILTER_VALUE_FIELD, {}), props, selectProps, {
           itemRender: renderMultipleSelectorItem,
           popupClassName: "xconsole-rcsearch-multi-pop",
           mode: "multiple",
@@ -265,6 +287,7 @@ var ComplexSearch = function ComplexSearch(props) {
               type: "normal",
               onClick: function onClick() {
                 reset();
+                document.body.click();
               }
             }, "\u53D6\u6D88"))
           }
@@ -276,7 +299,7 @@ var ComplexSearch = function ComplexSearch(props) {
   };
 
   var renderSelectFilterCloseIcon = function renderSelectFilterCloseIcon() {
-    var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue('searchValue'));
+    var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue(SEARCH_FILTER_VALUE_FIELD));
     return hasFilterTypeClearBtn && /*#__PURE__*/React.createElement("div", {
       className: "clear-level1"
     }, /*#__PURE__*/React.createElement("span", {
@@ -310,7 +333,7 @@ var ComplexSearch = function ComplexSearch(props) {
     }
   }) : null), /*#__PURE__*/React.createElement("div", {
     className: classNames('forms')
-  }, !selectedFilterType ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init('filterInputValue', {
+  }, !selectedFilterType ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
     props: {
       // @ts-ignore
       onChange: function onChange(value, actionType) {
@@ -318,7 +341,8 @@ var ComplexSearch = function ComplexSearch(props) {
       }
     }
   }), {
-    ref: autoRef,
+    // @ts-ignore
+    itemRender: highlightItem,
     placeholder: placeholder ? placeholder : defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? "\u9ED8\u8BA4\u6309".concat(defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label, "\u641C\u7D22") : '请搜索',
     className: classNames('main-input', 'multi'),
     hasBorder: false,
@@ -330,7 +354,8 @@ var ComplexSearch = function ComplexSearch(props) {
       width: 'auto'
     }
   }, focusProps)) : null, renderSelectedFilter(), renderSelectFilterCloseIcon())), /*#__PURE__*/React.createElement("div", {
-    className: classNames('right-wrap')
+    className: classNames('right-wrap'),
+    ref: autoRef
   }, /*#__PURE__*/React.createElement(Button, {
     className: classNames('search-btn', {
       'focus': focused

package/es/searchTagList/PureTag.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["intl", "tagKey", "disableTruncate", "showDot", "tagValue", "showLabel", "closable"];
+import React from 'react';
+import { Tag, Badge } from '@alicloud/console-components';
+import Truncate from '@alicloud/console-components-truncate';
+
+var Empty = function Empty(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+
+var PureTag = function PureTag(props) {
+  var intl = props.intl,
+      tagKey = props.tagKey,
+      disableTruncate = props.disableTruncate,
+      showDot = props.showDot,
+      tagValue = props.tagValue,
+      showLabel = props.showLabel,
+      _props$closable = props.closable,
+      closable = _props$closable === void 0 ? true : _props$closable,
+      resetProps = _objectWithoutProperties(props, _excluded);
+
+  var defaultTruncateProps = {
+    threshold: 20,
+    showTooltip: false
+  };
+  var TruncateWrapper = disableTruncate ? Empty : Truncate;
+  var DotWrapper = showDot ? Badge : Empty;
+  var TagWrapper = closable ? Tag.Closeable : Tag;
+  var transformedTagValue = tagValue;
+
+  if (tagValue === '') {
+    transformedTagValue = '空值';
+  } else if (tagValue === undefined || tagValue === null) {
+    transformedTagValue = '全部值';
+  }
+
+  return (
+    /*#__PURE__*/
+    //@ts-ignore
+    React.createElement(DotWrapper, {
+      title: "\u5373\u5C06\u65B0\u5EFA",
+      className: "console-tags-tag-dot",
+      dot: true
+    }, /*#__PURE__*/React.createElement(TagWrapper, _extends({
+      title: "".concat(tagKey, ":").concat(tagValue),
+      className: "console-tags-tag"
+    }, resetProps), showLabel && /*#__PURE__*/React.createElement("label", {
+      className: "console-tags-tag-label"
+    }, "\u6807\u7B7E"), /*#__PURE__*/React.createElement(TruncateWrapper, defaultTruncateProps, tagKey), ":", tagValue ? /*#__PURE__*/React.createElement(TruncateWrapper, defaultTruncateProps, tagValue) : /*#__PURE__*/React.createElement("span", {
+      className: "console-tags-tag_empty"
+    }, transformedTagValue)))
+  );
+};
+
+export default PureTag;

package/es/searchTagList/index.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { ConfigProvider, Tag } from '@alicloud/console-components';
 import { TagListWrap } from '../style';
 import { baseTagListClassName } from '../constants';
+import PureTag from "./PureTag";
 var TagGroup = Tag.Group,
     ClosableTag = Tag.Closeable;
 
@@ -12,6 +13,7 @@ var SearchTagList = function SearchTagList(props) {
       className = props.className,
       style = props.style,
       onChange = props.onChange,
+      onClear = props.onClear,
       _props$prefix = props.prefix,
       prefix = _props$prefix === void 0 ? "next-" : _props$prefix;
 
@@ -22,14 +24,14 @@ var SearchTagList = function SearchTagList(props) {
       var resFindIndex = newTagList.findIndex(function (x) {
         return x.dataIndex === item.dataIndex;
       });
-      newTagList.splice(resFindIndex, 1);
-      onChange(newTagList);
+      var deletedTags = newTagList.splice(resFindIndex, 1);
+      onChange(deletedTags[0], newTagList);
     }
   }
 
   function onRemoveAllTag() {
-    if (onChange) {
-      onChange([]);
+    if (onClear) {
+      onClear();
     }
   }
 
@@ -38,7 +40,24 @@ var SearchTagList = function SearchTagList(props) {
     className: classNames(baseTagListClassName, className),
     style: style
   }, /*#__PURE__*/React.createElement(TagGroup, null, dataSource && dataSource.length > 0 && dataSource.map(function (tagItem) {
+    var value = tagItem.value;
+    var isTag = !!value.tagKey;
+
+    if (isTag) {
+      return /*#__PURE__*/React.createElement(PureTag, {
+        showLabel: true,
+        tagKey: value.tagKey,
+        tagValue: value.tagKey,
+        closable: true,
+        onClose: function onClose() {
+          onRemoveTag(tagItem);
+          return true;
+        }
+      });
+    }
+
     return /*#__PURE__*/React.createElement(ClosableTag, {
+      className: "console-tags-tag",
       key: tagItem.dataIndex + tagItem.value,
       type: "normal",
       size: "medium",
@@ -46,7 +65,9 @@ var SearchTagList = function SearchTagList(props) {
         onRemoveTag(tagItem);
         return true;
       }
-    }, tagItem.label, ":", tagItem.valueLabel);
+    }, /*#__PURE__*/React.createElement("label", {
+      className: "console-tags-tag-label"
+    }, tagItem.label), tagItem.value || tagItem.valueLabel);
   }), dataSource && dataSource.length > 0 && /*#__PURE__*/React.createElement("a", {
     className: "remove-btn",
     onClick: onRemoveAllTag

package/es/style.js

@@ -15,5 +15,5 @@ var MultiBtnWarp = styled.div.withConfig({
 })(["padding:\"0 4px\";text-align:\"center\";.pri-btn{margin-right:8px;width:auto;min-width:auto;padding:3px 12px;}.cancel-btn{padding:3px 12px;width:auto;min-width:auto;}", "btn", "small:not(.isOnlyIcon):not(", "btn-text){min-width:auto;}"], prefix, prefix, prefix);
 var TagListWrap = styled.div.withConfig({
   componentId: "sc-1afc1cn-3"
-})(["", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:6px;}", "tag-medium", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:16px;}&& [class*='-icon-close']:hover::before{color:#181818;}&& [class*='-icon-close']::before{color:#808080;content:var(--icon-content-delete-filling);}.remove-btn{margin-bottom:8px;line-height:24px;display:inline-block;vertical-align:middle;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
+})(["", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:6px;}", "tag-medium", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:16px;}&& [class*='-icon-close']:hover::before{color:#181818;}&& [class*='-icon-close']::before{color:#808080;font-size:12px !important;}.remove-btn{margin-bottom:8px;line-height:24px;display:inline-block;vertical-align:middle;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
 export { SearchWarp, MultiBtnWarp, TagListWrap, MenuContentWrap };

package/lib/constants.d.ts

@@ -1,2 +1,4 @@
 export declare const baseClassName = "rc-search";
 export declare const baseTagListClassName: string;
+export declare const SEARCH_FILTER_FIELD = "filterInputValue";
+export declare const SEARCH_FILTER_VALUE_FIELD = "searchValue";

package/lib/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.baseTagListClassName = exports.baseClassName = void 0;
+exports.baseTagListClassName = exports.baseClassName = exports.SEARCH_FILTER_VALUE_FIELD = exports.SEARCH_FILTER_FIELD = void 0;
 var baseClassName = 'rc-search';
 exports.baseClassName = baseClassName;
 var baseTagListClassName = "".concat(baseClassName, "-taglist"); // export const titleClassName = `${baseClassName}-title`
@@ -12,4 +12,8 @@ var baseTagListClassName = "".concat(baseClassName, "-taglist"); // export const
 // export const titleChildrenClassName = `${titleClassName}-children`
 // export const contentClassName = `${baseClassName}-content`
 
-exports.baseTagListClassName = baseTagListClassName;
+exports.baseTagListClassName = baseTagListClassName;
+var SEARCH_FILTER_FIELD = 'filterInputValue';
+exports.SEARCH_FILTER_FIELD = SEARCH_FILTER_FIELD;
+var SEARCH_FILTER_VALUE_FIELD = 'searchValue';
+exports.SEARCH_FILTER_VALUE_FIELD = SEARCH_FILTER_VALUE_FIELD;

package/lib/index.d.ts

@@ -4,4 +4,5 @@ import { IRcSearchProps } from "./types/IRcSearchProps.type";
 import { IRcSearchTagListProps } from "./types/IRcSearchTagListProps.type";
 import { IRcSearchTagItemProps } from './types/IRcSearchTagItemProps.type';
 import { IRcSearchOptionsProps } from './types/IRcSearchOptions.type';
+import './index.less';
 export { Search, SearchTagList as SearchFilter, IRcSearchProps, IRcSearchTagListProps, IRcSearchOptionsProps, IRcSearchTagItemProps };

package/lib/modeSingleSingle/index2.js

@@ -33,6 +33,8 @@ var _style = require("../style");
 
 var _InputPrefix = _interopRequireDefault(require("./InputPrefix"));
 
+var _constants = require("../constants");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -94,12 +96,9 @@ var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, o
   }
 
   if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'multiple') {
-    var _opt$templateProps2, _opt$templateProps3;
+    var _opt$templateProps2;
 
-    console.log((_opt$templateProps2 = opt.templateProps) === null || _opt$templateProps2 === void 0 ? void 0 : _opt$templateProps2.dataSource.filter(function (d) {
-      return value.indexOf(d.value) !== -1;
-    }));
-    valueLabel = (_opt$templateProps3 = opt.templateProps) === null || _opt$templateProps3 === void 0 ? void 0 : _opt$templateProps3.dataSource.filter(function (d) {
+    valueLabel = (_opt$templateProps2 = opt.templateProps) === null || _opt$templateProps2 === void 0 ? void 0 : _opt$templateProps2.dataSource.filter(function (d) {
       return value.indexOf(d.value) !== -1;
     }).map(function (d) {
       return d.label;
@@ -114,6 +113,18 @@ var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, o
   };
 };
 
+var highlightKeyword = function highlightKeyword(value, keywords) {
+  var idx = value.toLowerCase().indexOf(keywords.toLowerCase());
+  var startValue = value.slice(0, idx);
+  var highlightValue = value.slice(idx, idx + keywords.length);
+  var endValue = value.slice(idx + keywords.length);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, startValue, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: 'var(--color-brand1-6)'
+    }
+  }, highlightValue), endValue);
+};
+
 var ComplexSearch = function ComplexSearch(props) {
   var options = props.options,
       fuzzy = props.fuzzy,
@@ -153,14 +164,25 @@ var ComplexSearch = function ComplexSearch(props) {
     }
   }; //计算视图，根据内部状态和输入的 props 决定一些值
 
-  var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue('filterInputValue');
+  var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(_constants.SEARCH_FILTER_FIELD);
   var defaultFilter = options.find(function (t) {
     return t.dataIndex === defaultDataIndex;
   });
+
+  var highlightItem = function highlightItem(item, searchKey) {
+    var label = item.label;
+
+    if (searchKey && searchKey.length) {
+      label = highlightKeyword(item.label, searchKey);
+    }
+
+    return label;
+  };
   /**
    * 处理筛选类型选中的情况
    */
 
+
   var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
     var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     setSelectedFilterType(options.find(function (o) {
@@ -174,7 +196,7 @@ var ComplexSearch = function ComplexSearch(props) {
 
 
   var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy) {
-    var isFuzzySearch = isFuzzy && getValue('filterInputValue'); // 如果是模糊搜索，则直接处理
+    var isFuzzySearch = isFuzzy && getValue(_constants.SEARCH_FILTER_FIELD); // 如果是模糊搜索，则直接处理
 
     if (isFuzzySearch) {
       if (actionType !== 'change') {
@@ -197,10 +219,10 @@ var ComplexSearch = function ComplexSearch(props) {
 
   var handleSearch = function handleSearch() {
     if (onSearch) {
-      var value = getValue('searchValue');
+      var value = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
 
       if (defaultDataIndex && !selectedFilterType) {
-        onSearch(getValue('filterInputValue'), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue('filterInputValue'), options));
+        onSearch(getValue(_constants.SEARCH_FILTER_FIELD), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue(_constants.SEARCH_FILTER_FIELD), options));
       }
 
       if (selectedFilterType) {
@@ -209,6 +231,7 @@ var ComplexSearch = function ComplexSearch(props) {
     }
 
     reset();
+    document.body.click();
     setFocused(false);
   };
 
@@ -220,7 +243,7 @@ var ComplexSearch = function ComplexSearch(props) {
   };
 
   var renderMultipleSelectorItem = function renderMultipleSelectorItem(item) {
-    var searchValue = getValue('searchValue');
+    var searchValue = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
     var checked = (0, _isArray.default)(searchValue) && searchValue.some(function (v) {
       return v === item.value;
     });
@@ -233,7 +256,7 @@ var ComplexSearch = function ComplexSearch(props) {
     var _selectedFilterType$t, _selectedFilterType$t2;
 
     var type = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template;
-    var searchValue = getValue('searchValue');
+    var searchValue = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
 
     var props = _objectSpread({
       hasBorder: false,
@@ -253,7 +276,7 @@ var ComplexSearch = function ComplexSearch(props) {
 
     switch (type) {
       case 'input':
-        return /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init('searchValue', {}), {
+        return /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_VALUE_FIELD, {}), {
           className: (0, _classnames.default)('main-input', 'multi')
         }, props, {
           onKeyUp: handleKeyUp
@@ -262,7 +285,7 @@ var ComplexSearch = function ComplexSearch(props) {
       case 'select':
         return /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
           className: (0, _classnames.default)('main-input', 'select')
-        }, init('searchValue', {
+        }, init(_constants.SEARCH_FILTER_VALUE_FIELD, {
           props: {
             onChange: handleSearch
           }
@@ -271,7 +294,7 @@ var ComplexSearch = function ComplexSearch(props) {
       case 'multiple':
         return /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
           className: (0, _classnames.default)('main-input', 'multi')
-        }, init('searchValue', {}), props, selectProps, {
+        }, init(_constants.SEARCH_FILTER_VALUE_FIELD, {}), props, selectProps, {
           itemRender: renderMultipleSelectorItem,
           popupClassName: "xconsole-rcsearch-multi-pop",
           mode: "multiple",
@@ -293,6 +316,7 @@ var ComplexSearch = function ComplexSearch(props) {
               type: "normal",
               onClick: function onClick() {
                 reset();
+                document.body.click();
               }
             }, "\u53D6\u6D88"))
           }
@@ -304,7 +328,7 @@ var ComplexSearch = function ComplexSearch(props) {
   };
 
   var renderSelectFilterCloseIcon = function renderSelectFilterCloseIcon() {
-    var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue('searchValue'));
+    var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue(_constants.SEARCH_FILTER_VALUE_FIELD));
     return hasFilterTypeClearBtn && /*#__PURE__*/_react.default.createElement("div", {
       className: "clear-level1"
     }, /*#__PURE__*/_react.default.createElement("span", {
@@ -338,7 +362,7 @@ var ComplexSearch = function ComplexSearch(props) {
     }
   }) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('forms')
-  }, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init('filterInputValue', {
+  }, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_FIELD, {
     props: {
       // @ts-ignore
       onChange: function onChange(value, actionType) {
@@ -346,7 +370,8 @@ var ComplexSearch = function ComplexSearch(props) {
       }
     }
   }), {
-    ref: autoRef,
+    // @ts-ignore
+    itemRender: highlightItem,
     placeholder: placeholder ? placeholder : defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? "\u9ED8\u8BA4\u6309".concat(defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label, "\u641C\u7D22") : '请搜索',
     className: (0, _classnames.default)('main-input', 'multi'),
     hasBorder: false,
@@ -358,7 +383,8 @@ var ComplexSearch = function ComplexSearch(props) {
       width: 'auto'
     }
   }, focusProps)) : null, renderSelectedFilter(), renderSelectFilterCloseIcon())), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('right-wrap')
+    className: (0, _classnames.default)('right-wrap'),
+    ref: autoRef
   }, /*#__PURE__*/_react.default.createElement(_consoleComponents.Button, {
     className: (0, _classnames.default)('search-btn', {
       'focus': focused

package/lib/searchTagList/PureTag.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CloseableProps } from '@alifd/next/lib/tag';
+import './index.less';
+export interface PureTagProps extends CloseableProps {
+    tagKey: string;
+    tagValue: string;
+    disableTruncate?: boolean;
+    closable?: boolean;
+    showDot?: boolean;
+    showLabel?: boolean | string;
+    intl?: any;
+}
+declare const PureTag: React.FC<PureTagProps>;
+export default PureTag;