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

package/lib/es/index.js

@@ -1,6 +1,6 @@
-import { BooleanNumber, ColorKit, CommandType, DependentOn, Disposable, DisposableCollection, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, InterceptorManager, LocaleService, ObjectMatrix, Plugin, Range, Rectangle, Tools, UniverInstanceType, createInterceptorKey, generateRandomId, get, merge, registerDependencies, set, toDisposable, touchDependencies } from "@univerjs/core";
+import { BooleanNumber, ColorKit, CommandType, DependentOn, Disposable, DisposableCollection, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, InterceptorManager, LocaleService, Plugin, Rectangle, Tools, UniverInstanceType, createInterceptorKey, generateRandomId, get, getIntersectRange, merge, registerDependencies, set, toDisposable, touchDependencies } from "@univerjs/core";
 import { AFTER_CELL_EDIT, AUTO_FILL_APPLY_TYPE, AutoFillTools, ClearSelectionAllCommand, ClearSelectionFormatCommand, IAutoFillService, INTERCEPTOR_POINT, RangeProtectionPermissionEditPoint, RemoveSheetMutation, SetSelectionsOperation, SetWorksheetActiveOperation, SheetInterceptorService, SheetPermissionCheckController, SheetsSelectionsService, UniverSheetsPlugin, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellStylePermission, checkRangesEditablePermission, getSheetCommandTarget, rangeToDiscreteRange, setEndForRange } from "@univerjs/sheets";
-import { AddCfCommand, AddConditionalRuleMutation, AddConditionalRuleMutationUndoFactory, CFNumberOperator, CFRuleType, CFSubRuleType, CFTextOperator, CFTimePeriodOperator, CFValueType, CONDITIONAL_FORMATTING_VIEWPORT_CACHE_LENGTH, ClearRangeCfCommand, ClearWorksheetCfCommand, ConditionalFormattingRangeIndexModel, ConditionalFormattingRangeTransformService, ConditionalFormattingRuleModel, ConditionalFormattingService, ConditionalFormattingViewModel, DEFAULT_BG_COLOR, DEFAULT_FONT_COLOR, DEFAULT_PADDING, DEFAULT_WIDTH, DeleteCfCommand, DeleteConditionalRuleMutation, DeleteConditionalRuleMutationUndoFactory, IIconSetType, MoveCfCommand, MoveConditionalRuleMutation, SHEET_CONDITIONAL_FORMATTING_PLUGIN, SetCfCommand, SetConditionalRuleMutation, UniverSheetsConditionalFormattingPlugin, compareWithNumber, createCfId, createDefaultRule, createDefaultValue, createDefaultValueByValueType, defaultDataBarNativeColor, defaultDataBarPositiveColor, getColorScaleFromValue, getOppositeOperator, iconGroup, iconMap, removeUndefinedAttr, setConditionalRuleMutationUndoFactory } from "@univerjs/sheets-conditional-formatting";
+import { AddCfCommand, AddConditionalRuleMutation, AddConditionalRuleMutationUndoFactory, CFNumberOperator, CFRuleType, CFSubRuleType, CFTextOperator, CFTimePeriodOperator, CFValueType, CONDITIONAL_FORMATTING_VIEWPORT_CACHE_LENGTH, ClearRangeCfCommand, ClearWorksheetCfCommand, ConditionalFormattingIcon, ConditionalFormattingRangeIndexModel, ConditionalFormattingRangeTransformService, ConditionalFormattingRuleModel, ConditionalFormattingService, ConditionalFormattingViewModel, DEFAULT_BG_COLOR, DEFAULT_FONT_COLOR, DEFAULT_PADDING, DEFAULT_WIDTH, DataBar, DeleteCfCommand, DeleteConditionalRuleMutation, DeleteConditionalRuleMutationUndoFactory, IIconSetType, IconUKey, MoveCfCommand, MoveConditionalRuleMutation, SHEET_CONDITIONAL_FORMATTING_PLUGIN, SetCfCommand, SetConditionalRuleMutation, UniverSheetsConditionalFormattingPlugin, compareWithNumber, createCfId, createDefaultRule, createDefaultValue, createDefaultValueByValueType, dataBarUKey, defaultDataBarNativeColor, defaultDataBarPositiveColor, getColorScaleFromValue, getOppositeOperator, iconGroup, iconMap, removeUndefinedAttr, setConditionalRuleMutationUndoFactory } from "@univerjs/sheets-conditional-formatting";
 import { ComponentManager, IMenuManagerService, ISidebarService, IconManager, MenuItemType, RibbonDataGroup, RibbonInsertGroup, getMenuHiddenObservable, useDependency, useObservable, useSidebarClick } from "@univerjs/ui";
 import { COPY_TYPE, FormatPainterStatus, IFormatPainterService, ISheetClipboardService, PREDEFINED_HOOK_NAME_PASTE, SheetSkeletonManagerService, UniverSheetsMobileUIPlugin, UniverSheetsUIPlugin, getCurrentRangeDisable$, getRepeatRange, useHighlightRange, virtualizeDiscreteRanges } from "@univerjs/sheets-ui";
 import { Observable, debounceTime, filter, map, merge as merge$1, share, startWith } from "rxjs";
