umijs 隐藏开发工具_Umi UI 插件开发 - UmiJS 中文文档

示例

index.js

// 普通的 umi 插件写法，新增 api.onUISocket 和 api.addUIPlugin 接口

export default api => {

// 处理 socket 通讯数据

api.onUISocket(({ action, send, log }) => {

// 通过 action 处理

// 处理完后 send 数据到客户端

send({ type, payload });

// 过程中的日志通过 log 打到客户端

log(`Adding block Foo/Bar...`);

});

// 添加编辑态的插件

api.addUIPlugin(require.resolve('./dist/client.umd'));

};

ui.js(通过 father-build 打包到 dist/ui.umd.js)

// 这个文件打 umd 到 ./dist/client.umd.js，external react、react-dom 和 antd，用 father-build 很容易打出来

export default api => {

const {

// 调用服务端方法

callRemote,

} = api;

function Blocks() {

return

Blocks

;

}

// 添加 panel，类似 vscode 点击左边的 Icon 后切换 Panel

api.addPanel({

title: '区块管理',

icon: 'home',

path: '/blocks',

component: Blocks,

// 顶部右侧按钮

actions: [

{

title: '打开配置文件',

// antd Button type

type: 'default',

// 点击后的 action

action: {

type: '@@actions/openConfigFile',

payload: {

projectPath: api.currentProject.path,

}

},

onClick: () => {},

},

],

});

// 更多功能...

};

服务端接口

可访问 所有插件接口和属性，以下是几个与 UI 相关 API。

api.onUISocket

处理 socket 数据相关，比如：

api.onUISocket(({ type, payload }, { log, send, success, failure }) => {

if (type === 'config/fetch') {

send({ type: `${type}/success`, payload: getConfig() });

}

});

注：

按约定，如果客户端用 api.callRemote 调用服务端接口，处理完数据需 send 加 /success 或 /failure 后缀的数据表示成功和失败。

send({ type, payload })

向客户端发送消息。

success(payload)

send({ type: `${type}/success` }) 的快捷方式。

failure(payload)

send({ type: `${type}/failure` }) 的快捷方式。

progress(payload)

send({ type: `${type}/progress` }) 的快捷方式。

log(level, message)

在控制台和客户端同时打印日志。

示例：

log('info', 'abc');

log('error', 'abc');

api.addUIPlugin

注册 UI 插件，指向客户端文件。

api.addUIPlugin(require.resolve('./dist/ui'));

注：

文件需是 umd 格式(例如 ./dist/ui.umd.js)

客户端接口

api.callRemote()

调服务端接口，并等待 type 加上 /success 或 /failure 消息的返回。若有进度的返回，可通过 onProgress 处理回调。

参数如下：

api.callRemote({

// 接口名称

type: string;

// 传入参数

payload: object;

// 监听服务端推送来的数据

onProgress: (data) => void;

// 是否建立长久连接

keep: boolean;

})

示例：

import React from 'react';

const { useState } = React;

// 组件 props api 从插件传入

export default (props) => {

const { api } = props;

const [progress, setProgress] = useState(0);

const handleClick = async () => {

await api.callRemote({

type: 'org.umi.plugin.bar.create',

payload: {

id: 'id',

},

onProgress: async (data) => {

useState(data);

}

})

}

return (

Click

progress: {progress}

)

}

注：

callRemote 会自动带上 lang 属性࿰