@alicloud/console-components-search 0.2.37-beta.0 → 0.2.37

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @alicloud/console-components-search
 
+## 0.2.37
+
+### Patch Changes
+
+- fix: 解决 rc-search 在一国一云下的多语言问题
+- 385e1b6: rc-search(fix): 修复一国一云环境的多语言问题
+
 ## 0.2.37-beta.0
 
 ### Patch Changes

package/demos/demo1.demo.tsx

@@ -2,21 +2,19 @@
  * @title 场景1
  */
 
-import React from "react";
-import { Search, SearchFilter } from "@alicloud/console-components-search";
-import { ConfigProvider } from "@alicloud/console-components";
-import { useState } from "react";
- 
- let options = [
+import React, { useState } from 'react';
+import { Search, SearchFilter } from '@alicloud/console-components-search';
+import { ConfigProvider } from '@alicloud/console-components';
+
+const options = [
   {
     label: '实例名称',
     dataIndex: 'name',
     template: 'input',
     templateProps: {
       // placeholder: '按实例名称搜索',
-      dataSource: []
+      dataSource: [],
     },
-    groupName:"test"
   },
   {
     label: '网络类型',
@@ -25,13 +23,12 @@ import { useState } from "react";
     templateProps: {
       placeholder: '请选择网络类型',
       dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
+        { label: 'A', value: 'a' },
+        { label: 'B', value: 'b' },
+        { label: 'C', value: 'c' },
+        { label: 'D', value: 'd' },
+      ],
     },
-    groupName:"test"
   },
   {
     label: '付费类型',
@@ -40,88 +37,213 @@ import { useState } from "react";
     templateProps: {
       placeholder: '请选择付费类型',
       dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
+        { label: 'A', value: 'a' },
+        { label: 'B', value: 'b' },
+        { label: 'C', value: 'c' },
+        { label: 'D', value: 'd' },
+      ],
     },
-    groupName:"test2"
-  }
-]
+  },
+];
 
