@univerjs/sheets-numfmt-ui 0.25.0 → 1.0.0-alpha.0

package/lib/cjs/index.js

@@ -3,19 +3,19 @@ let _univerjs_core = require("@univerjs/core");
 let _univerjs_engine_render = require("@univerjs/engine-render");
 let _univerjs_sheets_numfmt = require("@univerjs/sheets-numfmt");
 let _univerjs_sheets_ui = require("@univerjs/sheets-ui");
-let _univerjs_sheets = require("@univerjs/sheets");
+let _univerjs_icons = require("@univerjs/icons");
 let _univerjs_ui = require("@univerjs/ui");
-let rxjs = require("rxjs");
-let rxjs_operators = require("rxjs/operators");
 let _univerjs_design = require("@univerjs/design");
+let _univerjs_sheets = require("@univerjs/sheets");
 let react = require("react");
+let rxjs = require("rxjs");
+let rxjs_operators = require("rxjs/operators");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _univerjs_icons = require("@univerjs/icons");
 let _univerjs_engine_formula = require("@univerjs/engine-formula");
 
 //#region package.json
 var name = "@univerjs/sheets-numfmt-ui";
-var version = "0.25.0";
+var version = "1.0.0-alpha.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -24,7 +24,57 @@ const configSymbol = Symbol(SHEETS_NUMFMT_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
+//#region src/commands/operations/close.numfmt.panel.operation.ts
+const CloseNumfmtPanelOperator = {
+	id: "sheet.operation.close.numfmt.panel",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: () => true
+};
+
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.137.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.137.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -32,7 +82,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.137.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);
@@ -41,323 +91,575 @@ function __decorate(decorators, target, key, desc) {
 }
 
 //#endregion
