customize scrollbar style;

add proxy popup layout adjust;

assets/static/css/color.css

@@ -1,3 +1,7 @@
+::-webkit-scrollbar-thumb {
+    background: rgba(199, 199, 199, 0.8);
+}
+
 .layui-bg-blue {
     background-color: #58b7ff !important;
 }
@@ -132,6 +136,10 @@ section.proxy-list .proxy-info .layui-row .layui-row > div:first-child {
 }
 
 @media (prefers-color-scheme: dark) {
+    ::-webkit-scrollbar-thumb {
+        background: rgba(107, 107, 107, 0.8);
+    }
+
     .login-title,
     .login-title a {
         color: #99a9bf !important;

assets/static/css/index.css

@@ -1,3 +1,13 @@
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    transition: 0.3s ease-in-out;
+}
+
 html, body {
     padding: 0;
     word-break: break-all;
@@ -70,31 +80,6 @@ section {
     left: 225px;
 }
 
-#searchForm input {
-    height: 30px;
-    line-height: 28px;
-}
-
-#searchForm .layui-input-suffix,
-#searchForm .layui-input-prefix {
-    line-height: 30px;
-    padding: 0;
-}
-
-#addUserForm {
-    padding: 15px 15px 0 15px;
-}
-
-#addUserForm .layui-form-item:last-child {
-    margin-bottom: 0;
-}
-
-#addUserForm .layui-textarea {
-    min-height: 80px;
-    padding: 9px 10px;
-    resize: none;
-}
-
 .layui-form-label {
     width: 140px;
 }
@@ -155,25 +140,80 @@ section.common-info .text-row .text-col {
     flex: 1;
 }
 
-#addProxyForm {
+.layui-layer-btn > a[class^=layui-layer-btn] {
+    margin: 0 5px !important;
+}
+
+.add-popup .layui-layer-setwin {
+    top: 0;
+    right: 0;
+}
+
+.add-popup .layui-layer-close2 {
     padding: 0;
+    border: none;
+    right: 0;
+    top: 0;
+    background: none;
+    border-radius: 0;
+    color: #787878;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
 }
 
-#addProxyForm .layui-tab {
+.add-popup .layui-layer-close2:hover {
-    margin: 15px 15px 0 15px;
+    background: none;
 }
 
-#addProxyForm .layui-tab .layui-tab-content {
+.add-popup form {
-    padding-bottom: 0;
+    padding: 0;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
 }
 
-#addProxyForm .layui-textarea {
+.add-popup .layui-tab {
+    flex: 1;
+    margin: 0;
+}
+
+.add-popup .layui-tab .layui-tab-content {
+    padding: 15px 8px 0 8px;
+    position: absolute;
+    top: 41px;
+    bottom: 0;
+    left: 8px;
+    right: 8px;
+    overflow: auto;
+}
+
+.add-popup .layui-textarea {
     min-height: 80px;
     padding: 9px 10px;
     resize: none;
 }
 
-#addProxyForm .layui-row .layui-form-item {
+.add-popup .layui-form-select dl {
+    max-height: 156px;
+}
+
+.add-popup .layui-row .layui-form-item {
     margin-bottom: 0;
 }
 
+#searchForm input {
+    height: 30px;
+    line-height: 28px;
+}
+
+#searchForm .layui-input-suffix,
+#searchForm .layui-input-prefix {
+    line-height: 30px;
+    padding: 0;
+}

assets/static/js/index-proxy-list.js

@@ -70,13 +70,15 @@ var loadProxyInfo = (function ($) {
             proxyListTable.resize();
         }
 
-        bindFormEvent();
+        bindFormEvent(proxyType);
     }
 
     /**
      * bind event of {{@link layui.form}}
+     *
+     * @param type proxy type
      */
