@univerjs/sheets-conditional-formatting-ui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/lib/cjs/index.js

@@ -3,11 +3,11 @@ let _univerjs_core = require("@univerjs/core");
 let _univerjs_sheets = require("@univerjs/sheets");
 let _univerjs_sheets_conditional_formatting = require("@univerjs/sheets-conditional-formatting");
 let _univerjs_ui = require("@univerjs/ui");
-let _univerjs_sheets_formula = require("@univerjs/sheets-formula");
 let _univerjs_sheets_ui = require("@univerjs/sheets-ui");
-let _univerjs_engine_render = require("@univerjs/engine-render");
 let rxjs = require("rxjs");
 let rxjs_operators = require("rxjs/operators");
+let _univerjs_sheets_formula = require("@univerjs/sheets-formula");
+let _univerjs_engine_render = require("@univerjs/engine-render");
 let _univerjs_icons = require("@univerjs/icons");
 let react = require("react");
 let _univerjs_design = require("@univerjs/design");
@@ -82,8 +82,11 @@ const AddDataBarConditionalRuleCommand = {
 	type: _univerjs_core.CommandType.COMMAND,
 	id: "sheet.command.add-data-bar-conditional-rule",
 	handler(accessor, params) {
+		var _params$ranges;
 		if (!params) return false;
-		const { ranges, min, max, nativeColor, positiveColor, isGradient, stopIfTrue, isShowValue } = params;
+		const { min, max, nativeColor, positiveColor, isGradient, stopIfTrue, isShowValue } = params;
+		const ranges = (_params$ranges = params.ranges) !== null && _params$ranges !== void 0 ? _params$ranges : accessor.get(_univerjs_sheets.SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
+		if (!ranges.length) return false;
 		const conditionalFormattingRuleModel = accessor.get(_univerjs_sheets_conditional_formatting.ConditionalFormattingRuleModel);
 		const target = (0, _univerjs_sheets.getSheetCommandTarget)(accessor.get(_univerjs_core.IUniverInstanceService));
 		if (!target) return false;
@@ -144,6 +147,37 @@ const AddDuplicateValuesCfCommand = {
 	}
 };
 
+//#endregion
+//#region src/commands/commands/add-icon-set-cf.command.ts
+const AddIconSetConditionalRuleCommand = {
+	type: _univerjs_core.CommandType.COMMAND,
+	id: "sheet.command.add-icon-set-conditional-rule",
+	handler(accessor, params) {
+		var _params$ranges;
+		if (!params) return false;
+		const ranges = (_params$ranges = params.ranges) !== null && _params$ranges !== void 0 ? _params$ranges : accessor.get(_univerjs_sheets.SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
+		if (!ranges.length) return false;
+		const target = (0, _univerjs_sheets.getSheetCommandTarget)(accessor.get(_univerjs_core.IUniverInstanceService));
+		if (!target) return false;
+		const { unitId, subUnitId } = target;
+		const rule = {
+			ranges,
+			cfId: accessor.get(_univerjs_sheets_conditional_formatting.ConditionalFormattingRuleModel).createCfId(unitId, subUnitId),
+			stopIfTrue: !!params.stopIfTrue,
+			rule: {
+				type: _univerjs_sheets_conditional_formatting.CFRuleType.iconSet,
+				config: params.config,
+				isShowValue: params.isShowValue
+			}
+		};
+		return accessor.get(_univerjs_core.ICommandService).executeCommand(_univerjs_sheets_conditional_formatting.AddConditionalRuleMutation.id, {
+			unitId,
+			subUnitId,
+			rule
+		});
+	}
+};
+
 //#endregion
 //#region src/commands/commands/add-number-cf.command.ts
 const AddNumberCfCommand = {
@@ -394,11 +428,9 @@ function __decorate(decorators, target, key, desc) {
 //#region src/controllers/cf.panel.controller.ts
 const CF_PANEL_KEY$1 = "sheet.conditional.formatting.panel";
 let ConditionalFormattingPanelController = class ConditionalFormattingPanelController extends _univerjs_core.Disposable {
-	constructor(_univerInstanceService, _injector, _componentManager, _sidebarService, _localeService) {
+	constructor(_univerInstanceService, _sidebarService, _localeService) {
 		super();
 		this._univerInstanceService = _univerInstanceService;
-		this._injector = _injector;
-		this._componentManager = _componentManager;
 		this._sidebarService = _sidebarService;
 		this._localeService = _localeService;
 		_defineProperty(this, "_sidebarDisposable", null);
@@ -430,10 +462,8 @@ let ConditionalFormattingPanelController = class ConditionalFormattingPanelContr
 };
 ConditionalFormattingPanelController = __decorate([
 	__decorateParam(0, _univerjs_core.IUniverInstanceService),
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
-	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_ui.ISidebarService)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService))
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.ISidebarService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService))
 ], ConditionalFormattingPanelController);
 
 //#endregion
@@ -638,10 +668,317 @@ function generateClearCfMutations(injector, allRules, ranges, unitId, subUnitId)
 	};
 }
 
