feat: 编译历史记录和代码生成结果(#51)

地址已绑定编译结果，支持历史记录切换功能

Co-authored-by: jackfiled <xcrenchangjun@outlook.com>
Reviewed-on: PostGuard/Canon#51
Co-authored-by: Ichirinko <1621543655@qq.com>
Co-committed-by: Ichirinko <1621543655@qq.com>

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

@@ -1,32 +1,77 @@
-import {CSSProperties} from "react";
+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";
 
 
 // @ts-expect-error ...
-export function OutputField({imgPath}) {
-
+export function OutputField({data}) {
+    const [state, setState] = useState('tree')
+    const {imageAddress, compiledCode} = data;
     return <>
         <div className={"output-field"} style={outputFieldClassCss}>
-            <PhotoProvider>
-                <PhotoView key={1} src={imgPath}>
-                    {imgPath == "pic/uncompiled.png" ?
-                        <img src={imgPath}
-                             style={{
-                                 width: "100%",
-                                 height: "auto"
-                             }}
-                             alt=""/> :
-                        <img src={imgPath}
-                             style={{
-                                 objectFit: 'cover',
-                                 width: "100%",
-                                 height: "100%"
-                             }}
-                             alt=""/>
-                    }
+            <ToggleButtonGroup
+                color="primary"
+                value={state}
+                sx={{
+                    position: "relative",
+                    top: "0",
+                    left: "50%",
+                    height : "10%",
+                    paddingBottom: "5%",
+                    transform: "translateX(-50%)"
+                }}
+                exclusive
+                onChange={(_event, value) => {
+                    setState(value + "");
+                }}
+                aria-label="Platform"
+            >
+                <ToggleButton value="code"
+                              aria-label="code"
+                              size={"small"}>
+                    Code
+                </ToggleButton>
+                <ToggleButton value="tree"
+                              aria-label="tree"
+                              size={"small"}>
+                    Tree
+                </ToggleButton>
+            </ToggleButtonGroup>
+            <Box sx = {{
+                height: "90%",
+            }}>
+            {
 
-                </PhotoView>
-            </PhotoProvider>
+                    state === 'tree' ?
+                    <PhotoProvider>
+                        <PhotoView key={1} src={imageAddress}>
+                            {imageAddress == "pic/uncompiled.png" ?
+                                <img src={imageAddress}
+                                     style={{
+                                         width: "100%",
+                                         height: "auto"
+                                     }}
+                                     alt=""/> :
+                                <img src={imageAddress}
+                                     style={{
+                                         objectFit: 'cover',
+                                         width: "100%",
+                                         height: "100%"
+                                     }}
+                                     alt=""/>
+                            }
+
+                        </PhotoView>
+                    </PhotoProvider>
+                    : <MonacoEditor
+                    language="javascript"
+                    theme="twilight"
+                    value={compiledCode === "" ? "也就是说,还没编译啊还没编译" : compiledCode}
+                    options={{readOnly:true}}
+                />
+            }
+            </Box>
         </div>
     </>
 }