feat: refined Ribbon design (#5194)

Co-authored-by: GitHub Actions <actions@github.com>
2026-09-24 15:32:18 +08:00 · 2025-05-15 12:01:58 +08:00
parent dd292c5d8b
commit 733c3ff29d
67 changed files with 1077 additions and 673 deletions
@@ -16,7 +16,7 @@

 import { Disposable, ICommandService, Inject, Injector } from '@univerjs/core';
 import { AiSingle, BarChartSingle, CommentSingle } from '@univerjs/icons';
-import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, MenuItemType, RibbonStartGroup } from '@univerjs/ui';
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, MenuItemType, RibbonOthersGroup } from '@univerjs/ui';
 import { DropdownListFirstItemOperation, DropdownListSecondItemOperation } from '../commands/operations/dropdown-list.operation';
 import { SingleButtonOperation } from '../commands/operations/single-button.operation';
 import { CUSTOM_MENU_DROPDOWN_LIST_OPERATION_ID, CustomMenuItemDropdownListFirstItemFactory, CustomMenuItemDropdownListMainButtonFactory, CustomMenuItemDropdownListSecondItemFactory } from './menu/dropdown-list.menu';
@@ -74,7 +74,7 @@ export class CustomMenuController extends Disposable {
            },
        }));
        this._menuManagerService.mergeMenu({
-            [RibbonStartGroup.OTHERS]: {
+            [RibbonOthersGroup.OTHERS]: {
                [SingleButtonOperation.id]: {
                    order: 9999,
                    menuItemFactory: CustomMenuItemSingleButtonFactory,
@@ -41,7 +41,7 @@ import {
    ComponentManager,
    IMenuManagerService,
    MenuItemType,
-    RibbonStartGroup,
+    RibbonOthersGroup,
 } from '@univerjs/ui';

 /**
@@ -210,7 +210,7 @@ class ImportCSVButtonPlugin extends Plugin {
        });

        this.menuManagerService.mergeMenu({
-            [RibbonStartGroup.OTHERS]: {
+            [RibbonOthersGroup.OTHERS]: {
                [buttonId]: {
                    order: 10,
                    menuItemFactory,
@@ -56,7 +56,7 @@
        "@types/fs-extra": "^11.0.4",
        "@types/node": "^22.15.17",
        "@types/react": "^19.1.4",
-        "@types/react-dom": "^19.1.4",
+        "@types/react-dom": "^19.1.5",
        "@univerjs-infra/shared": "workspace:*",
        "@univerjs/design": "workspace:*",
        "@vitejs/plugin-react": "^4.4.1",
@@ -89,7 +89,7 @@
    },
    "resolutions": {
        "@types/react": "^19.1.3",
-        "@types/react-dom": "^19.1.4",
+        "@types/react-dom": "^19.1.5",
        "react": "^19.1.0",
        "react-dom": "^19.1.0"
    },
@@ -99,11 +99,11 @@ export function ThemeMenuItemFactory(): IMenuSelectorItem {
        type: MenuItemType.SELECTOR,
        selections: [
            {
-                label: 'green',
+                label: '🟢',
                value: greenTheme as any,
            },
            {
-                label: 'default',
+                label: '🔵',
                value: defaultTheme as any,
            },
        ],
@@ -17,7 +17,7 @@
 import type { IAccessor, IOperation, Workbook } from '@univerjs/core';
 import type { IMenuSelectorItem, IValueOption, MenuSchemaType } from '@univerjs/ui';
 import { CommandType, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
-import { MenuItemType, RibbonStartGroup } from '@univerjs/ui';
+import { MenuItemType, RibbonOthersGroup } from '@univerjs/ui';
 import { merge, Observable, shareReplay } from 'rxjs';

 export const SwitchUnitOperation: IOperation<{ value: string }> = {
@@ -53,7 +53,7 @@ function SwitchUnitMenuFactory(accessor: IAccessor): IMenuSelectorItem {
 }

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.OTHERS]: {
+    [RibbonOthersGroup.OTHERS]: {
        [SwitchUnitOperation.id]: {
            order: 999,
            menuItemFactory: SwitchUnitMenuFactory,
@@ -69,7 +69,7 @@ export function ReplayLocalRecordOnActiveMenuItemFactory(): IMenuButtonItem {
 export const menuSchema: MenuSchemaType = {
    [RibbonStartGroup.OTHERS]: {
        [RECORD_MENU_ITEM_ID]: {
-            order: 10,
+            order: 2,
            menuItemFactory: RecordMenuItemFactory,
            [OpenRecordPanelOperation.id]: {
                order: 1,
@@ -26,3 +26,4 @@ export const borderTopClassName = clsx(borderBasicClassName, 'univer-border-t un
 export const borderBottomClassName = clsx(borderBasicClassName, 'univer-border-b univer-border-0');
 export const borderRightClassName = clsx(borderBasicClassName, 'univer-border-r univer-border-0');
 export const divideYClassName = 'univer-divide-gray-200 dark:univer-divide-gray-600 univer-divide-y univer-divide-x-0 univer-divide-solid';
+export const divideXClassName = 'univer-divide-gray-200 dark:univer-divide-gray-600 univer-divide-x univer-divide-y-0 univer-divide-solid';
@@ -69,6 +69,7 @@ export {
    borderLeftClassName,
    borderRightClassName,
    borderTopClassName,
+    divideXClassName,
    divideYClassName,
    scrollbarClassName,
 } from './helper/class-utilities';
@@ -15,7 +15,7 @@
 */

 import type { MenuSchemaType } from '@univerjs/ui';
-import { RibbonStartGroup } from '@univerjs/ui';
+import { RibbonInsertGroup } from '@univerjs/ui';
 import {
    DOCS_IMAGE_MENU_ID,
    IMAGE_MENU_UPLOAD_FLOAT_ID,
@@ -24,7 +24,7 @@ import {
 } from '../views/menu/image.menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.LAYOUT]: {
+    [RibbonInsertGroup.MEDIA]: {
        [DOCS_IMAGE_MENU_ID]: {
            order: 0,
            menuItemFactory: ImageMenuFactory,
@@ -15,14 +15,14 @@
 */

 import type { MenuSchemaType } from '@univerjs/ui';
-import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui';
+import { ContextMenuGroup, ContextMenuPosition, RibbonInsertGroup } from '@univerjs/ui';
 import { ShowDocHyperLinkEditPopupOperation } from '../commands/operations/popup.operation';
 import { AddHyperLinkMenuItemFactory } from './menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.OTHERS]: {
+    [RibbonInsertGroup.MEDIA]: {
        [ShowDocHyperLinkEditPopupOperation.id]: {
-            order: 0,
+            order: 1,
            menuItemFactory: AddHyperLinkMenuItemFactory,
        },
    },
@@ -15,7 +15,7 @@
 */

 import type { MenuSchemaType } from '@univerjs/ui';
-import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui';
+import { ContextMenuGroup, ContextMenuPosition, RibbonInsertGroup } from '@univerjs/ui';
 import {
    StartAddCommentOperation,
    ToggleCommentPanelOperation,
@@ -23,9 +23,9 @@ import {
 import { AddDocCommentMenuItemFactory, ToolbarDocCommentMenuItemFactory } from './menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.OTHERS]: {
+    [RibbonInsertGroup.MEDIA]: {
        [ToggleCommentPanelOperation.id]: {
-            order: 1,
+            order: 3,
            menuItemFactory: ToolbarDocCommentMenuItemFactory,
        },
    },
@@ -91,7 +91,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "@univerjs/docs-drawing": "workspace:*",
        "jest-canvas-mock": "^2.5.2",
-        "jsdom": "^24.1.1",
+        "jsdom": "^26.1.0",
        "postcss": "^8.5.3",
        "react": "18.3.1",
        "rxjs": "^7.8.2",
@@ -15,7 +15,7 @@
 */

 import type { MenuSchemaType } from '@univerjs/ui';
-import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui';
+import { ContextMenuGroup, ContextMenuPosition, RibbonInsertGroup, RibbonStartGroup } from '@univerjs/ui';
 import { DocCopyCommand, DocCopyCurrentParagraphCommand, DocCutCommand, DocCutCurrentParagraphCommand, DocPasteCommand } from '../commands/commands/clipboard.command';
 import { DeleteCurrentParagraphCommand, DeleteLeftCommand } from '../commands/commands/doc-delete.command';
 import { OpenHeaderFooterPanelCommand } from '../commands/commands/doc-header-footer.command';
@@ -131,14 +131,6 @@ export const menuSchema: MenuSchemaType = {
        },
    },
    [RibbonStartGroup.LAYOUT]: {
-        [TABLE_MENU_ID]: {
-            order: 1,
-            menuItemFactory: TableMenuFactory,
-            [DocCreateTableOperation.id]: {
-                order: 0,
-                menuItemFactory: InsertTableMenuFactory,
-            },
-        },
        [AlignLeftCommand.id]: {
            order: 2,
            menuItemFactory: AlignLeftMenuItemFactory,
@@ -184,6 +176,16 @@ export const menuSchema: MenuSchemaType = {
            menuItemFactory: PageSettingMenuItemFactory,
        },
    },
+    [RibbonInsertGroup.MEDIA]: {
+        [TABLE_MENU_ID]: {
+            order: 2,
+            menuItemFactory: TableMenuFactory,
+            [DocCreateTableOperation.id]: {
+                order: 0,
+                menuItemFactory: InsertTableMenuFactory,
+            },
+        },
+    },
    [ContextMenuPosition.MAIN_AREA]: {
        [ContextMenuGroup.FORMAT]: {
            [DocCopyCommand.name]: {
@@ -30,7 +30,11 @@ export function DocFooter() {
    return workbook
        ? null
        : isShow && (
-            <div className="univer-box-border univer-flex univer-items-center univer-justify-between univer-px-5">
+            <div
+                className={`
+                  univer-box-border univer-flex univer-items-center univer-justify-between univer-px-5 univer-py-1.5
+                `}
+            >
                <div />
                <CountBar />
            </div>
@@ -15,12 +15,12 @@
 */

 import type { MenuSchemaType } from '@univerjs/ui';
-import { RibbonStartGroup } from '@univerjs/ui';
+import { RibbonDataGroup } from '@univerjs/ui';
 import { OpenFindDialogOperation } from '../commands/operations/find-replace.operation';
 import { FindReplaceMenuItemFactory } from './find-replace.menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.OTHERS]: {
+    [RibbonDataGroup.ORGANIZATION]: {
        [OpenFindDialogOperation.id]: {
            order: 2,
            menuItemFactory: FindReplaceMenuItemFactory,
@@ -15,14 +15,14 @@
 */

 import type { MenuSchemaType } from '@univerjs/ui';
-import { RibbonStartGroup } from '@univerjs/ui';
+import { RibbonDataGroup } from '@univerjs/ui';
 import { OpenConditionalFormattingOperator } from '../commands/operations/open-conditional-formatting-panel';
 import { FactoryManageConditionalFormattingRule } from '../menu/manage-rule';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.FORMULAS_INSERT]: {
+    [RibbonDataGroup.RULES]: {
        [OpenConditionalFormattingOperator.id]: {
-            order: 0,
+            order: 1,
            menuItemFactory: FactoryManageConditionalFormattingRule,
        },
    },
@@ -15,7 +15,7 @@
 */

 import type { MenuSchemaType } from '@univerjs/ui';
-import { RibbonStartGroup } from '@univerjs/ui';
+import { RibbonDataGroup } from '@univerjs/ui';
 import { AddSheetDataValidationAndOpenCommand } from '../commands/commands/data-validation-ui.command';
 import { OpenValidationPanelOperation } from '../commands/operations/data-validation.operation';
 import {
@@ -26,9 +26,9 @@ import {
 } from './dv.menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.FORMULAS_INSERT]: {
+    [RibbonDataGroup.RULES]: {
        [DATA_VALIDATION_MENU_ID]: {
-            order: 9,
+            order: 0,
            menuItemFactory: dataValidationMenuFactory,
            [OpenValidationPanelOperation.id]: {
                order: 0,
@@ -15,14 +15,14 @@
 */

 import type { MenuSchemaType } from '@univerjs/ui';
-import { RibbonStartGroup } from '@univerjs/ui';
+import { RibbonInsertGroup } from '@univerjs/ui';
 import { InsertCellImageCommand, InsertFloatImageCommand } from '../commands/commands/insert-image.command';
 import { ImageMenuFactory, SHEETS_IMAGE_MENU_ID, UploadCellImageMenuFactory, UploadFloatImageMenuFactory } from '../views/menu/image.menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.FORMULAS_INSERT]: {
+    [RibbonInsertGroup.MEDIA]: {
        [SHEETS_IMAGE_MENU_ID]: {
-            order: 3,
+            order: 0,
            menuItemFactory: ImageMenuFactory,
            [InsertFloatImageCommand.id]: {
                order: 0,
@@ -20,7 +20,7 @@ import {
    ReCalcSheetsFilterCommand,
    SmartToggleSheetsFilterCommand,
 } from '@univerjs/sheets-filter';
-import { RibbonStartGroup } from '@univerjs/ui';
+import { RibbonDataGroup } from '@univerjs/ui';
 import {
    ClearFilterCriteriaMenuItemFactory,
    ReCalcFilterMenuItemFactory,
@@ -28,9 +28,9 @@ import {
 } from './sheets-filter.menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.FORMULAS_INSERT]: {
+    [RibbonDataGroup.ORGANIZATION]: {
        [SmartToggleSheetsFilterCommand.id]: {
-            order: 10,
+            order: 2,
            menuItemFactory: SmartToggleFilterMenuItemFactory,
            [ClearSheetsFilterCriteriaCommand.id]: {
                order: 0,
@@ -16,22 +16,45 @@

 import type { MenuSchemaType } from '@univerjs/ui';
 import { PASTE_SPECIAL_MENU_ID } from '@univerjs/sheets-ui';
-import { RibbonStartGroup } from '@univerjs/ui';
+import { RibbonFormulasGroup } from '@univerjs/ui';
 import { SheetOnlyPasteFormulaCommand } from '../commands/commands/formula-clipboard.command';
 import { InsertFunctionOperation } from '../commands/operations/insert-function.operation';
-import { MoreFunctionsOperation } from '../commands/operations/more-functions.operation';
-import { InsertFunctionMenuItemFactory, MoreFunctionsMenuItemFactory, PasteFormulaMenuItemFactory } from './menu';
+import {
+    InsertAVERAGEFunctionMenuItemFactory,
+    InsertCOUNTFunctionMenuItemFactory,
+    InsertMAXFunctionMenuItemFactory,
+    InsertMINFunctionMenuItemFactory,
+    InsertSUMFunctionMenuItemFactory,
+    MoreFunctionsMenuItemFactory,
+    PasteFormulaMenuItemFactory,
+} from './menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.FORMULAS_INSERT]: {
-        [InsertFunctionOperation.id]: {
-            order: 1,
-            menuItemFactory: InsertFunctionMenuItemFactory,
-            [MoreFunctionsOperation.id]: {
-                order: 1,
-                menuItemFactory: MoreFunctionsMenuItemFactory,
-            },
+    [RibbonFormulasGroup.BASIC]: {
+        [`${InsertFunctionOperation.id}.sum`]: {
+            order: 0,
+            menuItemFactory: InsertSUMFunctionMenuItemFactory,
        },
+        [`${InsertFunctionOperation.id}.count`]: {
+            order: 0,
+            menuItemFactory: InsertCOUNTFunctionMenuItemFactory,
+        },
+        [`${InsertFunctionOperation.id}.average`]: {
+            order: 0,
+            menuItemFactory: InsertAVERAGEFunctionMenuItemFactory,
+        },
+        [`${InsertFunctionOperation.id}.max`]: {
+            order: 0,
+            menuItemFactory: InsertMAXFunctionMenuItemFactory,
+        },
+        [`${InsertFunctionOperation.id}.min`]: {
+            order: 0,
+            menuItemFactory: InsertMINFunctionMenuItemFactory,
+        },
+    },
+    [RibbonFormulasGroup.OTHERS]: {
+        order: 0,
+        menuItemFactory: MoreFunctionsMenuItemFactory,
    },
    [PASTE_SPECIAL_MENU_ID]: {
        [SheetOnlyPasteFormulaCommand.id]: {
@@ -20,12 +20,12 @@ import { IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
 import { RangeProtectionPermissionEditPoint, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellValuePermission } from '@univerjs/sheets';
 import { getCurrentRangeDisable$ } from '@univerjs/sheets-ui';
 import { getMenuHiddenObservable, IClipboardInterfaceService, MenuItemType } from '@univerjs/ui';
-
 import { combineLatestWith, map, Observable, of, switchMap } from 'rxjs';
 import { SheetOnlyPasteFormulaCommand } from '../commands/commands/formula-clipboard.command';
 import { InsertFunctionOperation } from '../commands/operations/insert-function.operation';
 import { MoreFunctionsOperation } from '../commands/operations/more-functions.operation';

+/** @deprecated */
 export function InsertFunctionMenuItemFactory(accessor: IAccessor): IMenuItem {
    return {
        id: InsertFunctionOperation.id,
@@ -79,11 +79,113 @@ export function InsertFunctionMenuItemFactory(accessor: IAccessor): IMenuItem {
    };
 }

+// SUM
+export function InsertSUMFunctionMenuItemFactory(accessor: IAccessor): IMenuItem {
+    return {
+        id: InsertFunctionOperation.id,
+        title: 'SUM',
+        icon: 'SumSingle',
+        type: MenuItemType.BUTTON,
+        params: {
+            value: 'SUM',
+        },
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
+    };
+}
+
+// COUNT
+export function InsertCOUNTFunctionMenuItemFactory(accessor: IAccessor): IMenuItem {
+    return {
+        id: InsertFunctionOperation.id,
+        title: 'COUNT',
+        icon: 'CntSingle',
+        type: MenuItemType.BUTTON,
+        params: {
+            value: 'COUNT',
+        },
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
+    };
+}
+
+// AVERAGE
+export function InsertAVERAGEFunctionMenuItemFactory(accessor: IAccessor): IMenuItem {
+    return {
+        id: InsertFunctionOperation.id,
+        title: 'AVERAGE',
+        icon: 'AvgSingle',
+        type: MenuItemType.BUTTON,
+        params: {
+            value: 'AVERAGE',
+        },
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
+    };
+}
+
+// MAX
+export function InsertMAXFunctionMenuItemFactory(accessor: IAccessor): IMenuItem {
+    return {
+        id: InsertFunctionOperation.id,
+        title: 'MAX',
+        icon: 'MaxSingle',
+        type: MenuItemType.BUTTON,
+        params: {
+            value: 'MAX',
+        },
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
+    };
+}
+
+// MIN
+export function InsertMINFunctionMenuItemFactory(accessor: IAccessor): IMenuItem {
+    return {
+        id: InsertFunctionOperation.id,
+        title: 'MIN',
+        icon: 'MinSingle',
+        type: MenuItemType.BUTTON,
+        params: {
+            value: 'MIN',
+        },
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
+    };
+}
+
+// More Functions
 export function MoreFunctionsMenuItemFactory(accessor: IAccessor): IMenuItem {
    return {
        id: MoreFunctionsOperation.id,
        title: 'formula.insert.more',
        type: MenuItemType.BUTTON,
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
    };
 }

@@ -110,7 +212,11 @@ export function PasteFormulaMenuItemFactory(accessor: IAccessor): IMenuItem {
        type: MenuItemType.BUTTON,
        title: 'formula.operation.pasteFormula',
        disabled$: menuClipboardDisabledObservable(accessor).pipe(
-            combineLatestWith(getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetSetCellValuePermission, WorksheetEditPermission] })),
+            combineLatestWith(getCurrentRangeDisable$(accessor, {
+                workbookTypes: [WorkbookEditablePermission],
+                rangeTypes: [RangeProtectionPermissionEditPoint],
+                worksheetTypes: [WorksheetSetCellValuePermission, WorksheetEditPermission],
+            })),
            map(([d1, d2]) => d1 || d2)
        ),
    };
@@ -15,18 +15,18 @@
 */

 import type { MenuSchemaType } from '@univerjs/ui';
-import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui';
+import { ContextMenuGroup, ContextMenuPosition, RibbonInsertGroup } from '@univerjs/ui';
 import { InsertHyperLinkToolbarOperation } from '../commands/operations/popup.operations';
 import { genZenEditorMenuId, insertLinkMenuFactory, insertLinkMenuToolbarFactory, zenEditorInsertLinkMenuFactory, zenEditorInsertLinkMenuToolbarFactory } from './menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.OTHERS]: {
+    [RibbonInsertGroup.MEDIA]: {
        [InsertHyperLinkToolbarOperation.id]: {
-            order: 2,
+            order: 1,
            menuItemFactory: insertLinkMenuToolbarFactory,
        },
        [genZenEditorMenuId(InsertHyperLinkToolbarOperation.id)]: {
-            order: 2,
+            order: 1,
            menuItemFactory: zenEditorInsertLinkMenuToolbarFactory,
        },
    },
@@ -16,30 +16,30 @@

 import type { MenuSchemaType } from '@univerjs/ui';
 import { AddDecimalCommand, SetCurrencyCommand, SetPercentCommand, SubtractDecimalCommand } from '@univerjs/sheets-numfmt';
-import { RibbonStartGroup } from '@univerjs/ui';
+import { RibbonDataGroup } from '@univerjs/ui';
 import { OpenNumfmtPanelOperator } from '../commands/operations/open.numfmt.panel.operation';
 import { AddDecimalMenuItem, CurrencyMenuItem, FactoryOtherMenuItem, PercentMenuItem, SubtractDecimalMenuItem } from './menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.FORMULAS_INSERT]: {
+    [RibbonDataGroup.FORMULAS]: {
        [SetCurrencyCommand.id]: {
-            order: 4,
+            order: 0,
            menuItemFactory: CurrencyMenuItem,
        },
        [AddDecimalCommand.id]: {
-            order: 5,
+            order: 1,
            menuItemFactory: AddDecimalMenuItem,
        },
        [SubtractDecimalCommand.id]: {
-            order: 6,
+            order: 2,
            menuItemFactory: SubtractDecimalMenuItem,
        },
        [SetPercentCommand.id]: {
-            order: 7,
+            order: 3,
            menuItemFactory: PercentMenuItem,
        },
        [OpenNumfmtPanelOperator.id]: {
-            order: 8,
+            order: 4,
            menuItemFactory: FactoryOtherMenuItem,
        },
    },
@@ -15,7 +15,7 @@
 */

 import type { MenuSchemaType } from '@univerjs/ui';
-import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui';
+import { ContextMenuGroup, ContextMenuPosition, RibbonDataGroup } from '@univerjs/ui';
 import {
    SortRangeAscCommand,
    SortRangeAscExtCommand,
@@ -46,9 +46,9 @@ import {
 } from './sheets-sort.menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.FORMULAS_INSERT]: {
+    [RibbonDataGroup.ORGANIZATION]: {
        [SHEETS_SORT_MENU_ID]: {
-            order: 2,
+            order: 3,
            menuItemFactory: sortRangeMenuFactory,
            [SortRangeAscCommand.id]: {
                order: 0,
@@ -16,12 +16,12 @@

 import type { MenuSchemaType } from '@univerjs/ui';
 import { SheetTableInsertColCommand, SheetTableInsertRowCommand, SheetTableRemoveColCommand, SheetTableRemoveRowCommand } from '@univerjs/sheets-table';
-import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui';
+import { ContextMenuGroup, ContextMenuPosition, RibbonDataGroup } from '@univerjs/ui';
 import { OpenTableSelectorOperation } from '../commands/operations/open-table-selector.operation';
 import { SHEET_TABLE_CONTEXT_INSERT_MENU_ID, SHEET_TABLE_CONTEXT_REMOVE_MENU_ID, SheetTableInsertColMenuFactory, SheetTableInsertContextMenuFactory, SheetTableInsertRowMenuFactory, SheetTableRemoveColMenuFactory, SheetTableRemoveContextMenuFactory, SheetTableRemoveRowMenuFactory, sheetTableToolbarInsertMenuFactory } from '../views/menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.FORMULAS_VIEW]: {
+    [RibbonDataGroup.ORGANIZATION]: {
        [OpenTableSelectorOperation.id]: {
            order: 0,
            menuItemFactory: sheetTableToolbarInsertMenuFactory,
@@ -16,14 +16,14 @@

 import type { MenuSchemaType } from '@univerjs/ui';
 import { ToggleSheetCommentPanelOperation } from '@univerjs/thread-comment-ui';
-import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui';
+import { ContextMenuGroup, ContextMenuPosition, RibbonInsertGroup } from '@univerjs/ui';
 import { ShowAddSheetCommentModalOperation } from '../commands/operations/comment.operation';
 import { threadCommentMenuFactory, threadPanelMenuFactory } from './menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.OTHERS]: {
+    [RibbonInsertGroup.MEDIA]: {
        [ToggleSheetCommentPanelOperation.id]: {
-            order: 1,
+            order: 2,
            menuItemFactory: threadPanelMenuFactory,
        },
    },
@@ -49,7 +49,7 @@ import {
    SetWorksheetRowIsAutoHeightCommand,
    ToggleGridlinesCommand,
 } from '@univerjs/sheets';
-import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui';
+import { ContextMenuGroup, ContextMenuPosition, RibbonPosition, RibbonStartGroup } from '@univerjs/ui';
 import {
    SheetCopyCommand,
    // SheetCutCommand,
@@ -176,98 +176,108 @@ import {
 } from './menu/sheet.menu';

 export const menuSchema: MenuSchemaType = {
-    [RibbonStartGroup.FORMAT]: {
-        [SetOnceFormatPainterCommand.id]: {
-            order: 0,
-            menuItemFactory: FormatPainterMenuItemFactory,
-        },
-        [SetRangeBoldCommand.id]: {
-            order: 1,
-            menuItemFactory: BoldMenuItemFactory,
-        },
-        [SetRangeItalicCommand.id]: {
-            order: 2,
-            menuItemFactory: ItalicMenuItemFactory,
-        },
-        [SetRangeUnderlineCommand.id]: {
-            order: 3,
-            menuItemFactory: UnderlineMenuItemFactory,
-        },
-        [SetRangeStrickThroughCommand.id]: {
-            order: 4,
-            menuItemFactory: StrikeThroughMenuItemFactory,
-        },
-        [SetRangeFontFamilyCommand.id]: {
-            order: 5,
-            menuItemFactory: FontFamilySelectorMenuItemFactory,
-        },
-        [SetRangeFontSizeCommand.id]: {
-            order: 6,
-            menuItemFactory: FontSizeSelectorMenuItemFactory,
-        },
-        [SetRangeTextColorCommand.id]: {
-            order: 7,
-            menuItemFactory: TextColorSelectorMenuItemFactory,
-            [ResetTextColorCommand.id]: {
-                order: 0,
-                menuItemFactory: ResetTextColorMenuItemFactory,
-            },
-        },
-        [SetBackgroundColorCommand.id]: {
-            order: 9,
-            menuItemFactory: BackgroundColorSelectorMenuItemFactory,
-            [ResetBackgroundColorCommand.id]: {
-                order: 0,
-                menuItemFactory: ResetBackgroundColorMenuItemFactory,
-            },
-        },
-        [SetBorderBasicCommand.id]: {
-            order: 10,
-            menuItemFactory: CellBorderSelectorMenuItemFactory,
-        },
-    },
-    [RibbonStartGroup.LAYOUT]: {
-        [AddWorksheetMergeCommand.id]: {
-            order: 0,
-            menuItemFactory: CellMergeMenuItemFactory,
-            [AddWorksheetMergeAllCommand.id]: {
-                order: 0,
-                menuItemFactory: CellMergeAllMenuItemFactory,
-            },
-            [AddWorksheetMergeVerticalCommand.id]: {
-                order: 1,
-                menuItemFactory: CellMergeVerticalMenuItemFactory,
-            },
-            [AddWorksheetMergeHorizontalCommand.id]: {
+    [RibbonPosition.START]: {
+        [RibbonStartGroup.HISTORY]: {
+            [SetOnceFormatPainterCommand.id]: {
                order: 2,
-                menuItemFactory: CellMergeHorizontalMenuItemFactory,
+                menuItemFactory: FormatPainterMenuItemFactory,
            },
-            [RemoveWorksheetMergeCommand.id]: {
+            [ClearSelectionAllCommand.id]: {
                order: 3,
-                menuItemFactory: CellMergeCancelMenuItemFactory,
+                menuItemFactory: ClearSelectionAllMenuItemFactory,
            },
        },
-        [SetHorizontalTextAlignCommand.id]: {
-            order: 1,
-            menuItemFactory: HorizontalAlignMenuItemFactory,
+        [RibbonStartGroup.FORMAT]: {
+            [SetRangeFontFamilyCommand.id]: {
+                order: 1,
+                menuItemFactory: FontFamilySelectorMenuItemFactory,
+            },
+            [SetRangeFontSizeCommand.id]: {
+                order: 2,
+                menuItemFactory: FontSizeSelectorMenuItemFactory,
+            },
+        // TODO: fontsize +
+        // TODO: fontsize -
+            [SetRangeBoldCommand.id]: {
+                order: 5,
+                menuItemFactory: BoldMenuItemFactory,
+            },
+            [SetRangeItalicCommand.id]: {
+                order: 6,
+                menuItemFactory: ItalicMenuItemFactory,
+            },
+            [SetRangeUnderlineCommand.id]: {
+                order: 7,
+                menuItemFactory: UnderlineMenuItemFactory,
+            },
+            [SetRangeStrickThroughCommand.id]: {
+                order: 8,
+                menuItemFactory: StrikeThroughMenuItemFactory,
+            },
+            [SetRangeTextColorCommand.id]: {
+                order: 9,
+                menuItemFactory: TextColorSelectorMenuItemFactory,
+                [ResetTextColorCommand.id]: {
+                    order: 0,
+                    menuItemFactory: ResetTextColorMenuItemFactory,
+                },
+            },
+            [SetBackgroundColorCommand.id]: {
+                order: 10,
+                menuItemFactory: BackgroundColorSelectorMenuItemFactory,
+                [ResetBackgroundColorCommand.id]: {
+                    order: 0,
+                    menuItemFactory: ResetBackgroundColorMenuItemFactory,
+                },
+            },
+            [SetBorderBasicCommand.id]: {
+                order: 11,
+                menuItemFactory: CellBorderSelectorMenuItemFactory,
+            },
        },
-        [SetVerticalTextAlignCommand.id]: {
-            order: 1,
-            menuItemFactory: VerticalAlignMenuItemFactory,
+        [RibbonStartGroup.LAYOUT]: {
+            [SetHorizontalTextAlignCommand.id]: {
+                order: 0,
+                menuItemFactory: HorizontalAlignMenuItemFactory,
+            },
+            [SetVerticalTextAlignCommand.id]: {
+                order: 3,
+                menuItemFactory: VerticalAlignMenuItemFactory,
+            },
+            [SetTextWrapCommand.id]: {
+                order: 6,
+                menuItemFactory: WrapTextMenuItemFactory,
+            },
+            [SetTextRotationCommand.id]: {
+                order: 7,
+                menuItemFactory: TextRotateMenuItemFactory,
+            },
+            [AddWorksheetMergeCommand.id]: {
+                order: 8,
+                menuItemFactory: CellMergeMenuItemFactory,
+                [AddWorksheetMergeAllCommand.id]: {
+                    order: 0,
+                    menuItemFactory: CellMergeAllMenuItemFactory,
+                },
+                [AddWorksheetMergeVerticalCommand.id]: {
+                    order: 1,
+                    menuItemFactory: CellMergeVerticalMenuItemFactory,
+                },
+                [AddWorksheetMergeHorizontalCommand.id]: {
+                    order: 2,
+                    menuItemFactory: CellMergeHorizontalMenuItemFactory,
+                },
+                [RemoveWorksheetMergeCommand.id]: {
+                    order: 3,
+                    menuItemFactory: CellMergeCancelMenuItemFactory,
+                },
+            },
        },
-        [SetTextWrapCommand.id]: {
-            order: 2,
-            menuItemFactory: WrapTextMenuItemFactory,
-        },
-        [SetTextRotationCommand.id]: {
-            order: 3,
-            menuItemFactory: TextRotateMenuItemFactory,
-        },
-    },
-    [RibbonStartGroup.OTHERS]: {
-        [AddRangeProtectionFromToolbarCommand.id]: {
-            order: 0,
-            menuItemFactory: sheetPermissionToolbarMenuFactory,
+        [RibbonStartGroup.OTHERS]: {
+            [AddRangeProtectionFromToolbarCommand.id]: {
+                order: 0,
+                menuItemFactory: sheetPermissionToolbarMenuFactory,
+            },
        },
    },
    [ContextMenuPosition.MAIN_AREA]: {
@@ -14,12 +14,20 @@
 * limitations under the License.
 */

-import { ClearSelectionAllCommand, ClearSelectionContentCommand, ClearSelectionFormatCommand, RangeProtectionPermissionEditPoint, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellStylePermission, WorksheetSetCellValuePermission } from '@univerjs/sheets';
-import type { IMenuButtonItem, IMenuSelectorItem } from '@univerjs/ui';
-import { getMenuHiddenObservable, MenuItemType } from '@univerjs/ui';
-
 import type { IAccessor } from '@univerjs/core';
+import type { IMenuButtonItem, IMenuSelectorItem } from '@univerjs/ui';
 import { UniverInstanceType } from '@univerjs/core';
+import {
+    ClearSelectionAllCommand,
+    ClearSelectionContentCommand,
+    ClearSelectionFormatCommand,
+    RangeProtectionPermissionEditPoint,
+    WorkbookEditablePermission,
+    WorksheetEditPermission,
+    WorksheetSetCellStylePermission,
+    WorksheetSetCellValuePermission,
+} from '@univerjs/sheets';
+import { getMenuHiddenObservable, MenuItemType } from '@univerjs/ui';
 import { getCurrentRangeDisable$, getObservableWithExclusiveRange$ } from './menu-util';

 export const CLEAR_SELECTION_MENU_ID = 'sheet.menu.clear-selection';
@@ -37,8 +45,13 @@ export function ClearSelectionContentMenuItemFactory(accessor: IAccessor): IMenu
    return {
        id: ClearSelectionContentCommand.id,
        type: MenuItemType.BUTTON,
+        icon: 'ClearFormat',
        title: 'rightClick.clearContent',
-        disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission], rangeTypes: [RangeProtectionPermissionEditPoint] })),
+        disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        })),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -46,8 +59,13 @@ export function ClearSelectionFormatMenuItemFactory(accessor: IAccessor): IMenuB
    return {
        id: ClearSelectionFormatCommand.id,
        type: MenuItemType.BUTTON,
+        icon: 'ClearFormat',
        title: 'rightClick.clearFormat',
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -55,8 +73,13 @@ export function ClearSelectionAllMenuItemFactory(accessor: IAccessor): IMenuButt
    return {
        id: ClearSelectionAllCommand.id,
        type: MenuItemType.BUTTON,
+        icon: 'ClearFormat',
        title: 'rightClick.clearAll',
-        disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] })),
+        disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        })),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -319,7 +319,11 @@ export function UnderlineMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
            subscriber.next(!!(isUnderline && isUnderline.s));
            return disposable.dispose;
        })),
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }, true),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -336,7 +340,11 @@ export function StrikeThroughMenuItemFactory(accessor: IAccessor): IMenuButtonIt
        icon: 'StrikethroughSingle',
        title: 'Set strike through',
        tooltip: 'toolbar.strikethrough',
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }, true),
        activated$: deriveStateFromActiveSheet$(univerInstanceService, false, ({ worksheet }) => new Observable<boolean>((subscriber) => {
            const disposable = commandService.onCommandExecuted((c) => {
                const id = c.id;
@@ -401,7 +409,11 @@ export function FontFamilySelectorMenuItemFactory(accessor: IAccessor): IMenuSel
            value: item.value,
        })),

-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }, true),
        value$: deriveStateFromActiveSheet$(univerInstanceService, defaultValue, ({ worksheet }) => new Observable((subscriber) => {
            const updateSheet = () => {
                let ff = defaultValue;
@@ -442,7 +454,11 @@ export function FontSizeSelectorMenuItemFactory(accessor: IAccessor): IMenuSelec
    const contextService = accessor.get(IContextService);

    const defaultValue = DEFAULT_STYLES.fs;
-    const disabled$ = getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true);
+    const disabled$ = getCurrentRangeDisable$(accessor, {
+        workbookTypes: [WorkbookEditablePermission],
+        worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+        rangeTypes: [RangeProtectionPermissionEditPoint],
+    }, true);

    return {
        id: SetRangeFontSizeCommand.id,
@@ -507,7 +523,11 @@ export function ResetTextColorMenuItemFactory(accessor: IAccessor): IMenuButtonI
        type: MenuItemType.BUTTON,
        title: 'toolbar.resetColor',
        icon: 'NoColor',
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }, true),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -543,7 +563,11 @@ export function TextColorSelectorMenuItemFactory(accessor: IAccessor): IMenuSele
            return disposable.dispose;
        }),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }, true),
    };
 }

@@ -553,7 +577,11 @@ export function ResetBackgroundColorMenuItemFactory(accessor: IAccessor): IMenuB
        type: MenuItemType.BUTTON,
        title: 'toolbar.resetColor',
        icon: 'NoColor',
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
    };
 }

@@ -588,7 +616,11 @@ export function BackgroundColorSelectorMenuItemFactory(accessor: IAccessor): IMe
            return disposable.dispose;
        }),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
    };
 }

@@ -651,7 +683,11 @@ export function HorizontalAlignMenuItemFactory(accessor: IAccessor): IMenuSelect
            return disposable.dispose;
        })),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
    };
 }

@@ -714,7 +750,11 @@ export function VerticalAlignMenuItemFactory(accessor: IAccessor): IMenuSelector
            return disposable.dispose;
        })),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
    };
 }

@@ -777,7 +817,11 @@ export function WrapTextMenuItemFactory(accessor: IAccessor): IMenuSelectorItem<
            return disposable.dispose;
        })),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
    };
 }

@@ -863,7 +907,11 @@ export function TextRotateMenuItemFactory(accessor: IAccessor): IMenuSelectorIte
            return disposable.dispose;
        })),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
    };
 }

