Browse Source

feat: interface interaction optimization

master
yangpei 5 years ago
parent
commit
79111a0624
  1. 3
      packages/core/package.json
  2. 50
      packages/core/src/components/codeRun/index.module.less
  3. 139
      packages/core/src/components/codeRun/index.tsx
  4. 58
      packages/core/src/components/codeRun/json.ts
  5. 2
      packages/core/src/mods/header/connectStatus/editModal.tsx
  6. 35
      packages/core/src/mods/settingBar/components/code/index.tsx
  7. 8
      packages/core/src/mods/settingBar/components/json/index.tsx
  8. 6
      packages/core/src/mods/settingBar/mods/testCase/index.tsx

3
packages/core/package.json

@ -47,7 +47,8 @@
"lodash.merge": "^4.6.2", "lodash.merge": "^4.6.2",
"query-string": "^6.13.7", "query-string": "^6.13.7",
"react-color": "^2.18.1", "react-color": "^2.18.1",
"react-json-view": "^1.19.1" "react-json-view": "^1.19.1",
"xterm": "^4.9.0"
}, },
"devDependencies": { "devDependencies": {
"@types/lodash.merge": "^4.6.6", "@types/lodash.merge": "^4.6.6",

50
packages/core/src/components/codeRun/index.module.less

@ -1,14 +1,56 @@
.tabPane{ .tabPane{
margin:0 20px; margin:0 20px;
.content { .jsonInput {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 700px; height: 600px;
.half{ .left{
flex:1 padding:10px;
flex:300px;
border:1px solid #eee;
}
.right{
height:100%;
flex:1;
display: flex;
flex-direction: column;
justify-content: space-between;
.rightTop{
height:50%;
padding:10px;
flex:1;
border:1px solid #eee;
overflow-y: auto;
}
.rightBottom{
height:50%;
padding:10px;
flex:1;
border:1px solid #eee;
}
}
}
.configInput{
display: flex;
flex-direction: row;
justify-content: space-between;
height: 600px;
.left{
height:100%;
flex:1;
}
.right{
height:100%;
flex:1;
} }
} }
} }

139
packages/core/src/components/codeRun/index.tsx

@ -1,55 +1,21 @@
import React from 'react'; import React, { useEffect } from 'react';
import Generator from 'fr-generator'; import Generator from 'fr-generator';
import styles from './index.module.less';
import JsonView from 'react-json-view'; import JsonView from 'react-json-view';
import CodeEditor from '../codeEditor'; import { Terminal } from 'xterm';
import COMP_JSON from './comp'
import { Tabs } from 'antd'; import { Tabs } from 'antd';
const { TabPane } = Tabs; const { TabPane } = Tabs;
import CodeEditor from '../codeEditor';
import { defaultJson, formatJson, defaultConfig, formatConfig, compData } from './json'
import styles from './index.module.less';
// mock const VisualTab: React.FC = () => {
const defaultInputData = `const inputData = {
// 上游数据
pipe: {
success: false,
message: '未登录'
},
// 公用数据
context: {
data: {
isLogin: false
}
},
// 传入载荷
payload: {
},
// 节点配置项
config: {
}
}`;
const mockRunResult = {
pipe: {
success: false,
message: '未登录'
},
context: {
data: {
isLogin: false
}
}
}
const VisualTab: React.FC = (props) => {
return ( return (
<div style={{ height: 680 }}> <div>
<Generator <Generator
settings={[ settings={[
{ {
title: '表单组件库', title: '表单组件库',
widgets: COMP_JSON, widgets: compData,
}, },
]} ]}
/> />
@ -57,43 +23,80 @@ const VisualTab: React.FC = (props) => {
) )
} }
const JsonTab: React.FC = (props) => { const JsonTab: React.FC = () => {
useEffect(() => {
let term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('I\'m \x1B[1;3;31mterminal\x1B[0m $ ')
}, [])
return ( return (
<div className={styles.content}> <div className={styles.jsonInput}>
<div className={styles.half}> <div className={styles.left}>
<p></p> <p></p>
<CodeEditor <CodeEditor
width={'100%'} width={'100%'}
height={'650px'} value={defaultJson}
value={defaultInputData}
/> />
</div> </div>
<div className={styles.half}> <div className={styles.right}>
<p></p> <div className={styles.rightTop}>
<JsonView <p></p>
name={null} <JsonView
collapsed={false} name={null}
enableClipboard={false} collapsed={false}
displayDataTypes={false} enableClipboard={false}
displayObjectSize={false} displayDataTypes={false}
src={mockRunResult} displayObjectSize={false}
/> src={formatJson}
/>
</div>
<div className={styles.rightBottom}>
<div id="terminal"></div>
</div>
</div> </div>
<div className={styles.half}> </div>
<p></p> );
<JsonView }
name={null}
collapsed={false} interface IConfigProps {
enableClipboard={false} onChange?: (ev: any, newJson: string | undefined) => void
displayDataTypes={false} }
displayObjectSize={false}
src={mockRunResult} const ConfigTab: React.FC<IConfigProps> = (props) => {
return (
<div className={styles.configInput}>
<div className={styles.left}>
<p></p>
<CodeEditor
width={'100%'}
value={defaultConfig}
onChange={props.onChange}
/> />
</div> </div>
<div className={styles.right}>
<div className={styles.rightTop}>
<p></p>
<JsonView
name={null}
collapsed={false}
enableClipboard={false}
displayDataTypes={false}
displayObjectSize={false}
src={formatConfig}
/>
</div>
</div>
</div> </div>
); );
} }
const CodeRun: React.FC = (props) => {
interface ICodeRunProps {
isConfig?: boolean,
onChange?: (ev: any, newJson: string | undefined) => void
}
const CodeRun: React.FC<ICodeRunProps> = (props) => {
return ( return (
<Tabs <Tabs
type="card" type="card"
@ -105,7 +108,7 @@ const CodeRun: React.FC = (props) => {
<VisualTab /> <VisualTab />
</TabPane> </TabPane>
<TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}> <TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}>
<JsonTab /> {props.isConfig ? <ConfigTab onChange={props.onChange} /> : <JsonTab />}
</TabPane> </TabPane>
</Tabs> </Tabs>
) )

58
packages/core/src/components/codeRun/comp.ts → packages/core/src/components/codeRun/json.ts

@ -1,4 +1,52 @@
export default [ const defaultJson = `const inputData = {
// 上游数据
pipe: {
success: false,
message: '未登录'
},
// 公用数据
context: {
data: {
isLogin: false
}
},
// 传入载荷
payload: {
name:'xxx'
},
// 节点配置项
config: {
hasLog: true
}
}`;
const formatJson = {
pipe: {
success: false,
message: '未登录'
},
context: {
data: {
isLogin: false
}
},
payload: {
name: 'xxx'
},
config: {
hasLog: true
}
}
const defaultConfig = `{
}`;
const formatConfig = {
}
const compData = [
{ {
"text": '简单输入框', "text": '简单输入框',
"name": 'input', "name": 'input',
@ -504,3 +552,11 @@ export default [
} }
} }
] ]
export {
defaultJson,
formatJson,
defaultConfig,
formatConfig,
compData
}

2
packages/core/src/mods/header/connectStatus/editModal.tsx

@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useRef } from 'react';
import 'antd/es/form/style'; import 'antd/es/form/style';
import 'antd/es/modal/style'; import 'antd/es/modal/style';

35
packages/core/src/mods/settingBar/components/code/index.tsx

@ -6,9 +6,9 @@ import styles from './index.module.less';
import { Graph } from '@antv/x6'; import { Graph } from '@antv/x6';
import { Button, Modal, message } from 'antd'; import { Button, Modal, message } from 'antd';
import CodeEditor from '../../../../components/codeEditor';
import { monaco, EditorDidMount } from '@monaco-editor/react'; import { monaco, EditorDidMount } from '@monaco-editor/react';
import CodeEditor from '../../../../components/codeEditor';
import CodeRun from '../../../../components/codeRun';
interface IProps { interface IProps {
value: any; value: any;
name: string; name: string;
@ -81,6 +81,7 @@ interface IEditorModalProps {
const EditModal: React.FC<IEditorModalProps> = (props) => { const EditModal: React.FC<IEditorModalProps> = (props) => {
const { visible, title, value, onSave, onOk, onCancel } = props; const { visible, title, value, onSave, onOk, onCancel } = props;
const [code, setCode] = useState<string>(value); const [code, setCode] = useState<string>(value);
const [codeRunVisible, setCodeRunVisible] = useState<boolean>(false);
// life // life
useEffect(() => { useEffect(() => {
@ -94,9 +95,17 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
}, [visible]); }, [visible]);
// events // events
const onClickOk = (): void => { const onEditOk = (): void => {
onOk(code); // onOk(code);
setCodeRunVisible(true)
}; };
const onRunOk = (): void => {
setCodeRunVisible(false)
}
const onRunCancel = (): void => {
setCodeRunVisible(false)
}
const onChangeCode = (ev: any, newCode: string | undefined = ''): void => { const onChangeCode = (ev: any, newCode: string | undefined = ''): void => {
if (newCode !== code) { if (newCode !== code) {
setCode(newCode); setCode(newCode);
@ -113,12 +122,12 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
return ( return (
<Modal <Modal
className={styles.editModal} className={styles.editModal}
width={800} width={1000}
title={title} title={title}
okText={'保存'} okText={'执行代码'}
visible={visible} visible={visible}
cancelText={'取消'} cancelText={'取消'}
onOk={onClickOk} onOk={onEditOk}
onCancel={onCancel} onCancel={onCancel}
> >
<CodeEditor <CodeEditor
@ -128,6 +137,18 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onChange={onChangeCode} onChange={onChangeCode}
editorDidMount={onEditorDidMount} editorDidMount={onEditorDidMount}
/> />
<Modal
className={styles.runModal}
width={1200}
title="执行代码"
okText={'运行'}
visible={codeRunVisible}
cancelText={'取消'}
onOk={onRunOk}
onCancel={onRunCancel}
>
<CodeRun />
</Modal>
</Modal> </Modal>
); );
}; };

8
packages/core/src/mods/settingBar/components/json/index.tsx

@ -8,7 +8,7 @@ import styles from './index.module.less';
import JsonView from 'react-json-view'; import JsonView from 'react-json-view';
import { Button, Modal, message } from 'antd'; import { Button, Modal, message } from 'antd';
import { safeParse } from '../../../../utils'; import { safeParse } from '../../../../utils';
import CodeEditor from '../../../../components/codeEditor'; import CodeRun from '../../../../components/codeRun';
interface IJsonProps { interface IJsonProps {
value: any; value: any;
@ -100,6 +100,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
return ( return (
<Modal <Modal
className={styles.editModal} className={styles.editModal}
width={1200}
title={title} title={title}
okText={'保存'} okText={'保存'}
visible={visible} visible={visible}
@ -107,12 +108,13 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onClickOk} onOk={onClickOk}
onCancel={onCancel} onCancel={onCancel}
> >
<CodeEditor <CodeRun isConfig={true} onChange={onChangeJson} />
{/* <CodeEditor
value={json} value={json}
width={'100%'} width={'100%'}
height={'600px'} height={'600px'}
onChange={onChangeJson} onChange={onChangeJson}
/> /> */}
</Modal> </Modal>
); );
}; };

6
packages/core/src/mods/settingBar/mods/testCase/index.tsx

@ -49,11 +49,11 @@ const EditModal: React.FC<IEditModalProps> = (props): JSX.Element => {
<Modal <Modal
width={1400} width={1400}
centered={true} centered={true}
bodyStyle={{ height: 800, overflow: 'auto' }} bodyStyle={{ height: 700, overflowY: 'auto' }}
title={'运行代码'} title={'运行代码'}
visible={visible} visible={visible}
okText={'运行一次'} okText={'运行'}
cancelText={null} cancelText={'取消'}
onOk={onOk} onOk={onOk}
onCancel={onCancel} onCancel={onCancel}
> >

Loading…
Cancel
Save