diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 695b92e59..193f618fb 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -16,6 +16,8 @@ jobs:
                   node-version: 14.x
                   cache: yarn
                   cache-dependency-path: website/yarn.lock
+            - name: Install dependencies
+              run: yarn
             - name: Build website
               working-directory: website
               run: |
diff --git a/.github/workflows/test-deploy.yml b/.github/workflows/test-deploy.yml
index f0ef8b518..63fe583d2 100644
--- a/.github/workflows/test-deploy.yml
+++ b/.github/workflows/test-deploy.yml
@@ -16,6 +16,8 @@ jobs:
                   node-version: 14.x
                   cache: yarn
                   cache-dependency-path: website/yarn.lock
+            - name: Install dependencies
+              run: yarn
             - name: Test build
               working-directory: website
               run: |
diff --git a/website/docs/advanced/customize-workbench.md b/website/docs/advanced/customize-workbench.md
index 1ccf03d43..5efb16788 100644
--- a/website/docs/advanced/customize-workbench.md
+++ b/website/docs/advanced/customize-workbench.md
@@ -26,46 +26,51 @@ At present, the top fixed layout for the **MenuBar** is integrated in Molecule.
 First, open the [source code](https://github.com/DTStack/molecule) of Molecule, and find the `src/workbench` directory, then copy the `workbench.tsx` file to the `views` or other directories of your project, and rename it to `myWorkbench.tsx`:
 
 ```tsx
-<div className={workbenchFinalClassName}>
-    <Display visible={isMenuBarHorizontal}>
-        <MenuBarView mode={MenuBarMode.horizontal} />
-    </Display>
-    <div className={mainBenchClassName}>
-        <div className={compositeBarClassName}>
-            <Display visible={isMenuBarVertical}>
-                <MenuBarView mode={MenuBarMode.vertical} />
-            </Display>
-            <Display
-                visible={!activityBar.hidden}
-                className={displayActivityBarClassName}
-            >
-                <ActivityBarView />
-            </Display>
-        </div>
-        <SplitPane
-            split="vertical"
-            primary="first"
-            allowResize={true}
-            onChange={onPaneSizeChange as any}
-        >
-            <Pane
-                minSize="170px"
-                initialSize={splitPanePos[0]}
-                maxSize="80%"
-                className={sidebar.hidden ? 'hidden' : ''}
-            >
-                <SidebarView />
-            </Pane>
+<div id={ID_APP} className={appClassName} tabIndex={0}>
+    <div className={workbenchFinalClassName}>
+        <Display visible={isMenuBarHorizontal}>
+            <MenuBarView mode={MenuBarMode.horizontal} />
+        </Display>
+        <div className={mainBenchClassName}>
+            <div className={compositeBarClassName}>
+                <Display visible={isMenuBarVertical}>
+                    <MenuBarView mode={MenuBarMode.vertical} />
+                </Display>
+                <Display
+                    visible={!activityBar.hidden}
+                    className={displayActivityBarClassName}
+                >
+                    <ActivityBarView />
+                </Display>
+            </div>
             <SplitPane
-                primary="first"
-                split="horizontal"
-                allowResize={true}
-                onChange={onHorizontalPaneSizeChange as any}
+                sizes={sidebar.hidden ? [0, '100%'] : splitPanePos}
+                split="vertical"
+                allowResize={[false]}
+                onChange={handleSideBarChanged}
+                onResizeStrategy={() => ['keep', 'pave']}
             >
-                {getContent(!!panel.panelMaximized, !!panel.hidden)}
+                <Pane minSize={170} maxSize="80%">
+                    <SidebarView />
+                </Pane>
+                <SplitPane
+                    sizes={getSizes()}
+                    allowResize={[false]}
+                    split="horizontal"
+                    onChange={handleEditorChanged}
+                    onResizeStrategy={() => ['pave', 'keep']}
+                >
+                    <Pane minSize="10%" maxSize="80%">
+                        <EditorView />
+                    </Pane>
+                    <PanelView />
+                </SplitPane>
             </SplitPane>
-        </SplitPane>
+        </div>
     </div>
+    <Display visible={!statusBar.hidden}>
+        <StatusBarView />
+    </Display>
 </div>
 ```
 
@@ -74,44 +79,58 @@ In the code, the `MenuBarView` in `horizontal` mode and `vertical` mode are plac
 The specific transformation is as follows:
 
 ```tsx title="/src/views/myWorkbench.tsx"
-<div className={workbenchClassName}>
-    {!menuBar.hidden && <MyMenuBarView />}
-    <div className={mainBenchClassName}>
-        <div className={compositeBarClassName}>
-            {!activityBar.hidden && <ActivityBarView />}
-        </div>
-        <SplitPane
-            split="vertical"
-            primary="first"
-            allowResize={true}
-            onChange={onPaneSizeChange as any}
-        >
-            <Pane
-                minSize="170px"
-                initialSize={splitPanePos[0]}
-                maxSize="80%"
-                className={sidebar.hidden && 'hidden'}
-            >
-                <SidebarView />
-            </Pane>
+<div
+    id={ID_APP}
+    className={classNames(appClassName, 'myMolecule')}
+    tabIndex={0}
+>
+    <div className={workbenchFinalClassName}>
+        <Display visible={isMenuBarHorizontal}>
+            <MenuBarView mode={MenuBarMode.horizontal} />
+        </Display>
+        <div className={mainBenchClassName}>
+            <div className={compositeBarClassName}>
+                <Display visible={isMenuBarVertical}>
+                    <MenuBarView mode={MenuBarMode.vertical} />
+                </Display>
+                <Display
+                    visible={!activityBar.hidden}
+                    className={displayActivityBarClassName}
+                >
+                    <ActivityBarView />
+                </Display>
+            </div>
             <SplitPane
-                primary="first"
-                split="horizontal"
-                allowResize={true}
-                onChange={onHorizontalPaneSizeChange as any}
+                sizes={sidebar.hidden ? [0, '100%'] : splitPanePos}
+                split="vertical"
+                allowResize={[false, true]}
+                onChange={handleSideBarChanged}
+                onResizeStrategy={() => ['keep', 'pave']}
             >
-                {getContent(!!panel.panelMaximized, !!panel.hidden)}
+                <Pane minSize={170} maxSize="80%">
+                    <SidebarView />
+                </Pane>
+                <SplitPane
+                    sizes={getSizes()}
+                    allowResize={[false, true]}
+                    split="horizontal"
+                    onChange={handleEditorChanged}
+                    onResizeStrategy={() => ['pave', 'keep']}
+                >
+                    <Pane minSize="10%" maxSize="80%">
+                        <EditorView />
+                    </Pane>
+                    <PanelView />
+                </SplitPane>
             </SplitPane>
-            <Pane
-                minSize="40px"
-                initialSize="240px"
-                maxSize="40%"
-                className={'rightSidebar'}
-            >
+            <div style={{ width: 300 }}>
                 <Sidebar current={MySidePane.id} panes={[MySidePane]} />
-            </Pane>
-        </SplitPane>
+            </div>
+        </div>
     </div>
+    <Display visible={!statusBar.hidden}>
+        <StatusBarView />
+    </Display>
 </div>
 ```
 
@@ -119,35 +138,11 @@ The specific transformation is as follows:
 The above code is only part of the `myWorkbench.tsx` file, the complete code can refer to [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/views/myWorkbench.tsx).
 :::
 
-We removed the MenuBar in the `vertical` mode, and directly rendered the custom `MyMenuBarView` component based on the `menuBar.hidden`. A new panel with a `className` of `rightSidebar` is added to the `SplitPane` component, which uses a built-in `Sidebar` component, and a custom `MySidePane` component is used in this `Sidebar` component.
-
-### Custom MenuBar
-
-In the picture above, the MenuBar contains a custom **Logo** element, and the MenuBar uses a **Horizontal** layout. Like Workbench, we copy the default `menuBar.tsx` component from `src/workbench/menuBar` and rename it to `myMenuBar.tsx`:
-
-```tsx title="/src/views/myMenuBar/index.tsx"
-<div className="myMenuBar">
-    <Logo alt="logo" src="logo@1x.png" />
-    <Menu
-        role="menu"
-        mode={MenuMode.Horizontal}
-        trigger="click"
-        onClick={handleClick}
-        style={{ width: '100%' }}
-        data={addKeybindingForData(data)}
-    />
-</div>
-```
-
-The `Logo` component is added to the code, and the original [DropDown](../api/namespaces/molecule.component#dropdown) is replaced with [Menu](../api/namespaces/molecule.component#menu) Components.
-
-:::tip
-The custom **Logo** and **Horizontal** layout functions of the above MenuBar are currently built-in. For details, please refer to [MenuBar](../guides/extend-workbench#menubar)
-:::
+We added a `RightSidebar`, which uses a built-in `Sidebar` component, and a custom `MySidePane` component is used in this `Sidebar` component.
 
 ### Custom RightSideBar
 
-Slightly different from `MenuBar`, because the built-in [Sidebar](../api/namespaces/molecule#sidebar-1) component is reused, here we only need to pass in [ISidebarPane](../api/interfaces/molecule.model.ISidebarPane) type components:
+We reuse the built-in [Sidebar](../api/namespaces/molecule#sidebar-1) component, we only need to pass in the component of type [ISidebarPane](../api/interfaces/molecule.model.ISidebarPane):
 
 ```tsx title="/src/views/mySidePane.tsx"
 import React from 'react';
diff --git a/website/docs/guides/extend-keybinding.md b/website/docs/guides/extend-keybinding.md
index 214282b92..e7af301b6 100644
--- a/website/docs/guides/extend-keybinding.md
+++ b/website/docs/guides/extend-keybinding.md
@@ -16,11 +16,9 @@ All code demos in this part are based on the [molecule-demo](https://github.com/
 First, we define the `KeybindingAction` object based on the `Action2` abstract class:
 
 ```ts title="src/extensions/action/keybindingAction.ts"
-import {
-    Action2,
-    KeybindingWeight,
-} from '@dtinsight/molecule/esm/monaco/common';
+import { KeybindingWeight } from '@dtinsight/molecule/esm/monaco/common';
 import { KeyCode, KeyMod } from '@dtinsight/molecule/esm/monaco';
+import { Action2 } from '@dtinsight/molecule/esm/monaco/action';
 //@ts-ignore
 import { KeyChord } from 'monaco-editor/esm/vs/base/common/keyCodes';
 
diff --git a/website/docs/guides/extend-quick-access.md b/website/docs/guides/extend-quick-access.md
index 9cd985f74..d2daa18d7 100644
--- a/website/docs/guides/extend-quick-access.md
+++ b/website/docs/guides/extend-quick-access.md
@@ -26,11 +26,9 @@ The **"Quick Access Search"** panel in the picture is opened by the shortcut key
 First, let's create a new `quickOpenAction.ts` file, which defines the `QuickOpenAction` Action object:
 
 ```ts title="/src/extensions/theFirstExtension/quickOpenAction.ts"
-import {
-    Action2,
-    KeybindingWeight,
-} from '@dtinsight/molecule/esm/monaco/common';
+import { KeybindingWeight } from '@dtinsight/molecule/esm/monaco/common';
 import { KeyCode, KeyMod } from '@dtinsight/molecule/esm/monaco';
+import { Action2 } from '@dtinsight/molecule/esm/monaco/action';
 import {
     IQuickInputService,
     //@ts-ignore
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/advanced/customize-workbench.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/advanced/customize-workbench.md
index 685e2e3c9..3c9047392 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/advanced/customize-workbench.md
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/advanced/customize-workbench.md
@@ -26,46 +26,51 @@ Molecule 默认的是 **VSCode 布局**的 Workbench。在上图示例中，我
 首先我们打开 Molecule [源码](https://github.com/DTStack/molecule)仓库，找到 `src/workbench` 目录，拷贝 `workbench.tsx` 文件到项目的 `views` 或其他目录下，将其重命名为 `myWorkbench.tsx` 文件：
 
 ```tsx
-<div className={workbenchFinalClassName}>
-    <Display visible={isMenuBarHorizontal}>
-        <MenuBarView mode={MenuBarMode.horizontal} />
-    </Display>
-    <div className={mainBenchClassName}>
-        <div className={compositeBarClassName}>
-            <Display visible={isMenuBarVertical}>
-                <MenuBarView mode={MenuBarMode.vertical} />
-            </Display>
-            <Display
-                visible={!activityBar.hidden}
-                className={displayActivityBarClassName}
-            >
-                <ActivityBarView />
-            </Display>
-        </div>
-        <SplitPane
-            split="vertical"
-            primary="first"
-            allowResize={true}
-            onChange={onPaneSizeChange as any}
-        >
-            <Pane
-                minSize="170px"
-                initialSize={splitPanePos[0]}
-                maxSize="80%"
-                className={sidebar.hidden ? 'hidden' : ''}
-            >
-                <SidebarView />
-            </Pane>
+<div id={ID_APP} className={appClassName} tabIndex={0}>
+    <div className={workbenchFinalClassName}>
+        <Display visible={isMenuBarHorizontal}>
+            <MenuBarView mode={MenuBarMode.horizontal} />
+        </Display>
+        <div className={mainBenchClassName}>
+            <div className={compositeBarClassName}>
+                <Display visible={isMenuBarVertical}>
+                    <MenuBarView mode={MenuBarMode.vertical} />
+                </Display>
+                <Display
+                    visible={!activityBar.hidden}
+                    className={displayActivityBarClassName}
+                >
+                    <ActivityBarView />
+                </Display>
+            </div>
             <SplitPane
-                primary="first"
-                split="horizontal"
-                allowResize={true}
-                onChange={onHorizontalPaneSizeChange as any}
+                sizes={sidebar.hidden ? [0, '100%'] : splitPanePos}
+                split="vertical"
+                allowResize={[false]}
+                onChange={handleSideBarChanged}
+                onResizeStrategy={() => ['keep', 'pave']}
             >
-                {getContent(!!panel.panelMaximized, !!panel.hidden)}
+                <Pane minSize={170} maxSize="80%">
+                    <SidebarView />
+                </Pane>
+                <SplitPane
+                    sizes={getSizes()}
+                    allowResize={[false]}
+                    split="horizontal"
+                    onChange={handleEditorChanged}
+                    onResizeStrategy={() => ['pave', 'keep']}
+                >
+                    <Pane minSize="10%" maxSize="80%">
+                        <EditorView />
+                    </Pane>
+                    <PanelView />
+                </SplitPane>
             </SplitPane>
-        </SplitPane>
+        </div>
     </div>
+    <Display visible={!statusBar.hidden}>
+        <StatusBarView />
+    </Display>
 </div>
 ```
 
@@ -74,44 +79,58 @@ Molecule 默认的是 **VSCode 布局**的 Workbench。在上图示例中，我
 具体改造如下：
 
 ```tsx title="/src/views/myWorkbench.tsx"
-<div className={workbenchClassName}>
-    {!menuBar.hidden && <MyMenuBarView />}
-    <div className={mainBenchClassName}>
-        <div className={compositeBarClassName}>
-            {!activityBar.hidden && <ActivityBarView />}
-        </div>
-        <SplitPane
-            split="vertical"
-            primary="first"
-            allowResize={true}
-            onChange={onPaneSizeChange as any}
-        >
-            <Pane
-                minSize="170px"
-                initialSize={splitPanePos[0]}
-                maxSize="80%"
-                className={sidebar.hidden && 'hidden'}
-            >
-                <SidebarView />
-            </Pane>
+<div
+    id={ID_APP}
+    className={classNames(appClassName, 'myMolecule')}
+    tabIndex={0}
+>
+    <div className={workbenchFinalClassName}>
+        <Display visible={isMenuBarHorizontal}>
+            <MenuBarView mode={MenuBarMode.horizontal} />
+        </Display>
+        <div className={mainBenchClassName}>
+            <div className={compositeBarClassName}>
+                <Display visible={isMenuBarVertical}>
+                    <MenuBarView mode={MenuBarMode.vertical} />
+                </Display>
+                <Display
+                    visible={!activityBar.hidden}
+                    className={displayActivityBarClassName}
+                >
+                    <ActivityBarView />
+                </Display>
+            </div>
             <SplitPane
-                primary="first"
-                split="horizontal"
-                allowResize={true}
-                onChange={onHorizontalPaneSizeChange as any}
+                sizes={sidebar.hidden ? [0, '100%'] : splitPanePos}
+                split="vertical"
+                allowResize={[false, true]}
+                onChange={handleSideBarChanged}
+                onResizeStrategy={() => ['keep', 'pave']}
             >
-                {getContent(!!panel.panelMaximized, !!panel.hidden)}
+                <Pane minSize={170} maxSize="80%">
+                    <SidebarView />
+                </Pane>
+                <SplitPane
+                    sizes={getSizes()}
+                    allowResize={[false, true]}
+                    split="horizontal"
+                    onChange={handleEditorChanged}
+                    onResizeStrategy={() => ['pave', 'keep']}
+                >
+                    <Pane minSize="10%" maxSize="80%">
+                        <EditorView />
+                    </Pane>
+                    <PanelView />
+                </SplitPane>
             </SplitPane>
-            <Pane
-                minSize="40px"
-                initialSize="240px"
-                maxSize="40%"
-                className={'rightSidebar'}
-            >
+            <div style={{ width: 300 }}>
                 <Sidebar current={MySidePane.id} panes={[MySidePane]} />
-            </Pane>
-        </SplitPane>
+            </div>
+        </div>
     </div>
+    <Display visible={!statusBar.hidden}>
+        <StatusBarView />
+    </Display>
 </div>
 ```
 
@@ -119,35 +138,11 @@ Molecule 默认的是 **VSCode 布局**的 Workbench。在上图示例中，我
 以上代码仅仅是 `myWorkbench.tsx` 文件的部分代码，完整代码请查看 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/views/myWorkbench.tsx)
 :::
 
-我们去掉了 `vertical` 模式下的 MenuBar，并直接根据 `menuBar.hidden` 来渲染自己定义的 `MyMenuBarView` 组件。在 `SplitPane` 组件中新增了一个 `className` 为 `rightSidebar` 的面板，使用了内置的 `Sidebar` 组件，并在 `Sidebar` 中使用了自定义的 `MySidePane` 组件。
-
-### 自定义 MenuBar
-
-上图中 MenuBar 包含了一个自定义的 **Logo** 元素，MenuBar 并使用了**横向（Horizontal）**的布局。 与 Workbench 一样，我们从 `src/workbench/menuBar` 下拷贝默认的 `menuBar.tsx` 组件，重命名为 `myMenuBar.tsx`：
-
-```tsx title="/src/views/myMenuBar/index.tsx"
-<div className="myMenuBar">
-    <Logo alt="logo" src="logo@3x.png" />
-    <Menu
-        role="menu"
-        mode={MenuMode.Horizontal}
-        trigger="click"
-        onClick={handleClick}
-        style={{ width: '100%' }}
-        data={addKeybindingForData(data)}
-    />
-</div>
-```
-
-代码中新增了 `Logo` 组件，并替换了原来的 [DropDown](../api/namespaces/molecule.component#dropdown) 为 [Menu](../api/namespaces/molecule.component#menu) 组件。
-
-:::tip
-上面 MenuBar 的自定义 **Logo** 和**横向（Horizontal）**布局功能，目前已内置，具体可查看 [菜单栏（MenuBar）](../guides/extend-workbench#菜单栏menubar)
-:::
+我们新增了一个`RightSidebar`，使用了内置的 `Sidebar` 组件，并在 `Sidebar` 中使用了自定义的 `MySidePane` 组件。
 
 ### 自定义 RightSideBar
 
-与 `MenuBar` 稍有不同的是，因为复用了内置的 [Sidebar](../api/namespaces/molecule#sidebar-1) 组件，所以这里我们只需要传入 [ISidebarPane](../api/interfaces/molecule.model.ISidebarPane) 类型的组件：
+我们复用了内置的 [Sidebar](../api/namespaces/molecule#sidebar-1) 组件，这里我们只需要传入 [ISidebarPane](../api/interfaces/molecule.model.ISidebarPane) 类型的组件：
 
 ```tsx title="/src/views/mySidePane.tsx"
 import React from 'react';
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-keybinding.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-keybinding.md
index 005f0e1c2..b14f207f1 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-keybinding.md
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-keybinding.md
@@ -17,11 +17,9 @@ sidebar_label: 快捷键
 首先，我们先基于 `Action2` 抽象类，定义 `KeybindingAction` 对象：
 
 ```ts title="src/extensions/action/keybindingAction.ts"
-import {
-    Action2,
-    KeybindingWeight,
-} from '@dtinsight/molecule/esm/monaco/common';
+import { KeybindingWeight } from '@dtinsight/molecule/esm/monaco/common';
 import { KeyCode, KeyMod } from '@dtinsight/molecule/esm/monaco';
+import { Action2 } from '@dtinsight/molecule/esm/monaco/action';
 //@ts-ignore
 import { KeyChord } from 'monaco-editor/esm/vs/base/common/keyCodes';
 
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-quick-access.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-quick-access.md
index ff1f02678..5ef29d62c 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-quick-access.md
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-quick-access.md
@@ -26,11 +26,9 @@ Molecule 中的快捷访问功能，与[快捷键](./extend-keybinding.md)功能
 首先，我们新建一个 `quickOpenAction.ts` 文件, 文件中定义了 `QuickOpenAction` Action 对象：
 
 ```ts title="/src/extensions/theFirstExtension/quickOpenAction.ts"
-import {
-    Action2,
-    KeybindingWeight,
-} from '@dtinsight/molecule/esm/monaco/common';
+import { KeybindingWeight } from '@dtinsight/molecule/esm/monaco/common';
 import { KeyCode, KeyMod } from '@dtinsight/molecule/esm/monaco';
+import { Action2 } from '@dtinsight/molecule/esm/monaco/action';
 import {
     IQuickInputService,
     //@ts-ignore