update tpi command style

public/react/package.json

@@ -77,6 +77,7 @@
     "react-redux": "5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "react-split-pane": "^0.1.87",
     "react-url-query": "^1.4.0",
     "redux": "^4.0.0",
     "redux-thunk": "2.3.0",

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

@@ -222,8 +222,10 @@ class CodeRepositoryView extends Component {
                 const { game_id, host, password, port, username, webssh_url} = response.data
                 // js_min_all.js有同样的计算逻辑，用来拖拽时计算ssh高宽
                 // TODO 结合new Terminal 时的fontSize参数来定高度
-                var h      = $("#games_repository_contents").height() - 50;
+                const gameCtx = $("#games_repository_contents");
-                var w      = $("#games_repository_contents").width();
+                gameCtx.css({'padding-bottom': '50px', 'background': '#000'});
+                var h      = gameCtx.height() - 50;
+                var w      = gameCtx.width();
                 var line_h = (navigator.userAgent.indexOf('Chrome') >= 0 ? 18 : 19);
                 var rows   = Math.round(h / line_h);
                 var cols   = parseInt(w / 9.9);
@@ -233,14 +235,13 @@ class CodeRepositoryView extends Component {
                 response.data.line_h = line_h;
                 response.data.rows = rows;
                 response.data.cols = cols;
-
                  // https://stackoverflow.com/questions/5645485/detect-mousemove-when-over-an-iframe
                 // this.loadSshInIframe( response.data, tabIndex )
 
                 this.loadSshNormal(response.data, tabIndex, isReInit)
                 
             }
-            console.log(response)
+            // console.log(response)
         }).catch((error) => {
             console.log(error)
         })
@@ -542,13 +543,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'} }>
+                    style={ { color: '#fff', display: tabIndex === 82 ? 'block' : 'none', 'marginLeft': '2px', 'paddingBottom': '50px' } }>
                 </div>
                 <div id="codetab_con_83" className="undis -relative" 
-                    style={ { color: '#fff', display: tabIndex === 83 ? 'block' : 'none', 'marginLeft': '2px'} }>
+                    style={ { color: '#fff', display: tabIndex === 83 ? 'block' : 'none', 'marginLeft': '2px', 'paddingBottom': '50px'} }>
                 </div>
                 <div id="codetab_con_84" className="undis -relative" 
-                    style={ { color: '#fff', display: tabIndex === 84 ? 'block' : 'none', 'marginLeft': '2px'} }>
+                    style={ { color: '#fff', display: tabIndex === 84 ? 'block' : 'none', 'marginLeft': '2px', 'paddingBottom': '50px'} }>
                 </div>
                 <div id="codetab_con_3" className="undis -relative" style={{display: 'none'}}></div>
 		    </React.Fragment>