| 
						
						
						
					 | 
					@ -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 />} | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
					
  |