From 3f0c86c96115762a8e268cf36aa57e430e540591 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 21 Jan 2021 08:21:41 +0000 Subject: [PATCH 01/17] chore(deps): bump immer in /packages/json-schema-editor Bumps [immer](https://github.com/immerjs/immer) from 6.0.5 to 8.0.1. - [Release notes](https://github.com/immerjs/immer/releases) - [Commits](https://github.com/immerjs/immer/compare/v6.0.5...v8.0.1) Signed-off-by: dependabot[bot] --- packages/json-schema-editor/package-lock.json | 6 +++--- packages/json-schema-editor/package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/json-schema-editor/package-lock.json b/packages/json-schema-editor/package-lock.json index 3882435..f192037 100644 --- a/packages/json-schema-editor/package-lock.json +++ b/packages/json-schema-editor/package-lock.json @@ -620,9 +620,9 @@ } }, "immer": { - "version": "6.0.5", - "resolved": "https://registry.npmjs.org/immer/-/immer-6.0.5.tgz", - "integrity": "sha512-Q2wd90qrgFieIpLzAO2q9NLEdmyp/sr76Ml4Vm5peUKgyTa2CQa3ey8zuzwSKOlKH7grCeGBGUcLLVCVW1aguA==" + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz", + "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==" }, "import-fresh": { "version": "3.2.1", diff --git a/packages/json-schema-editor/package.json b/packages/json-schema-editor/package.json index 9061f4b..ae4f5da 100644 --- a/packages/json-schema-editor/package.json +++ b/packages/json-schema-editor/package.json @@ -58,7 +58,7 @@ "gitHead": "60b114ff262513544204f33a9bbcb6220d6c1c5d", "dependencies": { "i18next": "^19.4.4", - "immer": "^6.0.5", + "immer": "^8.0.1", "lodash-es": "^4.17.15", "react-i18next": "^11.4.0", "react-tracked": "^1.3.0" From 242f7f481d6eeabcf3e4620918629389a928bb6c Mon Sep 17 00:00:00 2001 From: cbbfcd <2890636389@qq.com> Date: Fri, 22 Jan 2021 11:28:07 +0800 Subject: [PATCH 02/17] fix: update the compile function --- packages/cli/src/cmd/dev/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cli/src/cmd/dev/index.js b/packages/cli/src/cmd/dev/index.js index 349b53e..e151fee 100644 --- a/packages/cli/src/cmd/dev/index.js +++ b/packages/cli/src/cmd/dev/index.js @@ -2,7 +2,7 @@ const path = require('path'); const fs = require('fs-extra'); const Base = require('../base'); const mergePkg = require('./mergePkg'); -const compileCode = require('@imove/compile-code'); +const { compileForProject } = require('@imove/compile-code'); const { createServer } = require('../../utils/server'); const noop = () => {}; @@ -38,7 +38,7 @@ class Dev extends Base { // compile try { const { dsl } = req.body; - const output = compileCode(dsl, plugins); + const output = compileForProject(dsl, plugins); await this.writeOutputIntoFiles(outputPath, output); await mergePkg(dsl, this.projectPath); await fs.outputFile(CACHE_DSL_FILE, JSON.stringify(dsl, null, 2)); From 578deee78a001b4991fadc4f29e84a9ea229f06c Mon Sep 17 00:00:00 2001 From: cbbfcd <2890636389@qq.com> Date: Fri, 22 Jan 2021 17:29:03 +0800 Subject: [PATCH 03/17] =?UTF-8?q?fix:=20fr-generate=20=E5=8F=B3=E4=BE=A7?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E5=B1=95=E5=BC=80=E5=90=8E=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E4=B8=8D=E5=AF=B9=E7=9A=84=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/mods/settingBar/components/json/index.module.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/core/src/mods/settingBar/components/json/index.module.less b/packages/core/src/mods/settingBar/components/json/index.module.less index 99c3b83..e6fd5e0 100644 --- a/packages/core/src/mods/settingBar/components/json/index.module.less +++ b/packages/core/src/mods/settingBar/components/json/index.module.less @@ -19,6 +19,12 @@ height:600px; overflow-y: auto; margin:0 20px; + + :global { + .fr-wrapper { + position: relative; + } + } } .configInput{ height: 600px; From d2a9f5c025adc4846e1f96cc865b1e740a1a6f13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8B=BC=E5=8F=94?= Date: Wed, 27 Jan 2021 16:56:05 +0800 Subject: [PATCH 04/17] Update README.md --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index d167f4c..a4d20ea 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,6 @@ - [x] **适用于JavaScript所有场景**:比如前端点击事件,Ajax 请求和 Node.js 后端 API等 - [ ] **多语言编译**:无语言编译出码限制(例:支持 JavaScript, Java 编译出码) -在线示例 https://65hzt.sse.codesandbox.io/ - ## 使用场景 ![usage](https://img.alicdn.com/imgextra/i1/O1CN01kRXnfQ1LFhesOA6cn_!!6000000001270-2-tps-2212-1166.png) From b92bdb78aff71da472c1ee9aac3278aa663289ad Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Thu, 28 Jan 2021 11:40:20 +0800 Subject: [PATCH 05/17] chore: @imove/compile-code upgrade to 0.1.0 --- packages/compile-code/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compile-code/package.json b/packages/compile-code/package.json index cf0bc94..e3a85bc 100644 --- a/packages/compile-code/package.json +++ b/packages/compile-code/package.json @@ -1,6 +1,6 @@ { "name": "@imove/compile-code", - "version": "0.0.1", + "version": "0.1.0", "description": "imove compile code", "main": "dist/core.common.js", "module": "dist/core.esm.js", From b839490e156be34bfb10dab0bf34e450b1a7571c Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Thu, 28 Jan 2021 11:44:52 +0800 Subject: [PATCH 06/17] chore: @imove/cli upgrade to 0.0.4 --- packages/cli/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cli/package.json b/packages/cli/package.json index f97806a..98c3204 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@imove/cli", - "version": "0.0.3", + "version": "0.0.4", "description": "imove client", "main": "index.js", "bin": { @@ -20,7 +20,7 @@ "author": "smallstonesk", "license": "MIT", "dependencies": { - "@imove/compile-code": "^0.0.1", + "@imove/compile-code": "^0.1.0", "body-parser": "^1.19.0", "commander": "^6.0.0", "cors": "^2.8.5", From 5fa2cfa74848b3fcf040e101cc68ad60119a8948 Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Thu, 28 Jan 2021 11:46:44 +0800 Subject: [PATCH 07/17] chore: @imove/cli upgrade to 0.0.5 --- packages/cli/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cli/package.json b/packages/cli/package.json index 98c3204..c72d0b3 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@imove/cli", - "version": "0.0.4", + "version": "0.0.5", "description": "imove client", "main": "index.js", "bin": { From 5c20eef600b4b75323791b32d90cd0f2348e4df6 Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Thu, 28 Jan 2021 14:17:06 +0800 Subject: [PATCH 08/17] chore: upgrade @imove/plugin-store to 0.0.3 --- packages/plugin-store/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-store/package.json b/packages/plugin-store/package.json index ccd5aa5..c177ad1 100644 --- a/packages/plugin-store/package.json +++ b/packages/plugin-store/package.json @@ -1,6 +1,6 @@ { "name": "@imove/plugin-store", - "version": "0.0.1", + "version": "0.0.3", "description": "iMove plugin that supports persisting data", "keywords": [ "imove", From a4f52c8f790c74bd158ecb2dcaa3ac8c19558638 Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Fri, 29 Jan 2021 09:40:07 +0800 Subject: [PATCH 09/17] chore: update @imove/core dependency --- packages/core/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/package.json b/packages/core/package.json index 3640f1c..b6d33ad 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -38,7 +38,7 @@ "dependencies": { "@ant-design/icons": "^4.0.6", "@antv/x6": "^1.7.12", - "@imove/compile-code": "^0.0.1", + "@imove/compile-code": "^0.1.0", "@monaco-editor/react": "^3.7.4", "antd": "^4.5.3", "axios": "^0.21.0", From 8d89170682b6a12220acde76baab189bfaae2222 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Tue, 2 Feb 2021 14:43:12 +0800 Subject: [PATCH 10/17] =?UTF-8?q?fix(README):=E4=BF=AE=E6=94=B9README?= =?UTF-8?q?=E5=85=8B=E9=9A=86=E5=9C=B0=E5=9D=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a4d20ea..da72111 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ 下载仓库,安装并启动 ```bash -$ git clone git@github.com:imgcook/imove.git +$ git clone https://github.com/imgcook/imove.git $ cd imove $ npm install $ npm run example From 321983d2c7bb7037d120c1471cf09265d4540ad7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8B=BC=E5=8F=94?= Date: Wed, 10 Feb 2021 10:38:12 +0800 Subject: [PATCH 11/17] Create README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index da72111..a4d20ea 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ 下载仓库,安装并启动 ```bash -$ git clone https://github.com/imgcook/imove.git +$ git clone git@github.com:imgcook/imove.git $ cd imove $ npm install $ npm run example From fd4b725fd3796d1c8ff5d08cf84ef643071013d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8B=BC=E5=8F=94?= Date: Thu, 18 Feb 2021 10:16:55 +0800 Subject: [PATCH 12/17] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index a4d20ea..0c05bf2 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,8 @@ $ npm run example * iloveyou11 - 冷卉「Core Team」 * i5ting - 狼叔「Core Team」 +团队博客: https://www.yuque.com/imove/blog + See also the list of [contributors](https://github.com/imgcook/imove/graphs/contributors) who participated in this project. ## 贡献 From 7707ae8fb4fd6d7e51abd778cecf23e71836fce3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8B=BC=E5=8F=94?= Date: Thu, 18 Feb 2021 10:17:30 +0800 Subject: [PATCH 13/17] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0c05bf2..72772ef 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,7 @@ $ npm run example * iloveyou11 - 冷卉「Core Team」 * i5ting - 狼叔「Core Team」 -团队博客: https://www.yuque.com/imove/blog +团队博客,各种原理,设计初衷,实现,思考等都在这里: https://www.yuque.com/imove/blog See also the list of [contributors](https://github.com/imgcook/imove/graphs/contributors) who participated in this project. From dfef5d991bd33c005fd8b459f063aa75ff5b7d05 Mon Sep 17 00:00:00 2001 From: yangpei <2517625275@qq.com> Date: Tue, 2 Mar 2021 19:44:50 +0800 Subject: [PATCH 15/17] =?UTF-8?q?fix:=20=E5=90=88=E5=B9=B6=E5=88=86?= =?UTF-8?q?=E6=94=AF=E7=9A=84=E5=B8=AE=E5=8A=A9=E6=8C=87=E5=BC=95=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core/src/mods/header/guide/guideModal.tsx | 381 ++++++++++++------ .../guide/{index.less => index.module.less} | 4 +- packages/core/src/mods/header/guide/index.tsx | 12 +- 3 files changed, 260 insertions(+), 137 deletions(-) rename packages/core/src/mods/header/guide/{index.less => index.module.less} (87%) diff --git a/packages/core/src/mods/header/guide/guideModal.tsx b/packages/core/src/mods/header/guide/guideModal.tsx index f2a8532..373d10d 100644 --- a/packages/core/src/mods/header/guide/guideModal.tsx +++ b/packages/core/src/mods/header/guide/guideModal.tsx @@ -1,82 +1,103 @@ import React from 'react'; import 'antd/es/modal/style'; -import './index.less' +import styles from './index.module.less'; import { Modal, Tabs } from 'antd'; const { TabPane } = Tabs; - interface IExportModalProps { visible: boolean; onClose: () => void; } const renderCode = (code: any) => { - return
{code}
-} + return
{code}
; +}; const QuickStart: React.FC = () => { - return
-

启动项目

- {renderCode(`$ git clone git@github.com:imgcook/imove.git\n + return ( +
+

启动项目

+ {renderCode(`$ git clone git@github.com:imgcook/imove.git\n $ cd imove\n $ npm install\n $ npm run example`)} - - 打开 http://localhost:8000/ - - -

绘制流程图、编写代码

-

根据你的业务逻辑绘制流程图。双击各节点,完成每个节点的函数编写。

- - - -

在项目中使用

-

这时有两种方式:

-
    -
  1. 在线打包出码
  2. -
  3. 本地启动开发模式
  4. -
- -

1. 在线打包出码

- -

点击页面右上方的导出按钮后,可以在弹窗内选择导出 代码,此时流程图编译后的代码将以 zip 包的形式下载到本地,你可以解压后再引入项目中使用。

- -

2. 本地命令行出码

-

安装 CLI

-
-      $ npm install -g @imove/cli
-    
-

进入项目根目录,imove 初始化

-
-      $ cd yourProject
-      $ imove --init # 或 imove -i
-    
-

本地启动开发模式

-
-      $ imove --dev # 或 imove -d
-    
- -

本地启动成功之后,可以看到原来的页面右上角会显示连接成功。

- - -

此时页面上触发 保存快捷键 Ctrl + S 时,可以看到当前项目的 src 目录下会多出一个 logic 目录,这就是 imove 编译生成的代码,此时你只要在你的组件中调用它即可。

- - 如上代码所示,需要注意两点: -
    -
  1. 通过 logic.on 方法监听事件,事件名和参数与流程图中节点代码的 ctx.emit 相对应
  2. -
  3. 通过 logic.invoke 方法调用逻辑,事件名与流程图中的开始节点的 逻辑触发名称 相对应,不然会调用失败
  4. -
-
-} + 打开 http://localhost:8000/ + +

绘制流程图、编写代码

+

根据你的业务逻辑绘制流程图。双击各节点,完成每个节点的函数编写。

+ + +

在项目中使用

+

这时有两种方式:

+
    +
  1. 在线打包出码
  2. +
  3. 本地启动开发模式
  4. +
+

1. 在线打包出码

+ +

+ 点击页面右上方的导出按钮后,可以在弹窗内选择导出 + 代码,此时流程图编译后的代码将以 zip + 包的形式下载到本地,你可以解压后再引入项目中使用。 +

+

2. 本地命令行出码

+

安装 CLI

+
$ npm install -g @imove/cli
+

进入项目根目录,imove 初始化

+
$ cd yourProject $ imove --init # 或 imove -i
+

本地启动开发模式

+
$ imove --dev # 或 imove -d
+

本地启动成功之后,可以看到原来的页面右上角会显示连接成功。

+ +

+ 此时页面上触发 保存快捷键 Ctrl + S 时,可以看到当前项目的 src + 目录下会多出一个 logic 目录,这就是 imove + 编译生成的代码,此时你只要在你的组件中调用它即可。 +

+ 如上代码所示,需要注意两点: +
    +
  1. + 通过 logic.on 方法监听事件,事件名和参数与流程图中节点代码的 ctx.emit + 相对应 +
  2. +
  3. + 通过 logic.invoke 方法调用逻辑,事件名与流程图中的开始节点的 + 逻辑触发名称 相对应,不然会调用失败 +
  4. +
+
+ ); +}; const CreateNode: React.FC = () => { return (

创建节点

-

项目启动成功后,可以从左侧面板中依次拖动节点至中间的画布,从而完成流程图的绘制工作

- 创建节点 +

+ 项目启动成功后,可以从左侧面板中依次拖动节点至中间的画布,从而完成流程图的绘制工作 +

+ 创建节点
- ) -} + ); +}; const NodeType: React.FC = () => { return ( @@ -84,99 +105,140 @@ const NodeType: React.FC = () => {

节点类型

在 iMove 中,我们将流程图的节点一共分为以下 3 种类型:

    -
  1. 开始节点:逻辑起始,是所有流程的开始,可以是一次生命周期初始化/一次点击
  2. +
  3. + 开始节点:逻辑起始,是所有流程的开始,可以是一次生命周期初始化/一次点击 +
  4. 行为节点:逻辑执行,可以是一次网络请求/一次改变状态/发送埋点等
  5. 分支节点:逻辑路由,根据不同的逻辑执行结果跳转到不同的节点
(注:一条逻辑流程必须以 开始节点 为起始) -

根据上述的规范描述,我们可以绘制出各种各样的逻辑流程图,例如获取个人数据的逻辑流程图如下所示:

- 节点类型 +

+ 根据上述的规范描述,我们可以绘制出各种各样的逻辑流程图,例如 + 获取个人数据的逻辑流程图如下所示: +

+ 节点类型 - ) -} + ); +}; const ConfigNode: React.FC = () => { return (

配置节点

依次选中图中的节点,完成右边面板中的基础配置信息填写

- 配置节点 + 配置节点

通常来说,基础信息配置使用频率最高的有:

  • 显示名称:更改节点名称
  • 代码:编辑节点代码
  • -
  • 逻辑触发名称:开始节点类型专属配置,项目代码使用时根据这个值触发逻辑调用
  • +
  • + 逻辑触发名称:开始节点类型专属配置,项目代码使用时根据这个值触发逻辑调用 +
- ) -} + ); +}; const CodeStyle: React.FC = () => { return (

节点代码规范

点击编辑按钮,可打开代码编辑器

- 节点代码规范 -

每个节点的代码等价于一个 js 文件,因此你不用担心全局变量的命名污染问题,甚至可以 import 现有的 npm 包,但最后必须 export 出一个函数。需要注意的是,由于 iMove 天生支持节点代码的异步调用,因此 export 出的函数默认是一个 promise。

-

就拿 是否登录 这个分支节点为例,我们来看下节点代码该如何编写:

+ 节点代码规范 +

+ 每个节点的代码等价于一个 js + 文件,因此你不用担心全局变量的命名污染问题,甚至可以 import 现有的 npm + 包,但最后必须 export 出一个函数。需要注意的是,由于 iMove + 天生支持节点代码的异步调用,因此 export 出的函数默认是一个 promise。 +

+

+ 就拿 是否登录 这个分支节点为例,我们来看下节点代码该如何编写: +

{renderCode(`export default async function() {\n return fetch('/api/isLogin')\n .then(res => res.json())\n .then(res => {\n - const {success, data: {isLogin} = {}} = res;\n - return success && isLogin;\n + const {success, data: {isLogin} = {}} = res\n + return success && isLogin\n }).catch(err => {\n - console.log('fetch /api/isLogin failed, the err is:', err);\n - return false;\n - });\n + console.log('fetch /api/isLogin failed, the err is:', err)\n + return false\n + })\n }\n `)} -

注:由于该节点是分支节点,因此其 boolean 返回值决定了整个流程的走向

+

+ 注:由于该节点是分支节点,因此其 boolean + 返回值决定了整个流程的走向 +

- ) -} + ); +}; const NodeConnect: React.FC = () => { return (

节点间数据通信

-

在 iMove 中,数据是以流(pipe)的形式从前往后进行流动的,也就是说前一个节点的返回值会是下一个节点的输入。不过也有一个例外,由于分支节点的返回值会是 boolean 类型,因此它的下游节点拿到的输入必将是一个 boolean 类型值,从而造成数据流的中断。为此,我们进行了一定的改造,分支节点的作用只负责数据流的转发,就像一个开关一样,只决定数据流的走向,但不改变流向下游的数据流值。

-

因此,前文例子中的请求profile接口返回数据两个节点会成为数据流的上下游关系。我们再来看下他们之间是如何进行数据通信的:

+

+ 在 iMove + 中,数据是以流(pipe)的形式从前往后进行流动的,也就是说前一个节点的返回值会是下一个节点的输入。不过也有一个例外,由于 + 分支节点的返回值会是 boolean + 类型,因此它的下游节点拿到的输入必将是一个 boolean + 类型值,从而造成数据流的中断。为此,我们进行了一定的改造,分支节点的作用只负责数据流的转发,就像一个开关一样,只决定数据流的走向,但不改变流向下游的数据流值。 +

+

+ 因此,前文例子中的请求profile接口返回数据 + 两个节点会成为数据流的上下游关系。我们再来看下他们之间是如何进行数据通信的: +

{renderCode(`// 节点: 请求profile接口\n export default async function() {\n return fetch('/api/profile')\n .then(res => res.json())\n .then(res => {\n - const {success, data} = res;\n - return {success, data};\n + const {success, data} = res\n + return {success, data}\n }).catch(err => {\n - console.log('fetch /api/isLogin failed, the err is:', err);\n - return {success: false};\n - });\n + console.log('fetch /api/isLogin failed, the err is:', err)\n + return {success: false}\n + })\n }\n `)} {renderCode(`// 节点: 接口成功\n export default async function(ctx) {\n // 获取上游数据\n - const pipe = ctx.getPipe() || {};\n - return pipe.success;\n + const pipe = ctx.getPipe() || {}\n + return pipe.success\n }\n `)} {renderCode(`// 节点: 返回数据\n const doSomething = (data) => {\n // TODO: 数据加工处理\n - return data;\n -};\n + return data\n +}\n export default async function(ctx) {\n // 这里获取到的上游数据,不是"接口成功"这个分支节点的返回值,而是"请求profile接口"这个节点的返回值\n - const pipe = ctx.getPipe() || {};\n - ctx.emit('updateUI', {profileData: doSomething(pipe.data)});\n + const pipe = ctx.getPipe() || {}\n + ctx.emit('updateUI', {profileData: doSomething(pipe.data)})\n }\n `)} - 如上代码所述,每个下游节点可以调用 ctx.getPipe 方法获取上游节点返回的数据流。另外,需要注意的是 返回数据 节点的最后一行代码 ctx.emit('eventName', data) 需要和你项目中的代码配合使用。 + 如上代码所述,每个下游节点可以调用 ctx.getPipe{' '} + 方法获取上游节点返回的数据流。另外,需要注意的是 返回数据{' '} + 节点的最后一行代码 ctx.emit('eventName', data){' '} + 需要和你项目中的代码配合使用。
- ) -} + ); +}; const HowToUse: React.FC = () => { return ( @@ -189,47 +251,111 @@ const HowToUse: React.FC = () => {

1. 在线打包出码

- -

点击页面右上方的导出按钮后,可以在弹窗内选择导出 代码,此时流程图编译后的代码将以 zip 包的形式下载到本地,你可以解压后再引入项目中使用。

+ +

+ 点击页面右上方的导出按钮后,可以在弹窗内选择导出 + 代码,此时流程图编译后的代码将以 zip + 包的形式下载到本地,你可以解压后再引入项目中使用。 +

2. 本地命令行出码

安装 CLI

-
-        $ npm install -g @imove/cli
-    
+
$ npm install -g @imove/cli

进入项目根目录,imove 初始化

-
-        $ cd yourProject
-        $ imove --init # 或 imove -i
-    
+
$ cd yourProject $ imove --init # 或 imove -i

本地启动开发模式

-
-        $ imove --dev # 或 imove -d
-    
+
$ imove --dev # 或 imove -d

本地启动成功之后,可以看到原来的页面右上角会显示连接成功。

- + -

此时页面上触发 保存快捷键 Ctrl + S 时,可以看到当前项目的 src 目录下会多出一个 logic 目录,这就是 imove 编译生成的代码,此时你只要在你的组件中调用它即可。

+

+ 此时页面上触发 保存快捷键 Ctrl + S 时,可以看到当前项目的 src + 目录下会多出一个 logic 目录,这就是 imove + 编译生成的代码,此时你只要在你的组件中调用它即可。 +

如上代码所示,需要注意两点:
    -
  1. 通过 logic.on 方法监听事件,事件名和参数与流程图中节点代码的 ctx.emit 相对应
  2. -
  3. 通过 logic.invoke 方法调用逻辑,事件名与流程图中的开始节点的 逻辑触发名称 相对应,不然会调用失败
  4. +
  5. + 通过 logic.on 方法监听事件,事件名和参数与流程图中节点代码的 ctx.emit + 相对应 +
  6. +
  7. + 通过 logic.invoke 方法调用逻辑,事件名与流程图中的开始节点的 + 逻辑触发名称 相对应,不然会调用失败 +
- ) -} + ); +}; const Document: React.FC = () => { return ( - ) -} + ); +}; const GuideModal: React.FC = (props) => { const { visible, onClose } = props; @@ -243,34 +369,33 @@ const GuideModal: React.FC = (props) => { onOk={onClose} onCancel={onClose} > -
- - +
+ + - + - + - + - + - + - + - + -
); diff --git a/packages/core/src/mods/header/guide/index.less b/packages/core/src/mods/header/guide/index.module.less similarity index 87% rename from packages/core/src/mods/header/guide/index.less rename to packages/core/src/mods/header/guide/index.module.less index 3c9ba31..51fc721 100644 --- a/packages/core/src/mods/header/guide/index.less +++ b/packages/core/src/mods/header/guide/index.module.less @@ -1,5 +1,5 @@ -.guide-container{ - height:600px; +.guideContainer{ + height:650px; .tabPane{ height:600px; diff --git a/packages/core/src/mods/header/guide/index.tsx b/packages/core/src/mods/header/guide/index.tsx index ddb76bd..5c4c885 100644 --- a/packages/core/src/mods/header/guide/index.tsx +++ b/packages/core/src/mods/header/guide/index.tsx @@ -3,8 +3,7 @@ import React, { useState } from 'react'; import { Button } from 'antd'; import GuideModal from './guideModal'; -const Export: React.FC = props => { - +const Export: React.FC = (props) => { const [modalVisible, setModalVisible] = useState(false); const onOpenModal = () => setModalVisible(true); @@ -12,11 +11,10 @@ const Export: React.FC = props => { return (
- - + +
); }; From 8a28ab963268e35827bf339e7a1c83d242d2366d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=90=9A=E8=87=B4=E8=BF=9C?= Date: Thu, 4 Mar 2021 09:36:50 +0800 Subject: [PATCH 16/17] fix: update clone URL in README fix #90 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 72772ef..036d3c5 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ 下载仓库,安装并启动 ```bash -$ git clone git@github.com:imgcook/imove.git +$ git clone https://github.com/ykfe/imove.git $ cd imove $ npm install $ npm run example From 89fe4a5c64c7bc837865182a35ff44877b6b8cc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=90=9A=E8=87=B4=E8=BF=9C?= Date: Thu, 4 Mar 2021 09:37:40 +0800 Subject: [PATCH 17/17] Update README.en-US.md --- README.en-US.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.en-US.md b/README.en-US.md index c1c4d32..7a44f58 100644 --- a/README.en-US.md +++ b/README.en-US.md @@ -30,7 +30,9 @@ Download this project, install dependencies and start the project. ```bash -$ git clone https://github.com/imgcook/imove.git +$ git clone https://github.com/ykfe/imove.git +$ cd imove +$ npm install $ npm run example ```