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/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",
+}
+
+