Browse Source

fix: 合并分支的帮助指引功能

master
yangpei 4 years ago
parent
commit
dfef5d991b
  1. 381
      packages/core/src/mods/header/guide/guideModal.tsx
  2. 4
      packages/core/src/mods/header/guide/index.module.less
  3. 12
      packages/core/src/mods/header/guide/index.tsx

381
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 <pre>{code}</pre>
}
return <pre>{code}</pre>;
};
const QuickStart: React.FC = () => {
return <div>
<h2></h2>
{renderCode(`$ git clone git@github.com:imgcook/imove.git\n
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>
}
<a href="http://localhost:8000/">http://localhost:8000/</a>
<img
width="100%"
src="https://img.alicdn.com/imgextra/i2/O1CN01h8YOPl2AAhk6yQz6P_!!6000000008163-2-tps-3570-1986.png"
/>
<h2></h2>
<p></p>
<img
width="100%"
src="https://img.alicdn.com/imgextra/i3/O1CN01HxT0mY1MMP4TlvwMp_!!6000000001420-2-tps-2250-598.png"
/>
<img
width="100%"
src="https://img.alicdn.com/imgextra/i3/O1CN01e2bC7824KsqtVLLJe_!!6000000007373-2-tps-3550-1750.png"
/>
<h2>使</h2>
<p></p>
<ol>
<li>线</li>
<li></li>
</ol>
<h3>1. 线</h3>
<img
width="100%"
src="https://img.alicdn.com/imgextra/i4/O1CN01ysTe3s1UjJoSBs6PE_!!6000000002553-2-tps-3260-1800.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://img.alicdn.com/imgextra/i4/O1CN01lKVzHY1J7LCMgTrwC_!!6000000000981-2-tps-3148-1750.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>
<p>
</p>
<img
width="100%"
alt="创建节点"
src="https://img.alicdn.com/imgextra/i2/O1CN01TMgmco1mbgIBQLLQy_!!6000000004973-2-tps-3268-1834.png"
></img>
</div>
)
}
);
};
const NodeType: React.FC = () => {
return (
@ -84,99 +105,140 @@ const NodeType: React.FC = () => {
<h2></h2>
<p> iMove 3 </p>
<ol>
<li>/</li>
<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>
<p>
<b></b>
</p>
<img
width="100%"
alt="节点类型"
src="https://img.alicdn.com/imgextra/i3/O1CN01hPtj531F1bmJDXpfy_!!6000000000427-2-tps-3266-1820.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>
<img
width="100%"
alt="配置节点"
src="https://img.alicdn.com/imgextra/i2/O1CN01SQPxKi29ufsfQCtmY_!!6000000008128-2-tps-3266-1832.png"
></img>
<p>使</p>
<ul>
<li></li>
<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>
<img
width="100%"
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
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
`)}
<p><b></b> boolean </p>
<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>
<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
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
`)}
<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>
)
}
);
};
const HowToUse: React.FC = () => {
return (
@ -189,47 +251,111 @@ const HowToUse: React.FC = () => {
</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>
<img
width="100%"
src="https://img.alicdn.com/imgextra/i3/O1CN01r14VoI1eH3X0RiR2M_!!6000000003845-2-tps-3260-1800.png"
/>
<p>
zip
使
</p>
<h3>2. </h3>
<p> CLI</p>
<pre>
$ npm install -g @imove/cli
</pre>
<pre>$ npm install -g @imove/cli</pre>
<p>imove </p>
<pre>
$ cd yourProject
$ imove --init # imove -i
</pre>
<pre>$ cd yourProject $ imove --init # imove -i</pre>
<p></p>
<pre>
$ imove --dev # imove -d
</pre>
<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" />
<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>
<ol>
<li> logic.on ctx.emit </li>
<li> logic.invoke </li>
<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>
<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.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>
)
}
);
};
const GuideModal: React.FC<IExportModalProps> = (props) => {
const { visible, onClose } = props;
@ -243,34 +369,33 @@ const GuideModal: React.FC<IExportModalProps> = (props) => {
onOk={onClose}
onCancel={onClose}
>
<div className="guide-container">
<Tabs tabPosition='left'>
<TabPane className="tabPane" tab="简单上手" key="1">
<div className={styles.guideContainer}>
<Tabs tabPosition="left">
<TabPane className={styles.tabPane} tab="简单上手" key="1">
<QuickStart />
</TabPane>
<TabPane className="tabPane" tab="创建节点" key="2">
<TabPane className={styles.tabPane} tab="创建节点" key="2">
<CreateNode />
</TabPane>
<TabPane className="tabPane" tab="节点类型" key="3">
<TabPane className={styles.tabPane} tab="节点类型" key="3">
<NodeType />
</TabPane>
<TabPane className="tabPane" tab="配置节点" key="4">
<TabPane className={styles.tabPane} tab="配置节点" key="4">
<ConfigNode />
</TabPane>
<TabPane className="tabPane" tab="节点代码规范" key="5">
<TabPane className={styles.tabPane} tab="节点代码规范" key="5">
<CodeStyle />
</TabPane>
<TabPane className="tabPane" tab="节点间数据通信" key="6">
<TabPane className={styles.tabPane} tab="节点间数据通信" key="6">
<NodeConnect />
</TabPane>
<TabPane className="tabPane" tab="如何在项目中使用" key="7">
<TabPane className={styles.tabPane} tab="如何在项目中使用" key="7">
<HowToUse />
</TabPane>
<TabPane className="tabPane" tab="使用文档" key="8">
<TabPane className={styles.tabPane} tab="文档汇总" key="8">
<Document />
</TabPane>
</Tabs>
</div>
</Modal>
);

4
packages/core/src/mods/header/guide/index.less → packages/core/src/mods/header/guide/index.module.less

@ -1,5 +1,5 @@
.guide-container{
height:600px;
.guideContainer{
height:650px;
.tabPane{
height:600px;

12
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<boolean>(false);
const onOpenModal = () => setModalVisible(true);
@ -12,11 +11,10 @@ const Export: React.FC = props => {
return (
<div>
<Button type={'primary'} size={'small'} onClick={onOpenModal}></Button>
<GuideModal
visible={modalVisible}
onClose={onCloseModal}
/>
<Button type={'primary'} size={'small'} onClick={onOpenModal}>
</Button>
<GuideModal visible={modalVisible} onClose={onCloseModal} />
</div>
);
};

Loading…
Cancel
Save