vnc

public/react/src/modules/page/MainContent.js

@@ -31,8 +31,22 @@ class MainContent extends Component {
 	onResizeButtonClick = () => {
 		// console.log('onResizeButtonClick')
 	}
+	onRunCodeTest = () => {
+		const vncContainer = this.refs['vncContainer']
+		if (vncContainer) {
+			vncContainer.showCodeEvaluate  && vncContainer.showCodeEvaluate()
+		}
+		this.props.onRunCodeTest();
+	}
+	hideCodeEvaluate = () => {
+		const vncContainer = this.refs['vncContainer']
+		if (vncContainer) {
+			vncContainer.onBottomDrawerClose  && vncContainer.onBottomDrawerClose()
+		}
+	}
   	render() {
-  		const { challenge, output_sets, onRunCodeTest, latest_output, record, st, readRepoTimeout,
+		const onRunCodeTest = this.onRunCodeTest
+  		const { challenge, output_sets, latest_output, record, st, readRepoTimeout,
   				onTestSetHeaderClick, loading, codeLoading, shixun, vnc_url} = this.props
 
   		// if (output_sets && output_sets.test_sets) {
@@ -97,11 +111,23 @@ class MainContent extends Component {
 						{ showIframeContent && vnc_url ? 
 						<CodeRepositoryViewContainer { ...this.props } isOnlyContainer={true}>
 							<VNCContainer
+								ref="vncContainer"
 								vnc_url={vnc_url}
 								{...this.props}
+								codeEvaluate={
+									<div id="games_valuation_contents">
+										<CodeEvaluateView output_sets={output_sets} latest_output={latest_output}
+											record={record} onTestSetHeaderClick={onTestSetHeaderClick} 
+											{...this.props} inDrawer={true}
+											hideCodeEvaluate={this.hideCodeEvaluate}
+											></CodeEvaluateView>
+									</div>
+								}
 							></VNCContainer>
 							<div id="actionView" className="-layout-h -center -bg-grey-90 -grey-20 -bg-darkblack" style={{height:'48px'}}>
-								<ActionView onRunCodeTest={onRunCodeTest} {...this.props}></ActionView>
+								<ActionView  {...this.props}
+									onRunCodeTest={onRunCodeTest}
+								></ActionView>
 							</div>
 						</CodeRepositoryViewContainer>
 						:
@@ -158,7 +184,7 @@ class MainContent extends Component {
     					</div>
 
     					<div id="actionView" className="-layout-h -center -bg-grey-90 -grey-20 -bg-darkblack" style={{height:'48px'}}>
-    						<ActionView onRunCodeTest={onRunCodeTest} {...this.props}></ActionView>
+    						<ActionView  {...this.props} onRunCodeTest={onRunCodeTest}></ActionView>
     					</div>
 
 						</React.Fragment>

public/react/src/modules/page/VNCContainer.js

@@ -10,6 +10,8 @@ import RepoTree from './component/repo/RepoTree'
 import TPIMonaco from './component/monaco/TPIMonaco'
 import notEditablePathImg from '../../images/tpi/notEditablePath.png'
 
+import { Drawer } from "antd";
+
 import './VNC.css'
 const $ = window.$;
 const firstDrawerWidth = 260;
@@ -103,6 +105,16 @@ class VNCContainer extends Component {
 			}
 		}
 	}
+	onBottomDrawerClose = () => {
+		this.setState({ bottomDrawer: false })
+	}
+	swtichBottomDrawer = () => {
+		this.setState({ bottomDrawer: !this.state.bottomDrawer })
+	}
+	showCodeEvaluate = () => {
+		this.setState({ bottomDrawer: true })
+	}
+	
 	/*
 	selectedKeys={fileTreeSelectedKeys}
 	onSelect={onTreeSelect}
@@ -125,6 +137,23 @@ class VNCContainer extends Component {
 					secondDrawerClassName="codeInDrawer"
                 >
 					<style>{`
+						/* 评测结果 */
+						.codeEvaluateDrawer #game_test_set_results {
+							height: 198px;
+						}					    
+						.codeEvaluateDrawer .ant-drawer-body {
+							padding: 0px;
+						}
+						.codeEvaluateFloatButton {
+							bottom: 180px !important;
+							left: unset;
+							right: 0px;
+							top: unset;
+						}
+						.codeEvaluateFloatButton .text {
+							left: 10px;
+						}
+						
 						.vncDrawer .ant-drawer-body {
 							padding: 0px;
 						}
@@ -173,10 +202,36 @@ class VNCContainer extends Component {
 
 					></RepoTree>
 				</SecondDrawer>
-                <FloatButton></FloatButton>
+                {/* <FloatButton></FloatButton> */}
                 <VNCDisplay
                     {...this.props}
-                ></VNCDisplay>
+                >
+				
+					<Drawer
+						mask={true}
+						title=""
+						width={firstDrawerWidth}
+						// closable={false}
+						onClose={this.onBottomDrawerClose}
+						visible={this.state.bottomDrawer}
+						className={'codeEvaluateDrawer'}
+						placement="bottom"
+						getContainer={false}
+						style={{ position: 'absolute', bottom: '25px', zIndex: 1 }}
+						afterVisibleChange={(visible) => {
+							if (visible) {
+								const canvas = $('.vncDisply canvas')[0]
+								canvas && canvas.focus()
+							}
+							
+						}}
+					>
+						{ this.props.codeEvaluate }
+					</Drawer>
+					<FloatButton onClick={this.swtichBottomDrawer}
+						className="codeEvaluateFloatButton"
+					>测试集</FloatButton>
+				</VNCDisplay>
 
                 
 		    </React.Fragment>

public/react/src/modules/page/VNCDisplay.js

@@ -165,7 +165,10 @@ class VNCDisplay extends Component {
                     <div id="status">Loading</div>
                     <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
                 </div>
-                <div id="screen"></div>
+                <div id="screen">
+                    
+                </div>
+                {this.props.children}
 		    </div>
 	    );
   	}

public/react/src/modules/page/component/FloatButton.js

@@ -8,10 +8,10 @@ class FloatButton extends Component {
 	}
 	
   	render() {
-  		const { challenge,  vnc_url, children } = this.props
+  		const { challenge,  vnc_url, children, className } = this.props
 
 	    return (
-            <div className="float_button" onClick={this.props.onClick}>
+            <div className={`float_button ${className}` } onClick={this.props.onClick}>
                 <style>{`
                     
                 `}</style>

public/react/src/modules/page/main/CodeEvaluateView.css

@@ -128,3 +128,10 @@
     margin: 5px 0;
     float: right;
 }
+
+.-task-ces-info .inputTitle {
+    line-height: 16px;
+}
+.-task-ces-info .inputTitle .input{
+    white-space: pre-wrap;
+}

public/react/src/modules/page/main/CodeEvaluateView.js

@@ -227,7 +227,12 @@ class CodeEvaluateView extends Component {
                                     <div className="clearfix df inputTitle">
                                         <span className="fl fb color-grey">测试输入：</span>
 
-                                        <div className="fl color-blue" style={{flex:1}} dangerouslySetInnerHTML={{__html: item.input.replace(/\r\n/g,"</br>")}}></div>
+                                        <div className="fl color-blue input" style={{flex:1}} 
+											// dangerouslySetInnerHTML={{__html: (item.input.replace(/\r\n/g,"</br>"))}}
+
+										>
+											{item.input}
+										</div>
 
                                     </div>
                                 </div>
@@ -307,14 +312,21 @@ class CodeEvaluateView extends Component {
 				    <a href="javascript:void(0);" className="tab_type tab_color">测试结果</a>
 				  </li>
 				  	
-				  	<Tooltip id="tooltip-icon-expand" title={ evaluateViewExpanded ? "收起" : "展开"}>
+				  	{this.props.inDrawer ? <Tooltip id="tooltip-icon-expand" title={ "收起" }>
+				  		{/*TODO 按钮大小改造，css*/}
+					  	{/* icon-guanbi */}
+					  	<a className="iconButton fr mr15 mt4" onClick={this.props.hideCodeEvaluate} id="extend_and_zoom" >
+					  		<i className={  "font-18 iconfont icon-guanbi" }></i>
+					  	</a>
+					  	
+				  	</Tooltip> : <Tooltip id="tooltip-icon-expand" title={ evaluateViewExpanded ? "收起" : "展开"}>
 				  		{/*TODO 按钮大小改造，css*/}
 					  	
 					  	<a className="iconButton fr mr15" onClick={this.onEvaluateViewExpand} id="extend_and_zoom" >
 					  		<i className={ evaluateViewExpanded ? "font-18 iconfont icon-shousuo" : "iconfont icon-zhankai font-18" }></i>
 					  	</a>
 					  	
-				  	</Tooltip>
+				  	</Tooltip>}
 				  
 				  <div className="cl"></div>
 				</ul>