m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

添加提交功能

Browse Source
dev_forge
tangjiang 5 years ago
parent 2140bb7a3c
commit b3f9dae41a
4 changed files with 201 additions and 229 deletions
Show Stats Download Patch File Download Diff File

83
public/react/src/modules/developer/newOrEditTask/index.js
Unescape View File

@ -3,43 +3,72 @@
* @Author: tangjiang * @Author: tangjiang
* @Date: 2019-11-15 16:38:34 * @Date: 2019-11-15 16:38:34
* @Last Modified by: tangjiang * @Last Modified by: tangjiang
* @Last Modified time: 2019-11-19 11:34:19 * @Last Modified time: 2019-11-19 23:23:41
*/ */
import './index.scss'; import './index.scss';
import React, { Component } from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import SplitPane from 'react-split-pane';// import { Form } from 'antd'; import SplitPane from 'react-split-pane';// import { Form } from 'antd';
import { Button, Icon } from 'antd'; import { Button, Icon } from 'antd';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import LeftPane from './leftpane'; import LeftPane from './leftpane';
import RightPane from './rightpane'; import RightPane from './rightpane/index';
class NewOrEditTask extends Component {
render() { // class NewOrEditTask extends React.Component {
return ( // render() {
<div className={'new_add_task_wrap'}> // return (
<div className={'task_header'}> // <div className={'new_add_task_wrap'}>
<Link to="/" className={'header_btn'} > // <div className={'task_header'}>
<Icon type="left" style={{ marginRight: '5px'}}/>后退 // <Link to="/" className={'header_btn'} >
</Link> // <Icon type="left" style={{ marginRight: '5px'}}/>后退
<span className={'header_title'}>标题内容</span> // </Link>
<Button className={`header_btn`} type="primary">立即发布</Button> // <span className={'header_title'}>标题内容</span>
</div> // <Button className={`header_btn`} type="primary">立即发布</Button>
<div className="split-pane-area"> // </div>
<SplitPane split="vertical" minSize={200} maxSize={-200} defaultSize="50%"> // <div className="split-pane-area">
<div className={'split-pane-left'}> // <SplitPane split="vertical" minSize={200} maxSize={-200} defaultSize="50%">
<LeftPane /> // <div className={'split-pane-left'}>
</div> // <LeftPane />
<SplitPane split="vertical" defaultSize="100%" allowResize={false}> // </div>
<RightPane /> // <SplitPane split="vertical" defaultSize="100%" allowResize={false}>
<div /> // <RightPane />
</SplitPane> // <div />
// </SplitPane>
// </SplitPane>
// </div>
// </div>
// )
// }
// }
const NewOrEditTask = () => {
// 表单提交
const handleSubmitForm = () => {}
return (
<div className={'new_add_task_wrap'}>
<div className={'task_header'}>
<Link to="/" className={'header_btn'} >
<Icon type="left" style={{ marginRight: '5px'}}/>后退
</Link>
<span className={'header_title'}>标题内容</span>
<Button className={`header_btn`} type="primary">立即发布</Button>
</div>
<div className="split-pane-area">
<SplitPane split="vertical" minSize={200} maxSize={-200} defaultSize="50%">
<div className={'split-pane-left'}>
<LeftPane />
</div>
<SplitPane split="vertical" defaultSize="100%" allowResize={false}>
<RightPane
onSubmit={ handleSubmitForm }
/>
<div />
</SplitPane> </SplitPane>
</div> </SplitPane>
</div> </div>
</div>
) )
}
} }
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({

122
public/react/src/modules/developer/newOrEditTask/rightpane/RightPaneCode.js
Unescape View File

@ -1,122 +0,0 @@
/*
* @Description: 右侧代码块
* @Author: tangjiang
* @Date: 2019-11-18 08:42:04
* @Last Modified by: tangjiang
* @Last Modified time: 2019-11-19 08:55:08
*/
import './index.scss';
import React, { Fragment, useState } from 'react';
import { Icon, Drawer, Tabs, Button } from 'antd';
// import MonacoEditor from 'react-monaco-editor';
import MonacoEditor from '@monaco-editor/react';
import InitTabCtx from './initTabCtx';
const { TabPane } = Tabs;
const tabsArrs = [
{
title: '自定义测试用例',
key: '1',
content: '这是自定测试用例内容'
},
{
title: '代码执行结果',
key: '2',
content: '这是自定代码执行结果'
}
];
const RightPaneCode = () => {
const [showDrawer, setShowDrawer] = useState(false);
const [defaultActiveKey, setDefaultActiveKey] = useState('1');
const [showTextResult, setShowTextResult] = useState(false);
const [editCode, setEditCode] = useState('console.log("test")');
// 打开设置
const handleShowDrawer = () => {
setShowDrawer(true);
}
// 关闭设置
const handleDrawerClose = () => {
setShowDrawer(false);
}
// 切换tab
const handleTabChange = (key) => {
setDefaultActiveKey(key);
}
// 显示/隐藏tab
const handleShowControl = () => {
setShowTextResult(!showTextResult);
}
// 沉浸tab内容
const tabs = tabsArrs.map((tab) => (
<TabPane tab={tab.title} key={tab.key} style={{ height: '280px', overflowY: 'auto' }}>
<InitTabCtx ctx={tab.content} state="loaded" position="center"/>
</TabPane>
));
const handleEditorChange = (newValue, e) => {
setEditCode(newValue);
}
const classNames = showTextResult ? 'control_tab active' : 'control_tab';
const editorOptions = {
selectOnLineNumbers: true,
automaticLayout: true,
fontSize: '16px'
}
return (
<Fragment>
<div className={'right_pane_code_wrap'}>
<div className={'code-title'}>
<span>ts.js</span>
<span>已保存</span>
<Icon className={'code-icon'} type="setting" onClick={handleShowDrawer}/>
</div>
{/** 代码编辑器 */}
<MonacoEditor
height={showTextResult ? 'calc(100% - 382px)' : 'calc(100% - 112px)'}
width="100%"
language="typescript"
value={editCode}
options={editorOptions}
theme="dark"
onChange={handleEditorChange}
/>
{/* 控制台信息 */}
<div className="pane_control_area">
<Tabs
className={classNames}
activeKey={defaultActiveKey}
tabBarStyle={{ backgroundColor: '#000', color: '#fff' }}
onChange={handleTabChange}
>
{tabs}
</Tabs>
<div className="pane_control_opts">
<Button type="link" size="small" style={{ color: '#fff' }} onClick={handleShowControl}>控制台 <Icon type={ showTextResult ? "down" : "up" } /></Button>
<p>
<Button ghost size="small" style={{ marginRight: '10px', color: '#28BD8B', borderColor: '#28BD8B' }}>调试代码</Button>
<Button type="primary" size="small">提交</Button>
</p>
</div>
</div>
</div>
<Drawer
placement="right"
closable={false}
onClose={handleDrawerClose}
visible={showDrawer}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</Fragment>
);
}
export default RightPaneCode;

71
public/react/src/modules/developer/newOrEditTask/rightpane/RightPaneControl.js
Unescape View File

@ -1,71 +0,0 @@
import './index.scss';
import React, { Component } from 'react';
import { Tabs, Button, Icon } from 'antd';
import InitTabCtx from './initTabCtx';
const { TabPane } = Tabs;
const tabsArrs = [
{
title: '自定义测试用例',
key: '1',
content: '这是自定测试用例内容'
},
{
title: '代码执行结果',
key: '2',
content: '这是自定代码执行结果'
}
];
class RightPaneControl extends Component {
state = {
defaultActiveKey: '1'
}
handleTabChange = (key) => {
this.setState({
defaultActiveKey: key,
})
}
handleShowControl = () => {
this.setState((oldState) => ({
showTextResult: !oldState.showTextResult
}))
}
render () {
const { defaultActiveKey, showTextResult } = this.state;
// tab内容区块
const tabs = tabsArrs.map((tab) => (
<TabPane tab={tab.title} key={tab.key} style={{ height: '280px', overflowY: 'auto' }}>
<InitTabCtx ctx={tab.content} state="loaded" position="center"/>
</TabPane>
));
return (
<div className="pane_control_area" style={{ height: showTextResult ? '400px' : '56px' }}>
{/* <Tabs
activeKey={defaultActiveKey}
tabBarStyle={{ backgroundColor: '#000', color: '#fff' }}
onChange={this.handleTabChange}
style={{display: showTextResult ? 'block' : 'none'}}
>
{tabs}
</Tabs> */}
<div className="pane_control_opts">
<Button type="link" size="small" style={{ color: '#fff' }} onClick={this.handleShowControl}>控制台 <Icon type={ showTextResult ? "down" : "up" } /></Button>
<p>
<Button ghost size="small" style={{ marginRight: '10px', color: '#28BD8B', borderColor: '#28BD8B' }}>调试代码</Button>
<Button type="primary" size="small">提交</Button>
</p>
</div>
</div>
)
}
}
export default RightPaneControl;

154
public/react/src/modules/developer/newOrEditTask/rightpane/index.js
Unescape View File

@ -1,20 +1,156 @@
/* /*
* @Description: 右侧部分: 包含代码块与控制区 * @Description: 右侧代码块
* @Author: tangjiang * @Author: tangjiang
* @Date: 2019-11-18 08:42:40 * @Date: 2019-11-18 08:42:04
* @Last Modified by: tangjiang * @Last Modified by: tangjiang
* @Last Modified time: 2019-11-18 22:58:39 * @Last Modified time: 2019-11-20 00:00:34
*/ */
import React from 'react'; import './index.scss';
import RightPaneCode from './RightPaneCode';
const RightPane = () => { import React, { Fragment, useState, useRef } from 'react';
import { Icon, Drawer, Tabs, Button, notification } from 'antd';
// import MonacoEditor from 'react-monaco-editor';
import MonacoEditor from '@monaco-editor/react';
import InitTabCtx from './initTabCtx';
const { TabPane } = Tabs;
const tabsArrs = [
{
title: '自定义测试用例',
key: '1',
content: '这是自定测试用例内容'
},
{
title: '代码执行结果',
key: '2',
content: '这是自定代码执行结果'
}
];
const RightPaneCode = (props) => {
const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框
const [defaultActiveKey, setDefaultActiveKey] = useState('1'); // 当前选中的tab
const [showTextResult, setShowTextResult] = useState(false); // 是否点击控制台按钮
const [editCode, setEditCode] = useState('console.log("test")'); // monaco编辑器内容
const editorRef = useRef(null); // 编辑器ref
// 打开设置
const handleShowDrawer = () => {
setShowDrawer(true);
}
// 关闭设置
const handleDrawerClose = () => {
setShowDrawer(false);
}
// 切换tab
const handleTabChange = (key) => {
setDefaultActiveKey(key);
}
// 显示/隐藏tab
const handleShowControl = () => {
setShowTextResult(!showTextResult);
}
// 沉浸tab内容
const tabs = tabsArrs.map((tab) => (
<TabPane tab={tab.title} key={tab.key} style={{ height: '280px', overflowY: 'auto' }}>
<InitTabCtx ctx={tab.content} state="loaded" position="center"/>
</TabPane>
));
// 文本框内容变化时，记录文本框内容
const handleEditorChange = (origin, monaco) => {
editorRef.current = monaco; // 获取当前monaco实例
setEditCode(origin); // 保存编辑器初始值
editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化
const val = editorRef.current.getValue();
setEditCode(val);
});
}
// 提交按钮点击
const handleSubmit = () => {
if (!editCode) {
notification['error']({
message: '必填',
description: '代码块内容必须输入!'
});
editorRef.current.focus();
return;
}
const { onSubmit } = props;
onSubmit(editCode);
}
// 控制台点击时 添加active属性
const classNames = showTextResult ? 'control_tab active' : 'control_tab';
// 配置编辑器属性
const editorOptions = {
selectOnLineNumbers: true,
automaticLayout: true,
fontSize: '16px'
}
// 返回渲染值
return ( return (
<RightPaneCode /> <Fragment>
<div className={'right_pane_code_wrap'}>
<div className={'code-title'}>
<span>ts.js</span>
<span>已保存</span>
<Icon className={'code-icon'} type="setting" onClick={handleShowDrawer}/>
</div>
{/** 代码编辑器 */}
<MonacoEditor
height={showTextResult ? 'calc(100% - 382px)' : 'calc(100% - 112px)'}
width="100%"
language="typescript"
value={editCode}
options={editorOptions}
theme="dark"
editorDidMount={handleEditorChange}
/>
{/* 控制台信息 */}
<div className="pane_control_area">
<Tabs
className={classNames}
activeKey={defaultActiveKey}
tabBarStyle={{ backgroundColor: '#000', color: '#fff' }}
onChange={handleTabChange}
>
{tabs}
</Tabs>
<div className="pane_control_opts">
<Button type="link" size="small" style={{ color: '#fff' }} onClick={handleShowControl}>控制台 <Icon type={ showTextResult ? "down" : "up" } /></Button>
<p>
<Button ghost size="small" style={{ marginRight: '10px', color: '#28BD8B', borderColor: '#28BD8B' }}>调试代码</Button>
<Button
type="primary"
size="small"
onClick={handleSubmit}
>提交</Button>
</p>
</div>
</div>
</div>
<Drawer
placement="right"
closable={false}
onClose={handleDrawerClose}
visible={showDrawer}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</Fragment>
); );
} }
export default RightPane; export default RightPaneCode;

Write Preview
Loading…
Cancel
Save