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>
|