diff --git a/src/controller/activityBar.ts b/src/controller/activityBar.ts
index b7e538d16..7241a9957 100644
--- a/src/controller/activityBar.ts
+++ b/src/controller/activityBar.ts
@@ -85,7 +85,6 @@ export class ActivityBarController
         );
     };
 
-    // TODO: Menu 按钮是否提取至 activityBar 外
     public readonly onContextMenuClick = (
         e: React.MouseEvent,
         item: IMenuItemProps | undefined
@@ -95,17 +94,13 @@ export class ActivityBarController
             // activityBar contextMenu
             case CONTEXT_MENU_MENU: {
                 this.menuBarController.updateMenuBar!();
-                this.activityBarService.toggleContextMenuCheckStatus(
-                    contextMenuId
-                );
+                this.activityBarService.toggleContextMenuChecked(contextMenuId);
                 break;
             }
             case CONTEXT_MENU_EXPLORER:
             case CONTEXT_MENU_SEARCH: {
                 this.activityBarService.toggleBar(contextMenuId);
-                this.activityBarService.toggleContextMenuCheckStatus(
-                    contextMenuId
-                );
+                this.activityBarService.toggleContextMenuChecked(contextMenuId);
                 break;
             }
             case CONTEXT_MENU_HIDE: {
diff --git a/src/controller/explorer/explorer.tsx b/src/controller/explorer/explorer.tsx
index 5cdf15e78..de84287e2 100644
--- a/src/controller/explorer/explorer.tsx
+++ b/src/controller/explorer/explorer.tsx
@@ -82,7 +82,7 @@ export class ExplorerController
             },
         };
 
