|
@ -8,21 +8,23 @@ import CodeEditor from '../codeEditor'; |
|
|
import { defaultJson, formatJson, defaultConfig, formatConfig, compData } from './json' |
|
|
import { defaultJson, formatJson, defaultConfig, formatConfig, compData } from './json' |
|
|
import styles from './index.module.less'; |
|
|
import styles from './index.module.less'; |
|
|
|
|
|
|
|
|
interface IVisualrops { |
|
|
interface IProps { |
|
|
onChange: (value: object) => void |
|
|
onChange: (value: object) => void |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
interface FormValue { |
|
|
interface FormValue { |
|
|
children: object[], |
|
|
children: object[], |
|
|
parent: string, |
|
|
parent: string, |
|
|
schema: object |
|
|
schema: object |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const VisualTab: React.FC<IVisualrops> = (props) => { |
|
|
// 可视化操作面板
|
|
|
|
|
|
const VisualTab: React.FC<IProps> = (props) => { |
|
|
const onChange = (value: FormValue) => { |
|
|
const onChange = (value: FormValue) => { |
|
|
props.onChange(value.schema) |
|
|
props.onChange(value.schema) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
|
|
|
<div className={styles.form}> |
|
|
<Generator |
|
|
<Generator |
|
|
settings={[{ |
|
|
settings={[{ |
|
|
title: '表单组件库', |
|
|
title: '表单组件库', |
|
@ -30,16 +32,18 @@ const VisualTab: React.FC<IVisualrops> = (props) => { |
|
|
}]} |
|
|
}]} |
|
|
onChange={onChange} |
|
|
onChange={onChange} |
|
|
/> |
|
|
/> |
|
|
|
|
|
</div> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const JsonTab: React.FC = () => { |
|
|
// 输入测试用例面板,包括pipe、config、context、payload
|
|
|
const termRef = useRef(null); |
|
|
const JsonTab: React.FC<IProps> = () => { |
|
|
|
|
|
const termRef = useRef(document.createElement('div')); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
const term = new Terminal(); |
|
|
const term = new Terminal(); |
|
|
term.open(termRef.current); |
|
|
term.open(termRef.current as HTMLDivElement); |
|
|
term.write('I\'m \x1B[1;3;31mterminal\x1B[0m $ ') |
|
|
term.write('I\'m \x1B[1;3;31mterminal\x1B[0m $ '); |
|
|
}, []) |
|
|
}, []) |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
@ -53,7 +57,7 @@ const JsonTab: React.FC = () => { |
|
|
</div> |
|
|
</div> |
|
|
<div className={styles.right}> |
|
|
<div className={styles.right}> |
|
|
<div className={styles.rightTop}> |
|
|
<div className={styles.rightTop}> |
|
|
<p>输入格式化:</p> |
|
|
<p>输出:</p> |
|
|
<JsonView |
|
|
<JsonView |
|
|
name={null} |
|
|
name={null} |
|
|
collapsed={false} |
|
|
collapsed={false} |
|
@ -69,11 +73,8 @@ const JsonTab: React.FC = () => { |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
interface IConfigProps { |
|
|
// 输入投放配置config的操作面板,如”投放配置schema“
|
|
|
onChange: (value: object) => void |
|
|
const ConfigTab: React.FC<IProps> = (props) => { |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const ConfigTab: React.FC<IConfigProps> = (props) => { |
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<div className={styles.configInput}> |
|
|
<div className={styles.configInput}> |
|
|
<div className={styles.left}> |
|
|
<div className={styles.left}> |
|
@ -118,7 +119,7 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => { |
|
|
<VisualTab onChange={props.onChange} /> |
|
|
<VisualTab onChange={props.onChange} /> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
<TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}> |
|
|
<TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}> |
|
|
{props.isConfig ? <ConfigTab onChange={props.onChange} /> : <JsonTab />} |
|
|
{props.isConfig ? <ConfigTab onChange={props.onChange} /> : <JsonTab onChange={props.onChange} />} |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
</Tabs> |
|
|
</Tabs> |
|
|
) |
|
|
) |
|
|