@fileverse-dev/fortune-react 1.0.2-mod-29 → 1.0.2-mod-31

package/dist/index.js

@@ -2115,15 +2115,11 @@ var FilterOptions = function FilterOptions(_ref) {
         width: undefined
       }),
       className: "luckysheet-filter-options ".concat(filterParam == null ? "" : "luckysheet-filter-options-active")
-    }, filterParam == null ? (/*#__PURE__*/React__default['default'].createElement("div", {
-      className: "caret down"
-    })) : (/*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-      name: "filter-fill-white",
-      style: {
-        width: 15,
-        height: 15
-      }
-    })));
+    }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+      name: "filter",
+      width: 15,
+      height: 15
+    }));
   })));
 };
 
@@ -3221,6 +3217,7 @@ var ConditionRules = function ConditionRules(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("span", {
     id: "checkTextColor"
   }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
+    className: "border-2",
     checked: context.conditionRules.textColor.check,
     onCheckedChange: function onCheckedChange(e) {
       var checked = e.target.checked;
@@ -3248,6 +3245,7 @@ var ConditionRules = function ConditionRules(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("span", {
     id: "checkCellColor"
   }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
+    className: "border-2",
     checked: context.conditionRules.cellColor.check,
     onCheckedChange: function onCheckedChange(e) {
       var checked = e.target.checked;
@@ -6542,7 +6540,9 @@ var Toolbar = function Toolbar(_ref) {
               justifyContent: "start"
             }
           }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-            name: iconId
+            name: iconId,
+            width: 24,
+            height: 18
           }), text))) : (/*#__PURE__*/React__default['default'].createElement(MenuDivider, {
             key: "divider-".concat(index)
           }));
@@ -6567,7 +6567,7 @@ var Toolbar = function Toolbar(_ref) {
     className: "fortune-toolbar",
     "aria-label": toolbar.toolbar
   }, settings.customToolbarItems.filter(function (n) {
-    return n.key !== "templates";
+    return n.key === "import-export";
   }).map(function (n) {
     return /*#__PURE__*/React__default['default'].createElement(CustomButton, {
       tooltip: n.tooltip,
@@ -6604,6 +6604,18 @@ var Toolbar = function Toolbar(_ref) {
       icon: n.icon,
       iconName: n.iconName
     }, n.children);
+  }), /*#__PURE__*/React__default['default'].createElement(Divider, {
+    key: "templateDivider"
+  }), settings.customToolbarItems.filter(function (n) {
+    return n.key !== "templates" && n.key !== "import-export";
+  }).map(function (n) {
+    return /*#__PURE__*/React__default['default'].createElement(CustomButton, {
+      tooltip: n.tooltip,
+      onClick: n.onClick,
+      key: n.key,
+      icon: n.icon,
+      iconName: n.iconName
+    }, n.children);
   }));
 };
 
@@ -7848,7 +7860,8 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
           name: "sort-asc",
-          width: 22,
+          width: 24,
+          height: 18,
           style: {
             marginRight: "4px"
           }
@@ -7866,7 +7879,8 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
           name: "sort-desc",
-          width: 22,
+          width: 24,
+          height: 18,
           style: {
             marginRight: "4px"
           }
@@ -7922,7 +7936,7 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
           name: "filter",
-          width: 22,
+          width: 24,
           style: {
             marginRight: "4px"
           }
@@ -7940,9 +7954,11 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
           name: "eraser",
-          width: 22,
+          width: 24,
+          height: 22,
           style: {
-            marginRight: "4px"
+            marginRight: "4px",
+            marginLeft: "2px"
           }
         }), /*#__PURE__*/React__default['default'].createElement("p", null, filter.clearFilter))))),
         trigger: "mouseenter focus",
@@ -7953,7 +7969,7 @@ var ContextMenu = function ContextMenu() {
         className: "context-item"
       }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
         name: "filter",
-        width: 22,
+        width: 24,
         style: {
           marginRight: "4px"
         }
