diff --git a/packages/core/package.json b/packages/core/package.json
index 5d5e668..f13bef4 100644
--- a/packages/core/package.json
+++ b/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",
diff --git a/packages/core/src/components/codeRun/index.module.less b/packages/core/src/components/codeRun/index.module.less
index 5a38860..dabd6d2 100644
--- a/packages/core/src/components/codeRun/index.module.less
+++ b/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;
}
}
}
diff --git a/packages/core/src/components/codeRun/index.tsx b/packages/core/src/components/codeRun/index.tsx
index 899f5f6..3b474dc 100644
--- a/packages/core/src/components/codeRun/index.tsx
+++ b/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 (
-
+
@@ -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 (
-
-
+
+
-
-
输入格式化:
-
+
-
-
结果输出:
-
+ );
+}
+
+interface IConfigProps {
+ onChange?: (ev: any, newJson: string | undefined) => void
+}
+
+const ConfigTab: React.FC = (props) => {
+ return (
+
);
}
-const CodeRun: React.FC = (props) => {
+
+interface ICodeRunProps {
+ isConfig?: boolean,
+ onChange?: (ev: any, newJson: string | undefined) => void
+}
+
+const CodeRun: React.FC = (props) => {
return (
{
-
+ {props.isConfig ? : }
)
diff --git a/packages/core/src/components/codeRun/comp.ts b/packages/core/src/components/codeRun/json.ts
similarity index 94%
rename from packages/core/src/components/codeRun/comp.ts
rename to packages/core/src/components/codeRun/json.ts
index 604cd29..f9e063d 100644
--- a/packages/core/src/components/codeRun/comp.ts
+++ b/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
+}
diff --git a/packages/core/src/mods/header/connectStatus/editModal.tsx b/packages/core/src/mods/header/connectStatus/editModal.tsx
index bce54ac..e94e968 100644
--- a/packages/core/src/mods/header/connectStatus/editModal.tsx
+++ b/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';
diff --git a/packages/core/src/mods/settingBar/components/code/index.tsx b/packages/core/src/mods/settingBar/components/code/index.tsx
index 28c58ad..eb0231e 100644
--- a/packages/core/src/mods/settingBar/components/code/index.tsx
+++ b/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 = (props) => {
const { visible, title, value, onSave, onOk, onCancel } = props;
const [code, setCode] = useState(value);
+ const [codeRunVisible, setCodeRunVisible] = useState(false);
// life
useEffect(() => {
@@ -94,9 +95,17 @@ const EditModal: React.FC = (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 = (props) => {
return (
= (props) => {
onChange={onChangeCode}
editorDidMount={onEditorDidMount}
/>
+
+
+
);
};
diff --git a/packages/core/src/mods/settingBar/components/json/index.tsx b/packages/core/src/mods/settingBar/components/json/index.tsx
index 10f1148..917c0a7 100644
--- a/packages/core/src/mods/settingBar/components/json/index.tsx
+++ b/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 = (props) => {
return (
= (props) => {
onOk={onClickOk}
onCancel={onCancel}
>
-
+ {/*
+ /> */}
);
};
diff --git a/packages/core/src/mods/settingBar/mods/testCase/index.tsx b/packages/core/src/mods/settingBar/mods/testCase/index.tsx
index da12e0d..3ad2c77 100644
--- a/packages/core/src/mods/settingBar/mods/testCase/index.tsx
+++ b/packages/core/src/mods/settingBar/mods/testCase/index.tsx
@@ -49,11 +49,11 @@ const EditModal: React.FC = (props): JSX.Element => {