@@ -882,7 +930,11 @@ export function CopyMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
        type: MenuItemType.BUTTON,
        title: 'rightClick.copy',
        icon: 'Copy',
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookCopyPermission], worksheetTypes: [WorksheetCopyPermission], rangeTypes: [RangeProtectionPermissionViewPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookCopyPermission],
+            worksheetTypes: [WorksheetCopyPermission],
+            rangeTypes: [RangeProtectionPermissionViewPoint],
+        }),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -893,7 +945,11 @@ export function CutMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
        commandId: CutCommand.id,
        type: MenuItemType.BUTTON,
        title: 'contextMenu.cut',
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetCopyPermission, WorksheetEditPermission] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+            worksheetTypes: [WorksheetCopyPermission, WorksheetEditPermission],
+        }),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -906,7 +962,11 @@ export function PasteMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
        title: 'rightClick.paste',
        icon: 'PasteSpecial',
        disabled$: menuClipboardDisabledObservable(accessor).pipe(
-            combineLatestWith(getCurrentRangeDisable$(accessor, { rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission, WorksheetSetCellValuePermission], workbookTypes: [WorkbookEditablePermission] })),
+            combineLatestWith(getCurrentRangeDisable$(accessor, {
+                rangeTypes: [RangeProtectionPermissionEditPoint],
+                worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission, WorksheetSetCellValuePermission],
+                workbookTypes: [WorkbookEditablePermission],
+            })),
            map(([d1, d2]) => d1 || d2)
        ),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
