Browse Source

joint test of console panel succeed

master
yangpei 4 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{
height:50%;
height:300px;
flex:1;
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 {
onChange: (value: object) => void,
hasConsole: boolean
onChange: (value: object) => void
}
const CodeRun: React.FC<CodeRunProps> = (props) => {
@ -125,10 +124,7 @@ const CodeRun: React.FC<CodeRunProps> = (props) => {
/>
</div>
<div className={styles.rightBottom}>
{props.hasConsole ?
<Console /> :
<p className={styles.placeholder}>console内容哦</p>
}
<Console />
</div>
</div>
</div>

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

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

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

@ -1,11 +1,47 @@
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 = [
{
"text": '简单输入框',
@ -515,6 +551,5 @@ const compData = [
export {
defaultConfig,
formatConfig,
compData
}

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

@ -1,32 +1,22 @@
import React, { useEffect } from 'react'
import Log from './log'
import logStore, { ConsoleType } from './store'
import React, { useState, useEffect } from 'react'
interface ConsoleType {
logType: string
infos: any[]
}
const MyConsole: React.FC = () => {
const console: any = {}
const [logList, setLogList] = useState<ConsoleType[]>([])
useEffect(() => {
executeConsole()
}, [])
const processLog = (item: ConsoleType) => {
const { logType } = item
let { infos = [] } = item
if (!infos.length) return
infos = [].slice.call(infos || [])
logStore.addLog({ logType, infos })
printOriginLog(item)
const addLog = (log: ConsoleType) => {
setLogList([...logList, log])
}
const clearLog = () => {
logStore.clearLog()
}
const printOriginLog = (item: ConsoleType) => {
const { logType, infos } = item
if (typeof console[logType] === 'function') {
console[logType].apply(window.console, infos)
}
setLogList([])
}
const executeConsole = () => {
@ -34,32 +24,53 @@ const MyConsole: React.FC = () => {
return
}
// 模拟浏览器中的console方法
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
window.console[method] = (...args: any[]) => {
processLog({
addLog({
logType: method,
infos: args
})
}
})
window.console.clear = (...args: any[]) => {
window.console.clear = () => {
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 (
<div style={{ height: '100%' }}>
<Log logList={logStore.computeLogList} />
<div style={{ height: '100%', background: '#000', padding: 10 }}>
<div style={{ height: '100%', overflow: 'auto' }}>{renderLogList(logList)}</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 => {
setCodeRunVisible(false)
// setCodeRunVisible(false)
}
const onRunCancel = (): void => {
setCodeRunVisible(false)
@ -158,7 +158,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onRunOk}
onCancel={onRunCancel}
>
<CodeRun onChange={onChange} hasConsole={false} />
<CodeRun onChange={onChange} />
</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}
centered={true}
bodyStyle={{ height: 700, overflowY: 'auto' }}
title={'行代码'}
title={'行代码'}
visible={visible}
okText={'运行'}
cancelText={'取消'}
onOk={onOk}
onCancel={onCancel}
>
<CodeRun onChange={onChange} hasConsole={false} />
<CodeRun onChange={onChange} />
</Modal>
);
};

Loading…
Cancel
Save