diff --git a/public/react/src/constants/index.js b/public/react/src/constants/index.js
index abae13db0..3e7aceab0 100644
--- a/public/react/src/constants/index.js
+++ b/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: '字体大小',
+ text: '字体大小',
+ type: 'font',
value: [
{
key: 1,
diff --git a/public/react/src/modules/developer/components/controlSetting/index.scss b/public/react/src/modules/developer/components/controlSetting/index.scss
index 0c7f726f5..4a2c221c1 100644
--- a/public/react/src/modules/developer/components/controlSetting/index.scss
+++ b/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;
+ }
}
diff --git a/public/react/src/modules/developer/components/monacoSetting/index.js b/public/react/src/modules/developer/components/monacoSetting/index.js
index ea8448fa0..a101819e0 100644
--- a/public/react/src/modules/developer/components/monacoSetting/index.js
+++ b/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 { Select } from 'antd';
-
-const { Option } = Select;
+import React, { useState } from 'react';
+import { fromStore, toStore } from 'educoder';
+// import { Select } from 'antd';
+// 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) => {
- const {onChangeFontSize} = props;
- const value = e.target.value;
- console.log('fong size change: ', value);
+ // 字体改变时， 方法全名: handleChangeXX, XX 为指定的类型;
+ const {
+ onChangeFontSize,
+ 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) => {
);
} 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) => {
+ return (
+
+ )});
renderResult = (
{ctx.text}
-
+
);
}
}
diff --git a/public/react/src/modules/developer/components/myMonacoEditor/index.js b/public/react/src/modules/developer/components/myMonacoEditor/index.js
index cb791f091..50d96db2d 100644
--- a/public/react/src/modules/developer/components/myMonacoEditor/index.js
+++ b/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}
/>
@@ -117,7 +127,11 @@ function MyMonacoEditor (props, ref) {
onClose={handleDrawerClose}
visible={showDrawer}
>
-
+
diff --git a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js
index f13c53b22..143e8b634 100644
--- a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js
+++ b/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'], // 切换按钮
diff --git a/public/react/src/modules/developer/studentStudy/index.js b/public/react/src/modules/developer/studentStudy/index.js
index 5c9a89247..83ac2fe59 100644
--- a/public/react/src/modules/developer/studentStudy/index.js
+++ b/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
diff --git a/public/react/src/modules/developer/studentStudy/rightpane/index.js b/public/react/src/modules/developer/studentStudy/rightpane/index.js
index 06f24f4ca..bc57e979d 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-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
diff --git a/public/react/src/redux/actions/ojForUser.js b/public/react/src/redux/actions/ojForUser.js
index f91020a3b..9ee998efc 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-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