Merge branch 'dev_aliyun' of https://bdgit.educoder.net/Hjqreturn/educoder into dev_item_bank

public/react/src/common/components/comment/CommentForm.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-12-17 17:32:55
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-26 11:11:57
+ * @LastEditTime : 2019-12-26 18:43:21
  */
 import './index.scss';
 import React, { useState } from 'react';
@@ -69,7 +69,7 @@ function CommentForm (props) {
         props.form.setFieldsValue({'comment': ''});
         setCtx('');
         // const _html = formatDelta(content.ops);
-        console.log('保存的内容=====》》》》', content);
+        // console.log('保存的内容=====》》》》', content);
         onSubmit && onSubmit(JSON.stringify(content));
       }
     });

public/react/src/common/components/comment/CommentItem.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-12-17 17:35:17
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-26 11:30:32
+ * @LastEditTime : 2019-12-26 20:00:56
  */
 import './index.scss';
 import 'quill/dist/quill.core.css'; // 核心样式
@@ -36,6 +36,8 @@ function CommentItem ({
   const [showItemCount, setShowItemCount] = useState(5);
   // 箭头方向
   const [arrow, setArrow] = useState(false);
+  // 上传图片的ulr
+  const [url, setUrl] = useState('');
 
   const { 
     author = {}, // 作者
@@ -85,6 +87,10 @@ function CommentItem ({
     );  
   };
 
+  const handleShowUploadImage = (url) => {
+    console.log('==============>>>>>>>>>>>>',url);
+    setUrl(url);
+  }
   // 评论内容
   const commentCtx = (ctx) => {
     let _ctx = null;
@@ -97,6 +103,7 @@ function CommentItem ({
       <QuillForEditor
         readOnly={true}
         value={_ctx}
+        showUploadImage={handleShowUploadImage}
       />
   )};
 
@@ -181,6 +188,10 @@ function CommentItem ({
     }
   }
 
+  const handleClose = () => {
+    setUrl('');
+  }
+
   return (
     <li className="comment_item_area">
       {commentAvatar(author)}
@@ -225,11 +236,17 @@ function CommentItem ({
         <div
           style={{ display: showQuill ? 'block' : 'none'}}
           className="comment_item_quill">
-          <CommentForm 
+          <CommentForm
             onCancel={handleClickCancel}
             onSubmit={handleClickSubmit(id)}
           />
         </div>
+
+        {/* 显示上传的图片信息 */}
+        <div className="show_upload_image" style={{ display: url ? 'block' : 'none'}}>
+          <Icon type="close" className="image_close" onClick={handleClose}/>
+          <img className="image_info" src={url} alt=""/>
+        </div>
       </div>
     </li>
   );

public/react/src/common/components/comment/index.scss

@@ -87,6 +87,39 @@ $ml: 20px;
     // .comment_item_quill{
     //   // margin-top: 10px;
     // }
+    .show_upload_image{
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1000;
+      &::before{
+        position: absolute;
+        height: 100%;
+        width:100%;
+        content: '';
+        background: #000;
+        opacity: .5;
+      }
+
+      .image_info{
+        position: absolute;
+        width: 80%;
+        height: 80%;
+        left: 10%;
+        top: 10%;
+        background: green;
+      }
+
+      .image_close{
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
   }
   .comment_icon_count{
     cursor: pointer;

public/react/src/common/quillForEditor/ImageBlot.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-12-16 15:50:45
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-24 09:44:03
+ * @LastEditTime : 2019-12-27 08:57:37
  */
 import Quill from "quill";
 
@@ -15,25 +15,38 @@ export default class ImageBlot extends BlockEmbed {
   static create(value) {
 
     const node = super.create();
-
     node.setAttribute('alt', value.alt);
     node.setAttribute('src', value.url);
-    
+    console.log('~~~~~~~~~~~', node, value);
+    node.addEventListener('click', function () {
+      value.onclick(value.url);
+    }, false);
     if (value.width) {
       node.setAttribute('width', value.width);
     }
     if (value.height) {
       node.setAttribute('height', value.height);
     }
+
+    if (value.id) {
+      node.setAttribute('id', value.id);
+    }
     // 宽度和高度都不存在时，
     if (!value.width && !value.height) {
-      node.setAttribute('display', 'block');
+      // node.setAttribute('display', 'block');
       node.setAttribute('width', '100%');
     }
+
+    node.setAttribute('style', { cursor: 'pointer' });
+
+    // if (node.onclick) {
+    //   console.log('image 有图片点击事件======》》》》》》');
+    //   // node.setAttribute('onclick', node.onCLick);
+    // }
     // 给图片添加点击事件
-    node.onclick = () => {
-      value.onClick && value.onClick(value.url);
-    }
+    // node.onclick = () => {
+    //   value.onClick && value.onClick(value.url);
+    // }
     return node;
   }
 
@@ -45,7 +58,9 @@ export default class ImageBlot extends BlockEmbed {
       onclick: node.onclick,
       width: node.width,
       height: node.height,
-      display: node.getAttribute('display')
+      display: node.getAttribute('display'),
+      id: node.id,
+      style: node.style
     };
   }
 }

public/react/src/common/quillForEditor/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-12-18 08:49:30
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-26 10:22:26
+ * @LastEditTime : 2019-12-26 19:36:00
  */
 import './index.scss';
 import 'quill/dist/quill.core.css'; // 核心样式
@@ -116,9 +116,22 @@ function QuillForEditor ({
   // 设置值 
   useEffect(() => {
     if (!quill) return
+
+    // debugger;
     const previous = quill.getContents()
-    const current = value
+   
+    if (value && value.hasOwnProperty('ops')) {
+      console.log(value.ops);
+      const ops = value.ops || [];
+      ops.forEach((item, i) => {
+        if (item.insert['image']) {
+          item.insert['image'] = Object.assign({}, item.insert['image'], {style: { cursor: 'pointer' }, onclick: (url) => showUploadImage(url)});
+        }
+      });
+    }
 
+    const current = value
+    console.log('+++++', current);
     if (!deepEqual(previous, current)) {
       setSelection(quill.getSelection())
       if (typeof value === 'string') {

public/react/src/modules/developer/components/controlSetting/index.js

@@ -4,11 +4,11 @@
  * @Github: 
  * @Date: 2019-11-27 16:02:36
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-26 15:17:28
+ * @LastEditTime : 2019-12-27 09:32:34
  */
 import './index.scss';
 import React, { useState, useRef, useEffect } from 'react';
-import { Tabs, Button, Icon  } from 'antd';
+import { Tabs, Button, Icon, notification  } from 'antd';
 import { connect } from 'react-redux';
 import InitTabCtx from '../initTabCtx';
 import ExecResult from '../execResult';
@@ -18,6 +18,7 @@ const { TabPane } = Tabs;
 const ControlSetting = (props) => {
 
   const { 
+    hack,
     inputValue,
     loading,
     submitLoading,
@@ -57,6 +58,13 @@ const ControlSetting = (props) => {
 
   // 调试代码
   const handleTestCode = (e) => {
+    if (!hack.code) {
+      notification.warning({
+        message: '提示',
+        description: '代码块内容不能为空'
+      });
+      return;
+    }
     // console.log(formRef.current.handleTestCodeFormSubmit);
     // 调出控制台界面
     setShowTextResult(true);
@@ -137,8 +145,9 @@ const ControlSetting = (props) => {
 const mapStateToProps = (state) => {
   const {commonReducer, ojForUserReducer} = state;
   const {loading, excuteState, submitLoading, showOrHideControl } = commonReducer;
-  const { commitTestRecordDetail } = ojForUserReducer; 
+  const { commitTestRecordDetail, hack } = ojForUserReducer; 
   return {
+    hack,
     loading,
     submitLoading,
     excuteState,

public/react/src/modules/developer/components/initTabCtx/index.js

@@ -3,8 +3,8 @@
  * @Author: tangjiang
  * @Github: 
  * @Date: 2019-11-27 19:46:14
- * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-19 10:47:05
+ * @LastEditors  : tangjiang
+ * @LastEditTime : 2019-12-26 20:07:35
  */
 import './index.scss';
 import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
@@ -26,7 +26,7 @@ function InitTabCtx (props, ref) {
 
   const { inputValue, onDebuggerCode } = props;
 
-  console.log('default value', inputValue);
+  // console.log('default value', inputValue);
   useImperativeHandle(ref, () => ({
     handleTestCodeFormSubmit: (cb) => {
       // console.log('父组件调用我啦~~~~~~~~~');
@@ -34,9 +34,9 @@ function InitTabCtx (props, ref) {
     }
   }));
 
-  useEffect(() => {
-    console.log('初始值: ========', props);
-  }, [props]);
+  // useEffect(() => {
+  //   console.log('初始值: ========', props);
+  // }, [props]);
 
   // 渲染文本提示信息
   const renderText = () => (<span className={'ctx_default'}>请在这里添加测试用例，点击“调试代码”时将从这里读取输入来测试你的代码...</span>);

public/react/src/modules/developer/components/myMonacoEditor/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-27 15:02:52
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-26 15:19:34
+ * @LastEditTime : 2019-12-27 09:22:08
  */
 import './index.scss';
 import React, { useState, useRef, useEffect } from 'react';
@@ -53,9 +53,7 @@ function MyMonacoEditor (props, ref) {
   const editorRef = useRef(null);
 
   useEffect(() => {
-    if (props.code) {
-      setEditCode(props.code);
-    }
+    setEditCode(props.code || '');
   }, [props]);
   
   useEffect(() => {
@@ -125,9 +123,9 @@ function MyMonacoEditor (props, ref) {
     }
   }
   
-  const renderRestore = identifier ? (
-    <MyIcon type="iconzaicizairu" />
-  ) : '';
+  // const renderRestore = identifier ? (
+  //   <MyIcon type="iconzaicizairu" />
+  // ) : '';
 
   // lex_has_save ${hadCodeUpdate} ? : ''
   const _classnames = hadCodeUpdate ? `flex_strict flex_has_save` : 'flex_strict';

public/react/src/modules/developer/newOrEditTask/rightpane/initTabCtx/index.js

@@ -75,11 +75,11 @@ class InitTabCtx extends PureComponent {
 
   handleTestCodeFormSubmit = (cb) => {
     const {form, debuggerCode} = this.props;
-    console.log(debuggerCode);
+    // console.log(debuggerCode);
     form.validateFields((err, values) => {
       if (!err) { // 表单验证通过时，调用测试接口
         cb && cb(); // 调用回调函数，切换 tab
-        console.log('表单值:', values);
+        // console.log('表单值:', values);
         debuggerCode(values);
       }
     });

public/react/src/modules/developer/recordDetail/index.scss

@@ -1,6 +1,7 @@
 @import '../split_pane_resizer.scss';
 
 .record_detail_area{
+  background: #fff;
   .record_detail_ctx{
     padding: 0 20px;
     .detail_ctx_header{
@@ -39,6 +40,9 @@
     }
     .result_error_area{
       margin-top: 15px;
+      background: rgba(250,250,250,1);
+      color: #E51C24;
+      border-radius: 3px;
     }
   }
 }

public/react/src/modules/developer/studentStudy/rightpane/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-27 14:59:51
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-26 17:56:51
+ * @LastEditTime : 2019-12-27 09:23:15
  */
 import React, { useState, useEffect } from 'react';
 import {connect} from 'react-redux';
@@ -39,10 +39,12 @@ const RightPane = (props) => {
     changeLoadingState
   } = props;
 
-  const [editorCode, setEditorCode] = useState('');
+  const [editorCode, setEditorCode] = useState(editor_code || hack.code);
   const [noteClazz, setNoteClazz] = useState('editor_nodte_area');
   const [noteCount] = useState(5000);
-  let initFlag = true;
+  // const [code, setCode] = useState(editor_code || hack.code);
+  // let initFlag = true;
+
   useEffect(() => {
     if (editor_code) {
       setEditorCode(editor_code);
@@ -61,24 +63,18 @@ const RightPane = (props) => {
 
   let timer = null; // 定时器
   // 代码块内容变化时
-  const handleCodeChange = (code) => {
-    // 保存用户提交的代码块
-    setEditorCode(code);
-     // 第一次回填代码内容时不更新;
-    if (initFlag) {
-      initFlag = false;
-      return;
-    }
+  const handleCodeChange = (value) => {
+    saveUserInputCode(value);
+    setEditorCode(value);
     if (!timer) {
-      timer = setInterval(() => {
+      timer = setInterval(function () {
         clearInterval(timer);
         timer = null;
-        saveUserCodeForInterval && saveUserCodeForInterval(identifier, code);
+        saveUserCodeForInterval(identifier);
       }, 3000);
     }
-     // 保存用户代码块
-    saveUserInputCode(code);
   }
+
   // 代码调试
   const handleDebuggerCode = (value) => {
     // 调用保存代码块接口，成功后，调用调试接口

public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js

@@ -360,11 +360,11 @@ class Challengesjupyter extends Component {
 		let id=this.props.match.params.shixunId;
 		let that=this;
 		Modal.confirm({
-			title: '重置实训',
+			title: '重置环境',
 			content: (
 				<p style={{ lineHeight: '24px' }}>
 					你在本文件中修改的内容将丢失,<br />
-					是否确定重新加载初始代码？
+					是否确定重置环境？
 				</p>
 			),
 			okText: '确定',
@@ -430,9 +430,14 @@ class Challengesjupyter extends Component {
 						`
 						.ant-notification{
 						
-						    position: fixed;
-                z-index: 3000;
+						    position: fixed !important;
+                z-index: 3000 !important;
 						}
+					  .ant-modal-wrap {
+                position: fixed !important;
+                z-index: 3000 !important;
+                margin-top: 100px !important;
+					  }
 						`
 						}
 					</style>

public/react/src/redux/actions/ojForUser.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-27 13:42:11
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-26 18:32:08
+ * @LastEditTime : 2019-12-27 09:28:38
  */
 import types from "./actionTypes";
 import { Base64 } from 'js-base64';
@@ -108,25 +108,31 @@ export const getUserProgramDetail = (identifier, type) => {
 }
 
 export const saveUserCodeForInterval = (identifier, code) => {
-  return (dispatch) => {
+  return (dispatch, getState) => {
+    const { userCode } = getState().ojForUserReducer;
     dispatch({
       type: types.AUTO_UPDATE_CODE,
       payload: true
     });
+    console.log('+++', userCode);
     fetchUpdateCode(identifier, {
-      code: Base64.encode(code)
+      code: userCode
     }).then(res => {
       if (res.data.status === 401) {
         return;
       };
-
+      dispatch({
+        type: types.RESTORE_INITIAL_CODE,
+        payload: userCode
+      });
+      
       setTimeout(() => {
         dispatch({
           type: types.AUTO_UPDATE_CODE,
           payload: false
         })
       }, 1000);
-      console.log('代码保存成功', res);
+      // console.log('代码保存成功', res);
     }).catch(() => {
       dispatch({
         type: types.AUTO_UPDATE_CODE,

public/react/src/redux/reducers/ojForUserReducer.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-27 13:41:48
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-26 18:34:56
+ * @LastEditTime : 2019-12-27 09:18:02
  */
 import types from "../actions/actionTypes";
 import { Base64 } from 'js-base64';
@@ -94,11 +94,10 @@ const ojForUserReducer = (state = initialState, action) => {
       }
     case types.SAVE_USER_CODE:
       let curCode = Base64.encode(action.payload);
-      
       return {
         ...state,
         userCode: curCode,
-        isUpdateCode: true
+        isUpdateCode: true,
       }
     case types.IS_UPDATE_CODE:
       return {
@@ -133,11 +132,13 @@ const ojForUserReducer = (state = initialState, action) => {
       let restoreCode = action.payload
       if (restoreCode) {
         curHack['code'] = Base64.decode(restoreCode);
+      } else {
+        curHack['code'] = '';
       }
-      console.log('当前的代码内容:', curHack);
+      console.log(curHack);
       return {
         ...state,
-        hack: Object.assign({}, curHack)
+        hack: Object.assign({}, state.hack, curHack)
       }
     case types.SAVE_HACK_IDENTIFIER:
       return {