From dc1ca77e6e7689607aa4c22f15f56caf7b7cd3ee Mon Sep 17 00:00:00 2001 From: harry Date: Sat, 7 Mar 2020 22:47:18 +0800 Subject: [PATCH] https://www.trustie.net/issues/28418 --- .../components/myMonacoEditor/index.js | 112 +++++++----------- .../modules/developer/newOrEditTask/index.js | 92 +++++--------- .../newOrEditTask/rightpane/index.js | 14 +-- .../developer/studentStudy/rightpane/index.js | 68 ++++------- public/react/src/redux/actions/ojForUser.js | 66 +++++------ 5 files changed, 131 insertions(+), 221 deletions(-) diff --git a/public/react/src/modules/developer/components/myMonacoEditor/index.js b/public/react/src/modules/developer/components/myMonacoEditor/index.js index 930561e37..c2f3cafd8 100644 --- a/public/react/src/modules/developer/components/myMonacoEditor/index.js +++ b/public/react/src/modules/developer/components/myMonacoEditor/index.js @@ -9,15 +9,13 @@ import './index.scss'; import React, { useState, useRef, useEffect } from 'react'; import { Drawer, Tooltip, Badge } from 'antd'; -import { fromStore, CNotificationHOC } from 'educoder'; +import { fromStore, CNotificationHOC } from 'educoder'; import { connect } from 'react-redux'; import MonacoEditor from '@monaco-editor/react'; import SettingDrawer from '../../components/monacoSetting'; import CONST from '../../../../constants'; import MyIcon from '../../../../common/components/MyIcon'; -// import actions from '../../../../redux/actions'; - const { fontSetting, opacitySetting } = CONST; const maps = { 'c': 'main.c', @@ -26,15 +24,15 @@ const maps = { 'python': 'main.py' }; -function MyMonacoEditor (props, ref) { +function MyMonacoEditor(props, ref) { const { code, notice, - language, + language, identifier, hadCodeUpdate, - showOrHideControl, + showOrHideControl, // saveUserInputCode, onCodeChange, onRestoreInitialCode, @@ -50,13 +48,13 @@ function MyMonacoEditor (props, ref) { const [theme, setTheme] = useState(() => { // 主题 theme return fromStore('oj_theme') || 'dark'; }); - const [ height, setHeight ] = useState('calc(100% - 56px)'); + const [height, setHeight] = useState('calc(100% - 56px)'); const editorRef = useRef(null); // useEffect(() => { // setEditCode(props.code || ''); // }, [props]); - + useEffect(() => { setHeight(showOrHideControl ? 'calc(100% - 378px)' : 'calc(100% - 56px)'); }, [showOrHideControl]); @@ -78,45 +76,38 @@ function MyMonacoEditor (props, ref) { setTheme(value); } - // 文本框内容变化时，记录文本框内容 - const handleEditorChange = (origin, monaco) => { + // 文本框内容变化时，记录文本框内容 + const handleEditorChange = (_, monaco) => { editorRef.current = monaco; // 获取当前monaco实例 - // setEditCode(origin); // 保存编辑器初始值 - editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化 - // TODO 需要优化 节流 - const val = editorRef.current.getValue(); - // setEditCode(val); - // console.log('编辑器代码====>>>>', val); - onCodeChange(val); - // 值一变化保存当前代码值 - // saveUserInputCode(val); - }); } + useEffect(() => { + if (editorRef.current) { + editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化 + const val = editorRef.current.getValue(); + onCodeChange(val); + }); + } + }, [ + editorRef.current + ]) + // 配置编辑器属性 const editorOptions = { selectOnLineNumbers: true, automaticLayout: true, fontSize: `${fontSize}px` } - + // 恢复初始代码 const handleRestoreCode = () => { props.confirm({ title: '提示', content: '确定要恢复代码吗?', - onOk () { + onOk() { onRestoreInitialCode && onRestoreInitialCode(); } }) - // Modal.confirm({ - // content: '确定要恢复代码吗?', - // okText: '确定', - // cancelText: '取消', - // onOk () { - // onRestoreInitialCode && onRestoreInitialCode(); - // } - // }) } const handleUpdateNotice = () => { @@ -124,49 +115,38 @@ function MyMonacoEditor (props, ref) { onUpdateNotice && onUpdateNotice(); } } - - // const renderRestore = identifier ? ( - // - // ) : ''; - // lex_has_save ${hadCodeUpdate} ? : '' const _classnames = hadCodeUpdate ? `flex_strict flex_has_save` : 'flex_strict'; return (
{/* 未保存时 ? '学员初始代码文件' : main.x */} - {identifier ? language ? maps[language.toLowerCase()] : '' : '学员初始代码文件'} + {identifier ? language ? maps[language.toLowerCase()] : '' : '学员初始代码文件'} {hadCodeUpdate ? '已保存' : ''} - {/* */} - {/* */} - + - {/* {renderRestore} */} @@ -174,18 +154,18 @@ function MyMonacoEditor (props, ref) { placement="bottom" title="设置" > - +
+ height={height} + width="100%" + language={language && language.toLowerCase()} + value={code || ''} + options={editorOptions} + theme={theme} // dark || light + editorDidMount={handleEditorChange} + />
- - + ) @@ -212,12 +192,6 @@ const mapStateToProps = (state) => { } }; -// const mapDispatchToProps = (dispatch) => ({ -// // saveUserInputCode: (code) => dispatch(actions.saveUserInputCode(code)), -// }); - -// MyMonacoEditor = React.forwardRef(MyMonacoEditor); export default connect( mapStateToProps, - // mapDispatchToProps -)(CNotificationHOC() (MyMonacoEditor)); +)(CNotificationHOC()(MyMonacoEditor)); diff --git a/public/react/src/modules/developer/newOrEditTask/index.js b/public/react/src/modules/developer/newOrEditTask/index.js index b95668413..43cad6106 100644 --- a/public/react/src/modules/developer/newOrEditTask/index.js +++ b/public/react/src/modules/developer/newOrEditTask/index.js @@ -8,23 +8,19 @@ import './index.scss'; import React, { useEffect } from 'react'; import { connect } from 'react-redux'; -import SplitPane from 'react-split-pane';// import { Form } from 'antd'; +import SplitPane from 'react-split-pane'; import { Button } from 'antd'; import LeftPane from './leftpane'; import RightPane from './rightpane'; import { withRouter } from 'react-router'; import { toStore, CNotificationHOC } from 'educoder'; import UserInfo from '../components/userInfo'; -// import RightPane from './rightpane/index'; import actions from '../../../redux/actions'; -// import {ModalConfirm} from '../../../common/components/ModalConfirm'; const NewOrEditTask = (props) => { const { publishLoading, handlePublish, - // testCases = [], - // ojTestCaseValidate = [], identifier, isPublish, userInfo, @@ -38,15 +34,10 @@ const NewOrEditTask = (props) => { getQuestion, saveSearchParams, setOjInitialValue, - courseQuestions - // updateTestAndValidate, } = props; - // 表单提交 const handleSubmitForm = () => { - // 改变loading状态 changeSubmitLoadingStatus(true); - // 调用输入表单验证功能 if (props.identifier) { props.handleUpdateOjForm(props); } else { @@ -54,12 +45,10 @@ const NewOrEditTask = (props) => { } }; + const id = props.match.params.id; useEffect(() => { // 获取用户信息 getUserInfoForNew(); - // console.log('获取路由参数： ====', props.match.params); - const id = props.match.params.id; - // 保存OJForm的id号，指明是编辑还是新增 props.saveOJFormId(id); // 获取地址栏查询参数 const $searchs = window.location.search && window.location.search.substring(1); @@ -80,21 +69,16 @@ const NewOrEditTask = (props) => { tag_discipline_id: tag_arrs }); } - saveSearchParams({searchParams: $searchs, curPage: obj['pages']}); + saveSearchParams({ searchParams: $searchs, curPage: obj['pages'] }); } // 获取课程列表 getQuestion({ source: 'question' }); if (id) { // id号即 identifier - // TODO id 存在时, 编辑, 获取 store 中的记录数 props.getOJFormById(id); - } else { - // 清空store中的测试用例集合 - // props.clearOJFormStore(); } - return () => {} - }, []); + }, [id]) // 模拟挑战 const imitationChallenge = () => { @@ -107,11 +91,9 @@ const NewOrEditTask = (props) => { // 开始挑战 const startChallenge = () => { // 调用 start 接口, 成功后跳转到开启实战 - // TODO identifier && validateOjForm(props, 'challenge', () => { startProgramQuestion(identifier, props); }); - // identifier && startProgramQuestion(identifier, props); } // 取消 @@ -120,20 +102,15 @@ const NewOrEditTask = (props) => { props.clearOJFormStore(); // 清空描述信息 toStore('oj_description', ''); - // props.history.push('/problems'); props.history.push(`/problemset?${props.searchParams}`); } // 发布 const handleClickPublish = () => { - // ModalConfirm('提示', (

