diff --git a/packages/core/src/components/console/index.module.less b/packages/core/src/components/console/index.module.less index d225106..aece5d7 100644 --- a/packages/core/src/components/console/index.module.less +++ b/packages/core/src/components/console/index.module.less @@ -32,10 +32,18 @@ height: 1rem; } - .logText { + .logContent { margin-left: 8px; min-height: 18px; padding: 0.4rem 1.5rem 0.4rem 0px; + word-break: break-all; + + :global { + .react-json-view { + display: inline-block; + vertical-align: top; + } + } } } } diff --git a/packages/core/src/components/console/index.tsx b/packages/core/src/components/console/index.tsx index 006192e..ce470b9 100644 --- a/packages/core/src/components/console/index.tsx +++ b/packages/core/src/components/console/index.tsx @@ -16,6 +16,7 @@ import { ClearOutlined, FilterOutlined } from '@ant-design/icons'; +import JsonView from 'react-json-view'; import { Button, Input, Select, Tabs } from 'antd'; interface ILog { @@ -24,7 +25,15 @@ interface ILog { strVal: string; } +const linkRegex = /((?:www|https?:)+[^\s]+)/g; + const Helper = { + isLink(value: string) { + return linkRegex.test(value); + }, + extractLinks(value: string) { + return value.split(linkRegex); + }, isPlainObject(value: any): boolean { return typeof value === 'object' && value !== null; }, @@ -77,6 +86,81 @@ const hijackMap: { [key: string]: any } = { } } +const LogLine: React.FC = (props) => { + + const { type, data } = props; + + const renderLink = (data: string) => { + return {data} + }; + + const renderText = (data: any) => { + if(typeof data !== 'string') { + return data; + } else { + const arr = data.split(linkRegex); + return arr.map((str, index) => { + return ( + + {Helper.isLink(str) ? renderLink(str) : str} + + ); + }) + } + }; + + const renderJson = (data: Object) => { + return ( + + ); + }; + + const { + icon, + textColor, + bgColor, + borderColor + } = hijackMap[type]; + + const logLineStyle = { + color: textColor, + backgroundColor: bgColor, + borderTopColor: borderColor, + borderBottomColor: borderColor + }; + + return ( +
+ {icon} +
+ {data.map((item: any, index: number) => { + let content = null; + if (Helper.isPlainObject(item)) { + content = renderJson(item); + } else { + content = renderText(item); + } + const marginLeft = index === 0 ? 0 : 6; + return ( + + {content} + + ); + })} +
+
+ ); +}; + const MyConsole: React.FC = () => { const [filter, setFilter] = useState(''); const [level, setLevel] = useState('all'); @@ -166,24 +250,9 @@ const MyConsole: React.FC = () => { const renderLogPanel = (logList: ILog[]) => { return (
- {logList.map((log: ILog, index: number) => { - const { icon, textColor, bgColor, borderColor } = hijackMap[log.type]; - const logLineStyle = { - color: textColor, - backgroundColor: bgColor, - borderTopColor: borderColor, - borderBottomColor: borderColor - }; - // TODO: use react-json-view to render object - return ( -
- {icon} -
- {log.strVal} -
-
- ); - })} + {logList.map((log: ILog, index: number) => ( + + ))}
); };