@@ -930,7 +990,11 @@ export function PasteValueMenuItemFactory(accessor: IAccessor): IMenuButtonItem<
        type: MenuItemType.BUTTON,
        title: 'rightClick.pasteValue',
        disabled$: menuClipboardDisabledObservable(accessor).pipe(
-            combineLatestWith(getCurrentRangeDisable$(accessor, { rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetSetCellValuePermission, WorksheetEditPermission], workbookTypes: [WorkbookEditablePermission] })),
+            combineLatestWith(getCurrentRangeDisable$(accessor, {
+                rangeTypes: [RangeProtectionPermissionEditPoint],
+                worksheetTypes: [WorksheetSetCellValuePermission, WorksheetEditPermission],
+                workbookTypes: [WorkbookEditablePermission],
+            })),
            map(([d1, d2]) => d1 || d2)
        ),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
@@ -943,7 +1007,11 @@ export function PasteFormatMenuItemFactory(accessor: IAccessor): IMenuButtonItem
        type: MenuItemType.BUTTON,
        title: 'rightClick.pasteFormat',
        disabled$: menuClipboardDisabledObservable(accessor).pipe(
-            combineLatestWith(getCurrentRangeDisable$(accessor, { rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetSetCellStylePermission, WorksheetEditPermission], workbookTypes: [WorkbookEditablePermission] })),
+            combineLatestWith(getCurrentRangeDisable$(accessor, {
+                rangeTypes: [RangeProtectionPermissionEditPoint],
+                worksheetTypes: [WorksheetSetCellStylePermission, WorksheetEditPermission],
+                workbookTypes: [WorkbookEditablePermission],
+            })),
            map(([d1, d2]) => d1 || d2)
        ),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
