Browse Source

fix: Console component show error

master
smallstonesk 4 years ago
parent
commit
a4fee9b6bd
  1. 7
      packages/core/src/components/console/index.module.less
  2. 130
      packages/core/src/components/console/index.tsx

7
packages/core/src/components/console/index.module.less

@ -0,0 +1,7 @@
.container {
width: 100%;
height: 100%;
padding: 10px;
background: #272823;
overflow: scroll;
}

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

@ -1,78 +1,98 @@
import React, { useState, useEffect } from 'react'
interface ConsoleType {
logType: string
infos: any[]
import React, {
useState,
useEffect
} from 'react';
import styles from './index.module.less';
interface ILog {
type: string;
data: any[];
}
const isPlainObject = (value: any): boolean => {
return typeof value === 'object' && value !== null;
}
const hijackMap: {[key: string]: any} = {
log: {
color: '#ffffff',
originMethod: console.log
},
info: {
color: '#76cd75',
originMethod: console.info
},
warn: {
color: '#faad14',
originMethod: console.warn
},
debug: {
color: '#1890ff',
originMethod: console.debug
},
error: {
color: '#ff4d4f',
originMethod: console.error
}
}
const MyConsole: React.FC = () => {
const [logList, setLogList] = useState<ConsoleType[]>([])
const [logList, setLogList] = useState<ILog[]>([]);
useEffect(() => {
executeConsole()
}, [])
hijackConsole();
return () => {
resetConsole();
};
}, [logList]);
const addLog = (log: ConsoleType) => {
setLogList([...logList, log])
const addLog = (log: ILog) => {
setLogList([...logList, log]);
}
const clearLog = () => {
setLogList([])
setLogList([]);
}
const executeConsole = () => {
if (!window.console) {
return
}
const methodList = ['log', 'info', 'warn', 'debug', 'error']
// 拦截浏览器中的console方法并重写
methodList.forEach(method => {
const hijackConsole = () => {
Object.keys(hijackMap).forEach(method => {
// @ts-ignore
window.console[method] = (...args: any[]) => {
addLog({
logType: method,
infos: args
})
}
})
window.console.clear = () => {
clearLog()
}
addLog({ type: method, data: args });
hijackMap[method].originMethod(...args);
};
});
}
const resetConsole = () => {
Object.keys(hijackMap).forEach(method => {
// @ts-ignore
window.console[method] = hijackMap[method].originMethod;
});
};
// 根据不同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
})
const renderLogList = (logList: ILog[]) => {
return logList.map((log: ILog, index: number) => {
const {color} = hijackMap[log.type];
const showText = log.data.map(o => {
return isPlainObject(o) ? JSON.stringify(log.data, null, 2) : o;
}).join(' ');
// TODO: use react-json-view to render object
return (
<p key={index} style={{color}}>
{showText}
</p>
);
});
}
return (
<div style={{ height: '100%', background: 'rgb(39,40,35)', padding: 10 }}>
<div style={{ height: '100%', overflow: 'auto' }}>{renderLogList(logList)}</div>
<div className={styles.container}>
{renderLogList(logList)}
</div>
)
);
}
export default MyConsole

Loading…
Cancel
Save