post-guard/Canon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更换了更好看的编辑器 (#45)

Browse Source 
Co-authored-by: Ichirinko <1621543655@qq.com>
Reviewed-on: PostGuard/Canon#45
This commit is contained in:
jackfiled 2024-04-21 11:50:23 +08:00
parent d09460edfe
commit 910049f557
5 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Canon.Server/client-app/package.json
View File

@ -20,6 +20,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hook-form": "^7.51.2", "react-hook-form": "^7.51.2",
"react-monaco-editor": "^0.55.0",
"react-photo-view": "^1.2.4", "react-photo-view": "^1.2.4",
"react-router-dom": "^6.22.3" "react-router-dom": "^6.22.3"
}, },

BIN
Canon.Server/client-app/public/pic/uncompiled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

2
Canon.Server/client-app/src/Pages/Index.tsx
View File

@ -21,7 +21,7 @@ export function Index() {
compiledCode: "", compiledCode: "",
sourceCode: "", sourceCode: "",
id: "", id: "",
imageAddress: "" imageAddress: "pic/uncompiled.png"
}); });
const handleValueChange = (value: string) => { const handleValueChange = (value: string) => {
setInputValue(value); setInputValue(value);

35
Canon.Server/client-app/src/Pages/InputField.tsx
View File

@ -1,15 +1,14 @@
import {TextField} from "@mui/material";
import {CSSProperties, useState} from "react"; import {CSSProperties, useState} from "react";
import MonacoEditor from "react-monaco-editor";
// @ts-expect-error ... // @ts-expect-error ...
export function InputField({ onValueChange }) { export function InputField({onValueChange}) {
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
// @ts-expect-error ... // @ts-expect-error ...
const handleChange = (e) => { const handleChange = (newValue) => {
const newValue = e.target.value;
setInputValue(newValue); setInputValue(newValue);
onValueChange(newValue); onValueChange(newValue);
}; };
@ -17,20 +16,18 @@ export function InputField({ onValueChange }) {
return <> return <>
<div className={"input-field"} style={inputFieldClassCss}> <div className={"input-field"} style={inputFieldClassCss}>
<TextField <div style={{
id="outlined-textarea" width: "100%",
label="Pascal Code" height: "100%",
rows={24} border: "0.1rem solid #1976d2"
multiline }}>
style={ <MonacoEditor
{ onChange={handleChange}
width: "100%", language="javascript"
height: "100%" theme="twilight"
} value={inputValue}
} />
value={inputValue} </div>
onChange={handleChange}
/>
</div> </div>
</> </>
} }
@ -39,5 +36,5 @@ const inputFieldClassCss: CSSProperties = {
width: "100%", width: "100%",
height: "100%", height: "100%",
padding: "5% 5%", padding: "5% 5%",
boxSizing: "border-box" boxSizing: "border-box",
} }

20
Canon.Server/client-app/src/Pages/OutputField.tsx
View File

@ -4,14 +4,28 @@ import {PhotoProvider, PhotoView} from "react-photo-view";
// @ts-expect-error ... // @ts-expect-error ...
export function OutputField({imgPath}) { export function OutputField({imgPath}) {
return <> return <>
<div className={"output-field"} style={outputFieldClassCss}> <div className={"output-field"} style={outputFieldClassCss}>
<PhotoProvider> <PhotoProvider>
<PhotoView key={1} src={imgPath}> <PhotoView key={1} src={imgPath}>
{imgPath == "pic/uncompiled.png" ?
<img src={imgPath} <img src={imgPath}
style={{ objectFit: 'cover' ,width:"100%",height:"100%" }} style={{
width: "100%",
height: "auto"
}}
alt=""/> :
<img src={imgPath}
style={{
objectFit: 'cover',
width: "100%",
height: "100%"
}}
alt=""/> alt=""/>
</PhotoView> }
</PhotoView>
</PhotoProvider> </PhotoProvider>
</div> </div>
</> </>