@@ -956,7 +1024,11 @@ export function PasteColWidthMenuItemFactory(accessor: IAccessor): IMenuButtonIt
        type: MenuItemType.BUTTON,
        title: 'rightClick.pasteColWidth',
        disabled$: menuClipboardDisabledObservable(accessor).pipe(
-            combineLatestWith(getCurrentRangeDisable$(accessor, { rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetSetColumnStylePermission, WorksheetEditPermission], workbookTypes: [WorkbookEditablePermission] })),
+            combineLatestWith(getCurrentRangeDisable$(accessor, {
+                rangeTypes: [RangeProtectionPermissionEditPoint],
+                worksheetTypes: [WorksheetSetColumnStylePermission, WorksheetEditPermission],
+                workbookTypes: [WorkbookEditablePermission],
+            })),
            map(([d1, d2]) => d1 || d2)
        ),
    };
@@ -968,7 +1040,17 @@ export function PasteBesidesBorderMenuItemFactory(accessor: IAccessor): IMenuBut
        type: MenuItemType.BUTTON,
        title: 'rightClick.pasteBesidesBorder',
        disabled$: menuClipboardDisabledObservable(accessor).pipe(
-            combineLatestWith(getCurrentRangeDisable$(accessor, { rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission, WorksheetSetCellValuePermission, WorksheetSetRowStylePermission, WorksheetSetColumnStylePermission], workbookTypes: [WorkbookEditablePermission] })),
+            combineLatestWith(getCurrentRangeDisable$(accessor, {
+                rangeTypes: [RangeProtectionPermissionEditPoint],
+                worksheetTypes: [
+                    WorksheetEditPermission,
+                    WorksheetSetCellStylePermission,
+                    WorksheetSetCellValuePermission,
+                    WorksheetSetRowStylePermission,
+                    WorksheetSetColumnStylePermission,
+                ],
+                workbookTypes: [WorkbookEditablePermission],
+            })),
            map(([d1, d2]) => d1 || d2)
        ),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
