From c39e1ca57ec6f1ebf62e70bc7be3e4e657883f32 Mon Sep 17 00:00:00 2001 From: yangpei <2517625275@qq.com> Date: Tue, 12 Jan 2021 00:43:24 +0800 Subject: [PATCH] joint test of console panel succeed --- .../src/components/codeRun/index.module.less | 9 +-- .../core/src/components/codeRun/index.tsx | 8 +-- .../components/configSchema/index.module.less | 37 ---------- .../src/components/configSchema/index.tsx | 31 ++++---- .../core/src/components/configSchema/json.ts | 47 ++++++++++-- .../core/src/components/console/index.tsx | 71 +++++++++++-------- .../core/src/components/console/log/index.tsx | 59 --------------- .../src/components/console/store/index.ts | 35 --------- .../mods/settingBar/components/code/index.tsx | 4 +- .../mods/settingBar/mods/testCase/index.tsx | 4 +- 10 files changed, 102 insertions(+), 203 deletions(-) delete mode 100644 packages/core/src/components/console/log/index.tsx delete mode 100644 packages/core/src/components/console/store/index.ts diff --git a/packages/core/src/components/codeRun/index.module.less b/packages/core/src/components/codeRun/index.module.less index c8af33f..e98861c 100644 --- a/packages/core/src/components/codeRun/index.module.less +++ b/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; - } } } } diff --git a/packages/core/src/components/codeRun/index.tsx b/packages/core/src/components/codeRun/index.tsx index bbb388d..b25f163 100644 --- a/packages/core/src/components/codeRun/index.tsx +++ b/packages/core/src/components/codeRun/index.tsx @@ -72,8 +72,7 @@ const VisualInput: React.FC = (props) => { ) } interface CodeRunProps { - onChange: (value: object) => void, - hasConsole: boolean + onChange: (value: object) => void } const CodeRun: React.FC = (props) => { @@ -125,10 +124,7 @@ const CodeRun: React.FC = (props) => { />
- {props.hasConsole ? - : -

目前没有任何console内容哦

- } +
diff --git a/packages/core/src/components/configSchema/index.module.less b/packages/core/src/components/configSchema/index.module.less index 76cb5db..5842fdd 100644 --- a/packages/core/src/components/configSchema/index.module.less +++ b/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; diff --git a/packages/core/src/components/configSchema/index.tsx b/packages/core/src/components/configSchema/index.tsx index 3e9a379..5bf68e1 100644 --- a/packages/core/src/components/configSchema/index.tsx +++ b/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 = (props) => { } const ConfigTab: React.FC = (props) => { + const [jsonSchema, setJsonSchema] = useState(defaultConfig) + return (
-

输入:

+

输入

-
-

输入格式化:

- -
+

表单可视化

+ {/* */}
); diff --git a/packages/core/src/components/configSchema/json.ts b/packages/core/src/components/configSchema/json.ts index 3dbc19d..4bbdc4a 100644 --- a/packages/core/src/components/configSchema/json.ts +++ b/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 } diff --git a/packages/core/src/components/console/index.tsx b/packages/core/src/components/console/index.tsx index 10a0042..3de2243 100644 --- a/packages/core/src/components/console/index.tsx +++ b/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([]) 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) =>

{log.infos}

+ 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 ( -
- +
+
{renderLogList(logList)}
) } diff --git a/packages/core/src/components/console/log/index.tsx b/packages/core/src/components/console/log/index.tsx deleted file mode 100644 index 6d449f6..0000000 --- a/packages/core/src/components/console/log/index.tsx +++ /dev/null @@ -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) => { - 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 ? -
{`${info}`}
: - - }) - let ele = null - - // 根据不同console类型展示不同的样式 - switch (log.logType) { - case 'warn': - ele =
- {dataView} -
- break - case 'log': - ele =
- {dataView} -
- break - case 'error': - ele =
-
{dataView}
-
- break - } - return ele - }) - } - - return ( -
{renderLogList(props.logList)}
- ) -} - -export default Log diff --git a/packages/core/src/components/console/store/index.ts b/packages/core/src/components/console/store/index.ts deleted file mode 100644 index 6be5f1b..0000000 --- a/packages/core/src/components/console/store/index.ts +++ /dev/null @@ -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() diff --git a/packages/core/src/mods/settingBar/components/code/index.tsx b/packages/core/src/mods/settingBar/components/code/index.tsx index ba225e2..4685604 100644 --- a/packages/core/src/mods/settingBar/components/code/index.tsx +++ b/packages/core/src/mods/settingBar/components/code/index.tsx @@ -111,7 +111,7 @@ const EditModal: React.FC = (props) => { }; const onRunOk = (): void => { - setCodeRunVisible(false) + // setCodeRunVisible(false) } const onRunCancel = (): void => { setCodeRunVisible(false) @@ -158,7 +158,7 @@ const EditModal: React.FC = (props) => { onOk={onRunOk} onCancel={onRunCancel} > - + ); diff --git a/packages/core/src/mods/settingBar/mods/testCase/index.tsx b/packages/core/src/mods/settingBar/mods/testCase/index.tsx index ed69f17..30f6ac8 100644 --- a/packages/core/src/mods/settingBar/mods/testCase/index.tsx +++ b/packages/core/src/mods/settingBar/mods/testCase/index.tsx @@ -62,14 +62,14 @@ const EditModal: React.FC = (props): JSX.Element => { width={1400} centered={true} bodyStyle={{ height: 700, overflowY: 'auto' }} - title={'运行代码'} + title={'执行代码'} visible={visible} okText={'运行'} cancelText={'取消'} onOk={onOk} onCancel={onCancel} > - + ); };