# 二次开发代码改动说明

二次开发的代码修改基于 JupyterLab v3.4.3 版本进行.
这里主要针对代码部分的 diff 进行说明, 省略了 eslint 等的配置改动,
以及文档相关改动. 使用如下命令查看改动:

```bash
git diff v3.4.3 HEAD packages
```

- 替换 JupyterLab 自带的 Logo 为自定义 Logo

```diff
diff --git a/packages/application-extension/src/index.tsx b/packages/application-extension/src/index.tsx
index 5da68f494d..403607bd1a 100644
--- a/packages/application-extension/src/index.tsx
+++ b/packages/application-extension/src/index.tsx
@@ -40,7 +40,8 @@ import { ITranslator, TranslationBundle } from '@jupyterlab/translation';
 import {
   buildIcon,
   ContextMenuSvg,
-  jupyterIcon,
+  // jupyterIcon,
+  LabIcon,
   RankedMenu
 } from '@jupyterlab/ui-components';
 import { each, iter, toArray } from '@lumino/algorithm';
@@ -48,6 +49,12 @@ import { JSONExt, PromiseDelegate } from '@lumino/coreutils';
 import { DisposableDelegate, DisposableSet } from '@lumino/disposable';
 import { DockLayout, DockPanel, Widget } from '@lumino/widgets';
 import * as React from 'react';
+import yiliLogoSvgStr from '../style/icons/YiliLogo.svg';
+
+const yiliLogoIcon = new LabIcon({
+  name: 'yili-logo',
+  svgstr: yiliLogoSvgStr
+});

 /**
  * Default context menu item rank
@@ -941,14 +948,15 @@ const JupyterLogo: JupyterFrontEndPlugin<void> = {
   requires: [ILabShell],
   activate: (app: JupyterFrontEnd, shell: ILabShell) => {
     const logo = new Widget();
-    jupyterIcon.element({
+    yiliLogoIcon.element({
       container: logo.node,
       elementPosition: 'center',
-      margin: '2px 2px 2px 8px',
+      marginRight: '10px',
+      marginLeft: '10px',
       height: 'auto',
-      width: '16px'
+      width: '54px'
     });
-    logo.id = 'jp-MainLogo';
+    logo.id = 'jp-YiliLogo';
     shell.add(logo, 'top', { rank: 0 });
   }
 };
```

- 修改 JupyterLab 主界面的布局, 隐藏部分面板

```diff
diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts
index c87c901fb3..931ccd369a 100644
--- a/packages/application/src/shell.ts
+++ b/packages/application/src/shell.ts
@@ -306,7 +306,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {

     dockPanel.node.setAttribute('role', 'main');

-    hboxPanel.spacing = 0;
+    hboxPanel.spacing = 2;
     vsplitPanel.spacing = 1;
     dockPanel.spacing = 5;
     hsplitPanel.spacing = 1;
@@ -330,14 +330,14 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {

     hsplitPanel.addWidget(leftHandler.stackedPanel);
     hsplitPanel.addWidget(dockPanel);
-    hsplitPanel.addWidget(rightHandler.stackedPanel);
+    // hsplitPanel.addWidget(rightHandler.stackedPanel);

     vsplitPanel.addWidget(hsplitPanel);
-    vsplitPanel.addWidget(downPanel);
+    // vsplitPanel.addWidget(downPanel);

     hboxPanel.addWidget(leftHandler.sideBar);
     hboxPanel.addWidget(vsplitPanel);
-    hboxPanel.addWidget(rightHandler.sideBar);
+    // hboxPanel.addWidget(rightHandler.sideBar);

     rootLayout.direction = 'top-to-bottom';
     rootLayout.spacing = 0; // TODO make this configurable?
@@ -353,10 +353,12 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     BoxLayout.setStretch(hboxPanel, 1);
     BoxLayout.setStretch(bottomPanel, 0);

+    BoxLayout.setSizeBasis(topHandler.panel, 60);
+
     rootLayout.addWidget(headerPanel);
     rootLayout.addWidget(topHandler.panel);
     rootLayout.addWidget(hboxPanel);
-    rootLayout.addWidget(bottomPanel);
+    // rootLayout.addWidget(bottomPanel);

     // initially hiding header and bottom panel when no elements inside,
     this._headerPanel.hide();
@@ -1498,7 +1500,7 @@ namespace Private {
     /**
      * Get the panel managed by the handler.
      */
-    get panel() {
+    get panel(): Panel {
       return this._panel;
     }

@@ -1653,12 +1655,12 @@ namespace Private {

       if (title.icon instanceof LabIcon) {
         // bind an appropriate style to the icon
-        title.icon = title.icon.bindprops({
-          stylesheet: 'sideBar'
-        });
+        // title.icon = title.icon.bindprops({
+        //   stylesheet: 'sideBar'
+        // });
       } else if (typeof title.icon === 'string' || !title.icon) {
         // add some classes to help with displaying css background imgs
-        title.iconClass = classes(title.iconClass, 'jp-Icon', 'jp-Icon-20');
+        // title.iconClass = classes(title.iconClass, 'jp-Icon', 'jp-Icon-20');
       }

       this._refreshVisibility();
```

- 修改主界面 css 样式, 匹配前端原型

```diff
diff --git a/packages/application/style/base.css b/packages/application/style/base.css
index 25daa9c913..3c937aa43a 100644
--- a/packages/application/style/base.css
+++ b/packages/application/style/base.css
@@ -13,7 +13,7 @@

 body {
   font-family: var(--jp-ui-font-family);
-  background: var(--jp-layout-color3);
+  background: #f0f2f5;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -31,8 +31,13 @@ body {
   border-top: 4px solid red;
 }

+#jp-main-vsplit-panel,
+#jp-main-split-panel {
+  overflow: visible;
+}
+
 #jp-main-dock-panel {
-  padding: 5px;
+  padding: 10px;
 }

 #jp-main-dock-panel[data-mode='single-document'] {
@@ -44,8 +49,7 @@ body {
 }

 #jp-top-panel {
-  border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
-  background: var(--jp-layout-color1);
+  background-color: #222222;
   display: flex;
   min-height: var(--jp-private-menubar-height);
   overflow: visible;
@@ -53,7 +57,23 @@ body {

 #jp-menu-panel {
   min-height: var(--jp-private-menu-panel-height);
-  background: var(--jp-layout-color1);
+  align-self: center;
+}
+
+#jp-MainMenu {
+  background-color: #222222;
+  color: #afafaf;
+}
+
+#jp-MainMenu .lm-MenuBar-item {
+  padding: 0 20px;
+  border: none;
+}
+
+#jp-MainMenu .lm-MenuBar-item.lm-mod-active {
+  background-color: #333333;
+  border: none;
+  box-shadow: none;
 }

 #jp-down-stack {
```

- 重新定义 JupyterLab 对话框按钮样式, 匹配前端原型

```diff
diff --git a/packages/application/style/buttons.css b/packages/application/style/buttons.css
index 0c25eb4b3e..2e90a454e5 100644
--- a/packages/application/style/buttons.css
+++ b/packages/application/style/buttons.css
@@ -13,52 +13,32 @@
 |----------------------------------------------------------------------------*/

 button {
-  border-radius: var(--jp-border-radius);
-}
-
-button:focus-visible {
-  border: 1px solid var(--md-blue-900);
+  border-radius: 2px;
 }

 button.jp-mod-styled.jp-mod-accept {
-  background: var(--md-blue-700);
-  border: 0;
+  background: #4883fb;
+  border: 1px solid #4883fb;
   color: white;
 }

 button.jp-mod-styled.jp-mod-accept:hover {
-  background: var(--md-blue-800);
-}
-
-button.jp-mod-styled.jp-mod-accept:active {
-  background: var(--md-blue-900);
-}
-
-button.jp-mod-styled.jp-mod-accept:focus-visible {
-  border: 1px solid var(--md-blue-900);
+  background: #276fff;
 }

 button.jp-mod-styled.jp-mod-reject {
-  background: var(--md-grey-600);
-  border: 0;
-  color: white;
+  background-color: white;
+  border: 1px solid #dddddd;
+  color: #7d7d7d;
 }

 button.jp-mod-styled.jp-mod-reject:hover {
-  background: var(--md-grey-700);
-}
-
-button.jp-mod-styled.jp-mod-reject:active {
-  background: var(--md-grey-800);
-}
-
-button.jp-mod-styled.jp-mod-reject:focus-visible {
-  border: 1px solid var(--md-grey-800);
+  background: #eeeeee;
 }

 button.jp-mod-styled.jp-mod-warn {
   background: var(--md-red-700);
-  border: 0;
+  border: 1px solid var(--md-red-700);
   color: white;
 }

@@ -66,14 +46,6 @@ button.jp-mod-styled.jp-mod-warn:hover {
   background: var(--md-red-800);
 }

-button.jp-mod-styled.jp-mod-warn:active {
-  background: var(--md-red-900);
-}
-
-button.jp-mod-styled.jp-mod-warn:focus-visible {
-  border: 1px solid var(--md-red-900);
-}
-
 .jp-Button-flat {
   text-decoration: none;
   padding: var(--jp-flat-button-padding);
```

- 修改主面板样式

```diff
diff --git a/packages/application/style/dockpanel.css b/packages/application/style/dockpanel.css
index 827eccb72c..a189fb6727 100644
--- a/packages/application/style/dockpanel.css
+++ b/packages/application/style/dockpanel.css
@@ -14,9 +14,7 @@
 .lm-DockPanel-widget,
 .lm-TabPanel-stackedPanel {
   background: var(--jp-layout-color0);
-  border-left: var(--jp-border-width) solid var(--jp-border-color1);
-  border-right: var(--jp-border-width) solid var(--jp-border-color1);
-  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
 }

 .lm-DockPanel-overlay {
@@ -34,3 +32,11 @@
 .lm-DockPanel-overlay.lm-mod-root-center {
   border-width: 2px;
 }
+
+#jp-main-dock-panel .lm-DockPanel-widget {
+  z-index: 2;
+}
+
+#jp-main-dock-panel .lm-DockPanel-tabBar {
+  z-index: unset;
+}

diff --git a/packages/application/style/menus.css b/packages/application/style/menus.css
index 36535b8571..97241b8730 100644
--- a/packages/application/style/menus.css
+++ b/packages/application/style/menus.css
@@ -26,10 +26,6 @@
   overflow-x: auto;
 }

-.lm-MenuBar-menu {
-  transform: translateY(calc(-2 * var(--jp-border-width)));
-}
-
 .lm-MenuBar-item {
   padding: 0px 8px;
   border-left: var(--jp-border-width) solid transparent;
```

- 修改侧边栏样式

```diff
diff --git a/packages/application/style/sidepanel.css b/packages/application/style/sidepanel.css
index d19f2d2841..ed7ff3b8bf 100644
--- a/packages/application/style/sidepanel.css
+++ b/packages/application/style/sidepanel.css
@@ -21,18 +21,14 @@
   font-size: var(--jp-ui-font-size1);
 }

-.jp-SideBar.lm-TabBar,
-#jp-down-stack .lm-TabBar {
-  color: var(--jp-ui-font-color1);
-  background: var(--jp-layout-color2);
-  font-size: var(--jp-ui-font-size1);
-  overflow: visible;
-}
-
 .jp-SideBar.lm-TabBar {
-  min-width: calc(var(--jp-private-sidebar-tab-width) + var(--jp-border-width));
-  max-width: calc(var(--jp-private-sidebar-tab-width) + var(--jp-border-width));
+  color: #4a4a4a;
+  background-color: white;
+  font-size: var(--jp-ui-font-size1);
+  min-width: 180px;
+  max-width: 180px;
   display: block;
+  height: 100%;
 }

 .jp-SideBar .lm-TabBar-content {
@@ -41,103 +37,44 @@
   display: flex;
   align-items: stretch;
   list-style-type: none;
-  height: var(--jp-private-sidebar-tab-width);
-  transform-origin: 0 0 0;
 }

 .jp-SideBar .lm-TabBar-tab {
-  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  height: 50px;
+  padding: 0 25px;
   border: none;
-  overflow: visible;
+  color: #4a4a4a;
 }

 .jp-SideBar .lm-TabBar-tab.lm-mod-current {
-  min-height: calc(
-    var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
-  );
-  max-height: calc(
-    var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
-  );
-  /* transform: translateY(var(--jp-border-width)); */
-}
-
-.jp-SideBar .lm-TabBar-tab:not(.lm-mod-current),
-#jp-down-stack .lm-TabBar-tab:not(.lm-mod-current) {
-  background: var(--jp-layout-color2);
-}
-
-.jp-SideBar .lm-TabBar-tabIcon.jp-SideBar-tabIcon {
-  min-width: 20px;
-  min-height: 20px;
-  background-size: 20px;
-  display: inline-block;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.jp-SideBar .lm-TabBar-tabLabel {
-  line-height: var(--jp-private-sidebar-tab-width);
-}
-
-.jp-SideBar .lm-TabBar-tab:hover:not(.lm-mod-current),
-#jp-down-stack .lm-TabBar-tab:hover:not(.lm-mod-current) {
-  background: var(--jp-layout-color1);
-}
-
-/* Left */
-
-/* Borders */
-
-.jp-SideBar.lm-TabBar.jp-mod-left {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
-}
-
-.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab + .lm-TabBar-tab {
-  border-right: var(--jp-border-width) solid var(--jp-layout-color2);
+  background-color: #147bd1;
+  color: white;
 }

-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab.lm-mod-current
-  + .lm-TabBar-tab {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar .lm-TabBar-tab .jp-icon3[fill] {
+  fill: #4a4a4a;
 }

-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab
-  + .lm-TabBar-tab.lm-mod-current {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar .lm-TabBar-tab.lm-mod-current .jp-icon3[fill] {
+  fill: white;
 }

-.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab.lm-mod-current:last-child {
-  border-left: var(--jp-border-width) solid var(--jp-border-color0);
-}
-
-/* Transforms */
-
-.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-content {
-  flex-direction: row-reverse;
-  transform: rotate(-90deg) translateX(-100%);
+.jp-SideBar .lm-TabBar-tabIcon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
 }

-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab:not(.lm-mod-current)
-  .lm-TabBar-tabIcon {
-  transform: rotate(90deg);
+.jp-SideBar .lm-TabBar-tabIcon {
+  margin-right: 16px;
 }

-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab.lm-mod-current
-  .lm-TabBar-tabIcon {
-  transform: rotate(90deg)
-    translate(
-      calc(-0.5 * var(--jp-border-width)),
-      calc(-0.5 * var(--jp-border-width))
-    );
+.jp-SideBar .lm-TabBar-tab:hover:not(.lm-mod-current) {
+  background-color: #eeeeee;
 }

-/* Right */
-
 /* Borders */

 .jp-SideBar.lm-TabBar.jp-mod-right {
@@ -217,6 +154,7 @@
 #jp-left-stack > .lm-Widget,
 #jp-right-stack > .lm-Widget {
   min-width: var(--jp-sidebar-min-width);
+  background-color: #f8f8f9;
 }

 #jp-right-stack {
@@ -224,7 +162,7 @@
 }

 #jp-left-stack {
-  border-right: var(--jp-border-width) solid var(--jp-border-color1);
+  box-shadow: 1px 0px 6px 0px rgba(0, 0, 0, 0.12);
 }

 #jp-down-stack > .lm-TabPanel-stackedPanel {
```

- 重新设置 Tab 的样式, 将原来的长方形改为梯形

```diff
diff --git a/packages/application/style/tabs.css b/packages/application/style/tabs.css
index bb23cb958f..171e3d34ef 100644
--- a/packages/application/style/tabs.css
+++ b/packages/application/style/tabs.css
@@ -20,7 +20,6 @@

 .lm-DockPanel-tabBar,
 .lm-TabPanel-tabBar {
-  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
   overflow: visible;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
@@ -52,18 +51,38 @@
     var(--jp-private-horizontal-tab-height) + var(--jp-border-width)
   );
   min-width: 0px;
-  margin-left: calc(-1 * var(--jp-border-width));
+  margin-left: -10px;
+  margin-right: 25px;
   line-height: var(--jp-private-horizontal-tab-height);
   padding: 0px 8px;
-  background: var(--jp-layout-color2);
-  border: var(--jp-border-width) solid var(--jp-border-color1);
-  border-bottom: none;
+  background: #eeeeee;
+  border: none;
   position: relative;
+  overflow: visible;
+  color: #4a4a4a;
+  box-shadow: -2px -2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.lm-DockPanel-tabBar .lm-TabBar-tab::after {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background-color: inherit;
+  z-index: 1;
+  width: 22px;
+  right: -12px;
+  transform: skew(40deg);
+  box-shadow: 4px 0px 4px -4px rgba(0, 0, 0, 0.1);
+}
+
+.lm-DockPanel-tabBar .lm-TabBar-tab .lm-TabBar-tabCloseIcon {
+  z-index: 2;
 }

 .lm-DockPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current),
 .lm-TabPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current) {
-  background: var(--jp-layout-color1);
+  background-color: #f5f5f5;
 }

 .lm-DockPanel-tabBar .lm-TabBar-tab:first-child,
@@ -74,11 +93,10 @@
 /* This is a current tab of a tab bar in the dock panel: each tab bar has 1. */
 .lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current {
   background: var(--jp-layout-color1);
-  color: var(--jp-ui-font-color0);
+  color: #4a4a4a;
   min-height: calc(
     var(--jp-private-horizontal-tab-height) + 2 * var(--jp-border-width)
   );
-  transform: translateY(var(--jp-border-width));
 }

 .lm-TabPanel-tabBar .lm-TabBar-tab.lm-mod-current {
@@ -86,17 +104,6 @@
   color: var(--jp-ui-font-color0);
 }

-/* This is the main application level current tab: only 1 exists. */
-.lm-DockPanel-tabBar .lm-TabBar-tab.jp-mod-current:before {
-  position: absolute;
-  top: calc(-1 * var(--jp-border-width) + 1px);
-  left: calc(-1 * var(--jp-border-width));
-  content: '';
-  height: var(--jp-private-horizontal-tab-active-top-border);
-  width: calc(100% + 2 * var(--jp-border-width));
-  background: var(--jp-brand-color1);
-}
-
 /* This is the left tab bar current tab: only 1 exists. */
 .lm-TabBar-tab.lm-mod-current {
   color: var(--jp-ui-font-color0);
```

- 去除一些可能导致 Notebook 被下载的插件

```diff
diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts
index fe5cee38f2..cdf726aa6e 100644
--- a/packages/apputils-extension/src/index.ts
+++ b/packages/apputils-extension/src/index.ts
@@ -22,7 +22,7 @@ import {
   ISplashScreen,
   IWindowResolver,
   MainAreaWidget,
-  Printing,
+  // Printing,
   sessionContextDialogs,
   WindowResolver
 } from '@jupyterlab/apputils';
@@ -268,28 +268,28 @@ Would you like to clear the workspace or keep waiting?`),
   }
 };

-const print: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/apputils-extension:print',
-  autoStart: true,
-  requires: [ITranslator],
-  activate: (app: JupyterFrontEnd, translator: ITranslator) => {
-    const trans = translator.load('jupyterlab');
-    app.commands.addCommand(CommandIDs.print, {
-      label: trans.__('Print…'),
-      isEnabled: () => {
-        const widget = app.shell.currentWidget;
-        return Printing.getPrintFunction(widget) !== null;
-      },
-      execute: async () => {
-        const widget = app.shell.currentWidget;
-        const printFunction = Printing.getPrintFunction(widget);
-        if (printFunction) {
-          await printFunction();
-        }
-      }
-    });
-  }
-};
+// const print: JupyterFrontEndPlugin<void> = {
+//   id: '@jupyterlab/apputils-extension:print',
+//   autoStart: true,
+//   requires: [ITranslator],
+//   activate: (app: JupyterFrontEnd, translator: ITranslator) => {
+//     const trans = translator.load('jupyterlab');
+//     app.commands.addCommand(CommandIDs.print, {
+//       label: trans.__('Print…'),
+//       isEnabled: () => {
+//         const widget = app.shell.currentWidget;
+//         return Printing.getPrintFunction(widget) !== null;
+//       },
+//       execute: async () => {
+//         const widget = app.shell.currentWidget;
+//         const printFunction = Printing.getPrintFunction(widget);
+//         if (printFunction) {
+//           await printFunction();
+//         }
+//       }
+//     });
+//   }
+// };

 export const toggleHeader: JupyterFrontEndPlugin<void> = {
   id: '@jupyterlab/apputils-extension:toggle-header',
@@ -620,7 +620,7 @@ const sanitizer: JupyterFrontEndPlugin<ISanitizer> = {
 const plugins: JupyterFrontEndPlugin<any>[] = [
   palette,
   paletteRestorer,
-  print,
+  // print,
   resolver,
   sanitizer,
   settingsPlugin,
diff --git a/packages/apputils-extension/src/workspacesplugin.ts b/packages/apputils-extension/src/workspacesplugin.ts
index ffcefb6ded..bf8b93a806 100644
--- a/packages/apputils-extension/src/workspacesplugin.ts
+++ b/packages/apputils-extension/src/workspacesplugin.ts
@@ -24,11 +24,11 @@ import { IStateDB } from '@jupyterlab/statedb';
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
 import { Widget } from '@lumino/widgets';

-namespace CommandIDs {
-  export const saveWorkspace = 'workspace-ui:save';
+// namespace CommandIDs {
+//   export const saveWorkspace = 'workspace-ui:save';

-  export const saveWorkspaceAs = 'workspace-ui:save-as';
-}
+//   export const saveWorkspaceAs = 'workspace-ui:save-as';
+// }

 const WORKSPACE_NAME = 'jupyterlab-workspace';
 const WORKSPACE_EXT = '.' + WORKSPACE_NAME;
@@ -78,39 +78,39 @@ export const workspacesPlugin: JupyterFrontEndPlugin<void> = {
       iconClass: ICON_NAME
     });
     app.docRegistry.addWidgetFactory(factory);
-    app.commands.addCommand(CommandIDs.saveWorkspaceAs, {
-      label: trans.__('Save Current Workspace As…'),
-      execute: async () => {
-        const data = app.serviceManager.workspaces.fetch(resolver.name);
-        await Private.saveAs(
-          fbf.defaultBrowser,
-          app.serviceManager.contents,
-          data,
-          state,
-          translator
-        );
-      }
-    });
+    // app.commands.addCommand(CommandIDs.saveWorkspaceAs, {
+    //   label: trans.__('Save Current Workspace As…'),
+    //   execute: async () => {
+    //     const data = app.serviceManager.workspaces.fetch(resolver.name);
+    //     await Private.saveAs(
+    //       fbf.defaultBrowser,
+    //       app.serviceManager.contents,
+    //       data,
+    //       state,
+    //       translator
+    //     );
+    //   }
+    // });

-    app.commands.addCommand(CommandIDs.saveWorkspace, {
-      label: trans.__('Save Current Workspace'),
-      execute: async () => {
-        const { contents } = app.serviceManager;
-        const data = app.serviceManager.workspaces.fetch(resolver.name);
-        const lastSave = (await state.fetch(LAST_SAVE_ID)) as string;
-        if (lastSave === undefined) {
-          await Private.saveAs(
-            fbf.defaultBrowser,
-            contents,
-            data,
-            state,
-            translator
-          );
-        } else {
-          await Private.save(lastSave, contents, data, state);
-        }
-      }
-    });
+    // app.commands.addCommand(CommandIDs.saveWorkspace, {
+    //   label: trans.__('Save Current Workspace'),
+    //   execute: async () => {
+    //     const { contents } = app.serviceManager;
+    //     const data = app.serviceManager.workspaces.fetch(resolver.name);
+    //     const lastSave = (await state.fetch(LAST_SAVE_ID)) as string;
+    //     if (lastSave === undefined) {
+    //       await Private.saveAs(
+    //         fbf.defaultBrowser,
+    //         contents,
+    //         data,
+    //         state,
+    //         translator
+    //       );
+    //     } else {
+    //       await Private.save(lastSave, contents, data, state);
+    //     }
+    //   }
+    // });
   }
 };