-let options2 = [
+const options2 = [
   {
     label: '实例名称',
     dataIndex: 'name',
     template: 'input',
     templateProps: {
       placeholder: '按实例名称搜索',
-      dataSource: []
+      dataSource: [],
+    },
+  },
+];
+
+const intl = (a) => a;
+
+const options3 = [
+  {
+    dataIndex: 'SourceIp',
+    label: intl('flow_analysis.prop.enum', { value: 'SourceIp' }),
+    template: 'input',
+    // groupName: intl('flow_analysis.prop.enum', { value: 'SourceIp' }),
+    children: [
+      {
+        dataIndex: 'SourceIp_equal',
+        label: intl('flow_analysis.prop.enum', { value: 'SourceIp_equal' }),
+        template: 'input',
+      }, {
+        dataIndex: 'SourceIp_like',
+        label: intl('flow_analysis.prop.enum', { value: 'SourceIp_like' }),
+        template: 'input',
+      },
+      {
+        dataIndex: 'SourceIp_notlike',
+        label: intl('flow_analysis.prop.enum', { value: 'SourceIp_notlike' }),
+        template: 'input',
+        // groupName: intl('flow_analysis.prop.enum', { value: 'SourceIp' }),
+      },
+    ],
+  },
+  {
+    dataIndex: 'DestinationIp_equal',
+    label: intl('flow_analysis.prop.enum', { value: 'DestinationIp_equal' }),
+    labelEx: (
+      <div>
+        <span>
+          {intl('flow_analysis.prop.enum', { value: 'DestinationIp_equal' })}
+        </span>
+        <span>
+          {intl('tr_flow_log.search.operator.enum', { value: 'equal' })}
+        </span>
+      </div>
+    ),
+    template: 'input',
+    groupName: intl('flow_analysis.prop.enum', { value: 'DestinationIp' }),
+  },
+  {
+    dataIndex: 'DestinationIp_like',
+    label: intl('flow_analysis.prop.enum', { value: 'DestinationIp_like' }),
+    labelEx: (
+      <div>
+        <span>
+          {intl('flow_analysis.prop.enum', { value: 'DestinationIp_like' })}
+        </span>
+        <span>
+          {intl('tr_flow_log.search.operator.enum', { value: 'like' })}
+        </span>
+      </div>
+    ),
+    template: 'input',
+    groupName: intl('flow_analysis.prop.enum', { value: 'DestinationIp' }),
+  },
+  {
+    dataIndex: 'DestinationIp_notlike',
+    label: intl('flow_analysis.prop.enum', { value: 'DestinationIp_notlike' }),
+    labelEx: (
+      <div>
+        <span>
+          {intl('flow_analysis.prop.enum', { value: 'DestinationIp_notlike' })}
+        </span>
+        <span>
+          {intl('tr_flow_log.search.operator.enum', { value: 'notlike' })}
+        </span>
+      </div>
+    ),
+    template: 'input',
+    groupName: intl('flow_analysis.prop.enum', { value: 'DestinationIp' }),
+  },
+  {
+    dataIndex: 'Dscp',
+    label: intl('flow_analysis.prop.enum', { value: 'Dscp' }),
+    template: 'input',
+    groupName: intl('flow_analysis.prop.enum', { value: 'Dscp' }),
+  },
+  {
+    dataIndex: 'Protocol',
+    label: intl('flow_analysis.prop.enum', { value: 'Protocol' }),
+    template: 'select',
+    templateProps: {
+      dataSource: [
+        0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
+        25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47,
+        48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 62, 64, 65, 66, 67, 69, 70, 71, 72, 73,
+        74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96,
+        97, 98, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 115, 116, 117,
+        118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135,
+        136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 255,
+      ].map((item) => ({
+        label: intl('flow_analyzer.detail.protocol.enum', { value: item }),
+        value: String(item),
+      })),
     },
-  }
-]
+    groupName: intl('flow_analysis.prop.enum', { value: 'Protocol' }),
+  },
+  {
+    dataIndex: 'DestinationPort',
+    label: intl('flow_analysis.prop.enum', { value: 'DestinationPort' }),
+    template: 'input',
+    groupName: intl('flow_analysis.prop.enum', { value: 'DestinationPort' }),
+  },
+  {
+    dataIndex: 'SourcePort',
+    label: intl('flow_analysis.prop.enum', { value: 'SourcePort' }),
+    template: 'input',
+    groupName: intl('flow_analysis.prop.enum', { value: 'SourcePort' }),
+  },
+];
 
 
- const Demo1: React.FC<{}> = (props) => {
-   const [filters, setFilters] = useState<any>([
-    {label: '实例名称', value: 'xxxxxx', dataIndex: 'name'},
-    {value: [{tagKey: 'test', tagValue: ''}], dataIndex: 'tag'}
+const Demo1: React.FC<{}> = (props) => {
+  const [filters, setFilters] = useState<any>([
+    { label: '实例名称', value: 'xxxxxx', dataIndex: 'name' },
+    { value: [{ tagKey: 'test', tagValue: '' }], dataIndex: 'tag' },
+    { value: [{ tagKey: 'test', tagValue: '' }], dataIndex: 'tag2' },
   ]);
-   return (
+  return (
     <ConfigProvider>
-    <div>
-      <div>默认固定搜索条件</div>
-      <Search
-        defaultDataIndex="name"
-        defaultSelectedDataIndex="name"
-        options={[{
-          label: '实例名称',
-          dataIndex: 'name',
-          template: 'input',
-          templateProps: {
-            placeholder: '按实例名称搜索',
-          },
-        }]}
-        onSearch={(value, dataIndex) => {
-          console.log(value, dataIndex)
-        }}
-      />
-      <br/><br/>
-      <Search
-        defaultDataIndex="name"
-        options={options2}
-        onSearch={(value, dataIndex) => {
-          console.log(value, dataIndex)
-        }}
-        suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}
-      />
-      <br/><br/>
-
-      <div>搜索条件成组</div>
-      <Search
-        defaultDataIndex="name"
-        defaultSelectedDataIndex="name"
-        options={options}
-        onSearch={(value, dataIndex, extra) => {
-          //@ts-ignore
-          setFilters([...filters, extra])
-        }}
-        suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}
-      />
+      <div>
+        <div>默认固定搜索条件</div>
+        <Search
+          defaultDataIndex="name"
+          defaultSelectedDataIndex="name"
+          options={[{
+            label: '实例名称',
+            dataIndex: 'name',
+            template: 'input',
+            templateProps: {
+              placeholder: '按实例名称搜索',
+            },
+          }]}
+          onSearch={(value, dataIndex) => {
+            console.log(value, dataIndex);
+          }}
+        />
+        <br /><br />
+        <Search
+          defaultDataIndex="name"
+          options={options2}
+          onSearch={(value, dataIndex) => {
+            console.log(value, dataIndex);
+          }}
+          suggestions={[{ label: '实例名称', children: ['222222'] }, '33333333']}
+        />
+        <br /><br />
 
-      <div style={{marginTop: 8}}>
-        <SearchFilter
-          dataSource={filters}
-          onChange={(deletedFilter, remainFilters)=> {
-            setFilters(remainFilters)
+        <div>搜索条件成组</div>
+        <Search
+          defaultDataIndex="name"
+          defaultSelectedDataIndex="name"
+          options={options}
+          onSearch={(value, dataIndex, extra) => {
+            // @ts-ignore
+            setFilters([...filters, extra]);
+          }}
+          suggestions={[{ label: '实例名称', children: ['222222'] }, '33333333']}
+        />
+        <Search
+          defaultDataIndex="name"
+          // defaultSelectedDataIndex="name"
+          options={options3}
+          prefixSelectMode="cascader"
+          onSearch={(value, dataIndex, extra) => {
+            console.log(value, dataIndex, extra);
+            // @ts-ignore
+            setFilters([...filters, extra]);
           }}
+          suggestions={[{ label: '实例名称', children: ['222222'] }, '33333333']}
         />
+
+        <div style={{ marginTop: 8 }}>
+          <SearchFilter
+            dataSource={filters}
+            onChange={(deletedFilter, remainFilters) => {
+              setFilters(remainFilters);
+            }}
+          />
+        </div>
       </div>
-    </div>
     </ConfigProvider>
-   );
- };
- 
- export default Demo1;
- 
+  );
+};
+
+export default Demo1;

package/dist/index.js

@@ -89955,7 +89955,7 @@ __webpack_require__(227);
 var useCssVar_1 = __webpack_require__(228);
 var SearchWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 32px;\n  width: 400px;\n  display: inline-block;\n  vertical-align: top;\n"], ["\n  height: 32px;\n  width: 400px;\n  display: inline-block;\n  vertical-align: top;\n"])));
 var Search = function (props) {
-    var className = props.className, _a = props.simple, simple = _a === void 0 ? false : _a, style = props.style;
+    var className = props.className, style = props.style;
     var windThemeClass = (0, useCssVar_1.useWindTheme)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(SearchWrap, { className: (0, classnames_1.default)(constants_1.baseClassName, className, windThemeClass), style: style },
@@ -90030,12 +90030,35 @@ var InputPrefix_1 = __importDefault(__webpack_require__(417));
 var constants_1 = __webpack_require__(135);
 var message_1 = __importDefault(__webpack_require__(165));
 var AutoComplete = console_components_1.Select.AutoComplete;
+function formatOptionsChildren(children) {
+    if (!children)
+        return undefined;
+    return children.map(function (o) {
+        return {
+            label: o.label,
+            value: o.dataIndex || o.value || o.label,
+            disabled: o.disabled,
+            children: formatOptionsChildren(o.children),
+        };
+    });
+}
 /**
  *
  * @param IRcSearchOptionsProps options
  * @returns
  */
-var normalizeOptions = function (options) {
+var normalizeOptions = function (options, prefixSelectMode) {
+    if (prefixSelectMode === 'cascader') {
+        return options.map(function (o) {
+            return {
+                label: o.label,
+                value: o.dataIndex || o.value || o.label,
+                disabled: o.disabled,
+                // @ts-ignore
+                children: formatOptionsChildren(o.children),
+            };
+        });
+    }
     var optionsCopy = (0, cloneDeep_1.default)(options);
     optionsCopy.forEach(function (o) { !o.groupName && (o.groupName = message_1.default.defaultFilterGroupName); });
     return Object.entries((0, groupBy_1.default)(optionsCopy, 'groupName')).map(function (_a) {
@@ -90045,7 +90068,8 @@ var normalizeOptions = function (options) {
             children: children.map(function (l) {
                 return {
                     label: l.label,
-                    value: l.dataIndex,
+                    value: l.dataIndex || l.value,
+                    disabled: l.disabled,
                 };
             }),
         };
@@ -90072,15 +90096,28 @@ var normalizeSelectDataSource = function (title, list) {
         },
     ];
 };
+var flatOption = function (opts) {
+    if (opts === void 0) { opts = []; }
+    var flattened = [];
+    opts.forEach(function (item) {
+        if (item.children) {
+            flattened.push.apply(flattened, flatOption(item.children));
+        }
+        else {
+            flattened.push(item);
+        }
+    });
+    return flattened;
+};
 var normalizeSearchOptions = function (dataIndex, value, options) {
-    var _a, _b, _c;
-    var opt = options === null || options === void 0 ? void 0 : options.find(function (o) { return o.dataIndex === dataIndex; });
+    var _a, _b, _c, _d;
+    var opt = (_a = flatOption(options)) === null || _a === void 0 ? void 0 : _a.find(function (o) { return getDataIndex(o) === dataIndex; });
     var valueLabel = value;
     if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'select') {
-        valueLabel = (_b = (_a = opt.templateProps) === null || _a === void 0 ? void 0 : _a.dataSource.find(function (d) { return d.value === value; })) === null || _b === void 0 ? void 0 : _b.label;
+        valueLabel = (_c = (_b = opt.templateProps) === null || _b === void 0 ? void 0 : _b.dataSource.find(function (d) { return d.value === value; })) === null || _c === void 0 ? void 0 : _c.label;
     }
     if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'multiple') {
-        valueLabel = (_c = opt.templateProps) === null || _c === void 0 ? void 0 : _c.dataSource.filter(function (d) { return value === null || value === void 0 ? void 0 : value.includes(d.value); }).map(function (d) { return d.label; }).join('/');
+        valueLabel = (_d = opt.templateProps) === null || _d === void 0 ? void 0 : _d.dataSource.filter(function (d) { return value === null || value === void 0 ? void 0 : value.includes(d.value); }).map(function (d) { return d.label; }).join('/');
     }
     return {
         label: opt === null || opt === void 0 ? void 0 : opt.label,
@@ -90099,10 +90136,13 @@ var highlightKeyword = function (value, keywords) {
         react_1.default.createElement("span", { style: { color: 'var(--color-brand1-6)' } }, highlightValue),
         endValue));
 };
+var getDataIndex = function (option) {
+    return (option === null || option === void 0 ? void 0 : option.dataIndex) || (option === null || option === void 0 ? void 0 : option.value);
+};
 var ComplexSearch = function (props) {
-    var _a = props.options, options = _a === void 0 ? [] : _a, fuzzy = props.fuzzy, defaultDataIndex = props.defaultDataIndex, defaultSelectedDataIndex = props.defaultSelectedDataIndex, placeholder = props.placeholder, onSearch = props.onSearch, onSuggest = props.onSuggest, _b = props.suggestions, suggestions = _b === void 0 ? [] : _b, _c = props.prefix, prefix = _c === void 0 ? 'next-' : _c;
-    var _d = (0, react_1.useState)(options.find(function (o) { return o.dataIndex === defaultSelectedDataIndex; })), selectedFilterType = _d[0], setSelectedFilterType = _d[1];
-    var _e = (0, react_1.useState)(false), focused = _e[0], setFocused = _e[1];
+    var _a = props.options, options = _a === void 0 ? [] : _a, fuzzy = props.fuzzy, defaultDataIndex = props.defaultDataIndex, defaultSelectedDataIndex = props.defaultSelectedDataIndex, placeholder = props.placeholder, onSearch = props.onSearch, onSuggest = props.onSuggest, _b = props.suggestions, suggestions = _b === void 0 ? [] : _b, _c = props.prefix, prefix = _c === void 0 ? 'next-' : _c, _d = props.prefixSelectMode, prefixSelectMode = _d === void 0 ? 'select' : _d, prefixSelectItemRender = props.prefixSelectItemRender;
+    var _e = (0, react_1.useState)(options.find(function (o) { return getDataIndex(o) === defaultSelectedDataIndex; })), selectedFilterType = _e[0], setSelectedFilterType = _e[1];
+    var _f = (0, react_1.useState)(false), focused = _f[0], setFocused = _f[1];
     var autoRef = (0, react_1.useRef)(null);
     var field = console_components_1.Field.useField();
     var init = field.init, getValue = field.getValue, reset = field.reset;
@@ -90116,7 +90156,7 @@ var ComplexSearch = function (props) {
     };
     // 计算视图，根据内部状态和输入的 props 决定一些值
     var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(constants_1.SEARCH_FILTER_FIELD);
-    var defaultFilter = options.find(function (t) { return t.dataIndex === defaultDataIndex; });
+    var defaultFilter = options.find(function (t) { return getDataIndex(t) === defaultDataIndex; });
     var highlightItem = function (item, searchKey) {
         var label = item.label;
         if (searchKey && searchKey.length) {
@@ -90129,18 +90169,18 @@ var ComplexSearch = function (props) {
      */
     var handlerFilterTypeChange = function (type, resetValue) {
         if (resetValue === void 0) { resetValue = true; }
-        setSelectedFilterType(options.find(function (o) { return o.dataIndex === type; }));
+        setSelectedFilterType(flatOption(options).find(function (o) { return getDataIndex(o) === type; }));
         resetValue && reset();
     };
     /**
      * 处理当筛选类型没选中，用户输入筛选类型，或者是做默认搜索的情况
      */
-    var handlerFilterTypeInput = function (value, actionType, isFuzzy, option) {
-        var isFuzzySearch = isFuzzy && getValue(constants_1.SEARCH_FILTER_FIELD);
+    var handlerFilterTypeInput = function (value, actionType, _isFuzzy, option) {
+        var isFuzzySearch = _isFuzzy && getValue(constants_1.SEARCH_FILTER_FIELD);
         // 如果是模糊搜索，则直接处理
         if (isFuzzySearch) {
             if (actionType !== 'change') {
-                handleSearch(option.dataIndex);
+                handleSearch(getDataIndex(option));
             }
             else {
                 onSuggest && onSuggest(value, defaultDataIndex || '');
@@ -90166,7 +90206,7 @@ var ComplexSearch = function (props) {
                 onSearch(getValue(constants_1.SEARCH_FILTER_FIELD), dataIndex || '', normalizeSearchOptions(dataIndex || '', getValue(constants_1.SEARCH_FILTER_FIELD), options));
             }
             if (selectedFilterType) {
-                onSearch(value, selectedFilterType.dataIndex, normalizeSearchOptions(selectedFilterType.dataIndex, value, options));
+                onSearch(value, getDataIndex(selectedFilterType), normalizeSearchOptions(getDataIndex(selectedFilterType), value, options));
             }
         }
         reset();
@@ -90245,11 +90285,19 @@ var ComplexSearch = function (props) {
         react_1.default.createElement("div", { className: (0, classnames_1.default)('left-wrap', "".concat(prefix, "input"), {
                 focus: focused,
             }) },
-            react_1.default.createElement("div", { className: (0, classnames_1.default)('condition') }, selectedFilterType ? (react_1.default.createElement(InputPrefix_1.default, { dataSource: normalizeOptions(options), label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label, defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex, onChange: function (value) {
+            react_1.default.createElement("div", { className: (0, classnames_1.default)('condition') }, selectedFilterType ? (react_1.default.createElement(InputPrefix_1.default, { type: prefixSelectMode, dataSource: normalizeOptions(options, prefixSelectMode), label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label, defaultValue: getDataIndex(selectedFilterType), onChange: function (value) {
                     handlerFilterTypeChange(value);
-                } })) : null),
+                }, itemRender: prefixSelectItemRender })) : null),
             react_1.default.createElement("div", { className: (0, classnames_1.default)('forms') },
-                !selectedFilterType ? (react_1.default.createElement(AutoComplete, __assign({}, init(constants_1.SEARCH_FILTER_FIELD, {
+                !selectedFilterType && prefixSelectMode === 'cascader' ? react_1.default.createElement(console_components_1.CascaderSelect, { className: (0, classnames_1.default)('main-input', 'multi'), hasBorder: false, dataSource: normalizeOptions(options, prefixSelectMode), placeholder: placeholder ||
+                        ((defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label)
+                            ? (0, lodash_1.template)(message_1.default.defaultPlaceHolder)({
+                                value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label,
+                            })
+                            : ''), onChange: function (value) {
+                        handlerFilterTypeChange(value);
+                    }, itemRender: prefixSelectItemRender }) : null,
+                !selectedFilterType && prefixSelectMode === 'select' ? (react_1.default.createElement(AutoComplete, __assign({}, init(constants_1.SEARCH_FILTER_FIELD, {
                     props: {
                         // @ts-ignore
                         onChange: function (value, actionType, option) {
@@ -90258,7 +90306,7 @@ var ComplexSearch = function (props) {
                     },
                 }), { autoHighlightFirstItem: false, 
                     // @ts-ignore
-                    itemRender: highlightItem, placeholder: placeholder ||
+                    itemRender: prefixSelectItemRender || highlightItem, placeholder: placeholder ||
                         ((defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label)
                             ? (0, lodash_1.template)(message_1.default.defaultPlaceHolder)({
                                 value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label,
@@ -90268,7 +90316,7 @@ var ComplexSearch = function (props) {
                     // 则表示需要模糊搜索，调用 handleSuggest
                     isFuzzy
                         ? normalizeSuggestion(suggestions)
-                        : normalizeOptions(options), popupStyle: { width: 'auto' }, popupClassName: "rc-search-auto-complete" }, focusProps))) : null,
+                        : normalizeOptions(options, prefixSelectMode), popupStyle: { width: 'auto' }, popupClassName: "rc-search-auto-complete" }, focusProps))) : null,
                 renderSelectedFilter(),
                 renderSelectFilterCloseIcon())),
         react_1.default.createElement("div", { className: (0, classnames_1.default)('right-wrap'), ref: autoRef },
@@ -114222,15 +114270,15 @@ var classnames_1 = __importDefault(__webpack_require__(3));
 var console_components_1 = __webpack_require__(45);
 var SearchConditionSelectPrefix = function (props) {
     var _a, _b;
-    var defaultValue = props.defaultValue, _c = props.dataSource, dataSource = _c === void 0 ? [] : _c, label = props.label, reset = __rest(props, ["defaultValue", "dataSource", "label"]);
+    var defaultValue = props.defaultValue, _c = props.dataSource, dataSource = _c === void 0 ? [] : _c, label = props.label, type = props.type, reset = __rest(props, ["defaultValue", "dataSource", "label", "type"]);
     var noSelect = dataSource.length < 2 && ((_b = (_a = dataSource[0]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) < 2;
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('condition-item') },
         react_1.default.createElement("span", { className: (0, classnames_1.default)('condition-item-txt') }, label),
         noSelect ? null : react_1.default.createElement(console_components_1.Icon, { type: "caret-down", size: "xxs" }),
-        react_1.default.createElement(console_components_1.Select, __assign({ className: (0, classnames_1.default)('condition-select', { 'rc-search-prefix-no-select': noSelect }), defaultValue: defaultValue, hasBorder: false, disabled: noSelect, autoHighlightFirstItem: false, dataSource: dataSource, itemRender: function (_a) {
+        type === 'select' ? react_1.default.createElement(console_components_1.Select, __assign({ className: (0, classnames_1.default)('condition-select', { 'rc-search-prefix-no-select': noSelect }), defaultValue: defaultValue, hasBorder: false, disabled: noSelect, autoHighlightFirstItem: false, dataSource: dataSource, itemRender: function (_a) {
                 var label = _a.label, value = _a.value;
                 return (react_1.default.createElement("span", { "data-value": value }, label));
-            } }, reset, { autoWidth: false, popupClassName: "rc-search-prefix" }))));
+            } }, reset, { autoWidth: false, popupClassName: "rc-search-prefix" })) : react_1.default.createElement(console_components_1.CascaderSelect, __assign({ className: (0, classnames_1.default)('condition-select', { 'rc-search-prefix-no-select': noSelect }), defaultValue: defaultValue, hasBorder: false, disabled: noSelect, autoHighlightFirstItem: false, dataSource: dataSource }, reset, { autoWidth: false, popupClassName: "rc-search-prefix", canOnlyCheckLeaf: true }))));
 };
 exports.default = SearchConditionSelectPrefix;
 
@@ -117887,7 +117935,7 @@ var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 var truncate = __webpack_require__(237);
 var truncate_default = /*#__PURE__*/__webpack_require__.n(truncate);
 
-// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_883f9e5f25df75a9628c5bca46f5ade8/node_modules/@alicloud/console-components-truncate/es/constants.js
+// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_71d6f86247c728034b3f885376901724/node_modules/@alicloud/console-components-truncate/es/constants.js
 /**
  * @public
  */
@@ -125485,7 +125533,7 @@ if (typeof window === "object") {
   window['__lib_info_array'].push(__LIB_INFO);
 }
 
-// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_883f9e5f25df75a9628c5bca46f5ade8/node_modules/@alicloud/console-components-truncate/es/utils.js
+// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_71d6f86247c728034b3f885376901724/node_modules/@alicloud/console-components-truncate/es/utils.js
 
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -125543,7 +125591,7 @@ function useTooltip(_ref) {
     className: originalContentClassName
   }, originalContent));
 }
-// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_883f9e5f25df75a9628c5bca46f5ade8/node_modules/@alicloud/console-components-truncate/es/TruncateByLength.js
+// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_71d6f86247c728034b3f885376901724/node_modules/@alicloud/console-components-truncate/es/TruncateByLength.js
 
 
 
@@ -125695,7 +125743,7 @@ function _objectWithoutProperties(e, t) {
 var external_styled_components_ = __webpack_require__(46);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
-// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_883f9e5f25df75a9628c5bca46f5ade8/node_modules/@alicloud/console-components-truncate/es/styles.js
+// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_71d6f86247c728034b3f885376901724/node_modules/@alicloud/console-components-truncate/es/styles.js
 
 
 
@@ -125721,7 +125769,7 @@ var STruncateWidthContainer = external_styled_components_default()(styles_Filter
   return omissionByCSS ? 'text-overflow: ellipsis;' : '';
 }, omissionClassName);
 var SWrapper = external_styled_components_default.a.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));
-// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_883f9e5f25df75a9628c5bca46f5ade8/node_modules/@alicloud/console-components-truncate/es/TruncateByWidth.js
+// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_71d6f86247c728034b3f885376901724/node_modules/@alicloud/console-components-truncate/es/TruncateByWidth.js
 
 
 
@@ -125807,7 +125855,7 @@ function isWidthOverflow(element) {
   // debugger
   return element.scrollWidth > element.clientWidth;
 }
-// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_883f9e5f25df75a9628c5bca46f5ade8/node_modules/@alicloud/console-components-truncate/es/Truncate.js
+// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_71d6f86247c728034b3f885376901724/node_modules/@alicloud/console-components-truncate/es/Truncate.js
 
 
 
@@ -126515,7 +126563,7 @@ var es_TruncateMarkup = (_temp = _class = function (_React$Component) {
 }, _temp);
 
 es_TruncateMarkup.propTypes =  false ? undefined : {};
-// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_883f9e5f25df75a9628c5bca46f5ade8/node_modules/@alicloud/console-components-truncate/es/MultiLines.js
+// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_71d6f86247c728034b3f885376901724/node_modules/@alicloud/console-components-truncate/es/MultiLines.js
 
 
 
@@ -126562,7 +126610,7 @@ var MultiLines_MultiLines = function MultiLines(_ref) {
 };
 
 /* harmony default export */ var es_MultiLines = (MultiLines_MultiLines);
-// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_883f9e5f25df75a9628c5bca46f5ade8/node_modules/@alicloud/console-components-truncate/es/index.js
+// CONCATENATED MODULE: /aoneci/runner/work/source/node_modules/.pnpm/@alicloud+console-components-truncate@1.1.2_@alicloud+console-components@2.2.35_@alifd+_71d6f86247c728034b3f885376901724/node_modules/@alicloud/console-components-truncate/es/index.js
 
 
 

package/es/ComplexSearch/InputPrefix.js

@@ -1,15 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultValue", "dataSource", "label"];
+var _excluded = ["defaultValue", "dataSource", "label", "type"];
 import React from 'react';
 import classNames from 'classnames';
-import { Icon, Select } from '@alicloud/console-components';
+import { Icon, Select, CascaderSelect } from '@alicloud/console-components';
 var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
   var _dataSource$, _dataSource$$children;
   var defaultValue = props.defaultValue,
     _props$dataSource = props.dataSource,
     dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
     label = props.label,
+    type = props.type,
     reset = _objectWithoutProperties(props, _excluded);
   var noSelect = dataSource.length < 2 && ((_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : (_dataSource$$children = _dataSource$.children) === null || _dataSource$$children === void 0 ? void 0 : _dataSource$$children.length) < 2;
   return /*#__PURE__*/React.createElement("div", {
@@ -19,7 +20,7 @@ var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
   }, label), noSelect ? null : /*#__PURE__*/React.createElement(Icon, {
     type: "caret-down",
     size: "xxs"
-  }), /*#__PURE__*/React.createElement(Select, _extends({
+  }), type === 'select' ? /*#__PURE__*/React.createElement(Select, _extends({
     className: classNames('condition-select', {
       'rc-search-prefix-no-select': noSelect
     }),
@@ -38,6 +39,20 @@ var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
   }, reset, {
     autoWidth: false,
     popupClassName: "rc-search-prefix"
+  })) : /*#__PURE__*/React.createElement(CascaderSelect, _extends({
+    className: classNames('condition-select', {
+      'rc-search-prefix-no-select': noSelect
+    }),
+    defaultValue: defaultValue,
+    hasBorder: false,
+    disabled: noSelect,
+    autoHighlightFirstItem: false,
+    dataSource: dataSource
+    // itemRender={({ label, value }) => (<span data-value={value}>{label}</span>)}
+  }, reset, {
+    autoWidth: false,
+    popupClassName: "rc-search-prefix",
+    canOnlyCheckLeaf: true
   })));
 };
 export default SearchConditionSelectPrefix;

package/es/ComplexSearch/index.js

@@ -9,19 +9,42 @@ import cloneDeep from 'lodash/cloneDeep';
 import groupBy from 'lodash/groupBy';
 import isArray from 'lodash/isArray';
 import React, { useState, useRef } from 'react';
-import { Button, Icon, Select, ConfigProvider, Field, Checkbox } from '@alicloud/console-components';
+import { Button, Icon, Select, ConfigProvider, Field, Checkbox, CascaderSelect } from '@alicloud/console-components';
 import { isPlainObject, template } from 'lodash';
 import { SearchWarp, MultiBtnWarp } from '../style';
 import SearchConditionSelectPrefix from './InputPrefix';
 import { SEARCH_FILTER_FIELD, SEARCH_FILTER_VALUE_FIELD } from '../constants';
 import message from '../message';
 var AutoComplete = Select.AutoComplete;
+function formatOptionsChildren(children) {
+  if (!children) return undefined;
+  return children.map(function (o) {
+    return {
+      label: o.label,
+      value: o.dataIndex || o.value || o.label,
+      disabled: o.disabled,
+      children: formatOptionsChildren(o.children)
+    };
+  });
+}
+
 /**
  *
  * @param IRcSearchOptionsProps options
  * @returns
  */
-var normalizeOptions = function normalizeOptions(options) {
+var normalizeOptions = function normalizeOptions(options, prefixSelectMode) {
+  if (prefixSelectMode === 'cascader') {
+    return options.map(function (o) {
+      return {
+        label: o.label,
+        value: o.dataIndex || o.value || o.label,
+        disabled: o.disabled,
+        // @ts-ignore
+        children: formatOptionsChildren(o.children)
+      };
+    });
+  }
   var optionsCopy = cloneDeep(options);
   optionsCopy.forEach(function (o) {
     !o.groupName && (o.groupName = message.defaultFilterGroupName);
@@ -35,7 +58,8 @@ var normalizeOptions = function normalizeOptions(options) {
       children: children.map(function (l) {
         return {
           label: l.label,
-          value: l.dataIndex
+          value: l.dataIndex || l.value,
+          disabled: l.disabled
         };
       })
     };
@@ -60,9 +84,22 @@ var normalizeSelectDataSource = function normalizeSelectDataSource(title, list)
     children: _toConsumableArray(list)
   }];
 };
+var _flatOption = function flatOption() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var flattened = [];
+  opts.forEach(function (item) {
+    if (item.children) {
+      flattened.push.apply(flattened, _toConsumableArray(_flatOption(item.children)));
+    } else {
+      flattened.push(item);
+    }
+  });
+  return flattened;
+};
 var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, options) {
-  var opt = options === null || options === void 0 ? void 0 : options.find(function (o) {
-    return o.dataIndex === dataIndex;
+  var _flatOption2;
+  var opt = (_flatOption2 = _flatOption(options)) === null || _flatOption2 === void 0 ? void 0 : _flatOption2.find(function (o) {
+    return getDataIndex(o) === dataIndex;
   });
   var valueLabel = value;
   if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'select') {
@@ -97,6 +134,9 @@ var highlightKeyword = function highlightKeyword(value, keywords) {
     }
   }, highlightValue), endValue);
 };
+var getDataIndex = function getDataIndex(option) {
+  return (option === null || option === void 0 ? void 0 : option.dataIndex) || (option === null || option === void 0 ? void 0 : option.value);
+};
 var ComplexSearch = function ComplexSearch(props) {
   var _props$options = props.options,
     options = _props$options === void 0 ? [] : _props$options,
@@ -109,9 +149,12 @@ var ComplexSearch = function ComplexSearch(props) {
     _props$suggestions = props.suggestions,
     suggestions = _props$suggestions === void 0 ? [] : _props$suggestions,
     _props$prefix = props.prefix,
-    prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
+    prefix = _props$prefix === void 0 ? 'next-' : _props$prefix,
+    _props$prefixSelectMo = props.prefixSelectMode,
+    prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo,
+    prefixSelectItemRender = props.prefixSelectItemRender;
   var _useState = useState(options.find(function (o) {
-      return o.dataIndex === defaultSelectedDataIndex;
+      return getDataIndex(o) === defaultSelectedDataIndex;
     })),
     _useState2 = _slicedToArray(_useState, 2),
     selectedFilterType = _useState2[0],
@@ -137,7 +180,7 @@ var ComplexSearch = function ComplexSearch(props) {
   // 计算视图，根据内部状态和输入的 props 决定一些值
   var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(SEARCH_FILTER_FIELD);
   var defaultFilter = options.find(function (t) {
-    return t.dataIndex === defaultDataIndex;
+    return getDataIndex(t) === defaultDataIndex;
   });
   var highlightItem = function highlightItem(item, searchKey) {
     var label = item.label;
@@ -154,8 +197,8 @@ var ComplexSearch = function ComplexSearch(props) {
    */
   var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
     var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    setSelectedFilterType(options.find(function (o) {
-      return o.dataIndex === type;
+    setSelectedFilterType(_flatOption(options).find(function (o) {
+      return getDataIndex(o) === type;
     }));
     resetValue && reset();
   };
@@ -163,13 +206,13 @@ var ComplexSearch = function ComplexSearch(props) {
   /**
    * 处理当筛选类型没选中，用户输入筛选类型，或者是做默认搜索的情况
    */
-  var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy, option) {
-    var isFuzzySearch = isFuzzy && getValue(SEARCH_FILTER_FIELD);
+  var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, _isFuzzy, option) {
+    var isFuzzySearch = _isFuzzy && getValue(SEARCH_FILTER_FIELD);
 
     // 如果是模糊搜索，则直接处理
     if (isFuzzySearch) {
       if (actionType !== 'change') {
-        handleSearch(option.dataIndex);
+        handleSearch(getDataIndex(option));
       } else {
         onSuggest && onSuggest(value, defaultDataIndex || '');
       }
@@ -195,7 +238,7 @@ var ComplexSearch = function ComplexSearch(props) {
         onSearch(getValue(SEARCH_FILTER_FIELD), dataIndex || '', normalizeSearchOptions(dataIndex || '', getValue(SEARCH_FILTER_FIELD), options));
       }
       if (selectedFilterType) {
-        onSearch(value, selectedFilterType.dataIndex, normalizeSearchOptions(selectedFilterType.dataIndex, value, options));
+        onSearch(value, getDataIndex(selectedFilterType), normalizeSearchOptions(getDataIndex(selectedFilterType), value, options));
       }
     }
     reset();
@@ -325,15 +368,28 @@ var ComplexSearch = function ComplexSearch(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('condition')
   }, selectedFilterType ? /*#__PURE__*/React.createElement(SearchConditionSelectPrefix, {
-    dataSource: normalizeOptions(options),
+    type: prefixSelectMode,
+    dataSource: normalizeOptions(options, prefixSelectMode),
     label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label,
-    defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex,
+    defaultValue: getDataIndex(selectedFilterType),
     onChange: function onChange(value) {
       handlerFilterTypeChange(value);
-    }
+    },
+    itemRender: prefixSelectItemRender
   }) : null), /*#__PURE__*/React.createElement("div", {
     className: classNames('forms')
-  }, !selectedFilterType ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
+  }, !selectedFilterType && prefixSelectMode === 'cascader' ? /*#__PURE__*/React.createElement(CascaderSelect, {
+    className: classNames('main-input', 'multi'),
+    hasBorder: false,
+    dataSource: normalizeOptions(options, prefixSelectMode),
+    placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? template(message.defaultPlaceHolder)({
+      value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
+    }) : ''),
+    onChange: function onChange(value) {
+      handlerFilterTypeChange(value);
+    },
+    itemRender: prefixSelectItemRender
+  }) : null, !selectedFilterType && prefixSelectMode === 'select' ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
     props: {
       // @ts-ignore
       onChange: function onChange(value, actionType, option) {
@@ -344,7 +400,7 @@ var ComplexSearch = function ComplexSearch(props) {
     autoHighlightFirstItem: false
     // @ts-ignore
     ,
-    itemRender: highlightItem,
+    itemRender: prefixSelectItemRender || highlightItem,
     placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? template(message.defaultPlaceHolder)({
       value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
     }) : ''),
@@ -354,7 +410,7 @@ var ComplexSearch = function ComplexSearch(props) {
     dataSource:
     // 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ，并且用户在这个输入框里面已经输入了值
     // 则表示需要模糊搜索，调用 handleSuggest
-    isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options),
+    isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options, prefixSelectMode),
     popupStyle: {
       width: 'auto'
     },

package/es/search.js

@@ -9,8 +9,6 @@ var SearchWrap = styled.div.withConfig({
 })(["height:32px;width:400px;display:inline-block;vertical-align:top;"]);
 export var Search = function Search(props) {
   var className = props.className,
-    _props$simple = props.simple,
-    simple = _props$simple === void 0 ? false : _props$simple,
     style = props.style;
   var windThemeClass = useWindTheme();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchWrap, {

package/lib/ComplexSearch/InputPrefix.js

@@ -10,13 +10,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _consoleComponents = require("@alicloud/console-components");
-var _excluded = ["defaultValue", "dataSource", "label"];
+var _excluded = ["defaultValue", "dataSource", "label", "type"];
 var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
   var _dataSource$, _dataSource$$children;
   var defaultValue = props.defaultValue,
     _props$dataSource = props.dataSource,
     dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
     label = props.label,
+    type = props.type,
     reset = (0, _objectWithoutProperties2.default)(props, _excluded);
   var noSelect = dataSource.length < 2 && ((_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : (_dataSource$$children = _dataSource$.children) === null || _dataSource$$children === void 0 ? void 0 : _dataSource$$children.length) < 2;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -26,7 +27,7 @@ var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
   }, label), noSelect ? null : /*#__PURE__*/_react.default.createElement(_consoleComponents.Icon, {
     type: "caret-down",
     size: "xxs"
-  }), /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
+  }), type === 'select' ? /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
     className: (0, _classnames.default)('condition-select', {
       'rc-search-prefix-no-select': noSelect
     }),
@@ -45,6 +46,20 @@ var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
   }, reset, {
     autoWidth: false,
     popupClassName: "rc-search-prefix"
+  })) : /*#__PURE__*/_react.default.createElement(_consoleComponents.CascaderSelect, (0, _extends2.default)({
+    className: (0, _classnames.default)('condition-select', {
+      'rc-search-prefix-no-select': noSelect
+    }),
+    defaultValue: defaultValue,
+    hasBorder: false,
+    disabled: noSelect,
+    autoHighlightFirstItem: false,
+    dataSource: dataSource
+    // itemRender={({ label, value }) => (<span data-value={value}>{label}</span>)}
+  }, reset, {
+    autoWidth: false,
+    popupClassName: "rc-search-prefix",
+    canOnlyCheckLeaf: true
   })));
 };
 var _default = exports.default = SearchConditionSelectPrefix;

package/lib/ComplexSearch/index.js

@@ -21,17 +21,39 @@ var _style = require("../style");
 var _InputPrefix = _interopRequireDefault(require("./InputPrefix"));
 var _constants = require("../constants");
 var _message = _interopRequireDefault(require("../message"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var AutoComplete = _consoleComponents.Select.AutoComplete;
+function formatOptionsChildren(children) {
+  if (!children) return undefined;
+  return children.map(function (o) {
+    return {
+      label: o.label,
+      value: o.dataIndex || o.value || o.label,
+      disabled: o.disabled,
+      children: formatOptionsChildren(o.children)
+    };
+  });
+}
+
 /**
  *
  * @param IRcSearchOptionsProps options
  * @returns
  */
-var normalizeOptions = function normalizeOptions(options) {
+var normalizeOptions = function normalizeOptions(options, prefixSelectMode) {
+  if (prefixSelectMode === 'cascader') {
+    return options.map(function (o) {
+      return {
+        label: o.label,
+        value: o.dataIndex || o.value || o.label,
+        disabled: o.disabled,
+        // @ts-ignore
+        children: formatOptionsChildren(o.children)
+      };
+    });
+  }
   var optionsCopy = (0, _cloneDeep.default)(options);
   optionsCopy.forEach(function (o) {
     !o.groupName && (o.groupName = _message.default.defaultFilterGroupName);
@@ -45,7 +67,8 @@ var normalizeOptions = function normalizeOptions(options) {
       children: children.map(function (l) {
         return {
           label: l.label,
-          value: l.dataIndex
+          value: l.dataIndex || l.value,
+          disabled: l.disabled
         };
       })
     };
@@ -70,9 +93,22 @@ var normalizeSelectDataSource = function normalizeSelectDataSource(title, list)
     children: (0, _toConsumableArray2.default)(list)
   }];
 };
+var _flatOption = function flatOption() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var flattened = [];
+  opts.forEach(function (item) {
+    if (item.children) {
+      flattened.push.apply(flattened, (0, _toConsumableArray2.default)(_flatOption(item.children)));
+    } else {
+      flattened.push(item);
+    }
+  });
+  return flattened;
+};
 var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, options) {
-  var opt = options === null || options === void 0 ? void 0 : options.find(function (o) {
-    return o.dataIndex === dataIndex;
+  var _flatOption2;
+  var opt = (_flatOption2 = _flatOption(options)) === null || _flatOption2 === void 0 ? void 0 : _flatOption2.find(function (o) {
+    return getDataIndex(o) === dataIndex;
   });
   var valueLabel = value;
   if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'select') {
@@ -107,6 +143,9 @@ var highlightKeyword = function highlightKeyword(value, keywords) {
     }
   }, highlightValue), endValue);
 };
+var getDataIndex = function getDataIndex(option) {
+  return (option === null || option === void 0 ? void 0 : option.dataIndex) || (option === null || option === void 0 ? void 0 : option.value);
+};
 var ComplexSearch = function ComplexSearch(props) {
   var _props$options = props.options,
     options = _props$options === void 0 ? [] : _props$options,
@@ -119,9 +158,12 @@ var ComplexSearch = function ComplexSearch(props) {
     _props$suggestions = props.suggestions,
     suggestions = _props$suggestions === void 0 ? [] : _props$suggestions,
     _props$prefix = props.prefix,
-    prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
+    prefix = _props$prefix === void 0 ? 'next-' : _props$prefix,
+    _props$prefixSelectMo = props.prefixSelectMode,
+    prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo,
+    prefixSelectItemRender = props.prefixSelectItemRender;
   var _useState = (0, _react.useState)(options.find(function (o) {
-      return o.dataIndex === defaultSelectedDataIndex;
+      return getDataIndex(o) === defaultSelectedDataIndex;
     })),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedFilterType = _useState2[0],
@@ -147,7 +189,7 @@ var ComplexSearch = function ComplexSearch(props) {
   // 计算视图，根据内部状态和输入的 props 决定一些值
   var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(_constants.SEARCH_FILTER_FIELD);
   var defaultFilter = options.find(function (t) {
-    return t.dataIndex === defaultDataIndex;
+    return getDataIndex(t) === defaultDataIndex;
   });
   var highlightItem = function highlightItem(item, searchKey) {
     var label = item.label;
@@ -164,8 +206,8 @@ var ComplexSearch = function ComplexSearch(props) {
    */
   var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
     var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    setSelectedFilterType(options.find(function (o) {
-      return o.dataIndex === type;
+    setSelectedFilterType(_flatOption(options).find(function (o) {
+      return getDataIndex(o) === type;
     }));
     resetValue && reset();
   };
@@ -173,13 +215,13 @@ var ComplexSearch = function ComplexSearch(props) {
   /**
    * 处理当筛选类型没选中，用户输入筛选类型，或者是做默认搜索的情况
    */
-  var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy, option) {
-    var isFuzzySearch = isFuzzy && getValue(_constants.SEARCH_FILTER_FIELD);
+  var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, _isFuzzy, option) {
+    var isFuzzySearch = _isFuzzy && getValue(_constants.SEARCH_FILTER_FIELD);
 
     // 如果是模糊搜索，则直接处理
     if (isFuzzySearch) {
       if (actionType !== 'change') {
-        handleSearch(option.dataIndex);
+        handleSearch(getDataIndex(option));
       } else {
         onSuggest && onSuggest(value, defaultDataIndex || '');
       }
@@ -205,7 +247,7 @@ var ComplexSearch = function ComplexSearch(props) {
         onSearch(getValue(_constants.SEARCH_FILTER_FIELD), dataIndex || '', normalizeSearchOptions(dataIndex || '', getValue(_constants.SEARCH_FILTER_FIELD), options));
       }
       if (selectedFilterType) {
-        onSearch(value, selectedFilterType.dataIndex, normalizeSearchOptions(selectedFilterType.dataIndex, value, options));
+        onSearch(value, getDataIndex(selectedFilterType), normalizeSearchOptions(getDataIndex(selectedFilterType), value, options));
       }
     }
     reset();
@@ -335,15 +377,28 @@ var ComplexSearch = function ComplexSearch(props) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('condition')
   }, selectedFilterType ? /*#__PURE__*/_react.default.createElement(_InputPrefix.default, {
-    dataSource: normalizeOptions(options),
+    type: prefixSelectMode,
+    dataSource: normalizeOptions(options, prefixSelectMode),
     label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label,
-    defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex,
+    defaultValue: getDataIndex(selectedFilterType),
     onChange: function onChange(value) {
       handlerFilterTypeChange(value);
-    }
+    },
+    itemRender: prefixSelectItemRender
   }) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('forms')
-  }, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_FIELD, {
+  }, !selectedFilterType && prefixSelectMode === 'cascader' ? /*#__PURE__*/_react.default.createElement(_consoleComponents.CascaderSelect, {
+    className: (0, _classnames.default)('main-input', 'multi'),
+    hasBorder: false,
+    dataSource: normalizeOptions(options, prefixSelectMode),
+    placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? (0, _lodash.template)(_message.default.defaultPlaceHolder)({
+      value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
+    }) : ''),
+    onChange: function onChange(value) {
+      handlerFilterTypeChange(value);
+    },
+    itemRender: prefixSelectItemRender
+  }) : null, !selectedFilterType && prefixSelectMode === 'select' ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_FIELD, {
     props: {
       // @ts-ignore
       onChange: function onChange(value, actionType, option) {
@@ -354,7 +409,7 @@ var ComplexSearch = function ComplexSearch(props) {
     autoHighlightFirstItem: false
     // @ts-ignore
     ,
-    itemRender: highlightItem,
+    itemRender: prefixSelectItemRender || highlightItem,
     placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? (0, _lodash.template)(_message.default.defaultPlaceHolder)({
       value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
     }) : ''),
@@ -364,7 +419,7 @@ var ComplexSearch = function ComplexSearch(props) {
     dataSource:
     // 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ，并且用户在这个输入框里面已经输入了值
     // 则表示需要模糊搜索，调用 handleSuggest
-    isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options),
+    isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options, prefixSelectMode),
     popupStyle: {
       width: 'auto'
     },

package/lib/search.js

@@ -16,8 +16,6 @@ var SearchWrap = _styledComponents.default.div.withConfig({
 })(["height:32px;width:400px;display:inline-block;vertical-align:top;"]);
 var Search = exports.Search = function Search(props) {
   var className = props.className,
-    _props$simple = props.simple,
-    simple = _props$simple === void 0 ? false : _props$simple,
     style = props.style;
   var windThemeClass = (0, _useCssVar.useWindTheme)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SearchWrap, {

package/lib/types/IRcSearchOptions.type.d.ts

@@ -6,6 +6,8 @@ export interface IRcSearchOptionsProps {
        * 字段展示名称
        */
     label: string;
+    value?: any;
+    disabled?: boolean;
     /**
        * 字段表单key
        */

package/lib/types/IRcSearchProps.type.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * 这是IRcSearchProps的说明。breezr-docs支持从源码中提取接口信息并文档化，因此你可以使用接口来定义Props，从而能便捷地将Props的信息通过文档透出。
  *
@@ -63,4 +64,14 @@ export interface IRcSearchProps {
      * 样式 class 前缀
      */
     prefix?: string;
+    /**
+     * 前缀选择器类型
+     */
+    prefixSelectMode?: 'select' | 'cascader';
+    /**
+     * 前缀选择器 item 渲染
+     * @param item
+     * @returns
+     */
+    prefixSelectItemRender?: (item: any) => React.ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-components-search",
-  "version": "0.2.37-beta.0",
+  "version": "0.2.37",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "license": "MIT",
@@ -9,6 +9,7 @@
     "@alicloud/console-toolkit-preset-component": "^1.2.8",
     "@alicloud/console-toolkit-preset-docs": "^1.0.34",
     "@alifd/next": "^1.27.29",
+    "@babel/core": "^7.28.0",
     "@types/classnames": "^2.3.4",
     "@types/js-cookie": "^3.0.1",
     "@types/react": "^17.0.0",
@@ -17,6 +18,8 @@
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0",
     "serve": "^11.3.2",
     "styled-components": "^5.2.1",
     "typescript": "^4.1.3"