Browse Source

joint test of console panel succeed

master
yangpei 5 years ago
parent
commit
c39e1ca57e
  1. 9
      packages/core/src/components/codeRun/index.module.less
  2. 8
      packages/core/src/components/codeRun/index.tsx
  3. 37
      packages/core/src/components/configSchema/index.module.less
  4. 31
      packages/core/src/components/configSchema/index.tsx
  5. 47
      packages/core/src/components/configSchema/json.ts
  6. 71
      packages/core/src/components/console/index.tsx
  7. 59
      packages/core/src/components/console/log/index.tsx
  8. 35
      packages/core/src/components/console/store/index.ts
  9. 4
      packages/core/src/mods/settingBar/components/code/index.tsx
  10. 4
      packages/core/src/mods/settingBar/mods/testCase/index.tsx

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

@ -36,16 +36,9 @@
} }
.rightBottom{ .rightBottom{
height:50%; height:300px;
flex:1; flex:1;
border:1px solid #eee; border:1px solid #eee;
.placeholder{
text-align: center;
color:#bfbfbf;
font-size:18px;
line-height: 300px;
}
} }
} }
} }

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

@ -72,8 +72,7 @@ const VisualInput: React.FC<VisualInputProps> = (props) => {
) )
} }
interface CodeRunProps { interface CodeRunProps {
onChange: (value: object) => void, onChange: (value: object) => void
hasConsole: boolean
} }
const CodeRun: React.FC<CodeRunProps> = (props) => { const CodeRun: React.FC<CodeRunProps> = (props) => {
@ -125,10 +124,7 @@ const CodeRun: React.FC<CodeRunProps> = (props) => {
/> />
</div> </div>
<div className={styles.rightBottom}> <div className={styles.rightBottom}>
{props.hasConsole ? <Console />
<Console /> :
<p className={styles.placeholder}>console内容哦</p>
}
</div> </div>
</div> </div>
</div> </div>

37
packages/core/src/components/configSchema/index.module.less

@ -5,43 +5,6 @@
height:600px; height:600px;
overflow-y: auto; overflow-y: auto;
} }
.jsonInput {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 600px;
.left{
padding:10px;
flex:300px;
border:1px solid #eee;
}
.right{
height:100%;
flex:1;
display: flex;
flex-direction: column;
justify-content: space-between;
.rightTop{
height:50%;
padding:10px;
flex:1;
border:1px solid #eee;
overflow-y: auto;
}
.rightBottom{
height:50%;
padding:10px;
flex:1;
border:1px solid #eee;
}
}
}
.configInput{ .configInput{
display: flex; display: flex;
flex-direction: row; flex-direction: row;

31
packages/core/src/components/configSchema/index.tsx

@ -1,16 +1,14 @@
import React from 'react'; import React, { useState } from 'react';
import Generator from 'fr-generator'; import Generator from 'fr-generator';
import JsonView from 'react-json-view';
import { Tabs } from 'antd'; import { Tabs } from 'antd';
const { TabPane } = Tabs; const { TabPane } = Tabs;
import CodeEditor from '../codeEditor'; import CodeEditor from '../codeEditor';
import { defaultConfig, formatConfig, compData } from './json' import { defaultConfig, compData } from './json'
import styles from './index.module.less'; import styles from './index.module.less';
// import FormRender from 'form-render/lib/antd';
interface IProps { interface IProps {
onChange: (value: object) => void onChange: (value: object) => void
} }
interface FormValue { interface FormValue {
children: object[], children: object[],
parent: string, parent: string,
@ -36,28 +34,25 @@ const VisualTab: React.FC<IProps> = (props) => {
} }
const ConfigTab: React.FC<IProps> = (props) => { const ConfigTab: React.FC<IProps> = (props) => {
const [jsonSchema, setJsonSchema] = useState(defaultConfig)
return ( return (
<div className={styles.configInput}> <div className={styles.configInput}>
<div className={styles.left}> <div className={styles.left}>
<p></p> <p></p>
<CodeEditor <CodeEditor
width={'100%'} width={'100%'}
value={defaultConfig} language={'json'}
value={jsonSchema}
onChange={props.onChange} onChange={props.onChange}
/> />
</div> </div>
<div className={styles.right}> <div className={styles.right}>
<div className={styles.rightTop}> <p></p>
<p></p> {/* <FormRender
<JsonView schema={schema}
name={null} onChange={onChange}
collapsed={false} /> */}
enableClipboard={false}
displayDataTypes={false}
displayObjectSize={false}
src={formatConfig}
/>
</div>
</div> </div>
</div> </div>
); );

47
packages/core/src/components/configSchema/json.ts

@ -1,11 +1,47 @@
const defaultConfig = `{ const defaultConfig = `{
"schema": {
"type": "object",
"properties": {
"AllString": {
"title": "string类",
"type": "object",
"properties": {
"input": {
"title": "输入框",
"type": "string",
"ui:options": {
"placeholder": "商品名称"
}
}
}
},
"allNumber": {
"title": "number类",
"type": "object",
"properties": {
"number": {
"title": "数字输入框",
"description": "1 - 1000",
"type": "number",
"min": 1,
"max": 1000
}
}
},
"allBoolean": {
"title": "boolean类",
"type": "object",
"properties": {
"radio": {
"title": "是否通过",
"type": "boolean"
}
}
}
}
}
}`; }`;
const formatConfig = {
}
const compData = [ const compData = [
{ {
"text": '简单输入框', "text": '简单输入框',
@ -515,6 +551,5 @@ const compData = [
export { export {
defaultConfig, defaultConfig,
formatConfig,
compData compData
} }

71
packages/core/src/components/console/index.tsx

@ -1,32 +1,22 @@
import React, { useEffect } from 'react' import React, { useState, useEffect } from 'react'
import Log from './log' interface ConsoleType {
import logStore, { ConsoleType } from './store' logType: string
infos: any[]
}
const MyConsole: React.FC = () => { const MyConsole: React.FC = () => {
const console: any = {} const [logList, setLogList] = useState<ConsoleType[]>([])
useEffect(() => { useEffect(() => {
executeConsole() executeConsole()
}, []) }, [])
const processLog = (item: ConsoleType) => { const addLog = (log: ConsoleType) => {
const { logType } = item setLogList([...logList, log])
let { infos = [] } = item
if (!infos.length) return
infos = [].slice.call(infos || [])
logStore.addLog({ logType, infos })
printOriginLog(item)
} }
const clearLog = () => { const clearLog = () => {
logStore.clearLog() setLogList([])
}
const printOriginLog = (item: ConsoleType) => {
const { logType, infos } = item
if (typeof console[logType] === 'function') {
console[logType].apply(window.console, infos)
}
} }
const executeConsole = () => { const executeConsole = () => {
@ -34,32 +24,53 @@ const MyConsole: React.FC = () => {
return return
} }
// 模拟浏览器中的console方法
const methodList = ['log', 'info', 'warn', 'debug', 'error'] const methodList = ['log', 'info', 'warn', 'debug', 'error']
methodList.map(method => {
// @ts-ignore
console[method] = window.console[method]
})
methodList.map(method => { // 拦截浏览器中的console方法并重写
methodList.forEach(method => {
// @ts-ignore // @ts-ignore
window.console[method] = (...args: any[]) => { window.console[method] = (...args: any[]) => {
processLog({ addLog({
logType: method, logType: method,
infos: args infos: args
}) })
} }
}) })
window.console.clear = (...args: any[]) => { window.console.clear = () => {
clearLog() clearLog()
console.clear.apply(window.console, args)
} }
} }
// 根据不同console类型展示不同的样式
const renderLogList = (logList: ConsoleType[]) => {
return logList.map((log: ConsoleType, index: number) => {
const renderItem = (color: string) => <p key={index} style={{ color: color }}>{log.infos}</p>
let wrap = null
switch (log.logType) {
case 'warn':
wrap = renderItem('#faad14')
break
case 'log':
wrap = renderItem('#ffffff')
break
case 'error':
wrap = renderItem('#ff4d4f')
break
case 'info':
wrap = renderItem('#76cd75')
break
case 'debug':
wrap = renderItem('#1890ff')
break
}
return wrap
})
}
return ( return (
<div style={{ height: '100%' }}> <div style={{ height: '100%', background: '#000', padding: 10 }}>
<Log logList={logStore.computeLogList} /> <div style={{ height: '100%', overflow: 'auto' }}>{renderLogList(logList)}</div>
</div> </div>
) )
} }

59
packages/core/src/components/console/log/index.tsx

@ -1,59 +0,0 @@
import React from 'react'
import DataView from '../logView'
import { ConsoleType } from '../store'
interface Props {
logList: ConsoleType[]
}
const Log: React.FC<Props> = (props) => {
const renderLogList = (logList: ConsoleType[]) => {
return logList.map((log: ConsoleType, index: number) => {
const dataView = log.infos.map((info: any, i: number) => {
return typeof info !== 'object' || info === null ?
<div key={i}>{`${info}`}</div> :
<DataView data={info} key={i} />
})
let ele = null
// 根据不同console类型展示不同的样式
switch (log.logType) {
case 'warn':
ele = <div
key={index}
style={{
background: '#fffacd',
color: 'orange',
border: '1px solid #ffb930'
}}
>
{dataView}
</div>
break
case 'log':
ele = <div key={index}>
{dataView}
</div>
break
case 'error':
ele = <div
key={index}
style={{
background: '#ffe4e1',
border: '1px solid #f4a0ab'
}}
>
<div style={{ color: '#dc143c' }}>{dataView}</div>
</div>
break
}
return ele
})
}
return (
<div style={{ height: '100%', overflow: 'auto' }}>{renderLogList(props.logList)}</div>
)
}
export default Log

35
packages/core/src/components/console/store/index.ts

@ -1,35 +0,0 @@
export interface ConsoleType {
logType: string
infos: any[]
}
export class ConsoleStore {
logList: ConsoleType[] = []
logType: string = 'All'
addLog(log: ConsoleType) {
this.logList.push(log)
}
clearLog() {
this.logList = []
}
get computeLogList() {
let ret: ConsoleType[] = []
if (this.logType === 'All') {
ret = this.logList
} else {
ret = this.logList.filter((item) => {
return item.logType === this.logType.toLowerCase()
})
}
return ret
}
changeLogType(type: string) {
this.logType = type
}
}
export default new ConsoleStore()

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

@ -111,7 +111,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
}; };
const onRunOk = (): void => { const onRunOk = (): void => {
setCodeRunVisible(false) // setCodeRunVisible(false)
} }
const onRunCancel = (): void => { const onRunCancel = (): void => {
setCodeRunVisible(false) setCodeRunVisible(false)
@ -158,7 +158,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onRunOk} onOk={onRunOk}
onCancel={onRunCancel} onCancel={onRunCancel}
> >
<CodeRun onChange={onChange} hasConsole={false} /> <CodeRun onChange={onChange} />
</Modal> </Modal>
</Modal> </Modal>
); );

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

@ -62,14 +62,14 @@ const EditModal: React.FC<IEditModalProps> = (props): JSX.Element => {
width={1400} width={1400}
centered={true} centered={true}
bodyStyle={{ height: 700, overflowY: 'auto' }} bodyStyle={{ height: 700, overflowY: 'auto' }}
title={'行代码'} title={'行代码'}
visible={visible} visible={visible}
okText={'运行'} okText={'运行'}
cancelText={'取消'} cancelText={'取消'}
onOk={onOk} onOk={onOk}
onCancel={onCancel} onCancel={onCancel}
> >
<CodeRun onChange={onChange} hasConsole={false} /> <CodeRun onChange={onChange} />
</Modal> </Modal>
); );
}; };

Loading…
Cancel
Save