diff --git a/packages/core/package.json b/packages/core/package.json index 0cd1cc6..cebb36f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -48,7 +48,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", + "react-split-pane": "^2.0.3" }, "devDependencies": { "@types/lodash.merge": "^4.6.6", diff --git a/packages/core/rollup.config.js b/packages/core/rollup.config.js index fa56f8f..911690d 100644 --- a/packages/core/rollup.config.js +++ b/packages/core/rollup.config.js @@ -1,5 +1,6 @@ import pkg from './package.json'; import postcss from 'rollup-plugin-postcss'; +import commonjs from '@rollup/plugin-commonjs'; import typescript from 'rollup-plugin-typescript'; import rollupBaseConfig from '../../rollup.config'; @@ -7,6 +8,7 @@ export default Object.assign(rollupBaseConfig, { plugins: [ postcss(), typescript(), + commonjs() ], output: [ { diff --git a/packages/core/src/components/codeRun/index.module.less b/packages/core/src/components/codeRun/index.module.less index e98861c..0c08793 100644 --- a/packages/core/src/components/codeRun/index.module.less +++ b/packages/core/src/components/codeRun/index.module.less @@ -1,44 +1,55 @@ +.container { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; - .container { + .pane { display: flex; - flex-direction: row; - justify-content: space-between; + flex: 1; + } +} + +.card { + display: flex; + flex-direction: column; + flex: 1; + background-color: #ffffff; + + .cardTitleText { + margin: 10px 24px 0; + font-size: 16px; + font-weight: 500; + color: #000000; + } + + .cardBody { + padding: 10px 24px; + height: 100%; + overflow: scroll; + } +} + +:global { + .ant-tabs { height: 100%; + } - .left{ - padding:10px; - flex:1; - border:1px solid #eee; + .ant-tabs-content-holder { + height: 100%; + } - .editor{ - width:100%; - height:600px; - } + .ant-tabs-content { + height: 100%; + overflow: scroll; + } - .visualInput{ - width:100%; - } - } + .sc-bdVaJa.cjjWdp { + opacity: 1; + background-color: #efefef; - .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:300px; - flex:1; - border:1px solid #eee; - } + &:hover { + border-color: transparent; } } +} diff --git a/packages/core/src/components/codeRun/index.tsx b/packages/core/src/components/codeRun/index.tsx index b25f163..1d9306d 100644 --- a/packages/core/src/components/codeRun/index.tsx +++ b/packages/core/src/components/codeRun/index.tsx @@ -1,135 +1,91 @@ -import React from 'react'; -import JsonView from 'react-json-view'; -import { Tabs, Form, Input, Button, Space } from 'antd'; -const { TabPane } = Tabs; -import CodeEditor from '../codeEditor'; -import Console from '../console'; -import { inputJson, outputJson } from './json' +import React, { + useState, + useCallback, +} from 'react'; + import styles from './index.module.less'; -import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; -interface MyFormItemProps { - type: string -} -const MyFormItem: React.FC = (props) => { - return ( - <> -

{props.type}

