梁美英 / programming · Commits

Commit 9b3071d4a0310c0d5a20c2642d418f784fb7fbed

Authored by ykxie
1 parent 85d829b1

初步实现录制编译

Inline Side-by-side
Showing 13 changed files with 408 additions and 48 deletions
src/css/ide.css
  View file @9b3071d
@@ -61,6 +61,21 @@ ul.ztree li span.button.add { @@ -61,6 +61,21 @@ ul.ztree li span.button.add {
61 float: left; 61 float: left;
62 border-bottom: 0; } 62 border-bottom: 0; }
63 63
  64 +.programing #resultoutput .tab-pane {
  65 + padding: 14px; }
  66 +
  67 +.programing .record-title .nav-tabs > li.active > a, .programing .record-title .nav-tabs > li.active > a:hover, .programing .record-title .nav-tabs > li.active > a:focus {
  68 + color: #fff; }
  69 +
  70 +.programing .record-title .nav-tabs > li > a, .programing .record-title .nav-tabs > li.active > a:hover, .programing .record-title .nav-tabs > li.active > a:focus {
  71 + margin-right: 0;
  72 + line-height: 1.428571429;
  73 + border: none !important;
  74 + background: transparent !important;
  75 + height: 36px;
  76 + line-height: 36px;
  77 + padding: 0 12px; }
  78 +
64 html, body { 79 html, body {
65 width: 100%; 80 width: 100%;
66 height: 100%; } 81 height: 100%; }
@@ -74,20 +89,21 @@ html, body { @@ -74,20 +89,21 @@ html, body {
74 89
75 .record-title { 90 .record-title {
76 width: 100%; 91 width: 100%;
77 - height: 60px; 92 + height: 36px;
78 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%); 93 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
79 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%); 94 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
80 position: absolute; 95 position: absolute;
81 top: 0; 96 top: 0;
82 - z-index: 9999; } 97 + z-index: 9999;
  98 + padding-left: 28px; }
83 99
84 .record-wrap { 100 .record-wrap {
85 width: 100%; 101 width: 100%;
86 height: 100%; 102 height: 100%;
87 position: absolute; 103 position: absolute;
88 box-sizing: border-box; 104 box-sizing: border-box;
89 - padding-top: 60px;  
90 - padding-bottom: 280px; } 105 + padding-top: 36px;
  106 + padding-bottom: 300px; }
91 .record-wrap #ideDir { 107 .record-wrap #ideDir {
92 width: 170px; 108 width: 170px;
93 height: 100%; 109 height: 100%;
@@ -105,7 +121,8 @@ html, body { @@ -105,7 +121,8 @@ html, body {
105 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding { 121 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
106 height: 100%; } 122 height: 100%; }
107 .record-wrap #folder { 123 .record-wrap #folder {
108 - height: 100%; } 124 + height: 100%;
  125 + min-height: 300px; }