+//#endregion
+//#region src/menu/manage-rule.ts
+const commandList = [
+	_univerjs_sheets.SetWorksheetActiveOperation.id,
+	_univerjs_sheets_conditional_formatting.AddConditionalRuleMutation.id,
+	_univerjs_sheets_conditional_formatting.SetConditionalRuleMutation.id,
+	_univerjs_sheets_conditional_formatting.DeleteConditionalRuleMutation.id,
+	_univerjs_sheets_conditional_formatting.MoveConditionalRuleMutation.id
+];
+const commonSelections = [
+	{
+		label: {
+			name: "sheets-conditional-formatting-ui.ruleType.highlightCell",
+			selectable: false
+		},
+		value: 3
+	},
+	{
+		label: {
+			name: "sheets-conditional-formatting-ui.panel.rankAndAverage",
+			selectable: false
+		},
+		value: 4
+	},
+	{
+		label: {
+			name: "sheets-conditional-formatting-ui.ruleType.formula",
+			selectable: false
+		},
+		value: 5
+	},
+	{
+		label: {
+			name: "sheets-conditional-formatting-ui.ruleType.colorScale",
+			selectable: false
+		},
+		value: 6
+	},
+	{
+		label: {
+			name: "sheets-conditional-formatting-ui.ruleType.dataBar",
+			selectable: false
+		},
+		value: 7
+	},
+	{
+		label: {
+			name: "sheets-conditional-formatting-ui.ruleType.iconSet",
+			selectable: false
+		},
+		value: 8
+	},
+	{
+		label: {
+			name: "sheets-conditional-formatting-ui.menu.manageConditionalFormatting",
+			selectable: false
+		},
+		value: 2
+	},
+	{
+		label: {
+			name: "sheets-conditional-formatting-ui.menu.createConditionalFormatting",
+			selectable: false
+		},
+		value: 1
+	},
+	{
+		label: {
+			name: "sheets-conditional-formatting-ui.menu.clearRangeRules",
+			selectable: false
+		},
+		value: 9,
+		disabled: false
+	},
+	{
+		label: {
+			name: "sheets-conditional-formatting-ui.menu.clearWorkSheetRules",
+			selectable: false
+		},
+		value: 10
+	}
+];
+function FactoryManageConditionalFormattingRule(accessor) {
+	const selectionManagerService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
+	const commandService = accessor.get(_univerjs_core.ICommandService);
+	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+	const conditionalFormattingRuleModel = accessor.get(_univerjs_sheets_conditional_formatting.ConditionalFormattingRuleModel);
+	const clearRangeEnable$ = new rxjs.Observable((subscriber) => (0, rxjs.merge)(selectionManagerService.selectionMoveEnd$, selectionManagerService.selectionSet$, new rxjs.Observable((commandSubscribe) => {
+		const disposable = commandService.onCommandExecuted((commandInfo) => {
+			var _univerInstanceServic;
+			const { id, params } = commandInfo;
+			const unitId = (_univerInstanceServic = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId();
+			if (commandList.includes(id) && params.unitId === unitId) commandSubscribe.next(null);
+		});
+		return () => disposable.dispose();
+	})).pipe((0, rxjs_operators.debounceTime)(16)).subscribe(() => {
+		var _selectionManagerServ;
+		const ranges = ((_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((selection) => selection.range)) || [];
+		const workbook = univerInstanceService.getCurrentUnitOfType(_univerjs_core.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((ruleRange) => ranges.some((range) => _univerjs_core.Rectangle.intersects(range, ruleRange)))).map((rule) => rule.ranges).every((ranges) => {
+			return (0, _univerjs_sheets.checkRangesEditablePermission)(accessor, workbook.getUnitId(), worksheet.getSheetId(), ranges);
+		});
+		subscriber.next(hasPermission);
+	}));
+	const clearSheetEnable$ = new rxjs.Observable((subscriber) => new rxjs.Observable((commandSubscribe) => {
+		const disposable = commandService.onCommandExecuted((commandInfo) => {
+			var _univerInstanceServic2;
+			const { id, params } = commandInfo;
+			const unitId = (_univerInstanceServic2 = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)) === null || _univerInstanceServic2 === void 0 ? void 0 : _univerInstanceServic2.getUnitId();
+			if (commandList.includes(id) && params.unitId === unitId) commandSubscribe.next(null);
+		});
+		return () => disposable.dispose();
+	}).pipe((0, rxjs_operators.debounceTime)(16)).subscribe(() => {
+		const workbook = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
+		if (!workbook) return;
+		const worksheet = workbook.getActiveSheet();
+		if (!worksheet) return;
+		const allRule = conditionalFormattingRuleModel.getSubunitRules(workbook.getUnitId(), worksheet.getSheetId()) || [];
+		if (!allRule.length) {
+			subscriber.next(false);
+			return false;
+		}
+		const hasPermission = allRule.map((rule) => rule.ranges).every((ranges) => {
+			return (0, _univerjs_sheets.checkRangesEditablePermission)(accessor, workbook.getUnitId(), worksheet.getSheetId(), ranges);
+		});
+		subscriber.next(hasPermission);
+	}));
+	const selections$ = new rxjs.Observable((subscriber) => {
+		clearRangeEnable$.subscribe((v) => {
+			const item = commonSelections.find((item) => item.value === 9);
+			if (item) {
+				item.disabled = !v;
+				subscriber.next(commonSelections);
+			}
+		});
+		clearSheetEnable$.subscribe((v) => {
+			const item = commonSelections.find((item) => item.value === 10);
+			if (item) {
+				item.disabled = !v;
+				subscriber.next(commonSelections);
+			}
+		});
+		subscriber.next(commonSelections);
+	});
+	return {
+		id: OpenConditionalFormattingOperator.id,
+		type: _univerjs_ui.MenuItemType.SELECTOR,
+		icon: "ConditionsDoubleIcon",
+		tooltip: "sheets-conditional-formatting-ui.title",
+		selections: selections$,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
+			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
+			worksheetTypes: [_univerjs_sheets.WorksheetSetCellStylePermission, _univerjs_sheets.WorksheetEditPermission],
+			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+
+//#endregion
+//#region src/menu/quick-insert.menu.ts
+const DATA_BAR_PARAMS = {
+	min: { type: _univerjs_sheets_conditional_formatting.CFValueType.min },
+	max: { type: _univerjs_sheets_conditional_formatting.CFValueType.max },
+	nativeColor: _univerjs_sheets_conditional_formatting.defaultDataBarNativeColor,
+	positiveColor: _univerjs_sheets_conditional_formatting.defaultDataBarPositiveColor,
+	isGradient: false,
+	isShowValue: true
+};
+function createIconSetParams(iconType) {
+	return {
+		config: [
+			{
+				iconType,
+				iconId: "0",
+				operator: _univerjs_sheets_conditional_formatting.CFNumberOperator.greaterThanOrEqual,
+				value: {
+					type: _univerjs_sheets_conditional_formatting.CFValueType.percent,
+					value: 67
+				}
+			},
+			{
+				iconType,
+				iconId: "1",
+				operator: _univerjs_sheets_conditional_formatting.CFNumberOperator.greaterThanOrEqual,
+				value: {
+					type: _univerjs_sheets_conditional_formatting.CFValueType.percent,
+					value: 33
+				}
+			},
+			{
+				iconType,
+				iconId: "2",
+				operator: _univerjs_sheets_conditional_formatting.CFNumberOperator.lessThanOrEqual,
+				value: {
+					type: _univerjs_sheets_conditional_formatting.CFValueType.percent,
+					value: Number.MAX_SAFE_INTEGER
+				}
+			}
+		],
+		isShowValue: true
+	};
+}
+function getQuickConditionalFormattingMenuState(accessor) {
+	return {
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
+			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
+			worksheetTypes: [_univerjs_sheets.WorksheetSetCellStylePermission, _univerjs_sheets.WorksheetEditPermission],
+			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+function quickDataBarMenuFactory(accessor) {
+	return {
+		id: AddDataBarConditionalRuleCommand.id,
+		type: _univerjs_ui.MenuItemType.BUTTON_SELECTOR,
+		icon: "DataBarIcon",
+		tooltip: "sheets-conditional-formatting-ui.ruleType.dataBar",
+		params: DATA_BAR_PARAMS,
+		selectionsCommandId: AddDataBarConditionalRuleCommand.id,
+		selections: [
+			{
+				label: "sheets-conditional-formatting-ui.ruleType.dataBar",
+				value: _univerjs_sheets_conditional_formatting.CFRuleType.dataBar,
+				params: DATA_BAR_PARAMS
+			},
+			{
+				id: OpenConditionalFormattingOperator.id,
+				label: "sheets-conditional-formatting-ui.menu.createConditionalFormatting",
+				value: 7,
+				params: { value: 7 }
+			},
+			{
+				id: _univerjs_sheets_conditional_formatting.ClearRangeCfCommand.id,
+				label: "sheets-conditional-formatting-ui.menu.clearRangeRules",
+				value: _univerjs_sheets_conditional_formatting.CFRuleType.dataBar,
+				params: { types: [_univerjs_sheets_conditional_formatting.CFRuleType.dataBar] }
+			}
+		],
+		...getQuickConditionalFormattingMenuState(accessor)
+	};
+}
+function quickIconSetMenuFactory(accessor) {
+	const ratingParams = createIconSetParams(_univerjs_sheets_conditional_formatting.IIconSetType.threeStars);
+	return {
+		id: AddIconSetConditionalRuleCommand.id,
+		type: _univerjs_ui.MenuItemType.BUTTON_SELECTOR,
+		icon: "RatingIcon",
+		tooltip: "sheets-conditional-formatting-ui.ruleType.iconSet",
+		params: ratingParams,
+		selectionsCommandId: AddIconSetConditionalRuleCommand.id,
+		selections: [
+			{
+				label: "sheets-conditional-formatting-ui.iconSet.rank",
+				value: _univerjs_sheets_conditional_formatting.IIconSetType.threeStars,
+				params: ratingParams
+			},
+			{
+				label: "sheets-conditional-formatting-ui.iconSet.shape",
+				value: _univerjs_sheets_conditional_formatting.IIconSetType.threeTrafficLights1,
+				params: createIconSetParams(_univerjs_sheets_conditional_formatting.IIconSetType.threeTrafficLights1)
+			},
+			{
+				label: "sheets-conditional-formatting-ui.iconSet.direction",
+				value: _univerjs_sheets_conditional_formatting.IIconSetType.threeArrows,
+				params: createIconSetParams(_univerjs_sheets_conditional_formatting.IIconSetType.threeArrows)
+			},
+			{
+				id: OpenConditionalFormattingOperator.id,
+				label: "sheets-conditional-formatting-ui.menu.createConditionalFormatting",
+				value: 8,
+				params: { value: 8 }
+			},
+			{
+				id: _univerjs_sheets_conditional_formatting.ClearRangeCfCommand.id,
+				label: "sheets-conditional-formatting-ui.menu.clearRangeRules",
+				value: _univerjs_sheets_conditional_formatting.CFRuleType.iconSet,
+				params: { types: [_univerjs_sheets_conditional_formatting.CFRuleType.iconSet] }
+			}
+		],
+		...getQuickConditionalFormattingMenuState(accessor)
+	};
+}
+
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = {
+	[_univerjs_ui.RibbonInsertGroup.CELL]: {
+		[AddDataBarConditionalRuleCommand.id]: {
+			order: 3,
+			menuItemFactory: quickDataBarMenuFactory
+		},
+		[AddIconSetConditionalRuleCommand.id]: {
+			order: 4,
+			menuItemFactory: quickIconSetMenuFactory
+		}
+	},
+	[_univerjs_ui.RibbonDataGroup.RULES]: { [OpenConditionalFormattingOperator.id]: {
+		order: 1,
+		menuItemFactory: FactoryManageConditionalFormattingRule
+	} }
+};
+
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting-ui";
-var version = "1.0.0-alpha.2";
+var version = "1.0.0-alpha.4";
 
 //#endregion
 //#region src/config/config.ts
@@ -1167,15 +1504,59 @@ let SheetsCfRenderController = class SheetsCfRenderController extends _univerjs_
 		_defineProperty(this, "_ruleChangeCacheMap", /* @__PURE__ */ new Map());
 		this._initViewModelInterceptor();
 		this._initSkeleton();
+		queueMicrotask(() => this._markActiveSheetRulesDirty());
 		this.disposeWithMe(() => {
 			this._ruleChangeCacheMap.clear();
 		});
 	}
-	_markDirtySkeleton() {
-		var _this$_renderManagerS, _this$_renderManagerS2;
-		const unitId = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).getUnitId();
-		(_this$_renderManagerS = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 || _this$_renderManagerS.with(_univerjs_sheets_ui.SheetSkeletonManagerService).reCalculate();
-		(_this$_renderManagerS2 = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS2 === void 0 || (_this$_renderManagerS2 = _this$_renderManagerS2.mainComponent) === null || _this$_renderManagerS2 === void 0 || _this$_renderManagerS2.makeDirty();
+	_collectDirtyRanges(items, unitId, subUnitId) {
+		const ranges = [];
+		items.forEach((item) => {
+			var _item$rule, _rule$ranges;
+			if (item.unitId !== unitId || item.subUnitId !== subUnitId) return;
+			const rule = (_item$rule = item.rule) !== null && _item$rule !== void 0 ? _item$rule : item.cfId ? this._conditionalFormattingRuleModel.getRule(unitId, subUnitId, item.cfId) : null;
+			if (rule === null || rule === void 0 || (_rule$ranges = rule.ranges) === null || _rule$ranges === void 0 ? void 0 : _rule$ranges.length) ranges.push(...rule.ranges);
+		});
+		return ranges;
+	}
+	_intersectDirtyRangesWithRenderedRange(ranges, renderedRange) {
+		if (!renderedRange || renderedRange.startRow < 0 || renderedRange.startColumn < 0) return [];
+		return ranges.map((range) => ({
+			startRow: Math.max(range.startRow, renderedRange.startRow),
+			endRow: Math.min(range.endRow, renderedRange.endRow),
+			startColumn: Math.max(range.startColumn, renderedRange.startColumn),
+			endColumn: Math.min(range.endColumn, renderedRange.endColumn)
+		})).filter((range) => range.startRow <= range.endRow && range.startColumn <= range.endColumn);
+	}
+	_markDirtySkeleton(items) {
+		var _render$mainComponent;
+		const workbook = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
+		const worksheet = workbook === null || workbook === void 0 ? void 0 : workbook.getActiveSheet();
+		if (!workbook || !worksheet) return;
+		const unitId = workbook.getUnitId();
+		const subUnitId = worksheet.getSheetId();
+		const render = this._renderManagerService.getRenderById(unitId);
+		const skeletonManagerService = render === null || render === void 0 ? void 0 : render.with(_univerjs_sheets_ui.SheetSkeletonManagerService);
+		const currentSkeleton = skeletonManagerService === null || skeletonManagerService === void 0 ? void 0 : skeletonManagerService.getCurrentSkeleton();
+		const dirtyRanges = this._intersectDirtyRangesWithRenderedRange(this._collectDirtyRanges(items, unitId, subUnitId), currentSkeleton === null || currentSkeleton === void 0 ? void 0 : currentSkeleton.rowColumnSegment);
+		if (dirtyRanges.length) currentSkeleton === null || currentSkeleton === void 0 || currentSkeleton.resetRangeCache(dirtyRanges);
+		skeletonManagerService === null || skeletonManagerService === void 0 || skeletonManagerService.reCalculate();
+		render === null || render === void 0 || (_render$mainComponent = render.mainComponent) === null || _render$mainComponent === void 0 || _render$mainComponent.makeDirty();
+	}
+	_markActiveSheetRulesDirty() {
+		var _this$_conditionalFor;
+		const workbook = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
+		const worksheet = workbook === null || workbook === void 0 ? void 0 : workbook.getActiveSheet();
+		if (!workbook || !worksheet) return;
+		const unitId = workbook.getUnitId();
+		const subUnitId = worksheet.getSheetId();
+		const rules = (_this$_conditionalFor = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId)) !== null && _this$_conditionalFor !== void 0 ? _this$_conditionalFor : [];
+		if (!rules.length) return;
+		this._markDirtySkeleton(rules.map((rule) => ({
+			rule,
+			subUnitId,
+			unitId
+		})));
 	}
 	_initSkeleton() {
 		this.disposeWithMe((0, rxjs.merge)(this._conditionalFormattingRuleModel.$ruleChange, this._conditionalFormattingViewModel.markDirty$).pipe((0, rxjs_operators.bufferTime)(16), (0, rxjs_operators.filter)((v) => !!v.length), (0, rxjs_operators.filter)((v) => {
@@ -1184,7 +1565,7 @@ let SheetsCfRenderController = class SheetsCfRenderController extends _univerjs_
 			const worksheet = workbook.getActiveSheet();
 			if (!worksheet) return false;
 			return v.some((item) => item.unitId === workbook.getUnitId() && item.subUnitId === worksheet.getSheetId());
-		})).subscribe(() => this._markDirtySkeleton()));
+		})).subscribe((items) => this._markDirtySkeleton(items)));
 	}
 	_initViewModelInterceptor() {
 		this.disposeWithMe(this._sheetInterceptorService.intercept(_univerjs_sheets.INTERCEPTOR_POINT.CELL_CONTENT, {
@@ -1250,6 +1631,7 @@ let UniverSheetsConditionalFormattingMobileUIPlugin = class UniverSheetsConditio
 			AddAverageCfCommand,
 			AddColorScaleConditionalRuleCommand,
 			AddDataBarConditionalRuleCommand,
+			AddIconSetConditionalRuleCommand,
 			AddDuplicateValuesCfCommand,
 			AddNumberCfCommand,
 			AddRankCfCommand,
@@ -1880,11 +2262,10 @@ const ColorPicker = (props) => {
 
 //#endregion
 //#region src/views/Preview.tsx
-const Preview = (props) => {
-	const rule = props.rule;
-	if (!rule) return null;
+function Preview(props) {
+	const { rule } = props;
 	const colorList = (0, react.useMemo)(() => {
-		if (rule.type === _univerjs_sheets_conditional_formatting.CFRuleType.colorScale) {
+		if ((rule === null || rule === void 0 ? void 0 : rule.type) === _univerjs_sheets_conditional_formatting.CFRuleType.colorScale) {
 			const config = rule.config.map((c, index) => ({
 				color: new _univerjs_core.ColorKit(c.color),
 				value: index
@@ -1895,11 +2276,12 @@ const Preview = (props) => {
 		return null;
 	}, [rule]);
 	const iconSet = (0, react.useMemo)(() => {
-		if (rule.type === _univerjs_sheets_conditional_formatting.CFRuleType.iconSet) return rule.config.map((item) => {
+		if ((rule === null || rule === void 0 ? void 0 : rule.type) === _univerjs_sheets_conditional_formatting.CFRuleType.iconSet) return rule.config.map((item) => {
 			const iconList = _univerjs_sheets_conditional_formatting.iconMap[item.iconType];
 			return iconList && iconList[Number(item.iconId)];
 		});
 	}, [rule]);
+	if (!rule) return null;
 	const previewClassName = "univer-pointer-events-none univer-flex univer-h-5 univer-min-w-[72px] univer-items-center univer-justify-center univer-text-xs";
 	switch (rule.type) {
 		case _univerjs_sheets_conditional_formatting.CFRuleType.dataBar: {
@@ -1965,7 +2347,7 @@ const Preview = (props) => {
 			});
 		}
 	}
-};
+}
 
 //#endregion
 //#region src/views/panel/rule-edit/styles.ts
@@ -1988,8 +2370,8 @@ const previewClassName = (0, _univerjs_design.clsx)("univer-mt-5 univer-px-1 uni
 
 //#endregion
 //#region src/views/panel/rule-edit/ColorScale.tsx
-const createOptionItem$2 = (text, localeService) => ({
-	label: localeService.t(`sheets-conditional-formatting-ui.valueType.${text}`),
+const createOptionItem$2 = (text) => ({
+	label: `sheets-conditional-formatting-ui.valueType.${text}`,
 	value: text
 });
 const TextInput$1 = (props) => {
@@ -2049,15 +2431,24 @@ const ColorScaleStyleEditor = (props) => {
 	const { interceptorManager } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const rule = ((_props$rule = props.rule) === null || _props$rule === void 0 ? void 0 : _props$rule.type) === _univerjs_sheets_conditional_formatting.CFRuleType.colorScale ? props.rule : void 0;
-	const commonOptions = [
-		createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.num, localeService),
-		createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.percent, localeService),
-		createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.percentile, localeService),
-		createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.formula, localeService)
+	const commonOptionDefinitions = [
+		createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.num),
+		createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.percent),
+		createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.percentile),
+		createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.formula)
 	];
-	const minOptions = [createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.min, localeService), ...commonOptions];
-	const medianOptions = [createOptionItem$2("none", localeService), ...commonOptions];
-	const maxOptions = [createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.max, localeService), ...commonOptions];
+	const minOptions = [createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.min), ...commonOptionDefinitions].map((option) => ({
+		...option,
+		label: localeService.t(option.label)
+	}));
+	const medianOptions = [createOptionItem$2("none"), ...commonOptionDefinitions].map((option) => ({
+		...option,
+		label: localeService.t(option.label)
+	}));
+	const maxOptions = [createOptionItem$2(_univerjs_sheets_conditional_formatting.CFValueType.max), ...commonOptionDefinitions].map((option) => ({
+		...option,
+		label: localeService.t(option.label)
+	}));
 	const [minType, setMinType] = (0, react.useState)(() => {
 		var _rule$config$;
 		const defaultV = _univerjs_sheets_conditional_formatting.CFValueType.min;
@@ -2203,7 +2594,7 @@ const ColorScaleStyleEditor = (props) => {
 			children: localeService.t("sheets-conditional-formatting-ui.valueType.min")
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-mt-3 univer-flex univer-h-8 univer-items-center",
+			className: "univer-mt-3 univer-flex univer-h-8 univer-items-center univer-gap-2",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 					className: "univer-flex-shrink-0",
@@ -2271,7 +2662,7 @@ const ColorScaleStyleEditor = (props) => {
 			children: localeService.t("sheets-conditional-formatting-ui.panel.medianValue")
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-mt-3 univer-flex univer-h-8 univer-items-center",
+			className: "univer-mt-3 univer-flex univer-h-8 univer-items-center univer-gap-2",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 					className: "univer-flex-shrink-0",
@@ -2339,7 +2730,7 @@ const ColorScaleStyleEditor = (props) => {
 			children: localeService.t("sheets-conditional-formatting-ui.valueType.max")
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-mt-3 univer-flex univer-h-8 univer-items-center",
+			className: "univer-mt-3 univer-flex univer-h-8 univer-items-center univer-gap-2",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 					className: "univer-flex-shrink-0",
@@ -2364,7 +2755,6 @@ const ColorScaleStyleEditor = (props) => {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput$1, {
 					id: "max",
-					className: "univer-ml-1",
 					value: maxValue,
 					type: maxType,
 					onChange: (v) => {
@@ -2383,7 +2773,6 @@ const ColorScaleStyleEditor = (props) => {
 					}
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPicker, {
-					className: "univer-ml-1",
 					color: maxColor,
 					onChange: (v) => {
 						setMaxColor(v);
@@ -2407,8 +2796,8 @@ const ColorScaleStyleEditor = (props) => {
 
 //#endregion
 //#region src/views/panel/rule-edit/DataBar.tsx
-const createOptionItem$1 = (text, localeService) => ({
-	label: localeService.t(`sheets-conditional-formatting-ui.valueType.${text}`),
+const createOptionItem$1 = (text) => ({
+	label: `sheets-conditional-formatting-ui.valueType.${text}`,
 	value: text
 });
 const InputText = (props) => {
@@ -2437,7 +2826,7 @@ const InputText = (props) => {
 	if (type === _univerjs_sheets_conditional_formatting.CFValueType.formula) {
 		const v = String(_value.current).startsWith("=") ? String(_value.current) || "" : "=";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-ml-3 univer-w-full",
+			className: "univer-w-full",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_sheets_formula_ui.FormulaEditor, {
 				ref: formulaEditorRef,
 				className: (0, _univerjs_design.clsx)("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-white [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent", _univerjs_design.borderClassName),
@@ -2483,14 +2872,20 @@ const DataBarStyleEditor = (props) => {
 		if (!rule) return _univerjs_sheets_conditional_formatting.defaultDataBarNativeColor;
 		return ((_rule$config3 = rule.config) === null || _rule$config3 === void 0 ? void 0 : _rule$config3.nativeColor) || _univerjs_sheets_conditional_formatting.defaultDataBarNativeColor;
 	});
-	const commonOptions = [
-		createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.num, localeService),
-		createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.percent, localeService),
-		createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.percentile, localeService),
-		createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.formula, localeService)
+	const commonOptionDefinitions = [
+		createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.num),
+		createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.percent),
+		createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.percentile),
+		createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.formula)
 	];
-	const minOptions = [createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.min, localeService), ...commonOptions];
-	const maxOptions = [createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.max, localeService), ...commonOptions];
+	const minOptions = [createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.min), ...commonOptionDefinitions].map((option) => ({
+		...option,
+		label: localeService.t(option.label)
+	}));
+	const maxOptions = [createOptionItem$1(_univerjs_sheets_conditional_formatting.CFValueType.max), ...commonOptionDefinitions].map((option) => ({
+		...option,
+		label: localeService.t(option.label)
+	}));
 	const [minValueType, setMinValueType] = (0, react.useState)(() => {
 		var _rule$config4;
 		const defaultV = minOptions[0].value;
@@ -2597,7 +2992,7 @@ const DataBarStyleEditor = (props) => {
 		});
 	};
 	const isShowInput = (type) => {
-		return commonOptions.map((item) => item.value).includes(type);
+		return commonOptionDefinitions.map((item) => item.value).includes(type);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2621,7 +3016,7 @@ const DataBarStyleEditor = (props) => {
 			className: "univer-mt-3 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
 			children: localeService.t("sheets-conditional-formatting-ui.panel.fillType")
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-ml-1 univer-mt-3 univer-flex univer-items-center",
+			className: "univer-mt-3 univer-flex univer-items-center univer-gap-3",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
 				value: isGradient,
 				onChange: (v) => {
@@ -2651,7 +3046,7 @@ const DataBarStyleEditor = (props) => {
 					})
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-ml-6 univer-flex univer-items-center univer-text-xs",
+				className: "univer-flex univer-items-center univer-text-xs",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
 					checked: !isShowValue,
 					onChange: (v) => {
@@ -2674,7 +3069,7 @@ const DataBarStyleEditor = (props) => {
 			className: "univer-mt-3 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
 			children: localeService.t("sheets-conditional-formatting-ui.panel.colorSet")
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-ml-1 univer-mt-3 univer-flex univer-items-center",
+			className: "univer-mt-3 univer-flex univer-items-center univer-gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "univer-flex univer-items-center",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2685,7 +3080,7 @@ const DataBarStyleEditor = (props) => {
 					onChange: handleNativeColorChange
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-ml-3 univer-flex univer-items-center",
+				className: "univer-flex univer-items-center univer-gap-3",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "univer-text-xs",
 					children: localeService.t("sheets-conditional-formatting-ui.panel.positive")
@@ -2701,7 +3096,7 @@ const DataBarStyleEditor = (props) => {
 				children: localeService.t("sheets-conditional-formatting-ui.valueType.min")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-mt-3 univer-flex univer-items-center",
+				className: "univer-mt-3 univer-flex univer-items-center univer-gap-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 					className: "univer-w-1/2 univer-flex-shrink-0",
 					options: minOptions,
@@ -2723,7 +3118,6 @@ const DataBarStyleEditor = (props) => {
 					}
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputText, {
 					id: "min",
-					className: "univer-ml-3",
 					disabled: !isShowInput(minValueType),
 					type: minValueType,
 					value: minValue,
@@ -2747,7 +3141,7 @@ const DataBarStyleEditor = (props) => {
 				children: localeService.t("sheets-conditional-formatting-ui.valueType.max")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-mt-3 univer-flex univer-items-center",
+				className: "univer-mt-3 univer-flex univer-items-center univer-gap-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 					className: "univer-w-1/2 univer-flex-shrink-0",
 					options: maxOptions,
@@ -2768,7 +3162,6 @@ const DataBarStyleEditor = (props) => {
 						});
 					}
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputText, {
-					className: "univer-ml-3",
 					disabled: !isShowInput(maxValueType),
 					id: "max",
 					type: maxValueType,
@@ -3014,8 +3407,14 @@ const WrapperError = (props) => {
 
 //#endregion
 //#region src/views/panel/rule-edit/HighlightCell.tsx
-const createOptionItem = (text, localeService) => ({
-	label: localeService.t(`sheets-conditional-formatting-ui.operator.${text}`),
+const textOperators = new Set(Object.values(_univerjs_sheets_conditional_formatting.CFTextOperator));
+const numberOperators = new Set(Object.values(_univerjs_sheets_conditional_formatting.CFNumberOperator));
+const timePeriodOperators = new Set(Object.values(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator));
+const isTextOperator = (value) => typeof value === "string" && textOperators.has(value);
+const isNumberOperator = (value) => typeof value === "string" && numberOperators.has(value);
+const isTimePeriodOperator = (value) => typeof value === "string" && timePeriodOperators.has(value);
+const createOptionItem = (text) => ({
+	label: `sheets-conditional-formatting-ui.operator.${text}`,
 	value: text
 });
 function HighlightCellInput(props) {
@@ -3176,42 +3575,43 @@ function HighlightCellInput(props) {
 	}
 	return null;
 }
-const getOperatorOptions = (type, localeService) => {
+const getOperatorOptions = (type) => {
 	switch (type) {
 		case _univerjs_sheets_conditional_formatting.CFSubRuleType.text: return [
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.containsText, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.notContainsText, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.beginsWith, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.endsWith, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.equal, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.notEqual, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.containsBlanks, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.notContainsBlanks, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.containsErrors, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.notContainsErrors, localeService)
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.containsText),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.notContainsText),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.beginsWith),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.endsWith),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.equal),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.notEqual),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.containsBlanks),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.notContainsBlanks),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.containsErrors),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTextOperator.notContainsErrors)
 		];
 		case _univerjs_sheets_conditional_formatting.CFSubRuleType.number: return [
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.between, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.notBetween, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.equal, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.notEqual, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.greaterThan, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.greaterThanOrEqual, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.lessThan, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.lessThanOrEqual, localeService)
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.between),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.notBetween),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.equal),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.notEqual),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.greaterThan),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.greaterThanOrEqual),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.lessThan),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFNumberOperator.lessThanOrEqual)
 		];
 		case _univerjs_sheets_conditional_formatting.CFSubRuleType.timePeriod: return [
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.yesterday, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.today, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.tomorrow, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.last7Days, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.lastWeek, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.thisWeek, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.nextWeek, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.lastMonth, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.thisMonth, localeService),
-			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.nextMonth, localeService)
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.yesterday),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.today),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.tomorrow),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.last7Days),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.lastWeek),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.thisWeek),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.nextWeek),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.lastMonth),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.thisMonth),
+			createOptionItem(_univerjs_sheets_conditional_formatting.CFTimePeriodOperator.nextMonth)
 		];
