diff --git a/public/react/src/common/components/comment/CommentForm.js b/public/react/src/common/components/comment/CommentForm.js index cc4e4efd9..da4814a9e 100644 --- a/public/react/src/common/components/comment/CommentForm.js +++ b/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)); } }); diff --git a/public/react/src/common/components/comment/CommentItem.js b/public/react/src/common/components/comment/CommentItem.js index 6332dbd9a..5cd39b8e0 100644 --- a/public/react/src/common/components/comment/CommentItem.js +++ b/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 ({ )}; @@ -181,6 +188,10 @@ function CommentItem ({ } } + const handleClose = () => { + setUrl(''); + } + return (
  • {commentAvatar(author)} @@ -225,11 +236,17 @@ function CommentItem ({
    -
    + + {/* 显示上传的图片信息 */} +
    + + +
    • ); diff --git a/public/react/src/common/components/comment/index.scss b/public/react/src/common/components/comment/index.scss index d881e5bee..db327c82f 100644 --- a/public/react/src/common/components/comment/index.scss +++ b/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; diff --git a/public/react/src/common/quillForEditor/ImageBlot.js b/public/react/src/common/quillForEditor/ImageBlot.js index 1b474d5dc..0316b1325 100644 --- a/public/react/src/common/quillForEditor/ImageBlot.js +++ b/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 }; } } diff --git a/public/react/src/common/quillForEditor/index.js b/public/react/src/common/quillForEditor/index.js index 8239a0c93..330ecfed9 100644 --- a/public/react/src/common/quillForEditor/index.js +++ b/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') { diff --git a/public/react/src/modules/developer/components/controlSetting/index.js b/public/react/src/modules/developer/components/controlSetting/index.js index 0fcfc278f..5c970f00e 100644 --- a/public/react/src/modules/developer/components/controlSetting/index.js +++ b/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, diff --git a/public/react/src/modules/developer/components/initTabCtx/index.js b/public/react/src/modules/developer/components/initTabCtx/index.js index 3e707daa1..831416fab 100644 --- a/public/react/src/modules/developer/components/initTabCtx/index.js +++ b/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 = () => (请在这里添加测试用例，点击“调试代码”时将从这里读取输入来测试你的代码...); diff --git a/public/react/src/modules/developer/components/myMonacoEditor/index.js b/public/react/src/modules/developer/components/myMonacoEditor/index.js index facff0b75..ed7186102 100644 --- a/public/react/src/modules/developer/components/myMonacoEditor/index.js +++ b/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 ? ( - - ) : ''; + // const renderRestore = identifier ? ( + // + // ) : ''; // lex_has_save ${hadCodeUpdate} ? : '' const _classnames = hadCodeUpdate ? `flex_strict flex_has_save` : 'flex_strict'; diff --git a/public/react/src/modules/developer/newOrEditTask/rightpane/initTabCtx/index.js b/public/react/src/modules/developer/newOrEditTask/rightpane/initTabCtx/index.js index 6933151a2..defb5e3c7 100644 --- a/public/react/src/modules/developer/newOrEditTask/rightpane/initTabCtx/index.js +++ b/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); } }); diff --git a/public/react/src/modules/developer/recordDetail/index.scss b/public/react/src/modules/developer/recordDetail/index.scss index e52090060..994ebea58 100644 --- a/public/react/src/modules/developer/recordDetail/index.scss +++ b/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; } } } diff --git a/public/react/src/modules/developer/studentStudy/rightpane/index.js b/public/react/src/modules/developer/studentStudy/rightpane/index.js index cf264c67b..259f2f63a 100644 --- a/public/react/src/modules/developer/studentStudy/rightpane/index.js +++ b/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) => { // 调用保存代码块接口，成功后，调用调试接口 diff --git a/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js b/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js index 7be68d6dc..b24d4dc2c 100644 --- a/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js +++ b/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: (

    你在本文件中修改的内容将丢失,
    - 是否确定重新加载初始代码？ + 是否确定重置环境？

    ), 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; + } ` } diff --git a/public/react/src/redux/actions/ojForUser.js b/public/react/src/redux/actions/ojForUser.js index ee78d336e..5cd0cea3a 100644 --- a/public/react/src/redux/actions/ojForUser.js +++ b/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, diff --git a/public/react/src/redux/reducers/ojForUserReducer.js b/public/react/src/redux/reducers/ojForUserReducer.js index eeaa3c6ca..f78385049 100644 --- a/public/react/src/redux/reducers/ojForUserReducer.js +++ b/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 {