109 .record-wrap .gxb-record { 126 .record-wrap .gxb-record {
110 position: relative; 127 position: relative;
111 height: 100%; } 128 height: 100%; }
@@ -114,7 +131,6 @@ html, body { @@ -114,7 +131,6 @@ html, body {
114 width: 100%; 131 width: 100%;
115 position: absolute; 132 position: absolute;
116 bottom: 0; 133 bottom: 0;
117 - background-color: #23383f;  
118 z-index: 999; } 134 z-index: 999; }
119 .record-toolbox .console-wrap { 135 .record-toolbox .console-wrap {
120 width: 100%; 136 width: 100%;
@@ -124,6 +140,54 @@ html, body { @@ -124,6 +140,54 @@ html, body {
124 .record-toolbox .console-wrap #toolbar { 140 .record-toolbox .console-wrap #toolbar {
125 width: 100%; 141 width: 100%;
126 height: 36px; 142 height: 36px;
127 - background-color: #F0F3F5; } 143 + overflow: hidden;
  144 + background-color: #e3e3e3; }
  145 + .record-toolbox .console-wrap #toolbar .result-tabs {
  146 + height: 30px;
  147 + border-radius: 30px;
  148 + background-color: #62DCF5;
  149 + overflow: hidden;
  150 + margin: 3px 16px;
  151 + color: #fff; }
  152 + .record-toolbox .console-wrap #toolbar .text {
  153 + color: #fff; }
  154 + .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:hover, .record-toolbox .console-wrap #toolbar .result-tabs > li > a:hover, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:focus {
  155 + color: #1FB6FF;
  156 + background-color: #fff;
  157 + box-shadow: 0px 0px 2px 0px #B3E5FF;
  158 + border: none; }
  159 + .record-toolbox .console-wrap #toolbar .result-tabs > li > a, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:hover {
  160 + padding: 4px 36px;
  161 + border: none;
  162 + margin: 1px;
  163 + border-radius: 15px;
  164 + font-size: 14px;
  165 + transition: all 0.1s ease; }
  166 + .record-toolbox .console-wrap #toolbar .func {
  167 + height: 36px;
  168 + padding-top: 3px; }
  169 + .record-toolbox #full-screen, .record-toolbox #back-screen {
  170 + margin: 0;
  171 + background-image: linear-gradient(90deg, #1FB6FF 0%, #62DCF5 100%);
  172 + border-radius: 100px;
  173 + padding: 6px 7px;
  174 + margin: 0 16px;
  175 + color: #fff; }
  176 + .record-toolbox #resultoutput {
  177 + height: 204px;
  178 + overflow: auto; }
  179 + .record-toolbox #compileBtn {
  180 + background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
  181 + background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
  182 + -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  183 + transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  184 + border: none;
  185 + color: #fff;
  186 + padding-top: 5px;
  187 + padding-bottom: 5px; }
128 .record-toolbox .record-ctrl { 188 .record-toolbox .record-ctrl {
129 - height: 60px; } 189 + height: 60px;
  190 + width: 100%;
  191 + z-index: 999;
  192 + padding: 0 136px;
  193 + background-color: #23383f; }
src/css/main.css
  View file @9b3071d
@@ -11,20 +11,21 @@ html, body { @@ -11,20 +11,21 @@ html, body {
11 11
12 .record-title { 12 .record-title {
13 width: 100%; 13 width: 100%;
14 - height: 60px; 14 + height: 36px;
15 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%); 15 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
16 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%); 16 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
17 position: absolute; 17 position: absolute;
18 top: 0; 18 top: 0;
19 - z-index: 9999; } 19 + z-index: 9999;
  20 + padding-left: 28px; }
20 21
21 .record-wrap { 22 .record-wrap {
22 width: 100%; 23 width: 100%;
23 height: 100%; 24 height: 100%;
24 position: absolute; 25 position: absolute;
25 box-sizing: border-box; 26 box-sizing: border-box;
26 - padding-top: 60px;  
27 - padding-bottom: 280px; } 27 + padding-top: 36px;
  28 + padding-bottom: 300px; }
28 .record-wrap #ideDir { 29 .record-wrap #ideDir {
29 width: 170px; 30 width: 170px;
30 height: 100%; 31 height: 100%;
@@ -42,7 +43,8 @@ html, body { @@ -42,7 +43,8 @@ html, body {
42 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding { 43 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
43 height: 100%; } 44 height: 100%; }
44 .record-wrap #folder { 45 .record-wrap #folder {
45 - height: 100%; } 46 + height: 100%;
  47 + min-height: 300px; }