-//#region src/controllers/numfmt-alert-render.controller.ts
-const ALERT_KEY = "SHEET_NUMFMT_ALERT";
-let NumfmtAlertRenderController = class NumfmtAlertRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _hoverManagerService, _cellAlertManagerService, _localeService, _zenZoneService, _numfmtService, _configService) {
+//#region src/controllers/ui.controller.ts
+const SHEET_NUMFMT_PANEL$1 = "SHEET_NUMFMT_PANEL";
+let SheetNumfmtUIController = class SheetNumfmtUIController extends _univerjs_core.Disposable {
+	constructor(_sheetInterceptorService, _themeService, _univerInstanceService, _commandService, _selectionManagerService, _renderManagerService, _numfmtService, _componentManager, _sidebarService, _localeService, _sheetsNumfmtCellContentController) {
 		super();
-		this._context = _context;
-		this._hoverManagerService = _hoverManagerService;
-		this._cellAlertManagerService = _cellAlertManagerService;
-		this._localeService = _localeService;
-		this._zenZoneService = _zenZoneService;
+		this._sheetInterceptorService = _sheetInterceptorService;
+		this._themeService = _themeService;
+		this._univerInstanceService = _univerInstanceService;
+		this._commandService = _commandService;
+		this._selectionManagerService = _selectionManagerService;
+		this._renderManagerService = _renderManagerService;
 		this._numfmtService = _numfmtService;
-		this._configService = _configService;
-		this._init();
-	}
-	_init() {
-		this._initCellAlertPopup();
-		this._initZenService();
-	}
-	_initCellAlertPopup() {
-		this.disposeWithMe(this._hoverManagerService.currentCell$.pipe((0, rxjs.debounceTime)(100)).subscribe((cellPos) => {
-			if (cellPos) {
-				const location = cellPos.location;
-				const workbook = this._context.unit;
-				const worksheet = workbook.getActiveSheet();
-				if (!worksheet) return this._hideAlert();
-				const unitId = location.unitId;
-				const sheetId = location.subUnitId;
-				let numfmtValue;
-				const cellData = worksheet.getCell(location.row, location.col);
-				if (cellData === null || cellData === void 0 ? void 0 : cellData.s) {
-					const style = workbook.getStyles().get(cellData.s);
-					if (style === null || style === void 0 ? void 0 : style.n) numfmtValue = style.n;
-				}
-				if (!numfmtValue) numfmtValue = this._numfmtService.getValue(unitId, sheetId, location.row, location.col);
-				if (!numfmtValue) {
-					this._hideAlert();
-					return;
-				}
-				if ((0, _univerjs_core.isTextFormat)(numfmtValue.pattern) && _univerjs_core.Tools.isDefine(cellData === null || cellData === void 0 ? void 0 : cellData.v) && (0, _univerjs_core.isRealNum)(cellData.v)) {
-					var _this$_configService$, _currentAlert$alert;
-					if ((_this$_configService$ = this._configService.getConfig(_univerjs_sheets_numfmt.SHEETS_NUMFMT_PLUGIN_CONFIG_KEY)) === null || _this$_configService$ === void 0 ? void 0 : _this$_configService$.disableTextFormatAlert) return;
-					const currentAlert = this._cellAlertManagerService.currentAlert.get(ALERT_KEY);
-					const currentLoc = currentAlert === null || currentAlert === void 0 || (_currentAlert$alert = currentAlert.alert) === null || _currentAlert$alert === void 0 ? void 0 : _currentAlert$alert.location;
-					if (currentLoc && currentLoc.row === location.row && currentLoc.col === location.col && currentLoc.subUnitId === location.subUnitId && currentLoc.unitId === location.unitId) {
-						this._hideAlert();
-						return;
-					}
-					this._cellAlertManagerService.showAlert({
-						type: _univerjs_sheets_ui.CellAlertType.ERROR,
-						title: this._localeService.t("sheets-numfmt-ui.info.error"),
-						message: this._localeService.t("sheets-numfmt-ui.info.forceStringInfo"),
-						location,
-						width: 200,
-						height: 74,
-						key: ALERT_KEY
-					});
-					return;
-				}
-			}
-			this._hideAlert();
-		}));
+		this._componentManager = _componentManager;
+		this._sidebarService = _sidebarService;
+		this._localeService = _localeService;
+		this._sheetsNumfmtCellContentController = _sheetsNumfmtCellContentController;
+		_defineProperty(this, "_previewPattern", "");
+		_defineProperty(this, "_sidebarDisposable", null);
+		this._initRealTimeRenderingInterceptor();
+		this._initCommands();
+		this._initCloseListener();
+		this._commandExecutedListener();
+		this._initNumfmtLocalChange();
 	}
-	_initZenService() {
-		this.disposeWithMe(this._zenZoneService.visible$.subscribe((visible) => {
-			if (visible) this._hideAlert();
+	_initNumfmtLocalChange() {
+		this.disposeWithMe((0, rxjs.merge)(this._sheetsNumfmtCellContentController.locale$, this._localeService.currentLocale$).subscribe(() => {
+			this._forceUpdate();
 		}));
 	}
-	_hideAlert() {
-		this._cellAlertManagerService.removeAlert(ALERT_KEY);
-	}
-};
-NumfmtAlertRenderController = __decorate([
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.HoverManagerService)),
-	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.CellAlertManagerService)),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
-	__decorateParam(4, _univerjs_ui.IZenZoneService),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets.INumfmtService)),
-	__decorateParam(6, _univerjs_core.IConfigService)
-], NumfmtAlertRenderController);
-
-//#endregion
-//#region src/controllers/numfmt-repeat-last-action.controller.ts
-let NumfmtRepeatLastActionController = class NumfmtRepeatLastActionController extends _univerjs_core.Disposable {
-	constructor(_repeatLastActionService) {
-		super();
-		this._repeatLastActionService = _repeatLastActionService;
-		this._initCommandRecording();
-	}
-	_initCommandRecording() {
-		if (!this._repeatLastActionService) return;
-		const handler = (selections, params) => {
-			if (!params) return;
-			const { values } = params;
-			const numfmtCell = values.find((cell) => cell.pattern);
-			if (!numfmtCell) return;
-			const { pattern, type } = numfmtCell;
-			const newValues = [];
-			const cache = /* @__PURE__ */ new Set();
-			for (const selection of selections) {
-				const { startRow, startColumn, endRow, endColumn } = selection;
-				for (let row = startRow; row <= endRow; row++) for (let col = startColumn; col <= endColumn; col++) {
-					const key = `${row}-${col}`;
-					if (cache.has(key)) continue;
-					cache.add(key);
-					newValues.push({
-						row,
-						col,
-						pattern,
-						type
+	openPanel() {
+		var _selectionManagerServ;
+		const sidebarService = this._sidebarService;
+		const selectionManagerService = this._selectionManagerService;
+		const commandService = this._commandService;
+		const univerInstanceService = this._univerInstanceService;
+		const numfmtService = this._numfmtService;
+		const localeService = this._localeService;
+		const range = (((_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((s) => s.range)) || [])[0];
+		if (!range) return false;
+		const workbook = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
+		const sheet = workbook.getActiveSheet();
+		if (!sheet) return false;
+		const cellValue = sheet.getCellRaw(range.startRow, range.startColumn);
+		const numfmtValue = numfmtService.getValue(workbook.getUnitId(), sheet.getSheetId(), range.startRow, range.startColumn);
+		let pattern = "";
+		if (numfmtValue) pattern = numfmtValue.pattern;
+		const defaultValue = (cellValue === null || cellValue === void 0 ? void 0 : cellValue.t) === _univerjs_core.CellValueType.NUMBER ? cellValue.v : 12345678;
+		const props = {
+			onChange: (config) => {
+				if (config.type === "change") {
+					this._previewPattern = config.value;
+					this._forceUpdate();
+				} else if (config.type === "confirm") {
+					var _selectionManagerServ2;
+					const selections = ((_selectionManagerServ2 = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ2 === void 0 ? void 0 : _selectionManagerServ2.map((s) => s.range)) || [];
+					const params = { values: [] };
+					const patternType = (0, _univerjs_sheets_numfmt.getPatternType)(config.value);
+					selections.forEach((rangeInfo) => {
+						_univerjs_core.Range.foreach(rangeInfo, (row, col) => {
+							params.values.push({
+								row,
+								col,
+								pattern: config.value,
+								type: patternType
+							});
+						});
 					});
-				}
+					commandService.executeCommand(_univerjs_sheets_numfmt.SetNumfmtCommand.id, params);
+					sidebarService.close();
+				} else if (config.type === "cancel") sidebarService.close();
+			},
+			value: {
+				defaultPattern: pattern,
+				defaultValue,
+				row: range.startRow,
+				col: range.startColumn
 			}
-			return {
-				...params,
-				values: newValues
-			};
 		};
-		this.disposeWithMe(this._repeatLastActionService.registerRepeatableCommand(_univerjs_sheets_numfmt.SetNumfmtCommand.id, handler, _univerjs_sheets_ui.RepeatLastActionPermission.CellStyle));
-	}
-};
-NumfmtRepeatLastActionController = __decorate([__decorateParam(0, (0, _univerjs_core.Optional)(_univerjs_sheets_ui.IRepeatLastActionService))], NumfmtRepeatLastActionController);
-
-//#endregion
-//#region src/commands/operations/close.numfmt.panel.operation.ts
-const CloseNumfmtPanelOperator = {
-	id: "sheet.operation.close.numfmt.panel",
-	type: _univerjs_core.CommandType.OPERATION,
-	handler: () => true
-};
-
-//#endregion
-//#region src/commands/operations/open.numfmt.panel.operation.ts
-const OpenNumfmtPanelOperator = {
-	id: "sheet.operation.open.numfmt.panel",
-	type: _univerjs_core.CommandType.OPERATION,
-	handler: (accessor) => {
-		accessor.get(SheetNumfmtUIController).openPanel();
+		this._sidebarDisposable = sidebarService.open({
+			header: { title: localeService.t("sheets-numfmt-ui.title") },
+			children: {
+				label: SHEET_NUMFMT_PANEL$1,
+				...props
+			},
+			onClose: () => {
+				this._forceUpdate();
+				commandService.executeCommand(CloseNumfmtPanelOperator.id);
+			}
+		});
 		return true;
 	}
-};
-
-//#endregion
-//#region src/controllers/user-habit.controller.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const UserHabitCurrencyContext = (0, react.createContext)([]);
-let UserHabitController = class UserHabitController {
-	constructor(_localStorageService) {
-		this._localStorageService = _localStorageService;
-	}
-	_getKey(habit) {
-		return `userHabitController_${habit}`;
-	}
-	async addHabit(habit, initValue) {
-		const key = this._getKey(habit);
-		return this._localStorageService.getItem(key).then((item) => {
-			if (!item) this._localStorageService.setItem(key, initValue);
-		});
+	_forceUpdate(unitId) {
+		var _renderUnit$mainCompo;
+		const renderUnit = this._renderManagerService.getRenderById(unitId !== null && unitId !== void 0 ? unitId : this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).getUnitId());
+		renderUnit === null || renderUnit === void 0 || renderUnit.with(_univerjs_sheets_ui.SheetSkeletonManagerService).reCalculate();
+		renderUnit === null || renderUnit === void 0 || (_renderUnit$mainCompo = renderUnit.mainComponent) === null || _renderUnit$mainCompo === void 0 || _renderUnit$mainCompo.makeDirty();
 	}
-	markHabit(habit, value) {
-		const key = this._getKey(habit);
-		this._localStorageService.getItem(key).then((list) => {
-			if (list) {
-				const index = list.findIndex((item) => item === value);
-				index > -1 && list.splice(index, 1);
-				list.unshift(value);
-				this._localStorageService.setItem(key, list);
-			}
+	_initCommands() {
+		[OpenNumfmtPanelOperator, CloseNumfmtPanelOperator].forEach((config) => {
+			this.disposeWithMe(this._commandService.registerCommand(config));
 		});
 	}
-	async getHabit(habit, sortList) {
-		const key = this._getKey(habit);
-		const result = await this._localStorageService.getItem(key);
-		if (sortList && result) {
-			const priority = result.map((item, index, arr) => {
-				return {
-					value: item,
-					priority: arr.length - index
-				};
+	_initRealTimeRenderingInterceptor() {
+		const combineOpenAndSelection$ = (0, rxjs.combineLatest)([new rxjs.Observable((subscriber) => {
+			this._commandService.onCommandExecuted((commandInfo) => {
+				if (commandInfo.id === OpenNumfmtPanelOperator.id) subscriber.next(true);
+				if (commandInfo.id === CloseNumfmtPanelOperator.id) subscriber.next(false);
 			});
-			return sortList.sort((a, b) => {
-				var _priority$find, _priority$find2;
-				const ap = ((_priority$find = priority.find((item) => item.value === a)) === null || _priority$find === void 0 ? void 0 : _priority$find.priority) || -1;
-				return (((_priority$find2 = priority.find((item) => item.value === b)) === null || _priority$find2 === void 0 ? void 0 : _priority$find2.priority) || -1) - ap;
+		}), this._selectionManagerService.selectionMoveEnd$.pipe((0, rxjs_operators.map)((selectionInfos) => {
+			if (!selectionInfos) return [];
+			return selectionInfos.map((selectionInfo) => selectionInfo.range);
+		}))]);
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(combineOpenAndSelection$.pipe((0, rxjs_operators.switchMap)(([isOpen, selectionRanges]) => new rxjs.Observable((subscribe) => {
+			const disposableCollection = new _univerjs_core.DisposableCollection();
+			isOpen && selectionRanges.length && subscribe.next({
+				selectionRanges,
+				disposableCollection
 			});
-		}
-		return result || [];
-	}
-	deleteHabit(habit) {
-		this._localStorageService.removeItem(habit);
+			return () => {
+				disposableCollection.dispose();
+			};
+		})), (0, rxjs_operators.tap)(() => {
+			this._previewPattern = null;
+		})).subscribe(({ disposableCollection, selectionRanges }) => {
+			var _this$_renderManagerS;
+			const workbook = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
+			this.openPanel();
+			disposableCollection.add(this._sheetInterceptorService.intercept(_univerjs_sheets.INTERCEPTOR_POINT.CELL_CONTENT, {
+				priority: 99,
+				effect: _univerjs_core.InterceptorEffectEnum.Value | _univerjs_core.InterceptorEffectEnum.Style,
+				handler: (cell, location, next) => {
+					const { row, col } = location;
+					const defaultValue = next(cell) || {};
+					if (selectionRanges.find((range) => range.startColumn <= col && range.endColumn >= col && range.startRow <= row && range.endRow >= row)) {
+						const rawValue = location.worksheet.getCellRaw(row, col);
+						const value = rawValue === null || rawValue === void 0 ? void 0 : rawValue.v;
+						const type = rawValue === null || rawValue === void 0 ? void 0 : rawValue.t;
+						if (value === void 0 || value === null || type !== _univerjs_core.CellValueType.NUMBER || this._previewPattern === null) return defaultValue;
+						const info = (0, _univerjs_sheets_numfmt.getPatternPreviewIgnoreGeneral)(this._previewPattern, value, this._sheetsNumfmtCellContentController.locale);
+						if (info.color) {
+							var _this$_themeService$g;
+							const color = (_this$_themeService$g = this._themeService.getColorFromTheme(`${info.color}.500`)) !== null && _this$_themeService$g !== void 0 ? _this$_themeService$g : info.color;
+							return {
+								...defaultValue,
+								v: info.result,
+								t: _univerjs_core.CellValueType.STRING,
+								s: { cl: { rgb: color } }
+							};
+						}
+						return {
+							...defaultValue,
+							v: info.result,
+							t: _univerjs_core.CellValueType.STRING
+						};
+					}
+					return defaultValue;
+				}
+			}));
+			(_this$_renderManagerS = this._renderManagerService.getRenderById(workbook.getUnitId())) === null || _this$_renderManagerS === void 0 || (_this$_renderManagerS = _this$_renderManagerS.mainComponent) === null || _this$_renderManagerS === void 0 || _this$_renderManagerS.makeDirty();
+		})));
 	}
-};
-UserHabitController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.ILocalStorageService))], UserHabitController);
-
-//#endregion
-//#region src/views/hooks/use-currency-options.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const key$1 = "numfmtCurrency";
-const useCurrencyOptions = (onOptionChange) => {
-	const userHabitController = (0, _univerjs_ui.useDependency)(UserHabitController);
-	const [options, setOptions] = (0, react.useState)(_univerjs_core.currencySymbols);
-	(0, react.useEffect)(() => {
-		userHabitController.addHabit("numfmtCurrency", []).then(() => {
-			userHabitController.getHabit(key$1, [..._univerjs_core.currencySymbols]).then((list) => {
-				setOptions(list);
-				onOptionChange && onOptionChange(list);
+	_commandExecutedListener() {
+		const commandList = [_univerjs_sheets.RemoveNumfmtMutation.id, _univerjs_sheets.SetNumfmtMutation.id];
+		this.disposeWithMe(new rxjs.Observable((subscribe) => {
+			const disposable = this._commandService.onCommandExecuted((command) => {
+				if (commandList.includes(command.id)) {
+					const params = command.params;
+					subscribe.next(params.unitId);
+				}
 			});
+			return () => disposable.dispose();
+		}).pipe((0, rxjs_operators.debounceTime)(16)).subscribe((unitId) => this._forceUpdate(unitId)));
+	}
+	_initCloseListener() {
+		this._univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).subscribe((unit) => {
+			if (!unit) {
+				var _this$_sidebarDisposa;
+				(_this$_sidebarDisposa = this._sidebarDisposable) === null || _this$_sidebarDisposa === void 0 || _this$_sidebarDisposa.dispose();
+				this._sidebarDisposable = null;
+			}
 		});
-	}, []);
-	const mark = (v) => {
-		userHabitController.markHabit(key$1, v);
-	};
-	return {
-		userHabitCurrency: options,
-		mark
-	};
+	}
 };
+SheetNumfmtUIController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService)),
+	__decorateParam(2, _univerjs_core.IUniverInstanceService),
+	__decorateParam(3, _univerjs_core.ICommandService),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService)),
+	__decorateParam(5, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(6, _univerjs_sheets.INumfmtService),
+	__decorateParam(7, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
+	__decorateParam(8, _univerjs_ui.ISidebarService),
+	__decorateParam(9, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
+	__decorateParam(10, (0, _univerjs_core.Inject)(_univerjs_sheets_numfmt.SheetsNumfmtCellContentController))
+], SheetNumfmtUIController);
 
 //#endregion
-//#region src/views/hooks/use-next-tick.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const useNextTick = () => {
-	const effectList = (0, react.useRef)([]);
-	const [value, dispatch] = (0, react.useState)({});
-	(0, react.useEffect)(() => {
-		effectList.current.forEach((fn) => {
-			fn();
-		});
-		effectList.current = [];
-	}, [value]);
-	const nextTick = (fn) => {
-		effectList.current.push(fn);
-		dispatch({});
-	};
-	return nextTick;
+//#region src/commands/operations/open.numfmt.panel.operation.ts
+const OpenNumfmtPanelOperator = {
+	id: "sheet.operation.open.numfmt.panel",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(SheetNumfmtUIController).openPanel();
+		return true;
+	}
 };
 
 //#endregion
-//#region src/views/components/Accounting.tsx
-const isAccountingPanel = (pattern) => {
-	return !!(0, _univerjs_sheets_numfmt.getCurrencyType)(pattern) && pattern.startsWith("_(");
-};
-const AccountingPanel = (props) => {
-	const { defaultPattern, action, onChange } = props;
-	const [decimal, setDecimal] = (0, react.useState)(() => (0, _univerjs_sheets_numfmt.getDecimalFromPattern)(defaultPattern || "", 2));
-	const userHabitCurrency = (0, react.useContext)(UserHabitCurrencyContext);
-	const [suffix, setSuffix] = (0, react.useState)(() => (0, _univerjs_sheets_numfmt.getCurrencyType)(defaultPattern) || userHabitCurrency[0]);
-	const options = (0, react.useMemo)(() => userHabitCurrency.map((key) => ({
-		label: key,
-		value: key
-	})), []);
-	const t = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService).t;
-	action.current = () => (0, _univerjs_sheets_numfmt.setPatternDecimal)(`_("${suffix}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal);
-	const handleSelect = (v) => {
-		setSuffix(v);
-		onChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(`_("${v}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal));
-	};
-	const handleDecimalChange = (v) => {
-		const decimal = v || 0;
-		setDecimal(decimal);
-		onChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(`_("${suffix}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal));
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-mt-4 univer-flex univer-justify-between",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "option",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-text-sm univer-text-gray-400",
-				children: t("sheets-numfmt-ui.decimalLength")
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-mt-2 univer-w-32",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
-					value: decimal,
-					step: 1,
-					precision: 0,
-					max: 20,
+//#region src/menu/menu.ts
+const MENU_OPTIONS = (currencySymbol) => {
+	return [
+		{
+			label: "sheets-numfmt-ui.general",
+			pattern: null
+		},
+		{
+			label: "sheets-numfmt-ui.text",
+			pattern: _univerjs_core.DEFAULT_TEXT_FORMAT_EXCEL
+		},
+		"|",
+		{
+			label: "sheets-numfmt-ui.number",
+			pattern: "0"
+		},
+		{
+			label: "sheets-numfmt-ui.percent",
+			pattern: "0.00%"
+		},
+		{
+			label: "sheets-numfmt-ui.scientific",
+			pattern: "0.00E+00"
+		},
+		"|",
+		{
+			label: "sheets-numfmt-ui.accounting",
+			pattern: `"${currencySymbol}" #,##0.00_);[Red]("${currencySymbol}"#,##0.00)`
+		},
+		{
+			label: "sheets-numfmt-ui.financialValue",
+			pattern: "#,##0.00;[Red]#,##0.00"
+		},
+		{
+			label: "sheets-numfmt-ui.currency",
+			pattern: `"${currencySymbol}"#,##0.00_);[Red]("${currencySymbol}"#,##0.00)`
+		},
+		{
+			label: "sheets-numfmt-ui.roundingCurrency",
+			pattern: `"${currencySymbol}"#,##0;[Red]"${currencySymbol}"#,##0`
+		},
+		"|",
+		{
+			label: "sheets-numfmt-ui.date",
+			pattern: "yyyy-mm-dd;@"
+		},
+		{
+			label: "sheets-numfmt-ui.time",
+			pattern: "am/pm h\":\"mm\":\"ss"
+		},
+		{
+			label: "sheets-numfmt-ui.dateTime",
+			pattern: "yyyy-m-d am/pm h:mm"
+		},
+		{
+			label: "sheets-numfmt-ui.timeDuration",
+			pattern: "h:mm:ss"
+		},
+		"|",
+		{
+			label: "sheets-numfmt-ui.moreFmt",
+			pattern: ""
+		}
+	];
+};
+function CurrencySymbolIconMenuItem(accessor) {
+	return {
+		icon: new rxjs.Observable((subscribe) => {
+			const localeService = accessor.get(_univerjs_core.LocaleService);
+			subscribe.next((0, _univerjs_sheets_numfmt.getCurrencySymbolIconByLocale)(localeService.getCurrentLocale()).icon);
+			return localeService.localeChanged$.subscribe(() => {
+				subscribe.next((0, _univerjs_sheets_numfmt.getCurrencySymbolIconByLocale)(localeService.getCurrentLocale()).icon);
+			});
+		}),
+		id: _univerjs_sheets_numfmt.SetCurrencyCommand.id,
+		title: "sheets-numfmt-ui.currency",
+		tooltip: "sheets-numfmt-ui.currency",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
+			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
+			worksheetTypes: [_univerjs_sheets.WorksheetEditPermission, _univerjs_sheets.WorksheetSetCellStylePermission],
+			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+function AddDecimalMenuItem(accessor) {
+	return {
+		icon: "AddDigitsIcon",
+		id: _univerjs_sheets_numfmt.AddDecimalCommand.id,
+		title: "sheets-numfmt-ui.addDecimal",
+		tooltip: "sheets-numfmt-ui.addDecimal",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
+			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
+			worksheetTypes: [_univerjs_sheets.WorksheetEditPermission, _univerjs_sheets.WorksheetSetCellStylePermission],
+			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+function SubtractDecimalMenuItem(accessor) {
+	return {
+		icon: "ReduceDigitsIcon",
+		id: _univerjs_sheets_numfmt.SubtractDecimalCommand.id,
+		title: "sheets-numfmt-ui.subtractDecimal",
+		tooltip: "sheets-numfmt-ui.subtractDecimal",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
+			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
+			worksheetTypes: [_univerjs_sheets.WorksheetEditPermission, _univerjs_sheets.WorksheetSetCellStylePermission],
+			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+function PercentMenuItem(accessor) {
+	return {
+		icon: "PercentIcon",
+		id: _univerjs_sheets_numfmt.SetPercentCommand.id,
+		title: "sheets-numfmt-ui.percent",
+		tooltip: "sheets-numfmt-ui.percent",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
+			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
+			worksheetTypes: [_univerjs_sheets.WorksheetEditPermission, _univerjs_sheets.WorksheetSetCellStylePermission],
+			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+function FactoryOtherMenuItem(accessor) {
+	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+	const commandService = accessor.get(_univerjs_core.ICommandService);
+	const localeService = accessor.get(_univerjs_core.LocaleService);
+	const selectionManagerService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
+	const commandList = [_univerjs_sheets.RemoveNumfmtMutation.id, _univerjs_sheets.SetNumfmtMutation.id];
+	const value$ = (0, _univerjs_sheets_ui.deriveStateFromActiveSheet$)(univerInstanceService, "", ({ workbook, worksheet }) => new rxjs.Observable((subscribe) => (0, rxjs.merge)(selectionManagerService.selectionMoveEnd$, (0, _univerjs_core.fromCallback)(commandService.onCommandExecuted.bind(commandService)).pipe((0, rxjs.filter)(([commandInfo]) => commandList.includes(commandInfo.id)))).subscribe(() => {
+		const selections = selectionManagerService.getCurrentSelections();
+		if (selections && selections[0]) {
+			var _workbook$getStyles$g, _worksheet$getCell;
+			const range = selections[0].range;
+			const row = range.startRow;
+			const col = range.startColumn;
+			const numfmtValue = (_workbook$getStyles$g = workbook.getStyles().get((_worksheet$getCell = worksheet.getCell(row, col)) === null || _worksheet$getCell === void 0 ? void 0 : _worksheet$getCell.s)) === null || _workbook$getStyles$g === void 0 ? void 0 : _workbook$getStyles$g.n;
+			const pattern = numfmtValue === null || numfmtValue === void 0 ? void 0 : numfmtValue.pattern;
+			const currencySymbol = (0, _univerjs_sheets_numfmt.getCurrencySymbolByLocale)(localeService.getCurrentLocale());
+			let value = localeService.t("sheets-numfmt-ui.general");
+			if ((0, _univerjs_core.isDefaultFormat)(pattern)) {
+				subscribe.next(value);
+				return;
+			}
+			if (pattern) {
+				const item = MENU_OPTIONS(currencySymbol).filter((item) => typeof item === "object" && item.pattern).find((item) => (0, _univerjs_core.isPatternEqualWithoutDecimal)(pattern, item.pattern));
+				if (item && typeof item === "object" && item.pattern) value = localeService.t(item.label);
+				else value = localeService.t("sheets-numfmt-ui.moreFmt");
+			}
+			subscribe.next(value);
+		}
+	})));
+	return {
+		label: MORE_NUMFMT_TYPE_KEY,
+		id: OpenNumfmtPanelOperator.id,
+		tooltip: "sheets-numfmt-ui.title",
+		type: _univerjs_ui.MenuItemType.SELECTOR,
+		slot: true,
+		selections: [{ label: {
+			name: OPTIONS_KEY,
+			hoverable: false,
+			selectable: false
+		} }],
+		value$,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
+			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
+			worksheetTypes: [_univerjs_sheets.WorksheetSetCellStylePermission, _univerjs_sheets.WorksheetEditPermission],
+			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+
+//#endregion
+//#region src/views/components/MoreNumfmtType.tsx
+const MORE_NUMFMT_TYPE_KEY = "sheets-numfmt-ui.moreNumfmtType";
+const OPTIONS_KEY = "sheets-numfmt-ui.moreNumfmtType.options";
+function MoreNumfmtType(props) {
+	const { value } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "univer-text-sm",
+		children: value !== null && value !== void 0 ? value : localeService.t("sheets-numfmt-ui.general")
+	});
+}
+function Options() {
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const layoutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ILayoutService);
+	const sheetsNumfmtCellContentController = (0, _univerjs_ui.useDependency)(_univerjs_sheets_numfmt.SheetsNumfmtCellContentController);
+	const selectionManagerService = (0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetsSelectionsService);
+	const setNumfmt = (pattern) => {
+		const selection = selectionManagerService.getCurrentLastSelection();
+		if (!selection) return;
+		const range = selection.range;
+		const values = [];
+		_univerjs_core.Range.foreach(range, (row, col) => {
+			if (pattern) values.push({
+				row,
+				col,
+				pattern,
+				type: (0, _univerjs_sheets_numfmt.getPatternType)(pattern)
+			});
+			else values.push({
+				row,
+				col
+			});
+		});
+		commandService.executeCommand(_univerjs_sheets_numfmt.SetNumfmtCommand.id, { values });
+		layoutService.focus();
+	};
+	const menuOptions = (0, react.useMemo)(() => {
+		return MENU_OPTIONS(_univerjs_sheets_numfmt.localeCurrencySymbolMap.get(localeService.getCurrentLocale()));
+	}, [localeService]);
+	const handleClick = (index) => {
+		if (index === 0) setNumfmt(null);
+		else if (index === menuOptions.length - 1) {
+			commandService.executeCommand(OpenNumfmtPanelOperator.id);
+			layoutService.focus();
+		} else {
+			const item = menuOptions[index];
+			item.pattern && setNumfmt(item.pattern);
+		}
+	};
+	const defaultValue = 1220;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-grid univer-gap-1 univer-p-1.5",
+		children: menuOptions.map((item, index) => {
+			if (item === "|") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Separator, {}, index);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-h-7 univer-cursor-default univer-items-center univer-justify-between univer-gap-6 univer-rounded univer-px-2 univer-text-sm hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
+				onClick: () => handleClick(index),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t(item.label) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
+					children: item.pattern ? (0, _univerjs_sheets_numfmt.getPatternPreview)(item.pattern || "", defaultValue, sheetsNumfmtCellContentController.locale).result.trim() : ""
+				})]
+			}, index);
+		})
+	});
+}
+
+//#endregion
+//#region src/controllers/user-habit.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const UserHabitCurrencyContext = (0, react.createContext)([]);
+let UserHabitController = class UserHabitController {
+	constructor(_localStorageService) {
+		this._localStorageService = _localStorageService;
+	}
+	_getKey(habit) {
+		return `userHabitController_${habit}`;
+	}
+	async addHabit(habit, initValue) {
+		const key = this._getKey(habit);
+		return this._localStorageService.getItem(key).then((item) => {
+			if (!item) this._localStorageService.setItem(key, initValue);
+		});
+	}
+	markHabit(habit, value) {
+		const key = this._getKey(habit);
+		this._localStorageService.getItem(key).then((list) => {
+			if (list) {
+				const index = list.findIndex((item) => item === value);
+				index > -1 && list.splice(index, 1);
+				list.unshift(value);
+				this._localStorageService.setItem(key, list);
+			}
+		});
+	}
+	async getHabit(habit, sortList) {
+		const key = this._getKey(habit);
+		const result = await this._localStorageService.getItem(key);
+		if (sortList && result) {
+			const priority = result.map((item, index, arr) => {
+				return {
+					value: item,
+					priority: arr.length - index
+				};
+			});
+			return sortList.sort((a, b) => {
+				var _priority$find, _priority$find2;
+				const ap = ((_priority$find = priority.find((item) => item.value === a)) === null || _priority$find === void 0 ? void 0 : _priority$find.priority) || -1;
+				return (((_priority$find2 = priority.find((item) => item.value === b)) === null || _priority$find2 === void 0 ? void 0 : _priority$find2.priority) || -1) - ap;
+			});
+		}
+		return result || [];
+	}
+	deleteHabit(habit) {
+		this._localStorageService.removeItem(habit);
+	}
+};
+UserHabitController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.ILocalStorageService))], UserHabitController);
+
+//#endregion
+//#region src/views/components/Accounting.tsx
+const isAccountingPanel = (pattern) => {
+	return !!(0, _univerjs_sheets_numfmt.getCurrencyType)(pattern) && pattern.startsWith("_(");
+};
+function AccountingPanel(props) {
+	const { defaultPattern, onActionChange, onChange } = props;
+	const [decimal, setDecimal] = (0, react.useState)(() => (0, _univerjs_sheets_numfmt.getDecimalFromPattern)(defaultPattern || "", 2));
+	const userHabitCurrency = (0, react.useContext)(UserHabitCurrencyContext);
+	const [suffix, setSuffix] = (0, react.useState)(() => (0, _univerjs_sheets_numfmt.getCurrencyType)(defaultPattern) || userHabitCurrency[0]);
+	const options = (0, react.useMemo)(() => userHabitCurrency.map((key) => ({
+		label: key,
+		value: key
+	})), []);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	(0, react.useLayoutEffect)(() => {
+		onActionChange(() => (0, _univerjs_sheets_numfmt.setPatternDecimal)(`_("${suffix}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal));
+	}, [
+		decimal,
+		onActionChange,
+		suffix
+	]);
+	const handleSelect = (v) => {
+		setSuffix(v);
+		onChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(`_("${v}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal));
+	};
+	const handleDecimalChange = (v) => {
+		const decimal = v || 0;
+		setDecimal(decimal);
+		onChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(`_("${suffix}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal));
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-mt-4 univer-flex univer-justify-between",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "option",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-sm univer-text-gray-400",
+				children: localeService.t("sheets-numfmt-ui.decimalLength")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mt-2 univer-w-32",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					value: decimal,
+					step: 1,
+					precision: 0,
+					max: 20,
 					min: 0,
 					onChange: handleDecimalChange
 				})
@@ -366,7 +668,7 @@ const AccountingPanel = (props) => {
 			className: "option",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-text-sm univer-text-gray-400",
-				children: t("sheets-numfmt-ui.currencyType")
+				children: localeService.t("sheets-numfmt-ui.currencyType")
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-mt-2 univer-w-36",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
@@ -378,17 +680,18 @@ const AccountingPanel = (props) => {
 		})]
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-mt-4 univer-text-sm univer-text-gray-400",
-		children: t("sheets-numfmt-ui.accountingDes")
+		children: localeService.t("sheets-numfmt-ui.accountingDes")
 	})] });
-};
+}
 
 //#endregion
 //#region src/views/components/Currency.tsx
 const isCurrencyPanel = (pattern) => {
 	return !!(0, _univerjs_sheets_numfmt.getCurrencyType)(pattern) && !pattern.startsWith("_(");
 };
-const CurrencyPanel = (props) => {
-	const t = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService).t;
+function CurrencyPanel(props) {
+	const { onActionChange, onChange: onValueChange } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const userHabitCurrency = (0, react.useContext)(UserHabitCurrencyContext);
 	const [suffix, setSuffix] = (0, react.useState)(() => (0, _univerjs_sheets_numfmt.getCurrencyType)(props.defaultPattern) || userHabitCurrency[0]);
 	const [decimal, setDecimal] = (0, react.useState)(() => (0, _univerjs_sheets_numfmt.getDecimalFromPattern)(props.defaultPattern || "", 2));
@@ -402,22 +705,28 @@ const CurrencyPanel = (props) => {
 		label: key,
 		value: key
 	})), [userHabitCurrency]);
-	props.action.current = () => (0, _univerjs_sheets_numfmt.setPatternDecimal)(pattern, decimal);
+	(0, react.useLayoutEffect)(() => {
+		onActionChange(() => (0, _univerjs_sheets_numfmt.setPatternDecimal)(pattern, decimal));
+	}, [
+		decimal,
+		onActionChange,
+		pattern
+	]);
 	const onSelect = (value) => {
 		if (value === void 0) return;
 		setSuffix(value);
 		const pattern = (0, _univerjs_sheets_numfmt.getCurrencyFormatOptions)(value)[0].value;
 		setPattern(pattern);
-		props.onChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(pattern, decimal));
+		onValueChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(pattern, decimal));
 	};
 	const onChange = (value) => {
 		if (value === void 0) return;
 		setPattern(value);
-		props.onChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(value, decimal));
+		onValueChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(value, decimal));
 	};
 	const onDecimalChange = (v) => {
 		setDecimal(v || 0);
-		props.onChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(pattern, v || 0));
+		onValueChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(pattern, v || 0));
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -426,7 +735,7 @@ const CurrencyPanel = (props) => {
 				className: "option",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "univer-text-sm univer-text-gray-400",
-					children: t("sheets-numfmt-ui.decimalLength")
+					children: localeService.t("sheets-numfmt-ui.decimalLength")
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "univer-mt-2 univer-w-32",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
@@ -440,7 +749,7 @@ const CurrencyPanel = (props) => {
 				className: "option",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "univer-text-sm univer-text-gray-400",
-					children: t("sheets-numfmt-ui.currencyType")
+					children: localeService.t("sheets-numfmt-ui.currencyType")
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "univer-mt-2 univer-w-36",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
@@ -453,7 +762,7 @@ const CurrencyPanel = (props) => {
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "label univer-mt-4",
-			children: t("sheets-numfmt-ui.negType")
+			children: localeService.t("sheets-numfmt-ui.negType")
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-mt-2",
@@ -465,29 +774,36 @@ const CurrencyPanel = (props) => {
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-mt-4 univer-text-sm univer-text-gray-400",
-			children: t("sheets-numfmt-ui.currencyDes")
+			children: localeService.t("sheets-numfmt-ui.currencyDes")
 		})
 	] });
-};
+}
 
 //#endregion
 //#region src/views/components/CustomFormat.tsx
-const key = "customFormat";
+const key$1 = "customFormat";
 const historyPatternKey = "numfmt_custom_pattern";
 function CustomFormat(props) {
-	const { defaultPattern, action, onChange } = props;
+	const { defaultPattern, onActionChange, onChange } = props;
 	const userHabitController = (0, _univerjs_ui.useDependency)(UserHabitController);
 	const localStorageService = (0, _univerjs_ui.useDependency)(_univerjs_core.ILocalStorageService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const [pattern, setPattern] = (0, react.useState)(defaultPattern);
-	action.current = () => {
-		userHabitController.markHabit(key, pattern);
-		localStorageService.getItem(historyPatternKey).then((list = []) => {
-			const _list = [...new Set([pattern, ...list || []])].splice(0, 10).filter((e) => !!e);
-			localStorageService.setItem(historyPatternKey, _list);
+	(0, react.useLayoutEffect)(() => {
+		onActionChange(() => {
+			userHabitController.markHabit(key$1, pattern);
+			localStorageService.getItem(historyPatternKey).then((list = []) => {
+				const _list = [.../* @__PURE__ */ new Set([pattern, ...list || []])].splice(0, 10).filter((e) => !!e);
+				localStorageService.setItem(historyPatternKey, _list);
+			});
+			return pattern;
 		});
-		return pattern;
-	};
+	}, [
+		localStorageService,
+		onActionChange,
+		pattern,
+		userHabitController
+	]);
 	const [options, setOptions] = (0, react.useState)([]);
 	(0, react.useEffect)(() => {
 		localStorageService.getItem(historyPatternKey).then((historyList) => {
@@ -497,8 +813,8 @@ function CustomFormat(props) {
 				..._univerjs_sheets_numfmt.NUMBERFORMAT.map((item) => item.suffix)
 			];
 			list.push(...historyList || []);
-			userHabitController.addHabit(key, []).finally(() => {
-				userHabitController.getHabit(key, list).then((list) => {
+			userHabitController.addHabit(key$1, []).finally(() => {
+				userHabitController.getHabit(key$1, list).then((list) => {
 					setOptions([...new Set(list)]);
 				});
 			});
@@ -552,7 +868,7 @@ const isDatePanel = (pattern) => {
 	].includes(info.type);
 };
 function DatePanel(props) {
-	const { onChange, defaultPattern } = props;
+	const { onActionChange, onChange, defaultPattern } = props;
 	const options = (0, react.useMemo)(_univerjs_sheets_numfmt.getDateFormatOptions, []);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const [suffix, setSuffix] = (0, react.useState)(() => {
@@ -562,7 +878,9 @@ function DatePanel(props) {
 		}
 		return options[0].value;
 	});
-	props.action.current = () => suffix;
+	(0, react.useLayoutEffect)(() => {
+		onActionChange(() => suffix);
+	}, [onActionChange, suffix]);
 	const handleChange = (v) => {
 		if (v === void 0) return;
 		setSuffix(v);
@@ -591,19 +909,23 @@ function DatePanel(props) {
 //#endregion
 //#region src/views/components/General.tsx
 const isGeneralPanel = (pattern) => !pattern;
-const GeneralPanel = (props) => {
-	const t = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService).t;
-	props.action.current = () => "";
+function GeneralPanel(props) {
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const { onActionChange } = props;
+	(0, react.useLayoutEffect)(() => {
+		onActionChange(() => "");
+	}, [onActionChange]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-mt-3.5 univer-text-sm/5 univer-text-gray-600 dark:!univer-text-gray-200",
-		children: t("sheets-numfmt-ui.generalDes")
+		children: localeService.t("sheets-numfmt-ui.generalDes")
 	}) });
-};
+}
 
 //#endregion
 //#region src/views/components/ThousandthPercentile.tsx
 const isThousandthPercentilePanel = (pattern) => (0, _univerjs_sheets_numfmt.getNumberFormatOptions)().some((item) => (0, _univerjs_core.isPatternEqualWithoutDecimal)(item.value, pattern));
 function ThousandthPercentilePanel(props) {
+	const { onActionChange, onChange } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const options = (0, react.useMemo)(_univerjs_sheets_numfmt.getNumberFormatOptions, []);
 	const [decimal, setDecimal] = (0, react.useState)(() => (0, _univerjs_sheets_numfmt.getDecimalFromPattern)(props.defaultPattern || "", 0));
@@ -615,89 +937,163 @@ function ThousandthPercentilePanel(props) {
 	const isInputDisable = (0, react.useMemo)(() => !(0, _univerjs_sheets_numfmt.isPatternHasDecimal)(suffix), [suffix]);
 	const handleDecimalChange = (decimal) => {
 		setDecimal(decimal || 0);
-		props.onChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(suffix, Number(decimal || 0)));
+		onChange((0, _univerjs_sheets_numfmt.setPatternDecimal)(suffix, Number(decimal || 0)));
 	};
 	const handleClick = (v) => {
 		if (v === void 0) return;
 		setDecimal((0, _univerjs_sheets_numfmt.getDecimalFromPattern)(v, 0));
 		setSuffix(v);
-		props.onChange(v);
+		onChange(v);
+	};
+	(0, react.useLayoutEffect)(() => {
+		onActionChange(() => pattern);
+	}, [onActionChange, pattern]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-mt-4 univer-text-sm univer-text-gray-400",
+			children: localeService.t("sheets-numfmt-ui.decimalLength")
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-mt-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+				disabled: isInputDisable,
+				value: decimal,
+				max: 20,
+				min: 0,
+				onChange: handleDecimalChange
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-mt-4 univer-text-sm univer-text-gray-400",
+			children: [" ", localeService.t("sheets-numfmt-ui.negType")]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-mt-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.SelectList, {
+				onChange: handleClick,
+				options,
+				value: suffix
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-mt-3.5 univer-text-sm/5 univer-text-gray-600 dark:!univer-text-gray-200",
+			children: localeService.t("sheets-numfmt-ui.thousandthPercentileDes")
+		})
+	] });
+}
+
+//#endregion
+//#region src/views/hooks/use-currency-options.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const key = "numfmtCurrency";
+const useCurrencyOptions = (onOptionChange) => {
+	const userHabitController = (0, _univerjs_ui.useDependency)(UserHabitController);
+	const [options, setOptions] = (0, react.useState)(_univerjs_core.currencySymbols);
+	(0, react.useEffect)(() => {
+		userHabitController.addHabit("numfmtCurrency", []).then(() => {
+			userHabitController.getHabit(key, [..._univerjs_core.currencySymbols]).then((list) => {
+				setOptions(list);
+				onOptionChange && onOptionChange(list);
+			});
+		});
+	}, []);
+	const mark = (v) => {
+		userHabitController.markHabit(key, v);
+	};
+	return {
+		userHabitCurrency: options,
+		mark
+	};
+};
+
+//#endregion
+//#region src/views/hooks/use-next-tick.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const useNextTick = () => {
+	const effectList = (0, react.useRef)([]);
+	const [value, dispatch] = (0, react.useState)({});
+	(0, react.useEffect)(() => {
+		effectList.current.forEach((fn) => {
+			fn();
+		});
+		effectList.current = [];
+	}, [value]);
+	const nextTick = (fn) => {
+		effectList.current.push(fn);
+		dispatch({});
 	};
-	props.action.current = () => pattern;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-mt-4 univer-text-sm univer-text-gray-400",
-			children: localeService.t("sheets-numfmt-ui.decimalLength")
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-mt-2",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
-				disabled: isInputDisable,
-				value: decimal,
-				max: 20,
-				min: 0,
-				onChange: handleDecimalChange
-			})
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-mt-4 univer-text-sm univer-text-gray-400",
-			children: [" ", localeService.t("sheets-numfmt-ui.negType")]
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-mt-2",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.SelectList, {
-				onChange: handleClick,
-				options,
-				value: suffix
-			})
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-mt-3.5 univer-text-sm/5 univer-text-gray-600 dark:!univer-text-gray-200",
-			children: localeService.t("sheets-numfmt-ui.thousandthPercentileDes")
-		})
-	] });
-}
+	return nextTick;
+};
 
 //#endregion
-//#region src/views/components/index.tsx
-const SheetNumfmtPanel = (props) => {
+//#region src/views/SheetNumfmtPanel.tsx
+function SheetNumfmtPanel(props) {
 	const { defaultValue, defaultPattern, row, col } = props.value;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const getCurrentPattern = (0, react.useRef)(() => "");
-	const t = localeService.t;
+	const currentPatternRef = (0, react.useRef)(() => "");
 	const nextTick = useNextTick();
-	const typeOptions = (0, react.useMemo)(() => [
-		{
-			label: "sheets-numfmt-ui.general",
-			component: GeneralPanel
-		},
-		{
-			label: "sheets-numfmt-ui.accounting",
-			component: AccountingPanel
-		},
-		{
-			label: "sheets-numfmt-ui.currency",
-			component: CurrencyPanel
-		},
-		{
-			label: "sheets-numfmt-ui.date",
-			component: DatePanel
-		},
-		{
-			label: "sheets-numfmt-ui.thousandthPercentile",
-			component: ThousandthPercentilePanel
-		},
-		{
-			label: "sheets-numfmt-ui.customFormat",
-			component: CustomFormat
-		}
-	].map((item) => ({
-		...item,
-		label: t(item.label)
-	})), []);
+	const typeOptions = (0, react.useMemo)(() => {
+		return [
+			{
+				label: "sheets-numfmt-ui.general",
+				component: GeneralPanel
+			},
+			{
+				label: "sheets-numfmt-ui.accounting",
+				component: AccountingPanel
+			},
+			{
+				label: "sheets-numfmt-ui.currency",
+				component: CurrencyPanel
+			},
+			{
+				label: "sheets-numfmt-ui.date",
+				component: DatePanel
+			},
+			{
+				label: "sheets-numfmt-ui.thousandthPercentile",
+				component: ThousandthPercentilePanel
+			},
+			{
+				label: "sheets-numfmt-ui.customFormat",
+				component: CustomFormat
+			}
+		].map((item) => ({
+			...item,
+			label: localeService.t(item.label)
+		}));
+	}, [localeService]);
 	const [type, setType] = (0, react.useState)(findDefaultType);
-	const [key, setKey] = (0, react.useState)(() => `${row}_${col}`);
-	const { mark, userHabitCurrency } = useCurrencyOptions(() => setKey(`${row}_${col}_userCurrency'`));
+	const [key, setKey] = (0, react.useState)(() => `${row}_${col}_${defaultPattern}`);
+	const { mark, userHabitCurrency } = useCurrencyOptions(() => setKey(`${row}_${col}_${defaultPattern}_userCurrency`));
 	const BusinessComponent = (0, react.useMemo)(() => {
 		var _typeOptions$find;
 		return (_typeOptions$find = typeOptions.find((item) => item.label === type)) === null || _typeOptions$find === void 0 ? void 0 : _typeOptions$find.component;
@@ -719,7 +1115,7 @@ const SheetNumfmtPanel = (props) => {
 		setType(value);
 		nextTick(() => props.onChange({
 			type: "change",
-			value: getCurrentPattern.current() || ""
+			value: currentPatternRef.current() || ""
 		}));
 	};
 	const handleChange = (0, react.useCallback)((v) => {
@@ -728,8 +1124,11 @@ const SheetNumfmtPanel = (props) => {
 			value: v
 		});
 	}, []);
+	const handleActionChange = (0, react.useCallback)((action) => {
+		currentPatternRef.current = action;
+	}, []);
 	const handleConfirm = () => {
-		const pattern = getCurrentPattern.current() || "";
+		const pattern = currentPatternRef.current() || "";
 		const currency = (0, _univerjs_sheets_numfmt.getCurrencyType)(pattern);
 		if (currency) mark(currency);
 		props.onChange({
@@ -745,295 +1144,216 @@ const SheetNumfmtPanel = (props) => {
 	};
 	const subProps = {
 		onChange: handleChange,
+		onActionChange: handleActionChange,
 		defaultValue,
-		defaultPattern,
-		action: getCurrentPattern
+		defaultPattern
 	};
 	(0, react.useEffect)(() => {
 		setType(findDefaultType());
-		setKey(`${row}_${col}`);
-	}, [row, col]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-flex-col univer-justify-between univer-overflow-y-auto univer-pb-5", _univerjs_design.scrollbarClassName),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-mt-3.5 univer-text-sm univer-text-gray-400",
-				children: t("sheets-numfmt-ui.numfmtType")
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-mt-2",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
-					className: "univer-w-full",
-					value: type,
-					options: selectOptions,
-					onChange: handleSelect
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: BusinessComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserHabitCurrencyContext.Provider, {
-				value: userHabitCurrency,
-				children: /* @__PURE__ */ (0, react.createElement)(BusinessComponent, {
-					...subProps,
-					key
-				})
-			}) })
-		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-mb-5 univer-mt-3.5 univer-flex univer-justify-end",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-				onClick: handleCancel,
-				className: "univer-mr-3",
-				children: t("sheets-numfmt-ui.cancel")
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-				variant: "primary",
-				onClick: handleConfirm,
-				children: t("sheets-numfmt-ui.confirm")
-			})]
-		})]
-	});
-};
-
-//#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
-function _typeof(o) {
-	"@babel/helpers - typeof";
-	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
-		return typeof o;
-	} : function(o) {
-		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-	}, _typeof(o);
-}
-
-//#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
-function toPrimitive(t, r) {
-	if ("object" != _typeof(t) || !t) return t;
-	var e = t[Symbol.toPrimitive];
-	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
-		if ("object" != _typeof(i)) return i;
-		throw new TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return ("string" === r ? String : Number)(t);
-}
-
-//#endregion
-//#region \0@oxc-project+runtime@0.133.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.133.0/helpers/esm/defineProperty.js
-function _defineProperty(e, r, t) {
-	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-		value: t,
-		enumerable: !0,
-		configurable: !0,
-		writable: !0
-	}) : e[r] = t, e;
-}
-
-//#endregion
-//#region src/controllers/numfmt.controller.ts
-const SHEET_NUMFMT_PANEL = "SHEET_NUMFMT_PANEL";
-let SheetNumfmtUIController = class SheetNumfmtUIController extends _univerjs_core.Disposable {
-	constructor(_sheetInterceptorService, _themeService, _univerInstanceService, _commandService, _selectionManagerService, _renderManagerService, _numfmtService, _componentManager, _sidebarService, _localeService, _sheetsNumfmtCellContentController) {
-		super();
-		this._sheetInterceptorService = _sheetInterceptorService;
-		this._themeService = _themeService;
-		this._univerInstanceService = _univerInstanceService;
-		this._commandService = _commandService;
-		this._selectionManagerService = _selectionManagerService;
-		this._renderManagerService = _renderManagerService;
-		this._numfmtService = _numfmtService;
-		this._componentManager = _componentManager;
-		this._sidebarService = _sidebarService;
-		this._localeService = _localeService;
-		this._sheetsNumfmtCellContentController = _sheetsNumfmtCellContentController;
-		_defineProperty(this, "_previewPattern", "");
-		_defineProperty(this, "_sidebarDisposable", null);
-		this._initRealTimeRenderingInterceptor();
-		this._initPanel();
-		this._initCommands();
-		this._initCloseListener();
-		this._commandExecutedListener();
-		this._initNumfmtLocalChange();
-	}
-	_initNumfmtLocalChange() {
-		this.disposeWithMe((0, rxjs.merge)(this._sheetsNumfmtCellContentController.locale$, this._localeService.currentLocale$).subscribe(() => {
-			this._forceUpdate();
-		}));
-	}
-	openPanel() {
-		var _selectionManagerServ;
-		const sidebarService = this._sidebarService;
-		const selectionManagerService = this._selectionManagerService;
-		const commandService = this._commandService;
-		const univerInstanceService = this._univerInstanceService;
-		const numfmtService = this._numfmtService;
-		const localeService = this._localeService;
-		const range = (((_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((s) => s.range)) || [])[0];
-		if (!range) return false;
-		const workbook = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
-		const sheet = workbook.getActiveSheet();
-		if (!sheet) return false;
-		const cellValue = sheet.getCellRaw(range.startRow, range.startColumn);
-		const numfmtValue = numfmtService.getValue(workbook.getUnitId(), sheet.getSheetId(), range.startRow, range.startColumn);
-		let pattern = "";
-		if (numfmtValue) pattern = numfmtValue.pattern;
-		const defaultValue = (cellValue === null || cellValue === void 0 ? void 0 : cellValue.t) === _univerjs_core.CellValueType.NUMBER ? cellValue.v : 12345678;
-		const props = {
-			onChange: (config) => {
-				if (config.type === "change") {
-					this._previewPattern = config.value;
-					this._forceUpdate();
-				} else if (config.type === "confirm") {
-					var _selectionManagerServ2;
-					const selections = ((_selectionManagerServ2 = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ2 === void 0 ? void 0 : _selectionManagerServ2.map((s) => s.range)) || [];
-					const params = { values: [] };
-					const patternType = (0, _univerjs_sheets_numfmt.getPatternType)(config.value);
-					selections.forEach((rangeInfo) => {
-						_univerjs_core.Range.foreach(rangeInfo, (row, col) => {
-							params.values.push({
-								row,
-								col,
-								pattern: config.value,
-								type: patternType
-							});
-						});
-					});
-					commandService.executeCommand(_univerjs_sheets_numfmt.SetNumfmtCommand.id, params);
-					sidebarService.close();
-				} else if (config.type === "cancel") sidebarService.close();
-			},
-			value: {
-				defaultPattern: pattern,
-				defaultValue,
-				row: range.startRow,
-				col: range.startColumn
-			}
-		};
-		this._sidebarDisposable = sidebarService.open({
-			header: { title: localeService.t("sheets-numfmt-ui.title") },
-			children: {
-				label: SHEET_NUMFMT_PANEL,
-				...props
-			},
-			onClose: () => {
-				this._forceUpdate();
-				commandService.executeCommand(CloseNumfmtPanelOperator.id);
-			}
-		});
-		return true;
+		setKey(`${row}_${col}_${defaultPattern}`);
+	}, [
+		row,
+		col,
+		defaultPattern
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-flex-col univer-justify-between univer-overflow-y-auto univer-pb-5", _univerjs_design.scrollbarClassName),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mt-3.5 univer-text-sm univer-text-gray-400",
+				children: localeService.t("sheets-numfmt-ui.numfmtType")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mt-2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+					className: "univer-w-full",
+					value: type,
+					options: selectOptions,
+					onChange: handleSelect
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: BusinessComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserHabitCurrencyContext.Provider, {
+				value: userHabitCurrency,
+				children: /* @__PURE__ */ (0, react.createElement)(BusinessComponent, {
+					...subProps,
+					key
+				})
+			}) })
+		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-mb-5 univer-mt-3.5 univer-flex univer-justify-end",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+				onClick: handleCancel,
+				className: "univer-mr-3",
+				children: localeService.t("sheets-numfmt-ui.cancel")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+				variant: "primary",
+				onClick: handleConfirm,
+				children: localeService.t("sheets-numfmt-ui.confirm")
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/controllers/components.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const SHEET_NUMFMT_PANEL = "SHEET_NUMFMT_PANEL";
+let ComponentsController = class ComponentsController extends _univerjs_core.Disposable {
+	constructor(_componentManager, _iconManager) {
+		super();
+		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
+		this._registerComponents();
+		this._registerIcons();
 	}
-	_forceUpdate(unitId) {
-		var _renderUnit$mainCompo;
-		const renderUnit = this._renderManagerService.getRenderById(unitId !== null && unitId !== void 0 ? unitId : this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).getUnitId());
-		renderUnit === null || renderUnit === void 0 || renderUnit.with(_univerjs_sheets_ui.SheetSkeletonManagerService).reCalculate();
-		renderUnit === null || renderUnit === void 0 || (_renderUnit$mainCompo = renderUnit.mainComponent) === null || _renderUnit$mainCompo === void 0 || _renderUnit$mainCompo.makeDirty();
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({
+			AddDigitsIcon: _univerjs_icons.AddDigitsIcon,
+			DollarIcon: _univerjs_icons.DollarIcon,
+			EuroIcon: _univerjs_icons.EuroIcon,
+			PercentIcon: _univerjs_icons.PercentIcon,
+			ReduceDigitsIcon: _univerjs_icons.ReduceDigitsIcon,
+			RmbIcon: _univerjs_icons.RmbIcon,
+			RoubleIcon: _univerjs_icons.RoubleIcon
+		}));
 	}
-	_initCommands() {
-		[OpenNumfmtPanelOperator, CloseNumfmtPanelOperator].forEach((config) => {
-			this.disposeWithMe(this._commandService.registerCommand(config));
+	_registerComponents() {
+		this.disposeWithMe(this._componentManager.register(SHEET_NUMFMT_PANEL, SheetNumfmtPanel));
+		[[MORE_NUMFMT_TYPE_KEY, MoreNumfmtType], [OPTIONS_KEY, Options]].forEach(([key, comp]) => {
+			this.disposeWithMe(this._componentManager.register(key, comp));
 		});
 	}
-	_initPanel() {
-		this.disposeWithMe(this._componentManager.register(SHEET_NUMFMT_PANEL, SheetNumfmtPanel));
+};
+ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IconManager))], ComponentsController);
+
+//#endregion
+//#region src/controllers/numfmt-alert-render.controller.ts
+const ALERT_KEY = "SHEET_NUMFMT_ALERT";
+let NumfmtAlertRenderController = class NumfmtAlertRenderController extends _univerjs_core.Disposable {
+	constructor(_context, _hoverManagerService, _cellAlertManagerService, _localeService, _numfmtService, _configService) {
+		super();
+		this._context = _context;
+		this._hoverManagerService = _hoverManagerService;
+		this._cellAlertManagerService = _cellAlertManagerService;
+		this._localeService = _localeService;
+		this._numfmtService = _numfmtService;
+		this._configService = _configService;
+		this._init();
 	}
-	_initRealTimeRenderingInterceptor() {
-		const combineOpenAndSelection$ = (0, rxjs.combineLatest)([new rxjs.Observable((subscriber) => {
-			this._commandService.onCommandExecuted((commandInfo) => {
-				if (commandInfo.id === OpenNumfmtPanelOperator.id) subscriber.next(true);
-				if (commandInfo.id === CloseNumfmtPanelOperator.id) subscriber.next(false);
-			});
-		}), this._selectionManagerService.selectionMoveEnd$.pipe((0, rxjs_operators.map)((selectionInfos) => {
-			if (!selectionInfos) return [];
-			return selectionInfos.map((selectionInfo) => selectionInfo.range);
-		}))]);
-		this.disposeWithMe((0, _univerjs_core.toDisposable)(combineOpenAndSelection$.pipe((0, rxjs_operators.switchMap)(([isOpen, selectionRanges]) => new rxjs.Observable((subscribe) => {
-			const disposableCollection = new _univerjs_core.DisposableCollection();
-			isOpen && selectionRanges.length && subscribe.next({
-				selectionRanges,
-				disposableCollection
-			});
-			return () => {
-				disposableCollection.dispose();
-			};
-		})), (0, rxjs_operators.tap)(() => {
-			this._previewPattern = null;
-		})).subscribe(({ disposableCollection, selectionRanges }) => {
-			var _this$_renderManagerS;
-			const workbook = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
-			this.openPanel();
-			disposableCollection.add(this._sheetInterceptorService.intercept(_univerjs_sheets.INTERCEPTOR_POINT.CELL_CONTENT, {
-				priority: 99,
-				effect: _univerjs_core.InterceptorEffectEnum.Value | _univerjs_core.InterceptorEffectEnum.Style,
-				handler: (cell, location, next) => {
-					const { row, col } = location;
-					const defaultValue = next(cell) || {};
-					if (selectionRanges.find((range) => range.startColumn <= col && range.endColumn >= col && range.startRow <= row && range.endRow >= row)) {
-						const rawValue = location.worksheet.getCellRaw(row, col);
-						const value = rawValue === null || rawValue === void 0 ? void 0 : rawValue.v;
-						const type = rawValue === null || rawValue === void 0 ? void 0 : rawValue.t;
-						if (value === void 0 || value === null || type !== _univerjs_core.CellValueType.NUMBER || this._previewPattern === null) return defaultValue;
-						const info = (0, _univerjs_sheets_numfmt.getPatternPreviewIgnoreGeneral)(this._previewPattern, value, this._sheetsNumfmtCellContentController.locale);
-						if (info.color) {
-							var _this$_themeService$g;
-							const color = (_this$_themeService$g = this._themeService.getColorFromTheme(`${info.color}.500`)) !== null && _this$_themeService$g !== void 0 ? _this$_themeService$g : info.color;
-							return {
-								...defaultValue,
-								v: info.result,
-								t: _univerjs_core.CellValueType.STRING,
-								s: { cl: { rgb: color } }
-							};
-						}
-						return {
-							...defaultValue,
-							v: info.result,
-							t: _univerjs_core.CellValueType.STRING
-						};
-					}
-					return defaultValue;
-				}
-			}));
-			(_this$_renderManagerS = this._renderManagerService.getRenderById(workbook.getUnitId())) === null || _this$_renderManagerS === void 0 || (_this$_renderManagerS = _this$_renderManagerS.mainComponent) === null || _this$_renderManagerS === void 0 || _this$_renderManagerS.makeDirty();
-		})));
+	_init() {
+		this._initCellAlertPopup();
 	}
-	_commandExecutedListener() {
-		const commandList = [_univerjs_sheets.RemoveNumfmtMutation.id, _univerjs_sheets.SetNumfmtMutation.id];
-		this.disposeWithMe(new rxjs.Observable((subscribe) => {
-			const disposable = this._commandService.onCommandExecuted((command) => {
-				if (commandList.includes(command.id)) {
-					const params = command.params;
-					subscribe.next(params.unitId);
+	_initCellAlertPopup() {
+		this.disposeWithMe(this._hoverManagerService.currentCell$.pipe((0, rxjs.debounceTime)(100)).subscribe((cellPos) => {
+			if (cellPos) {
+				const location = cellPos.location;
+				const workbook = this._context.unit;
+				const worksheet = workbook.getActiveSheet();
+				if (!worksheet) return this._hideAlert();
+				const unitId = location.unitId;
+				const sheetId = location.subUnitId;
+				let numfmtValue;
+				const cellData = worksheet.getCell(location.row, location.col);
+				if (cellData === null || cellData === void 0 ? void 0 : cellData.s) {
+					const style = workbook.getStyles().get(cellData.s);
+					if (style === null || style === void 0 ? void 0 : style.n) numfmtValue = style.n;
+				}
+				if (!numfmtValue) numfmtValue = this._numfmtService.getValue(unitId, sheetId, location.row, location.col);
+				if (!numfmtValue) {
+					this._hideAlert();
+					return;
+				}
+				if ((0, _univerjs_core.isTextFormat)(numfmtValue.pattern) && _univerjs_core.Tools.isDefine(cellData === null || cellData === void 0 ? void 0 : cellData.v) && (0, _univerjs_core.isRealNum)(cellData.v)) {
+					var _this$_configService$, _currentAlert$alert;
+					if ((_this$_configService$ = this._configService.getConfig(_univerjs_sheets_numfmt.SHEETS_NUMFMT_PLUGIN_CONFIG_KEY)) === null || _this$_configService$ === void 0 ? void 0 : _this$_configService$.disableTextFormatAlert) return;
+					const currentAlert = this._cellAlertManagerService.currentAlert.get(ALERT_KEY);
+					const currentLoc = currentAlert === null || currentAlert === void 0 || (_currentAlert$alert = currentAlert.alert) === null || _currentAlert$alert === void 0 ? void 0 : _currentAlert$alert.location;
+					if (currentLoc && currentLoc.row === location.row && currentLoc.col === location.col && currentLoc.subUnitId === location.subUnitId && currentLoc.unitId === location.unitId) {
+						this._hideAlert();
+						return;
+					}
+					this._cellAlertManagerService.showAlert({
+						type: _univerjs_sheets_ui.CellAlertType.ERROR,
+						title: this._localeService.t("sheets-numfmt-ui.info.error"),
+						message: this._localeService.t("sheets-numfmt-ui.info.forceStringInfo"),
+						location,
+						width: 200,
+						height: 74,
+						key: ALERT_KEY
+					});
+					return;
 				}
-			});
-			return () => disposable.dispose();
-		}).pipe((0, rxjs_operators.debounceTime)(16)).subscribe((unitId) => this._forceUpdate(unitId)));
-	}
-	_initCloseListener() {
-		this._univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).subscribe((unit) => {
-			if (!unit) {
-				var _this$_sidebarDisposa;
-				(_this$_sidebarDisposa = this._sidebarDisposable) === null || _this$_sidebarDisposa === void 0 || _this$_sidebarDisposa.dispose();
-				this._sidebarDisposable = null;
 			}
-		});
+			this._hideAlert();
+		}));
+	}
+	_hideAlert() {
+		this._cellAlertManagerService.removeAlert(ALERT_KEY);
 	}
 };
-SheetNumfmtUIController = __decorate([
-	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService)),
-	__decorateParam(2, _univerjs_core.IUniverInstanceService),
-	__decorateParam(3, _univerjs_core.ICommandService),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService)),
-	__decorateParam(5, _univerjs_engine_render.IRenderManagerService),
-	__decorateParam(6, _univerjs_sheets.INumfmtService),
-	__decorateParam(7, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
-	__decorateParam(8, _univerjs_ui.ISidebarService),
-	__decorateParam(9, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
-	__decorateParam(10, (0, _univerjs_core.Inject)(_univerjs_sheets_numfmt.SheetsNumfmtCellContentController))
-], SheetNumfmtUIController);
+NumfmtAlertRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.HoverManagerService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.CellAlertManagerService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets.INumfmtService)),
+	__decorateParam(5, _univerjs_core.IConfigService)
+], NumfmtAlertRenderController);
+
+//#endregion
+//#region src/controllers/numfmt-repeat-last-action.controller.ts
+let NumfmtRepeatLastActionController = class NumfmtRepeatLastActionController extends _univerjs_core.Disposable {
+	constructor(_repeatLastActionService) {
+		super();
+		this._repeatLastActionService = _repeatLastActionService;
+		this._initCommandRecording();
+	}
+	_initCommandRecording() {
+		if (!this._repeatLastActionService) return;
+		const handler = (selections, params) => {
+			if (!params) return;
+			const { values } = params;
+			const numfmtCell = values.find((cell) => cell.pattern);
+			if (!numfmtCell) return;
+			const { pattern, type } = numfmtCell;
+			const newValues = [];
+			const cache = /* @__PURE__ */ new Set();
+			for (const selection of selections) {
+				const { startRow, startColumn, endRow, endColumn } = selection;
+				for (let row = startRow; row <= endRow; row++) for (let col = startColumn; col <= endColumn; col++) {
+					const key = `${row}-${col}`;
+					if (cache.has(key)) continue;
+					cache.add(key);
+					newValues.push({
+						row,
+						col,
+						pattern,
+						type
+					});
+				}
+			}
+			return {
+				...params,
+				values: newValues
+			};
+		};
+		this.disposeWithMe(this._repeatLastActionService.registerRepeatableCommand(_univerjs_sheets_numfmt.SetNumfmtCommand.id, handler, _univerjs_sheets_ui.RepeatLastActionPermission.CellStyle));
+	}
+};
+NumfmtRepeatLastActionController = __decorate([__decorateParam(0, (0, _univerjs_core.Optional)(_univerjs_sheets_ui.IRepeatLastActionService))], NumfmtRepeatLastActionController);
 
 //#endregion
 //#region src/controllers/numfmt.editor.controller.ts
