修改错误日志页面

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;