+		default: return [];
 	}
 };
 const HighlightCellStyleEditor = (props) => {
@@ -3246,77 +3646,74 @@ const HighlightCellStyleEditor = (props) => {
 			label: localeService.t("sheets-conditional-formatting-ui.subRuleType.uniqueValues")
 		}
 	];
-	const operatorOptions = (0, react.useMemo)(() => getOperatorOptions(subType, localeService), [subType]);
+	const operatorOptions = (0, react.useMemo)(() => getOperatorOptions(subType).map((option) => ({
+		...option,
+		label: localeService.t(option.label)
+	})), [localeService, subType]);
 	const [operator, setOperator] = (0, react.useState)(() => {
-		const defaultV = operatorOptions ? operatorOptions[0].value : void 0;
+		var _operatorOptions$;
+		const defaultV = (_operatorOptions$ = operatorOptions[0]) === null || _operatorOptions$ === void 0 ? void 0 : _operatorOptions$.value;
 		if (!rule) return defaultV;
-		return rule.operator || defaultV;
+		return "operator" in rule ? rule.operator : defaultV;
 	});
 	const [value, setValue] = (0, react.useState)(() => {
-		var _value2;
 		const defaultV = "";
 		if (!rule) return defaultV;
-		return (_value2 = rule.value) !== null && _value2 !== void 0 ? _value2 : (0, _univerjs_sheets_conditional_formatting.createDefaultValue)(rule.subType, rule.operator);
+		if ("value" in rule && rule.value !== void 0) return rule.value;
+		return "operator" in rule ? (0, _univerjs_sheets_conditional_formatting.createDefaultValue)(rule.subType, rule.operator) : defaultV;
 	});
 	const [style, setStyle] = (0, react.useState)({});
 	const getResult = (0, react.useMemo)(() => (option) => {
-		var _option$subType4, _option$operator4, _option$style4;
-		switch (option.subType || subType) {
-			case _univerjs_sheets_conditional_formatting.CFSubRuleType.text:
-				if ([
-					_univerjs_sheets_conditional_formatting.CFTextOperator.beginsWith,
-					_univerjs_sheets_conditional_formatting.CFTextOperator.endsWith,
-					_univerjs_sheets_conditional_formatting.CFTextOperator.containsText,
-					_univerjs_sheets_conditional_formatting.CFTextOperator.notContainsText,
-					_univerjs_sheets_conditional_formatting.CFTextOperator.equal,
-					_univerjs_sheets_conditional_formatting.CFTextOperator.notEqual
-				].includes(operator)) {
-					var _option$subType, _option$operator, _option$style, _option$value;
-					return {
-						type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
-						subType: (_option$subType = option.subType) !== null && _option$subType !== void 0 ? _option$subType : subType,
-						operator: (_option$operator = option.operator) !== null && _option$operator !== void 0 ? _option$operator : operator,
-						style: (_option$style = option.style) !== null && _option$style !== void 0 ? _option$style : style,
-						value: (_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : value
-					};
-				}
-				break;
-			case _univerjs_sheets_conditional_formatting.CFSubRuleType.number:
-				if ([
-					_univerjs_sheets_conditional_formatting.CFNumberOperator.equal,
-					_univerjs_sheets_conditional_formatting.CFNumberOperator.notEqual,
-					_univerjs_sheets_conditional_formatting.CFNumberOperator.greaterThan,
-					_univerjs_sheets_conditional_formatting.CFNumberOperator.greaterThanOrEqual,
-					_univerjs_sheets_conditional_formatting.CFNumberOperator.lessThan,
-					_univerjs_sheets_conditional_formatting.CFNumberOperator.lessThanOrEqual
-				].includes(operator)) {
-					var _option$subType2, _option$operator2, _option$style2, _option$value2;
-					return {
-						type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
-						subType: (_option$subType2 = option.subType) !== null && _option$subType2 !== void 0 ? _option$subType2 : subType,
-						operator: (_option$operator2 = option.operator) !== null && _option$operator2 !== void 0 ? _option$operator2 : operator,
-						style: (_option$style2 = option.style) !== null && _option$style2 !== void 0 ? _option$style2 : style,
-						value: (_option$value2 = option.value) !== null && _option$value2 !== void 0 ? _option$value2 : value
-					};
-				}
-				if ([_univerjs_sheets_conditional_formatting.CFNumberOperator.between, _univerjs_sheets_conditional_formatting.CFNumberOperator.notBetween].includes(operator)) {
-					var _option$subType3, _option$operator3, _option$style3, _option$value3;
+		var _option$subType, _option$operator, _option$value, _option$style;
+		const nextSubType = (_option$subType = option.subType) !== null && _option$subType !== void 0 ? _option$subType : subType;
+		const nextOperator = (_option$operator = option.operator) !== null && _option$operator !== void 0 ? _option$operator : operator;
+		const nextValue = (_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : value;
+		const nextStyle = (_option$style = option.style) !== null && _option$style !== void 0 ? _option$style : style;
+		switch (nextSubType) {
+			case _univerjs_sheets_conditional_formatting.CFSubRuleType.duplicateValues: return {
+				type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
+				subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.duplicateValues,
+				style: nextStyle
+			};
+			case _univerjs_sheets_conditional_formatting.CFSubRuleType.uniqueValues: return {
+				type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
+				subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.uniqueValues,
+				style: nextStyle
+			};
+			case _univerjs_sheets_conditional_formatting.CFSubRuleType.text: return {
+				type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
+				subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.text,
+				operator: isTextOperator(nextOperator) ? nextOperator : _univerjs_sheets_conditional_formatting.CFTextOperator.containsText,
+				style: nextStyle,
+				value: typeof nextValue === "string" ? nextValue : void 0
+			};
+			case _univerjs_sheets_conditional_formatting.CFSubRuleType.timePeriod: return {
+				type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
+				subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.timePeriod,
+				operator: isTimePeriodOperator(nextOperator) ? nextOperator : _univerjs_sheets_conditional_formatting.CFTimePeriodOperator.today,
+				style: nextStyle
+			};
+			case _univerjs_sheets_conditional_formatting.CFSubRuleType.number: {
+				const numberOperator = isNumberOperator(nextOperator) ? nextOperator : _univerjs_sheets_conditional_formatting.CFNumberOperator.equal;
+				if (numberOperator === _univerjs_sheets_conditional_formatting.CFNumberOperator.between || numberOperator === _univerjs_sheets_conditional_formatting.CFNumberOperator.notBetween) {
+					const range = Array.isArray(nextValue) ? nextValue : [0, 100];
 					return {
 						type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
-						subType: (_option$subType3 = option.subType) !== null && _option$subType3 !== void 0 ? _option$subType3 : subType,
-						operator: (_option$operator3 = option.operator) !== null && _option$operator3 !== void 0 ? _option$operator3 : operator,
-						style: (_option$style3 = option.style) !== null && _option$style3 !== void 0 ? _option$style3 : style,
-						value: (_option$value3 = option.value) !== null && _option$value3 !== void 0 ? _option$value3 : value
+						subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.number,
+						operator: numberOperator,
+						style: nextStyle,
+						value: range
 					};
 				}
-				break;
+				return {
+					type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
+					subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.number,
+					operator: numberOperator,
+					style: nextStyle,
+					value: typeof nextValue === "number" ? nextValue : void 0
+				};
+			}
 		}
-		return {
-			type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
-			subType: (_option$subType4 = option.subType) !== null && _option$subType4 !== void 0 ? _option$subType4 : subType,
-			operator: (_option$operator4 = option.operator) !== null && _option$operator4 !== void 0 ? _option$operator4 : operator,
-			style: (_option$style4 = option.style) !== null && _option$style4 !== void 0 ? _option$style4 : style
-		};
 	}, [
 		subType,
 		operator,
@@ -3332,9 +3729,13 @@ const HighlightCellStyleEditor = (props) => {
 		if (!typeOptions.some((item) => item.value === subType)) setSubType(typeOptions[0].value);
 	}, [typeOptions]);
 	const onTypeChange = (v) => {
-		const _subType = v;
-		const operatorList = getOperatorOptions(_subType, localeService);
-		const _operator = operatorList && operatorList[0].value;
+		var _typeOptions$find, _operatorList$;
+		const _subType = (_typeOptions$find = typeOptions.find((item) => item.value === v)) === null || _typeOptions$find === void 0 ? void 0 : _typeOptions$find.value;
+		if (!_subType) return;
+		const _operator = (_operatorList$ = getOperatorOptions(_subType).map((option) => ({
+			...option,
+			label: localeService.t(option.label)
+		}))[0]) === null || _operatorList$ === void 0 ? void 0 : _operatorList$.value;
 		setSubType(_subType);
 		setOperator(_operator);
 		_operator && setValue((0, _univerjs_sheets_conditional_formatting.createDefaultValue)(_subType, _operator));
@@ -3344,7 +3745,9 @@ const HighlightCellStyleEditor = (props) => {
 		}));
 	};
 	const onOperatorChange = (v) => {
-		const _operator = v;
+		var _operatorOptions$find;
+		const _operator = (_operatorOptions$find = operatorOptions.find((item) => item.value === v)) === null || _operatorOptions$find === void 0 ? void 0 : _operatorOptions$find.value;
+		if (!_operator) return;
 		setOperator(_operator);
 		onChange(getResult({ operator: _operator }));
 	};
@@ -3352,9 +3755,6 @@ const HighlightCellStyleEditor = (props) => {
 		setValue(value);
 		onChange(getResult({ value }));
 	};
-	const inputRenderKey = (0, react.useMemo)(() => {
-		return `${subType}_${operator}_${Math.random()}`;
-	}, [subType, operator]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
@@ -3381,7 +3781,7 @@ const HighlightCellStyleEditor = (props) => {
 			operator,
 			rule,
 			onChange: onInputChange
-		}, inputRenderKey),
+		}, `${subType}_${operator}`),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: previewClassName,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Preview, { rule: getResult({}) })
@@ -3449,32 +3849,34 @@ const createDefaultConfigItem = (iconType, index, list) => ({
 	iconType,
 	iconId: String(index)
 });
