Browse Source

feat: interface interaction optimization

master
yangpei 4 years ago
parent
commit
e46c09e87e
  1. 93
      example/mock/db.json
  2. 50
      packages/core/src/components/codeRun/index.tsx
  3. 24
      packages/core/src/mods/settingBar/components/json/index.tsx
  4. 1
      packages/core/src/mods/settingBar/mods/basic/index.tsx
  5. 10
      packages/core/src/typings.d.ts

93
example/mock/db.json

@ -2,7 +2,7 @@
"default": [ "default": [
{ {
"position": { "position": {
"x": 450, "x": 460,
"y": 50 "y": 50
}, },
"size": { "size": {
@ -443,6 +443,97 @@
} }
} }
] ]
},
{
"position": {
"x": 56,
"y": 370
},
"size": {
"width": 80,
"height": 80
},
"shape": "imove-start",
"data": {
"label": "开始",
"configSchema": "{\n \n}",
"configData": {},
"trigger": "start",
"dependencies": "{\n \n}",
"code": "export default async function(ctx) {\n \n}"
},
"ports": {
"groups": {
"top": {
"position": "top",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
}
},
"right": {
"position": "right",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
}
},
"bottom": {
"position": "bottom",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
}
},
"left": {
"position": "left",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
}
}
},
"items": [
{
"id": "top",
"group": "top"
},
{
"id": "right",
"group": "right"
},
{
"id": "bottom",
"group": "bottom"
},
{
"id": "left",
"group": "left"
}
]
},
"id": "170e1bef-3acf-4172-8a03-cd9fd6e6fc81",
"zIndex": 8
} }
] ]
} }

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

@ -1,4 +1,4 @@
import React, { useEffect } from 'react'; import React, { useEffect, useRef } from 'react';
import Generator from 'fr-generator'; import Generator from 'fr-generator';
import JsonView from 'react-json-view'; import JsonView from 'react-json-view';
import { Terminal } from 'xterm'; import { Terminal } from 'xterm';
@ -8,25 +8,37 @@ 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';
const VisualTab: React.FC = () => { interface IVisualrops {
onChange: (value: object) => void
}
interface FormValue {
children: object[],
parent: string,
schema: object
}
const VisualTab: React.FC<IVisualrops> = (props) => {
const onChange = (value: FormValue) => {
props.onChange(value.schema)
}
return ( return (
<div> <Generator
<Generator settings={[{
settings={[ title: '表单组件库',
{ widgets: compData,
title: '表单组件库', }]}
widgets: compData, onChange={onChange}
}, />
]}
/>
</div>
) )
} }
const JsonTab: React.FC = () => { const JsonTab: React.FC = () => {
const termRef = useRef(null);
useEffect(() => { useEffect(() => {
let term = new Terminal(); const term = new Terminal();
term.open(document.getElementById('terminal')); term.open(termRef.current);
term.write('I\'m \x1B[1;3;31mterminal\x1B[0m $ ') term.write('I\'m \x1B[1;3;31mterminal\x1B[0m $ ')
}, []) }, [])
@ -51,16 +63,14 @@ const JsonTab: React.FC = () => {
src={formatJson} src={formatJson}
/> />
</div> </div>
<div className={styles.rightBottom}> <div className={styles.rightBottom} ref={termRef}></div>
<div id="terminal"></div>
</div>
</div> </div>
</div> </div>
); );
} }
interface IConfigProps { interface IConfigProps {
onChange?: (ev: any, newJson: string | undefined) => void onChange: (value: object) => void
} }
const ConfigTab: React.FC<IConfigProps> = (props) => { const ConfigTab: React.FC<IConfigProps> = (props) => {
@ -93,7 +103,7 @@ const ConfigTab: React.FC<IConfigProps> = (props) => {
interface ICodeRunProps { interface ICodeRunProps {
isConfig?: boolean, isConfig?: boolean,
onChange?: (ev: any, newJson: string | undefined) => void onChange: (value: object) => void
} }
const CodeRun: React.FC<ICodeRunProps> = (props) => { const CodeRun: React.FC<ICodeRunProps> = (props) => {
@ -105,7 +115,7 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => {
tabBarStyle={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }} tabBarStyle={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }}
> >
<TabPane className={styles.tabPane} tab={'可视化'} key={'VisualTab'}> <TabPane className={styles.tabPane} tab={'可视化'} key={'VisualTab'}>
<VisualTab /> <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 />}

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

@ -8,12 +8,14 @@ import styles from './index.module.less';
import JsonView from 'react-json-view'; import JsonView from 'react-json-view';
import { Button, Modal, message } from 'antd'; import { Button, Modal, message } from 'antd';
import { safeParse } from '../../../../utils'; import { safeParse } from '../../../../utils';
import CodeEditor from '../../../../components/codeEditor';
import CodeRun from '../../../../components/codeRun'; import CodeRun from '../../../../components/codeRun';
interface IJsonProps { interface IJsonProps {
value: any; value: any;
name: string; name: string;
title: string; title: string;
onlyInput?: boolean;
onValueChange: (value: string) => void; onValueChange: (value: string) => void;
} }
@ -51,6 +53,7 @@ const Json: React.FC<IJsonProps> = (props) => {
title={title} title={title}
value={value} value={value}
visible={visible} visible={visible}
onlyInput={props.onlyInput}
onOk={onClickOk} onOk={onClickOk}
onCancel={onClickCancel} onCancel={onClickCancel}
/> />
@ -62,6 +65,7 @@ interface IEditorModalProps {
visible: boolean; visible: boolean;
title: string; title: string;
value: string; value: string;
onlyInput?: boolean;
onOk: (val: string) => void; onOk: (val: string) => void;
onCancel: () => void; onCancel: () => void;
} }
@ -92,6 +96,8 @@ 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识别
console.log({ newJson })
if (newJson !== json) { if (newJson !== json) {
setJson(newJson); setJson(newJson);
} }
@ -100,7 +106,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
return ( return (
<Modal <Modal
className={styles.editModal} className={styles.editModal}
width={1200} width={props.onlyInput ? 800 : 1200}
title={title} title={title}
okText={'保存'} okText={'保存'}
visible={visible} visible={visible}
@ -108,13 +114,15 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onClickOk} onOk={onClickOk}
onCancel={onCancel} onCancel={onCancel}
> >
<CodeRun isConfig={true} onChange={onChangeJson} /> {props.onlyInput ?
{/* <CodeEditor <CodeEditor
value={json} value={json}
width={'100%'} width={'100%'}
height={'600px'} height={'600px'}
onChange={onChangeJson} onChange={onChangeJson}
/> */} /> :
<CodeRun isConfig={true} onChange={onChangeJson} />
}
</Modal> </Modal>
); );
}; };

1
packages/core/src/mods/settingBar/mods/basic/index.tsx

@ -75,6 +75,7 @@ const Basic: React.FC<IProps> = (props) => {
name={'dependencies'} name={'dependencies'}
title={'依赖'} title={'依赖'}
value={dependencies} value={dependencies}
onlyInput={true}
onValueChange={onChangeDependencies} onValueChange={onChangeDependencies}
/> />
</div> </div>

10
packages/core/src/typings.d.ts

@ -7,3 +7,13 @@ declare module '*.less' {
const classes: { [key: string]: string }; const classes: { [key: string]: string };
export default classes; export default classes;
} }
declare module 'fr-generator' {
import React from 'react';
export interface FRProps {
settings?: object
}
class FormRender extends React.Component<FRProps> { }
export default FRGenerator;
}

Loading…
Cancel
Save