docs: update the Guides in Chinese (#525)

* docs: update the introduction * docs: update the Introduction of zhCN version * docs: tutorials for keybinding, quickAccess and Icon * feat: improve homepage (#527) * build: update the limitation of node version (#515) * fix: fix can't clear the notifications (#518) * fix: fix can't clear the notifications * test: update tests * test: ignore render tests * fix: fix create file node incorrect on contextMenu (#522) * refactor: optimize the MoleculeProvider (#517) * refactor: update the MoleculeProvider * fix(molecule provider): init workbench ui after init locales * test: unit test for splitLanguagesExts * docs: comments for MoleculeProvider * test: unit test for MoleculeProvider * refactor(i18n): update the apis of locales * fix: correct the reset to rest * chore: ignore website prettier * style: prettify code * test: update the snapshot case * test: remove the snapshot * test: update snapshot * ci: yarn test -u * ci: remove the -u argument of yarn test * test: update the MoleculeProvider snap * fix: show the SubMenu in right place when the Menu is horizontal mode (#526) * fix: show the submenu in right place when horizontal mode * test: update the snap of Menu * feat: support sort in folderTree (#524) * feat: support sort in folderTree * feat: improve check hidden files * docs: update Guides * docs: unify the files name * docs: update Guides, Overview * docs: update the QuickStart * docs: update the first extension * docs: update the extension guides * docs: update Workbench UI * fix: improve the circular dep error when execute yarn link (#528) * fix: remove the warning in console (#529) * fix: remove the warning in console * test: update snapshots * docs: update ColorTheme, readme, keybinding, i18n * docs: update Keybinding * docs: update quickAccess, add demo tips * docs: update i18n * docs: update Settings guide * docs: update Icon guide * docs: update customize the Workbench guide * docs: update images * docs: update Contributing * docs: update English version * fix: remove the 140 width limit for buttons * docs: default locale is zh-CN * docs: improve the links (#533) Co-authored-by: 野迂迂 <[email protected]>
DTStack · Dec 6, 2021 · 720fedf · 720fedf
1 parent 059016c
commit 720fedf
Show file tree

Hide file tree

Showing 67 changed files with 3,409 additions and 601 deletions.
diff --git a/src/workbench/editor/welcome/style.scss b/src/workbench/editor/welcome/style.scss
@@ -39,7 +39,6 @@ $border-color: rgba(115, 115, 115, 0.4);
 
         > ul {
             align-items: center;
-            background-color: rgba(162, 162, 162, 0.11);
             border-top: 1px solid $border-color;
             box-sizing: border-box;
             color: #b6b6b6;

diff --git a/website/docs/advanced/basic.md b/website/docs/advanced/basic.md
diff --git a/website/docs/advanced/customize-workbench.md b/website/docs/advanced/customize-workbench.md
@@ -1 +1,191 @@
-# Customized the Workbench
+---
+title: Custom Workbench
+sidebar_label: Custom Workbench
+---
+
+Molecule 默认的 **Workbench** UI 是一个 **VSCode** 的克隆版本。但是我们在实际的开发场景中，往往不能满足我们的需求。
+
+除了内置的一些原子 [Components](/docs/api/namespaces/molecule.component) 以外，Molecule 同时提供了基本的 **Workbench、SideBar、Editor、ActivityBar、MenuBar、Panel、StatusBar** 等核心[**UI 部件**](./../guides/extend-workbench.md)，以便开发者根据自己的需求**重新组装**自己的 **Workbench**。
+
+:::tip
+本文内容中的所有代码，都以 [Quick Start](../quick-start) 中的 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo) 项目为基础演示。
+:::
+
+## 自定义 Workbench 示例
+
+<div align="center">
+ <img src="/img/advanced/custom-workbench.png" alt="Search files by name" />
+</div>
+
+Molecule 默认的是 **VSCode 布局**的 Workbench。在上图示例中，我们将 **MenuBar** 水平置于了**顶部**的位置，在编辑器的右侧，我们又自定义了一个**右边栏（RightSideBar)**。
+
+:::info
+我们会在未来的版本中，将 **MenuBar 置顶布局** 、**右边栏（RightSideBar）**作为 Molecule 的**内置**功能。
+:::
+
+### 重组 Workbench
+
+首先我们打开 Molecule [源码](https://github.com/DTStack/molecule)仓库，找到 `src/workbench` 目录，拷贝 `workbench.tsx` 文件到项目的 `views` 或其他目录下，将其重命名为 `myWorkbench.tsx` 文件：
+
+```tsx
+<div className={workbenchClassName}>
+    <div className={mainBenchClassName}>
+        <div className={compositeBarClassName}>
+            {!menuBar.hidden && <MenuBarView />}
+            {!activityBar.hidden && <ActivityBarView />}
+        </div>
+        <SplitPane
+            split="vertical"
+            primary="first"
+            allowResize={true}
+            onChange={onPaneSizeChange as any}
+        >
+            <Pane
+                minSize="170px"
+                initialSize={splitPanePos[0]}
+                maxSize="80%"
+                className={sidebar.hidden && 'hidden'}
+            >
+                <SidebarView />
+            </Pane>
+            <SplitPane
+                primary="first"
+                split="horizontal"
+                allowResize={true}
+                // react-split-pane onChange: (newSizes: [size, ratio]) => void；
+                onChange={onHorizontalPaneSizeChange as any}
+            >
+                {getContent(!!panel.panelMaximized, !!panel.hidden)}
+            </SplitPane>
+        </SplitPane>
+    </div>
+</div>
+```
+
+代码中，`MenuBarView` 和 `ActivityBarView` 默认都放在了 `className` 为 `compositeBarClassName` **DIV** 元素中，而 `SplitPane` 组件中
+默认包含了 `SidebarView` 和右侧的 **Editor** 和 **Panel** 面板，并没有包含 **RightSideBar** 面板。
+
+具体改造如下：
+
+```tsx title="/src/views/myWorkbench.tsx"
+<div className={workbenchClassName}>
+    {!menuBar.hidden && <MyMenuBarView />}
+    <div className={mainBenchClassName}>
+        <div className={compositeBarClassName}>
+            {!activityBar.hidden && <ActivityBarView />}
+        </div>
+        <SplitPane
+            split="vertical"
+            primary="first"
+            allowResize={true}
+            onChange={onPaneSizeChange as any}
+        >
+            <Pane
+                minSize="170px"
+                initialSize={splitPanePos[0]}
+                maxSize="80%"
+                className={sidebar.hidden && 'hidden'}
+            >
+                <SidebarView />
+            </Pane>
+            <SplitPane
+                primary="first"
+                split="horizontal"
+                allowResize={true}
+                // react-split-pane onChange: (newSizes: [size, ratio]) => void；
+                onChange={onHorizontalPaneSizeChange as any}
+            >
+                {getContent(!!panel.panelMaximized, !!panel.hidden)}
+            </SplitPane>
+            <Pane
+                minSize="40px"
+                initialSize="240px"
+                maxSize="40%"
+                className={'rightSidebar'}
+            >
+                <Sidebar current={MySidePane.id} panes={[MySidePane]} />
+            </Pane>
+        </SplitPane>
+    </div>
+</div>
+```
+
+:::caution
+以上代码仅仅是 `myWorkbench.tsx` 文件的部分代码，完整代码请查看 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/views/myWorkbench.tsx)
+:::
+
+我们移动了 `MenuBar` 组件的位置，使用的是自己定义的 `MyMenuBarView` 组件。在 `SplitPane` 组件中新增了一个
+`className` 为 `rightSidebar` 的面板，使用了内置的 `Sidebar` 组件，并在 `Sidebar` 中使用了自定义的 `MySidePane` 组件。
+
+### 自定义 MenuBar
+
+上图中 MenuBar 包含了一个自定义的 **Logo** 元素，MenuBar 并使用了**横向（Horizontal）**的布局。 与 Workbench 一样，我们从 `src/workbench/menuBar` 下拷贝默认的 `menuBar.tsx` 组件，重命名为 `myMenuBar.tsx`：
+
+```tsx title="/src/views/myMenuBar/index.tsx"
+<div className="myMenuBar">
+    <Logo alt="logo" src="[email protected]" />
+    <Menu
+        role="menu"
+        mode={MenuMode.Horizontal}
+        trigger="click"
+        onClick={handleClick}
+        style={{ width: '100%' }}
+        data={addKeybindingForData(data)}
+    />
+</div>
+```
+
+代码中新增了 `Logo` 组件，并替换了原来的 [DropDown](/docs/api/namespaces/molecule.component#dropdown) 为 [Menu](/docs/api/namespaces/molecule.component#menu) 组件。
+
+### 自定义 RightSideBar
+
+与 `MenuBar` 稍有不同的是，因为复用了内置的 [Sidebar](/docs/api/namespaces/molecule#sidebar-1) 组件，所以这里我们只需要传入 [ISidebarPane](/docs/api/interfaces/molecule.models.ISidebarPane) 类型的组件：
+
+```tsx title="/src/views/mySidePane.tsx"
+import React from 'react';
+import molecule from '@dtinsight/molecule';
+import { Header, Content } from '@dtinsight/molecule/esm/workbench/sidebar';
+import { IActionBarItemProps } from '@dtinsight/molecule/esm/components';
+import { localize } from '@dtinsight/molecule/esm/i18n/localize';
+import { ISidebarPane } from '@dtinsight/molecule/esm/model';
+
+const Toolbar = molecule.component.Toolbar;
+
+export function MySidePaneView() {
+    const renderHeaderToolbar = React.useCallback((): IActionBarItemProps[] => {
+        return [
+            {
+                icon: 'editor-layout',
+                id: 'tools',
+                title: 'Layout the right SidePane',
+            },
+        ];
+    }, []);
+
+    return (
+        <div className={'mySidePane'}>
+            <Header
+                title={localize('demo.rightSidebar.title', 'Tools')}
+                toolbar={<Toolbar data={renderHeaderToolbar()} />}
+            />
+            <Content>
+                <p style={{ textAlign: 'center' }}>Right Side Pane</p>
+            </Content>
+        </div>
+    );
+}
+
+export const MySidePane: ISidebarPane = {
+    id: 'mySidePane',
+    title: 'Tools',
+    render: () => {
+        return <MySidePaneView />;
+    },
+};
+```
+
+完成这些操作后，即可在界面中看到如上图所示的布局了。完整示例请参考 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo)
+
+## 总结
+
+上例中使用了很多 Molecule **内置**的 UI 组件来实现自定义，然而使用[内置组件](./customize-builtin.md)是有一定上手成本的，需要开发者对内置的 UI 组件有比较好了解。我们会在后序的版本中，持续优化**文档**和**API**，以减轻上手成本，并尽可能的提供更多的使用**示例**。