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

修复编辑器背景与重复的代码更新提示

Browse Source
video_transcode
harry 5 years ago
parent a9a74219b5
commit 862135ef8a
7 changed files with 123 additions and 125 deletions
Show Stats Download Patch File Download Diff File

27
public/react/src/modules/developer/components/monacoSetting/index.js
Unescape View File

@ -7,7 +7,7 @@
* @LastEditTime : 2019-12-27 10:36:54
*/
import React, { useState } from 'react';
import { fromStore, toStore } from 'educoder';
import { fromStore, toStore } from 'educoder';
// import { Icon } from 'antd';
// import { Select } from 'antd';
// const { Option } = Select;
@ -17,15 +17,15 @@ const SettingDrawer = (props) => {
* type: '', // 类型: 目录 select 和 文本
* content: [] // 显示的内容 { text: '' , value: string | [{ key: 1, value: '', text: '' }] }
*/
const [fontSize, setFontSize] = useState(() => {
return +fromStore('oj_fontSize') || 14;
});
const [theme, setTheme] = useState(() => {
return fromStore('oj_theme') || 'dark';
return fromStore('oj_theme') || 'vs-dark';
});
const {title, type = 'label', content = [] } = props;
const { title, type = 'label', content = [] } = props;
// 字体改变时， 方法全名: handleChangeXX, XX 为指定的类型;
const {
@ -39,9 +39,9 @@ const SettingDrawer = (props) => {
}
// 风格改变时
const handleChangeStyle = (value) => {
setTheme(value);
toStore('oj_theme', value);
onChangeTheme && onChangeTheme(value);
setTheme(value);
toStore('oj_theme', value);
onChangeTheme && onChangeTheme(value);
}
const handleSelectChange = (e, type) => {
@ -73,19 +73,20 @@ const SettingDrawer = (props) => {
const child = ctx.value.map((opt, i) => {
return (
<option
key={`key_${i}` || `${opt.value}`}
key={`key_${i}` || `${opt.value}`}
value={opt.value}
>
{opt.text}
</option>
)});
)
});
renderResult = (
<div className={'setting_desc'} key={`sel_${index}`}>
<div className={'setting_desc'} key={`sel_${index}`}>
<span className={'flex_item'}>{ctx.text}</span>
<select defaultValue={defaultValue} style={{ width: '100px'}} onChange={(e) => handleSelectChange(e, ctx.type)}>
<select defaultValue={defaultValue} style={{ width: '100px' }} onChange={(e) => handleSelectChange(e, ctx.type)}>
{child}
</select>
</div>
</div>
);
}
}
@ -94,7 +95,7 @@ const SettingDrawer = (props) => {
return (
<React.Fragment>
<h3 className={'setting_h2'}>{title}</h3>
{ result }
{result}
</React.Fragment>
);
}

64
public/react/src/modules/developer/components/myMonacoEditor/index.scss
Unescape View File

