304 lines
10 KiB
HTML
304 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<link rel="stylesheet" href="./css/index.css">
|
||
</head>
|
||
<style>
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
body {
|
||
border-top: 1px solid #FFF2F2F2;
|
||
}
|
||
|
||
/*---滚动条默认显示样式--*/
|
||
.custom-scroll-bar::-webkit-scrollbar-thumb {
|
||
background-color: #018EE8;
|
||
height: 50px;
|
||
outline-offset: -2px;
|
||
outline: 2px solid #fff;
|
||
-webkit-border-radius: 4px;
|
||
border: 2px solid #fff;
|
||
}
|
||
|
||
/*---鼠标点击滚动条显示样式--*/
|
||
.custom-scroll-bar::-webkit-scrollbar-thumb:hover {
|
||
background-color: #FB4446;
|
||
height: 50px;
|
||
-webkit-border-radius: 4px;
|
||
}
|
||
|
||
/*---滚动条大小--*/
|
||
.custom-scroll-bar::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
/*---滚动框背景样式--*/
|
||
.custom-scroll-bar::-webkit-scrollbar-track-piece {
|
||
background-color: #fff;
|
||
-webkit-border-radius: 0;
|
||
}
|
||
|
||
.custom-scroll-bar::-webkit-scrollbar-thumb:active {
|
||
height: 50px;
|
||
background-color: #000;
|
||
-webkit-border-radius: 4px;
|
||
}
|
||
|
||
.wrap {
|
||
/* border: 1px solid #006DB7; */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.wrap:hover {
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.yu-alert {
|
||
margin: 0;
|
||
width: auto;
|
||
}
|
||
|
||
.yu-header {
|
||
background-color: antiquewhite;
|
||
}
|
||
|
||
.yu-sidebar {
|
||
background-color: #FFFFFFFF;
|
||
}
|
||
|
||
.yu-content {
|
||
background-color: #FFFFFFFF;
|
||
border-left: 1px solid #FFF2F2F2;
|
||
}
|
||
|
||
.web-container {}
|
||
|
||
#log_output_ctrl {
|
||
width: -webkit-calc(100% - 5px);
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
<body>
|
||
<div class="yu-layout">
|
||
<div class="yu-layout-inline">
|
||
<div class="yu-sidebar custom-scroll-bar wrap">
|
||
<div class="yu-alert primary" style="width:200px"><i class="iconfont icon-tag"></i>项目名</div>
|
||
<div class="web-container">
|
||
<div id="menu" class="yu-menu light vertical">
|
||
<!--菜单、子菜单-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="yu-layout-block">
|
||
<div id="header-title" class="yu-alert primary">···</div>
|
||
|
||
<div class="yu-button-group">
|
||
<button id="new" class="yu-button primary plain" onclick="generateCompileCommand(this.id)">new</button>
|
||
<button id="app" class="yu-button primary plain" onclick="generateCompileCommand(this.id)">app</button>
|
||
<button id="simulator" class="yu-button primary plain" onclick="generateCompileCommand(this.id)">simulator</button>
|
||
<button id="resource" class="yu-button primary plain" onclick="generateCompileCommand(this.id)">resource</button>
|
||
<button id="sim-res" class="yu-button primary plain" onclick="generateCompileCommand(this.id)">simulator + resource</button>
|
||
</div>
|
||
|
||
<div class="yu-input">
|
||
<input id="build-input" value="ping baidu.com" type="text" class="append"
|
||
style="width:-webkit-calc(100% - 90px);" placeholder="编译命令">
|
||
<button class="yu-button append primary" style="width:90px" onclick="goBuild()">Build</button>
|
||
</div>
|
||
|
||
<div id="log_output_ctrl"></div>
|
||
|
||
<div class="yu-alert primary"><i class="iconfont icon-check-circle"></i>
|
||
Hello<p style="float:right; margin:0;">World</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script src="./js/index.js"></script>
|
||
<script src="./js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
|
||
<!-- log窗口初始化，log回显 -->
|
||
<script type="text/javascript">
|
||
var logOutputCtrl = ace.edit("log_output_ctrl");
|
||
logOutputCtrl.setTheme("ace/theme/terminal"); // 设置主题
|
||
logOutputCtrl.getSession().setMode("ace/mode/log"); // 设置程序语言模式
|
||
logOutputCtrl.setReadOnly(false); // 设置只读
|
||
logOutputCtrl.renderer.setShowGutter(false); // 设置行号
|
||
logOutputCtrl.setShowPrintMargin(false); // 设置打印边距
|
||
logOutputCtrl.setHighlightActiveLine(false); // 设置选中高亮
|
||
logOutputCtrl.setOption("wrap", "free"); // 自动换行，free:开，off:关
|
||
document.getElementById('log_output_ctrl').style.fontSize='14px';
|
||
|
||
|
||
function insertAtTheEndOfEditor(string) {
|
||
var customPosition = {
|
||
row: logOutputCtrl.session.getLength(),
|
||
column: 0
|
||
};
|
||
logOutputCtrl.session.insert(customPosition, string);
|
||
logOutputCtrl.renderer.scrollToLine(Number.POSITIVE_INFINITY)
|
||
}
|
||
|
||
goBuild = async () => {
|
||
var sBuildCommandValue = document.getElementById("build-input").value;
|
||
if (null == sBuildCommandValue) {
|
||
return false;
|
||
}
|
||
console.log(sBuildCommandValue)
|
||
await cmdSpecial(sBuildCommandValue);
|
||
}
|
||
</script>
|
||
|
||
<!-- 菜单初始化 -->
|
||
<script type="text/javascript">
|
||
function generateCompileCommand(compileType) {
|
||
var str = document.getElementById("header-title").innerText;
|
||
if ("···" == str) {
|
||
return;
|
||
}
|
||
|
||
async function checkPlatform() {
|
||
return await isT117();
|
||
}
|
||
checkPlatform().then(result=>insertCommandStr(result))
|
||
|
||
function insertCommandStr(isT117) {
|
||
var sCommand;
|
||
var project = str.match("project_(.*?).mk")[1];
|
||
|
||
if ("new" == compileType) {
|
||
sCommand = "make p=" + project + " new job=8 -j4";
|
||
}
|
||
if ("app" == compileType) {
|
||
sCommand = "make p=" + project + " m=app image update job=8 -j4";
|
||
}
|
||
if ("simulator" == compileType) {
|
||
sCommand = "make p=" + project + " m=simulator job=8 -j4";
|
||
}
|
||
if ("resource" == compileType) {
|
||
sCommand = "make p=" + project + " m=resource job=8 -j4";
|
||
}
|
||
if ("sim-res" == compileType) {
|
||
sCommand = "make p=" + project + " m=simulator job=8 -j4 && ";
|
||
sCommand += "make p=" + project + " m=resource job=8 -j4";
|
||
}
|
||
if (isT117){
|
||
sCommand = sCommand.replace(/app/g,"app_main");
|
||
sCommand = sCommand.replace(/simulator/g,"simulator_main");
|
||
sCommand = sCommand.replace(/resource/g,"resource_main");
|
||
}
|
||
document.getElementById("build-input").value = sCommand;
|
||
}
|
||
}
|
||
|
||
function addEventListener2Menu(){
|
||
var menuActivedSub = -1;
|
||
var menuItemActivedSub = -1;
|
||
var menus = document.querySelectorAll('.vertical .menu-title');
|
||
var menuItems = document.querySelectorAll('.sub-menu .menu-item');
|
||
|
||
function menuShow(e) {
|
||
var menuHeight = e.currentTarget.nextElementSibling.getElementsByClassName("menu-item").length * 40;
|
||
e.currentTarget.classList.toggle('active', true);
|
||
e.currentTarget.nextElementSibling.style.height = menuHeight + 'px';
|
||
e.currentTarget.getElementsByClassName("iconfont")[0].classList.toggle('icon-f-text', false);
|
||
e.currentTarget.getElementsByClassName("iconfont")[0].classList.toggle('icon-eye', true);
|
||
}
|
||
|
||
function menuHide() {
|
||
menus[menuActivedSub].classList.toggle('active', false);
|
||
menus[menuActivedSub].nextElementSibling.style.height = '0';
|
||
menus[menuActivedSub].getElementsByClassName("iconfont")[0].classList.toggle('icon-f-text', true);
|
||
menus[menuActivedSub].getElementsByClassName("iconfont")[0].classList.toggle('icon-eye', false);
|
||
}
|
||
|
||
Array.from(menus).forEach((item) => {
|
||
item.addEventListener('click', function(e) {
|
||
if (-1 == menuActivedSub) {
|
||
//显示当前点击的菜单
|
||
menuShow(e);
|
||
} else if (-1 != menuActivedSub && e.currentTarget.classList.contains("active")) {
|
||
//隐藏之前显示的菜单
|
||
menuHide();
|
||
} else if (-1 != menuActivedSub) {
|
||
//隐藏之前显示的菜单
|
||
menuHide();
|
||
//显示当前点击的菜单
|
||
menuShow(e);
|
||
} else {
|
||
alert("菜单显示/隐藏逻辑错误！");
|
||
}
|
||
//记录当前为显示状态的菜单下标
|
||
for (var i = 0; i < menus.length; i++) {
|
||
if (item == menus[i]) {
|
||
menuActivedSub = i;
|
||
}
|
||
}
|
||
})
|
||
})
|
||
|
||
Array.from(menuItems).forEach((item) => {
|
||
item.addEventListener('click', function(e) {
|
||
//选中当前点击的菜单子项
|
||
e.currentTarget.classList.add('active');
|
||
|
||
//隐藏非当前点击的、上一次选中的菜单子项
|
||
if (-1 != menuItemActivedSub && e.currentTarget != menuItems[menuItemActivedSub]) {
|
||
menuItems[menuItemActivedSub].classList.remove("active");
|
||
}
|
||
document.getElementById("header-title").innerText = e.currentTarget.id;
|
||
//记录当前为选中状态的菜单子项下标
|
||
for (var i = 0; i < menuItems.length; i++) {
|
||
if (item == menuItems[i]) {
|
||
menuItemActivedSub = i;
|
||
return;
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
async function createMenus() {
|
||
var allPrjName = await getAllPrjName();
|
||
var para = document.getElementById("menu");
|
||
for(i in allPrjName){
|
||
var menu = ``;
|
||
var menu_item = ``;
|
||
var allMakefile = await getAllMakefile(allPrjName[i]);
|
||
|
||
for(j in allMakefile){
|
||
var makefilePath = await getMakefilePath(allMakefile[j]);
|
||
var marketName = await getMarketName(allMakefile[j]);
|
||
menu_item += `<div id="`+ makefilePath +`" class="menu-item" style="padding-left: 30px">`+ marketName +`</div>`;
|
||
}
|
||
|
||
menu += `
|
||
<div class="sub-menu">
|
||
<div class="menu-title"><i class="iconfont icon-f-text"></i>`+ allPrjName[i] +`
|
||
<i class="iconfont icon-angle-down"></i></div>
|
||
<div class="sub-menu" style="height: 0;overflow: hidden">
|
||
`;
|
||
menu += menu_item;
|
||
menu += `
|
||
</div>
|
||
</div>
|
||
`;
|
||
para.innerHTML += menu;
|
||
}
|
||
return "Create menus done."
|
||
}
|
||
|
||
createMenus().then(result=>addEventListener2Menu())
|
||
</script>
|
||
</html>
|