-        this.activityBarService.addBar(builtInExplorerActivityItem(), true);
+        this.activityBarService.add(builtInExplorerActivityItem(), true);
         this.sidebarService.add(explorePane, true);
         // add folder panel
         this.explorerService.addPanel({
diff --git a/src/controller/search/search.tsx b/src/controller/search/search.tsx
index ff0ab4463..85962f200 100644
--- a/src/controller/search/search.tsx
+++ b/src/controller/search/search.tsx
@@ -79,7 +79,7 @@ export class SearchController extends Controller implements ISearchController {
         });
 
         this.sidebarService.add(searchSidePane);
-        this.activityBarService.addBar(builtInSearchActivityItem());
+        this.activityBarService.add(builtInSearchActivityItem());
     }
 
     public validateValue = (
diff --git a/src/extensions/activityBar/index.ts b/src/extensions/activityBar/index.ts
index b0f1ab57b..c22800f66 100644
--- a/src/extensions/activityBar/index.ts
+++ b/src/extensions/activityBar/index.ts
@@ -7,7 +7,7 @@ import { CommandQuickSideBarViewAction } from 'mo/monaco/quickToggleSideBarActio
 export const ExtendsActivityBar: IExtension = {
     activate(extensionCtx: IExtensionService) {
         const { data = [], contextMenu = [] } = builtInActivityBar();
-        molecule.activityBar.addBar(data);
+        molecule.activityBar.add(data);
         molecule.activityBar.addContextMenu(contextMenu);
 
         molecule.activityBar.onChange((pre, cur) => {
diff --git a/src/services/workbench/activityBarService.ts b/src/services/workbench/activityBarService.ts
index 3c4ee14b1..713838c59 100644
--- a/src/services/workbench/activityBarService.ts
+++ b/src/services/workbench/activityBarService.ts
@@ -13,23 +13,44 @@ import logger from 'mo/common/logger';
 import { ISidebarService, SidebarService } from './sidebarService';
 
 export interface IActivityBarService extends Component<IActivityBar> {
+    /**
+     * Reset the activityBar state data,
+     * if you want to whole customize the activityBar, you can reset it first,
+     * and then using the activityBar.add() method to fill the data you need.
+     */
     reset(): void;
     /**
-     *
+     * Add IActivityBarItem data
      * @param isActive If provide, Activity Bar will set data active automatically. Only works in one data
      */
-    addBar(
-        data: IActivityBarItem | IActivityBarItem[],
-        isActive?: boolean
-    ): void;
+    add(data: IActivityBarItem | IActivityBarItem[], isActive?: boolean): void;
     /**
-     * set active bar
+     * Set active bar
      */
     setActive(id?: string): void;
+    /**
+     * Remove the specific activity bar by id
+     * @param id
+     */
     remove(id: string): void;
+    /**
+     * Toggle the specific activity bar between show or hide
+     * @param id activity bar id
+     */
     toggleBar(id: string): void;
-    toggleContextMenuCheckStatus(id: string): void;
-    addContextMenu(contextMenu: IMenuItemProps | IMenuItemProps[]): void;
+    /**
+     * Toggle the contextMenu between checked or unchecked
+     * @param id contextmenu id
+     */
+    toggleContextMenuChecked(id: string): void;
+    /**
+     * Add new contextMenus for the activityBar
+     */
+    addContextMenu(data: IMenuItemProps | IMenuItemProps[]): void;
+    /**
+     * Remove the specific contextMenu item by id
+     * @param id contextmenu id
+     */
     removeContextMenu(id: string): void;
     /**
      * Add click event listener
@@ -69,10 +90,7 @@ export class ActivityBarService
         });
     }
 
-    public addBar(
-        data: IActivityBarItem | IActivityBarItem[],
-        isActive = false
-    ) {
+    public add(data: IActivityBarItem | IActivityBarItem[], isActive = false) {
         let next = [...this.state.data!];
         if (Array.isArray(data)) {
             next = next?.concat(data);
@@ -119,7 +137,7 @@ export class ActivityBarService
         }
     }
 
-    public toggleContextMenuCheckStatus(id: string) {
+    public toggleContextMenuChecked(id: string) {
         const { contextMenu = [] } = this.state;
         const newActions = contextMenu.concat();
         const target = newActions.find(searchById(id));
@@ -129,7 +147,10 @@ export class ActivityBarService
                 contextMenu: newActions,
             });
         } else {
-            logger.error('toggle context menu failed, please check your id');
+            throw new Error(
+                'Toggle the contextmenu failed, can not found any menu by id' +
+                    id
+            );
         }
     }
 
diff --git a/stories/extensions/data-sync/index.tsx b/stories/extensions/data-sync/index.tsx
index 9617a2c56..bb1e22ef0 100644
--- a/stories/extensions/data-sync/index.tsx
+++ b/stories/extensions/data-sync/index.tsx
@@ -9,6 +9,6 @@ export const ExtendDataSync: IExtension = {
             name: '数据同步',
         };
         console.log('extend a new activity bar item:', newItem);
-        molecule.activityBar.addBar(newItem);
+        molecule.activityBar.add(newItem);
     },
 };
diff --git a/stories/extensions/test/index.tsx b/stories/extensions/test/index.tsx
index 20c7d7545..a2cb1ebb4 100644
--- a/stories/extensions/test/index.tsx
+++ b/stories/extensions/test/index.tsx
@@ -29,7 +29,7 @@ export const ExtendTestPane: IExtension = {
             name: '测试',
         };
 
-        molecule.activityBar.addBar(newItem);
+        molecule.activityBar.add(newItem);
         molecule.sidebar.add(testSidePane);
 
         molecule.editor.setEntry(<Entry />);
diff --git a/stories/extensions/test/testPane.tsx b/stories/extensions/test/testPane.tsx
index 5ce5cb0f3..9433f0c8d 100644
--- a/stories/extensions/test/testPane.tsx
+++ b/stories/extensions/test/testPane.tsx
@@ -72,7 +72,7 @@ export default class TestPane extends React.Component {
     render() {
         const addABar = function () {
             const id = Math.random() * 10 + 1;
-            molecule.activityBar.addBar({
+            molecule.activityBar.add({
                 id: id + '',
                 name: 'folder' + id,
                 iconName: 'codicon-edit',