-const IconGroupList = (0, react.forwardRef)((props, ref) => {
-	const { onClick } = props;
+const IconGroupList = (props) => {
+	const { iconType, onClick } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const handleClick = (iconType) => {
-		onClick(iconType);
-	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref,
+		dir: (0, _univerjs_ui.useObservable)(localeService.direction$, localeService.getDirection()),
 		className: "univer-w-80",
-		children: _univerjs_sheets_conditional_formatting.iconGroup.map((group, index) => {
+		children: _univerjs_sheets_conditional_formatting.iconGroup.map((group) => {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-mb-3",
+				className: "univer-mb-4 last:univer-mb-0",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-mb-1 univer-text-sm",
+					className: "univer-mb-2 univer-px-1 univer-text-xs univer-font-medium univer-text-gray-500 dark:!univer-text-gray-400",
 					children: localeService.t(group.title)
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-flex univer-flex-wrap",
-					children: group.group.map((groupItem) => {
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "univer-mb-1 univer-flex univer-w-1/2 univer-items-center",
+					className: "univer-grid univer-grid-cols-2 univer-gap-1",
+					children: group.group.map((groupItem, groupItemIndex) => {
+						const selected = groupItem.name === iconType;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": `${localeService.t(group.title)} ${groupItemIndex + 1}`,
+							"aria-pressed": selected,
+							className: (0, _univerjs_design.clsx)("univer-flex univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-md univer-border-0 univer-bg-transparent univer-px-2 univer-outline-none univer-transition-colors focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600 rtl:univer-flex-row-reverse", selected ? "univer-bg-primary-50 univer-ring-1 univer-ring-primary-600 dark:!univer-bg-primary-900" : "hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700"),
 							onClick: () => {
-								handleClick(groupItem.name);
+								onClick(groupItem.name);
 							},
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-								className: "univer-flex univer-cursor-pointer univer-rounded hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "univer-flex univer-items-center univer-gap-0.5",
 								children: groupItem.list.map((base64, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+									alt: "",
 									className: "univer-size-5",
 									src: base64,
 									draggable: false
@@ -3483,12 +3885,14 @@ const IconGroupList = (0, react.forwardRef)((props, ref) => {
 						}, groupItem.name);
 					})
 				})]
-			}, index);
+			}, group.title);
 		})
 	});
-});
+};
 const IconItemList = (props) => {
 	const { onClick } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const direction = (0, _univerjs_ui.useObservable)(localeService.direction$, localeService.getDirection());
 	const list = (0, react.useMemo)(() => {
 		const result = [];
 		for (const key in _univerjs_sheets_conditional_formatting.iconMap) {
@@ -3506,29 +3910,30 @@ const IconItemList = (props) => {
 	const handleClick = (item) => {
 		onClick(item.iconType, item.iconId);
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-mb-2.5 univer-flex univer-cursor-pointer univer-items-center univer-pl-1",
-		onClick: () => handleClick({
-			iconType: _univerjs_sheets_conditional_formatting.IIconSetType.empty,
-			iconId: "",
-			base64: ""
-		}),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SlashDoubleIcon, { className: "univer-size-5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "univer-ml-2",
-			children: "无单元格图标"
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		dir: direction,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-u-comp": "cf-icon-set-no-icon-option",
+			className: "univer-mb-2.5 univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-text-sm",
+			onClick: () => handleClick({
+				iconType: _univerjs_sheets_conditional_formatting.IIconSetType.empty,
+				iconId: "",
+				base64: ""
+			}),
+			children: localeService.t("sheets-conditional-formatting-ui.iconSet.noCellIcon")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-flex univer-w-64 univer-flex-wrap univer-gap-2",
+			children: list.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mb-2 univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-rounded hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					className: "univer-size-5",
+					src: item.base64,
+					draggable: false,
+					onClick: () => handleClick(item)
+				})
+			}, `${item.iconType}_${item.iconId}`))
 		})]
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-flex univer-w-64 univer-flex-wrap",
-		children: list.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-mb-2 univer-mr-2 univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-rounded hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-				className: "univer-size-5",
-				src: item.base64,
-				draggable: false,
-				onClick: () => handleClick(item)
-			})
-		}, `${item.iconType}_${item.iconId}`))
-	})] });
+	});
 };
 const IconSetRuleEdit = (props) => {
 	const { onChange, configList, errorMap = {} } = props;
@@ -3616,7 +4021,8 @@ const IconSetRuleEdit = (props) => {
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-mt-3 univer-grid univer-grid-cols-2 univer-gap-4",
+						"data-u-comp": "cf-icon-set-rule-grid",
+						className: "univer-mt-3 univer-grid univer-grid-cols-2 univer-gap-4 rtl:univer-grid-flow-dense",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "univer-flex univer-items-center",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
@@ -3634,7 +4040,7 @@ const IconSetRuleEdit = (props) => {
 										src: icon,
 										className: "univer-size-4",
 										draggable: false
-									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SlashDoubleIcon, { className: "univer-size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SlashDoubleIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
 								})
 							})
 						}), !isEnd ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
