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{
margin:0 20px;
.form{
height:600px;
overflow-y: auto;
}
.jsonInput {
display: flex;
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 styles from './index.module.less';
interface IVisualrops {
interface IProps {
onChange: (value: object) => void
}
interface FormValue {
children: object[],
parent: string,
schema: object
}
const VisualTab: React.FC<IVisualrops> = (props) => {
// 可视化操作面板
const VisualTab: React.FC<IProps> = (props) => {
const onChange = (value: FormValue) => {
props.onChange(value.schema)
}
return (
<div className={styles.form}>
<Generator
settings={[{
title: '表单组件库',
@ -30,16 +32,18 @@ const VisualTab: React.FC<IVisualrops> = (props) => {
}]}
onChange={onChange}
/>
</div>
)
}
const JsonTab: React.FC = () => {
const termRef = useRef(null);
// 输入测试用例面板,包括pipe、config、context、payload
const JsonTab: React.FC<IProps> = () => {
const termRef = useRef(document.createElement('div'));
useEffect(() => {
const term = new Terminal();
term.open(termRef.current);
term.write('I\'m \x1B[1;3;31mterminal\x1B[0m $ ')
term.open(termRef.current as HTMLDivElement);
term.write('I\'m \x1B[1;3;31mterminal\x1B[0m $ ');
}, [])
return (
@ -53,7 +57,7 @@ const JsonTab: React.FC = () => {
</div>
<div className={styles.right}>
<div className={styles.rightTop}>
<p></p>
<p></p>
<JsonView
name={null}
collapsed={false}
@ -69,11 +73,8 @@ const JsonTab: React.FC = () => {
);
}
interface IConfigProps {
onChange: (value: object) => void
}
const ConfigTab: React.FC<IConfigProps> = (props) => {
// 输入投放配置config的操作面板,如”投放配置schema“
const ConfigTab: React.FC<IProps> = (props) => {
return (
<div className={styles.configInput}>
<div className={styles.left}>
@ -118,7 +119,7 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => {
<VisualTab onChange={props.onChange} />
</TabPane>
<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>
</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 (
<Modal
className={styles.editModal}
@ -139,7 +143,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
/>
<Modal
className={styles.runModal}
width={1200}
width={1400}
title="执行代码"
okText={'运行'}
visible={codeRunVisible}
@ -147,7 +151,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onRunOk}
onCancel={onRunCancel}
>
<CodeRun />
<CodeRun onChange={onChange} />
</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 => {
// TODO 投放配置schema转化、普通json识别
console.log({ newJson })
if (newJson !== json) {
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 { visible, onOk, onCancel } = props;
const onChange = (value: any) => {
// console.log({ value })
}
return (
<Modal
width={1400}
@ -57,7 +62,7 @@ const EditModal: React.FC<IEditModalProps> = (props): JSX.Element => {
onOk={onOk}
onCancel={onCancel}
>
<CodeRun />
<CodeRun onChange={onChange} />
</Modal>
);
};

Loading…
Cancel
Save