@@ -10377,23 +10393,24 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
 var SelectItem = function SelectItem(_ref) {
   var item = _ref.item,
     isChecked = _ref.isChecked,
-    _onChange = _ref.onChange,
+    onChange = _ref.onChange,
     isItemVisible = _ref.isItemVisible;
   var checked = React.useMemo(function () {
     return isChecked(item.key);
   }, [isChecked, item.key]);
   return isItemVisible(item) ? (/*#__PURE__*/React__default['default'].createElement("div", {
     className: "select-item"
-  }, /*#__PURE__*/React__default['default'].createElement("input", {
-    className: "filter-checkbox",
-    type: "checkbox",
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
+    className: "border-2",
     checked: checked,
-    onChange: function onChange() {
-      _onChange(item, !checked);
+    onCheckedChange: function onCheckedChange(e) {
+      onChange(item, e.target.checked);
     }
-  }), /*#__PURE__*/React__default['default'].createElement("div", null, item.text), /*#__PURE__*/React__default['default'].createElement("span", {
+  }), /*#__PURE__*/React__default['default'].createElement("span", null, item.text)), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "count"
-  }, "( ".concat(item.rows.length, " )")))) : null;
+  }, "".concat(item.rows.length)))) : null;
 };
 var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
   var item = _ref2.item,
@@ -10402,7 +10419,7 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
     initialExpand = _ref2.initialExpand,
     onExpand = _ref2.onExpand,
     isChecked = _ref2.isChecked,
-    _onChange2 = _ref2.onChange,
+    onChange = _ref2.onChange,
     isItemVisible = _ref2.isItemVisible;
   var _useState = React.useState(initialExpand(item.key)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -10411,39 +10428,43 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
   var checked = React.useMemo(function () {
     return isChecked(item.key);
   }, [isChecked, item.key]);
-  return isItemVisible(item) ? (/*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+  return isItemVisible(item) ? (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex flex-col gap-2"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "select-item",
     style: {
       marginLeft: -2 + depth * 20
     },
-    onClick: function onClick() {
-      onExpand === null || onExpand === void 0 ? void 0 : onExpand(item.key, !expand);
-      setExpand(!expand);
-    },
     tabIndex: 0
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex items-center gap-2",
+    style: {
+      flex: 1
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
   }, ___default['default'].isEmpty(item.children) ? (/*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       width: 10
     }
-  })) : (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "filter-caret ".concat(expand ? "down" : "right"),
-    style: {
-      cursor: "pointer"
+  })) : (/*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
+    name: expand ? "ChevronDown" : "ChevronRight",
+    className: "cursor-pointer",
+    size: "sm",
+    onClick: function onClick() {
+      onExpand === null || onExpand === void 0 ? void 0 : onExpand(item.key, !expand);
+      setExpand(!expand);
     }
-  })), /*#__PURE__*/React__default['default'].createElement("input", {
-    className: "filter-checkbox",
-    type: "checkbox",
+  })), /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
+    className: "border-2",
     checked: checked,
-    onChange: function onChange() {
-      _onChange2(item, !checked);
-    },
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    tabIndex: 0
-  }), /*#__PURE__*/React__default['default'].createElement("div", null, item.text), /*#__PURE__*/React__default['default'].createElement("span", {
+    onCheckedChange: function onCheckedChange(e) {
+      onChange(item, e.target.checked);
+    }
+  }), /*#__PURE__*/React__default['default'].createElement("span", null, item.text)), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "count"
-  }, "( ".concat(item.rows.length, " )"))), expand && item.children.map(function (v) {
+  }, "".concat(item.rows.length))), expand && item.children.map(function (v) {
     return /*#__PURE__*/React__default['default'].createElement(_DateSelectTreeItem, _objectSpread2({
       key: v.key,
       item: v,
@@ -10452,7 +10473,7 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
       initialExpand: initialExpand,
       onExpand: onExpand,
       isChecked: isChecked,
-      onChange: _onChange2,
+      onChange: onChange,
       isItemVisible: isItemVisible
     }));
   }))) : null;
@@ -10501,8 +10522,7 @@ var FilterMenu = function FilterMenu() {
     startCol = _ref4.startCol,
     endRow = _ref4.endRow,
     endCol = _ref4.endCol,
-    col = _ref4.col,
-    listBoxMaxHeight = _ref4.listBoxMaxHeight;
+    col = _ref4.col;
   var _locale = fortuneCore.locale(context),
     filter = _locale.filter;
   var _useState3 = React.useState({
@@ -10577,25 +10597,6 @@ var FilterMenu = function FilterMenu() {
       }));
     }, 300);
   }, [data.flattenValues]);