@@ -3687,6 +4093,7 @@ const IconSet = (props) => {
 	const { interceptorManager } = props;
 	const rule = ((_props$rule = props.rule) === null || _props$rule === void 0 ? void 0 : _props$rule.type) === _univerjs_sheets_conditional_formatting.CFRuleType.iconSet ? props.rule : void 0;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const direction = (0, _univerjs_ui.useObservable)(localeService.direction$, localeService.getDirection());
 	const [errorMap, setErrorMap] = (0, react.useState)({});
 	const [currentIconType, setCurrentIconType] = (0, react.useState)(() => {
 		const defaultV = Object.keys(_univerjs_sheets_conditional_formatting.iconMap)[0];
@@ -3718,7 +4125,8 @@ const IconSet = (props) => {
 	});
 	const previewIcon = (0, react.useMemo)(() => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-flex univer-items-center",
+			"data-u-comp": "cf-icon-set-preview",
+			className: "univer-flex univer-items-center rtl:univer-flex-row-reverse",
 			children: configList.map((item) => {
 				return getIcon(item.iconType, item.iconId);
 			}).map((icon, index) => icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
@@ -3818,54 +4226,55 @@ const IconSet = (props) => {
 		});
 		setConfigList([...configList]);
 	};
-	const layoutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ILayoutService);
-	const [iconGroupListEl, setIconGroupListEl] = (0, react.useState)();
-	(0, _univerjs_ui.useScrollYOverContainer)(iconGroupListEl, layoutService.rootContainerElement);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-mt-4 univer-text-sm univer-text-gray-600",
-			children: localeService.t("sheets-conditional-formatting-ui.panel.styleRule")
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-mt-3",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
-				overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-rounded-lg univer-p-4",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconGroupList, {
-						ref: (el) => {
-							!iconGroupListEl && el && setIconGroupListEl(el);
-						},
-						iconType: currentIconType,
-						onClick: handleClickIconList
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "cf-icon-set-editor",
+		dir: direction,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mt-4 univer-text-sm univer-text-gray-600",
+				children: localeService.t("sheets-conditional-formatting-ui.panel.styleRule")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mt-3",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+					overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						dir: direction,
+						className: "univer-rounded-lg univer-p-3",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconGroupList, {
+							iconType: currentIconType,
+							onClick: handleClickIconList
+						})
+					}),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-white univer-px-4 univer-py-2 univer-text-xs univer-text-gray-600 univer-transition-all hover:univer-border-primary-600", _univerjs_design.borderClassName),
+						children: [previewIcon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
 					})
