@univerjs/sheets-conditional-formatting-ui 0.2.11 → 0.2.12

package/lib/es/index.js

@@ -2,18 +2,18 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { CommandType, ICommandService, IUniverInstanceService, IUndoRedoService, ObjectMatrix, Range, sequenceExecute, UniverInstanceType, Rectangle, ColorKit, BooleanNumber, Disposable, OnLifecycle, LifecycleStages, Inject, LocaleService, useDependency, Injector, createInterceptorKey, createInternalEditorID, Tools, InterceptorManager, toDisposable, Plugin, DependentOn } from "@univerjs/core";
-import { ConditionalFormattingRuleModel, CFRuleType, CFSubRuleType, AddConditionalRuleMutation, CFNumberOperator, setConditionalRuleMutationUndoFactory, SetConditionalRuleMutation, DeleteConditionalRuleMutationUndoFactory, DeleteConditionalRuleMutation, MoveConditionalRuleMutation, transformSupportSymmetryAnchor, MoveConditionalRuleMutationUndoFactory, getColorScaleFromValue, iconMap, DEFAULT_BG_COLOR, DEFAULT_FONT_COLOR, defaultDataBarPositiveColor, defaultDataBarNativeColor, AddConditionalRuleMutationUndoFactory, CFValueType, createDefaultValueByValueType, SHEET_CONDITIONAL_FORMATTING_PLUGIN, removeUndefinedAttr, createDefaultValue, CFTextOperator, CFTimePeriodOperator, iconGroup, getOppositeOperator, compareWithNumber, EMPTY_ICON_TYPE, createDefaultRule, DEFAULT_PADDING, DEFAULT_WIDTH, ConditionalFormattingService, ConditionalFormattingViewModel, isRangesEqual, UniverSheetsConditionalFormattingPlugin, getStringFromDataStream } from "@univerjs/sheets-conditional-formatting";
-import { getSheetCommandTarget, SheetsSelectionsService, findAllRectangle, createTopMatrixFromMatrix, SetWorksheetActiveOperation, checkRangesEditablePermission, WorkbookEditablePermission, WorksheetSetCellStylePermission, WorksheetEditPermission, RangeProtectionPermissionEditPoint, SetSelectionsOperation, RemoveSheetMutation, setEndForRange, INTERCEPTOR_POINT, SheetInterceptorService, RefRangeService, handleDefaultRangeChangeWithEffectRefCommands, ClearSelectionFormatCommand, ClearSelectionAllCommand, RangeMergeUtil } from "@univerjs/sheets";
-import { MenuItemType, MenuGroup, MenuPosition, getMenuHiddenObservable, useObservable, ComponentManager, TextEditor, ILayoutService, useScrollYOverContainer, RangeSelector, IMenuService, ISidebarService } from "@univerjs/ui";
-import { Observable, merge, debounceTime as debounceTime$1 } from "rxjs";
-import { debounceTime, bufferTime, filter } from "rxjs/operators";
-import { getCurrentRangeDisable$, useHighlightRange, SheetSkeletonManagerService, COPY_TYPE, rangeToDiscreteRange, PREDEFINED_HOOK_NAME, virtualizeDiscreteRanges, getRepeatRange, ISheetClipboardService, SheetPermissionInterceptorBaseController, IAutoFillService, APPLY_TYPE, getAutoFillRepeatRange, IEditorBridgeService } from "@univerjs/sheets-ui";
+import { CommandType, ICommandService, IUniverInstanceService, IUndoRedoService, ObjectMatrix, Range, sequenceExecute, ColorKit, BooleanNumber, Disposable, OnLifecycle, LifecycleStages, Inject, LocaleService, useDependency, Injector, UniverInstanceType, Rectangle, createInterceptorKey, createInternalEditorID, Tools, InterceptorManager, generateRandomId, toDisposable, Plugin, DependentOn, IConfigService } from "@univerjs/core";
+import { ConditionalFormattingRuleModel, CFRuleType, CFSubRuleType, AddConditionalRuleMutation, CFNumberOperator, setConditionalRuleMutationUndoFactory, SetConditionalRuleMutation, DeleteConditionalRuleMutationUndoFactory, DeleteConditionalRuleMutation, transformSupportSymmetryAnchor, MoveConditionalRuleMutationUndoFactory, MoveConditionalRuleMutation, getColorScaleFromValue, iconMap, DEFAULT_BG_COLOR, DEFAULT_FONT_COLOR, defaultDataBarPositiveColor, defaultDataBarNativeColor, AddConditionalRuleMutationUndoFactory, CFValueType, createDefaultValueByValueType, SHEET_CONDITIONAL_FORMATTING_PLUGIN, removeUndefinedAttr, createDefaultValue, CFTextOperator, CFTimePeriodOperator, iconGroup, getOppositeOperator, compareWithNumber, EMPTY_ICON_TYPE, createDefaultRule, DEFAULT_PADDING, DEFAULT_WIDTH, ConditionalFormattingService, ConditionalFormattingViewModel, isRangesEqual, UniverSheetsConditionalFormattingPlugin, getStringFromDataStream } from "@univerjs/sheets-conditional-formatting";
+import { getSheetCommandTarget, SheetsSelectionsService, findAllRectangle, createTopMatrixFromMatrix, SetWorksheetActiveOperation, SetSelectionsOperation, checkRangesEditablePermission, RemoveSheetMutation, setEndForRange, INTERCEPTOR_POINT, SheetInterceptorService, RefRangeService, handleDefaultRangeChangeWithEffectRefCommands, WorkbookEditablePermission, RangeProtectionPermissionEditPoint, WorksheetEditPermission, WorksheetSetCellStylePermission, ClearSelectionFormatCommand, ClearSelectionAllCommand, RangeMergeUtil } from "@univerjs/sheets";
+import { useObservable, ComponentManager, TextEditor, ILayoutService, useScrollYOverContainer, RangeSelector, ISidebarService, MenuItemType, getMenuHiddenObservable, RibbonStartGroup, IMenuManagerService } from "@univerjs/ui";
 import require$$0, { forwardRef, useRef, createElement, useMemo, useState, useEffect } from "react";
 import { Select, Tooltip, Dropdown, ColorPicker as ColorPicker$1, InputNumber, RadioGroup, Radio, Checkbox, Input, Button } from "@univerjs/design";
+import { useHighlightRange, SheetSkeletonManagerService, COPY_TYPE, rangeToDiscreteRange, PREDEFINED_HOOK_NAME, virtualizeDiscreteRanges, getRepeatRange, ISheetClipboardService, SheetPermissionInterceptorBaseController, IAutoFillService, APPLY_TYPE, getAutoFillRepeatRange, getCurrentRangeDisable$, IEditorBridgeService } from "@univerjs/sheets-ui";
 import { serializeRange } from "@univerjs/engine-formula";
 import cl from "clsx";
 import require$$2$1 from "react-dom";
+import { Observable, debounceTime, merge } from "rxjs";
+import { bufferTime, filter, debounceTime as debounceTime$1 } from "rxjs/operators";
 import { IRenderManagerService } from "@univerjs/engine-render";
 const AddAverageCfCommand = {
   type: CommandType.COMMAND,
@@ -236,12 +236,12 @@ const AddAverageCfCommand = {
   type: CommandType.COMMAND,
   id: "sheet.command.clear-range-conditional-rule",
   handler(accessor, params) {
-    var _a13;
+    var _a14;
     if (!params)
       return !1;
     const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), selectionManagerService = accessor.get(SheetsSelectionsService), target = getSheetCommandTarget(univerInstanceService, params);
     if (!target) return !1;
-    const { unitId, subUnitId } = target, ranges = ((_a13 = selectionManagerService.getCurrentSelections()) == null ? void 0 : _a13.map((selection) => selection.range)) || [], allRuleList = conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId);
+    const { unitId, subUnitId } = target, ranges = ((_a14 = selectionManagerService.getCurrentSelections()) == null ? void 0 : _a14.map((selection) => selection.range)) || [], allRuleList = conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId);
     if (!(allRuleList != null && allRuleList.length) || !ranges.length)
       return !1;
     const redos = [], undos = [];
@@ -288,107 +288,7 @@ const AddAverageCfCommand = {
       undoMutations: undos
     }), result;
   }
-}, commandList = [SetWorksheetActiveOperation.id, AddConditionalRuleMutation.id, SetConditionalRuleMutation.id, DeleteConditionalRuleMutation.id, MoveConditionalRuleMutation.id], FactoryManageConditionalFormattingRule = /* @__PURE__ */ __name((accessor) => {
-  const commonSelections = [
-    {
-      label: "sheet.cf.ruleType.highlightCell",
-      value: CF_MENU_OPERATION.highlightCell
-    },
-    {
-      label: "sheet.cf.panel.rankAndAverage",
-      value: CF_MENU_OPERATION.rank
-    },
-    {
-      label: "sheet.cf.ruleType.formula",
-      value: CF_MENU_OPERATION.formula
-    },
-    {
-      label: "sheet.cf.ruleType.colorScale",
-      value: CF_MENU_OPERATION.colorScale
-    },
-    {
-      label: "sheet.cf.ruleType.dataBar",
-      value: CF_MENU_OPERATION.dataBar
-    },
-    {
-      label: "sheet.cf.ruleType.iconSet",
-      value: CF_MENU_OPERATION.icon
-    },
-    {
-      label: "sheet.cf.menu.manageConditionalFormatting",
-      value: CF_MENU_OPERATION.viewRule
-    },
-    {
-      label: "sheet.cf.menu.createConditionalFormatting",
-      value: CF_MENU_OPERATION.createRule
-    },
-    {
-      label: "sheet.cf.menu.clearRangeRules",
-      value: CF_MENU_OPERATION.clearRangeRules,
-      disabled: !1
-    },
-    {
-      label: "sheet.cf.menu.clearWorkSheetRules",
-      value: CF_MENU_OPERATION.clearWorkSheetRules
-    }
-  ], selectionManagerService = accessor.get(SheetsSelectionsService), commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService), conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel), clearRangeEnable$ = new Observable((subscriber) => merge(
-    selectionManagerService.selectionMoveEnd$,
-    new Observable((commandSubscribe) => {
-      const disposable = commandService.onCommandExecuted((commandInfo) => {
-        var _a13;
-        const { id, params } = commandInfo, unitId = (_a13 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a13.getUnitId();
-        commandList.includes(id) && params.unitId === unitId && commandSubscribe.next(null);
-      });
-      return () => disposable.dispose();
-    })
-  ).pipe(debounceTime(16)).subscribe(() => {
-    var _a13;
-    const ranges = ((_a13 = selectionManagerService.getCurrentSelections()) == null ? void 0 : _a13.map((selection) => selection.range)) || [], workbook = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
-    if (!workbook) return;
-    const worksheet = workbook.getActiveSheet();
-    if (!worksheet) return;
-    const hasPermission = (conditionalFormattingRuleModel.getSubunitRules(workbook.getUnitId(), worksheet.getSheetId()) || []).filter((rule) => rule.ranges.some((ruleRange2) => ranges.some((range) => Rectangle.intersects(range, ruleRange2)))).map((rule) => rule.ranges).every((ranges2) => checkRangesEditablePermission(accessor, workbook.getUnitId(), worksheet.getSheetId(), ranges2));
-    subscriber.next(hasPermission);
-  })), clearSheetEnable$ = new Observable(
-    (subscriber) => new Observable((commandSubscribe) => {
-      const disposable = commandService.onCommandExecuted((commandInfo) => {
-        var _a13;
-        const { id, params } = commandInfo, unitId = (_a13 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a13.getUnitId();
-        commandList.includes(id) && params.unitId === unitId && commandSubscribe.next(null);
-      });
-      return () => disposable.dispose();
-    }).pipe(debounceTime(16)).subscribe(() => {
-      const workbook = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
-      if (!workbook) return;
-      const worksheet = workbook.getActiveSheet();
-      if (!worksheet) return;
-      const allRule = conditionalFormattingRuleModel.getSubunitRules(workbook.getUnitId(), worksheet.getSheetId()) || [];
-      if (!allRule.length)
-        return subscriber.next(!1), !1;
-      const hasPermission = allRule.map((rule) => rule.ranges).every((ranges) => checkRangesEditablePermission(accessor, workbook.getUnitId(), worksheet.getSheetId(), ranges));
-      subscriber.next(hasPermission);
-    })
-  ), selections$ = new Observable((subscriber) => {
-    clearRangeEnable$.subscribe((v) => {
-      const item2 = commonSelections.find((item22) => item22.value === CF_MENU_OPERATION.clearRangeRules);
-      item2 && (item2.disabled = !v, subscriber.next(commonSelections));
-    }), clearSheetEnable$.subscribe((v) => {
-      const item2 = commonSelections.find((item22) => item22.value === CF_MENU_OPERATION.clearWorkSheetRules);
-      item2 && (item2.disabled = !v, subscriber.next(commonSelections));
-    }), subscriber.next(commonSelections);
-  });
-  return {
-    id: OpenConditionalFormattingOperator.id,
-    type: MenuItemType.SELECTOR,
-    group: MenuGroup.TOOLBAR_FORMULAS_INSERT,
-    positions: [MenuPosition.TOOLBAR_START],
-    icon: "Conditions",
-    tooltip: "sheet.cf.title",
-    selections: selections$,
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-    disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetSetCellStylePermission, WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] })
-  };
-}, "FactoryManageConditionalFormattingRule");
+};
 var commonjsGlobal = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
