linkmore-design 1.0.55 → 1.0.58

package/es/LmFilter/components/CascaderFilter.js

@@ -21,14 +21,15 @@ var _linkmoreDesign = require("linkmore-design");
 
 var _InputSearchClose = _interopRequireDefault(require("./InputSearchClose"));
 
+var _hooks = require("../hooks");
+
 // 重置级联弹框
 var DropdownRender = function DropdownRender(_ref) {
   var dom = _ref.dom,
       instance = _ref.instance,
       item = _ref.item,
       setOptions = _ref.setOptions,
-      checkedValues = _ref.checkedValues,
-      setCheckedValues = _ref.setCheckedValues;
+      checkedValues = _ref.checkedValues;
   var _instance$filterValue = instance.filterValue,
       filterValue = _instance$filterValue === void 0 ? [] : _instance$filterValue,
       setFilterValue = instance.setFilterValue,
@@ -37,6 +38,7 @@ var DropdownRender = function DropdownRender(_ref) {
   var _item$data = item.data,
       filters = _item$data === void 0 ? [] : _item$data;
   var inputRef = (0, _react.useRef)(null);
+  var delayedFn = (0, _hooks.useDelayedFn)();
 
   var handleFilter = function handleFilter(val) {
     var serachValues = filters.filter(function (v) {
@@ -48,28 +50,23 @@ var DropdownRender = function DropdownRender(_ref) {
 
   var handleSure = function handleSure() {
     setFilterValue(checkedValues);
-    setVisible(false);
+    setVisible === null || setVisible === void 0 ? void 0 : setVisible(false);
   }; // 取消
 
 
   var handleReset = function handleReset() {
-    setVisible === null || setVisible === void 0 ? void 0 : setVisible(false);
+    return setVisible === null || setVisible === void 0 ? void 0 : setVisible(false);
   };
 
   (0, _react.useEffect)(function () {
     if (visible) {
-      var _inputRef$current2, _inputRef$current2$se;
+      delayedFn(function () {
+        var _inputRef$current, _inputRef$current$foc;
 
-      setTimeout(function () {
-        var _inputRef$current;
-
-        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$foc = _inputRef$current.focus) === null || _inputRef$current$foc === void 0 ? void 0 : _inputRef$current$foc.call(_inputRef$current, {
           cursor: 'all'
         });
-      }, 200);
-      setCheckedValues(filterValue);
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : (_inputRef$current2$se = _inputRef$current2.setValue) === null || _inputRef$current2$se === void 0 ? void 0 : _inputRef$current2$se.call(_inputRef$current2, '');
-      handleFilter('');
+      });
     }
   }, [visible]);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -99,7 +96,9 @@ var CascaderFilter = function CascaderFilter(_ref2) {
       filterValue = _instance$filterValue2 === void 0 ? [] : _instance$filterValue2,
       setFilterValue = instance.setFilterValue,
       visible = instance.visible,
-      setVisible = instance.setVisible;
+      setVisible = instance.setVisible,
+      _instance$children = instance.children,
+      children = _instance$children === void 0 ? /*#__PURE__*/_react.default.createElement("div", null) : _instance$children;
   var _itemProps$data = itemProps.data,
       filters = _itemProps$data === void 0 ? [] : _itemProps$data;
 
@@ -113,27 +112,12 @@ var CascaderFilter = function CascaderFilter(_ref2) {
       checkedValues = _useState4[0],
       setCheckedValues = _useState4[1];
 
-  var checkedKeys = (0, _react.useMemo)(function () {
-    return checkedValues.map(function (v) {
-      return v.value;
-    });
-  }, [checkedValues]);
   var defaultValue = (0, _react.useMemo)(function () {
-    var flatKeys = function flatKeys(arr) {
-      return arr.map(function (v) {
-        return v.value;
-      });
-    };
-
-    var nKey = filterValue.map(function (v) {
-      return Array.isArray(v) ? flatKeys(v) : v.value;
-    });
-    return nKey;
+    return filterValue;
   }, [filterValue]);
 
   var onChange = function onChange(item, selectedOptions) {
-    console.log('item', item, '===', selectedOptions);
-    setCheckedValues(selectedOptions);
+    setCheckedValues(item);
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cascader.default, {
@@ -142,6 +126,9 @@ var CascaderFilter = function CascaderFilter(_ref2) {
     onChange: onChange,
     defaultValue: defaultValue,
     open: visible,
+    onDropdownVisibleChange: function onDropdownVisibleChange(vis) {
+      return setVisible(vis);
+    },
     dropdownRender: function dropdownRender(dom) {
       return /*#__PURE__*/_react.default.createElement(DropdownRender, {
         dom: dom,
@@ -152,7 +139,7 @@ var CascaderFilter = function CascaderFilter(_ref2) {
         setOptions: setOptions
       });
     }
-  }, /*#__PURE__*/_react.default.createElement("div", null)));
+  }, children));
 };
 
 var _default = CascaderFilter;

package/es/LmFilter/components/CheckboxFilter.js

@@ -44,20 +44,16 @@ var CheckboxFilter = function CheckboxFilter(_ref) {
       setVisible = instance.setVisible;
   var _itemProps$data = itemProps.data,
       filters = _itemProps$data === void 0 ? [] : _itemProps$data;
-  var inputRef = (0, _react.useRef)(); // 选中的数据项: [{}, {}, ...];
+  var inputRef = (0, _react.useRef)(); // 选中的数据项: [key, key, ...];
 
   var _useState = (0, _react.useState)(filterValue),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       checkedValues = _useState2[0],
       setCheckedValues = _useState2[1]; // 选中的数据的键
+  // const checkedKeys = useMemo(() => checkedValues.map(v => v), [checkedValues]);
+  // 搜索后的筛选项
 
 
-  var checkedKeys = (0, _react.useMemo)(function () {
-    return checkedValues.map(function (v) {
-      return v.value;
-    });
-  }, [checkedValues]); // 搜索后的筛选项
-
   var _useState3 = (0, _react.useState)(filters),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       options = _useState4[0],
@@ -74,7 +70,7 @@ var CheckboxFilter = function CheckboxFilter(_ref) {
     return isAll && options.every(function (_ref2) {
       var value = _ref2.value;
       return checkedValues.some(function (v) {
-        return v.value === value;
+        return v === value;
       });
     });
   }, [checkedValues, options]); // 是否半选: 存在选中的数据 && 未全选
@@ -94,20 +90,17 @@ var CheckboxFilter = function CheckboxFilter(_ref) {
 
   var onChange = function onChange(e, item) {
     e.preventDefault();
-    var nValue = checkedValues.some(function (_ref3) {
-      var value = _ref3.value;
+    var nValue = checkedValues.some(function (value) {
       return value === item.value;
-    }) ? checkedValues.filter(function (_ref4) {
-      var value = _ref4.value;
+    }) ? checkedValues.filter(function (value) {
       return value !== item.value;
-    }) : (0, _utils.uniqueFunc)([].concat((0, _toConsumableArray2.default)(checkedValues), [item]), 'value');
+    }) : (0, _utils.uniqueFunc)([].concat((0, _toConsumableArray2.default)(checkedValues), [item.value]), 'value');
     setCheckedValues(nValue);
   }; // 全选事件
 
 
   var onCheckAllChange = function onCheckAllChange() {
-    var nValue = checkAll ? checkedValues.filter(function (_ref5) {
-      var value = _ref5.value;
+    var nValue = checkAll ? checkedValues.filter(function (value) {
       return !options.some(function (v) {
         return v.value === value;
       });
@@ -159,18 +152,17 @@ var CheckboxFilter = function CheckboxFilter(_ref) {
   }, "\u5168\u90E8"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
     className: "filter_tip"
   }, "\u5DF2\u9009: ", checkedValues.length)))), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Checkbox.Group, {
-    value: checkedKeys,
+    value: checkedValues,
     className: "filter_body"
   }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.VirtualList, {
     options: options,
     className: "filter_list"
-  }, function (_ref6) {
-    var item = _ref6.item,
-        resetProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+  }, function (_ref3) {
+    var item = _ref3.item,
+        resetProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
       className: (0, _classnames.default)('filter_item', {
-        checked: checkedValues.some(function (_ref7) {
-          var value = _ref7.value;
+        checked: checkedValues.some(function (value) {
           return value === item.value;
         })
       }),

package/es/LmFilter/components/DateFilter.js

@@ -19,15 +19,28 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _linkmoreDesign = require("linkmore-design");
 
+var _moment = _interopRequireDefault(require("moment"));
+
 var _utils = require("../utils");
 
 var RangePicker = function RangePicker(_ref) {
-  var filterValue = _ref.filterValue,
-      setFilterValue = _ref.setFilterValue,
+  var instance = _ref.instance,
       onChange = _ref.onChange,
-      itemProps = _ref.itemProps,
-      visible = _ref.visible;
-  // 最近的时间段, 值为JSON转换后的字符串
+      itemProps = _ref.itemProps;
+  var filterValue = instance.filterValue,
+      setFilterValue = instance.setFilterValue,
+      visible = instance.visible,
+      setVisible = instance.setVisible;
+  var defaultValue = (0, _react.useMemo)(function () {
+    var nValue;
+
+    if ((0, _utils.getIsHas)(filterValue)) {
+      nValue = [(0, _moment.default)(filterValue[0]), (0, _moment.default)(filterValue[1])];
+    }
+
+    return nValue;
+  }, [filterValue]); // 最近的时间段, 值为JSON转换后的字符串
+
   var ranges = (0, _react.useMemo)(function () {
     return Object.entries((0, _utils.getRanges)()).map(function (item, i) {
       return {
@@ -82,17 +95,17 @@ var RangePicker = function RangePicker(_ref) {
         color: 'var(--text-color)'
       }
     }),
-    placeholder: ['开始日期', '结束日期'],
-    style: {
-      width: 210
-    }
+    placeholder: ['开始日期', '结束日期']
   }, itemProps, {
+    value: defaultValue,
     onChange: handleOnChange,
     open: visible,
+    onOpenChange: function onOpenChange(vis) {
+      return setVisible(vis);
+    },
     panelRender: panelRender,
     dropdownClassName: "lm_filter_dropdown_picker",
-    bordered: false,
-    size: "small",
+    size: "middle",
     inputReadOnly: true
   })));
 }; // 日期范围选择器
@@ -103,11 +116,25 @@ var DatePickerFilter = function DatePickerFilter(_ref2) {
       itemProps = _ref2.item;
   var filterValue = instance.filterValue,
       setFilterValue = instance.setFilterValue,
-      visible = instance.visible;
-  var _itemProps$props = itemProps.props,
-      props = _itemProps$props === void 0 ? {
-    picker: 'date'
-  } : _itemProps$props; // 选中时间段的触发
+      visible = instance.visible,
+      setVisible = instance.setVisible;
+  var props = itemProps.props;
+
+  var _ref3 = props || {},
+      _ref3$picker = _ref3.picker,
+      picker = _ref3$picker === void 0 ? 'date' : _ref3$picker;
+
+  var defaultValue = (0, _react.useMemo)(function () {
+    var nValue; // 周/月/季/年 需要处理回显
+
+    if (picker !== 'date') return nValue;
+
+    if (filterValue) {
+      nValue = (0, _moment.default)(filterValue);
+    }
+
+    return nValue;
+  }, [filterValue]); // 选中时间段的触发
 
   var onChange = function onChange(dates, dateStrings) {
     setFilterValue((0, _utils.getIsHas)(dateStrings) ? dateStrings : null);
@@ -115,21 +142,22 @@ var DatePickerFilter = function DatePickerFilter(_ref2) {
 
   if (['range', 'rangePicker'].includes(itemProps.dateType || itemProps.datetype)) {
     return /*#__PURE__*/_react.default.createElement(RangePicker, {
-      filterValue: filterValue,
-      setFilterValue: setFilterValue,
+      instance: instance,
       onChange: onChange,
-      itemProps: props,
-      visible: visible
+      itemProps: props
     });
   }
 
   return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({
     placeholder: "\u9009\u62E9\u65F6\u95F4"
   }, props, {
+    defaultValue: defaultValue,
     onChange: onChange,
     open: visible,
-    bordered: false,
-    size: "small",
+    onOpenChange: function onOpenChange(vis) {
+      return setVisible(vis);
+    },
+    size: "middle",
     inputReadOnly: true,
     dropdownClassName: "lm_filter_dropdown_picker"
   }));

package/es/LmFilter/components/DropdownFIlter.js

@@ -100,57 +100,78 @@ var getPlacehodler = function getPlacehodler(props) {
 
 
 var getLabel = function getLabel(filterValue, item) {
-  var _val;
+  var _data$find;
 
-  var val = filterValue;
-  var type = item.type; // 不存在筛选时
+  var type = item.type,
+      data = item.data; // 不存在筛选时
 
-  if (!(0, _utils.getIsHas)(val)) {
+  if (!(0, _utils.getIsHas)(filterValue)) {
     return getPlacehodler(item);
-  } // 存在筛选数据时
+  } // 存在筛选数据时 ⬇️
+  // 级联数据转换平级结构
 
 
-  if (Array.isArray(val)) {
+  if (['cascader'].includes(type)) {
+    var nArr = (0, _utils.getFlatItem)(filterValue, data);
+    var labels = nArr.map(function (v) {
+      return v.label;
+    });
+
+    switch (labels.length) {
+      case 1:
+        return labels[0];
+
+      case 2:
+        return "".concat(labels[0], "\u3001").concat(labels[1]);
+
+      default:
+        return "".concat(labels[0], "\u3001+").concat(labels.length - 1, "...");
+    }
+  }
+
+  if (Array.isArray(filterValue)) {
+    var _data$filter;
+
     // 日期
     if (['date'].includes(type)) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, val[0], /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filterValue[0], /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
         type: "lmweb-swap-right",
         style: {
           fontSize: 14,
           color: 'var(--text-color)'
         }
-      }), val[1]);
-    } // 级联数据转换平级结构
-
-
-    if (['cascader'].includes(type)) {
-      var _filterValue$map;
-
-      val = (_filterValue$map = filterValue.map(function (v) {
-        return v[1] ? v[1] : v[0].children;
-      })) === null || _filterValue$map === void 0 ? void 0 : _filterValue$map.flat(2);
+      }), filterValue[1]);
     } // 多选
 
 
-    switch (val.length) {
+    var _labels = data === null || data === void 0 ? void 0 : (_data$filter = data.filter(function (v) {
+      return filterValue.includes(v.value);
+    })) === null || _data$filter === void 0 ? void 0 : _data$filter.map(function (v) {
+      return v.label;
+    });
+
+    switch (_labels.length) {
       case 1:
-        return val[0].label;
+        return _labels[0];
 
       case 2:
-        return "".concat(val[0].label, "\u3001").concat(val[1].label);
+        return "".concat(_labels[0], "\u3001").concat(_labels[1]);
 
       default:
-        return "".concat(val[0].label, "\u3001+").concat(val.length - 1, "...");
+        return "".concat(_labels[0], "\u3001+").concat(_labels.length - 1, "...");
     }
   } // 输入框
 
 
   if (['input', 'date'].includes(type)) {
-    return val;
+    return filterValue;
   } // 单选框
 
 
-  return (_val = val) === null || _val === void 0 ? void 0 : _val.label;
+  var label = (_data$find = data.find(function (v) {
+    return v.value === filterValue;
+  })) === null || _data$find === void 0 ? void 0 : _data$find.label;
+  return label;
 };
 /*
  * css样式控制
@@ -218,10 +239,9 @@ var DropdownFilter = /*#__PURE__*/_react.default.memo(function (_ref2) {
   }, item === null || item === void 0 ? void 0 : item.title, ":"), /*#__PURE__*/_react.default.createElement("div", {
     className: "filter_item_value"
   }, getLabel(filterValue, item)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "filter_item_icon"
+    className: "filter_item_icon addon_after"
   }, item.type !== 'date' || active ? /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
     type: active ? 'lmweb-close-circle-fill' : 'lmweb-down',
-    className: "addonAfter",
     onClick: handleClear
   }) : null)));
 });