-  var selectAll = React.useCallback(function () {
-    setDatesUncheck([]);
-    setValuesUncheck([]);
-    hiddenRows.current = [];
-  }, []);
-  var clearAll = React.useCallback(function () {
-    setDatesUncheck(___default['default'].keys(data.dateRowMap));
-    setValuesUncheck(___default['default'].keys(data.valueRowMap));
-    hiddenRows.current = data.visibleRows;
-  }, [data.dateRowMap, data.valueRowMap, data.visibleRows]);
-  var inverseSelect = React.useCallback(function () {
-    setDatesUncheck(produce__default['default'](function (draft) {
-      return ___default['default'].xor(draft, ___default['default'].keys(data.dateRowMap));
-    }));
-    setValuesUncheck(produce__default['default'](function (draft) {
-      return ___default['default'].xor(draft, ___default['default'].keys(data.valueRowMap));
-    }));
-    hiddenRows.current = ___default['default'].xor(hiddenRows.current, data.visibleRows);
-  }, [data.dateRowMap, data.valueRowMap, data.visibleRows]);
   var onColorSelectChange = React.useCallback(function (key, color, checked) {
     setFilterColors(produce__default['default'](function (draft) {
       var colorData = ___default['default'].find(___default['default'].get(draft, key), function (v) {
@@ -10725,11 +10726,12 @@ var FilterMenu = function FilterMenu() {
     ref: containerRef,
     style: {
       left: filterContextMenu.x,
-      top: filterContextMenu.y
+      top: filterContextMenu.y,
+      minWidth: "280px !important"
     }
   }, (_settings$filterConte = settings.filterContextMenu) === null || _settings$filterConte === void 0 ? void 0 : _settings$filterConte.map(function (name, i) {
     if (name === "|") {
-      return /*#__PURE__*/React__default['default'].createElement(Divider$1, {
+      return /*#__PURE__*/React__default['default'].createElement(ui.Divider, {
         key: "divider-".concat(i)
       });
     }
@@ -10739,7 +10741,16 @@ var FilterMenu = function FilterMenu() {
         onClick: function onClick() {
           return sortData(true);
         }
-      }, filter.sortByAsc);
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "context-item w-full"
+      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+        name: "sort-asc",
+        width: 24,
+        height: 18,
+        style: {
+          marginRight: "4px"
+        }
+      }), /*#__PURE__*/React__default['default'].createElement("p", null, filter.sortByAsc)));
     }
     if (name === "sort-by-desc") {
       return /*#__PURE__*/React__default['default'].createElement(Menu, {
@@ -10747,7 +10758,16 @@ var FilterMenu = function FilterMenu() {
         onClick: function onClick() {
           return sortData(false);
         }
-      }, filter.sortByDesc);
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "context-item w-full"
+      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+        name: "sort-desc",
+        width: 24,
+        height: 18,
+        style: {
+          marginRight: "4px"
+        }
+      }), /*#__PURE__*/React__default['default'].createElement("p", null, filter.sortByDesc)));
     }
     if (name === "filter-by-color") {
       return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -10775,72 +10795,22 @@ var FilterMenu = function FilterMenu() {
         className: "filter-caret right"
       }))));
     }
-    if (name === "filter-by-condition") {
-      return /*#__PURE__*/React__default['default'].createElement("div", {
-        key: "name"
-      }, /*#__PURE__*/React__default['default'].createElement(Menu, {
-        onClick: function onClick() {}
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "filter-caret right"
-      }), filter.filterByCondition), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "luckysheet-\\${menuid}-bycondition",
-        style: {
-          display: "none"
-        }
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "luckysheet-flat-menu-button luckysheet-mousedown-cancel",
-        id: "luckysheet-\\${menuid}-selected"
-      }, /*#__PURE__*/React__default['default'].createElement("span", {
-        className: "luckysheet-mousedown-cancel",
-        "data-value": "null",
-        "data-type": "0"
-      }, filter.filiterInputNone), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "luckysheet-mousedown-cancel"
-      }, /*#__PURE__*/React__default['default'].createElement("i", {
-        className: "fa fa-sort",
-        "aria-hidden": "true"
-      })))));
-    }
     if (name === "filter-by-value") {
       return /*#__PURE__*/React__default['default'].createElement("div", {
         key: name
-      }, /*#__PURE__*/React__default['default'].createElement(Menu, {
-        onClick: function onClick() {}
       }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "filter-caret right"
-      }), filter.filterByValues), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "luckysheet-filter-byvalue"
+        className: "luckysheet-filter-byvalue flex flex-col gap-2 mt-2"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "fortune-menuitem-row byvalue-btn-row"
-      }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("span", {
-        className: "fortune-byvalue-btn",
-        onClick: selectAll,
-        tabIndex: 0
-      }, filter.filterValueByAllBtn), " - ", /*#__PURE__*/React__default['default'].createElement("span", {
-        className: "fortune-byvalue-btn",
-        onClick: clearAll,
-        tabIndex: 0
-      }, filter.filterValueByClearBtn), " - ", /*#__PURE__*/React__default['default'].createElement("span", {
-        className: "fortune-byvalue-btn",
-        onClick: inverseSelect,
-        tabIndex: 0
-      }, filter.filterValueByInverseBtn)), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "byvalue-filter-icon"
-      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-        name: "filter-fill",
-        style: {
-          width: 20,
-          height: 20
-        }
-      }))), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "filtermenu-input-container"
-      }, /*#__PURE__*/React__default['default'].createElement("input", {
-        type: "text",
+      }, /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
+        leftIcon: /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
+          name: "Search",
+          size: "sm"
+        }),
         onKeyDown: function onKeyDown(e) {
           return e.stopPropagation();
         },
         placeholder: filter.filterValueByTip,
