@univerjs/sheets-conditional-formatting-ui 1.0.0-rc.0 → 1.0.1

package/lib/es/index.js

@@ -23,7 +23,8 @@ const AddAverageCfCommand = {
 		const { ranges, style, stopIfTrue, operator } = params;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
 		const commandService = accessor.get(ICommandService);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const rule = {
@@ -55,7 +56,8 @@ const AddColorScaleConditionalRuleCommand = {
 		const { ranges, config, stopIfTrue } = params;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
 		const commandService = accessor.get(ICommandService);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const rule = {
@@ -86,7 +88,8 @@ const AddDataBarConditionalRuleCommand = {
 		const ranges = params.ranges ?? accessor.get(SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
 		if (!ranges.length) return false;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const commandService = accessor.get(ICommandService);
@@ -124,7 +127,8 @@ const AddDuplicateValuesCfCommand = {
 		const { ranges, style, stopIfTrue } = params;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
 		const commandService = accessor.get(ICommandService);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const rule = {
@@ -185,7 +189,8 @@ const AddNumberCfCommand = {
 		const { ranges, style, stopIfTrue, operator, value } = params;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
 		const commandService = accessor.get(ICommandService);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const cfId = conditionalFormattingRuleModel.createCfId(unitId, subUnitId);
@@ -273,7 +278,8 @@ const AddTextCfCommand = {
 		if (!params) return false;
 		const { ranges, style, stopIfTrue, operator, value } = params;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const commandService = accessor.get(ICommandService);
@@ -382,7 +388,7 @@ const AddUniqueValuesCfCommand = {
 const CF_PANEL_KEY = "sheet.conditional.formatting.panel";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -393,7 +399,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -406,14 +412,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -424,7 +430,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -432,7 +438,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -573,9 +579,7 @@ const OpenConditionalFormattingOperator = {
 			case 9:
 				commandService.executeCommand(ClearRangeCfCommand.id, { ranges });
 				break;
-			case 10:
-				commandService.executeCommand(ClearWorksheetCfCommand.id);
-				break;
+			case 10: commandService.executeCommand(ClearWorksheetCfCommand.id);
 		}
 		return true;
 	}
@@ -1003,7 +1007,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting-ui";
-var version = "1.0.0-rc.0";
+var version = "1.0.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -1043,11 +1047,9 @@ let ConditionalFormattingFormulaRefRangeController = class ConditionalFormatting
 					if (item.value.type === CFValueType.formula) formulas.push(item.value.value);
 				});
 				break;
-			case CFRuleType.iconSet:
-				ruleConfig.config.forEach((item) => {
-					if (item.value.type === CFValueType.formula) formulas.push(item.value.value);
-				});
-				break;
+			case CFRuleType.iconSet: ruleConfig.config.forEach((item) => {
+				if (item.value.type === CFValueType.formula) formulas.push(item.value.value);
+			});
 		}
 		return formulas;
 	}
@@ -1070,11 +1072,9 @@ let ConditionalFormattingFormulaRefRangeController = class ConditionalFormatting
 					if (item.value.type === CFValueType.formula) item.value.value = formulas[formulaIndex++];
 				});
 				break;
-			case CFRuleType.iconSet:
-				ruleConfig.config.forEach((item) => {
-					if (item.value.type === CFValueType.formula) item.value.value = formulas[formulaIndex++];
-				});
-				break;
+			case CFRuleType.iconSet: ruleConfig.config.forEach((item) => {
+				if (item.value.type === CFValueType.formula) item.value.value = formulas[formulaIndex++];
+			});
 		}
 		return newRule;
 	}
@@ -1725,12 +1725,13 @@ function Preview(props) {
 		case CFRuleType.dataBar: {
 			const { isGradient } = rule.config;
 			const positiveColor = isGradient ? `linear-gradient(to right, ${rule.config.positiveColor || defaultDataBarPositiveColor}, rgb(255 255 255))` : rule.config.positiveColor;
+			const nativeColor = isGradient ? `linear-gradient(to right,  rgb(255 255 255),${rule.config.nativeColor || defaultDataBarNativeColor})` : rule.config.nativeColor;
 			return /* @__PURE__ */ jsxs("div", {
 				className: previewClassName,
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "univer-h-full univer-w-1/2 univer-border univer-border-solid",
 					style: {
-						background: isGradient ? `linear-gradient(to right,  rgb(255 255 255),${rule.config.nativeColor || defaultDataBarNativeColor})` : rule.config.nativeColor,
+						background: nativeColor,
 						borderColor: rule.config.nativeColor ?? defaultDataBarNativeColor
 					}
 				}), /* @__PURE__ */ jsx("div", {
@@ -2888,7 +2889,6 @@ function HighlightCellInput(props) {
 					CFNumberOperator.lessThanOrEqual
 				].includes(operator)) onChange(inputNumberValue);
 				if ([CFNumberOperator.between, CFNumberOperator.notBetween].includes(operator)) onChange([inputNumberMin, inputNumberMax]);
-				break;
 		}
 	}, [type]);
 	useEffect(() => {
@@ -3577,12 +3577,13 @@ const IconSet = (props) => {
 		return !!rule.isShowValue;
 	});
 	const previewIcon = useMemo(() => {
+		const list = configList.map((item) => {
+			return getIcon(item.iconType, item.iconId);
+		});
 		return /* @__PURE__ */ jsx("div", {
 			"data-u-comp": "cf-icon-set-preview",
 			className: "univer-flex univer-items-center rtl:univer-flex-row-reverse",
-			children: configList.map((item) => {
-				return getIcon(item.iconType, item.iconId);
-			}).map((icon, index) => icon ? /* @__PURE__ */ jsx("img", {
+			children: list.map((icon, index) => icon ? /* @__PURE__ */ jsx("img", {
 				className: "univer-size-5",
 				src: icon
 			}, index) : /* @__PURE__ */ jsx(SlashDoubleIcon, { className: "univer-size-5" }, index))
@@ -4113,9 +4114,10 @@ const RuleEdit = (props) => {
 			setErrorText(void 0);
 			return;
 		}
-		if (v) if (rangeText.length < 1) setErrorText(localeService.t("sheets-conditional-formatting-ui.errorMessage.rangeError"));
-		else setErrorText(void 0);
-		else setErrorText(localeService.t("sheets-conditional-formatting-ui.errorMessage.rangeError"));
+		if (v) {
+			if (rangeText.length < 1) setErrorText(localeService.t("sheets-conditional-formatting-ui.errorMessage.rangeError"));
+			else setErrorText(void 0);
+		} else setErrorText(localeService.t("sheets-conditional-formatting-ui.errorMessage.rangeError"));
 	};
 	return /* @__PURE__ */ jsxs("div", { children: [
 		/* @__PURE__ */ jsx("div", {
@@ -4195,9 +4197,10 @@ const getRuleDescribe = (rule, localeService) => {
 				const operator = ruleConfig.operator;
 				return localeService.t(`sheets-conditional-formatting-ui.preview.describe.${operator}`);
 			}
-			case CFSubRuleType.rank: if (ruleConfig.isPercent) if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomNPercent", String(ruleConfig.value));
-			else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topNPercent", String(ruleConfig.value));
-			else if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomN", String(ruleConfig.value));
+			case CFSubRuleType.rank: if (ruleConfig.isPercent) {
+				if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomNPercent", String(ruleConfig.value));
+				else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topNPercent", String(ruleConfig.value));
+			} else if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomN", String(ruleConfig.value));
 			else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topN", String(ruleConfig.value));
 			case CFSubRuleType.formula: return localeService.t("sheets-conditional-formatting-ui.ruleType.formula");
 		}
@@ -4524,7 +4527,10 @@ MobileComponentsController = __decorate([__decorateParam(0, Inject(ComponentMana
 
 //#endregion
 //#region src/menu/mobile-schema.ts
-const mobileMenuSchema = { ...conditionalFormattingRuleMenuSchema };
+const mobileMenuSchema = { [RibbonDataGroup.RULES]: { [OpenConditionalFormattingOperator.id]: {
+	order: 1,
+	menuItemFactory: FactoryManageConditionalFormattingRule
+} } };
 
 //#endregion
 //#region src/menu/mobile-cf.menu.controller.ts
@@ -4992,31 +4998,33 @@ let ConditionalFormattingPainterController = class ConditionalFormattingPainterC
 						return;
 					}
 					const rule = this._conditionalFormattingRuleModel.getRule(targetUnitId, targetSubUnitId, cfId);
-					if (rule) if (ranges.length) {
-						const params = {
-							unitId: targetUnitId,
-							subUnitId: targetSubUnitId,
-							rule: {
-								...rule,
-								ranges
-							}
-						};
-						redos.push({
-							id: SetConditionalRuleMutation.id,
-							params
-						});
-						undos.push(...setConditionalRuleMutationUndoFactory(this._injector, params));
-					} else {
-						const params = {
-							unitId: targetUnitId,
-							subUnitId: targetSubUnitId,
-							cfId: rule.cfId
-						};
-						redos.push({
-							id: DeleteConditionalRuleMutation.id,
-							params
-						});
-						undos.push(...DeleteConditionalRuleMutationUndoFactory(this._injector, params));
+					if (rule) {
+						if (ranges.length) {
+							const params = {
+								unitId: targetUnitId,
+								subUnitId: targetSubUnitId,
+								rule: {
+									...rule,
+									ranges
+								}
+							};
+							redos.push({
+								id: SetConditionalRuleMutation.id,
+								params
+							});
+							undos.push(...setConditionalRuleMutationUndoFactory(this._injector, params));
+						} else {
+							const params = {
+								unitId: targetUnitId,
+								subUnitId: targetSubUnitId,
+								cfId: rule.cfId
+							};
+							redos.push({
+								id: DeleteConditionalRuleMutation.id,
+								params
+							});
+							undos.push(...DeleteConditionalRuleMutationUndoFactory(this._injector, params));
+						}
 					}
 				}
 			});
@@ -5043,9 +5051,7 @@ let ConditionalFormattingPainterController = class ConditionalFormattingPainterC
 						};
 						break;
 					}
-					case FormatPainterStatus.OFF:
-						this._painterConfig = null;
-						break;
+					case FormatPainterStatus.OFF: this._painterConfig = null;
 				}
 			},
 			onApply: (unitId, subUnitId, targetRange) => {

package/lib/index.js

@@ -23,7 +23,8 @@ const AddAverageCfCommand = {
 		const { ranges, style, stopIfTrue, operator } = params;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
 		const commandService = accessor.get(ICommandService);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const rule = {
@@ -55,7 +56,8 @@ const AddColorScaleConditionalRuleCommand = {
 		const { ranges, config, stopIfTrue } = params;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
 		const commandService = accessor.get(ICommandService);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const rule = {
@@ -86,7 +88,8 @@ const AddDataBarConditionalRuleCommand = {
 		const ranges = params.ranges ?? accessor.get(SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
 		if (!ranges.length) return false;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const commandService = accessor.get(ICommandService);
@@ -124,7 +127,8 @@ const AddDuplicateValuesCfCommand = {
 		const { ranges, style, stopIfTrue } = params;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
 		const commandService = accessor.get(ICommandService);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const rule = {
@@ -185,7 +189,8 @@ const AddNumberCfCommand = {
 		const { ranges, style, stopIfTrue, operator, value } = params;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
 		const commandService = accessor.get(ICommandService);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const cfId = conditionalFormattingRuleModel.createCfId(unitId, subUnitId);
@@ -273,7 +278,8 @@ const AddTextCfCommand = {
 		if (!params) return false;
 		const { ranges, style, stopIfTrue, operator, value } = params;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
-		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
 		const commandService = accessor.get(ICommandService);
@@ -382,7 +388,7 @@ const AddUniqueValuesCfCommand = {
 const CF_PANEL_KEY = "sheet.conditional.formatting.panel";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -393,7 +399,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -406,14 +412,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -424,7 +430,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -432,7 +438,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -573,9 +579,7 @@ const OpenConditionalFormattingOperator = {
 			case 9:
 				commandService.executeCommand(ClearRangeCfCommand.id, { ranges });
 				break;
-			case 10:
-				commandService.executeCommand(ClearWorksheetCfCommand.id);
-				break;
+			case 10: commandService.executeCommand(ClearWorksheetCfCommand.id);
 		}
 		return true;
 	}
@@ -1003,7 +1007,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting-ui";
-var version = "1.0.0-rc.0";
+var version = "1.0.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -1043,11 +1047,9 @@ let ConditionalFormattingFormulaRefRangeController = class ConditionalFormatting
 					if (item.value.type === CFValueType.formula) formulas.push(item.value.value);
 				});
 				break;
-			case CFRuleType.iconSet:
-				ruleConfig.config.forEach((item) => {
-					if (item.value.type === CFValueType.formula) formulas.push(item.value.value);
-				});
-				break;
+			case CFRuleType.iconSet: ruleConfig.config.forEach((item) => {
+				if (item.value.type === CFValueType.formula) formulas.push(item.value.value);
+			});
 		}
 		return formulas;
 	}
@@ -1070,11 +1072,9 @@ let ConditionalFormattingFormulaRefRangeController = class ConditionalFormatting
 					if (item.value.type === CFValueType.formula) item.value.value = formulas[formulaIndex++];
 				});
 				break;
-			case CFRuleType.iconSet:
-				ruleConfig.config.forEach((item) => {
-					if (item.value.type === CFValueType.formula) item.value.value = formulas[formulaIndex++];
-				});
-				break;
+			case CFRuleType.iconSet: ruleConfig.config.forEach((item) => {
+				if (item.value.type === CFValueType.formula) item.value.value = formulas[formulaIndex++];
+			});
 		}
 		return newRule;
 	}
@@ -1725,12 +1725,13 @@ function Preview(props) {
 		case CFRuleType.dataBar: {
 			const { isGradient } = rule.config;
 			const positiveColor = isGradient ? `linear-gradient(to right, ${rule.config.positiveColor || defaultDataBarPositiveColor}, rgb(255 255 255))` : rule.config.positiveColor;
+			const nativeColor = isGradient ? `linear-gradient(to right,  rgb(255 255 255),${rule.config.nativeColor || defaultDataBarNativeColor})` : rule.config.nativeColor;
 			return /* @__PURE__ */ jsxs("div", {
 				className: previewClassName,
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "univer-h-full univer-w-1/2 univer-border univer-border-solid",
 					style: {
-						background: isGradient ? `linear-gradient(to right,  rgb(255 255 255),${rule.config.nativeColor || defaultDataBarNativeColor})` : rule.config.nativeColor,
+						background: nativeColor,
 						borderColor: rule.config.nativeColor ?? defaultDataBarNativeColor
 					}
 				}), /* @__PURE__ */ jsx("div", {
@@ -2888,7 +2889,6 @@ function HighlightCellInput(props) {
 					CFNumberOperator.lessThanOrEqual
 				].includes(operator)) onChange(inputNumberValue);
 				if ([CFNumberOperator.between, CFNumberOperator.notBetween].includes(operator)) onChange([inputNumberMin, inputNumberMax]);
-				break;
 		}
 	}, [type]);
 	useEffect(() => {
@@ -3577,12 +3577,13 @@ const IconSet = (props) => {
 		return !!rule.isShowValue;
 	});
 	const previewIcon = useMemo(() => {
+		const list = configList.map((item) => {
+			return getIcon(item.iconType, item.iconId);
+		});
 		return /* @__PURE__ */ jsx("div", {
 			"data-u-comp": "cf-icon-set-preview",
 			className: "univer-flex univer-items-center rtl:univer-flex-row-reverse",
-			children: configList.map((item) => {
-				return getIcon(item.iconType, item.iconId);
-			}).map((icon, index) => icon ? /* @__PURE__ */ jsx("img", {
+			children: list.map((icon, index) => icon ? /* @__PURE__ */ jsx("img", {
 				className: "univer-size-5",
 				src: icon
 			}, index) : /* @__PURE__ */ jsx(SlashDoubleIcon, { className: "univer-size-5" }, index))
@@ -4113,9 +4114,10 @@ const RuleEdit = (props) => {
 			setErrorText(void 0);
 			return;
 		}
-		if (v) if (rangeText.length < 1) setErrorText(localeService.t("sheets-conditional-formatting-ui.errorMessage.rangeError"));
-		else setErrorText(void 0);
-		else setErrorText(localeService.t("sheets-conditional-formatting-ui.errorMessage.rangeError"));
+		if (v) {
+			if (rangeText.length < 1) setErrorText(localeService.t("sheets-conditional-formatting-ui.errorMessage.rangeError"));
+			else setErrorText(void 0);
+		} else setErrorText(localeService.t("sheets-conditional-formatting-ui.errorMessage.rangeError"));
 	};
 	return /* @__PURE__ */ jsxs("div", { children: [
 		/* @__PURE__ */ jsx("div", {
@@ -4195,9 +4197,10 @@ const getRuleDescribe = (rule, localeService) => {
 				const operator = ruleConfig.operator;
 				return localeService.t(`sheets-conditional-formatting-ui.preview.describe.${operator}`);
 			}
-			case CFSubRuleType.rank: if (ruleConfig.isPercent) if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomNPercent", String(ruleConfig.value));
-			else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topNPercent", String(ruleConfig.value));
-			else if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomN", String(ruleConfig.value));
+			case CFSubRuleType.rank: if (ruleConfig.isPercent) {
+				if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomNPercent", String(ruleConfig.value));
+				else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topNPercent", String(ruleConfig.value));
+			} else if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomN", String(ruleConfig.value));
 			else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topN", String(ruleConfig.value));
 			case CFSubRuleType.formula: return localeService.t("sheets-conditional-formatting-ui.ruleType.formula");
 		}
@@ -4524,7 +4527,10 @@ MobileComponentsController = __decorate([__decorateParam(0, Inject(ComponentMana
 
 //#endregion
 //#region src/menu/mobile-schema.ts
-const mobileMenuSchema = { ...conditionalFormattingRuleMenuSchema };
+const mobileMenuSchema = { [RibbonDataGroup.RULES]: { [OpenConditionalFormattingOperator.id]: {
+	order: 1,
+	menuItemFactory: FactoryManageConditionalFormattingRule
+} } };
 
 //#endregion
 //#region src/menu/mobile-cf.menu.controller.ts
@@ -4992,31 +4998,33 @@ let ConditionalFormattingPainterController = class ConditionalFormattingPainterC
 						return;
 					}
 					const rule = this._conditionalFormattingRuleModel.getRule(targetUnitId, targetSubUnitId, cfId);
-					if (rule) if (ranges.length) {
-						const params = {
-							unitId: targetUnitId,
-							subUnitId: targetSubUnitId,
-							rule: {
-								...rule,
-								ranges
-							}
-						};
-						redos.push({
-							id: SetConditionalRuleMutation.id,
-							params
-						});
-						undos.push(...setConditionalRuleMutationUndoFactory(this._injector, params));
-					} else {
-						const params = {
-							unitId: targetUnitId,
-							subUnitId: targetSubUnitId,
-							cfId: rule.cfId
-						};
-						redos.push({
-							id: DeleteConditionalRuleMutation.id,
-							params
-						});
-						undos.push(...DeleteConditionalRuleMutationUndoFactory(this._injector, params));
+					if (rule) {
+						if (ranges.length) {
+							const params = {
+								unitId: targetUnitId,
+								subUnitId: targetSubUnitId,
+								rule: {
+									...rule,
+									ranges
+								}
+							};
+							redos.push({
+								id: SetConditionalRuleMutation.id,
+								params
+							});
+							undos.push(...setConditionalRuleMutationUndoFactory(this._injector, params));
+						} else {
+							const params = {
+								unitId: targetUnitId,
+								subUnitId: targetSubUnitId,
+								cfId: rule.cfId
+							};
+							redos.push({
+								id: DeleteConditionalRuleMutation.id,
+								params
+							});
+							undos.push(...DeleteConditionalRuleMutationUndoFactory(this._injector, params));
+						}
 					}
 				}
 			});
@@ -5043,9 +5051,7 @@ let ConditionalFormattingPainterController = class ConditionalFormattingPainterC
 						};
 						break;
 					}
-					case FormatPainterStatus.OFF:
-						this._painterConfig = null;
-						break;
+					case FormatPainterStatus.OFF: this._painterConfig = null;
 				}
 			},
 			onApply: (unitId, subUnitId, targetRange) => {