Browse Source

add help document on UI

master
yangpei 4 years ago
parent
commit
d6105bc064
  1. 2
      packages/core/src/components/configSchema/index.tsx
  2. 279
      packages/core/src/mods/header/guide/guideModal.tsx
  3. 22
      packages/core/src/mods/header/guide/index.less
  4. 24
      packages/core/src/mods/header/guide/index.tsx
  5. 2
      packages/core/src/mods/header/index.tsx

2
packages/core/src/components/configSchema/index.tsx

@ -20,7 +20,7 @@ const ConfigSchema: React.FC<IProps> = (props) => {
// @ts-ignore
const formSchema = formRef.current && formRef.current.getValue()
setSchema(formSchema)
setCode(JSON.stringify(formSchema))
setCode(JSON.stringify(formSchema, null, 2))
// 编辑器同步到可视化
try {

279
packages/core/src/mods/header/guide/guideModal.tsx

@ -0,0 +1,279 @@
import React from 'react';
import 'antd/es/modal/style';
import './index.less'
import { Modal, Tabs } from 'antd';
const { TabPane } = Tabs;
interface IExportModalProps {
visible: boolean;
onClose: () => void;
}
const renderCode = (code: any) => {
return <pre>{code}</pre>
}
const QuickStart: React.FC = () => {
return <div>
<h2></h2>
{renderCode(`$ git clone git@github.com:imgcook/imove.git\n
$ cd imove\n
$ npm install\n
$ npm run example`)}
<a href="http://localhost:8000/">http://localhost:8000/</a>
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523659304-84fc5548-3203-48b6-9ec8-81f0b0228245.png" />
<h2></h2>
<p></p>
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610529557793-63ef6842-079c-498a-8ad3-dfbdad7549bb.png" />
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523745104-24e94b10-f8d7-4eb2-a282-ca32a19f7ccd.png" />
<h2>使</h2>
<p></p>
<ol>
<li>线</li>
<li></li>
</ol>
<h3>1. 线</h3>
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523805396-4211e9c2-b501-4b23-aeae-f55147d67e8d.png" />
<p> zip 使</p>
<h3>2. </h3>
<p> CLI</p>
<pre>
$ npm install -g @imove/cli
</pre>
<p>imove </p>
<pre>
$ cd yourProject
$ imove --init # imove -i
</pre>
<p></p>
<pre>
$ imove --dev # imove -d
</pre>
<p></p>
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610529177065-5000bb28-10f2-4053-a4bb-af98139f488e.png" />
<p> <b> Ctrl + S</b> src <strong>logic</strong> imove </p>
<b></b>
<ol>
<li> logic.on ctx.emit </li>
<li> logic.invoke </li>
</ol>
</div>
}
const CreateNode: React.FC = () => {
return (
<div>
<h2></h2>
<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>
</div>
)
}
const NodeType: React.FC = () => {
return (
<div>
<h2></h2>
<p> iMove 3 </p>
<ol>
<li>/</li>
<li>//</li>
<li></li>
</ol>
<b> </b>
<p><b></b></p>
<img width="100%" alt="节点类型" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610528367101-6ff34826-8658-41e8-bb8b-66b254f14cde.png"></img>
</div>
)
}
const ConfigNode: React.FC = () => {
return (
<div>
<h2></h2>
<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>
<p>使</p>
<ul>
<li></li>
<li></li>
<li>使</li>
</ul>
</div>
)
}
const CodeStyle: React.FC = () => {
return (
<div>
<h2></h2>
<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>
<p> js import npm export iMove export promise</p>
<p> <b></b> </p>
{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
}).catch(err => {\n
console.log('fetch /api/isLogin failed, the err is:', err);\n
return false;\n
});\n
}\n
`)}
<p><b></b> boolean </p>
</div>
)
}
const NodeConnect: React.FC = () => {
return (
<div>
<h2></h2>
<p> iMove pipe<b></b> boolean boolean </p>
<p><b>profile接口</b><b></b></p>
{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
}).catch(err => {\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
}\n
`)}
{renderCode(`// 节点: 返回数据\n
const doSomething = (data) => {\n
// TODO: 数据加工处理\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
}\n
`)}
<b>ctx.getPipe</b> <b></b> <b>ctx.emit('eventName', data)</b> 使
</div>
)
}
const HowToUse: React.FC = () => {
return (
<div>
<h2>使</h2>
<p></p>
<ol>
<li>线</li>
<li></li>
</ol>
<h3>1. 线</h3>
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610523805396-4211e9c2-b501-4b23-aeae-f55147d67e8d.png" />
<p> zip 使</p>
<h3>2. </h3>
<p> CLI</p>
<pre>
$ npm install -g @imove/cli
</pre>
<p>imove </p>
<pre>
$ cd yourProject
$ imove --init # imove -i
</pre>
<p></p>
<pre>
$ imove --dev # imove -d
</pre>
<p></p>
<img width="100%" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/317407/1610529177065-5000bb28-10f2-4053-a4bb-af98139f488e.png" />
<p> <b> Ctrl + S</b> src <strong>logic</strong> imove </p>
<b></b>
<ol>
<li> logic.on ctx.emit </li>
<li> logic.invoke </li>
</ol>
</div>
)
}
const Document: React.FC = () => {
return (
<div>
<h2>使</h2>
<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</a></div>
</div>
)
}
const GuideModal: React.FC<IExportModalProps> = (props) => {
const { visible, onClose } = props;
return (
<Modal
width={1000}
visible={visible}
footer={null}
title={'帮助文档'}
onOk={onClose}
onCancel={onClose}
>
<div className="guide-container">
<Tabs tabPosition='left'>
<TabPane className="tabPane" tab="简单上手" key="1">
<QuickStart />
</TabPane>
<TabPane className="tabPane" tab="创建节点" key="2">
<CreateNode />
</TabPane>
<TabPane className="tabPane" tab="节点类型" key="3">
<NodeType />
</TabPane>
<TabPane className="tabPane" tab="配置节点" key="4">
<ConfigNode />
</TabPane>
<TabPane className="tabPane" tab="节点代码规范" key="5">
<CodeStyle />
</TabPane>
<TabPane className="tabPane" tab="节点间数据通信" key="6">
<NodeConnect />
</TabPane>
<TabPane className="tabPane" tab="如何在项目中使用" key="7">
<HowToUse />
</TabPane>
<TabPane className="tabPane" tab="使用文档" key="8">
<Document />
</TabPane>
</Tabs>
</div>
</Modal>
);
};
export default GuideModal;

