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

Reviewed-on: PostGuard/Canon#67
2024-04-29 23:55:36 +08:00
parent 4d325569fa
commit 911c813996
15 changed files with 243 additions and 204 deletions
--- a/Canon.Server/client-app/src/Interfaces/OutputIntf.ts
+++ b/Canon.Server/client-app/src/Interfaces/OutputIntf.ts
@@ -1,9 +1,5 @@
+import * as openapi from '../openapi';
+
 export interface OutputIntf {
-
-    compiledCode: string,
-    id: string,
-    imageAddress: string,
-    sourceCode: string,
-    compileTime: string
-
+    data : openapi.components["schemas"]["CompileResponse"]
 }
--- a/Canon.Server/client-app/src/Pages/Index.tsx
+++ b/Canon.Server/client-app/src/Pages/Index.tsx
@@ -7,8 +7,6 @@ import * as openapi from '../openapi';
 import {enqueueSnackbar} from "notistack";
 import {useNavigate} from "react-router-dom";
 import {HistoryPage} from "./HistoryPage.tsx";
-import {OutputIntf} from "../Interfaces/OutputIntf.ts";
-

 const client = createClient<openapi.paths>();

@@ -16,12 +14,13 @@ const client = createClient<openapi.paths>();
 export function Index() {

    const [inputValue, setInputValue] = useState('');
-    const [outputValue, setOutputValue] = useState<OutputIntf>({
+    const [outputValue, setOutputValue] = useState<openapi.components["schemas"]["CompileResponse"]>({
        compiledCode: "",
        sourceCode: "",
        id: "",
        imageAddress: "",
-        compileTime: ""
+        compileTime: "",
+        compileInformation: ""
    });
    const [historyPageState,setHistoryPageState] = useState(false);
    const navigate = useNavigate(); // 跳转hook
@@ -36,7 +35,8 @@ export function Index() {
                sourceCode: "",
                id: "",
                imageAddress: "pic/uncompiled.png",
-                compileTime: ""
+                compileTime: "",
+                compileInformation: ""
            })
            return;
        }
@@ -52,13 +52,7 @@ export function Index() {
            })
            if (data !== undefined) {
                setInputValue(data.sourceCode);
-                setOutputValue({
-                    compiledCode: data.compiledCode,
-                    sourceCode: data.sourceCode,
-                    id: data.id,
-                    imageAddress: data.imageAddress,
-                    compileTime: data.compileTime
-                })
+                setOutputValue(data)
            }
        }
        getCompileInstance();