-        className: "luckysheet-mousedown-cancel",
         id: "luckysheet-\\${menuid}-byvalue-input",
         value: searchText,
         onChange: function onChange(e) {
@@ -10848,10 +10818,7 @@ var FilterMenu = function FilterMenu() {
           searchValues(e.target.value);
         }
       })), /*#__PURE__*/React__default['default'].createElement("div", {
-        id: "luckysheet-filter-byvalue-select",
-        style: {
-          maxHeight: listBoxMaxHeight
-        }
+        id: "luckysheet-filter-byvalue-select"
       }, /*#__PURE__*/React__default['default'].createElement(DateSelectTree, {
         dates: data.dates,
         onExpand: onExpand,
@@ -10873,6 +10840,37 @@ var FilterMenu = function FilterMenu() {
             return v.match(item.key) != null;
           }) > -1;
         }
+      }), /*#__PURE__*/React__default['default'].createElement(SelectItem, {
+        item: {
+          key: "all",
+          text: filter.filterValueByAllBtn,
+          value: "",
+          mask: "",
+          rows: data.values.filter(function (v) {
+            return showValues.includes(v.text);
+          }).flatMap(function (v) {
+            return v.rows;
+          })
+        },
+        isChecked: function isChecked() {
+          var allDatesChecked = datesUncheck.length === 0;
+          var allValuesChecked = valuesUncheck.length === 0;
+          return allDatesChecked && allValuesChecked;
+        },
+        onChange: function onChange(item, checked) {
+          if (checked) {
+            setDatesUncheck([]);
+            setValuesUncheck([]);
+            hiddenRows.current = [];
+          } else {
+            setDatesUncheck(___default['default'].keys(data.dateRowMap));
+            setValuesUncheck(___default['default'].keys(data.valueRowMap));
+            hiddenRows.current = data.visibleRows;
+          }
+        },
+        isItemVisible: function isItemVisible() {
+          return true;
+        }
       }), data.values.map(function (v) {
         return /*#__PURE__*/React__default['default'].createElement(SelectItem, {
           key: v.key,
@@ -10882,14 +10880,17 @@ var FilterMenu = function FilterMenu() {
           },
           onChange: function onChange(item, checked) {
             var rows = hiddenRows.current;
-            hiddenRows.current = checked ? ___default['default'].without.apply(___default['default'], [rows].concat(_toConsumableArray(item.rows))) : ___default['default'].concat(rows, item.rows);
-            setValuesUncheck(produce__default['default'](function (draft) {
-              if (checked) {
+            if (checked) {
+              hiddenRows.current = ___default['default'].without.apply(___default['default'], [rows].concat(_toConsumableArray(item.rows)));
+              setValuesUncheck(produce__default['default'](function (draft) {
                 ___default['default'].pull(draft, item.key);
-              } else {
+              }));
+            } else {
+              hiddenRows.current = ___default['default'].concat(rows, item.rows);
+              setValuesUncheck(produce__default['default'](function (draft) {
                 draft.push(item.key);
-              }
-            }));
+              }));
+            }
           },
           isItemVisible: function isItemVisible(item) {
             return showValues.length === data.flattenValues.length ? true : ___default['default'].includes(showValues, item.text);
@@ -10898,40 +10899,49 @@ var FilterMenu = function FilterMenu() {
       }))));
     }
     return null;
-  }), /*#__PURE__*/React__default['default'].createElement(Divider$1, null), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "fortune-menuitem-row"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "button-basic button-primary",
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-menuitem-row mt-2"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    variant: "ghost",
+    style: {
+      minWidth: "80px"
+    },
     onClick: function onClick() {
-      if (col == null) return;
       setContext(function (draftCtx) {
-        var rowHidden = ___default['default'].reduce(hiddenRows.current, function (pre, curr) {
-          pre[curr] = 0;
-          return pre;
-        }, {});
-        fortuneCore.saveFilter(draftCtx, hiddenRows.current.length > 0, rowHidden, {}, startRow, endRow, col, startCol, endCol);
-        hiddenRows.current = [];
-        draftCtx.filterContextMenu = undefined;
+        fortuneCore.clearFilter(draftCtx);
       });
     },
     tabIndex: 0
