forked from Gitlink/forgeplus-react
382 lines
13 KiB
JavaScript
382 lines
13 KiB
JavaScript
|
/*
|
|||
|
|
* @Description: 微信端代码编辑器
|
|||
|
|
* @Author: tangjiang
|
|||
|
|
* @Github:
|
|||
|
|
* @Date: 2020-01-15 09:56:34
|
|||
|
|
* @LastEditors : tangjiang
|
|||
|
|
* @LastEditTime : 2020-01-18 15:07:09
|
|||
|
|
*/
|
|||
|
|
import './index.scss';
|
|||
|
|
import React, {useState, useEffect, useRef} from 'react';
|
|||
|
|
import MonacoEditor from '@monaco-editor/react';
|
|||
|
|
import { Input, Icon } from 'antd';
|
|||
|
|
import { connect } from 'react-redux';
|
|||
|
|
import actions from '../../redux/actions';
|
|||
|
|
import cookie from 'react-cookies';
|
|||
|
|
|
|||
|
|
const { TextArea } = Input;
|
|||
|
|
const App = (props) => {
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
isShow,
|
|||
|
|
wxCode,
|
|||
|
|
path,
|
|||
|
|
showLoading,
|
|||
|
|
showDialog,
|
|||
|
|
gold,
|
|||
|
|
experience,
|
|||
|
|
next_game,
|
|||
|
|
// userCode,
|
|||
|
|
testCase = [],
|
|||
|
|
getWXCode,
|
|||
|
|
last_compile_output,
|
|||
|
|
test_sets_count,
|
|||
|
|
sets_error_count,
|
|||
|
|
getWXCodeTestCase,
|
|||
|
|
restoreWXCode,
|
|||
|
|
updateWXCodeForEditor,
|
|||
|
|
updateWXCodeForInterval,
|
|||
|
|
evaluateWxCode,
|
|||
|
|
showWXCodeTextCase,
|
|||
|
|
changeWXCodeEvaluateLoading,
|
|||
|
|
changeWXCodeEvaluateDialog
|
|||
|
|
} = props;
|
|||
|
|
|
|||
|
|
const {identifier} = props.match.params;
|
|||
|
|
// 获取路径参数
|
|||
|
|
const setCookier = () => {
|
|||
|
|
// const _params = window.location.search;
|
|||
|
|
// if (_params) {
|
|||
|
|
// let _search = _params.split('?')[1];
|
|||
|
|
// _search.split('&').forEach(item => {
|
|||
|
|
// // console.log(item);
|
|||
|
|
// const _arr = item.split('=');
|
|||
|
|
// cookie.remove(_arr[0], {
|
|||
|
|
// path: '/',
|
|||
|
|
// domain: '.educoder.net'
|
|||
|
|
// });
|
|||
|
|
// cookie.save(_arr[0], _arr[1], {
|
|||
|
|
// path: '/',
|
|||
|
|
// domain: '.educoder.net'
|
|||
|
|
// });
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
setCookier();
|
|||
|
|
const [isActive, setIsActive] = useState(-1);
|
|||
|
|
const [tip, setTip] = useState('');
|
|||
|
|
const [codes, setCodes] = useState(wxCode);
|
|||
|
|
// const [showInfo, setShowInfo] = useState(false);
|
|||
|
|
// const [isVisible, setIsVisible] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (codes !== props.wxCode) {
|
|||
|
|
setCodes(props.wxCode);
|
|||
|
|
}
|
|||
|
|
}, [props]);
|
|||
|
|
const editorRef = useRef(null);
|
|||
|
|
let timer = null;
|
|||
|
|
|
|||
|
|
const loadResult = (identifier) => {
|
|||
|
|
// 加载代码块内容
|
|||
|
|
getWXCode(identifier);
|
|||
|
|
// 加载测试集
|
|||
|
|
const params = {
|
|||
|
|
path,
|
|||
|
|
status: 0,
|
|||
|
|
retry: 1
|
|||
|
|
};
|
|||
|
|
getWXCodeTestCase(identifier, params);
|
|||
|
|
}
|
|||
|
|
useEffect(() => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
setCookier();
|
|||
|
|
loadResult(identifier);
|
|||
|
|
}, 0);
|
|||
|
|
}, []);
|
|||
|
|
// 关闭
|
|||
|
|
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);
|
|||
|
|
}, 5000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭单个测试集
|
|||
|
|
const handleCloseItem = (i, flag) => {
|
|||
|
|
if (!flag) return;
|
|||
|
|
setIsActive(isActive === i ? -1 : i);
|
|||
|
|
}
|
|||
|
|
// 初始化
|
|||
|
|
const handleResetCode = () => {
|
|||
|
|
clearInterval(timer);
|
|||
|
|
timer = null;
|
|||
|
|
const result = window.confirm('你在本文件中修改的内容将丢失, 是否确定重新加载初始代码？');
|
|||
|
|
if (result) {
|
|||
|
|
setTip('初始化中...');
|
|||
|
|
changeWXCodeEvaluateLoading(true);
|
|||
|
|
identifier && restoreWXCode(identifier, { path });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 评测
|
|||
|
|
const handleEvalateCode = () => {
|
|||
|
|
changeWXCodeEvaluateLoading(true);
|
|||
|
|
evaluateWxCode(identifier, path);
|
|||
|
|
setTip('评测中...');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭弹框
|
|||
|
|
const handleCloseDialog = () => {
|
|||
|
|
changeWXCodeEvaluateDialog(false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 查看测试集
|
|||
|
|
const handleClickShowResult = () => {
|
|||
|
|
showWXCodeTextCase(true);
|
|||
|
|
changeWXCodeEvaluateDialog(false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下一关
|
|||
|
|
const handleClickNext = () => {
|
|||
|
|
changeWXCodeEvaluateDialog(false);
|
|||
|
|
loadResult(next_game);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const tcclasses = isShow ? `wx-code-test-case active` : 'wx-code-test-case';
|
|||
|
|
const loading = showLoading ? 'code-evaluate-loading active' : 'code-evaluate-loading';
|
|||
|
|
const dialog = showDialog ? 'pass-dialog active' : 'pass-dialog';
|
|||
|
|
const _val = +sets_error_count === 0;
|
|||
|
|
let resultTxt = (_val) ? '全部通过' : `${sets_error_count}组测试结果不匹配`;
|
|||
|
|
const iclasses = _val ? 'iconfont icon-wancheng 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';
|
|||
|
|
const resultFlag = !!last_compile_output ? 'wxcode-test-result active' : 'wxcode-test-result';
|
|||
|
|
// console.log('==========>>>>>>>> 评测结果样式', last_compile_output, resultFlag);
|
|||
|
|
return (
|
|||
|
|
<div className="wx-code-area">
|
|||
|
|
<div className="wx-code-flex">
|
|||
|
|
<div className="wx-code-item">
|
|||
|
|
<MonacoEditor
|
|||
|
|
height="100%"
|
|||
|
|
width="100%"
|
|||
|
|
language="python"
|
|||
|
|
value={codes}
|
|||
|
|
options={{
|
|||
|
|
selectOnLineNumbers: true,
|
|||
|
|
automaticLayout: true,
|
|||
|
|
fontSize: `42px`
|
|||
|
|
}}
|
|||
|
|
theme='dark'
|
|||
|
|
editorDidMount={handleEditorChange}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="wx-code-test">
|
|||
|
|
<div className="flex-btn">
|
|||
|
|
<span className="icon-btn" onClick={handleResetCode}>
|
|||
|
|
<i className="iconfont icon-chushihua icon"></i>
|
|||
|
|
<span className="icon-txt">初始化</span>
|
|||
|
|
</span>
|
|||
|
|
<span className="icon-btn" onClick={handleClickTestCase}>
|
|||
|
|
<i className="iconfont icon-ceshiji icon"></i>
|
|||
|
|
<span className="icon-txt">测试集</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
{/* <Button type="primary" shape="circle">评测</Button> */}
|
|||
|
|
<button className="wx-pt-btn" onClick={handleEvalateCode}>评测</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{/* 测试集 */}
|
|||
|
|
<div className={tcclasses}>
|
|||
|
|
<div className="text-case-list">
|
|||
|
|
<div className="list-header">
|
|||
|
|
<span className="header-title">共{testCase.length}个测试用例</span>
|
|||
|
|
<span className="header-close" onClick={handleCloseTestCase}>关闭</span>
|
|||
|
|
</div>
|
|||
|
|
<div className={resultFlag}>
|
|||
|
|
<i className={iclasses}></i>
|
|||
|
|
<span className={tclasses}>{test_sets_count - sets_error_count}/{test_sets_count}</span>
|
|||
|
|
<span className={`${tclasses} result-txt-desc`}>{resultTxt}</span>
|
|||
|
|
</div>
|
|||
|
|
<ul className={ulClasses}>
|
|||
|
|
{
|
|||
|
|
testCase.map((item, i) => {
|
|||
|
|
const {input, output, actual_output, is_public, result, compile_success} = 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 (
|
|||
|
|
<li className="case-item" key={`item_${i}`}>
|
|||
|
|
<div className="case-item-header" onClick={() => handleCloseItem(i, is_public)}>
|
|||
|
|
<h2 className={headerClasses}>
|
|||
|
|
<i className={iconclasses}></i>
|
|||
|
|
测试集{i + 1}
|
|||
|
|
</h2>
|
|||
|
|
{
|
|||
|
|
is_public
|
|||
|
|
? compile_success > 0
|
|||
|
|
? result ? <span className="iconfont icon-wancheng case_item_success"></span>
|
|||
|
|
: <span className="iconfont icon-jinggao1 case_item_fail"></span>
|
|||
|
|
: ''
|
|||
|
|
:
|
|||
|
|
<span className="case-item-tips">隐藏测试集，暂不支持解锁和查看 </span>
|
|||
|
|
// is_public
|
|||
|
|
// ? result ? <span className="iconfont icon-wancheng case_item_success"></span>
|
|||
|
|
// : <span className="iconfont icon-jinggao1 case_item_fail"></span>)
|
|||
|
|
// : (
|
|||
|
|
// 隐藏测试集，暂不支持解锁和查看
|
|||
|
|
// {/* {result
|
|||
|
|
// ? <span className="iconfont icon-wancheng case_item_success"></span>
|
|||
|
|
// : <span className="iconfont icon-jinggao1 case_item_fail"></span>
|
|||
|
|
// } */}
|
|||
|
|
// </span>)
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className={_classes}>
|
|||
|
|
<span className="desc-title">测试输入</span>
|
|||
|
|
<span className="test-input">{input || '-'}</span>
|
|||
|
|
<span className="desc-title">预期输出</span>
|
|||
|
|
{/* <textarea rows="5">预期输出</textarea> */}
|
|||
|
|
<TextArea
|
|||
|
|
readOnly={true}
|
|||
|
|
className="text-area-style"
|
|||
|
|
value={output}
|
|||
|
|
onChange={this.onChange}
|
|||
|
|
placeholder="Controlled autosize"
|
|||
|
|
autoSize={{ minRows: 3, maxRows: 6 }}
|
|||
|
|
/>
|
|||
|
|
{/* <TextArea rows={5} className="hope-result">预期输出</TextArea> */}
|
|||
|
|
<span className="desc-title">实际输出</span>
|
|||
|
|
<TextArea
|
|||
|
|
readOnly={true}
|
|||
|
|
className="text-area-style"
|
|||
|
|
value={actual_output}
|
|||
|
|
autoSize={{ minRows: 1, maxRows: 3 }}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{/* 测评中 */}
|
|||
|
|
<div className={loading}>
|
|||
|
|
<span className="loading-flex">
|
|||
|
|
<Icon className="loading-icon" type="loading" />
|
|||
|
|
<span className="loading-txt">{tip}</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
{/* 通过弹框 */}
|
|||
|
|
<div className={dialog}>
|
|||
|
|
<div className="pass-box">
|
|||
|
|
<div className="pass-img"></div>
|
|||
|
|
<div className="pass-ctx">
|
|||
|
|
<div className="pass-title">{next_game ? '评测通过' : '恭喜通关'}</div>
|
|||
|
|
<p className="pass-value">
|
|||
|
|
金币 <span className="value_color">{gold > 0 ? `+${gold}` : 0}</span>,
|
|||
|
|
经验值 <span className="value_color">{experience > 0 ? `+${experience}` : 0}</span>
|
|||
|
|
</p>
|
|||
|
|
{
|
|||
|
|
next_game
|
|||
|
|
? (
|
|||
|
|
<div className="pass-btn">
|
|||
|
|
<button className="btn btn-first" onClick={handleClickShowResult}>评测结果</button>
|
|||
|
|
<button className="btn btn-second" onClick={handleClickNext}>下一关</button>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
: (
|
|||
|
|
<div className="pass-btn-all">
|
|||
|
|
<button className="btn btn-second" onClick={handleClickShowResult}>评测结果</button>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<i className="iconfont icon-roundclose icon_close" onClick={handleCloseDialog}></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const mapStateToProps = (state) => {
|
|||
|
|
const {
|
|||
|
|
path,
|
|||
|
|
isShow,
|
|||
|
|
wxCode,
|
|||
|
|
userCode,
|
|||
|
|
gold,
|
|||
|
|
experience,
|
|||
|
|
next_game,
|
|||
|
|
testCase,
|
|||
|
|
showLoading,
|
|||
|
|
showDialog,
|
|||
|
|
last_compile_output,
|
|||
|
|
test_sets_count,
|
|||
|
|
sets_error_count
|
|||
|
|
} = state.wxcodeReducer;
|
|||
|
|
// console.log(state);
|
|||
|
|
return {
|
|||
|
|
path,
|
|||
|
|
isShow,
|
|||
|
|
wxCode,
|
|||
|
|
userCode,
|
|||
|
|
gold,
|
|||
|
|
experience,
|
|||
|
|
next_game,
|
|||
|
|
testCase,
|
|||
|
|
showLoading,
|
|||
|
|
showDialog,
|
|||
|
|
last_compile_output,
|
|||
|
|
test_sets_count,
|
|||
|
|
sets_error_count
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const mapDispatchToProps = (dispatch) => ({
|
|||
|
|
getWXCode: (identifier) => dispatch(actions.getWXCode(identifier)),
|
|||
|
|
getWXCodeTestCase: (identifier, params) => dispatch(actions.getWXCodeTestCase(identifier, params)),
|
|||
|
|
restoreWXCode: (identifier, params) => dispatch(actions.restoreWXCode(identifier, params)),
|
|||
|
|
updateWXCodeForEditor: (code) => dispatch(actions.updateWXCodeForEditor(code)),
|
|||
|
|
updateWXCodeForInterval: (identifier, path) => dispatch(actions.updateWXCodeForInterval(identifier, path)),
|
|||
|
|
evaluateWxCode: (identifier, path) => dispatch(actions.evaluateWxCode(identifier, path)),
|
|||
|
|
showWXCodeTextCase: (flag) => dispatch(actions.showWXCodeTextCase(flag)),
|
|||
|
|
changeWXCodeEvaluateLoading: (flag) => dispatch(actions.changeWXCodeEvaluateLoading(flag)),
|
|||
|
|
changeWXCodeEvaluateDialog: (flag) => dispatch(actions.changeWXCodeEvaluateDialog(flag))
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
export default connect(
|
|||
|
|
mapStateToProps,
|
|||
|
|
mapDispatchToProps
|
|||
|
|
)(App);
|