Browse Source

fix: solve ts error and optimize experience

master
yangpei 4 years ago
parent
commit
91449963dc
  1. 5
      packages/core/src/components/codeRun/index.module.less
  2. 29
      packages/core/src/components/codeRun/index.tsx
  3. 8
      packages/core/src/mods/settingBar/components/code/index.tsx
  4. 1
      packages/core/src/mods/settingBar/components/json/index.tsx
  5. 7
      packages/core/src/mods/settingBar/mods/testCase/index.tsx

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

@ -1,6 +1,11 @@
.tabPane{ .tabPane{
margin:0 20px; margin:0 20px;
.form{
height:600px;
overflow-y: auto;
}
.jsonInput { .jsonInput {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

29
packages/core/src/components/codeRun/index.tsx

@ -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>
) )

8
packages/core/src/mods/settingBar/components/code/index.tsx

@ -119,6 +119,10 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
}); });
}; };
const onChange = (value: any) => {
// console.log({ value })
}
return ( return (
<Modal <Modal
className={styles.editModal} className={styles.editModal}
@ -139,7 +143,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
/> />
<Modal <Modal
className={styles.runModal} className={styles.runModal}
width={1200} width={1400}
title="执行代码" title="执行代码"
okText={'运行'} okText={'运行'}
visible={codeRunVisible} visible={codeRunVisible}
@ -147,7 +151,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onRunOk} onOk={onRunOk}
onCancel={onRunCancel} onCancel={onRunCancel}
> >
<CodeRun /> <CodeRun onChange={onChange} />
</Modal> </Modal>
</Modal> </Modal>
); );

1
packages/core/src/mods/settingBar/components/json/index.tsx

@ -97,7 +97,6 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
}; };
const onChangeJson = (ev: any, newJson: string | undefined = ''): void => { const onChangeJson = (ev: any, newJson: string | undefined = ''): void => {
// TODO 投放配置schema转化、普通json识别 // TODO 投放配置schema转化、普通json识别
console.log({ newJson })
if (newJson !== json) { if (newJson !== json) {
setJson(newJson); setJson(newJson);
} }

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

@ -45,6 +45,11 @@ interface IEditModalProps {
const EditModal: React.FC<IEditModalProps> = (props): JSX.Element => { const EditModal: React.FC<IEditModalProps> = (props): JSX.Element => {
const { visible, onOk, onCancel } = props; const { visible, onOk, onCancel } = props;
const onChange = (value: any) => {
// console.log({ value })
}
return ( return (
<Modal <Modal
width={1400} width={1400}
@ -57,7 +62,7 @@ const EditModal: React.FC<IEditModalProps> = (props): JSX.Element => {
onOk={onOk} onOk={onOk}
onCancel={onCancel} onCancel={onCancel}
> >
<CodeRun /> <CodeRun onChange={onChange} />
</Modal> </Modal>
); );
}; };

Loading…
Cancel
Save