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 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>
); );

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

@ -1,5 +1,5 @@
.guide-container{ .guideContainer{
height:600px; height:650px;
.tabPane{ .tabPane{
height:600px; 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 { Button } from 'antd';
import GuideModal from './guideModal'; import GuideModal from './guideModal';
const Export: React.FC = props => { const Export: React.FC = (props) => {
const [modalVisible, setModalVisible] = useState<boolean>(false); const [modalVisible, setModalVisible] = useState<boolean>(false);
const onOpenModal = () => setModalVisible(true); const onOpenModal = () => setModalVisible(true);
@ -12,11 +11,10 @@ const Export: React.FC = props => {
return ( return (
<div> <div>
<Button type={'primary'} size={'small'} onClick={onOpenModal}></Button> <Button type={'primary'} size={'small'} onClick={onOpenModal}>
<GuideModal
visible={modalVisible} </Button>
onClose={onCloseModal} <GuideModal visible={modalVisible} onClose={onCloseModal} />
/>
</div> </div>
); );
}; };

Loading…
Cancel
Save