complete full functions;

add some translations;
This commit is contained in:
2023-09-25 18:33:10 +08:00
parent 4e93c2b92b
commit 7310e1117c
13 changed files with 532 additions and 406 deletions

View File

@@ -7,5 +7,53 @@
"Please input password": "Please input password",
"Login success": "Login success",
"Username or password incorrect": "Username or password incorrect",
"Empty data": "Empty data"
"Empty data": "Empty data",
"Client Info": "Client Info",
"Proxies Status": "Proxies Status",
"Proxies": "Proxies",
"Server Address": "Server Address",
"Server Port": "Server Port",
"Protocol": "Protocol",
"TCP Mux": "TCP Mux",
"User": "User",
"User Token": "User Token",
"Admin Address": "Admin Address",
"Admin Port": "Admin Port",
"Admin User": "Admin User",
"Admin Pwd": "Admin Pwd",
"Heartbeat Interval": "Heartbeat Interval",
"Heartbeat Timeout": "Heartbeat Timeout",
"TLS Enable": "TLS Enable",
"TLS Key File": "TLS Key File",
"TLS Cert File": "TLS Cert File",
"TLS Trusted CA File": "TLS Trusted CA File",
"false": "No",
"true": "Yes",
"New Proxy": "New Proxy",
"Remove Proxy": "Remove Proxy",
"Update": "Update",
"Remove": "Remove",
"Basic": "Basic Params",
"Extra": "Extra Params",
"Proxy Name": "Proxy Name",
"Customize Domains": "Customize Domains",
"Subdomain": "Subdomain",
"Remote Port": "Remote Port",
"Use Encryption": "Use Encryption",
"Use Compression": "Use Compression",
"Param Name": "Param Name",
"Param Value": "Param Value",
"Name": "Name",
"Type": "Type",
"Local Address": "Local Address",
"Plugin": "Plugin",
"Remote Address": "Remote Address",
"Status": "Status",
"Info": "Info",
"running": "running",
"Local Ip": "Local Ip",
"Local Port": "Local Port",
"Operation": "Operation",
"Confirm": "Confirm",
"Cancel": "Cancel"
}

View File

@@ -7,5 +7,53 @@
"Please input password": "请填写密码",
"Login success": "登录成功",
"Username or password incorrect": "用户名或密码错误",
"Empty data": "无数据"
"Empty data": "无数据",
"Client Info": "客户端信息",
"Proxies Status": "代理状态",
"Proxies": "代理",
"Server Address": "服务器地址",
"Server Port": "服务器端口",
"Protocol": "连接协议",
"TCP Mux": "TCP端口复用",
"User": "用户",
"User Token": "鉴权凭证",
"Admin Address": "客户端管理监听地址",
"Admin Port": "客户端管理监听端口",
"Admin User": "客户端管理账号",
"Admin Pwd": "客户端管理密码",
"Heartbeat Interval": "心跳检测间隔",
"Heartbeat Timeout": "心跳检测超时时间",
"TLS Enable": "启用TLS加密",
"TLS Key File": "TLS密钥文件路径",
"TLS Cert File": "TLS证书文件路径",
"TLS Trusted CA File": "TLS CA证书文件路径",
"false": "否",
"true": "是",
"New Proxy": "新增代理",
"Remove Proxy": "删除代理",
"Update": "更新",
"Remove": "删除",
"Basic": "基础参数",
"Extra": "附加参数",
"Proxy Name": "代理名称",
"Customize Domains": "自定义域名",
"Subdomain": "子域名",
"Remote Port": "服务端端口",
"Use Encryption": "加密传输",
"Use Compression": "压缩传输",
"Param Name": "参数名称",
"Param Value": "参数值",
"Name": "代理名称",
"Type": "代理类型",
"Local Address": "本地地址",
"Plugin": "插件",
"Remote Address": "服务端地址",
"Status": "状态",
"Info": "消息",
"running": "运行中",
"Local Ip": "本地IP",
"Local Port": "本地端口",
"Operation": "操作",
"Confirm": "确定",
"Cancel": "取消"
}

View File

