Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: improve the links #533

Merged
merged 1 commit into from
Dec 6, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class KeybindingAction extends Action2 {
}
```

代码中,`keybinding` 字段则是快捷键的主要部分。我们在 `primary` 这里定义了一个 `Command/Ctrl + S ` 的**组合键**,**触发函数** `run` 执行了一个 `alert`。 其中 `id` 参数为 当前 Action 的 **ID**,我们可以使用 `executeCommand(actionId)` 方法[主动触发](#主动执行-action) 这个 Action。
代码中,`keybinding` 字段则是快捷键的主要部分。我们在 `primary` 这里定义了一个 `Command/Ctrl + S ` 的**组合键**,**触发函数** `run` 执行了一个 `alert`。 其中 `id` 参数为 当前 Action 的 **ID**,我们可以使用 `executeCommand(actionId)` 方法[主动触发](#主动执行-action)这个 Action。

## 注册 Action

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ Molecule 内置了一个简单的**国际化(i18n)**方案,支持我们基

修改完成后,Molecule 会在 通知栏[(Notification)](./extend-builtin-ui.md#通知栏notification)弹出更新消息,我们选择 **Reload** 即可重新加载。

## [本地化服务(LocaleService) 对象](/docs/api/classes/molecule.i18n.LocaleService)
## [本地化服务(LocaleService) 对象](/docs/api/classes/molecule.LocaleService)

**LocaleService** 提供了一些基础的 [API](/docs/api/classes/molecule.i18n.LocaleService) 方法,这些方法可以帮助我们完成对国际化功能的扩展,例如:
**LocaleService** 提供了一些基础的 [API](/docs/api/classes/molecule.LocaleService) 方法,这些方法可以帮助我们完成对国际化功能的扩展,例如:

**本地化(localize)**一个对象:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ molecule.editor.open({

关于[面板(Panel)](/docs/api/interfaces/molecule.IPanelService),我们以常见的 **Terminal** 面板为示例。为了区分上面的**数据库**示例,这里我们在 `extensions` 下新建了一个叫 `terminal` 的文件夹。

首先,我们先声明一个 [IPanelItem](/docs/api/interfaces/molecule.models.IEditorTab) 类型的对象 `terminalPanel`:
首先,我们先声明一个 [IPanelItem](/docs/api/interfaces/molecule.models.IPanelItem) 类型的对象 `terminalPanel`:

```ts title="src/extensions/terminal/base.tsx"
import { localize } from '@dtinsight/molecule/esm/i18n/localize';
Expand Down Expand Up @@ -201,7 +201,7 @@ export class TerminalExtension implements IExtension {

在 `activate` 方法中,利用 [`molecule.panel.add`](/docs/api/interfaces/molecule.IPanelService#add) 将 `terminalPanel` 添加到 Panel 视图中。

完整代码请参考[Terminal](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/extensions/terminal)。
完整代码请参考 [Terminal](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/extensions/terminal)。

### [状态栏(StatusBar)](/docs/api/interfaces/molecule.IStatusBarService)

Expand Down Expand Up @@ -263,7 +263,7 @@ dispose(extensionCtx: IExtensionService): void {
```

上例中,我们在**文件(File)**下新增了一个菜单项 **Create Data Source**,移除则使用 `molecule.menuBar.remove` 方法。如果想重置所有 MenuBar 的数据,
可以使用 [`molecule.menuBar.setMenus()` ](/docs/api/interfaces/molecule.IMenuBarService#setmenus)。
可以使用 [`molecule.menuBar.setMenus` ](/docs/api/interfaces/molecule.IMenuBarService#setmenus)。

更多关于 MenuBar 的操作,请查看 [MenuBar API](/docs/api/interfaces/molecule.IMenuBarService) 文档。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ sidebar_label: 编写第一个扩展
sidebar_position: 1
---

在 Molecule 中,所有的自定义的功能,都是利用[扩展(Extension)](./guides/extension)来完成的。接下来让我们基于[molecule-demo][demo-url] 项目,快速学习一下如何编写一个扩展应用。
在 Molecule 中,所有的自定义的功能,都是利用[扩展(Extension)](./guides/extension)来完成的。接下来让我们基于 [molecule-demo][demo-url] 项目,快速学习一下如何编写一个扩展应用。

:::tip
本文内容中的所有代码,都以 [Quick Start](../quick-start) 中的 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo) 项目为基础演示。
Expand Down Expand Up @@ -34,7 +34,7 @@ src/extensions

### 创建扩展(Extension)对象

我们在 `index.ts` 中新建一个叫 `FirstExtension` 的类,该类实现类 [IExtension](./api/interfaces/molecule.IExtension) 接口:
我们在 `index.ts` 中新建一个叫 `FirstExtension` 的类,该类实现类 [IExtension](./api/interfaces/molecule.models.IExtension) 接口:

```ts title="src/extensions/theFirstExtension/index.ts"
import { IExtension } from '@dtinsight/molecule/esm/model/extension';
Expand Down Expand Up @@ -92,7 +92,7 @@ export function handleSelectFolderTree() {
}
```

在`API.getFolderTree` 方法获取文件树数据成功后,我们通过 [`molecule.folderTree.add`](./api/classes/molecule.FolderTreeService#add) 方法,将数据添加并展示到 [FolderTree](./api/classes/molecule.FolderTreeService) 组件中;通过 [`molecule.folderTree.onSelectFile`](./api/classes/molecule.FolderTreeService#onSelectFile) 方法监听**选中文件**;最后通过 [`molecule.editor.open`](./api/interfaces/molecule.IEditorService#open) 方法打开文件。
在`API.getFolderTree` 方法获取文件树数据成功后,我们通过 [`molecule.folderTree.add`](./api/classes/molecule.FolderTreeService#add) 方法,将数据添加并展示到 [FolderTree](./api/classes/molecule.FolderTreeService) 组件中;通过 [`molecule.folderTree.onSelectFile`](./api/classes/molecule.FolderTreeService#onselectfile) 方法监听**选中文件**;最后通过 [`molecule.editor.open`](./api/interfaces/molecule.IEditorService#open) 方法打开文件。

:::caution
需要注意的是,在现实情况中,`API.getFolderTree` 返回的**数据类型**并不是 [IFolderTreeNodeProps](./api/interfaces/molecule.IFolderTreeNodeProps) 类型,我们往往需要经过一个**转换**方法。示例中 `API.getFolderTree` 函数的 Mock 数据可以[查看](https://github.com/DTStack/molecule-examples/blob/main/packages/molecule-demo/public/mock/folderTree.json)。`handleSelectFolderTree` 方法中的 `transformToEditorTab` 为一个**转换**方法,主要是将`file`转换为[IEditorTab](./api/interfaces/molecule.IEditorTab) 类型。
Expand Down