@@ -79,13 +73,7 @@ export function Index() {
        })

        if (data !== undefined) {
-            setOutputValue({
-                compiledCode: data.compiledCode,
-                sourceCode: data.sourceCode,
-                id: data.id,
-                imageAddress: data.imageAddress,
-                compileTime: data.compileTime
-            })
+            setOutputValue(data);
            enqueueSnackbar("编译成功", {variant: "success", anchorOrigin: {vertical: 'bottom', horizontal: 'right'}});
            navigate(`/${data.id}`, {})

--- a/Canon.Server/client-app/src/Pages/OutputField.tsx
+++ b/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>
    </>
--- a/Canon.Server/client-app/src/openapi.d.ts
+++ b/Canon.Server/client-app/src/openapi.d.ts
@@ -5,139 +5,140 @@


 export interface paths {
-    "/api/Compiler": {
-        get: {
-            parameters: {
-                query?: {
-                    start?: number;
-                    end?: number;
-                };
-            };
-            responses: {
-                /** @description Success */
-                200: {
-                    content: {
-                        "text/plain": components["schemas"]["CompileResponse"][];
-                        "application/json": components["schemas"]["CompileResponse"][];
-                        "text/json": components["schemas"]["CompileResponse"][];
-                    };
-                };
-            };
+  "/api/Compiler": {
+    get: {
+      parameters: {
+        query?: {
+          start?: number;
+          end?: number;
        };
-        post: {
-            requestBody?: {
-                content: {
-                    "application/json": components["schemas"]["SourceCode"];
-                    "text/json": components["schemas"]["SourceCode"];
-                    "application/*+json": components["schemas"]["SourceCode"];
-                };
-            };
-            responses: {
-                /** @description Success */
-                200: {
-                    content: {
-                        "text/plain": components["schemas"]["CompileResponse"];
-                        "application/json": components["schemas"]["CompileResponse"];
-                        "text/json": components["schemas"]["CompileResponse"];
-                    };
-                };
-            };
-        };
-        delete: {
-            responses: {
-                /** @description No Content */
-                204: {
-                    content: never;
-                };
-            };
+      };
+      responses: {
+        /** @description Success */
+        200: {
+          content: {
+            "text/plain": components["schemas"]["CompileResponse"][];
+            "application/json": components["schemas"]["CompileResponse"][];
+            "text/json": components["schemas"]["CompileResponse"][];
+          };
        };
+      };
    };
-    "/api/Compiler/{compileId}": {
-        get: {
-            parameters: {
-                path: {
-                    compileId: string;
-                };
-            };
-            responses: {
-                /** @description Success */
-                200: {
-                    content: {
-                        "text/plain": components["schemas"]["CompileResponse"];
-                        "application/json": components["schemas"]["CompileResponse"];
-                        "text/json": components["schemas"]["CompileResponse"];
-                    };
-                };
-            };
+    post: {
+      requestBody?: {
+        content: {
+          "application/json": components["schemas"]["SourceCode"];
+          "text/json": components["schemas"]["SourceCode"];
+          "application/*+json": components["schemas"]["SourceCode"];
        };
-        delete: {
-            parameters: {
-                path: {
-                    compileId: string;
-                };
-            };
-            responses: {
-                /** @description No Content */
-                204: {
-                    content: never;
-                };
-                /** @description Not Found */
-                404: {
-                    content: {
-                        "text/plain": components["schemas"]["ProblemDetails"];
-                        "application/json": components["schemas"]["ProblemDetails"];
-                        "text/json": components["schemas"]["ProblemDetails"];
-                    };
-                };
-            };
+      };
+      responses: {
+        /** @description Success */
+        200: {
+          content: {
+            "text/plain": components["schemas"]["CompileResponse"];
+            "application/json": components["schemas"]["CompileResponse"];
+            "text/json": components["schemas"]["CompileResponse"];
+          };
        };
+      };
    };
-    "/api/File/{filename}": {
-        get: {
-            parameters: {
-                path: {
-                    filename: string;
-                };
-            };
-            responses: {
-                /** @description Success */
-                200: {
-                    content: never;
-                };
-            };
+    delete: {
+      responses: {
+        /** @description No Content */
+        204: {
+          content: never;
        };
+      };
    };
+  };
+  "/api/Compiler/{compileId}": {
+    get: {
+      parameters: {
+        path: {
+          compileId: string;
+        };
+      };
+      responses: {
+        /** @description Success */
+        200: {
+          content: {
+            "text/plain": components["schemas"]["CompileResponse"];
+            "application/json": components["schemas"]["CompileResponse"];
+            "text/json": components["schemas"]["CompileResponse"];
+          };
+        };
+      };
+    };
+    delete: {
+      parameters: {
+        path: {
+          compileId: string;
+        };
+      };
+      responses: {
+        /** @description No Content */
+        204: {
+          content: never;
+        };
+        /** @description Not Found */
+        404: {
+          content: {
+            "text/plain": components["schemas"]["ProblemDetails"];
+            "application/json": components["schemas"]["ProblemDetails"];
+            "text/json": components["schemas"]["ProblemDetails"];
+          };
+        };
+      };
+    };
+  };
+  "/api/File/{filename}": {
+    get: {
+      parameters: {
+        path: {
+          filename: string;
+        };
+      };
+      responses: {
+        /** @description Success */
+        200: {
+          content: never;
+        };
+      };
+    };
+  };
 }

 export type webhooks = Record<string, never>;

 export interface components {
-    schemas: {
-        CompileResponse: {
-            id: string;
-            sourceCode: string;
-            compiledCode: string;
-            imageAddress: string;
-            compileTime: string;
-        };
-        ProblemDetails: {
-            type?: string | null;
-            title?: string | null;
-            /** Format: int32 */
-            status?: number | null;
-            detail?: string | null;
-            instance?: string | null;
-            [key: string]: unknown;
-        };
-        SourceCode: {
-            code: string;
-        };
+  schemas: {
+    CompileResponse: {
+      id: string;
+      sourceCode: string;
+      compiledCode: string;
+      imageAddress: string;
+      compileTime: string;
+      compileInformation: string;
    };
-    responses: never;
-    parameters: never;
-    requestBodies: never;
-    headers: never;
-    pathItems: never;
+    ProblemDetails: {
+      type?: string | null;
+      title?: string | null;
+      /** Format: int32 */
+      status?: number | null;
+      detail?: string | null;
+      instance?: string | null;
+      [key: string]: unknown;
+    };
+    SourceCode: {
+      code: string;
+    };
+  };
+  responses: never;
+  parameters: never;
+  requestBodies: never;
+  headers: never;
+  pathItems: never;
 }

 export type $defs = Record<string, never>;