@kne/react-filter 0.1.28 → 1.0.1

package/dist/index.modern.js

@@ -1,942 +1,2306 @@
-import React, { createContext, useContext, useState, useEffect, useRef, useMemo, cloneElement } from 'react';
-import { Space, Popover, Tag, message, Button, Tooltip, InputNumber, Input, Select, Checkbox, Radio, DatePicker, Divider, Row, Col } from 'antd';
-import useEvent from '@kne/use-event';
 import classnames from 'classnames';
-import { createCitySelect, apis, RemoteData, DisplayCity } from '@kne/react-city-select';
-import { get, isFunction, isEqual, findIndex, isNumber } from 'lodash';
-import useSimulationBlur from '@kne/use-simulation-blur';
-import moment from 'moment';
-
-const context$1 = createContext({});
-const {
-  Consumer,
-  Provider: Provider$1
-} = context$1;
-const useConsumer = () => useContext(context$1);
+import { useContext as useContext$1, createContext, useState, useRef, useCallback, useEffect, createElement, useMemo } from 'react';
+import { Space, Row, Col, Tag, Button, Dropdown, Input, InputNumber, DatePicker, Flex, Select, App } from 'antd';
+import { useIntl, createWithIntlProvider } from '@kne/react-intl';
+import get from 'lodash/get';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import clone from 'lodash/clone';
+import { createPortal } from 'react-dom';
+import isNumber from 'lodash/isNumber';
+import SuperSelect from '@kne/super-select';
+import { SelectFunction, SelectIndustry, SelectAddress, createAddressApi } from '@kne/super-select-plus';
+import '@kne/super-select-plus/dist/index.css';
+import dayjs from 'dayjs';
+import transform from 'lodash/transform';
+import { useSearchParams } from 'react-router-dom';
+import isEqual from 'lodash/isEqual';
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
   }
-
-  return target;
+  return t;
 }
 
-const _excluded$9 = ["label", "labelHidden", "isMore", "moreTrigger"];
+var style$1 = {"filter":"kne-react-filter_b3gMw","filter-item-icon":"kne-react-filter_e3V6h","filter-item-option-icon":"kne-react-filter_dLoYj","filter-title":"kne-react-filter_khFt2","filter-title-hidden":"kne-react-filter_j2mP1","ad-filter-title":"kne-react-filter_HptIY","ad-filter-line":"kne-react-filter_7Ob6-","filter-line":"kne-react-filter_Y9XTa","clean-btn":"kne-react-filter_CJ935","filter-item":"kne-react-filter_JpaMr","un-expand":"kne-react-filter_LfQME","ad-filter-selected":"kne-react-filter_pBsaE","filter-label":"kne-react-filter_Bx3s8","filter-item-wrap":"kne-react-filter_Co4Pg","option":"kne-react-filter_G1cRp","is-active":"kne-react-filter_Aab98","is-visited":"kne-react-filter_Ww12R","un-expand-shadow":"kne-react-filter_2ExqW","filter-item-label":"kne-react-filter_JAmeE","filter-item-field":"kne-react-filter_WvRvl","filter-drop-tag":"kne-react-filter_dG8rq","filter-list":"kne-react-filter_qlWu6","filter-list-scroll-wrap":"kne-react-filter_oaIF4","filter-list-scroll":"kne-react-filter_Jq43Q","filter-scroll-next":"kne-react-filter_BdfSI","filter-list-tag":"kne-react-filter_LV2VI","filter-tag":"kne-react-filter_yyR3u","filter-tag-value":"kne-react-filter_8nm8n","filter-value-tag":"kne-react-filter_tWyCr","filter-value-tag-label":"kne-react-filter_XPzrL","filter-value-tag-content":"kne-react-filter_6e79l","pop-util-content":"kne-react-filter_g-hXk","pop-util-body":"kne-react-filter_4n4MP","date-range-picker-popup":"kne-react-filter_6Zx60","pop-util-overlay":"kne-react-filter_m7Csi","pop-util-mask":"kne-react-filter_o2B3k","pop-util-mask-fade-in":"kne-react-filter_oCXiX","pop-util-mask-leave":"kne-react-filter_qGnRO","pop-util-mask-fade-out":"kne-react-filter_cDx1y","field-item-mobile-popup":"kne-react-filter_wq5nf","pop-util-mobile-expand-down":"kne-react-filter_6RxjE","date-picker-popup":"kne-react-filter_iwLs2","pop-util-mobile-collapse-up":"kne-react-filter_009r-","pop-util-footer":"kne-react-filter_iqe8W","pop-util-text":"kne-react-filter_72gGQ","filter-item-inner":"kne-react-filter_cYX12","filter-item-text":"kne-react-filter_cnMY-","filter-item-number-range":"kne-react-filter_Cv2Bw","filter-item-custom":"kne-react-filter_CBczA","filter-item-custom-active":"kne-react-filter_ldxUR","filter-item-number-range-split":"kne-react-filter_4p3C9","filter-item-number-input":"kne-react-filter_yy1y1","range-picker":"kne-react-filter_81zQn","cascader-select-wrap":"kne-react-filter_UHBfi","cascader-dropdown-menu":"kne-react-filter_bY8JQ","filter-advanced":"kne-react-filter_rg45N","filter-advanced-item-other":"kne-react-filter_HcsA8","filter-advanced-item-other-inner":"kne-react-filter_4Bqtz","filter-advanced-more":"kne-react-filter_jVH7z","filter-scroll-next-icon":"kne-react-filter_Fd6ab"};
+
+const context = /*#__PURE__*/createContext({});
+const {
+  Provider
+} = context;
+const useContext = () => useContext$1(context);
 
-const PopContent = props => {
-  const [visible, setVisible] = useState(false);
+const Line$1 = ({
+  list,
+  children
+}) => {
   const {
-    emitter
-  } = useConsumer();
-  useEffect(() => {
-    emitter.addListener('change', () => {
-      setVisible(false);
-    });
-  }, []);
-  return /*#__PURE__*/React.createElement(Popover, _extends({}, props, {
-    visible: visible,
-    onVisibleChange: setVisible
-  }));
+    value,
+    onChange
+  } = useContext();
+  return /*#__PURE__*/jsxs("div", {
+    className: style$1['filter-line'],
+    children: [list.filter(item => !!item.type).map((item, index) => {
+      if (typeof item === 'function') {
+        return item(props => {
+          return {
+            index,
+            value: value ? get(value.get(props == null ? void 0 : props.name), 'value') : props == null ? void 0 : props.value,
+            onChange: onChange ? value => onChange({
+              name: props == null ? void 0 : props.name,
+              label: props == null ? void 0 : props.label,
+              value
+            }) : props == null ? void 0 : props.onChange
+          };
+        });
+      }
+      const ComponentItem = item.type;
+      return /*#__PURE__*/createElement(ComponentItem, _extends({}, Object.assign({}, item.props, {
+        value: value ? get(value.get(item.props.name), 'value') : item.props.value,
+        onChange: onChange ? value => onChange({
+          name: item.props.name,
+          label: item.props.label,
+          value
+        }) : item.props.onChange
+      }), {
+        key: item.key || item.props.name || index
+      }));
+    }), children]
+  });
 };
-
-const FilterItem = ({
+const FilterLines = ({
   className,
+  list: _list = [],
+  displayLine: _displayLine = 1,
   label,
-  labelHidden,
-  isMore,
-  moreTrigger,
-  onClick,
+  extra,
   children
 }) => {
-  if (isMore) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames("react-filter-item-label", "is-more", className)
-    }, children ? /*#__PURE__*/React.createElement(PopContent, {
-      content: children,
-      trigger: moreTrigger,
-      placement: "bottom",
-      overlayClassName: "react-filter-item-popover"
-    }, /*#__PURE__*/React.createElement("a", {
-      className: "react-filter-item-more"
-    }, label)) : /*#__PURE__*/React.createElement("a", {
-      className: "react-filter-item-more",
-      onClick: onClick
-    }, label));
-  }
+  const hasMore = _list.length > _displayLine;
+  const mobileList = _list.reduce((result, item) => result.concat(Array.isArray(item) ? item : [item]), []);
+  const [isExpand, setIsExpand] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [showScrollNext, setShowScrollNext] = useState(false);
+  const scrollRef = useRef(null);
+  const {
+    formatMessage
+  } = useIntl({
+    moduleName: 'Filter'
+  });
+  const updateScrollNextVisible = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) {
+      setShowScrollNext(false);
+      return;
+    }
+    setShowScrollNext(el.scrollWidth > el.clientWidth && el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const mediaQuery = window.matchMedia('(max-width: 768px)');
+    const updateIsMobile = () => {
+      setIsMobile(mediaQuery.matches);
+    };
+    updateIsMobile();
+    mediaQuery.addEventListener ? mediaQuery.addEventListener('change', updateIsMobile) : mediaQuery.addListener(updateIsMobile);
+    return () => {
+      mediaQuery.removeEventListener ? mediaQuery.removeEventListener('change', updateIsMobile) : mediaQuery.removeListener(updateIsMobile);
+    };
+  }, []);
+  useEffect(() => {
+    if (!isMobile) {
+      setShowScrollNext(false);
+      return;
+    }
+    const el = scrollRef.current;
+    if (!el) return;
+    updateScrollNextVisible();
+    const update = () => {
+      updateScrollNextVisible();
+    };
+    el.addEventListener('scroll', update);
+    window.addEventListener('resize', update);
+    const rafId = window.requestAnimationFrame(update);
+    return () => {
+      el.removeEventListener('scroll', update);
+      window.removeEventListener('resize', update);
+      window.cancelAnimationFrame(rafId);
+    };
+  }, [isMobile, _list, updateScrollNextVisible]);
+  const scrollToNext = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollTo({
+      left: el.scrollLeft + el.clientWidth * 0.8,
+      behavior: 'smooth'
+    });
+  }, []);
+  const scrollItemIntoView = useCallback(e => {
+    if (!isMobile) return;
+    const container = scrollRef.current;
+    const item = e.target.closest(`.${style$1['filter-item-wrap']}`) || e.target.closest(`.${style$1['filter-item']}`);
+    if (!container || !item) return;
+    item.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center'
+    });
+  }, [isMobile]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Space, {
+      className: classnames(style$1['filter-title'], 'filter-title', className),
+      align: "top",
+      size: 16,
+      children: [/*#__PURE__*/jsx("span", {
+        className: style$1['filter-label'],
+        children: _list && _list.length > 0 && (label || formatMessage({
+          id: 'filterText'
+        }))
+      }), /*#__PURE__*/jsxs(Row, {
+        justify: "space-between",
+        wrap: false,
+        align: "top",
+        children: [/*#__PURE__*/jsx(Col, {
+          className: style$1['filter-list'],
+          flex: 1,
+          children: /*#__PURE__*/jsxs("div", {
+            className: style$1['filter-list-scroll-wrap'],
+            children: [/*#__PURE__*/jsx("div", {
+              className: style$1['filter-list-scroll'],
+              ref: scrollRef,
+              onClick: scrollItemIntoView,
+              children: (isMobile ? mobileList : _list.slice(0, _displayLine)).map((item, index) => /*#__PURE__*/jsx(Line$1, {
+                list: isMobile ? [item] : item,
+                children: !isMobile && hasMore && isExpand === false && index === _displayLine - 1 ? /*#__PURE__*/jsxs(Space, {
+                  size: 4,
+                  className: classnames(style$1['filter-item'], style$1['option']),
+                  onClick: () => {
+                    setIsExpand(value => !value);
+                  },
+                  children: [formatMessage({
+                    id: 'moreText'
+                  }), /*#__PURE__*/jsx("span", {
+                    className: style$1['filter-item-option-icon'],
+                    children: "\u25BC"
+                  })]
+                }) : null
+              }, index))
+            }), isMobile && showScrollNext ? /*#__PURE__*/jsx("button", {
+              type: "button",
+              className: style$1['filter-scroll-next'],
+              onClick: scrollToNext,
+              "aria-label": "scroll next",
+              children: /*#__PURE__*/jsx("span", {
+                className: style$1['filter-scroll-next-icon'],
+                children: "\u203A"
+              })
+            }) : null]
+          })
+        }), /*#__PURE__*/jsx(Col, {
+          children: extra
+        })]
+      })]
+    }), /*#__PURE__*/jsx(Space, {
+      className: classnames(style$1['filter-title'], 'filter-title-wrap'),
+      align: "center",
+      size: 16,
+      children: children
+    }), /*#__PURE__*/jsxs(Space, {
+      className: classnames(style$1['filter-title'], 'filter-title-wrap', {
+        [style$1['filter-title-hidden']]: isMobile || !(hasMore && isExpand)
+      }),
+      align: "top",
+      size: 16,
+      children: [/*#__PURE__*/jsx("span", {
+        className: style$1['filter-label'],
+        children: formatMessage({
+          id: 'moreText'
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: style$1['filter-list'],
+        children: _list.slice(_displayLine).map((item, index) => /*#__PURE__*/jsx(Line$1, {
+          list: item,
+          children: index === _list.length - _displayLine - 1 && /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(Space, {
+              size: 4,
+              className: classnames(style$1['un-expand-shadow']),
+              children: /*#__PURE__*/jsxs(Space, {
+                size: 4,
+                className: classnames(style$1['option'], style$1['filter-item']),
+                children: [formatMessage({
+                  id: 'toggleUpText'
+                }), /*#__PURE__*/jsx("span", {
+                  className: style$1['filter-item-option-icon'],
+                  children: "\u25B2"
+                })]
+              })
+            }), /*#__PURE__*/jsx(Space, {
+              size: 4,
+              className: classnames(style$1['un-expand']),
+              onClick: () => {
+                setIsExpand(value => !value);
+              },
+              children: /*#__PURE__*/jsxs(Space, {
+                size: 4,
+                className: classnames(style$1['option'], style$1['filter-item']),
+                children: [formatMessage({
+                  id: 'toggleUpText'
+                }), /*#__PURE__*/jsx("span", {
+                  className: style$1['filter-item-option-icon'],
+                  children: "\u25B2"
+                })]
+              })
+            })]
+          })
+        }, index))
+      })]
+    })]
+  });
+};
 