@@ -981,7 +1063,11 @@ export function FitContentMenuItemFactory(accessor: IAccessor): IMenuButtonItem
        type: MenuItemType.BUTTON,
        icon: 'AutoHeight',
        title: 'rightClick.fitContent',
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -992,7 +1078,11 @@ export function ColAutoWidthMenuItemFactory(accessor: IAccessor): IMenuButtonIte
        type: MenuItemType.BUTTON,
        icon: 'AutoWidth',
        title: 'rightClick.fitContent',
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -1071,7 +1161,11 @@ export function HideRowMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
        type: MenuItemType.BUTTON,
        icon: 'Hide',
        title: 'rightClick.hideSelectedRow',
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -1082,7 +1176,11 @@ export function HideColMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
        type: MenuItemType.BUTTON,
        icon: 'Hide',
        title: 'rightClick.hideSelectedColumn',
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetColumnStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetColumnStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -1120,7 +1218,11 @@ export function ShowRowMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
            subscriber.next(!hasHiddenRowsInSelections());
            return () => disposable.dispose();
        })),
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetRowStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetRowStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
    };
 }

@@ -1156,7 +1258,11 @@ export function ShowColMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
            subscriber.next(!hasHiddenColsInSelections());
            return () => disposable.dispose();
        })),
-        disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetSetColumnStylePermission, WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        disabled$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetSetColumnStylePermission, WorksheetEditPermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
    };
 }

@@ -1197,7 +1303,11 @@ export function SetRowHeightMenuItemFactory(accessor: IAccessor): IMenuButtonIte
            update();
            return disposable.dispose;
        })),
-        hidden$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetRowStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        hidden$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetRowStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
    };
 }

@@ -1242,7 +1352,11 @@ export function SetColWidthMenuItemFactory(accessor: IAccessor): IMenuButtonItem
            update();
            return disposable.dispose;
        })),
-        hidden$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetColumnStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+        hidden$: getCurrentRangeDisable$(accessor, {
+            workbookTypes: [WorkbookEditablePermission],
+            worksheetTypes: [WorksheetEditPermission, WorksheetSetColumnStylePermission],
+            rangeTypes: [RangeProtectionPermissionEditPoint],
+        }),
    };
 }

@@ -76,7 +76,7 @@ export const SheetBar = () => {

    return (
        <div className="univer-relative univer-flex univer-h-full univer-min-w-0 univer-flex-1">
-            <div className="univer-flex univer-items-center univer-pl-2">
+            <div className="univer-flex univer-items-center">
                {/* Add sheet button */}
                <SheetBarButton
                    className="univer-mr-2"
@@ -14,9 +14,9 @@
 * limitations under the License.
 */

+import type { IAccessor, ICommand } from '@univerjs/core';
 import { CommandType } from '@univerjs/core';
 import { ISidebarService } from '@univerjs/ui';
-import type { IAccessor, ICommand } from '@univerjs/core';
 import { ThreadCommentPanelService } from '../../services/thread-comment-panel.service';
 import { THREAD_COMMENT_PANEL } from '../../types/const';

@@ -232,17 +232,13 @@ export function Slider(props: ISliderProps) {
                open={zoomListVisible}
                onOpenChange={setZoomListVisible}
            >
-                <a
-                    className={`
-                      univer-flex univer-h-7 univer-w-[55px] univer-cursor-pointer univer-items-center
-                      univer-justify-center univer-rounded univer-text-sm univer-text-gray-800 univer-transition-all
-                      dark:univer-text-white dark:hover:univer-bg-gray-700
-                      hover:univer-bg-gray-100
-                    `}
+                <Button
+                    size="small"
+                    variant="text"
                >
                    {value}
                    %
-                </a>
+                </Button>
            </DropdownMenu>
        </div>
    );
@@ -34,7 +34,7 @@ export const menuSchema: MenuSchemaType = {
    },
    [RibbonStartGroup.OTHERS]: {
        [ToggleShortcutPanelOperation.id]: {
-            order: 99,
+            order: 1,
            menuItemFactory: ShortcutPanelMenuItemFactory,
        },
    },
@@ -16,9 +16,7 @@

 import type { IAccessor } from '@univerjs/core';
 import type { IMenuButtonItem } from '../../services/menu/menu';
-import { UniverInstanceType } from '@univerjs/core';
 import { ToggleShortcutPanelOperation } from '../../commands/operations/toggle-shortcut-panel.operation';
-import { getMenuHiddenObservable } from '../../common/menu-hidden-observable';
 import { MenuItemType } from '../../services/menu/menu';

 export function ShortcutPanelMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
@@ -28,7 +26,6 @@ export function ShortcutPanelMenuItemFactory(accessor: IAccessor): IMenuButtonIt
        tooltip: 'toggle-shortcut-panel',
        icon: 'KeyboardSingle',
        type: MenuItemType.BUTTON,
-        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-        // disabled$: getCurrentSheetDisabled$(accessor),
+        // hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
    };
 }
@@ -131,7 +131,7 @@ export { type IDialogPartMethodOptions } from './views/components/dialog-part/in
 export { FloatDom } from './views/components/dom/FloatDom';
 export { GlobalZone } from './views/components/global-zone/GlobalZone';
 export { CanvasPopup, SingleCanvasPopup } from './views/components/popup/CanvasPopup';
-export { ToolbarButton } from './views/components/ribbon/Button/ToolbarButton';
+export { ToolbarButton } from './views/components/ribbon/ToolbarButton';
 export { useToolbarItemStatus } from './views/components/ribbon/hook';
 export { Ribbon } from './views/components/ribbon/Ribbon';
 export { ToolbarItem } from './views/components/ribbon/ToolbarItem';