@@ -1244,256 +1564,6 @@ function canConvertRichTextToNumfmt(body) {
 	}) || paragraphs.some((paragraph) => paragraph.bullet) || paragraphs.length >= 2 || Boolean(customRanges === null || customRanges === void 0 ? void 0 : customRanges.length) || customBlocks.length > 0);
 }
 
-//#endregion
-//#region src/menu/menu.ts
-const MENU_OPTIONS = (currencySymbol) => {
-	return [
-		{
-			label: "sheets-numfmt-ui.general",
-			pattern: null
-		},
-		{
-			label: "sheets-numfmt-ui.text",
-			pattern: _univerjs_core.DEFAULT_TEXT_FORMAT_EXCEL
-		},
-		"|",
-		{
-			label: "sheets-numfmt-ui.number",
-			pattern: "0"
-		},
-		{
-			label: "sheets-numfmt-ui.percent",
-			pattern: "0.00%"
-		},
-		{
-			label: "sheets-numfmt-ui.scientific",
-			pattern: "0.00E+00"
-		},
-		"|",
-		{
-			label: "sheets-numfmt-ui.accounting",
-			pattern: `"${currencySymbol}" #,##0.00_);[Red]("${currencySymbol}"#,##0.00)`
-		},
-		{
-			label: "sheets-numfmt-ui.financialValue",
-			pattern: "#,##0.00;[Red]#,##0.00"
-		},
-		{
-			label: "sheets-numfmt-ui.currency",
-			pattern: `"${currencySymbol}"#,##0.00_);[Red]("${currencySymbol}"#,##0.00)`
-		},
-		{
-			label: "sheets-numfmt-ui.roundingCurrency",
-			pattern: `"${currencySymbol}"#,##0;[Red]"${currencySymbol}"#,##0`
-		},
-		"|",
-		{
-			label: "sheets-numfmt-ui.date",
-			pattern: "yyyy-mm-dd;@"
-		},
-		{
-			label: "sheets-numfmt-ui.time",
-			pattern: "am/pm h\":\"mm\":\"ss"
-		},
-		{
-			label: "sheets-numfmt-ui.dateTime",
-			pattern: "yyyy-m-d am/pm h:mm"
-		},
-		{
-			label: "sheets-numfmt-ui.timeDuration",
-			pattern: "h:mm:ss"
-		},
-		"|",
-		{
-			label: "sheets-numfmt-ui.moreFmt",
-			pattern: ""
-		}
-	];
-};
-const CurrencySymbolIconMenuItem = (accessor) => {
-	return {
-		icon: new rxjs.Observable((subscribe) => {
-			const localeService = accessor.get(_univerjs_core.LocaleService);
-			subscribe.next((0, _univerjs_sheets_numfmt.getCurrencySymbolIconByLocale)(localeService.getCurrentLocale()).icon);
-			return localeService.localeChanged$.subscribe(() => {
-				subscribe.next((0, _univerjs_sheets_numfmt.getCurrencySymbolIconByLocale)(localeService.getCurrentLocale()).icon);
-			});
-		}),
-		id: _univerjs_sheets_numfmt.SetCurrencyCommand.id,
-		title: "sheets-numfmt-ui.currency",
-		tooltip: "sheets-numfmt-ui.currency",
-		type: _univerjs_ui.MenuItemType.BUTTON,
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
-		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
-			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
-			worksheetTypes: [_univerjs_sheets.WorksheetEditPermission, _univerjs_sheets.WorksheetSetCellStylePermission],
-			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
-		})
-	};
-};
-const AddDecimalMenuItem = (accessor) => {
-	return {
-		icon: "AddDigitsIcon",
-		id: _univerjs_sheets_numfmt.AddDecimalCommand.id,
-		title: "sheets-numfmt-ui.addDecimal",
-		tooltip: "sheets-numfmt-ui.addDecimal",
-		type: _univerjs_ui.MenuItemType.BUTTON,
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
-		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
-			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
-			worksheetTypes: [_univerjs_sheets.WorksheetEditPermission, _univerjs_sheets.WorksheetSetCellStylePermission],
-			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
-		})
-	};
-};
-const SubtractDecimalMenuItem = (accessor) => {
-	return {
-		icon: "ReduceDigitsIcon",
-		id: _univerjs_sheets_numfmt.SubtractDecimalCommand.id,
-		title: "sheets-numfmt-ui.subtractDecimal",
-		tooltip: "sheets-numfmt-ui.subtractDecimal",
-		type: _univerjs_ui.MenuItemType.BUTTON,
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
-		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
-			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
-			worksheetTypes: [_univerjs_sheets.WorksheetEditPermission, _univerjs_sheets.WorksheetSetCellStylePermission],
-			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
-		})
-	};
-};
-const PercentMenuItem = (accessor) => {
-	return {
-		icon: "PercentIcon",
-		id: _univerjs_sheets_numfmt.SetPercentCommand.id,
-		title: "sheets-numfmt-ui.percent",
-		tooltip: "sheets-numfmt-ui.percent",
-		type: _univerjs_ui.MenuItemType.BUTTON,
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
-		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
-			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
-			worksheetTypes: [_univerjs_sheets.WorksheetEditPermission, _univerjs_sheets.WorksheetSetCellStylePermission],
-			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
-		})
-	};
-};
-const FactoryOtherMenuItem = (accessor) => {
-	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-	const commandService = accessor.get(_univerjs_core.ICommandService);
-	const localeService = accessor.get(_univerjs_core.LocaleService);
-	const selectionManagerService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
-	const commandList = [_univerjs_sheets.RemoveNumfmtMutation.id, _univerjs_sheets.SetNumfmtMutation.id];
-	const value$ = (0, _univerjs_sheets_ui.deriveStateFromActiveSheet$)(univerInstanceService, "", ({ workbook, worksheet }) => new rxjs.Observable((subscribe) => (0, rxjs.merge)(selectionManagerService.selectionMoveEnd$, (0, _univerjs_core.fromCallback)(commandService.onCommandExecuted.bind(commandService)).pipe((0, rxjs.filter)(([commandInfo]) => commandList.includes(commandInfo.id)))).subscribe(() => {
-		const selections = selectionManagerService.getCurrentSelections();
-		if (selections && selections[0]) {
-			var _workbook$getStyles$g, _worksheet$getCell;
-			const range = selections[0].range;
-			const row = range.startRow;
-			const col = range.startColumn;
-			const numfmtValue = (_workbook$getStyles$g = workbook.getStyles().get((_worksheet$getCell = worksheet.getCell(row, col)) === null || _worksheet$getCell === void 0 ? void 0 : _worksheet$getCell.s)) === null || _workbook$getStyles$g === void 0 ? void 0 : _workbook$getStyles$g.n;
-			const pattern = numfmtValue === null || numfmtValue === void 0 ? void 0 : numfmtValue.pattern;
-			const currencySymbol = (0, _univerjs_sheets_numfmt.getCurrencySymbolByLocale)(localeService.getCurrentLocale());
-			let value = localeService.t("sheets-numfmt-ui.general");
-			if ((0, _univerjs_core.isDefaultFormat)(pattern)) {
-				subscribe.next(value);
-				return;
-			}
-			if (pattern) {
-				const item = MENU_OPTIONS(currencySymbol).filter((item) => typeof item === "object" && item.pattern).find((item) => (0, _univerjs_core.isPatternEqualWithoutDecimal)(pattern, item.pattern));
-				if (item && typeof item === "object" && item.pattern) value = localeService.t(item.label);
-				else value = localeService.t("sheets-numfmt-ui.moreFmt");
-			}
-			subscribe.next(value);
-		}
-	})));
-	return {
-		label: MORE_NUMFMT_TYPE_KEY,
-		id: OpenNumfmtPanelOperator.id,
-		tooltip: "sheets-numfmt-ui.title",
-		type: _univerjs_ui.MenuItemType.SELECTOR,
-		slot: true,
-		selections: [{ label: {
-			name: OPTIONS_KEY,
-			hoverable: false,
-			selectable: false
-		} }],
-		value$,
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
-		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
-			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
-			worksheetTypes: [_univerjs_sheets.WorksheetSetCellStylePermission, _univerjs_sheets.WorksheetEditPermission],
-			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
-		})
-	};
-};
-
-//#endregion
-//#region src/views/components/MoreNumfmtType.tsx
-const MORE_NUMFMT_TYPE_KEY = "sheets-numfmt-ui.moreNumfmtType";
-const OPTIONS_KEY = "sheets-numfmt-ui.moreNumfmtType.options";
-function MoreNumfmtType(props) {
-	const { value } = props;
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "univer-text-sm",
-		children: value !== null && value !== void 0 ? value : localeService.t("sheets-numfmt-ui.general")
-	});
-}
-function Options() {
-	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const layoutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ILayoutService);
-	const sheetsNumfmtCellContentController = (0, _univerjs_ui.useDependency)(_univerjs_sheets_numfmt.SheetsNumfmtCellContentController);
-	const selectionManagerService = (0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetsSelectionsService);
-	const setNumfmt = (pattern) => {
-		const selection = selectionManagerService.getCurrentLastSelection();
-		if (!selection) return;
-		const range = selection.range;
-		const values = [];
-		_univerjs_core.Range.foreach(range, (row, col) => {
-			if (pattern) values.push({
-				row,
-				col,
-				pattern,
-				type: (0, _univerjs_sheets_numfmt.getPatternType)(pattern)
-			});
-			else values.push({
-				row,
-				col
-			});
-		});
-		commandService.executeCommand(_univerjs_sheets_numfmt.SetNumfmtCommand.id, { values });
-		layoutService.focus();
-	};
-	const menuOptions = (0, react.useMemo)(() => {
-		return MENU_OPTIONS(_univerjs_sheets_numfmt.localeCurrencySymbolMap.get(localeService.getCurrentLocale()));
-	}, [localeService]);
-	const handleClick = (index) => {
-		if (index === 0) setNumfmt(null);
-		else if (index === menuOptions.length - 1) {
-			commandService.executeCommand(OpenNumfmtPanelOperator.id);
-			layoutService.focus();
-		} else {
-			const item = menuOptions[index];
-			item.pattern && setNumfmt(item.pattern);
-		}
-	};
-	const defaultValue = 1220;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-grid univer-gap-1 univer-p-1.5",
-		children: menuOptions.map((item, index) => {
-			if (item === "|") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Separator, {}, index);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-flex univer-h-7 univer-cursor-default univer-items-center univer-justify-between univer-gap-6 univer-rounded univer-px-2 univer-text-sm hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
-				onClick: () => handleClick(index),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t(item.label) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
-					children: item.pattern ? (0, _univerjs_sheets_numfmt.getPatternPreview)(item.pattern || "", defaultValue, sheetsNumfmtCellContentController.locale).result.trim() : ""
-				})]
-			}, index);
-		})
-	});
-}
-
 //#endregion
 //#region src/menu/schema.ts
 const menuSchema = { [_univerjs_ui.RibbonStartGroup.LAYOUT]: {
@@ -1545,9 +1615,6 @@ let NumfmtMenuController = class NumfmtMenuController extends _univerjs_core.Dis
 	}
 	_initMenu() {
 		this._menuManagerService.mergeMenu(menuSchema);
-		[[MORE_NUMFMT_TYPE_KEY, MoreNumfmtType], [OPTIONS_KEY, Options]].forEach(([key, comp]) => {
-			this.disposeWithMe(this._componentManager.register(key, comp));
-		});
 	}
 };
 NumfmtMenuController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, _univerjs_ui.IMenuManagerService)], NumfmtMenuController);
@@ -1566,6 +1633,8 @@ let UniverSheetsNumfmtUIPlugin = class UniverSheetsNumfmtUIPlugin extends _unive
 		this._configService.setConfig("sheets-numfmt-ui.config", rest);
 	}
 	onStarting() {
+		this._injector.add([ComponentsController]);
+		this._injector.get(ComponentsController);
 		(0, _univerjs_core.registerDependencies)(this._injector, [
 			[SheetNumfmtUIController],
 			[NumfmtEditorController],