Browse Source

fix: modify help document, close #79

master
yangpei 4 years ago
parent
commit
8d875f65af
  1. 68
      packages/core/src/mods/header/guide/guideModal.tsx
  2. 4
      packages/core/src/mods/header/guide/index.module.less

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

@ -1,6 +1,6 @@
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 {
@ -23,17 +23,17 @@ $ 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"
src="https://img.alicdn.com/imgextra/i2/O1CN01h8YOPl2AAhk6yQz6P_!!6000000008163-2-tps-3570-1986.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"
src="https://img.alicdn.com/imgextra/i3/O1CN01HxT0mY1MMP4TlvwMp_!!6000000001420-2-tps-2250-598.png"
/>
<img
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>
<p></p>
@ -44,7 +44,7 @@ $ npm run example`)}
<h3>1. 线</h3>
<img
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>
@ -61,7 +61,7 @@ $ npm run example`)}
<p></p>
<img
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>
<b> Ctrl + S</b> src
@ -93,7 +93,7 @@ const CreateNode: React.FC = () => {
<img
width="100%"
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>
</div>
);
@ -119,7 +119,7 @@ const NodeType: React.FC = () => {
<img
width="100%"
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>
</div>
);
@ -133,7 +133,7 @@ const ConfigNode: React.FC = () => {
<img
width="100%"
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>
<p>使</p>
<ul>
@ -155,7 +155,7 @@ const CodeStyle: React.FC = () => {
<img
width="100%"
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>
<p>
js
@ -253,7 +253,7 @@ const HowToUse: React.FC = () => {
<h3>1. 线</h3>
<img
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>
@ -272,7 +272,7 @@ const HowToUse: React.FC = () => {
<p></p>
<img
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>
@ -299,7 +299,7 @@ const HowToUse: React.FC = () => {
const Document: React.FC = () => {
return (
<div>
<h2>使</h2>
<h2></h2>
<div>
<a target="blank" href="https://www.yuque.com/imove/docs">
使
@ -313,6 +313,30 @@ const Document: React.FC = () => {
github README
</a>
</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>
);
};
@ -329,30 +353,30 @@ const GuideModal: React.FC<IExportModalProps> = (props) => {
onOk={onClose}
onCancel={onClose}
>
<div className="guide-container">
<div className={styles.guideContainer}>
<Tabs tabPosition="left">
<TabPane className="tabPane" tab="简单上手" key="1">
<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>

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;
Loading…
Cancel
Save