发布后即可应用到自己管理的课堂
是否确认发布?

), () => { - // changePublishLoadingStatus(true); - // handlePublish(props, 'publish'); - // }); props.confirm({ title: '提示', content: (

发布后即可应用到自己管理的课堂
是否确认发布?

), - onOk () { + onOk() { changePublishLoadingStatus(true); handlePublish(props, 'publish'); } @@ -141,14 +118,10 @@ const NewOrEditTask = (props) => { } // 撤销发布 const handleClickCancelPublish = () => { - // ModalConfirm('提示', (

是否确认撤销发布?

), () => { - // changePublishLoadingStatus(true); - // handleCancelPublish(props, identifier); - // }); props.confirm({ title: '提示', content: ((

是否确认撤销发布?

)), - onOk () { + onOk() { changePublishLoadingStatus(true); handleCancelPublish(props, identifier); } @@ -174,33 +147,33 @@ const NewOrEditTask = (props) => { // 发布/模拟挑战 const renderPubOrFight = () => { const pubButton = isPublish - ? () - : (); + ? () + : (); // 未发布: 模拟挑战 已发布: 开始挑战 const challengeBtn = isPublish ? ( ) : ( - - ); + + ); if (isPublish) { return ( {pubButton} + type="primary" + loading={submitLoading} + onClick={handleSubmitForm} + >保存 {challengeBtn} ); @@ -208,10 +181,10 @@ const NewOrEditTask = (props) => { return ( + type="primary" + loading={submitLoading} + onClick={handleSubmitForm} + >保存 {pubButton} {challengeBtn} @@ -233,9 +206,9 @@ const NewOrEditTask = (props) => { return (
- +

{props.name || ''}

- { renderQuit() } + {renderQuit()}
@@ -243,18 +216,17 @@ const NewOrEditTask = (props) => {
- +
- {/* 控制台 */}
{ /* 录入时: 取消 保存 */ /* 保存未发布: 立即发布 模拟挑战 */ } - { !identifier ? renderSaveOrCancel() : renderPubOrFight() } + {!identifier ? renderSaveOrCancel() : renderPubOrFight()}
) @@ -313,4 +285,4 @@ const mapDispatchToProps = (dispatch) => ({ export default withRouter(connect( mapStateToProps, mapDispatchToProps -)(CNotificationHOC() (NewOrEditTask))); +)(CNotificationHOC()(NewOrEditTask))); diff --git a/public/react/src/modules/developer/newOrEditTask/rightpane/index.js b/public/react/src/modules/developer/newOrEditTask/rightpane/index.js index d42089d7f..15790a803 100644 --- a/public/react/src/modules/developer/newOrEditTask/rightpane/index.js +++ b/public/react/src/modules/developer/newOrEditTask/rightpane/index.js @@ -13,7 +13,7 @@ import MyMonacoEditor from '../../components/myMonacoEditor'; // import ControlSetting from '../../components/controlSetting'; import actions from '../../../../redux/actions'; -function RightPane (props, ref) { +function RightPane(props, ref) { const { // identifier, @@ -23,7 +23,7 @@ function RightPane (props, ref) { // onSubmitForm, saveOjFormCode } = props; - + // let timer = null; // 代码改变时，保存 const handleCodeChange = (updateCode) => { @@ -33,7 +33,7 @@ function RightPane (props, ref) { // timer = setInterval(() => { // clearInterval(timer); // timer = null; - + // }, 3000); // } // } @@ -45,11 +45,11 @@ function RightPane (props, ref) { // } return (
- - + onCodeChange={handleCodeChange} /> + {/* { - + const { - identifier, - submitInput, + identifier, + submitInput, submitUserCode, input, hack, @@ -33,54 +30,34 @@ const RightPane = (props) => { updateNotice, saveUserInputCode, restoreInitialCode, - // saveOpacityType, saveUserCodeForInterval, addNotes, changeLoadingState } = props; - // const [editorCode, setEditorCode] = useState(editor_code || hack.code); const [noteClazz, setNoteClazz] = useState('editor_nodte_area'); const [noteCount] = useState(5000); - // const [code, setCode] = useState(editor_code || hack.code); - // let initFlag = true; - - // useEffect(() => { - // if (editor_code) { - // setEditorCode(editor_code); - // } else { - // setEditorCode(hack.code); - // } - // }, [hack, editor_code]); - - + + const handleSubmitForm = () => { - // 提交时， 先调用提交接口，提交成功后，循环调用测评接口 - // saveOpacityType('submit'); submitUserCode(identifier, submitInput, 'submit'); - // // 提交时，先调用评测接口， 评测通过后才调用保存接口 - // updateCode(identifier, submitInput, 'submit'); } let timer = null; // 定时器 // 代码块内容变化时 const handleCodeChange = (value) => { - // console.log('编辑器代码 ======》》》》》》》》》++++++++++', value); saveUserInputCode(value); - // setEditorCode(value); if (!timer) { timer = setInterval(function () { clearInterval(timer); timer = null; saveUserCodeForInterval(identifier); - }, 3000); + }, 10000); } } // 代码调试 const handleDebuggerCode = (value) => { - // 调用保存代码块接口，成功后，调用调试接口 - // saveOpacityType('debug'); updateCode(identifier, value, 'debug'); } // 恢复初始代码 @@ -101,7 +78,7 @@ const RightPane = (props) => { props.form.resetFields(); setNoteClazz('editor_nodte_area'); } - + const handleSubmitNote = () => { props.form.validateFields((err, values) => { if (!err) { @@ -113,7 +90,6 @@ const RightPane = (props) => { } }); } - const { getFieldDecorator } = props.form; return (
@@ -121,7 +97,7 @@ const RightPane = (props) => { { onRestoreInitialCode={handleRestoreInitialCode} /> - - + {/*