From 3daf3b8aa7fcd12d1d8454c60a12323e5763742d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E9=BB=84=E6=9E=97?= Date: Fri, 22 Sep 2023 01:12:48 +0800 Subject: [PATCH] parse and show proxy params in popup; dynamic add extra params in popup; --- assets/static/css/index.css | 38 ++++++++++---- assets/static/js/index-proxy-list.js | 76 +++++++++++++++++++++++++--- assets/templates/index.html | 62 +++++++++++++++++++---- 3 files changed, 149 insertions(+), 27 deletions(-) diff --git a/assets/static/css/index.css b/assets/static/css/index.css index d77dbb4..b3bbad0 100644 --- a/assets/static/css/index.css +++ b/assets/static/css/index.css @@ -144,12 +144,12 @@ section.common-info .text-row .text-col { margin: 0 5px !important; } -.add-popup .layui-layer-setwin { +.proxy-popup .layui-layer-setwin { top: 0; right: 0; } -.add-popup .layui-layer-close2 { +.proxy-popup .layui-layer-close2 { padding: 0; border: none; right: 0; @@ -163,11 +163,11 @@ section.common-info .text-row .text-col { text-align: center; } -.add-popup .layui-layer-close2:hover { +.proxy-popup .layui-layer-close2:hover { background: none; } -.add-popup form { +.proxy-popup form { padding: 0; position: absolute; left: 0; @@ -178,13 +178,14 @@ section.common-info .text-row .text-col { flex-direction: column; } -.add-popup .layui-tab { +.proxy-popup .layui-tab { flex: 1; margin: 0; } -.add-popup .layui-tab .layui-tab-content { - padding: 15px 8px 0 8px; +.proxy-popup .layui-tab .layui-tab-content { + padding: 0 8px; + margin: 8px 0; position: absolute; top: 41px; bottom: 0; @@ -193,20 +194,37 @@ section.common-info .text-row .text-col { overflow: auto; } -.add-popup .layui-textarea { +.proxy-popup .layui-textarea { min-height: 80px; padding: 9px 10px; resize: none; } -.add-popup .layui-form-select dl { +.proxy-popup .layui-form-select dl { max-height: 156px; } -.add-popup .layui-row .layui-form-item { +.proxy-popup .layui-row .layui-form-item { margin-bottom: 0; } +.proxy-popup .extra-param-tab-item .layui-form-item { + display: flex; +} + +.proxy-popup .extra-param-tab-item .layui-form-item:last-child { + margin-bottom: 0; +} + +.proxy-popup .extra-param-tab-item .layui-form-item .layui-input-inline:nth-child(1) { + width: 150px; +} + +.proxy-popup .extra-param-tab-item .layui-form-item .layui-input-inline:nth-child(3) { + flex: 1; + margin-right: 0; +} + #searchForm input { height: 30px; line-height: 28px; diff --git a/assets/static/js/index-proxy-list.js b/assets/static/js/index-proxy-list.js index fbc1e9d..a92bfe1 100644 --- a/assets/static/js/index-proxy-list.js +++ b/assets/static/js/index-proxy-list.js @@ -1,5 +1,7 @@ var loadProxyInfo = (function ($) { var i18n = {}; + //param names in Basic tab + var basicParamNames = ['name', 'type', 'local_ip', 'local_port', 'custom_domains', 'subdomain', 'remote_port', 'use_encryption', 'use_compression']; /** * get proxy info @@ -84,9 +86,13 @@ var loadProxyInfo = (function ($) { var checkStatus = layui.table.checkStatus(id); var data = checkStatus.data; + for (var key in data) { + data[key] = data[key] === '-' ? '' : data[key]; + } + switch (obj.event) { case 'add': - addPopup(type); + proxyPopup(type, null); break case 'remove': // batchRemovePopup(data); @@ -97,10 +103,14 @@ var loadProxyInfo = (function ($) { layui.table.on('tool(proxyListTable)', function (obj) { var data = obj.data; + for (var key in data) { + data[key] = data[key] === '-' ? '' : data[key]; + } + switch (obj.event) { case 'update': + proxyPopup(type, data); break; - // updatePopup(data); case 'remove': // removePopup(data); break; @@ -111,16 +121,37 @@ var loadProxyInfo = (function ($) { /** * add proxy popup * @param type proxy type + * @param data {Map} proxy data */ - function addPopup(type) { + function proxyPopup(type, data) { + var basicData = {}; + var extraData = []; + if (data != null) { + var tempData = $.extend(true, {}, data); + basicParamNames.forEach(function (basicName) { + if (data.hasOwnProperty(basicName)) { + basicData[basicName] = tempData[basicName]; + delete tempData[basicName]; + } + }); + for (var key in tempData) { + extraData.push({ + name: key, + value: tempData[key] + }); + } + } + var html = document.getElementById('addProxyTemplate').innerHTML; + var content = layui.laytpl(html).render({ + type: type, + extraData: extraData + }); layui.layer.open({ type: 1, title: false, - skin: 'add-popup', + skin: 'proxy-popup', area: ['500px', '400px'], - content: layui.laytpl(document.getElementById('addProxyTemplate').innerHTML).render({ - type: type - }), + content: content, btn: ['Confirm', 'Cancel'], btn1: function (index) { if (layui.form.validate('#addProxyTemplate')) { @@ -132,11 +163,40 @@ var loadProxyInfo = (function ($) { layui.layer.close(index); }, success: function (layero, index, that) { - layui.form.render(null, 'addProxyForm'); + layui.form.val('addProxyForm', basicData); + proxyPopupSuccess(layero, index, that, basicData); } }); } + function proxyPopupSuccess(layero, index, that) { + layui.form.render(null, 'addProxyForm'); + layui.form.on('input-affix(addition)', function (obj) { + var $paramValue = $(obj.elem); + var $paramName = $paramValue.closest('.layui-form-item').find('input'); + var name = $paramName.first().val(); + var value = $paramValue.val(); + var html = document.getElementById('extraParamAddedTemplate').innerHTML; + var formItem = layui.laytpl(html).render({ + name: name, + value: value + }); + $paramValue.closest('.layui-tab-item').prepend(formItem); + $paramName.val(''); + $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); + $elem.closest('.layui-form-item').remove(); + }); + } + /** * add proxy action * @param data {{user:string, token:string, comment:string, enable:boolean, ports:[string|number], domains:[string], subdomains:[string]}} user data diff --git a/assets/templates/index.html b/assets/templates/index.html index 62c6fa4..278fd0e 100644 --- a/assets/templates/index.html +++ b/assets/templates/index.html @@ -153,6 +153,13 @@
+
+ +
+ +
+
@@ -163,15 +170,15 @@
- +
- +
{{# if (d.type === 'http' || d.type === 'https') { }} @@ -194,8 +201,8 @@
- +
{{# } }} @@ -204,7 +211,7 @@
- +
@@ -212,18 +219,55 @@
- +
-
内容-2
+
+ {{# layui.each(d.extraData, function(index, extra){ }} +
+
+ +
+
=
+
+ +
+
+ {{# }); }} +
+
+ +
+
=
+
+ +
+
+
+ +