跳到主要内容

添加插槽

概述​

我们为你预设了很多插槽，使你可以非常方便的在 ONES 上进行你想要的定制化操作。目前你可以把插槽简单的当作“占位符”，你的插件就是往这个占位符中填充代码。

插槽​

使用​

第一步：添加插槽模块​

在插件工程根目录下执行 npx op add module， 可以向插件中新增插槽模块。

➜ npx op add module
  ✔ Validating the input params
  ✔ Validating project files exists
  ✔ Generating initial answers by input params
  ✔ Parsing plugin config content
Pre-require tasks run successfully
? Please select the module type you want to add: …
ones:desk
ones:manhour
ones:performance
ones:plan
ones:pipeline
ones:product
ones:testcase
ones:version

在列表中可以通过选择方向键或输入字符串搜索并选择插槽模块

提示

如果你选择的插槽是包含子模块的，那将会继续询问你是否需要添加子模块。你可以一起添加，也可以选择后面手动添加。

第二步：添加插槽子模块​

在插件工程目录下执行 npx op add sub-module， 可以向插槽模块中添加子模块

➜ npx op add sub-module
  ✔ Validating the input params
  ✔ Validating project files exists
  ✔ Generating initial answers by input params
  ✔ Parsing plugin config content

Pre-require tasks run successfully
? Please select the module you want to add a sub module: (Use arrow keys)
❯ ones-workspace-fKFw
❯ ones-plan-fKFF
❯ ones-wiki-uuDB

在列表中可以通过选择方向键或输入字符串搜索并选择插槽模块 id

警告

并不是所有插槽都存在子模块，如果你查阅模块列表之后发现你需要的模块不存在子模块则可跳过第二步。

第三步：添加逻辑代码​

每个插槽模块的逻辑代码，都存放于 /web/src/modules/ 目录下以插槽模块 id 命名的目录中。你可以把每个插槽模块都当作一个独立的 React 应用，它和你以往熟悉的 React 开发方式并没有什么区别，你只需要关注你的业务逻辑即可。

我们为插件提供 TypeScript 的天然支持，默认支持引入 .ts 和 .tsx 文件。

插件打包时，我们仅执行 .ts 和 .tsx 文件的转译工作，并不执行任何的类型检查，它只为在你编码时提供友好的类型提示，帮助你减少问题的产生。

警告

对于每个插件模块的打包，我们都是以模块内的 index.tsx 文件为入口，请不要删掉这个入口文件，不然你的打包过程可能会出现异常。

第四步：添加样式代码​

同样的每个插槽的样式代码也都存放于 /web/src/modules/ 目录下以插槽模块 id 命名的目录中。打开目录下的index.css 文件，默认生成的内容如下：

index.css
#ones-mf-root {
}

id="ones-mf-root"的元素是插槽模块的根元素，所以你可以将样式写在#ones-mf-root的选择器下，当然这只是推荐，并不是必须的，你可以选择任何你喜欢的方式来编写样式代码。

PostCSS​

我们也为插件提供了 PostCSS 预处理器的天然支持，并默认帮你开启了以下功能。

  • autoprefixer​

    因为我们默认开启了 autoprefixer，所以你只需使用无前缀的 CSS 规则编写插件样式即可，不必担心浏览器兼容问题。

  • cssnano​

    我们使用 cssnano 来压缩插件样式代码，以减少插件的体积，提升插件运行性能。

  • postcss-import​

    我们通过 postcss-import 预配置支持了 CSS @import 内联，以便你进行 CSS 模块拆分。

    比如你可以为 banner 组件创建单独的样式文件 banner.css：

    /web/src/modules/ones-global-banner-3QC4/banner.css
    .banner {
      width: 100%;
    }

    然后在 index.css 中引入它

    /web/src/modules/ones-global-banner-3QC4/index.css
    @import 'banner.css';

    #ones-mf-root {
    }
  • postcss-nested​

    我们使用 postcss-nested 允许你以嵌套的方式编写 CSS 选择器，就像你所熟悉的 Sass 语法一样：

    .mf-bar-banner {
      width: 100%;
      height: 0;
      &--active {
        height: 40px;
      }
    }

第五步：使用 ONES Design​

我们提供了一套完整的 UI 组件库，可以帮助你快速构建标准的插件用户界面，在插件工程初始化的时候，它已经默认被引入了。

每个插槽模块的 index.tsx 文件形如：

index.tsx
import { ConfigProvider } from '@ones-design/core'
import React from 'react'
import ReactDOM from 'react-dom'

import './index.css'

ReactDOM.render(
  <ConfigProvider>you module title</ConfigProvider>,
  document.getElementById('ones-mf-root'),
)
警告

你必须保留 index.tsx 中的 <ConfigProvider> 组件，否则插件将无法按照你预期的方式运行。详情请见 ONES Design 的 ConfigProvider 全局化配置组件文档。

有关于组件库的具体使用，请参照：ONES Design。

添加插槽示例​

这里我们以 ones:global:banner 全局插槽为例，当选择添加这个模块后，可以看到在 plugin.yaml 文件的 modules 字段中新增了一项内容：

config/plugin.yaml
modules:
  - id: ones-global-banner-3QC4
    title: banner
    entry: modules/ones-global-banner-3QC4/index.html
    moduleType: ones:global:banner

同时，还会生成与 entry 字段对应的 /web/src/modules/ones-global-banner-3QC4 目录，其中包含 index.tsx 与 index.css 两个文件：

在插件工程根目录下执行 npx op invoke run，这样你就能在远端调试环境中插槽对应的位置看到你的插件了。

最后由 ones-dev-jenkins 于 更新