Merge pull request #302 from decert-me/hotfix-console

0xdwong · web-flow · commit 6158c15660b0 · 2023-12-25T14:23:16.000+08:00
hotfix: 优化”代码运行结果展示“，比如换行、充值位默认模板等
diff --git a/src/assets/images/img/reload.png b/src/assets/images/img/reload.png
diff --git a/src/assets/locales/en-US/publish.json b/src/assets/locales/en-US/publish.json
@@ -3,6 +3,7 @@
     "title-modify": "Edit Challenge",
     "preview": "Only creator is visible",
     "upload": "Upload",
+    "revert": "Revert to default code template",
     "inner": {
         "title": "Title",
         "desc": "Description",
diff --git a/src/assets/locales/zh-CN/publish.json b/src/assets/locales/zh-CN/publish.json
@@ -3,6 +3,7 @@
     "title-modify": "编辑挑战",
     "preview": "仅创建者可见",
     "upload": "上传",
+    "revert": "还原到默认的代码模版",
     "inner": {
         "title": "标题",
         "desc": "描述",
diff --git a/src/assets/styles/component-style/challenge.scss b/src/assets/styles/component-style/challenge.scss
@@ -116,6 +116,16 @@
     }
 }
 
+.reload-tips{
+    .ant-tooltip-content .ant-tooltip-inner{
+        padding: 10px 17px;
+        color: #454545;
+        border-radius: 7px;
+        background-color: #fff;
+        box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.1);
+    }
+}
+
 .CustomCode{
     width: 100%;
     height: 100%;
@@ -150,11 +160,22 @@
     .out-inner{
         flex: 1;
         margin-bottom: 10px;
-        padding-top: 32px;
+        padding-top: 55px;
         background-color: #fff;
         border-radius: 10px;
         overflow: hidden;
         position: relative;
+        .icon-reload{
+            width: 26px;
+            height: 26px;
+            position: absolute;
+            right: 27px;
+            top: 12px;
+            cursor: pointer;
+        }
+        .reload-tips{
+
+        }
     }
     .preview-menu{
         height: 30px;
diff --git a/src/assets/styles/mobile/view-style/challenge.scss b/src/assets/styles/mobile/view-style/challenge.scss
@@ -195,7 +195,7 @@ $container-width: 22.5rem;
             flex: none;
             height: 15rem;
             margin-bottom: .625rem;
-            padding-top: 1.875rem;
+            padding-top: 3.4375rem;
             border-radius: .4375rem;
         }
         .out-content{
diff --git a/src/components/CustomChallenge/CustomCode.js b/src/components/CustomChallenge/CustomCode.js
@@ -6,14 +6,16 @@ import { codeRun, codeTest } from '@/request/api/quests';
 import CustomViewer from "../CustomViewer";
 import { Encryption } from "@/utils/Encryption";
 import { useTranslation } from "react-i18next";
-import { Modal } from "antd";
+import { Modal, Tooltip } from "antd";
 import { modalNotice } from "@/utils/modalNotice";
+import { useLocation } from "react-router-dom";
 
 
 function CustomCode(props, ref) {
 
-    const { question, token_id, answers, setAnswers, saveAnswer, index, isPreview } = props;
+    const { question, reload, token_id, answers, setAnswers, index, isPreview } = props;
     const { t } = useTranslation(['publish','explore']);
+    const location = useLocation();
     const editorRef = useRef(null);
     const consoleRef = useRef(null);
     const { decode } = Encryption();
@@ -30,6 +32,7 @@ function CustomCode(props, ref) {
     let [selectCode, setSelectCode] = useState();
     let [selectIndex, setSelectIndex] = useState(0);
     let [editorCode, setEditorCode] = useState();
+    let [answerCode, setAnswerCode] = useState();
     let [logs, setLogs] = useState([]);     //  执行代码返回的日志
     let [codeObj, setCodeObj] = useState({
         code: "",
@@ -181,7 +184,8 @@ function CustomCode(props, ref) {
         paramsObj.code = obj.code;
         paramsObj.lang = obj.lang;
         paramsObj.quest_index = index;
-
+        logs = [];
+        setLogs(logs);
         addLogs([t("inner.run.start")]);
         await codeRun(paramsObj)
         .then(res => {
@@ -231,10 +235,28 @@ function CustomCode(props, ref) {
         editorRef.current.changeReadOnly(code !== "tpl" );
     }
 
+    async function revertCode() {
+        if (location.pathname === "/preview") {
+            editorRef.current.monacoInit();
+            return
+        }
+        const local = localStorage.getItem("decert.cache");
+        if (local) {
+            let cache = JSON.parse(local);
+            cache[token_id][index] = null;
+            localStorage.setItem("decert.cache", JSON.stringify(cache));
+        }
+        await reload();
+        logs = [];
+        setLogs([...logs]);
+    }
+
     async function init(params) {
         cacheQuest = question;
         if (answers[index]) {
-            cacheQuest.code_snippets[selectIndex].code = answers[index].code;
+            answerCode = answers[index].code;
+            setAnswerCode(answerCode);
+            // cacheQuest.code_snippets[selectIndex].code = answers[index].code;
         }
         setCacheQuest({...cacheQuest});
         toggleCode()
@@ -267,6 +289,13 @@ function CustomCode(props, ref) {
         setItems([...items]);
     }
 
+    async function updateInit() {
+        await init();
+        answerCode = null;
+        setAnswerCode(answerCode);
+        editorRef.current.monacoInit();
+    }
+
     useUpdateEffect(() => {
         toggleCode();
     },[selectIndex])
@@ -275,6 +304,10 @@ function CustomCode(props, ref) {
         init();
     },[])
 
+    useUpdateEffect(() => {
+        updateInit();
+    },[question])
+
     return (
         <>
 
@@ -306,6 +339,15 @@ function CustomCode(props, ref) {
                         <div 
                             className="out-inner"
                         >
+                            {/* 还原代码模板 */}
+                            <Tooltip 
+                                title={t("revert")}
+                                arrow={false} 
+                                rootClassName="reload-tips" 
+                            >
+                                <img onClick={revertCode} className="icon-reload" src={require("@/assets/images/img/reload.png")} alt="" />
+                            </Tooltip>
+                            
                             {
                                 isPreview && 
                                 <div className="preview-menu">
@@ -323,7 +365,7 @@ function CustomCode(props, ref) {
                                 </div>
                             }
                             <MonacoEditor
-                                value={editorCode}
+                                value={answerCode||editorCode}
                                 onChange={changeCache}
                                 language={selectCode.lang}
                                 height={"100%"}
diff --git a/src/components/CustomConsole/Console.js b/src/components/CustomConsole/Console.js
@@ -16,7 +16,7 @@ export default function Console(props) {
             <ul>
                 {
                     logs.map((e, i) => 
-                        <li key={i} style={{marginBottom: "10px"}}>
+                        <li key={i} style={{marginBottom: "10px", whiteSpace: "pre-wrap"}}>
                             {e}
                         </li>    
                     )
diff --git a/src/components/CustomModal/ModalAddCodeQuestion.js b/src/components/CustomModal/ModalAddCodeQuestion.js
@@ -325,7 +325,7 @@ export default function ModalAddCodeQuestion(props) {
                                                     <span>{t("inner.code-tpl-desc")}</span>
                                                 </div>
                                                 <MonacoEditor
-                                                    value={e.code}
+                                                    defaultValue={e.code}
                                                     onChange={(newValue) => {
                                                         changeCoding("code", newValue, i);
                                                     }}
@@ -342,7 +342,7 @@ export default function ModalAddCodeQuestion(props) {
                                                     <span>{t("inner.code-spl-desc")}</span>
                                                 </div>
                                                 <MonacoEditor
-                                                    value={e.correctAnswer}
+                                                    defaultValue={e.correctAnswer}
                                                     onChange={(newValue) => {
                                                         changeCoding("correctAnswer", newValue, i);
                                                     }}
diff --git a/src/components/MonacoEditor/MonacoComponent.js b/src/components/MonacoEditor/MonacoComponent.js
@@ -6,7 +6,7 @@ import MyContext from "@/provider/context";
 
 
 export default function MonacoComponent(props) {
-    const { value, onChange, language, height, readOnly } = props;
+    const { value, defaultValue, onChange, language, height, readOnly } = props;
     const { isMobile } = useContext(MyContext);
     const { languageInit } = useMonacoInit({
         language: language
@@ -25,6 +25,7 @@ export default function MonacoComponent(props) {
             theme="light"     // light || vs-dark
             language={language}
             value={value}
+            defaultValue={defaultValue}
             options={options}
             onChange={onChange}
             loading={<LoadingOutlined style={{ fontSize: "30px"}} />}
diff --git a/src/components/MonacoEditor/index.js b/src/components/MonacoEditor/index.js
@@ -7,14 +7,15 @@ import MonacoComponent from "./MonacoComponent";
 
 function MonacoEditor(props, ref) {
     
-    const {value, onChange, language, height} = props;
+    const {value, defaultValue, onChange, language, height} = props;
     const { config, init } = loader;
     let [editorIsOk, setEditorIsOk] = useState();
     let [newLang, setNewLang] = useState();
     let [readOnly, setReadOnly] = useState(false);
+    let [key, setKey] = useState();
 
     useImperativeHandle(ref, () => ({
-        changeLang,changeReadOnly
+        changeLang,changeReadOnly,monacoInit
     }))
 
     function changeLang(params) {
@@ -27,7 +28,7 @@ function MonacoEditor(props, ref) {
         setReadOnly(readOnly);
     }
 
-    async function languaegInit(params) {
+    function languaegInit(params) {
         switch (language) {
             case "C++":
             case "C":
@@ -40,6 +41,9 @@ function MonacoEditor(props, ref) {
     }
 
     async function monacoInit(params) {
+        setEditorIsOk(false);
+        key = Date.now();
+        setKey(key);
         config({
             paths: {
                 vs: "https://ipfs.decert.me/lib/monaco-editor@0.36.1"
@@ -54,17 +58,20 @@ function MonacoEditor(props, ref) {
 
     useEffect(() => {
         monacoInit();
-    },[])
+    },[value])
 
     return (
         editorIsOk ?
-        <MonacoComponent
-            value={value}
-            onChange={onChange}
-            language={newLang}
-            height={height}
-            readOnly={readOnly}
-        />
+        <div key={key} style={{height: "100%"}}>
+            <MonacoComponent
+                value={value}
+                defaultValue={defaultValue}
+                onChange={onChange}
+                language={newLang}
+                height={height}
+                readOnly={readOnly}
+            />
+        </div>
         :
         <div style={{height: height ? height : "calc(100% - 230px)"}}>
             <LoadingOutlined style={{ fontSize: "30px"}} />
diff --git a/src/components/Publish/Coding.js b/src/components/Publish/Coding.js
@@ -58,7 +58,7 @@ export default function Coding(props) {
                     </p>
                     <ul className="log-content custom-scroll">
                         {
-                            logs.map((e,i) => <li key={i} dangerouslySetInnerHTML={{__html: e}} />
+                            logs.map((e,i) => <li key={i} dangerouslySetInnerHTML={{__html: e.replace(/\n/g,"<br/>")}} />
                             )
                         }
                     </ul>
diff --git a/src/components/Publish/CodingSpecial.js b/src/components/Publish/CodingSpecial.js
@@ -56,7 +56,8 @@ export default function CodingSpecial(props) {
     async function Test(params) {
         setLoading(true);
         const arr = await checkCode();
-        logs.push(...arr);
+        // logs.push(...arr);
+        logs = arr;
         setLogs([...logs]);
         setLoading(false);
     }
@@ -94,7 +95,7 @@ export default function CodingSpecial(props) {
                             defaultValue={defaultValue.spj_code.frame}
                         />
                         <MonacoEditor
-                            value={defaultValue.spj_code.code}
+                            defaultValue={defaultValue.spj_code.code}
                             onChange={(newValue) => {
                                 onChange(newValue, "code")
                             }}
@@ -119,8 +120,7 @@ export default function CodingSpecial(props) {
                     </p>
                     <ul className="log-content custom-scroll">
                         {
-                            logs.map((e,i) => <li key={i} dangerouslySetInnerHTML={{__html: e}} />
-                            )
+                            logs.map((e,i) => <li key={i} dangerouslySetInnerHTML={{__html: e.replace(/\n/g,"<br/>")}} />)
                         }
                     </ul>
                 </div>
diff --git a/src/utils/constans.js b/src/utils/constans.js
@@ -77,7 +77,7 @@ export const constans = (contractType) => {
     const defaultImg = require('@/assets/images/img/default.png');
     const ipfsPath = 'https://ipfs.decert.me';
     const screenSize = {
-        mobile: "(max-width: 480px)",
+        mobile: "(max-width: 780px)",
     }
 
     return {
diff --git a/src/utils/getMetadata.js b/src/utils/getMetadata.js
diff --git a/src/views/Challenge/index.js b/src/views/Challenge/index.js
diff --git a/src/views/Publish/question.js b/src/views/Publish/question.js

Original file line number	Diff line number	Diff line change
`@@ -195,7 +195,7 @@ $container-width: 22.5rem;`
`195`	`195`	`flex: none;`
`196`	`196`	`height: 15rem;`
`197`	`197`	`margin-bottom: .625rem;`
`198`		`- padding-top: 1.875rem;`
	`198`	`+ padding-top: 3.4375rem;`
`199`	`199`	`border-radius: .4375rem;`
`200`	`200`	`}`
`201`	`201`	`.out-content{`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export default function Console(props) {`
`16`	`16`	`<ul>`
`17`	`17`	`{`
`18`	`18`	`logs.map((e, i) =>`
`19`		`- <li key={i} style={{marginBottom: "10px"}}>`
	`19`	`+ <li key={i} style={{marginBottom: "10px", whiteSpace: "pre-wrap"}}>`
`20`	`20`	`{e}`
`21`	`21`	`</li>`
`22`	`22`	`)`