|
@ -1,82 +1,103 @@ |
|
|
import React from 'react'; |
|
|
import React from 'react'; |
|
|
import 'antd/es/modal/style'; |
|
|
import 'antd/es/modal/style'; |
|
|
import './index.less' |
|
|
import styles from './index.module.less'; |
|
|
import { Modal, Tabs } from 'antd'; |
|
|
import { Modal, Tabs } from 'antd'; |
|
|
const { TabPane } = Tabs; |
|
|
const { TabPane } = Tabs; |
|
|
|
|
|
|
|
|
interface IExportModalProps { |
|
|
interface IExportModalProps { |
|
|
visible: boolean; |
|
|
visible: boolean; |
|
|
onClose: () => void; |
|
|
onClose: () => void; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const renderCode = (code: any) => { |
|
|
const renderCode = (code: any) => { |
|
|
return <pre>{code}</pre> |
|
|
return <pre>{code}</pre>; |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const QuickStart: React.FC = () => { |
|
|
const QuickStart: React.FC = () => { |
|
|
return <div> |
|
|
return ( |
|
|
<h2>启动项目</h2> |
|
|
<div> |
|
|
{renderCode(`$ git clone git@github.com:imgcook/imove.git\n
|
|
|
<h2>启动项目</h2> |
|
|
|
|
|
{renderCode(`$ git clone git@github.com:imgcook/imove.git\n
|
|
|
$ cd imove\n |
|
|
$ cd imove\n |
|
|
$ npm install\n |
|
|
$ npm install\n |
|
|
$ npm run example`)}
|
|
|
$ npm run example`)}
|
|
|
|
|
|
打开 <a href="http://localhost:8000/">http://localhost:8000/</a>
|
|
|
打开 <a href="http://localhost:8000/">http://localhost:8000/</a>
|
|
|
<img |
|
|
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523659304-84fc5548-3203-48b6-9ec8-81f0b0228245.png" /> |
|
|
width="100%" |
|
|
|
|
|
src="https://img.alicdn.com/imgextra/i2/O1CN01h8YOPl2AAhk6yQz6P_!!6000000008163-2-tps-3570-1986.png" |
|
|
<h2>绘制流程图、编写代码</h2> |
|
|
/> |
|
|
<p>根据你的业务逻辑绘制流程图。双击各节点,完成每个节点的函数编写。</p> |
|
|
<h2>绘制流程图、编写代码</h2> |
|
|
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610529557793-63ef6842-079c-498a-8ad3-dfbdad7549bb.png" /> |
|
|
<p>根据你的业务逻辑绘制流程图。双击各节点,完成每个节点的函数编写。</p> |
|
|
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523745104-24e94b10-f8d7-4eb2-a282-ca32a19f7ccd.png" /> |
|
|
<img |
|
|
|
|
|
width="100%" |
|
|
<h2>在项目中使用</h2> |
|
|
src="https://img.alicdn.com/imgextra/i3/O1CN01HxT0mY1MMP4TlvwMp_!!6000000001420-2-tps-2250-598.png" |
|
|
<p>这时有两种方式:</p> |
|
|
/> |
|
|
<ol> |
|
|
<img |
|
|
<li>在线打包出码</li> |
|
|
width="100%" |
|
|
<li>本地启动开发模式</li> |
|
|
src="https://img.alicdn.com/imgextra/i3/O1CN01e2bC7824KsqtVLLJe_!!6000000007373-2-tps-3550-1750.png" |
|
|
</ol> |
|
|
/> |
|
|
|
|
|
<h2>在项目中使用</h2> |
|
|
<h3>1. 在线打包出码</h3> |
|
|
<p>这时有两种方式:</p> |
|
|
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523805396-4211e9c2-b501-4b23-aeae-f55147d67e8d.png" /> |
|
|
<ol> |
|
|
<p>点击页面右上方的导出按钮后,可以在弹窗内选择导出 代码,此时流程图编译后的代码将以 zip 包的形式下载到本地,你可以解压后再引入项目中使用。</p> |
|
|
<li>在线打包出码</li> |
|
|
|
|
|
<li>本地启动开发模式</li> |
|
|
<h3>2. 本地命令行出码</h3> |
|
|
</ol> |
|
|
<p>安装 CLI</p> |
|
|
<h3>1. 在线打包出码</h3> |
|
|
<pre> |
|
|
<img |
|
|
$ npm install -g @imove/cli |
|
|
width="100%" |
|
|
</pre> |
|
|
src="https://img.alicdn.com/imgextra/i4/O1CN01ysTe3s1UjJoSBs6PE_!!6000000002553-2-tps-3260-1800.png" |
|
|
<p>进入项目根目录,imove 初始化</p> |
|
|
/> |
|
|
<pre> |
|
|
<p> |
|
|
$ cd yourProject |
|
|
点击页面右上方的导出按钮后,可以在弹窗内选择导出 |
|
|
$ imove --init # 或 imove -i |
|
|
代码,此时流程图编译后的代码将以 zip |
|
|
</pre> |
|
|
包的形式下载到本地,你可以解压后再引入项目中使用。 |
|
|
<p>本地启动开发模式</p> |
|
|
</p> |
|
|
<pre> |
|
|
<h3>2. 本地命令行出码</h3> |
|
|
$ imove --dev # 或 imove -d |
|
|
<p>安装 CLI</p> |
|
|
</pre> |
|
|
<pre>$ npm install -g @imove/cli</pre> |
|
|
|
|
|
<p>进入项目根目录,imove 初始化</p> |
|
|
<p>本地启动成功之后,可以看到原来的页面右上角会显示连接成功。</p> |
|
|
<pre>$ cd yourProject $ imove --init # 或 imove -i</pre> |
|
|
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610529177065-5000bb28-10f2-4053-a4bb-af98139f488e.png" /> |
|
|
<p>本地启动开发模式</p> |
|
|
|
|
|
<pre>$ imove --dev # 或 imove -d</pre> |
|
|
<p>此时页面上触发 <b>保存快捷键 Ctrl + S</b> 时,可以看到当前项目的 src 目录下会多出一个 <strong>logic</strong> 目录,这就是 imove 编译生成的代码,此时你只要在你的组件中调用它即可。</p> |
|
|
<p>本地启动成功之后,可以看到原来的页面右上角会显示连接成功。</p> |
|
|
|
|
|
<img |
|
|
<b>如上代码所示,需要注意两点:</b> |
|
|
width="100%" |
|
|
<ol> |
|
|
src="https://img.alicdn.com/imgextra/i4/O1CN01lKVzHY1J7LCMgTrwC_!!6000000000981-2-tps-3148-1750.png" |
|
|
<li>通过 logic.on 方法监听事件,事件名和参数与流程图中节点代码的 ctx.emit 相对应</li> |
|
|
/> |
|
|
<li>通过 logic.invoke 方法调用逻辑,事件名与流程图中的开始节点的 逻辑触发名称 相对应,不然会调用失败</li> |
|
|
<p> |
|
|
</ol> |
|
|
此时页面上触发 <b>保存快捷键 Ctrl + S</b> 时,可以看到当前项目的 src |
|
|
</div> |
|
|
目录下会多出一个 <strong>logic</strong> 目录,这就是 imove |
|
|
} |
|
|
编译生成的代码,此时你只要在你的组件中调用它即可。 |
|
|
|
|
|
</p> |
|
|
|
|
|
<b>如上代码所示,需要注意两点:</b> |
|
|
|
|
|
<ol> |
|
|
|
|
|
<li> |
|
|
|
|
|
通过 logic.on 方法监听事件,事件名和参数与流程图中节点代码的 ctx.emit |
|
|
|
|
|
相对应 |
|
|
|
|
|
</li> |
|
|
|
|
|
<li> |
|
|
|
|
|
通过 logic.invoke 方法调用逻辑,事件名与流程图中的开始节点的 |
|
|
|
|
|
逻辑触发名称 相对应,不然会调用失败 |
|
|
|
|
|
</li> |
|
|
|
|
|
</ol> |
|
|
|
|
|
</div> |
|
|
|
|
|
); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
const CreateNode: React.FC = () => { |
|
|
const CreateNode: React.FC = () => { |
|
|
return ( |
|
|
return ( |
|
|
<div> |
|
|
<div> |
|
|
<h2>创建节点</h2> |
|
|
<h2>创建节点</h2> |
|
|
<p>项目启动成功后,可以从左侧面板中依次拖动节点至中间的画布,从而完成流程图的绘制工作</p> |
|
|
<p> |
|
|
<img width="100%" alt="创建节点" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610528033956-df4c7cb8-2b35-4065-8f51-a8d98c02f532.png"></img> |
|
|
项目启动成功后,可以从左侧面板中依次拖动节点至中间的画布,从而完成流程图的绘制工作 |
|
|
|
|
|
</p> |
|
|
|
|
|
<img |
|
|
|
|
|
width="100%" |
|
|
|
|
|
alt="创建节点" |
|
|
|
|
|
src="https://img.alicdn.com/imgextra/i2/O1CN01TMgmco1mbgIBQLLQy_!!6000000004973-2-tps-3268-1834.png" |
|
|
|
|
|
></img> |
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const NodeType: React.FC = () => { |
|
|
const NodeType: React.FC = () => { |
|
|
return ( |
|
|
return ( |
|
@ -84,99 +105,140 @@ const NodeType: React.FC = () => { |
|
|
<h2>节点类型</h2> |
|
|
<h2>节点类型</h2> |
|
|
<p>在 iMove 中,我们将流程图的节点一共分为以下 3 种类型:</p> |
|
|
<p>在 iMove 中,我们将流程图的节点一共分为以下 3 种类型:</p> |
|
|
<ol> |
|
|
<ol> |
|
|
<li>开始节点:逻辑起始,是所有流程的开始,可以是一次生命周期初始化/一次点击</li> |
|
|
<li> |
|
|
|
|
|
开始节点:逻辑起始,是所有流程的开始,可以是一次生命周期初始化/一次点击 |
|
|
|
|
|
</li> |
|
|
<li>行为节点:逻辑执行,可以是一次网络请求/一次改变状态/发送埋点等</li> |
|
|
<li>行为节点:逻辑执行,可以是一次网络请求/一次改变状态/发送埋点等</li> |
|
|
<li>分支节点:逻辑路由,根据不同的逻辑执行结果跳转到不同的节点</li> |
|
|
<li>分支节点:逻辑路由,根据不同的逻辑执行结果跳转到不同的节点</li> |
|
|
</ol> |
|
|
</ol> |
|
|
<b>(注:一条逻辑流程必须以 开始节点 为起始)</b> |
|
|
<b>(注:一条逻辑流程必须以 开始节点 为起始)</b> |
|
|
<p>根据上述的规范描述,我们可以绘制出各种各样的逻辑流程图,例如<b>获取个人数据</b>的逻辑流程图如下所示:</p> |
|
|
<p> |
|
|
<img width="100%" alt="节点类型" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610528367101-6ff34826-8658-41e8-bb8b-66b254f14cde.png"></img> |
|
|
根据上述的规范描述,我们可以绘制出各种各样的逻辑流程图,例如 |
|
|
|
|
|
<b>获取个人数据</b>的逻辑流程图如下所示: |
|
|
|
|
|
</p> |
|
|
|
|
|
<img |
|
|
|
|
|
width="100%" |
|
|
|
|
|
alt="节点类型" |
|
|
|
|
|
src="https://img.alicdn.com/imgextra/i3/O1CN01hPtj531F1bmJDXpfy_!!6000000000427-2-tps-3266-1820.png" |
|
|
|
|
|
></img> |
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const ConfigNode: React.FC = () => { |
|
|
const ConfigNode: React.FC = () => { |
|
|
return ( |
|
|
return ( |
|
|
<div> |
|
|
<div> |
|
|
<h2>配置节点</h2> |
|
|
<h2>配置节点</h2> |
|
|
<p>依次选中图中的节点,完成右边面板中的基础配置信息填写</p> |
|
|
<p>依次选中图中的节点,完成右边面板中的基础配置信息填写</p> |
|
|
<img width="100%" alt="配置节点" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610528399738-19c54ce9-25f4-4fc0-93a8-580f9eb9f20f.png"></img> |
|
|
<img |
|
|
|
|
|
width="100%" |
|
|
|
|
|
alt="配置节点" |
|
|
|
|
|
src="https://img.alicdn.com/imgextra/i2/O1CN01SQPxKi29ufsfQCtmY_!!6000000008128-2-tps-3266-1832.png" |
|
|
|
|
|
></img> |
|
|
<p>通常来说,基础信息配置使用频率最高的有:</p> |
|
|
<p>通常来说,基础信息配置使用频率最高的有:</p> |
|
|
<ul> |
|
|
<ul> |
|
|
<li>显示名称:更改节点名称</li> |
|
|
<li>显示名称:更改节点名称</li> |
|
|
<li>代码:编辑节点代码</li> |
|
|
<li>代码:编辑节点代码</li> |
|
|
<li>逻辑触发名称:开始节点类型专属配置,项目代码使用时根据这个值触发逻辑调用</li> |
|
|
<li> |
|
|
|
|
|
逻辑触发名称:开始节点类型专属配置,项目代码使用时根据这个值触发逻辑调用 |
|
|
|
|
|
</li> |
|
|
</ul> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const CodeStyle: React.FC = () => { |
|
|
const CodeStyle: React.FC = () => { |
|
|
return ( |
|
|
return ( |
|
|
<div> |
|
|
<div> |
|
|
<h2>节点代码规范</h2> |
|
|
<h2>节点代码规范</h2> |
|
|
<p>点击编辑按钮,可打开代码编辑器</p> |
|
|
<p>点击编辑按钮,可打开代码编辑器</p> |
|
|
<img width="100%" alt="节点代码规范" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610528493678-c08c4d08-380e-44ca-8dfd-33adb5c1604f.png"></img> |
|
|
<img |
|
|
<p>每个节点的代码等价于一个 js 文件,因此你不用担心全局变量的命名污染问题,甚至可以 import 现有的 npm 包,但最后必须 export 出一个函数。需要注意的是,由于 iMove 天生支持节点代码的异步调用,因此 export 出的函数默认是一个 promise。</p> |
|
|
width="100%" |
|
|
<p>就拿 <b>是否登录</b> 这个分支节点为例,我们来看下节点代码该如何编写:</p> |
|
|
alt="节点代码规范" |
|
|
|
|
|
src="https://img.alicdn.com/imgextra/i4/O1CN01tJ0gmo1oxKF3eOLkH_!!6000000005291-2-tps-3268-1826.png" |
|
|
|
|
|
></img> |
|
|
|
|
|
<p> |
|
|
|
|
|
每个节点的代码等价于一个 js |
|
|
|
|
|
文件,因此你不用担心全局变量的命名污染问题,甚至可以 import 现有的 npm |
|
|
|
|
|
包,但最后必须 export 出一个函数。需要注意的是,由于 iMove |
|
|
|
|
|
天生支持节点代码的异步调用,因此 export 出的函数默认是一个 promise。 |
|
|
|
|
|
</p> |
|
|
|
|
|
<p> |
|
|
|
|
|
就拿 <b>是否登录</b> 这个分支节点为例,我们来看下节点代码该如何编写: |
|
|
|
|
|
</p> |
|
|
{renderCode(`export default async function() {\n
|
|
|
{renderCode(`export default async function() {\n
|
|
|
return fetch('/api/isLogin')\n |
|
|
return fetch('/api/isLogin')\n |
|
|
.then(res => res.json())\n |
|
|
.then(res => res.json())\n |
|
|
.then(res => {\n |
|
|
.then(res => {\n |
|
|
const {success, data: {isLogin} = {}} = res;\n |
|
|
const {success, data: {isLogin} = {}} = res\n |
|
|
return success && isLogin;\n |
|
|
return success && isLogin\n |
|
|
}).catch(err => {\n |
|
|
}).catch(err => {\n |
|
|
console.log('fetch /api/isLogin failed, the err is:', err);\n |
|
|
console.log('fetch /api/isLogin failed, the err is:', err)\n |
|
|
return false;\n |
|
|
return false\n |
|
|
});\n |
|
|
})\n |
|
|
}\n |
|
|
}\n |
|
|
`)}
|
|
|
`)}
|
|
|
<p>注:由于该节点是<b>分支节点</b>,因此其 boolean 返回值决定了整个流程的走向</p> |
|
|
<p> |
|
|
|
|
|
注:由于该节点是<b>分支节点</b>,因此其 boolean |
|
|
|
|
|
返回值决定了整个流程的走向 |
|
|
|
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const NodeConnect: React.FC = () => { |
|
|
const NodeConnect: React.FC = () => { |
|
|
return ( |
|
|
return ( |
|
|
<div> |
|
|
<div> |
|
|
<h2>节点间数据通信</h2> |
|
|
<h2>节点间数据通信</h2> |
|
|
<p>在 iMove 中,数据是以流(pipe)的形式从前往后进行流动的,也就是说前一个节点的返回值会是下一个节点的输入。不过也有一个例外,由于<b>分支节点</b>的返回值会是 boolean 类型,因此它的下游节点拿到的输入必将是一个 boolean 类型值,从而造成数据流的中断。为此,我们进行了一定的改造,分支节点的作用只负责数据流的转发,就像一个开关一样,只决定数据流的走向,但不改变流向下游的数据流值。</p> |
|
|
<p> |
|
|
<p>因此,前文例子中的<b>请求profile接口</b>和<b>返回数据</b>两个节点会成为数据流的上下游关系。我们再来看下他们之间是如何进行数据通信的:</p> |
|
|
在 iMove |
|
|
|
|
|
中,数据是以流(pipe)的形式从前往后进行流动的,也就是说前一个节点的返回值会是下一个节点的输入。不过也有一个例外,由于 |
|
|
|
|
|
<b>分支节点</b>的返回值会是 boolean |
|
|
|
|
|
类型,因此它的下游节点拿到的输入必将是一个 boolean |
|
|
|
|
|
类型值,从而造成数据流的中断。为此,我们进行了一定的改造,分支节点的作用只负责数据流的转发,就像一个开关一样,只决定数据流的走向,但不改变流向下游的数据流值。 |
|
|
|
|
|
</p> |
|
|
|
|
|
<p> |
|
|
|
|
|
因此,前文例子中的<b>请求profile接口</b>和<b>返回数据</b> |
|
|
|
|
|
两个节点会成为数据流的上下游关系。我们再来看下他们之间是如何进行数据通信的: |
|
|
|
|
|
</p> |
|
|
{renderCode(`// 节点: 请求profile接口\n
|
|
|
{renderCode(`// 节点: 请求profile接口\n
|
|
|
export default async function() {\n |
|
|
export default async function() {\n |
|
|
return fetch('/api/profile')\n |
|
|
return fetch('/api/profile')\n |
|
|
.then(res => res.json())\n |
|
|
.then(res => res.json())\n |
|
|
.then(res => {\n |
|
|
.then(res => {\n |
|
|
const {success, data} = res;\n |
|
|
const {success, data} = res\n |
|
|
return {success, data};\n |
|
|
return {success, data}\n |
|
|
}).catch(err => {\n |
|
|
}).catch(err => {\n |
|
|
console.log('fetch /api/isLogin failed, the err is:', err);\n |
|
|
console.log('fetch /api/isLogin failed, the err is:', err)\n |
|
|
return {success: false};\n |
|
|
return {success: false}\n |
|
|
});\n |
|
|
})\n |
|
|
}\n |
|
|
}\n |
|
|
`)}
|
|
|
`)}
|
|
|
{renderCode(`// 节点: 接口成功\n
|
|
|
{renderCode(`// 节点: 接口成功\n
|
|
|
export default async function(ctx) {\n |
|
|
export default async function(ctx) {\n |
|
|
// 获取上游数据\n
|
|
|
// 获取上游数据\n
|
|
|
const pipe = ctx.getPipe() || {};\n |
|
|
const pipe = ctx.getPipe() || {}\n |
|
|
return pipe.success;\n |
|
|
return pipe.success\n |
|
|
}\n |
|
|
}\n |
|
|
`)}
|
|
|
`)}
|
|
|
{renderCode(`// 节点: 返回数据\n
|
|
|
{renderCode(`// 节点: 返回数据\n
|
|
|
const doSomething = (data) => {\n |
|
|
const doSomething = (data) => {\n |
|
|
// TODO: 数据加工处理\n
|
|
|
// TODO: 数据加工处理\n
|
|
|
return data;\n |
|
|
return data\n |
|
|
};\n |
|
|
}\n |
|
|
export default async function(ctx) {\n |
|
|
export default async function(ctx) {\n |
|
|
// 这里获取到的上游数据,不是"接口成功"这个分支节点的返回值,而是"请求profile接口"这个节点的返回值\n
|
|
|
// 这里获取到的上游数据,不是"接口成功"这个分支节点的返回值,而是"请求profile接口"这个节点的返回值\n
|
|
|
const pipe = ctx.getPipe() || {};\n |
|
|
const pipe = ctx.getPipe() || {}\n |
|
|
ctx.emit('updateUI', {profileData: doSomething(pipe.data)});\n |
|
|
ctx.emit('updateUI', {profileData: doSomething(pipe.data)})\n |
|
|
}\n |
|
|
}\n |
|
|
`)}
|
|
|
`)}
|
|
|
如上代码所述,每个下游节点可以调用 <b>ctx.getPipe</b> 方法获取上游节点返回的数据流。另外,需要注意的是 <b>返回数据</b> 节点的最后一行代码 <b>ctx.emit('eventName', data)</b> 需要和你项目中的代码配合使用。 |
|
|
如上代码所述,每个下游节点可以调用 <b>ctx.getPipe</b>{' '} |
|
|
|
|
|
方法获取上游节点返回的数据流。另外,需要注意的是 <b>返回数据</b>{' '} |
|
|
|
|
|
节点的最后一行代码 <b>ctx.emit('eventName', data)</b>{' '} |
|
|
|
|
|
需要和你项目中的代码配合使用。 |
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const HowToUse: React.FC = () => { |
|
|
const HowToUse: React.FC = () => { |
|
|
return ( |
|
|
return ( |
|
@ -189,47 +251,111 @@ const HowToUse: React.FC = () => { |
|
|
</ol> |
|
|
</ol> |
|
|
|
|
|
|
|
|
<h3>1. 在线打包出码</h3> |
|
|
<h3>1. 在线打包出码</h3> |
|
|
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523805396-4211e9c2-b501-4b23-aeae-f55147d67e8d.png" /> |
|
|
<img |
|
|
<p>点击页面右上方的导出按钮后,可以在弹窗内选择导出 代码,此时流程图编译后的代码将以 zip 包的形式下载到本地,你可以解压后再引入项目中使用。</p> |
|
|
width="100%" |
|
|
|
|
|
src="https://img.alicdn.com/imgextra/i3/O1CN01r14VoI1eH3X0RiR2M_!!6000000003845-2-tps-3260-1800.png" |
|
|
|
|
|
/> |
|
|
|
|
|
<p> |
|
|
|
|
|
点击页面右上方的导出按钮后,可以在弹窗内选择导出 |
|
|
|
|
|
代码,此时流程图编译后的代码将以 zip |
|
|
|
|
|
包的形式下载到本地,你可以解压后再引入项目中使用。 |
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
<h3>2. 本地命令行出码</h3> |
|
|
<h3>2. 本地命令行出码</h3> |
|
|
<p>安装 CLI</p> |
|
|
<p>安装 CLI</p> |
|
|
<pre> |
|
|
<pre>$ npm install -g @imove/cli</pre> |
|
|
$ npm install -g @imove/cli |
|
|
|
|
|
</pre> |
|
|
|
|
|
<p>进入项目根目录,imove 初始化</p> |
|
|
<p>进入项目根目录,imove 初始化</p> |
|
|
<pre> |
|
|
<pre>$ cd yourProject $ imove --init # 或 imove -i</pre> |
|
|
$ cd yourProject |
|
|
|
|
|
$ imove --init # 或 imove -i |
|
|
|
|
|
</pre> |
|
|
|
|
|
<p>本地启动开发模式</p> |
|
|
<p>本地启动开发模式</p> |
|
|
<pre> |
|
|
<pre>$ imove --dev # 或 imove -d</pre> |
|
|
$ imove --dev # 或 imove -d |
|
|
|
|
|
</pre> |
|
|
|
|
|
|
|
|
|
|
|
<p>本地启动成功之后,可以看到原来的页面右上角会显示连接成功。</p> |
|
|
<p>本地启动成功之后,可以看到原来的页面右上角会显示连接成功。</p> |
|
|
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610529177065-5000bb28-10f2-4053-a4bb-af98139f488e.png" /> |
|
|
<img |
|
|
|
|
|
width="100%" |
|
|
|
|
|
src="https://img.alicdn.com/imgextra/i4/O1CN01NVwf2k248W9lahjm3_!!6000000007346-2-tps-3148-1750.png" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
<p>此时页面上触发 <b>保存快捷键 Ctrl + S</b> 时,可以看到当前项目的 src 目录下会多出一个 <strong>logic</strong> 目录,这就是 imove 编译生成的代码,此时你只要在你的组件中调用它即可。</p> |
|
|
<p> |
|
|
|
|
|
此时页面上触发 <b>保存快捷键 Ctrl + S</b> 时,可以看到当前项目的 src |
|
|
|
|
|
目录下会多出一个 <strong>logic</strong> 目录,这就是 imove |
|
|
|
|
|
编译生成的代码,此时你只要在你的组件中调用它即可。 |
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
<b>如上代码所示,需要注意两点:</b> |
|
|
<b>如上代码所示,需要注意两点:</b> |
|
|
<ol> |
|
|
<ol> |
|
|
<li>通过 logic.on 方法监听事件,事件名和参数与流程图中节点代码的 ctx.emit 相对应</li> |
|
|
<li> |
|
|
<li>通过 logic.invoke 方法调用逻辑,事件名与流程图中的开始节点的 逻辑触发名称 相对应,不然会调用失败</li> |
|
|
通过 logic.on 方法监听事件,事件名和参数与流程图中节点代码的 ctx.emit |
|
|
|
|
|
相对应 |
|
|
|
|
|
</li> |
|
|
|
|
|
<li> |
|
|
|
|
|
通过 logic.invoke 方法调用逻辑,事件名与流程图中的开始节点的 |
|
|
|
|
|
逻辑触发名称 相对应,不然会调用失败 |
|
|
|
|
|
</li> |
|
|
</ol> |
|
|
</ol> |
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const Document: React.FC = () => { |
|
|
const Document: React.FC = () => { |
|
|
return ( |
|
|
return ( |
|
|
<div> |
|
|
<div> |
|
|
<h2>使用文档</h2> |
|
|
<h2>文档汇总</h2> |
|
|
<div><a target="blank" href="https://www.yuque.com/imove/docs">详细使用文档</a></div> |
|
|
<div> |
|
|
<div><a target="blank" href="https://github.com/imgcook/imove/blob/master/README.md">github README</a></div> |
|
|
<a target="blank" href="https://www.yuque.com/imove/docs"> |
|
|
|
|
|
详细使用文档 |
|
|
|
|
|
</a> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div> |
|
|
|
|
|
<a |
|
|
|
|
|
target="blank" |
|
|
|
|
|
href="https://github.com/imgcook/imove/blob/master/README.md" |
|
|
|
|
|
> |
|
|
|
|
|
github README.md |
|
|
|
|
|
</a> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div> |
|
|
|
|
|
<a |
|
|
|
|
|
target="blank" |
|
|
|
|
|
href="https://www.yuque.com/imove/blog/bee1ki" |
|
|
|
|
|
> |
|
|
|
|
|
2021年前端趋势预测 |
|
|
|
|
|
</a> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div> |
|
|
|
|
|
<a |
|
|
|
|
|
target="blank" |
|
|
|
|
|
href="https://www.yuque.com/imove/blog/tcdrps" |
|
|
|
|
|
> |
|
|
|
|
|
F2C能否让前端像运营配置一样开发? |
|
|
|
|
|
</a> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div> |
|
|
|
|
|
<a |
|
|
|
|
|
target="blank" |
|
|
|
|
|
href="https://www.yuque.com/imove/blog/qxq2mw" |
|
|
|
|
|
> |
|
|
|
|
|
登上 Github 趋势榜,iMove 原理技术大揭秘! |
|
|
|
|
|
</a> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div> |
|
|
|
|
|
<a |
|
|
|
|
|
target="blank" |
|
|
|
|
|
href="https://www.yuque.com/imove/blog/ettxi8" |
|
|
|
|
|
> |
|
|
|
|
|
iMove 基于 X6 + form-render 背后的思考 |
|
|
|
|
|
</a> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div> |
|
|
|
|
|
<a |
|
|
|
|
|
target="blank" |
|
|
|
|
|
href="https://www.yuque.com/imove/blog/vgp6bb" |
|
|
|
|
|
> |
|
|
|
|
|
所见即所得! iMove 在线执行代码探索 |
|
|
|
|
|
</a> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const GuideModal: React.FC<IExportModalProps> = (props) => { |
|
|
const GuideModal: React.FC<IExportModalProps> = (props) => { |
|
|
const { visible, onClose } = props; |
|
|
const { visible, onClose } = props; |
|
@ -243,34 +369,33 @@ const GuideModal: React.FC<IExportModalProps> = (props) => { |
|
|
onOk={onClose} |
|
|
onOk={onClose} |
|
|
onCancel={onClose} |
|
|
onCancel={onClose} |
|
|
> |
|
|
> |
|
|
<div className="guide-container"> |
|
|
<div className={styles.guideContainer}> |
|
|
<Tabs tabPosition='left'> |
|
|
<Tabs tabPosition="left"> |
|
|
<TabPane className="tabPane" tab="简单上手" key="1"> |
|
|
<TabPane className={styles.tabPane} tab="简单上手" key="1"> |
|
|
<QuickStart /> |
|
|
<QuickStart /> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
<TabPane className="tabPane" tab="创建节点" key="2"> |
|
|
<TabPane className={styles.tabPane} tab="创建节点" key="2"> |
|
|
<CreateNode /> |
|
|
<CreateNode /> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
<TabPane className="tabPane" tab="节点类型" key="3"> |
|
|
<TabPane className={styles.tabPane} tab="节点类型" key="3"> |
|
|
<NodeType /> |
|
|
<NodeType /> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
<TabPane className="tabPane" tab="配置节点" key="4"> |
|
|
<TabPane className={styles.tabPane} tab="配置节点" key="4"> |
|
|
<ConfigNode /> |
|
|
<ConfigNode /> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
<TabPane className="tabPane" tab="节点代码规范" key="5"> |
|
|
<TabPane className={styles.tabPane} tab="节点代码规范" key="5"> |
|
|
<CodeStyle /> |
|
|
<CodeStyle /> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
<TabPane className="tabPane" tab="节点间数据通信" key="6"> |
|
|
<TabPane className={styles.tabPane} tab="节点间数据通信" key="6"> |
|
|
<NodeConnect /> |
|
|
<NodeConnect /> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
<TabPane className="tabPane" tab="如何在项目中使用" key="7"> |
|
|
<TabPane className={styles.tabPane} tab="如何在项目中使用" key="7"> |
|
|
<HowToUse /> |
|
|
<HowToUse /> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
<TabPane className="tabPane" tab="使用文档" key="8"> |
|
|
<TabPane className={styles.tabPane} tab="文档汇总" key="8"> |
|
|
<Document /> |
|
|
<Document /> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
</Tabs> |
|
|
</Tabs> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</Modal> |
|
|
</Modal> |
|
|
); |
|
|
); |
|
|