添加监听浏览器关闭事件

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

@@ -22,6 +22,7 @@ import TPICodeMirror from '../component/TPICodeMirror'
 import TPIMonaco from '../component/monaco/TPIMonaco'
 
 import { loadSshScript, openTerminal } from './Webssh'
+import { Modal } from 'antd';
 
 const $ = window.$;
 
@@ -114,8 +115,28 @@ class CodeRepositoryView extends Component {
         
         // $('#codetab_con_1').append(``)
         // $('#codetab_con_1 .codemirrorBackground').hide()
-        
+        window.addEventListener('beforeunload', this.beforeUnload);
+    }
+
+    componentWillUnmount () {
+        window.removeEventListener('beforeunload', this.beforeUnload);
+    }
+
+    beforeUnload = (e) => {
+        // console.log(this.props);
+        const { game } = this.props;
+        const url = `/api/tasks/${game.identifier}/cost_time.json`;
+        axios.get(url).then(res => {
+            // TODO
+        });
+        const msg = '确定要离开吗?';
+        e = e || window.event;
+        if (e) {
+            e.returnValue = msg;
+        }
+        return msg;
     }
+
     onTreeSelect = (selectedKeys, info) => {
         if (!info.node.isLeaf()) {
             const expandedKeys = this.state.expandedKeys.slice(0)
@@ -223,7 +244,7 @@ class CodeRepositoryView extends Component {
                 // js_min_all.js有同样的计算逻辑，用来拖拽时计算ssh高宽
                 // TODO 结合new Terminal 时的fontSize参数来定高度
                 const gameCtx = $("#games_repository_contents");
-                gameCtx.css({'padding-bottom': '50px', 'background': '#000'});
+                gameCtx.css({'padding-bottom': '30px', 'background': '#000'});
                 var h      = gameCtx.height() - 50;
                 var w      = gameCtx.width();
                 var line_h = (navigator.userAgent.indexOf('Chrome') >= 0 ? 18 : 19);
@@ -543,13 +564,13 @@ class CodeRepositoryView extends Component {
                     {/* { tabIndex === STABLE_SSH_TAB_ID && this.state.sshData && <Webssh {...this.state.sshData} ></Webssh> } */}
                 </div>
                 <div id="codetab_con_82" className="undis -relative" 
-                    style={ { color: '#fff', display: tabIndex === 82 ? 'block' : 'none', 'marginLeft': '2px', 'paddingBottom': '50px' } }>
+                    style={ { color: '#fff', display: tabIndex === 82 ? 'block' : 'none', 'marginLeft': '2px', 'paddingBottom': '30px' } }>
                 </div>
                 <div id="codetab_con_83" className="undis -relative" 
-                    style={ { color: '#fff', display: tabIndex === 83 ? 'block' : 'none', 'marginLeft': '2px', 'paddingBottom': '50px'} }>
+                    style={ { color: '#fff', display: tabIndex === 83 ? 'block' : 'none', 'marginLeft': '2px', 'paddingBottom': '30px'} }>
                 </div>
                 <div id="codetab_con_84" className="undis -relative" 
-                    style={ { color: '#fff', display: tabIndex === 84 ? 'block' : 'none', 'marginLeft': '2px', 'paddingBottom': '50px'} }>
+                    style={ { color: '#fff', display: tabIndex === 84 ? 'block' : 'none', 'marginLeft': '2px', 'paddingBottom': '30px'} }>
                 </div>
                 <div id="codetab_con_3" className="undis -relative" style={{display: 'none'}}></div>
 		    </React.Fragment>