46 .record-wrap .gxb-record { 48 .record-wrap .gxb-record {
47 position: relative; 49 position: relative;
48 height: 100%; } 50 height: 100%; }
@@ -51,7 +53,6 @@ html, body { @@ -51,7 +53,6 @@ html, body {
51 width: 100%; 53 width: 100%;
52 position: absolute; 54 position: absolute;
53 bottom: 0; 55 bottom: 0;
54 - background-color: #23383f;  
55 z-index: 999; } 56 z-index: 999; }
56 .record-toolbox .console-wrap { 57 .record-toolbox .console-wrap {
57 width: 100%; 58 width: 100%;
@@ -61,6 +62,54 @@ html, body { @@ -61,6 +62,54 @@ html, body {
61 .record-toolbox .console-wrap #toolbar { 62 .record-toolbox .console-wrap #toolbar {
62 width: 100%; 63 width: 100%;
63 height: 36px; 64 height: 36px;
64 - background-color: #F0F3F5; } 65 + overflow: hidden;
  66 + background-color: #e3e3e3; }
  67 + .record-toolbox .console-wrap #toolbar .result-tabs {
  68 + height: 30px;
  69 + border-radius: 30px;
  70 + background-color: #62DCF5;
  71 + overflow: hidden;
  72 + margin: 3px 16px;
  73 + color: #fff; }
  74 + .record-toolbox .console-wrap #toolbar .text {
  75 + color: #fff; }
  76 + .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:hover, .record-toolbox .console-wrap #toolbar .result-tabs > li > a:hover, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:focus {
  77 + color: #1FB6FF;
  78 + background-color: #fff;
  79 + box-shadow: 0px 0px 2px 0px #B3E5FF;
  80 + border: none; }
  81 + .record-toolbox .console-wrap #toolbar .result-tabs > li > a, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:hover {
  82 + padding: 4px 36px;
  83 + border: none;
  84 + margin: 1px;
  85 + border-radius: 15px;
  86 + font-size: 14px;
  87 + transition: all 0.1s ease; }
  88 + .record-toolbox .console-wrap #toolbar .func {
  89 + height: 36px;
  90 + padding-top: 3px; }
  91 + .record-toolbox #full-screen, .record-toolbox #back-screen {
  92 + margin: 0;
  93 + background-image: linear-gradient(90deg, #1FB6FF 0%, #62DCF5 100%);
  94 + border-radius: 100px;
  95 + padding: 6px 7px;
  96 + margin: 0 16px;
  97 + color: #fff; }
  98 + .record-toolbox #resultoutput {
  99 + height: 204px;
  100 + overflow: auto; }
  101 + .record-toolbox #compileBtn {
  102 + background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
  103 + background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
  104 + -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  105 + transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  106 + border: none;
  107 + color: #fff;
  108 + padding-top: 5px;
  109 + padding-bottom: 5px; }
