diff --git a/public/react/src/App.js b/public/react/src/App.js index 247e7939b..96a4f91b0 100644 --- a/public/react/src/App.js +++ b/public/react/src/App.js @@ -366,6 +366,11 @@ const JupyterTPI = Loadable({ loader: () => import('./modules/tpm/jupyter'), loading: Loading }); +// 微信代码编辑器 +const WXCode = Loadable({ + loader: () => import('./modules/wxcode'), + loading: Loading +}); // //个人竞赛报名 // const PersonalCompetit = Loadable({ // loader: () => import('./modules/competition/personal/PersonalCompetit.js'), @@ -823,6 +828,11 @@ class App extends Component { render={ (props) => () }/> + () + } + /> { + + const { + isShow, + wxCode, + path, + showLoading, + // userCode, + testCase = [], + getWXCode, + last_compile_output, + test_sets_count, + sets_error_count, + getWXCodeTestCase, + restoreWXCode, + updateWXCodeForEditor, + updateWXCodeForInterval, + evaluateWxCode, + showWXCodeTextCase, + changeWXCodeEvaluateLoading + } = props; + + const {identifier} = props.match.params; + const [isActive, setIsActive] = useState(-1); + // const [isVisible, setIsVisible] = useState(false); + const editorRef = useRef(null); + let timer = null; + useEffect(() => { + // 加载代码块内容 + getWXCode(identifier); + // 加载测试集 + const params = { + path, + status: 0, + retry: 1 + }; + getWXCodeTestCase(identifier, params); + }, []); + // 关闭 + const handleCloseTestCase = () => { + // setIsVisible(false); + showWXCodeTextCase(false) + } + // 测试集 + const handleClickTestCase = () => { + // setIsVisible(true); + showWXCodeTextCase(true) + } + // 编辑器代码 + const handleEditorChange = (origin, monaco) => { + editorRef.current = monaco; // 获取当前monaco实例 + // setEditCode(origin); // 保存编辑器初始值 + editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化 + // TODO 需要优化 节流 + const val = editorRef.current.getValue(); + // console.log('编辑器代码====>>>>', val); + // updateWXCodeForEditor(val); + codeChange(val); + }); + }; + + const codeChange = (code) => { + // console.log(code); + updateWXCodeForEditor(code); + if (!timer) { + timer = setInterval(function () { + clearInterval(timer); + timer = null; + // 调用更新代码 + updateWXCodeForInterval(identifier, path); + }, 10000); + } + } + + // 关闭单个测试集 + const handleCloseItem = (i, flag) => { + if (!flag) return; + setIsActive(isActive === i ? -1 : i); + } + // 初始化 + const handleResetCode = () => { + const result = window.confirm('你在本文件中修改的内容将丢失, 是否确定重新加载初始代码？'); + if (result) { + identifier && restoreWXCode(identifier, { path }); + } + } + // 评测 + const handleEvalateCode = () => { + changeWXCodeEvaluateLoading(true); + evaluateWxCode(identifier, path); + } + + const tcclasses = isShow ? `wx-code-test-case active` : 'wx-code-test-case'; + const loading = showLoading ? 'code-evaluate-loading active' : 'code-evaluate-loading'; + const _val = sets_error_count === 0; + let resultTxt = (_val) ? '全部通过' : `${sets_error_count}组测试结果不匹配`; + const iclasses = _val ? 'iconfont icon-tishi1 icon success' : 'iconfont icon-tishi1 icon fail'; + const tclasses = _val ? 'result-txt success' : 'result-txt fail'; + const ulClasses = last_compile_output ? 'case-list hasResult' : 'case-list'; + return ( +
+
+
+ +
+
+
+ + + 初始化 + + + + 测试集 + +
+ {/* */} + +
+
+ {/* 测试集 */} +
+
+
+ 共{testCase.length}个测试用例 + 关闭 +
+
+ + {test_sets_count - sets_error_count}/{test_sets_count} + {resultTxt} +
+
    + { + testCase.map((item, i) => { + const {input, output, actual_output, is_public, result} = item; + const _classes = isActive === i ? 'case-item-desc active' : 'case-item-desc'; + const iconclasses = isActive === i ? 'iconfont icon-sanjiaoxing-down icon active' : 'iconfont icon-triangle icon'; + const headerClasses = is_public ? 'item-header-desc active' : 'item-header-desc'; + // console.log(_classes); + return ( +
  • +
    handleCloseItem(i, is_public)}> +

    + + 测试集{i + 1} +

    + { + is_public + ? (result + ? + : ) + : ( + 隐藏测试集，暂不支持解锁和查看 + {/* {result + ? + : + } */} + ) + } +
    + +
    + 测试输入 + {input || '-'} + 预期输出 + {/* */} + */} + 实际输出 +