设置编辑器风格

public/react/src/constants/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-20 23:10:48
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-11-28 14:41:42
+ * @LastEditTime: 2019-12-06 15:53:27
  */
 const CONST = {
   jcLabel: {
@@ -20,8 +20,25 @@ const CONST = {
     title: '代码格式',
     type: 'select',
     content: [
+      {
+        text: '显示风格',
+        type: 'style',
+        value: [
+          {
+            key: 'dark',
+            text: '黑色背景',
+            value: 'dark'
+          },
+          {
+            key: 'light',
+            text: '白色背景',
+            value: 'light'
+          }
+        ]
+      },
       { 
         text: '字体大小',
+        type: 'font',
         value: [
           {
             key: 1,

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

@@ -67,6 +67,14 @@
       font-size: 12px;
     }
   }
+
+  .ant-drawer-body{
+    height: calc(100vh - 120px);
+    overflow-y: auto;
+  }
+  .ant-drawer-content{
+    top: 120px;
+  }
 }
 
 

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

@@ -4,26 +4,54 @@
  * @Github: 
  * @Date: 2019-11-25 17:50:33
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-04 11:26:02
+ * @LastEditTime: 2019-12-06 16:51:48
  */
-import React from 'react';
+import React, { useState } from 'react';
-import { Select } from 'antd';
+import { fromStore, toStore } from 'educoder'; 
-
+// import { Select } from 'antd';
-const { Option } = Select;
+// const { Option } = Select;
 const SettingDrawer = (props) => {
   /**
    * title: '', // 一级标题
    * 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';
+  });
+
   const {title, type = 'label', content = [] } = props;
 
-  const handleFontSize = (e) => {
+  // 字体改变时， 方法全名:  handleChangeXX, XX 为指定的类型;
-    const {onChangeFontSize} = props;
+  const {
-    const value = e.target.value;
+    onChangeFontSize,
-    console.log('fong size change: ', value);
+    onChangeTheme
+  } = props;
+  const handleChangeFont = (value) => {
+    setFontSize(value);
+    toStore('oj_fontSize', value);
     onChangeFontSize && onChangeFontSize(value);
   }
+  // 风格改变时
+  const handleChangeStyle = (value) => {
+   setTheme(value);
+   toStore('oj_theme', value);
+   onChangeTheme && onChangeTheme(value);
+  }
+
+  const handleSelectChange = (e, type) => {
+    const value = e.target.value;
+    if (type === 'font') {
+      handleChangeFont(value);
+    }
+    if (type === 'style') {
+      handleChangeStyle(value);
+    }
+  }
 
   const renderCtx = (title, content = [], type = 'label') => {
     const result = content.map((ctx, index) => {
@@ -38,19 +66,25 @@ const SettingDrawer = (props) => {
           </div>
         );
       } else if (Array.isArray(value)) {
+        const defaultValue = ctx.type === 'font' ? fontSize : theme;
+        console.log('++', defaultValue);
         if (type === 'select') {
-          const child = ctx.value.map((opt, i) => (
+          const child = ctx.value.map((opt, i) => {
-            <option key={`key_${i}` || `${opt.value}`} value={opt.value}>
+            return (
-              {opt.text}
+              <option
-            </option>
+                key={`key_${i}` || `${opt.value}`} 
-          ));
+                value={opt.value}
+              >
+                {opt.text}
+              </option>
+          )});
           renderResult = (
             <div className={'setting_desc'}  key={`sel_${index}`}>
               <span className={'flex_item'}>{ctx.text}</span>
-              <select style={{ width: '100px'}} onChange={handleFontSize}>
+              <select defaultValue={defaultValue} style={{ width: '100px'}} onChange={(e) => handleSelectChange(e, ctx.type)}>
                 {child}
               </select>
-           </div>
+            </div>            
           );
         }
       }

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

@@ -4,11 +4,12 @@
  * @Github: 
  * @Date: 2019-11-27 15:02:52
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-05 10:17:04
+ * @LastEditTime: 2019-12-06 16:50:54
  */
 import './index.scss';
 import React, { useState, useRef, useEffect } from 'react';
 import { Icon, Drawer, Modal } from 'antd';
+import { fromStore } from 'educoder'; 
 import { connect } from 'react-redux';
 import MonacoEditor from '@monaco-editor/react';
 import SettingDrawer from '../../components/monacoSetting';
@@ -31,7 +32,12 @@ function MyMonacoEditor (props, ref) {
   const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框
   const [editCode, setEditCode] = useState('');
   // const [curLang, setCurLang] = useState('C');
-  const [fontSize, setFontSize] = useState(12);
+  const [fontSize, setFontSize] = useState(() => { // 字体
+    return +fromStore('oj_fontSize') || 14;
+  });
+  const [theme, setTheme] = useState(() => { // 主题 theme
+    return fromStore('oj_theme') || 'dark';
+  });
   const [ height, setHeight ] = useState('calc(100% - 112px)');
   const editorRef = useRef(null);
 
@@ -54,9 +60,13 @@ function MyMonacoEditor (props, ref) {
     setShowDrawer(false);
   }
   // 侧边栏改变字体大小
-  const handleFontSizeChange = (value) => {
+  const handleChangeFontSize = (value) => {
     setFontSize(value);
   }
+  // 改变主题
+  const handleChangeTheme = (value) => {
+    setTheme(value);
+  }
 
     // 文本框内容变化时，记录文本框内容
   const handleEditorChange = (origin, monaco) => {
@@ -105,7 +115,7 @@ function MyMonacoEditor (props, ref) {
             language={language && language.toLowerCase()}
             value={editCode}
             options={editorOptions}
-            theme="dark"
+            theme={theme} // dark || light
             editorDidMount={handleEditorChange}
           />
       </div>
@@ -117,7 +127,11 @@ function MyMonacoEditor (props, ref) {
         onClose={handleDrawerClose}
         visible={showDrawer}
       >
-        <SettingDrawer {...fontSetting} onChangeFontSize={handleFontSizeChange}/>
+        <SettingDrawer 
+          {...fontSetting} 
+          onChangeFontSize={handleChangeFontSize}
+          onChangeTheme={handleChangeTheme}
+        />
         <SettingDrawer {...opacitySetting}/>
       </Drawer>
     </React.Fragment>

public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-20 10:35:40
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-05 18:07:32
+ * @LastEditTime: 2019-12-06 16:56:24
  */
 import 'quill/dist/quill.core.css';
 import 'quill/dist/quill.bubble.css';
@@ -140,7 +140,7 @@ class EditTab extends React.Component {
     const { 
       ojForm, 
       ojFormValidate,
-      testCases = [], // 测试用例集合
+      // testCases = [], // 测试用例集合
       addTestCase, // 添加测试用例
       deleteTestCase, // 删除测试用例
       testCasesValidate,
@@ -221,7 +221,7 @@ class EditTab extends React.Component {
       // TODO 点击新增时，需要滚到到最底部
       this.scrollToBottom();
     }
-
+    // 编辑器配置信息
     const quillConfig = [
       [{ header: [1, 2, 3, 4, 5, 6, false] }],
       ['bold', 'italic', 'underline', 'strike'],        // 切换按钮

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

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-23 10:53:19
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-04 14:02:05
+ * @LastEditTime: 2019-12-06 17:02:32
  */
 import './index.scss';
 import React, { useEffect } from 'react';
@@ -30,8 +30,6 @@ const StudentStudy = (props) => {
       saveUserProgramIdentifier,
     } = props;
 
-    
-    console.log(props);
     let { id } = params;
     // console.log(id);
     // 保存当前的id

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-05 10:15:25
+ * @LastEditTime: 2019-12-06 17:17:27
  */
 import React, { useState, useEffect } from 'react';
 import {connect} from 'react-redux';
@@ -43,6 +43,17 @@ const RightPane = (props) => {
     // 保存用户提交的代码块
     // console.log(code);
     // 保存用户代码块
+    const { userCode } = props;
+    let timer;
+    if (!timer) {
+      timer = setInterval(() => {
+        if (userCode && userCode !== code) {
+        } else {
+          clearInterval(timer);
+          timer = null;
+        }
+      }, 3000);
+    }
     saveUserInputCode(code);
   }
   // 代码调试
@@ -75,10 +86,11 @@ const RightPane = (props) => {
 
 const mapStateToProps = (state) => {
 
-  const {user_program_identifier, hack, userTestInput} = state.ojForUserReducer;
+  const {user_program_identifier, hack, userTestInput, userCode} = state.ojForUserReducer;
   // const { language, code } = hack;
   return {
     hack,
+    userCode,
     input: userTestInput,
     submitInput: hack.input, 
     identifier: user_program_identifier

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

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-27 13:42:11
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-05 10:44:17
+ * @LastEditTime: 2019-12-06 17:16:14
  */
 import types from "./actionTypes";
 import { Base64 } from 'js-base64';
@@ -81,8 +81,20 @@ export const getUserProgramDetail = (identifier, type) => {
   }
 }
 
+export const saveUserCodeForInterval = (identifier, code) => {
+  return (dispatch) => {
+    fetchUpdateCode(identifier, {
+      code
+    }).then(res => {
+      if (res.data.status === 401) {
+        return;
+      };
+    });
+  }
+}
+
 /**
- * @description 更新代码
+ * @description 保存或更新之前先更新代码
  * @param {*} identifier 
  * @param {*} inputValue 输入值: 自定义 | 系统返回的
  * @param {*} type 测评类型 debug | submit