@@ -486,15 +386,15 @@ function replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend) {
   var attrs = __assign({}, node.attrs);
   extend != null && extend.colorChannel1 && attrs.fill === "colorChannel1" && (attrs.fill = extend.colorChannel1);
   var defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a13) {
-    var key = _a13[0], value = _a13[1];
+  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a14) {
+    var key = _a14[0], value = _a14[1];
     typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
   })), attrs;
 }
 __name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
 function replaceRuntimeIdsInDefs(node, runtimeProps) {
-  var _a13, defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a13 = node.children) === null || _a13 === void 0) && _a13.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
+  var _a14, defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a14 = node.children) === null || _a14 === void 0) && _a14.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
     return typeof child.attrs.id == "string" && defIds && defIds.indexOf(child.attrs.id) > -1 ? __assign(__assign({}, child), { attrs: __assign(__assign({}, child.attrs), { id: child.attrs.id + runtimeProps.idSuffix }) }) : child;
   }) }) : node;
 }
@@ -590,8 +490,8 @@ var reactGridLayout = { exports: {} }, ReactGridLayout$1 = {}, fastEquals = { ex
     }
     __name(sameValueZeroEqual, "sameValueZeroEqual");
     var ARGUMENTS_TAG = "[object Arguments]", BOOLEAN_TAG = "[object Boolean]", DATE_TAG = "[object Date]", REG_EXP_TAG = "[object RegExp]", MAP_TAG = "[object Map]", NUMBER_TAG = "[object Number]", OBJECT_TAG = "[object Object]", SET_TAG = "[object Set]", STRING_TAG = "[object String]", toString2 = Object.prototype.toString;
