feat-visualization (#33)

尽管里面有点粪，但还是生成了漂亮的树，就当给树施肥了
剩下一个小问题：未考虑节点的宽度（因为名称不一样长），但目前未发现对图生成的明显影响

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

Canon.Server/client-app/src/App.tsx

@@ -0,0 +1,16 @@
+import { RouterProvider, createBrowserRouter} from 'react-router-dom'
+import { Index } from "./Pages/Index";
+import 'react-photo-view/dist/react-photo-view.css';
+
+const routers = createBrowserRouter([
+    {
+        path: "/",
+        element: <Index/>
+    }
+])
+
+export function App() {
+    return <>
+       <RouterProvider router={routers} />
+    </>
+}

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

@@ -0,0 +1,99 @@
+import {AppBar, Button, Grid, Toolbar, Typography} from "@mui/material";
+import {InputField} from "./InputField.tsx";
+import {CSSProperties, useState} from "react";
+import {OutputField} from "./OutputField.tsx";
+import createClient from "openapi-fetch";
+import * as openapi from '../openapi';
+
+const client = createClient<openapi.paths>();
+
+interface outputData {
+    compiledCode: string,
+    id: string,
+    imageAddress: string,
+    sourceCode: string
+}
+
+export function Index() {
+
+    const [inputValue, setInputValue] = useState('');
+    const [outputValue, setOutputValue] = useState<outputData>({
+        compiledCode: "",
+        sourceCode: "",
+        id: "",
+        imageAddress: ""
+    });
+    const handleValueChange = (value: string) => {
+        setInputValue(value);
+    };
+
+
+    async function compilerButtonClick() {
+        console.log(inputValue)
+        const {data} = await client.POST("/api/Compiler", {
+            body: {
+                code: inputValue
+            }
+        })
+        console.log(data)
+        if (data != undefined) {
+            setOutputValue({
+                compiledCode: data.compiledCode,
+                sourceCode: data.sourceCode,
+                id: data.id,
+                imageAddress: data.imageAddress
+            })
+        }
+    }
+
+    return <>
+        <div className={"title"}
+             style={titleClassCss}>
+            <AppBar style={{zIndex: 0}}>
+                <Toolbar style={{width: '100%'}}>
+                    <Typography variant="h6">
+                        任昌骏组编译器
+                    </Typography>
+                    <Button style={{
+                        position: "absolute",
+                        left: "50%",
+                        transform: "translateX(-50%)",
+                        fontSize: "medium",
+                    }}
+                            variant="outlined"
+                            color="inherit"
+                            onClick={compilerButtonClick}
+                    >
+                        编译
+                    </Button>
+                </Toolbar>
+            </AppBar>
+        </div>
+
+        <div className={"content"}
+             style={contentClassCss}>
+            <Grid container spacing={2} style = {{width: "100%",height: "100%"}}>
+                <Grid item xs={12} sm={6} style = {{width: "100%",height: "100%"}}>
+                    <InputField onValueChange={handleValueChange}>
+                    </InputField>
+                </Grid>
+                <Grid item xs={12} sm={6} style = {{width: "100%",height: "100%"}}>
+                    <OutputField imgPath={outputValue.imageAddress}>
+                    </OutputField>
+                </Grid>
+            </Grid>
+        </div>
+    </>
+}
+
+const titleClassCss: CSSProperties = {
+    position: "absolute",
+    height: "max-content",
+    width: "100%",
+}
+const contentClassCss: CSSProperties = {
+    position: "relative",
+    height: "88%",
+    top: "12%",
+    width: "100%",
+}

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

@@ -0,0 +1,43 @@
+import {TextField} from "@mui/material";
+import {CSSProperties, useState} from "react";
+
+
+// @ts-expect-error ...
+export function InputField({ onValueChange }) {
+
+    const [inputValue, setInputValue] = useState('');
+
+    // @ts-expect-error ...
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        onValueChange(newValue);
+    };
+
+
+    return <>
+        <div className={"input-field"} style={inputFieldClassCss}>
+            <TextField
+                id="outlined-textarea"
+                label="Pascal Code"
+                rows={24}
+                multiline
+                style={
+                    {
+                        width: "100%",
+                        height: "100%"
+                    }
+                }
+                value={inputValue}
+                onChange={handleChange}
+            />
+        </div>
+    </>
+}
+
+const inputFieldClassCss: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    padding: "5% 5%",
+    boxSizing: "border-box"
+}

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

@@ -0,0 +1,27 @@
+import {CSSProperties} from "react";
+import {PhotoProvider, PhotoView} from "react-photo-view";
+
+
+// @ts-expect-error ...
+export function OutputField({imgPath}) {
+    return <>
+        <div className={"output-field"} style={outputFieldClassCss}>
+            <PhotoProvider>
+                    <PhotoView key={1} src={imgPath}>
+                        <img src={imgPath}
+                             style={{ objectFit: 'cover' ,width:"100%",height:"100%" }}
+                             alt=""/>
+                    </PhotoView>
+            </PhotoProvider>
+        </div>
+    </>
+}
+
+const outputFieldClassCss: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    padding: "5% 5%",
+    boxSizing: "border-box",
+}
+
+

Canon.Server/client-app/src/main.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { App } from './App.tsx'
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import { CssBaseline } from '@mui/material';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <CssBaseline />
+    <App />
+  </React.StrictMode>,
+)

Canon.Server/client-app/src/openapi.d.ts

@@ -0,0 +1,90 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+
+export interface paths {
+    "/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"];
+                    };
+                };
+            };
+        };
+    };
+    "/api/Compiler": {
+        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"];
+                    };
+                };
+            };
+        };
+    };
+    "/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;
+        };
+        SourceCode: {
+            code: string;
+        };
+    };
+    responses: never;
+    parameters: never;
+    requestBodies: never;
+    headers: never;
+    pathItems: never;
+}
+
+export type $defs = Record<string, never>;
+
+export type external = Record<string, never>;
+
+export type operations = Record<string, never>;

Canon.Server/client-app/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />