feat: 在前端显示编译过程中的日志 (#67)

Reviewed-on: PostGuard/Canon#67

Canon.Server/client-app/src/Pages/OutputField.tsx

@@ -1,13 +1,14 @@
-import {CSSProperties, useState} from "react";
-import {Box, ToggleButton, ToggleButtonGroup} from "@mui/material";
-import {PhotoProvider, PhotoView} from "react-photo-view";
+import { CSSProperties, useState } from "react";
+import { Box, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { PhotoProvider, PhotoView } from "react-photo-view";
 import MonacoEditor from "react-monaco-editor";
+import { OutputIntf } from "../Interfaces/OutputIntf";
 
-
-// @ts-expect-error ...
-export function OutputField({data}) {
+export function OutputField(props: OutputIntf) {
     const [state, setState] = useState('tree')
-    const {imageAddress, compiledCode} = data;
+    const { imageAddress, compiledCode, compileInformation } = props.data;
+
+
     return <>
         <div className={"output-field"} style={outputFieldClassCss}>
             <ToggleButtonGroup
@@ -17,7 +18,7 @@ export function OutputField({data}) {
                     position: "relative",
                     top: "0",
                     left: "50%",
-                    height : "10%",
+                    height: "10%",
                     paddingBottom: "5%",
                     transform: "translateX(-50%)"
                 }}
@@ -28,49 +29,60 @@ export function OutputField({data}) {
                 aria-label="Platform"
             >
                 <ToggleButton value="code"
-                              aria-label="code"
-                              size={"small"}>
+                    aria-label="code"
+                    size={"small"}>
                     Code
                 </ToggleButton>
                 <ToggleButton value="tree"
-                              aria-label="tree"
-                              size={"small"}>
+                    aria-label="tree"
+                    size={"small"}>
                     Tree
                 </ToggleButton>
+                <ToggleButton value="log" aria-label="log" size={"small"}>
+                    Log
+                </ToggleButton>
             </ToggleButtonGroup>
-            <Box sx = {{
+            <Box sx={{
                 height: "90%",
             }}>
-            {
-
-                    state === 'tree' ?
+                {
+                    state === 'tree' &&
                     <PhotoProvider>
                         <PhotoView key={1} src={imageAddress}>
                             {imageAddress == "pic/uncompiled.png" ?
                                 <img src={imageAddress}
-                                     style={{
-                                         width: "100%",
-                                         height: "auto"
-                                     }}
-                                     alt=""/> :
+                                    style={{
+                                        width: "100%",
+                                        height: "auto"
+                                    }}
+                                    alt="" /> :
                                 <img src={imageAddress}
-                                     style={{
-                                         objectFit: 'cover',
-                                         width: "100%",
-                                         height: "100%"
-                                     }}
-                                     alt=""/>
+                                    style={{
+                                        objectFit: 'cover',
+                                        width: "100%",
+                                        height: "100%"
+                                    }}
+                                    alt="" />
                             }
 
                         </PhotoView>
                     </PhotoProvider>
-                    : <MonacoEditor
-                    language="javascript"
-                    theme="twilight"
-                    value={compiledCode === "" ? "也就是说,还没编译啊还没编译" : compiledCode}
-                    options={{readOnly:true}}
-                />
-            }
+                }
+                {
+                    state == "code" && <MonacoEditor
+                        language="javascript"
+                        theme="twilight"
+                        value={compiledCode === "" ? "也就是说,还没编译啊还没编译" : compiledCode}
+                        options={{ readOnly: true }}
+                    />
+                }
+                {
+                    state == "log" && <MonacoEditor
+                        theme={"twilight"}
+                        value={compileInformation}
+                        options={{readOnly: true}}
+                    />
+                }
             </Box>
         </div>
     </>