22
packages/core/src/mods/header/guide/index.less

@ -0,0 +1,22 @@
.guide-container{
height:600px;
.tabPane{
height:600px;
overflow-y:auto;
&::-webkit-scrollbar {
width: 0;
}
img{
margin:10px 0;
}
pre{
color:#c1811d;
font-size:12px;
line-height:13px;
}
}
}

24
packages/core/src/mods/header/guide/index.tsx

@ -0,0 +1,24 @@
import React, { useState } from 'react';
import { Button } from 'antd';
import GuideModal from './guideModal';
const Export: React.FC = props => {
const [modalVisible, setModalVisible] = useState<boolean>(false);
const onOpenModal = () => setModalVisible(true);
const onCloseModal = () => setModalVisible(false);
return (
<div>
<Button type={'primary'} size={'small'} onClick={onOpenModal}></Button>
<GuideModal
visible={modalVisible}
onClose={onCloseModal}
/>
</div>
);
};
export default Export;

2
packages/core/src/mods/header/index.tsx

@ -3,6 +3,7 @@ import React from 'react';
import styles from './index.module.less';
import { Graph } from '@antv/x6';
import Guide from './guide';
import Export from './export';
import ImportDSL from './importDSL';
import ConnectStatus from './connectStatus';
@ -19,6 +20,7 @@ const Header: React.FC<IProps> = (props) => {
<span className={styles.titleText}>iMove</span>
</a>
<div className={styles.widgets}>
<Guide />
<Export flowChart={flowChart} />
<ImportDSL flowChart={flowChart} />
<ConnectStatus flowChart={flowChart} />

Loading…
Cancel
Save