mirror of
https://github.com/ehang-io/nps.git
synced 2025-09-02 11:56:53 +00:00
dashboard 备注 客户端管理优化 多客户端支持 流量显示支持 热更新支持 404错误页支持
This commit is contained in:
刘河
67
web/views/client/add.html
Executable file
67
web/views/client/add.html
Executable file
@@ -0,0 +1,67 @@
|
||||
<div class="row tile">
|
||||
<div class="col-md-6 col-md-auto">
|
||||
<div>
|
||||
<h3 class="tile-title">添加</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
<div class="form-group" id="target">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" type="text" name="Remark" placeholder="客户端备注">
|
||||
</div>
|
||||
<div class="form-group" id="u">
|
||||
<label class="control-label">验证用户名(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" type="text" name="u" placeholder="不填则无需验证">
|
||||
</div>
|
||||
<div class="form-group" id="p">
|
||||
<label class="control-label">验证密码(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" type="text" name="p" placeholder="不填则无需验证">
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">数据压缩方式</label>
|
||||
<select class="form-control" name="compress">
|
||||
<option value="">不压缩</option>
|
||||
<option value="snappy">snappy</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">是否加密传输</label>
|
||||
<select class="form-control" name="crypt">
|
||||
<option value="0">不加密</option>
|
||||
<option value="1">加密</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">是否TCP复用</label>
|
||||
<select class="form-control" name="crypt">
|
||||
<option value="0">不启用</option>
|
||||
<option value="1">启用</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tile-footer">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#add").on("click", function () {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/client/add",
|
||||
data: $("form").serializeArray(),
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
history.back(-1)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
71
web/views/client/edit.html
Executable file
71
web/views/client/edit.html
Executable file
@@ -0,0 +1,71 @@
|
||||
<div class="row tile">
|
||||
<div class="col-md-6 col-md-auto">
|
||||
<div>
|
||||
<h3 class="tile-title">添加</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
<input type="hidden" name="Id" value="{{.c.Id}}">
|
||||
<div class="form-group" id="target">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" value="{{.c.Remark}}" type="text" name="Remark" placeholder="客户端备注">
|
||||
</div>
|
||||
<div class="form-group" id="u">
|
||||
<label class="control-label">验证用户名(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" value="{{.c.Cnf.U}}" type="text" name="u"
|
||||
placeholder="不填则无需验证">
|
||||
</div>
|
||||
<div class="form-group" id="p">
|
||||
<label class="control-label">验证密码(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" value="{{.c.Cnf.P}}" type="text" name="p"
|
||||
placeholder="不填则无需验证">
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">数据压缩方式(所有模式均支持)</label>
|
||||
<select class="form-control" name="compress">
|
||||
<option {{if eq "" .c.Cnf.Compress}}selected{{end}} value="">不压缩</option>
|
||||
<option {{if eq "snappy" .c.Cnf.Compress}}selected{{end}} value="snappy">snappy压缩</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">是否加密传输(所有模式均支持)</label>
|
||||
<select class="form-control" name="crypt">
|
||||
<option {{if eq false .c.Cnf.Crypt}}selected{{end}} value="0">不加密</option>
|
||||
<option {{if eq true .c.Cnf.Crypt}}selected{{end}} value="1">加密</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">是否启用TCP复用(所有模式均支持)</label>
|
||||
<select class="form-control" name="mux">
|
||||
<option {{if eq false .c.Cnf.Mux}}selected{{end}} value="0">不启用</option>
|
||||
<option {{if eq true .c.Cnf.Mux}}selected{{end}} value="1">启用</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tile-footer">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
|
||||
$(function () {
|
||||
$("#add").on("click", function () {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/client/edit",
|
||||
data: $("form").serializeArray(),
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
history.back(-1)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
234
web/views/client/list.html
Executable file
234
web/views/client/list.html
Executable file
@@ -0,0 +1,234 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<div class="tile-body">
|
||||
<table class="table table-hover table-bordered" id="sampleTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>验证密钥</th>
|
||||
<th>客户端地址</th>
|
||||
<th>备注</th>
|
||||
<th>压缩方式</th>
|
||||
<th>加密</th>
|
||||
<th>多路复用</th>
|
||||
<th>用户名</th>
|
||||
<th>密码</th>
|
||||
<th>状态</th>
|
||||
<th>客户端连接状态</th>
|
||||
<th>出口流量</th>
|
||||
<th>入口流量</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script type="text/javascript">
|
||||
function del(id) {
|
||||
if (confirm("确定要删除数据吗？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/client/del",
|
||||
data: {"id": id},
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
document.location.reload();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function start(id) {
|
||||
if (confirm("确定要开始任务吗？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/client/changestatus",
|
||||
data: {"id": id, "status": 1},
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
document.location.reload();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function stop(id) {
|
||||
if (confirm("确定要暂停吗？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/client/changestatus",
|
||||
data: {
|
||||
"id": id, "status": 0
|
||||
},
|
||||
success:
|
||||
|
||||
function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
document.location.reload();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function edit(id) {
|
||||
window.location.href = "/client/edit?id=" + id
|
||||
}
|
||||
|
||||
function add() {
|
||||
window.location.href = "/client/add"
|
||||
}
|
||||
|
||||
function show_tunnel_list(id) {
|
||||
window.location.href = "/index/all?client_id=" + id
|
||||
}
|
||||
|
||||
function show_host_list(id) {
|
||||
window.location.href = "/index/hostlist?client_id=" + id
|
||||
}
|
||||
|
||||
$(document)
|
||||
|
||||
.ready(function () {
|
||||
var table = $('#sampleTable').DataTable({
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.childRowImmediate
|
||||
}
|
||||
},
|
||||
dom: 'Bfrtip',
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
autoWidth: false,
|
||||
ordering: false,
|
||||
ajax: {
|
||||
url: '/client/client',
|
||||
type: 'POST'
|
||||
},
|
||||
dom: '<"top"fl><"toolbar">rt<"bottom"ip><"clear">',
|
||||
columns: [ //这个是显示到界面上的个数据 格式为 {data:'显示的字段名'}
|
||||
{data: 'Id'},
|
||||
{data: 'VerifyKey'},
|
||||
{data: "Addr"},
|
||||
{data: "Remark"},
|
||||
{data: "Addr"},
|
||||
{data: "Addr"},
|
||||
{data: "Addr"},
|
||||
{data: "Addr"},
|
||||
{data: "Remark"},
|
||||
{data: "Status"},
|
||||
{data: "IsConnect"},
|
||||
{data: "Addr"},
|
||||
{data: "Addr"},
|
||||
{data: ""},
|
||||
],
|
||||
bFilter: false,
|
||||
columnDefs: [{
|
||||
targets: -1,
|
||||
render: function (data, type, row, meta) {
|
||||
if (row.Status == true) {
|
||||
btn = "<button onclick=\"stop('" + row.Id + "')\" class=\"btn btn-secondary btn-sm\" type=\"button\">关闭</button>"
|
||||
} else {
|
||||
btn = "<button onclick=\"start('" + row.Id + "')\" class=\"btn btn-success btn-sm\" type=\"button\">打开</button>"
|
||||
}
|
||||
btn_del = '<button onclick="del(\'' + row.Id + '\')" class="btn btn-danger btn-sm">删除</button> '
|
||||
btn_edit = '<button onclick="edit(\'' + row.Id + '\')" class="btn btn-primary btn-sm">查看编辑</button> '
|
||||
btn_list = '<button onclick="show_tunnel_list(\'' + row.Id + '\')" class="btn btn-info btn-sm">隧道</button> '
|
||||
btn_host = '<button onclick="show_host_list(\'' + row.Id + '\')" class="btn btn-info btn-sm">域名</button> '
|
||||
return '<div class="btn-group" role="group" aria-label="..."> ' + btn + btn_del + btn_edit + btn_host + btn_list + '</div>'
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -5,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == false) {
|
||||
return "<span class=\"badge badge-pill badge-secondary\">暂停</span>"
|
||||
} else {
|
||||
return "<span class=\"badge badge-pill badge-success\">正常</span>"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -4,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == false) {
|
||||
return "<span class=\"badge badge-pill badge-secondary\">未连接</span>"
|
||||
} else {
|
||||
return "<span class=\"badge badge-pill badge-success\">已连接</span>"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -2,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.InletFlow)
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -3,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.ExportFlow)
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -6,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Cnf.P
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -7,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Cnf.U
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -8,
|
||||
render: function (data, type, row, meta) {
|
||||
if (row.Cnf.Mux == "0") {
|
||||
return "不启用"
|
||||
} else {
|
||||
return "启用"
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
{
|
||||
targets: -9,
|
||||
render: function (data, type, row, meta) {
|
||||
if (row.Cnf.Crypt == "0") {
|
||||
return "不加密"
|
||||
} else {
|
||||
return "加密"
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
{
|
||||
targets: -10,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Cnf.Compress
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
buttons: []
|
||||
});
|
||||
$("#sampleTable_length").html('<button class="btn btn-primary" onclick="add()" type="button">新增</button>')
|
||||
})
|
||||
;
|
||||
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user