diff --git a/package.json b/package.json index dc7e7293..c4ca9a33 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,7 @@ "react-dnd-html5-backend": "^14.0.0", "react-dom": "17.x", "react-split-pane": "^0.1.92", + "react-terminal-ui": "^0.1.14", "sockjs-client": "^1.5.2", "ts-node": "^9.0.0", "typescript": "^4.1.2", diff --git a/src/layouts/defaultProps.tsx b/src/layouts/defaultProps.tsx index cbf36142..93766082 100644 --- a/src/layouts/defaultProps.tsx +++ b/src/layouts/defaultProps.tsx @@ -25,6 +25,12 @@ export default { hideInMenu: true, component: '@/pages/initialization/index', }, + { + name: '错误', + path: '/error', + hideInMenu: true, + component: '@/pages/error/index', + }, { path: '/crontab', name: '定时任务', diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 6bd8c060..ce9cdf84 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -179,7 +179,9 @@ export default function (props: any) { }; }, []); - if (['/login', '/initialization'].includes(props.location.pathname)) { + if ( + ['/login', '/initialization', '/error'].includes(props.location.pathname) + ) { document.title = `${ (config.documentTitleMap as any)[props.location.pathname] } - 控制面板`; @@ -190,7 +192,7 @@ export default function (props: any) { history.push('/crontab'); } - if (systemInfo) { + if (systemInfo || props.location.pathname === '/error') { return React.Children.map(props.children, (child) => { return React.cloneElement(child, { ...ctx, diff --git a/src/pages/error/index.less b/src/pages/error/index.less new file mode 100644 index 00000000..828b87c5 --- /dev/null +++ b/src/pages/error/index.less @@ -0,0 +1,11 @@ +.error-wrapper { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + + .react-terminal-wrapper { + max-width: 90%; + height: calc(100vh - 80px); + } +} diff --git a/src/pages/error/index.tsx b/src/pages/error/index.tsx new file mode 100644 index 00000000..5b437f14 --- /dev/null +++ b/src/pages/error/index.tsx @@ -0,0 +1,51 @@ +import React, { useState, useEffect } from 'react'; +import config from '@/utils/config'; +import { request } from '@/utils/http'; +import Terminal, { ColorMode, LineType } from 'react-terminal-ui'; +import { PageLoading } from '@ant-design/pro-layout'; +import { history } from 'umi'; +import './index.less'; + +const Error = ({ user }: any) => { + const [loading, setLoading] = useState(false); + const [data, setData] = useState('暂无日志'); + + const getLog = () => { + setLoading(true); + request + .get(`${config.apiPrefix}public/panel/log`) + .then((data: any) => { + setData(data.data); + }) + .finally(() => setLoading(false)); + }; + + useEffect(() => { + if (user) { + history.push('/'); + } + }, [user]); + + useEffect(() => { + getLog(); + }, []); + + return ( +