@ -1,96 +1,78 @@
.monaco_editor_area{
.monaco_editor_area {
height: 100%;
background-color: rgba(7,15,25,1);
.code_title{
.code_title {
display: flex;
align-items: center;
background-color: rgba(18,28,36,1);
color: #fff;
height: 56px;
background-color: rgba(18, 28, 36, 1);
padding: 0 20px;
.flex_strict{
.flex_strict {
flex: 1;
}
.flex_normal{
.flex_normal {
color: #E51C24;
cursor: pointer;
margin-right: 20px;
}
.code-icon{
.code-icon {
cursor: pointer;
}
.flex_strict,
.flex_normal,
.code-icon{
.code-icon {
color: #666;
}
}
// .margin,
// .margin-view-overlays,
// .current-line{
// width: 40px !important;
// }
// .monaco-editor .margin-view-overlays .line-numbers{
// text-align: center;
// }
// .monaco-scrollable-element{
// left: 40px !important;
// }
}
.setting_drawer{
.ant-drawer-close{
.setting_drawer {
.ant-drawer-close {
color: #ffffff;
}
.ant-drawer-content{
.ant-drawer-content {
top: 120px;
bottom: 56px;
height: calc(100vh - 176px);
// background: #333333;
background: rgba(7,15,25,1);
background: rgba(7, 15, 25, 1);
color: #fff;
.setting_h2{
.setting_h2 {
color: #fff;
}
select{
select {
color: #fff;
background: #222222;
height: 24px;
// line-height: 24px;
margin-top: 4px;
}
select option{
select option {
background: gold;
color: #fff;
}
}
}
.flex_has_save{
.flex_has_save {
// animation: blink 3s line 3;
animation-name: blink;
animation-duration: .4s;
animation-iteration-count: 3;
}
// .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input,
// .monaco-editor .margin,
// .minimap slider-mouseover,
// .minimap-decorations-layer{
// background:rgba(3,19,40,1) !important;
// }
@keyframes blink{
@keyframes blink {
50% {
color: #fff;
}
}
.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input,
.monaco-editor .margin,
.minimap .minimap-decorations-layer{
background-color: transparent !important;
}

31
public/react/src/modules/developer/recordDetail/index.js
Unescape View File

@ -20,17 +20,17 @@ import actions from '../../../redux/actions';
import CONST from '../../../constants';
import UserInfo from '../components/userInfo';
const {reviewResult} = CONST;
const { reviewResult } = CONST;
function RecordDetail (props) {
function RecordDetail(props) {
const {
match: { params },
match: { params },
recordDetail,
// identifier,
getUserCommitRecordDetail,
saveEditorCodeForDetail
} = props;
const id = params.id;
const [detail, setDetail] = useState({});
const [user, setUser] = useState({});
@ -38,7 +38,7 @@ function RecordDetail (props) {
useEffect(() => {
// 根据id获取记录详情
getUserCommitRecordDetail(id, 'detail');
getUserCommitRecordDetail(id, 'detail');
}, []);
useEffect(() => {
@ -53,7 +53,7 @@ function RecordDetail (props) {
}
}
}, [recordDetail]);
const handleReturn = (identifier) => {
if (identifier) {
saveEditorCodeForDetail('');
@ -65,7 +65,6 @@ function RecordDetail (props) {
const handleEditorCode = (identifier, code) => {
if (identifier) {
console.log(code);
saveEditorCodeForDetail(code);
props.history.push(`/myproblems/${identifier}`);
}
@ -79,12 +78,12 @@ function RecordDetail (props) {
{(user && user.name) || ''}
</span>
</div> */}
<UserInfo userInfo={user || {}}/>
<UserInfo userInfo={user || {}} />
<div className={'study_name'}>
<span>{detail.name || 'test'}</span>
</div>
<div className={'study_quit'}>
<Button style={{ visibility: identifier ? 'visible' : 'hidden'}} onClick={() => handleReturn(identifier)}>
<Button style={{ visibility: identifier ? 'visible' : 'hidden' }} onClick={() => handleReturn(identifier)}>
返回该题
{/* <Link to={`/myproblems/${identifier}`}>返回该题</Link> */}
</Button>
@ -106,27 +105,27 @@ function RecordDetail (props) {
<span className="status_label">
语言: <span className="status_label_sub">{detail.language}</span>
</span>
<span className="status_label" style={{ visibility: detail.status === 0 ? 'visible' : 'hidden'}}>
<span className="status_label" style={{ visibility: detail.status === 0 ? 'visible' : 'hidden' }}>
执行用时: <span className="status_label_sub">{`${detail.execute_time && Number(detail.execute_time * 1000).toFixed(2)}ms`}</span>
</span>
<span className="status_label pass_case" style={{ display: [-1, 0, 2, 5].includes(detail.status) ? 'inline-block' : 'none'}}>
<span className="status_label pass_case" style={{ display: [-1, 0, 2, 5].includes(detail.status) ? 'inline-block' : 'none' }}>
<span className="status_label_sub">{detail.pass_sets_count}</span>
<span className="pass_case_span"> / {detail.set_count}</span>
个通过的测试用例
</span>
</div>
<div className="result_error_area">
<ErrorResult detail={detail}/>
<ErrorResult detail={detail} />
</div>
<div className="detail_ctx_header">
<h2 className="header_h2">提交内容</h2>
<Button
style={{ visibility: identifier ? 'visible' : 'hidden'}}
className={'header_btn'}
style={{ visibility: identifier ? 'visible' : 'hidden' }}
className={'header_btn'}
type="primary"
onClick={() => handleEditorCode(identifier, detail.code)}
>
编辑代码
编辑代码
{/* <Link to={`/myproblems/${identifier}`}>编辑代码</Link> */}
</Button>
</div>
@ -146,7 +145,7 @@ function RecordDetail (props) {
}
const mapStateToProps = (state) => {
const {recordDetail} = state.ojForUserReducer;
const { recordDetail } = state.ojForUserReducer;
return {
// identifier: user_program_identifier,
recordDetail

74
public/react/src/modules/developer/recordDetail/index.scss
Unescape View File

@ -1,69 +1,89 @@
@import '../split_pane_resizer.scss';
.result_code_area .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input{
background-color: #f9f9f9!important;
.result_code_area .monaco-editor,
.monaco-editor-background,
.monaco-editor .inputarea.ime-input {
background-color: #f9f9f9 !important;
}
.result_code_area .monaco-editor .line-numbers{
color: #999!important;
.result_code_area .monaco-editor .line-numbers {
color: #999 !important;
}
.result_code_area .monaco-editor .current-line ~ .line-numbers {
color: #0b216f!important;
.result_code_area .monaco-editor .current-line~.line-numbers {
color: #0b216f !important;
}
.result_code_area .minimap-decorations-layer{
background: rgba(225,225,225,0.2)!important;
.result_code_area .minimap-decorations-layer {
background: rgba(225, 225, 225, 0.2) !important;
}
.result_code_area .monaco-editor .margin{
background-color: #eee!important;
.result_code_area .monaco-editor .margin {
background-color: #eee !important;
}
.record_detail_area{
.record_detail_area {
background: #fff;
.record_detail_ctx{
.record_detail_ctx {
padding: 0 20px;
.detail_ctx_header{
.detail_ctx_header {
position: relative;
height: 56px;
}
.header_h2{
.header_h2 {
line-height: 56px;
}
.header_btn{
.header_btn {
position: absolute;
right: 0;
top: 14px;
}
.detail_ctx_status{
.detail_ctx_status {
height: 18px;
line-height: 18px;
.status_label{
color: rgba(153,153,153,1);
.status_label {
color: rgba(153, 153, 153, 1);
margin-right: 40px;
}
.status_label_error{
.status_label_error {
color: #E51C24;
}
.status_label_success{
.status_label_success {
color: #28BD8B;
}
.status_label_sub{
.status_label_sub {
color: #333333;
}
.pass_case{
.pass_case {
float: right;
margin-right: 0;
}
.pass_case_span{
.pass_case_span {
margin-right: 10px;
}
}
.result_code_area{
.result_code_area {
// height: 500px;
height: calc(100vh - 360px);
}
.result_error_area{
.result_error_area {
margin-top: 15px;
background: rgba(250,250,250,1);
background: rgba(250, 250, 250, 1);
color: #E51C24;
border-radius: 3px;
}
}
}
}

9
public/react/src/modules/developer/studentStudy/index.js
Unescape View File

@ -12,13 +12,10 @@ import { connect } from 'react-redux';
import SplitPane from 'react-split-pane';
import LeftPane from './leftpane';
import RightPane from './rightpane';
// import { Link } from 'react-router-dom';
// import { getImageUrl } from 'educoder'
// import RightPane from '../newOrEditTask/rightpane';
import { Icon } from 'antd';
import UserInfo from '../components/userInfo';
import actions from '../../../redux/actions';
import { fromStore, CNotificationHOC } from 'educoder';
import { CNotificationHOC } from 'educoder';
import { withRouter } from 'react-router';
function StudentStudy(props) {
@ -27,8 +24,6 @@ function StudentStudy(props) {
const {
hack,
userInfo,
// hack_identifier,
// user_program_identifier,
restoreInitialCode,
changeUserCodeTab,
changeShowOrHideControl,
@ -74,7 +69,7 @@ function StudentStudy(props) {
changeUserCodeTab(tab);
}
}, []);
// console.log(hack, hack.modify_code)
useEffect(() => {
if (hack && hack.modify_code && hasUpdate) { // 代码更改，提示是否需要更新代码
setHasUpdate(false);

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

@ -58,7 +58,7 @@ const RightPane = (props) => {
clearInterval(timer);
timer = null;
saveUserCodeForInterval(identifier);
}, 10000);
}, 5000);
}
}

41
public/react/src/redux/reducers/ojForUserReducer.js
Unescape View File

@ -45,7 +45,7 @@ const ojForUserReducer = (state = initialState, action) => {
}
case types.USER_PROGRAM_DETAIL:
const { hack, test_case } = action.payload;
const { code }= hack;
const { code } = hack;
let tempCode = Base64.decode(code)
let tempDesc;
try {
@ -53,7 +53,7 @@ const ojForUserReducer = (state = initialState, action) => {
} catch (error) {
tempDesc = hack.description;
}
Object.assign(hack, {code: tempCode, description: tempDesc});
Object.assign(hack, { code: tempCode, description: tempDesc });
return {
...state,
hack: Object.assign({}, hack),
@ -73,21 +73,21 @@ const ojForUserReducer = (state = initialState, action) => {
result['error_msg'] = Base64.decode(result['error_msg']);
} catch (e) {
console.log('错误信息:', e);
}
}
if (action.payload.type === 'submit') {
return {
return {
...state,
commitRecordDetail: Object.assign({}, result)
}
} else {
return {
return {
...state,
commitTestRecordDetail: Object.assign({}, result)
}
}
case types.COMMIT_RECORD:
const {records, records_count} = action.payload;
const { records, records_count } = action.payload;
return {
...state,
commitRecord: records,
@ -115,7 +115,7 @@ const ojForUserReducer = (state = initialState, action) => {
tempDetail = action.payload.data;
if (tempDetail['error_msg']) {
tempDetail['error_msg'] = Base64.decode(tempDetail['error_msg']);
}
}
if (tempDetail['expected_output']) {
tempDetail['expected_output'] = Base64.decode(tempDetail['expected_output']);
}
@ -137,6 +137,7 @@ const ojForUserReducer = (state = initialState, action) => {
} else {
curHack['code'] = '';
}
curHack['modify_code'] = false
return {
...state,
hack: Object.assign({}, state.hack, curHack),
@ -167,9 +168,9 @@ const ojForUserReducer = (state = initialState, action) => {
...state,
hadCodeUpdate: action.payload
};
case types.CLICK_OPERATE_TYPE:
case types.CLICK_OPERATE_TYPE:
return {
...state,
...state,
operateType: action.payload
}
case types.CLEAR_OJ_FOR_USER_REDUCER:
@ -204,18 +205,18 @@ const ojForUserReducer = (state = initialState, action) => {
let _user_praise = state.hack.user_praise;
_count = +action.payload > 0 ? _count + 1 : _count - 1;
_user_praise = +action.payload > 0 ? true : false;
const _hack = Object.assign({}, state.hack, {praises_count: _count, user_praise: _user_praise});
const _hack = Object.assign({}, state.hack, { praises_count: _count, user_praise: _user_praise });
return {
...state,
hack: _hack
}
case types.CHANGE_RECORD_PAGINATION_PAGE:
case types.CHANGE_RECORD_PAGINATION_PAGE:
return {
...state,
pages: Object.assign({}, state.pages, { page: action.payload})
pages: Object.assign({}, state.pages, { page: action.payload })
}
case types.UPDATE_OJ_FOR_USER_COMMENT_COUNT:
const {comments_count} = state.hack;
const { comments_count } = state.hack;
const _comments_count = action.payload === 'add' ? comments_count + 1 : comments_count - 1;
return {
...state,
@ -223,18 +224,18 @@ const ojForUserReducer = (state = initialState, action) => {
}
// 修改笔记内容
case types.UPDATE_NOTE_CONTENT:
const _hack1 = Object.assign({}, state.hack, {notes: action.payload });
const _hack1 = Object.assign({}, state.hack, { notes: action.payload });
return {
...state,
hack: _hack1
}
// 修改 hack passed值
case types.UPDATE_HACK_PASSED:
const _hack2 = Object.assign({}, state.hack, {passed: action.payload });
return {
...state,
hack: _hack2
}
const _hack2 = Object.assign({}, state.hack, { passed: action.payload });
return {
...state,
hack: _hack2
}
default:
return state;
}

Write Preview
Loading…
Cancel
Save