@@ -984,7 +984,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
@@ -1181,12 +1181,11 @@ const specialPastes = [
 	PREDEFINED_HOOK_NAME_PASTE.SPECIAL_PASTE_BESIDES_BORDER
 ];
 let ConditionalFormattingCopyPasteController = class ConditionalFormattingCopyPasteController extends 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);
@@ -1206,10 +1205,11 @@ let ConditionalFormattingCopyPasteController = class ConditionalFormattingCopyPa
 		}));
 	}
 	_collectConditionalRule(unitId, subUnitId, range) {
-		const matrix = new ObjectMatrix();
+		var _this$_conditionalFor;
+		const rules = /* @__PURE__ */ new Map();
 		const cfMap = {};
 		this._copyInfo = {
-			matrix,
+			rules,
 			info: {
 				unitId,
 				subUnitId,
@@ -1220,22 +1220,28 @@ let ConditionalFormattingCopyPasteController = class ConditionalFormattingCopyPa
 			return 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 } = 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 ? 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 = COPY_TYPE.COPY } = payload;
@@ -1253,109 +1259,86 @@ let ConditionalFormattingCopyPasteController = class ConditionalFormattingCopyPa
 				undos: []
 			};
 		}
-		const { ranges: [vCopyRange, vPastedRange], mapFunc } = virtualizeDiscreteRanges([copyRange, pastedRange]);
-		const repeatRange = getRepeatRange(vCopyRange, vPastedRange, true);
-		const effectedConditionalFormattingRuleRanges = {};
-		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 = virtualizeDiscreteRanges([copyRange]);
+		const sourceVirtualRange = sourceVirtualization.ranges[0];
+		const targetVirtualization = virtualizeDiscreteRanges([pastedRange]);
+		const targetVirtualRange = targetVirtualization.ranges[0];
+		const repeatRange = 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 (!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 === COPY_TYPE.CUT && (pastedUnitId !== copyUnitId || pastedSubUnitId !== copySubUnitId)) 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 === 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 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 = 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(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 = {
@@ -1368,13 +1351,15 @@ let ConditionalFormattingCopyPasteController = class ConditionalFormattingCopyPa
 					params: deleteParams
 				});
 				undos.push(...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
 					}
 				};
@@ -1411,9 +1396,8 @@ ConditionalFormattingCopyPasteController = __decorate([
 	__decorateParam(0, Inject(ISheetClipboardService)),
 	__decorateParam(1, Inject(ConditionalFormattingRuleModel)),
 	__decorateParam(2, Inject(Injector)),
-	__decorateParam(3, Inject(ConditionalFormattingViewModel)),
-	__decorateParam(4, Inject(IUniverInstanceService)),
-	__decorateParam(5, Inject(ConditionalFormattingRangeTransformService))
+	__decorateParam(3, Inject(IUniverInstanceService)),
+	__decorateParam(4, Inject(ConditionalFormattingRangeTransformService))
 ], ConditionalFormattingCopyPasteController);
 
 //#endregion