-  return /*#__PURE__*/React.createElement(Space, {
-    className: classnames('react-filter-item', className)
-  }, labelHidden ? null : /*#__PURE__*/React.createElement("div", {
-    className: "react-filter-item-label"
-  }, label, ":"), /*#__PURE__*/React.createElement("div", {
-    className: "react-filter-item-children"
-  }, children));
+const message$1 = {
+  filterText: '筛选',
+  moreText: '更多',
+  selectedText: '您已选择',
+  clearAllText: '清空全部',
+  toggleUpText: '收起',
+  selectedTextAdvanced: '已选',
+  clearText: '清空筛选',
+  otherText: '其他',
+  cancelText: '取消',
+  determineText: '确定',
+  year: '年',
+  over: '{count}{unit}以上',
+  lessThan: '{count}{unit}以下',
+  inputPlaceholder: '请输入{label}',
+  pleaseInput: '请输入',
+  defaultInputPlaceholder: '请输入{label}',
+  maxSelectedCount: '最多选择{count}项',
+  customTime: '自定义时间',
+  monthly: '按月',
+  weekly: '按周',
+  last7Days: '近7天',
+  thisMonth: '本月',
+  last3Months: '近三个月',
+  thisYear: '当年',
+  fullYear: '本年度',
+  pleaseSelect: '请选择'
 };
 
-const withFilterItem = WrappedComponent => _ref => {
-  let {
-    label,
-    labelHidden,
-    isMore,
-    moreTrigger
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-
-  return /*#__PURE__*/React.createElement(FilterItem, {
-    label: label,
-    labelHidden: labelHidden,
-    isMore: isMore,
-    moreTrigger: moreTrigger
-  }, /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
-    label: label,
-    isMore: isMore
-  })));
+const message = {
+  filterText: 'Filter',
+  moreText: 'More',
+  selectedText: 'Selected',
+  clearAllText: 'Clear All',
+  toggleUpText: 'Pack Up',
+  selectedTextAdvanced: 'Selected',
+  clearText: 'Clear Filter',
+  otherText: 'Other',
+  cancelText: 'Cancel',
+  determineText: 'Determine',
+  year: 'year',
+  over: 'over {count} {unit}s',
+  lessThan: 'less than {count} {unit}s',
+  inputPlaceholder: 'Please enter {label}',
+  pleaseInput: 'Please enter ',
+  defaultInputPlaceholder: 'Please enter {label}',
+  maxSelectedCount: 'Select up to {count} items',
+  customTime: 'Custom Time',
+  monthly: 'Monthly',
+  weekly: 'Weekly',
+  last7Days: 'Last 7 Days',
+  thisMonth: 'This Month',
+  last3Months: 'Last 3 Months',
+  thisYear: 'Year to Date',
+  fullYear: 'Full Year',
+  pleaseSelect: 'Please Select'
 };
 
-const _excluded$8 = ["value", "label"];
-const {
-  CheckableTag
-} = Tag;
-const context = createContext({});
-const {
-  Provider
-} = context;
+const withLocale = createWithIntlProvider({
+  defaultLocale: 'zh-CN',
+  messages: {
+    'zh-CN': message$1,
+    'en-US': message
+  },
+  namespace: 'react-filter'
+});
 