- - {(fields, { add, remove }) => ( - <> - {fields.map(field => ( - - - - - - - - remove(field.name)} /> - - ))} - - - - - )} - - - ) -} +import Console from '../console'; +import InputPanel from './inputPanel'; +import JsonView from 'react-json-view'; + +// FIXME: https://github.com/tomkp/react-split-pane/issues/541 +// @ts-ignore +import SplitPane from 'react-split-pane/lib/SplitPane'; +// @ts-ignore +import Pane from 'react-split-pane/lib/Pane'; -interface VisualInputProps { - onChange: (value: object) => void +const defaultInput = { + pipe: {}, + context: {}, + payload: {}, + config: {} +}; + +interface ICardProps { + title: string; } -const VisualInput: React.FC = (props) => { - const [form] = Form.useForm() - const PAYLOAD = 'payload', PIPE = 'pipe', CONTEXT = 'context', CONFIG = 'config' - const onChange = () => { - props.onChange(form.getFieldsValue()) - } +const Card: React.FC = (props) => { + const {title} = props; return ( -
-
- - - - - +
+
{title}
+
+ {props.children} +
- ) -} -interface CodeRunProps { - onChange: (value: object) => void + ); +}; + +interface ICodeRunProps { } -const CodeRun: React.FC = (props) => { - const onFormChange = (value: any) => { - props.onChange(value) - } - const onJsonChange = (ev: any, newCode: any): void => { - const codeStr = newCode.slice(15) - const formatCodeStr = codeStr.replace(/ |\/\/.*/g, '').replace(/\s/g, '').replace(/(\w+):/g, '"$1":').replace(/'/g, '"') - try { - props.onChange(JSON.parse(formatCodeStr)) - } catch (err) { - props.onChange({}) - } - }; +const CodeRun: React.FC = (props) => { + + const [input, setInput] = useState(defaultInput); + const [output, setOutput] = useState({}); + + const onChangeInput = useCallback((val: any) => { + setInput(val); + }, []); return (
-
- - - - - - - - -
- -
-
-

输出

- -
-
- -
-
+ + + + + + + + + + + + + + + + + + + + +
- - ) + ); } export default CodeRun; diff --git a/packages/core/src/components/codeRun/inputPanel/index.module.less b/packages/core/src/components/codeRun/inputPanel/index.module.less new file mode 100644 index 0000000..7ef4a1e --- /dev/null +++ b/packages/core/src/components/codeRun/inputPanel/index.module.less @@ -0,0 +1,24 @@ +.itemHeader { + margin-bottom: 8px; + + .itemTitleText { + font-size: 15px; + font-weight: 500; + } + + .itemDescText { + margin-left: 5px; + font-size: 12px; + color: #999; + } +} + +:global { + .ant-tabs-nav { + margin-bottom: 5px !important; + } + + .ant-form-item { + margin-bottom: 8px; + } +} diff --git a/packages/core/src/components/codeRun/inputPanel/index.tsx b/packages/core/src/components/codeRun/inputPanel/index.tsx new file mode 100644 index 0000000..3aa47cd --- /dev/null +++ b/packages/core/src/components/codeRun/inputPanel/index.tsx @@ -0,0 +1,166 @@ +import React, { + useRef, + useEffect, +} from 'react'; + +import styles from './index.module.less'; + +import CodeEditor from '../../codeEditor'; +import { Tabs, Form, Input, Button, Space } from 'antd'; +import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; + +const inputItems = [ + { type: 'pipe', desc: '上一节点返回值' }, + { type: 'context', desc: '当前逻辑流程公用数据' }, + { type: 'payload', desc: '当前逻辑流程通用数据' }, + { type: 'config', desc: '当前节点投放配置' }, +]; + +interface IVisualFormItemProps { + type: string; + desc: string; +} + +const VisualFormItem: React.FC = (props) => { + const { type, desc } = props; + + return ( + +
+ {type} + {desc} +
+ + {(fields, { add, remove }) => ( + + {fields.map(field => ( + + + + + + + + remove(field.name)} /> + + ))} + + + + + )} + +
+ ); +}; + +interface IVisualPanelProps { + data: any; + onChange: (value: object) => void +} + +const VisualPanel: React.FC = (props) => { + const { data, onChange } = props; + const [form] = Form.useForm(); + + useEffect(() => { + const filedsValue: { [key: string]: any } = {}; + for (const { type } of inputItems) { + const mockValue = data[type] || {}; + filedsValue[type] = Object.keys(mockValue).map(key => ({ key, value: mockValue[key] })); + } + form.setFieldsValue(filedsValue); + }, [data]); + + const onFormChange = () => { + const input: { [key: string]: any } = {}; + const filedsValue = form.getFieldsValue(); + for (const { type } of inputItems) { + const mockValue = filedsValue[type] || []; + input[type] = mockValue.reduce((prev: any, cur: { key: string, value: any }) => { + const { key, value } = cur; + prev[key] = value; + return prev; + }, {}); + } + onChange(input); + }; + + return ( +
+
+ {inputItems.map(({ type, desc }, index) => ( + + ))} + +
+ ); +}; + +interface IInputPanelProps { + data: any; + onChange: (data: any) => void; +} + +const InputPanel: React.FC = (props) => { + const cache: any = useRef({}); + const { data, onChange } = props; + + const onVisualChange = (newForm: any) => { + clearTimeout(cache.current.timer); + cache.current.timer = setTimeout(() => onChange(newForm), 1000); + }; + const onEditorChange = (ev: any, newCode: string | undefined = '') => { + clearTimeout(cache.current.timer); + cache.current.timer = setTimeout(() => { + try { + onChange(JSON.parse(newCode)); + } catch (err) { + console.log(err); + } + }, 1000); + }; + + return ( + + + + + + + + + ); +}; + +export default InputPanel; diff --git a/packages/core/src/components/codeRun/json.ts b/packages/core/src/components/codeRun/json.ts deleted file mode 100644 index 4d576b3..0000000 --- a/packages/core/src/components/codeRun/json.ts +++ /dev/null @@ -1,39 +0,0 @@ -const inputJson = `export default { - // 上游数据 - pipe: { - success: false, - message: '未登录' - }, - // 公用数据 - context: { - data: { - isLogin: false - } - }, - // 传入载荷 - payload: { - name:'xxx' - }, - // 节点配置项 - config: { - hasLog: true - } -}`; - -const outputJson = { - pipe: { - success: false, - message: '未登录' - }, - context: { - data: { - isLogin: false, - name: 'xxx' - } - } -} - -export { - inputJson, - outputJson -} diff --git a/packages/core/src/components/console/index.tsx b/packages/core/src/components/console/index.tsx index 3de2243..4741483 100644 --- a/packages/core/src/components/console/index.tsx +++ b/packages/core/src/components/console/index.tsx @@ -69,7 +69,7 @@ const MyConsole: React.FC = () => { } return ( -
+
{renderLogList(logList)}
) diff --git a/packages/core/src/mods/settingBar/components/code/index.module.less b/packages/core/src/mods/settingBar/components/code/index.module.less index 08e822e..2e8b887 100644 --- a/packages/core/src/mods/settingBar/components/code/index.module.less +++ b/packages/core/src/mods/settingBar/components/code/index.module.less @@ -1,5 +1,4 @@ .container { - margin-top: 20px; .titleText { @@ -13,7 +12,6 @@ } .editModal { - :global { .ant-modal-body { padding: 0; diff --git a/packages/core/src/mods/settingBar/components/code/index.tsx b/packages/core/src/mods/settingBar/components/code/index.tsx index 4685604..4884ac9 100644 --- a/packages/core/src/mods/settingBar/components/code/index.tsx +++ b/packages/core/src/mods/settingBar/components/code/index.tsx @@ -125,11 +125,6 @@ const EditModal: React.FC = (props) => { setEditorInst(editor); }; - const onChange = (value: any) => { - // 运行节点代码时传入的json,包括payload、pipe、context、config - // console.log({ value }) - } - return ( = (props) => { /> - + ); diff --git a/packages/core/src/mods/settingBar/mods/testCase/index.tsx b/packages/core/src/mods/settingBar/mods/testCase/index.tsx index 30f6ac8..480f2a5 100644 --- a/packages/core/src/mods/settingBar/mods/testCase/index.tsx +++ b/packages/core/src/mods/settingBar/mods/testCase/index.tsx @@ -59,9 +59,9 @@ const EditModal: React.FC = (props): JSX.Element => { return ( = (props): JSX.Element => { onOk={onOk} onCancel={onCancel} > - + ); };