-    function createComparator(_a13) {
-      var areArraysEqual2 = _a13.areArraysEqual, areDatesEqual2 = _a13.areDatesEqual, areMapsEqual2 = _a13.areMapsEqual, areObjectsEqual2 = _a13.areObjectsEqual, areRegExpsEqual2 = _a13.areRegExpsEqual, areSetsEqual2 = _a13.areSetsEqual, createIsNestedEqual = _a13.createIsNestedEqual, isEqual = createIsNestedEqual(comparator);
+    function createComparator(_a14) {
+      var areArraysEqual2 = _a14.areArraysEqual, areDatesEqual2 = _a14.areDatesEqual, areMapsEqual2 = _a14.areMapsEqual, areObjectsEqual2 = _a14.areObjectsEqual, areRegExpsEqual2 = _a14.areRegExpsEqual, areSetsEqual2 = _a14.areSetsEqual, createIsNestedEqual = _a14.createIsNestedEqual, isEqual = createIsNestedEqual(comparator);
       function comparator(a, b, meta) {
         if (a === b)
           return !0;
@@ -3578,9 +3478,9 @@ const _ReactGridLayout = class _ReactGridLayout extends React$2.Component {
         resizing: !1
       }), this.onLayoutMaybeChanged(newLayout, oldLayout);
     }), _defineProperty$2(this, "onDragOver", (e) => {
-      var _a13;
+      var _a14;
       if (e.preventDefault(), e.stopPropagation(), isFirefox && // $FlowIgnore can't figure this out
-      !((_a13 = e.nativeEvent.target) != null && _a13.classList.contains(layoutClassName$1)))
+      !((_a14 = e.nativeEvent.target) != null && _a14.classList.contains(layoutClassName$1)))
         return !1;
       const {
         droppingItem,
@@ -4192,8 +4092,8 @@ var WidthProvider = {}, MapShim = function() {
       this.__entries__.splice(0);
     }, class_1.prototype.forEach = function(callback, ctx) {
       ctx === void 0 && (ctx = null);
-      for (var _i = 0, _a13 = this.__entries__; _i < _a13.length; _i++) {
-        var entry = _a13[_i];
+      for (var _i = 0, _a14 = this.__entries__; _i < _a14.length; _i++) {
+        var entry = _a14[_i];
         callback.call(ctx, entry[1], entry[0]);
       }
     }, class_1;
@@ -4260,8 +4160,8 @@ var REFRESH_DELAY = 20, transitionKeys = ["top", "right", "bottom", "left", "wid
       })) : (document.addEventListener("DOMSubtreeModified", this.refresh), this.mutationEventsAdded_ = !0), this.connected_ = !0);
     }, ResizeObserverController2.prototype.disconnect_ = function() {
       !isBrowser || !this.connected_ || (document.removeEventListener("transitionend", this.onTransitionEnd_), window.removeEventListener("resize", this.refresh), this.mutationsObserver_ && this.mutationsObserver_.disconnect(), this.mutationEventsAdded_ && document.removeEventListener("DOMSubtreeModified", this.refresh), this.mutationsObserver_ = null, this.mutationEventsAdded_ = !1, this.connected_ = !1);
-    }, ResizeObserverController2.prototype.onTransitionEnd_ = function(_a13) {
-      var _b = _a13.propertyName, propertyName = _b === void 0 ? "" : _b, isReflowProperty = transitionKeys.some(function(key) {
+    }, ResizeObserverController2.prototype.onTransitionEnd_ = function(_a14) {
+      var _b = _a14.propertyName, propertyName = _b === void 0 ? "" : _b, isReflowProperty = transitionKeys.some(function(key) {
         return !!~propertyName.indexOf(key);
       });
       isReflowProperty && this.refresh();
@@ -4270,8 +4170,8 @@ var REFRESH_DELAY = 20, transitionKeys = ["top", "right", "bottom", "left", "wid
     }, ResizeObserverController2.instance_ = null, ResizeObserverController2;
   }()
 ), defineConfigurable = /* @__PURE__ */ __name(function(target, props) {
-  for (var _i = 0, _a13 = Object.keys(props); _i < _a13.length; _i++) {
-    var key = _a13[_i];
+  for (var _i = 0, _a14 = Object.keys(props); _i < _a14.length; _i++) {
+    var key = _a14[_i];
     Object.defineProperty(target, key, {
       value: props[key],
       enumerable: !1,
@@ -4337,8 +4237,8 @@ function getContentRect(target) {
   return isBrowser ? isSVGGraphicsElement(target) ? getSVGContentRect(target) : getHTMLElementContentRect(target) : emptyRect;
 }
 __name(getContentRect, "getContentRect");
-function createReadOnlyRect(_a13) {
-  var x = _a13.x, y = _a13.y, width2 = _a13.width, height2 = _a13.height, Constr = typeof DOMRectReadOnly < "u" ? DOMRectReadOnly : Object, rect = Object.create(Constr.prototype);
+function createReadOnlyRect(_a14) {
+  var x = _a14.x, y = _a14.y, width2 = _a14.width, height2 = _a14.height, Constr = typeof DOMRectReadOnly < "u" ? DOMRectReadOnly : Object, rect = Object.create(Constr.prototype);
   return defineConfigurable(rect, {
     x,
     y,
@@ -4444,8 +4344,8 @@ var ResizeObservation = (
   "disconnect"
 ].forEach(function(method) {
   ResizeObserver.prototype[method] = function() {
-    var _a13;
-    return (_a13 = observers.get(this))[method].apply(_a13, arguments);
+    var _a14;
+    return (_a14 = observers.get(this))[method].apply(_a14, arguments);
   };
 });
 var index = function() {
@@ -4518,9 +4418,9 @@ function _toPrimitive(input, hint) {
 __name(_toPrimitive, "_toPrimitive");
 const layoutClassName = "react-grid-layout";
 function WidthProvideRGL(ComposedComponent) {
-  var _a13;
+  var _a14;
   var _class;
-  return _class = (_a13 = class extends React.Component {
+  return _class = (_a14 = class extends React.Component {
     constructor() {
       super(...arguments), _defineProperty(this, "state", {
         width: 1280
@@ -4556,7 +4456,7 @@ function WidthProvideRGL(ComposedComponent) {
         innerRef: this.elementRef
       }, rest, this.state));
     }
-  }, __name(_a13, "WidthProvider"), _a13), _defineProperty(_class, "defaultProps", {
+  }, __name(_a14, "WidthProvider"), _a14), _defineProperty(_class, "defaultProps", {
     measureBeforeMount: !1
   }), _defineProperty(_class, "propTypes", {
     // If true, will not render children until mounted. Useful for getting the exact width before
@@ -4601,7 +4501,7 @@ const GridLayout = /* @__PURE__ */ getDefaultExportFromCjs(reactGridLayoutExport
 }, cfPreview = "univer-cf-preview", styles$4 = {
   cfPreview
 }, Preview = /* @__PURE__ */ __name((props) => {
-  var _a13, _b;
+  var _a14, _b;
   const rule = props.rule;
   if (!rule)
     return null;
@@ -4631,7 +4531,7 @@ const GridLayout = /* @__PURE__ */ getDefaultExportFromCjs(reactGridLayoutExport
     case CFRuleType.iconSet:
       return iconSet2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.cfPreview, children: iconSet2.map((base64, index2) => base64 ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { style: { height: "100%" }, src: base64 }, index2) : /* @__PURE__ */ jsxRuntimeExports.jsx(SlashSingle, {}, index2)) });
     case CFRuleType.highlightCell: {
-      const { ul, st, it, bl, bg, cl: cl2 } = rule.style, isUnderline = (ul == null ? void 0 : ul.s) === BooleanNumber.TRUE, isStrikethrough = (st == null ? void 0 : st.s) === BooleanNumber.TRUE, isItalic = it === BooleanNumber.TRUE, isBold = bl === BooleanNumber.TRUE, bgColor = (_a13 = bg == null ? void 0 : bg.rgb) != null ? _a13 : DEFAULT_BG_COLOR, fontColor = (_b = cl2 == null ? void 0 : cl2.rgb) != null ? _b : DEFAULT_FONT_COLOR, style = {
+      const { ul, st, it, bl, bg, cl: cl2 } = rule.style, isUnderline = (ul == null ? void 0 : ul.s) === BooleanNumber.TRUE, isStrikethrough = (st == null ? void 0 : st.s) === BooleanNumber.TRUE, isItalic = it === BooleanNumber.TRUE, isBold = bl === BooleanNumber.TRUE, bgColor = (_a14 = bg == null ? void 0 : bg.rgb) != null ? _a14 : DEFAULT_BG_COLOR, fontColor = (_b = cl2 == null ? void 0 : cl2.rgb) != null ? _b : DEFAULT_FONT_COLOR, style = {
         fontWeight: isBold ? "bold" : void 0,
         fontStyle: isItalic ? "italic" : void 0,
         textDecoration: `${isUnderline ? "underline" : ""} ${isStrikethrough ? "line-through" : ""}`.replace(/^ /, "") || void 0,
@@ -4643,11 +4543,11 @@ const GridLayout = /* @__PURE__ */ getDefaultExportFromCjs(reactGridLayoutExport
   }
   return null;
 }, "Preview");
-var __defProp$a = Object.defineProperty, __getOwnPropDesc$a = Object.getOwnPropertyDescriptor, __decorateClass$a = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$b = Object.defineProperty, __getOwnPropDesc$b = Object.getOwnPropertyDescriptor, __decorateClass$b = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$a(target, key, result), result;
-}, "__decorateClass$a"), __decorateParam$a = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$a"), _a2;
+  return kind && result && __defProp$b(target, key, result), result;
+}, "__decorateClass$b"), __decorateParam$b = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$b"), _a2;
 let ConditionalFormattingI18nController = (_a2 = class extends Disposable {
   constructor(_localeService) {
     super();
@@ -4685,9 +4585,9 @@ let ConditionalFormattingI18nController = (_a2 = class extends Disposable {
     return [];
   }
 }, __name(_a2, "ConditionalFormattingI18nController"), _a2);
-ConditionalFormattingI18nController = __decorateClass$a([
+ConditionalFormattingI18nController = __decorateClass$b([
   OnLifecycle(LifecycleStages.Rendered, ConditionalFormattingI18nController),
-  __decorateParam$a(0, Inject(LocaleService))
+  __decorateParam$b(0, Inject(LocaleService))
 ], ConditionalFormattingI18nController);
 const cfRuleList = "univer-cf-rule-list", ruleSelector = "univer-rule-selector", select = "univer-select", selectSelector = "univer-select-selector", selectSelectionItem = "univer-select-selection-item", selectSelectionSearchInput = "univer-select-selection-search-input", btnList$1 = "univer-btn-list", gap = "univer-gap", icon$1 = "univer-icon", disabled = "univer-disabled", ruleItem = "univer-rule-item", ruleDescribe = "univer-rule-describe", ruleType = "univer-rule-type", ruleRange = "univer-rule-range", active = "univer-active", draggableHandle = "univer-draggableHandle", deleteItem = "univer-delete-item", gridLayoutWrap = "univer-grid-layout-wrap", reactGridItem = "univer-react-grid-item", styles$3 = {
   cfRuleList,
@@ -4785,7 +4685,7 @@ const RuleList = /* @__PURE__ */ __name((props) => {
         commandList2.includes(id) && params.unitId === unitId2 && commandSubscribe.next(null);
       });
       return () => disposable.dispose();
-    }).pipe(debounceTime$1(16)).subscribe(() => {
+    }).pipe(debounceTime(16)).subscribe(() => {
       ruleListSet(getRuleList);
     });
     return () => {
@@ -4798,8 +4698,8 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     return () => dispose.unsubscribe();
   }, [conditionalFormattingRuleModel]), useEffect(() => {
     const getWidth = /* @__PURE__ */ __name(() => {
-      var _a13;
-      const width2 = Math.max(0, (((_a13 = layoutContainerRef.current) == null ? void 0 : _a13.getBoundingClientRect().width) || 0) - 8);
+      var _a14;
+      const width2 = Math.max(0, (((_a14 = layoutContainerRef.current) == null ? void 0 : _a14.getBoundingClientRect().width) || 0) - 8);
       return defaultWidth = width2, width2;
     }, "getWidth"), subscription = new Observable((subscribe) => {
       const targetElement = document.querySelector(".univer-sidebar");
@@ -4816,7 +4716,7 @@ const RuleList = /* @__PURE__ */ __name((props) => {
           clearTime(), targetElement.removeEventListener("transitionend", handle);
         };
       }
-    }).pipe(debounceTime$1(16)).subscribe(() => {
+    }).pipe(debounceTime(16)).subscribe(() => {
       layoutWidthSet(getWidth());
     });
     return () => {
@@ -4824,17 +4724,17 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     };
   }, []);
   const handleDelete = /* @__PURE__ */ __name((rule) => {
-    var _a13;
-    const unitId2 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId2 = (_a13 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a13.getSheetId();
+    var _a14;
+    const unitId2 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId2 = (_a14 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a14.getSheetId();
     if (!unitId2 || !subUnitId2)
       throw new Error("No active sheet found");
     commandService.executeCommand(DeleteCfCommand.id, { unitId: unitId2, subUnitId: subUnitId2, cfId: rule.cfId });
   }, "handleDelete"), handleDragStart = /* @__PURE__ */ __name((_layout, from) => {
     draggingIdSet(from.y);
   }, "handleDragStart"), handleDragStop = /* @__PURE__ */ __name((_layout, from, to) => {
-    var _a13;
+    var _a14;
     draggingIdSet(-1);
-    const unitId2 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId2 = (_a13 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a13.getSheetId();
+    const unitId2 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId2 = (_a14 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a14.getSheetId();
     if (!unitId2 || !subUnitId2)
       throw new Error("No active sheet found");
     const getSaveIndex = /* @__PURE__ */ __name((index2) => {
@@ -4996,8 +4896,8 @@ const RuleList = /* @__PURE__ */ __name((props) => {
   width100,
   stress
 }, createOptionItem$2 = /* @__PURE__ */ __name((text2, localeService) => ({ label: localeService.t(`sheet.cf.valueType.${text2}`), value: text2 }), "createOptionItem$2"), TextInput$1 = /* @__PURE__ */ __name((props) => {
-  var _a13;
-  const { type: type2, className, onChange, id, value } = props, univerInstanceService = useDependency(IUniverInstanceService), unitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a13 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a13.getSheetId(), formulaInitValue = useMemo(() => String(value).startsWith("=") ? String(value) : "=", [value]), config = useMemo(() => [CFValueType.max, CFValueType.min, "none"].includes(type2) ? { disabled: !0 } : [CFValueType.percent, CFValueType.percentile].includes(type2) ? {
+  var _a14;
+  const { type: type2, className, onChange, id, value } = props, univerInstanceService = useDependency(IUniverInstanceService), unitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a14 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a14.getSheetId(), formulaInitValue = useMemo(() => String(value).startsWith("=") ? String(value) : "=", [value]), config = useMemo(() => [CFValueType.max, CFValueType.min, "none"].includes(type2) ? { disabled: !0 } : [CFValueType.percent, CFValueType.percentile].includes(type2) ? {
     min: 0,
     max: 100
   } : {
@@ -5020,48 +4920,48 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     }
   ) : /* @__PURE__ */ jsxRuntimeExports.jsx(InputNumber, { className, value: Number(props.value) || 0, onChange: /* @__PURE__ */ __name((v) => props.onChange(v || 0), "onChange"), ...config });
 }, "TextInput$1"), ColorScaleStyleEditor = /* @__PURE__ */ __name((props) => {
-  var _a13;
-  const { interceptorManager } = props, localeService = useDependency(LocaleService), rule = ((_a13 = props.rule) == null ? void 0 : _a13.type) === CFRuleType.colorScale ? props.rule : void 0, commonOptions = [createOptionItem$2(CFValueType.num, localeService), createOptionItem$2(CFValueType.percent, localeService), createOptionItem$2(CFValueType.percentile, localeService), createOptionItem$2(CFValueType.formula, localeService)], minOptions = [createOptionItem$2(CFValueType.min, localeService), ...commonOptions], medianOptions = [createOptionItem$2("none", localeService), ...commonOptions], maxOptions = [createOptionItem$2(CFValueType.max, localeService), ...commonOptions], [minType, minTypeSet] = useState(() => {
-    var _a14;
+  var _a14;
+  const { interceptorManager } = props, localeService = useDependency(LocaleService), rule = ((_a14 = props.rule) == null ? void 0 : _a14.type) === CFRuleType.colorScale ? props.rule : void 0, commonOptions = [createOptionItem$2(CFValueType.num, localeService), createOptionItem$2(CFValueType.percent, localeService), createOptionItem$2(CFValueType.percentile, localeService), createOptionItem$2(CFValueType.formula, localeService)], minOptions = [createOptionItem$2(CFValueType.min, localeService), ...commonOptions], medianOptions = [createOptionItem$2("none", localeService), ...commonOptions], maxOptions = [createOptionItem$2(CFValueType.max, localeService), ...commonOptions], [minType, minTypeSet] = useState(() => {
+    var _a15;
     const defaultV = CFValueType.min;
-    return rule && ((_a14 = rule.config[0]) == null ? void 0 : _a14.value.type) || defaultV;
+    return rule && ((_a15 = rule.config[0]) == null ? void 0 : _a15.value.type) || defaultV;
   }), [medianType, medianTypeSet] = useState(() => {
-    var _a14;
+    var _a15;
     const defaultV = "none";
-    return !rule || rule.config.length !== 3 ? defaultV : ((_a14 = rule.config[1]) == null ? void 0 : _a14.value.type) || defaultV;
+    return !rule || rule.config.length !== 3 ? defaultV : ((_a15 = rule.config[1]) == null ? void 0 : _a15.value.type) || defaultV;
   }), [maxType, maxTypeSet] = useState(() => {
-    var _a14;
+    var _a15;
     const defaultV = CFValueType.max;
-    return rule && ((_a14 = rule.config[rule.config.length - 1]) == null ? void 0 : _a14.value.type) || defaultV;
+    return rule && ((_a15 = rule.config[rule.config.length - 1]) == null ? void 0 : _a15.value.type) || defaultV;
   }), [minValue, minValueSet] = useState(() => {
     if (!rule)
       return 10;
     const valueConfig = rule.config[0];
     return (valueConfig == null ? void 0 : valueConfig.value.value) === void 0 ? 10 : valueConfig == null ? void 0 : valueConfig.value.value;
   }), [medianValue, medianValueSet] = useState(() => {
-    var _a14;
+    var _a15;
     if (!rule || rule.config.length !== 3)
       return 50;
-    const v = (_a14 = rule.config[1]) == null ? void 0 : _a14.value.value;
+    const v = (_a15 = rule.config[1]) == null ? void 0 : _a15.value.value;
     return v === void 0 ? 50 : v;
   }), [maxValue, maxValueSet] = useState(() => {
-    var _a14;
+    var _a15;
     if (!rule)
       return 90;
-    const v = (_a14 = rule.config[rule.config.length - 1]) == null ? void 0 : _a14.value.value;
+    const v = (_a15 = rule.config[rule.config.length - 1]) == null ? void 0 : _a15.value.value;
     return v === void 0 ? 90 : v;
   }), [minColor, minColorSet] = useState(() => {
-    var _a14;
+    var _a15;
     const defaultV = "#d0d9fb";
-    return rule && ((_a14 = rule.config[0]) == null ? void 0 : _a14.color) || defaultV;
+    return rule && ((_a15 = rule.config[0]) == null ? void 0 : _a15.color) || defaultV;
   }), [medianColor, medianColorSet] = useState(() => {
-    var _a14;
+    var _a15;
     const defaultV = "#7790f3";
-    return !rule || rule.config.length !== 3 ? defaultV : ((_a14 = rule.config[1]) == null ? void 0 : _a14.color) || defaultV;
+    return !rule || rule.config.length !== 3 ? defaultV : ((_a15 = rule.config[1]) == null ? void 0 : _a15.color) || defaultV;
   }), [maxColor, maxColorSet] = useState(() => {
-    var _a14;
+    var _a15;
     const defaultV = "#2e55ef";
-    return rule && ((_a14 = rule.config[rule.config.length - 1]) == null ? void 0 : _a14.color) || defaultV;
+    return rule && ((_a15 = rule.config[rule.config.length - 1]) == null ? void 0 : _a15.color) || defaultV;
   }), getResult = useMemo(() => (option) => {
     const {
       minType: minType2,
@@ -5200,8 +5100,8 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     ] })
   ] });
 }, "ColorScaleStyleEditor"), createOptionItem$1 = /* @__PURE__ */ __name((text2, localeService) => ({ label: localeService.t(`sheet.cf.valueType.${text2}`), value: text2 }), "createOptionItem$1"), InputText = /* @__PURE__ */ __name((props) => {
-  var _a13;
-  const { onChange, className, value, type: type2, id, disabled: disabled2 = !1 } = props, univerInstanceService = useDependency(IUniverInstanceService), unitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a13 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a13.getSheetId(), _value = useRef(value), config = useMemo(() => [CFValueType.percentile, CFValueType.percent].includes(type2) ? {
+  var _a14;
+  const { onChange, className, value, type: type2, id, disabled: disabled2 = !1 } = props, univerInstanceService = useDependency(IUniverInstanceService), unitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a14 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a14.getSheetId(), _value = useRef(value), config = useMemo(() => [CFValueType.percentile, CFValueType.percent].includes(type2) ? {
     max: 100,
     min: 0
   } : {
@@ -5239,36 +5139,36 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     }
   );
 }, "InputText"), DataBarStyleEditor = /* @__PURE__ */ __name((props) => {
-  var _a13;
-  const { interceptorManager } = props, localeService = useDependency(LocaleService), rule = ((_a13 = props.rule) == null ? void 0 : _a13.type) === CFRuleType.dataBar ? props.rule : void 0, [isGradient, isGradientSet] = useState(() => {
-    var _a14;
+  var _a14;
+  const { interceptorManager } = props, localeService = useDependency(LocaleService), rule = ((_a14 = props.rule) == null ? void 0 : _a14.type) === CFRuleType.dataBar ? props.rule : void 0, [isGradient, isGradientSet] = useState(() => {
+    var _a15;
     const defaultV = "0";
-    return rule ? (_a14 = rule.config) != null && _a14.isGradient ? "1" : "0" : defaultV;
+    return rule ? (_a15 = rule.config) != null && _a15.isGradient ? "1" : "0" : defaultV;
   }), [positiveColor, positiveColorSet] = useState(() => {
-    var _a14;
-    return rule ? ((_a14 = rule.config) == null ? void 0 : _a14.positiveColor) || defaultDataBarPositiveColor : defaultDataBarPositiveColor;
+    var _a15;
+    return rule ? ((_a15 = rule.config) == null ? void 0 : _a15.positiveColor) || defaultDataBarPositiveColor : defaultDataBarPositiveColor;
   }), [nativeColor, nativeColorSet] = useState(() => {
-    var _a14;
-    return rule ? ((_a14 = rule.config) == null ? void 0 : _a14.nativeColor) || defaultDataBarNativeColor : defaultDataBarNativeColor;
+    var _a15;
+    return rule ? ((_a15 = rule.config) == null ? void 0 : _a15.nativeColor) || defaultDataBarNativeColor : defaultDataBarNativeColor;
   }), commonOptions = [createOptionItem$1(CFValueType.num, localeService), createOptionItem$1(CFValueType.percent, localeService), createOptionItem$1(CFValueType.percentile, localeService), createOptionItem$1(CFValueType.formula, localeService)], minOptions = [createOptionItem$1(CFValueType.min, localeService), ...commonOptions], maxOptions = [createOptionItem$1(CFValueType.max, localeService), ...commonOptions], [minValueType, minValueTypeSet] = useState(() => {
-    var _a14;
+    var _a15;
     const defaultV = minOptions[0].value;
-    return rule && ((_a14 = rule.config) == null ? void 0 : _a14.min.type) || defaultV;
+    return rule && ((_a15 = rule.config) == null ? void 0 : _a15.min.type) || defaultV;
   }), [maxValueType, maxValueTypeSet] = useState(() => {
-    var _a14;
+    var _a15;
     const defaultV = maxOptions[0].value;
-    return rule && ((_a14 = rule.config) == null ? void 0 : _a14.max.type) || defaultV;
+    return rule && ((_a15 = rule.config) == null ? void 0 : _a15.max.type) || defaultV;
   }), [minValue, minValueSet] = useState(() => {
-    var _a14;
+    var _a15;
     if (!rule)
       return 0;
-    const value = ((_a14 = rule.config) == null ? void 0 : _a14.min) || {};
+    const value = ((_a15 = rule.config) == null ? void 0 : _a15.min) || {};
     return value.type === CFValueType.formula ? value.value || "=" : value.value || 0;
   }), [maxValue, maxValueSet] = useState(() => {
-    var _a14;
+    var _a15;
     if (!rule)
       return 100;
-    const value = ((_a14 = rule.config) == null ? void 0 : _a14.max) || {};
+    const value = ((_a15 = rule.config) == null ? void 0 : _a15.max) || {};
     return value.type === CFValueType.formula ? value.value || "=" : value.value === void 0 ? 100 : value.value;
   }), [isShowValue, isShowValueSet] = useState(() => rule ? rule.isShowValue === void 0 ? !0 : !!rule.isShowValue : !0), getResult = /* @__PURE__ */ __name((option) => ({ config: {
     min: { type: option.minValueType, value: option.minValue },
@@ -5424,13 +5324,13 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     if (style != null && style.st)
       return style.st.s;
   }), [fontColor, fontColorSet] = useState(() => {
-    var _a13;
+    var _a14;
     const defaultV = "#2f56ef";
-    return (_a13 = style == null ? void 0 : style.cl) != null && _a13.rgb ? style.cl.rgb : defaultV;
+    return (_a14 = style == null ? void 0 : style.cl) != null && _a14.rgb ? style.cl.rgb : defaultV;
   }), [bgColor, bgColorSet] = useState(() => {
-    var _a13;
+    var _a14;
     const defaultV = "#e8ecfc";
-    return (_a13 = style == null ? void 0 : style.bg) != null && _a13.rgb ? style.bg.rgb : defaultV;
+    return (_a14 = style == null ? void 0 : style.bg) != null && _a14.rgb ? style.bg.rgb : defaultV;
   }), BoldSingleIcon = componentManager.get("BoldSingle"), ItalicSingleIcon = componentManager.get("ItalicSingle"), UnderlineSingleIcon = componentManager.get("UnderlineSingle"), StrikethroughSingle = componentManager.get("StrikethroughSingle");
   return useEffect(() => {
     const resultStyle = {
@@ -5447,8 +5347,8 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, { color: bgColor, onChange: bgColorSet, iconId: "PaintBucket" })
   ] });
 }, "ConditionalStyleEditor"), RankStyleEditor = /* @__PURE__ */ __name((props) => {
-  var _a13;
-  const { onChange, interceptorManager } = props, localeService = useDependency(LocaleService), rule = ((_a13 = props.rule) == null ? void 0 : _a13.type) === CFRuleType.highlightCell ? props.rule : void 0, options = [
+  var _a14;
+  const { onChange, interceptorManager } = props, localeService = useDependency(LocaleService), rule = ((_a14 = props.rule) == null ? void 0 : _a14.type) === CFRuleType.highlightCell ? props.rule : void 0, options = [
     { label: localeService.t("sheet.cf.panel.isNotBottom"), value: "isNotBottom" },
     { label: localeService.t("sheet.cf.panel.isBottom"), value: "isBottom" },
     { label: localeService.t("sheet.cf.panel.greaterThanAverage"), value: "greaterThanAverage" },
@@ -5719,8 +5619,8 @@ const RuleList = /* @__PURE__ */ __name((props) => {
       ];
   }
 }, "getOperatorOptions"), HighlightCellStyleEditor = /* @__PURE__ */ __name((props) => {
-  var _a13;
-  const { interceptorManager, onChange } = props, localeService = useDependency(LocaleService), rule = ((_a13 = props.rule) == null ? void 0 : _a13.type) === CFRuleType.highlightCell ? props.rule : void 0, [subType, subTypeSet] = useState(() => {
+  var _a14;
+  const { interceptorManager, onChange } = props, localeService = useDependency(LocaleService), rule = ((_a14 = props.rule) == null ? void 0 : _a14.type) === CFRuleType.highlightCell ? props.rule : void 0, [subType, subTypeSet] = useState(() => {
     const defaultV = CFSubRuleType.text;
     return rule && rule.subType || defaultV;
   }), typeOptions = [
@@ -5748,11 +5648,11 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     const defaultV = operatorOptions ? operatorOptions[0].value : void 0;
     return rule && rule.operator || defaultV;
   }), [value, valueSet] = useState(() => {
-    var _a14;
+    var _a15;
     const defaultV = "";
-    return rule ? (_a14 = rule.value) != null ? _a14 : createDefaultValue(rule.subType, rule.operator) : defaultV;
+    return rule ? (_a15 = rule.value) != null ? _a15 : createDefaultValue(rule.subType, rule.operator) : defaultV;
   }), [style, styleSet] = useState({}), getResult = useMemo(() => (option) => {
-    var _a14, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+    var _a15, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
     switch (option.subType || subType) {
       case CFSubRuleType.text: {
         if ([
@@ -5765,7 +5665,7 @@ const RuleList = /* @__PURE__ */ __name((props) => {
         ].includes(operator))
           return {
             type: CFRuleType.highlightCell,
-            subType: (_a14 = option.subType) != null ? _a14 : subType,
+            subType: (_a15 = option.subType) != null ? _a15 : subType,
             operator: (_b = option.operator) != null ? _b : operator,
             style: (_c = option.style) != null ? _c : style,
             value: (_d = option.value) != null ? _d : value
@@ -5840,8 +5740,8 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     )
   ] });
 }, "HighlightCellStyleEditor"), FormulaStyleEditor = /* @__PURE__ */ __name((props) => {
-  var _a13;
-  const { onChange, interceptorManager } = props, localeService = useDependency(LocaleService), workbook = useDependency(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET), worksheet = workbook.getActiveSheet(), rule = ((_a13 = props.rule) == null ? void 0 : _a13.type) === CFRuleType.highlightCell ? props.rule : void 0, [style, styleSet] = useState({}), [formula, formulaSet] = useState(() => (rule == null ? void 0 : rule.subType) === CFSubRuleType.formula ? rule.value : "="), [formulaError, formulaErrorSet] = useState(""), getResult = /* @__PURE__ */ __name((config) => ({
+  var _a14;
+  const { onChange, interceptorManager } = props, localeService = useDependency(LocaleService), workbook = useDependency(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET), worksheet = workbook.getActiveSheet(), rule = ((_a14 = props.rule) == null ? void 0 : _a14.type) === CFRuleType.highlightCell ? props.rule : void 0, [style, styleSet] = useState({}), [formula, formulaSet] = useState(() => (rule == null ? void 0 : rule.subType) === CFSubRuleType.formula ? rule.value : "="), [formulaError, formulaErrorSet] = useState(""), getResult = /* @__PURE__ */ __name((config) => ({
     style: config.style,
     value: formula,
     type: CFRuleType.highlightCell,
@@ -6449,8 +6349,8 @@ function get(object, path, defaultValue) {
 __name(get, "get");
 var lodash_get = get;
 const get$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_get), getIcon = /* @__PURE__ */ __name((iconType, iconId) => (iconMap[iconType] || [])[Number(iconId)] || "", "getIcon"), TextInput = /* @__PURE__ */ __name((props) => {
-  var _a13;
-  const univerInstanceService = useDependency(IUniverInstanceService), unitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a13 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a13.getSheetId(), className = useMemo(() => props.error ? styles$1.errorInput : "", [props.error]);
+  var _a14;
+  const univerInstanceService = useDependency(IUniverInstanceService), unitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a14 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a14.getSheetId(), className = useMemo(() => props.error ? styles$1.errorInput : "", [props.error]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.positionRelative, children: props.type !== CFValueType.formula ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(InputNumber, { className, value: Number(props.value) || 0, onChange: /* @__PURE__ */ __name((v) => props.onChange(v != null ? v : 0), "onChange") }),
     props.error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.errorText, children: props.error })
@@ -6583,8 +6483,8 @@ const get$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_get), getIcon = /*
     ] }, index2);
   }), [configList, errorMap]);
 }, "IconSetRuleEdit"), IconSet = /* @__PURE__ */ __name((props) => {
-  var _a13;
-  const { interceptorManager } = props, rule = ((_a13 = props.rule) == null ? void 0 : _a13.type) === CFRuleType.iconSet ? props.rule : void 0, localeService = useDependency(LocaleService), [errorMap, errorMapSet] = useState({}), [currentIconType, currentIconTypeSet] = useState(() => {
+  var _a14;
+  const { interceptorManager } = props, rule = ((_a14 = props.rule) == null ? void 0 : _a14.type) === CFRuleType.iconSet ? props.rule : void 0, localeService = useDependency(LocaleService), [errorMap, errorMapSet] = useState({}), [currentIconType, currentIconTypeSet] = useState(() => {
     const defaultV = Object.keys(iconMap)[0];
     if (rule && rule.config.length) {
       const type2 = rule.config[0].iconType;
@@ -6675,13 +6575,13 @@ const get$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_get), getIcon = /*
     /* @__PURE__ */ jsxRuntimeExports.jsx(IconSetRuleEdit, { errorMap, onChange: handleChange, configList })
   ] });
 }, "IconSet"), getUnitId = /* @__PURE__ */ __name((univerInstanceService) => univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), "getUnitId"), getSubUnitId = /* @__PURE__ */ __name((univerInstanceService) => {
-  var _a13;
-  return (_a13 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a13.getSheetId();
+  var _a14;
+  return (_a14 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a14.getSheetId();
 }, "getSubUnitId"), RuleEdit = /* @__PURE__ */ __name((props) => {
-  var _a13, _b, _c;
-  const localeService = useDependency(LocaleService), commandService = useDependency(ICommandService), univerInstanceService = useDependency(IUniverInstanceService), conditionalFormattingRuleModel = useDependency(ConditionalFormattingRuleModel), selectionManagerService = useDependency(SheetsSelectionsService), unitId = getUnitId(univerInstanceService), subUnitId = getSubUnitId(univerInstanceService), rangeResult = useRef((_b = (_a13 = props.rule) == null ? void 0 : _a13.ranges) != null ? _b : []), rangeString = useMemo(() => {
-    var _a14, _b2, _c2;
-    let ranges = (_a14 = props.rule) == null ? void 0 : _a14.ranges;
+  var _a14, _b, _c;
+  const localeService = useDependency(LocaleService), commandService = useDependency(ICommandService), univerInstanceService = useDependency(IUniverInstanceService), conditionalFormattingRuleModel = useDependency(ConditionalFormattingRuleModel), selectionManagerService = useDependency(SheetsSelectionsService), unitId = getUnitId(univerInstanceService), subUnitId = getSubUnitId(univerInstanceService), rangeResult = useRef((_b = (_a14 = props.rule) == null ? void 0 : _a14.ranges) != null ? _b : []), rangeString = useMemo(() => {
+    var _a15, _b2, _c2;
+    let ranges = (_a15 = props.rule) == null ? void 0 : _a15.ranges;
     return ranges != null && ranges.length || (ranges = (_c2 = (_b2 = selectionManagerService.getCurrentSelections()) == null ? void 0 : _b2.map((s) => s.range)) != null ? _c2 : []), rangeResult.current = ranges, ranges != null && ranges.length ? ranges.map((range) => {
       const v = serializeRange(range);
       return v === "NaN" ? "" : v;
@@ -6694,8 +6594,8 @@ const get$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_get), getIcon = /*
     { label: localeService.t("sheet.cf.ruleType.formula"), value: "5" },
     { label: localeService.t("sheet.cf.ruleType.iconSet"), value: "6" }
   ], [ruleType2, ruleTypeSet] = useState(() => {
-    var _a14, _b2;
-    const type2 = (_a14 = props.rule) == null ? void 0 : _a14.rule.type, defaultType = options[0].value;
+    var _a15, _b2;
+    const type2 = (_a15 = props.rule) == null ? void 0 : _a15.rule.type, defaultType = options[0].value;
     if (!type2)
       return defaultType;
     switch (type2) {
@@ -6807,21 +6707,21 @@ const get$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_get), getIcon = /*
   }, "handleRuleClick");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.conditionalFormattingWrap, children: isShowRuleEditor ? /* @__PURE__ */ jsxRuntimeExports.jsx(RuleEdit, { onCancel: handleCancel, rule: currentEditRule }) : /* @__PURE__ */ jsxRuntimeExports.jsx(RuleList, { onClick: handleRuleClick, onCreate: createCfRule }) });
 }, "ConditionFormattingPanel");
-var __defProp$9 = Object.defineProperty, __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor, __decorateClass$9 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$a = Object.defineProperty, __getOwnPropDesc$a = Object.getOwnPropertyDescriptor, __decorateClass$a = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$9(target, key, result), result;
-}, "__decorateClass$9"), __decorateParam$9 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$9");
-const DefaultSheetConditionalFormattingUiConfig = {}, CF_PANEL_KEY = "sheet.conditional.formatting.panel";
+  return kind && result && __defProp$a(target, key, result), result;
+}, "__decorateClass$a"), __decorateParam$a = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$a");
+const CF_PANEL_KEY = "sheet.conditional.formatting.panel";
 var _a3;
-let ConditionalFormattingMenuController = (_a3 = class extends Disposable {
-  constructor(_config, _univerInstanceService, _injector, _componentManager, _menuService, _sidebarService, _localeService) {
+let ConditionalFormattingPanelController = (_a3 = class extends Disposable {
+  constructor(_univerInstanceService, _injector, _componentManager, _sidebarService, _localeService) {
     super();
     __publicField(this, "_sidebarDisposable", null);
-    this._config = _config, this._univerInstanceService = _univerInstanceService, this._injector = _injector, this._componentManager = _componentManager, this._menuService = _menuService, this._sidebarService = _sidebarService, this._localeService = _localeService, this._initMenu(), this._initPanel(), this.disposeWithMe(
+    this._univerInstanceService = _univerInstanceService, this._injector = _injector, this._componentManager = _componentManager, this._sidebarService = _sidebarService, this._localeService = _localeService, this._initPanel(), this.disposeWithMe(
       this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).subscribe((sheet) => {
-        var _a13;
-        sheet || (_a13 = this._sidebarDisposable) == null || _a13.dispose();
+        var _a14;
+        sheet || (_a14 = this._sidebarDisposable) == null || _a14.dispose();
       })
     );
   }
@@ -6831,36 +6731,31 @@ let ConditionalFormattingMenuController = (_a3 = class extends Disposable {
       children: {
         label: CF_PANEL_KEY,
         rule,
-        key: Tools.generateRandomId(4)
+        key: generateRandomId(4)
       },
       onClose: /* @__PURE__ */ __name(() => this._sidebarDisposable = null, "onClose")
     };
     this._sidebarDisposable = this._sidebarService.open(props);
   }
-  _initMenu() {
-    const { menu = {} } = this._config;
-    this._menuService.addMenuItem(FactoryManageConditionalFormattingRule(this._injector), menu);
-  }
   _initPanel() {
     this._componentManager.register(CF_PANEL_KEY, ConditionFormattingPanel);
   }
-}, __name(_a3, "ConditionalFormattingMenuController"), _a3);
-ConditionalFormattingMenuController = __decorateClass$9([
-  OnLifecycle(LifecycleStages.Ready, ConditionalFormattingMenuController),
-  __decorateParam$9(1, IUniverInstanceService),
-  __decorateParam$9(2, Inject(Injector)),
-  __decorateParam$9(3, Inject(ComponentManager)),
-  __decorateParam$9(4, Inject(IMenuService)),
-  __decorateParam$9(5, Inject(ISidebarService)),
-  __decorateParam$9(6, Inject(LocaleService))
-], ConditionalFormattingMenuController);
+}, __name(_a3, "ConditionalFormattingPanelController"), _a3);
+ConditionalFormattingPanelController = __decorateClass$a([
+  OnLifecycle(LifecycleStages.Ready, ConditionalFormattingPanelController),
+  __decorateParam$a(0, IUniverInstanceService),
+  __decorateParam$a(1, Inject(Injector)),
+  __decorateParam$a(2, Inject(ComponentManager)),
+  __decorateParam$a(3, Inject(ISidebarService)),
+  __decorateParam$a(4, Inject(LocaleService))
+], ConditionalFormattingPanelController);
 var CF_MENU_OPERATION = /* @__PURE__ */ ((CF_MENU_OPERATION2) => (CF_MENU_OPERATION2[CF_MENU_OPERATION2.createRule = 1] = "createRule", CF_MENU_OPERATION2[CF_MENU_OPERATION2.viewRule = 2] = "viewRule", CF_MENU_OPERATION2[CF_MENU_OPERATION2.highlightCell = 3] = "highlightCell", CF_MENU_OPERATION2[CF_MENU_OPERATION2.rank = 4] = "rank", CF_MENU_OPERATION2[CF_MENU_OPERATION2.formula = 5] = "formula", CF_MENU_OPERATION2[CF_MENU_OPERATION2.colorScale = 6] = "colorScale", CF_MENU_OPERATION2[CF_MENU_OPERATION2.dataBar = 7] = "dataBar", CF_MENU_OPERATION2[CF_MENU_OPERATION2.icon = 8] = "icon", CF_MENU_OPERATION2[CF_MENU_OPERATION2.clearRangeRules = 9] = "clearRangeRules", CF_MENU_OPERATION2[CF_MENU_OPERATION2.clearWorkSheetRules = 10] = "clearWorkSheetRules", CF_MENU_OPERATION2))(CF_MENU_OPERATION || {});
 const OpenConditionalFormattingOperator = {
   id: "sheet.operation.open.conditional.formatting.panel",
   type: CommandType.OPERATION,
   handler: /* @__PURE__ */ __name((accessor, params) => {
-    var _a13;
-    const conditionalFormattingMenuController = accessor.get(ConditionalFormattingMenuController), selectionManagerService = accessor.get(SheetsSelectionsService), commandService = accessor.get(ICommandService), ranges = ((_a13 = selectionManagerService.getCurrentSelections()) == null ? void 0 : _a13.map((s) => s.range)) || [];
+    var _a14;
+    const conditionalFormattingMenuController = accessor.get(ConditionalFormattingPanelController), selectionManagerService = accessor.get(SheetsSelectionsService), commandService = accessor.get(ICommandService), ranges = ((_a14 = selectionManagerService.getCurrentSelections()) == null ? void 0 : _a14.map((s) => s.range)) || [];
     switch (params.value) {
       case 3: {
         conditionalFormattingMenuController.openPanel({ ...createDefaultRule(), ranges });
@@ -6948,37 +6843,45 @@ const OpenConditionalFormattingOperator = {
     return !0;
   }, "handler")
 };
-var __defProp$8 = Object.defineProperty, __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor, __decorateClass$8 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$9 = Object.defineProperty, __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor, __decorateClass$9 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$8(target, key, result), result;
-}, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$8"), _a4;
+  return kind && result && __defProp$9(target, key, result), result;
+}, "__decorateClass$9"), __decorateParam$9 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$9"), _a4;
 let SheetsCfRenderController = (_a4 = class extends Disposable {
   constructor(_sheetInterceptorService, _conditionalFormattingService, _univerInstanceService, _renderManagerService, _conditionalFormattingViewModel, _conditionalFormattingRuleModel) {
-    super(), this._sheetInterceptorService = _sheetInterceptorService, this._conditionalFormattingService = _conditionalFormattingService, this._univerInstanceService = _univerInstanceService, this._renderManagerService = _renderManagerService, this._conditionalFormattingViewModel = _conditionalFormattingViewModel, this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel, this._initViewModelInterceptor(), this._initSkeleton(), this._initVmEffectByRule();
+    super();
+    /**
+     * When a set operation is triggered multiple times over a short period of time, it may result in some callbacks not being disposed,and caused a render cache exception.
+     * The solution here is to store all the asynchronous tasks and focus on processing after the last callback
+     */
+    __publicField(this, "_ruleChangeCacheMap", /* @__PURE__ */ new Map());
+    this._sheetInterceptorService = _sheetInterceptorService, this._conditionalFormattingService = _conditionalFormattingService, this._univerInstanceService = _univerInstanceService, this._renderManagerService = _renderManagerService, this._conditionalFormattingViewModel = _conditionalFormattingViewModel, this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel, this._initViewModelInterceptor(), this._initViewModel(), this._initSkeleton(), this._initVmEffectByRule(), this.disposeWithMe(() => {
+      this._ruleChangeCacheMap.clear();
+    });
+  }
+  markDirtySkeleton() {
+    var _a14, _b, _c;
+    const unitId = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId();
+    (_a14 = this._renderManagerService.getRenderById(unitId)) == null || _a14.with(SheetSkeletonManagerService).reCalculate(), (_c = (_b = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _b.mainComponent) == null || _c.makeDirty();
   }
   _initSkeleton() {
-    const markDirtySkeleton = /* @__PURE__ */ __name(() => {
-      var _a13, _b, _c;
-      const unitId = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId();
-      (_a13 = this._renderManagerService.getRenderById(unitId)) == null || _a13.with(SheetSkeletonManagerService).reCalculate(), (_c = (_b = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _b.mainComponent) == null || _c.makeDirty();
-    }, "markDirtySkeleton");
     this.disposeWithMe(this._conditionalFormattingViewModel.markDirty$.pipe(bufferTime(16), filter((v) => {
       const workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
       if (!workbook) return !1;
       const worksheet = workbook.getActiveSheet();
       return worksheet ? v.filter((item2) => item2.unitId === workbook.getUnitId() && item2.subUnitId === worksheet.getSheetId()).length > 0 : !1;
-    })).subscribe(markDirtySkeleton)), this.disposeWithMe(this._conditionalFormattingRuleModel.$ruleChange.pipe(bufferTime(16), filter((v) => {
+    })).subscribe(() => this.markDirtySkeleton())), this.disposeWithMe(this._conditionalFormattingRuleModel.$ruleChange.pipe(bufferTime(16), filter((v) => {
       const workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
       if (!workbook) return !1;
       const worksheet = workbook.getActiveSheet();
       return worksheet ? v.filter((item2) => ["sort", "delete"].includes(item2.type) && item2.unitId === workbook.getUnitId() && item2.subUnitId === worksheet.getSheetId()).length > 0 : !1;
-    })).subscribe(markDirtySkeleton)), this.disposeWithMe(this._conditionalFormattingService.ruleComputeStatus$.pipe(bufferTime(16), filter((v) => {
+    })).subscribe(() => this.markDirtySkeleton())), this.disposeWithMe(this._conditionalFormattingService.ruleComputeStatus$.pipe(bufferTime(16), filter((v) => {
       const workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
       if (!workbook) return !1;
       const worksheet = workbook.getActiveSheet();
       return worksheet ? v.filter((item2) => item2.unitId === workbook.getUnitId() && item2.subUnitId === worksheet.getSheetId()).length > 0 : !1;
-    })).subscribe(markDirtySkeleton));
+    })).subscribe(() => this.markDirtySkeleton()));
   }
   _initVmEffectByRule() {
     this.disposeWithMe(
@@ -6986,12 +6889,7 @@ let SheetsCfRenderController = (_a4 = class extends Disposable {
         const { rule, unitId, subUnitId } = config;
         switch (config.type) {
           case "add": {
-            const cfPriorityMap = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId).map((item2) => item2.cfId).reduce((map, cur, index2) => (map.set(cur, index2), map), /* @__PURE__ */ new Map());
-            rule.ranges.forEach((range) => {
-              Range.foreach(range, (row, col) => {
-                this._conditionalFormattingViewModel.pushCellCf(unitId, subUnitId, row, col, rule.cfId), this._conditionalFormattingViewModel.sortCellCf(unitId, subUnitId, row, col, cfPriorityMap);
-              });
-            }), this._conditionalFormattingViewModel.markRuleDirty(unitId, subUnitId, rule);
+            this._handleRuleAdd(unitId, subUnitId, rule);
             return;
           }
           case "delete": {
@@ -7003,28 +6901,7 @@ let SheetsCfRenderController = (_a4 = class extends Disposable {
             return;
           }
           case "set": {
-            const oldRule = config.oldRule, cfPriorityMap = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId).map((item2) => item2.cfId).reduce((map, cur, index2) => (map.set(cur, index2), map), /* @__PURE__ */ new Map()), dispose = this._conditionalFormattingService.interceptorManager.intercept(this._conditionalFormattingService.interceptorManager.getInterceptPoints().beforeUpdateRuleResult, {
-              handler: /* @__PURE__ */ __name((config2, _, next) => {
-                if (unitId === (config2 == null ? void 0 : config2.unitId) && subUnitId === config2.subUnitId && oldRule.cfId === config2.cfId) {
-                  oldRule.ranges.forEach((range) => {
-                    Range.foreach(range, (row, col) => {
-                      this._conditionalFormattingViewModel.deleteCellCf(unitId, subUnitId, row, col, oldRule.cfId);
-                    });
-                  }), rule.ranges.forEach((range) => {
-                    Range.foreach(range, (row, col) => {
-                      this._conditionalFormattingViewModel.pushCellCf(unitId, subUnitId, row, col, oldRule.cfId), this._conditionalFormattingViewModel.sortCellCf(unitId, subUnitId, row, col, cfPriorityMap);
-                    });
-                  }), dispose();
-                  return;
-                }
-                next(config2);
-              }, "handler")
-            });
-            rule.ranges.forEach((range) => {
-              Range.foreach(range, (row, col) => {
-                this._conditionalFormattingViewModel.pushCellCf(unitId, subUnitId, row, col, oldRule.cfId);
-              });
-            }), this._conditionalFormattingViewModel.markRuleDirty(unitId, subUnitId, rule);
+            this._handleRuleChange(unitId, subUnitId, rule, config.oldRule);
             return;
           }
           case "sort": {
@@ -7039,6 +6916,57 @@ let SheetsCfRenderController = (_a4 = class extends Disposable {
       })
     );
   }
+  _initViewModel() {
+    let isNeedMark = !1;
+    this._univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_SHEET).forEach((workbook) => {
+      const unitId = workbook.getUnitId(), subRuleMap = this._conditionalFormattingRuleModel.getUnitRules(unitId);
+      subRuleMap && [...subRuleMap.keys()].forEach((subUnitId) => {
+        subRuleMap.get(subUnitId).forEach((rule) => {
+          this._handleRuleAdd(unitId, subUnitId, rule), isNeedMark = !0;
+        });
+      });
+    }), isNeedMark && this.markDirtySkeleton();
+  }
+  _handleRuleAdd(unitId, subUnitId, rule) {
+    const cfPriorityMap = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId).map((item2) => item2.cfId).reduce((map, cur, index2) => (map.set(cur, index2), map), /* @__PURE__ */ new Map());
+    rule.ranges.forEach((range) => {
+      Range.foreach(range, (row, col) => {
+        this._conditionalFormattingViewModel.pushCellCf(unitId, subUnitId, row, col, rule.cfId), this._conditionalFormattingViewModel.sortCellCf(unitId, subUnitId, row, col, cfPriorityMap);
+      });
+    }), this._conditionalFormattingViewModel.markRuleDirty(unitId, subUnitId, rule);
+  }
+  _handleRuleChange(unitId, subUnitId, rule, oldRule) {
+    const cfPriorityMap = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId).map((item2) => item2.cfId).reduce((map, cur, index2) => (map.set(cur, index2), map), /* @__PURE__ */ new Map()), handleChange = /* @__PURE__ */ __name((oldRule2, newRule) => {
+      oldRule2.ranges.forEach((range) => {
+        Range.foreach(range, (row, col) => {
+          this._conditionalFormattingViewModel.deleteCellCf(unitId, subUnitId, row, col, oldRule2.cfId);
+        });
+      }), newRule.ranges.forEach((range) => {
+        Range.foreach(range, (row, col) => {
+          this._conditionalFormattingViewModel.pushCellCf(unitId, subUnitId, row, col, oldRule2.cfId), this._conditionalFormattingViewModel.sortCellCf(unitId, subUnitId, row, col, cfPriorityMap);
+        });
+      });
+    }, "handleChange"), dispose = this._conditionalFormattingService.interceptorManager.intercept(this._conditionalFormattingService.interceptorManager.getInterceptPoints().beforeUpdateRuleResult, {
+      handler: /* @__PURE__ */ __name((config, _, next) => {
+        if (unitId === (config == null ? void 0 : config.unitId) && subUnitId === config.subUnitId && oldRule.cfId === config.cfId) {
+          (this._ruleChangeCacheMap.get(config.cfId) || []).forEach((config2) => {
+            handleChange(config2.oldRule, config2.rule), config2.dispose();
+          }), this._ruleChangeCacheMap.delete(config.cfId);
+          return;
+        }
+        next(config);
+      }, "handler")
+    });
+    if (oldRule.cfId === rule.cfId) {
+      let list2 = this._ruleChangeCacheMap.get(oldRule.cfId);
+      list2 || (list2 = [], this._ruleChangeCacheMap.set(oldRule.cfId, list2)), list2.push({ oldRule, rule, dispose });
+    }
+    rule.ranges.forEach((range) => {
+      Range.foreach(range, (row, col) => {
+        this._conditionalFormattingViewModel.pushCellCf(unitId, subUnitId, row, col, oldRule.cfId);
+      });
+    }), this._conditionalFormattingViewModel.markRuleDirty(unitId, subUnitId, rule);
+  }
   _initViewModelInterceptor() {
     this.disposeWithMe(this._sheetInterceptorService.intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
       handler: /* @__PURE__ */ __name((cell, context, next) => {
@@ -7052,20 +6980,20 @@ let SheetsCfRenderController = (_a4 = class extends Disposable {
     }));
   }
 }, __name(_a4, "SheetsCfRenderController"), _a4);
-SheetsCfRenderController = __decorateClass$8([
+SheetsCfRenderController = __decorateClass$9([
   OnLifecycle(LifecycleStages.Starting, SheetsCfRenderController),
-  __decorateParam$8(0, Inject(SheetInterceptorService)),
-  __decorateParam$8(1, Inject(ConditionalFormattingService)),
-  __decorateParam$8(2, Inject(IUniverInstanceService)),
-  __decorateParam$8(3, Inject(IRenderManagerService)),
-  __decorateParam$8(4, Inject(ConditionalFormattingViewModel)),
-  __decorateParam$8(5, Inject(ConditionalFormattingRuleModel))
+  __decorateParam$9(0, Inject(SheetInterceptorService)),
+  __decorateParam$9(1, Inject(ConditionalFormattingService)),
+  __decorateParam$9(2, Inject(IUniverInstanceService)),
+  __decorateParam$9(3, Inject(IRenderManagerService)),
+  __decorateParam$9(4, Inject(ConditionalFormattingViewModel)),
+  __decorateParam$9(5, Inject(ConditionalFormattingRuleModel))
 ], SheetsCfRenderController);
-var __defProp$7 = Object.defineProperty, __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor, __decorateClass$7 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$8 = Object.defineProperty, __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor, __decorateClass$8 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$7(target, key, result), result;
-}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$7"), _a5;
+  return kind && result && __defProp$8(target, key, result), result;
+}, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$8"), _a5;
 let ConditionalFormattingCopyPasteController = (_a5 = class extends Disposable {
   constructor(_sheetClipboardService, _conditionalFormattingRuleModel, _injector, _conditionalFormattingViewModel, _univerInstanceService) {
     super();
@@ -7219,19 +7147,19 @@ let ConditionalFormattingCopyPasteController = (_a5 = class extends Disposable {
     };
   }
 }, __name(_a5, "ConditionalFormattingCopyPasteController"), _a5);
-ConditionalFormattingCopyPasteController = __decorateClass$7([
+ConditionalFormattingCopyPasteController = __decorateClass$8([
   OnLifecycle(LifecycleStages.Rendered, ConditionalFormattingCopyPasteController),
-  __decorateParam$7(0, Inject(ISheetClipboardService)),
-  __decorateParam$7(1, Inject(ConditionalFormattingRuleModel)),
-  __decorateParam$7(2, Inject(Injector)),
-  __decorateParam$7(3, Inject(ConditionalFormattingViewModel)),
-  __decorateParam$7(4, Inject(IUniverInstanceService))
+  __decorateParam$8(0, Inject(ISheetClipboardService)),
+  __decorateParam$8(1, Inject(ConditionalFormattingRuleModel)),
+  __decorateParam$8(2, Inject(Injector)),
+  __decorateParam$8(3, Inject(ConditionalFormattingViewModel)),
+  __decorateParam$8(4, Inject(IUniverInstanceService))
 ], ConditionalFormattingCopyPasteController);
-var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor, __decorateClass$6 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$7 = Object.defineProperty, __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor, __decorateClass$7 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$6(target, key, result), result;
-}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$6"), _a6;
+  return kind && result && __defProp$7(target, key, result), result;
+}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$7"), _a6;
 let SheetsCfRefRangeController = (_a6 = class extends Disposable {
   constructor(_conditionalFormattingRuleModel, _univerInstanceService, _injector, _refRangeService) {
     super(), this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel, this._univerInstanceService = _univerInstanceService, this._injector = _injector, this._refRangeService = _refRangeService, this._initRefRange();
@@ -7280,18 +7208,18 @@ let SheetsCfRefRangeController = (_a6 = class extends Disposable {
     }));
   }
 }, __name(_a6, "SheetsCfRefRangeController"), _a6);
-SheetsCfRefRangeController = __decorateClass$6([
+SheetsCfRefRangeController = __decorateClass$7([
   OnLifecycle(LifecycleStages.Rendered, SheetsCfRefRangeController),
-  __decorateParam$6(0, Inject(ConditionalFormattingRuleModel)),
-  __decorateParam$6(1, Inject(IUniverInstanceService)),
-  __decorateParam$6(2, Inject(Injector)),
-  __decorateParam$6(3, Inject(RefRangeService))
+  __decorateParam$7(0, Inject(ConditionalFormattingRuleModel)),
+  __decorateParam$7(1, Inject(IUniverInstanceService)),
+  __decorateParam$7(2, Inject(Injector)),
+  __decorateParam$7(3, Inject(RefRangeService))
 ], SheetsCfRefRangeController);
-var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor, __decorateClass$5 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor, __decorateClass$6 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$5(target, key, result), result;
-}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$5"), _a7;
+  return kind && result && __defProp$6(target, key, result), result;
+}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$6"), _a7;
 let ConditionalFormattingPermissionController = (_a7 = class extends Disposable {
   constructor(_localeService, _commandService, _sheetPermissionInterceptorBaseController) {
     super(), this._localeService = _localeService, this._commandService = _commandService, this._sheetPermissionInterceptorBaseController = _sheetPermissionInterceptorBaseController, this._commandExecutedListener();
@@ -7308,20 +7236,23 @@ let ConditionalFormattingPermissionController = (_a7 = class extends Disposable
     );
   }
 }, __name(_a7, "ConditionalFormattingPermissionController"), _a7);
-ConditionalFormattingPermissionController = __decorateClass$5([
+ConditionalFormattingPermissionController = __decorateClass$6([
   OnLifecycle(LifecycleStages.Rendered, ConditionalFormattingPermissionController),
-  __decorateParam$5(0, Inject(LocaleService)),
-  __decorateParam$5(1, ICommandService),
-  __decorateParam$5(2, Inject(SheetPermissionInterceptorBaseController))
+  __decorateParam$6(0, Inject(LocaleService)),
+  __decorateParam$6(1, ICommandService),
+  __decorateParam$6(2, Inject(SheetPermissionInterceptorBaseController))
 ], ConditionalFormattingPermissionController);
-var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __defNormalProp$1 = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, "__defNormalProp$1"), __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+const PLUGIN_CONFIG_KEY = "sheets-conditional-formatting-ui.config", defaultPluginConfig = {};
+var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor, __defNormalProp$1 = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, "__defNormalProp$1"), __decorateClass$5 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$4(target, key, result), result;
-}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$4"), __publicField$1 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp$1(obj, typeof key != "symbol" ? key + "" : key, value), "__publicField$1"), _a8;
+  return kind && result && __defProp$5(target, key, result), result;
+}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$5"), __publicField$1 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp$1(obj, typeof key != "symbol" ? key + "" : key, value), "__publicField$1"), _a8;
 let UniverSheetsConditionalFormattingMobileUIPlugin = (_a8 = class extends Plugin {
-  constructor(_config = {}, _injector, _commandService) {
-    super(), this._config = _config, this._injector = _injector, this._commandService = _commandService, this._config = Tools.deepMerge({}, DefaultSheetConditionalFormattingUiConfig, this._config), this._initCommand(), this._injector.add([SheetsCfRenderController]), this._injector.add([SheetsCfRefRangeController]), this._injector.add([ConditionalFormattingCopyPasteController]), this._injector.add([ConditionalFormattingPermissionController]), this._injector.add([ConditionalFormattingI18nController]);
+  constructor(_config = defaultPluginConfig, _injector, _commandService, _configService) {
+    super(), this._config = _config, this._injector = _injector, this._commandService = _commandService, this._configService = _configService;
+    const { menu, ...rest } = this._config;
+    menu && this._configService.setConfig("menu", menu, { merge: !0 }), this._configService.setConfig(PLUGIN_CONFIG_KEY, rest), this._initCommand(), this._injector.add([SheetsCfRenderController]), this._injector.add([SheetsCfRefRangeController]), this._injector.add([ConditionalFormattingCopyPasteController]), this._injector.add([ConditionalFormattingPermissionController]), this._injector.add([ConditionalFormattingI18nController]);
   }
   _initCommand() {
     [
@@ -7348,16 +7279,17 @@ let UniverSheetsConditionalFormattingMobileUIPlugin = (_a8 = class extends Plugi
 }, __name(_a8, "UniverSheetsConditionalFormattingMobileUIPlugin"), _a8);
 __publicField$1(UniverSheetsConditionalFormattingMobileUIPlugin, "pluginName", `${SHEET_CONDITIONAL_FORMATTING_PLUGIN}_MOBILE_UI_PLUGIN`);
 __publicField$1(UniverSheetsConditionalFormattingMobileUIPlugin, "type", UniverInstanceType.UNIVER_SHEET);
-UniverSheetsConditionalFormattingMobileUIPlugin = __decorateClass$4([
+UniverSheetsConditionalFormattingMobileUIPlugin = __decorateClass$5([
   DependentOn(UniverSheetsConditionalFormattingPlugin),
-  __decorateParam$4(1, Inject(Injector)),
-  __decorateParam$4(2, Inject(ICommandService))
+  __decorateParam$5(1, Inject(Injector)),
+  __decorateParam$5(2, Inject(ICommandService)),
+  __decorateParam$5(3, IConfigService)
 ], UniverSheetsConditionalFormattingMobileUIPlugin);
-var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$3(target, key, result), result;
-}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$3"), _a9;
+  return kind && result && __defProp$4(target, key, result), result;
+}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$4"), _a9;
 let ConditionalFormattingAutoFillController = (_a9 = class extends Disposable {
   constructor(_injector, _univerInstanceService, _autoFillService, _conditionalFormattingRuleModel, _conditionalFormattingViewModel) {
     super(), this._injector = _injector, this._univerInstanceService = _univerInstanceService, this._autoFillService = _autoFillService, this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel, this._conditionalFormattingViewModel = _conditionalFormattingViewModel, this._initAutoFill();
@@ -7365,8 +7297,8 @@ let ConditionalFormattingAutoFillController = (_a9 = class extends Disposable {
   // eslint-disable-next-line max-lines-per-function
   _initAutoFill() {
     const noopReturnFunc = /* @__PURE__ */ __name(() => ({ redos: [], undos: [] }), "noopReturnFunc"), loopFunc = /* @__PURE__ */ __name((sourceStartCell, targetStartCell, relativeRange, matrixMap, mapFunc) => {
-      var _a13;
-      const unitId = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a13 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a13.getSheetId();
+      var _a14;
+      const unitId = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a14 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a14.getSheetId();
       if (!unitId || !subUnitId)
         return;
       const sourceRange = {
@@ -7437,8 +7369,8 @@ let ConditionalFormattingAutoFillController = (_a9 = class extends Disposable {
         });
       });
     }, "loopFunc"), generalApplyFunc = /* @__PURE__ */ __name((sourceRange, targetRange) => {
-      var _a13, _b, _c;
-      const unitId = (_a13 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a13.getUnitId(), subUnitId = (_c = (_b = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _b.getActiveSheet()) == null ? void 0 : _c.getSheetId(), matrixMap = /* @__PURE__ */ new Map(), redos = [], undos = [];
+      var _a14, _b, _c;
+      const unitId = (_a14 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a14.getUnitId(), subUnitId = (_c = (_b = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _b.getActiveSheet()) == null ? void 0 : _c.getSheetId(), matrixMap = /* @__PURE__ */ new Map(), redos = [], undos = [];
       if (!unitId || !subUnitId)
         return noopReturnFunc();
       const virtualRange = virtualizeDiscreteRanges([sourceRange, targetRange]), [vSourceRange, vTargetRange] = virtualRange.ranges, { mapFunc } = virtualRange, sourceStartCell = {
@@ -7484,20 +7416,149 @@ let ConditionalFormattingAutoFillController = (_a9 = class extends Disposable {
     this.disposeWithMe(this._autoFillService.addHook(hook));
   }
 }, __name(_a9, "ConditionalFormattingAutoFillController"), _a9);
-ConditionalFormattingAutoFillController = __decorateClass$3([
+ConditionalFormattingAutoFillController = __decorateClass$4([
   OnLifecycle(LifecycleStages.Rendered, ConditionalFormattingAutoFillController),
-  __decorateParam$3(0, Inject(Injector)),
-  __decorateParam$3(1, Inject(IUniverInstanceService)),
-  __decorateParam$3(2, Inject(IAutoFillService)),
-  __decorateParam$3(3, Inject(ConditionalFormattingRuleModel)),
-  __decorateParam$3(4, Inject(ConditionalFormattingViewModel))
+  __decorateParam$4(0, Inject(Injector)),
+  __decorateParam$4(1, Inject(IUniverInstanceService)),
+  __decorateParam$4(2, Inject(IAutoFillService)),
+  __decorateParam$4(3, Inject(ConditionalFormattingRuleModel)),
+  __decorateParam$4(4, Inject(ConditionalFormattingViewModel))
 ], ConditionalFormattingAutoFillController);
+const commandList = [
+  SetWorksheetActiveOperation.id,
+  AddConditionalRuleMutation.id,
+  SetConditionalRuleMutation.id,
+  DeleteConditionalRuleMutation.id,
+  MoveConditionalRuleMutation.id
+], commonSelections = [
+  {
+    label: "sheet.cf.ruleType.highlightCell",
+    value: CF_MENU_OPERATION.highlightCell
+  },
+  {
+    label: "sheet.cf.panel.rankAndAverage",
+    value: CF_MENU_OPERATION.rank
+  },
+  {
+    label: "sheet.cf.ruleType.formula",
+    value: CF_MENU_OPERATION.formula
+  },
+  {
+    label: "sheet.cf.ruleType.colorScale",
+    value: CF_MENU_OPERATION.colorScale
+  },
+  {
+    label: "sheet.cf.ruleType.dataBar",
+    value: CF_MENU_OPERATION.dataBar
+  },
+  {
+    label: "sheet.cf.ruleType.iconSet",
+    value: CF_MENU_OPERATION.icon
+  },
+  {
+    label: "sheet.cf.menu.manageConditionalFormatting",
+    value: CF_MENU_OPERATION.viewRule
+  },
+  {
+    label: "sheet.cf.menu.createConditionalFormatting",
+    value: CF_MENU_OPERATION.createRule
+  },
+  {
+    label: "sheet.cf.menu.clearRangeRules",
+    value: CF_MENU_OPERATION.clearRangeRules,
+    disabled: !1
+  },
+  {
+    label: "sheet.cf.menu.clearWorkSheetRules",
+    value: CF_MENU_OPERATION.clearWorkSheetRules
+  }
+], FactoryManageConditionalFormattingRule = /* @__PURE__ */ __name((accessor) => {
+  const selectionManagerService = accessor.get(SheetsSelectionsService), commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService), conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel), clearRangeEnable$ = new Observable((subscriber) => merge(
+    selectionManagerService.selectionMoveEnd$,
+    new Observable((commandSubscribe) => {
+      const disposable = commandService.onCommandExecuted((commandInfo) => {
+        var _a14;
+        const { id, params } = commandInfo, unitId = (_a14 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a14.getUnitId();
+        commandList.includes(id) && params.unitId === unitId && commandSubscribe.next(null);
+      });
+      return () => disposable.dispose();
+    })
+  ).pipe(debounceTime$1(16)).subscribe(() => {
+    var _a14;
+    const ranges = ((_a14 = selectionManagerService.getCurrentSelections()) == null ? void 0 : _a14.map((selection) => selection.range)) || [], workbook = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
+    if (!workbook) return;
+    const worksheet = workbook.getActiveSheet();
+    if (!worksheet) return;
+    const hasPermission = (conditionalFormattingRuleModel.getSubunitRules(workbook.getUnitId(), worksheet.getSheetId()) || []).filter((rule) => rule.ranges.some((ruleRange2) => ranges.some((range) => Rectangle.intersects(range, ruleRange2)))).map((rule) => rule.ranges).every((ranges2) => checkRangesEditablePermission(accessor, workbook.getUnitId(), worksheet.getSheetId(), ranges2));
+    subscriber.next(hasPermission);
+  })), clearSheetEnable$ = new Observable(
+    (subscriber) => new Observable((commandSubscribe) => {
+      const disposable = commandService.onCommandExecuted((commandInfo) => {
+        var _a14;
+        const { id, params } = commandInfo, unitId = (_a14 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a14.getUnitId();
+        commandList.includes(id) && params.unitId === unitId && commandSubscribe.next(null);
+      });
+      return () => disposable.dispose();
+    }).pipe(debounceTime$1(16)).subscribe(() => {
+      const workbook = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
+      if (!workbook) return;
+      const worksheet = workbook.getActiveSheet();
+      if (!worksheet) return;
+      const allRule = conditionalFormattingRuleModel.getSubunitRules(workbook.getUnitId(), worksheet.getSheetId()) || [];
+      if (!allRule.length)
+        return subscriber.next(!1), !1;
+      const hasPermission = allRule.map((rule) => rule.ranges).every((ranges) => checkRangesEditablePermission(accessor, workbook.getUnitId(), worksheet.getSheetId(), ranges));
+      subscriber.next(hasPermission);
+    })
+  ), selections$ = new Observable((subscriber) => {
+    clearRangeEnable$.subscribe((v) => {
+      const item2 = commonSelections.find((item22) => item22.value === CF_MENU_OPERATION.clearRangeRules);
+      item2 && (item2.disabled = !v, subscriber.next(commonSelections));
+    }), clearSheetEnable$.subscribe((v) => {
+      const item2 = commonSelections.find((item22) => item22.value === CF_MENU_OPERATION.clearWorkSheetRules);
+      item2 && (item2.disabled = !v, subscriber.next(commonSelections));
+    }), subscriber.next(commonSelections);
+  });
+  return {
+    id: OpenConditionalFormattingOperator.id,
+    type: MenuItemType.SELECTOR,
+    icon: "Conditions",
+    tooltip: "sheet.cf.title",
+    selections: selections$,
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+    disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetSetCellStylePermission, WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] })
+  };
+}, "FactoryManageConditionalFormattingRule"), menuSchema = {
+  [RibbonStartGroup.FORMULAS_INSERT]: {
+    [OpenConditionalFormattingOperator.id]: {
+      order: 0,
+      menuItemFactory: FactoryManageConditionalFormattingRule
+    }
+  }
+};
+var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$3(target, key, result), result;
+}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$3"), _a10;
+let ConditionalFormattingMenuController = (_a10 = class extends Disposable {
+  constructor(_injector, _menuManagerService) {
+    super();
+    __publicField(this, "_sidebarDisposable", null);
+    this._injector = _injector, this._menuManagerService = _menuManagerService, this._menuManagerService.mergeMenu(menuSchema);
+  }
+}, __name(_a10, "ConditionalFormattingMenuController"), _a10);
+ConditionalFormattingMenuController = __decorateClass$3([
+  OnLifecycle(LifecycleStages.Ready, ConditionalFormattingMenuController),
+  __decorateParam$3(0, Inject(Injector)),
+  __decorateParam$3(1, IMenuManagerService)
+], ConditionalFormattingMenuController);
 var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor, __decorateClass$2 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$2(target, key, result), result;
-}, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$2"), _a10;
-let ConditionalFormattingEditorController = (_a10 = class extends Disposable {
+}, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$2"), _a11;
+let ConditionalFormattingEditorController = (_a11 = class extends Disposable {
   constructor(_editorBridgeService, _conditionalFormattingService) {
     super(), this._editorBridgeService = _editorBridgeService, this._conditionalFormattingService = _conditionalFormattingService, this._initInterceptorEditorEnd();
   }
@@ -7532,7 +7593,7 @@ let ConditionalFormattingEditorController = (_a10 = class extends Disposable {
       )
     );
   }
-}, __name(_a10, "ConditionalFormattingEditorController"), _a10);
+}, __name(_a11, "ConditionalFormattingEditorController"), _a11);
 ConditionalFormattingEditorController = __decorateClass$2([
   OnLifecycle(LifecycleStages.Rendered, ConditionalFormattingEditorController),
   __decorateParam$2(0, Inject(IEditorBridgeService)),
@@ -7542,18 +7603,18 @@ var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$1(target, key, result), result;
-}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$1"), _a11;
-let ConditionalFormattingClearController = (_a11 = class extends Disposable {
+}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$1"), _a12;
+let ConditionalFormattingClearController = (_a12 = class extends Disposable {
   constructor(_injector, _univerInstanceService, _sheetInterceptorService, _selectionManagerService, _conditionalFormattingRuleModel) {
     super(), this._injector = _injector, this._univerInstanceService = _univerInstanceService, this._sheetInterceptorService = _sheetInterceptorService, this._selectionManagerService = _selectionManagerService, this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel, this._init();
   }
   _init() {
     this.disposeWithMe(this._sheetInterceptorService.interceptCommand({
       getMutations: /* @__PURE__ */ __name((commandInfo) => {
-        var _a13;
+        var _a14;
         const redos = [], undos = [], defaultV = { redos, undos };
         if ([ClearSelectionFormatCommand.id, ClearSelectionAllCommand.id].includes(commandInfo.id)) {
-          const ranges = (_a13 = this._selectionManagerService.getCurrentSelections()) == null ? void 0 : _a13.map((s) => s.range);
+          const ranges = (_a14 = this._selectionManagerService.getCurrentSelections()) == null ? void 0 : _a14.map((s) => s.range);
           if (!ranges)
             return defaultV;
           const workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET), worksheet = workbook.getActiveSheet();
@@ -7580,7 +7641,7 @@ let ConditionalFormattingClearController = (_a11 = class extends Disposable {
       }, "getMutations")
     }));
   }
-}, __name(_a11, "ConditionalFormattingClearController"), _a11);
+}, __name(_a12, "ConditionalFormattingClearController"), _a12);
 ConditionalFormattingClearController = __decorateClass$1([
   OnLifecycle(LifecycleStages.Rendered, ConditionalFormattingClearController),
   __decorateParam$1(0, Inject(Injector)),
@@ -7621,15 +7682,12 @@ var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnProperty
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp2(target, key, result), result;
-}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, typeof key != "symbol" ? key + "" : key, value), "__publicField"), _a12;
-let UniverSheetsConditionalFormattingUIPlugin = (_a12 = class extends Plugin {
-  constructor(_config = {}, _injector, _commandService) {
-    super(), this._config = _config, this._injector = _injector, this._commandService = _commandService, this._config = Tools.deepMerge({}, DefaultSheetConditionalFormattingUiConfig, this._config), this._initCommand(), this._injector.add([SheetsCfRenderController]), this._injector.add([SheetsCfRefRangeController]), this._injector.add([ConditionalFormattingCopyPasteController]), this._injector.add([ConditionalFormattingAutoFillController]), this._injector.add([ConditionalFormattingPermissionController]), this._injector.add([
-      ConditionalFormattingMenuController,
-      {
-        useFactory: /* @__PURE__ */ __name(() => this._injector.createInstance(ConditionalFormattingMenuController, this._config), "useFactory")
-      }
-    ]), this._injector.add([ConditionalFormattingI18nController]), this._injector.add([ConditionalFormattingEditorController]), this._injector.add([ConditionalFormattingClearController]);
+}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, typeof key != "symbol" ? key + "" : key, value), "__publicField"), _a13;
+let UniverSheetsConditionalFormattingUIPlugin = (_a13 = class extends Plugin {
+  constructor(_config = defaultPluginConfig, _injector, _commandService, _configService) {
+    super(), this._config = _config, this._injector = _injector, this._commandService = _commandService, this._configService = _configService;
+    const { menu, ...rest } = this._config;
+    menu && this._configService.setConfig("menu", menu, { merge: !0 }), this._configService.setConfig(PLUGIN_CONFIG_KEY, rest), this._initCommand(), this._injector.add([SheetsCfRenderController]), this._injector.add([SheetsCfRefRangeController]), this._injector.add([ConditionalFormattingCopyPasteController]), this._injector.add([ConditionalFormattingAutoFillController]), this._injector.add([ConditionalFormattingPermissionController]), this._injector.add([ConditionalFormattingPanelController]), this._injector.add([ConditionalFormattingMenuController]), this._injector.add([ConditionalFormattingI18nController]), this._injector.add([ConditionalFormattingEditorController]), this._injector.add([ConditionalFormattingClearController]);
   }
   _initCommand() {
     [
@@ -7653,13 +7711,14 @@ let UniverSheetsConditionalFormattingUIPlugin = (_a12 = class extends Plugin {
       this._commandService.registerCommand(m2);
     });
   }
-}, __name(_a12, "UniverSheetsConditionalFormattingUIPlugin"), _a12);
+}, __name(_a13, "UniverSheetsConditionalFormattingUIPlugin"), _a13);
 __publicField2(UniverSheetsConditionalFormattingUIPlugin, "pluginName", `${SHEET_CONDITIONAL_FORMATTING_PLUGIN}_UI_PLUGIN`);
 __publicField2(UniverSheetsConditionalFormattingUIPlugin, "type", UniverInstanceType.UNIVER_SHEET);
 UniverSheetsConditionalFormattingUIPlugin = __decorateClass([
   DependentOn(UniverSheetsConditionalFormattingPlugin),
   __decorateParam(1, Inject(Injector)),
-  __decorateParam(2, Inject(ICommandService))
+  __decorateParam(2, Inject(ICommandService)),
+  __decorateParam(3, IConfigService)
 ], UniverSheetsConditionalFormattingUIPlugin);
 export {
   AddAverageCfCommand,