+
+
+ 
+Right Side Pane
+Test notification!
+}; +// Add the notification +molecule.notification.add(notification); + +// Remove the notification +molecule.notification.remove(notification.id); +``` + +:::caution +**通知内容**需要开发者使用 `render` 函数来自定义。 +::: + +**展示/隐藏** 通知面板： + +```ts +import molecule from '@dtinsight/molecule'; +// Display or hide the Notification pane +molecule.notification.toggleNotification(); +``` diff --git a/website/docs/guides/extend-color-theme.md b/website/docs/guides/extend-color-theme.md new file mode 100644 index 000000000..93d8f00c8 --- /dev/null +++ b/website/docs/guides/extend-color-theme.md @@ -0,0 +1,247 @@ +--- +title: Color Theme +sidebar_label: Color Theme +--- + +[颜色主题（ColorTheme）](/docs/api/interfaces/molecule.IColorThemeService)是 Molecule 非常重要的功能，我们做到了**基本兼容** VSCode 的社区的[颜色主题](https://vscodethemes.com/)。本文主要是介绍如何扩展 **VSCode 扩展市场中**的相关颜色主题扩展包，以及如何实现**自定义**颜色主题。 + +## 使用 VSCode 社区的主题 + +:::tip +本文内容中的所有代码，都以 [Quick Start](../quick-start) 中的 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo) 项目为基础演示。 +::: + +首先，我们可以打开这个 [VSCode Theme 市场](https://vscodethemes.com/), 尝试找到一款你喜欢的颜色主题。 + +这里我们以 [One Dark Pro](https://github.com/Binaryify/OneDark-Pro.git) 主题为例，我们需要在 **GitHub** 上找到该主题, 并确保我们可以获得该颜色主题的代码。找到主题代码后，我们在终端切换到 `src/extensions` 目录下，执行 `git clone https://github.com/Binaryify/OneDark-Pro.git` 命令，下载 `One Dark Pro` 主题代码， 如下： + +```shell +$ pwd +~/molecule-demo/src/extensions + +$ git clone https://github.com/Binaryify/OneDark-Pro.git +Cloning into 'OneDark-Pro'... +remote: Enumerating objects: 4493, done. +remote: Counting objects: 100% (800/800), done. +remote: Compressing objects: 100% (421/421), done. +remote: Total 4493 (delta 532), reused 577 (delta 364), pack-reused 3693 +Receiving objects: 100% (4493/4493), 19.68 MiB | 358.00 KiB/s, done. +Resolving deltas: 100% (2830/2830), done. +``` + +下载完成后，我们可以看到： + +```shell +$ tree -L 2 ./src +./src +├── App.css +├── App.js +├── App.test.js +├── extensions +│ └── OneDark-Pro +├── index.css +├── index.js +├── logo.svg +├── reportWebVitals.js +└── setupTests.js +``` + +我们可以看到在 `OneDark-Pro/themes` 下有 3 个文件夹，这表示 `One Dark Pro` 主题中包含了 3 种颜色主题。 + +:::tip +由于实现技术的原因，Molecule 并不是无缝衔接 VSCode Color Theme 扩展的, 我们需要对 `One Dark Pro` 主题的代码做一些简单**改造**。 +::: + +### 改造主题包 + +首先，我们在 `OneDark-Pro` 目录下新建 `index.ts` 文件，具体内容如下: + +```js +// 读取 package.json 中的内容 +const OneDarkPro = require('./package.json'); + +// 读取详细的主题颜色内容 +const themes = [ + require('./themes/OneDark-Pro.json'), + require('./themes/OneDark-Pro-flat.json'), + require('./themes/OneDark-Pro-darker.json'), +]; + +const packageThemes = OneDarkPro.contributes?.themes || []; + +OneDarkPro.contributes.themes = packageThemes.map((theme, index) => { + theme.id = theme.label; + theme = Object.assign({}, theme, themes[index]); + return theme; +}); + +// 声明当前主题的唯一 id +OneDarkPro.id = 'OneDarkPro'; + +// 导出 package.json 的内容供 Molecule 使用 +export { OneDarkPro }; +``` + +:::tip +`OneDark-Pro` 目录下除了 `package.json`、`index.js`、`themes` 3 个文件为必要以外，其余文件均可以删除。 +::: + +### 应用颜色主题 + +最后，我们在 `App.js` 中添加该扩展包 + +```js title="src/App.js" +import { OneDarkPro } from './extensions/OneDark-Pro'; + +function App() { + return ( +
+
+
+
+ 
+
+
+Right Side Pane
+Test notification!
+}; +// Add the notification +molecule.notification.add(notification); + +// Remove the notification +molecule.notification.remove(notification.id); +``` + +:::caution +**通知内容**需要开发者使用 `render` 函数来自定义。 +::: + +**展示/隐藏** 通知面板： + +```ts +import molecule from '@dtinsight/molecule'; +// Display or hide the Notification pane +molecule.notification.toggleNotification(); +``` diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-color-theme.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-color-theme.md new file mode 100644 index 000000000..0500c266f --- /dev/null +++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-color-theme.md @@ -0,0 +1,247 @@ +--- +title: 颜色主题（ColorTheme） +sidebar_label: 颜色主题 +--- + +[颜色主题（ColorTheme）](/docs/api/interfaces/molecule.IColorThemeService)是 Molecule 非常重要的功能，我们做到了**基本兼容** VSCode 的社区的[颜色主题](https://vscodethemes.com/)。本文主要是介绍如何扩展 **VSCode 扩展市场中**的相关颜色主题扩展包，以及如何实现**自定义**颜色主题。 + +## 使用 VSCode 社区的主题 + +:::tip +本文内容中的所有代码，都以 [Quick Start](../quick-start) 中的 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo) 项目为基础演示。 +::: + +首先，我们可以打开这个 [VSCode Theme 市场](https://vscodethemes.com/), 尝试找到一款你喜欢的颜色主题。 + +这里我们以 [One Dark Pro](https://github.com/Binaryify/OneDark-Pro.git) 主题为例，我们需要在 **GitHub** 上找到该主题, 并确保我们可以获得该颜色主题的代码。找到主题代码后，我们在终端切换到 `src/extensions` 目录下，执行 `git clone https://github.com/Binaryify/OneDark-Pro.git` 命令，下载 `One Dark Pro` 主题代码， 如下： + +```shell +$ pwd +~/molecule-demo/src/extensions + +$ git clone https://github.com/Binaryify/OneDark-Pro.git +Cloning into 'OneDark-Pro'... +remote: Enumerating objects: 4493, done. +remote: Counting objects: 100% (800/800), done. +remote: Compressing objects: 100% (421/421), done. +remote: Total 4493 (delta 532), reused 577 (delta 364), pack-reused 3693 +Receiving objects: 100% (4493/4493), 19.68 MiB | 358.00 KiB/s, done. +Resolving deltas: 100% (2830/2830), done. +``` + +下载完成后，我们可以看到： + +```shell +$ tree -L 2 ./src +./src +├── App.css +├── App.js +├── App.test.js +├── extensions +│ └── OneDark-Pro +├── index.css +├── index.js +├── logo.svg +├── reportWebVitals.js +└── setupTests.js +``` + +我们可以看到在 `OneDark-Pro/themes` 下有 3 个文件夹，这表示 `One Dark Pro` 主题中包含了 3 种颜色主题。 + +:::tip +由于实现技术的原因，Molecule 并不是无缝衔接 VSCode Color Theme 扩展的, 我们需要对 `One Dark Pro` 主题的代码做一些简单**改造**。 +::: + +### 改造主题包 + +首先，我们在 `OneDark-Pro` 目录下新建 `index.ts` 文件，具体内容如下: + +```js +// 读取 package.json 中的内容 +const OneDarkPro = require('./package.json'); + +// 读取详细的主题颜色内容 +const themes = [ + require('./themes/OneDark-Pro.json'), + require('./themes/OneDark-Pro-flat.json'), + require('./themes/OneDark-Pro-darker.json'), +]; + +const packageThemes = OneDarkPro.contributes?.themes || []; + +OneDarkPro.contributes.themes = packageThemes.map((theme, index) => { + theme.id = theme.label; + theme = Object.assign({}, theme, themes[index]); + return theme; +}); + +// 声明当前主题的唯一 id +OneDarkPro.id = 'OneDarkPro'; + +// 导出 package.json 的内容供 Molecule 使用 +export { OneDarkPro }; +``` + +:::tip +`OneDark-Pro` 目录下除了 `package.json`、`index.js`、`themes` 3 个文件为必要以外，其余文件均可以删除。 +::: + +### 应用颜色主题 + +最后，我们在 `App.js` 中添加该扩展包 + +```js title="src/App.js" +import { OneDarkPro } from './extensions/OneDark-Pro'; + +function App() { + return ( +
+
+
+
+
+
+docs{' '}
- directory.
+