-				}),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-white univer-px-4 univer-py-2 univer-text-xs univer-text-gray-600 univer-transition-all hover:univer-border-primary-600", _univerjs_design.borderClassName),
-					children: [previewIcon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
 				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-mt-3 univer-flex univer-items-center univer-gap-2 univer-text-xs rtl:univer-flex-row-reverse rtl:univer-justify-end",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					"data-u-comp": "cf-icon-set-option-row",
+					className: "univer-flex univer-items-center univer-text-xs",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, { onChange: reverseIcon }), localeService.t("sheets-conditional-formatting-ui.iconSet.reverseIconOrder")]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					"data-u-comp": "cf-icon-set-option-row",
+					className: "univer-flex univer-items-center univer-text-xs",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+						checked: !isShowValue,
+						onChange: (v) => {
+							setIsShowValue(!v);
+						}
+					}), localeService.t("sheets-conditional-formatting-ui.iconSet.onlyShowIcon")]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconSetRuleEdit, {
+				errorMap,
+				onChange: handleChange,
+				configList
 			})
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-mt-3 univer-flex univer-items-center univer-text-xs",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-flex univer-items-center univer-text-xs",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, { onChange: reverseIcon }), localeService.t("sheets-conditional-formatting-ui.iconSet.reverseIconOrder")]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-ml-6 univer-flex univer-items-center univer-text-xs",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
-					checked: !isShowValue,
-					onChange: (v) => {
-						setIsShowValue(!v);
-					}
-				}), localeService.t("sheets-conditional-formatting-ui.iconSet.onlyShowIcon")]
-			})]
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconSetRuleEdit, {
-			errorMap,
-			onChange: handleChange,
-			configList
-		})
-	] });
+		]
+	});
 };
 
 //#endregion
