|
@ -1,6 +1,6 @@ |
|
|
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 { |
|
@ -23,17 +23,17 @@ $ 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%" |
|
|
width="100%" |
|
|
src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523659304-84fc5548-3203-48b6-9ec8-81f0b0228245.png" |
|
|
src="https://img.alicdn.com/imgextra/i2/O1CN01h8YOPl2AAhk6yQz6P_!!6000000008163-2-tps-3570-1986.png" |
|
|
/> |
|
|
/> |
|
|
<h2>绘制流程图、编写代码</h2> |
|
|
<h2>绘制流程图、编写代码</h2> |
|
|
<p>根据你的业务逻辑绘制流程图。双击各节点,完成每个节点的函数编写。</p> |
|
|
<p>根据你的业务逻辑绘制流程图。双击各节点,完成每个节点的函数编写。</p> |
|
|
<img |
|
|
<img |
|
|
width="100%" |
|
|
width="100%" |
|
|
src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610529557793-63ef6842-079c-498a-8ad3-dfbdad7549bb.png" |
|
|
src="https://img.alicdn.com/imgextra/i3/O1CN01HxT0mY1MMP4TlvwMp_!!6000000001420-2-tps-2250-598.png" |
|
|
/> |
|
|
/> |
|
|
<img |
|
|
<img |
|
|
width="100%" |
|
|
width="100%" |
|
|
src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523745104-24e94b10-f8d7-4eb2-a282-ca32a19f7ccd.png" |
|
|
src="https://img.alicdn.com/imgextra/i3/O1CN01e2bC7824KsqtVLLJe_!!6000000007373-2-tps-3550-1750.png" |
|
|
/> |
|
|
/> |
|
|
<h2>在项目中使用</h2> |
|
|
<h2>在项目中使用</h2> |
|
|
<p>这时有两种方式:</p> |
|
|
<p>这时有两种方式:</p> |
|
@ -44,7 +44,7 @@ $ npm run example`)} |
|
|
<h3>1. 在线打包出码</h3> |
|
|
<h3>1. 在线打包出码</h3> |
|
|
<img |
|
|
<img |
|
|
width="100%" |
|
|
width="100%" |
|
|
src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523805396-4211e9c2-b501-4b23-aeae-f55147d67e8d.png" |
|
|
src="https://img.alicdn.com/imgextra/i4/O1CN01ysTe3s1UjJoSBs6PE_!!6000000002553-2-tps-3260-1800.png" |
|
|
/> |
|
|
/> |
|
|
<p> |
|
|
<p> |
|
|
点击页面右上方的导出按钮后,可以在弹窗内选择导出 |
|
|
点击页面右上方的导出按钮后,可以在弹窗内选择导出 |
|
@ -61,7 +61,7 @@ $ npm run example`)} |
|
|
<p>本地启动成功之后,可以看到原来的页面右上角会显示连接成功。</p> |
|
|
<p>本地启动成功之后,可以看到原来的页面右上角会显示连接成功。</p> |
|
|
<img |
|
|
<img |
|
|
width="100%" |
|
|
width="100%" |
|
|
src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610529177065-5000bb28-10f2-4053-a4bb-af98139f488e.png" |
|
|
src="https://img.alicdn.com/imgextra/i4/O1CN01lKVzHY1J7LCMgTrwC_!!6000000000981-2-tps-3148-1750.png" |
|
|
/> |
|
|
/> |
|
|
<p> |
|
|
<p> |
|
|
此时页面上触发 <b>保存快捷键 Ctrl + S</b> 时,可以看到当前项目的 src |
|
|
此时页面上触发 <b>保存快捷键 Ctrl + S</b> 时,可以看到当前项目的 src |
|
@ -93,7 +93,7 @@ const CreateNode: React.FC = () => { |
|
|
<img |
|
|
<img |
|
|
width="100%" |
|
|
width="100%" |
|
|
alt="创建节点" |
|
|
alt="创建节点" |
|
|
src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610528033956-df4c7cb8-2b35-4065-8f51-a8d98c02f532.png" |
|
|
src="https://img.alicdn.com/imgextra/i2/O1CN01TMgmco1mbgIBQLLQy_!!6000000004973-2-tps-3268-1834.png" |
|
|
></img> |
|
|
></img> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
); |
|
@ -119,7 +119,7 @@ const NodeType: React.FC = () => { |
|
|
<img |
|
|
<img |
|
|
width="100%" |
|
|
width="100%" |
|
|
alt="节点类型" |
|
|
alt="节点类型" |
|
|
src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610528367101-6ff34826-8658-41e8-bb8b-66b254f14cde.png" |
|
|
src="https://img.alicdn.com/imgextra/i3/O1CN01hPtj531F1bmJDXpfy_!!6000000000427-2-tps-3266-1820.png" |
|
|
></img> |
|
|
></img> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
); |
|
@ -133,7 +133,7 @@ const ConfigNode: React.FC = () => { |
|
|
<img |
|
|
<img |
|
|
width="100%" |
|
|
width="100%" |
|
|
alt="配置节点" |
|
|
alt="配置节点" |
|
|
src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610528399738-19c54ce9-25f4-4fc0-93a8-580f9eb9f20f.png" |
|
|
src="https://img.alicdn.com/imgextra/i2/O1CN01SQPxKi29ufsfQCtmY_!!6000000008128-2-tps-3266-1832.png" |
|
|
></img> |
|
|
></img> |
|
|
<p>通常来说,基础信息配置使用频率最高的有:</p> |
|
|
<p>通常来说,基础信息配置使用频率最高的有:</p> |
|
|
<ul> |
|
|
<ul> |
|
@ -155,7 +155,7 @@ const CodeStyle: React.FC = () => { |
|
|
<img |
|
|
<img |
|
|
width="100%" |
|
|
width="100%" |
|
|
alt="节点代码规范" |
|
|
alt="节点代码规范" |
|
|
src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610528493678-c08c4d08-380e-44ca-8dfd-33adb5c1604f.png" |
|
|
src="https://img.alicdn.com/imgextra/i4/O1CN01tJ0gmo1oxKF3eOLkH_!!6000000005291-2-tps-3268-1826.png" |
|
|
></img> |
|
|
></img> |
|
|
<p> |
|
|
<p> |
|
|
每个节点的代码等价于一个 js |
|
|
每个节点的代码等价于一个 js |
|
@ -253,7 +253,7 @@ const HowToUse: React.FC = () => { |
|
|
<h3>1. 在线打包出码</h3> |
|
|
<h3>1. 在线打包出码</h3> |
|
|
<img |
|
|
<img |
|
|
width="100%" |
|
|
width="100%" |
|
|
src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523805396-4211e9c2-b501-4b23-aeae-f55147d67e8d.png" |
|
|
src="https://img.alicdn.com/imgextra/i3/O1CN01r14VoI1eH3X0RiR2M_!!6000000003845-2-tps-3260-1800.png" |
|
|
/> |
|
|
/> |
|
|
<p> |
|
|
<p> |
|
|
点击页面右上方的导出按钮后,可以在弹窗内选择导出 |
|
|
点击页面右上方的导出按钮后,可以在弹窗内选择导出 |
|
@ -272,7 +272,7 @@ const HowToUse: React.FC = () => { |
|
|
<p>本地启动成功之后,可以看到原来的页面右上角会显示连接成功。</p> |
|
|
<p>本地启动成功之后,可以看到原来的页面右上角会显示连接成功。</p> |
|
|
<img |
|
|
<img |
|
|
width="100%" |
|
|
width="100%" |
|
|
src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610529177065-5000bb28-10f2-4053-a4bb-af98139f488e.png" |
|
|
src="https://img.alicdn.com/imgextra/i4/O1CN01NVwf2k248W9lahjm3_!!6000000007346-2-tps-3148-1750.png" |
|
|
/> |
|
|
/> |
|
|
|
|
|
|
|
|
<p> |
|
|
<p> |
|
@ -299,7 +299,7 @@ const HowToUse: React.FC = () => { |
|
|
const Document: React.FC = () => { |
|
|
const Document: React.FC = () => { |
|
|
return ( |
|
|
return ( |
|
|
<div> |
|
|
<div> |
|
|
<h2>使用文档</h2> |
|
|
<h2>文档汇总</h2> |
|
|
<div> |
|
|
<div> |
|
|
<a target="blank" href="https://www.yuque.com/imove/docs"> |
|
|
<a target="blank" href="https://www.yuque.com/imove/docs"> |
|
|
详细使用文档 |
|
|
详细使用文档 |
|
@ -313,6 +313,30 @@ const Document: React.FC = () => { |
|
|
github README |
|
|
github README |
|
|
</a> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
|
|
|
<a |
|
|
|
|
|
target="blank" |
|
|
|
|
|
href="https://mp.weixin.qq.com/s/cfGdGp1VAVn_bUqXUspvJg" |
|
|
|
|
|
> |
|
|
|
|
|
登上 github 趋势榜,iMove 原理技术大揭秘! |
|
|
|
|
|
</a> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div> |
|
|
|
|
|
<a |
|
|
|
|
|
target="blank" |
|
|
|
|
|
href="https://www.infoq.cn/article/hMVR8kJvRhXxod8ydiBt" |
|
|
|
|
|
> |
|
|
|
|
|
imove基于 x6 + form-render 背后的思考 |
|
|
|
|
|
</a> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div> |
|
|
|
|
|
<a |
|
|
|
|
|
target="blank" |
|
|
|
|
|
href="https://mp.weixin.qq.com/s/tqZaZTTrjZlo9T7f9sLNIA" |
|
|
|
|
|
> |
|
|
|
|
|
"所见即所得!" iMove 在线执行代码探索 |
|
|
|
|
|
</a> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
); |
|
|
}; |
|
|
}; |
|
@ -329,30 +353,30 @@ 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> |
|
|