-    function bindFormEvent() {
+    function bindFormEvent(type) {
         layui.table.on('toolbar(proxyListTable)', function (obj) {
             var id = obj.config.id;
             var checkStatus = layui.table.checkStatus(id);
@@ -84,7 +86,7 @@ var loadProxyInfo = (function ($) {
 
             switch (obj.event) {
                 case 'add':
-                    addPopup();
+                    addPopup(type);
                     break
                 case 'remove':
                     // batchRemovePopup(data);
@@ -108,13 +110,17 @@ var loadProxyInfo = (function ($) {
 
     /**
      * add proxy popup
+     * @param type proxy type
      */
-    function addPopup() {
+    function addPopup(type) {
         layui.layer.open({
             type: 1,
-            title: 'NewProxy',
+            title: false,
-            area: ['500px'],
+            skin: 'add-popup',
-            content: layui.laytpl(document.getElementById('addProxyTemplate').innerHTML).render(),
+            area: ['500px', '400px'],
+            content: layui.laytpl(document.getElementById('addProxyTemplate').innerHTML).render({
+                type: type
+            }),
             btn: ['Confirm', 'Cancel'],
             btn1: function (index) {
                 if (layui.form.validate('#addProxyTemplate')) {
@@ -126,7 +132,6 @@ var loadProxyInfo = (function ($) {
                 layui.layer.close(index);
             },
             success: function (layero, index, that) {
-                layero.find('.layui-layer-content').css('overflow', 'visible');
                 layui.form.render(null, 'addProxyForm');
             }
         });

assets/templates/index.html

@@ -156,14 +156,8 @@
                     <div class="layui-form-item">
                         <label class="layui-form-label">ProxyType</label>
                         <div class="layui-input-block">
-                            <select name="type" id="type">
+                            <input type="text" name="type" value="{{= d.type.toUpperCase() }}" readonly
-                                <option value="http">HTTP</option>
+                                   class="layui-input">
-                                <option value="https">HTTPS</option>
-                                <option value="tcp">TCP</option>
-                                <option value="udp">UDP</option>
-                                <option value="stcp">STCP</option>
-                                <option value="sudp">SUDP</option>
-                            </select>
                         </div>
                     </div>
                     <div class="layui-form-item">
@@ -180,27 +174,31 @@
                                    autocomplete="off" class="layui-input"/>
                         </div>
                     </div>
-                    <div class="layui-form-item layui-hide http https">
+                    {{# if (d.type === 'http' || d.type === 'https') { }}
+                    <div class="layui-form-item http https">
                         <label class="layui-form-label">CustomizeDomains</label>
                         <div class="layui-input-block">
                             <textarea name="custom_domains" placeholder="CustomDomains" autocomplete="off"
                                       class="layui-textarea"></textarea>
                         </div>
                     </div>
-                    <div class="layui-form-item layui-form-text layui-hide http https">
+                    <div class="layui-form-item layui-form-text http https">
                         <label class="layui-form-label">Subdomain</label>
                         <div class="layui-input-block">
                             <textarea name="subdomain" placeholder="Subdomain" autocomplete="off"
                                       class="layui-textarea"></textarea>
                         </div>
                     </div>
-                    <div class="layui-form-item layui-hide tcp udp">
+                    {{# } }}
+                    {{# if (d.type === 'tcp' || d.type === 'udp') { }}
+                    <div class="layui-form-item tcp udp">
                         <label class="layui-form-label">RemotePort</label>
                         <div class="layui-input-block">
                             <input type="text" name="remote_port" placeholder="RemotePort"
                                    autocomplete="off" class="layui-input"/>
                         </div>
                     </div>
+                    {{# } }}
                     <div class="layui-row">
                         <div class="layui-col-xs6">
                             <div class="layui-form-item">

config/frpc-panel.toml

@@ -1,7 +1,7 @@
 # basic options
 [common]
 # frps panel config info
-plugin_addr = "127.0.0.1"
+plugin_addr = "0.0.0.0"
 plugin_port = 7300
 #admin_user = "admin"
 #admin_pwd = "admin"