@univerjs/sheets-conditional-formatting-ui 1.0.0-beta.0 → 1.0.0-beta.2

package/lib/cjs/index.js

@@ -985,7 +985,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting-ui";
-var version = "1.0.0-beta.0";
+var version = "1.0.0-beta.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -1182,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);
@@ -1207,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,
@@ -1221,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;
@@ -1254,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 = {
@@ -1369,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
 					}
 				};
@@ -1412,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
@@ -1500,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;
@@ -1508,14 +1492,69 @@ 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) => {
@@ -1610,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
@@ -1664,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();
 	}
@@ -1679,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) {
@@ -1695,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);
@@ -1828,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
@@ -1946,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();
@@ -1963,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) {
@@ -1977,82 +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) => {
-			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._conditionalFormattingRuleModel.getSubunitRules(sourceUnitId, sourceSubUnitId) ?? [];
-			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);
@@ -2090,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,
@@ -2184,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
@@ -2408,10 +2368,10 @@ const TextInput$1 = (props) => {
 		(_formulaEditorRef$cur = formulaEditorRef.current) !== null && _formulaEditorRef$cur !== void 0 && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
 	});
 	if (type === _univerjs_sheets_conditional_formatting.CFValueType.formula) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-ml-1 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),
+			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,
@@ -2622,7 +2582,6 @@ const ColorScaleStyleEditor = (props) => {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput$1, {
 					id: "min",
-					className: "univer-ml-1",
 					value: minValue,
 					type: minType,
 					onChange: (v) => {
@@ -2641,7 +2600,6 @@ const ColorScaleStyleEditor = (props) => {
 					}
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPicker, {
-					className: "univer-ml-1",
 					color: minColor,
 					onChange: (v) => {
 						setMinColor(v);
@@ -2690,7 +2648,6 @@ const ColorScaleStyleEditor = (props) => {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput$1, {
 					id: "median",
-					className: "univer-ml-1",
 					value: medianValue,
 					type: medianType,
 					onChange: (v) => {
@@ -2708,8 +2665,7 @@ const ColorScaleStyleEditor = (props) => {
 						});
 					}
 				}),
-				medianType !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPicker, {
-					className: "univer-ml-1",
+				medianType !== "none" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPicker, {
 					color: medianColor,
 					onChange: (v) => {
 						setMedianColor(v);
@@ -2725,6 +2681,9 @@ const ColorScaleStyleEditor = (props) => {
 							maxColor
 						});
 					}
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"aria-hidden": true,
+					className: "univer-size-6 univer-flex-shrink-0"
 				})
 			]
 		}),
@@ -2832,7 +2791,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,
@@ -3352,7 +3311,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,
@@ -3826,7 +3785,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,
@@ -3851,8 +3810,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", {
@@ -3861,6 +3821,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;
@@ -3868,11 +3830,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: "",
@@ -4014,6 +3977,7 @@ const IconSetRuleEdit = (props) => {
 								className: "univer-font-medium univer-text-gray-600 dark:!univer-text-gray-200",
 								children: [
 									localeService.t("sheets-conditional-formatting-ui.iconSet.when"),
+									" ",
 									localeService.t(`sheets-conditional-formatting-ui.symbol.${(0, _univerjs_sheets_conditional_formatting.getOppositeOperator)(preItem.operator)}`),
 									lessThanText,
 									isEnd ? "" : ` ${localeService.t("sheets-conditional-formatting-ui.iconSet.and")} `
@@ -4036,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",
@@ -4056,6 +4020,7 @@ const IconSetRuleEdit = (props) => {
 								className: "univer-font-medium",
 								children: [
 									localeService.t("sheets-conditional-formatting-ui.iconSet.when"),
+									" ",
 									localeService.t(`sheets-conditional-formatting-ui.symbol.${(0, _univerjs_sheets_conditional_formatting.getOppositeOperator)(preItem.operator)}`),
 									lessThanText,
 									isEnd ? "" : ` ${localeService.t("sheets-conditional-formatting-ui.iconSet.and")} `
@@ -4248,7 +4213,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, {})]
 					})
 				})
@@ -4889,7 +4854,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",
@@ -4919,7 +4884,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);
 			},
@@ -4929,14 +4894,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",
@@ -4945,7 +4910,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);