@univerjs/sheets-conditional-formatting-ui 1.0.0-alpha.8 → 1.0.0-beta.1

package/lib/cjs/index.js

@@ -82,10 +82,9 @@ 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 { 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);
+		const ranges = 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));
@@ -153,9 +152,8 @@ 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);
+		const ranges = 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;
@@ -987,7 +985,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting-ui";
-var version = "1.0.0-alpha.8";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -1184,12 +1182,11 @@ const specialPastes = [
 	_univerjs_sheets_ui.PREDEFINED_HOOK_NAME_PASTE.SPECIAL_PASTE_BESIDES_BORDER
 ];
 let ConditionalFormattingCopyPasteController = class ConditionalFormattingCopyPasteController extends _univerjs_core.Disposable {
-	constructor(_sheetClipboardService, _conditionalFormattingRuleModel, _injector, _conditionalFormattingViewModel, _univerInstanceService, _conditionalFormattingRangeTransformService) {
+	constructor(_sheetClipboardService, _conditionalFormattingRuleModel, _injector, _univerInstanceService, _conditionalFormattingRangeTransformService) {
 		super();
 		this._sheetClipboardService = _sheetClipboardService;
 		this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel;
 		this._injector = _injector;
-		this._conditionalFormattingViewModel = _conditionalFormattingViewModel;
 		this._univerInstanceService = _univerInstanceService;
 		this._conditionalFormattingRangeTransformService = _conditionalFormattingRangeTransformService;
 		_defineProperty(this, "_copyInfo", void 0);
@@ -1209,10 +1206,11 @@ let ConditionalFormattingCopyPasteController = class ConditionalFormattingCopyPa
 		}));
 	}
 	_collectConditionalRule(unitId, subUnitId, range) {
-		const matrix = new _univerjs_core.ObjectMatrix();
+		var _this$_conditionalFor;
+		const rules = /* @__PURE__ */ new Map();
 		const cfMap = {};
 		this._copyInfo = {
-			matrix,
+			rules,
 			info: {
 				unitId,
 				subUnitId,
@@ -1223,22 +1221,28 @@ let ConditionalFormattingCopyPasteController = class ConditionalFormattingCopyPa
 			return (0, _univerjs_sheets.rangeToDiscreteRange)(range, accessor, unitId, subUnitId);
 		});
 		if (!discreteRange) return;
-		const { rows, cols } = discreteRange;
-		const cfIdSet = /* @__PURE__ */ new Set();
-		rows.forEach((row, rowIndex) => {
-			cols.forEach((col, colIndex) => {
-				const cellCfList = this._conditionalFormattingViewModel.getCellCfs(unitId, subUnitId, row, col);
-				if (!cellCfList) return;
-				cellCfList.forEach((item) => cfIdSet.add(item.cfId));
-				matrix.setValue(rowIndex, colIndex, cellCfList.map((item) => item.cfId));
+		const { projectRange } = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([discreteRange]);
+		(_this$_conditionalFor = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId)) === null || _this$_conditionalFor === void 0 || _this$_conditionalFor.forEach((rule) => {
+			const projectedRanges = rule.ranges.flatMap((ruleRange) => {
+				const projected = projectRange(ruleRange);
+				return projected ? [projected] : [];
 			});
-		});
-		cfIdSet.forEach((cfId) => {
-			const rule = this._conditionalFormattingRuleModel.getRule(unitId, subUnitId, cfId);
-			if (rule) cfMap[cfId] = rule.rule;
+			if (projectedRanges.length) {
+				rules.set(rule.cfId, projectedRanges.length > 1 ? _univerjs_core.Rectangle.mergeRanges(projectedRanges) : projectedRanges);
+				cfMap[rule.cfId] = {
+					rule: rule.rule,
+					stopIfTrue: rule.stopIfTrue
+				};
+			}
 		});
 	}
 	_generateConditionalFormattingMutations(pasteFrom, pasteTo, payload) {
+		var _this$_conditionalFor2;
+		const copyInfo = this._copyInfo;
+		if (!copyInfo) return {
+			redos: [],
+			undos: []
+		};
 		const { unitId: copyUnitId, subUnitId: copySubUnitId, range: copyRange } = pasteFrom;
 		const { unitId: pastedUnitId, subUnitId: pastedSubUnitId, range: pastedRange } = pasteTo;
 		const { copyType = _univerjs_sheets_ui.COPY_TYPE.COPY } = payload;
@@ -1256,109 +1260,86 @@ let ConditionalFormattingCopyPasteController = class ConditionalFormattingCopyPa
 				undos: []
 			};
 		}
-		const { ranges: [vCopyRange, vPastedRange], mapFunc } = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([copyRange, pastedRange]);
-		const repeatRange = (0, _univerjs_sheets_ui.getRepeatRange)(vCopyRange, vPastedRange, true);
-		const effectedConditionalFormattingRuleRanges = {};
-		_univerjs_core.Range.foreach(vPastedRange, (row, col) => {
-			const { row: realRow, col: realCol } = mapFunc(row, col);
-			const cellCfList = this._conditionalFormattingViewModel.getCellCfs(pastedUnitId, pastedSubUnitId, realRow, realCol);
-			if (cellCfList) cellCfList.forEach((item) => {
-				if (!effectedConditionalFormattingRuleRanges[item.cfId]) {
-					const rule = this._conditionalFormattingRuleModel.getRule(pastedUnitId, pastedSubUnitId, item.cfId);
-					if (!rule) return;
-					effectedConditionalFormattingRuleRanges[item.cfId] = {
-						unitId: pastedUnitId,
-						subUnitId: pastedSubUnitId,
-						ranges: rule.ranges,
-						add: [],
-						remove: []
-					};
-				}
-				effectedConditionalFormattingRuleRanges[item.cfId].remove.push({
-					startRow: realRow,
-					endRow: realRow,
-					startColumn: realCol,
-					endColumn: realCol
-				});
+		const sourceVirtualization = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([copyRange]);
+		const sourceVirtualRange = sourceVirtualization.ranges[0];
+		const targetVirtualization = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([pastedRange]);
+		const targetVirtualRange = targetVirtualization.ranges[0];
+		const repeatRange = (0, _univerjs_sheets_ui.getRepeatRange)(sourceVirtualRange, targetVirtualRange, true);
+		const targetRanges = targetVirtualization.mapRange(targetVirtualRange);
+		const isSameSheet = pastedUnitId === copyUnitId && pastedSubUnitId === copySubUnitId;
+		const effectedConditionalFormattingRuleRanges = /* @__PURE__ */ new Map();
+		const getEffectKey = (unitId, subUnitId, cfId) => JSON.stringify([
+			unitId,
+			subUnitId,
+			cfId
+		]);
+		(_this$_conditionalFor2 = this._conditionalFormattingRuleModel.getSubunitRules(pastedUnitId, pastedSubUnitId)) === null || _this$_conditionalFor2 === void 0 || _this$_conditionalFor2.forEach((rule) => {
+			if (!_univerjs_core.Rectangle.doAnyRangesIntersect(rule.ranges, targetRanges)) return;
+			effectedConditionalFormattingRuleRanges.set(getEffectKey(pastedUnitId, pastedSubUnitId, rule.cfId), {
+				cfId: rule.cfId,
+				unitId: pastedUnitId,
+				subUnitId: pastedSubUnitId,
+				ranges: rule.ranges,
+				add: [],
+				remove: targetRanges
 			});
 		});
-		if (copyType === _univerjs_sheets_ui.COPY_TYPE.CUT && (pastedUnitId !== copyUnitId || pastedSubUnitId !== copySubUnitId)) _univerjs_core.Range.foreach(vCopyRange, (row, col) => {
-			const { row: realRow, col: realCol } = mapFunc(row, col);
-			const cellCfList = this._conditionalFormattingViewModel.getCellCfs(copyUnitId, copySubUnitId, realRow, realCol);
-			if (cellCfList) cellCfList.forEach((item) => {
-				if (!effectedConditionalFormattingRuleRanges[item.cfId]) {
-					const rule = this._conditionalFormattingRuleModel.getRule(copyUnitId, copySubUnitId, item.cfId);
-					if (!rule) return;
-					effectedConditionalFormattingRuleRanges[item.cfId] = {
-						unitId: copyUnitId,
-						subUnitId: copySubUnitId,
-						ranges: rule.ranges,
-						add: [],
-						remove: []
-					};
-				}
-				effectedConditionalFormattingRuleRanges[item.cfId].remove.push({
-					startRow: realRow,
-					endRow: realRow,
-					startColumn: realCol,
-					endColumn: realCol
+		if (copyType === _univerjs_sheets_ui.COPY_TYPE.CUT && (pastedUnitId !== copyUnitId || pastedSubUnitId !== copySubUnitId)) {
+			const sourceRanges = sourceVirtualization.mapRange(sourceVirtualRange);
+			copyInfo.rules.forEach((_ranges, cfId) => {
+				const rule = this._conditionalFormattingRuleModel.getRule(copyUnitId, copySubUnitId, cfId);
+				if (!rule) return;
+				effectedConditionalFormattingRuleRanges.set(getEffectKey(copyUnitId, copySubUnitId, cfId), {
+					cfId,
+					unitId: copyUnitId,
+					subUnitId: copySubUnitId,
+					ranges: rule.ranges,
+					add: [],
+					remove: sourceRanges
 				});
 			});
-		});
-		const { matrix, info } = this._copyInfo;
-		const waitAddRule = [];
+		}
+		const { rules, info } = copyInfo;
+		const waitAddRule = /* @__PURE__ */ new Map();
 		const cacheCfIdMap = {};
 		const getCurrentSheetCfRule = (copyRangeCfId) => {
 			const oldRule = info === null || info === void 0 ? void 0 : info.cfMap[copyRangeCfId];
-			const targetRule = [...this._conditionalFormattingRuleModel.getSubunitRules(pastedUnitId, pastedSubUnitId) || [], ...waitAddRule].find((rule) => {
-				return _univerjs_core.Tools.diffValue(rule.rule, oldRule);
-			});
-			if (targetRule) {
-				cacheCfIdMap[copyRangeCfId] = targetRule;
-				return targetRule;
-			} else {
-				const rule = {
-					rule: oldRule,
-					cfId: this._conditionalFormattingRuleModel.createCfId(pastedUnitId, pastedSubUnitId),
-					ranges: [],
-					stopIfTrue: false
-				};
-				cacheCfIdMap[copyRangeCfId] = rule;
-				waitAddRule.push(rule);
-				return rule;
+			if (isSameSheet) {
+				const rule = this._conditionalFormattingRuleModel.getRule(pastedUnitId, pastedSubUnitId, copyRangeCfId);
+				if (rule) {
+					cacheCfIdMap[copyRangeCfId] = rule;
+					return rule;
+				}
 			}
+			const rule = {
+				rule: oldRule.rule,
+				cfId: this._conditionalFormattingRuleModel.createCfId(pastedUnitId, pastedSubUnitId),
+				ranges: [],
+				stopIfTrue: oldRule.stopIfTrue
+			};
+			cacheCfIdMap[copyRangeCfId] = rule;
+			waitAddRule.set(rule.cfId, rule);
+			return rule;
 		};
-		repeatRange.forEach((item) => {
-			matrix && matrix.forValue((row, col, copyRangeCfIdList) => {
-				const range = _univerjs_core.Rectangle.getPositionRange({
-					startRow: row,
-					endRow: row,
-					startColumn: col,
-					endColumn: col
-				}, item.startRange);
-				const { row: _row, col: _col } = mapFunc(range.startRow, range.startColumn);
-				copyRangeCfIdList.forEach((cfId) => {
-					const rule = cacheCfIdMap[cfId] || getCurrentSheetCfRule(cfId);
-					if (!effectedConditionalFormattingRuleRanges[rule.cfId]) effectedConditionalFormattingRuleRanges[rule.cfId] = {
-						unitId: pastedUnitId,
-						subUnitId: pastedSubUnitId,
-						ranges: rule.ranges,
-						add: [],
-						remove: []
-					};
-					effectedConditionalFormattingRuleRanges[rule.cfId].add.push({
-						startRow: _row,
-						endRow: _row,
-						startColumn: _col,
-						endColumn: _col
-					});
-				});
+		const sourceRuleEntries = Array.from(rules.entries());
+		if (!isSameSheet) sourceRuleEntries.reverse();
+		sourceRuleEntries.forEach(([cfId, sourceRanges]) => {
+			const rule = cacheCfIdMap[cfId] || getCurrentSheetCfRule(cfId);
+			const effectKey = getEffectKey(pastedUnitId, pastedSubUnitId, rule.cfId);
+			if (!effectedConditionalFormattingRuleRanges.has(effectKey)) effectedConditionalFormattingRuleRanges.set(effectKey, {
+				cfId: rule.cfId,
+				unitId: pastedUnitId,
+				subUnitId: pastedSubUnitId,
+				ranges: rule.ranges,
+				add: [],
+				remove: []
 			});
+			effectedConditionalFormattingRuleRanges.get(effectKey).add.push(...repeatRange.flatMap((item) => sourceRanges.flatMap((sourceRange) => targetVirtualization.mapRange(_univerjs_core.Rectangle.getPositionRange(sourceRange, item.startRange)))));
 		});
 		const redos = [];
 		const undos = [];
-		for (const cfId in effectedConditionalFormattingRuleRanges) {
-			const { unitId, subUnitId, ranges: sourceRanges, add, remove } = effectedConditionalFormattingRuleRanges[cfId];
+		for (const effect of effectedConditionalFormattingRuleRanges.values()) {
+			const { cfId, unitId, subUnitId, ranges: sourceRanges, add, remove } = effect;
 			const ranges = this._conditionalFormattingRangeTransformService.applyRangeDelta(sourceRanges, remove, add);
 			if (!ranges.length) {
 				const deleteParams = {
@@ -1371,13 +1352,15 @@ let ConditionalFormattingCopyPasteController = class ConditionalFormattingCopyPa
 					params: deleteParams
 				});
 				undos.push(...(0, _univerjs_sheets_conditional_formatting.DeleteConditionalRuleMutationUndoFactory)(this._injector, deleteParams));
+				continue;
 			}
-			if (waitAddRule.some((rule) => rule.cfId === cfId)) {
+			const waitAdd = waitAddRule.get(cfId);
+			if (waitAdd) {
 				const addParams = {
 					unitId: pastedUnitId,
 					subUnitId: pastedSubUnitId,
 					rule: {
-						...waitAddRule.find((rule) => rule.cfId === cfId),
+						...waitAdd,
 						ranges
 					}
 				};
@@ -1414,9 +1397,8 @@ ConditionalFormattingCopyPasteController = __decorate([
 	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.ISheetClipboardService)),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRuleModel)),
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingViewModel)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRangeTransformService))
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRangeTransformService))
 ], ConditionalFormattingCopyPasteController);
 
 //#endregion
@@ -1502,7 +1484,7 @@ ConditionalFormattingPermissionController = __decorate([
 //#endregion
 //#region src/controllers/cf.render.controller.ts
 let SheetsCfRenderController = class SheetsCfRenderController extends _univerjs_core.Disposable {
-	constructor(_sheetInterceptorService, _conditionalFormattingService, _univerInstanceService, _renderManagerService, _conditionalFormattingViewModel, _conditionalFormattingRuleModel) {
+	constructor(_sheetInterceptorService, _conditionalFormattingService, _univerInstanceService, _renderManagerService, _conditionalFormattingViewModel, _conditionalFormattingRuleModel, _conditionalFormattingRangeIndexModel) {
 		super();
 		this._sheetInterceptorService = _sheetInterceptorService;
 		this._conditionalFormattingService = _conditionalFormattingService;
@@ -1510,20 +1492,75 @@ let SheetsCfRenderController = class SheetsCfRenderController extends _univerjs_
 		this._renderManagerService = _renderManagerService;
 		this._conditionalFormattingViewModel = _conditionalFormattingViewModel;
 		this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel;
+		this._conditionalFormattingRangeIndexModel = _conditionalFormattingRangeIndexModel;
 		_defineProperty(this, "_ruleChangeCacheMap", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_boundRenderExtensions", /* @__PURE__ */ new Map());
 		this._initViewModelInterceptor();
+		this._initRenderRangeResolvers();
 		this._initSkeleton();
 		queueMicrotask(() => this._markActiveSheetRulesDirty());
 		this.disposeWithMe(() => {
 			this._ruleChangeCacheMap.clear();
+			this._boundRenderExtensions.forEach((extensions) => {
+				extensions.forEach((extension) => extension.setRenderRangeResolver(null));
+			});
+			this._boundRenderExtensions.clear();
 		});
 	}
+	_initRenderRangeResolvers() {
+		const dataBarResolver = this._createRenderRangeResolver(_univerjs_sheets_conditional_formatting.CFRuleType.dataBar);
+		const iconResolver = this._createRenderRangeResolver(_univerjs_sheets_conditional_formatting.CFRuleType.iconSet);
+		const bind = (unitId) => {
+			var _this$_renderManagerS;
+			this._unbindRenderRangeResolvers(unitId);
+			const mainComponent = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.mainComponent;
+			if (!mainComponent || !("getExtensionByKey" in mainComponent)) return;
+			const extensions = /* @__PURE__ */ new Set();
+			const dataBar = mainComponent.getExtensionByKey(_univerjs_sheets_conditional_formatting.dataBarUKey);
+			if (dataBar instanceof _univerjs_sheets_conditional_formatting.DataBar) {
+				dataBar.setRenderRangeResolver(dataBarResolver);
+				extensions.add(dataBar);
+			}
+			const icon = mainComponent.getExtensionByKey(_univerjs_sheets_conditional_formatting.IconUKey);
+			if (icon instanceof _univerjs_sheets_conditional_formatting.ConditionalFormattingIcon) {
+				icon.setRenderRangeResolver(iconResolver);
+				extensions.add(icon);
+			}
+			if (extensions.size) this._boundRenderExtensions.set(unitId, extensions);
+		};
+		this._renderManagerService.getAllRenderersOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).forEach((render) => bind(render.unitId));
+		this.disposeWithMe(this._renderManagerService.created$.subscribe((render) => {
+			if (render.type === _univerjs_core.UniverInstanceType.UNIVER_SHEET) bind(render.unitId);
+		}));
+		this.disposeWithMe(this._renderManagerService.disposed$.subscribe((unitId) => this._unbindRenderRangeResolvers(unitId)));
+	}
+	_createRenderRangeResolver(ruleType) {
+		return (unitId, subUnitId, ranges) => {
+			const intersections = [];
+			const indexedRules = this._conditionalFormattingRangeIndexModel.getRulesByRanges(unitId, subUnitId, ranges).filter((rule) => rule.rule.type === ruleType);
+			const matchingRules = indexedRules.length ? indexedRules : (this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId) ?? []).filter((rule) => rule.rule.type === ruleType);
+			ranges.forEach((range) => {
+				matchingRules.forEach((rule) => {
+					rule.ranges.forEach((ruleRange) => {
+						const intersection = (0, _univerjs_core.getIntersectRange)(range, ruleRange);
+						if (intersection) intersections.push(intersection);
+					});
+				});
+			});
+			return intersections.length > 1 ? _univerjs_core.Rectangle.mergeRanges(intersections) : intersections;
+		};
+	}
+	_unbindRenderRangeResolvers(unitId) {
+		const extensions = this._boundRenderExtensions.get(unitId);
+		extensions === null || extensions === void 0 || extensions.forEach((extension) => extension.setRenderRangeResolver(null));
+		this._boundRenderExtensions.delete(unitId);
+	}
 	_collectDirtyRanges(items, unitId, subUnitId) {
 		const ranges = [];
 		items.forEach((item) => {
-			var _item$rule, _rule$ranges;
+			var _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;
+			const rule = 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;
@@ -1553,13 +1590,12 @@ let SheetsCfRenderController = class SheetsCfRenderController extends _univerjs_
 		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 : [];
+		const rules = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId) ?? [];
 		if (!rules.length) return;
 		this._markDirtySkeleton(rules.map((rule) => ({
 			rule,
@@ -1613,7 +1649,8 @@ SheetsCfRenderController = __decorate([
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
 	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_engine_render.IRenderManagerService)),
 	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingViewModel)),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRuleModel))
+	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRuleModel)),
+	__decorateParam(6, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRangeIndexModel))
 ], SheetsCfRenderController);
 
 //#endregion
@@ -1667,13 +1704,12 @@ UniverSheetsConditionalFormattingMobileUIPlugin = __decorate([
 //#endregion
 //#region src/controllers/cf.auto-fill.controller.ts
 let ConditionalFormattingAutoFillController = class ConditionalFormattingAutoFillController extends _univerjs_core.Disposable {
-	constructor(_injector, _univerInstanceService, _autoFillService, _conditionalFormattingRuleModel, _conditionalFormattingViewModel, _conditionalFormattingRangeTransformService) {
+	constructor(_injector, _univerInstanceService, _autoFillService, _conditionalFormattingRuleModel, _conditionalFormattingRangeTransformService) {
 		super();
 		this._injector = _injector;
 		this._univerInstanceService = _univerInstanceService;
 		this._autoFillService = _autoFillService;
 		this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel;
-		this._conditionalFormattingViewModel = _conditionalFormattingViewModel;
 		this._conditionalFormattingRangeTransformService = _conditionalFormattingRangeTransformService;
 		this._initAutoFill();
 	}
@@ -1682,11 +1718,24 @@ let ConditionalFormattingAutoFillController = class ConditionalFormattingAutoFil
 			redos: [],
 			undos: []
 		});
-		const loopFunc = (sourceStartCell, targetStartCell, relativeRange, rangeMap, rangeDeltaMap, mapFunc) => {
-			var _getActiveSheet;
-			const unitId = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).getUnitId();
-			const subUnitId = (_getActiveSheet = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).getActiveSheet()) === null || _getActiveSheet === void 0 ? void 0 : _getActiveSheet.getSheetId();
-			if (!unitId || !subUnitId) return;
+		const generalApplyFunc = (sourceRange, targetRange) => {
+			var _this$_univerInstance, _this$_univerInstance2;
+			const unitId = (_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId();
+			const subUnitId = (_this$_univerInstance2 = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)) === null || _this$_univerInstance2 === void 0 || (_this$_univerInstance2 = _this$_univerInstance2.getActiveSheet()) === null || _this$_univerInstance2 === void 0 ? void 0 : _this$_univerInstance2.getSheetId();
+			const rangeMap = /* @__PURE__ */ new Map();
+			const rangeDeltaMap = /* @__PURE__ */ new Map();
+			const redos = [];
+			const undos = [];
+			if (!unitId || !subUnitId) return noopReturnFunc();
+			const virtualization = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([sourceRange, targetRange]);
+			const [vSourceRange, vTargetRange] = virtualization.ranges;
+			const repeats = _univerjs_sheets.AutoFillTools.getAutoFillRepeatRange(vSourceRange, vTargetRange);
+			const targetRanges = repeats.flatMap((repeat) => virtualization.mapRange(_univerjs_core.Rectangle.getPositionRange(repeat.relativeRange, {
+				startRow: repeat.repeatStartCell.row,
+				endRow: repeat.repeatStartCell.row,
+				startColumn: repeat.repeatStartCell.col,
+				endColumn: repeat.repeatStartCell.col
+			})));
 			const getRangeDelta = (cfId) => {
 				let rangeDelta = rangeDeltaMap.get(cfId);
 				if (!rangeDelta) {
@@ -1698,80 +1747,29 @@ let ConditionalFormattingAutoFillController = class ConditionalFormattingAutoFil
 				}
 				return rangeDelta;
 			};
-			const ensureRuleRanges = (cfId) => {
-				if (rangeMap.has(cfId)) return true;
-				const rule = this._conditionalFormattingRuleModel.getRule(unitId, subUnitId, cfId);
-				if (!rule) return false;
-				rangeMap.set(cfId, rule.ranges);
-				return true;
-			};
-			const sourceRange = {
-				startRow: sourceStartCell.row,
-				startColumn: sourceStartCell.col,
-				endColumn: sourceStartCell.col,
-				endRow: sourceStartCell.row
-			};
-			const targetRange = {
-				startRow: targetStartCell.row,
-				startColumn: targetStartCell.col,
-				endColumn: targetStartCell.col,
-				endRow: targetStartCell.row
-			};
-			_univerjs_core.Range.foreach(relativeRange, (row, col) => {
-				const sourcePositionRange = _univerjs_core.Rectangle.getPositionRange({
-					startRow: row,
-					startColumn: col,
-					endColumn: col,
-					endRow: row
-				}, sourceRange);
-				const targetPositionRange = _univerjs_core.Rectangle.getPositionRange({
-					startRow: row,
-					startColumn: col,
-					endColumn: col,
-					endRow: row
-				}, targetRange);
-				const { row: sourceRow, col: sourceCol } = mapFunc(sourcePositionRange.startRow, sourcePositionRange.startColumn);
-				const sourceCellCf = this._conditionalFormattingViewModel.getCellCfs(unitId, subUnitId, sourceRow, sourceCol);
-				const { row: targetRow, col: targetCol } = mapFunc(targetPositionRange.startRow, targetPositionRange.startColumn);
-				const targetCellCf = this._conditionalFormattingViewModel.getCellCfs(unitId, subUnitId, targetRow, targetCol);
-				if (targetCellCf) targetCellCf.forEach((cf) => {
-					if (!ensureRuleRanges(cf.cfId)) return;
-					getRangeDelta(cf.cfId).remove.push({
-						startRow: targetRow,
-						endRow: targetRow,
-						startColumn: targetCol,
-						endColumn: targetCol
-					});
-				});
-				if (sourceCellCf) sourceCellCf.forEach((cf) => {
-					if (!ensureRuleRanges(cf.cfId)) return;
-					getRangeDelta(cf.cfId).add.push({
-						startRow: targetRow,
-						endRow: targetRow,
-						startColumn: targetCol,
-						endColumn: targetCol
-					});
+			(this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId) ?? []).forEach((rule) => {
+				if (_univerjs_core.Rectangle.doAnyRangesIntersect(rule.ranges, targetRanges)) {
+					rangeMap.set(rule.cfId, rule.ranges);
+					getRangeDelta(rule.cfId).remove.push(...targetRanges);
+				}
+				const sourceRanges = rule.ranges.flatMap((range) => {
+					const projected = virtualization.projectRange(range);
+					const intersected = projected && (0, _univerjs_core.getIntersectRange)(projected, vSourceRange);
+					return intersected ? [_univerjs_core.Rectangle.getRelativeRange(intersected, vSourceRange)] : [];
 				});
-			});
-		};
-		const generalApplyFunc = (sourceRange, targetRange) => {
-			var _this$_univerInstance, _this$_univerInstance2;
-			const unitId = (_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId();
-			const subUnitId = (_this$_univerInstance2 = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)) === null || _this$_univerInstance2 === void 0 || (_this$_univerInstance2 = _this$_univerInstance2.getActiveSheet()) === null || _this$_univerInstance2 === void 0 ? void 0 : _this$_univerInstance2.getSheetId();
-			const rangeMap = /* @__PURE__ */ new Map();
-			const rangeDeltaMap = /* @__PURE__ */ new Map();
-			const redos = [];
-			const undos = [];
-			if (!unitId || !subUnitId) return noopReturnFunc();
-			const virtualRange = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([sourceRange, targetRange]);
-			const [vSourceRange, vTargetRange] = virtualRange.ranges;
-			const { mapFunc } = virtualRange;
-			const sourceStartCell = {
-				row: vSourceRange.startRow,
-				col: vSourceRange.startColumn
-			};
-			_univerjs_sheets.AutoFillTools.getAutoFillRepeatRange(vSourceRange, vTargetRange).forEach((repeat) => {
-				loopFunc(sourceStartCell, repeat.repeatStartCell, repeat.relativeRange, rangeMap, rangeDeltaMap, mapFunc);
+				const additions = repeats.flatMap((repeat) => sourceRanges.flatMap((range) => {
+					const copiedRange = (0, _univerjs_core.getIntersectRange)(range, repeat.relativeRange);
+					return copiedRange ? virtualization.mapRange(_univerjs_core.Rectangle.getPositionRange(copiedRange, {
+						startRow: repeat.repeatStartCell.row,
+						endRow: repeat.repeatStartCell.row,
+						startColumn: repeat.repeatStartCell.col,
+						endColumn: repeat.repeatStartCell.col
+					})) : [];
+				}));
+				if (additions.length) {
+					rangeMap.set(rule.cfId, rule.ranges);
+					getRangeDelta(rule.cfId).add.push(...additions);
+				}
 			});
 			rangeDeltaMap.forEach((rangeDelta, cfId) => {
 				const ranges = rangeMap.get(cfId);
@@ -1831,8 +1829,7 @@ ConditionalFormattingAutoFillController = __decorate([
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets.IAutoFillService)),
 	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRuleModel)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingViewModel)),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRangeTransformService))
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRangeTransformService))
 ], ConditionalFormattingAutoFillController);
 
 //#endregion
@@ -1866,10 +1863,9 @@ let ConditionalFormattingEditorController = class ConditionalFormattingEditorCon
 	*/
 	_initInterceptorEditorEnd() {
 		this.disposeWithMe((0, _univerjs_core.toDisposable)(this._sheetInterceptorService.writeCellInterceptor.intercept(_univerjs_sheets.AFTER_CELL_EDIT, { handler: (value, context, next) => {
-			var _result$style;
 			if (!value) next(value);
 			const result = this._conditionalFormattingService.composeStyle(context.unitId, context.subUnitId, context.row, context.col);
-			const cfStyle = (_result$style = result === null || result === void 0 ? void 0 : result.style) !== null && _result$style !== void 0 ? _result$style : {};
+			const cfStyle = (result === null || result === void 0 ? void 0 : result.style) ?? {};
 			const keys = Object.keys(cfStyle);
 			if (value === null || value === void 0 ? void 0 : value.p) {
 				var _value$p$body;
@@ -1950,14 +1946,13 @@ const repeatByRange = (sourceRange, targetRange) => {
 	return repeatList;
 };
 let ConditionalFormattingPainterController = class ConditionalFormattingPainterController extends _univerjs_core.Disposable {
-	constructor(_injector, _univerInstanceService, _formatPainterService, _sheetsSelectionsService, _conditionalFormattingRuleModel, _conditionalFormattingViewModel, _conditionalFormattingRangeTransformService) {
+	constructor(_injector, _univerInstanceService, _formatPainterService, _sheetsSelectionsService, _conditionalFormattingRuleModel, _conditionalFormattingRangeTransformService) {
 		super();
 		this._injector = _injector;
 		this._univerInstanceService = _univerInstanceService;
 		this._formatPainterService = _formatPainterService;
 		this._sheetsSelectionsService = _sheetsSelectionsService;
 		this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel;
-		this._conditionalFormattingViewModel = _conditionalFormattingViewModel;
 		this._conditionalFormattingRangeTransformService = _conditionalFormattingRangeTransformService;
 		_defineProperty(this, "_painterConfig", null);
 		this._initFormattingPainter();
@@ -1967,9 +1962,16 @@ let ConditionalFormattingPainterController = class ConditionalFormattingPainterC
 			redos: [],
 			undos: []
 		});
-		const loopFunc = (sourceStartCell, targetStartCell, relativeRange, rangeMap, rangeDeltaMap, config) => {
-			const { unitId: sourceUnitId, subUnitId: sourceSubUnitId } = this._painterConfig;
-			const { targetUnitId, targetSubUnitId } = config;
+		const generalApplyFunc = (targetUnitId, targetSubUnitId, targetRange) => {
+			const { range: sourceRange, unitId: sourceUnitId, subUnitId: sourceSubUnitId } = this._painterConfig;
+			const isSkipSheet = targetUnitId !== sourceUnitId || sourceSubUnitId !== targetSubUnitId;
+			const rangeMap = /* @__PURE__ */ new Map();
+			const rangeDeltaMap = /* @__PURE__ */ new Map();
+			const redos = [];
+			const undos = [];
+			if (!targetUnitId || !targetSubUnitId || !sourceUnitId || !sourceSubUnitId) return noopReturnFunc();
+			const repeats = repeatByRange(sourceRange, targetRange);
+			const targetRanges = repeats.map((repeat) => _univerjs_core.Rectangle.getPositionRange(repeat.repeatRelativeRange, repeat.startRange));
 			const getRangeDelta = (cfId) => {
 				let rangeDelta = rangeDeltaMap.get(cfId);
 				if (!rangeDelta) {
@@ -1981,83 +1983,38 @@ let ConditionalFormattingPainterController = class ConditionalFormattingPainterC
 				}
 				return rangeDelta;
 			};
-			const sourceRange = {
-				startRow: sourceStartCell.row,
-				startColumn: sourceStartCell.col,
-				endColumn: sourceStartCell.col,
-				endRow: sourceStartCell.row
-			};
-			const targetRange = {
-				startRow: targetStartCell.row,
-				startColumn: targetStartCell.col,
-				endColumn: targetStartCell.col,
-				endRow: targetStartCell.row
-			};
-			_univerjs_core.Range.foreach(relativeRange, (row, col) => {
-				const sourcePositionRange = _univerjs_core.Rectangle.getPositionRange({
-					startRow: row,
-					startColumn: col,
-					endColumn: col,
-					endRow: row
-				}, sourceRange);
-				const targetPositionRange = _univerjs_core.Rectangle.getPositionRange({
-					startRow: row,
-					startColumn: col,
-					endColumn: col,
-					endRow: row
-				}, targetRange);
-				const sourceCellCf = this._conditionalFormattingViewModel.getCellCfs(sourceUnitId, sourceSubUnitId, sourcePositionRange.startRow, sourcePositionRange.startColumn);
-				const targetCellCf = this._conditionalFormattingViewModel.getCellCfs(targetUnitId, targetSubUnitId, targetPositionRange.startRow, targetPositionRange.startColumn);
-				if (targetCellCf) targetCellCf.forEach((cf) => {
-					if (!rangeMap.has(cf.cfId)) {
-						const rule = this._conditionalFormattingRuleModel.getRule(targetUnitId, targetSubUnitId, cf.cfId);
-						if (!rule) return;
-						rangeMap.set(cf.cfId, rule.ranges);
-					}
-					getRangeDelta(cf.cfId).remove.push({
-						startRow: targetPositionRange.startRow,
-						endRow: targetPositionRange.startRow,
-						startColumn: targetPositionRange.startColumn,
-						endColumn: targetPositionRange.startColumn
-					});
-				});
-				if (sourceCellCf) sourceCellCf.forEach((cf) => {
-					if (!rangeMap.has(cf.cfId)) return;
-					getRangeDelta(cf.cfId).add.push({
-						startRow: targetPositionRange.startRow,
-						endRow: targetPositionRange.startRow,
-						startColumn: targetPositionRange.startColumn,
-						endColumn: targetPositionRange.startColumn
-					});
-				});
-			});
-		};
-		const generalApplyFunc = (targetUnitId, targetSubUnitId, targetRange) => {
-			var _this$_conditionalFor;
-			const { range: sourceRange, unitId: sourceUnitId, subUnitId: sourceSubUnitId } = this._painterConfig;
-			const isSkipSheet = targetUnitId !== sourceUnitId || sourceSubUnitId !== targetSubUnitId;
-			const rangeMap = /* @__PURE__ */ new Map();
-			const rangeDeltaMap = /* @__PURE__ */ new Map();
-			const redos = [];
-			const undos = [];
-			if (!targetUnitId || !targetSubUnitId || !sourceUnitId || !sourceSubUnitId) return noopReturnFunc();
-			const ruleList = (_this$_conditionalFor = this._conditionalFormattingRuleModel.getSubunitRules(sourceUnitId, sourceSubUnitId)) !== null && _this$_conditionalFor !== void 0 ? _this$_conditionalFor : [];
-			ruleList === null || ruleList === void 0 || ruleList.forEach((rule) => {
-				const { ranges, cfId } = rule;
-				if (ranges.some((range) => _univerjs_core.Rectangle.intersects(sourceRange, range))) rangeMap.set(cfId, isSkipSheet ? [] : ranges);
+			const targetRuleList = this._conditionalFormattingRuleModel.getSubunitRules(targetUnitId, targetSubUnitId) ?? [];
+			const waitAddRule = /* @__PURE__ */ new Map();
+			targetRuleList.forEach((rule) => {
+				if (_univerjs_core.Rectangle.doAnyRangesIntersect(rule.ranges, targetRanges)) {
+					rangeMap.set(rule.cfId, rule.ranges);
+					getRangeDelta(rule.cfId).remove.push(...targetRanges);
+				}
 			});
-			const sourceStartCell = {
-				row: sourceRange.startRow,
-				col: sourceRange.startColumn
-			};
-			repeatByRange(sourceRange, targetRange).forEach((repeat) => {
-				loopFunc(sourceStartCell, {
-					row: repeat.startRange.startRow,
-					col: repeat.startRange.startColumn
-				}, repeat.repeatRelativeRange, rangeMap, rangeDeltaMap, {
-					targetUnitId,
-					targetSubUnitId
+			const sourceRuleList = this._conditionalFormattingRuleModel.getSubunitRules(sourceUnitId, sourceSubUnitId) ?? [];
+			(isSkipSheet ? [...sourceRuleList].reverse() : sourceRuleList).forEach((rule) => {
+				const sourceRanges = rule.ranges.flatMap((range) => {
+					const intersected = (0, _univerjs_core.getIntersectRange)(range, sourceRange);
+					return intersected ? [_univerjs_core.Rectangle.getRelativeRange(intersected, sourceRange)] : [];
 				});
+				const additions = repeats.flatMap((repeat) => sourceRanges.flatMap((range) => {
+					const copiedRange = (0, _univerjs_core.getIntersectRange)(range, repeat.repeatRelativeRange);
+					return copiedRange ? [_univerjs_core.Rectangle.getPositionRange(copiedRange, repeat.startRange)] : [];
+				}));
+				if (additions.length) {
+					let targetCfId = rule.cfId;
+					if (isSkipSheet) {
+						targetCfId = this._conditionalFormattingRuleModel.createCfId(targetUnitId, targetSubUnitId);
+						waitAddRule.set(targetCfId, {
+							..._univerjs_core.Tools.deepClone(rule),
+							cfId: targetCfId,
+							ranges: []
+						});
+						rangeMap.set(targetCfId, []);
+					}
+					if (!rangeMap.has(targetCfId)) rangeMap.set(targetCfId, rule.ranges);
+					getRangeDelta(targetCfId).add.push(...additions);
+				}
 			});
 			rangeDeltaMap.forEach((rangeDelta, cfId) => {
 				const ranges = rangeMap.get(cfId);
@@ -2095,28 +2052,27 @@ let ConditionalFormattingPainterController = class ConditionalFormattingPainterC
 						undos.push(...(0, _univerjs_sheets_conditional_formatting.DeleteConditionalRuleMutationUndoFactory)(this._injector, params));
 					}
 				} else {
-					const rule = this._conditionalFormattingRuleModel.getRule(targetUnitId, targetSubUnitId, cfId);
-					if (!rule) {
+					const waitAdd = waitAddRule.get(cfId);
+					if (waitAdd) {
 						if (ranges.length) {
-							const sourceRule = this._conditionalFormattingRuleModel.getRule(sourceUnitId, sourceSubUnitId, cfId);
-							if (sourceRule) {
-								const params = {
-									unitId: targetUnitId,
-									subUnitId: targetSubUnitId,
-									rule: {
-										..._univerjs_core.Tools.deepClone(sourceRule),
-										cfId: this._conditionalFormattingRuleModel.createCfId(targetUnitId, targetSubUnitId),
-										ranges
-									}
-								};
-								redos.push({
-									id: _univerjs_sheets_conditional_formatting.AddConditionalRuleMutation.id,
-									params
-								});
-								undos.push((0, _univerjs_sheets_conditional_formatting.AddConditionalRuleMutationUndoFactory)(this._injector, params));
-							}
+							const params = {
+								unitId: targetUnitId,
+								subUnitId: targetSubUnitId,
+								rule: {
+									...waitAdd,
+									ranges
+								}
+							};
+							redos.push({
+								id: _univerjs_sheets_conditional_formatting.AddConditionalRuleMutation.id,
+								params
+							});
+							undos.push((0, _univerjs_sheets_conditional_formatting.AddConditionalRuleMutationUndoFactory)(this._injector, params));
 						}
-					} else if (ranges.length) {
+						return;
+					}
+					const rule = this._conditionalFormattingRuleModel.getRule(targetUnitId, targetSubUnitId, cfId);
+					if (rule) if (ranges.length) {
 						const params = {
 							unitId: targetUnitId,
 							subUnitId: targetSubUnitId,
@@ -2189,8 +2145,7 @@ ConditionalFormattingPainterController = __decorate([
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.IFormatPainterService)),
 	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService)),
 	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRuleModel)),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingViewModel)),
-	__decorateParam(6, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRangeTransformService))
+	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets_conditional_formatting.ConditionalFormattingRangeTransformService))
 ], ConditionalFormattingPainterController);
 
 //#endregion
@@ -2295,7 +2250,6 @@ function Preview(props) {
 	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: {
-			var _rule$config$nativeCo, _rule$config$positive;
 			const { isGradient } = rule.config;
 			const positiveColor = isGradient ? `linear-gradient(to right, ${rule.config.positiveColor || _univerjs_sheets_conditional_formatting.defaultDataBarPositiveColor}, rgb(255 255 255))` : rule.config.positiveColor;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2304,13 +2258,13 @@ function Preview(props) {
 					className: "univer-h-full univer-w-1/2 univer-border univer-border-solid",
 					style: {
 						background: isGradient ? `linear-gradient(to right,  rgb(255 255 255),${rule.config.nativeColor || _univerjs_sheets_conditional_formatting.defaultDataBarNativeColor})` : rule.config.nativeColor,
-						borderColor: (_rule$config$nativeCo = rule.config.nativeColor) !== null && _rule$config$nativeCo !== void 0 ? _rule$config$nativeCo : _univerjs_sheets_conditional_formatting.defaultDataBarNativeColor
+						borderColor: rule.config.nativeColor ?? _univerjs_sheets_conditional_formatting.defaultDataBarNativeColor
 					}
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "univer-h-full univer-w-1/2 univer-border univer-border-solid",
 					style: {
 						background: positiveColor,
-						borderColor: (_rule$config$positive = rule.config.positiveColor) !== null && _rule$config$positive !== void 0 ? _rule$config$positive : _univerjs_sheets_conditional_formatting.defaultDataBarPositiveColor
+						borderColor: rule.config.positiveColor ?? _univerjs_sheets_conditional_formatting.defaultDataBarPositiveColor
 					}
 				})]
 			});
@@ -2334,16 +2288,15 @@ function Preview(props) {
 			}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SlashDoubleIcon, {}, index))
 		});
 		case _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell: {
-			var _bg$rgb, _cl$rgb, _replace;
 			const { ul, st, it, bl, bg, cl } = rule.style;
 			const isUnderline = (ul === null || ul === void 0 ? void 0 : ul.s) === _univerjs_core.BooleanNumber.TRUE;
 			const isStrikethrough = (st === null || st === void 0 ? void 0 : st.s) === _univerjs_core.BooleanNumber.TRUE;
 			const isItalic = it === _univerjs_core.BooleanNumber.TRUE;
 			const isBold = bl === _univerjs_core.BooleanNumber.TRUE;
-			const bgColor = (_bg$rgb = bg === null || bg === void 0 ? void 0 : bg.rgb) !== null && _bg$rgb !== void 0 ? _bg$rgb : _univerjs_sheets_conditional_formatting.DEFAULT_BG_COLOR;
-			const fontColor = (_cl$rgb = cl === null || cl === void 0 ? void 0 : cl.rgb) !== null && _cl$rgb !== void 0 ? _cl$rgb : _univerjs_sheets_conditional_formatting.DEFAULT_FONT_COLOR;
+			const bgColor = (bg === null || bg === void 0 ? void 0 : bg.rgb) ?? _univerjs_sheets_conditional_formatting.DEFAULT_BG_COLOR;
+			const fontColor = (cl === null || cl === void 0 ? void 0 : cl.rgb) ?? _univerjs_sheets_conditional_formatting.DEFAULT_FONT_COLOR;
 			const style = {
-				textDecoration: (_replace = `${isUnderline ? "underline" : ""} ${isStrikethrough ? "line-through" : ""}`.replace(/^ /, "")) !== null && _replace !== void 0 ? _replace : void 0,
+				textDecoration: `${isUnderline ? "underline" : ""} ${isStrikethrough ? "line-through" : ""}`.replace(/^ /, "") ?? void 0,
 				backgroundColor: bgColor,
 				color: fontColor
 			};
@@ -2418,7 +2371,7 @@ const TextInput$1 = (props) => {
 		className: "univer-ml-1 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),
+			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-gray-0 univer-pt-2 univer-transition-colors hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-0 [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent", _univerjs_design.borderClassName),
 			initValue: formulaInitValue,
 			unitId,
 			subUnitId,
@@ -2839,7 +2792,7 @@ const InputText = (props) => {
 			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),
+				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-gray-0 univer-pt-2 univer-transition-colors hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-0 [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent", _univerjs_design.borderClassName),
 				initValue: v,
 				unitId,
 				subUnitId,
@@ -3359,7 +3312,7 @@ const FormulaStyleEditor = (props) => {
 				className: "univer-mt-3",
 				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),
+					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-gray-0 univer-pt-2 univer-transition-colors hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-0 [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent", _univerjs_design.borderClassName),
 					errorText: formulaError,
 					isFocus: isFocusFormulaEditor,
 					initValue: formula,
@@ -3406,13 +3359,10 @@ const FormulaStyleEditor = (props) => {
 //#endregion
 //#region src/views/wrapper-error/WrapperError.tsx
 const WrapperError = (props) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-relative",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-absolute univer-bottom-[-13px] univer-z-[999] univer-text-[10px] univer-text-red-500",
-			children: props.errorText
-		}), props.children]
-	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [props.children, props.errorText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-mt-1 univer-text-xs univer-text-red-500",
+		children: props.errorText
+	})] });
 };
 
 //#endregion
@@ -3674,11 +3624,10 @@ const HighlightCellStyleEditor = (props) => {
 	});
 	const [style, setStyle] = (0, react.useState)({});
 	const getResult = (0, react.useMemo)(() => (option) => {
-		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;
+		const nextSubType = option.subType ?? subType;
+		const nextOperator = option.operator ?? operator;
+		const nextValue = option.value ?? value;
+		const nextStyle = option.style ?? style;
 		switch (nextSubType) {
 			case _univerjs_sheets_conditional_formatting.CFSubRuleType.duplicateValues: return {
 				type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
@@ -3829,7 +3778,7 @@ const TextInput = (props) => {
 		children: type !== _univerjs_sheets_conditional_formatting.CFValueType.formula ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 			className: (0, _univerjs_design.clsx)({ "univer-border-red-500": error }),
 			value: Number(props.value) || 0,
-			onChange: (v) => onChange(v !== null && v !== void 0 ? v : 0)
+			onChange: (v) => onChange(v ?? 0)
 		}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-absolute univer-text-xs univer-text-red-500",
 			children: error
@@ -3837,7 +3786,7 @@ const TextInput = (props) => {
 			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),
+				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-gray-0 univer-pt-2 univer-transition-colors hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-0 [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent", _univerjs_design.borderClassName),
 				initValue: String(props.value),
 				unitId,
 				subUnitId,
@@ -3862,8 +3811,9 @@ const createDefaultConfigItem = (iconType, index, list) => ({
 const IconGroupList = (props) => {
 	const { iconType, onClick } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const direction = (0, _univerjs_ui.useObservable)(localeService.direction$, localeService.getDirection());
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		dir: (0, _univerjs_ui.useObservable)(localeService.direction$, localeService.getDirection()),
+		dir: direction,
 		className: "univer-w-80",
 		children: _univerjs_sheets_conditional_formatting.iconGroup.map((group) => {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3872,6 +3822,8 @@ const IconGroupList = (props) => {
 					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", {
+					dir: direction,
+					"data-u-comp": "cf-icon-set-group-grid",
 					className: "univer-grid univer-grid-cols-2 univer-gap-1",
 					children: group.group.map((groupItem, groupItemIndex) => {
 						const selected = groupItem.name === iconType;
@@ -3879,11 +3831,12 @@ const IconGroupList = (props) => {
 							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"),
+							className: (0, _univerjs_design.clsx)("univer-flex univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-justify-start 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", 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: () => {
 								onClick(groupItem.name);
 							},
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								dir: direction,
 								className: "univer-flex univer-items-center univer-gap-0.5",
 								children: groupItem.list.map((base64, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 									alt: "",
@@ -4047,7 +4000,7 @@ const IconSetRuleEdit = (props) => {
 									})
 								}),
 								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 dark:!univer-text-gray-200", _univerjs_design.borderClassName),
+									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-gray-0 univer-px-4 univer-py-2 univer-text-xs univer-text-gray-600 univer-transition-all hover:univer-border-primary-600 dark:!univer-text-gray-200", _univerjs_design.borderClassName),
 									children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 										src: icon,
 										className: "univer-size-4",
@@ -4259,7 +4212,7 @@ const IconSet = (props) => {
 						})
 					}),
 					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),
+						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-gray-0 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, {})]
 					})
 				})
@@ -4499,7 +4452,7 @@ const getSubUnitId = (univerInstanceService) => {
 	return (_getActiveSheet = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).getActiveSheet()) === null || _getActiveSheet === void 0 ? void 0 : _getActiveSheet.getSheetId();
 };
 const RuleEdit = (props) => {
-	var _props$rule$ranges, _props$rule, _props$rule5;
+	var _props$rule, _props$rule5;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
@@ -4508,14 +4461,14 @@ const RuleEdit = (props) => {
 	const unitId = getUnitId(univerInstanceService);
 	const subUnitId = getSubUnitId(univerInstanceService);
 	const [errorText, setErrorText] = (0, react.useState)(void 0);
-	const rangeResult = (0, react.useRef)((_props$rule$ranges = (_props$rule = props.rule) === null || _props$rule === void 0 ? void 0 : _props$rule.ranges) !== null && _props$rule$ranges !== void 0 ? _props$rule$ranges : []);
+	const rangeResult = (0, react.useRef)(((_props$rule = props.rule) === null || _props$rule === void 0 ? void 0 : _props$rule.ranges) ?? []);
 	const rangeSelectorTouched = (0, react.useRef)(false);
 	const rangeString = (0, react.useMemo)(() => {
 		var _props$rule2;
 		let ranges = (_props$rule2 = props.rule) === null || _props$rule2 === void 0 ? void 0 : _props$rule2.ranges;
 		if (!(ranges === null || ranges === void 0 ? void 0 : ranges.length)) {
-			var _selectionManagerServ, _selectionManagerServ2;
-			ranges = (_selectionManagerServ = (_selectionManagerServ2 = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ2 === void 0 ? void 0 : _selectionManagerServ2.map((s) => s.range)) !== null && _selectionManagerServ !== void 0 ? _selectionManagerServ : [];
+			var _selectionManagerServ;
+			ranges = ((_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((s) => s.range)) ?? [];
 		}
 		rangeResult.current = ranges;
 		if (!(ranges === null || ranges === void 0 ? void 0 : ranges.length)) return "";
@@ -4829,9 +4782,8 @@ function RuleList(props) {
 		});
 	};
 	const handleDragStart = (_layout, from) => {
-		var _dragRule$cfId;
 		const dragRule = ruleListByPermissionCheck[from.y];
-		setDraggingId((_dragRule$cfId = dragRule === null || dragRule === void 0 ? void 0 : dragRule.cfId) !== null && _dragRule$cfId !== void 0 ? _dragRule$cfId : "");
+		setDraggingId((dragRule === null || dragRule === void 0 ? void 0 : dragRule.cfId) ?? "");
 	};
 	const handleDragStop = (_layout, from, to) => {
 		var _getActiveSheet2, _ruleListByPermission, _ruleListByPermission2;
@@ -4901,7 +4853,7 @@ function RuleList(props) {
 				}
 			})).map((ele, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: ele }, index))
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-flex univer-justify-end univer-space-x-2",
+			className: "univer-flex univer-justify-end univer-gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
 				title: localeService.t("sheets-conditional-formatting-ui.panel.createRule"),
 				placement: "bottom",
@@ -4931,7 +4883,7 @@ function RuleList(props) {
 		onDragStop: handleDragStop,
 		onDragStart: handleDragStart,
 		itemRender: (rule) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, _univerjs_design.clsx)("univer-group univer-relative univer-flex univer-items-center univer-justify-between univer-rounded univer-py-2 univer-pl-5 univer-pr-8 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-100 dark:!univer-bg-gray-700": draggingId === rule.cfId }),
+			className: (0, _univerjs_design.clsx)("univer-group univer-relative univer-flex univer-items-center univer-justify-between univer-rounded univer-py-2 univer-pl-5 univer-pr-8 hover:univer-bg-gray-100 rtl:univer-pl-8 rtl:univer-pr-5 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-100 dark:!univer-bg-gray-700": draggingId === rule.cfId }),
 			onMouseMove: () => {
 				rule.ranges !== currentRuleRanges && setCurrentRuleRanges(rule.ranges);
 			},
@@ -4941,14 +4893,14 @@ function RuleList(props) {
 			},
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, _univerjs_design.clsx)("univer-absolute univer-left-0 univer-hidden univer-size-5 univer-cursor-grab univer-items-center univer-justify-center univer-rounded group-hover:univer-flex", "draggableHandle"),
+					className: (0, _univerjs_design.clsx)("univer-absolute univer-left-0 univer-hidden univer-size-5 univer-cursor-grab univer-items-center univer-justify-center univer-rounded group-hover:univer-flex rtl:univer-left-auto rtl:univer-right-0", "draggableHandle"),
 					onClick: (e) => e.stopPropagation(),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.GripVerticalIcon, {})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "univer-min-w-0 univer-max-w-full univer-flex-shrink univer-overflow-hidden",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "univer-text-sm univer-text-gray-900 dark:!univer-text-white",
+						className: "univer-text-sm univer-text-gray-900 dark:!univer-text-gray-0",
 						children: getRuleDescribe(rule, localeService)
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "univer-max-w-[250px] univer-overflow-hidden univer-text-ellipsis univer-text-xs univer-text-gray-400",
@@ -4957,7 +4909,7 @@ function RuleList(props) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Preview, { rule: rule.rule }) }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, _univerjs_design.clsx)("univer-absolute univer-right-1 univer-hidden univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-text-red-500 group-hover:univer-flex hover:univer-bg-gray-200", { "univer-flex univer-items-center univer-justify-center": draggingId === rule.cfId }),
+					className: (0, _univerjs_design.clsx)("univer-absolute univer-right-1 univer-hidden univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-text-red-500 group-hover:univer-flex hover:univer-bg-gray-200 rtl:univer-left-1 rtl:univer-right-auto", { "univer-flex univer-items-center univer-justify-center": draggingId === rule.cfId }),
 					onClick: (e) => {
 						e.stopPropagation();
 						handleDelete(rule);
@@ -5134,7 +5086,7 @@ _defineProperty(UniverSheetsConditionalFormattingUIPlugin, "packageName", name);
 _defineProperty(UniverSheetsConditionalFormattingUIPlugin, "version", version);
 _defineProperty(UniverSheetsConditionalFormattingUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
 UniverSheetsConditionalFormattingUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_ui.UniverUIPlugin, _univerjs_sheets_formula.UniverSheetsFormulaPlugin, _univerjs_sheets_conditional_formatting.UniverSheetsConditionalFormattingPlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
+	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_sheets_formula.UniverSheetsFormulaPlugin, _univerjs_sheets_conditional_formatting.UniverSheetsConditionalFormattingPlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.ICommandService)),
 	__decorateParam(3, _univerjs_core.IConfigService)