m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix

Browse Source
dev_aliyun2
harry 5 years ago
parent 670c123dea
commit cd8fda27aa
25 changed files with 80 additions and 1024 deletions
Show Stats Download Patch File Download Diff File

2
public/react/config-overrides.js
Unescape View File

@ -72,7 +72,7 @@ module.exports = override(
style: true
}),
addWebpackPlugin(new MonacoWebpackPlugin({})),
addWebpackPlugin(instance),
// addWebpackPlugin(instance),
(config) => {
config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
if (process.env.NODE_ENV !== "development") {

82
public/react/src/App.js
Unescape View File

@ -264,16 +264,6 @@ 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'),
// loading: Loading,
// });
class App extends Component {
constructor(props) {
super(props)
@ -559,9 +549,9 @@ class App extends Component {
render={
(props) => {
return (<NewCompetitions {...this.props} {...props} {...this.state} />)
}
}></Route>
return (<NewCompetitions {...this.props} {...props} {...this.state} />)
}
}></Route>
{/*/>*/}
<Route path="/shixuns/new" component={Newshixuns}>
@ -649,21 +639,21 @@ class App extends Component {
}
/>
{/*<Route*/}
{/* path="/interesse" component={Interestpage}*/}
{/*/>*/}
<Route path="/shixuns/new" component={Newshixuns}>
</Route>
<Route path="/colleges/:id/statistics"
render={
(props) => (<College {...this.props} {...props} {...this.state} />)
} />
{/* jupyter */}
<Route path="/tasks/:identifier/jupyter/"
render={
(props) => {
return (<JupyterTPI {...this.props} {...props} {...this.state} />)
}}
{/* path="/interesse" component={Interestpage}*/}
{/*/>*/}
<Route path="/shixuns/new" component={Newshixuns}>
</Route>
<Route path="/colleges/:id/statistics"
render={
(props) => (<College {...this.props} {...props} {...this.state} />)
} />
{/* jupyter */}
<Route path="/tasks/:identifier/jupyter/"
render={
(props) => {
return (<JupyterTPI {...this.props} {...props} {...this.state} />)
}}
/>
<Route path="/myproblems/record_detail/:id"
@ -695,22 +685,22 @@ class App extends Component {
} />
<Route path="/myproblems/:id/:tab?"
render={
(props) => (<StudentStudy {...this.props} {...props} {...this.state} />)
} />
render={
(props) => (<StudentStudy {...this.props} {...props} {...this.state} />)
} />
<Route path="/problemset/edit/:id"
render={
(props) => (<Questionitem_banks {...this.props} {...props} {...this.state} />)
} />
render={
(props) => (<Questionitem_banks {...this.props} {...props} {...this.state} />)
} />
<Route path="/problemset/newitem"
render={
(props) => (<Questionitem_banks {...this.props} {...props} {...this.state} />)
} />
render={
(props) => (<Questionitem_banks {...this.props} {...props} {...this.state} />)
} />
<Route path="/problemset/:type"
render={
(props) => (<Headplugselection {...this.props} {...props} {...this.state} />)
} />
render={
(props) => (<Headplugselection {...this.props} {...props} {...this.state} />)
} />
<Route path="/paperlibrary"
render={
(props) => (<Testpaperlibrary {...this.props} {...props} {...this.state} />)
@ -727,16 +717,10 @@ class App extends Component {
} />
<Route path="/problemset"
render={
(props) => (<Headplugselection {...this.props} {...props} {...this.state} />)
}/>
{/*<Route path="/wxcode/:identifier?" component={WXCode}*/}
{/* render={*/}
{/* (props)=>(<WXCode {...this.props} {...props} {...this.state}></WXCode>)*/}
{/* }*/}
{/*/>*/}
render={
(props) => (<Headplugselection {...this.props} {...props} {...this.state} />)
} />
<Route exact path="/"
// component={ShixunsHome}
render={
(props) => (<ShixunsHome {...this.props} {...props} {...this.state}></ShixunsHome>)
}

2
public/react/src/common/components/comment/CommentItem.js
Unescape View File

@ -6,7 +6,7 @@
* @LastEditors : tangjiang
* @LastEditTime : 2019-12-27 11:05:17
*/
import './index.scss';
import './index.less';
import React, { useState } from 'react';
import CommentIcon from './CommentIcon';
import { getImageUrl, CNotificationHOC } from 'educoder'

2
public/react/src/common/educoder.js
Unescape View File

@ -2,7 +2,7 @@
export {
getImageUrl as getImageUrl, getmyUrl as getmyUrl, getRandomNumber as getRandomNumber, getUrl as getUrl, publicSearchs as publicSearchs, getRandomcode as getRandomcode, getUrlmys as getUrlmys, getUrl2 as getUrl2, setImagesUrl as setImagesUrl
, getUploadActionUrl as getUploadActionUrl, getUploadActionUrltwo as getUploadActionUrltwo, getUploadActionUrlthree as getUploadActionUrlthree, getUploadActionUrlOfAuth as getUploadActionUrlOfAuth
, getTaskUrlById as getTaskUrlById, TEST_HOST, htmlEncode as htmlEncode
, getTaskUrlById as getTaskUrlById, TEST_HOST, htmlEncode as htmlEncode, getupload_git_file as getupload_git_file
} from './UrlTool';
export { default as setmiyah } from './Component';

2
public/react/src/modules/courses/coursesHome/CoursesHome.js
Unescape View File

@ -6,7 +6,7 @@ import { Pagination } from 'antd';
import LoadingSpin from '../../../common/LoadingSpin';
import UpgradeModals from '../../modals/UpgradeModals';
import './css/CoursesHome.css';
import '../../tpm/shixuns/shixun-keyword-list.scss';
import '../../tpm/shixuns/shixun-keyword-list.less';
import btnNew from './btn-new.png'
import btnJoin from './btn-join.png'

40
public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index2.js
Unescape View File

@ -9,7 +9,7 @@
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';
import './index.scss';
import './index.less';
import React, { useState, useImperativeHandle, useRef, useEffect } from 'react';
import { Form, Input, InputNumber, Button, Select } from 'antd';
import { connect } from 'react-redux';
@ -18,7 +18,7 @@ import QuillEditor from '../../../quillEditor';
import actions from '../../../../../redux/actions';
import CONST from '../../../../../constants';
const {jcLabel} = CONST;
const { jcLabel } = CONST;
const { Option } = Select;
const FormItem = Form.Item;
@ -31,12 +31,12 @@ const maps = {
],
difficult: [
{ title: '简单', key: '1' },
{ title: '中等', key: '2'},
{ title: '中等', key: '2' },
{ title: '困难', key: '3' }
],
category: [
{ title: '程序设计', key: '1' },
{ title: '算法', key: '2'}
{ title: '算法', key: '2' }
],
openOrNot: [
{ title: '公开', key: '1' },
@ -44,7 +44,7 @@ const maps = {
]
}
function EditTab (props, ref) {
function EditTab(props, ref) {
const {
form,
@ -89,7 +89,7 @@ function EditTab (props, ref) {
};
// 向外暴露的方法
useImperativeHandle(ref, () => ({
validateForm () {
validateForm() {
props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
getFormData(() => {
@ -119,7 +119,7 @@ function EditTab (props, ref) {
errMsg: ''
}
}
addTestCase({testCase: obj, tcValidate: validateObj});
addTestCase({ testCase: obj, tcValidate: validateObj });
// TODO 点击新增时，需要滚到到最底部
// this.editorRef.current.scrollTop
// const oDiv = this.editorRef.current;
@ -185,7 +185,7 @@ function EditTab (props, ref) {
{ required: true, message: '任务名称不能为空' }
],
initialValue: ojForm.name
})(<Input placeholder="请输入任务名称"/>)
})(<Input placeholder="请输入任务名称" />)
}
</FormItem>
@ -217,11 +217,11 @@ function EditTab (props, ref) {
],
initialValue: ojForm.description
})(<QuillEditor
style={{ height: '300px' }}
placeholder="请输入描述信息"
htmlCtx={ojForm.description}
onEditorChange={handleChangeDescription}
/>)
style={{ height: '300px' }}
placeholder="请输入描述信息"
htmlCtx={ojForm.description}
onEditorChange={handleChangeDescription}
/>)
}
</FormItem>
@ -295,19 +295,19 @@ function EditTab (props, ref) {
</Form>
{/* 添加测试用例 */}
<div className="test_demo_title">
<h2>测试用例</h2>
<Button type="primary" onClick={handleAddTest}>添加测试用例</Button>
</div>
<div className="test_demo_ctx">
{ renderTestCase() }
</div>
<h2>测试用例</h2>
<Button type="primary" onClick={handleAddTest}>添加测试用例</Button>
</div>
<div className="test_demo_ctx">
{renderTestCase()}
</div>
</div>
);
}
const mapStateToProps = (state) => {
const ojFormReducer = state.ojFormReducer;
const {ojForm, position, testCases, testCasesValidate} = ojFormReducer;
const { ojForm, position, testCases, testCasesValidate } = ojFormReducer;
return {
ojForm,
testCases,

2
public/react/src/modules/developer/newOrEditTask/rightpane/index.js
Unescape View File

@ -6,7 +6,7 @@
* @LastEditors : tangjiang
* @LastEditTime : 2019-12-27 19:33:50
*/
import './index.scss';
import './index.less';
import React from 'react';
import { connect } from 'react-redux';
import MyMonacoEditor from '../../components/myMonacoEditor';

2
public/react/src/modules/developer/recordDetail/index.less
Unescape View File

@ -1,4 +1,4 @@
@import '../split_pane_resizer.scss';
@import '../split_pane_resizer.less';
.result_code_area .monaco-editor .line-numbers {
color: #999 !important;

2
public/react/src/modules/page/Header.js
Unescape View File

@ -1,4 +1,4 @@
import './header.scss';
import './header.less';
import React, { Component } from 'react';
import { Tooltip, Drawer } from 'antd'

14
public/react/src/modules/page/MainContent.js
Unescape View File

@ -10,10 +10,9 @@ import CodeEvaluateView from './main/CodeEvaluateView';
import ChooseRepositoryView from './main/ChooseRepositoryView';
import ChooseEvaluateView from './main/ChooseEvaluateView'
import { CircularProgress } from 'material-ui/Progress';
import Button from 'material-ui/Button';
import VNCContainer from './VNCContainer'
import { connect } from 'react-redux';
import { Button } from 'antd'
import './tpiPage.css';
import './tpiPageForMobile.css';
@ -114,13 +113,6 @@ class MainContent extends Component {
<div className="split-panel--second -layout -vertical -flex -relative -flex-basic50"
id="game_right_contents" style={{ width: '996px' }}>
{/* 旧版本、评测等待提示--更新提示块*/}
{/*<div className="tip-panel-animate clearfix user_bg_shadow bor-grey-e">
<div className="fl tip-img">
<img src="/images/bigdata/logo-1.png"></img>
</div>
<div className="fl pr tip-right-con" id="update_game_tip"></div>
</div>*/}
{showIframeContent && vnc_url ?
<CodeRepositoryViewContainer {...this.props} isOnlyContainer={true}>
@ -161,8 +153,6 @@ class MainContent extends Component {
?
<React.Fragment>
<div style={{ display: (codeLoading ? 'block' : 'none'), textAlign: 'center' }}>
<CircularProgress size={40} thickness={3}
style={{ marginLeft: 'auto', marginRight: 'auto', marginTop: '18%' }} />
<span style={{ color: '#ddd', display: 'block' }}>正在加载中，请稍后...</span>
</div>
<div style={{ display: (codeLoading ? 'none' : 'block') }}>
@ -180,7 +170,7 @@ class MainContent extends Component {
<div className="split-panel--second -layout -vertical -flex -relative -bg-black -flex-basic60"
id="games_valuation_contents" style={{ height: '258px', minHeight: '85px' }}>
{/* 测试结果、评测信息区域 */}
{loading ? <CircularProgress size={40} thickness={3} style={{ marginLeft: 'auto', marginRight: 'auto', marginTop: '10%', display: 'block' }} />
{loading ? <p>loading... </p>
:
st === 0
? <CodeEvaluateView output_sets={output_sets} latest_output={latest_output}

6
public/react/src/modules/page/header.scss
Unescape View File

@ -1,6 +0,0 @@
.headerRight .exit_btn{
color: rgba(237,237,237,1);
&:hover{
// color: #fff;
}
}

2
public/react/src/modules/paths/statics/DisplayTableData.js
Unescape View File

@ -6,7 +6,7 @@
* @LastEditors : tangjiang
* @LastEditTime : 2020-01-14 16:30:05
*/
import './index.scss';
import './index.less';
import React, { useRef, useState, useEffect } from 'react';
import { Table } from 'antd';
import ReactDom from 'react-dom';

2
public/react/src/modules/paths/statics/StaticNumberAndTxt.js
Unescape View File

@ -6,7 +6,7 @@
* @LastEditors : tangjiang
* @LastEditTime : 2020-01-10 11:15:28
*/
import './index.scss';
import './index.less';
import React from 'react';
import { Tooltip } from 'antd';
const numberal = require('numeral');

8
public/react/src/modules/paths/statics/index.js
Unescape View File

@ -6,7 +6,7 @@
* @LastEditors : tangjiang
* @LastEditTime : 2020-01-14 17:01:32
*/
import './index.scss';
import './index.less';
import React, { useEffect } from 'react';
import StaticNumberAndTxt from './StaticNumberAndTxt';
import DisplayTableData from './DisplayTableData';
@ -200,8 +200,8 @@ const App = (props) => {
sorter: (a, b) => a.cost_time - b.cost_time
}
];
useEffect(() => {
changeParams({
page: 1,
@ -327,7 +327,7 @@ const mapStateToProps = (state) => {
other_info,
total,
}
};
const mapDispatchToProps = (dispatch) => ({

156
public/react/src/modules/paths/statics/index.scss
Unescape View File

@ -1,156 +0,0 @@
.static_wrap {
.static_section_header,
.static_section_table{
background-color: #fff;
border-radius: 5px;
padding: 30px 20px 0;
margin-top: 20px;
}
.static_section_table{
margin-bottom: 140px;
padding-top: 5px;
}
.static_section_header{
.header_title{
line-height: 1;
.title-p,
.title-sub{
display: inline-block;
vertical-align: bottom;
color: #303133;
}
.title-p{
position: relative;
font-size: 20px;
height: 20px;
line-height: 1;
font-weight: bold;
&::before{
position: absolute;
content: '';
border-left: 1px solid rgba(192,196,204,1);
right: -10px;
top: 2px;
bottom: 0px;
margin-left: 10px;
}
}
.title-sub{
margin-left: 20px;
font-size: 16px;
max-width: 1000px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
}
.header-number{
height: 158px;
}
.header-flex{
display: flex;
justify-content: space-around;
align-items: center;
.static-flex-item{
display: flex;
flex-direction: column;
justify-content: center;
.item-count{
font-size: 24px;
color: #4CACFF;
font-weight: bold;
}
.item-txt{
font-size: 14px;
line-height: 1.5;
text-align: center;
color: #909399;
margin-top: 20px;
.icon{
margin-left: 5px;
font-size: 16px !important;
}
}
}
}
}
// .static_table{
// // .ant-table-header{
// // overflow: hidden !important;
// // margin-bottom: 0px !important;
// // }
// // .ant-table-row-cell-break-word{
// // background: rgba(241,248,255,1) !important;
// // }
// // .overflow_hidden{
// // max-width: 280px;
// // overflow: hidden;
// // text-overflow:ellipsis;
// // white-space: nowrap;
// // }
// }
.static_table{
.ant-table-header{
margin-bottom: 0px !important;
overflow: hidden !important;
}
.ant-table-thead{
th{
background: rgba(241,248,255,1);
}
.ant-table-column-title{
color: #303133;
font-weight: bold;
}
}
.ant-table-tbody tr:nth-child(2n) {
td{
background: rgba(241,248,255,.4);
}
}
.ant-table-tbody tr td{
color: #303133;
}
}
.ant-table-footer{
background-color: rgba(241,248,255,1);
padding: 16px 0px;
}
.footer_list{
display: flex;
// background: #fff;
box-sizing: border-box;
text-align: center;
li{
color: #303133;
}
// border-top: 1px solid green;
.footer_item{
width: 150px;
}
.footer_item:not(:first-child) {
padding-right: 10px;
}
.footer-total{
width: 100px;
}
.footer_name{
flex: 1;
}
}
}
.tool-clazz{
max-width: 200px !important;
}

18
public/react/src/modules/question/component/QuestionModalPicture.js
Unescape View File

@ -1,16 +1,16 @@
import React, { Component } from 'react';
import {getImageUrl} from 'educoder';
import { Modal,Icon} from 'antd';
import { getImageUrl } from 'educoder';
import { Modal, Icon } from 'antd';
import axios from 'axios';
import './../questioncss/questioncom.css'
import './../../../common/components/comment/index.scss';
import './../../../common/components/comment/index.less';
//立即申请试用
class QuestionModalPicture extends Component {
constructor(props) {
super(props);
this.state={
this.state = {
}
}
@ -18,7 +18,7 @@ class QuestionModalPicture extends Component {
render() {
return(
return (
<Modal
keyboard={false}
closable={true}
@ -26,7 +26,7 @@ class QuestionModalPicture extends Component {
destroyOnClose={true}
title=""
centered={true}
visible={this.props.url?true:false}
visible={this.props.url ? true : false}
onCancel={this.props.handleClose}
>
{/* 显示上传的图片信息 */}
@ -42,12 +42,12 @@ class QuestionModalPicture extends Component {
`
}
</style>
<div className="show_upload_image intermediatecenter" style={{ display: this.props.url ? 'block' : 'none'}}>
<div className="show_upload_image intermediatecenter" style={{ display: this.props.url ? 'block' : 'none' }}>
{/*<Icon type="close" className="image_close" onClick={this.props.handleClose}/>*/}
<div className="image_info intermediatecenter">
<img className="image" style={{
width:"100%"
}} src={ this.props.url} alt=""/>
width: "100%"
}} src={this.props.url} alt="" />
</div>
</div>
</Modal>

8
public/react/src/modules/tpm/shixunchild/Shixunfork_list.js
Unescape View File

@ -1,13 +1,7 @@
import React, { Component } from 'react';
import { Redirect } from 'react-router';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Switch } from 'antd';
import PropTypes from 'prop-types';
import classNames from 'classnames'
import TPMIndexHOC from '../TPMIndexHOC'
@ -15,13 +9,11 @@ import { SnackbarHOC } from 'educoder'
import ShixunCard from '.././shixuns/ShixunCard';
import { Pagination, Row, Col, Rate } from 'antd';
import './shixunchildCss/Shixunfork_list.css';
import 'antd/lib/rate/style/index.css';
const $ = window.$;
class Shixunforklist extends Component {
constructor(props) {

2
public/react/src/modules/tpm/shixuns/shixun-card.js
Unescape View File

@ -1,7 +1,7 @@
import React from 'react';
import { getImageUrl, setImagesUrl, getUrl } from 'educoder';
import { Spin, Tooltip, Rate, Pagination } from 'antd';
import './shixunCss/shixunCard.scss';
import './shixunCss/shixunCard.less';
export default ({ middleshixundata, pagination, typepvisible, pages, totalcount, shixunsPage }) => {
function onPageChange(number) {

2
public/react/src/modules/tpm/shixuns/shixun-keyword-list.jsx
Unescape View File

@ -1,6 +1,6 @@
import React, { useState, Fragment } from 'react';
import { Input, Icon } from 'antd'
import './shixun-keyword-list.scss'
import './shixun-keyword-list.less'
function AddonAfter({ callback }) {
return <a className='btn-search' onClick={callback}>

0
public/react/src/modules/tpm/shixuns/shixun-keyword-list.scss → public/react/src/modules/tpm/shixuns/shixun-keyword-list.less
Unescape View File

2
public/react/src/modules/tpm/shixuns/shixun-search-bar/index.jsx
Unescape View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'
import { Menu, Dropdown } from 'antd'
import 'antd/lib/style/index.css';
import '../shixunCss/shixun-search-bar.scss'
import '../shixunCss/shixun-search-bar.less'
import axios from 'axios'
import A from './A.jsx'

0
public/react/src/modules/tpm/shixuns/shixunCss/shixun-search-bar.scss → public/react/src/modules/tpm/shixuns/shixunCss/shixun-search-bar.less
Unescape View File

0
public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.scss → public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.less
Unescape View File

381
public/react/src/modules/wxcode/index.js
Unescape View File

@ -1,381 +0,0 @@
/*
* @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);

367
public/react/src/modules/wxcode/index.scss
Unescape View File

@ -1,367 +0,0 @@
.wx-code-area{
height: 100vh;
overflow: hidden;
.wx-code-flex{
display: flex;
position: relative;
flex-direction: column;
height: 100%;
}
.wx-code-item{
flex: 1;
}
.wx-code-test{
display: flex;
justify-content: space-between;
align-items: center;
height: 150px;
background-color: #052645;
padding: 0 50px;
}
.flex-btn{
display: flex;
.icon-btn{
display: flex;
flex-direction: column;
color: #2EA4FF;
align-items: center;
.icon{
// font-size: 24px !important;
// transform: scale(2.4);
// line-height: 2;
font-size: 34px !important;
transform: scale(1.8);
position: relative;
// top: 10px;
}
// .icon-reset{
// transform: scale(2.4);
// }
// .icon:first-child{
// transform: scale((3));
// }
&:last-child{
margin-left: 60px;
}
.icon-txt{
// margin-top: 5px;
font-size: 32px;
}
}
}
.wx-pt-btn{
border: none;
outline: none;
border-radius: 9999px;
padding: 0 50px;
line-height: 92px;
font-size: 38px;
color: #fff;
background:#2EA4FF;
letter-spacing: 2;
}
.wx-code-test-case{
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
transform: translateY(100%);
transition: transform, opacity .3s;
opacity: 0;
// border-top-left-radius: 16px;
// border-top-right-radius: 16px;
&::before{
position: absolute;
width: 100%;
height: 100%;
content: '';
background: rgba(0,0,0,.6);
}
.text-case-list{
position: absolute;
width: 100%;
bottom: 0;
top: 150px;
background:rgba(1,14,31,1);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border:2px solid rgba(33,56,87,1);
color: #fff;
}
.list-header{
display: flex;
justify-content: space-between;
align-items: center;
height: 88px;
padding: 30px;
box-sizing: border-box;
border-bottom: 2px solid #213857;
.header-title{
color:#637DA6;
// font-size: 24px;
font-size: 48px;
}
.header-close{
// font-size: 42px;
font-size: 48px;
color: #2EA4FF;
}
}
.wxcode-test-result{
// display: flex;
display: none;
height: 72px;
// background: gold;
align-items: center;
padding: 0 30px;
.success{
color: rgba(68,209,95,1);
}
.fail{
color: rgba(196, 79, 78, 1);
}
.icon{
font-size: 48px !important;
position: relative;
// top: -8px;
margin-right: 10px;
}
.result-txt{
// font-size: 34px;
font-size: 48px;
}
.result-txt-desc{
max-width: 500px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
margin: 20px;
}
&.active{
display: flex;;
}
}
.case-list{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0px;
overflow: auto;
margin-top: 88px;
padding: 0 30px 30px;
// margin: 88px 30px 0;
.case-item{
position: relative;
margin-top: 30px;
border-radius: 8px;
background:rgba(23,39,64,1);
padding: 30px;
}
&.hasResult{
margin-top: 170px;
.case-item:first-child{
margin-top: 0;
}
}
.case-item-header{
display: flex;
justify-content: space-between;
align-items: center;
.case_item_success,
.case_item_fail{
font-size: 24px !important;
transform: scale(2);
}
.case_item_success{
color: rgba(68,209,95,1);
}
.case_item_fail{
color: rgba(196, 79, 78, 1);
}
.case-item-tips{
color: #C67676;
font-size: 38px;
}
}
.item-header-desc{
font-size: 48px;
color: #405D8C;
line-height: 1.5;
// background: gold;
.icon{
position: relative;
top: -4px;
font-size: 42px !important;
margin-right: 10px;
}
&.active{
color: #fff;
}
}
.case-item-tips{
font-size: 42px;
}
.case-item-desc{
display: none;
flex-direction: column;
font-size: 42px;
line-height: 1.5;
&.active{
display: flex;
}
}
.desc-title{
color: #637DA6;
line-height: 2;
font-size: 48px;
}
.text-area-style{
background:#010E1F !important;
color: #fff;
font-size: 48px;
line-height: 1.5;
border: none;
}
}
&.active{
transform: translateY(0);
opacity: 1;
// .item-header-desc{
// color: #fff;
// }
}
}
.code-evaluate-loading,
.pass-dialog{
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
justify-content: center;
align-items: center;
&::before{
position: absolute;
width: 100%;
height: 100%;
content: '';
background: rgba(0,0,0,.5);
}
&.active{
display: flex;
}
}
.code-evaluate-loading{
// display: none;
.loading-flex{
display: flex;
position: absolute;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
.loading-icon{
font-size: 100px !important;
}
.loading-txt{
font-size: 42px;
}
}
}
.pass-dialog{
flex-direction: column;
.pass-box{
position: relative;
z-index: 10;
background: #fff;
border-radius: 15px;
width: 490px;
height: 490px;
overflow: hidden;
}
.pass-img{
height: 200px;
background: url(../../images/wx-head.png) center center no-repeat;
// background: url(../../../public/images/wx-head.png) center center no-repeat;
}
.pass-ctx{
display: flex;
flex-direction: column;
// justify-content: center;
justify-content: space-between;
align-items: center;
height: 290px;
padding: 40px 0;
.pass-title,
.pass-value,
.pass-btn .btn,
.pass-btn-all .btn{
font-size: 42px;
line-height: 1.5;
}
.pass-value{
color: #888888;
.value_color{
color: rgb(234, 185, 35);
}
}
.pass-btn,
.pass-btn-all{
display: flex;
justify-content: space-between;
// background: gold;
padding: 0 40px;
width: 100%;
margin-top: 10px;
}
.pass-btn-all{
justify-content: center;
}
.btn{
outline: none;
border-radius: 999px;
padding: 0 30px;
height: 70px;
&.btn-first{
border: 1px solid #2EA4FF;
color: #2EA4FF;
}
&.btn-second{
background-color: #2EA4FF;
color: #fff;
}
}
.pass-title{
color: #2EA4FF;
}
}
}
.icon_close{
display: block;
position: relative;
z-index: 10;
color: #555;
font-size: 100px!important;
}
}
Write Preview
Loading…
Cancel
Save