修改错误日志页面

src/components/index.less

@@ -0,0 +1,78 @@
+.react-terminal-wrapper {
+  width: 100%;
+  background: #252a33;
+  color: #eee;
+  font-size: 18px;
+  font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier,
+    monospace;
+  border-radius: 4px;
+  padding: 75px 45px 35px;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.react-terminal {
+  height: 600px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.react-terminal-wrapper.react-terminal-light {
+  background: #ddd;
+  color: #1a1e24;
+}
+
+.react-terminal-wrapper:before {
+  content: '';
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: #d9515d;
+  -webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
+  box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
+}
+
+.react-terminal-wrapper:after {
+  content: attr(data-terminal-name);
+  position: absolute;
+  color: #a2a2a2;
+  top: 5px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+
+.react-terminal-wrapper.react-terminal-light:after {
+  color: #d76d77;
+}
+
+.react-terminal-line {
+  display: block;
+  line-height: 1.5;
+}
+
+.react-terminal-line:before {
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
+  color: #a2a2a2;
+}
+
+.react-terminal-light .react-terminal-line:before {
+  color: #d76d77;
+}
+
+.react-terminal-input:before {
+  margin-right: 0.75em;
+  content: '$';
+}
+
+.react-terminal-input[data-terminal-prompt]:before {
+  content: attr(data-terminal-prompt);
+}

src/components/terminal.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef } from 'react';
+import './index.less';
+
+export enum LineType {
+  Input,
+  Output,
+}
+
+export enum ColorMode {
+  Light,
+  Dark,
+}
+
+export interface Props {
+  name?: string;
+  prompt?: string;
+  colorMode?: ColorMode;
+  lineData: Array<{ type: LineType; value: string | React.ReactNode }>;
+  startingInputValue?: string;
+}
+
+const Terminal = ({
+  name,
+  prompt,
+  colorMode,
+  lineData,
+  startingInputValue = '',
+}: Props) => {
+  const lastLineRef = useRef<null | HTMLElement>(null);
+
+  // An effect that handles scrolling into view the last line of terminal input or output
+  const performScrolldown = useRef(false);
+  useEffect(() => {
+    if (performScrolldown.current) {
+      // skip scrolldown when the component first loads
+      setTimeout(
+        () =>
+          lastLineRef?.current?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+          }),
+        500,
+      );
+    }
+    performScrolldown.current = true;
+  }, [lineData.length]);
+
+  const renderedLineData = lineData.map((ld, i) => {
+    const classes = ['react-terminal-line'];
+    if (ld.type === LineType.Input) {
+      classes.push('react-terminal-input');
+    }
+    // `lastLineRef` is used to ensure the terminal scrolls into view to the last line; make sure to add the ref to the last
+    if (lineData.length === i + 1) {
+      return (
+        <span className={classes.join(' ')} key={i} ref={lastLineRef}>
+          {ld.value}
+        </span>
+      );
+    } else {
+      return (
+        <span className={classes.join(' ')} key={i}>
+          {ld.value}
+        </span>
+      );
+    }
+  });
+
+  const classes = ['react-terminal-wrapper'];
+  if (colorMode === ColorMode.Light) {
+    classes.push('react-terminal-light');
+  }
+  return (
+    <div className={classes.join(' ')} data-terminal-name={name}>
+      <div className="react-terminal">{renderedLineData}</div>
+    </div>
+  );
+};
+
+export default Terminal;

src/pages/error/index.tsx

@@ -1,12 +1,13 @@
 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 Terminal, { ColorMode, LineType } from '../../components/terminal';
 import { PageLoading } from '@ant-design/pro-layout';
 import { history } from 'umi';
+import Ansi from 'ansi-to-react';
 import './index.less';
 
-const Error = ({ user }: any) => {
+const Error = ({ user, theme }: any) => {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState('暂无日志');
 
@@ -37,10 +38,13 @@ const Error = ({ user }: any) => {
       ) : (
         <Terminal
           name="服务错误"
-          colorMode={ColorMode.Light}
+          colorMode={theme === 'vs-dark' ? ColorMode.Dark : ColorMode.Light}
           lineData={[
             { type: LineType.Input, value: 'pm2 logs panel' },
-            { type: LineType.Output, value: data },
+            {
+              type: LineType.Output,
+              value: <Ansi>{data}</Ansi>,
+            },
           ]}
         />
       )}