Browse Source

feat: interface interaction optimization

master
yangpei 4 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",
"query-string": "^6.13.7",
"react-color": "^2.18.1",
"react-json-view": "^1.19.1"
"react-json-view": "^1.19.1",
"xterm": "^4.9.0"
},
"devDependencies": {
"@types/lodash.merge": "^4.6.6",

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

@ -1,14 +1,56 @@
.tabPane{
margin:0 20px;
.content {
.jsonInput {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 700px;
height: 600px;
.half{
flex:1
.left{
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 styles from './index.module.less';
import JsonView from 'react-json-view';
import CodeEditor from '../codeEditor';
import COMP_JSON from './comp'
import { Terminal } from 'xterm';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
import CodeEditor from '../codeEditor';
import { defaultJson, formatJson, defaultConfig, formatConfig, compData } from './json'
import styles from './index.module.less';
// mock
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) => {
const VisualTab: React.FC = () => {
return (
<div style={{ height: 680 }}>
<div>
<Generator
settings={[
{
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 (
<div className={styles.content}>
<div className={styles.half}>
<div className={styles.jsonInput}>
<div className={styles.left}>
<p></p>
<CodeEditor
width={'100%'}
height={'650px'}
value={defaultInputData}
value={defaultJson}
/>
</div>
<div className={styles.half}>
<p></p>
<JsonView
name={null}
collapsed={false}
enableClipboard={false}
displayDataTypes={false}
displayObjectSize={false}
src={mockRunResult}
/>
<div className={styles.right}>
<div className={styles.rightTop}>
<p></p>
<JsonView
name={null}
collapsed={false}
enableClipboard={false}
displayDataTypes={false}
displayObjectSize={false}
src={formatJson}
/>
</div>
<div className={styles.rightBottom}>
<div id="terminal"></div>
</div>
</div>
<div className={styles.half}>
<p></p>
<JsonView
name={null}
collapsed={false}
enableClipboard={false}
displayDataTypes={false}
displayObjectSize={false}
src={mockRunResult}
</div>
);
}
interface IConfigProps {
onChange?: (ev: any, newJson: string | undefined) => void
}
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 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>
);
}
const CodeRun: React.FC = (props) => {
interface ICodeRunProps {
isConfig?: boolean,
onChange?: (ev: any, newJson: string | undefined) => void
}
const CodeRun: React.FC<ICodeRunProps> = (props) => {
return (
<Tabs
type="card"
@ -105,7 +108,7 @@ const CodeRun: React.FC = (props) => {
<VisualTab />
</TabPane>
<TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}>
<JsonTab />
{props.isConfig ? <ConfigTab onChange={props.onChange} /> : <JsonTab />}
</TabPane>
</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": '简单输入框',
"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/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 { Button, Modal, message } from 'antd';
import CodeEditor from '../../../../components/codeEditor';
import { monaco, EditorDidMount } from '@monaco-editor/react';
import CodeEditor from '../../../../components/codeEditor';
import CodeRun from '../../../../components/codeRun';
interface IProps {
value: any;
name: string;
@ -81,6 +81,7 @@ interface IEditorModalProps {
const EditModal: React.FC<IEditorModalProps> = (props) => {
const { visible, title, value, onSave, onOk, onCancel } = props;
const [code, setCode] = useState<string>(value);
const [codeRunVisible, setCodeRunVisible] = useState<boolean>(false);
// life
useEffect(() => {
@ -94,9 +95,17 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
}, [visible]);
// events
const onClickOk = (): void => {
onOk(code);
const onEditOk = (): void => {
// onOk(code);
setCodeRunVisible(true)
};
const onRunOk = (): void => {
setCodeRunVisible(false)
}
const onRunCancel = (): void => {
setCodeRunVisible(false)
}
const onChangeCode = (ev: any, newCode: string | undefined = ''): void => {
if (newCode !== code) {
setCode(newCode);
@ -113,12 +122,12 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
return (
<Modal
className={styles.editModal}
width={800}
width={1000}
title={title}
okText={'保存'}
okText={'执行代码'}
visible={visible}
cancelText={'取消'}
onOk={onClickOk}
onOk={onEditOk}
onCancel={onCancel}
>
<CodeEditor
@ -128,6 +137,18 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onChange={onChangeCode}
editorDidMount={onEditorDidMount}
/>
<Modal
className={styles.runModal}
width={1200}
title="执行代码"
okText={'运行'}
visible={codeRunVisible}
cancelText={'取消'}
onOk={onRunOk}
onCancel={onRunCancel}
>
<CodeRun />
</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 { Button, Modal, message } from 'antd';
import { safeParse } from '../../../../utils';
import CodeEditor from '../../../../components/codeEditor';
import CodeRun from '../../../../components/codeRun';
interface IJsonProps {
value: any;
@ -100,6 +100,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
return (
<Modal
className={styles.editModal}
width={1200}
title={title}
okText={'保存'}
visible={visible}
@ -107,12 +108,13 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onClickOk}
onCancel={onCancel}
>
<CodeEditor
<CodeRun isConfig={true} onChange={onChangeJson} />
{/* <CodeEditor
value={json}
width={'100%'}
height={'600px'}
onChange={onChangeJson}
/>
/> */}
</Modal>
);
};

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

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

Loading…
Cancel
Save