-const List = ({
-  label,
-  labelHidden,
-  name,
-  size,
-  children,
-  options,
-  more,
-  isMore
+const FilterValueDisplay = withLocale(({
+  value: filterValue,
+  extraExpand,
+  onChange
 }) => {
   const {
-    value,
-    onChange
-  } = useConsumer();
+    formatMessage
+  } = useIntl({
+    moduleName: 'Filter'
+  });
+  return /*#__PURE__*/jsxs(Space, {
+    className: style$1['filter-title'],
+    align: "top",
+    size: 16,
+    children: [/*#__PURE__*/jsx("span", {
+      className: style$1['filter-label'],
+      children: formatMessage({
+        id: 'selectedText'
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: style$1['filter-line'],
+      children: [filterValue.map(({
+        name,
+        label,
+        value
+      }, index) => {
+        const valueLabel = Array.isArray(value) ? value.map(item => item.label).join('，') : value == null ? void 0 : value.label;
+        return /*#__PURE__*/jsxs(Tag, {
+          closable: true,
+          className: style$1['filter-value-tag'],
+          onClose: () => {
+            const newValue = filterValue.slice(0);
+            newValue.splice(index, 1);
+            onChange(newValue);
+          },
+          children: [/*#__PURE__*/jsxs("span", {
+            className: style$1['filter-value-tag-label'],
+            children: [label, ":"]
+          }), /*#__PURE__*/jsx("span", {
+            className: style$1['filter-value-tag-content'],
+            children: valueLabel
+          })]
+        }, name);
+      }), /*#__PURE__*/jsxs(Space, {
+        size: 4,
+        className: classnames(style$1['un-expand-shadow']),
+        children: [extraExpand, /*#__PURE__*/jsx(Button, {
+          size: "small",
+          children: formatMessage({
+            id: 'clearAllText'
+          })
+        })]
+      }), /*#__PURE__*/jsxs(Space, {
+        size: 4,
+        className: classnames(style$1['un-expand']),
+        children: [extraExpand, /*#__PURE__*/jsx(Button, {
+          size: "small",
+          onClick: () => {
+            onChange([]);
+          },
+          children: formatMessage({
+            id: 'clearAllText'
+          })
+        })]
+      })]
+    })]
+  });
+});
 
-  const currentValue = (() => {
-    const originValue = get(value, name);
+const isNotEmpty$2 = value => {
+  if (value === null || value === undefined) return false;
+  if (typeof value === 'string' && value.trim() === '') return false;
+  if (Array.isArray(value) && value.length === 0) return false;
+  return true;
+};
+const FilterProvider = ({
+  children,
+  value: valueBase,
+  onChange,
+  defaultValue: _defaultValue = []
+}) => {
+  const value = useMemo(() => {
+    return (valueBase || _defaultValue).filter(item => isNotEmpty$2(item.value));
+  }, [valueBase, _defaultValue]);
+  const filterValue = useMemo(() => {
+    return new Map(value.map(item => [item.name, item]));
+  }, [value]);
+  return /*#__PURE__*/jsx(Provider, {
+    value: {
+      value: filterValue,
+      onChange: item => {
+        const newFilterValue = clone(filterValue);
+        item.value ? newFilterValue.set(item.name, item) : newFilterValue.delete(item.name);
+        onChange == null || onChange(Array.from(newFilterValue.values()));
+      }
+    },
+    children: typeof children === 'function' ? children({
+      value,
+      onChange
+    }) : children
+  });
+};
 
-    if (size === 1) {
-      return originValue !== void 0 ? [originValue] : [];
-    } else {
-      return originValue || [];
+const _excluded$f = ["children", "className"];
+const FilterOuter = _ref => {
+  let {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  return /*#__PURE__*/jsx(FilterProvider, _extends({}, props, {
+    children: context => /*#__PURE__*/jsx("div", {
+      className: classnames(style$1['filter'], 'filter', className),
+      children: children(_extends({}, context, {
+        props
+      }))
+    })
+  }));
+};
+
+const _excluded$e = ["defaultValue"],
+  _excluded2 = ["extraExpand"];
+const Filter = withLocale(_ref => {
+  let {
+      defaultValue = []
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+  return /*#__PURE__*/jsx(FilterOuter, _extends({}, props, {
+    defaultValue: defaultValue,
+    children: ({
+      props: filterProps = {},
+      value,
+      onChange
+    }) => {
+      const {
+          extraExpand
+        } = filterProps,
+        others = _objectWithoutPropertiesLoose(filterProps, _excluded2);
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(FilterLines, _extends({}, others)), value && value.length > 0 && /*#__PURE__*/jsx(FilterValueDisplay, {
+          value: value,
+          onChange: onChange,
+          extraExpand: extraExpand
+        })]
+      });
     }
-  })();
+  }));
+});
 
-  const changeHandler = value => {
-    if (size === 1) {
-      return onChange(name, value[0]);
-    } else {
-      return onChange(name, value);
+const FilterItem = withLocale(({
+  open,
+  active,
+  label,
+  children
+}) => {
+  return /*#__PURE__*/jsx(Space, {
+    className: style$1['filter-item-wrap'],
+    children: /*#__PURE__*/jsxs("div", {
+      className: classnames(style$1['filter-item'], {
+        [style$1['is-active']]: active,
+        [style$1['is-visited']]: open
+      }),
+      children: [/*#__PURE__*/jsxs(Space, {
+        className: style$1['filter-item-label'],
+        size: 4,
+        children: [/*#__PURE__*/jsx("div", {
+          children: label
+        }), /*#__PURE__*/jsx("span", {
+          className: style$1['filter-item-icon'],
+          children: "\u25BC"
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: style$1['filter-item-field'],
+        children: children
+      })]
+    })
+  });
+});
+
+const _excluded$d = ["value", "onChange", "interceptor", "label", "render"];
+const isNotEmpty$1 = value => {
+  if (value === null || value === undefined) return false;
+  if (typeof value === 'string' && value.trim() === '') return false;
+  return !(Array.isArray(value) && value.length === 0);
+};
+const MASK_ANIMATION_DURATION$1 = 180;
+const FIELD_MOBILE_POPUP_CLASS = 'react-filter-field-mobile-popup';
+const MOBILE_POPUP_OFFSET$1 = 4;
+const withFieldItem = (WrappedComponent, options = {}) => _ref => {
+  let {
+      value,
+      onChange,
+      interceptor,
+      label,
+      render
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  const [open, setOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [renderMask, setRenderMask] = useState(false);
+  const [maskClosing, setMaskClosing] = useState(false);
+  const [popupMetrics, setPopupMetrics] = useState({
+    top: 0,
+    pageTop: 0,
+    height: 0
+  });
+  const triggerRef = useRef(null);
+  const setMobilePopupVariables = useCallback(metrics => {
+    if (typeof document === 'undefined') return;
+    document.body.style.setProperty('--react-filter-field-mobile-height', `${metrics.height}px`);
+    document.body.style.setProperty('--react-filter-popover-mobile-height', `${metrics.height}px`);
+    document.body.style.setProperty('--react-filter-field-mobile-top', `${metrics.pageTop}px`);
+  }, []);
+  const updatePopupMetrics = useCallback(() => {
+    if (typeof window === 'undefined' || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const top = Math.max(rect.bottom + MOBILE_POPUP_OFFSET$1, 0);
+    const metrics = {
+      top,
+      pageTop: top + window.scrollY,
+      height: Math.max(window.innerHeight - top, 0)
+    };
+    setPopupMetrics(metrics);
+    setMobilePopupVariables(metrics);
+  }, [setMobilePopupVariables]);
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const mediaQuery = window.matchMedia('(max-width: 768px)');
+    const updateIsMobile = () => {
+      setIsMobile(mediaQuery.matches);
+    };
+    updateIsMobile();
+    mediaQuery.addEventListener ? mediaQuery.addEventListener('change', updateIsMobile) : mediaQuery.addListener(updateIsMobile);
+    return () => {
+      mediaQuery.removeEventListener ? mediaQuery.removeEventListener('change', updateIsMobile) : mediaQuery.removeListener(updateIsMobile);
+    };
+  }, []);
+  useEffect(() => {
+    if (!open || !isMobile) return;
+    updatePopupMetrics();
+    window.addEventListener('resize', updatePopupMetrics);
+    window.addEventListener('scroll', updatePopupMetrics, true);
+    return () => {
+      window.removeEventListener('resize', updatePopupMetrics);
+      window.removeEventListener('scroll', updatePopupMetrics, true);
+    };
+  }, [isMobile, open, updatePopupMetrics]);
+  useEffect(() => {
+    if (typeof document === 'undefined' || !isMobile || popupMetrics.height <= 0) return;
+    setMobilePopupVariables(popupMetrics);
+    return () => {
+      document.body.style.removeProperty('--react-filter-field-mobile-height');
+      document.body.style.removeProperty('--react-filter-popover-mobile-height');
+      document.body.style.removeProperty('--react-filter-field-mobile-top');
+    };
+  }, [isMobile, popupMetrics, setMobilePopupVariables]);
+  useEffect(() => {
+    if (open && isMobile) {
+      setRenderMask(true);
+      setMaskClosing(false);
+      return;
+    }
+    if (!renderMask) return;
+    setMaskClosing(true);
+    const timer = setTimeout(() => {
+      setRenderMask(false);
+      setMaskClosing(false);
+    }, MASK_ANIMATION_DURATION$1);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [isMobile, open, renderMask]);
+  const closeFieldItem = useCallback(() => {
+    setOpen(false);
+    props.onOpenChange && props.onOpenChange(false);
+    props.onDropdownVisibleChange && props.onDropdownVisibleChange(false);
+  }, [props]);
+  const handleOpenChange = useCallback(open => {
+    if (open && isMobile) {
+      updatePopupMetrics();
     }
+    setOpen(open);
+    props.onOpenChange && props.onOpenChange(open);
+    props.onDropdownVisibleChange && props.onDropdownVisibleChange(open);
+  }, [isMobile, props, updatePopupMetrics]);
+  const mobilePopupStyle = isMobile ? {
+    '--react-filter-field-mobile-height': `${popupMetrics.height}px`,
+    '--react-filter-popover-mobile-height': `${popupMetrics.height}px`,
+    '--react-filter-field-mobile-top': `${popupMetrics.pageTop}px`,
+    top: popupMetrics.pageTop,
+    left: 0
+  } : undefined;
+  const mergePopupClassNames = classNames => {
+    var _classNames$popup;
+    if (!isMobile) return classNames;
+    return Object.assign({}, classNames, {
+      popup: Object.assign({}, classNames == null ? void 0 : classNames.popup, {
+        root: classnames(classNames == null || (_classNames$popup = classNames.popup) == null ? void 0 : _classNames$popup.root, style$1['field-item-mobile-popup'], FIELD_MOBILE_POPUP_CLASS)
+      })
+    });
   };
+  const mergePopupStyles = styles => {
+    var _styles$popup;
+    if (!isMobile) return styles;
+    return Object.assign({}, styles, {
+      popup: Object.assign({}, styles == null ? void 0 : styles.popup, {
+        root: Object.assign({}, styles == null || (_styles$popup = styles.popup) == null ? void 0 : _styles$popup.root, mobilePopupStyle)
+      })
+    });
+  };
+  const renderChildren = otherProps => /*#__PURE__*/jsx(WrappedComponent, _extends({
+    allowClear: false
+  }, Object.assign({}, props, otherProps), {
+    className: style$1['filter-item-inner'],
+    value: typeof (interceptor == null ? void 0 : interceptor.input) === 'function' ? interceptor.input(value) : value,
+    onChange: typeof (interceptor == null ? void 0 : interceptor.output) === 'function' ? (...args) => onChange(interceptor.output(...args)) : onChange,
+    valueType: "all",
+    onOpenChange: handleOpenChange,
+    onDropdownVisibleChange: handleOpenChange,
+    popupClassName: classnames(props.popupClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
+    dropdownClassName: classnames(props.dropdownClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
+    overlayClassName: classnames(props.overlayClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
+    overlayStyle: Object.assign({}, props.overlayStyle, mobilePopupStyle),
+    popupStyle: Object.assign({}, props.popupStyle, mobilePopupStyle),
+    dropdownStyle: Object.assign({}, props.dropdownStyle, mobilePopupStyle),
+    classNames: mergePopupClassNames(props.classNames),
+    styles: mergePopupStyles(props.styles),
+    transitionName: isMobile ? '' : props.transitionName,
+    autoAdjustOverflow: isMobile ? false : props.autoAdjustOverflow,
+    align: isMobile ? {
+      offset: [0, 0]
+    } : props.align,
+    isPopup: options.forcePopup ? true : props.isPopup,
+    overlayWidth: isMobile && options.forcePopup ? typeof window === 'undefined' ? props.overlayWidth : window.innerWidth : props.overlayWidth
+  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [renderMask && typeof document !== 'undefined' && /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
+      className: classnames(style$1['pop-util-mask'], maskClosing && style$1['pop-util-mask-leave']),
+      style: {
+        top: popupMetrics.top,
+        height: popupMetrics.height
+      },
+      onClick: closeFieldItem
+    }), document.body), /*#__PURE__*/jsx("span", {
+      ref: triggerRef,
+      children: /*#__PURE__*/jsx(FilterItem, {
+        label: label,
+        open: open,
+        active: isNotEmpty$1(value),
+        children: typeof render === 'function' ? render({
+          children: renderChildren
+        }) : renderChildren()
+      })
+    })]
+  });
+};
+
+const isNotEmpty = value => {
+  if (value === null || value === undefined) return false;
+  if (typeof value === 'string' && value.trim() === '') return false;
+  if (Array.isArray(value) && value.length === 0) return false;
+  return true;
+};
+const MASK_ANIMATION_DURATION = 180;
+const MOBILE_POPUP_OFFSET = 4;
+const PopoverItem = withLocale(({
+  value,
+  label,
+  onValidate,
+  overlayClassName,
+  placement: _placement = 'bottomLeft',
+  onOpenChange,
+  onChange,
+  children
+}) => {
+  const [state, setState] = useState(value);
+  const [open, setOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [renderMask, setRenderMask] = useState(false);
+  const [maskClosing, setMaskClosing] = useState(false);
+  const [popupMetrics, setPopupMetrics] = useState({
+    top: 0,
+    pageTop: 0,
+    height: 0
+  });
+  const triggerRef = useRef(null);
+  const disabled = useMemo(() => {
+    return onValidate && !onValidate(state);
+  }, [onValidate, state]);
+  const {
+    formatMessage
+  } = useIntl({
+    moduleName: 'Filter'
+  });
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const mediaQuery = window.matchMedia('(max-width: 768px)');
+    const updateIsMobile = () => {
+      setIsMobile(mediaQuery.matches);
+    };
+    updateIsMobile();
+    mediaQuery.addEventListener ? mediaQuery.addEventListener('change', updateIsMobile) : mediaQuery.addListener(updateIsMobile);
+    return () => {
+      mediaQuery.removeEventListener ? mediaQuery.removeEventListener('change', updateIsMobile) : mediaQuery.removeListener(updateIsMobile);
+    };
+  }, []);
+  const updatePopupMetrics = useCallback(() => {
+    if (typeof window === 'undefined' || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const top = Math.max(rect.bottom + MOBILE_POPUP_OFFSET, 0);
+    setPopupMetrics({
+      top,
+      pageTop: top + window.scrollY,
+      height: Math.max(window.innerHeight - top, 0)
+    });
+  }, []);
+  useEffect(() => {
+    if (!open || !isMobile) return;
+    updatePopupMetrics();
+    window.addEventListener('resize', updatePopupMetrics);
+    window.addEventListener('scroll', updatePopupMetrics, true);
+    return () => {
+      window.removeEventListener('resize', updatePopupMetrics);
+      window.removeEventListener('scroll', updatePopupMetrics, true);
+    };
+  }, [isMobile, open, updatePopupMetrics]);
+  useEffect(() => {
+    if (open && isMobile) {
+      setRenderMask(true);
+      setMaskClosing(false);
+      return;
+    }
+    if (!renderMask) return;
+    setMaskClosing(true);
+    const timer = setTimeout(() => {
+      setRenderMask(false);
+      setMaskClosing(false);
+    }, MASK_ANIMATION_DURATION);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [isMobile, open, renderMask]);
+  const closeDropdown = useCallback(() => {
+    setOpen(false);
+    onOpenChange && onOpenChange(false);
+  }, [onOpenChange]);
+  const handleOpenChange = useCallback(open => {
+    if (open && isMobile) {
+      updatePopupMetrics();
+    }
+    setOpen(open);
+    setState(value);
+    onOpenChange && onOpenChange(open);
+  }, [isMobile, onOpenChange, updatePopupMetrics, value]);
+  const mobileOverlayStyle = isMobile ? {
+    '--react-filter-popover-mobile-height': `${popupMetrics.height}px`,
+    top: popupMetrics.pageTop,
+    left: 0
+  } : undefined;
+  const overlayContent = /*#__PURE__*/jsxs("div", {
+    className: style$1['pop-util-body'],
+    onClick: e => {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      className: style$1['pop-util-content'],
+      children: children({
+        value: state,
+        onChange: setState
+      })
+    }), /*#__PURE__*/jsxs(Row, {
+      className: style$1['pop-util-footer'],
+      justify: "end",
+      gutter: 8,
+      children: [/*#__PURE__*/jsx(Col, {
+        children: /*#__PURE__*/jsx(Button, {
+          size: "small",
+          onClick: closeDropdown,
+          children: formatMessage({
+            id: 'cancelText'
+          })
+        })
+      }), /*#__PURE__*/jsx(Col, {
+        children: /*#__PURE__*/jsx(Button, {
+          size: "small",
+          type: "primary",
+          disabled: disabled,
+          onClick: () => {
+            closeDropdown();
+            onChange && onChange(state);
+          },
+          children: formatMessage({
+            id: 'determineText'
+          })
+        })
+      })]
+    })]
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [renderMask && typeof document !== 'undefined' && /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
+      className: classnames(style$1['pop-util-mask'], maskClosing && style$1['pop-util-mask-leave']),
+      style: {
+        top: popupMetrics.top,
+        height: popupMetrics.height
+      },
+      onClick: closeDropdown
+    }), document.body), /*#__PURE__*/jsx(Dropdown, {
+      open: open,
+      trigger: ['click'],
+      placement: isMobile ? 'bottomLeft' : _placement,
+      autoAdjustOverflow: !isMobile,
+      align: isMobile ? {
+        offset: [0, 0]
+      } : undefined,
+      overlayClassName: classnames(style$1['pop-util-overlay'], overlayClassName),
+      overlayStyle: mobileOverlayStyle,
+      onOpenChange: handleOpenChange,
+      menu: {
+        items: [{
+          key: 'content',
+          label: null
+        }]
+      },
+      dropdownRender: () => overlayContent,
+      children: /*#__PURE__*/jsx("span", {
+        ref: triggerRef,
+        children: /*#__PURE__*/jsx(FilterItem, {
+          open: open,
+          active: isNotEmpty(value),
+          label: label
+        })
+      })
+    })]
+  });
+});
 
-  const createCheckedChangeHandler = value => checked => {
-    if (checked) {
-      let newList = currentValue.slice(0);
+const _excluded$c = ["label", "value", "onChange", "placeholder", "onValidate", "overlayClassName", "placement", "onOpenChange"];
+const InputFilterItem$2 = withLocale(_ref => {
+  let {
+      label,
+      value,
+      onChange,
+      placeholder,
+      onValidate,
+      overlayClassName,
+      placement,
+      onOpenChange
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  return /*#__PURE__*/jsx(PopoverItem, {
+    label: label,
+    value: value,
+    onChange: onChange,
+    onValidate,
+    overlayClassName,
+    placement,
+    onOpenChange,
+    children: ({
+      value,
+      onChange
+    }) => /*#__PURE__*/jsx(Input, _extends({}, props, {
+      placeholder: placeholder || `请输入${label}`,
+      className: style$1['filter-item-text'],
+      value: get(value, 'value', ''),
+      onChange: e => onChange(e.target.value ? {
+        label: e.target.value,
+        value: e.target.value
+      } : null)
+    }))
+  });
+});
 
-      if (currentValue.length < size) {
-        newList.push(value);
+const _excluded$b = ["label", "value", "onChange", "placeholder", "onValidate", "overlayClassName", "placement", "onOpenChange", "unit"];
+const computedFilterValue = (range, unit, formatMessage) => {
+  if (!isNumber(range[0]) && !isNumber(range[1])) {
+    return null;
+  }
+  return {
+    label: (range => {
+      if (isNumber(range[0]) && isNumber(range[1])) {
+        return `${range[0]}-${range[1]}${unit || ''}`;
       }
-
-      if (currentValue.length === size && size === 1) {
-        newList = [value];
+      if (isNumber(range[0])) {
+        return formatMessage({
+          id: 'over'
+        }, {
+          count: range[0],
+          unit
+        });
       }
-
-      if (currentValue.length >= size && size > 1) {
-        message.error(`最多选择${size}个`);
-        return;
+      if (isNumber(range[1])) {
+        return formatMessage({
+          id: 'lessThan'
+        }, {
+          count: range[1],
+          unit
+        });
       }
-
-      changeHandler(newList);
-    } else {
-      const newList = currentValue.slice(0);
-      newList.splice(findIndex(currentValue, item => item.value === value.value), 1);
-      changeHandler(newList);
-    }
+    })(range),
+    value: [range[0] || null, range[1] || null]
   };
+};
+const defaultPropsOnValidate = value => {
+  const range = get(value, 'value');
+  return !(range && isNumber(range[0]) && isNumber(range[1]) && range[1] < range[0]);
+};
+const NumberRangeFilterItem$1 = withLocale(_ref => {
+  let {
+      label,
+      value,
+      onChange,
+      placeholder,
+      onValidate = defaultPropsOnValidate,
+      overlayClassName,
+      placement,
+      onOpenChange,
+      unit
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  const {
+    formatMessage
+  } = useIntl({
+    moduleName: 'Filter'
+  });
+  return /*#__PURE__*/jsx(PopoverItem, {
+    label: label,
+    value: value,
+    onChange: onChange,
+    onValidate,
+    overlayClassName,
+    placement,
+    onOpenChange,
+    children: ({
+      value,
+      onChange
+    }) => /*#__PURE__*/jsxs(Space.Compact, {
+      children: [/*#__PURE__*/jsx(InputNumber, _extends({}, props, {
+        placeholder: placeholder || `${formatMessage({
+          id: 'pleaseInput'
+        })}${label}`,
+        className: style$1['filter-item-number-range'],
+        value: get(value, 'value[0]', ''),
+        onChange: target => {
+          onChange(computedFilterValue([target, get(value, 'value[1]')], unit, formatMessage));
+        }
+      })), /*#__PURE__*/jsx(Input, {
+        style: {
+          width: 30,
+          borderLeft: 0,
+          borderRight: 0,
+          pointerEvents: 'none'
+        },
+        placeholder: "~",
+        disabled: true
+      }), /*#__PURE__*/jsx(InputNumber, _extends({}, props, {
+        placeholder: placeholder || `${formatMessage({
+          id: 'pleaseInput'
+        })}${label}`,
+        className: style$1['filter-item-number-range'],
+        value: get(value, 'value[1]', ''),
+        onChange: target => {
+          onChange(computedFilterValue([get(value, 'value[0]'), target], unit, formatMessage));
+        }
+      })), unit && /*#__PURE__*/jsx(Input, {
+        style: {
+          width: 50,
+          borderLeft: 0
+        },
+        value: unit,
+        disabled: true
+      })]
+    })
+  });
+});
 
-  const computedChildren = (() => {
-    if (Array.isArray(options)) {
-      return options.map(({
-        label,
-        value
-      }) => /*#__PURE__*/React.createElement(List.Item, {
-        key: value,
-        value: value,
-        label: label
-      }));
-    }
-
-    if (isFunction(children)) {
-      return children({
-        value: currentValue,
-        onChange: changeHandler
+const _excluded$a = ["value", "onChange", "picker"];
+const DatePickerFilterItem = withLocale(withFieldItem(_ref => {
+  var _props$classNames, _props$classNames2;
+  let {
+      value,
+      onChange,
+      picker = 'date'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  return /*#__PURE__*/jsx(DatePicker, _extends({}, props, {
+    picker: picker,
+    classNames: _extends({}, props.classNames, {
+      popup: _extends({}, (_props$classNames = props.classNames) == null ? void 0 : _props$classNames.popup, {
+        root: classnames((_props$classNames2 = props.classNames) == null || (_props$classNames2 = _props$classNames2.popup) == null ? void 0 : _props$classNames2.root, style$1['date-picker-popup'])
+      })
+    }),
+    value: value && dayjs(value.value),
+    onChange: value => {
+      const {
+        format
+      } = Object.assign({
+        format: 'YYYY-MM-DD'
+      }, props);
+      value && onChange({
+        label: picker !== 'date' ? `${value.startOf(picker).format(format)}~${value.endOf(picker).format(format)}` : value.format(format),
+        value: new Date(value.startOf(picker).valueOf())
       });
     }
+  }));
+}));
+
+const _excluded$9 = ["value", "onChange", "header"];
+const DateRangePickerFilterItem = withLocale(withFieldItem(_ref => {
+  var _props$classNames, _props$classNames2;
+  let {
+      value,
+      onChange,
+      header
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  return /*#__PURE__*/jsxs(Flex, {
+    vertical: true,
+    children: [typeof header === 'function' ? header({
+      value,
+      onChange
+    }) : header, /*#__PURE__*/jsx(DatePicker.RangePicker, _extends({}, props, {
+      allowEmpty: [false, false],
+      classNames: _extends({}, props.classNames, {
+        popup: _extends({}, (_props$classNames = props.classNames) == null ? void 0 : _props$classNames.popup, {
+          root: classnames((_props$classNames2 = props.classNames) == null || (_props$classNames2 = _props$classNames2.popup) == null ? void 0 : _props$classNames2.root, style$1['date-range-picker-popup'])
+        })
+      }),
+      value: value && Array.isArray(value.value) && value.value.length === 2 && value.value.map(item => dayjs(item)),
+      onChange: value => {
+        const {
+          format
+        } = Object.assign({
+          format: 'YYYY-MM-DD'
+        }, props);
+        onChange({
+          label: value.map(item => item.format(format)).join('~'),
+          value: value.map(item => new Date(item.valueOf()))
+        });
+      }
+    }))]
+  });
+}));
 
-    return children;
-  })();
+var style = {"shortcuts-container":"kne-react-filter_3w4Bb","shortcut-item":"kne-react-filter_myRhG","is-active":"kne-react-filter_FowoG"};
 
-  return /*#__PURE__*/React.createElement(FilterItem, {
-    label: label,
-    labelHidden: labelHidden
-  }, /*#__PURE__*/React.createElement(Provider, {
-    value: {
-      currentValue,
-      createCheckedChangeHandler
+const _excluded$8 = ["value", "onChange", "defaultValue", "shortcuts", "shortcutOptions"];
+const TypeDateRangePickerField = _ref => {
+  let {
+      value: valueProp,
+      onChange: onChangeProp,
+      defaultValue,
+      shortcuts = true,
+      shortcutOptions
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+  const {
+    formatMessage
+  } = useIntl({
+    moduleName: 'Filter'
+  });
+  const typeList = new Map([['date', formatMessage({
+    id: 'customTime'
+  })], ['month', formatMessage({
+    id: 'monthly'
+  })], ['week', formatMessage({
+    id: 'weekly'
+  })]]);
+  const defaultShortcuts = useMemo(() => [{
+    label: formatMessage({
+      id: 'last7Days'
+    }),
+    getValue: () => [dayjs().subtract(7, 'day').startOf('day'), dayjs().endOf('day')]
+  }, {
+    label: formatMessage({
+      id: 'thisMonth'
+    }),
+    getValue: () => [dayjs().startOf('month'), dayjs().endOf('month')]
+  }, {
+    label: formatMessage({
+      id: 'last3Months'
+    }),
+    getValue: () => [dayjs().subtract(3, 'month').startOf('day'), dayjs().endOf('day')]
+  }, {
+    label: formatMessage({
+      id: 'thisYear'
+    }),
+    getValue: () => [dayjs().startOf('year'), dayjs().endOf('day')]
+  }, {
+    label: formatMessage({
+      id: 'fullYear'
+    }),
+    getValue: () => [dayjs().startOf('year'), dayjs().endOf('year')]
+  }], [formatMessage]);
+  const currentShortcuts = shortcutOptions !== undefined ? shortcutOptions : shortcuts ? defaultShortcuts : null;
+  const isControlled = valueProp !== undefined;
+  const innerValueRef = useRef(defaultValue || {
+    type: 'date',
+    value: null
+  });
+  const value = isControlled ? valueProp : innerValueRef.current;
+  const onChange = useCallback(newValue => {
+    if (!isControlled) {
+      innerValueRef.current = typeof newValue === 'function' ? newValue(innerValueRef.current) : newValue;
     }
-  }, computedChildren, more ? (() => {
-    if (isFunction(more)) {
-      return more({
-        name,
-        size,
-        label,
-        value: currentValue,
-        onChange: changeHandler
-      });
+    onChangeProp == null || onChangeProp(typeof newValue === 'function' ? newValue(value) : newValue);
+  }, [isControlled, onChangeProp, value]);
+  const handleShortcutClick = useCallback(shortcut => {
+    const [start, end] = shortcut.getValue();
+    const type = 'date';
+    onChange({
+      type,
+      value: [start.startOf(type).toDate(), end.endOf(type).toDate()]
+    });
+  }, [onChange]);
+  const isShortcutActive = useCallback(shortcut => {
+    if (!(value != null && value.value) || !Array.isArray(value.value) || value.value.length !== 2) {
+      return false;
+    }
+    const [start, end] = shortcut.getValue();
+    const type = (value == null ? void 0 : value.type) || 'date';
+    const valueStart = dayjs(value.value[0]).startOf(type);
+    const valueEnd = dayjs(value.value[1]).endOf(type);
+    const shortcutStart = start.startOf(type);
+    const shortcutEnd = end.endOf(type);
+    return valueStart.isSame(shortcutStart, type) && valueEnd.isSame(shortcutEnd, type);
+  }, [value]);
+  const renderShortcuts = useMemo(() => {
+    if (!currentShortcuts || currentShortcuts.length === 0) {
+      return null;
     }
+    return /*#__PURE__*/jsx("div", {
+      className: style['shortcuts-container'],
+      children: currentShortcuts.map((shortcut, index) => /*#__PURE__*/jsx("span", {
+        className: classnames(style['shortcut-item'], {
+          [style['is-active']]: isShortcutActive(shortcut)
+        }),
+        onClick: () => handleShortcutClick(shortcut),
+        children: shortcut.label
+      }, index))
+    });
+  }, [currentShortcuts, handleShortcutClick, isShortcutActive]);
+  return /*#__PURE__*/jsxs(Flex, {
+    vertical: true,
+    gap: 0,
+    children: [/*#__PURE__*/jsxs(Space.Compact, {
+      children: [/*#__PURE__*/jsx(Select, {
+        style: {
+          width: '120px'
+        },
+        value: (value == null ? void 0 : value.type) || 'date',
+        onChange: typeValue => {
+          onChange(currentValue => {
+            var _currentValue$value;
+            if (!(currentValue != null && (_currentValue$value = currentValue.value) != null && _currentValue$value.length)) {
+              return {
+                value: null,
+                type: typeValue || 'date'
+              };
+            }
+            const startTime = dayjs(currentValue.value[0]);
+            const endTime = dayjs(currentValue.value[1]);
+            return {
+              value: [startTime.isValid() ? startTime.startOf(typeValue || 'date').toDate() : null, endTime.isValid() ? endTime.endOf(typeValue || 'date').toDate() : null],
+              type: typeValue || 'date'
+            };
+          });
+        },
+        options: Array.from(typeList).map(([val, label]) => ({
+          label,
+          value: val
+        }))
+      }), /*#__PURE__*/jsx(DatePicker.RangePicker, _extends({}, props, {
+        picker: (value == null ? void 0 : value.type) || 'date',
+        value: Array.isArray(value == null ? void 0 : value.value) && value.value.length === 2 ? value.value.map(item => item && dayjs(item)) : null,
+        onChange: dateValue => {
+          onChange(currentValue => {
+            return Object.assign({
+              type: 'date'
+            }, currentValue, {
+              value: dateValue && dateValue[0] && dateValue[1] ? [dateValue[0].startOf((currentValue == null ? void 0 : currentValue.type) || 'date').toDate(), dateValue[1].endOf((currentValue == null ? void 0 : currentValue.type) || 'date').toDate()] : null
+            });
+          });
+        }
+      }))]
+    }), renderShortcuts]
+  });
+};
 
+const _excluded$7 = ["label", "value", "onChange"];
+const TypeDateRangePickerFilterItem = withLocale(_ref => {
+  let {
+      label,
+      value,
+      onChange
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  return /*#__PURE__*/jsx(PopoverItem, {
+    label: label,
+    value: value,
+    onChange: onChange,
+    onValidate: item => {
+      const itemValue = item == null ? void 0 : item.value;
+      return (itemValue == null ? void 0 : itemValue.type) && Array.isArray(itemValue == null ? void 0 : itemValue.value) && itemValue.value.length === 2;
+    },
+    children: ({
+      value,
+      onChange
+    }) => /*#__PURE__*/jsx(TypeDateRangePickerField, _extends({}, props, {
+      className: style$1['filter-item-text'],
+      value: get(value, 'value'),
+      onChange: pickerValue => {
+        const {
+          format = 'YYYY-MM-DD'
+        } = props;
+        const val = (pickerValue == null ? void 0 : pickerValue.value) || [];
+        let displayLabel = '';
+        if (val[0] && !val[1]) {
+          displayLabel = `${dayjs(val[0]).format(format)}以后`;
+        } else if (!val[0] && val[1]) {
+          displayLabel = `${dayjs(val[1]).format(format)}以前`;
+        } else if (val[0] && val[1]) {
+          displayLabel = `${dayjs(val[0]).format(format)}~${dayjs(val[1]).format(format)}`;
+        }
+        onChange({
+          label: displayLabel,
+          value: pickerValue
+        });
+      }
+    }))
+  });
+});
+
+const _excluded$6 = ["placeholder", "label"];
+const withInputDefaultPlaceholder = WrappedComponent => withLocale(_ref => {
+  let {
+      placeholder,
+      label
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  const {
+    formatMessage
+  } = useIntl({
+    moduleName: 'Filter'
+  });
+  return /*#__PURE__*/jsx(WrappedComponent, _extends({}, props, {
+    label: label,
+    placeholder: placeholder || formatMessage({
+      id: 'defaultInputPlaceholder'
+    }, {
+      label
+    })
+  }));
+});
+const InputFilterItem$1 = withInputDefaultPlaceholder(InputFilterItem$2);
+const NumberRangeFilterItem = withInputDefaultPlaceholder(NumberRangeFilterItem$1);
+const SuperSelectFilterItem = withFieldItem(SuperSelect, {
+  forcePopup: true
+});
+const SelectFunctionFilterItem = withFieldItem(SelectFunction, {
+  forcePopup: true
+});
+const SelectIndustryFilterItem = withFieldItem(SelectIndustry, {
+  forcePopup: true
+});
+const SelectAddressFilterItem = withFieldItem(SelectAddress, {
+  forcePopup: true
+});
+
+var fields$1 = {
+  __proto__: null,
+  InputFilterItem: InputFilterItem$1,
+  NumberRangeFilterItem: NumberRangeFilterItem,
+  SuperSelectFilterItem: SuperSelectFilterItem,
+  SelectFunctionFilterItem: SelectFunctionFilterItem,
+  SelectIndustryFilterItem: SelectIndustryFilterItem,
+  SelectAddressFilterItem: SelectAddressFilterItem,
+  DatePickerFilterItem: DatePickerFilterItem,
+  DateRangePickerFilterItem: DateRangePickerFilterItem,
+  TypeDateRangePickerFilterItem: TypeDateRangePickerFilterItem
+};
+
+const getFilterValue = filterValue => {
+  return transform(filterValue, (result, {
+    name,
+    value
+  }) => {
+    result[name] = Array.isArray(value) ? value.map(({
+      value
+    }) => value) : value == null ? void 0 : value.value;
+  }, {});
+};
+
+const _excluded$5 = ["name", "label"];
+const withFilterValue = WrappedComponent => {
+  return _ref => {
+    let {
+        name,
+        label
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
     const {
-      children,
-      onClick
-    } = more;
-    return /*#__PURE__*/React.createElement(List.Item, _extends({}, more, {
-      onClick: e => {
-        onClick({
-          name,
-          label,
-          value: currentValue,
-          onChange: changeHandler
-        }, e);
-      },
-      label: children || "其他"
+      value,
+      onChange
+    } = useContext();
+    return /*#__PURE__*/jsx(WrappedComponent, _extends({}, props, {
+      label: label,
+      onChange: onChange ? value => onChange({
+        name,
+        label,
+        value
+      }) : props.onChange,
+      value: value ? get(value.get(name), 'value') : props.value
     }));
-  })() : null));
+  };
 };
 
-List.Item = _ref => {
+const _excluded$4 = ["label", "onChange", "value", "placeholder"];
+const {
+  Search
+} = Input;
+const SearchInput = withFilterValue(_ref => {
   let {
-    value,
-    label
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-
-  const {
-    currentValue,
-    createCheckedChangeHandler
-  } = useContext(context);
-  const itemProps = {};
-
-  if (value !== void 0) {
-    itemProps.checked = currentValue.findIndex(item => isEqual(get(item, 'value'), value)) > -1;
-    itemProps.onChange = createCheckedChangeHandler({
       label,
-      value
-    });
-  }
-
-  return /*#__PURE__*/React.createElement(CheckableTag, _extends({}, props, itemProps), label);
-};
+      onChange,
+      value,
+      placeholder
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  const {
+    formatMessage
+  } = useIntl({
+    moduleName: 'Filter'
+  });
+  return /*#__PURE__*/jsx(Search, _extends({}, props, {
+    placeholder: placeholder || formatMessage({
+      id: 'inputPlaceholder'
+    }, {
+      label
+    }),
+    value: (value == null ? void 0 : value.value) || '',
+    onSearch: value => {
+      onChange({
+        label: value,
+        value
+      });
+    }
+  }));
+});
 
-List.defaultProps = {
-  size: 2
+/**
+ * 从筛选值中提取原始值数组。
+ * 支持：原始值、{ value } 对象、{ id } 对象、以及它们的数组。
+ *
+ * @example
+ * pickSelectValues([{ value: 1 }, { id: 2 }, '3'])
+ * // => ['1', '2', '3']
+ *
+ * pickSelectValues({ value: 'open' })
+ * // => ['open']
+ *
+ * pickSelectValues(null)
+ * // => []
+ */
+const pickSelectValues = value => {
+  if (value == null || value === '') {
+    return [];
+  }
+  const list = Array.isArray(value) ? value : [value];
+  return list.map(item => {
+    if (item == null) {
+      return null;
+    }
+    if (typeof item !== 'object') {
+      return String(item);
+    }
+    if (item.value != null && item.value !== '') {
+      return String(item.value);
+    }
+    if (item.id != null && item.id !== '') {
+      return String(item.id);
+    }
+    return null;
+  }).filter(Boolean);
 };
 
-const _excluded$7 = ["label", "labelHidden", "name", "size", "isMore"];
-const {
-  Item
-} = List;
-
-const City = _ref => {
-  let {
-    label,
-    labelHidden,
-    name,
-    size
-  } = _ref;
-      _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
-  return /*#__PURE__*/React.createElement(List, {
-    labelHidden: labelHidden,
-    label: label,
-    name: name,
-    size: size,
-    more: {
-      children: "其他",
-      onClick: ({
-        value,
-        onChange
-      }) => {
-        createCitySelect({
-          size,
-          defaultValue: value.map(({
+/**
+ * 声明式创建 mapFilterValue 函数。
+ *
+ * Filter.getFilterValue 默认只读取 { value }，而 SuperSelectFilterItem 等
+ * 组件使用 { id, name } 格式，需要额外处理。此工具通过声明字段映射规则，
+ * 自动生成符合 (filter, getFilterValue) => value 签名的函数。
+ *
+ * @param {Object} fieldMappers - 字段名到映射规则的映射
+ * @param {'string'} fieldMappers[field] - 确保值为字符串类型
+ * @param {'multi'} fieldMappers[field] - 多选，从 filter entry 提取值数组
+ * @param {'single'} fieldMappers[field] - 单选，从 filter entry 提取第一个值
+ * @param {Function} fieldMappers[field] - 自定义转换，接收 (rawValue, { entry, filter, value }) 返回新值
+ *
+ * @example
+ * const mapFilterValue = createFilterValueMapper({
+ *   id: 'string',
+ *   roles: 'multi',
+ *   tenantOrgId: 'single',
+ *   status: (rawValue) => normalizeStatus(rawValue)
+ * });
+ *
+ * // 使用方式与手写 mapFilterValue 一致
+ * const filterValue = mapFilterValue(filter, Filter.getFilterValue);
+ *
+ * // 也可直接传给 BizUnit 的 options.mapFilterValue
+ * <BizUnit options={{ mapFilterValue }} />
+ */
+const createFilterValueMapper = fieldMappers => {
+  return (filter, getFilterValue) => {
+    const value = getFilterValue(filter);
+    Object.entries(fieldMappers).forEach(([fieldName, mapper]) => {
+      const entry = filter.find(item => item.name === fieldName);
+      if (mapper === 'string') {
+        if (value[fieldName] != null && value[fieldName] !== '') {
+          value[fieldName] = String(value[fieldName]);
+        }
+      } else if (mapper === 'multi') {
+        if (entry) {
+          const values = pickSelectValues(entry.value);
+          if (values.length) {
+            value[fieldName] = values;
+          } else {
+            delete value[fieldName];
+          }
+        }
+      } else if (mapper === 'single') {
+        if (entry) {
+          const values = pickSelectValues(entry.value);
+          if (values[0] != null) {
+            value[fieldName] = values[0];
+          } else {
+            delete value[fieldName];
+          }
+        } else if (value[fieldName] != null && typeof value[fieldName] === 'object') {
+          const values = pickSelectValues(value[fieldName]);
+          if (values.length) {
+            value[fieldName] = values[0];
+          } else {
+            delete value[fieldName];
+          }
+        }
+      } else if (typeof mapper === 'function') {
+        let rawValue = value[fieldName];
+        if (rawValue != null && typeof rawValue === 'object' && 'value' in rawValue) {
+          rawValue = rawValue.value;
+        }
+        if (rawValue != null && rawValue !== '') {
+          const result = mapper(rawValue, {
+            entry,
+            filter,
             value
-          }) => value),
-          onChange: value => {
-            Promise.all(value.map(id => apis.getCity(id).then(({
-              city
-            }) => ({
-              label: city.name,
-              value: city.code
-            })))).then(value => onChange(value));
+          });
+          if (result != null && result !== '') {
+            value[fieldName] = result;
+          } else {
+            delete value[fieldName];
           }
-        });
-      }
-    }
-  }, ({
-    value: currentValue
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RemoteData, {
-    loader: apis.getChinaHotCities
-  }, data => {
-    const otherList = currentValue.filter(({
-      value: code
-    }) => !data.find(item => item.code === code));
-    let extraLength = 0;
-    data.forEach((item, index) => {
-      if (currentValue.findIndex(({
-        value
-      }) => value === item.code) > -1 && index >= data.length - otherList.length) {
-        extraLength += 1;
+        }
       }
     });
-    return /*#__PURE__*/React.createElement(React.Fragment, null, otherList.map(({
-      value: code
-    }) => {
-      return /*#__PURE__*/React.createElement(DisplayCity, {
-        id: code,
-        key: code
-      }, ({
-        city: item
-      }) => {
-        return /*#__PURE__*/React.createElement(Item, {
-          value: code,
-          label: item.name
-        });
-      });
-    }), data.filter((item, index) => currentValue.findIndex(({
-      value
-    }) => value === item.code) > -1 || index < data.length - otherList.length - extraLength).map(item => /*#__PURE__*/React.createElement(Item, {
-      key: item.code,
-      value: item.code,
-      label: item.name
-    })));
-  })));
-};
-
-const SearchButton = ({
-  name,
-  isMore,
-  template,
-  children,
-  defaultValue,
-  defaultActive,
-  onBlur,
-  onSearch,
-  onBeforeSearch,
-  onActiveChange,
-  buttonText
-}) => {
-  const {
-    value: aValue,
-    onChange
-  } = useConsumer();
-  const currentValue = aValue[name];
-  const initCurrentValue = get(currentValue, "value");
-  const [value, setValue] = useState(defaultValue || initCurrentValue);
-  const [active, setActive] = useState(defaultActive);
+    return value;
+  };
+};
 
-  const withTemplate = (value = '') => ({
-    value,
-    label: isFunction(template) ? template(value) : value.toString()
-  });
+/**
+ * 创建 URL 参数读取器，自动追踪已消费的参数 key。
+ *
+ * @param {URLSearchParams} searchParams - React Router 的 searchParams 对象
+ * @returns {{ take: (key: string) => string|null, getConsumedKeys: () => string[] }}
+ *
+ * @example
+ * const { take, getConsumedKeys } = createUrlParamsReader(searchParams);
+ * const orgId = take('tenantOrgId');
+ * const orgName = take('orgName');
+ * // getConsumedKeys() => ['tenantOrgId', 'orgName']
+ */
+const createUrlParamsReader = searchParams => {
+  const consumedKeys = [];
+  const take = key => {
+    if (!searchParams.has(key)) return null;
+    consumedKeys.push(key);
+    return searchParams.get(key);
+  };
+  const getConsumedKeys = () => consumedKeys;
+  return {
+    take,
+    getConsumedKeys
+  };
+};
 
-  useEffect(() => {
-    setValue(initCurrentValue);
-  }, [initCurrentValue]);
-  const ref = useSimulationBlur(() => {
-    setValue(initCurrentValue);
-    setActive(false);
-    onBlur && onBlur();
-  });
-  const activeChangeRef = useRef(onActiveChange);
-  activeChangeRef.current = onActiveChange;
-  useEffect(() => {
-    activeChangeRef.current && activeChangeRef.current(active);
-  }, [active]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classnames("react-filter-search-button", {
-      "is-active": active && !isMore
-    }),
-    ref: ref,
-    onMouseEnter: () => {
-      !active && setActive(true);
-    },
-    onMouseLeave: () => {
-      active && initCurrentValue === value && setActive(false);
+/**
+ * 从 URL 参数中移除已消费的 key，返回新的 URLSearchParams 或 null（无变化时）。
+ *
+ * @param {URLSearchParams} searchParams - 当前 URL 参数
+ * @param {string[]} consumedKeys - 需要移除的 key 列表
+ * @returns {URLSearchParams|null}
+ */
+const stripConsumedUrlParams = (searchParams, consumedKeys) => {
+  if (!(consumedKeys != null && consumedKeys.length)) return null;
+  const next = new URLSearchParams(searchParams);
+  let changed = false;
+  consumedKeys.forEach(key => {
+    if (next.has(key)) {
+      next.delete(key);
+      changed = true;
     }
-  }, /*#__PURE__*/React.createElement(Space, {
-    className: "inner",
-    size: 0
-  }, /*#__PURE__*/React.createElement("div", null, children({
-    value,
-    setValue,
-    setActive
-  })), active || isMore ? /*#__PURE__*/React.createElement(Button, {
-    className: classnames("react-filter-search-confirm", {
-      "is-more": isMore
-    }),
-    size: "small",
-    type: "primary",
-    onClick: e => {
-      e.stopPropagation();
-
-      if (onBeforeSearch && onBeforeSearch(value) === false) {
-        return;
-      }
+  });
+  return changed ? next : null;
+};
 
-      onChange(name, withTemplate(value));
-      setActive(false);
-      onSearch && onSearch({
-        value
-      });
-    }
-  }, buttonText) : null));
-};
-
-SearchButton.defaultProps = {
-  defaultActive: false,
-  buttonText: "确定"
-};
-
-const RangeInner = ({
-  name,
-  isMore,
-  defaultActive,
-  template,
-  onBlur,
-  onSearch,
-  onActiveChange,
-  onBeforeSearch,
-  startProps,
-  endProps,
-  placeholder
+/**
+ * 从 URL 参数初始化 Filter 状态的 hook。
+ *
+ * 读取 URL 参数构建初始筛选值，并在挂载后自动清除已消费的 URL 参数。
+ *
+ * @param {Object} options
+ * @param {Function} options.readUrlParams - 读取 URL 参数并返回 { consumedKeys: string[], ...data }
+ * @param {Function} options.buildFilter - 接收 readUrlParams 的返回值，构建初始 filter 数组
+ * @returns {[Array, Function]} - [filter, setFilter]
+ *
+ * @example
+ * const [filter, setFilter] = useUrlFilter({
+ *   readUrlParams: (searchParams) => {
+ *     const { take, getConsumedKeys } = createUrlParamsReader(searchParams);
+ *     const orgId = take('tenantOrgId');
+ *     return { consumedKeys: getConsumedKeys(), orgId };
+ *   },
+ *   buildFilter: ({ orgId }) => [
+ *     { name: 'status', value: { label: '开启', value: 'open' } },
+ *     ...(orgId ? [{ name: 'tenantOrgId', value: { label: orgId, value: orgId } }] : [])
+ *   ]
+ * });
+ */
+const useUrlFilter = ({
+  readUrlParams,
+  buildFilter
 }) => {
-  const [error, setError] = useState(null);
-
-  const check = value => {
-    setError(null);
-
-    if (!Array.isArray(value)) {
-      return false;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const urlFilterSnapshotRef = useRef(null);
+  if (urlFilterSnapshotRef.current === null) {
+    urlFilterSnapshotRef.current = readUrlParams(searchParams);
+  }
+  const [filter, setFilter] = useState(() => buildFilter(urlFilterSnapshotRef.current));
+  const urlStrippedRef = useRef(false);
+  useEffect(() => {
+    var _urlFilterSnapshotRef;
+    if (urlStrippedRef.current) return;
+    urlStrippedRef.current = true;
+    const nextParams = stripConsumedUrlParams(searchParams, (_urlFilterSnapshotRef = urlFilterSnapshotRef.current) == null ? void 0 : _urlFilterSnapshotRef.consumedKeys);
+    if (nextParams) {
+      setSearchParams(nextParams, {
+        replace: true
+      });
     }
+  }, [searchParams, setSearchParams]);
+  return [filter, setFilter];
+};
 
-    if (isNumber(value[1]) && value[0] > value[1]) {
-      setError("最大值不能小于最小值");
-      return false;
+/**
+ * 将筛选值数组序列化为 URLSearchParams，保留 label 信息以便反序列化还原完整筛选状态。
+ *
+ * 序列化格式（使用冒号分隔 label 和 value，逗号分隔多值）：
+ * - 单值且 label === value：prefix[name]=value（如输入框）
+ * - 单值且 label !== value：prefix[name]=label:value
+ * - 多值：prefix[name]=label1:value1,label2:value2
+ *
+ * @param {Array} filterValue - 筛选值数组，格式为 [{ name, label, value }, ...]
+ * @param {Object} [options] - 选项
+ * @param {string} [options.prefix='filterParams'] - URL 参数前缀，设为空字符串则不加前缀
+ * @returns {URLSearchParams}
+ *
+ * @example
+ * const params = filterToUrlParams([
+ *   { name: 'keyword', label: '关键词', value: { label: '测试', value: '测试' } },
+ *   { name: 'city', label: '城市', value: [{ label: '上海', value: '010' }, { label: '北京', value: '020' }] },
+ *   { name: 'status', label: '状态', value: { label: '启用', value: 'active' } },
+ * ]);
+ * // params.toString() => 'filterParams[keyword]=测试&filterParams[city]=上海:010,北京:020&filterParams[status]=启用:active'
+ *
+ * // 自定义前缀
+ * filterToUrlParams(filterValue, { prefix: 'f' })
+ * // => 'f[keyword]=测试&f[city]=上海:010,北京:020'
+ *
+ * // 无前缀（直接平铺）
+ * filterToUrlParams(filterValue, { prefix: '' })
+ * // => 'keyword=测试&city=上海:010,北京:020'
+ */
+const filterToUrlParams = (filterValue, {
+  prefix: _prefix = 'filterParams'
+} = {}) => {
+  const params = new URLSearchParams();
+  if (!Array.isArray(filterValue)) return params;
+  filterValue.forEach(({
+    name,
+    value
+  }) => {
+    if (value == null || value === '') return;
+    const key = _prefix ? `${_prefix}[${name}]` : name;
+    if (Array.isArray(value)) {
+      if (value.length === 0) return;
+      const serialized = value.map(item => serializeEntry(item)).filter(Boolean).join(',');
+      if (serialized) params.set(key, serialized);
+    } else {
+      const serialized = serializeEntry(value);
+      if (serialized) params.set(key, serialized);
     }
+  });
+  return params;
+};
 
-    if (onBeforeSearch) {
-      return onBeforeSearch(value);
-    }
+/**
+ * 序列化单个筛选值项。
+ * - label === value 时返回 value（简化格式）
+ * - 否则返回 label:value
+ */
+const serializeEntry = item => {
+  var _item$label, _item$value;
+  if (item == null) return null;
+  if (typeof item !== 'object') return String(item);
+  const label = (_item$label = item.label) != null ? _item$label : item.name;
+  const value = (_item$value = item.value) != null ? _item$value : item.id;
+  if (value == null || value === '') return null;
+  if (label === value) return String(value);
+  return `${label}:${value}`;
+};
 
-    return true;
+/**
+ * 解析 URL 参数中的单个筛选值项，反序列化为 { label, value } 对象。
+ * 与 filterToUrlParams 配合使用。
+ *
+ * 解析规则：
+ * - 无冒号：label 和 value 相同，如 "测试" → { label: '测试', value: '测试' }
+ * - 有冒号：冒号前为 label，冒号后为 value，如 "启用:active" → { label: '启用', value: 'active' }
+ *
+ * @param {string} str - URL 参数中的原始字符串
+ * @returns {{ label: string, value: string }}
+ *
+ * @example
+ * parseFilterEntry('测试')
+ * // => { label: '测试', value: '测试' }
+ *
+ * parseFilterEntry('启用:active')
+ * // => { label: '启用', value: 'active' }
+ */
+const parseFilterEntry = str => {
+  const colonIndex = str.indexOf(':');
+  if (colonIndex === -1) {
+    return {
+      label: str,
+      value: str
+    };
+  }
+  return {
+    label: str.slice(0, colonIndex),
+    value: str.slice(colonIndex + 1)
   };
+};
 
-  return /*#__PURE__*/React.createElement(SearchButton, {
-    template: template,
-    isMore: isMore,
-    onBlur: onBlur,
-    defaultActive: defaultActive,
-    name: name,
-    onSearch: onSearch,
-    onBeforeSearch: value => {
-      return check(value);
-    },
-    onActiveChange: active => {
-      if (!active) {
-        setError(null);
-      }
+/**
+ * 从 URL 参数中读取筛选值项，返回单选 { label, value } 或多选数组。
+ *
+ * @param {URLSearchParams} searchParams - URL 参数对象
+ * @param {string} key - 参数名（不含前缀）
+ * @param {Object} [options] - 选项
+ * @param {boolean} [options.multi=false] - 是否多选，多选返回数组
+ * @param {string} [options.prefix='filterParams'] - URL 参数前缀，设为空字符串则不加前缀
+ * @returns {{ label: string, value: string } | { label: string, value: string }[] | null}
+ *
+ * @example
+ * // URL: ?filterParams[city]=上海:010,北京:020&filterParams[status]=启用:active
+ * takeFilterEntry(searchParams, 'city', { multi: true })
+ * // => [{ label: '上海', value: '010' }, { label: '北京', value: '020' }]
+ *
+ * // 无前缀
+ * takeFilterEntry(searchParams, 'keyword', { prefix: '' })
+ * // => { label: '测试', value: '测试' }
+ */
+const takeFilterEntry = (searchParams, key, {
+  multi: _multi = false,
+  prefix: _prefix2 = 'filterParams'
+} = {}) => {
+  const fullKey = _prefix2 ? `${_prefix2}[${key}]` : key;
+  if (!searchParams.has(fullKey)) return null;
+  const raw = searchParams.get(fullKey);
+  if (!raw) return null;
+  if (_multi) {
+    return raw.split(',').map(parseFilterEntry);
+  }
 
-      onActiveChange && onActiveChange(active);
-    }
-  }, ({
-    value,
-    setValue,
-    setActive
-  }) => /*#__PURE__*/React.createElement(Tooltip, {
-    visible: !!error,
-    title: error,
-    placement: "bottomRight"
-  }, /*#__PURE__*/React.createElement(Space, {
-    size: "small",
-    className: "react-filter-range"
-  }, /*#__PURE__*/React.createElement(InputNumber, _extends({
-    size: "small"
-  }, startProps, {
-    value: get(value, 0),
-    onChange: inputValue => {
-      const target = [inputValue, get(value, 1)];
-      check(target);
-      setValue(target);
-    },
-    onFocus: () => {
-      setActive(true);
-    },
-    placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder || "请输入"
-  })), "~", /*#__PURE__*/React.createElement(InputNumber, _extends({
-    size: "small"
-  }, endProps, {
-    value: get(value, 1),
-    onChange: inputValue => {
-      const target = [get(value, 0), inputValue];
-      check(target);
-      setValue(target);
-    },
-    onFocus: () => {
-      setActive(true);
-    },
-    placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder || "请输入"
-  })))));
+  // 单选时，如果包含逗号，只取第一个
+  const firstEntry = raw.includes(',') ? raw.split(',')[0] : raw;
+  return parseFilterEntry(firstEntry);
 };
-const Range = withFilterItem(RangeInner);
 
-const _excluded$6 = ["name", "label", "isMore", "template", "defaultActive", "onBlur", "onSearch", "onBeforeSearch", "onActiveChange", "placeholder"];
-
-const withValue$1 = (WrappedComponent, options = {}) => _ref => {
-  let {
-    name,
-    label,
-    isMore,
-    template,
-    defaultActive,
-    onBlur,
-    onSearch,
-    onBeforeSearch,
-    onActiveChange,
-    placeholder
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-
-  return /*#__PURE__*/React.createElement(SearchButton, {
-    defaultActive: defaultActive,
-    isMore: isMore,
-    onBlur: onBlur,
-    template: template,
-    name: name,
-    onSearch: onSearch,
-    onBeforeSearch: onBeforeSearch,
-    onActiveChange: active => {
-      onActiveChange && onActiveChange(active);
+/**
+ * 创建 URL 筛选参数读取器，自动追踪已消费的参数 key。
+ * 配合 useUrlFilter 使用，readUrlParams 返回的 consumedKeys 可被自动清除。
+ *
+ * @param {URLSearchParams} searchParams - React Router 的 searchParams 对象
+ * @param {Object} [options] - 选项
+ * @param {string} [options.prefix='filterParams'] - URL 参数前缀
+ * @returns {{ takeFilterEntry, getConsumedKeys }}
+ *
+ * @example
+ * const { takeFilterEntry, getConsumedKeys } = createUrlFilterReader(searchParams);
+ * const keyword = takeFilterEntry('keyword');
+ * const city = takeFilterEntry('city', { multi: true });
+ * const status = takeFilterEntry('status');
+ * // getConsumedKeys() => ['filterParams[keyword]', 'filterParams[city]', 'filterParams[status]']
+ *
+ * // 配合 useUrlFilter 使用
+ * const [filter, setFilter] = useUrlFilter({
+ *   readUrlParams: (searchParams) => {
+ *     const { takeFilterEntry, getConsumedKeys } = createUrlFilterReader(searchParams);
+ *     const keyword = takeFilterEntry('keyword');
+ *     const city = takeFilterEntry('city', { multi: true });
+ *     return { consumedKeys: getConsumedKeys(), keyword, city };
+ *   },
+ *   buildFilter: ({ keyword, city }) => [
+ *     ...(keyword ? [{ name: 'keyword', label: '关键词', value: keyword }] : []),
+ *     ...(city ? [{ name: 'city', label: '城市', value: city }] : []),
+ *   ],
+ * });
+ */
+const createUrlFilterReader = (searchParams, {
+  prefix: _prefix3 = 'filterParams'
+} = {}) => {
+  const consumedKeys = [];
+  const takeFilterEntry = (key, {
+    multi: _multi2 = false
+  } = {}) => {
+    const fullKey = _prefix3 ? `${_prefix3}[${key}]` : key;
+    if (!searchParams.has(fullKey)) return null;
+    consumedKeys.push(fullKey);
+    const raw = searchParams.get(fullKey);
+    if (!raw) return null;
+    if (_multi2) {
+      return raw.split(',').map(parseFilterEntry);
     }
-  }, ({
-    value,
-    setValue,
-    setActive
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-    size: "small"
-  }, props, {
-    placeholder: placeholder || label,
-    value: value,
-    onChange: e => {
-      setValue(options.getValue ? options.getValue(e) : e.target.value.trim());
+    const firstEntry = raw.includes(',') ? raw.split(',')[0] : raw;
+    return parseFilterEntry(firstEntry);
+  };
+  const getConsumedKeys = () => consumedKeys;
+  return {
+    takeFilterEntry,
+    getConsumedKeys
+  };
+};
+
+const _excluded$3 = ["consumedKeys"];
+
+/**
+ * 从 URL 参数初始化 Filter 状态的 hook（简化版）。
+ *
+ * 基于 useUrlFilter 封装，使用 createUrlFilterReader 解析 filterParams[key] 格式的 URL 参数，
+ * 自动解析 label:value 格式，支持单选和多选。
+ *
+ * @param {string[]|Object} mapping - URL 参数映射
+ *   - 数组: ['tenantOrgId', 'orgName']，默认单选，自动创建 { name: key, value: { label, value } }
+ *   - 对象:
+ *     - 值为 true: 单选，使用默认转换 { name: key, value: { label, value } }
+ *     - 值为 { multi: true }: 多选，value 为 [{ label, value }, ...] 数组
+ *     - 值为函数: 自定义转换，接收解析后的值（单选为 { label, value }，多选为数组），返回 filter 项或 null/falsy 跳过
+ * @returns {[Array, Function]} - [filter, setFilter]
+ *
+ * @example
+ * // 数组形式（默认单选）
+ * const [filter, setFilter] = useUrlFilterValue(['keyword', 'status']);
+ * // URL: ?filterParams[keyword]=前端开发&filterParams[status]=招聘中:active
+ * // → filter: [
+ * //     { name: 'keyword', value: { label: '前端开发', value: '前端开发' } },
+ * //     { name: 'status', value: { label: '招聘中', value: 'active' } }
+ * //   ]
+ *
+ * @example
+ * // 对象形式（多选 + 自定义）
+ * const [filter, setFilter] = useUrlFilterValue({
+ *   keyword: true,
+ *   city: { multi: true },
+ *   status: (parsed) => parsed ? { name: 'status', value: parsed } : null
+ * });
+ * // URL: ?filterParams[keyword]=测试&filterParams[city]=上海:010,北京:020
+ * // → keyword: { label: '测试', value: '测试' }
+ * // → city: [{ label: '上海', value: '010' }, { label: '北京', value: '020' }]
+ */
+const useUrlFilterValue = mapping => {
+  const normalizedMapping = Array.isArray(mapping) ? mapping.reduce((acc, item) => {
+    const key = typeof item === 'string' ? item : item.name;
+    acc[key] = typeof item === 'string' ? true : item;
+    return acc;
+  }, {}) : mapping;
+  return useUrlFilter({
+    readUrlParams: searchParams => {
+      const {
+        takeFilterEntry,
+        getConsumedKeys
+      } = createUrlFilterReader(searchParams);
+      const data = {};
+      Object.entries(normalizedMapping).forEach(([key, config]) => {
+        const multi = typeof config === 'object' && config !== null && config.multi;
+        const val = takeFilterEntry(key, {
+          multi
+        });
+        if (val !== null) data[key] = val;
+      });
+      return _extends({
+        consumedKeys: getConsumedKeys()
+      }, data);
     },
-    onFocus: () => {
-      setActive(true);
+    buildFilter: data => {
+      const values = _objectWithoutPropertiesLoose(data, _excluded$3);
+      const filters = [];
+      Object.entries(normalizedMapping).forEach(([key, config]) => {
+        if (values[key] === undefined) return;
+        const parsedValue = values[key];
+        if (typeof config === 'function') {
+          const result = config(parsedValue);
+          if (result) filters.push(result);
+        } else {
+          const label = typeof config === 'object' && config !== null ? config.label : key;
+          filters.push({
+            name: key,
+            label,
+            value: parsedValue
+          });
+        }
+      });
+      return filters;
     }
-  }))));
+  });
 };
 
-const TextInner = withValue$1(Input);
-const Text = withFilterItem(withValue$1(Input));
-Text.Number = withFilterItem(withValue$1(InputNumber, {
-  getValue: value => {
-    return value;
+const toIdName = item => {
+  if (!item) {
+    return null;
   }
-}));
-
-const _excluded$5 = ["name", "label", "placeholder", "isMore"];
-const SelectorInner = _ref => {
-  let {
-    name,
-    label,
-    placeholder
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  if (item.id != null) {
+    return item;
+  }
+  if (item.value != null) {
+    return {
+      id: item.value,
+      name: item.label
+    };
+  }
+  return item;
+};
+const toLabelValue = item => {
+  var _item$name, _item$id;
+  if (!item) {
+    return null;
+  }
+  return {
+    label: (_item$name = item.name) != null ? _item$name : item.label,
+    value: (_item$id = item.id) != null ? _item$id : item.value
+  };
+};
 
-  const {
-    value: aValue,
-    onChange
-  } = useConsumer();
-  const currentValue = aValue[name];
-  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
-    placeholder: label || placeholder,
-    size: "small",
-    value: currentValue,
-    onChange: (value, item) => {
-      onChange(name, item);
+/**
+ * 单选 SuperSelect interceptor：{id, name} ↔ {label, value}
+ * 适用于 valueKey="id" labelKey="name" 的单选场景
+ */
+const singleSelectInterceptor = {
+  input: value => {
+    if (!value) {
+      return value;
     }
-  }));
+    const item = Array.isArray(value) ? value[0] : value;
+    const result = toIdName(item);
+    return result;
+  },
+  output: selected => {
+    if (!selected) {
+      return selected;
+    }
+    const item = Array.isArray(selected) ? selected[0] : selected;
+    return toLabelValue(item);
+  }
 };
-const Selector = withFilterItem(SelectorInner);
 
-const _excluded$4 = ["name", "label", "className", "isMore"];
-
-const Check = _ref => {
-  let {
-    name,
-    label,
-    className
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-
-  const {
-    value: aValue,
-    onChange
-  } = useConsumer();
-  const currentValue = aValue[name];
-  return /*#__PURE__*/React.createElement(Checkbox, _extends({}, props, {
-    className: classnames('react-filter-item', className),
-    size: "small",
-    checked: currentValue,
-    onChange: e => {
-      onChange(name, e.target.checked ? {
-        value: true,
-        label
-      } : null);
+/**
+ * 多选 SuperSelect interceptor：[{id, name}] ↔ [{label, value}]
+ * 适用于 valueKey="id" labelKey="name" 的多选场景
+ */
+const multiSelectInterceptor = {
+  input: value => {
+    if (!value) {
+      return value;
+    }
+    const list = Array.isArray(value) ? value : [value];
+    return list.map(toIdName).filter(Boolean);
+  },
+  output: selected => {
+    if (!selected) {
+      return selected;
     }
-  }), label);
+    const list = Array.isArray(selected) ? selected : [selected];
+    return list.map(toLabelValue).filter(Boolean);
+  }
+};
+var filterInterceptors = {
+  single: singleSelectInterceptor,
+  multi: multiSelectInterceptor
 };
 
-const _excluded$3 = ["label", "name", "options", "isMore"];
-const RadioList = withFilterItem(_ref => {
+const _excluded$2 = ["value", "label", "onChange"];
+const InputFilterItem = withLocale(_ref => {
   let {
-    name,
-    options
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
+      value,
+      label,
+      onChange
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  const propsValue = value == null ? void 0 : value.value;
+  const [inputValue, setInputValue] = useState(propsValue || '');
+  const [active, setActive] = useState(false);
   const {
-    value: aValue,
-    onChange
-  } = useConsumer();
-  const currentValue = aValue[name];
-  return /*#__PURE__*/React.createElement(Radio.Group, _extends({}, props, {
-    options: options,
-    value: get(currentValue, 'value'),
-    onChange: e => {
-      const item = options.find(item => item.value === e.target.value);
-      onChange(name, item);
+    formatMessage
+  } = useIntl({
+    moduleName: 'Filter'
+  });
+  const searchHandler = () => {
+    onChange(inputValue ? {
+      label: inputValue,
+      value: inputValue
+    } : null);
+  };
+  const handleBlur = () => {
+    setActive(false);
+    searchHandler();
+  };
+  const inputValueRef = useRef('');
+  inputValueRef.current = inputValue;
+  useEffect(() => {
+    if (propsValue !== inputValueRef.current) {
+      setInputValue(propsValue);
     }
-  }));
+  }, [propsValue]);
+  return /*#__PURE__*/jsxs(Space.Compact, {
+    children: [/*#__PURE__*/jsx(Input, _extends({
+      placeholder: `${formatMessage({
+        id: 'pleaseInput'
+      })}${label}`
+    }, props, {
+      size: "small",
+      value: inputValue,
+      onFocus: () => {
+        setActive(true);
+      },
+      onBlur: handleBlur,
+      onChange: e => {
+        setInputValue(e.target.value);
+      },
+      onPressEnter: searchHandler
+    })), active && /*#__PURE__*/jsx(Button, {
+      size: "small",
+      type: "primary",
+      onClick: searchHandler,
+      children: formatMessage({
+        id: 'determineText'
+      })
+    })]
+  });
 });
 
-const _excluded$2 = ["label", "name", "options", "isMore"];
-const CheckboxList = withFilterItem(_ref => {
-  let {
-    name,
-    options
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
+const {
+  CheckableTag: CheckableTag$1
+} = Tag;
+const ListFilterItem = withLocale(({
+  value,
+  onChange,
+  label,
+  single: _single = false,
+  maxLength: _maxLength = 5,
+  items: _items = []
+}) => {
   const {
-    value: aValue,
-    onChange
-  } = useConsumer();
-  const currentValue = aValue[name];
-  return /*#__PURE__*/React.createElement(Checkbox.Group, _extends({}, props, {
-    value: (currentValue || []).map(({
-      value
-    }) => value),
-    onChange: value => {
-      const item = value.map(value => {
-        return options.find(item => item.value === value);
-      });
-      console.log(item);
-      onChange(name, item);
-    },
-    options: options
-  }));
+    message
+  } = App.useApp();
+  const {
+    formatMessage
+  } = useIntl({
+    moduleName: 'Filter'
+  });
+  return /*#__PURE__*/jsx(Space, {
+    size: 4,
+    wrap: true,
+    block: true,
+    children: _items.map(({
+      label: itemLabel,
+      value: itemValue
+    }) => {
+      return /*#__PURE__*/jsx(CheckableTag$1, {
+        size: "small",
+        checked: _single ? isEqual(itemValue, value == null ? void 0 : value.value) : !!(value || []).find(({
+          value
+        }) => isEqual(itemValue, value)),
+        onChange: checked => {
+          if (_single) {
+            onChange(checked ? {
+              value: itemValue,
+              label: itemLabel
+            } : null);
+            return;
+          }
+          const newValue = (value || []).slice(0);
+          if (checked) {
+            newValue.push({
+              value: itemValue,
+              label: itemLabel
+            });
+          } else {
+            const index = newValue.findIndex(({
+              value
+            }) => isEqual(itemValue, value));
+            if (index > -1) {
+              newValue.splice(index, 1);
+            }
+          }
+          if (newValue.length > _maxLength) {
+            message.error(formatMessage({
+              id: 'maxSelectedCount'
+            }, {
+              count: _maxLength
+            }));
+            return;
+          }
+          onChange(newValue);
+        },
+        children: itemLabel
+      }, itemLabel);
+    })
+  });
 });
 
-const _excluded$1 = ["name", "label", "placeholder", "template", "isMore"];
-
-const withValue = (WrappedComponent, options = {}) => _ref => {
+const _excluded$1 = ["value", "onChange", "single", "maxLength"];
+const {
+  CheckableTag
+} = Tag;
+const getLabelForLocal = (item, locale) => {
+  if (locale === 'en-US') {
+    return (item == null ? void 0 : item.enName) || (item == null ? void 0 : item.name);
+  }
+  return item == null ? void 0 : item.name;
+};
+const CityFilterItemInner = _ref => {
   let {
-    name,
-    label,
-    placeholder,
-    template
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
+      value,
+      onChange,
+      single = false,
+      maxLength = 5
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const {
-    value: aValue,
-    onChange
-  } = useConsumer();
-  const currentValue = aValue[name];
-  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
-    placeholder: options.range ? placeholder || [label, label] : placeholder || label,
-    size: "small",
-    value: currentValue && moment(currentValue),
-    onChange: (value, item) => {
-      onChange(name, {
-        label: isFunction(template) ? template(item) : options.range ? item.join('~') : item,
-        value: item
-      });
-    }
-  }));
-};
-
-const DateTime = withFilterItem(withValue(DatePicker));
-DateTime.Month = withFilterItem(withValue(DatePicker.MonthPicker));
-DateTime.Week = withFilterItem(withValue(DatePicker.WeekPicker));
-DateTime.Time = withFilterItem(withValue(DatePicker.TimePicker));
-DateTime.YearPicker = withFilterItem(withValue(DatePicker.YearPicker));
-DateTime.Range = withFilterItem(withValue(DatePicker.RangePicker, {
-  range: true
-}));
-
-const filterNull = item => {
-  const target = Object.assign({}, item);
-  Object.keys(target).forEach(key => {
-    const item = target[key];
-
-    (() => {
-      if (Array.isArray(item) && item.length > 0 && item.every(item => item.value === void 0 || item.value === null || item.value === "")) {
-        delete target[key];
-        return;
-      }
-
-      if (Array.isArray(item) && item.length === 0) {
-        delete target[key];
-        return;
-      }
-
-      if (item && Array.isArray(item.value) && (item.value.length === 0 || item.value.every(item => item === void 0 || item === null || item === ""))) {
-        delete target[key];
-        return;
-      }
-
-      if (item === void 0 || item === null || !Array.isArray(item) && item && (item.value === void 0 || item.value === null || item.value === "")) {
-        delete target[key];
-        return;
+    message
+  } = App.useApp();
+  const {
+    locale
+  } = useIntl();
+  const {
+    formatMessage
+  } = useIntl({
+    moduleName: 'Filter'
+  });
+  const [addressApi, setAddressApi] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    SelectAddress.defaultData().then(data => {
+      if (!cancelled && data) {
+        setAddressApi(createAddressApi(data));
       }
-    })();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const cityList = useMemo(() => {
+    return addressApi ? addressApi.getChinaHotCities() : [];
+  }, [addressApi]);
+  return /*#__PURE__*/jsxs(Space, {
+    size: 4,
+    wrap: true,
+    block: true,
+    children: [cityList.map(city => {
+      const label = getLabelForLocal(city, locale);
+      return /*#__PURE__*/jsx(CheckableTag, {
+        size: "small",
+        checked: single ? (value == null ? void 0 : value.value) === city.code : !!(value || []).find(({
+          value
+        }) => value === city.code),
+        onChange: checked => {
+          if (single) {
+            onChange(checked ? city : null);
+            return;
+          }
+          const newValue = (value || []).slice(0);
+          checked ? newValue.push(Object.assign({}, city, {
+            label,
+            value: city.code
+          })) : (() => {
+            const index = newValue.findIndex(({
+              value
+            }) => value === city.code);
+            newValue.splice(index, 1);
+          })();
+          if (newValue.length > maxLength) {
+            message.error(formatMessage({
+              id: 'maxSelectedCount'
+            }, {
+              count: maxLength
+            }));
+            return;
+          }
+          onChange(newValue);
+        },
+        children: label
+      }, city.code);
+    }), /*#__PURE__*/jsxs(CheckableTag, {
+      className: style$1['filter-advanced-item-other'],
+      size: "small",
+      checked: (single ? value == null ? void 0 : value.value : (value == null ? void 0 : value.length) > 0) && !cityList.find(({
+        code
+      }) => single ? (value == null ? void 0 : value.value) === code : !!(value || []).find(({
+        value
+      }) => value === code)),
+      children: [formatMessage({
+        id: 'otherText'
+      }), /*#__PURE__*/jsx(SelectAddress, _extends({}, props, {
+        className: style$1['filter-advanced-item-other-inner'],
+        maxLength: maxLength,
+        allowClear: false,
+        value: value,
+        single: single,
+        onChange: value => {
+          if (value.length > maxLength) {
+            message.error(formatMessage({
+              id: 'maxSelectedCount'
+            }, {
+              count: maxLength
+            }));
+            return;
+          }
+          onChange(value);
+        }
+      }))]
+    })]
   });
-  return target;
 };
+const CityFilterItem = withLocale(CityFilterItemInner);
 
-const Filter = ({
-  displayLine,
-  defaultDisplay,
-  isExtra,
-  list,
-  label,
-  labelHidden,
-  itemLabelHidden,
-  unfoldText,
-  foldText,
-  extra,
-  more,
-  moreTrigger,
-  moreLabel,
-  value: originValue,
-  onChange
-}) => {
-  const value = useMemo(() => {
-    return filterNull(originValue);
-  }, [originValue]);
-  const emitter = useEvent();
-  const [display, setDisplay] = useState(defaultDisplay);
-  const basicList = list.slice(0, displayLine),
-        moreList = list.slice(displayLine);
-
-  const renderList = list => list.map((item, index) => {
-    return /*#__PURE__*/React.createElement(Space, {
-      key: index,
-      className: "react-filter-line"
-    }, item.map((item, index) => cloneElement(item, {
-      key: index,
-      labelHidden: itemLabelHidden
-    })));
-  });
-
-  const changeHandler = (name, item) => {
-    const target = Object.assign({}, value, {
-      [name]: item
-    });
-    const output = filterNull(target);
-    emitter.emit('change', output);
-    onChange(output);
-  };
+const fields = {
+  InputFilterItem,
+  ListFilterItem,
+  CityFilterItem
+};
 
-  const moreFilter = more && more.length > 0 ? /*#__PURE__*/React.createElement(Space, {
-    className: "react-filter-line is-more"
-  }, /*#__PURE__*/React.createElement(Space, {
-    className: "react-filter-item"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "react-filter-item-label"
-  }, moreLabel, ":"), /*#__PURE__*/React.createElement(Space, {
-    className: "react-filter-item-children",
-    split: /*#__PURE__*/React.createElement(Divider, {
-      type: "vertical"
+const Line = ({
+  list
+}) => {
+  const {
+    value,
+    onChange
+  } = useContext();
+  return /*#__PURE__*/jsx(Flex, {
+    gap: 8,
+    children: list.map((item, index) => {
+      const ComponentItem = item.type;
+      return /*#__PURE__*/jsxs(Flex, {
+        gap: 16,
+        align: "center",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: style$1['filter-label'],
+          children: [item.props.label, ":"]
+        }), /*#__PURE__*/jsx(Flex, {
+          wrap: true,
+          align: "center",
+          children: /*#__PURE__*/jsx(ComponentItem, _extends({}, item.props, {
+            value: value ? get(value.get(item.props.name), 'value') : item.props.value,
+            onChange: onChange ? value => onChange({
+              name: item.props.name,
+              label: item.props.label,
+              value
+            }) : item.props.onChange
+          }))
+        })]
+      }, item.key || item.props.name || index);
     })
-  }, more.map((item, index) => cloneElement(item, {
-    key: index,
-    isMore: true,
-    moreTrigger
-  }))))) : null;
-  return /*#__PURE__*/React.createElement(Provider$1, {
-    value: {
-      value,
-      onChange: changeHandler,
-      emitter
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "react-filter"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "react-filter-inner"
-  }, /*#__PURE__*/React.createElement("div", null, labelHidden ? null : /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(FilterItem, {
-    className: "react-filter-selected",
-    label: label
-  }, Object.keys(value).map(key => {
-    const item = value[key];
-    if (!item) return null;
-    if (Array.isArray(item) && item.length === 0) return null;
-    return /*#__PURE__*/React.createElement(Tag, {
-      key: key,
-      closable: true,
-      onClose: () => {
-        changeHandler(key, null);
-      }
-    }, Array.isArray(item) ? item.map(({
-      label
-    }) => label).join(",") : item.label);
-  })), /*#__PURE__*/React.createElement("div", null, extra))), renderList(isExtra ? basicList : list), moreList.length === 0 || isExtra === false ? moreFilter : null), display && isExtra ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-    className: "react-filter-divider"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "react-filter-inner"
-  }, renderList(moreList)), moreList.length > 0 ? moreFilter : null) : /*#__PURE__*/React.createElement("div", {
-    className: "react-filter-divider-close"
-  }), isExtra && list.length > displayLine ? /*#__PURE__*/React.createElement(Row, {
-    className: "react-filter-switch-btn",
-    justify: "end"
-  }, /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(Button, {
-    type: "link",
-    onClick: () => {
-      setDisplay(display => !display);
-    }
-  }, display ? foldText : unfoldText))) : null));
-};
-
-Filter.type = {
-  City,
-  List,
-  Range,
-  Text,
-  Selector,
-  Check,
-  RadioList,
-  CheckboxList,
-  DateTime
-};
-Filter.defaultProps = {
-  label: '筛选项',
-  labelHidden: false,
-  itemLabelHidden: false,
-  unfoldText: '展开',
-  foldText: '收起',
-  displayLine: 2,
-  defaultDisplay: false,
-  isExtra: true,
-  list: [[]],
-  more: [],
-  moreTrigger: 'hover',
-  moreLabel: '更多',
-  value: {},
-  extra: null,
-  onChange: () => {}
-};
-
-const _excluded = ["name", "value", "children"],
-      _excluded2 = ["type"];
-const withMoreExtraButton = WrappedComponent => _ref => {
-  let {
-    name,
-    children
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  const [isEdit, setIsEdit] = useState(false);
-  return isEdit ? /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-    defaultActive: true
-  }, props, {
-    name: name,
-    onBlur: () => {
-      setIsEdit(false);
-    }
-  })) : /*#__PURE__*/React.createElement(List.Item, {
-    onClick: e => {
-      e.stopPropagation();
-      setIsEdit(true);
-    },
-    label: children || "其他"
   });
 };
-const RangeButton = withMoreExtraButton(RangeInner);
-const TextButton = withMoreExtraButton(TextInner);
-const SelectorButton = withMoreExtraButton(SelectorInner);
-const createExtraButton = _ref2 => {
-  let {
-    type
-  } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
-  return innerProps => {
-    const mapping = {
-      range: RangeButton,
-      text: TextButton,
-      selector: SelectorButton
-    };
-    const ExtraButtonComponent = mapping[type];
-
-    if (!ExtraButtonComponent) {
-      return null;
+const AdvancedFilter = withLocale(props => {
+  const {
+    formatMessage
+  } = useIntl({
+    moduleName: 'Filter'
+  });
+  return /*#__PURE__*/jsx(FilterOuter, _extends({}, props, {
+    children: ({
+      value,
+      onChange,
+      props: filterProps = {}
+    }) => {
+      const {
+        list,
+        more
+      } = filterProps;
+      return /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsxs(Flex, {
+          gap: 8,
+          vertical: true,
+          className: style$1['filter-advanced'],
+          children: [list && list.map((item, index) => {
+            return /*#__PURE__*/jsx(Line, {
+              list: item
+            }, index);
+          }), more && /*#__PURE__*/jsx(FilterLines, {
+            className: style$1['filter-advanced-more'],
+            label: `${formatMessage({
+              id: 'moreText'
+            })}:`,
+            list: [more]
+          })]
+        }), value && value.length > 0 && /*#__PURE__*/jsx(FilterValueDisplay, {
+          value: value,
+          onChange: onChange
+        })]
+      });
     }
+  }));
+});
+AdvancedFilter.fields = fields;
 
-    return /*#__PURE__*/React.createElement(ExtraButtonComponent, _extends({}, props, innerProps));
-  };
+const _excluded = ["children"];
+const FilterItemContainer = _ref => {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return children(props);
 };
 
-export { FilterItem, SearchButton, createExtraButton, Filter as default, useConsumer as useFilterContext, withFilterItem, withMoreExtraButton };
+Filter.fields = fields$1;
+Filter.getFilterValue = getFilterValue;
+Filter.useFilter = useContext;
+Filter.SearchInput = SearchInput;
+Filter.withFilterValue = withFilterValue;
+Filter.FilterProvider = FilterProvider;
+Filter.pickSelectValues = pickSelectValues;
+Filter.createFilterValueMapper = createFilterValueMapper;
+Filter.useUrlFilter = useUrlFilter;
+Filter.useUrlFilterValue = useUrlFilterValue;
+Filter.createUrlParamsReader = createUrlParamsReader;
+Filter.stripConsumedUrlParams = stripConsumedUrlParams;
+Filter.filterToUrlParams = filterToUrlParams;
+Filter.parseFilterEntry = parseFilterEntry;
+Filter.takeFilterEntry = takeFilterEntry;
+Filter.createUrlFilterReader = createUrlFilterReader;
+Filter.filterInterceptors = filterInterceptors;
+Filter.singleSelectInterceptor = singleSelectInterceptor;
+Filter.multiSelectInterceptor = multiSelectInterceptor;
+
+export { AdvancedFilter, DatePickerFilterItem, DateRangePickerFilterItem, FilterItem, FilterItemContainer, FilterLines, FilterProvider, FilterValueDisplay, InputFilterItem$1 as InputFilterItem, NumberRangeFilterItem, PopoverItem, SearchInput, SelectAddressFilterItem, SelectFunctionFilterItem, SelectIndustryFilterItem, SuperSelectFilterItem, TypeDateRangePickerField, TypeDateRangePickerFilterItem, createFilterValueMapper, createUrlFilterReader, createUrlParamsReader, Filter as default, fields$1 as fields, filterInterceptors, filterToUrlParams, getFilterValue, multiSelectInterceptor, parseFilterEntry, pickSelectValues, singleSelectInterceptor, stripConsumedUrlParams, takeFilterEntry, useContext as useFilter, useUrlFilter, useUrlFilterValue, withFieldItem, withFilterValue };
 //# sourceMappingURL=index.modern.js.map