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 => {