git_url

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

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import axios from 'axios'
 import { Spin } from 'antd'
+import ClipboardJS from 'clipboard'
 
 import VNCDisplay from './VNCDisplay'
 import FloatButton from './component/FloatButton'
@@ -20,7 +21,13 @@ class VNCContainer extends Component {
 		}
 	}
 	componentDidMount() {
-		
+		if (!this.clipboard) {
+			const clipboard = new ClipboardJS('.copybtn');
+			clipboard.on('success', (e) => {
+				this.props.showSnackbar('复制成功')
+			});
+			this.clipboard = clipboard
+		}
 
 	}
 	getSecondDrawerWidth = () => {
@@ -64,7 +71,7 @@ class VNCContainer extends Component {
     	}).catch(error =>{
     		console.log(error)
 			this.setState({ readingCodeLoading: false });
-			showSnackbar(`服务端异常，请联系管理员！`);
+			this.props.showSnackbar(`服务端异常，请联系管理员！`);
     	})
 	}
 	onTreeSelect = (selectedKeys, info) => {
@@ -82,7 +89,7 @@ class VNCContainer extends Component {
 				if (filetype == 'jpg' || filetype == 'png' || filetype == 'gif' || filetype == 'jpeg'
 						|| filetype == 'jar'
 						|| filetype == 'doc' || filetype == 'pdf' || filetype == 'xsl' || filetype == 'ppt') {
-					showSnackbar(`不支持加载${filetype}类型的文件。`)
+					this.props.showSnackbar(`不支持加载${filetype}类型的文件。`)
 					return;
 				}
 				this.fetchReadRepositoryCode(nodePath);	
@@ -96,7 +103,7 @@ class VNCContainer extends Component {
 	onSelect={onTreeSelect}
 	*/
   	render() {
-  		const { challenge,  vnc_url } = this.props
+  		const { challenge, vnc_url, git_url } = this.props
 
 		const secondDrawerChildren = this.renderSecondDrawerChildren();
 	    return (
@@ -113,27 +120,44 @@ class VNCContainer extends Component {
 					secondDrawerClassName="codeInDrawer"
                 >
 					<style>{`
-						.repoFilesDrawer .ant-drawer-wrapper-body {
+						.vncDrawer .ant-drawer-body {
+							padding: 0px;
+						}
+						.vncDrawer .rc-tree {
+							padding: 16px;
+							max-width: 220px;
+						}
+
+						.vncDrawer .ant-drawer-wrapper-body {
 							background: #242324;
 						}
 						.codeInDrawer .ant-drawer-wrapper-body {
 							background: #1D1C1D;
 						}
 						
-						.repoFilesDrawer .ant-drawer-header, .codeInDrawer .ant-drawer-header {
+						.vncDrawer .ant-drawer-header, .codeInDrawer .ant-drawer-header {
 							border-bottom: 0;
 						}
 
 
-						.repoFilesDrawer.vncDrawer > div:nth-child(2) {
+						.vncDrawer > div:nth-child(2) {
 							top: 0px !important;
 							height: 100% !important;
+							min-width: unset;
 						}
 
 						.codeInDrawer .ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
 							text-shadow: none;
 						}
 					`}</style>
+					<div style={{ 'padding': '16px', 'border-bottom': '1px solid #3A383A' }}>
+						<div style={{ color: '#888888' }}>网址克隆</div>
+						<div>
+							<input value={git_url} readonly={true} style={{ color: '#BABABA', width: '190px', background: 'transparent', border: 'none' }}></input>
+							<i class="iconfont icon-fuzhi font-14 ml10 copybtn" 
+								style={{color: '#4CACFF', cursor: 'pointer', verticalAlign: 'baseline'}} data-clipboard-text={git_url} ></i>
+						</div>
+					</div>
 					<RepoTree
 						{...this.props}
 						fileTreeSelectedKeys={this.state.fileTreeSelectedKeys}