@univerjs/sheets-numfmt-ui 0.25.1 → 1.0.0-alpha.1

package/lib/es/index.js

@@ -2,19 +2,19 @@ import { CellValueType, CommandType, DEFAULT_TEXT_FORMAT_EXCEL, DependentOn, Dis
 import { IRenderManagerService } from "@univerjs/engine-render";
 import { AddDecimalCommand, CURRENCYFORMAT, DATEFMTLISG, NUMBERFORMAT, SHEETS_NUMFMT_PLUGIN_CONFIG_KEY, SetCurrencyCommand, SetNumfmtCommand, SetPercentCommand, SheetsNumfmtCellContentController, SubtractDecimalCommand, UniverSheetsNumfmtPlugin, getCurrencyFormatOptions, getCurrencySymbolByLocale, getCurrencySymbolIconByLocale, getCurrencyType, getDateFormatOptions, getDecimalFromPattern, getNumberFormatOptions, getPatternPreview, getPatternPreviewIgnoreGeneral, getPatternType, isPatternHasDecimal, localeCurrencySymbolMap, setPatternDecimal } from "@univerjs/sheets-numfmt";
 import { CellAlertManagerService, CellAlertType, HoverManagerService, IEditorBridgeService, IRepeatLastActionService, RepeatLastActionPermission, SheetSkeletonManagerService, UniverSheetsUIPlugin, deriveStateFromActiveSheet$, getCurrentRangeDisable$ } from "@univerjs/sheets-ui";
+import { AddDigitsIcon, CheckMarkIcon, DollarIcon, EuroIcon, PercentIcon, ReduceDigitsIcon, RmbIcon, RoubleIcon } from "@univerjs/icons";
+import { ComponentManager, ILayoutService, IMenuManagerService, ISidebarService, IconManager, MenuItemType, RibbonStartGroup, getMenuHiddenObservable, useDependency } from "@univerjs/ui";
+import { Button, Input, InputNumber, Select, SelectList, Separator, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
 import { AFTER_CELL_EDIT, BEFORE_CELL_EDIT, INTERCEPTOR_POINT, INumfmtService, RangeProtectionPermissionEditPoint, RemoveNumfmtMutation, SetNumfmtMutation, SetRangeValuesCommand, SheetInterceptorService, SheetsSelectionsService, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellStylePermission, factoryRemoveNumfmtUndoMutation, factorySetNumfmtUndoMutation, transformCellsToRange } from "@univerjs/sheets";
-import { ComponentManager, ILayoutService, IMenuManagerService, ISidebarService, IZenZoneService, MenuItemType, RibbonStartGroup, getMenuHiddenObservable, useDependency } from "@univerjs/ui";
+import { createContext, createElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Observable, combineLatest, debounceTime, filter, merge as merge$1 } from "rxjs";
 import { debounceTime as debounceTime$1, map, switchMap, tap } from "rxjs/operators";
-import { Button, Input, InputNumber, Select, SelectList, Separator, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
-import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckMarkIcon } from "@univerjs/icons";
 import { stripErrorMargin } from "@univerjs/engine-formula";
 
 //#region package.json
 var name = "@univerjs/sheets-numfmt-ui";
-var version = "0.25.1";
+var version = "1.0.0-alpha.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -23,7 +23,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: 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);
@@ -31,7 +81,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);
@@ -40,332 +90,584 @@ 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 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 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(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 (isTextFormat(numfmtValue.pattern) && Tools.isDefine(cellData === null || cellData === void 0 ? void 0 : cellData.v) && isRealNum(cellData.v)) {
-					var _this$_configService$, _currentAlert$alert;
-					if ((_this$_configService$ = this._configService.getConfig(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: 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(merge$1(this._sheetsNumfmtCellContentController.locale$, this._localeService.currentLocale$).subscribe(() => {
+			this._forceUpdate();
 		}));
 	}
-	_hideAlert() {
-		this._cellAlertManagerService.removeAlert(ALERT_KEY);
-	}
-};
-NumfmtAlertRenderController = __decorate([
-	__decorateParam(1, Inject(HoverManagerService)),
-	__decorateParam(2, Inject(CellAlertManagerService)),
-	__decorateParam(3, Inject(LocaleService)),
-	__decorateParam(4, IZenZoneService),
-	__decorateParam(5, Inject(INumfmtService)),
-	__decorateParam(6, IConfigService)
-], NumfmtAlertRenderController);
-
-//#endregion
-//#region src/controllers/numfmt-repeat-last-action.controller.ts
-let NumfmtRepeatLastActionController = class NumfmtRepeatLastActionController extends 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(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) === 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 = getPatternType(config.value);
+					selections.forEach((rangeInfo) => {
+						Range.foreach(rangeInfo, (row, col) => {
+							params.values.push({
+								row,
+								col,
+								pattern: config.value,
+								type: patternType
+							});
+						});
 					});
-				}
+					commandService.executeCommand(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(SetNumfmtCommand.id, handler, RepeatLastActionPermission.CellStyle));
-	}
-};
-NumfmtRepeatLastActionController = __decorate([__decorateParam(0, Optional(IRepeatLastActionService))], NumfmtRepeatLastActionController);
-
-//#endregion
-//#region src/commands/operations/close.numfmt.panel.operation.ts
-const CloseNumfmtPanelOperator = {
-	id: "sheet.operation.close.numfmt.panel",
-	type: CommandType.OPERATION,
-	handler: () => true
-};
-
-//#endregion
-//#region src/commands/operations/open.numfmt.panel.operation.ts
-const OpenNumfmtPanelOperator = {
-	id: "sheet.operation.open.numfmt.panel",
-	type: 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 = 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(UniverInstanceType.UNIVER_SHEET).getUnitId());
+		renderUnit === null || renderUnit === void 0 || renderUnit.with(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$ = combineLatest([new 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(map((selectionInfos) => {
+			if (!selectionInfos) return [];
+			return selectionInfos.map((selectionInfo) => selectionInfo.range);
+		}))]);
+		this.disposeWithMe(toDisposable(combineOpenAndSelection$.pipe(switchMap(([isOpen, selectionRanges]) => new Observable((subscribe) => {
+			const disposableCollection = new DisposableCollection();
+			isOpen && selectionRanges.length && subscribe.next({
+				selectionRanges,
+				disposableCollection
 			});
-		}
-		return result || [];
-	}
-	deleteHabit(habit) {
-		this._localStorageService.removeItem(habit);
+			return () => {
+				disposableCollection.dispose();
+			};
+		})), tap(() => {
+			this._previewPattern = null;
+		})).subscribe(({ disposableCollection, selectionRanges }) => {
+			var _this$_renderManagerS;
+			const workbook = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET);
+			this.openPanel();
+			disposableCollection.add(this._sheetInterceptorService.intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
+				priority: 99,
+				effect: InterceptorEffectEnum.Value | 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 !== CellValueType.NUMBER || this._previewPattern === null) return defaultValue;
+						const info = 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: CellValueType.STRING,
+								s: { cl: { rgb: color } }
+							};
+						}
+						return {
+							...defaultValue,
+							v: info.result,
+							t: 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, Inject(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 = useDependency(UserHabitController);
-	const [options, setOptions] = useState(currencySymbols);
-	useEffect(() => {
-		userHabitController.addHabit("numfmtCurrency", []).then(() => {
-			userHabitController.getHabit(key$1, [...currencySymbols]).then((list) => {
-				setOptions(list);
-				onOptionChange && onOptionChange(list);
+	_commandExecutedListener() {
+		const commandList = [RemoveNumfmtMutation.id, SetNumfmtMutation.id];
+		this.disposeWithMe(new 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(debounceTime$1(16)).subscribe((unitId) => this._forceUpdate(unitId)));
+	}
+	_initCloseListener() {
+		this._univerInstanceService.getCurrentTypeOfUnit$(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, Inject(SheetInterceptorService)),
+	__decorateParam(1, Inject(ThemeService)),
+	__decorateParam(2, IUniverInstanceService),
+	__decorateParam(3, ICommandService),
+	__decorateParam(4, Inject(SheetsSelectionsService)),
+	__decorateParam(5, IRenderManagerService),
+	__decorateParam(6, INumfmtService),
+	__decorateParam(7, Inject(ComponentManager)),
+	__decorateParam(8, ISidebarService),
+	__decorateParam(9, Inject(LocaleService)),
+	__decorateParam(10, Inject(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 = useRef([]);
-	const [value, dispatch] = useState({});
-	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: CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(SheetNumfmtUIController).openPanel();
+		return true;
+	}
 };
 
 //#endregion
-//#region src/views/components/Accounting.tsx
-const isAccountingPanel = (pattern) => {
-	return !!getCurrencyType(pattern) && pattern.startsWith("_(");
-};
-const AccountingPanel = (props) => {
-	const { defaultPattern, action, onChange } = props;
-	const [decimal, setDecimal] = useState(() => getDecimalFromPattern(defaultPattern || "", 2));
-	const userHabitCurrency = useContext(UserHabitCurrencyContext);
-	const [suffix, setSuffix] = useState(() => getCurrencyType(defaultPattern) || userHabitCurrency[0]);
-	const options = useMemo(() => userHabitCurrency.map((key) => ({
-		label: key,
-		value: key
-	})), []);
-	const t = useDependency(LocaleService).t;
-	action.current = () => setPatternDecimal(`_("${suffix}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal);
-	const handleSelect = (v) => {
-		setSuffix(v);
-		onChange(setPatternDecimal(`_("${v}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal));
-	};
-	const handleDecimalChange = (v) => {
-		const decimal = v || 0;
-		setDecimal(decimal);
-		onChange(setPatternDecimal(`_("${suffix}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal));
-	};
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-		className: "univer-mt-4 univer-flex univer-justify-between",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "option",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "univer-text-sm univer-text-gray-400",
-				children: t("sheets-numfmt-ui.decimalLength")
-			}), /* @__PURE__ */ jsx("div", {
-				className: "univer-mt-2 univer-w-32",
-				children: /* @__PURE__ */ jsx(InputNumber, {
-					value: decimal,
-					step: 1,
-					precision: 0,
-					max: 20,
-					min: 0,
-					onChange: handleDecimalChange
-				})
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "option",
+//#region src/menu/menu.ts
+const MENU_OPTIONS = (currencySymbol) => {
+	return [
+		{
+			label: "sheets-numfmt-ui.general",
+			pattern: null
+		},
+		{
+			label: "sheets-numfmt-ui.text",
+			pattern: 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 Observable((subscribe) => {
+			const localeService = accessor.get(LocaleService);
+			subscribe.next(getCurrencySymbolIconByLocale(localeService.getCurrentLocale()).icon);
+			return localeService.localeChanged$.subscribe(() => {
+				subscribe.next(getCurrencySymbolIconByLocale(localeService.getCurrentLocale()).icon);
+			});
+		}),
+		id: SetCurrencyCommand.id,
+		title: "sheets-numfmt-ui.currency",
+		tooltip: "sheets-numfmt-ui.currency",
+		type: MenuItemType.BUTTON,
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+		disabled$: getCurrentRangeDisable$(accessor, {
+			workbookTypes: [WorkbookEditablePermission],
+			worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+			rangeTypes: [RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+function AddDecimalMenuItem(accessor) {
+	return {
+		icon: "AddDigitsIcon",
+		id: AddDecimalCommand.id,
+		title: "sheets-numfmt-ui.addDecimal",
+		tooltip: "sheets-numfmt-ui.addDecimal",
+		type: MenuItemType.BUTTON,
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+		disabled$: getCurrentRangeDisable$(accessor, {
+			workbookTypes: [WorkbookEditablePermission],
+			worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+			rangeTypes: [RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+function SubtractDecimalMenuItem(accessor) {
+	return {
+		icon: "ReduceDigitsIcon",
+		id: SubtractDecimalCommand.id,
+		title: "sheets-numfmt-ui.subtractDecimal",
+		tooltip: "sheets-numfmt-ui.subtractDecimal",
+		type: MenuItemType.BUTTON,
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+		disabled$: getCurrentRangeDisable$(accessor, {
+			workbookTypes: [WorkbookEditablePermission],
+			worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+			rangeTypes: [RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+function PercentMenuItem(accessor) {
+	return {
+		icon: "PercentIcon",
+		id: SetPercentCommand.id,
+		title: "sheets-numfmt-ui.percent",
+		tooltip: "sheets-numfmt-ui.percent",
+		type: MenuItemType.BUTTON,
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+		disabled$: getCurrentRangeDisable$(accessor, {
+			workbookTypes: [WorkbookEditablePermission],
+			worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+			rangeTypes: [RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+function FactoryOtherMenuItem(accessor) {
+	const univerInstanceService = accessor.get(IUniverInstanceService);
+	const commandService = accessor.get(ICommandService);
+	const localeService = accessor.get(LocaleService);
+	const selectionManagerService = accessor.get(SheetsSelectionsService);
+	const commandList = [RemoveNumfmtMutation.id, SetNumfmtMutation.id];
+	const value$ = deriveStateFromActiveSheet$(univerInstanceService, "", ({ workbook, worksheet }) => new Observable((subscribe) => merge$1(selectionManagerService.selectionMoveEnd$, fromCallback(commandService.onCommandExecuted.bind(commandService)).pipe(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 = getCurrencySymbolByLocale(localeService.getCurrentLocale());
+			let value = localeService.t("sheets-numfmt-ui.general");
+			if (isDefaultFormat(pattern)) {
+				subscribe.next(value);
+				return;
+			}
+			if (pattern) {
+				const item = MENU_OPTIONS(currencySymbol).filter((item) => typeof item === "object" && item.pattern).find((item) => 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: MenuItemType.SELECTOR,
+		slot: true,
+		selections: [{ label: {
+			name: OPTIONS_KEY,
+			hoverable: false,
+			selectable: false
+		} }],
+		value$,
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+		disabled$: getCurrentRangeDisable$(accessor, {
+			workbookTypes: [WorkbookEditablePermission],
+			worksheetTypes: [WorksheetSetCellStylePermission, WorksheetEditPermission],
+			rangeTypes: [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 = useDependency(LocaleService);
+	return /* @__PURE__ */ jsx("span", {
+		className: "univer-text-sm",
+		children: value !== null && value !== void 0 ? value : localeService.t("sheets-numfmt-ui.general")
+	});
+}
+function Options() {
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const layoutService = useDependency(ILayoutService);
+	const sheetsNumfmtCellContentController = useDependency(SheetsNumfmtCellContentController);
+	const selectionManagerService = useDependency(SheetsSelectionsService);
+	const setNumfmt = (pattern) => {
+		const selection = selectionManagerService.getCurrentLastSelection();
+		if (!selection) return;
+		const range = selection.range;
+		const values = [];
+		Range.foreach(range, (row, col) => {
+			if (pattern) values.push({
+				row,
+				col,
+				pattern,
+				type: getPatternType(pattern)
+			});
+			else values.push({
+				row,
+				col
+			});
+		});
+		commandService.executeCommand(SetNumfmtCommand.id, { values });
+		layoutService.focus();
+	};
+	const menuOptions = useMemo(() => {
+		return MENU_OPTIONS(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__ */ jsx("div", {
+		className: "univer-grid univer-gap-1 univer-p-1.5",
+		children: menuOptions.map((item, index) => {
+			if (item === "|") return /* @__PURE__ */ jsx(Separator, {}, index);
+			return /* @__PURE__ */ 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__ */ jsx("span", { children: localeService.t(item.label) }), /* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
+					children: item.pattern ? 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 = 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, Inject(ILocalStorageService))], UserHabitController);
+
+//#endregion
+//#region src/views/components/Accounting.tsx
+const isAccountingPanel = (pattern) => {
+	return !!getCurrencyType(pattern) && pattern.startsWith("_(");
+};
+function AccountingPanel(props) {
+	const { defaultPattern, onActionChange, onChange } = props;
+	const [decimal, setDecimal] = useState(() => getDecimalFromPattern(defaultPattern || "", 2));
+	const userHabitCurrency = useContext(UserHabitCurrencyContext);
+	const [suffix, setSuffix] = useState(() => getCurrencyType(defaultPattern) || userHabitCurrency[0]);
+	const options = useMemo(() => userHabitCurrency.map((key) => ({
+		label: key,
+		value: key
+	})), []);
+	const localeService = useDependency(LocaleService);
+	useLayoutEffect(() => {
+		onActionChange(() => setPatternDecimal(`_("${suffix}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal));
+	}, [
+		decimal,
+		onActionChange,
+		suffix
+	]);
+	const handleSelect = (v) => {
+		setSuffix(v);
+		onChange(setPatternDecimal(`_("${v}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal));
+	};
+	const handleDecimalChange = (v) => {
+		const decimal = v || 0;
+		setDecimal(decimal);
+		onChange(setPatternDecimal(`_("${suffix}"* #,##0${decimal > 0 ? ".0" : ""}_)`, decimal));
+	};
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "univer-mt-4 univer-flex univer-justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "option",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "univer-text-sm univer-text-gray-400",
+				children: localeService.t("sheets-numfmt-ui.decimalLength")
+			}), /* @__PURE__ */ jsx("div", {
+				className: "univer-mt-2 univer-w-32",
+				children: /* @__PURE__ */ jsx(InputNumber, {
+					value: decimal,
+					step: 1,
+					precision: 0,
+					max: 20,
+					min: 0,
+					onChange: handleDecimalChange
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "option",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "univer-text-sm univer-text-gray-400",
-				children: t("sheets-numfmt-ui.currencyType")
+				children: localeService.t("sheets-numfmt-ui.currencyType")
 			}), /* @__PURE__ */ jsx("div", {
 				className: "univer-mt-2 univer-w-36",
 				children: /* @__PURE__ */ jsx(Select, {
@@ -377,17 +679,18 @@ const AccountingPanel = (props) => {
 		})]
 	}), /* @__PURE__ */ 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 !!getCurrencyType(pattern) && !pattern.startsWith("_(");
 };
-const CurrencyPanel = (props) => {
-	const t = useDependency(LocaleService).t;
+function CurrencyPanel(props) {
+	const { onActionChange, onChange: onValueChange } = props;
+	const localeService = useDependency(LocaleService);
 	const userHabitCurrency = useContext(UserHabitCurrencyContext);
 	const [suffix, setSuffix] = useState(() => getCurrencyType(props.defaultPattern) || userHabitCurrency[0]);
 	const [decimal, setDecimal] = useState(() => getDecimalFromPattern(props.defaultPattern || "", 2));
@@ -401,22 +704,28 @@ const CurrencyPanel = (props) => {
 		label: key,
 		value: key
 	})), [userHabitCurrency]);
-	props.action.current = () => setPatternDecimal(pattern, decimal);
+	useLayoutEffect(() => {
+		onActionChange(() => setPatternDecimal(pattern, decimal));
+	}, [
+		decimal,
+		onActionChange,
+		pattern
+	]);
 	const onSelect = (value) => {
 		if (value === void 0) return;
 		setSuffix(value);
 		const pattern = getCurrencyFormatOptions(value)[0].value;
 		setPattern(pattern);
-		props.onChange(setPatternDecimal(pattern, decimal));
+		onValueChange(setPatternDecimal(pattern, decimal));
 	};
 	const onChange = (value) => {
 		if (value === void 0) return;
 		setPattern(value);
-		props.onChange(setPatternDecimal(value, decimal));
+		onValueChange(setPatternDecimal(value, decimal));
 	};
 	const onDecimalChange = (v) => {
 		setDecimal(v || 0);
-		props.onChange(setPatternDecimal(pattern, v || 0));
+		onValueChange(setPatternDecimal(pattern, v || 0));
 	};
 	return /* @__PURE__ */ jsxs("div", { children: [
 		/* @__PURE__ */ jsxs("div", {
@@ -425,7 +734,7 @@ const CurrencyPanel = (props) => {
 				className: "option",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "univer-text-sm univer-text-gray-400",
-					children: t("sheets-numfmt-ui.decimalLength")
+					children: localeService.t("sheets-numfmt-ui.decimalLength")
 				}), /* @__PURE__ */ jsx("div", {
 					className: "univer-mt-2 univer-w-32",
 					children: /* @__PURE__ */ jsx(InputNumber, {
@@ -439,7 +748,7 @@ const CurrencyPanel = (props) => {
 				className: "option",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "univer-text-sm univer-text-gray-400",
-					children: t("sheets-numfmt-ui.currencyType")
+					children: localeService.t("sheets-numfmt-ui.currencyType")
 				}), /* @__PURE__ */ jsx("div", {
 					className: "univer-mt-2 univer-w-36",
 					children: /* @__PURE__ */ jsx(Select, {
@@ -452,7 +761,7 @@ const CurrencyPanel = (props) => {
 		}),
 		/* @__PURE__ */ jsx("div", {
 			className: "label univer-mt-4",
-			children: t("sheets-numfmt-ui.negType")
+			children: localeService.t("sheets-numfmt-ui.negType")
 		}),
 		/* @__PURE__ */ jsx("div", {
 			className: "univer-mt-2",
@@ -464,29 +773,36 @@ const CurrencyPanel = (props) => {
 		}),
 		/* @__PURE__ */ 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 = useDependency(UserHabitController);
 	const localStorageService = useDependency(ILocalStorageService);
 	const localeService = useDependency(LocaleService);
 	const [pattern, setPattern] = 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);
+	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] = useState([]);
 	useEffect(() => {
 		localStorageService.getItem(historyPatternKey).then((historyList) => {
@@ -496,8 +812,8 @@ function CustomFormat(props) {
 				...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)]);
 				});
 			});
@@ -551,7 +867,7 @@ const isDatePanel = (pattern) => {
 	].includes(info.type);
 };
 function DatePanel(props) {
-	const { onChange, defaultPattern } = props;
+	const { onActionChange, onChange, defaultPattern } = props;
 	const options = useMemo(getDateFormatOptions, []);
 	const localeService = useDependency(LocaleService);
 	const [suffix, setSuffix] = useState(() => {
@@ -561,7 +877,9 @@ function DatePanel(props) {
 		}
 		return options[0].value;
 	});
-	props.action.current = () => suffix;
+	useLayoutEffect(() => {
+		onActionChange(() => suffix);
+	}, [onActionChange, suffix]);
 	const handleChange = (v) => {
 		if (v === void 0) return;
 		setSuffix(v);
@@ -590,19 +908,23 @@ function DatePanel(props) {
 //#endregion
 //#region src/views/components/General.tsx
 const isGeneralPanel = (pattern) => !pattern;
-const GeneralPanel = (props) => {
-	const t = useDependency(LocaleService).t;
-	props.action.current = () => "";
+function GeneralPanel(props) {
+	const localeService = useDependency(LocaleService);
+	const { onActionChange } = props;
+	useLayoutEffect(() => {
+		onActionChange(() => "");
+	}, [onActionChange]);
 	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ 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) => getNumberFormatOptions().some((item) => isPatternEqualWithoutDecimal(item.value, pattern));
 function ThousandthPercentilePanel(props) {
+	const { onActionChange, onChange } = props;
 	const localeService = useDependency(LocaleService);
 	const options = useMemo(getNumberFormatOptions, []);
 	const [decimal, setDecimal] = useState(() => getDecimalFromPattern(props.defaultPattern || "", 0));
@@ -614,89 +936,163 @@ function ThousandthPercentilePanel(props) {
 	const isInputDisable = useMemo(() => !isPatternHasDecimal(suffix), [suffix]);
 	const handleDecimalChange = (decimal) => {
 		setDecimal(decimal || 0);
-		props.onChange(setPatternDecimal(suffix, Number(decimal || 0)));
+		onChange(setPatternDecimal(suffix, Number(decimal || 0)));
 	};
 	const handleClick = (v) => {
 		if (v === void 0) return;
 		setDecimal(getDecimalFromPattern(v, 0));
 		setSuffix(v);
-		props.onChange(v);
+		onChange(v);
+	};
+	useLayoutEffect(() => {
+		onActionChange(() => pattern);
+	}, [onActionChange, pattern]);
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "univer-mt-4 univer-text-sm univer-text-gray-400",
+			children: localeService.t("sheets-numfmt-ui.decimalLength")
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "univer-mt-2",
+			children: /* @__PURE__ */ jsx(InputNumber, {
+				disabled: isInputDisable,
+				value: decimal,
+				max: 20,
+				min: 0,
+				onChange: handleDecimalChange
+			})
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "univer-mt-4 univer-text-sm univer-text-gray-400",
+			children: [" ", localeService.t("sheets-numfmt-ui.negType")]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "univer-mt-2",
+			children: /* @__PURE__ */ jsx(SelectList, {
+				onChange: handleClick,
+				options,
+				value: suffix
+			})
+		}),
+		/* @__PURE__ */ 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 = useDependency(UserHabitController);
+	const [options, setOptions] = useState(currencySymbols);
+	useEffect(() => {
+		userHabitController.addHabit("numfmtCurrency", []).then(() => {
+			userHabitController.getHabit(key, [...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 = useRef([]);
+	const [value, dispatch] = useState({});
+	useEffect(() => {
+		effectList.current.forEach((fn) => {
+			fn();
+		});
+		effectList.current = [];
+	}, [value]);
+	const nextTick = (fn) => {
+		effectList.current.push(fn);
+		dispatch({});
 	};
-	props.action.current = () => pattern;
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsx("div", {
-			className: "univer-mt-4 univer-text-sm univer-text-gray-400",
-			children: localeService.t("sheets-numfmt-ui.decimalLength")
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "univer-mt-2",
-			children: /* @__PURE__ */ jsx(InputNumber, {
-				disabled: isInputDisable,
-				value: decimal,
-				max: 20,
-				min: 0,
-				onChange: handleDecimalChange
-			})
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: "univer-mt-4 univer-text-sm univer-text-gray-400",
-			children: [" ", localeService.t("sheets-numfmt-ui.negType")]
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "univer-mt-2",
-			children: /* @__PURE__ */ jsx(SelectList, {
-				onChange: handleClick,
-				options,
-				value: suffix
-			})
-		}),
-		/* @__PURE__ */ 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 = useDependency(LocaleService);
-	const getCurrentPattern = useRef(() => "");
-	const t = localeService.t;
+	const currentPatternRef = useRef(() => "");
 	const nextTick = useNextTick();
-	const typeOptions = 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 = 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] = useState(findDefaultType);
-	const [key, setKey] = useState(() => `${row}_${col}`);
-	const { mark, userHabitCurrency } = useCurrencyOptions(() => setKey(`${row}_${col}_userCurrency'`));
+	const [key, setKey] = useState(() => `${row}_${col}_${defaultPattern}`);
+	const { mark, userHabitCurrency } = useCurrencyOptions(() => setKey(`${row}_${col}_${defaultPattern}_userCurrency`));
 	const BusinessComponent = useMemo(() => {
 		var _typeOptions$find;
 		return (_typeOptions$find = typeOptions.find((item) => item.label === type)) === null || _typeOptions$find === void 0 ? void 0 : _typeOptions$find.component;
@@ -718,7 +1114,7 @@ const SheetNumfmtPanel = (props) => {
 		setType(value);
 		nextTick(() => props.onChange({
 			type: "change",
-			value: getCurrentPattern.current() || ""
+			value: currentPatternRef.current() || ""
 		}));
 	};
 	const handleChange = useCallback((v) => {
@@ -727,8 +1123,11 @@ const SheetNumfmtPanel = (props) => {
 			value: v
 		});
 	}, []);
+	const handleActionChange = useCallback((action) => {
+		currentPatternRef.current = action;
+	}, []);
 	const handleConfirm = () => {
-		const pattern = getCurrentPattern.current() || "";
+		const pattern = currentPatternRef.current() || "";
 		const currency = getCurrencyType(pattern);
 		if (currency) mark(currency);
 		props.onChange({
@@ -744,295 +1143,216 @@ const SheetNumfmtPanel = (props) => {
 	};
 	const subProps = {
 		onChange: handleChange,
+		onActionChange: handleActionChange,
 		defaultValue,
-		defaultPattern,
-		action: getCurrentPattern
+		defaultPattern
 	};
 	useEffect(() => {
 		setType(findDefaultType());
-		setKey(`${row}_${col}`);
-	}, [row, col]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("univer-flex univer-h-full univer-flex-col univer-justify-between univer-overflow-y-auto univer-pb-5", scrollbarClassName),
-		children: [/* @__PURE__ */ jsxs("div", { children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "univer-mt-3.5 univer-text-sm univer-text-gray-400",
-				children: t("sheets-numfmt-ui.numfmtType")
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "univer-mt-2",
-				children: /* @__PURE__ */ jsx(Select, {
-					className: "univer-w-full",
-					value: type,
-					options: selectOptions,
-					onChange: handleSelect
-				})
-			}),
-			/* @__PURE__ */ jsx("div", { children: BusinessComponent && /* @__PURE__ */ jsx(UserHabitCurrencyContext.Provider, {
-				value: userHabitCurrency,
-				children: /* @__PURE__ */ createElement(BusinessComponent, {
-					...subProps,
-					key
-				})
-			}) })
-		] }), /* @__PURE__ */ jsxs("div", {
-			className: "univer-mb-5 univer-mt-3.5 univer-flex univer-justify-end",
-			children: [/* @__PURE__ */ jsx(Button, {
-				onClick: handleCancel,
-				className: "univer-mr-3",
-				children: t("sheets-numfmt-ui.cancel")
-			}), /* @__PURE__ */ jsx(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 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(merge$1(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(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) === 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 = getPatternType(config.value);
-					selections.forEach((rangeInfo) => {
-						Range.foreach(rangeInfo, (row, col) => {
-							params.values.push({
-								row,
-								col,
-								pattern: config.value,
-								type: patternType
-							});
-						});
-					});
-					commandService.executeCommand(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__ */ jsxs("div", {
+		className: clsx("univer-flex univer-h-full univer-flex-col univer-justify-between univer-overflow-y-auto univer-pb-5", scrollbarClassName),
+		children: [/* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-mt-3.5 univer-text-sm univer-text-gray-400",
+				children: localeService.t("sheets-numfmt-ui.numfmtType")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-mt-2",
+				children: /* @__PURE__ */ jsx(Select, {
+					className: "univer-w-full",
+					value: type,
+					options: selectOptions,
+					onChange: handleSelect
+				})
+			}),
+			/* @__PURE__ */ jsx("div", { children: BusinessComponent && /* @__PURE__ */ jsx(UserHabitCurrencyContext.Provider, {
+				value: userHabitCurrency,
+				children: /* @__PURE__ */ createElement(BusinessComponent, {
+					...subProps,
+					key
+				})
+			}) })
+		] }), /* @__PURE__ */ jsxs("div", {
+			className: "univer-mb-5 univer-mt-3.5 univer-flex univer-justify-end",
+			children: [/* @__PURE__ */ jsx(Button, {
+				onClick: handleCancel,
+				className: "univer-mr-3",
+				children: localeService.t("sheets-numfmt-ui.cancel")
+			}), /* @__PURE__ */ jsx(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 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(UniverInstanceType.UNIVER_SHEET).getUnitId());
-		renderUnit === null || renderUnit === void 0 || renderUnit.with(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,
+			DollarIcon,
+			EuroIcon,
+			PercentIcon,
+			ReduceDigitsIcon,
+			RmbIcon,
+			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, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
+
+//#endregion
+//#region src/controllers/numfmt-alert-render.controller.ts
+const ALERT_KEY = "SHEET_NUMFMT_ALERT";
+let NumfmtAlertRenderController = class NumfmtAlertRenderController extends 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$ = combineLatest([new 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(map((selectionInfos) => {
-			if (!selectionInfos) return [];
-			return selectionInfos.map((selectionInfo) => selectionInfo.range);
-		}))]);
-		this.disposeWithMe(toDisposable(combineOpenAndSelection$.pipe(switchMap(([isOpen, selectionRanges]) => new Observable((subscribe) => {
-			const disposableCollection = new DisposableCollection();
-			isOpen && selectionRanges.length && subscribe.next({
-				selectionRanges,
-				disposableCollection
-			});
-			return () => {
-				disposableCollection.dispose();
-			};
-		})), tap(() => {
-			this._previewPattern = null;
-		})).subscribe(({ disposableCollection, selectionRanges }) => {
-			var _this$_renderManagerS;
-			const workbook = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET);
-			this.openPanel();
-			disposableCollection.add(this._sheetInterceptorService.intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
-				priority: 99,
-				effect: InterceptorEffectEnum.Value | 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 !== CellValueType.NUMBER || this._previewPattern === null) return defaultValue;
-						const info = 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: CellValueType.STRING,
-								s: { cl: { rgb: color } }
-							};
-						}
-						return {
-							...defaultValue,
-							v: info.result,
-							t: 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 = [RemoveNumfmtMutation.id, SetNumfmtMutation.id];
-		this.disposeWithMe(new 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(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 (isTextFormat(numfmtValue.pattern) && Tools.isDefine(cellData === null || cellData === void 0 ? void 0 : cellData.v) && isRealNum(cellData.v)) {
+					var _this$_configService$, _currentAlert$alert;
+					if ((_this$_configService$ = this._configService.getConfig(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: 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(debounceTime$1(16)).subscribe((unitId) => this._forceUpdate(unitId)));
-	}
-	_initCloseListener() {
-		this._univerInstanceService.getCurrentTypeOfUnit$(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, Inject(SheetInterceptorService)),
-	__decorateParam(1, Inject(ThemeService)),
-	__decorateParam(2, IUniverInstanceService),
-	__decorateParam(3, ICommandService),
-	__decorateParam(4, Inject(SheetsSelectionsService)),
-	__decorateParam(5, IRenderManagerService),
-	__decorateParam(6, INumfmtService),
-	__decorateParam(7, Inject(ComponentManager)),
-	__decorateParam(8, ISidebarService),
-	__decorateParam(9, Inject(LocaleService)),
-	__decorateParam(10, Inject(SheetsNumfmtCellContentController))
-], SheetNumfmtUIController);
+NumfmtAlertRenderController = __decorate([
+	__decorateParam(1, Inject(HoverManagerService)),
+	__decorateParam(2, Inject(CellAlertManagerService)),
+	__decorateParam(3, Inject(LocaleService)),
+	__decorateParam(4, Inject(INumfmtService)),
+	__decorateParam(5, IConfigService)
+], NumfmtAlertRenderController);
+
+//#endregion
+//#region src/controllers/numfmt-repeat-last-action.controller.ts
+let NumfmtRepeatLastActionController = class NumfmtRepeatLastActionController extends 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(SetNumfmtCommand.id, handler, RepeatLastActionPermission.CellStyle));
+	}
+};
+NumfmtRepeatLastActionController = __decorate([__decorateParam(0, Optional(IRepeatLastActionService))], NumfmtRepeatLastActionController);
 
 //#endregion
 //#region src/controllers/numfmt.editor.controller.ts
@@ -1243,256 +1563,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: 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 Observable((subscribe) => {
-			const localeService = accessor.get(LocaleService);
-			subscribe.next(getCurrencySymbolIconByLocale(localeService.getCurrentLocale()).icon);
-			return localeService.localeChanged$.subscribe(() => {
-				subscribe.next(getCurrencySymbolIconByLocale(localeService.getCurrentLocale()).icon);
-			});
-		}),
-		id: SetCurrencyCommand.id,
-		title: "sheets-numfmt-ui.currency",
-		tooltip: "sheets-numfmt-ui.currency",
-		type: MenuItemType.BUTTON,
-		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-		disabled$: getCurrentRangeDisable$(accessor, {
-			workbookTypes: [WorkbookEditablePermission],
-			worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
-			rangeTypes: [RangeProtectionPermissionEditPoint]
-		})
-	};
-};
-const AddDecimalMenuItem = (accessor) => {
-	return {
-		icon: "AddDigitsIcon",
-		id: AddDecimalCommand.id,
-		title: "sheets-numfmt-ui.addDecimal",
-		tooltip: "sheets-numfmt-ui.addDecimal",
-		type: MenuItemType.BUTTON,
-		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-		disabled$: getCurrentRangeDisable$(accessor, {
-			workbookTypes: [WorkbookEditablePermission],
-			worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
-			rangeTypes: [RangeProtectionPermissionEditPoint]
-		})
-	};
-};
-const SubtractDecimalMenuItem = (accessor) => {
-	return {
-		icon: "ReduceDigitsIcon",
-		id: SubtractDecimalCommand.id,
-		title: "sheets-numfmt-ui.subtractDecimal",
-		tooltip: "sheets-numfmt-ui.subtractDecimal",
-		type: MenuItemType.BUTTON,
-		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-		disabled$: getCurrentRangeDisable$(accessor, {
-			workbookTypes: [WorkbookEditablePermission],
-			worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
-			rangeTypes: [RangeProtectionPermissionEditPoint]
-		})
-	};
-};
-const PercentMenuItem = (accessor) => {
-	return {
-		icon: "PercentIcon",
-		id: SetPercentCommand.id,
-		title: "sheets-numfmt-ui.percent",
-		tooltip: "sheets-numfmt-ui.percent",
-		type: MenuItemType.BUTTON,
-		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-		disabled$: getCurrentRangeDisable$(accessor, {
-			workbookTypes: [WorkbookEditablePermission],
-			worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
-			rangeTypes: [RangeProtectionPermissionEditPoint]
-		})
-	};
-};
-const FactoryOtherMenuItem = (accessor) => {
-	const univerInstanceService = accessor.get(IUniverInstanceService);
-	const commandService = accessor.get(ICommandService);
-	const localeService = accessor.get(LocaleService);
-	const selectionManagerService = accessor.get(SheetsSelectionsService);
-	const commandList = [RemoveNumfmtMutation.id, SetNumfmtMutation.id];
-	const value$ = deriveStateFromActiveSheet$(univerInstanceService, "", ({ workbook, worksheet }) => new Observable((subscribe) => merge$1(selectionManagerService.selectionMoveEnd$, fromCallback(commandService.onCommandExecuted.bind(commandService)).pipe(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 = getCurrencySymbolByLocale(localeService.getCurrentLocale());
-			let value = localeService.t("sheets-numfmt-ui.general");
-			if (isDefaultFormat(pattern)) {
-				subscribe.next(value);
-				return;
-			}
-			if (pattern) {
-				const item = MENU_OPTIONS(currencySymbol).filter((item) => typeof item === "object" && item.pattern).find((item) => 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: MenuItemType.SELECTOR,
-		slot: true,
-		selections: [{ label: {
-			name: OPTIONS_KEY,
-			hoverable: false,
-			selectable: false
-		} }],
-		value$,
-		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-		disabled$: getCurrentRangeDisable$(accessor, {
-			workbookTypes: [WorkbookEditablePermission],
-			worksheetTypes: [WorksheetSetCellStylePermission, WorksheetEditPermission],
-			rangeTypes: [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 = useDependency(LocaleService);
-	return /* @__PURE__ */ jsx("span", {
-		className: "univer-text-sm",
-		children: value !== null && value !== void 0 ? value : localeService.t("sheets-numfmt-ui.general")
-	});
-}
-function Options() {
-	const commandService = useDependency(ICommandService);
-	const localeService = useDependency(LocaleService);
-	const layoutService = useDependency(ILayoutService);
-	const sheetsNumfmtCellContentController = useDependency(SheetsNumfmtCellContentController);
-	const selectionManagerService = useDependency(SheetsSelectionsService);
-	const setNumfmt = (pattern) => {
-		const selection = selectionManagerService.getCurrentLastSelection();
-		if (!selection) return;
-		const range = selection.range;
-		const values = [];
-		Range.foreach(range, (row, col) => {
-			if (pattern) values.push({
-				row,
-				col,
-				pattern,
-				type: getPatternType(pattern)
-			});
-			else values.push({
-				row,
-				col
-			});
-		});
-		commandService.executeCommand(SetNumfmtCommand.id, { values });
-		layoutService.focus();
-	};
-	const menuOptions = useMemo(() => {
-		return MENU_OPTIONS(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__ */ jsx("div", {
-		className: "univer-grid univer-gap-1 univer-p-1.5",
-		children: menuOptions.map((item, index) => {
-			if (item === "|") return /* @__PURE__ */ jsx(Separator, {}, index);
-			return /* @__PURE__ */ 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__ */ jsx("span", { children: localeService.t(item.label) }), /* @__PURE__ */ jsx("span", {
-					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
-					children: item.pattern ? getPatternPreview(item.pattern || "", defaultValue, sheetsNumfmtCellContentController.locale).result.trim() : ""
-				})]
-			}, index);
-		})
-	});
-}
-
 //#endregion
 //#region src/menu/schema.ts
 const menuSchema = { [RibbonStartGroup.LAYOUT]: {
@@ -1544,9 +1614,6 @@ let NumfmtMenuController = class NumfmtMenuController extends Disposable {
 	}
 	_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, Inject(ComponentManager)), __decorateParam(1, IMenuManagerService)], NumfmtMenuController);
@@ -1565,6 +1632,8 @@ let UniverSheetsNumfmtUIPlugin = class UniverSheetsNumfmtUIPlugin extends Plugin
 		this._configService.setConfig("sheets-numfmt-ui.config", rest);
 	}
 	onStarting() {
+		this._injector.add([ComponentsController]);
+		this._injector.get(ComponentsController);
 		registerDependencies(this._injector, [
 			[SheetNumfmtUIController],
 			[NumfmtEditorController],