@@ -3934,34 +4343,36 @@ const RankStyleEditor = (props) => {
 	const [style, setStyle] = (0, react.useState)({});
 	const getResult = (config) => {
 		const { type, isPercent, value, style } = config;
-		if (type === "isNotBottom") return {
-			type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
-			subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.rank,
-			isPercent,
-			isBottom: false,
-			value,
-			style
-		};
-		if (type === "isBottom") return {
-			type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
-			subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.rank,
-			isPercent,
-			isBottom: true,
-			value,
-			style
-		};
-		if (type === "greaterThanAverage") return {
-			type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
-			subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.average,
-			operator: _univerjs_sheets_conditional_formatting.CFNumberOperator.greaterThan,
-			style
-		};
-		if (type === "lessThanAverage") return {
-			type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
-			subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.average,
-			operator: _univerjs_sheets_conditional_formatting.CFNumberOperator.lessThan,
-			style
-		};
+		switch (type) {
+			case "isNotBottom": return {
+				type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
+				subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.rank,
+				isPercent,
+				isBottom: false,
+				value,
+				style
+			};
+			case "isBottom": return {
+				type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
+				subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.rank,
+				isPercent,
+				isBottom: true,
+				value,
+				style
+			};
+			case "greaterThanAverage": return {
+				type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
+				subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.average,
+				operator: _univerjs_sheets_conditional_formatting.CFNumberOperator.greaterThan,
+				style
+			};
+			case "lessThanAverage": return {
+				type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
+				subType: _univerjs_sheets_conditional_formatting.CFSubRuleType.average,
+				operator: _univerjs_sheets_conditional_formatting.CFNumberOperator.lessThan,
+				style
+			};
+		}
 	};
 	(0, react.useEffect)(() => {
 		return interceptorManager.intercept(interceptorManager.getInterceptPoints().submit, { handler() {
@@ -3992,17 +4403,21 @@ const RankStyleEditor = (props) => {
 			value: type,
 			options,
 			onChange: (v) => {
-				setType(v);
-				_onChange({
-					type: v,
-					isPercent,
-					value,
-					style
-				});
+				var _options$find;
+				const nextType = (_options$find = options.find((option) => option.value === v)) === null || _options$find === void 0 ? void 0 : _options$find.value;
+				if (nextType) {
+					setType(nextType);
+					_onChange({
+						type: nextType,
+						isPercent,
+						value,
+						style
+					});
+				}
 			}
 		}),
 		["isNotBottom", "isBottom"].includes(type) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-mt-3 univer-flex univer-items-center",
+			className: "univer-mt-3 univer-flex univer-items-center univer-gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 				min: 1,
 				max: 1e3,
@@ -4018,7 +4433,7 @@ const RankStyleEditor = (props) => {
 					});
 				}
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-ml-3 univer-flex univer-items-center univer-text-xs",
+				className: "univer-flex univer-items-center univer-text-xs",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
 					checked: isPercent,
 					onChange: (v) => {
@@ -4276,12 +4691,11 @@ const RuleEdit = (props) => {
 			onChange: onStyleChange
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-mt-4 univer-flex univer-justify-end",
+			className: "univer-mt-4 univer-flex univer-justify-end univer-gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
 				onClick: handleCancel,
 				children: localeService.t("sheets-conditional-formatting-ui.panel.cancel")
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-				className: "univer-ml-3",
 				variant: "primary",
 				onClick: handleSubmit,
 				children: localeService.t("sheets-conditional-formatting-ui.panel.submit")
@@ -4325,7 +4739,7 @@ const getRuleDescribe = (rule, localeService) => {
 		}
 	}
 };
-const RuleList = (props) => {
+function RuleList(props) {
 	const { onClick } = props;
 	const conditionalFormattingRuleModel = (0, _univerjs_ui.useDependency)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRuleModel);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
@@ -4336,12 +4750,9 @@ const RuleList = (props) => {
 	const conditionalFormattingI18nController = (0, _univerjs_ui.useDependency)(ConditionalFormattingI18nController);
 	const workbook = (0, _univerjs_ui.useObservable)(() => univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET), void 0, void 0, []);
 	const unitId = workbook.getUnitId();
-	const worksheet = workbook.getActiveSheet();
-	if (!worksheet) throw new Error("No active sheet found");
-	const subUnitId = worksheet.getSheetId();
+	const subUnitId = workbook.getActiveSheet().getSheetId();
 	const [currentRuleRanges, setCurrentRuleRanges] = (0, react.useState)([]);
 	const [selectValue, setSelectValue] = (0, react.useState)("2");
-	const [fetchRuleListId, setFetchRuleListId] = (0, react.useState)(0);
 	const [draggingId, setDraggingId] = (0, react.useState)("");
 	const selectOption = [{
 		label: localeService.t("sheets-conditional-formatting-ui.panel.workSheet"),
@@ -4363,25 +4774,8 @@ const RuleList = (props) => {
 		} else if (selectValue === "2") return [...ruleList];
 		return [];
 	};
-	const [ruleList, setRuleList] = (0, react.useState)(getRuleList);
-	(0, _univerjs_sheets_ui.useHighlightRange)(currentRuleRanges);
-	(0, react.useEffect)(() => {
-		const disposable = commandService.onCommandExecuted((commandInfo) => {
-			if (commandInfo.id === _univerjs_sheets.SetWorksheetActiveOperation.id) setFetchRuleListId(Math.random());
-		});
-		return () => disposable.dispose();
-	});
-	(0, react.useEffect)(() => {
-		setRuleList(getRuleList);
-	}, [
-		selectValue,
-		fetchRuleListId,
-		unitId,
-		subUnitId
-	]);
-	(0, react.useEffect)(() => {
-		if (selectValue === "2") return;
-		const subscription = new rxjs.Observable((commandSubscribe) => {
+	const ruleList = (0, _univerjs_ui.useObservable)(() => {
+		const commandEvent$ = new rxjs.Observable((subscriber) => {
 			const commandList = [
 				_univerjs_sheets.SetSelectionsOperation.id,
 				_univerjs_sheets_conditional_formatting.AddConditionalRuleMutation.id,
@@ -4390,29 +4784,25 @@ const RuleList = (props) => {
 				_univerjs_sheets_conditional_formatting.MoveConditionalRuleMutation.id
 			];
 			const disposable = commandService.onCommandExecuted((commandInfo) => {
-				const { id, params } = commandInfo;
-				const unitId = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).getUnitId();
-				if (commandList.includes(id) && params.unitId === unitId) commandSubscribe.next(null);
+				var _commandInfo$params;
+				if (commandInfo.id === _univerjs_sheets.SetWorksheetActiveOperation.id) {
+					subscriber.next("immediate");
+					return;
+				}
+				const commandUnitId = (_commandInfo$params = commandInfo.params) === null || _commandInfo$params === void 0 ? void 0 : _commandInfo$params.unitId;
+				if (selectValue === "1" && commandList.includes(commandInfo.id) && commandUnitId === unitId) subscriber.next("debounced");
 			});
 			return () => disposable.dispose();
-		}).pipe((0, rxjs.debounceTime)(16)).subscribe(() => {
-			setRuleList(getRuleList);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [
-		univerInstanceService,
+		}).pipe((0, rxjs.share)());
+		return (0, rxjs.merge)(conditionalFormattingRuleModel.$ruleChange, commandEvent$.pipe((0, rxjs.filter)((event) => event === "immediate")), commandEvent$.pipe((0, rxjs.filter)((event) => event === "debounced"), (0, rxjs.debounceTime)(16))).pipe((0, rxjs.map)(getRuleList), (0, rxjs.startWith)(getRuleList()));
+	}, [], false, [
+		commandService,
+		conditionalFormattingRuleModel,
 		selectValue,
-		unitId,
-		subUnitId
+		subUnitId,
+		unitId
 	]);
-	(0, react.useEffect)(() => {
-		const dispose = conditionalFormattingRuleModel.$ruleChange.subscribe(() => {
-			setFetchRuleListId(Math.random());
-		});
-		return () => dispose.unsubscribe();
-	}, [conditionalFormattingRuleModel]);
+	(0, _univerjs_sheets_ui.useHighlightRange)(currentRuleRanges);
 	const handleDelete = (rule) => {
 		var _getActiveSheet;
 		const unitId = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).getUnitId();
@@ -4564,7 +4954,7 @@ const RuleList = (props) => {
 			]
 		})
 	}) })] });
-};
+}
 
 //#endregion
 //#region src/views/ConditionFormattingPanel.tsx
