757 lines
38 KiB
HTML
757 lines
38 KiB
HTML
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta http-equiv="Cache-Control" content="no-cache"/>
|
|
<meta name="sharedArrayBuffer" description="using cross-origin-isolation in the web browser">
|
|
<title>智能合约在线编辑器</title>
|
|
<script src="./jqueryui1.12/jquery-2.1.4.js"></script>
|
|
<link href="./jqueryui1.12/jquery-ui.css" rel="stylesheet">
|
|
<script src="./jqueryui1.12/jquery-ui.js"></script>
|
|
<script src="./jqueryui1.12/jquery.ui.position.js"></script>
|
|
<script src="./js/createWS.js"></script>
|
|
<script src="./js/cryptico.js"></script>
|
|
<script src="./js/commonutil.js"></script>
|
|
<script src="./js/popper.min.js"></script>
|
|
|
|
|
|
<script src="js/codemirror/lib/codemirror.js"></script>
|
|
<link rel="stylesheet" href="js/codemirror/lib/codemirror.css">
|
|
<link rel="stylesheet" href="js/codemirror/lib/ayu-mirage.css">
|
|
<script src="js/codemirror/addon/edit/matchbrackets.js"></script>
|
|
<script src="js/codemirror/addon/comment/continuecomment.js"></script>
|
|
<script src="js/codemirror/addon/comment/comment.js"></script>
|
|
<link rel="stylesheet" href="js/codemirror/addon/hint/show-hint.css">
|
|
<script src="js/codemirror/addon/hint/show-hint.js"></script>
|
|
<script src="js/codemirror/mode/clike/clike.js"></script>
|
|
<script src="js/codemirror/mode/javascript/javascript.js"></script>
|
|
<script src="js/codemirror/mode/css/css.js"></script>
|
|
<script src="js/codemirror/mode/xml/xml.js"></script>
|
|
|
|
<script src="js/codemirror/lib/format.js"></script>
|
|
<script src="js/onlineide/staticAnalysis.js"></script>
|
|
<link href="./css/staticAnalysis.css" rel="stylesheet">
|
|
|
|
<script src="./js/bootstrap.min.js"></script>
|
|
<!-- script src="./js/echarts.min.js"></script -->
|
|
<!--script src="./js/echartsTheme.js"></script -->
|
|
<!-- script src="./js/echarts-gl.min.js"></script -->
|
|
<script src="./js/sm2.js"></script>
|
|
<script src="./js/d3.v5.min.js"></script>
|
|
<!-- script src="./js/dagre-d3.min.js"></script -->
|
|
<script src="./js/tipsy/jquery.tipsy.min.js"></script>
|
|
|
|
<link href="./js/tipsy/jquery.tipsy.css" rel="stylesheet">
|
|
<!-- script src="./js/jspdf.min.js"></script -->
|
|
<script src="./js/umd.js"></script>
|
|
|
|
<script src="./jqueryui1.12/jquery.contextMenu.js"></script>
|
|
<link href="./jqueryui1.12/jquery.contextMenu.min.css" rel="stylesheet">
|
|
|
|
<script src="./js/OnlineIDE.js"></script>
|
|
<script src="./js/onlineide/leftmenu.js"></script>
|
|
<script src="./js/onlineide/rightmenu.js"></script>
|
|
|
|
<script src="./js/onlineide/projectman.js"></script>
|
|
|
|
|
|
<script src="./js/vue.js"></script>
|
|
<link rel="stylesheet" href="./css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="./css/loading.css">
|
|
<link rel="stylesheet" href="./css/common.css">
|
|
<style>
|
|
.projectButton {
|
|
width: 100%;
|
|
}
|
|
|
|
.projectButton.ui-state-active {
|
|
background: #2E324C;
|
|
color: white;
|
|
}
|
|
|
|
.projectTreeDiv {
|
|
width: 100%;
|
|
}
|
|
|
|
.outputNav {
|
|
overflow-yyyy: scroll;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
|
|
color: white;
|
|
background-color: #2E324C;
|
|
border-color: #2E324C;
|
|
}
|
|
|
|
.ui-tabs {
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-accordion .ui-accordion-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-tabs .ui-tabs-panel {
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-menu-item.ui-state-active:hover {
|
|
background: #2E324C;
|
|
color: white;
|
|
border: 1px solid #999;
|
|
}
|
|
|
|
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active,
|
|
a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
|
|
background: #2E324C;
|
|
color: white;
|
|
border: 1px solid #999;
|
|
}
|
|
|
|
.context-menu-root {
|
|
z-index: 10;
|
|
}
|
|
|
|
.fileLine {
|
|
user-select: none;
|
|
}
|
|
|
|
.fileLine:hover {
|
|
background: #2E324C;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#expand:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body style="overflow-x: hidden;">
|
|
|
|
<header
|
|
class="headerFooter navbar navbar-default navbar-fixed-top navColor ">
|
|
<div class="col-4">
|
|
<a class="navbar-brand" href="#"> <img alt="Brand"
|
|
src="./images/logo-1.png" style="height: 30px">
|
|
</a> <span>智能合约在线编辑器</span><input id="uploadFileInput" type="file"
|
|
name="file" multiple onchange="uploadFile()" style="display: none;">
|
|
</div>
|
|
<div class="nav navbar-right userName" data-toggle="modal"
|
|
data-target="#pubkeyDialog">欢迎, {{shortName}}
|
|
</div>
|
|
</header>
|
|
<div class="container-fluid" id="main">
|
|
<div class="row h-100" style="overflow:hidden">
|
|
<div class="col-2 h-100" id="horiNav">
|
|
<div class="container-fluid d-flex flex-column h-100">
|
|
<div class="row">
|
|
<div class="col-12" style="padding: 0">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item"><a class="nav-link active"
|
|
id="publicprojecttab" data-toggle="tab" role="tab"
|
|
aria-controls="publicproject" aria-selected="true"
|
|
href="#publicproject" onclick="updateGlobalProject()">公共</a></li>
|
|
<li class="nav-item"><a class="nav-link"
|
|
id="privateprojecttab" data-toggle="tab" role="tab"
|
|
aria-selected="false" aria-controls="privateproject"
|
|
href="#privateproject" onclick="updateGlobalProject()">私有</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="input-group mt-1 mb-3">
|
|
<button class="btn btn-block btn-outline-primary" type="button"
|
|
id="button-addon2" onclick="createProject()">新建项目 +
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row"
|
|
style="flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;">
|
|
<div class="col-sm-12 h-100 "
|
|
style="overflow-y: scroll; overflow-x: hidden">
|
|
<div class="row">
|
|
<div class="col-12" style="padding: 0; overflow-x: visible">
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" role="tabpanel"
|
|
class="row" aria-labelledby="publicprojecttab"
|
|
id="publicproject">
|
|
<div id="publicprojectAccordion" class="accordion"></div>
|
|
</div>
|
|
<div class="tab-pane fade" id="privateproject" role="tabpanel"
|
|
class="row" aria-labelledby="privateprojecttab" style="">
|
|
<div id="privateprojectAccordion" class="accordion"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-8 h-100" style="padding: 0;" id="mainBox">
|
|
<div class="container-fluid d-flex flex-column h-100">
|
|
<div class="row mt-1">
|
|
<div class="col-sm-12">
|
|
<div class="btn-toolbar" role="toolbar"
|
|
aria-label="Toolbar with button groups">
|
|
<div class="btn-group mr-2" role="group"
|
|
aria-label="First group">
|
|
|
|
<button type="button" class=" btn btn-outline-primary"
|
|
data-toggle="tooltip" title="保存" onclick="saveFile()">
|
|
<img alt="Brand" src="./images/onlineide/save.png"
|
|
class="buttonimg">
|
|
</button>
|
|
<button type="button" class=" btn btn-outline-primary"
|
|
data-toggle="tooltip" title="格式化"
|
|
onclick="formatScriptEditor()">
|
|
<img alt="Brand" src="./images/onlineide/formatter.png"
|
|
class="buttonimg">
|
|
</button>
|
|
<button type="button" class=" btn btn-outline-primary"
|
|
data-toggle="tooltip" title="静态分析" onclick22="staticVerify()"
|
|
onclick="showAnalysis()">
|
|
<img alt="Brand" src="./images/onlineide/find.png"
|
|
class="buttonimg">
|
|
</button>
|
|
|
|
<button type="button" class=" btn btn-outline-primary"
|
|
data-toggle="tooltip" title="编译" onclick="compile()">
|
|
<img alt="Brand" src="./images/onlineide/archive.png"
|
|
class="buttonimg">
|
|
</button>
|
|
|
|
<button type="button" class=" btn btn-outline-primary"
|
|
data-toggle="tooltip" title="注册DOI" onclick="registerDOI()">
|
|
<img alt="Brand" src="./images/onlineide/register.png"
|
|
class="buttonimg">
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-outline-primary"
|
|
title="生成文档" data-toggle="tooltip" onclick="genReadme()">
|
|
<img alt="Brand" src="./images/onlineide/readme.png"
|
|
class="buttonimg">
|
|
</button>
|
|
|
|
</div>
|
|
<div class="btn-group mr-2" role="group"
|
|
aria-label="First group">
|
|
<!-- <button type="button" class=" btn btn-outline-primary"
|
|
data-toggle="tooltip" title="gasPrice" onclick="saveFile()">
|
|
<img alt="Brand" src="./images/onlineide/price.png"
|
|
class="buttonimg">
|
|
</button>
|
|
|
|
<button type="button" class=" btn btn-outline-primary"
|
|
data-toggle="tooltip" title="gasLimit">
|
|
<img alt="Brand" src="./images/onlineide/price.png"
|
|
class="buttonimg">
|
|
</button> -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row mt-1">
|
|
<div class="col-sm-12">
|
|
<ul class="nav nav-tabs .bg-primary" id="myFileTab"
|
|
role="tablist">
|
|
<li class="nav-item" v-for="(item,index) in openedFiles"><a
|
|
class="nav-link" data-toggle="tab" t role="tab"
|
|
onclick="clickTab(this)" :path='item.path'><span
|
|
data-toggle="tooltip">{{item.name}}</span><img alt="Brand"
|
|
class="closeimg ml-2"
|
|
src="./images/onlineide/close.png"
|
|
onclick="closeTab(this)"
|
|
:path='item.path'/></a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="box" style="overflow:hidden; height:100%">
|
|
<div id="contractCode" class="flex-grow-1" style="height:100%">
|
|
<div id="textareaDiv" class="col-sm-12" style="width: 100%; height: 100%; padding:0">
|
|
<textarea id="scriptEditor" style="width: 100%; height: 100%"
|
|
class="form-control "></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="resize"
|
|
style="height: 5px; background-color: lightgrey; display:none; cursor: s-resize"></div>
|
|
<div id="analysis" class="col-sm-12" style="display:none; height: 50%">
|
|
<div class="input-group mt-1 mb-3">
|
|
<div class="input-group-prepepnd">
|
|
<button data-toggle="tooltip" class="btn btn-outline-primary" type="image"
|
|
onclick="staticAnalysis()"
|
|
title="查看分析结果">
|
|
<img src="./images/onlineide/execute.png" class="buttonimg"/>
|
|
</button>
|
|
|
|
</div>
|
|
<select id="selectRule" class="custom-select"
|
|
style="appearance: none; -webkit-appearance:none;">
|
|
<option selected>请选择数据开放规则</option>
|
|
<option value="byValue">数据依赖开放</option>
|
|
<option value="control">控制依赖开放</option>
|
|
<option value="byValueAndControl">数据与控制依赖开放</option>
|
|
<option value="close">不开放</option>
|
|
</select>
|
|
<div class="input-group-appepnd">
|
|
<select id="selectSource" class="custom-select"
|
|
style="appearance: none; -webkit-appearance:none;">
|
|
<option selected>请选择数据源</option>
|
|
<option value="originalData">参数</option>
|
|
<option value="contractCall">合约调用</option>
|
|
<option value="originalDataAndContractCall">参数及调用</option>
|
|
|
|
</select>
|
|
</div>
|
|
<div class="input-group-appepnd">
|
|
<select class="custom-select" style="appearance: none"
|
|
id="analysisFunction" onchange="showAnalysisResult()">
|
|
<option selected value="">选择方法</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
控制流图：<span id="svg-control-name"> </span>
|
|
</div>
|
|
</div>
|
|
<div class="row h-100">
|
|
<div class="col-sm-12">
|
|
<svg id="svgCanvas"
|
|
style="width:100%; height:100%;border:1px solid #ced4da;border-radius:.25rem"></svg>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12 mt-3">
|
|
分析结果：
|
|
<textarea id="ret" class="form-control"
|
|
style="width: 100%; height: 200px;"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-2 h-100"
|
|
style="transient: width 2s, height 2s, background-color 2s, transform 2s;"
|
|
id="outputNav">
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
<li class="nav-item"><span id="expand" class="mr-3"
|
|
onclick="expandOrCollapse()">展开</span></li>
|
|
<li class="nav-item"><a class="nav-link active"
|
|
id="deploy-tab" data-toggle="tab" href="#deploy" role="tab"
|
|
aria-controls="deploy" aria-selected="true">部署</a></li>
|
|
<li class="nav-item"><a class="nav-link" id="execute-tab"
|
|
data-toggle="tab" href="#execute" role="tab"
|
|
aria-controls="execute" aria-selected="false"
|
|
onclick="initResponseAndOutputArea()">执行</a></li>
|
|
|
|
</ul>
|
|
<div class="tab-content outputNav" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="deploy" role="tabpanel"
|
|
aria-labelledby="deploy-tab">
|
|
<div class="input-group mt-1 mb-1">
|
|
<select class="custom-select" style="appearance: none"
|
|
v-model="pubDialogVue.selectedSM2Key">
|
|
<option v-for="(item,index) in pubDialogVue.sm2KeyList"
|
|
:key="index" :value='item.id'>{{item.title}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<select class="custom-select " id="selectedProject"
|
|
aria-label="Example select with button addon"
|
|
style="appearance: none">
|
|
<option v-for="(item,index) in projects" :key="index"
|
|
:value='index'>{{item}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<div class="btn-group btn-block" role="group">
|
|
<input class="form-control input-group-small"
|
|
id="createParam"
|
|
placeholder="启动参数" class="modal_input"/>
|
|
<div class="input-group-text">
|
|
<input type="checkbox" id="autoConvertStr"
|
|
aria-label="Checkbox for convertParam"
|
|
data-toggle="tooltip"
|
|
checked
|
|
title="" data-original-title="自动将参数转为JSON对象"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<div class="btn-group btn-block" role="group">
|
|
<input class="form-control input-group-small"
|
|
id="remoteDebugPort"
|
|
placeholder="调试端口" class="modal_input"/>
|
|
<button class="btn btn-outline-primary"
|
|
onclick="startContractAsDebug(true)" type="button" id="button-debug"
|
|
title="调试启动" data-toggle="tooltip">
|
|
<img alt="Brand" src="./images/onlineide/debug.png"
|
|
class="buttonimg">
|
|
</button>
|
|
<button class="btn btn-outline-primary"
|
|
onclick="startContractAsDebug(false)" type="button" id="button-start"
|
|
title="启动" data-toggle="tooltip">
|
|
<img alt="Brand" src="./images/onlineide/start.png"
|
|
class="buttonimg">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group mt-1 mb-3">
|
|
<span id="startResult"> </span>
|
|
</div>
|
|
|
|
<div class="input-group mb-1">
|
|
|
|
<select class="custom-select " id="selectedContract"
|
|
aria-label="Example select with button addon"
|
|
style="appearance: none">
|
|
<option v-for="(item,index) in contracts" :key="index"
|
|
:value='index'>{{item.name}}
|
|
</option>
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button type="button" class="btn btn-outline-primary"
|
|
title="预览" data-toggle="tooltip" onclick="openInClient()">
|
|
<img alt="Brand" src="./images/onlineide/preview.png"
|
|
class="buttonimg">
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary"
|
|
title="停止当前" data-toggle="tooltip" onclick="stopContract()">
|
|
<img alt="Brand" src="./images/onlineide/kill.png"
|
|
class="buttonimg">
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group mb-1">
|
|
<div class="btn-group btn-block" role="group">
|
|
|
|
<!-- <button type="button" class="btn btn-outline-primary"-->
|
|
<!-- title="数据预览" data-toggle="tooltip" onclick="genData()">-->
|
|
<!-- <img alt="Brand" src="./images/onlineide/data.png"-->
|
|
<!-- class="buttonimg">-->
|
|
<!-- </button>-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group mb-1">
|
|
<div class="btn-group btn-block" role="group">
|
|
<button class="btn btn-outline-primary" type="button"
|
|
id="button-addon2" title="刷新列表" onclick="listContracts()"
|
|
data-toggle="tooltip">
|
|
<img src="./images/onlineide/refresh.png" class="buttonimg"/>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary"
|
|
data-toggle="tooltip" onclick="stopAllContract()"
|
|
title="停止所有">
|
|
<img alt="Brand" src="./images/onlineide/stop.png"
|
|
class="buttonimg">
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary"
|
|
title="查询当前合约DOI" data-toggle="tooltip"
|
|
onclick="queryContractInstanceDOI()">DOI
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group mt-1 mb-3">
|
|
<span id="stopResult"> </span>
|
|
</div>
|
|
<div class="input-group mb-1"></div>
|
|
|
|
<div class="input-group mb-3">
|
|
<input type="text" class="form-control"
|
|
id="contractInstanceDOIInput" placeholder="合约实例DOI"></input>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-primary"
|
|
onclick="queryContractInstanceInfoByDOI()" type="button" data-toggle="tooltip"
|
|
title="查询合约实例信息" id="button-addon2">查询
|
|
</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-primary"
|
|
onclick="importContractInstanceCodeByDOI()" type="button" data-toggle="tooltip"
|
|
title="导入合约实例代码" id="button-addon2">导入
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
查询结果：<span id="contractInstanceInfoTitle"> </span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12" id="contractInstanceInfoAreaDiv">
|
|
<textarea id="contractInstanceInfoArea" class="form-control"
|
|
style="width: 100%; height: 150px;"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="execute" role="tabpanel"
|
|
aria-labelledby="execute-tab">
|
|
<div class="input-group mt-1 mb-1">
|
|
<select class="custom-select " id="selectedContractAtExecute"
|
|
aria-label="Example select with button addon"
|
|
style="appearance: none" onchange="selectContractToExecute()">
|
|
<option selected>选择实例</option>
|
|
<option v-for="(item,index) in contracts" :key="index"
|
|
:value='index'>{{item.name}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<select class="custom-select" style="appearance: none"
|
|
id="selectedFunction">
|
|
<option selected>选择方法</option>
|
|
<option v-for="(item,index) in contractFunctions" :key="index"
|
|
:value='index'>{{item.functionName}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<input type="text" class="form-control"
|
|
id="executeContractArgInput" placeholder="填写参数"></input>
|
|
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-primary"
|
|
onclick="executeContract()" type="button" data-toggle="tooltip"
|
|
title="调用" id="button-addon1">
|
|
<img src="./images/onlineide/execute.png" class="buttonimg"/>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="input-group mb-3">
|
|
<input type="text" class="form-control" id="gasLimit" placeholder="请输入合约执行消耗的gas上限"
|
|
aria-label="maximum gas to be used" aria-describedby="button-addon2">
|
|
<!-- <div cldialogBodyDivass="input-group-append">-->
|
|
<!-- <button class="btn btn-outline-primary"-->
|
|
<!-- onclick="getGasValue()" type="button"-->
|
|
<!-- data-toggle="tooltip" title="提交gas值" id="button-addon2">确定-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-primary"
|
|
onclick="executeContractWithDynamicResult()" type="button"
|
|
data-toggle="tooltip" title="动态分析" id="button-addon3">
|
|
<img src="./images/onlineide/analysis.png" class="buttonimg"/>
|
|
</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-primary"
|
|
onclick="testEvaluates()" type="button"
|
|
data-toggle="tooltip" title="gas预估" id="button-addon4">
|
|
<img src="./images/onlineide/budget.png" class="buttonimg"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
执行结果：<span id="executeResultTitle"> </span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12" id="responseAreaDiv">
|
|
<textarea id="responseArea" class="form-control"
|
|
style="width: 100%; height: 200px;"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12 mt-3" id="outputStreamAreaDiv">
|
|
控制台输出：
|
|
<textarea id="outputStreamArea" class="form-control"
|
|
style="width: 100%; height: 200px;"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 用于配置sm2密钥的对话框 -->
|
|
<div class="modal fade" id="pubkeyDialog" tabindex="-1" role="dialog"
|
|
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLongTitle">用户信息</h5>
|
|
<button type="button" class="close" data-dismiss="modal"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row" style="padding-left: 16px; padding-right: 16px">
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<label class="input-group-text" for="localKeyList">本地公钥</label>
|
|
</div>
|
|
<select class="custom-select"
|
|
aria-label="Example select with button addon"
|
|
style="appearance: none" v-model="selectedSM2Key"
|
|
@change="changeSM2Key($event)">
|
|
<option v-for="(item,index) in sm2KeyList" :key="index"
|
|
:value='item.id'>{{item.title}}
|
|
</option>
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-primary" for="localKeyList"
|
|
v-on:click="exportPubkey">导出公钥
|
|
</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-danger" for="localKeyList"
|
|
v-on:click="deletePubkey">删除公钥
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="padding-left: 16px; padding-right: 16px">
|
|
|
|
<div class="input-group mb-1">
|
|
<div class="input-group-prepend">
|
|
<label class="input-group-text" for="localKeyList">当前SM2密钥</label>
|
|
</div>
|
|
<input type="text" class="form-control" placeholder="(请复制并妥善保存)"
|
|
disabled="disabled" aria-label=""
|
|
aria-describedby="basic-addon1">
|
|
|
|
<div class="input-group-append">
|
|
<button type="button" class="btn btn-outline-primary"
|
|
id="generatePubkeyBtn" v-on:click="generatePubkey">生成新公钥
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary"
|
|
data-dismiss="modal" id="importPubkeyBtn"
|
|
v-on:click="importPubkey">导入公钥
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<textarea class="form-control mb-3" title="复制密钥，并妥善保存"
|
|
id="sm2KeyTextarea" v-model="sm2KeyStr"
|
|
style="width: 100%; min-height: 150px" rows="" cols="">
|
|
</textarea>
|
|
<div class="row" style="padding-left: 16px; padding-right: 16px;">
|
|
|
|
</div>
|
|
<div class="row" style="padding-left: 16px; padding-right: 16px">
|
|
<span>我的权限：{{myRole}}</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<select id="inputGroupSelect04" v-model="test"
|
|
class="custom-select" style="appearance: none"
|
|
@change="changeProduct($event)">
|
|
<option v-for="(item,index) in productList" :key="index"
|
|
:value='item.id'>{{item.title}}
|
|
</option>
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-primary" type="button"
|
|
v-on:click="applyRole">角色认证
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Flexbox container for aligning the toasts -->
|
|
<div aria-live="polite" aria-atomic="true"
|
|
class="d-flex justify-content-center align-items-center"
|
|
style="dispaly: none; height:0px; min-height: 200px; position: absolute; top: 30%; left: 40%;"
|
|
aria-hidden="true">
|
|
<!-- Then put toasts within -->
|
|
<div id="alertDiv" class="toast" role="alert" data-delay="3000"
|
|
aria-live="assertive" aria-atomic="true" style="min-width: 200px">
|
|
<div class="toast-header">
|
|
<strong class="mr-auto">{{toastTitle}}</strong>
|
|
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="toast-body">{{toastMessage}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="dialog" tabindex="-1" role="dialog"
|
|
aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="dialogTitleH5">Modal title</h5>
|
|
<button type="button" class="close" data-dismiss="modal"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body" id="dialogBodyDiv">...</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-secondary"
|
|
id="dialogCloseBtn" data-dismiss="modal">关闭
|
|
</button>
|
|
<button type="button" id="dialogConfimBtn"
|
|
class="btn btn-outline-primary" data-dismiss="modal">确定
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="headerFooter" footermt-autopy-3>
|
|
<div class="row">
|
|
<div style="padding-left: -10px;" class="col-2">©2018-2020</div>
|
|
<div style="" class="col-6" id="hashDisplayDiv"></div>
|
|
<div style="" class="col-4">
|
|
Icons made by <a href="https://www.flaticon.com/authors/monkik"
|
|
title="monkik" style="color: white;">monkik</a> and <a
|
|
href="https://www.flaticon.com/authors/those-icons"
|
|
title="Those Icons" style="color: white;">Those Icons</a> from <a
|
|
href="https://www.flaticon.com/" title="Flaticon"
|
|
style="color: white;">www.flaticon.com</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<script>
|
|
const isBaaS = false
|
|
var h = document.body.clientHeight
|
|
- $("header").css("height").replace("px", "")
|
|
- $("footer").css("height").replace("px", "");
|
|
$("#main").css("height", h + "px");
|
|
init();
|
|
//initWSocket();
|
|
</script>
|
|
</body>
|
|
</html> |