@@ -118,25 +118,25 @@ section {
font-size: 12px;
}
section.common-info {
section.client-info {
display: flex;
}
section.common-info .text-info {
section.client-info .text-info {
flex: 1;
}
section.common-info .text-info {
section.client-info .text-info {
padding: 0 20px;
}
section.common-info .text-row {
section.client-info .text-row {
display: flex;
font-size: 14px;
line-height: 40px;
}
section.common-info .text-row .text-col {
section.client-info .text-row .text-col {
flex: 1;
}

View File

@@ -1,4 +1,4 @@
var loadCommon = (function ($) {
var loadClientInfo = (function ($) {
var i18n = {};
/**
@@ -6,7 +6,7 @@ var loadCommon = (function ($) {
* @param lang {Map<string,string>} language json
* @param title {string} page title
*/
function loadCommon(lang, title) {
function loadClientInfo(lang, title) {
i18n = lang;
$("#title").text(title);
$('#content').empty();
@@ -26,9 +26,11 @@ var loadCommon = (function ($) {
}
function renderCommonInfo(data) {
var html = layui.laytpl($('#commonTemplate').html()).render(data);
data.tcp_mux = i18n[data.tcp_mux];
data.tls_enable = i18n[data.tls_enable];
var html = layui.laytpl($('#clientInfoTemplate').html()).render(data);
$('#content').html(html);
}
return loadCommon;
return loadClientInfo;
})(layui.$);

View File

@@ -1,95 +0,0 @@
var loadOverview = (function ($) {
var i18n = {};
/**
* get proxy info
* @param lang {{}} language json
* @param title page title
*/
function loadOverview(lang, title) {
i18n = lang;
$("#title").text(title);
$('#content').empty();
var loading = layui.layer.load();
$.getJSON('/proxy/api/status').done(function (result) {
if (result.success) {
$('#content').html($('#overviewTableTemplate').html());
renderOverviewTable(JSON.parse(result.data));
} else {
layui.layer.msg(result.message);
}
}).always(function () {
layui.layer.close(loading);
});
}
/**
* render proxy list table
* @param data {Map<string,Map<string,string>>} proxy data
* @param proxyType proxy type
*/
function renderOverviewTable(data, proxyType) {
var dataList = [];
for (var type in data) {
var temp = data[type];
dataList = dataList.concat(temp);
}
var $section = $('#content > section');
var cols = [
{field: 'name', title: 'Name', sort: true},
{field: 'type', title: 'Type', width: 100, sort: true},
{
field: 'local_addr',
title: 'Local Address',
templet: '<span>{{= d.local_addr || "-" }}</span>',
width: 220,
sort: true
},
{field: 'plugin', title: 'plugin', templet: '<span>{{= d.plugin || "-" }}</span>', sort: true},
{field: 'remote_addr', title: 'Remote Address', sort: true},
{field: 'status', title: 'Status', width: 100, sort: true},
{field: 'err', title: 'Info',templet: '<span>{{= d.err || "-" }}</span>', width: 200}
];
var overviewTable = layui.table.render({
elem: '#overviewTable',
height: $section.height(),
text: {none: i18n['EmptyData']},
cols: [cols],
page: navigator.language.indexOf("zh") !== -1,
data: dataList,
initSort: {
field: 'name',
type: 'asc'
}
});
window.onresize = function () {
overviewTable.resize();
}
bindFormEvent();
}
/**
* bind event of {{@link layui.form}}
*/
function bindFormEvent() {
layui.table.on('tool(proxyListTable)', function (obj) {
var data = obj.data;
switch (obj.event) {
case 'update':
break;
// updatePopup(data);
case 'remove':
// removePopup(data);
break;
}
});
}
return loadOverview;
})(layui.$);

View File

@@ -1,16 +1,7 @@
var loadProxyInfo = (function ($) {
var i18n = {}, currentProxyType, currentTitle;
//param names in Basic tab
var basicParamNames = ['name', 'type', 'local_ip', 'local_port', 'custom_domains', 'subdomain', 'remote_port', 'use_encryption', 'use_compression'];
//param need to convert type
var intParamNames = ['local_port', 'health_check_timeout_s', 'health_check_max_failed', 'health_check_interval_s'];
var booleanParamNames = ['use_encryption', 'use_compression'];
var stringArrayParamNames = ['custom_domains', 'locations']
var mapParamPrefixes = [
{name: 'metas', prefix: 'meta_'},
{name: 'plugin_params', prefix: 'plugin_'},
{name: 'headers', prefix: 'header_'}
];
var basicParamNames = ['name', 'type', 'local_ip', 'local_port', 'custom_domains', 'sub_domain', 'remote_port', 'use_encryption', 'use_compression'];
/**
* get proxy info
@@ -60,11 +51,11 @@ var loadProxyInfo = (function ($) {
var $section = $('#content > section');
var cols = [
{type: 'checkbox'},
{field: 'name', title: 'Name', sort: true},
{field: 'type', title: 'Type', sort: true},
{field: 'local_ip', title: 'Local Ip', sort: true},
{field: 'local_port', title: 'Local Port', sort: true},
{title: 'Operation', width: 150, toolbar: '#proxyListOperationTemplate'}
{field: 'name', title: i18n['Name'], sort: true},
{field: 'type', title: i18n['Type'], sort: true},
{field: 'local_ip', title: i18n['LocalIp'], sort: true},
{field: 'local_port', title: i18n['LocalPort'], sort: true},
{title: i18n['Operation'], width: 150, toolbar: '#proxyListOperationTemplate'}
];
var proxyListTable = layui.table.render({
@@ -72,7 +63,9 @@ var loadProxyInfo = (function ($) {
height: $section.height(),
text: {none: i18n['EmptyData']},
cols: [cols],
page: navigator.language.indexOf("zh") !== -1,
page: {
layout: navigator.language.indexOf("zh") === -1 ? ['first', 'prev', 'next', 'last'] : ['prev', 'page', 'next', 'skip', 'count', 'limit']
},
toolbar: '#proxyListToolbarTemplate',
defaultToolbar: false,
data: dataList,
@@ -109,7 +102,7 @@ var loadProxyInfo = (function ($) {
}, false);
break
case 'remove':
// batchRemovePopup(data);
batchRemovePopup(data);
break
}
});
@@ -123,11 +116,10 @@ var loadProxyInfo = (function ($) {
switch (obj.event) {
case 'update':
data.oldName = data.name;
proxyPopup(data, true);
break;
case 'remove':
// removePopup(data);
batchRemovePopup([data]);
break;
}
});
@@ -167,7 +159,7 @@ var loadProxyInfo = (function ($) {
skin: 'proxy-popup',
area: ['500px', '400px'],
content: content,
btn: ['Confirm', 'Cancel'],
btn: [i18n['Confirm'], i18n['Cancel']],
btn1: function (index) {
if (layui.form.validate('#addProxyTemplate')) {
var formData = layui.form.val('addProxyForm');
@@ -185,50 +177,16 @@ var loadProxyInfo = (function ($) {
layui.layer.close(index);
},
success: function (layero, index, that) {
//get and set old name for update form
var oldNameKey = layero.find('#oldName').attr('name');
basicData[oldNameKey] = basicData.name;
layui.form.val('addProxyForm', basicData);
proxyPopupSuccess(layero, index, that, basicData);
proxyPopupSuccess();
}
});
}
/**
* repack form data
* @param formData
* @returns {*}
*/
function repackData(formData) {
mapParamPrefixes.forEach(function (temp) {
var name = temp.name;
var prefix = temp.prefix;
for (var key in formData) {
if (key !== name && key.startsWith(prefix)) {
formData[name] = formData[name] || {};
var newKey = key.replace(prefix, '');
formData[name][newKey] = formData[key];
delete formData[key];
}
}
});
intParamNames.forEach(function (paramName) {
if (formData.hasOwnProperty(paramName) && formData[paramName] !== '') {
formData[paramName] = parseInt(formData[paramName]);
}
});
booleanParamNames.forEach(function (paramName) {
if (formData.hasOwnProperty(paramName) && formData[paramName] !== '') {
formData[paramName] = formData[paramName] === 'true';
}
});
stringArrayParamNames.forEach(function (paramName) {
if (formData.hasOwnProperty(paramName) && formData[paramName] !== '') {
formData[paramName] = formData[paramName].split(',');
}
});
return formData;
}
function proxyPopupSuccess(layero, index, that) {
function proxyPopupSuccess() {
layui.form.render(null, 'addProxyForm');
layui.form.on('input-affix(addition)', function (obj) {
var $paramValue = $(obj.elem);
@@ -245,10 +203,6 @@ var loadProxyInfo = (function ($) {
$paramValue.val('');
layui.form.render();
// var tabContent = $paramValue.closest('.layui-tab-content');
// var scrollHeight = tabContent.prop("scrollHeight");
// tabContent.scrollTop(scrollHeight)
});
layui.form.on('input-affix(subtraction)', function (obj) {
var $elem = $(obj.elem);
@@ -294,23 +248,43 @@ var loadProxyInfo = (function ($) {
/**
* batch remove proxy popup
* @param data {[{user:string, token:string, comment:string, enable:boolean, ports:[string|number], domains:[string], subdomains:[string]}]} user data list
* @param data {[Map<string,string>]} proxy data list
*/
function batchRemovePopup(data) {
if (data.length === 0) {
layui.layer.msg(i18n['ShouldCheckUser']);
layui.layer.msg('ShouldCheckProxy');
return;
}
layui.layer.confirm(i18n['ConfirmRemoveUser'], {
title: i18n['OperationConfirm'],
layui.layer.confirm('ConfirmRemoveProxy', {
title: 'OperationConfirm',
btn: [i18n['Confirm'], i18n['Cancel']]
}, function (index) {
operate(apiType.Remove, data, index);
var loading = layui.layer.load();
$.post({
url: '/remove',
type: 'post',
contentType: 'application/json',
data: JSON.stringify(data),
success: function (result) {
if (result.success) {
reloadTable();
layui.layer.close(index);
layui.layer.msg('OperateSuccess', function (index) {
layui.layer.close(index);
});
} else {
errorMsg(result);
}
},
complete: function () {
layui.layer.close(loading);
}
});
});
}
/**
* reload user table
* reload proxy table
*/
function reloadTable() {
loadProxyInfo(null, null, null);

View File

@@ -0,0 +1,81 @@
var loadProxiesStatus = (function ($) {
var i18n = {};
/**
* get proxy info
* @param lang {{}} language json
* @param title page title
*/
function loadProxiesStatus(lang, title) {
i18n = lang;
$("#title").text(title);
$('#content').empty();
var loading = layui.layer.load();
$.getJSON('/proxy/api/status').done(function (result) {
if (result.success) {
$('#content').html($('#proxiesTableTemplate').html());
renderProxiesTable(JSON.parse(result.data));
} else {
layui.layer.msg(result.message);
}
}).always(function () {
layui.layer.close(loading);
});
}
/**
* render proxy list table
* @param data {Map<string,Map<string,string>>} proxy data
* @param proxyType proxy type
*/
function renderProxiesTable(data, proxyType) {
var dataList = [];
for (var type in data) {
var temp = data[type];
dataList = dataList.concat(temp);
}
var $section = $('#content > section');
var cols = [
{field: 'name', title: i18n['Name'], sort: true},
{field: 'type', title: i18n['Type'], width: 100, sort: true},
{
field: 'local_addr',
title: i18n['LocalAddress'],
templet: '<span>{{= d.local_addr || "-" }}</span>',
width: 220,
sort: true
},
{field: 'plugin', title: i18n['Plugin'], templet: '<span>{{= d.plugin || "-" }}</span>', sort: true},
{field: 'remote_addr', title: i18n['RemoteAddress'], sort: true},
{
field: 'status', title: i18n['Status'], templet: function (d) {
return i18n[d.status];
}, width: 100, sort: true
},
{field: 'err', title: i18n['Info'], templet: '<span>{{= d.err || "-" }}</span>', width: 200}
];
var proxiesTable = layui.table.render({
elem: '#proxiesTable',
height: $section.height(),
text: {none: i18n['EmptyData']},
cols: [cols],
page: {
layout: navigator.language.indexOf("zh") === -1 ? ['first', 'prev', 'next', 'last'] : ['prev', 'page', 'next', 'skip', 'count', 'limit']
},
data: dataList,
initSort: {
field: 'name',
type: 'asc'
}
});
window.onresize = function () {
proxiesTable.resize();
}
}
return loadProxiesStatus;
})(layui.$);

View File

@@ -17,16 +17,14 @@ var http_port, https_port;
layui.element.on('nav(leftNav)', function (elem) {
var id = elem.attr('id');
var title = elem.text();
if (id === 'overview') {
loadOverview(lang, title.trim());
} else if (elem.closest('.layui-nav-item').attr('id') === 'configure') {
if (id === 'clientInfo') {
loadClientInfo(lang, title.trim());
} else if (id === 'proxiesStatus') {
loadProxiesStatus(lang, title.trim());
} else if (elem.closest('.layui-nav-item').attr('id') === 'proxies') {
if (id != null && id.trim() !== '') {
var suffix = elem.closest('.layui-nav-item').children('a').text().trim();
if (id === 'common') {
loadCommon(lang, title + " " + suffix);
} else {
loadProxyInfo(lang, title + " " + suffix, id);
}
loadProxyInfo(lang, title + " " + suffix, id);
}
}
});

View File

@@ -7,8 +7,8 @@
<link rel="stylesheet" href="./static/css/index.css?v=${ .version }">
<link rel="stylesheet" href="./static/css/color.css?v=${ .version }">
<script src="./static/lib/layui/layui.js?v=${ .version }"></script>
<script src="./static/js/index-overview.js?v=${ .version }"></script>
<script src="./static/js/index-configure.js?v=${ .version }"></script>
<script src="./static/js/index-proxy-status.js?v=${ .version }"></script>
<script src="./static/js/index-client-info.js?v=${ .version }"></script>
<script src="./static/js/index-proxy-list.js?v=${ .version }"></script>
<script src="./static/js/index.js?v=${ .version }"></script>
</head>
@@ -27,14 +27,14 @@
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="leftNav" id="leftNav">
<li class="layui-nav-item layui-this">
<a href="javascript:void(0)" id="overview">Overview</a>
<a href="javascript:void(0)" id="clientInfo">${ .ClientInfo }</a>
</li>
<li class="layui-nav-item layui-nav-itemed" id="configure">
<a class="" href="javascript:void(0)">Configure</a>
<li class="layui-nav-item">
<a href="javascript:void(0)" id="proxiesStatus">${ .ProxiesStatus }</a>
</li>
<li class="layui-nav-item layui-nav-itemed" id="proxies">
<a class="" href="javascript:void(0)">${ .Proxies }</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:void(0)" id="common">Common</a>
</dd>
<dd>
<a href="javascript:void(0)" id="tcp">TCP</a>
</dd>
@@ -65,79 +65,79 @@
</div>
<!--代理列表-代理表格模板-->
<script type="text/html" id="overviewTableTemplate">
<section class="overview">
<table id="overviewTable" lay-filter="overviewTable"></table>
<script type="text/html" id="proxiesTableTemplate">
<section class="proxies">
<table id="proxiesTable" lay-filter="proxiesTable"></table>
</section>
</script>
<!--配置信息模板-->
<script type="text/html" id="commonTemplate">
<section class="common-info">
<script type="text/html" id="clientInfoTemplate">
<section class="client-info">
<div class="text-info">
<div class="text-row">
<div class="text-col">server_addr</div>
<div class="text-col">{{= d.server_addr }}</div>
<div class="text-col">${ .ServerAddress }</div>
<div class="text-col">{{= d.server_addr || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">server_port</div>
<div class="text-col">{{= d.server_port }}</div>
<div class="text-col">${ .ServerPort }</div>
<div class="text-col">{{= d.server_port || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">protocol</div>
<div class="text-col">{{= d.protocol }}</div>
<div class="text-col">${ .Protocol }</div>
<div class="text-col">{{= d.protocol || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">tcp_mux</div>
<div class="text-col">{{= d.tcp_mux }}</div>
<div class="text-col">${ .TCPMux }</div>
<div class="text-col">{{= d.tcp_mux || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">user</div>
<div class="text-col">{{= d.user }}</div>
<div class="text-col">${ .User }</div>
<div class="text-col">{{= d.user || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">meta_token</div>
<div class="text-col">{{= d.metas.token }}</div>
<div class="text-col">${ .UserToken }</div>
<div class="text-col">{{= d.metas.token || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">admin_addr</div>
<div class="text-col">{{= d.admin_addr }}</div>
<div class="text-col">${ .AdminAddress }</div>
<div class="text-col">{{= d.admin_addr || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">admin_port</div>
<div class="text-col">{{= d.admin_port }}</div>
<div class="text-col">${ .AdminPort }</div>
<div class="text-col">{{= d.admin_port || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">admin_pwd</div>
<div class="text-col">{{= d.admin_pwd }}</div>
<div class="text-col">${ .AdminUser }</div>
<div class="text-col">{{= d.admin_user || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">admin_user</div>
<div class="text-col">{{= d.admin_user }}</div>
<div class="text-col">${ .AdminPwd }</div>
<div class="text-col">{{= d.admin_pwd || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">heartbeat_interval</div>
<div class="text-col">{{= d.heartbeat_interval }}</div>
<div class="text-col">${ .HeartbeatInterval }</div>
<div class="text-col">{{= d.heartbeat_interval || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">heartbeat_timeout</div>
<div class="text-col">{{= d.heartbeat_timeout }}</div>
<div class="text-col">${ .HeartbeatTimeout }</div>
<div class="text-col">{{= d.heartbeat_timeout || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">tls_enable</div>
<div class="text-col">{{= d.tls_enable }}</div>
<div class="text-col">${ .TLSEnable }</div>
<div class="text-col">{{= d.tls_enable || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">tls_key_file</div>
<div class="text-col">{{= d.tls_key_file }}</div>
<div class="text-col">${ .TLSKeyFile }</div>
<div class="text-col">{{= d.tls_key_file || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">tls_cert_file</div>
<div class="text-col">{{= d.tls_cert_file }}</div>
<div class="text-col">${ .TLSCertFile }</div>
<div class="text-col">{{= d.tls_cert_file || '-' }}</div>
</div>
<div class="text-row">
<div class="text-col">tls_trusted_ca_file</div>
<div class="text-col">{{= d.tls_trusted_ca_file }}</div>
<div class="text-col">${ .TLSTrustedCAFile }</div>
<div class="text-col">{{= d.tls_trusted_ca_file || '-' }}</div>
</div>
</div>
</section>
@@ -148,59 +148,55 @@
<form class="layui-form" id="addProxyForm" lay-filter="addProxyForm">
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">Basic</li>
<li>Extra</li>
<li class="layui-this">${ .Basic }</li>
<li>${ .Extra }</li>
</ul>
<div class="layui-tab-content">
<input type="hidden" name="type">
<input type="hidden" name="${ .oldNameKey }" id="oldName">
<div class="layui-tab-item layui-show">
<div class="layui-form-item">
<label class="layui-form-label">ProxyName</label>
<label class="layui-form-label">${ .ProxyName }</label>
<div class="layui-input-block">
<input type="text" name="name" placeholder="ProxyName" autocomplete="off"
<input type="text" name="name" placeholder="${ .ProxyName }" autocomplete="off"
class="layui-input"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">ProxyType</label>
<label class="layui-form-label">${ .LocalIp }</label>
<div class="layui-input-block">
<input type="text" name="type" readonly class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">LocalIp</label>
<div class="layui-input-block">
<input type="text" name="local_ip" placeholder="LocalIp" autocomplete="off"
<input type="text" name="local_ip" placeholder="${ .LocalIp }" autocomplete="off"
class="layui-input"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">LocalPort</label>
<label class="layui-form-label">${ .LocalPort }</label>
<div class="layui-input-block">
<input type="text" name="local_port" placeholder="LocalPort" autocomplete="off"
<input type="text" name="local_port" placeholder="${ .LocalPort }" autocomplete="off"
class="layui-input"/>
</div>
</div>
{{# if (d.type === 'http' || d.type === 'https') { }}
<div class="layui-form-item http https">
<label class="layui-form-label">CustomizeDomains</label>
<label class="layui-form-label">${ .CustomizeDomains }</label>
<div class="layui-input-block">
<textarea name="custom_domains" placeholder="CustomDomains" autocomplete="off"
<textarea name="custom_domains" placeholder="${ .CustomizeDomains }" autocomplete="off"
class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text http https">
<label class="layui-form-label">Subdomain</label>
<label class="layui-form-label">${ .Subdomain }</label>
<div class="layui-input-block">
<textarea name="sub_domain" placeholder="Subdomain" autocomplete="off"
<textarea name="sub_domain" placeholder="${ .Subdomain }" autocomplete="off"
class="layui-textarea"></textarea>
</div>
</div>
{{# } }}
{{# if (d.type === 'tcp' || d.type === 'udp') { }}
<div class="layui-form-item tcp udp">
<label class="layui-form-label">RemotePort</label>
<label class="layui-form-label">${ .RemotePort }</label>
<div class="layui-input-block">
<input type="text" name="remote_port" placeholder="RemotePort" autocomplete="off"
<input type="text" name="remote_port" placeholder="${ .RemotePort }" autocomplete="off"
class="layui-input"/>
</div>
</div>
@@ -208,17 +204,17 @@
<div class="layui-row">
<div class="layui-col-xs6">
<div class="layui-form-item">
<label class="layui-form-label">UseEncryption</label>
<label class="layui-form-label">${ .UseEncryption }</label>
<div class="layui-input-block">
<input type="checkbox" name="use_encryption" value="true" title="YES">
<input type="checkbox" name="use_encryption" value="true" title="${ .true }">
</div>
</div>
</div>
<div class="layui-col-xs6">
<div class="layui-form-item">
<label class="layui-form-label">UseCompression</label>
<label class="layui-form-label">${ .UseCompression }</label>
<div class="layui-input-block">
<input type="checkbox" name="use_compression" value="true" title="YES">
<input type="checkbox" name="use_compression" value="true" title="${ .true }">
</div>
</div>
</div>
@@ -227,24 +223,24 @@
<div class="layui-tab-item extra-param-tab-item">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="paramName">
<input type="text" class="layui-input" placeholder="${ .ParamName }">
</div>
<div class="layui-form-mid">=</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" lay-filter="addition"
lay-affix="addition" placeholder="paramValue">
lay-affix="addition" placeholder="${ .ParamValue }">
</div>
</div>
{{# layui.each(d.extraData, function(index, extra){ }}
<div class="layui-form-item extra-param-item">
<div class="layui-input-inline">
<input type="text" value="{{= extra.name}}" class="layui-input"
placeholder="paramName">
placeholder="${ .ParamName }">
</div>
<div class="layui-form-mid">=</div>
<div class="layui-input-inline">
<input type="text" value="{{= extra.value }}" class="layui-input"
lay-filter="subtraction" lay-affix="subtraction" placeholder="paramValue">
lay-filter="subtraction" lay-affix="subtraction" placeholder="${ .ParamValue }">
</div>
</div>
{{# }); }}
@@ -257,12 +253,12 @@
<script type="text/html" id="extraParamAddedTemplate">
<div class="layui-form-item extra-param-item">
<div class="layui-input-inline">
<input type="text" value="{{= d.name}}" class="layui-input" placeholder="paramName">
<input type="text" value="{{= d.name}}" class="layui-input" placeholder="${ .ParamName }">
</div>
<div class="layui-form-mid">=</div>
<div class="layui-input-inline">
<input type="text" value="{{= d.value }}" class="layui-input"
lay-filter="subtraction" lay-affix="subtraction" placeholder="paramValue">
lay-filter="subtraction" lay-affix="subtraction" placeholder="${ .ParamValue }">
</div>
</div>
</script>
@@ -277,16 +273,16 @@
<!--代理列表-表格工具条按钮模板-->
<script type="text/html" id="proxyListToolbarTemplate">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">NewProxy</button>
<button class="layui-btn layui-btn-sm" lay-event="remove">RemoveProxy</button>
<button class="layui-btn layui-btn-sm" lay-event="add">${ .NewProxy }</button>
<button class="layui-btn layui-btn-sm" lay-event="remove">${ .RemoveProxy }</button>
</div>
</script>
<!--代理列表-操作按钮模板-->
<script type="text/html" id="proxyListOperationTemplate">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-xs" lay-event="update">Update</a>
<a class="layui-btn layui-btn-xs" lay-event="remove">Remove</a>
<a class="layui-btn layui-btn-xs" lay-event="update">${ .Update }</a>
<a class="layui-btn layui-btn-xs" lay-event="remove">${ .Remove }</a>
</div>
</script>
</body>