```

- 优化 JupyterLab 对话框的代码

```diff
diff --git a/packages/apputils/src/dialog.tsx b/packages/apputils/src/dialog.tsx
index 2003f99c5a..9f3854c394 100644
--- a/packages/apputils/src/dialog.tsx
+++ b/packages/apputils/src/dialog.tsx
@@ -33,9 +33,9 @@ export function showDialog<T>(
  * @param error - the error to show in the dialog body (either a string
  *   or an object with a string `message` property).
  */
-export function showErrorMessage(
+export function showErrorMessage<E extends { message: string | JSX.Element }>(
   title: string,
-  error: any,
+  error: string | E,
   buttons: ReadonlyArray<Dialog.IButton> = [
     Dialog.okButton({ label: 'Dismiss' })
   ]
@@ -415,8 +415,6 @@ export class Dialog<T> extends Widget {
       this.dispose();
       return;
     }
-    this._promise = null;
-    ArrayExt.removeFirstOf(Private.launchQueue, promise.promise);
     const body = this._body;
     let value: T | null = null;
     if (
@@ -426,6 +424,8 @@ export class Dialog<T> extends Widget {
     ) {
       value = body.getValue();
     }
+    this._promise = null;
+    ArrayExt.removeFirstOf(Private.launchQueue, promise.promise);
     this.dispose();
     promise.resolve({ button, value });
   }
@@ -693,7 +693,7 @@ export namespace Dialog {
   /**
    * The default implementation of a dialog renderer.
    */
-  export class Renderer {
+  export class Renderer implements Dialog.IRenderer {
     /**
      * Create the header of the dialog.
      *

diff --git a/packages/apputils/src/mainareawidget.ts b/packages/apputils/src/mainareawidget.ts
index baa4eaa21f..f01dbd18f1 100644
--- a/packages/apputils/src/mainareawidget.ts
+++ b/packages/apputils/src/mainareawidget.ts
@@ -60,8 +60,8 @@ export class MainAreaWidget<T extends Widget = Widget>
     BoxLayout.setStretch(toolbar, 0);
     BoxLayout.setStretch(contentHeader, 0);
     BoxLayout.setStretch(content, 1);
-    layout.addWidget(toolbar);
     layout.addWidget(contentHeader);
+    layout.addWidget(toolbar);
     layout.addWidget(content);

     if (!content.id) {
```

- 更新对话框样式, 匹配前端原型

```diff
diff --git a/packages/apputils/style/dialog.css b/packages/apputils/style/dialog.css
index 7994fb4b59..17dfd7307f 100644
--- a/packages/apputils/style/dialog.css
+++ b/packages/apputils/style/dialog.css
@@ -6,7 +6,7 @@

 .jp-Dialog {
   position: absolute;
-  z-index: 10000;
+  z-index: 1000;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -17,7 +17,7 @@
   padding: 0;
   width: 100%;
   height: 100%;
-  background: var(--jp-dialog-background);
+  background: rgba(0, 0, 0, 0.4);
 }

 .jp-Dialog-content {
@@ -26,20 +26,17 @@
   margin-left: auto;
   margin-right: auto;
   background: var(--jp-layout-color1);
-  padding: 24px 24px 12px 24px;
   min-width: 300px;
   min-height: 150px;
   max-width: 1000px;
-  max-height: 500px;
   box-sizing: border-box;
-  box-shadow: var(--jp-elevation-z20);
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.33);
   word-wrap: break-word;
   border-radius: var(--jp-border-radius);
   /* This is needed so that all font sizing of children done in ems is
    * relative to this base size */
   font-size: var(--jp-ui-font-size1);
   color: var(--jp-ui-font-color1);
-  resize: both;
 }

 .jp-Dialog-content.jp-Dialog-content-small {
@@ -50,50 +47,32 @@
   overflow: visible;
 }

-button.jp-Dialog-button:focus {
-  outline: 1px solid var(--jp-brand-color1);
-  outline-offset: 4px;
-  -moz-outline-radius: 0px;
-}
-
 button.jp-Dialog-button:focus::-moz-focus-inner {
   border: 0;
 }

-button.jp-Dialog-button.jp-mod-styled.jp-mod-accept:focus,
-button.jp-Dialog-button.jp-mod-styled.jp-mod-warn:focus,
-button.jp-Dialog-button.jp-mod-styled.jp-mod-reject:focus {
-  outline-offset: 4px;
-  -moz-outline-radius: 0px;
-}
-
-button.jp-Dialog-button.jp-mod-styled.jp-mod-accept:focus {
-  outline: 1px solid var(--md-blue-700);
-}
-
-button.jp-Dialog-button.jp-mod-styled.jp-mod-warn:focus {
-  outline: 1px solid var(--md-red-600);
-}
-
-button.jp-Dialog-button.jp-mod-styled.jp-mod-reject:focus {
-  outline: 1px solid var(--md-grey-700);
-}
-
 button.jp-Dialog-close-button {
   padding: 0;
-  height: 100%;
+  height: auto;
   min-width: unset;
   min-height: unset;
+  transform: translateY(2px);
+}
+
+button.jp-Dialog-close-button svg {
+  width: 22px;
 }

 .jp-Dialog-header {
   display: flex;
   justify-content: space-between;
   flex: 0 0 auto;
-  padding-bottom: 12px;
-  font-size: var(--jp-ui-font-size3);
-  font-weight: 400;
-  color: var(--jp-ui-font-color0);
+  align-items: center;
+  height: 48px;
+  padding: 0 30px;
+  font-weight: bold;
+  color: #4a4a4a;
+  background-color: #edf2f8;
 }

 .jp-Dialog-body {
@@ -103,16 +82,15 @@ button.jp-Dialog-close-button {
   font-size: var(--jp-ui-font-size1);
   background: var(--jp-layout-color1);
   overflow: auto;
+  padding: 40px;
 }

 .jp-Dialog-footer {
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: center;
   flex: 0 0 auto;
-  margin-left: -12px;
-  margin-right: -12px;
-  padding: 12px;
+  padding: 10px 30px 30px;
 }

 .jp-Dialog-title {
@@ -130,10 +108,10 @@ button.jp-Dialog-close-button {
 }

 .jp-Dialog-body > label {
-  line-height: 1.4;
-  color: var(--jp-ui-font-color0);
+  color: #4a4a4a;
+  margin-bottom: 5px;
 }

 .jp-Dialog-button.jp-mod-styled:not(:last-child) {
-  margin-right: 12px;
+  margin-right: 50px;
 }

diff --git a/packages/apputils/style/styling.css b/packages/apputils/style/styling.css
index de5146bb28..1b21b48370 100644
--- a/packages/apputils/style/styling.css
+++ b/packages/apputils/style/styling.css
@@ -10,9 +10,8 @@ button.jp-mod-styled {
   border: none;
   box-sizing: border-box;
   text-align: center;
-  line-height: 32px;
   height: 32px;
-  padding: 0px 12px;
+  width: 80px;
   letter-spacing: 0.8px;
   outline: none;
   appearance: none;
@@ -21,18 +20,19 @@ button.jp-mod-styled {
 }

 input.jp-mod-styled {
-  background: var(--jp-input-background);
-  height: 28px;
+  height: 32px;
   box-sizing: border-box;
-  border: var(--jp-border-width) solid var(--jp-border-color1);
-  padding-left: 7px;
-  padding-right: 7px;
-  font-size: var(--jp-ui-font-size2);
+  border: 1px solid #c8d3e9;
+  border-radius: 2px;
+  padding: 0 15px;
+  font-size: 12px;
   color: var(--jp-ui-font-color0);
   outline: none;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  transition: all 100ms;
+  outline: 1px solid transparent;
 }

 input[type='checkbox'].jp-mod-styled {
@@ -43,8 +43,7 @@ input[type='checkbox'].jp-mod-styled {
 }

 input.jp-mod-styled:focus {
-  border: var(--jp-border-width) solid var(--md-blue-500);
-  box-shadow: inset 0 0 4px var(--md-blue-300);
+  outline-color: #147bd1;
 }

 .jp-FileDialog-Checkbox {

diff --git a/packages/cells/style/inputarea.css b/packages/cells/style/inputarea.css
index ec6f1620c0..5831ab644d 100644
--- a/packages/cells/style/inputarea.css
+++ b/packages/cells/style/inputarea.css
@@ -36,7 +36,7 @@ body[data-format='mobile'] .jp-InputArea-editor {

 .jp-InputPrompt {
   flex: 0 0 var(--jp-cell-prompt-width);
-  color: var(--jp-cell-inprompt-font-color);
+  color: #147bd1;
   font-family: var(--jp-cell-prompt-font-family);
   padding: var(--jp-code-padding);
   letter-spacing: var(--jp-cell-prompt-letter-spacing);
```

- 去除一些不符合需求的菜单项和组件

```diff
diff --git a/packages/console-extension/src/index.ts b/packages/console-extension/src/index.ts
index fe4c7d1d05..16cdb587e8 100644
--- a/packages/console-extension/src/index.ts
+++ b/packages/console-extension/src/index.ts
@@ -25,12 +25,12 @@ import { ConsolePanel, IConsoleTracker } from '@jupyterlab/console';
 import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
 import { ILauncher } from '@jupyterlab/launcher';
 import {
-  IEditMenu,
-  IFileMenu,
-  IHelpMenu,
-  IKernelMenu,
-  IMainMenu,
-  IRunMenu
+  // IEditMenu,
+  // IFileMenu,
+  // IHelpMenu,
+  // IKernelMenu,
+  IMainMenu
+  // IRunMenu
 } from '@jupyterlab/mainmenu';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
@@ -673,79 +673,79 @@ async function activateConsole(
     });
   }

-  if (mainMenu) {
-    // Add a close and shutdown command to the file menu.
-    mainMenu.fileMenu.closeAndCleaners.add({
-      tracker,
-      closeAndCleanupLabel: (n: number) => trans.__('Shutdown Console'),
-      closeAndCleanup: (current: ConsolePanel) => {
-        return showDialog({
-          title: trans.__('Shut down the Console?'),
-          body: trans.__(
-            'Are you sure you want to close "%1"?',
-            current.title.label
-          ),
-          buttons: [Dialog.cancelButton(), Dialog.warnButton()]
-        }).then(result => {
-          if (result.button.accept) {
-            return current.console.sessionContext.shutdown().then(() => {
-              current.dispose();
-            });
-          } else {
-            return void 0;
-          }
-        });
-      }
-    } as IFileMenu.ICloseAndCleaner<ConsolePanel>);
-
-    // Add a kernel user to the Kernel menu
-    mainMenu.kernelMenu.kernelUsers.add({
-      tracker,
-      restartKernelAndClearLabel: n =>
-        trans.__('Restart Kernel and Clear Console'),
-      interruptKernel: current => {
-        const kernel = current.console.sessionContext.session?.kernel;
-        if (kernel) {
-          return kernel.interrupt();
-        }
-        return Promise.resolve(void 0);
-      },
-      restartKernel: current =>
-        sessionDialogs!.restart(current.console.sessionContext, translator),
-      restartKernelAndClear: current => {
-        return sessionDialogs!
-          .restart(current.console.sessionContext)
-          .then(restarted => {
-            if (restarted) {
-              current.console.clear();
-            }
-            return restarted;
-          });
-      },
-      changeKernel: current =>
-        sessionDialogs!.selectKernel(
-          current.console.sessionContext,
-          translator
-        ),
-      shutdownKernel: current => current.console.sessionContext.shutdown()
-    } as IKernelMenu.IKernelUser<ConsolePanel>);
-
-    // Add a code runner to the Run menu.
-    mainMenu.runMenu.codeRunners.add({
-      tracker,
-      runLabel: (n: number) => trans.__('Run Cell'),
-      run: current => current.console.execute(true)
-    } as IRunMenu.ICodeRunner<ConsolePanel>);
-
-    // Add a clearer to the edit menu
-    mainMenu.editMenu.clearers.add({
-      tracker,
-      clearCurrentLabel: (n: number) => trans.__('Clear Console Cell'),
-      clearCurrent: (current: ConsolePanel) => {
-        return current.console.clear();
-      }
-    } as IEditMenu.IClearer<ConsolePanel>);
-  }
+  // if (mainMenu) {
+  //   // Add a close and shutdown command to the file menu.
+  //   mainMenu.fileMenu.closeAndCleaners.add({
+  //     tracker,
+  //     closeAndCleanupLabel: (n: number) => trans.__('Shutdown Console'),
+  //     closeAndCleanup: (current: ConsolePanel) => {
+  //       return showDialog({
+  //         title: trans.__('Shut down the Console?'),
+  //         body: trans.__(
+  //           'Are you sure you want to close "%1"?',
+  //           current.title.label
+  //         ),
+  //         buttons: [Dialog.cancelButton(), Dialog.warnButton()]
+  //       }).then(result => {
+  //         if (result.button.accept) {
+  //           return current.console.sessionContext.shutdown().then(() => {
+  //             current.dispose();
+  //           });
+  //         } else {
+  //           return void 0;
+  //         }
+  //       });
+  //     }
+  //   } as IFileMenu.ICloseAndCleaner<ConsolePanel>);
+
+  //   // Add a kernel user to the Kernel menu
+  //   mainMenu.kernelMenu.kernelUsers.add({
+  //     tracker,
+  //     restartKernelAndClearLabel: n =>
+  //       trans.__('Restart Kernel and Clear Console'),
+  //     interruptKernel: current => {
+  //       const kernel = current.console.sessionContext.session?.kernel;
+  //       if (kernel) {
+  //         return kernel.interrupt();
+  //       }
+  //       return Promise.resolve(void 0);
+  //     },
+  //     restartKernel: current =>
+  //       sessionDialogs!.restart(current.console.sessionContext, translator),
+  //     restartKernelAndClear: current => {
+  //       return sessionDialogs!
+  //         .restart(current.console.sessionContext)
+  //         .then(restarted => {
+  //           if (restarted) {
+  //             current.console.clear();
+  //           }
+  //           return restarted;
+  //         });
+  //     },
+  //     changeKernel: current =>
+  //       sessionDialogs!.selectKernel(
+  //         current.console.sessionContext,
+  //         translator
+  //       ),
+  //     shutdownKernel: current => current.console.sessionContext.shutdown()
+  //   } as IKernelMenu.IKernelUser<ConsolePanel>);
+
+  //   // Add a code runner to the Run menu.
+  //   mainMenu.runMenu.codeRunners.add({
+  //     tracker,
+  //     runLabel: (n: number) => trans.__('Run Cell'),
+  //     run: current => current.console.execute(true)
+  //   } as IRunMenu.ICodeRunner<ConsolePanel>);
+
+  //   // Add a clearer to the edit menu
+  //   mainMenu.editMenu.clearers.add({
+  //     tracker,
+  //     clearCurrentLabel: (n: number) => trans.__('Clear Console Cell'),
+  //     clearCurrent: (current: ConsolePanel) => {
+  //       return current.console.clear();
+  //     }
+  //   } as IEditMenu.IClearer<ConsolePanel>);
+  // }

   // For backwards compatibility and clarity, we explicitly label the run
   // keystroke with the actual effected change, rather than the generic
@@ -775,13 +775,13 @@ async function activateConsole(
     isToggled: args => args['interactionMode'] === interactionMode
   });

-  if (mainMenu) {
-    // Add kernel information to the application help menu.
-    mainMenu.helpMenu.kernelUsers.add({
-      tracker,
-      getKernel: current => current.sessionContext.session?.kernel
-    } as IHelpMenu.IKernelUser<ConsolePanel>);
-  }
+  // if (mainMenu) {
+  //   // Add kernel information to the application help menu.
+  //   mainMenu.helpMenu.kernelUsers.add({
+  //     tracker,
+  //     getKernel: current => current.sessionContext.session?.kernel
+  //   } as IHelpMenu.IKernelUser<ConsolePanel>);
+  // }

   return tracker;
 }

diff --git a/packages/debugger-extension/src/index.ts b/packages/debugger-extension/src/index.ts
index fe710a9d2a..659f5c0692 100644
--- a/packages/debugger-extension/src/index.ts
+++ b/packages/debugger-extension/src/index.ts
@@ -15,7 +15,7 @@ import {
   ICommandPalette,
   IThemeManager,
   MainAreaWidget,
-  sessionContextDialogs,
+  // sessionContextDialogs,
   WidgetTracker
 } from '@jupyterlab/apputils';
 import { IEditorServices } from '@jupyterlab/codeeditor';
@@ -35,7 +35,7 @@ import { FileEditor, IEditorTracker } from '@jupyterlab/fileeditor';
 import { ILoggerRegistry } from '@jupyterlab/logconsole';
 import {
   INotebookTracker,
-  NotebookActions,
+  // NotebookActions,
   NotebookPanel
 } from '@jupyterlab/notebook';
 import {
@@ -167,88 +167,88 @@ const files: JupyterFrontEndPlugin<void> = {
 /**
  * A plugin that provides visual debugging support for notebooks.
  */
-const notebooks: JupyterFrontEndPlugin<IDebugger.IHandler> = {
-  id: '@jupyterlab/debugger-extension:notebooks',
-  autoStart: true,
-  requires: [IDebugger, INotebookTracker, ITranslator],
-  optional: [ILabShell, ICommandPalette],
-  provides: IDebuggerHandler,
-  activate: (
-    app: JupyterFrontEnd,
-    service: IDebugger,
-    notebookTracker: INotebookTracker,
-    translator: ITranslator,
-    labShell: ILabShell | null,
-    palette: ICommandPalette | null
-  ): Debugger.Handler => {
-    const handler = new Debugger.Handler({
-      type: 'notebook',
-      shell: app.shell,
-      service
-    });
-
-    const trans = translator.load('jupyterlab');
-    app.commands.addCommand(Debugger.CommandIDs.restartDebug, {
-      label: trans.__('Restart Kernel and Debug…'),
-      caption: trans.__('Restart Kernel and Debug…'),
-      isEnabled: () => service.isStarted,
-      execute: async () => {
-        const state = service.getDebuggerState();
-        await service.stop();
-
-        const widget = notebookTracker.currentWidget;
-        if (!widget) {
-          return;
-        }
-
-        const { content, sessionContext } = widget;
-        const restarted = await sessionContextDialogs.restart(sessionContext);
-        if (!restarted) {
-          return;
-        }
-
-        await service.restoreDebuggerState(state);
-        await handler.updateWidget(widget, sessionContext.session);
-        await NotebookActions.runAll(content, sessionContext);
-      }
-    });
-
-    const updateHandlerAndCommands = async (
-      widget: NotebookPanel
-    ): Promise<void> => {
-      if (widget) {
-        const { sessionContext } = widget;
-        await sessionContext.ready;
-        await handler.updateContext(widget, sessionContext);
-      }
-      app.commands.notifyCommandChanged();
-    };
-
-    if (labShell) {
-      labShell.currentChanged.connect((_, update) => {
-        const widget = update.newValue;
-        if (widget instanceof NotebookPanel) {
-          void updateHandlerAndCommands(widget);
-        }
-      });
-    } else {
-      notebookTracker.currentChanged.connect((_, notebookPanel) => {
-        if (notebookPanel) {
-          void updateHandlerAndCommands(notebookPanel);
-        }
-      });
-    }
-
-    if (palette) {
-      palette.addItem({
-        category: 'Notebook Operations',
-        command: Debugger.CommandIDs.restartDebug
-      });
-    }
-
-    return handler;
-  }
-};
+// const notebooks: JupyterFrontEndPlugin<IDebugger.IHandler> = {
+//   id: '@jupyterlab/debugger-extension:notebooks',
+//   autoStart: true,
+//   requires: [IDebugger, INotebookTracker, ITranslator],
+//   optional: [ILabShell, ICommandPalette],
+//   provides: IDebuggerHandler,
+//   activate: (
+//     app: JupyterFrontEnd,
+//     service: IDebugger,
+//     notebookTracker: INotebookTracker,
+//     translator: ITranslator,
+//     labShell: ILabShell | null,
+//     palette: ICommandPalette | null
+//   ): Debugger.Handler => {
+//     const handler = new Debugger.Handler({
+//       type: 'notebook',
+//       shell: app.shell,
+//       service
+//     });
+
+//     const trans = translator.load('jupyterlab');
+//     app.commands.addCommand(Debugger.CommandIDs.restartDebug, {
+//       label: trans.__('Restart Kernel and Debug…'),
+//       caption: trans.__('Restart Kernel and Debug…'),
+//       isEnabled: () => service.isStarted,
+//       execute: async () => {
+//         const state = service.getDebuggerState();
+//         await service.stop();
+
+//         const widget = notebookTracker.currentWidget;
+//         if (!widget) {
+//           return;
+//         }
+
+//         const { content, sessionContext } = widget;
+//         const restarted = await sessionContextDialogs.restart(sessionContext);
+//         if (!restarted) {
+//           return;
+//         }
+
+//         await service.restoreDebuggerState(state);
+//         await handler.updateWidget(widget, sessionContext.session);
+//         await NotebookActions.runAll(content, sessionContext);
+//       }
+//     });
+
+//     const updateHandlerAndCommands = async (
+//       widget: NotebookPanel
+//     ): Promise<void> => {
+//       if (widget) {
+//         const { sessionContext } = widget;
+//         await sessionContext.ready;
+//         await handler.updateContext(widget, sessionContext);
+//       }
+//       app.commands.notifyCommandChanged();
+//     };
+
+//     if (labShell) {
+//       labShell.currentChanged.connect((_, update) => {
+//         const widget = update.newValue;
+//         if (widget instanceof NotebookPanel) {
+//           void updateHandlerAndCommands(widget);
+//         }
+//       });
+//     } else {
+//       notebookTracker.currentChanged.connect((_, notebookPanel) => {
+//         if (notebookPanel) {
+//           void updateHandlerAndCommands(notebookPanel);
+//         }
+//       });
+//     }
+
+//     if (palette) {
+//       palette.addItem({
+//         category: 'Notebook Operations',
+//         command: Debugger.CommandIDs.restartDebug
+//       });
+//     }
+
+//     return handler;
+//   }
+// };

 /**
  * A plugin that provides a debugger service.
@@ -313,7 +313,7 @@ const sources: JupyterFrontEndPlugin<IDebugger.ISources> = {
  */
 const variables: JupyterFrontEndPlugin<void> = {
   id: '@jupyterlab/debugger-extension:variables',
-  autoStart: true,
+  autoStart: false,
   requires: [IDebugger, IDebuggerHandler, ITranslator],
   optional: [IThemeManager, IRenderMimeRegistry],
   activate: (
@@ -868,7 +868,7 @@ const plugins: JupyterFrontEndPlugin<any>[] = [
   service,
   consoles,
   files,
-  notebooks,
+  // notebooks,
   variables,
   sidebar,
   main,

diff --git a/packages/docmanager-extension/src/index.tsx b/packages/docmanager-extension/src/index.tsx
index fac8aadb2b..4a0a90ae55 100644
--- a/packages/docmanager-extension/src/index.tsx
+++ b/packages/docmanager-extension/src/index.tsx
@@ -342,49 +342,49 @@ export const pathStatusPlugin: JupyterFrontEndPlugin<void> = {
 /**
  * A plugin providing download commands in the file menu and command palette.
  */
-export const downloadPlugin: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/docmanager-extension:download',
-  autoStart: true,
-  requires: [ITranslator, IDocumentManager],
-  optional: [ICommandPalette],
-  activate: (
-    app: JupyterFrontEnd,
-    translator: ITranslator,
-    docManager: IDocumentManager,
-    palette: ICommandPalette | null
-  ) => {
-    const trans = translator.load('jupyterlab');
-    const { commands, shell } = app;
-    const isEnabled = () => {
-      const { currentWidget } = shell;
-      return !!(currentWidget && docManager.contextForWidget(currentWidget));
-    };
-    commands.addCommand(CommandIDs.download, {
-      label: trans.__('Download'),
-      caption: trans.__('Download the file to your computer'),
-      isEnabled,
-      execute: () => {
-        // Checks that shell.currentWidget is valid:
-        if (isEnabled()) {
-          const context = docManager.contextForWidget(shell.currentWidget!);
-          if (!context) {
-            return showDialog({
-              title: trans.__('Cannot Download'),
-              body: trans.__('No context found for current widget!'),
-              buttons: [Dialog.okButton({ label: trans.__('OK') })]
-            });
-          }
-          return context.download();
-        }
-      }
-    });
-
-    const category = trans.__('File Operations');
-    if (palette) {
-      palette.addItem({ command: CommandIDs.download, category });
-    }
-  }
-};
+// export const downloadPlugin: JupyterFrontEndPlugin<void> = {
+//   id: '@jupyterlab/docmanager-extension:download',
+//   autoStart: true,
+//   requires: [ITranslator, IDocumentManager],
+//   optional: [ICommandPalette],
+//   activate: (
+//     app: JupyterFrontEnd,
+//     translator: ITranslator,
+//     docManager: IDocumentManager,
+//     palette: ICommandPalette | null
+//   ) => {
+//     const trans = translator.load('jupyterlab');
+//     const { commands, shell } = app;
+//     const isEnabled = () => {
+//       const { currentWidget } = shell;
+//       return !!(currentWidget && docManager.contextForWidget(currentWidget));
+//     };
+//     commands.addCommand(CommandIDs.download, {
+//       label: trans.__('Download'),
+//       caption: trans.__('Download the file to your computer'),
+//       isEnabled,
+//       execute: () => {
+//         // Checks that shell.currentWidget is valid:
+//         if (isEnabled()) {
+//           const context = docManager.contextForWidget(shell.currentWidget!);
+//           if (!context) {
+//             return showDialog({
+//               title: trans.__('Cannot Download'),
+//               body: trans.__('No context found for current widget!'),
+//               buttons: [Dialog.okButton({ label: trans.__('OK') })]
+//             });
+//           }
+//           return context.download();
+//         }
+//       }
+//     });
+
+//     const category = trans.__('File Operations');
+//     if (palette) {
+//       palette.addItem({ command: CommandIDs.download, category });
+//     }
+//   }
+// };

 /**
  * A plugin providing open-browser-tab commands.
@@ -438,7 +438,7 @@ const plugins: JupyterFrontEndPlugin<any>[] = [
   docManagerPlugin,
   pathStatusPlugin,
   savingStatusPlugin,
-  downloadPlugin,
+  // downloadPlugin,
   openBrowserTabPlugin
 ];
 export default plugins;

diff --git a/packages/docregistry/src/context.ts b/packages/docregistry/src/context.ts
index 966dadf146..f9bb12ed26 100644
--- a/packages/docregistry/src/context.ts
+++ b/packages/docregistry/src/context.ts
@@ -1047,6 +1047,8 @@ namespace Private {
   function createSaveNode(path: string): HTMLElement {
     const input = document.createElement('input');
     input.value = path;
-    return input;
+    const container = document.createElement('div');
+    container.appendChild(input);
+    return container;
   }
 }

diff --git a/packages/extensionmanager-extension/examples/listings/index.js b/packages/extensionmanager-extension/examples/listings/index.js
index 9d05d78fa7..19776fc525 100644
--- a/packages/extensionmanager-extension/examples/listings/index.js
+++ b/packages/extensionmanager-extension/examples/listings/index.js
@@ -37,7 +37,6 @@ window.addEventListener('load', async function () {
     require('@jupyterlab/shortcuts-extension'),
     require('@jupyterlab/statusbar-extension'),
     require('@jupyterlab/terminal-extension'),
-    require('@jupyterlab/theme-dark-extension'),
     require('@jupyterlab/theme-light-extension'),
     require('@jupyterlab/tooltip-extension'),
     require('@jupyterlab/ui-components-extension')

diff --git a/packages/extensionmanager-extension/examples/listings/package.json b/packages/extensionmanager-extension/examples/listings/package.json
index c7e3b09207..6dca5df7b2 100644
--- a/packages/extensionmanager-extension/examples/listings/package.json
+++ b/packages/extensionmanager-extension/examples/listings/package.json
@@ -34,7 +34,6 @@
     "@jupyterlab/shortcuts-extension": "^2.0.2",
     "@jupyterlab/statusbar-extension": "^2.0.2",
     "@jupyterlab/terminal-extension": "^2.0.2",
-    "@jupyterlab/theme-dark-extension": "^2.0.2",
     "@jupyterlab/theme-light-extension": "^2.0.2",
     "@jupyterlab/tooltip-extension": "^2.0.2",
     "@jupyterlab/ui-components-extension": "^2.0.2",

diff --git a/packages/extensionmanager-extension/schema/plugin.json b/packages/extensionmanager-extension/schema/plugin.json
index dda72c020d..3f2c190d75 100644
--- a/packages/extensionmanager-extension/schema/plugin.json
+++ b/packages/extensionmanager-extension/schema/plugin.json
@@ -28,7 +28,7 @@
     "enabled": {
       "title": "Enabled Status",
       "description": "Enables extension manager (requires Node.js/npm).\nWARNING: installing untrusted extensions may be unsafe.",
-      "default": true,
+      "default": false,
       "type": "boolean"
     },
     "disclaimed": {

diff --git a/packages/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts
index b6c810262b..18d20e6bb7 100644
--- a/packages/filebrowser-extension/src/index.ts
+++ b/packages/filebrowser-extension/src/index.ts
@@ -29,7 +29,7 @@ import { IDocumentManager } from '@jupyterlab/docmanager';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import {
   FileBrowser,
-  FileUploadStatus,
+  // FileUploadStatus,
   FilterFileBrowserModel,
   IFileBrowserCommands,
   IFileBrowserFactory,
@@ -39,18 +39,19 @@ import { Launcher } from '@jupyterlab/launcher';
 import { Contents } from '@jupyterlab/services';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IStateDB } from '@jupyterlab/statedb';
-import { IStatusBar } from '@jupyterlab/statusbar';
+// import { IStatusBar } from '@jupyterlab/statusbar';
 import { ITranslator } from '@jupyterlab/translation';
 import {
   addIcon,
   closeIcon,
   copyIcon,
   cutIcon,
-  downloadIcon,
+  // downloadIcon,
   editIcon,
   fileIcon,
   folderIcon,
-  linkIcon,
+  LabIcon,
+  // linkIcon,
   markdownIcon,
   newFolderIcon,
   pasteIcon,
@@ -60,8 +61,14 @@ import {
 } from '@jupyterlab/ui-components';
 import { find, IIterator, map, reduce, toArray } from '@lumino/algorithm';
 import { CommandRegistry } from '@lumino/commands';
-import { ContextMenu } from '@lumino/widgets';
+// import { ContextMenu } from '@lumino/widgets';
 import { JSONObject } from '@lumino/coreutils';
+import analysisSvgStr from '../style/icons/analysis.svg';
+
+const analysisIcon = new LabIcon({
+  name: 'analysis',
+  svgstr: analysisSvgStr
+});

 const FILE_BROWSER_FACTORY = 'FileBrowser';

@@ -176,10 +183,10 @@ const browser: JupyterFrontEndPlugin<void> = {
     }

     // Navigate to preferred-dir trait if found
-    const preferredPath = PageConfig.getOption('preferredPath');
-    if (preferredPath) {
-      await browser.model.cd(preferredPath);
-    }
+    // const preferredPath = PageConfig.getOption('preferredPath');
+    // if (preferredPath) {
+    //   await browser.model.cd(preferredPath);
+    // }

     addCommands(app, factory, translator, settingRegistry, commandPalette);

@@ -322,50 +329,50 @@ const factory: JupyterFrontEndPlugin<IFileBrowserFactory> = {
  * Users will still be able to retrieve files from the file download URLs the
  * server provides.
  */
-const downloadPlugin: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/filebrowser-extension:download',
-  requires: [IFileBrowserFactory, ITranslator],
-  autoStart: true,
-  activate: (
-    app: JupyterFrontEnd,
-    factory: IFileBrowserFactory,
-    translator: ITranslator
-  ): void => {
-    const trans = translator.load('jupyterlab');
-    const { commands } = app;
-    const { tracker } = factory;
-
-    commands.addCommand(CommandIDs.download, {
-      execute: () => {
-        const widget = tracker.currentWidget;
-
-        if (widget) {
-          return widget.download();
-        }
-      },
-      icon: downloadIcon.bindprops({ stylesheet: 'menuItem' }),
-      label: trans.__('Download')
-    });
-
-    commands.addCommand(CommandIDs.copyDownloadLink, {
-      execute: () => {
-        const widget = tracker.currentWidget;
-        if (!widget) {
-          return;
-        }
-
-        return widget.model.manager.services.contents
-          .getDownloadUrl(widget.selectedItems().next()!.path)
-          .then(url => {
-            Clipboard.copyToSystem(url);
-          });
-      },
-      icon: copyIcon.bindprops({ stylesheet: 'menuItem' }),
-      label: trans.__('Copy Download Link'),
-      mnemonic: 0
-    });
-  }
-};
+// const downloadPlugin: JupyterFrontEndPlugin<void> = {
+//   id: '@jupyterlab/filebrowser-extension:download',
+//   requires: [IFileBrowserFactory, ITranslator],
+//   autoStart: true,
+//   activate: (
+//     app: JupyterFrontEnd,
+//     factory: IFileBrowserFactory,
+//     translator: ITranslator
+//   ): void => {
+//     const trans = translator.load('jupyterlab');
+//     const { commands } = app;
+//     const { tracker } = factory;
+
+//     commands.addCommand(CommandIDs.download, {
+//       execute: () => {
+//         const widget = tracker.currentWidget;
+
+//         if (widget) {
+//           return widget.download();
+//         }
+//       },
+//       icon: downloadIcon.bindprops({ stylesheet: 'menuItem' }),
+//       label: trans.__('Download')
+//     });
+
+//     commands.addCommand(CommandIDs.copyDownloadLink, {
+//       execute: () => {
+//         const widget = tracker.currentWidget;
+//         if (!widget) {
+//           return;
+//         }
+
+//         return widget.model.manager.services.contents
+//           .getDownloadUrl(widget.selectedItems().next()!.path)
+//           .then(url => {
+//             Clipboard.copyToSystem(url);
+//           });
+//       },
+//       icon: copyIcon.bindprops({ stylesheet: 'menuItem' }),
+//       label: trans.__('Copy Download Link'),
+//       mnemonic: 0
+//     });
+//   }
+// };

 /**
  * A plugin to add the file browser widget to an ILabShell
@@ -398,7 +405,8 @@ const browserWidget: JupyterFrontEndPlugin<void> = {
     // Set attributes when adding the browser to the UI
     browser.node.setAttribute('role', 'region');
     browser.node.setAttribute('aria-label', trans.__('File Browser Section'));
-    browser.title.icon = folderIcon;
+    browser.title.icon = analysisIcon;
+    browser.title.label = '可视化编程';

     // Toolbar
     toolbarRegistry.registerFactory(
@@ -519,43 +527,43 @@ const browserWidget: JupyterFrontEndPlugin<void> = {
  * /user-redirect URL for JupyterHub), disable this plugin and replace it
  * with another implementation.
  */
-const shareFile: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/filebrowser-extension:share-file',
-  requires: [IFileBrowserFactory, ITranslator],
-  autoStart: true,
-  activate: (
-    app: JupyterFrontEnd,
-    factory: IFileBrowserFactory,
-    translator: ITranslator
-  ): void => {
-    const trans = translator.load('jupyterlab');
-    const { commands } = app;
-    const { tracker } = factory;
-
-    commands.addCommand(CommandIDs.copyShareableLink, {
-      execute: () => {
-        const widget = tracker.currentWidget;
-        const model = widget?.selectedItems().next();
-        if (!model) {
-          return;
-        }
-
-        Clipboard.copyToSystem(
-          PageConfig.getUrl({
-            workspace: PageConfig.defaultWorkspace,
-            treePath: model.path,
-            toShare: true
-          })
-        );
-      },
-      isVisible: () =>
-        !!tracker.currentWidget &&
-        toArray(tracker.currentWidget.selectedItems()).length === 1,
-      icon: linkIcon.bindprops({ stylesheet: 'menuItem' }),
-      label: trans.__('Copy Shareable Link')
-    });
-  }
-};
+// const shareFile: JupyterFrontEndPlugin<void> = {
+//   id: '@jupyterlab/filebrowser-extension:share-file',
+//   requires: [IFileBrowserFactory, ITranslator],
+//   autoStart: true,
+//   activate: (
+//     app: JupyterFrontEnd,
+//     factory: IFileBrowserFactory,
+//     translator: ITranslator
+//   ): void => {
+//     const trans = translator.load('jupyterlab');
+//     const { commands } = app;
+//     const { tracker } = factory;
+
+//     commands.addCommand(CommandIDs.copyShareableLink, {
+//       execute: () => {
+//         const widget = tracker.currentWidget;
+//         const model = widget?.selectedItems().next();
+//         if (!model) {
+//           return;
+//         }
+
+//         Clipboard.copyToSystem(
+//           PageConfig.getUrl({
+//             workspace: PageConfig.defaultWorkspace,
+//             treePath: model.path,
+//             toShare: true
+//           })
+//         );
+//       },
+//       isVisible: () =>
+//         !!tracker.currentWidget &&
+//         toArray(tracker.currentWidget.selectedItems()).length === 1,
+//       icon: linkIcon.bindprops({ stylesheet: 'menuItem' }),
+//       label: trans.__('Copy Shareable Link')
+//     });
+//   }
+// };

 /**
  * The "Open With" context menu.
@@ -563,51 +571,51 @@ const shareFile: JupyterFrontEndPlugin<void> = {
  * This is its own plugin in case you would like to disable this feature.
  * e.g. jupyter labextension disable @jupyterlab/filebrowser-extension:open-with
  */
-const openWithPlugin: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/filebrowser-extension:open-with',
-  requires: [IFileBrowserFactory],
-  autoStart: true,
-  activate: (app: JupyterFrontEnd, factory: IFileBrowserFactory): void => {
-    const { docRegistry } = app;
-    const { tracker } = factory;
-
-    function updateOpenWithMenu(contextMenu: ContextMenu) {
-      const openWith =
-        contextMenu.menu.items.find(
-          item =>
-            item.type === 'submenu' &&
-            item.submenu?.id === 'jp-contextmenu-open-with'
-        )?.submenu ?? null;
-
-      if (!openWith) {
-        return; // Bail early if the open with menu is not displayed
-      }
-
-      // clear the current menu items
-      openWith.clearItems();
-
-      // get the widget factories that could be used to open all of the items
-      // in the current filebrowser selection
-      const factories = tracker.currentWidget
-        ? Private.OpenWith.intersection<string>(
-            map(tracker.currentWidget.selectedItems(), i => {
-              return Private.OpenWith.getFactories(docRegistry, i);
-            })
-          )
-        : new Set<string>();
-
-      // make new menu items from the widget factories
-      factories.forEach(factory => {
-        openWith.addItem({
-          args: { factory: factory },
-          command: CommandIDs.open
-        });
-      });
-    }
-
-    app.contextMenu.opened.connect(updateOpenWithMenu);
-  }
-};
+// const openWithPlugin: JupyterFrontEndPlugin<void> = {
+//   id: '@jupyterlab/filebrowser-extension:open-with',
+//   requires: [IFileBrowserFactory],
+//   autoStart: true,
+//   activate: (app: JupyterFrontEnd, factory: IFileBrowserFactory): void => {
+//     const { docRegistry } = app;
+//     const { tracker } = factory;
+
+//     function updateOpenWithMenu(contextMenu: ContextMenu) {
+//       const openWith =
+//         contextMenu.menu.items.find(
+//           item =>
+//             item.type === 'submenu' &&
+//             item.submenu?.id === 'jp-contextmenu-open-with'
+//         )?.submenu ?? null;
+
+//       if (!openWith) {
+//         return; // Bail early if the open with menu is not displayed
+//       }
+
+//       // clear the current menu items
+//       openWith.clearItems();
+
+//       // get the widget factories that could be used to open all of the items
+//       // in the current filebrowser selection
+//       const factories = tracker.currentWidget
+//         ? Private.OpenWith.intersection<string>(
+//             map(tracker.currentWidget.selectedItems(), i => {
+//               return Private.OpenWith.getFactories(docRegistry, i);
+//             })
+//           )
+//         : new Set<string>();
+
+//       // make new menu items from the widget factories
+//       factories.forEach(factory => {
+//         openWith.addItem({
+//           args: { factory: factory },
+//           command: CommandIDs.open
+//         });
+//       });
+//     }
+
+//     app.contextMenu.opened.connect(updateOpenWithMenu);
+//   }
+// };

 /**
  * The "Open in New Browser Tab" context menu.
@@ -618,181 +626,181 @@ const openWithPlugin: JupyterFrontEndPlugin<void> = {
  * Note: If disabling this, you may also want to disable:
  * @jupyterlab/docmanager-extension:open-browser-tab
  */
-const openBrowserTabPlugin: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/filebrowser-extension:open-browser-tab',
-  requires: [IFileBrowserFactory, ITranslator],
-  autoStart: true,
-  activate: (
-    app: JupyterFrontEnd,
-    factory: IFileBrowserFactory,
-    translator: ITranslator
-  ): void => {
-    const { commands } = app;
-    const trans = translator.load('jupyterlab');
-    const { tracker } = factory;
-
-    commands.addCommand(CommandIDs.openBrowserTab, {
-      execute: args => {
-        const widget = tracker.currentWidget;
-
-        if (!widget) {
-          return;
-        }
-
-        const mode = args['mode'] as string | undefined;
-
-        return Promise.all(
-          toArray(
-            map(widget.selectedItems(), item => {
-              if (mode === 'single-document') {
-                const url = PageConfig.getUrl({
-                  mode: 'single-document',
-                  treePath: item.path
-                });
-                const opened = window.open();
-                if (opened) {
-                  opened.opener = null;
-                  opened.location.href = url;
-                } else {
-                  throw new Error('Failed to open new browser tab.');
-                }
-              } else {
-                return commands.execute('docmanager:open-browser-tab', {
-                  path: item.path
-                });
-              }
-            })
-          )
-        );
-      },
-      icon: addIcon.bindprops({ stylesheet: 'menuItem' }),
-      label: args =>
-        args['mode'] === 'single-document'
-          ? trans.__('Open in Simple Mode')
-          : trans.__('Open in New Browser Tab'),
-      mnemonic: 0
-    });
-  }
-};
+// const openBrowserTabPlugin: JupyterFrontEndPlugin<void> = {
+//   id: '@jupyterlab/filebrowser-extension:open-browser-tab',
+//   requires: [IFileBrowserFactory, ITranslator],
+//   autoStart: true,
+//   activate: (
+//     app: JupyterFrontEnd,
+//     factory: IFileBrowserFactory,
+//     translator: ITranslator
+//   ): void => {
+//     const { commands } = app;
+//     const trans = translator.load('jupyterlab');
+//     const { tracker } = factory;
+
+//     commands.addCommand(CommandIDs.openBrowserTab, {
+//       execute: args => {
+//         const widget = tracker.currentWidget;
+
+//         if (!widget) {
+//           return;
+//         }
+
+//         const mode = args['mode'] as string | undefined;
+
+//         return Promise.all(
+//           toArray(
+//             map(widget.selectedItems(), item => {
+//               if (mode === 'single-document') {
+//                 const url = PageConfig.getUrl({
+//                   mode: 'single-document',
+//                   treePath: item.path
+//                 });
+//                 const opened = window.open();
+//                 if (opened) {
+//                   opened.opener = null;
+//                   opened.location.href = url;
+//                 } else {
+//                   throw new Error('Failed to open new browser tab.');
+//                 }
+//               } else {
+//                 return commands.execute('docmanager:open-browser-tab', {
+//                   path: item.path
+//                 });
+//               }
+//             })
+//           )
+//         );
+//       },
+//       icon: addIcon.bindprops({ stylesheet: 'menuItem' }),
+//       label: args =>
+//         args['mode'] === 'single-document'
+//           ? trans.__('Open in Simple Mode')
+//           : trans.__('Open in New Browser Tab'),
+//       mnemonic: 0
+//     });
+//   }
+// };

 /**
  * A plugin providing file upload status.
  */
-export const fileUploadStatus: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/filebrowser-extension:file-upload-status',
-  autoStart: true,
-  requires: [IFileBrowserFactory, ITranslator],
-  optional: [IStatusBar],
-  activate: (
-    app: JupyterFrontEnd,
-    browser: IFileBrowserFactory,
-    translator: ITranslator,
-    statusBar: IStatusBar | null
-  ) => {
-    if (!statusBar) {
-      // Automatically disable if statusbar missing
-      return;
-    }
-    const item = new FileUploadStatus({
-      tracker: browser.tracker,
-      translator
-    });
-
-    statusBar.registerStatusItem(
-      '@jupyterlab/filebrowser-extension:file-upload-status',
-      {
-        item,
-        align: 'middle',
-        isActive: () => {
-          return !!item.model && item.model.items.length > 0;
-        },
-        activeStateChanged: item.model.stateChanged
-      }
-    );
-  }
-};
+// export const fileUploadStatus: JupyterFrontEndPlugin<void> = {
+//   id: '@jupyterlab/filebrowser-extension:file-upload-status',
+//   autoStart: true,
+//   requires: [IFileBrowserFactory, ITranslator],
+//   optional: [IStatusBar],
+//   activate: (
+//     app: JupyterFrontEnd,
+//     browser: IFileBrowserFactory,
+//     translator: ITranslator,
+//     statusBar: IStatusBar | null
+//   ) => {
+//     if (!statusBar) {
+//       // Automatically disable if statusbar missing
+//       return;
+//     }
+//     const item = new FileUploadStatus({
+//       tracker: browser.tracker,
+//       translator
+//     });
+
+//     statusBar.registerStatusItem(
+//       '@jupyterlab/filebrowser-extension:file-upload-status',
+//       {
+//         item,
+//         align: 'middle',
+//         isActive: () => {
+//           return !!item.model && item.model.items.length > 0;
+//         },
+//         activeStateChanged: item.model.stateChanged
+//       }
+//     );
+//   }
+// };

 /**
  * A plugin to open files from remote URLs
  */
-const openUrlPlugin: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/filebrowser-extension:open-url',
-  autoStart: true,
-  requires: [IFileBrowserFactory, ITranslator],
-  optional: [ICommandPalette],
-  activate: (
-    app: JupyterFrontEnd,
-    factory: IFileBrowserFactory,
-    translator: ITranslator,
-    palette: ICommandPalette | null
-  ) => {
-    const { commands } = app;
-    const trans = translator.load('jupyterlab');
-    const { defaultBrowser: browser } = factory;
-    const command = CommandIDs.openUrl;
-
-    commands.addCommand(command, {
-      label: args =>
-        args.url ? trans.__('Open %1', args.url) : trans.__('Open from URL…'),
-      caption: args =>
-        args.url ? trans.__('Open %1', args.url) : trans.__('Open from URL'),
-      execute: async args => {
-        let url: string | undefined = (args?.url as string) ?? '';
-        if (!url) {
-          url =
-            (
-              await InputDialog.getText({
-                label: trans.__('URL'),
-                placeholder: 'https://example.com/path/to/file',
-                title: trans.__('Open URL'),
-                okLabel: trans.__('Open')
-              })
-            ).value ?? undefined;
-        }
-        if (!url) {
-          return;
-        }
-
-        let type = '';
-        let blob;
-
-        // fetch the file from the URL
-        try {
-          const req = await fetch(url);
-          blob = await req.blob();
-          type = req.headers.get('Content-Type') ?? '';
-        } catch (reason) {
-          if (reason.response && reason.response.status !== 200) {
-            reason.message = trans.__('Could not open URL: %1', url);
-          }
-          return showErrorMessage(trans.__('Cannot fetch'), reason);
-        }
-
-        // upload the content of the file to the server
-        try {
-          const name = PathExt.basename(url);
-          const file = new File([blob], name, { type });
-          const model = await browser.model.upload(file);
-          return commands.execute('docmanager:open', {
-            path: model.path
-          });
-        } catch (error) {
-          return showErrorMessage(
-            trans._p('showErrorMessage', 'Upload Error'),
-            error
-          );
-        }
-      }
-    });
-
-    if (palette) {
-      palette.addItem({
-        command,
-        category: trans.__('File Operations')
-      });
-    }
-  }
-};
+// const openUrlPlugin: JupyterFrontEndPlugin<void> = {
+//   id: '@jupyterlab/filebrowser-extension:open-url',
+//   autoStart: true,
+//   requires: [IFileBrowserFactory, ITranslator],
+//   optional: [ICommandPalette],
+//   activate: (
+//     app: JupyterFrontEnd,
+//     factory: IFileBrowserFactory,
+//     translator: ITranslator,
+//     palette: ICommandPalette | null
+//   ) => {
+//     const { commands } = app;
+//     const trans = translator.load('jupyterlab');
+//     const { defaultBrowser: browser } = factory;
+//     const command = CommandIDs.openUrl;
+
+//     commands.addCommand(command, {
+//       label: args =>
+//         args.url ? trans.__('Open %1', args.url) : trans.__('Open from URL…'),
+//       caption: args =>
+//         args.url ? trans.__('Open %1', args.url) : trans.__('Open from URL'),
+//       execute: async args => {
+//         let url: string | undefined = (args?.url as string) ?? '';
+//         if (!url) {
+//           url =
+//             (
+//               await InputDialog.getText({
+//                 label: trans.__('URL'),
+//                 placeholder: 'https://example.com/path/to/file',
+//                 title: trans.__('Open URL'),
+//                 okLabel: trans.__('Open')
+//               })
+//             ).value ?? undefined;
+//         }
+//         if (!url) {
+//           return;
+//         }
+
+//         let type = '';
+//         let blob;
+
+//         // fetch the file from the URL
+//         try {
+//           const req = await fetch(url);
+//           blob = await req.blob();
+//           type = req.headers.get('Content-Type') ?? '';
+//         } catch (reason) {
+//           if (reason.response && reason.response.status !== 200) {
+//             reason.message = trans.__('Could not open URL: %1', url);
+//           }
+//           return showErrorMessage(trans.__('Cannot fetch'), reason);
+//         }
+
+//         // upload the content of the file to the server
+//         try {
+//           const name = PathExt.basename(url);
+//           const file = new File([blob], name, { type });
+//           const model = await browser.model.upload(file);
+//           return commands.execute('docmanager:open', {
+//             path: model.path
+//           });
+//         } catch (error) {
+//           return showErrorMessage(
+//             trans._p('showErrorMessage', 'Upload Error'),
+//             error
+//           );
+//         }
+//       }
+//     });
+
+//     if (palette) {
+//       palette.addItem({
+//         command,
+//         category: trans.__('File Operations')
+//       });
+//     }
+//   }
+// };

 /**
  * Add the main file browser commands to the application's command registry.
@@ -1342,13 +1350,13 @@ namespace Private {
 const plugins: JupyterFrontEndPlugin<any>[] = [
   factory,
   browser,
-  shareFile,
-  fileUploadStatus,
-  downloadPlugin,
-  browserWidget,
-  openWithPlugin,
-  openBrowserTabPlugin,
-  openUrlPlugin
+  // shareFile,
+  // fileUploadStatus,
+  // downloadPlugin,
+  browserWidget
+  // openWithPlugin,
+  // openBrowserTabPlugin,
+  // openUrlPlugin
 ];
 export default plugins;
```

- 侧边栏图标改动

```diff
diff --git a/packages/filebrowser-extension/src/svg.d.ts b/packages/filebrowser-extension/src/svg.d.ts
new file mode 100644
index 0000000000..0ca27598c5
--- /dev/null
+++ b/packages/filebrowser-extension/src/svg.d.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}
diff --git a/packages/filebrowser-extension/style/icons/analysis.svg b/packages/filebrowser-extension/style/icons/analysis.svg
new file mode 100644
index 0000000000..780413c090
--- /dev/null
+++ b/packages/filebrowser-extension/style/icons/analysis.svg
@@ -0,0 +1,5 @@
+<svg width="4.2214mm" height="4.2302mm" version="1.1" viewBox="0 0 4.2214 4.2302" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#000000" class="jp-icon3 jp-icon-selectable"
+    d="m3.6685 2.0479a0.13229 0.13229 0 0 0-0.074931 0.026355 0.13229 0.13229 0 0 0-0.027388 0.18552l0.44752 0.60151a0.13229 0.13229 0 0 0 0.18552 0.027389 0.13229 0.13229 0 0 0 0.02222-0.021188v-0.17105l-0.4439-0.5948a0.13229 0.13229 0 0 0-0.0863-0.05271 0.13229 0.13229 0 0 0-0.022738-0.00103zm-0.648-1.9296a1.066 1.066 0 0 0-1.0661 1.0661 1.066 1.066 0 0 0 1.0661 1.0661 1.066 1.066 0 0 0 1.0661-1.0661 1.066 1.066 0 0 0-1.0661-1.0661zm0 0.051676a1.0142 1.0142 0 0 1 1.0139 1.0144 1.0142 1.0142 0 0 1-1.0139 1.0144 1.0142 1.0142 0 0 1-1.0144-1.0144 1.0142 1.0142 0 0 1 1.0144-1.0144zm-1.4834 3.2988v0.60938h0.26562v-0.60938zm-0.68944 0.4978a0.1325 0.1325 0 0 0-0.13281 0.13281 0.1325 0.1325 0 0 0 0.13281 0.13086h1.707a0.1325 0.1325 0 0 0 0.13281-0.13086 0.1325 0.1325 0 0 0-0.13281-0.13281zm-0.66576-3.6286c-0.098598 0-0.17777 0.079169-0.17777 0.17777v2.8448c0 0.098598 0.079169 0.17828 0.17777 0.17828h3.0949c0.098598 0 0.17777-0.079685 0.17777-0.17828v-0.86868h-0.22996v0.67903c0 0.085436-0.069077 0.154-0.15451 0.154h-2.6815c-0.085436 0-0.154-0.06856-0.154-0.154v-2.465c0-0.085436 0.06856-0.15451 0.154-0.15451h1.3715v-0.21342zm2.8309-0.33796c-0.65642-1.4612e-8 -1.1885 0.53212-1.1885 1.1885 1.188e-4 0.24219 0.074223 0.47857 0.21239 0.67746 0.00764 0.018057 0.019516 0.034009 0.034623 0.046508 0.22473 0.2926 0.5726 0.46423 0.94153 0.46458 0.20986-6e-5 0.41597-0.055689 0.59737-0.16123 0.00235 0.00547 0.0053 0.010668 0.00878 0.015503l0.45114 0.62115c0.026992 0.036636 0.078554 0.044497 0.11524 0.017571 0.036636-0.026992 0.044497-0.078554 0.017571-0.11524l-0.45114-0.61906c-0.00249-0.00348-0.00526-0.00677-0.00827-0.00982 0.28892-0.22521 0.45786-0.57107 0.45786-0.93741 0-0.65642-0.53212-1.1885-1.1885-1.1885zm0 0.16795c0.56366 1e-8 1.0206 0.45693 1.0206 1.0206 0 0.56366-0.45693 1.0206-1.0206 1.0206-0.28641-4.41e-5 -0.55961-0.12043-0.75292-0.33176l0.57567-0.75344c0.041476-0.053839 0.031025-0.13118-0.023254-0.17208-0.053488-0.040071-0.12925-0.029707-0.17001 0.023254l-0.53072 0.69193c-0.07831-0.14735-0.1193-0.31165-0.11937-0.47852 0-0.56366 0.45693-1.0206 1.0206-1.0206zm-2.8707 0.17001c-0.078728 0-0.14211 0.060602-0.14211 0.13539v2.9337c0 0.074799 0.06338 0.13487 0.14211 0.13487h1.4454v0.52347h-0.75807c-0.044899 4.497e-4 -0.081186 0.036747-0.081647 0.081647 1.8045e-4 0.045103 0.036546 0.0817 0.081647 0.082165h1.7446c0.0451-4.762e-4 0.081467-0.037062 0.081647-0.082165-4.498e-4 -0.044899-0.036748-0.081186-0.081647-0.081647h-0.82268v-0.52347h1.5689c0.078728 0 0.14211-0.060094 0.14211-0.13487l-0.0077522-0.91518-0.15141 0.018086v0.76223c0 0.067899-0.0577 0.12247-0.12919 0.12247h-2.8855c-0.07149 0-0.12919-0.054503-0.12919-0.12247v-0.7028c8.7629e-4 -6.694e-4 0.001738-0.00136 0.002584-0.00207l0.9591-1.1131 0.5059 1.0583c0.024655 0.053403 0.098384 0.05894 0.13074 0.00982l0.27233-0.3948c-0.035803-0.037507-0.069447-0.077016-0.10077-0.11834l-0.2222 0.32194-0.50021-1.0449c-0.022933-0.049186-0.088894-0.058491-0.12454-0.01757l-0.92293 1.0723v-1.7327c0-0.067899 0.0577-0.12299 0.12919-0.12299h1.4684l0.00332-0.14728z"
+    style="-inkscape-stroke:none" />
+</svg>
\ No newline at end of file
```

- 将原来的文件浏览器改为编程列表, 修改布局和样式

```diff
diff --git a/packages/filebrowser/src/browser.ts b/packages/filebrowser/src/browser.ts
index d7fde430e2..fbe49b2562 100644
--- a/packages/filebrowser/src/browser.ts
+++ b/packages/filebrowser/src/browser.ts
@@ -106,10 +106,15 @@ export class FileBrowser extends Widget {
     this._filenameSearcher.addClass(FILTERBOX_CLASS);
     this.listing.addClass(LISTING_CLASS);

+    const header = new Widget();
+    header.node.textContent = '编程列表';
+    header.addClass('jp-FileBrowser-header');
+
     this.layout = new PanelLayout();
-    this.layout.addWidget(this.toolbar);
-    this.layout.addWidget(this._filenameSearcher);
-    this.layout.addWidget(this.crumbs);
+    this.layout.addWidget(header);
+    // this.layout.addWidget(this.toolbar);
+    // this.layout.addWidget(this._filenameSearcher);
+    // this.layout.addWidget(this.crumbs);
     this.layout.addWidget(this.listing);

     if (options.restore !== false) {
@@ -180,12 +185,12 @@ export class FileBrowser extends Widget {
     });
     this._filenameSearcher.addClass(FILTERBOX_CLASS);

-    this.layout.removeWidget(this._filenameSearcher);
-    this.layout.removeWidget(this.crumbs);
+    // this.layout.removeWidget(this._filenameSearcher);
+    // this.layout.removeWidget(this.crumbs);
     this.layout.removeWidget(this.listing);

-    this.layout.addWidget(this._filenameSearcher);
-    this.layout.addWidget(this.crumbs);
+    // this.layout.addWidget(this._filenameSearcher);
+    // this.layout.addWidget(this.crumbs);
     this.layout.addWidget(this.listing);
   }

diff --git a/packages/filebrowser/src/crumbs.ts b/packages/filebrowser/src/crumbs.ts
index b67e132a31..cd098f37fb 100644
--- a/packages/filebrowser/src/crumbs.ts
+++ b/packages/filebrowser/src/crumbs.ts
@@ -73,8 +73,9 @@ export class BreadCrumbs extends Widget {
     this.addClass(BREADCRUMB_CLASS);
     this._crumbs = Private.createCrumbs();
     this._crumbSeps = Private.createCrumbSeparators();
-    const hasPreferred = PageConfig.getOption('preferredPath');
-    this._hasPreferred = hasPreferred && hasPreferred !== '/' ? true : false;
+    // const hasPreferred = PageConfig.getOption('preferredPath');
+    // this._hasPreferred = hasPreferred && hasPreferred !== '/' ? true : false;
+    this._hasPreferred = false;
     if (this._hasPreferred) {
       this.node.appendChild(this._crumbs[Private.Crumb.Preferred]);
     }

diff --git a/packages/filebrowser/src/directoryswitcher.ts b/packages/filebrowser/src/directoryswitcher.ts
new file mode 100644
index 0000000000..2a96059486
--- /dev/null
+++ b/packages/filebrowser/src/directoryswitcher.ts
@@ -0,0 +1,19 @@
+import { Widget } from '@lumino/widgets';
+
+export default class DirectorySwitcher extends Widget {
+  constructor(options: Widget.IOptions) {
+    super(options);
+    this._createButtons();
+  }
+
+  private _createButtons() {
+    const btn1 = document.createElement('button');
+    btn1.textContent = '开发目录';
+    btn1.classList.add('jldbq-btn', 'jldbq-btn-current');
+    this.node.appendChild(btn1);
+    const btn2 = document.createElement('button');
+    btn2.textContent = '通用算子库';
+    btn2.classList.add('jldbq-btn');
+    this.node.appendChild(btn2);
+  }
+}

diff --git a/packages/filebrowser/style/base.css b/packages/filebrowser/style/base.css
index 940da54f23..1973c3f35a 100644
--- a/packages/filebrowser/style/base.css
+++ b/packages/filebrowser/style/base.css
@@ -36,6 +36,13 @@
   justify-content: flex-start;
 }

+.jp-FileBrowser-header {
+  margin: 5px;
+  padding: 15px;
+  font-weight: bold;
+  border-bottom: 1px solid #dbe3ea;
+}
+
 .jp-BreadCrumbs {
   flex: 0 0 auto;
   margin: 8px 12px 8px 12px;
@@ -127,13 +134,9 @@
   outline: 0;
 }

-.jp-DirListing:focus-visible {
-  border: 1px solid var(--jp-brand-color1);
-}
-
 .jp-DirListing-header {
   flex: 0 0 auto;
-  display: flex;
+  display: none;
   flex-direction: row;
   overflow: hidden;
   border-top: var(--jp-border-width) solid var(--jp-border-color2);
@@ -190,7 +193,6 @@
   padding: 0;
   list-style-type: none;
   overflow: auto;
-  background-color: var(--jp-layout-color1);
 }

 .jp-DirListing-content mark {
@@ -251,6 +253,7 @@
 }

 .jp-DirListing-itemModified {
+  display: none;
   flex: 0 0 125px;
   text-align: right;
 }
```

- 添加数据资产相关代码

```diff
diff --git a/packages/jldbq-extenison/package.json b/packages/jldbq-extenison/package.json
new file mode 100644
index 0000000000..02e5c0f464
--- /dev/null
+++ b/packages/jldbq-extenison/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "@jupyterlab/jldbq-extension",
+  "version": "1.0.0",
+  "description": "JLDBQ Extension",
+  "homepage": "",
+  "license": "MIT",
+  "author": "yili",
+  "sideEffects": [
+    "style/**/*.css",
+    "style/index.js"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "directories": {
+    "lib": "lib/"
+  },
+  "files": [
+    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+    "schema/*.json"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "clean": "rimraf lib && rimraf tsconfig.tsbuildinfo",
+    "docs": "typedoc src",
+    "watch": "tsc -b --watch"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@jupyterlab/application": "^3.4.3",
+    "@jupyterlab/apputils": "^3.4.3",
+    "@jupyterlab/settingregistry": "^3.4.3",
+    "@jupyterlab/ui-components": "^3.4.3",
+    "@lumino/signaling": "^1.10.0",
+    "@lumino/widgets": "^1.30.0",
+    "@mui/icons-material": "^5.8.0",
+    "@mui/lab": "^5.0.0-alpha.83",
+    "@mui/material": "^5.8.1",
+    "@silevis/reactgrid": "^4.0.3",
+    "antd": "^4.22.3",
+    "moment": "^2.29.4",
+    "react": "^17.0.1",
+    "react-select": "^5.4.0",
+    "swr": "^1.3.0"
+  },
+  "devDependencies": {
+    "rimraf": "~3.0.0",
+    "typedoc": "~0.21.2",
+    "typescript": "~4.1.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "jupyterlab": {
+    "extension": true,
+    "schemaDir": "schema"
+  },
+  "styleModule": "style/index.js"
+}
```

- 数据资产前端连接后端的配置项

```diff
diff --git a/packages/jldbq-extenison/schema/plugin.json b/packages/jldbq-extenison/schema/plugin.json
new file mode 100644
index 0000000000..8a5b32c902
--- /dev/null
+++ b/packages/jldbq-extenison/schema/plugin.json
@@ -0,0 +1,14 @@
+{
+  "title": "JLDBQ",
+  "description": "JLDBQ settings.",
+  "type": "object",
+  "properties": {
+    "flaskBackend": {
+      "title": "Flask Backend address.",
+      "description": "Flask Backend address.",
+      "type": "string",
+      "default": "http://127.0.0.1:5000"
+    }
+  },
+  "additionalProperties": false
+}
```

- 实现数据预览的表格

```diff
diff --git a/packages/jldbq-extenison/src/DataTable.tsx b/packages/jldbq-extenison/src/DataTable.tsx
new file mode 100644
index 0000000000..2f797b7356
--- /dev/null
+++ b/packages/jldbq-extenison/src/DataTable.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Cell, Column, Id, ReactGrid, Row } from '@silevis/reactgrid';
+import { useMemo, useState } from 'react';
+import { ITableData } from './api/datasource';
+import '@silevis/reactgrid/styles.css';
+
+interface IProps {
+  data: ITableData;
+}
+
+const getText = (value: any): string => {
+  if (value === null || value === undefined) {
+    return '';
+  } else if (typeof value === 'object') {
+    return JSON.stringify(value);
+  } else {
+    return value.toString();
+  }
+};
+
+const DataTable = ({ data }: IProps): JSX.Element => {
+  const [cols, setCols] = useState<Column[]>(() =>
+    Object.keys(data).map(columnId => {
+      return { columnId, width: 100, resizable: true };
+    })
+  );
+
+  const rows = useMemo((): Row<Cell>[] => {
+    const colNames = Object.keys(data);
+    const header = {
+      rowId: 'header',
+      cells: colNames.map(text => {
+        return {
+          text,
+          type: 'header'
+        };
+      })
+    };
+    const dataRows = Object.keys(data[colNames[0]]).map(rowId => {
+      return {
+        rowId,
+        cells: colNames.map(c => {
+          return {
+            type: 'text',
+            text: getText(data[c][rowId]),
+            nonEditable: true
+          };
+        })
+      };
+    });
+    return [header, ...dataRows];
+  }, [data]);
+
+  const handleColumnResize = (ci: Id, width: number) => {
+    setCols(prevColumns => {
+      const columnIndex = prevColumns.findIndex(el => el.columnId === ci);
+      const resizedColumn = prevColumns[columnIndex];
+      const updatedColumn = { ...resizedColumn, width };
+      prevColumns[columnIndex] = updatedColumn;
+      return [...prevColumns];
+    });
+  };
+
+  return (
+    <div style={{ width: '100%', height: '100%', overflow: 'scroll' }}>
+      <ReactGrid
+        enableRangeSelection
+        stickyTopRows={1}
+        rows={rows}
+        columns={cols}
+        onColumnResized={handleColumnResize}
+      />
+    </div>
+  );
+};
+
+export default DataTable;

diff --git a/packages/jldbq-extenison/src/DataTableWidget.tsx b/packages/jldbq-extenison/src/DataTableWidget.tsx
new file mode 100644
index 0000000000..ff8ed85207
--- /dev/null
+++ b/packages/jldbq-extenison/src/DataTableWidget.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+import DataTable from './DataTable';
+import { fetchTableContent, IDatasource, ITableData } from './api/datasource';
+
+class DataTableWidget extends ReactWidget {
+  constructor(
+    datasource: IDatasource,
+    tableName: string,
+    options?: Widget.IOptions
+  ) {
+    super(options);
+    void this._requestData(datasource, tableName);
+  }
+
+  private _requestData = async (datasource: IDatasource, tableName: string) => {
+    const res = await fetchTableContent(datasource, tableName);
+    if (res === 'error') {
+      this._err = res;
+    } else {
+      this._data = res;
+    }
+    this.update();
+  };
+
+  render(): JSX.Element {
+    if (this._err) {
+      return <div>Error</div>;
+    } else if (!this._data) {
+      return <div>Loading ...</div>;
+    } else {
+      return <DataTable data={this._data} />;
+    }
+  }
+
+  private _data: ITableData | null = null;
+  private _err: any;
+}
+
+export default DataTableWidget;
```

- 实现数据源管理面板

```diff
diff --git a/packages/jldbq-extenison/src/DataView.tsx b/packages/jldbq-extenison/src/DataView.tsx
new file mode 100644
index 0000000000..b2af5d4cf8
--- /dev/null
+++ b/packages/jldbq-extenison/src/DataView.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { useState } from 'react';
+
+interface IProps {
+  dataSourceElement: JSX.Element;
+  dataSyncElement: JSX.Element;
+}
+
+type ViewType = 'datasource' | 'datasync';
+
+const SwitchButton: React.FunctionComponent<{
+  viewType: ViewType;
+  current: ViewType;
+  label: string;
+  onClick: (t: ViewType) => void;
+}> = props => {
+  return (
+    <button
+      type="button"
+      className={
+        'jldbq-btn ' +
+        (props.viewType === props.current ? 'jldbq-btn-current' : '')
+      }
+      onClick={() => props.onClick(props.viewType)}
+    >
+      {props.label}
+    </button>
+  );
+};
+
+const DataView: React.FunctionComponent<IProps> = props => {
+  const [view, setView] = useState('datasource' as ViewType);
+
+  const el =
+    view === 'datasource' ? props.dataSourceElement : props.dataSyncElement;
+
+  return (
+    <div
+      style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '5px'
+      }}
+    >
+      <div
+        style={{
+          padding: '5px 5px 10px',
+          borderBottom: '1px solid #DBE3EA',
+          display: 'flex',
+          justifyContent: 'space-around',
+          alignItems: 'center'
+        }}
+      >
+        <SwitchButton
+          viewType="datasource"
+          current={view}
+          label="数据源管理"
+          onClick={setView}
+        />
+        <SwitchButton
+          viewType="datasync"
+          current={view}
+          label="同步配置"
+          onClick={setView}
+        />
+      </div>
+      {el}
+    </div>
+  );
+};
+
+export default DataView;

diff --git a/packages/jldbq-extenison/src/DataViewWidget.tsx b/packages/jldbq-extenison/src/DataViewWidget.tsx
new file mode 100644
index 0000000000..0ab84b92f9
--- /dev/null
+++ b/packages/jldbq-extenison/src/DataViewWidget.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { ISignal, Signal } from '@lumino/signaling';
+import DatasourceView from './DatasourceView';
+import DatasyncView from './DatasyncView';
+import DataView from './DataView';
+import { IDatasource } from './api/datasource';
+import { Widget } from '@lumino/widgets';
+
+interface ITableOpenSignalData {
+  datasource: IDatasource;
+  tableName: string;
+}
+
+class DataViewWidget extends ReactWidget {
+  constructor(manager: string, options?: Widget.IOptions) {
+    super(options);
+    this._manager = manager;
+  }
+
+  public get tableOpened(): ISignal<DataViewWidget, ITableOpenSignalData> {
+    return this._tableOpened;
+  }
+
+  render(): JSX.Element {
+    const datasourceView = (
+      <DatasourceView
+        manager={this._manager}
+        onOpenTable={(datasource, tableName) =>
+          this._tableOpened.emit({ datasource, tableName })
+        }
+      />
+    );
+
+    const datasyncView = <DatasyncView />;
+
+    return (
+      <div
+        style={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+      >
+        <DataView
+          dataSourceElement={datasourceView}
+          dataSyncElement={datasyncView}
+        />
+      </div>
+    );
+  }
+
+  private _manager: string;
+  private _tableOpened = new Signal<DataViewWidget, ITableOpenSignalData>(this);
+}
+
+export default DataViewWidget;
```

- 实现添加数据源的表单

```diff
diff --git a/packages/jldbq-extenison/src/DatasourceForm.tsx b/packages/jldbq-extenison/src/DatasourceForm.tsx
new file mode 100644
index 0000000000..e4a470440d
--- /dev/null
+++ b/packages/jldbq-extenison/src/DatasourceForm.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import { Dialog, ReactWidget } from '@jupyterlab/apputils';
+import { IDatasource } from './api/datasource';
+import { Widget } from '@lumino/widgets';
+
+interface IDatasourceItem {
+  address: string;
+  username: string;
+  password: string;
+  databasename: string;
+  type: 'mysql' | 'hive';
+}
+
+interface IProps {
+  value: Partial<IDatasourceItem>;
+  error: keyof IDatasourceItem | null;
+  onChange: (v: Partial<IDatasourceItem>) => void;
+}
+
+const DatasourceForm: React.FunctionComponent<IProps> = ({
+  value,
+  error,
+  onChange
+}) => {
+  return (
+    <form className="jldbq-form">
+      <label className={error === 'type' ? 'jldbq-form-error' : ''}>
+        <span className="jldbq-form-label">数据源类型:</span>
+        <div className="jldbq-form-switcher">
+          <button
+            type="button"
+            className={
+              'jldbq-btn ' + (value.type === 'mysql' ? 'jldbq-btn-current' : '')
+            }
+            onClick={() => onChange({ type: 'mysql' })}
+          >
+            MySQL
+          </button>
+          <button
+            type="button"
+            className={
+              'jldbq-btn ' + (value.type === 'hive' ? 'jldbq-btn-current' : '')
+            }
+            onClick={() => onChange({ type: 'hive' })}
+          >
+            Hive
+          </button>
+        </div>
+      </label>
+      <label className={error === 'address' ? 'jldbq-form-error' : ''}>
+        <span className="jldbq-form-label">数据源地址:</span>
+        <input
+          className="jldbq-form-input"
+          placeholder="请输入数据源地址"
+          value={value.address || ''}
+          onChange={evt => onChange({ address: evt.target.value })}
+        />
+      </label>
+      <label className={error === 'username' ? 'jldbq-form-error' : ''}>
+        <span className="jldbq-form-label">用户名:</span>
+        <input
+          className="jldbq-form-input"
+          placeholder="请输入用户名"
+          value={value.username || ''}
+          onChange={evt => onChange({ username: evt.target.value })}
+        />
+      </label>
+      <label className={error === 'password' ? 'jldbq-form-error' : ''}>
+        <span className="jldbq-form-label">密码:</span>
+        <input
+          className="jldbq-form-input"
+          type="password"
+          placeholder="请输入密码"
+          value={value.password || ''}
+          onChange={evt => onChange({ password: evt.target.value })}
+        />
+      </label>
+      <label className={error === 'databasename' ? 'jldbq-form-error' : ''}>
+        <span className="jldbq-form-label">数据库名称:</span>
+        <input
+          className="jldbq-form-input"
+          placeholder="请输入数据库名称"
+          value={value.databasename || ''}
+          onChange={evt => onChange({ databasename: evt.target.value })}
+        />
+      </label>
+    </form>
+  );
+};
+
+export class DatasourceFormDialogBody
+  extends ReactWidget
+  implements Dialog.IBodyWidget<IDatasource> {
+  constructor(manager: string, options?: Widget.IOptions) {
+    super(options);
+    this._manager = manager;
+  }
+  render(): JSX.Element {
+    return (
+      <DatasourceForm
+        value={this._datasourceItem}
+        error={this._error}
+        onChange={v => {
+          this._datasourceItem = { ...this._datasourceItem, ...v };
+          this._error = null;
+          this.update();
+        }}
+      />
+    );
+  }
+
+  getValue(): IDatasource {
+    const {
+      address,
+      username: user,
+      password,
+      databasename,
+      type: source
+    } = this._datasourceItem;
+    if (!source) {
+      this._setError('type');
+    }
+    if (!address || !validateIpAndPort(address)) {
+      this._setError('address');
+    }
+    const [host, portStr] = address.split(':');
+    const port = portStr ? +portStr : 3306;
+    if (!user) {
+      this._setError('username');
+    }
+    if (!password) {
+      this._setError('password');
+    }
+    if (!databasename) {
+      this._setError('databasename');
+    }
+    return {
+      host,
+      user,
+      port,
+      password,
+      charset: 'utf8',
+      source,
+      databasename,
+      sourcename: databasename,
+      manager: this._manager
+    };
+  }
+
+  private _setError(error: keyof IDatasourceItem): never {
+    this._error = error;
+    this.update();
+    throw new Error(error);
+  }
+
+  private _datasourceItem: Partial<IDatasourceItem> = {};
+  private _error: IProps['error'] = null;
+  private _manager: string;
+}
+
+function validateIpAndPort(input: string): boolean {
+  const parts = input.split(':');
+  if (parts.length > 2) {
+    return false;
+  }
+  const ip = parts[0].split('.');
+  if (
+    ip.length !== 4 ||
+    !ip.every(function (segment) {
+      return validateNum(segment, 0, 255);
+    })
+  ) {
+    return false;
+  }
+  const port = parts[1];
+  if (port && !validateNum(port, 1, 65535)) {
+    return false;
+  }
+  return true;
+}
+
+function validateNum(input: string, min: number, max: number): boolean {
+  const num = +input;
+  return num >= min && num <= max && input === num.toString();
+}
```

- 实现数据源预览的面板

```diff
diff --git a/packages/jldbq-extenison/src/DatasourceView.tsx b/packages/jldbq-extenison/src/DatasourceView.tsx
new file mode 100644
index 0000000000..f7e97e0702
--- /dev/null
+++ b/packages/jldbq-extenison/src/DatasourceView.tsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import { useState } from 'react';
+import { Dialog, showDialog } from '@jupyterlab/apputils';
+import TreeView from '@mui/lab/TreeView';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import TreeItem from '@mui/lab/TreeItem';
+import databaseSvgStr from '../style/icons/database-solid-ghost.svg';
+import {
+  fetchTables,
+  IDatasource,
+  setDatasource,
+  useDatasourceList
+} from './api/datasource';
+import { DatasourceFormDialogBody } from './DatasourceForm';
+
+const dragImg = new Image();
+dragImg.src = 'data:image/svg+xml;base64,' + btoa(databaseSvgStr);
+
+interface IProps {
+  manager: string;
+  onOpenTable: (datasource: IDatasource, tableName: string) => void;
+}
+
+const DatasourceView: React.FunctionComponent<IProps> = ({
+  manager,
+  onOpenTable
+}) => {
+  const { datasources, loading, error, refresh } = useDatasourceList(manager);
+  const [tables, setTables] = useState<
+    Partial<{
+      [key: string]: string[] | 'error';
+    }>
+  >({});
+
+  const handleNodeToggle = async (ds: IDatasource) => {
+    if (!tables[ds.sourcename]) {
+      const tables = await fetchTables(ds);
+      setTables(prev => {
+        return { [ds.sourcename]: tables, ...prev };
+      });
+    }
+  };
+
+  let tree: JSX.Element[] | JSX.Element;
+  if (error) {
+    tree = <div style={{ padding: '0px 12px' }}>Error</div>;
+  } else if (loading) {
+    tree = <div style={{ padding: '0px 12px' }}>Loading ...</div>;
+  } else {
+    tree = datasources!.map(ds => {
+      const table = tables[ds.sourcename];
+      let tableItems;
+      if (!table) {
+        tableItems = (
+          <TreeItem nodeId={`${ds.sourcename}-loading`} label="Loading ..." />
+        );
+      } else if (table === 'error') {
+        tableItems = (
+          <TreeItem nodeId={`${ds.sourcename}-error`} label="Error" />
+        );
+      } else if (table.length === 0) {
+        tableItems = (
+          <TreeItem nodeId={`${ds.sourcename}-error`} label="Empty" />
+        );
+      } else {
+        tableItems = table.map(t => {
+          return (
+            <TreeItem
+              title={t}
+              key={`${ds.sourcename}-${t}`}
+              nodeId={`${ds.sourcename}-${t}`}
+              label={t}
+              onDoubleClick={() => onOpenTable(ds, t)}
+              draggable="true"
+              onDragStart={evt => {
+                const data = {
+                  operation: 'addToCanvas',
+                  data: {
+                    editType: 'createNode',
+                    finalized: true,
+                    nodeTemplate: {
+                      id: `${ds.manager}-${ds.sourcename}-${t}`,
+                      op: `database-${ds.source}-input`,
+                      description: t,
+                      type: 'execution_node',
+                      label: t,
+                      inputs: [],
+                      parameters: {},
+                      outputs: [
+                        {
+                          id: 'outPort',
+                          app_data: {
+                            ui_data: {
+                              cardinality: {
+                                min: 0,
+                                max: -1
+                              },
+                              label: 'Output Port'
+                            }
+                          }
+                        }
+                      ],
+                      app_data: {
+                        ui_data: {
+                          description: t,
+                          image: '',
+                          label: t
+                        }
+                      }
+                    }
+                  }
+                };
+                evt.dataTransfer.setData('text/plain', JSON.stringify(data));
+                evt.dataTransfer.setDragImage(dragImg, 10, 10);
+              }}
+              onFocusCapture={e => e.stopPropagation()}
+            />
+          );
+        });
+      }
+      return (
+        <TreeItem
+          key={ds.sourcename}
+          nodeId={ds.sourcename}
+          label={ds.databasename}
+          onClick={() => handleNodeToggle(ds)}
+        >
+          {tableItems}
+        </TreeItem>
+      );
+    });
+  }
+
+  const handleAddDatasource = async () => {
+    const { value } = await showDialog({
+      title: '添加数据源',
+      body: new DatasourceFormDialogBody(manager),
+      hasClose: true,
+      buttons: [
+        Dialog.okButton({ label: '确定' }),
+        Dialog.cancelButton({ label: '取消' })
+      ]
+    });
+    if (!value) {
+      return;
+    }
+    await setDatasource(value);
+    refresh();
+  };
+
+  return (
+    <div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
+      <div
+        style={{ display: 'flex', justifyContent: 'flex-end', padding: '10px' }}
+      >
+        <button className="jldbq-btn-add" onClick={handleAddDatasource}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
+          </svg>
+          添加数据源
+        </button>
+      </div>
+      <TreeView
+        aria-label="file system navigator"
+        defaultCollapseIcon={<ExpandMoreIcon />}
+        defaultExpandIcon={<ChevronRightIcon />}
+        sx={{ overflow: 'auto', flexGrow: 1 }}
+      >
+        {tree}
+      </TreeView>
+    </div>
+  );
+};
+
+export default DatasourceView;
```

- 合并了数据同步表单的实现代码

```diff
diff --git a/packages/jldbq-extenison/src/DatasyncForm.tsx b/packages/jldbq-extenison/src/DatasyncForm.tsx
new file mode 100644
index 0000000000..d638ff736e
--- /dev/null
+++ b/packages/jldbq-extenison/src/DatasyncForm.tsx
@@ -0,0 +1,322 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  DatePicker,
+  Form,
+  InputNumber,
+  Radio,
+  RadioChangeEvent,
+  Select,
+  Space
+} from 'antd';
+import { IDatasource } from './api/datasource';
+import arrowImgUrl from '../style/img/arrow.png';
+import deleteImgUrl from '../style/img/delete.png';
+
+type FreqUnit = 'day' | 'week' | 'month';
+
+interface ISyncMeta {
+  startTime: Date;
+  frequency: number;
+  freqUnit: FreqUnit;
+}
+
+interface ISyncMapping {
+  srcDatasource: IDatasource;
+  srcTableName: string;
+  dstDatasource: IDatasource;
+  dstTableName: string;
+}
+
+export interface ISyncData {
+  mapping: ISyncMapping;
+  meta: ISyncMeta;
+}
+
+interface IProps {
+  datasourceList: IDatasource[];
+  tableListFetcher: (ds: IDatasource) => Promise<string[]>;
+  onConfirm: (data: ISyncData[]) => void;
+  onCancel: () => void;
+}
+
+const DatasyncForm: React.FunctionComponent<IProps> = props => {
+  const [srcDatasource, setSrcDatasource] = useState<IDatasource | null>(null);
+  const [srcTableName, setSrcTableName] = useState<string | null>(null);
+  const [srcTableList, setSrcTableList] = useState<string[]>([]);
+  const [dstDatasource, setDstDatasource] = useState<IDatasource | null>(null);
+  const [dstTableName, setDstTableName] = useState<string | null>(null);
+  const [dstTableList, setDstTableList] = useState<string[]>([]);
+  const [mappingList, setMappingList] = useState<ISyncMapping[]>([]);
+  const [form] = Form.useForm();
+
+  const onFinish = (meta: any) => {
+    // startTime = moment(startTime).toDate();
+    const results = mappingList.map(mapping => {
+      return {
+        mapping,
+        meta: {
+          startTime: meta.startTime.toDate(),
+          frequency: Math.max(parseInt(meta.frequency), 0),
+          freqUnit: meta.freqUnit as FreqUnit
+        }
+      };
+    });
+    props.onConfirm(results);
+  };
+
+  const sourceDatasourceChange = (sourcename: string) => {
+    const ds = props.datasourceList.find(
+      item => item.sourcename === sourcename
+    )!;
+    setSrcDatasource(ds);
+    setSrcTableName(null);
+    setSrcTableList([]);
+    void props.tableListFetcher(ds).then(lst => {
+      setSrcTableList(lst);
+    });
+  };
+
+  const destDatasourceChange = (sourcename: string) => {
+    const ds = props.datasourceList.find(
+      item => item.sourcename === sourcename
+    )!;
+    setDstDatasource(ds);
+    setDstTableName(null);
+    setDstTableList([]);
+    void props.tableListFetcher(ds).then(lst => {
+      setDstTableList(lst);
+    });
+  };
+
+  const sourceTableChange = (e: RadioChangeEvent) => {
+    setSrcTableName(e.target.value as string);
+  };
+
+  const destTableChange = (e: RadioChangeEvent) => {
+    setDstTableName(e.target.value as string);
+  };
+
+  const addMapping = () => {
+    if (!srcDatasource || !srcTableName || !dstDatasource || !dstTableName) {
+      return;
+    }
+    if (
+      mappingList.find(
+        item =>
+          item.srcDatasource.sourcename === srcDatasource.sourcename &&
+          item.srcTableName === srcTableName &&
+          item.dstDatasource.sourcename === dstDatasource.sourcename &&
+          item.dstTableName === dstTableName
+      )
+    ) {
+      return;
+    }
+    setMappingList([
+      ...mappingList,
+      {
+        srcDatasource,
+        srcTableName,
+        dstDatasource,
+        dstTableName
+      }
+    ]);
+  };
+
+  const deleteMapping = (mapping: ISyncMapping) => {
+    setMappingList(mappingList.filter(item => item !== mapping));
+  };
+
+  const freqUnitSelector = (
+    <Form.Item
+      name="freqUnit"
+      rules={[{ required: true, message: '请输入同步频次单位' }]}
+      noStyle
+    >
+      <Select style={{ width: 100 }}>
+        <Select.Option value="day">天</Select.Option>
+        <Select.Option value="week">周</Select.Option>
+        <Select.Option value="month">月</Select.Option>
+      </Select>
+    </Form.Item>
+  );
+
+  return (
+    <div>
+      <Form
+        form={form}
+        name="datasyncForm"
+        onFinish={onFinish}
+        style={{ width: '800px' }}
+      >
+        <div style={{ display: 'flex' }}>
+          <Form.Item style={{ width: '25%' }}>
+            <Form.Item
+              name="srcDatasource"
+              noStyle
+              // rules={[{ required: true, message: '请选择数据源' }]}
+            >
+              <Select
+                placeholder="选择数据源"
+                onChange={sourceDatasourceChange}
+              >
+                {props.datasourceList.map(item => {
+                  return (
+                    <Select.Option
+                      value={item.sourcename}
+                      key={item.sourcename}
+                    >
+                      {item.databasename}
+                    </Select.Option>
+                  );
+                })}
+              </Select>
+            </Form.Item>
+
+            <Form.Item
+              name="srcTableName"
+              // rules={[{ required: true, message: '请选择源数据表' }]}
+              noStyle
+            >
+              <div className="plane">
+                <Radio.Group value={srcTableName} onChange={sourceTableChange}>
+                  <Space direction="vertical">
+                    {srcTableList.map(item => {
+                      return (
+                        <Radio value={item} key={item}>
+                          {item}
+                        </Radio>
+                      );
+                    })}
+                  </Space>
+                </Radio.Group>
+              </div>
+            </Form.Item>
+          </Form.Item>
+          <div className="arrow">
+            <img
+              src={arrowImgUrl}
+              alt=""
+              onClick={addMapping}
+              style={{ width: '20px', height: '20px', cursor: 'pointer' }}
+            />
+          </div>
+          <Form.Item style={{ width: '25%' }}>
+            <Form.Item
+              name="dstDatasource"
+              // rules={[{ required: true, message: '请选择同步目标' }]}
+              noStyle
+            >
+              <Select
+                placeholder="选择同步目标"
+                onChange={destDatasourceChange}
+              >
+                {props.datasourceList.map(item => {
+                  return (
+                    <Select.Option
+                      value={item.sourcename}
+                      key={item.sourcename}
+                    >
+                      {item.databasename}
+                    </Select.Option>
+                  );
+                })}
+              </Select>
+            </Form.Item>
+            <Form.Item
+              name="dstTableName"
+              // rules={[{ required: true, message: '请选择目标数据表' }]}
+              noStyle
+            >
+              <div className="plane">
+                <Radio.Group value={dstTableName} onChange={destTableChange}>
+                  <Space direction="vertical">
+                    {dstTableList.map(item => {
+                      return (
+                        <Radio value={item} key={item}>
+                          {item}
+                        </Radio>
+                      );
+                    })}
+                  </Space>
+                </Radio.Group>
+              </div>
+            </Form.Item>
+          </Form.Item>
+          <div className="line"></div>
+          <div className="mappings">
+            <p className="mappings__title">同步映射</p>
+            <div className="mappings__content">
+              {mappingList.map(item => {
+                const key = `${item.dstDatasource.sourcename}-${item.dstTableName}-${item.srcDatasource.sourcename}-${item.srcTableName}`;
+                return (
+                  <p key={key}>
+                    <span>{item.srcTableName}</span>
+                    <img
+                      src={arrowImgUrl}
+                      alt=""
+                      style={{
+                        width: '10px',
+                        height: '10px',
+                        margin: '0 50px'
+                      }}
+                    />
+                    <span>{item.dstTableName}</span>
+                    <img
+                      src={deleteImgUrl}
+                      alt=""
+                      onClick={() => {
+                        deleteMapping(item);
+                      }}
+                      style={{
+                        width: '10px',
+                        height: '10px',
+                        marginLeft: '30px',
+                        cursor: 'pointer'
+                      }}
+                    />
+                  </p>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+        <Form.Item
+          label="开始时间"
+          name="startTime"
+          rules={[{ required: true, message: '请选择开始时间' }]}
+        >
+          <DatePicker placeholder="请选择日期" style={{ width: '50%' }} />
+        </Form.Item>
+        <Form.Item label="同步频次" required>
+          <span style={{ lineHeight: '32px' }}>每</span>
+          <Form.Item
+            name="frequency"
+            rules={[{ required: true, message: '请输入同步频次' }]}
+            noStyle
+          >
+            <InputNumber
+              addonAfter={freqUnitSelector}
+              style={{ width: '47%', margin: '0 1%' }}
+            />
+          </Form.Item>
+          <span style={{ lineHeight: '32px' }}>/次</span>
+        </Form.Item>
+        <Form.Item style={{ display: 'flex', justifyContent: 'center' }}>
+          <Button
+            type="primary"
+            htmlType="submit"
+            style={{ marginRight: '40px' }}
+          >
+            确定
+          </Button>
+          <Button htmlType="button" onClick={props.onCancel}>
+            取消
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+
+export default DatasyncForm;

diff --git a/packages/jldbq-extenison/src/DatasyncView.tsx b/packages/jldbq-extenison/src/DatasyncView.tsx
new file mode 100644
index 0000000000..910eef1ed6
--- /dev/null
+++ b/packages/jldbq-extenison/src/DatasyncView.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { Dialog, ReactWidget } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+import { Signal } from '@lumino/signaling';
+import DatasyncForm, { ISyncData } from './DatasyncForm';
+
+interface IProps {}
+
+const DatasyncView: React.FunctionComponent<IProps> = props => {
+  return (
+    <div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
+      <div
+        style={{ display: 'flex', justifyContent: 'flex-end', padding: '10px' }}
+      >
+        <button
+          className="jldbq-btn-add"
+          onClick={async () => {
+            const body = new DatasyncFormDialogBody();
+            const dialog = new Dialog({
+              title: '添加同步任务',
+              body,
+              renderer: new DatasyncFormDialogRenderer()
+            });
+            body.confirm.connect((_sender, data) => {
+              console.log(data);
+              dialog.reject();
+            });
+            body.cancel.connect(() => {
+              dialog.reject();
+            });
+            await dialog.launch();
+          }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
+          </svg>
+          添加同步任务
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default DatasyncView;
+
+class DatasyncFormDialogBody extends ReactWidget {
+  constructor(options?: Widget.IOptions) {
+    super(options);
+  }
+
+  render(): JSX.Element {
+    Signal;
+    return (
+      <DatasyncForm
+        datasourceList={[
+          {
+            host: '1.1.1.1',
+            user: 'user',
+            port: 3306,
+            password: '',
+            charset: 'utf8',
+            manager: 'manager',
+            source: 'mysql',
+            databasename: 'default',
+            sourcename: 'default'
+          }
+        ]}
+        tableListFetcher={async () => {
+          return ['1', '2', '3'];
+        }}
+        onConfirm={v => this._confirm.emit(v)}
+        onCancel={() => this._cancel.emit()}
+      />
+    );
+  }
+
+  get confirm() {
+    return this._confirm;
+  }
+
+  get cancel() {
+    return this._cancel;
+  }
+
+  private _confirm = new Signal<DatasyncFormDialogBody, ISyncData[]>(this);
+  private _cancel = new Signal<DatasyncFormDialogBody, void>(this);
+}
+
+class DatasyncFormDialogRenderer extends Dialog.Renderer {
+  createFooter(_buttons: ReadonlyArray<HTMLElement>): Widget {
+    return new Widget();
+  }
+}
```

- 调度监控 Stub (尚未实现)

```diff
diff --git a/packages/jldbq-extenison/src/MonitorViewWidget.tsx b/packages/jldbq-extenison/src/MonitorViewWidget.tsx
new file mode 100644
index 0000000000..02baa7af47
--- /dev/null
+++ b/packages/jldbq-extenison/src/MonitorViewWidget.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { ReactWidget } from '@jupyterlab/apputils';
+
+export default class MonitorWidget extends ReactWidget {
+  render(): JSX.Element {
+    return <div style={{ height: '100%' }} />;
+  }
+}
```

- 定时任务 Stub (尚未实现)

```diff
diff --git a/packages/jldbq-extenison/src/TaskViewWidget.tsx b/packages/jldbq-extenison/src/TaskViewWidget.tsx
new file mode 100644
index 0000000000..9497654443
--- /dev/null
+++ b/packages/jldbq-extenison/src/TaskViewWidget.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { ReactWidget } from '@jupyterlab/apputils';
+
+export default class TaskViewWidget extends ReactWidget {
+  render(): JSX.Element {
+    return <div style={{ height: '100%' }} />;
+  }
+}
```

- Backend API 相关代码

```diff
diff --git a/packages/jldbq-extenison/src/api/config.ts b/packages/jldbq-extenison/src/api/config.ts
new file mode 100644
index 0000000000..78b468134b
--- /dev/null
+++ b/packages/jldbq-extenison/src/api/config.ts
@@ -0,0 +1,5 @@
+const config = {
+  endpoint: 'http://192.168.51.19:5000'
+};
+
+export default config;

diff --git a/packages/jldbq-extenison/src/api/datasource.ts b/packages/jldbq-extenison/src/api/datasource.ts
new file mode 100644
index 0000000000..8927b678bb
--- /dev/null
+++ b/packages/jldbq-extenison/src/api/datasource.ts
@@ -0,0 +1,106 @@
+import useSWR from 'swr';
+import config from './config';
+
+type DbEnc = 'utf8';
+type DbType = 'mysql' | 'hive';
+
+export interface IDatasource {
+  host: string;
+  user: string;
+  port: number;
+  password: string;
+  charset: DbEnc;
+  manager: string;
+  source: DbType;
+  databasename: string;
+  sourcename: string;
+}
+
+interface IDatasourceResponse {
+  datasources?: IDatasource[];
+  loading: boolean;
+  error?: any;
+  refresh: () => void;
+}
+
+export type ITableData = Record<string, Record<string, any>>;
+
+export const useDatasourceList = (manager: string): IDatasourceResponse => {
+  const endpoint = config.endpoint;
+  const item = encodeURIComponent(manager);
+  const url = `${endpoint}/managelist/item=${item}`;
+  const { data, error, mutate } = useSWR(url, (...args) =>
+    fetch(...args).then(res => res.json())
+  );
+  return {
+    datasources: data,
+    loading: !error && !data,
+    error,
+    refresh: mutate
+  };
+};
+
+export const setDatasource = async (
+  datasource: IDatasource
+): Promise<string> => {
+  const endpoint = config.endpoint;
+  const url = `${endpoint}/manage`;
+  try {
+    const resp = await fetch(url, {
+      method: 'post',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(datasource)
+    });
+    if (!resp.ok) {
+      return 'error';
+    }
+    const data = await resp.text();
+    return data;
+  } catch (e) {
+    console.error(e);
+    return 'error';
+  }
+};
+
+export const fetchTables = async (
+  ds: IDatasource
+): Promise<'error' | string[]> => {
+  const endpoint = config.endpoint;
+  const item = encodeURIComponent(
+    `${ds.manager};${ds.sourcename};${ds.databasename}`
+  );
+  const url = `${endpoint}/show/${ds.source}/tables/item=${item}`;
+  try {
+    const resp = await fetch(url);
+    if (!resp.ok) {
+      return 'error';
+    }
+    const data = (await resp.json()) as string[];
+    return data;
+  } catch (e) {
+    console.error(e);
+    return 'error';
+  }
+};
+
+export const fetchTableContent = async (
+  ds: IDatasource,
+  t: string
+): Promise<ITableData | 'error'> => {
+  const endpoint = config.endpoint;
+  const item = encodeURIComponent(
+    `${ds.manager};${ds.sourcename};${ds.databasename};${t}`
+  );
+  const url = `${endpoint}/show/${ds.source}/results/item=${item}`;
+  try {
+    const resp = await fetch(url);
+    if (!resp.ok) {
+      return 'error';
+    }
+    const data = (await resp.json()) as ITableData;
+    return data;
+  } catch (e) {
+    console.error(e);
+    return 'error';
+  }
+};

diff --git a/packages/jldbq-extenison/src/api/index.ts b/packages/jldbq-extenison/src/api/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/jldbq-extenison/src/icons.ts b/packages/jldbq-extenison/src/icons.ts
new file mode 100644
index 0000000000..9e2b76f812
--- /dev/null
+++ b/packages/jldbq-extenison/src/icons.ts
@@ -0,0 +1,19 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+import cliSvgStr from '../style/icons/cli.svg';
+import timerSvgStr from '../style/icons/timer.svg';
+import monitorSvgStr from '../style/icons/monitor.svg';
+
+export const cliIcon = new LabIcon({
+  name: 'cli',
+  svgstr: cliSvgStr
+});
+
+export const timerIcon = new LabIcon({
+  name: 'timer',
+  svgstr: timerSvgStr
+});
+
+export const monitorIcon = new LabIcon({
+  name: 'monitor',
+  svgstr: monitorSvgStr
+});
```

- 实现数据开发的 JupyterLab 插件 (添加左侧侧边栏)

```diff
diff --git a/packages/jldbq-extenison/src/index.ts b/packages/jldbq-extenison/src/index.ts
new file mode 100644
index 0000000000..28da880058
--- /dev/null
+++ b/packages/jldbq-extenison/src/index.ts
@@ -0,0 +1,71 @@
+/**
+ * @packageDocumentation
+ * @module jldbq-extension
+ */
+
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { MainAreaWidget } from '@jupyterlab/apputils';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import DataViewWidget from './DataViewWidget';
+import DataTableWidget from './DataTableWidget';
+import TaskViewWidget from './TaskViewWidget';
+import MonitorViewWidget from './MonitorViewWidget';
+import { cliIcon, monitorIcon, timerIcon } from './icons';
+import config from './api/config';
+
+const PLUGIN_ID = '@jupyterlab/jldbq-extension:plugin';
+
+const plugin: JupyterFrontEndPlugin<void> = {
+  id: PLUGIN_ID,
+  autoStart: true,
+  requires: [ISettingRegistry],
+  activate: async (app: JupyterFrontEnd, registry: ISettingRegistry) => {
+    registry.pluginChanged.connect(async (_sender, plugin) => {
+      if (plugin === PLUGIN_ID) {
+        await updateConfig(registry);
+      }
+    });
+    await updateConfig(registry);
+
+    const manager = 'test1'; // TODO: 读取当前用户
+
+    const dataViewWidget = new DataViewWidget(manager);
+    dataViewWidget.id = 'jldbq-data';
+    dataViewWidget.title.icon = cliIcon;
+    dataViewWidget.title.caption = '数据开发';
+    dataViewWidget.title.label = '数据开发';
+    dataViewWidget.tableOpened.connect((_sender, { datasource, tableName }) => {
+      const content = new DataTableWidget(datasource, tableName);
+      const widget = new MainAreaWidget({ content });
+      widget.title.label = tableName;
+      widget.title.icon = cliIcon;
+      app.shell.add(widget, 'main');
+    });
+    app.shell.add(dataViewWidget, 'left', { rank: 100 });
+
+    const taskViewWidget = new TaskViewWidget();
+    taskViewWidget.id = 'jldbq-sync';
+    taskViewWidget.title.icon = timerIcon;
+    taskViewWidget.title.caption = '定时任务';
+    taskViewWidget.title.label = '定时任务';
+    app.shell.add(taskViewWidget, 'left', { rank: 1000 });
+
+    const monitorViewWidget = new MonitorViewWidget();
+    monitorViewWidget.id = 'jldbq-monitor';
+    monitorViewWidget.title.icon = monitorIcon;
+    monitorViewWidget.title.caption = '调度监控';
+    monitorViewWidget.title.label = '调度监控';
+    app.shell.add(monitorViewWidget, 'left', { rank: 1100 });
+  }
+};
+
+export default plugin;
+
+async function updateConfig(registry: ISettingRegistry) {
+  const settings = await registry.load(PLUGIN_ID);
+  const endpoint = settings.composite['flaskBackend'] as string;
+  config.endpoint = endpoint;
+}
```

- 数据开发的相关样式代码

```diff
diff --git a/packages/jldbq-extenison/src/png.d.ts b/packages/jldbq-extenison/src/png.d.ts
new file mode 100644
index 0000000000..1c5923252c
--- /dev/null
+++ b/packages/jldbq-extenison/src/png.d.ts
@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string;
+  export default value;
+}

diff --git a/packages/jldbq-extenison/src/svg.d.ts b/packages/jldbq-extenison/src/svg.d.ts
new file mode 100644
index 0000000000..0ca27598c5
--- /dev/null
+++ b/packages/jldbq-extenison/src/svg.d.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}

diff --git a/packages/jldbq-extenison/style/base.css b/packages/jldbq-extenison/style/base.css
new file mode 100644
index 0000000000..e2026de0cb
--- /dev/null
+++ b/packages/jldbq-extenison/style/base.css
@@ -0,0 +1,9 @@
+/*
+    See the JupyterLab Developer Guide for useful CSS Patterns:
+
+    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
+*/
+
+@import './syncform.css';
+@import './button.css';
+@import './dsform.css';

diff --git a/packages/jldbq-extenison/style/button.css b/packages/jldbq-extenison/style/button.css
new file mode 100644
index 0000000000..ea9c093f0b
--- /dev/null
+++ b/packages/jldbq-extenison/style/button.css
@@ -0,0 +1,31 @@
+.jldbq-btn {
+  width: 95px;
+  height: 33px;
+  padding: 0;
+  border: none;
+  background-color: #edf0f6;
+  color: #4a4a4a;
+  border-radius: 0;
+}
+
+.jldbq-btn.jldbq-btn-current {
+  background-color: #d1e4f6;
+}
+
+.jldbq-btn:hover:not(.jldbq-btn-current) {
+  opacity: 0.8;
+}
+
+.jldbq-btn-add {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  background: none;
+  border: none;
+  color: #147bd1;
+  cursor: pointer;
+}
+
+.jldbq-btn-add:hover {
+  opacity: 0.8;
+}

diff --git a/packages/jldbq-extenison/style/dsform.css b/packages/jldbq-extenison/style/dsform.css
new file mode 100644
index 0000000000..f952bc34f4
--- /dev/null
+++ b/packages/jldbq-extenison/style/dsform.css
@@ -0,0 +1,105 @@
+.jldbq-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.jldbq-form label {
+  margin-bottom: 30px;
+  display: flex;
+  align-items: center;
+}
+
+.jldbq-form label:last-child {
+  margin-bottom: 0;
+}
+
+.jldbq-form label.jldbq-form-error:last-child {
+  border: 1px solid #ed5555;
+}
+
+.jldbq-form .jldbq-form-label {
+  color: #4a4a4a;
+  width: 75px;
+  text-align: end;
+}
+
+.jldbq-form .jldbq-form-switcher {
+  margin-left: 15px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 320px;
+}
+
+.jldbq-form .jldbq-form-input {
+  font-family: inherit;
+  box-sizing: border-box;
+  width: 320px;
+  height: 32px;
+  border-radius: 2px;
+  border: 1px solid #c8d3e9;
+  margin-left: 15px;
+  padding: 0 15px;
+  font-size: 12px;
+  transition: all 100ms;
+  outline: 1px solid transparent;
+}
+
+.jldbq-form .jldbq-form-input:focus {
+  outline-color: #147bd1;
+}
+
+.jldbq-form .react-select-container {
+  width: 320px;
+  margin-left: 15px;
+}
+
+.jldbq-form .react-select__control {
+  border-radius: 2px;
+  border: 1px solid #c8d3e9;
+  min-height: 32px;
+}
+
+.jldbq-form .react-select__control:hover {
+  border-color: #c8d3e9;
+}
+
+.jldbq-form .react-select__indicator-separator {
+  background-color: #c8d3e9;
+  margin: 4px 0;
+}
+
+.jldbq-form .react-select__indicator {
+  color: #4883fb;
+  padding: 0 8px;
+}
+
+.jldbq-form .react-select__value-container {
+  padding: 0 15px;
+  font-size: 12px;
+}
+
+.jldbq-form .react-select__single-value {
+  padding: 0;
+  margin: 0;
+}
+
+.jldbq-form .react-select__placeholder {
+  padding: 0;
+  margin: 0;
+}
+
+.jldbq-form .react-select__input-container {
+  padding: 0;
+  margin: 0;
+}
+
+.jldbq-form .react-select__menu-notice {
+  font-size: 12px;
+}
+
+.jldbq-form .react-select__option {
+  font-size: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+}

diff --git a/packages/jldbq-extenison/style/icons/cli.svg b/packages/jldbq-extenison/style/icons/cli.svg
new file mode 100644
index 0000000000..d712aada18
--- /dev/null
+++ b/packages/jldbq-extenison/style/icons/cli.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="4.2333331mm" height="4.2333331mm" viewBox="0 0 4.2333331 4.2333332" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <g transform="translate(-20.017746,-119.34786)">
+    <path fill="#000000" class="jp-icon3 jp-icon-selectable"
+      style="stroke-width:1.00157;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+      d="M 0 0 L 0 16 L 16 16 L 16 12.998047 L 15.240234 12.998047 L 15.240234 15.240234 L 0.75976562 15.240234 L 0.75976562 3.7871094 L 15.240234 3.7871094 L 15.240234 5.8144531 L 16 5.8144531 L 16 0 L 0 0 z M 0.75976562 0.75976562 L 15.240234 0.75976562 L 15.240234 3.1660156 L 0.75976562 3.1660156 L 0.75976562 0.75976562 z M 11.039062 6.0175781 A 0.49999937 0.49999937 0 0 0 10.574219 6.3476562 L 8.640625 11.839844 A 0.49999937 0.49999937 0 0 0 8.9433594 12.474609 A 0.49999937 0.49999937 0 0 0 9.5859375 12.171875 L 11.519531 6.6796875 A 0.49999937 0.49999937 0 0 0 11.210938 6.0449219 L 11.208984 6.0449219 A 0.49999937 0.49999937 0 0 0 11.039062 6.0175781 z M 13.609375 6.3925781 A 0.49999937 0.49999937 0 0 0 13.3125 6.4882812 A 0.49999937 0.49999937 0 0 0 13.208984 7.1894531 L 14.832031 9.4179688 L 13.134766 11.285156 A 0.49999937 0.49999937 0 0 0 13.171875 11.994141 A 0.49999937 0.49999937 0 0 0 13.880859 11.957031 L 15.84375 9.7871094 A 0.50004934 0.50004934 0 0 0 15.880859 9.1523438 L 14.013672 6.5976562 A 0.49999937 0.49999937 0 0 0 13.689453 6.3984375 L 13.6875 6.3984375 A 0.49999937 0.49999937 0 0 0 13.609375 6.3925781 z M 6.5507812 6.3945312 A 0.49999937 0.49999937 0 0 0 6.4726562 6.4003906 L 6.4726562 6.3984375 A 0.49999937 0.49999937 0 0 0 6.1484375 6.5976562 L 4.28125 9.1523438 A 0.50004934 0.50004934 0 0 0 4.3105469 9.7871094 L 6.28125 11.957031 A 0.49999937 0.49999937 0 0 0 6.9902344 11.996094 A 0.49999937 0.49999937 0 0 0 7.0273438 11.287109 L 5.3300781 9.4199219 L 6.953125 7.1894531 A 0.49999937 0.49999937 0 0 0 6.8417969 6.4882812 A 0.49999937 0.49999937 0 0 0 6.5507812 6.3945312 z "
+      transform="matrix(0.26458333,0,0,0.26458333,20.017746,119.34786)" />
+  </g>
+</svg>
\ No newline at end of file

diff --git a/packages/jldbq-extenison/style/icons/clock-fill.svg b/packages/jldbq-extenison/style/icons/clock-fill.svg
new file mode 100644
index 0000000000..7cece1ee7b
--- /dev/null
+++ b/packages/jldbq-extenison/style/icons/clock-fill.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#616161" class="jp-icon3 jp-icon-selectable"
+  viewBox="0 0 16 16">
+  <path
+    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
+</svg>
\ No newline at end of file

diff --git a/packages/jldbq-extenison/style/icons/database-solid-ghost.svg b/packages/jldbq-extenison/style/icons/database-solid-ghost.svg
new file mode 100644
index 0000000000..8edad9815c
--- /dev/null
+++ b/packages/jldbq-extenison/style/icons/database-solid-ghost.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 43 49.14286"
+   version="1.1"
+   id="svg19"
+   sodipodi:docname="database-solid-ghost.svg"
+   width="43"
+   height="49.14286"
+   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs23" />
+  <sodipodi:namedview
+     id="namedview21"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="1"
+     inkscape:cx="71.5"
+     inkscape:cy="316"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg19" />
+  <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+  <path
+     d="m 43,7.678571 v 4.607143 c 0,4.242411 -9.627009,7.678572 -21.5,7.678572 C 9.627009,19.964286 0,16.528125 0,12.285714 V 7.678571 C 0,3.43808 9.627009,0 21.5,0 33.372991,0 43,3.43808 43,7.678571 Z M 37.740179,20.607366 C 39.650223,19.897098 41.569866,18.985268 43,17.862277 v 9.78058 c 0,4.242411 -9.627009,7.678572 -21.5,7.678572 -11.872991,0 -21.5,-3.436161 -21.5,-7.678572 v -9.78058 c 1.433013,1.122991 3.265312,2.034821 5.264621,2.745089 4.300959,1.535714 10.044531,2.428348 16.235379,2.428348 6.190848,0 11.93058,-0.892634 16.240179,-2.428348 z M 5.264621,35.964509 C 9.56558,37.500223 15.309152,38.392857 21.5,38.392857 c 6.190848,0 11.93058,-0.892634 16.240179,-2.428348 C 39.650223,35.254241 41.569866,34.342411 43,33.21942 v 8.244866 C 43,45.7067 33.372991,49.14286 21.5,49.14286 9.627009,49.14286 0,45.7067 0,41.464286 V 33.21942 c 1.433013,1.122991 3.265312,2.034821 5.264621,2.745089 z"
+     id="path17"
+     style="fill:#616161;fill-opacity:1;stroke-width:0.0959821" />
+</svg>

diff --git a/packages/jldbq-extenison/style/icons/database-solid.svg b/packages/jldbq-extenison/style/icons/database-solid.svg
new file mode 100644
index 0000000000..e867c2bf34
--- /dev/null
+++ b/packages/jldbq-extenison/style/icons/database-solid.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg viewBox="0 0 548 626" version="1.1" width="548" height="626" xmlns="http://www.w3.org/2000/svg">
+   <path fill="#616161" class="jp-icon3 jp-icon-selectable"
+      d="m 498,137 v 48 c 0,44.2 -100.3,80 -224,80 C 150.3,265 50,229.2 50,185 v -48 c 0,-44.18 100.3,-80 224,-80 123.7,0 224,35.82 224,80 z m -54.8,134.7 c 19.9,-7.4 39.9,-16.9 54.8,-28.6 V 345 c 0,44.2 -100.3,80 -224,80 C 150.3,425 50,389.2 50,345 V 243.1 c 14.93,11.7 34.02,21.2 54.85,28.6 44.81,16 104.65,25.3 169.15,25.3 64.5,0 124.3,-9.3 169.2,-25.3 z m -338.35,160 c 44.81,16 104.65,25.3 169.15,25.3 64.5,0 124.3,-9.3 169.2,-25.3 19.9,-7.4 39.9,-16.9 54.8,-28.6 V 489 c 0,44.2 -100.3,80 -224,80 C 150.3,569 50,533.2 50,489 v -85.9 c 14.93,11.7 34.02,21.2 54.85,28.6 z" />
+</svg>
\ No newline at end of file

diff --git a/packages/jldbq-extenison/style/icons/monitor.svg b/packages/jldbq-extenison/style/icons/monitor.svg
new file mode 100644
index 0000000000..5cd7ad7c83
--- /dev/null
+++ b/packages/jldbq-extenison/style/icons/monitor.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="4.2333341mm" height="3.9620304mm" viewBox="0 0 4.2333341 3.9620305" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <g transform="translate(-24.619015,-119.41814)">
+    <path fill="#000000" class="jp-icon3 jp-icon-selectable"
+      style="stroke-width:0.171832;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+      d="m 24.825721,119.41814 c -0.114651,0 -0.206706,0.0921 -0.206706,0.2067 v 2.75642 c 0,0.11466 0.09205,0.20671 0.206706,0.20671 h 1.110527 v 0.52658 h -0.644406 a 0.13249998,0.13249998 0 0 0 -0.132808,0.13281 0.13249998,0.13249998 0 0 0 0.132808,0.13281 h 2.886646 a 0.13249998,0.13249998 0 0 0 0.132808,-0.13281 0.13249998,0.13249998 0 0 0 -0.132808,-0.13281 h -0.652157 v -0.52658 h 1.118795 c 0.114651,0 0.207223,-0.0921 0.207223,-0.20671 v -2.75642 c 0,-0.11465 -0.09257,-0.2067 -0.207223,-0.2067 z m 0.23151,0.19172 h 3.356901 c 0.100775,0 0.181901,0.0811 0.181901,0.1819 v 2.42259 c 0,0.10077 -0.08113,0.1819 -0.181901,0.1819 h -3.356901 c -0.100774,0 -0.181901,-0.0811 -0.181901,-0.1819 v -2.42259 c 0,-0.10078 0.08113,-0.1819 0.181901,-0.1819 z m 2.596224,0.60461 a 0.08250825,0.08250825 0 0 0 -0.06873,0.0289 l -0.933277,1.1312 -0.519865,-0.61133 a 0.08250825,0.08250825 0 0 0 -0.128674,0.004 l -0.666109,0.88625 a 0.0825,0.0825 0 0 0 0.0155,0.11524 0.0825,0.0825 0 0 0 0.115238,-0.0155 l 0.605648,-0.80461 0.517798,0.60772 a 0.08250825,0.08250825 0 0 0 0.126607,0 l 0.923975,-1.12345 0.505912,0.74259 a 0.0825,0.0825 0 0 0 0.115238,0.0212 0.0825,0.0825 0 0 0 0.02119,-0.11524 l -0.566374,-0.83199 a 0.08250825,0.08250825 0 0 0 -0.06408,-0.0351 z m -1.453141,2.3735 h 1.0604 v 0.52658 h -1.0604 z" />
+  </g>
+</svg>
\ No newline at end of file

diff --git a/packages/jldbq-extenison/style/icons/timer.svg b/packages/jldbq-extenison/style/icons/timer.svg
new file mode 100644
index 0000000000..94d2d8509f
--- /dev/null
+++ b/packages/jldbq-extenison/style/icons/timer.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="4.2782922mm" height="4.26331mm" viewBox="0 0 4.2782922 4.26331" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <g transform="translate(-24.62537,-119.25549)">
+    <path fill="#000000" class="jp-icon3 jp-icon-selectable"
+      style="stroke-width:0.200096;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+      d="m 24.826392,119.25549 c -0.11134,0 -0.201022,0.0897 -0.201022,0.20102 v 3.83129 c 0,0.11134 0.08968,0.20102 0.201022,0.20102 h 2.345076 a 1.2378182,1.2378182 0 0 1 -0.238745,-0.19172 h -1.944584 c -0.101249,0 -0.182418,-0.0817 -0.182418,-0.18293 v -2.5647 h 3.614767 v 0.80357 a 1.2378182,1.2378182 0 0 1 0.18035,0.12247 v -2.019 c 0,-0.11134 -0.08968,-0.20102 -0.201021,-0.20102 z m 0.161747,0.19172 h 3.249931 c 0.101248,0 0.182418,0.0817 0.182418,0.18293 v 0.75551 h -3.614767 v -0.75551 c 0,-0.10124 0.08117,-0.18293 0.182418,-0.18293 z m 1.805058,0.33951 a 0.14616301,0.14616301 0 0 0 -0.146245,0.14625 0.14616301,0.14616301 0 0 0 0.146245,0.14624 0.14616301,0.14616301 0 0 0 0.146244,-0.14624 0.14616301,0.14616301 0 0 0 -0.146244,-0.14625 z m 0.538985,0 a 0.14616301,0.14616301 0 0 0 -0.146244,0.14625 0.14616301,0.14616301 0 0 0 0.146244,0.14624 0.14616301,0.14616301 0 0 0 0.146244,-0.14624 0.14616301,0.14616301 0 0 0 -0.146244,-0.14625 z m 0.538985,0 a 0.14616301,0.14616301 0 0 0 -0.146244,0.14625 0.14616301,0.14616301 0 0 0 0.146244,0.14624 0.14616301,0.14616301 0 0 0 0.146244,-0.14624 0.14616301,0.14616301 0 0 0 -0.146244,-0.14625 z m -1.506368,1.07332 a 0.0825,0.0825 0 0 0 -0.05839,0.0238 l -0.592212,0.56638 -0.363285,-0.33021 a 0.0825,0.0825 0 0 0 -0.116789,0.004 0.0825,0.0825 0 0 0 0.0057,0.11731 l 0.42013,0.3824 a 0.08250825,0.08250825 0 0 0 0.113171,0 l 0.648539,-0.62115 a 0.0825,0.0825 0 0 0 0.0021,-0.11679 0.0825,0.0825 0 0 0 -0.05891,-0.0253 z m 1.456242,0.49351 a 1.0825199,1.0825199 0 0 0 -1.082621,1.08262 1.0825199,1.0825199 0 0 0 1.082621,1.08263 1.0825199,1.0825199 0 0 0 1.082621,-1.08263 1.0825199,1.0825199 0 0 0 -1.082621,-1.08262 z m -0.0047,0.17829 a 0.89981608,0.89981608 0 0 1 0.899687,0.89968 0.89981608,0.89981608 0 0 1 -0.899687,0.89969 0.89981608,0.89981608 0 0 1 -0.899687,-0.89969 0.89981608,0.89981608 0 0 1 0.899687,-0.89968 z m -0.0217,0.27388 a 0.0825,0.0825 0 0 0 -0.08423,0.0817 v 0.62115 a 0.08250825,0.08250825 0 0 0 0.08423,0.0842 h 0.546737 a 0.0825,0.0825 0 0 0 0.08216,-0.0842 0.0825,0.0825 0 0 0 -0.08216,-0.0817 H 27.87629 v -0.5395 a 0.0825,0.0825 0 0 0 -0.08165,-0.0817 z m -1.424203,0.0956 a 0.0825,0.0825 0 0 0 -0.05839,0.0233 l -0.593762,0.56844 -0.363285,-0.33228 a 0.0825,0.0825 0 0 0 -0.117306,0.004 0.0825,0.0825 0 0 0 0.0062,0.11731 l 0.419613,0.38499 a 0.08250825,0.08250825 0 0 0 0.113171,-0.002 l 0.64854,-0.62115 a 0.0825,0.0825 0 0 0 0.0021,-0.1173 0.0825,0.0825 0 0 0 -0.05684,-0.0253 z" />
+  </g>
+</svg>
\ No newline at end of file

diff --git a/packages/jldbq-extenison/style/img/arrow.png b/packages/jldbq-extenison/style/img/arrow.png
new file mode 100644
index 0000000000..50c9571f4e
Binary files /dev/null and b/packages/jldbq-extenison/style/img/arrow.png differ

diff --git a/packages/jldbq-extenison/style/img/delete.png b/packages/jldbq-extenison/style/img/delete.png
new file mode 100644
index 0000000000..a64b86a722
Binary files /dev/null and b/packages/jldbq-extenison/style/img/delete.png differ

diff --git a/packages/jldbq-extenison/style/index.css b/packages/jldbq-extenison/style/index.css
new file mode 100644
index 0000000000..2257bf1a6e
--- /dev/null
+++ b/packages/jldbq-extenison/style/index.css
@@ -0,0 +1,12 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+@import url('~@lumino/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
+@import url('~@jupyterlab/apputils/style/index.css');
+@import url('~@jupyterlab/application/style/index.css');
+
+@import url('./base.css');

diff --git a/packages/jldbq-extenison/style/index.js b/packages/jldbq-extenison/style/index.js
new file mode 100644
index 0000000000..6f57f28e14
--- /dev/null
+++ b/packages/jldbq-extenison/style/index.js
@@ -0,0 +1,12 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+import '@lumino/widgets/style/index.js';
+import '@jupyterlab/ui-components/style/index.js';
+import '@jupyterlab/apputils/style/index.js';
+import '@jupyterlab/application/style/index.js';
+
+import './base.css';

diff --git a/packages/jldbq-extenison/style/syncform.css b/packages/jldbq-extenison/style/syncform.css
new file mode 100644
index 0000000000..701d4a2e25
--- /dev/null
+++ b/packages/jldbq-extenison/style/syncform.css
@@ -0,0 +1,45 @@
+@import '~antd/dist/antd.css';
+
+.arrow {
+  display: inline-flex;
+  width: 10%;
+  height: 300px;
+  justify-content: center;
+  align-items: center;
+}
+
+.plane {
+  height: 265px;
+  border: 1px solid #d9d9d9;
+  margin-top: 10px;
+  padding: 10px 0 0 10px;
+  overflow-y: scroll;
+}
+
+.line {
+  height: 307px;
+  border-left: 1px solid #d9d9d9;
+  margin: 0 5%;
+}
+
+.mappings {
+  width: 30%;
+  height: 307px;
+  border: 1px solid #d9d9d9;
+  padding-left: 15px;
+}
+
+.mappings__title {
+  height: 32px;
+  line-height: 32px;
+  font-weight: 500;
+}
+
+.mappings__content {
+  height: 260px;
+  overflow-y: scroll;
+}
+
+#datasyncForm > .ant-form-item:last-child {
+  margin-bottom: 0;
+}
```

- 去除一些不符合需求的组件

```diff
diff --git a/packages/launcher-extension/src/index.ts b/packages/launcher-extension/src/index.ts
index 94dd0d7538..da8d738526 100644
--- a/packages/launcher-extension/src/index.ts
+++ b/packages/launcher-extension/src/index.ts
@@ -32,9 +32,9 @@ const plugin: JupyterFrontEndPlugin<ILauncher> = {
   activate,
   id: '@jupyterlab/launcher-extension:plugin',
   requires: [ITranslator],
-  optional: [ILabShell, ICommandPalette],
-  provides: ILauncher,
-  autoStart: true
+  optional: [ILabShell, ICommandPalette]
+  // provides: ILauncher,
+  // autoStart: true
 };

 /**
diff --git a/packages/metapackage/package.json b/packages/metapackage/package.json
index 2832703b72..921f346507 100644
--- a/packages/metapackage/package.json
+++ b/packages/metapackage/package.json
@@ -15,13 +15,16 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "style": "style/index.css",
   "directories": {
     "lib": "lib/"
   },
   "files": [
     "lib/*.d.ts",
     "lib/*.js.map",
-    "lib/*.js"
+    "lib/*.js",
+    "style/index.css",
+    "style/index.js"
   ],
   "scripts": {
     "build": "tsc -b",
@@ -75,6 +78,7 @@
     "@jupyterlab/inspector": "^3.4.3",
     "@jupyterlab/inspector-extension": "^3.4.3",
     "@jupyterlab/javascript-extension": "^3.4.3",
+    "@jupyterlab/jldbq-extension": "^1.0.0",
     "@jupyterlab/json-extension": "^3.4.3",
     "@jupyterlab/launcher": "^3.4.3",
     "@jupyterlab/launcher-extension": "^3.4.3",
@@ -86,6 +90,7 @@
     "@jupyterlab/markdownviewer-extension": "^3.4.3",
     "@jupyterlab/mathjax2": "^3.4.3",
     "@jupyterlab/mathjax2-extension": "^3.4.3",
+    "@jupyterlab/mytest-extension": "^1.0.0",
     "@jupyterlab/nbconvert-css": "^3.4.3",
     "@jupyterlab/nbformat": "^3.4.3",
     "@jupyterlab/notebook": "^3.4.3",
@@ -110,7 +115,6 @@
     "@jupyterlab/statusbar-extension": "^3.4.3",
     "@jupyterlab/terminal": "^3.4.3",
     "@jupyterlab/terminal-extension": "^3.4.3",
-    "@jupyterlab/theme-dark-extension": "^3.4.3",
     "@jupyterlab/theme-light-extension": "^3.4.3",
     "@jupyterlab/toc": "^5.4.3",
     "@jupyterlab/toc-extension": "^5.4.3",
@@ -132,5 +136,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "styleModule": "style/index.js"
 }

diff --git a/packages/theme-dark-extension/style/theme.css b/packages/metapackage/style/index.css
similarity index 52%
rename from packages/theme-dark-extension/style/theme.css
rename to packages/metapackage/style/index.css
index 4761c94d2b..b2f19abe63 100644
--- a/packages/theme-dark-extension/style/theme.css
+++ b/packages/metapackage/style/index.css
@@ -3,15 +3,6 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/

-@import './variables.css';
-
-/* Set the default typography for monospace elements */
-tt,
-code,
-kbd,
-samp,
-pre {
-  font-family: var(--jp-code-font-family);
-  font-size: var(--jp-code-font-size);
-  line-height: var(--jp-code-line-height);
-}
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+@import url('~@jupyterlab/jldbq-extension/style/index.css');
+@import url('~@jupyterlab/mytest-extension/style/index.css');

diff --git a/packages/metapackage/style/index.js b/packages/metapackage/style/index.js
new file mode 100644
index 0000000000..cae86f17db
--- /dev/null
+++ b/packages/metapackage/style/index.js
@@ -0,0 +1,8 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+import '@jupyterlab/jldbq-extension/style/index.js';
+import '@jupyterlab/mytest-extension/style/index.js';
```

- 修改 Notebook 的样式和布局, 匹配前端原型

```diff
diff --git a/packages/notebook-extension/src/index.ts b/packages/notebook-extension/src/index.ts
index 39a8057b24..c1524b80ad 100644
--- a/packages/notebook-extension/src/index.ts
+++ b/packages/notebook-extension/src/index.ts
@@ -21,7 +21,6 @@ import {
   MainAreaWidget,
   sessionContextDialogs,
   showDialog,
-  Toolbar,
   WidgetTracker
 } from '@jupyterlab/apputils';
 import { Cell, CodeCell, ICellModel, MarkdownCell } from '@jupyterlab/cells';
@@ -94,7 +93,8 @@ import {
 } from '@lumino/coreutils';
 import { DisposableSet, IDisposable } from '@lumino/disposable';
 import { Message, MessageLoop } from '@lumino/messaging';
-import { Menu, Panel } from '@lumino/widgets';
+// import { Menu, Panel } from '@lumino/widgets';
+import { Panel } from '@lumino/widgets';
 import { logNotebookOutput } from './nboutput';

 /**
@@ -270,7 +270,7 @@ const FACTORY = 'Notebook';
  * The excluded Export To ...
  * (returned from nbconvert's export list)
  */
-const FORMAT_EXCLUDE = ['notebook', 'python', 'custom'];
+// const FORMAT_EXCLUDE = ['notebook', 'python', 'custom'];

 /**
  * Setting Id storing the customized toolbar definition.
@@ -477,111 +477,111 @@ export const executionIndicator: JupyterFrontEndPlugin<void> = {
 /**
  * A plugin providing export commands in the main menu and command palette
  */
-export const exportPlugin: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/notebook-extension:export',
-  autoStart: true,
-  requires: [ITranslator, INotebookTracker],
-  optional: [IMainMenu, ICommandPalette],
-  activate: (
-    app: JupyterFrontEnd,
-    translator: ITranslator,
-    tracker: INotebookTracker,
-    mainMenu: IMainMenu | null,
-    palette: ICommandPalette | null
-  ) => {
-    const trans = translator.load('jupyterlab');
-    const { commands, shell } = app;
-    const services = app.serviceManager;
-
-    const isEnabled = (): boolean => {
-      return Private.isEnabled(shell, tracker);
-    };
-
-    commands.addCommand(CommandIDs.exportToFormat, {
-      label: args => {
-        const formatLabel = args['label'] as string;
-        return args['isPalette']
-          ? trans.__('Save and Export Notebook: %1', formatLabel)
-          : formatLabel;
-      },
-      execute: args => {
-        const current = getCurrent(tracker, shell, args);
-
-        if (!current) {
-          return;
-        }
-
-        const url = PageConfig.getNBConvertURL({
-          format: args['format'] as string,
-          download: true,
-          path: current.context.path
-        });
-        const { context } = current;
-
-        if (context.model.dirty && !context.model.readOnly) {
-          return context.save().then(() => {
-            window.open(url, '_blank', 'noopener');
-          });
-        }
-
-        return new Promise<void>(resolve => {
-          window.open(url, '_blank', 'noopener');
-          resolve(undefined);
-        });
-      },
-      isEnabled
-    });
-
-    // Add a notebook group to the File menu.
-    let exportTo: Menu | null | undefined;
-    if (mainMenu) {
-      exportTo = mainMenu.fileMenu.items.find(
-        item =>
-          item.type === 'submenu' &&
-          item.submenu?.id === 'jp-mainmenu-file-notebookexport'
-      )?.submenu;
-    }
-
-    void services.nbconvert.getExportFormats().then(response => {
-      if (response) {
-        const formatLabels: any = Private.getFormatLabels(translator);
-
-        // Convert export list to palette and menu items.
-        const formatList = Object.keys(response);
-        formatList.forEach(function (key) {
-          const capCaseKey = trans.__(key[0].toUpperCase() + key.substr(1));
-          const labelStr = formatLabels[key] ? formatLabels[key] : capCaseKey;
-          let args = {
-            format: key,
-            label: labelStr,
-            isPalette: false
-          };
-          if (FORMAT_EXCLUDE.indexOf(key) === -1) {
-            if (exportTo) {
-              exportTo.addItem({
-                command: CommandIDs.exportToFormat,
-                args: args
-              });
-            }
-            if (palette) {
-              args = {
-                format: key,
-                label: labelStr,
-                isPalette: true
-              };
-              const category = trans.__('Notebook Operations');
-              palette.addItem({
-                command: CommandIDs.exportToFormat,
-                category,
-                args
-              });
-            }
-          }
-        });
-      }
-    });
-  }
-};
+// export const exportPlugin: JupyterFrontEndPlugin<void> = {
+//   id: '@jupyterlab/notebook-extension:export',
+//   autoStart: true,
+//   requires: [ITranslator, INotebookTracker],
+//   optional: [IMainMenu, ICommandPalette],
+//   activate: (
+//     app: JupyterFrontEnd,
+//     translator: ITranslator,
+//     tracker: INotebookTracker,
+//     mainMenu: IMainMenu | null,
+//     palette: ICommandPalette | null
+//   ) => {
+//     const trans = translator.load('jupyterlab');
+//     const { commands, shell } = app;
+//     const services = app.serviceManager;
+
+//     const isEnabled = (): boolean => {
+//       return Private.isEnabled(shell, tracker);
+//     };
+
+//     commands.addCommand(CommandIDs.exportToFormat, {
+//       label: args => {
+//         const formatLabel = args['label'] as string;
+//         return args['isPalette']
+//           ? trans.__('Save and Export Notebook: %1', formatLabel)
+//           : formatLabel;
+//       },
+//       execute: args => {
+//         const current = getCurrent(tracker, shell, args);
+
+//         if (!current) {
+//           return;
+//         }
+
+//         const url = PageConfig.getNBConvertURL({
+//           format: args['format'] as string,
+//           download: true,
+//           path: current.context.path
+//         });
+//         const { context } = current;
+
+//         if (context.model.dirty && !context.model.readOnly) {
+//           return context.save().then(() => {
+//             window.open(url, '_blank', 'noopener');
+//           });
+//         }
+
+//         return new Promise<void>(resolve => {
+//           window.open(url, '_blank', 'noopener');
+//           resolve(undefined);
+//         });
+//       },
+//       isEnabled
+//     });
+
+//     // Add a notebook group to the File menu.
+//     let exportTo: Menu | null | undefined;
+//     if (mainMenu) {
+//       exportTo = mainMenu.fileMenu.items.find(
+//         item =>
+//           item.type === 'submenu' &&
+//           item.submenu?.id === 'jp-mainmenu-file-notebookexport'
+//       )?.submenu;
+//     }
+
+//     void services.nbconvert.getExportFormats().then(response => {
+//       if (response) {
+//         const formatLabels: any = Private.getFormatLabels(translator);
+
+//         // Convert export list to palette and menu items.
+//         const formatList = Object.keys(response);
+//         formatList.forEach(function (key) {
+//           const capCaseKey = trans.__(key[0].toUpperCase() + key.substr(1));
+//           const labelStr = formatLabels[key] ? formatLabels[key] : capCaseKey;
+//           let args = {
+//             format: key,
+//             label: labelStr,
+//             isPalette: false
+//           };
+//           if (FORMAT_EXCLUDE.indexOf(key) === -1) {
+//             if (exportTo) {
+//               exportTo.addItem({
+//                 command: CommandIDs.exportToFormat,
+//                 args: args
+//               });
+//             }
+//             if (palette) {
+//               args = {
+//                 format: key,
+//                 label: labelStr,
+//                 isPalette: true
+//               };
+//               const category = trans.__('Notebook Operations');
+//               palette.addItem({
+//                 command: CommandIDs.exportToFormat,
+//                 category,
+//                 args
+//               });
+//             }
+//           }
+//         });
+//       }
+//     });
+//   }
+// };

 /**
  * A plugin that adds a notebook trust status item to the status bar.
@@ -682,7 +682,7 @@ const plugins: JupyterFrontEndPlugin<any>[] = [
   factory,
   trackerPlugin,
   executionIndicator,
-  exportPlugin,
+  // exportPlugin,
   tools,
   commandEditItem,
   notebookTrustItem,
@@ -844,13 +844,6 @@ function activateWidgetFactory(
   toolbarRegistry.registerFactory<NotebookPanel>(FACTORY, 'cellType', panel =>
     ToolbarItems.createCellTypeItem(panel, translator)
   );
-  toolbarRegistry.registerFactory<NotebookPanel>(FACTORY, 'kernelName', panel =>
-    Toolbar.createKernelNameItem(
-      panel.sessionContext,
-      sessionContextDialogs,
-      translator
-    )
-  );

   toolbarRegistry.registerFactory<NotebookPanel>(
     FACTORY,

diff --git a/packages/notebook/src/default-toolbar.tsx b/packages/notebook/src/default-toolbar.tsx
index bf94760cc6..5e931bb525 100644
--- a/packages/notebook/src/default-toolbar.tsx
+++ b/packages/notebook/src/default-toolbar.tsx
@@ -278,15 +278,7 @@ export namespace ToolbarItems {
         widget: createRestartRunAllButton(panel, sessionDialogs, translator)
       },
       { name: 'cellType', widget: createCellTypeItem(panel, translator) },
-      { name: 'spacer', widget: Toolbar.createSpacerItem() },
-      {
-        name: 'kernelName',
-        widget: Toolbar.createKernelNameItem(
-          panel.sessionContext,
-          sessionDialogs,
-          translator
-        )
-      }
+      { name: 'spacer', widget: Toolbar.createSpacerItem() }
     ];
   }
 }

diff --git a/packages/notebook/src/panel.ts b/packages/notebook/src/panel.ts
index e1f70352f4..a30e01bd00 100644
--- a/packages/notebook/src/panel.ts
+++ b/packages/notebook/src/panel.ts
@@ -17,6 +17,7 @@ import {
   TranslationBundle
 } from '@jupyterlab/translation';
 import { each } from '@lumino/algorithm';
+import { BoxLayout } from '@lumino/widgets';
 import { Token } from '@lumino/coreutils';
 import { INotebookModel } from './model';
 import { Notebook, StaticNotebook } from './widget';
@@ -54,6 +55,8 @@ export class NotebookPanel extends DocumentWidget<Notebook, INotebookModel> {
     // Set up CSS classes
     this.addClass(NOTEBOOK_PANEL_CLASS);
     this.toolbar.addClass(NOTEBOOK_PANEL_TOOLBAR_CLASS);
+    BoxLayout.setSizeBasis(this.toolbar, 42);
+    (this.layout as BoxLayout).spacing = 10;
     this.content.addClass(NOTEBOOK_PANEL_NOTEBOOK_CLASS);

     // Set up things related to the context
@@ -136,7 +139,7 @@ export class NotebookPanel extends DocumentWidget<Notebook, INotebookModel> {
   /**
    * Set URI fragment identifier.
    */
-  setFragment(fragment: string) {
+  setFragment(fragment: string): void {
     void this.context.ready.then(() => {
       this.content.setFragment(fragment);
     });
@@ -154,7 +157,7 @@ export class NotebookPanel extends DocumentWidget<Notebook, INotebookModel> {
    * Prints the notebook by converting to HTML with nbconvert.
    */
   [Printing.symbol]() {
-    return async () => {
+    return async (): Promise<void> => {
       // Save before generating HTML
       if (this.context.model.dirty && !this.context.model.readOnly) {
         await this.context.save();

diff --git a/packages/notebook/style/base.css b/packages/notebook/style/base.css
index 4d90131c53..11b23e5da2 100644
--- a/packages/notebook/style/base.css
+++ b/packages/notebook/style/base.css
@@ -28,6 +28,7 @@
 .jp-NotebookPanel {
   display: block;
   height: 100%;
+  padding: 20px;
 }

 .jp-NotebookPanel.jp-Document {
@@ -36,7 +37,7 @@
 }

 .jp-Notebook {
-  padding: var(--jp-notebook-padding);
+  padding-right: var(--jp-notebook-padding);
   outline: none;
   overflow: auto;
   background: var(--jp-layout-color0);
@@ -95,7 +96,7 @@

 /* cell is active */
 .jp-Notebook .jp-Cell.jp-mod-active .jp-Collapser {
-  background: var(--jp-brand-color1);
+  background: #147bd1;
 }

 /* cell is dirty */

diff --git a/packages/notebook/style/toolbar.css b/packages/notebook/style/toolbar.css
index c1a3259af0..28a4859c59 100644
--- a/packages/notebook/style/toolbar.css
+++ b/packages/notebook/style/toolbar.css
@@ -17,8 +17,16 @@
 | Styles
 |----------------------------------------------------------------------------*/

-.jp-NotebookPanel-toolbar {
-  padding: var(--jp-notebook-toolbar-padding);
+.jp-Toolbar.jp-NotebookPanel-toolbar {
+  align-items: center;
+  background-color: #f7f9fd;
+  border: none;
+  box-shadow: none;
+  padding: 0 24px;
+}
+
+.jp-Toolbar.jp-NotebookPanel-toolbar > .jp-Toolbar-item {
+  height: auto;
 }

 .jp-Toolbar-item.jp-Notebook-toolbarCellType .jp-select-wrapper.jp-mod-focused {
```

- 去除不符合需求的组件和菜单项

```diff
diff --git a/packages/running-extension/src/index.ts b/packages/running-extension/src/index.ts
index fa4e785803..5a8efd480b 100644
--- a/packages/running-extension/src/index.ts
+++ b/packages/running-extension/src/index.ts
@@ -68,7 +68,7 @@ function activate(
   addKernelRunningSessionManager(runningSessionManagers, translator, app);
   // Rank has been chosen somewhat arbitrarily to give priority to the running
   // sessions widget in the sidebar.
-  app.shell.add(running, 'left', { rank: 200 });
+  // app.shell.add(running, 'left', { rank: 200 });

   return runningSessionManagers;
 }

diff --git a/packages/statusbar/src/statusbar.ts b/packages/statusbar/src/statusbar.ts
index 58da932baa..dadfbfcdc1 100644
--- a/packages/statusbar/src/statusbar.ts
+++ b/packages/statusbar/src/statusbar.ts
@@ -116,7 +116,7 @@ export class StatusBar extends Widget implements IStatusBar {
   /**
    * Dispose of the status bar.
    */
-  dispose() {
+  dispose(): void {
     this._leftRankItems.length = 0;
     this._rightRankItems.length = 0;
     this._disposables.dispose();
@@ -126,7 +126,7 @@ export class StatusBar extends Widget implements IStatusBar {
   /**
    * Handle an 'update-request' message to the status bar.
    */
-  protected onUpdateRequest(msg: Message) {
+  protected onUpdateRequest(msg: Message): void {
     this._refreshAll();
     super.onUpdateRequest(msg);
   }

diff --git a/packages/terminal-extension/src/index.ts b/packages/terminal-extension/src/index.ts
index 6aca46fbd2..5a18f9f165 100644
--- a/packages/terminal-extension/src/index.ts
+++ b/packages/terminal-extension/src/index.ts
@@ -17,7 +17,8 @@ import {
   WidgetTracker
 } from '@jupyterlab/apputils';
 import { ILauncher } from '@jupyterlab/launcher';
-import { IFileMenu, IMainMenu } from '@jupyterlab/mainmenu';
+// import { IFileMenu, IMainMenu } from '@jupyterlab/mainmenu';
+import { IMainMenu } from '@jupyterlab/mainmenu';
 import { IRunningSessionManagers, IRunningSessions } from '@jupyterlab/running';
 import { Terminal, TerminalAPI } from '@jupyterlab/services';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
@@ -27,7 +28,7 @@ import * as WidgetModuleType from '@jupyterlab/terminal/lib/widget';
 import { ITranslator } from '@jupyterlab/translation';
 import { terminalIcon } from '@jupyterlab/ui-components';
 import { toArray } from '@lumino/algorithm';
-import { Menu } from '@lumino/widgets';
+// import { Menu } from '@lumino/widgets';

 /**
  * The command IDs used by the terminal plugin.
@@ -85,7 +86,8 @@ function activate(
   runningSessionManagers: IRunningSessionManagers | null
 ): ITerminalTracker {
   const trans = translator.load('jupyterlab');
-  const { serviceManager, commands } = app;
+  // const { serviceManager, commands } = app;
+  const { serviceManager } = app;
   const category = trans.__('Terminal');
   const namespace = 'terminal';
   const tracker = new WidgetTracker<MainAreaWidget<ITerminal.ITerminal>>({
@@ -171,57 +173,57 @@ function activate(

   addCommands(app, tracker, settingRegistry, translator, options);

-  if (mainMenu) {
-    // Add "Terminal Theme" menu below "Theme" menu.
-    const themeMenu = new Menu({ commands });
-    themeMenu.title.label = trans._p('menu', 'Terminal Theme');
-    themeMenu.addItem({
-      command: CommandIDs.setTheme,
-      args: {
-        theme: 'inherit',
-        displayName: trans.__('Inherit'),
-        isPalette: false
-      }
-    });
-    themeMenu.addItem({
-      command: CommandIDs.setTheme,
-      args: {
-        theme: 'light',
-        displayName: trans.__('Light'),
-        isPalette: false
-      }
-    });
-    themeMenu.addItem({
-      command: CommandIDs.setTheme,
-      args: { theme: 'dark', displayName: trans.__('Dark'), isPalette: false }
-    });
-
-    // Add some commands to the "View" menu.
-    mainMenu.settingsMenu.addGroup(
-      [
-        { command: CommandIDs.increaseFont },
-        { command: CommandIDs.decreaseFont },
-        { type: 'submenu', submenu: themeMenu }
-      ],
-      40
-    );
-
-    // Add terminal creation to the file menu.
-    mainMenu.fileMenu.newMenu.addItem({
-      command: CommandIDs.createNew,
-      rank: 20
-    });
-
-    // Add terminal close-and-shutdown to the file menu.
-    mainMenu.fileMenu.closeAndCleaners.add({
-      tracker,
-      closeAndCleanupLabel: (n: number) => trans.__('Shutdown Terminal'),
-      closeAndCleanup: (current: MainAreaWidget<ITerminal.ITerminal>) => {
-        // The widget is automatically disposed upon session shutdown.
-        return current.content.session.shutdown();
-      }
-    } as IFileMenu.ICloseAndCleaner<MainAreaWidget<ITerminal.ITerminal>>);
-  }
+  // if (mainMenu) {
+  //   // Add "Terminal Theme" menu below "Theme" menu.
+  //   const themeMenu = new Menu({ commands });
+  //   themeMenu.title.label = trans._p('menu', 'Terminal Theme');
+  //   themeMenu.addItem({
+  //     command: CommandIDs.setTheme,
+  //     args: {
+  //       theme: 'inherit',
+  //       displayName: trans.__('Inherit'),
+  //       isPalette: false
+  //     }
+  //   });
+  //   themeMenu.addItem({
+  //     command: CommandIDs.setTheme,
+  //     args: {
+  //       theme: 'light',
+  //       displayName: trans.__('Light'),
+  //       isPalette: false
+  //     }
+  //   });
+  //   themeMenu.addItem({
+  //     command: CommandIDs.setTheme,
+  //     args: { theme: 'dark', displayName: trans.__('Dark'), isPalette: false }
+  //   });
+
+  //   // Add some commands to the "View" menu.
+  //   mainMenu.settingsMenu.addGroup(
+  //     [
+  //       { command: CommandIDs.increaseFont },
+  //       { command: CommandIDs.decreaseFont },
+  //       { type: 'submenu', submenu: themeMenu }
+  //     ],
+  //     40
+  //   );
+
+  //   // Add terminal creation to the file menu.
+  //   mainMenu.fileMenu.newMenu.addItem({
+  //     command: CommandIDs.createNew,
+  //     rank: 20
+  //   });
+
+  //   // Add terminal close-and-shutdown to the file menu.
+  //   mainMenu.fileMenu.closeAndCleaners.add({
+  //     tracker,
+  //     closeAndCleanupLabel: (n: number) => trans.__('Shutdown Terminal'),
+  //     closeAndCleanup: (current: MainAreaWidget<ITerminal.ITerminal>) => {
+  //       // The widget is automatically disposed upon session shutdown.
+  //       return current.content.session.shutdown();
+  //     }
+  //   } as IFileMenu.ICloseAndCleaner<MainAreaWidget<ITerminal.ITerminal>>);
+  // }

   if (palette) {
     // Add command palette items.

diff --git a/packages/theme-dark-extension/README.md b/packages/theme-dark-extension/README.md
deleted file mode 100644
index 6c19ca27cd..0000000000
--- a/packages/theme-dark-extension/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @jupyterlab/theme-dark-extension
-
-A JupyterLab theme extension which provides the default dark-colored theme.

diff --git a/packages/theme-dark-extension/package.json b/packages/theme-dark-extension/package.json
deleted file mode 100644
index eaded8c880..0000000000
--- a/packages/theme-dark-extension/package.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "@jupyterlab/theme-dark-extension",
-  "version": "3.4.3",
-  "description": "JupyterLab - Default Dark Theme",
-  "homepage": "https://github.com/jupyterlab/jupyterlab",
-  "bugs": {
-    "url": "https://github.com/jupyterlab/jupyterlab/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/jupyterlab/jupyterlab.git"
-  },
-  "license": "BSD-3-Clause",
-  "author": "Project Jupyter",
-  "sideEffects": true,
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "directories": {
-    "lib": "lib/"
-  },
-  "files": [
-    "lib/*.d.ts",
-    "lib/*.js.map",
-    "lib/*.js",
-    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "style/index.js"
-  ],
-  "scripts": {
-    "build": "tsc -b",
-    "clean": "rimraf lib && rimraf tsconfig.tsbuildinfo",
-    "watch": "tsc -b --watch"
-  },
-  "dependencies": {
-    "@jupyterlab/application": "^3.4.3",
-    "@jupyterlab/apputils": "^3.4.3",
-    "@jupyterlab/translation": "^3.4.3"
-  },
-  "devDependencies": {
-    "rimraf": "~3.0.0",
-    "typedoc": "~0.21.2",
-    "typescript": "~4.1.3"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "jupyterlab": {
-    "extension": true,
-    "themePath": "style/theme.css"
-  }
-}

diff --git a/packages/theme-dark-extension/src/index.ts b/packages/theme-dark-extension/src/index.ts
deleted file mode 100644
index 6f20ea8e9a..0000000000
--- a/packages/theme-dark-extension/src/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-/**
- * @packageDocumentation
- * @module theme-dark-extension
- */
-
-import {
-  JupyterFrontEnd,
-  JupyterFrontEndPlugin
-} from '@jupyterlab/application';
-import { IThemeManager } from '@jupyterlab/apputils';
-import { ITranslator } from '@jupyterlab/translation';
-
-/**
- * A plugin for the Jupyter Dark Theme.
- */
-const plugin: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/theme-dark-extension:plugin',
-  requires: [IThemeManager, ITranslator],
-  activate: (
-    app: JupyterFrontEnd,
-    manager: IThemeManager,
-    translator: ITranslator
-  ) => {
-    const trans = translator.load('jupyterlab');
-    const style = '@jupyterlab/theme-dark-extension/index.css';
-    manager.register({
-      name: 'JupyterLab Dark',
-      displayName: trans.__('JupyterLab Dark'),
-      isLight: false,
-      themeScrollbars: true,
-      load: () => manager.loadCSS(style),
-      unload: () => Promise.resolve(undefined)
-    });
-  },
-  autoStart: true
-};
-
-export default plugin;

diff --git a/packages/theme-dark-extension/style/variables.css b/packages/theme-dark-extension/style/variables.css
deleted file mode 100644
index ff87a764c3..0000000000
--- a/packages/theme-dark-extension/style/variables.css
+++ /dev/null
@@ -1,410 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-/*
-The following CSS variables define the main, public API for styling JupyterLab.
-These variables should be used by all plugins wherever possible. In other
-words, plugins should not define custom colors, sizes, etc unless absolutely
-necessary. This enables users to change the visual theme of JupyterLab
-by changing these variables.
-
-Many variables appear in an ordered sequence (0,1,2,3). These sequences
-are designed to work well together, so for example, `--jp-border-color1` should
-be used with `--jp-layout-color1`. The numbers have the following meanings:
-
-* 0: super-primary, reserved for special emphasis
-* 1: primary, most important under normal situations
-* 2: secondary, next most important under normal situations
-* 3: tertiary, next most important under normal situations
-
-Throughout JupyterLab, we are mostly following principles from Google's
-Material Design when selecting colors. We are not, however, following
-all of MD as it is not optimized for dense, information rich UIs.
-*/
-
-:root {
-  /* Elevation
-   *
-   * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here:
-   *
-   * https://github.com/material-components/material-components-web
-   * https://material-components-web.appspot.com/elevation.html
-   */
-
-  /* The dark theme shadows need a bit of work, but this will probably also require work on the core layout
-   * colors used in the theme as well. */
-  --jp-shadow-base-lightness: 32;
-  --jp-shadow-umbra-color: rgba(
-    var(--jp-shadow-base-lightness),
-    var(--jp-shadow-base-lightness),
-    var(--jp-shadow-base-lightness),
-    0.2
-  );
-  --jp-shadow-penumbra-color: rgba(
-    var(--jp-shadow-base-lightness),
-    var(--jp-shadow-base-lightness),
-    var(--jp-shadow-base-lightness),
-    0.14
-  );
-  --jp-shadow-ambient-color: rgba(
-    var(--jp-shadow-base-lightness),
-    var(--jp-shadow-base-lightness),
-    var(--jp-shadow-base-lightness),
-    0.12
-  );
-  --jp-elevation-z0: none;
-  --jp-elevation-z1: 0px 2px 1px -1px var(--jp-shadow-umbra-color),
-    0px 1px 1px 0px var(--jp-shadow-penumbra-color),
-    0px 1px 3px 0px var(--jp-shadow-ambient-color);
-  --jp-elevation-z2: 0px 3px 1px -2px var(--jp-shadow-umbra-color),
-    0px 2px 2px 0px var(--jp-shadow-penumbra-color),
-    0px 1px 5px 0px var(--jp-shadow-ambient-color);
-  --jp-elevation-z4: 0px 2px 4px -1px var(--jp-shadow-umbra-color),
-    0px 4px 5px 0px var(--jp-shadow-penumbra-color),
-    0px 1px 10px 0px var(--jp-shadow-ambient-color);
-  --jp-elevation-z6: 0px 3px 5px -1px var(--jp-shadow-umbra-color),
-    0px 6px 10px 0px var(--jp-shadow-penumbra-color),
-    0px 1px 18px 0px var(--jp-shadow-ambient-color);
-  --jp-elevation-z8: 0px 5px 5px -3px var(--jp-shadow-umbra-color),
-    0px 8px 10px 1px var(--jp-shadow-penumbra-color),
-    0px 3px 14px 2px var(--jp-shadow-ambient-color);
-  --jp-elevation-z12: 0px 7px 8px -4px var(--jp-shadow-umbra-color),
-    0px 12px 17px 2px var(--jp-shadow-penumbra-color),
-    0px 5px 22px 4px var(--jp-shadow-ambient-color);
-  --jp-elevation-z16: 0px 8px 10px -5px var(--jp-shadow-umbra-color),
-    0px 16px 24px 2px var(--jp-shadow-penumbra-color),
-    0px 6px 30px 5px var(--jp-shadow-ambient-color);
-  --jp-elevation-z20: 0px 10px 13px -6px var(--jp-shadow-umbra-color),
-    0px 20px 31px 3px var(--jp-shadow-penumbra-color),
-    0px 8px 38px 7px var(--jp-shadow-ambient-color);
-  --jp-elevation-z24: 0px 11px 15px -7px var(--jp-shadow-umbra-color),
-    0px 24px 38px 3px var(--jp-shadow-penumbra-color),
-    0px 9px 46px 8px var(--jp-shadow-ambient-color);
-
-  /* Borders
-   *
-   * The following variables, specify the visual styling of borders in JupyterLab.
-   */
-
-  --jp-border-width: 1px;
-  --jp-border-color0: var(--md-grey-700);
-  --jp-border-color1: var(--md-grey-700);
-  --jp-border-color2: var(--md-grey-800);
-  --jp-border-color3: var(--md-grey-900);
-  --jp-inverse-border-color: var(--md-grey-600);
-  --jp-border-radius: 2px;
-
-  /* UI Fonts
-   *
-   * The UI font CSS variables are used for the typography all of the JupyterLab
-   * user interface elements that are not directly user generated content.
-   *
-   * The font sizing here is done assuming that the body font size of --jp-ui-font-size1
-   * is applied to a parent element. When children elements, such as headings, are sized
-   * in em all things will be computed relative to that body size.
-   */
-
-  --jp-ui-font-scale-factor: 1.2;
-  --jp-ui-font-size0: 0.83333em;
-  --jp-ui-font-size1: 13px; /* Base font size */
-  --jp-ui-font-size2: 1.2em;
-  --jp-ui-font-size3: 1.44em;
-
-  --jp-ui-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-
-  /*
-   * Use these font colors against the corresponding main layout colors.
-   * In a light theme, these go from dark to light.
-   */
-
-  /* Defaults use Material Design specification */
-  --jp-ui-font-color0: rgba(255, 255, 255, 1);
-  --jp-ui-font-color1: rgba(255, 255, 255, 0.87);
-  --jp-ui-font-color2: rgba(255, 255, 255, 0.54);
-  --jp-ui-font-color3: rgba(255, 255, 255, 0.38);
-
-  /*
-   * Use these against the brand/accent/warn/error colors.
-   * These will typically go from light to darker, in both a dark and light theme.
-   */
-
-  --jp-ui-inverse-font-color0: rgba(0, 0, 0, 1);
-  --jp-ui-inverse-font-color1: rgba(0, 0, 0, 0.8);
-  --jp-ui-inverse-font-color2: rgba(0, 0, 0, 0.5);
-  --jp-ui-inverse-font-color3: rgba(0, 0, 0, 0.3);
-
-  /* Content Fonts
-   *
-   * Content font variables are used for typography of user generated content.
-   *
-   * The font sizing here is done assuming that the body font size of --jp-content-font-size1
-   * is applied to a parent element. When children elements, such as headings, are sized
-   * in em all things will be computed relative to that body size.
-   */
-
-  --jp-content-line-height: 1.6;
-  --jp-content-font-scale-factor: 1.2;
-  --jp-content-font-size0: 0.83333em;
-  --jp-content-font-size1: 14px; /* Base font size */
-  --jp-content-font-size2: 1.2em;
-  --jp-content-font-size3: 1.44em;
-  --jp-content-font-size4: 1.728em;
-  --jp-content-font-size5: 2.0736em;
-
-  /* This gives a magnification of about 125% in presentation mode over normal. */
-  --jp-content-presentation-font-size1: 17px;
-
-  --jp-content-heading-line-height: 1;
-  --jp-content-heading-margin-top: 1.2em;
-  --jp-content-heading-margin-bottom: 0.8em;
-  --jp-content-heading-font-weight: 500;
-
-  /* Defaults use Material Design specification */
-  --jp-content-font-color0: rgba(255, 255, 255, 1);
-  --jp-content-font-color1: rgba(255, 255, 255, 1);
-  --jp-content-font-color2: rgba(255, 255, 255, 0.7);
-  --jp-content-font-color3: rgba(255, 255, 255, 0.5);
-
-  --jp-content-link-color: var(--md-blue-300);
-
-  --jp-content-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol';
-
-  /*
-   * Code Fonts
-   *
-   * Code font variables are used for typography of code and other monospaces content.
-   */
-
-  --jp-code-font-size: 13px;
-  --jp-code-line-height: 1.3077; /* 17px for 13px base */
-  --jp-code-padding: 5px; /* 5px for 13px base, codemirror highlighting needs integer px value */
-  --jp-code-font-family-default: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-  --jp-code-font-family: var(--jp-code-font-family-default);
-
-  /* This gives a magnification of about 125% in presentation mode over normal. */
-  --jp-code-presentation-font-size: 16px;
-
-  /* may need to tweak cursor width if you change font size */
-  --jp-code-cursor-width0: 1.4px;
-  --jp-code-cursor-width1: 2px;
-  --jp-code-cursor-width2: 4px;
-
-  /* Layout
-   *
-   * The following are the main layout colors use in JupyterLab. In a light
-   * theme these would go from light to dark.
-   */
-
-  --jp-layout-color0: #111111;
-  --jp-layout-color1: var(--md-grey-900);
-  --jp-layout-color2: var(--md-grey-800);
-  --jp-layout-color3: var(--md-grey-700);
-  --jp-layout-color4: var(--md-grey-600);
-
-  /* Inverse Layout
-   *
-   * The following are the inverse layout colors use in JupyterLab. In a light
-   * theme these would go from dark to light.
-   */
-
-  --jp-inverse-layout-color0: white;
-  --jp-inverse-layout-color1: white;
-  --jp-inverse-layout-color2: var(--md-grey-200);
-  --jp-inverse-layout-color3: var(--md-grey-400);
-  --jp-inverse-layout-color4: var(--md-grey-600);
-
-  /* Brand/accent */
-
-  --jp-brand-color0: var(--md-blue-700);
-  --jp-brand-color1: var(--md-blue-500);
-  --jp-brand-color2: var(--md-blue-300);
-  --jp-brand-color3: var(--md-blue-100);
-  --jp-brand-color4: var(--md-blue-50);
-
-  --jp-accent-color0: var(--md-green-700);
-  --jp-accent-color1: var(--md-green-500);
-  --jp-accent-color2: var(--md-green-300);
-  --jp-accent-color3: var(--md-green-100);
-
-  /* State colors (warn, error, success, info) */
-
-  --jp-warn-color0: var(--md-orange-700);
-  --jp-warn-color1: var(--md-orange-500);
-  --jp-warn-color2: var(--md-orange-300);
-  --jp-warn-color3: var(--md-orange-100);
-
-  --jp-error-color0: var(--md-red-700);
-  --jp-error-color1: var(--md-red-500);
-  --jp-error-color2: var(--md-red-300);
-  --jp-error-color3: var(--md-red-100);
-
-  --jp-success-color0: var(--md-green-700);
-  --jp-success-color1: var(--md-green-500);
-  --jp-success-color2: var(--md-green-300);
-  --jp-success-color3: var(--md-green-100);
-
-  --jp-info-color0: var(--md-cyan-700);
-  --jp-info-color1: var(--md-cyan-500);
-  --jp-info-color2: var(--md-cyan-300);
-  --jp-info-color3: var(--md-cyan-100);
-
-  /* Cell specific styles */
-
-  --jp-cell-padding: 5px;
-
-  --jp-cell-collapser-width: 8px;
-  --jp-cell-collapser-min-height: 20px;
-  --jp-cell-collapser-not-active-hover-opacity: 0.6;
-
-  --jp-cell-editor-background: var(--jp-layout-color1);
-  --jp-cell-editor-border-color: var(--md-grey-700);
-  --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300);
-  --jp-cell-editor-active-background: var(--jp-layout-color0);
-  --jp-cell-editor-active-border-color: var(--jp-brand-color1);
-
-  --jp-cell-prompt-width: 64px;
-  --jp-cell-prompt-font-family: var(--jp-code-font-family-default);
-  --jp-cell-prompt-letter-spacing: 0px;
-  --jp-cell-prompt-opacity: 1;
-  --jp-cell-prompt-not-active-opacity: 1;
-  --jp-cell-prompt-not-active-font-color: var(--md-grey-300);
-
-  /* A custom blend of MD grey and blue 600
-   * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */
-  --jp-cell-inprompt-font-color: #307fc1;
-  /* A custom blend of MD grey and orange 600
-   * https://meyerweb.com/eric/tools/color-blend/#546E7A:F4511E:5:hex */
-  --jp-cell-outprompt-font-color: #bf5b3d;
-
-  /* Notebook specific styles */
-
-  --jp-notebook-padding: 10px;
-  --jp-notebook-select-background: var(--jp-layout-color1);
-  --jp-notebook-multiselected-color: rgba(33, 150, 243, 0.24);
-
-  /* The scroll padding is calculated to fill enough space at the bottom of the
-  notebook to show one single-line cell (with appropriate padding) at the top
-  when the notebook is scrolled all the way to the bottom. We also subtract one
-  pixel so that no scrollbar appears if we have just one single-line cell in the
-  notebook. This padding is to enable a 'scroll past end' feature in a notebook.
-  */
-  --jp-notebook-scroll-padding: calc(
-    100% - var(--jp-code-font-size) * var(--jp-code-line-height) -
-      var(--jp-code-padding) - var(--jp-cell-padding) - 1px
-  );
-
-  /* Rendermime styles */
-
-  --jp-rendermime-error-background: rgba(244, 67, 54, 0.28);
-  --jp-rendermime-table-row-background: var(--md-grey-900);
-  --jp-rendermime-table-row-hover-background: rgba(3, 169, 244, 0.2);
-
-  /* Dialog specific styles */
-
-  --jp-dialog-background: rgba(0, 0, 0, 0.6);
-
-  /* Console specific styles */
-
-  --jp-console-padding: 10px;
-
-  /* Toolbar specific styles */
-
-  --jp-toolbar-border-color: var(--jp-border-color2);
-  --jp-toolbar-micro-height: 8px;
-  --jp-toolbar-background: var(--jp-layout-color1);
-  --jp-toolbar-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.8);
-  --jp-toolbar-header-margin: 4px 4px 0px 4px;
-  --jp-toolbar-active-background: var(--jp-layout-color0);
-
-  /* Statusbar specific styles */
-
-  --jp-statusbar-height: 24px;
-
-  /* Input field styles */
-
-  --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300);
-  --jp-input-active-background: var(--jp-layout-color0);
-  --jp-input-hover-background: var(--jp-layout-color2);
-  --jp-input-background: var(--md-grey-800);
-  --jp-input-border-color: var(--jp-inverse-border-color);
-  --jp-input-active-border-color: var(--jp-brand-color1);
-  --jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3);
-
-  /* General editor styles */
-
-  --jp-editor-selected-background: var(--jp-layout-color2);
-  --jp-editor-selected-focused-background: rgba(33, 150, 243, 0.24);
-  --jp-editor-cursor-color: var(--jp-ui-font-color0);
-
-  /* Code mirror specific styles */
-
-  --jp-mirror-editor-keyword-color: var(--md-green-500);
-  --jp-mirror-editor-atom-color: var(--md-blue-300);
-  --jp-mirror-editor-number-color: var(--md-green-400);
-  --jp-mirror-editor-def-color: var(--md-blue-600);
-  --jp-mirror-editor-variable-color: var(--md-grey-300);
-  --jp-mirror-editor-variable-2-color: var(--md-blue-400);
-  --jp-mirror-editor-variable-3-color: var(--md-green-600);
-  --jp-mirror-editor-punctuation-color: var(--md-blue-400);
-  --jp-mirror-editor-property-color: var(--md-blue-400);
-  --jp-mirror-editor-operator-color: #aa22ff;
-  --jp-mirror-editor-comment-color: #408080;
-  --jp-mirror-editor-string-color: #ff7070;
-  --jp-mirror-editor-string-2-color: var(--md-purple-300);
-  --jp-mirror-editor-meta-color: #aa22ff;
-  --jp-mirror-editor-qualifier-color: #555;
-  --jp-mirror-editor-builtin-color: var(--md-green-600);
-  --jp-mirror-editor-bracket-color: #997;
-  --jp-mirror-editor-tag-color: var(--md-green-700);
-  --jp-mirror-editor-attribute-color: var(--md-blue-700);
-  --jp-mirror-editor-header-color: var(--md-blue-500);
-  --jp-mirror-editor-quote-color: var(--md-green-300);
-  --jp-mirror-editor-link-color: var(--md-blue-700);
-  --jp-mirror-editor-error-color: #f00;
-  --jp-mirror-editor-hr-color: #999;
-
-  /* Vega extension styles */
-
-  --jp-vega-background: var(--md-grey-400);
-
-  /* Sidebar-related styles */
-
-  --jp-sidebar-min-width: 250px;
-
-  /* Search-related styles */
-
-  --jp-search-toggle-off-opacity: 0.6;
-  --jp-search-toggle-hover-opacity: 0.8;
-  --jp-search-toggle-on-opacity: 1;
-  --jp-search-selected-match-background-color: rgb(255, 225, 0);
-  --jp-search-selected-match-color: black;
-  --jp-search-unselected-match-background-color: var(
-    --jp-inverse-layout-color0
-  );
-  --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0);
-
-  /* scrollbar related styles. Supports every browser except Edge. */
-
-  /* colors based on JetBrain's Darcula theme */
-
-  --jp-scrollbar-background-color: #3f4244;
-  --jp-scrollbar-thumb-color: 88, 96, 97; /* need to specify thumb color as an RGB triplet */
-
-  --jp-scrollbar-endpad: 3px; /* the minimum gap between the thumb and the ends of a scrollbar */
-
-  /* hacks for setting the thumb shape. These do nothing in Firefox */
-
-  --jp-scrollbar-thumb-margin: 3.5px; /* the space in between the sides of the thumb and the track */
-  --jp-scrollbar-thumb-radius: 9px; /* set to a large-ish value for rounded endcaps on the thumb */
-
-  /* Icon colors that work well with light or dark backgrounds */
-  --jp-icon-contrast-color0: var(--md-purple-600);
-  --jp-icon-contrast-color1: var(--md-green-600);
-  --jp-icon-contrast-color2: var(--md-pink-600);
-  --jp-icon-contrast-color3: var(--md-blue-600);
-}

diff --git a/packages/theme-dark-extension/typedoc.json b/packages/theme-dark-extension/typedoc.json
deleted file mode 100644
index 7ddb378afe..0000000000
--- a/packages/theme-dark-extension/typedoc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "out": "../../docs/api/theme-dark-extension",
-  "theme": "../../typedoc-theme"
-}

diff --git a/packages/toc-extension/src/index.ts b/packages/toc-extension/src/index.ts
index 334a5a2a2d..94ac4441ed 100644
--- a/packages/toc-extension/src/index.ts
+++ b/packages/toc-extension/src/index.ts
@@ -85,7 +85,7 @@ async function activateTOC(
   toc.node.setAttribute('role', 'region');
   toc.node.setAttribute('aria-label', trans.__('Table of Contents section'));

-  app.shell.add(toc, 'left', { rank: 400 });
+  // app.shell.add(toc, 'left', { rank: 400 });

   app.commands.addCommand(CommandIDs.runCells, {
     execute: args => {
```

- 更改默认的 Locale 为 zh_CN

```diff
diff --git a/packages/translation-extension/schema/plugin.json b/packages/translation-extension/schema/plugin.json
index 2ef8ed8bb7..b6cf3f74e9 100644
--- a/packages/translation-extension/schema/plugin.json
+++ b/packages/translation-extension/schema/plugin.json
@@ -34,7 +34,7 @@
       "type": "string",
       "title": "Language locale",
       "description": "Set the interface display language. Examples: 'es_CO', 'fr'.",
-      "default": "en"
+      "default": "zh_CN"
     },
     "stringsPrefix": {
       "type": "string",

diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index beb11f76d7..78abe9a098 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -50,6 +50,7 @@
     "@lumino/commands": "^1.19.0",
     "@lumino/coreutils": "^1.11.0",
     "@lumino/disposable": "^1.10.0",
+    "@lumino/messaging": "^1.10.0",
     "@lumino/signaling": "^1.10.0",
     "@lumino/virtualdom": "^1.14.0",
     "@lumino/widgets": "^1.30.0",
```

- 修正中间面板 Tab 的 z-index

```diff
diff --git a/packages/ui-components/src/icon/widgets/tabbarsvg.ts b/packages/ui-components/src/icon/widgets/tabbarsvg.ts
index fbcae09f57..330b751260 100644
--- a/packages/ui-components/src/icon/widgets/tabbarsvg.ts
+++ b/packages/ui-components/src/icon/widgets/tabbarsvg.ts
@@ -7,6 +7,8 @@ import { LabIconStyle } from '../../style';
 import { classes } from '../../utils';
 import { addIcon, closeIcon } from '../iconimports';
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { Message } from '@lumino/messaging';
+import { ElementInlineStyle, VirtualDOM } from '@lumino/virtualdom';

 /**
  * a widget which displays titles as a single row or column of tabs.
@@ -29,6 +31,20 @@ export class TabBarSvg<T> extends TabBar<T> {
       title: trans.__('New Launcher')
     });
   }
+
+  protected onUpdateRequest(msg: Message): void {
+    let titles = this.titles;
+    let renderer = this.renderer;
+    let currentTitle = this.currentTitle;
+    let content = new Array<VirtualElement>(titles.length);
+    for (let i = 0, n = titles.length; i < n; ++i) {
+      let title = titles[i];
+      let current = title === currentTitle;
+      let zIndex = current ? 3 : 0;
+      content[i] = renderer.renderTab({ title, current, zIndex });
+    }
+    VirtualDOM.render(content, this.contentNode);
+  }
 }

 export namespace TabBarSvg {
@@ -59,6 +75,13 @@ export namespace TabBarSvg {
         closeIcon
       ) as unknown) as VirtualElement;
     }
+
+    createTabStyle(data: TabBar.IRenderData<any>): ElementInlineStyle {
+      if (data.zIndex === 0) {
+        return {};
+      }
+      return { zIndex: `${data.zIndex}` };
+    }
   }

   export const defaultRenderer = new Renderer();
```
