Browse Source

feat: update Console's UI

master
smallstonesk 4 years ago
parent
commit
4b8214e439
  1. 2
      packages/core/src/components/codeRun/index.tsx
  2. 2
      packages/core/src/components/codeRun/inputPanel/index.module.less
  3. 39
      packages/core/src/components/console/index.module.less
  4. 80
      packages/core/src/components/console/index.tsx

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

@ -110,9 +110,7 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => {
</SplitPane>
</Pane>
<Pane className={styles.pane} minSize={'43px'}>
<Card title={'控制台'}>
<Console />
</Card>
</Pane>
</SplitPane>
</div>

2
packages/core/src/components/codeRun/inputPanel/index.module.less

@ -15,7 +15,7 @@
:global {
.ant-tabs-nav {
margin-bottom: 5px !important;
margin-bottom: 5px;
}
.ant-form-item {

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

@ -1,7 +1,42 @@
.container {
width: 100%;
height: 100%;
padding: 10px;
background: #272823;
overflow: scroll;
:global {
.ant-tabs-nav {
margin-bottom: 0;
}
}
.logPanel {
height: 100%;
background: #272823;
.logLine {
display: flex;
flex-direction: row;
position: relative;
margin-top: -1px;
padding-left: 10px;
font-size: 13px;
border: 1px solid transparent;
&:first-child {
margin-top: 0;
}
.logIcon {
padding-top: 0.6rem;
width: 1rem;
height: 1rem;
}
.logText {
margin-left: 8px;
min-height: 18px;
padding: 0.4rem 1.5rem 0.4rem 0px;
}
}
}
}

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

@ -5,6 +5,14 @@ import React, {
import styles from './index.module.less';
import {
InfoCircleOutlined,
WarningOutlined,
BugOutlined,
CloseCircleOutlined
} from '@ant-design/icons';
import { Tabs } from 'antd';
interface ILog {
type: string;
data: any[];
@ -14,25 +22,40 @@ const isPlainObject = (value: any): boolean => {
return typeof value === 'object' && value !== null;
}
const hijackMap: {[key: string]: any} = {
const hijackMap: { [key: string]: any } = {
log: {
color: '#ffffff',
bgColor: '#272823',
textColor: '#ffffff',
borderColor: 'rgba(128, 128, 128, 0.35)',
icon: <div className={styles.logIcon} />,
originMethod: console.log
},
info: {
color: '#76cd75',
bgColor: '#272823',
textColor: '#ffffff',
borderColor: 'rgba(128, 128, 128, 0.35)',
icon: <InfoCircleOutlined className={styles.logIcon} />,
originMethod: console.info
},
warn: {
color: '#faad14',
bgColor: 'rgb(51, 42, 0)',
textColor: 'rgb(245, 211, 150)',
borderColor: 'rgb(102, 85, 0)',
icon: <WarningOutlined className={styles.logIcon} />,
originMethod: console.warn
},
debug: {
color: '#1890ff',
bgColor: '#272823',
textColor: 'rgb(77, 136, 255)',
borderColor: 'rgba(128, 128, 128, 0.35)',
icon: <BugOutlined className={styles.logIcon} />,
originMethod: console.debug
},
error: {
color: '#ff4d4f',
bgColor: 'rgb(40, 0, 0)',
textColor: 'rgb(254, 127, 127)',
borderColor: 'rgb(91, 0, 0)',
icon: <CloseCircleOutlined className={styles.logIcon} />,
originMethod: console.error
}
}
@ -47,20 +70,12 @@ const MyConsole: React.FC = () => {
};
}, [logList]);
const addLog = (log: ILog) => {
setLogList([...logList, log]);
}
const clearLog = () => {
setLogList([]);
}
const hijackConsole = () => {
Object.keys(hijackMap).forEach(method => {
// @ts-ignore
window.console[method] = (...args: any[]) => {
addLog({ type: method, data: args });
hijackMap[method].originMethod(...args);
setLogList([...logList, { type: method, data: args }]);
};
});
}
@ -73,26 +88,43 @@ const MyConsole: React.FC = () => {
};
// 根据不同console类型展示不同的样式
const renderLogList = (logList: ILog[]) => {
return logList.map((log: ILog, index: number) => {
const {color} = hijackMap[log.type];
const renderLogPanel = (logList: ILog[]) => {
return (
<div className={styles.logPanel}>
{logList.map((log: ILog, index: number) => {
const { icon, textColor, bgColor, borderColor } = hijackMap[log.type];
const logLineStyle = {
color: textColor,
backgroundColor: bgColor,
borderTopColor: borderColor,
borderBottomColor: borderColor
};
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}}>
<div key={index} className={styles.logLine} style={logLineStyle}>
{icon}
<div className={styles.logText}>
{showText}
</p>
</div>
</div>
);
})}
</div>
);
});
}
return (
<div className={styles.container}>
{renderLogList(logList)}
<Tabs type={'card'}>
<Tabs.TabPane tab={'控制台'} key={'log'}>
{renderLogPanel(logList)}
</Tabs.TabPane>
</Tabs>
</div>
);
}
};
export default MyConsole
export default MyConsole;

Loading…
Cancel
Save