差git_url

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

@@ -219,6 +219,7 @@ class Index extends Component {
 
 							praisePlus={context.praisePlus}
 
+							git_url={context.git_url}
 							mirror_name={context.mirror_name}
 	    					challenge={context.challenge}
 	    					myshixun={context.myshixun}

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

@@ -94,9 +94,13 @@ class MainContent extends Component {
 						    <div className="fl pr tip-right-con" id="update_game_tip"></div>
 						</div>*/}
 
-						{ showIframeContent && vnc_url ? <VNCContainer
+						{ showIframeContent && vnc_url ? 
+						<CodeRepositoryViewContainer { ...this.props } isOnlyContainer={true}>
+							<VNCContainer
 								vnc_url={vnc_url}
+								{...this.props}
 							></VNCContainer>
+						</CodeRepositoryViewContainer>
 						:
 						<React.Fragment>
 

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

@@ -1,12 +1,24 @@
 import React, { Component } from 'react';
+import axios from 'axios'
+import { Spin } from 'antd'
+
 import VNCDisplay from './VNCDisplay'
 import FloatButton from './component/FloatButton'
 import SecondDrawer from './component/SecondDrawer'
-
+import RepoTree from './component/repo/RepoTree'
+import TPIMonaco from './component/monaco/TPIMonaco'
 import './VNC.css'
 const $ = window.$;
-const firstDrawerWidth = 400;
+const firstDrawerWidth = 260;
 class VNCContainer extends Component {
+	constructor(props) {
+		super(props)
+		
+		this.state = {
+			fileTreeSelectedKeys: [],
+			repositoryCode: ''
+		}
+	}
 	componentDidMount() {
 		
 
@@ -15,10 +27,74 @@ class VNCContainer extends Component {
 		return $('#game_right_contents').width() - firstDrawerWidth
 	}
 	renderSecondDrawerChildren = () => {
-		return (<div>
+		const { readingCodeLoading, repositoryCode } = this.state;
+		const height = $(window).height() - 130
+		return (
+		<Spin tip="加载中..." spinning={readingCodeLoading}>
+			<div style={{ height: `${height}px` }}>
+			
+				<TPIMonaco
+					{...this.state}
+					codeLoading={readingCodeLoading}
+					repositoryCode={repositoryCode}
+					isEditablePath={false}
+				></TPIMonaco>
+			
+			</div>
+		</Spin>);
+	}
+	fetchReadRepositoryCode = (path) => {
+		const status = 1
+		const fetchRepoCodeUrl = `/tasks/${this.props.game.identifier}/rep_content.json?path=${path}&status=${status}`
+		this.setState({ readingCodeLoading: true });
+    	axios.get(fetchRepoCodeUrl, {
+    	}).then((fetchReadRepositoryCodeResponse) => {
+			
+			
+			if (fetchReadRepositoryCodeResponse.data.content || fetchReadRepositoryCodeResponse.data.content == "") {
+				this.setState({ 
+					repositoryCode: fetchReadRepositoryCodeResponse.data.content,
+					readingCodeLoading: false
+				})
+			} else {
+				this.setState({ readingCodeLoading: false });
+			}
+			// this.setState({ isEditablePath, currentPath: path });
+
+    	}).catch(error =>{
+    		console.log(error)
+			this.setState({ readingCodeLoading: false });
+			showSnackbar(`服务端异常，请联系管理员！`);
+    	})
+	}
+	onTreeSelect = (selectedKeys, info) => {
+		const isLeaf = info.node.props.isLeaf;
+		if (isLeaf) {		// 叶子节点
+			selectedKeys.length && this.setState({
+				fileTreeSelectedKeys: selectedKeys
+			})
+			this.refs["secondDrawer"].showSecondDrawer()
 
-		</div>);
+			console.log('leaf clicked')
+			const nodePath = info.node.props.eventKey;
+			if (nodePath) {
+				const filetype = nodePath.split('.').pop().toLowerCase();
+				if (filetype == 'jpg' || filetype == 'png' || filetype == 'gif' || filetype == 'jpeg'
+						|| filetype == 'jar'
+						|| filetype == 'doc' || filetype == 'pdf' || filetype == 'xsl' || filetype == 'ppt') {
+					showSnackbar(`不支持加载${filetype}类型的文件。`)
+					return;
 				}
+				this.fetchReadRepositoryCode(nodePath);	
+			} else {
+				console.error('no eventKey:', info.node)
+			}
+		}
+	}
+	/*
+	selectedKeys={fileTreeSelectedKeys}
+	onSelect={onTreeSelect}
+	*/
   	render() {
   		const { challenge,  vnc_url } = this.props
 
@@ -26,13 +102,44 @@ class VNCContainer extends Component {
 	    return (
 	      	<React.Fragment>
                 <SecondDrawer
+					ref="secondDrawer"
                     floatText={'版本库'}
 					maskClosable={false}
 					secondDrawerChildren={secondDrawerChildren}	
 					firstDrawerWidth={firstDrawerWidth}
 					getSecondDrawerWidth={this.getSecondDrawerWidth}
+
+					firstDrawerClassName="repoFilesDrawer vncDrawer"
+					secondDrawerClassName="codeInDrawer"
                 >
+					<style>{`
+						.repoFilesDrawer .ant-drawer-wrapper-body {
+							background: #242324;
+						}
+						.codeInDrawer .ant-drawer-wrapper-body {
+							background: #1D1C1D;
+						}
+						
+						.repoFilesDrawer .ant-drawer-header, .codeInDrawer .ant-drawer-header {
+							border-bottom: 0;
+						}
+
+
+						.repoFilesDrawer.vncDrawer > div:nth-child(2) {
+							top: 0px !important;
+							height: 100% !important;
+						}
+
+						.codeInDrawer .ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
+							text-shadow: none;
+						}
+					`}</style>
+					<RepoTree
+						{...this.props}
+						fileTreeSelectedKeys={this.state.fileTreeSelectedKeys}
+						onTreeSelect={this.onTreeSelect}
 
+					></RepoTree>
 				</SecondDrawer>
                 <FloatButton></FloatButton>
                 <VNCDisplay

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

@@ -19,7 +19,7 @@ class SecondDrawer extends React.Component {
     });
   };
 
-  showChildrenDrawer = () => {
+  showSecondDrawer = () => {
     this.setState({
       childrenDrawer: true
     });
@@ -30,7 +30,7 @@ class SecondDrawer extends React.Component {
       childrenDrawer: false
     });
   };
-  onCloseInner = () => {};
+  
   swtichFirstDrawer = () => {
     this.setState({
       visible: !this.state.visible,
@@ -43,21 +43,25 @@ class SecondDrawer extends React.Component {
     });
   }
   render() {
-    const { floatText, maskClosable, children, secondDrawerChildren, firstDrawerWidth, getSecondDrawerWidth } = this.props
+    const { floatText, maskClosable, children, secondDrawerChildren, firstDrawerWidth, getSecondDrawerWidth
+        ,firstDrawerClassName, secondDrawerClassName
+       } = this.props
     const secondDrawerWidth = getSecondDrawerWidth();
     // 180  不知道为什么会偏移 180px
     return (
         <Drawer
+          // mask={!this.state.visible}
           title="　"
           width={this.state.childrenDrawer ? secondDrawerWidth + firstDrawerWidth - 180 : firstDrawerWidth}
           closable={false}
           onClose={this.onClose}
           visible={this.state.visible}
           maskClosable={maskClosable}
+          className={firstDrawerClassName}
         >
-          <button type="primary" onClick={this.showChildrenDrawer}>
+          {/* <button type="primary" onClick={this.showSecondDrawer}>
             Two-level drawer
-          </button>
+          </button> */}
           <FloatButton onClick={this.swtichFirstDrawer}>{floatText}</FloatButton>
           { children }
           
@@ -68,6 +72,8 @@ class SecondDrawer extends React.Component {
             closable={false}
             onClose={this.onChildrenDrawerClose}
             visible={this.state.childrenDrawer}
+            className={secondDrawerClassName}
+
           >
             { secondDrawerChildren }
             {/* <button

public/react/src/modules/page/component/monaco/TPIMonaco.js

@@ -271,6 +271,7 @@ class TPIMonaco extends Component {
             const lang = getLanguageByMirrorName(this.props.mirror_name);
             const editor = window.monaco.editor.create(document.getElementById('extend-challenge-file-edit'), {
                 value: value,
+                readOnly: !this.props.isEditablePath,
                 // 属性说明
                 // http://testeduplus2.educoder.net/react/build/static/node_modules/_monaco-editor@0.15.6@monaco-editor/esm/vs/editor/common/config/commonEditorConfig.js
                 // https://github.com/Microsoft/monaco-editor/issues/29
@@ -303,7 +304,7 @@ class TPIMonaco extends Component {
                     notCallCodeMirrorOnChangeFlag = false
                     return;
                 }
-                this.props.onRepositoryCodeUpdate(editor.getValue())
+                this.props.onRepositoryCodeUpdate && this.props.onRepositoryCodeUpdate(editor.getValue())
             })
             this.props.codemirrorDidMount && this.props.codemirrorDidMount()
             

public/react/src/modules/page/component/repo/RepoTree.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, useContext, useRef, memo } from 'react';
+
+// import { Tree } from 'antd';
+// const { TreeNode } = Tree;
+import Tree, { TreeNode } from 'rc-tree';
+import 'rc-tree/assets/index.css';
+
+const $ = window.$;
+export default function RepoTree(props) {
+    const { fileTreeData, onLoadData, onTreeSelect, fileTreeSelectedKeys, loadRepoFiles } = props;
+    const [expandedKeys, setExpandedKeys] = useState([])
+    useEffect(() => {
+        loadRepoFiles()
+    }, [])
+
+    if (!fileTreeData || fileTreeData.length === 0) {
+        return ""
+    }
+
+    const onExpand = (expandedKeys) => {
+        // console.log('onExpand', arguments);
+        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+        // or, you can remove all expanded children keys.
+        setExpandedKeys(expandedKeys)
+    }
+
+    const loop = (data) => {
+        return data.map((item) => {
+            if (item.children) {
+                return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
+            }
+            return (
+                <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} />
+            );
+        });
+    };
+    const treeNodes = loop(fileTreeData);
+    
+    
+    // selectable={false}
+    return (
+        <Tree
+            onExpand={onExpand}
+            expandedKeys={expandedKeys}
+            // autoExpandParent={this.state.autoExpandParent}
+            loadData={onLoadData}
+            
+            selectedKeys={fileTreeSelectedKeys}
+            onSelect={onTreeSelect}
+        >
+            {treeNodes}
+        </Tree>
+    )
+}

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

@@ -276,6 +276,21 @@ class CodeRepositoryViewContainer extends Component {
   	render() {
 		  
 	    return (
+			<React.Fragment>
+				{this.props.isOnlyContainer == true ? 
+					React.Children.map(this.props.children, child => {
+						if(!child) {
+							return ''
+						}
+						return React.cloneElement(child, Object.assign({...this.state}, { 
+							loadRepoFiles: this.loadRepoFiles,
+							onTreeSelect: this.onTreeSelect,
+							onLoadData: this.onLoadData,
+						}))
+					})
+
+				 : 
+			
 				<CodeRepositoryView {...this.props} 
 					{...this.state} 
 					showFilesDrawer={this.showFilesDrawer}
@@ -285,8 +300,8 @@ class CodeRepositoryViewContainer extends Component {
 					onRepositoryViewExpand={this.onRepositoryViewExpand}
 					tabIndexChange={this.tabIndexChange}
 					showSettingDrawer={this.showSettingDrawer}
-
+				></CodeRepositoryView> }
-	      	></CodeRepositoryView>
+			</React.Fragment>
 	    );
   	}
 }