@@ -4624,180 +5014,15 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 		this.disposeWithMe(this._componentManager.register(CF_PANEL_KEY, ConditionFormattingPanel));
 	}
 	_registerIcons() {
-		this.disposeWithMe(this._iconManager.register({ ConditionsDoubleIcon: _univerjs_icons.ConditionsDoubleIcon }));
+		this.disposeWithMe(this._iconManager.register({
+			ConditionsDoubleIcon: _univerjs_icons.ConditionsDoubleIcon,
+			DataBarIcon: _univerjs_icons.DataBarIcon,
+			RatingIcon: _univerjs_icons.RatingIcon
+		}));
 	}
 };
 ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IconManager))], ComponentsController);
 
-//#endregion
-//#region src/menu/manage-rule.ts
-const commandList = [
-	_univerjs_sheets.SetWorksheetActiveOperation.id,
-	_univerjs_sheets_conditional_formatting.AddConditionalRuleMutation.id,
-	_univerjs_sheets_conditional_formatting.SetConditionalRuleMutation.id,
-	_univerjs_sheets_conditional_formatting.DeleteConditionalRuleMutation.id,
-	_univerjs_sheets_conditional_formatting.MoveConditionalRuleMutation.id
-];
-const commonSelections = [
-	{
-		label: {
-			name: "sheets-conditional-formatting-ui.ruleType.highlightCell",
-			selectable: false
-		},
-		value: 3
-	},
-	{
-		label: {
-			name: "sheets-conditional-formatting-ui.panel.rankAndAverage",
-			selectable: false
-		},
-		value: 4
-	},
-	{
-		label: {
-			name: "sheets-conditional-formatting-ui.ruleType.formula",
-			selectable: false
-		},
-		value: 5
-	},
-	{
-		label: {
-			name: "sheets-conditional-formatting-ui.ruleType.colorScale",
-			selectable: false
-		},
-		value: 6
-	},
-	{
-		label: {
-			name: "sheets-conditional-formatting-ui.ruleType.dataBar",
-			selectable: false
-		},
-		value: 7
-	},
-	{
-		label: {
-			name: "sheets-conditional-formatting-ui.ruleType.iconSet",
-			selectable: false
-		},
-		value: 8
-	},
-	{
-		label: {
-			name: "sheets-conditional-formatting-ui.menu.manageConditionalFormatting",
-			selectable: false
-		},
-		value: 2
-	},
-	{
-		label: {
-			name: "sheets-conditional-formatting-ui.menu.createConditionalFormatting",
-			selectable: false
-		},
-		value: 1
-	},
-	{
-		label: {
-			name: "sheets-conditional-formatting-ui.menu.clearRangeRules",
-			selectable: false
-		},
-		value: 9,
-		disabled: false
-	},
-	{
-		label: {
-			name: "sheets-conditional-formatting-ui.menu.clearWorkSheetRules",
-			selectable: false
-		},
-		value: 10
-	}
-];
-function FactoryManageConditionalFormattingRule(accessor) {
-	const selectionManagerService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
-	const commandService = accessor.get(_univerjs_core.ICommandService);
-	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-	const conditionalFormattingRuleModel = accessor.get(_univerjs_sheets_conditional_formatting.ConditionalFormattingRuleModel);
-	const clearRangeEnable$ = new rxjs.Observable((subscriber) => (0, rxjs.merge)(selectionManagerService.selectionMoveEnd$, selectionManagerService.selectionSet$, new rxjs.Observable((commandSubscribe) => {
-		const disposable = commandService.onCommandExecuted((commandInfo) => {
-			var _univerInstanceServic;
-			const { id, params } = commandInfo;
-			const unitId = (_univerInstanceServic = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId();
-			if (commandList.includes(id) && params.unitId === unitId) commandSubscribe.next(null);
-		});
-		return () => disposable.dispose();
-	})).pipe((0, rxjs_operators.debounceTime)(16)).subscribe(() => {
-		var _selectionManagerServ;
-		const ranges = ((_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((selection) => selection.range)) || [];
-		const workbook = univerInstanceService.getCurrentUnitOfType(_univerjs_core.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((ruleRange) => ranges.some((range) => _univerjs_core.Rectangle.intersects(range, ruleRange)))).map((rule) => rule.ranges).every((ranges) => {
-			return (0, _univerjs_sheets.checkRangesEditablePermission)(accessor, workbook.getUnitId(), worksheet.getSheetId(), ranges);
-		});
-		subscriber.next(hasPermission);
-	}));
-	const clearSheetEnable$ = new rxjs.Observable((subscriber) => new rxjs.Observable((commandSubscribe) => {
-		const disposable = commandService.onCommandExecuted((commandInfo) => {
-			var _univerInstanceServic2;
-			const { id, params } = commandInfo;
-			const unitId = (_univerInstanceServic2 = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)) === null || _univerInstanceServic2 === void 0 ? void 0 : _univerInstanceServic2.getUnitId();
-			if (commandList.includes(id) && params.unitId === unitId) commandSubscribe.next(null);
-		});
-		return () => disposable.dispose();
-	}).pipe((0, rxjs_operators.debounceTime)(16)).subscribe(() => {
-		const workbook = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
-		if (!workbook) return;
-		const worksheet = workbook.getActiveSheet();
-		if (!worksheet) return;
-		const allRule = conditionalFormattingRuleModel.getSubunitRules(workbook.getUnitId(), worksheet.getSheetId()) || [];
-		if (!allRule.length) {
-			subscriber.next(false);
-			return false;
-		}
-		const hasPermission = allRule.map((rule) => rule.ranges).every((ranges) => {
-			return (0, _univerjs_sheets.checkRangesEditablePermission)(accessor, workbook.getUnitId(), worksheet.getSheetId(), ranges);
-		});
-		subscriber.next(hasPermission);
-	}));
-	const selections$ = new rxjs.Observable((subscriber) => {
-		clearRangeEnable$.subscribe((v) => {
-			const item = commonSelections.find((item) => item.value === 9);
-			if (item) {
-				item.disabled = !v;
-				subscriber.next(commonSelections);
-			}
-		});
-		clearSheetEnable$.subscribe((v) => {
-			const item = commonSelections.find((item) => item.value === 10);
-			if (item) {
-				item.disabled = !v;
-				subscriber.next(commonSelections);
-			}
-		});
-		subscriber.next(commonSelections);
-	});
-	return {
-		id: OpenConditionalFormattingOperator.id,
-		type: _univerjs_ui.MenuItemType.SELECTOR,
-		icon: "ConditionsDoubleIcon",
-		tooltip: "sheets-conditional-formatting-ui.title",
-		selections: selections$,
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
-		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
-			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
-			worksheetTypes: [_univerjs_sheets.WorksheetSetCellStylePermission, _univerjs_sheets.WorksheetEditPermission],
-			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
-		})
-	};
-}
-
-//#endregion
-//#region src/menu/schema.ts
-const menuSchema = { [_univerjs_ui.RibbonDataGroup.RULES]: { [OpenConditionalFormattingOperator.id]: {
-	order: 1,
-	menuItemFactory: FactoryManageConditionalFormattingRule
-} } };
-
 //#endregion
 //#region src/menu/cf.menu.controller.ts
 /**
@@ -4877,6 +5102,7 @@ let UniverSheetsConditionalFormattingUIPlugin = class UniverSheetsConditionalFor
 			AddAverageCfCommand,
 			AddColorScaleConditionalRuleCommand,
 			AddDataBarConditionalRuleCommand,
+			AddIconSetConditionalRuleCommand,
 			AddDuplicateValuesCfCommand,
 			AddNumberCfCommand,
 			AddRankCfCommand,
@@ -4905,6 +5131,7 @@ exports.AddAverageCfCommand = AddAverageCfCommand;
 exports.AddColorScaleConditionalRuleCommand = AddColorScaleConditionalRuleCommand;
 exports.AddDataBarConditionalRuleCommand = AddDataBarConditionalRuleCommand;
 exports.AddDuplicateValuesCfCommand = AddDuplicateValuesCfCommand;
+exports.AddIconSetConditionalRuleCommand = AddIconSetConditionalRuleCommand;
 exports.AddNumberCfCommand = AddNumberCfCommand;
 exports.AddRankCfCommand = AddRankCfCommand;
 exports.AddTextCfCommand = AddTextCfCommand;
@@ -4917,6 +5144,7 @@ Object.defineProperty(exports, 'ConditionalFormattingClearController', {
   }
 });
 exports.OpenConditionalFormattingOperator = OpenConditionalFormattingOperator;
+exports.SheetsConditionalFormattingUIMenuSchema = menuSchema;
 Object.defineProperty(exports, 'UniverSheetsConditionalFormattingMobileUIPlugin', {
   enumerable: true,
   get: function () {