package/es/LmFilter/components/SelectFilter.js

@@ -53,7 +53,6 @@ var SelectFilter = function SelectFilter(_ref) {
 
   var handleFilter = function handleFilter() {
     var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    console.log('val', val);
     var serachValues = filters.filter(function (v) {
       return v.label.indexOf(val) > -1;
     });
@@ -63,7 +62,7 @@ var SelectFilter = function SelectFilter(_ref) {
 
   var onChange = function onChange(e, obj) {
     e.preventDefault();
-    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue(obj);
+    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue(obj.value);
   }; // 展开下拉时触发: 赋值 && 聚焦 && 重置显示内容
 
 
@@ -98,7 +97,7 @@ var SelectFilter = function SelectFilter(_ref) {
         resetProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
       className: (0, _classnames.default)('filter_item', {
-        checked: item.value === (filterValue === null || filterValue === void 0 ? void 0 : filterValue.value)
+        checked: item.value === filterValue
       }),
       onClick: function onClick(e) {
         return onChange(e, item);

package/es/LmFilter/components/index.js

@@ -55,72 +55,16 @@ var FilterControl = /*#__PURE__*/_react.default.memo(function (props) {
   }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       aliveValue = _useState2[0],
-      setAliveValue = _useState2[1]; // 单独使用时将值转换为行数据
+      setAliveValue = _useState2[1]; // 单独使用 检查是否受控模式
 
 
   var transformFilterValue = (0, _react.useMemo)(function () {
-    // 检查是否受控模式
-    var checkedValue = value || aliveValue;
-    var getOptions = (resetItem === null || resetItem === void 0 ? void 0 : resetItem.data) || [];
-    var nValue = checkedValue;
-
-    if (['select'].includes(resetItem.type)) {
-      nValue = getOptions === null || getOptions === void 0 ? void 0 : getOptions.find(function (v) {
-        return v.value === checkedValue;
-      });
-    }
-
-    if (['checkbox'].includes(resetItem.type)) {
-      nValue = (getOptions === null || getOptions === void 0 ? void 0 : getOptions.filter(function (v) {
-        return checkedValue.includes(v.value);
-      })) || [];
-    }
-
-    if (['cascader'].includes(resetItem.type)) {
-      // 查询值
-      // const getRow = (val, arr) => {
-      //   let nRow = '';
-      //   arr.forEach(item => {
-      //     nRow = item.value === val ? item : getRow(val, item.children);
-      //   })
-      //   return nRow;
-      // };
-      // checkedValue?.map(v => {
-      //   return Array.isArray(v) ? getRow(v) : getRow(v);
-      // })
-      return '';
-    }
-
-    return nValue;
-  }, [value, aliveValue, resetItem.data, resetItem.type]); // 单独使用时抛出选中的值: val => obj || Array
+    return value || aliveValue;
+  }, [value, aliveValue]); // 单独使用时抛出选中的值
 
   var handleChange = function handleChange(val) {
-    var nValue = val;
-
-    if (['cascader'].includes(resetItem.type)) {
-      var flatKeys = function flatKeys(arr) {
-        return arr.map(function (v) {
-          return v.value;
-        });
-      };
-
-      nValue = val.map(function (v) {
-        return Array.isArray(v) ? flatKeys(v) : v.value;
-      });
-    }
-
-    if (['select'].includes(resetItem.type)) {
-      nValue = val.value;
-    }
-
-    if (['checkbox'].includes(resetItem.type)) {
-      nValue = val.map(function (v) {
-        return v.value;
-      });
-    }
-
-    setAliveValue === null || setAliveValue === void 0 ? void 0 : setAliveValue(nValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
+    setAliveValue === null || setAliveValue === void 0 ? void 0 : setAliveValue(val);
+    onChange === null || onChange === void 0 ? void 0 : onChange(val);
   }; // 重组instance
 
 

package/es/LmFilter/filterFns/index.js

@@ -11,8 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectDestructuringEmpty"));
-
 var _utils = require("../utils");
 
 // 核心参数集合
@@ -20,9 +18,11 @@ var CoreOptions = function CoreOptions(_ref) {
   var state = _ref.state,
       dispatch = _ref.dispatch,
       props = _ref.props;
-  (0, _objectDestructuringEmpty2.default)(props); // 设置筛选的值 item => Object || Array => [{label: '',  value: ''}, ...]
+  var onChange = props.onChange; // 设置筛选的值 item => Object || Array => [{label: '',  value: ''}, ...]
 
   var setFilterValue = function setFilterValue(item, field) {
+    var _Object$entries;
+
     var basicFilter = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state.basicFilter), {}, (0, _defineProperty2.default)({}, field, item));
 
     if (!(0, _utils.getIsHas)(item)) {
@@ -34,6 +34,25 @@ var CoreOptions = function CoreOptions(_ref) {
       type: 'changeBasicFilter',
       basicFilter: basicFilter
     });
+    dispatch({
+      type: 'changeComplexFilter',
+      complexFilter: {}
+    }); // 基础筛选清空高级筛选
+    // 抛出给外部存储
+
+    var filterQuery = (_Object$entries = Object.entries(basicFilter)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (v) {
+      return {
+        fieldName: v[0],
+        value: v[1],
+        operator: 0
+      };
+    }); // 触发外部事件
+
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      basicFilter: basicFilter,
+      filterQuery: filterQuery,
+      type: 'basic'
+    });
   }; // 根据字段查找过滤的数据, 不存在时返回默认值
 
 

package/es/LmFilter/localization.d.ts

@@ -0,0 +1,8 @@
+export declare const DefaultLocalization: {
+    globalQuery: {
+        filter: any[];
+    };
+    filterQuery: {
+        filter: any[];
+    };
+};

package/es/LmFilter/localization.js

@@ -0,0 +1,12 @@
+// export interface LM_Localization {
+//   fieldName: string,
+//   operator: number,
+// }
+export var DefaultLocalization = {
+  globalQuery: {
+    filter: []
+  },
+  filterQuery: {
+    filter: []
+  }
+};

package/es/LmFilter/style/style.css

@@ -10,7 +10,11 @@
 .lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_search {
   max-width: 140px;
 }
+.lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_complex {
+  display: inline-flex;
+}
 .lm_filter_basic_item {
+  font-size: 12px;
   display: inline-flex;
   align-items: center;
   line-height: 1;
@@ -41,24 +45,28 @@
   color: var(--text-color);
   transition: 0.3s;
 }
-.lm_filter_basic_item .filter_item_icon:hover {
-  color: var(--primary-color);
+.lm_filter_basic_item .filter_item_icon.addon_before {
+  color: var(--font-color);
 }
-.lm_filter_basic_item.expand .filter_item_icon {
+.lm_filter_basic_item.expand .filter_item_icon.addon_after {
   transform: rotateX(180deg);
 }
 .lm_filter_basic_item.active .filter_item_value {
   color: var(--primary-color);
 }
-.lm_filter_basic_item.active .filter_item_icon {
+.lm_filter_basic_item.active .filter_item_icon.addon_after {
   transform: rotateX(180deg);
 }
+.lm_filter_basic_item.active.lm_filter_complex_item .filter_item_icon,
+.lm_filter_basic_item.active.lm_filter_complex_item .filter_item_label {
+  color: var(--primary-color);
+}
 .ant-dropdown.filter_dropdown_container_cascader > div {
   transform: translateY(-4px);
 }
 .ant-dropdown.filter_dropdown_container_date .ant-picker {
   visibility: hidden;
-  transform: translateY(-28px);
+  transform: translateY(-36px);
 }
 .ant-dropdown .filter_dropdown {
   display: flex;