@@ -1499,7 +1483,7 @@ ConditionalFormattingPermissionController = __decorate([
 //#endregion
 //#region src/controllers/cf.render.controller.ts
 let SheetsCfRenderController = class SheetsCfRenderController extends Disposable {
-	constructor(_sheetInterceptorService, _conditionalFormattingService, _univerInstanceService, _renderManagerService, _conditionalFormattingViewModel, _conditionalFormattingRuleModel) {
+	constructor(_sheetInterceptorService, _conditionalFormattingService, _univerInstanceService, _renderManagerService, _conditionalFormattingViewModel, _conditionalFormattingRuleModel, _conditionalFormattingRangeIndexModel) {
 		super();
 		this._sheetInterceptorService = _sheetInterceptorService;
 		this._conditionalFormattingService = _conditionalFormattingService;
@@ -1507,14 +1491,69 @@ let SheetsCfRenderController = class SheetsCfRenderController extends Disposable
 		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(CFRuleType.dataBar);
+		const iconResolver = this._createRenderRangeResolver(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(dataBarUKey);
+			if (dataBar instanceof DataBar) {
+				dataBar.setRenderRangeResolver(dataBarResolver);
+				extensions.add(dataBar);
+			}
+			const icon = mainComponent.getExtensionByKey(IconUKey);
+			if (icon instanceof ConditionalFormattingIcon) {
+				icon.setRenderRangeResolver(iconResolver);
+				extensions.add(icon);
+			}
+			if (extensions.size) this._boundRenderExtensions.set(unitId, extensions);
+		};
+		this._renderManagerService.getAllRenderersOfType(UniverInstanceType.UNIVER_SHEET).forEach((render) => bind(render.unitId));
+		this.disposeWithMe(this._renderManagerService.created$.subscribe((render) => {
+			if (render.type === 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 = getIntersectRange(range, ruleRange);
+						if (intersection) intersections.push(intersection);
+					});
+				});
+			});
+			return intersections.length > 1 ? 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) => {
@@ -1609,7 +1648,8 @@ SheetsCfRenderController = __decorate([
 	__decorateParam(2, Inject(IUniverInstanceService)),
 	__decorateParam(3, Inject(IRenderManagerService)),
 	__decorateParam(4, Inject(ConditionalFormattingViewModel)),
-	__decorateParam(5, Inject(ConditionalFormattingRuleModel))
+	__decorateParam(5, Inject(ConditionalFormattingRuleModel)),
+	__decorateParam(6, Inject(ConditionalFormattingRangeIndexModel))
 ], SheetsCfRenderController);
 
 //#endregion
@@ -1663,13 +1703,12 @@ UniverSheetsConditionalFormattingMobileUIPlugin = __decorate([
 //#endregion
 //#region src/controllers/cf.auto-fill.controller.ts
 let ConditionalFormattingAutoFillController = class ConditionalFormattingAutoFillController extends 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();
 	}
@@ -1678,11 +1717,24 @@ let ConditionalFormattingAutoFillController = class ConditionalFormattingAutoFil
 			redos: [],
 			undos: []
 		});
-		const loopFunc = (sourceStartCell, targetStartCell, relativeRange, rangeMap, rangeDeltaMap, mapFunc) => {
-			var _getActiveSheet;
-			const unitId = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET).getUnitId();
-			const subUnitId = (_getActiveSheet = this._univerInstanceService.getCurrentUnitOfType(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(UniverInstanceType.UNIVER_SHEET)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId();
+			const subUnitId = (_this$_univerInstance2 = this._univerInstanceService.getCurrentUnitOfType(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 = virtualizeDiscreteRanges([sourceRange, targetRange]);
+			const [vSourceRange, vTargetRange] = virtualization.ranges;
+			const repeats = AutoFillTools.getAutoFillRepeatRange(vSourceRange, vTargetRange);
+			const targetRanges = repeats.flatMap((repeat) => virtualization.mapRange(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) {
@@ -1694,80 +1746,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
-			};
-			Range.foreach(relativeRange, (row, col) => {
-				const sourcePositionRange = Rectangle.getPositionRange({
-					startRow: row,
-					startColumn: col,
-					endColumn: col,
-					endRow: row
-				}, sourceRange);
-				const targetPositionRange = 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 (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 && getIntersectRange(projected, vSourceRange);
+					return intersected ? [Rectangle.getRelativeRange(intersected, vSourceRange)] : [];
 				});
-			});
-		};
-		const generalApplyFunc = (sourceRange, targetRange) => {
-			var _this$_univerInstance, _this$_univerInstance2;
-			const unitId = (_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId();
-			const subUnitId = (_this$_univerInstance2 = this._univerInstanceService.getCurrentUnitOfType(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 = virtualizeDiscreteRanges([sourceRange, targetRange]);
-			const [vSourceRange, vTargetRange] = virtualRange.ranges;
-			const { mapFunc } = virtualRange;
-			const sourceStartCell = {
-				row: vSourceRange.startRow,
-				col: vSourceRange.startColumn
-			};
-			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 = getIntersectRange(range, repeat.relativeRange);
+					return copiedRange ? virtualization.mapRange(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);
@@ -1827,8 +1828,7 @@ ConditionalFormattingAutoFillController = __decorate([
 	__decorateParam(1, Inject(IUniverInstanceService)),
 	__decorateParam(2, Inject(IAutoFillService)),
 	__decorateParam(3, Inject(ConditionalFormattingRuleModel)),
-	__decorateParam(4, Inject(ConditionalFormattingViewModel)),
-	__decorateParam(5, Inject(ConditionalFormattingRangeTransformService))
+	__decorateParam(4, Inject(ConditionalFormattingRangeTransformService))
 ], ConditionalFormattingAutoFillController);
 
 //#endregion
@@ -1945,14 +1945,13 @@ const repeatByRange = (sourceRange, targetRange) => {
 	return repeatList;
 };
 let ConditionalFormattingPainterController = class ConditionalFormattingPainterController extends 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();
@@ -1962,9 +1961,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) => Rectangle.getPositionRange(repeat.repeatRelativeRange, repeat.startRange));
 			const getRangeDelta = (cfId) => {
 				let rangeDelta = rangeDeltaMap.get(cfId);
 				if (!rangeDelta) {
@@ -1976,82 +1982,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
-			};
-			Range.foreach(relativeRange, (row, col) => {
-				const sourcePositionRange = Rectangle.getPositionRange({
-					startRow: row,
-					startColumn: col,
-					endColumn: col,
-					endRow: row
-				}, sourceRange);
-				const targetPositionRange = 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) => 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 (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 = getIntersectRange(range, sourceRange);
+					return intersected ? [Rectangle.getRelativeRange(intersected, sourceRange)] : [];
 				});
+				const additions = repeats.flatMap((repeat) => sourceRanges.flatMap((range) => {
+					const copiedRange = getIntersectRange(range, repeat.repeatRelativeRange);
+					return copiedRange ? [Rectangle.getPositionRange(copiedRange, repeat.startRange)] : [];
+				}));
+				if (additions.length) {
+					let targetCfId = rule.cfId;
+					if (isSkipSheet) {
+						targetCfId = this._conditionalFormattingRuleModel.createCfId(targetUnitId, targetSubUnitId);
+						waitAddRule.set(targetCfId, {
+							...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);
@@ -2089,28 +2051,27 @@ let ConditionalFormattingPainterController = class ConditionalFormattingPainterC
 						undos.push(...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: {
-										...Tools.deepClone(sourceRule),
-										cfId: this._conditionalFormattingRuleModel.createCfId(targetUnitId, targetSubUnitId),
-										ranges
-									}
-								};
-								redos.push({
-									id: AddConditionalRuleMutation.id,
-									params
-								});
-								undos.push(AddConditionalRuleMutationUndoFactory(this._injector, params));
-							}
+							const params = {
+								unitId: targetUnitId,
+								subUnitId: targetSubUnitId,
+								rule: {
+									...waitAdd,
+									ranges
+								}
+							};
+							redos.push({
+								id: AddConditionalRuleMutation.id,
+								params
+							});
+							undos.push(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,
@@ -2183,8 +2144,7 @@ ConditionalFormattingPainterController = __decorate([
 	__decorateParam(2, Inject(IFormatPainterService)),
 	__decorateParam(3, Inject(SheetsSelectionsService)),
 	__decorateParam(4, Inject(ConditionalFormattingRuleModel)),
-	__decorateParam(5, Inject(ConditionalFormattingViewModel)),
-	__decorateParam(6, Inject(ConditionalFormattingRangeTransformService))
+	__decorateParam(5, Inject(ConditionalFormattingRangeTransformService))
 ], ConditionalFormattingPainterController);
 
 //#endregion
@@ -2407,10 +2367,10 @@ const TextInput$1 = (props) => {
 		(_formulaEditorRef$cur = formulaEditorRef.current) !== null && _formulaEditorRef$cur !== void 0 && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
 	});
 	if (type === CFValueType.formula) return /* @__PURE__ */ jsx("div", {
-		className: "univer-ml-1 univer-w-full",
+		className: "univer-w-full",
 		children: /* @__PURE__ */ jsx(FormulaEditor, {
 			ref: formulaEditorRef,
-			className: 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", borderClassName),
+			className: 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", borderClassName),
 			initValue: formulaInitValue,
 			unitId,
 			subUnitId,
@@ -2621,7 +2581,6 @@ const ColorScaleStyleEditor = (props) => {
 				}),
 				/* @__PURE__ */ jsx(TextInput$1, {
 					id: "min",
-					className: "univer-ml-1",
 					value: minValue,
 					type: minType,
 					onChange: (v) => {
@@ -2640,7 +2599,6 @@ const ColorScaleStyleEditor = (props) => {
 					}
 				}),
 				/* @__PURE__ */ jsx(ColorPicker$1, {
-					className: "univer-ml-1",
 					color: minColor,
 					onChange: (v) => {
 						setMinColor(v);
@@ -2689,7 +2647,6 @@ const ColorScaleStyleEditor = (props) => {
 				}),
 				/* @__PURE__ */ jsx(TextInput$1, {
 					id: "median",
-					className: "univer-ml-1",
 					value: medianValue,
 					type: medianType,
 					onChange: (v) => {
@@ -2707,8 +2664,7 @@ const ColorScaleStyleEditor = (props) => {
 						});
 					}
 				}),
-				medianType !== "none" && /* @__PURE__ */ jsx(ColorPicker$1, {
-					className: "univer-ml-1",
+				medianType !== "none" ? /* @__PURE__ */ jsx(ColorPicker$1, {
 					color: medianColor,
 					onChange: (v) => {
 						setMedianColor(v);
@@ -2724,6 +2680,9 @@ const ColorScaleStyleEditor = (props) => {
 							maxColor
 						});
 					}
+				}) : /* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					className: "univer-size-6 univer-flex-shrink-0"
 				})
 			]
 		}),
@@ -2831,7 +2790,7 @@ const InputText = (props) => {
 			className: "univer-w-full",
 			children: /* @__PURE__ */ jsx(FormulaEditor, {
 				ref: formulaEditorRef,
-				className: 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", borderClassName),
+				className: 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", borderClassName),
 				initValue: v,
 				unitId,
 				subUnitId,
@@ -3351,7 +3310,7 @@ const FormulaStyleEditor = (props) => {
 				className: "univer-mt-3",
 				children: /* @__PURE__ */ jsx(FormulaEditor, {
 					ref: formulaEditorRef,
-					className: 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", borderClassName),
+					className: 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", borderClassName),
 					errorText: formulaError,
 					isFocus: isFocusFormulaEditor,
 					initValue: formula,
@@ -3825,7 +3784,7 @@ const TextInput = (props) => {
 			className: "univer-w-full",
 			children: /* @__PURE__ */ jsx(FormulaEditor, {
 				ref: formulaEditorRef,
-				className: 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", borderClassName),
+				className: 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", borderClassName),
 				initValue: String(props.value),
 				unitId,
 				subUnitId,
@@ -3850,8 +3809,9 @@ const createDefaultConfigItem = (iconType, index, list) => ({
 const IconGroupList = (props) => {
 	const { iconType, onClick } = props;
 	const localeService = useDependency(LocaleService);
+	const direction = useObservable(localeService.direction$, localeService.getDirection());
 	return /* @__PURE__ */ jsx("div", {
-		dir: useObservable(localeService.direction$, localeService.getDirection()),
+		dir: direction,
 		className: "univer-w-80",
 		children: iconGroup.map((group) => {
 			return /* @__PURE__ */ jsxs("div", {
@@ -3860,6 +3820,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__ */ 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;
@@ -3867,11 +3829,12 @@ const IconGroupList = (props) => {
 							type: "button",
 							"aria-label": `${localeService.t(group.title)} ${groupItemIndex + 1}`,
 							"aria-pressed": selected,
-							className: 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: 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__ */ jsx("span", {
+								dir: direction,
 								className: "univer-flex univer-items-center univer-gap-0.5",
 								children: groupItem.list.map((base64, index) => /* @__PURE__ */ jsx("img", {
 									alt: "",
@@ -4013,6 +3976,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.${getOppositeOperator(preItem.operator)}`),
 									lessThanText,
 									isEnd ? "" : ` ${localeService.t("sheets-conditional-formatting-ui.iconSet.and")} `
@@ -4035,7 +3999,7 @@ const IconSetRuleEdit = (props) => {
 									})
 								}),
 								children: /* @__PURE__ */ jsxs("div", {
-									className: 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", borderClassName),
+									className: 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", borderClassName),
 									children: [icon ? /* @__PURE__ */ jsx("img", {
 										src: icon,
 										className: "univer-size-4",
@@ -4055,6 +4019,7 @@ const IconSetRuleEdit = (props) => {
 								className: "univer-font-medium",
 								children: [
 									localeService.t("sheets-conditional-formatting-ui.iconSet.when"),
+									" ",
 									localeService.t(`sheets-conditional-formatting-ui.symbol.${getOppositeOperator(preItem.operator)}`),
 									lessThanText,
 									isEnd ? "" : ` ${localeService.t("sheets-conditional-formatting-ui.iconSet.and")} `
@@ -4247,7 +4212,7 @@ const IconSet = (props) => {
 						})
 					}),
 					children: /* @__PURE__ */ jsxs("div", {
-						className: 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", borderClassName),
+						className: 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", borderClassName),
 						children: [previewIcon, /* @__PURE__ */ jsx(MoreDownIcon, {})]
 					})
 				})
@@ -4888,7 +4853,7 @@ function RuleList(props) {
 				}
 			})).map((ele, index) => /* @__PURE__ */ jsx("span", { children: ele }, index))
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "univer-flex univer-justify-end univer-space-x-2",
+			className: "univer-flex univer-justify-end univer-gap-2",
 			children: [/* @__PURE__ */ jsx(Tooltip, {
 				title: localeService.t("sheets-conditional-formatting-ui.panel.createRule"),
 				placement: "bottom",
@@ -4918,7 +4883,7 @@ function RuleList(props) {
 		onDragStop: handleDragStop,
 		onDragStart: handleDragStart,
 		itemRender: (rule) => /* @__PURE__ */ jsxs("div", {
-			className: 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: 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);
 			},
@@ -4928,14 +4893,14 @@ function RuleList(props) {
 			},
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: 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: 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__ */ jsx(GripVerticalIcon, {})
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "univer-min-w-0 univer-max-w-full univer-flex-shrink univer-overflow-hidden",
 					children: [/* @__PURE__ */ 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__ */ jsx("div", {
 						className: "univer-max-w-[250px] univer-overflow-hidden univer-text-ellipsis univer-text-xs univer-text-gray-400",
@@ -4944,7 +4909,7 @@ function RuleList(props) {
 				}),
 				/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Preview, { rule: rule.rule }) }),
 				/* @__PURE__ */ jsx("div", {
-					className: 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: 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);