@@ -33,11 +33,17 @@ const locale: typeof zhCN = {
    },
    ribbon: {
        start: 'Start',
+        startDesc: 'Initiate the worksheet and set basic parameters.',
        insert: 'Insert',
+        insertDesc: 'Insert rows, columns, charts and various other elements.',
        formulas: 'Formulas',
+        formulasDesc: 'Use functions and formulas for data calculations.',
        data: 'Data',
+        dataDesc: 'Manage data, including import, sorting and filtering.',
        view: 'View',
+        viewDesc: 'Switch view modes and adjust the display effect.',
        others: 'Others',
+        othersDesc: 'Other functions and settings.',
        more: 'More',
    },
    fontFamily: {
@@ -33,11 +33,17 @@ const locale: typeof zhCN = {
    },
    ribbon: {
        start: 'شروع',
+        startDesc: 'ایجاد کاربرگ و تنظیم پارامترهای اولیه.',
        insert: 'درج',
+        insertDesc: 'درج ردیف‌ها، ستون‌ها، نمودارها و عناصر مختلف دیگر.',
        formulas: 'فرمول‌ها',
+        formulasDesc: 'استفاده از توابع و فرمول‌ها برای محاسبات داده‌ها.',
        data: 'داده‌ها',
+        dataDesc: 'ادغام و تجزیه داده‌ها.',
        view: 'نمایش',
+        viewDesc: 'تغییر حالت نمایش و تنظیم اثرات نمایشی.',
        others: 'دیگر',
+        othersDesc: 'سایر عملکردها و تنظیمات.',
        more: 'بیشتر',
    },
    fontFamily: {
@@ -33,11 +33,17 @@ const locale: typeof enUS = {
    },
    ribbon: {
        start: 'Démarrer',
+        startDesc: 'Initialiser la feuille de calcul et définir les paramètres de base.',
        insert: 'Insérer',
+        insertDesc: 'Insérer des lignes, des colonnes, des graphiques et divers autres éléments.',
        formulas: 'Formules',
+        formulasDesc: 'Utiliser des fonctions et des formules pour les calculs de données.',
        data: 'Données',
+        dataDesc: 'Gérer les données, y compris l\'importation, le tri et le filtrage.',
        view: 'Vue',
+        viewDesc: 'Changer les modes d\'affichage et ajuster l\'effet d\'affichage.',
        others: 'Autres',
+        othersDesc: 'Autres fonctions et paramètres.',
        more: 'Plus',
    },
    fontFamily: {
@@ -33,11 +33,17 @@ const locale: typeof zhCN = {
    },
    ribbon: {
        start: 'Начало',
+        startDesc: 'Инициализация рабочей таблицы и установка основных параметров.',
        insert: 'Вставка',
+        insertDesc: 'Вставка строк, столбцов, графиков и различных других элементов.',
        formulas: 'Формулы',
+        formulasDesc: 'Использование функций и формул для вычислений данных.',
        data: 'Данные',
+        dataDesc: 'Управление данными, включая импорт, сортировку и фильтрацию.',
        view: 'Вид',
+        viewDesc: 'Смена режимов отображения и настройка эффекта отображения.',
        others: 'Другие',
+        othersDesc: 'Другие функции и настройки.',
        more: 'Больше',
    },
    fontFamily: {
@@ -33,11 +33,17 @@ const locale: typeof zhCN = {
    },
    ribbon: {
        start: 'Bắt đầu',
+        startDesc: 'Khởi tạo bảng tính và thiết lập các tham số cơ bản.',
        insert: 'Chèn',
+        insertDesc: 'Chèn hàng, cột, biểu đồ và các phần tử khác.',
        formulas: 'Công thức',
+        formulasDesc: 'Sử dụng hàm và công thức để tính toán dữ liệu.',
        data: 'Dữ liệu',
+        dataDesc: 'Sắp xếp, lọc và phân tích dữ liệu.',
        view: 'Xem',
+        viewDesc: 'Chuyển đổi chế độ xem và điều chỉnh hiệu ứng hiển thị.',
        others: 'Khác',
+        othersDesc: 'Các chức năng và cài đặt khác.',
        more: 'Thêm',
    },
    fontFamily: {
@@ -31,11 +31,17 @@ const locale = {
    },
    ribbon: {
        start: '开始',
+        startDesc: '初始化工作表并设置基本参数。',
        insert: '插入',
+        insertDesc: '插入行、列、图表和各种其他元素。',
        formulas: '公式',
+        formulasDesc: '使用函数和公式进行数据计算。',
        data: '数据',
+        dataDesc: '管理数据，包括导入、排序和筛选。',
        view: '视图',
+        viewDesc: '切换视图模式并调整显示效果。',
        others: '其他',
+        othersDesc: '其他功能和设置。',
        more: '更多',
    },
    fontFamily: {
@@ -33,11 +33,17 @@ const locale: typeof zhCN = {
    },
    ribbon: {
        start: '開始',
+        startDesc: '初始化工作表並設定基本參數。',
        insert: '插入',
+        insertDesc: '插入行、列、圖表和各種其他元素。',
        formulas: '公式',
+        formulasDesc: '使用函數和公式進行數據計算。',
        data: '資料',
+        dataDesc: '管理資料，包括匯入、排序和篩選。',
        view: '視圖',
+        viewDesc: '切換視圖模式並調整顯示效果。',
        others: '其他',
+        othersDesc: '其他功能和設定。',
        more: '更多',
    },
    fontFamily: {
@@ -34,7 +34,7 @@ export interface IMenuSchema {
 }

 export interface IMenuManagerService {
-    readonly menuChanged$: Observable<void>;
+    readonly menuChanged$: Observable<number>;

    mergeMenu(source: MenuSchemaType, target?: MenuSchemaType): void;

@@ -54,7 +54,7 @@ export type MenuSchemaType = {
 };

 export class MenuManagerService extends Disposable implements IMenuManagerService {
-    readonly menuChanged$ = new Subject<void>();
+    readonly menuChanged$ = new Subject<number>();

    private _menu: MenuSchemaType = {
        [MenuManagerPosition.RIBBON]: {
@@ -69,39 +69,54 @@ export class MenuManagerService extends Disposable implements IMenuManagerServic
                [RibbonStartGroup.LAYOUT]: {
                    order: 2,
                },
-                [RibbonStartGroup.FORMULAS_INSERT]: {
-                    order: 3,
-                },
-                [RibbonStartGroup.FORMULAS_VIEW]: {
-                    order: 4,
-                },
-                [RibbonStartGroup.FILE]: {
-                    order: 5,
-                },
                [RibbonStartGroup.OTHERS]: {
-                    order: 6,
+                    order: 3,
                },
            },
            [RibbonPosition.INSERT]: {
                order: 1,
-                [RibbonInsertGroup.OTHERS]: {
+                [RibbonInsertGroup.EDIT]: {
                    order: 0,
                },
+                [RibbonInsertGroup.MEDIA]: {
+                    order: 1,
+                },
+                [RibbonInsertGroup.OTHERS]: {
+                    order: 2,
+                },
            },
            [RibbonPosition.FORMULAS]: {
                order: 2,
-                [RibbonFormulasGroup.OTHERS]: {
+                [RibbonFormulasGroup.BASIC]: {
                    order: 0,
                },
+                [RibbonFormulasGroup.OTHERS]: {
+                    order: 1,
+                },
            },
            [RibbonPosition.DATA]: {
                order: 3,
-                [RibbonDataGroup.OTHERS]: {
+                [RibbonDataGroup.FORMULAS]: {
                    order: 0,
                },
+                [RibbonDataGroup.RULES]: {
+                    order: 1,
+                },
+                [RibbonDataGroup.ORGANIZATION]: {
+                    order: 2,
+                },
+                [RibbonDataGroup.OTHERS]: {
+                    order: 3,
+                },
            },
            [RibbonPosition.VIEW]: {
                order: 4,
+                [RibbonViewGroup.DISPLAY]: {
+                    order: 0,
+                },
+                [RibbonViewGroup.VISIBILITY]: {
+                    order: 0,
+                },
                [RibbonViewGroup.OTHERS]: {
                    order: 0,
                },
@@ -228,7 +243,7 @@ export class MenuManagerService extends Disposable implements IMenuManagerServic
                const _key = key as keyof MenuSchemaType;
                _target[_key] = merge({}, _target[_key], source[_key]);

-                this.menuChanged$.next();
+                this.menuChanged$.next(Date.now());
            } else if (typeof value === 'object') {
                this.mergeMenu(source, value);
            }
@@ -237,7 +252,7 @@ export class MenuManagerService extends Disposable implements IMenuManagerServic

    appendRootMenu(source: MenuSchemaType): void {
        this._menu = merge({}, this._menu, source);
-        this.menuChanged$.next();
+        this.menuChanged$.next(Date.now());
    }

    private _buildMenuSchema(data: MenuSchemaType): IMenuSchema[] {
@@ -61,6 +61,7 @@ interface IMenuItemBase<V> {

    hidden$?: Observable<boolean>;
    disabled$?: Observable<boolean>;
+    params?: any;
    /** On observable value that should emit the value of the corresponding selection component. */
    value$?: Observable<V>;
 }
@@ -20,37 +20,42 @@ export enum MenuManagerPosition {
 }

 export enum RibbonPosition {
-    START = 'ribbon.start',
-    INSERT = 'ribbon.insert',
-    FORMULAS = 'ribbon.formulas',
-    DATA = 'ribbon.data',
-    VIEW = 'ribbon.view',
-    OTHERS = 'ribbon.others',
+    START = 'ribbon.start', // RibbonStartGroup
+    INSERT = 'ribbon.insert', // RibbonInsertGroup
+    FORMULAS = 'ribbon.formulas', // RibbonFormulasGroup
+    DATA = 'ribbon.data', // RibbonDataGroup
+    VIEW = 'ribbon.view', // RibbonViewGroup
+    OTHERS = 'ribbon.others', // RibbonOthersGroup
 }

 export enum RibbonStartGroup {
    HISTORY = 'ribbon.start.history',
    FORMAT = 'ribbon.start.format',
    LAYOUT = 'ribbon.start.layout',
-    FORMULAS_INSERT = 'ribbon.start.insert',
-    FORMULAS_VIEW = 'ribbon.start.view',
-    FILE = 'ribbon.start.file',
    OTHERS = 'ribbon.start.others',
 }

 export enum RibbonInsertGroup {
+    EDIT = 'ribbon.insert.edit',
+    MEDIA = 'ribbon.insert.media',
    OTHERS = 'ribbon.insert.others',
 }

 export enum RibbonFormulasGroup {
+    BASIC = 'ribbon.formulas.basic',
    OTHERS = 'ribbon.formulas.others',
 }

 export enum RibbonDataGroup {
+    FORMULAS = 'ribbon.data.formulas',
+    RULES = 'ribbon.data.rules',
+    ORGANIZATION = 'ribbon.data.organization',
    OTHERS = 'ribbon.data.others',
 }

 export enum RibbonViewGroup {
+    DISPLAY = 'ribbon.view.display',
+    VISIBILITY = 'ribbon.view.Visibility',
    OTHERS = 'ribbon.view.others',
 }

@@ -15,31 +15,44 @@
 */

 import type { ComponentType } from 'react';
+import type { Observable } from 'rxjs';
 import type { IMenuSchema } from '../../../services/menu/menu-manager.service';
 import { LocaleService } from '@univerjs/core';
-import { borderBottomClassName, clsx } from '@univerjs/design';
-import { MoreFunctionSingle } from '@univerjs/icons';
+import { borderBottomClassName, borderClassName, clsx, divideXClassName, Dropdown } from '@univerjs/design';
+import { DatabaseSingle, EyeSingle, FunctionSingle, HomeSingle, InsertSingle, MoreDownSingle, MoreFunctionSingle } from '@univerjs/icons';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { combineLatest } from 'rxjs';
 import { IMenuManagerService } from '../../../services/menu/menu-manager.service';
 import { MenuManagerPosition, RibbonPosition } from '../../../services/menu/types';
-import { useDependency } from '../../../utils/di';
+import { useDependency, useObservable } from '../../../utils/di';
 import { ComponentContainer } from '../ComponentContainer';
-import { ToolbarButton } from '../ribbon/Button/ToolbarButton';
+import { ToolbarButton } from './ToolbarButton';
 import { ToolbarItem } from './ToolbarItem';
-import { DropdownWrapper, TooltipWrapper } from './TooltipButtonWrapper';

 interface IRibbonProps {
    headerMenuComponents?: Set<ComponentType>;
    headerMenu?: boolean;
 }

+const iconMap = {
+    [RibbonPosition.START]: HomeSingle,
+    [RibbonPosition.INSERT]: InsertSingle,
+    [RibbonPosition.FORMULAS]: FunctionSingle,
+    [RibbonPosition.DATA]: DatabaseSingle,
+    [RibbonPosition.VIEW]: EyeSingle,
+    [RibbonPosition.OTHERS]: MoreFunctionSingle,
+};
+
 export function Ribbon(props: IRibbonProps) {
    const { headerMenuComponents, headerMenu = true } = props;

    const menuManagerService = useDependency(IMenuManagerService);
    const localeService = useDependency(LocaleService);

-    const fakeToolbarRef = useRef<HTMLDivElement>(null);
+    const menuChanged = useObservable(menuManagerService.menuChanged$);
+
+    const containerRef = useRef<HTMLDivElement>(null!);
+    const fakeToolbarRef = useRef<HTMLDivElement>(null!);
    const toolbarItemRefs = useRef<Record<string, {
        el: HTMLSpanElement;
        key: string;
@@ -49,42 +62,97 @@ export function Ribbon(props: IRibbonProps) {

    const [ribbon, setRibbon] = useState<IMenuSchema[]>([]);
    const [activatedTab, setActivatedTab] = useState<string>(RibbonPosition.START);
-    const [changingActiveTab, setChangingActiveTab] = useState(false);
+    const [groupSelectorVisible, setGroupSelectorVisible] = useState(false);
    const [collapsedIds, setCollapsedIds] = useState<string[]>([]);
-
-    const separatorClassName = `[&>*:last-child:after]:univer-absolute [&>*:last-child:after]:-univer-right-2
-    [&>*:last-child:after]:univer-top-1/2 [&>*:last-child:after]:univer-h-5 [&>*:last-child:after]:univer-translate-x-[3px]
-    [&>*:last-child:after]:univer-w-px [&>*:last-child:after]:-univer-translate-y-1/2
-    [&>*:last-child:after]:univer-bg-gray-200 [&>*:last-child:after]:univer-content-['']
-    [&>*:last-child]:univer-relative dark:[&>*:last-child:after]:univer-bg-gray-600`;
+    // const [changingActiveTab, setChangingActiveTab] = useState(false);

    const handleSelectTab = useCallback((group: IMenuSchema) => {
        toolbarItemRefs.current = {};
-        setChangingActiveTab(true);
-        const timer = setTimeout(() => {
-            setChangingActiveTab(false);
-        }, 300);
+        // setChangingActiveTab(true);
+        // const timer = setTimeout(() => {
+        //     setChangingActiveTab(false);
+        // }, 300);
        setActivatedTab(group.key);
+        setGroupSelectorVisible(false);

        return () => {
-            clearTimeout(timer);
+            // clearTimeout(timer);
        };
    }, []);

    // subscribe to menu changes
    useEffect(() => {
-        function getRibbon(): void {
-            const ribbon = menuManagerService.getMenuByPositionKey(MenuManagerPosition.RIBBON);
-            setRibbon(ribbon);
-        }
-        getRibbon();
+        const ribbon = menuManagerService.getMenuByPositionKey(MenuManagerPosition.RIBBON);

-        const subscription = menuManagerService.menuChanged$.subscribe(getRibbon);
+        const hiddenObservaleMap: Observable<boolean>[] = [];
+        const hiddenKeyMap: string[] = [];
+        for (const group of ribbon) {
+            if (group.children) {
+                for (const item of group.children) {
+                    if (item.children) {
+                        for (const child of item.children) {
+                            if (child.item?.hidden$) {
+                                hiddenObservaleMap.push(child.item.hidden$);
+                                hiddenKeyMap.push(`${group.key}/${item.key}/${child.key}`);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        const subscription = combineLatest(hiddenObservaleMap)
+            // .pipe(debounceTime(300))
+            .subscribe((hiddenMap) => {
+                const newRibbon: IMenuSchema[] = [];
+
+                const hiddenPathMap = hiddenMap.map((hidden, index) => {
+                    if (hidden) {
+                        return hiddenKeyMap[index];
+                    }
+                    return null;
+                }).filter((item) => !!item) as string[];
+
+                for (const group of ribbon) {
+                    const newGroup: IMenuSchema = { ...group, children: [] };
+
+                    if (group.children?.length) {
+                        for (const item of group.children) {
+                            const newItem: IMenuSchema = { ...item, children: [] };
+                            let shouldAddItem = true;
+
+                            if (item.children?.length) {
+                                for (const child of item.children) {
+                                    const path = `${group.key}/${item.key}/${child.key}`;
+
+                                    if (!hiddenPathMap.includes(path)) {
+                                        newItem.children?.push(child);
+                                    }
+                                }
+
+                                if (newItem.children?.every((child) => child.children?.length === 0)) {
+                                    shouldAddItem = false;
+                                }
+                            }
+
+                            if (shouldAddItem) {
+                                newGroup.children?.push(newItem);
+                            }
+                        }
+                    }
+
+                    if (newGroup.children?.length && newGroup.children.every((item) => item.children?.length)) {
+                        newRibbon.push(newGroup);
+                    }
+                }
+
+                setRibbon(newRibbon);
+            });

        return () => {
            subscription.unsubscribe();
        };
-    }, [menuManagerService]);
+    }, [menuChanged]);

    const activeGroup = useMemo(() => {
        const allGroups = ribbon.find((group) => group.key === activatedTab)?.children ?? [];
@@ -115,211 +183,230 @@ export function Ribbon(props: IRibbonProps) {
            visibleGroups,
            hiddenGroups,
        };
-    }, [ribbon, activatedTab, collapsedIds]);
+    }, [collapsedIds, ribbon, activatedTab]);

-    // resize observer
    useEffect(() => {
        const observer = new ResizeObserver((entries) => {
-            const toolbar = entries[0].target;
-            const toolbarWidth = toolbar.clientWidth;
-            const toolbarItems = Object.values(toolbarItemRefs.current);
-            const sortedToolbarItems = toolbarItems.sort((a, b) => {
-                if (a.groupOrder === b.groupOrder) {
-                    return a.order - b.order;
+            for (const entry of entries) {
+                const { width: avaliableWidth } = entry.contentRect;
+                const toolbarItems = Object.values(toolbarItemRefs.current);
+                const sortedToolbarItems = toolbarItems.sort((a, b) => {
+                    if (a.groupOrder === b.groupOrder) {
+                        return a.order - b.order;
+                    }
+                    return a.groupOrder - b.groupOrder;
+                });
+
+                const newCollapsedIds: string[] = [];
+                let totalWidth = 32;
+                const allGroups = ribbon.find((group) => group.key === activatedTab)?.children ?? [];
+
+                const gapWidth = (allGroups.length - 1) * 8;
+                totalWidth += gapWidth;
+
+                for (const { el, key } of sortedToolbarItems) {
+                    if (!el) continue;
+
+                    totalWidth += el?.getBoundingClientRect().width + 8;
+
+                    if (totalWidth > avaliableWidth - gapWidth) {
+                        newCollapsedIds.push(key);
+                    }
                }
-                return a.groupOrder - b.groupOrder;
-            });

-            const newCollapsedIds: string[] = [];
-            let totalWidth = 0;
-
-            const allGroups = ribbon.find((group) => group.key === activatedTab)?.children ?? [];
-
-            const gapWidth = (allGroups.length - 1) * 8;
-            totalWidth += gapWidth;
-
-            for (const { el, key } of sortedToolbarItems) {
-                if (!el) continue;
-
-                totalWidth += el?.getBoundingClientRect().width + 8;
-
-                if (totalWidth > toolbarWidth - 32 - gapWidth) {
-                    newCollapsedIds.push(key);
-                }
-            }
-
-            if (JSON.stringify(newCollapsedIds) !== JSON.stringify(collapsedIds)) {
                setCollapsedIds(newCollapsedIds);
            }
        });

-        if (fakeToolbarRef.current) {
-            observer.observe(fakeToolbarRef.current);
-        }
+        observer.observe(containerRef.current);

        return () => {
            observer.disconnect();
        };
-    }, [ribbon, activatedTab, collapsedIds]);
-
-    const fakeToolbarContent = useMemo(() => (
-        activeGroup.allGroups.map((groupItem) => (
-            <Fragment key={groupItem.key}>
-                <div className={clsx('univer-flex univer-flex-nowrap univer-gap-2 univer-px-2', separatorClassName)}>
-                    {groupItem.children?.map((child) => (
-                        child.item && (
-                            <ToolbarItem
-                                key={child.key}
-                                {...child.item}
-                                ref={(ref) => {
-                                    if (ref?.el) {
-                                        toolbarItemRefs.current[child.key] = {
-                                            el: ref.el,
-                                            key: child.key,
-                                            groupOrder: groupItem.order,
-                                            order: child.order,
-                                        };
-                                    }
-                                }}
-                            />
-                        )
-                    ))}
-                </div>
-            </Fragment>
-        ))
-    ), [activeGroup.allGroups]);
+    }, [ribbon, activatedTab]);

    return (
        <>
-            {/* header */}
-            {headerMenu && (
-                <header className="univer-relative univer-select-none">
+            {headerMenu && (headerMenuComponents && headerMenuComponents.size > 0) && (
+                <header className={clsx('univer-relative univer-h-11 univer-select-none', borderBottomClassName)}>
                    <div
-                        className={clsx(`
-                          univer-flex univer-h-0 univer-items-center univer-justify-center univer-gap-2
-                          univer-overflow-hidden univer-transition-all univer-animate-in
-                        `, {
-                            'univer-h-8 univer-slide-in-from-top-full': ribbon.length > 1 || (headerMenuComponents && headerMenuComponents.size > 0),
-                        })}
+                        className={`
+                          univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-items-center
+                          univer-gap-2
+                          [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded
+                          [&>*]:univer-px-1 [&>*]:univer-transition-colors
+                          hover:[&>*]:univer-bg-gray-100
+                        `}
                    >
-                        {ribbon.length > 1 && ribbon.map((group) => (
-                            <a
-                                key={group.key}
-                                className={clsx(`
-                                  univer-box-border univer-cursor-pointer univer-rounded univer-px-2 univer-py-0.5
-                                  univer-text-sm univer-text-gray-700 univer-transition-colors
-                                  dark:univer-text-white dark:hover:univer-bg-gray-700
-                                  hover:univer-bg-gray-100
-                                `, {
-                                    'univer-bg-primary-500 univer-text-white hover:!univer-bg-primary-500': group.key === activatedTab,
-                                })}
-                                onClick={() => handleSelectTab(group)}
-                            >
-                                {localeService.t(group.key)}
-                            </a>
-                        ))}
+                        <ComponentContainer components={headerMenuComponents} />
                    </div>
-
-                    {(headerMenuComponents && headerMenuComponents.size > 0) && (
-                        <div
-                            className={`
-                              univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-items-center
-                              univer-gap-2
-                              [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded
-                              [&>*]:univer-px-1 [&>*]:univer-transition-colors
-                              hover:[&>*]:univer-bg-gray-100
-                            `}
-                        >
-                            <ComponentContainer components={headerMenuComponents} />
-                        </div>
-                    )}
                </header>
            )}

-            <section
-                role="toolbar"
+            <div
                className={clsx(`
-                  univer-relative univer-box-border univer-flex univer-h-8 univer-select-none univer-items-center
-                  univer-bg-white univer-text-base univer-text-gray-800 univer-transition-opacity
-                  dark:univer-bg-gray-900
-                `, borderBottomClassName)}
+                  univer-box-border univer-grid univer-h-10 univer-grid-flow-col univer-items-center univer-px-3
+                `, 'univer-grid-cols-[auto,1fr]', borderBottomClassName)}
            >
-                <div
-                    className={clsx(`
-                      univer-mx-auto univer-box-border univer-flex univer-h-full univer-flex-1 univer-items-center
-                      univer-justify-center univer-gap-1 univer-overflow-hidden univer-bg-gray-50 univer-px-4
-                      dark:univer-bg-gray-900
-                    `, {
-                        'univer-duration-300 univer-animate-in univer-fade-in': changingActiveTab,
-                    })}
-                >
+                {/* <search className="univer-mr-1 univer-w-20">
+                    <Input />
+                </search> */}
+
+                {ribbon.length > 1 && (
+                    <Dropdown
+                        className="univer-max-w-96 !univer-rounded-xl univer-animate-in univer-fade-in"
+                        align="start"
+                        open={groupSelectorVisible}
+                        overlay={(
+                            <div className="univer-grid univer-gap-1 univer-px-2 univer-py-1">
+                                {ribbon.map((group) => {
+                                    const Icon = iconMap[group.key as RibbonPosition];
+
+                                    return (
+                                        <a
+                                            key={group.key}
+                                            className={`
+                                              univer-box-border univer-flex univer-cursor-pointer univer-items-center
+                                              univer-gap-2.5 univer-rounded-lg univer-px-2 univer-py-1.5
+                                              dark:hover:univer-bg-gray-700
+                                              hover:univer-bg-gray-100
+                                            `}
+                                            onClick={() => handleSelectTab(group)}
+                                        >
+                                            <span
+                                                className={clsx(`
+                                                  univer-box-border univer-flex univer-size-9 univer-flex-shrink-0
+                                                  univer-items-center univer-justify-center univer-rounded-lg
+                                                `, borderClassName)}
+                                            >
+                                                <Icon
+                                                    className={`
+                                                      univer-text-gray-500
+                                                      dark:univer-text-gray-300
+                                                    `}
+                                                />
+                                            </span>
+                                            <span className="univer-flex univer-flex-col">
+                                                <strong
+                                                    className={`
+                                                      univer-text-sm univer-font-semibold univer-text-gray-800
+                                                      dark:univer-text-gray-200
+                                                    `}
+                                                >
+                                                    {localeService.t(group.key)}
+                                                </strong>
+                                                <span className="univer-text-xs univer-text-gray-400">
+                                                    {localeService.t(`${group.key}Desc`)}
+                                                </span>
+                                            </span>
+                                        </a>
+                                    );
+                                })}
+                            </div>
+                        )}
+                        onOpenChange={setGroupSelectorVisible}
+                    >
+                        <a
+                            className={`
+                              univer-mr-2 univer-flex univer-h-7 univer-cursor-pointer univer-items-center
+                              univer-gap-1.5 univer-whitespace-nowrap !univer-rounded-full univer-bg-gray-700
+                              univer-pl-3 univer-pr-2 univer-text-sm univer-text-white
+                              dark:univer-bg-gray-200 dark:univer-text-gray-800
+                            `}
+                        >
+                            {localeService.t(activatedTab)}
+                            <MoreDownSingle
+                                className={`
+                                  univer-text-gray-200
+                                  dark:univer-text-gray-500
+                                `}
+                            />
+                        </a>
+                    </Dropdown>
+                )}
+
+                <div ref={containerRef} className={clsx('univer-flex univer-overflow-hidden', divideXClassName)}>
                    {activeGroup.visibleGroups.map((groupItem) => (groupItem.children?.length || groupItem.item) && (
                        <Fragment key={groupItem.key}>
-                            <div className={clsx('univer-flex univer-flex-nowrap univer-gap-2 univer-px-2', separatorClassName)}>
-                                {groupItem.children
-                                    ? groupItem.children?.map((child) => (
-                                        child.item && <ToolbarItem key={child.key} {...child.item} />
-                                    ))
-                                    : (
-                                        groupItem.item && <ToolbarItem key={groupItem.key} {...groupItem.item} />
-                                    )}
+                            <div className="univer-grid univer-grid-flow-col univer-gap-2 univer-px-2">
+                                {groupItem.children && groupItem.children?.map((child) => (
+                                    child.item && <ToolbarItem key={child.key} {...child.item} />
+                                ))}
                            </div>
                        </Fragment>
                    ))}

-                    {/* overflow menu items */}
                    {collapsedIds.length > 0 && (
-                        <div className="univer-px-2">
-                            <TooltipWrapper title={localeService.t('ribbon.more')} placement="bottom">
-                                <DropdownWrapper
-                                    align="end"
-                                    overlay={(
-                                        <div
-                                            className={`
-                                              univer-box-border univer-grid
-                                              univer-max-w-[var(--radix-popper-available-width)] univer-gap-2 univer-p-2
-                                            `}
-                                        >
-                                            {activeGroup.hiddenGroups.map((groupItem) => (
-                                                <div
-                                                    key={groupItem.key}
-                                                    className="univer-flex univer-items-center univer-gap-2"
-                                                >
-                                                    <div className="univer-flex univer-flex-wrap univer-gap-2">
-                                                        {groupItem.children
-                                                            ? groupItem.children?.map((child) => (
-                                                                child.item && <ToolbarItem key={child.key} {...child.item} />
-                                                            ))
-                                                            : (
-                                                                groupItem.item && <ToolbarItem key={groupItem.key} {...groupItem.item} />
-                                                            )}
-                                                    </div>
+                        <div className="univer-pl-2">
+                            <Dropdown
+                                overlay={(
+                                    <div
+                                        className={`
+                                          univer-box-border univer-grid
+                                          univer-max-w-[var(--radix-popper-available-width)] univer-gap-2 univer-p-2
+                                        `}
+                                    >
+                                        {activeGroup.hiddenGroups.map((groupItem) => (
+                                            <div
+                                                key={groupItem.key}
+                                                className="univer-flex univer-items-center univer-gap-2"
+                                            >
+                                                <div className="univer-flex univer-flex-wrap univer-gap-2">
+                                                    {groupItem.children
+                                                        ? groupItem.children?.map((child) => (
+                                                            child.item && <ToolbarItem key={child.key} {...child.item} />
+                                                        ))
+                                                        : (
+                                                            groupItem.item && <ToolbarItem key={groupItem.key} {...groupItem.item} />
+                                                        )}
                                                </div>
-                                            ))}
-                                        </div>
-                                    )}
-                                >
-                                    <ToolbarButton>
-                                        <MoreFunctionSingle />
-                                    </ToolbarButton>
-                                </DropdownWrapper>
-                            </TooltipWrapper>
+                                            </div>
+                                        ))}
+                                    </div>
+                                )}
+                            >
+                                <ToolbarButton>
+                                    <MoreFunctionSingle />
+                                </ToolbarButton>
+                            </Dropdown>
                        </div>
                    )}
                </div>
-            </section>
+            </div>

-            {/* fake toolbar for calculating overflow width */}
+            {/* fake toolbar */}
            <div
-                aria-hidden
                ref={fakeToolbarRef}
-                className={`
-                  univer-invisible univer-absolute univer-left-0 univer-right-0 univer-top-[-99999px] univer-mx-auto
-                  univer-box-border univer-flex univer-h-full univer-flex-1 univer-items-center univer-justify-center
-                  univer-gap-1 univer-overflow-hidden univer-px-4
-                `}
+                aria-hidden
+                className={clsx(`
+                  univer-invisible univer-absolute -univer-left-[99999] -univer-top-[99999] univer-box-border
+                  univer-flex univer-h-10 univer-min-w-min univer-items-center univer-px-3 univer-opacity-0
+                `, borderBottomClassName)}
            >
-                {fakeToolbarContent}
+                {activeGroup.allGroups.map((groupItem) => (groupItem.children?.length || groupItem.item) && (
+                    <Fragment key={groupItem.key}>
+                        <div className="univer-grid univer-grid-flow-col univer-gap-2 univer-px-2">
+                            {groupItem.children && groupItem.children?.map((child) => (
+                                child.item && (
+                                    <ToolbarItem
+                                        key={child.key}
+                                        {...child.item}
+                                        ref={(ref) => {
+                                            if (ref?.el) {
+                                                toolbarItemRefs.current[child.key] = {
+                                                    el: ref.el,
+                                                    key: child.key,
+                                                    groupOrder: groupItem.order,
+                                                    order: child.order,
+                                                };
+                                            }
+                                        }}
+                                    />
+                                )
+                            ))}
+                        </div>
+                    </Fragment>
+                ))}
            </div>
        </>
    );
@@ -87,14 +87,14 @@ export function ToolbarButton(props: IBaseToolbarButtonProps) {
        <button
            type="button"
            className={clsx(`
-              univer-flex univer-h-6 univer-min-w-6 univer-cursor-pointer univer-items-center univer-justify-center
-              univer-rounded univer-border-none univer-bg-transparent univer-p-0 univer-text-base univer-text-gray-900
-              univer-outline-none univer-transition-colors univer-animate-in univer-fade-in
+              univer-box-border univer-flex univer-h-6 univer-min-w-6 univer-cursor-pointer univer-items-center
+              univer-justify-center univer-rounded univer-border-none univer-bg-transparent univer-p-0
+              univer-text-gray-900 univer-outline-none univer-transition-colors univer-animate-in univer-fade-in
              dark:univer-text-white dark:hover:univer-bg-gray-700 dark:disabled:univer-text-gray-600
              disabled:univer-cursor-not-allowed disabled:univer-text-gray-300 disabled:hover:univer-bg-transparent
              hover:univer-bg-gray-100
            `, {
-                'univer-p-4': noIcon,
+                'univer-px-2': noIcon,
                '!univer-bg-gray-200 dark:!univer-bg-gray-500': active,
            })}
            style={style}
@@ -26,8 +26,8 @@ import { CustomLabel } from '../../../components/custom-label/CustomLabel';
 import { ILayoutService } from '../../../services/layout/layout.service';
 import { MenuItemType } from '../../../services/menu/menu';
 import { useDependency, useObservable } from '../../../utils/di';
-import { ToolbarButton } from './Button/ToolbarButton';
 import { useToolbarItemStatus } from './hook';
+import { ToolbarButton } from './ToolbarButton';
 import { DropdownMenuWrapper, TooltipWrapper } from './TooltipButtonWrapper';

 export const ToolbarItem = forwardRef<ITooltipWrapperRef, IDisplayMenuItem<IMenuItem>>((props, ref) => {
@@ -43,7 +43,7 @@ export const ToolbarItem = forwardRef<ITooltipWrapperRef, IDisplayMenuItem<IMenu
        commandService.executeCommand(commandId, params);
    };

-    const { tooltip, shortcut, icon, title, label, id, commandId, type, slot } = props;
+    const { tooltip, shortcut, icon, title, label, id, commandId, type, slot, params } = props;

    const tooltipTitle = localeService.t(tooltip ?? '') + (shortcut ? ` (${shortcut})` : '');

@@ -104,6 +104,8 @@ export const ToolbarItem = forwardRef<ITooltipWrapperRef, IDisplayMenuItem<IMenu
        if (menuType === MenuItemType.BUTTON_SELECTOR) {
            return (
                <div
+                    data-u-command={id}
+                    data-disabled={disabled}
                    className={clsx(`
                      univer-group univer-relative univer-flex univer-h-6 univer-cursor-pointer univer-items-center
                      univer-rounded univer-pr-5 univer-text-sm univer-transition-colors univer-animate-in
@@ -114,7 +116,6 @@ export const ToolbarItem = forwardRef<ITooltipWrapperRef, IDisplayMenuItem<IMenu
                        'univer-text-gray-900 dark:univer-text-white': !disabled,
                        'univer-pointer-events-none univer-cursor-not-allowed univer-text-gray-300 dark:univer-text-gray-600': disabled,
                    })}
-                    data-disabled={disabled}
                >
                    <div
                        className={clsx(`
@@ -175,6 +176,7 @@ export const ToolbarItem = forwardRef<ITooltipWrapperRef, IDisplayMenuItem<IMenu
                    onOptionSelect={handleSelect}
                >
                    <div
+                        data-u-command={id}
                        className={clsx(`
                          univer-relative univer-flex univer-h-6 univer-cursor-pointer univer-items-center univer-gap-2
                          univer-whitespace-nowrap univer-rounded univer-px-1 univer-transition-colors univer-animate-in
@@ -213,10 +215,12 @@ export const ToolbarItem = forwardRef<ITooltipWrapperRef, IDisplayMenuItem<IMenu

        return (
            <ToolbarButton
+                data-u-command={id}
+                className="univer-text-sm"
                noIcon={!icon}
                active={activated}
                disabled={disabled}
-                onClick={() => executeCommand(props.commandId ?? props.id)}
+                onClick={() => executeCommand(props.commandId ?? props.id, value ?? params)}
                onDoubleClick={() => props.subId && executeCommand(props.subId)}
            >
                {isCustomComponent
@@ -22,7 +22,7 @@ import { UniscriptMenuItemFactory } from './menu';
 export const menuSchema: MenuSchemaType = {
    [RibbonStartGroup.OTHERS]: {
        [ToggleScriptPanelOperation.id]: {
-            order: 5,
+            order: 2,
            menuItemFactory: UniscriptMenuItemFactory,
        },
    },