-  }, filter.filterConform), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "button-basic button-default",
+  }, filter.clearFilter), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
     onClick: function onClick() {
       setContext(function (draftCtx) {
         draftCtx.filterContextMenu = undefined;
       });
     },
     tabIndex: 0
-  }, filter.filterCancel), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "button-basic button-danger",
+  }, filter.filterCancel), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
     onClick: function onClick() {
+      if (col == null) return;
       setContext(function (draftCtx) {
-        fortuneCore.clearFilter(draftCtx);
+        var rowHidden = ___default['default'].reduce(hiddenRows.current, function (pre, curr) {
+          pre[curr] = 0;
+          return pre;
+        }, {});
+        fortuneCore.saveFilter(draftCtx, hiddenRows.current.length > 0, rowHidden, {}, startRow, endRow, col, startCol, endCol);
+        hiddenRows.current = [];
+        draftCtx.filterContextMenu = undefined;
       });
     },
     tabIndex: 0
-  }, filter.clearFilter))), showSubMenu && (/*#__PURE__*/React__default['default'].createElement("div", {
+  }, filter.filterConfirm))), showSubMenu && (/*#__PURE__*/React__default['default'].createElement("div", {
     ref: subMenuRef,
     className: "luckysheet-filter-bycolor-submenu",
     style: subMenuPos,
@@ -10971,7 +10981,7 @@ var FilterMenu = function FilterMenu() {
       });
     },
     tabIndex: 0
-  }, filter.filterConform))))));
+  }, filter.filterConfirm))))));
 };
 
 var SheetHiddenButton = function SheetHiddenButton(_ref) {

package/dist/index.umd.css

@@ -944,32 +944,25 @@ html::-webkit-scrollbar-button {
 }
 
 .luckysheet-filter-options {
-  color: #897bff;
   cursor: pointer;
   position: absolute;
   z-index: 200;
-  border: 1px solid #897bff;
-  border-radius: 3px;
-  top: 3px;
-  margin-left: 0px;
-  display: "block";
-  padding: 0px 4px;
+  border-radius: 2px;
+  top: 4px;
+  margin-right: 2px;
+  margin-top: 2px;
   font-size: 12px;
   height: 15px;
-  background: #fff;
+  padding: 1px;
+  background: hsl(var(--color-bg-tertiary));
 }
 
 .luckysheet-filter-options:hover {
-  color: #fff;
-  border: 1px solid #fff;
-  background: #897bff;
+  background: hsl(var(--color-bg-default-hover));
 }
 
 .luckysheet-filter-options-active {
-  color: #fff;
-  border: 1px solid #897bff;
-  padding: 0px 1px;
-  background: #897bff;
+  background: hsl(var(--color-bg-tertiary));
 }
 
 .caret {
@@ -3153,13 +3146,12 @@ label {
   min-width: 240px;
   max-height: 100%;
   overflow-y: auto;
-  border-radius: 4px;
+  border-radius: 8px;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   transition: opacity 0.218s;
   background: #fff;
   border: 1px solid hsl(var(--color-border-default));
   cursor: default;
-  font-size: 13px;
   margin: 0;
   outline: none;
   padding: 8px;
@@ -3171,9 +3163,8 @@ label {
           user-select: none;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  max-width: 250px;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08);
-  color: #363b3f;
+  /* max-width: 250px; */
+  color: hsl(var(--color-text-default));
   line-height: 20px;
 }
 
@@ -3255,9 +3246,10 @@ label {
 
 .fortune-menuitem-row {
   display: flex;
-  padding: 7px 24px;
   white-space: pre;
   align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
 }
 
 .fortune-byvalue-btn {
@@ -3383,21 +3375,32 @@ label {
 }
 
 #luckysheet-filter-byvalue-select {
+  position: relative;
   min-height: 100px;
+  max-height: 210px;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 4px 24px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-radius: 4px;
+  border: 1px solid hsl(var(--color-border-default));
 }
 
 #luckysheet-filter-byvalue-select .count,
 #luckysheet-pivotTableFilter-byvalue-select .count {
-  color: gray;
-  margin-left: 5px;
+  color: hsl(var(--color-text-secondary));
+  font-size: 14px;
 }
 
 #luckysheet-filter-byvalue-select .select-item {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 14px;
+
 }
 
 /*颜色筛选 -- pan*/