65 .record-toolbox .record-ctrl { 110 .record-toolbox .record-ctrl {
66 - height: 60px; } 111 + height: 60px;
  112 + width: 100%;
  113 + z-index: 999;
  114 + padding: 0 136px;
  115 + background-color: #23383f; }
src/gxb-ide/CodingEditer.js
  View file @9b3071d
@@ -49,7 +49,7 @@ @@ -49,7 +49,7 @@
49 console.log('---------------------------') 49 console.log('---------------------------')
50 50
51 var treeLinkEditor = Dir.treeLinkEditor; 51 var treeLinkEditor = Dir.treeLinkEditor;
52 - 52 + console.log(treeLinkEditor)
53 CodingEditer.record_startime = new Date().getTime(); // 设置开始录制的时间 53 CodingEditer.record_startime = new Date().getTime(); // 设置开始录制的时间
54 54
55 initProgramPage(treeLinkEditor); 55 initProgramPage(treeLinkEditor);
src/gxb-ide/Dir.js
  View file @9b3071d
@@ -48,7 +48,6 @@ @@ -48,7 +48,6 @@
48 treeLinkEditor: [], // 缓存整个目录树结构和代码编辑器的关系 48 treeLinkEditor: [], // 缓存整个目录树结构和代码编辑器的关系
49 mainPath: null, // 运行编译时候需要知道当前是哪个文件 49 mainPath: null, // 运行编译时候需要知道当前是哪个文件
50 init: function(){ 50 init: function(){
51 - this.resizeWindow();  
52 }, 51 },
53 initIdePage: function(el, id){ 52 initIdePage: function(el, id){
54 var _url = "../js/" + id + ".json"; 53 var _url = "../js/" + id + ".json";
@@ -61,13 +60,14 @@ @@ -61,13 +60,14 @@
61 dataType: "json", 60 dataType: "json",
62 contentType: "application/json", 61 contentType: "application/json",
63 success: function(res) { 62 success: function(res) {
64 - 63 + console.log(res);
  64 +
65 treeData = res[_lang]; 65 treeData = res[_lang];
66 console.log(treeData); 66 console.log(treeData);
67 -  
68 treeObj = $.fn.zTree.init($(el), setting, treeData); 67 treeObj = $.fn.zTree.init($(el), setting, treeData);
69 68
70 addTextareaPage(treeData); 69 addTextareaPage(treeData);
  70 +
71 CodingEditer.initCodeMirror(treeLinkEditor); 71 CodingEditer.initCodeMirror(treeLinkEditor);
72 72
73 }, 73 },
@@ -76,7 +76,6 @@ @@ -76,7 +76,6 @@
76 console.log(XMLHttpRequest); 76 console.log(XMLHttpRequest);
77 } 77 }
78 }); 78 });
79 - this.resizeWindow();  
80 }, 79 },
81 showEdite: function(obj){ 80 showEdite: function(obj){
82 81
@@ -86,6 +85,7 @@ @@ -86,6 +85,7 @@
86 _CodeMirrorReplayId, 85 _CodeMirrorReplayId,
87 _num = 0; 86 _num = 0;
88 87
  88 + console.log(treeLinkEditor)
89 // 判断是否是初始化选时候调用 showEdite 89 // 判断是否是初始化选时候调用 showEdite
90 if(obj){ 90 if(obj){
91 for (var i = 0; i < treeLinkEditor.length; i++) { 91 for (var i = 0; i < treeLinkEditor.length; i++) {
@@ -363,7 +363,7 @@ @@ -363,7 +363,7 @@
363 var _file = _datalist[i].name; 363 var _file = _datalist[i].name;
364 var _name = Dir.manageName(_file); 364 var _name = Dir.manageName(_file);
365 var defaultValue; 365 var defaultValue;
366 - defaultValue = 'package '+ Dir.getTreePath(_file).split('/')[0] +';\n'; 366 + defaultValue = '';
367 treeLinkEditor.push({ 367 treeLinkEditor.push({
368 "name": _name, 368 "name": _name,
369 "file": _file, 369 "file": _file,
@@ -409,7 +409,7 @@ @@ -409,7 +409,7 @@
409 _langName = "C++"; 409 _langName = "C++";
410 break; 410 break;
411 case 29: 411 case 29:
412 - _langName = "PHP"; 412 + _langName = "php";
413 break; 413 break;
414 case 4: 414 case 4:
415 _langName = "python"; 415 _langName = "python";
src/gxb-ide/ToolBox.js
  View file @9b3071d
@@ -13,7 +13,7 @@ @@ -13,7 +13,7 @@
13 "mainArgus": "", 13 "mainArgus": "",
14 "runtimeArgus": runtimeArgus, 14 "runtimeArgus": runtimeArgus,
15 "rand": "123456", 15 "rand": "123456",
16 - "fileList": _fileList 16 + "fileList": _fileList || []
17 } 17 }
18 18
19 console.log(compileData); 19 console.log(compileData);
src/gxb-ide/idedemo.html
  View file @9b3071d
@@ -52,7 +52,7 @@ @@ -52,7 +52,7 @@
52 var userId = 826920; 52 var userId = 826920;
53 var ide = new GxbIde({ 53 var ide = new GxbIde({
54 el: '#folder', 54 el: '#folder',
55 - languageid: 10 55 + languageid: languageid
56 }); 56 });
57 57
58 $('.getValue').click(function(){ 58 $('.getValue').click(function(){
@@ -124,14 +124,15 @@ @@ -124,14 +124,15 @@
124 <div id="toolbar"> 124 <div id="toolbar">
125 <!-- Nav tabs --> 125 <!-- Nav tabs -->
126 <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs"> 126 <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
127 - <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li>  
128 - <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li>  
129 - <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li>  
130 - <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li> 127 + <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text">标准</a></li>
  128 + <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text">编译</a></li>
  129 + <li><a href="#stderr" role="tab" data-toggle="tab" class="text">错误</a></li>
  130 + <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li>
131 </ul> 131 </ul>
132 - <div class="pull-right"> 132 + <div class="pull-right func">
133 <a class="btn btn-success" id="compileBtn">编译运行</a> 133 <a class="btn btn-success" id="compileBtn">编译运行</a>
134 - <a class="btn btn-success"><i class="icon iconfont icon-quanping1"></i></a> 134 + <a id="full-screen" class=""><i class="icon iconfont icon-quanping1"></i></a>
  135 + <!-- <a id="back-screen" class=""><i class="icon iconfont icon-quanping1"></i></a> -->
135 </div> 136 </div>
136 </div> 137 </div>
137 138
@@ -149,7 +150,7 @@ @@ -149,7 +150,7 @@
149 </div> 150 </div>
150 </div> 151 </div>
151 152
152 - <div class="record-contrl"> 153 + <div class="record-ctrl">
153 <button class="btn btn-success getValue"> 154 <button class="btn btn-success getValue">
154 播放代码 155 播放代码
155 </button> 156 </button>
src/gxb-ide/java.html 0 → 100644
  View file @9b3071d
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>IDE</title>
  6 + <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
  7 + <link href="../css/codemirror.css" rel="stylesheet">
  8 + <link href="../css/reset.css" rel="stylesheet">
  9 + <link rel="stylesheet" href="../js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css">
  10 +
  11 + <link href="../common/fonts/iconfont.css" rel="stylesheet">
  12 +
  13 + <link href="../css/cm-theme/gbtags.css" rel="stylesheet">
  14 + <link href="../css/cm-theme/eclipse.css" rel="stylesheet">
  15 + <link href="../css/cm-theme/gbtags-dark.css" rel="stylesheet">
  16 +
  17 + <!-- <link href="../css/layout.css" rel="stylesheet"> -->
  18 + <!-- <link href="../css/main.css" rel="stylesheet"> -->
  19 +
  20 + <!-- <link href="../css/recording.css" rel="stylesheet"> -->
  21 + <!-- <link rel="stylesheet" href="../css/demo.css"> -->
  22 +
  23 + <link rel="stylesheet" href="../css/ide.css">
  24 +
  25 + <script src="../js/jquery-1.7.1.js"></script>
  26 + <script src="../js/bootstrap.js"></script>
  27 + <script src="../js/codemirror.js"></script>
  28 + <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>
  29 + <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.exedit.js"></script>
  30 + <script src="../js/emmet.js"></script>
  31 + <script src="../js/util/util.js"></script>
  32 +
  33 + <script src="Dir.js"></script>
  34 + <script src="CodingEditer.js"></script>
  35 + <script src="ToolBox.js"></script>
  36 + <script src="Ide.js"></script>
  37 +
  38 + <script src="java.js"></script>
  39 +
  40 + <script src="../js/gbdebug/mode/xml/xml.js"></script>
  41 + <script src="../js/gbdebug/mode/javascript/javascript.js"></script>
  42 + <script src="../js/gbdebug/mode/css/css.js"></script>
  43 + <script src="../js/gbdebug/mode/htmlmixed/htmlmixed.js"></script>
  44 + <script src="../js/gbdebug/mode/clike/clike.js"></script>
  45 +
  46 + <script>
  47 + var gxb_api = "https://restful1.gaoxiaobang.com";
  48 + // var gxb_api = "http://192.168.80.223:8080"
  49 +
  50 + </script>
  51 +
  52 +</head>
  53 +<body>
  54 + <div>
  55 +
  56 +
  57 + </div>
  58 + <div class="programing">
  59 +
  60 + <!-- 控制条 -->
  61 + <div class="record-title">
  62 + <ul id="recordertab" class="nav nav-tabs pull-left">
  63 + <li class="active">
  64 + <a href="#recordzone" data-toggle="tab">
  65 + <i class="icon iconfont icon-suspend"></i>课程录制区
  66 + </a>
  67 + </li>
  68 + <li>
  69 + <a href="#replayzone" data-toggle="tab">
  70 + <i class="icon iconfont icon-yulan"></i>课程预览区
  71 + </a>
  72 + </li>
  73 + </ul>
  74 + </div>
  75 +
  76 + <!-- 录制区 -->
  77 + <div class="record-wrap">
  78 + <!-- 录制区 -->
  79 + <div class="gxb-record">
  80 + <div id="ideDir">
  81 + <div class="tree-header">目录</div>
  82 + <ul id="folder" class="ztree"></ul>
  83 + <div id="handleLM"></div>
  84 + </div>
  85 +
  86 + <div id="ideEditer" class="tab-content">
  87 + <div id="recordzone" class="tab-pane active"></div>
  88 + <div id="replayzone" class="tab-pane"></div>
  89 + </div>
  90 + </div>
  91 + </div>
  92 +
  93 +
  94 +
  95 + <!-- 控录制录制 -->
  96 + <div class="record-toolbox">
  97 + <!-- 运行结果区 -->
  98 + <div class="console-wrap">
  99 + <div id="toolbar">
  100 + <!-- Nav tabs -->
  101 + <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
  102 + <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li>
  103 + <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li>
  104 + <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li>
  105 + <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li>
  106 + </ul>
  107 + <div class="pull-right">
  108 + <a class="btn btn-success" id="compileBtn">编译运行</a>
  109 + <a class="btn btn-success"><i class="icon iconfont icon-quanping1"></i></a>
  110 + </div>
  111 + </div>
  112 +
  113 + <!-- Tab panes -->
  114 + <div id="resultoutput" class="tab-content need-compile">
  115 + <div class="tab-pane active padall15" id="stdin">
  116 + <input type="text" class="form-control" id="runtimeArgus" placeholder="标准输入">
  117 + </div>
  118 + <div class="tab-pane padall15" id="cmpinfo"></div>
  119 + <div class="tab-pane padall15" id="stderr"></div>
  120 + <div class="tab-pane padall15" id="output"></div>
  121 + </div>
  122 + <div class="panel-body no-compile" id="ifrcontainer">
  123 + <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
  124 + </div>
  125 + </div>
  126 +
  127 + <div class="record-contrl">
  128 + <button class="btn btn-success getValue">
  129 + 播放代码
  130 + </button>
  131 + </div>
  132 +
  133 + </div>
  134 +
  135 + </div>
  136 +
  137 +</body>
  138 +</html>
0 \ No newline at end of file 139 \ No newline at end of file
src/gxb-ide/java.js 0 → 100644
  View file @9b3071d
  1 +$(function(){
  2 + var languageid = 10;
  3 + var userId = 826920;
  4 + var ide = new GxbIde({
  5 + el: '#folder',
  6 + languageid: languageid
  7 + });
  8 +
  9 + $('.getValue').click(function(){
  10 + // var treeLinkEditor = Dir.treeLinkEditor;
  11 + console.log(CodingEditer.records);
  12 + CodingEditer.getCodeMirrorValue();
  13 + CodingEditer.playCoding();
  14 + })
  15 +
  16 + $('#compileBtn').click(function(){
  17 + ToolBox.compileMode(userId, languageid);
  18 + })
  19 +
  20 +
  21 +
  22 +
  23 +})
0 \ No newline at end of file 24 \ No newline at end of file
src/gxb-ide/web.html 0 → 100644
  View file @9b3071d
src/gxb-ide/web.js 0 → 100644
  View file @9b3071d
src/js/29.json
  View file @9b3071d
1 { 1 {
2 "php": [ 2 "php": [
3 { "id": 1, "pId": 0, "name": "package1", "open": true, "isParent": true, "collapse": false }, 3 { "id": 1, "pId": 0, "name": "package1", "open": true, "isParent": true, "collapse": false },
4 - { "id": 11, "pId": 1, "name": "default1.java", "type": "java" },  
5 - { "id": 12, "pId": 1, "name": "default2.java", "type": "java" },  
6 - { "id": 13, "pId": 1, "name": "default3.java", "type": "java" },  
7 - { "id": 14, "pId": 1, "name": "default4.java", "type": "java" },  
8 - { "id": 15, "pId": 1, "name": "default5.java", "type": "java" }, 4 + { "id": 11, "pId": 1, "name": "default1.php", "type": "php" },
  5 + { "id": 12, "pId": 1, "name": "default2.php", "type": "php" },
  6 + { "id": 13, "pId": 1, "name": "default3.php", "type": "php" },
  7 + { "id": 14, "pId": 1, "name": "default4.php", "type": "php" },
  8 + { "id": 15, "pId": 1, "name": "default5.php", "type": "php" },
9 { "id": 2, "pId": 0, "name": "package2", "open": true, "isParent": true, "expand": true }, 9 { "id": 2, "pId": 0, "name": "package2", "open": true, "isParent": true, "expand": true },
10 - { "id": 21, "pId": 2, "name": "defaultA.java", "type": "java" },  
11 - { "id": 22, "pId": 2, "name": "defaultB.java", "type": "java" },  
12 - { "id": 23, "pId": 2, "name": "defaultC.java", "type": "java" },  
13 - { "id": 24, "pId": 2, "name": "defaultD.java", "type": "java" },  
14 - { "id": 25, "pId": 2, "name": "defaultE.java", "type": "java" } 10 + { "id": 21, "pId": 2, "name": "defaultA.php", "type": "php" },
  11 + { "id": 22, "pId": 2, "name": "defaultB.php", "type": "php" },
  12 + { "id": 23, "pId": 2, "name": "defaultC.php", "type": "php" },
  13 + { "id": 24, "pId": 2, "name": "defaultD.php", "type": "php" },
  14 + { "id": 25, "pId": 2, "name": "defaultE.php", "type": "php" }
15 ] 15 ]
16 } 16 }
17 \ No newline at end of file 17 \ No newline at end of file
src/scss/_bootstrapReset.scss
  View file @9b3071d
@@ -2,7 +2,29 @@ @@ -2,7 +2,29 @@
2 .nav-tabs{ 2 .nav-tabs{
3 float: left; 3 float: left;
4 border-bottom: 0; 4 border-bottom: 0;
5 - } 5 + }
  6 + #resultoutput{
  7 + .tab-pane{
  8 + padding: 14px;
  9 + }
  10 + }
  11 +
  12 + .record-title{
  13 + .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
  14 + color: #fff;
  15 + }
  16 +
  17 + .nav-tabs > li > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
  18 + margin-right: 0;
  19 + line-height: 1.428571429;
  20 + border: none !important;
  21 + background: transparent !important;
  22 + height: 36px;
  23 + line-height: 36px;
  24 + padding: 0 12px;
  25 + }
  26 + }
  27 +
6 } 28 }
7 29
8 30
9 \ No newline at end of file 31 \ No newline at end of file
src/scss/main.scss
  View file @9b3071d
@@ -13,12 +13,14 @@ html, body{ @@ -13,12 +13,14 @@ html, body{
13 // 头部菜单 13 // 头部菜单
14 .record-title{ 14 .record-title{
15 width: 100%; 15 width: 100%;
16 - height: 60px; 16 + height: 36px;
17 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%); 17 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
18 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%); 18 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
19 position: absolute; 19 position: absolute;
20 top: 0; 20 top: 0;
21 z-index: 9999; 21 z-index: 9999;
  22 + padding-left: 28px;
  23 +
22 } 24 }
23 25
24 // 录制区 26 // 录制区
@@ -27,8 +29,8 @@ html, body{ @@ -27,8 +29,8 @@ html, body{
27 height: 100%; 29 height: 100%;
28 position: absolute; 30 position: absolute;
29 box-sizing: border-box; 31 box-sizing: border-box;
30 - padding-top: 60px;  
31 - padding-bottom: 280px; 32 + padding-top: 36px;
  33 + padding-bottom: 300px;
32 34
33 #ideDir{ 35 #ideDir{
34 width: 170px; 36 width: 170px;
@@ -57,6 +59,7 @@ html, body{ @@ -57,6 +59,7 @@ html, body{
57 59
58 #folder{ 60 #folder{
59 height: 100%; 61 height: 100%;
  62 + min-height: 300px;
60 } 63 }
61 64
62 .gxb-record{ 65 .gxb-record{
@@ -70,7 +73,6 @@ html, body{ @@ -70,7 +73,6 @@ html, body{
70 width: 100%; 73 width: 100%;
71 position: absolute; 74 position: absolute;
72 bottom: 0; 75 bottom: 0;
73 - background-color: #23383f;  
74 z-index: 999; 76 z-index: 999;
75 77
76 .console-wrap{ 78 .console-wrap{
@@ -82,12 +84,73 @@ html, body{ @@ -82,12 +84,73 @@ html, body{
82 #toolbar{ 84 #toolbar{
83 width: 100%; 85 width: 100%;
84 height: 36px; 86 height: 36px;
85 - background-color: #F0F3F5; 87 + overflow: hidden;
  88 + background-color: #e3e3e3;
  89 + .result-tabs{
  90 + height: 30px;
  91 + border-radius: 30px;
  92 + background-color: #62DCF5;
  93 + overflow: hidden;
  94 + margin: 3px 16px;
  95 + color: #fff;
  96 + }
  97 + .text{
  98 + color: #fff;
  99 + }
  100 + .result-tabs>li.active>a, .result-tabs>li.active>a:hover, .result-tabs>li>a:hover, .result-tabs>li.active>a:focus{
  101 + color: #1FB6FF;
  102 + background-color: #fff;
  103 + box-shadow: 0px 0px 2px 0px #B3E5FF;
  104 + border: none;
  105 + }
  106 + .result-tabs>li>a, .result-tabs>li.active>a:hover{
  107 + padding: 4px 36px;
  108 + border: none;
  109 + margin: 1px;
  110 + border-radius: 15px;
  111 + font-size: 14px;
  112 + // color: #fff;
  113 + transition: all 0.1s ease;
  114 + }
  115 +
  116 + .func{
  117 + height: 36px;
  118 + padding-top: 3px;
  119 + }
86 } 120 }
87 } 121 }
  122 +
  123 + #full-screen, #back-screen{
  124 + margin: 0;
  125 + background-image: linear-gradient(90deg, #1FB6FF 0%, #62DCF5 100%);
  126 + border-radius: 100px;
  127 + padding: 6px 7px;
  128 + margin: 0 16px;
  129 + color: #fff;
  130 + }
  131 +
  132 + #resultoutput{
  133 + height: 204px;
  134 + overflow: auto;
  135 + }
  136 +
  137 + #compileBtn{
  138 + background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
  139 + background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
  140 + -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  141 + transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  142 + border: none;
  143 + color: #fff;
  144 + padding-top: 5px;
  145 + padding-bottom: 5px;
  146 + }
88 147
89 .record-ctrl{ 148 .record-ctrl{
90 height: 60px; 149 height: 60px;
  150 + width: 100%;
  151 + z-index: 999;
  152 + padding: 0 136px;
  153 + background-color: #23383f;
91 } 154 }
92 } 155 }
93 156