UI Improvements (#2228)

* UI Improvements

Better Table
Update QR Code Modal
Better Info Modal
Compression HTML files
Better Dropdown Menu
Better Calendar
and more ..
Remove files
Minor Fixes

web/assets/codemirror/xq.css

@@ -1,86 +0,0 @@
-/*
-Copyright (C) 2011 by MarkLogic Corporation
-Author: Mike Brevoort <mike@brevoort.com>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-*/
-.cm-s-xq.CodeMirror { border-radius: 1.5rem; border: 1px solid #d9d9d9; height: auto; }
-.cm-s-xq.CodeMirror:hover { background-color: rgb(232 244 242); border-color: #18947b; transition: all .3s; }
-.cm-s-xq .CodeMirror-gutters { border-right: 1px solid #ddd; background-color: rgb(221 221 221 / 20%); white-space: nowrap; }
-.cm-s-xq span.cm-keyword { line-height: 1em; font-weight: bold; color: #5A5CAD; }
-.cm-s-xq span.cm-atom { color: #7A316F; font-weight:bold; }
-.cm-s-xq span.cm-number { color: #e36209; }
-.cm-s-xq span.cm-def { text-decoration:underline; }
-.cm-s-xq span.cm-variable { color: black; }
-.cm-s-xq span.cm-variable-2 { color:black; }
-.cm-s-xq span.cm-variable-3, .cm-s-xq span.cm-type { color: black; }
-.cm-s-xq span.cm-property { color: #008771; }
-.cm-s-xq span.cm-operator {}
-.cm-s-xq span.cm-comment { color: #bbbbbb; font-style: italic; }
-.cm-s-xq span.cm-string {}
-.cm-s-xq span.cm-meta { color: yellow; }
-.cm-s-xq span.cm-qualifier { color: grey; }
-.cm-s-xq span.cm-builtin { color: #7EA656; }
-.cm-s-xq span.cm-bracket { color: #cc7; }
-.cm-s-xq span.cm-tag { color: #3F7F7F; }
-.cm-s-xq span.cm-attribute { color: #7F007F; }
-.cm-s-xq span.cm-error { color: #e04141; }
-
-.cm-s-xq .CodeMirror-activeline-background { background: #e8f2ff; }
-.cm-s-xq .CodeMirror-matchingbracket { outline:1px solid grey;color:black !important;background:yellow; }
-
-.dark .cm-s-xq.CodeMirror { background-color: var(--dark-color-surface-200); border-color: var(--dark-color-surface-300); color: rgb(255 255 255 / 65%); }
-.dark .cm-s-xq.CodeMirror:hover { background-color: rgb(0 50 42 / 30%); border-color: #008771; transition: all .3s; }
-.dark .cm-s-xq div.CodeMirror-selected { background: var(--dark-color-codemirror-line-selection); }
-.dark .cm-s-xq .CodeMirror-line::selection, .dark .cm-s-xq .CodeMirror-line > span::selection, .dark .cm-s-xq .CodeMirror-line > span > span::selection { background: var(--dark-color-codemirror-line-selection); }
-.dark .cm-s-xq .CodeMirror-line::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span > span::-moz-selection { background: var(--dark-color-codemirror-line-selection); }
-.dark .cm-s-xq .CodeMirror-gutters { background: rgb(0 0 0 / 30%); border-right: 1px solid var(--dark-color-surface-300); }
-.dark .cm-s-xq .CodeMirror-guttermarker { color: #FFBD40; }
-.dark .cm-s-xq .CodeMirror-guttermarker-subtle { color: rgb(255 255 255 / 70%); }
-.dark .cm-s-xq .CodeMirror-linenumber { color: rgb(255 255 255 / 50%); }
-.dark .cm-s-xq .CodeMirror-cursor { border-left: 1px solid white; }
-
-.dark .cm-s-xq span.cm-keyword { color: #FFBD40; }
-.dark .cm-s-xq span.cm-atom { color: #c099ff; }
-.dark .cm-s-xq span.cm-number { color: #9ccfd8; }
-.dark .cm-s-xq span.cm-def { color: #FFF; text-decoration:underline; }
-.dark .cm-s-xq span.cm-variable { color: #FFF; }
-.dark .cm-s-xq span.cm-variable-2 { color: #EEE; }
-.dark .cm-s-xq span.cm-variable-3, .dark .cm-s-xq span.cm-type { color: #DDD; }
-.dark .cm-s-xq span.cm-property { color: #f6c177; }
-.dark .cm-s-xq span.cm-operator {}
-.dark .cm-s-xq span.cm-comment { color: gray; }
-.dark .cm-s-xq span.cm-string {}
-.dark .cm-s-xq span.cm-meta { color: yellow; }
-.dark .cm-s-xq span.cm-qualifier { color: #FFF700; }
-.dark .cm-s-xq span.cm-builtin { color: #30a; }
-.dark .cm-s-xq span.cm-bracket { color: #cc7; }
-.dark .cm-s-xq span.cm-tag { color: #FFBD40; }
-.dark .cm-s-xq span.cm-attribute { color: #FFF700; }
-.dark .cm-s-xq span.cm-error { color: #e04141; }
-
-.dark .cm-s-xq .CodeMirror-activeline-background { background: #27282E; }
-.dark .cm-s-xq .CodeMirror-matchingbracket { outline:1px solid grey; color:white !important; }
-
-.Line-Hover{transition: all .2s;}
-.Line-Hover:hover{ background-color: rgba(0, 102, 85, 0.05) !important; }  
-.dark .Line-Hover:hover{ background-color: var(--dark-color-codemirror-line-hover) !important; }
-
-.CodeMirror-foldmarker { color: #fc8800; text-shadow: #ffd8aa 1px 1px 2px, #ffd8aa -1px -1px 2px, #ffd8aa 1px -1px 2px, #ffd8aa -1px 1px 2px; font-family: arial; line-height: .3; cursor: pointer; }
-.dark .CodeMirror-foldmarker { color: #ffffff; text-shadow: #bbb 1px 1px 2px, #bbb -1px -1px 2px, #bbb 1px -1px 2px, #bbb -1px 1px 2px; font-family: arial; line-height: .3; cursor: pointer; }

web/assets/codemirror/xq.min.css

@@ -0,0 +1 @@
+.CodeMirror{background-color:#f6fbfa;border:1px solid #d9d9d9}.cm-s-xq.CodeMirror{border-radius:1.5rem;height:auto;transition:background-color .3s,border-color 0.3s}.cm-s-xq.CodeMirror:hover{background-color:#e8f4f2;border-color:#18947b}.cm-s-xq div.CodeMirror-selected{background:rgb(0 102 85 / .1)}.cm-s-xq .CodeMirror-line::selection,.cm-s-xq .CodeMirror-line>span::selection,.cm-s-xq .CodeMirror-line>span>span::selection{background:rgb(0 102 85 / .1)}.cm-s-xq .CodeMirror-line::-moz-selection,.cm-s-xq .CodeMirror-line>span::-moz-selection,.cm-s-xq .CodeMirror-line>span>span::-moz-selection{background:rgb(0 102 85 / .1)}.cm-s-xq .CodeMirror-gutters{border-right:1px solid #ddd;background-color:rgb(221 221 221 / 20%);white-space:nowrap}.cm-s-xq span.cm-keyword{line-height:1em;font-weight:700;color:#5A5CAD}.cm-s-xq span.cm-atom{color:#7A316F;font-weight:700}.cm-s-xq span.cm-number{color:#e36209}.cm-s-xq span.cm-def{text-decoration:underline}.cm-s-xq span.cm-variable{color:#000}.cm-s-xq span.cm-variable-2{color:#000}.cm-s-xq span.cm-variable-3,.cm-s-xq span.cm-type{color:#000}.cm-s-xq span.cm-property{color:#008771}.cm-s-xq span.cm-comment{color:#bbb;font-style:italic}.cm-s-xq span.cm-meta{color:#ff0}.cm-s-xq span.cm-qualifier{color:grey}.cm-s-xq span.cm-builtin{color:#7EA656}.cm-s-xq span.cm-bracket{color:#cc7}.cm-s-xq span.cm-tag{color:#3F7F7F}.cm-s-xq span.cm-attribute{color:#7F007F}.cm-s-xq span.cm-error{color:#e04141}.cm-s-xq .CodeMirror-activeline-background{background:#e8f2ff}.cm-s-xq .CodeMirror-matchingbracket{outline:1px solid grey;color:black!important;background:#ff0}.dark .CodeMirror{background-color:var(--dark-color-surface-200);border-color:var(--dark-color-surface-300)}.dark .cm-s-xq.CodeMirror{background-color:var(--dark-color-surface-200);border-color:var(--dark-color-surface-300);color:rgb(255 255 255 / 65%)}.dark .cm-s-xq.CodeMirror:hover{background-color:rgb(0 50 42 / 30%);border-color:#008771}.dark .cm-s-xq div.CodeMirror-selected{background:var(--dark-color-codemirror-line-selection)}.dark .cm-s-xq .CodeMirror-line::selection,.dark .cm-s-xq .CodeMirror-line>span::selection,.dark .cm-s-xq .CodeMirror-line>span>span::selection{background:var(--dark-color-codemirror-line-selection)}.dark .cm-s-xq .CodeMirror-line::-moz-selection,.dark .cm-s-xq .CodeMirror-line>span::-moz-selection,.dark .cm-s-xq .CodeMirror-line>span>span::-moz-selection{background:var(--dark-color-codemirror-line-selection)}.dark .cm-s-xq .CodeMirror-gutters{background:rgb(0 0 0 / 30%);border-right:1px solid var(--dark-color-surface-300)}.dark .cm-s-xq .CodeMirror-guttermarker{color:#FFBD40}.dark .cm-s-xq .CodeMirror-guttermarker-subtle{color:rgb(255 255 255 / 70%)}.dark .cm-s-xq .CodeMirror-linenumber{color:rgb(255 255 255 / 50%)}.dark .cm-s-xq .CodeMirror-cursor{border-left:1px solid #fff}.dark .cm-s-xq span.cm-keyword{color:#FFBD40}.dark .cm-s-xq span.cm-atom{color:#c099ff}.dark .cm-s-xq span.cm-number{color:#9ccfd8}.dark .cm-s-xq span.cm-def{color:#FFF;text-decoration:underline}.dark .cm-s-xq span.cm-variable{color:#FFF}.dark .cm-s-xq span.cm-variable-2{color:#EEE}.dark .cm-s-xq span.cm-variable-3,.dark .cm-s-xq span.cm-type{color:#DDD}.dark .cm-s-xq span.cm-property{color:#f6c177}.dark .cm-s-xq span.cm-comment{color:gray}.dark .cm-s-xq span.cm-meta{color:#ff0}.dark .cm-s-xq span.cm-qualifier{color:#FFF700}.dark .cm-s-xq span.cm-builtin{color:#30a}.dark .cm-s-xq span.cm-bracket{color:#cc7}.dark .cm-s-xq span.cm-tag{color:#FFBD40}.dark .cm-s-xq span.cm-attribute{color:#FFF700}.dark .cm-s-xq span.cm-error{color:#e04141}.dark .cm-s-xq .CodeMirror-activeline-background{background:#27282E}.dark .cm-s-xq .CodeMirror-matchingbracket{outline:1px solid grey;color:white!important}.Line-Hover{transition:all .2s}.CodeMirror pre.CodeMirror-line:hover,.CodeMirror pre.CodeMirror-line-like:hover{background-color:rgb(0 102 85 / .05)}.dark .CodeMirror pre.CodeMirror-line:hover,.CodeMirror pre.CodeMirror-line-like:hover{background-color:var(--dark-color-codemirror-line-hover)}.CodeMirror-foldmarker{color:#fc8800;text-shadow:#ffd8aa 1px 1px 2px,#ffd8aa -1px -1px 2px,#ffd8aa 1px -1px 2px,#ffd8aa -1px 1px 2px;font-family:arial;line-height:.3;cursor:pointer}.dark .CodeMirror-foldmarker{color:#fff;text-shadow:#bbb 1px 1px 2px,#bbb -1px -1px 2px,#bbb 1px -1px 2px,#bbb -1px 1px 2px;font-family:arial;line-height:.3;cursor:pointer}

web/assets/js/model/outbound.js

@@ -690,12 +690,12 @@ class Outbound extends CommonClass {
                 url.searchParams.get('quicSecurity') ?? 'none',
                 url.searchParams.get('key') ?? '',
                 headerType ?? 'none');
-            } else if (type === 'grpc') {
+        } else if (type === 'grpc') {
-                stream.grpc = new GrpcStreamSettings(
+            stream.grpc = new GrpcStreamSettings(
-                    url.searchParams.get('serviceName') ?? '',
+                url.searchParams.get('serviceName') ?? '',
-                    url.searchParams.get('authority') ?? '',
+                url.searchParams.get('authority') ?? '',
-                    url.searchParams.get('mode') == 'multi');
+                url.searchParams.get('mode') == 'multi');
-            } else if (type === 'httpupgrade') {
+        } else if (type === 'httpupgrade') {
             stream.httpupgrade = new HttpUpgradeStreamSettings(path,host);
         }
 

web/html/common/head.html

@@ -1,32 +1,32 @@
 {{define "head"}}
 <head>
-    <meta charset="UTF-8">
+  <meta charset="UTF-8">
-    <meta name="renderer" content="webkit">
+  <meta name="renderer" content="webkit">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="{{ .base_path }}assets/ant-design-vue@1.7.8/antd.min.css">
+  <link rel="stylesheet" href="{{ .base_path }}assets/ant-design-vue@1.7.8/antd.min.css">
-    <link rel="stylesheet" href="{{ .base_path }}assets/element-ui@2.15.0/theme-chalk/display.css">
+  <link rel="stylesheet" href="{{ .base_path }}assets/element-ui@2.15.0/theme-chalk/display.css">
-    <link rel="stylesheet" href="{{ .base_path }}assets/css/custom.css?{{ .cur_ver }}">
+  <link rel="stylesheet" href="{{ .base_path }}assets/css/custom.min.css?{{ .cur_ver }}">
-    <style>
+  <style>
-        [v-cloak] {
+    [v-cloak] {
-            display: none;
+      display: none;
-        }
+    }
-        /* vazirmatn-regular - arabic_latin_latin-ext */
+    /* vazirmatn-regular - arabic_latin_latin-ext */
-        @font-face {
+    @font-face {
-            font-display: swap;
+      font-display: swap;
-            font-family: 'Vazirmatn';
+      font-family: 'Vazirmatn';
-            font-style: normal;
+      font-style: normal;
-            font-weight: 400;
+      font-weight: 400;
-            src: url('{{ .base_path }}assets/Vazirmatn-UI-NL-Regular.woff2') format('woff2');
+      src: url('{{ .base_path }}assets/Vazirmatn-UI-NL-Regular.woff2') format('woff2');
-            unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0030-0039;
+      unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0030-0039;
-        }
+    }
-        body {
+    body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Vazirmatn', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
+      font-family: -apple-system, BlinkMacSystemFont, 'Vazirmatn', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
-                         'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+        'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
-                         'Segoe UI Emoji', 'Segoe UI Symbol';
+        'Segoe UI Emoji', 'Segoe UI Symbol';
-        }
+    }
-    </style>
+  </style>
-    <title>{{ .host }}-{{ i18n .title}}</title>
+  <title>{{ .host }}-{{ i18n .title}}</title>
 </head>
 <div id="message"></div>
 {{end}}

web/html/common/qrcode_modal.html

@@ -1,110 +1,165 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
-    :dialog-style="{ top: '20px' }"
+    :dialog-style="isMobileQr ? { top: '18px' } : {}"
     :closable="true"
     :class="themeSwitcher.currentTheme"
-    :footer="null" width="300px">
+    :footer="null" width="fit-content">
-  <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
+  <tr-qr-modal class="qr-modal">
-    {{ i18n "pages.inbounds.clickOnQRcode" }}
+    <template v-if="app.subSettings.enable && qrModal.subId">
-  </a-tag>
+      <tr-qr-box class="qr-box">
-  <template v-if="app.subSettings.enable && qrModal.subId">
+        <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}}</span></a-tag>
-    <a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider>
+        <tr-qr-bg class="qr-bg-sub">
-    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas></div>
+          <tr-qr-bg-inner class="qr-bg-sub-inner">
-    <a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider>
+            <canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
-    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas></div>
+          </tr-qr-bg-inner>
-  </template>
+        </tr-qr-bg>
-  <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
+      </tr-qr-box>
-  <template v-for="(row, index) in qrModal.qrcodes">
+      <tr-qr-box class="qr-box">
-    <a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
+        <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}} Json</span></a-tag>
-    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas></div>
+        <tr-qr-bg class="qr-bg-sub">
-  </template>
+          <tr-qr-bg-inner class="qr-bg-sub-inner">
+            <canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
+          </tr-qr-bg-inner>
+        </tr-qr-bg>
+      </tr-qr-box>
+    </template>
+    <template v-for="(row, index) in qrModal.qrcodes">
+      <tr-qr-box class="qr-box">
+        <a-tag color="green" class="qr-tag"><span>[[ row.remark ]]</span></a-tag>
+        <tr-qr-bg class="qr-bg">
+          <canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
+        </tr-qr-bg>
+      </tr-qr-box>
+    </template>
+  </tr-qr-modal>
 </a-modal>
 
 <script>
+  const isMobileQr = window.innerWidth <= 768;
+  const qrModal = {
+    title: '',
+    dbInbound: new DBInbound(),
+    client: null,
+    qrcodes: [],
+    clipboard: null,
+    visible: false,
+    subId: '',
+    show: function(title = '', dbInbound, client) {
+      this.title = title;
+      this.dbInbound = dbInbound;
+      this.inbound = dbInbound.toInbound();
+      this.client = client;
+      this.subId = '';
+      this.qrcodes = [];
+      if (this.inbound.protocol == Protocols.WIREGUARD) {
+        this.inbound.genInboundLinks(dbInbound.remark).split('\r\n').forEach((l, index) => {
+          this.qrcodes.push({
+            remark: "Peer " + (index + 1),
+            link: l
+          });
+        });
+      } else {
+        this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, client).forEach(l => {
+          this.qrcodes.push({
+            remark: l.remark,
+            link: l.link
+          });
+        });
+      }
+      this.visible = true;
+    },
+    close: function() {
+      this.visible = false;
+    },
+  };
+  const qrModalApp = new Vue({
+    delimiters: ['[[', ']]'],
+    el: '#qrcode-modal',
+    data: {
+      qrModal: qrModal,
+    },
+    methods: {
+      copyToClipboard(elmentId, content) {
+        this.qrModal.clipboard = new ClipboardJS('#' + elmentId, {
+          text: () => content,
+        });
+        this.qrModal.clipboard.on('success', () => {
+          app.$message.success('{{ i18n "copied" }}')
+          this.qrModal.clipboard.destroy();
+        });
+      },
+      setQrCode(elmentId, content) {
+        new QRious({
+          element: document.querySelector('#' + elmentId),
+          size: 400,
+          value: content,
+          background: 'white',
+          backgroundAlpha: 0,
+          foreground: 'black',
+          padding: 2,
+          level: 'L'
+        });
+      },
+      genSubLink(subID) {
+        return app.subSettings.subURI + subID;
+      },
+      genSubJsonLink(subID) {
+        return app.subSettings.subJsonURI + subID;
+      },
+      revertOverflow() {
+        const elements = document.querySelectorAll(".qr-tag");
+        elements.forEach((element) => {
+          element.classList.remove("tr-marquee");
+          element.children[0].style.animation = '';
+          while (element.children.length > 1) {
+            element.removeChild(element.lastChild);
+          }
+        });
+      }
+    },
+    updated() {
+      if (this.qrModal.visible) {
+        fixOverflow();
+      } else {
+        this.revertOverflow();
+      }
+      if (qrModal.client && qrModal.client.subId) {
+        qrModal.subId = qrModal.client.subId;
+        this.setQrCode("qrCode-sub", this.genSubLink(qrModal.subId));
+        this.setQrCode("qrCode-subJson", this.genSubJsonLink(qrModal.subId));
+      }
+      qrModal.qrcodes.forEach((element, index) => {
+        this.setQrCode("qrCode-" + index, element.link);
+      });
+    }
+  });
 
-    const qrModal = {
+  function fixOverflow() {
-        title: '',
+    const elements = document.querySelectorAll(".qr-tag");
-        dbInbound: new DBInbound(),
+    elements.forEach((element) => {
-        client: null,
+      function isElementOverflowing(element) {
-        qrcodes: [],
+        const overflowX = element.offsetWidth < element.scrollWidth,
-        clipboard: null,
+          overflowY = element.offsetHeight < element.scrollHeight;
-        visible: false,
+        return overflowX || overflowY;
-        subId: '',
+      }
-        show: function (title = '', dbInbound, client) {
-            this.title = title;
-            this.dbInbound = dbInbound;
-            this.inbound = dbInbound.toInbound();
-            this.client = client;
-            this.subId = '';
-            this.qrcodes = [];
-            if (this.inbound.protocol == Protocols.WIREGUARD){
-                this.inbound.genInboundLinks(dbInbound.remark).split('\r\n').forEach((l,index) =>{
-                    this.qrcodes.push({
-                        remark: "Peer " + (index+1),
-                        link: l
-                    });
-                });
-            } else {
-                this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, client).forEach(l => {
-                    this.qrcodes.push({
-                        remark: l.remark,
-                        link: l.link
-                    });
-                });
-            }
-            this.visible = true;
-        },
-        close: function () {
-            this.visible = false;
-        },
-    };
 
-    const qrModalApp = new Vue({
+      function wrapContentsInMarquee(element) {
-        delimiters: ['[[', ']]'],
+        element.classList.add("tr-marquee");
-        el: '#qrcode-modal',
+        element.children[0].style.animation = `move-ltr ${
-        data: {
+            (element.children[0].clientWidth / element.clientWidth) * 5
-            qrModal: qrModal,
+          }s ease-in-out infinite`;
-        },
+        const marqueeText = element.children[0];
-        methods: {
+        if (element.children.length < 2) {
-            copyToClipboard(elmentId, content) {
+          for (let i = 0; i < 1; i++) {
-                this.qrModal.clipboard = new ClipboardJS('#' + elmentId, {
+            const marqueeText = element.children[0].cloneNode(true);
-                    text: () => content,
+            element.children[0].after(marqueeText);
-                });
+          }
-                this.qrModal.clipboard.on('success', () => {
-                    app.$message.success('{{ i18n "copied" }}')
-                    this.qrModal.clipboard.destroy();
-                });
-            },
-            setQrCode(elmentId, content) {
-                new QRious({
-                    element: document.querySelector('#' + elmentId),
-                    size: 400,
-                    value: content,
-                    background: 'white',
-                    backgroundAlpha: 0,
-                    foreground: 'black',
-                    padding: 2,
-                    level: 'L'
-                });
-            },
-            genSubLink(subID) {
-                return app.subSettings.subURI+subID;
-            },
-            genSubJsonLink(subID) {
-                return app.subSettings.subJsonURI+subID;
-            }
-        },
-        updated() {
-            if (qrModal.client && qrModal.client.subId) {
-                qrModal.subId = qrModal.client.subId;
-                this.setQrCode("qrCode-sub", this.genSubLink(qrModal.subId));
-                this.setQrCode("qrCode-subJson", this.genSubJsonLink(qrModal.subId));
-            }
-            qrModal.qrcodes.forEach((element, index) => {
-                this.setQrCode("qrCode-" + index, element.link);
-            });
         }
+      }
+      if (isElementOverflowing(element)) {
+        wrapContentsInMarquee(element);
+      }
     });
-
+  }
 </script>
 {{end}}

web/html/login.html

@@ -400,7 +400,7 @@
             </g>
           </svg>
         </div>
-        <a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;">
+        <a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto; overflow-x: hidden;">
           <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;">
             <a-row type="flex" justify="center">
               <a-col style="width: 100%;">
@@ -461,7 +461,7 @@
                   </a-form-item>
                   <a-form-item>
                     <a-row justify="center" class="centered">
-                      <theme-switch></theme-switch>
+                      <theme-switch-login></theme-switch-login>
                     </a-row>
                   </a-form-item>
                 </a-form>
@@ -476,83 +476,82 @@
 {{template "component/themeSwitcher" .}}
 {{template "component/password" .}}
 <script>
-    class User {
+  class User {
-        constructor() {
+    constructor() {
-            this.username = "";
+      this.username = "";
-            this.password = "";
+      this.password = "";
+    }
+  }
+  const app = new Vue({
+    delimiters: ['[[', ']]'],
+    el: '#app',
+    data: {
+      themeSwitcher,
+      loading: false,
+      user: new User(),
+      secretEnable: false,
+      lang: ""
+    },
+    async created() {
+      this.lang = getLang();
+      this.secretEnable = await this.getSecretStatus();
+    },
+    methods: {
+      async login() {
+        this.loading = true;
+        const msg = await HttpUtil.post('/login', this.user);
+        this.loading = false;
+        if (msg.success) {
+          location.href = basePath + 'panel/';
         }
+      },
+      async getSecretStatus() {
+        this.loading = true;
+        const msg = await HttpUtil.post('/getSecretStatus');
+        this.loading = false;
+        if (msg.success) {
+          this.secretEnable = msg.obj;
+          return msg.obj;
+        }
+      },
+    },
+  });
+  document.addEventListener("DOMContentLoaded", function() {
+    var animationDelay = 2000;
+    initHeadline();
+
+    function initHeadline() {
+      animateHeadline(document.querySelectorAll('.headline'));
     }
 
-    const app = new Vue({
+    function animateHeadline(headlines) {
-        delimiters: ['[[', ']]'],
+      var duration = animationDelay;
-        el: '#app',
+      headlines.forEach(function(headline) {
-        data: {
+        setTimeout(function() {
-            themeSwitcher,
+          hideWord(headline.querySelector('.is-visible'));
-            loading: false,
+        }, duration);
-            user: new User(),
+      });
-            secretEnable: false,
+    }
-            lang: ""
-        },
-        async created() {
-            this.lang = getLang();
-            this.secretEnable = await this.getSecretStatus();
-        },
-        methods: {
-            async login() {
-                this.loading = true;
-                const msg = await HttpUtil.post('/login', this.user);
-                this.loading = false;
-                if (msg.success) {
-                    location.href = basePath + 'panel/';
-                }
-            },
-            async getSecretStatus() {
-                this.loading = true;
-                const msg = await HttpUtil.post('/getSecretStatus');
-                this.loading = false;
-                if (msg.success) {
-                    this.secretEnable = msg.obj;
-                    return msg.obj;
-                }
-            },
-        },
-    });
-    document.addEventListener("DOMContentLoaded", function() {
-        var animationDelay = 2000;
-        initHeadline();
 
-        function initHeadline() {
+    function hideWord(word) {
-            animateHeadline(document.querySelectorAll('.headline'));
+      var nextWord = takeNext(word);
-        }
+      switchWord(word, nextWord);
+      setTimeout(function() {
+        hideWord(nextWord);
+      }, animationDelay);
+    }
 
-        function animateHeadline(headlines) {
+    function takeNext(word) {
-            var duration = animationDelay;
+      return (word.nextElementSibling) ? word.nextElementSibling : word.parentElement.firstElementChild;
-            headlines.forEach(function(headline) {
+    }
-                setTimeout(function() {
-                    hideWord(headline.querySelector('.is-visible'));
-                }, duration);
-            });
-        }
 
-        function hideWord(word) {
+    function switchWord(oldWord, newWord) {
-            var nextWord = takeNext(word);
+      oldWord.classList.remove('is-visible');
-            switchWord(word, nextWord);
+      oldWord.classList.add('is-hidden');
-            setTimeout(function() {
+      newWord.classList.remove('is-hidden');
-                hideWord(nextWord);
+      newWord.classList.add('is-visible');
-            }, animationDelay);
+    }
-        }
+  });
-
-        function takeNext(word) {
-            return (word.nextElementSibling) ? word.nextElementSibling : word.parentElement.firstElementChild;
-        }
-
-        function switchWord(oldWord, newWord) {
-            oldWord.classList.remove('is-visible');
-            oldWord.classList.add('is-hidden');
-            newWord.classList.remove('is-hidden');
-            newWord.classList.add('is-visible');
-        }
-    });
 </script>
 </body>
 </html>

web/html/xui/common_sider.html

@@ -1,61 +1,65 @@
 {{define "menuItems"}}
 <a-menu-item key="{{ .base_path }}panel/">
-    <a-icon type="dashboard"></a-icon>
+  <a-icon type="dashboard"></a-icon>
-    <span><b>{{ i18n "menu.dashboard"}}</b></span>
+  <span>
+    <b>{{ i18n "menu.dashboard"}}</b>
+  </span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/inbounds">
-    <a-icon type="user"></a-icon>
+  <a-icon type="user"></a-icon>
-    <span><b>{{ i18n "menu.inbounds"}}</b></span>
+  <span>
+    <b>{{ i18n "menu.inbounds"}}</b>
+  </span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/settings">
-    <a-icon type="setting"></a-icon>
+  <a-icon type="setting"></a-icon>
-    <span><b>{{ i18n "menu.settings"}}</b></span>
+  <span>
+    <b>{{ i18n "menu.settings"}}</b>
+  </span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/xray">
-    <a-icon type="tool"></a-icon>
+  <a-icon type="tool"></a-icon>
-    <span><b>{{ i18n "menu.xray"}}</b></span>
+  <span>
+    <b>{{ i18n "menu.xray"}}</b>
+  </span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}logout">
-    <a-icon type="logout"></a-icon>
+  <a-icon type="logout"></a-icon>
-    <span><b>{{ i18n "menu.logout"}}</b></span>
+  <span>
+    <b>{{ i18n "menu.logout"}}</b>
+  </span>
 </a-menu-item>
 {{end}}
 
 
 {{define "commonSider"}}
-<a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md" collapsed-width="0">
+<a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md">
-    <theme-switch></theme-switch>
+  <theme-switch></theme-switch>
-    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
+  <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']" @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
-            @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
+    {{template "menuItems" .}}
-        {{template "menuItems" .}}
+  </a-menu>
-    </a-menu>
 </a-layout-sider>
-<a-drawer id="sider-drawer" placement="left" :closable="false"
+<a-drawer id="sider-drawer" placement="left" :closable="false" @close="siderDrawer.close()" :visible="siderDrawer.visible" :wrap-class-name="themeSwitcher.currentTheme" :wrap-style="{ padding: 0 }">
-          @close="siderDrawer.close()"
+  <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
-          :visible="siderDrawer.visible"
+    <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
-          :wrap-class-name="themeSwitcher.currentTheme"
+  </div>
-          :wrap-style="{ padding: 0 }">
+  <theme-switch></theme-switch>
-    <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
+  <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']" @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
-        <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
+    {{template "menuItems" .}}
-    </div>
+  </a-menu>
-    <theme-switch></theme-switch>
-    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
-        @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
-        {{template "menuItems" .}}
-    </a-menu>
 </a-drawer>
 <script>
-    const siderDrawer = {
+  const siderDrawer = {
-        visible: false,
+    visible: false,
-        show() {
+    show() {
-            this.visible = true;
+      this.visible = true;
-        },
+    },
-        close() {
+    close() {
-            this.visible = false;
+      this.visible = false;
-        },
+    },
-        change() {
+    change() {
-            this.visible = !this.visible;
+      this.visible = !this.visible;
-        },
+    },
-    };
+  };
 </script>
 {{end}}

web/html/xui/component/sortableTable.html

@@ -1,236 +1,216 @@
 {{define "component/sortableTableTrigger"}}
-    <a-icon type="drag"
+<a-icon type="drag"
-        class="sortable-icon"
+  class="sortable-icon"
-        style="cursor: move;"
+  style="cursor: move;"
-        @mouseup="mouseUpHandler"
+  @mouseup="mouseUpHandler"
-        @mousedown="mouseDownHandler"
+  @mousedown="mouseDownHandler"
-        @click="clickHandler" />
+  @click="clickHandler" />
 {{end}}
 
 {{define "component/sortableTable"}}
 <script>
-    const DRAGGABLE_ROW_CLASS = 'draggable-row';
+  const DRAGGABLE_ROW_CLASS = 'draggable-row';
-
+  const findParentRowElement = (el) => {
-    const findParentRowElement = (el) => {
+    if (!el || !el.tagName) {
-        if (!el || !el.tagName) {
+      return null;
-            return null;
+    } else if (el.classList.contains(DRAGGABLE_ROW_CLASS)) {
-        } else if (el.classList.contains(DRAGGABLE_ROW_CLASS)) {
+      return el;
-            return el;
+    } else if (el.parentNode) {
-        } else if (el.parentNode) {
+      return findParentRowElement(el.parentNode);
-            return findParentRowElement(el.parentNode);
+    } else {
+      return null;
+    }
+  }
+  Vue.component('a-table-sortable', {
+    data() {
+      return {
+        sortingElementIndex: null,
+        newElementIndex: null,
+      };
+    },
+    props: ['data-source', 'customRow'],
+    inheritAttrs: false,
+    provide() {
+      const sortable = {}
+      Object.defineProperty(sortable, "setSortableIndex", {
+        enumerable: true,
+        get: () => this.setCurrentSortableIndex,
+      });
+      Object.defineProperty(sortable, "resetSortableIndex", {
+        enumerable: true,
+        get: () => this.resetSortableIndex,
+      });
+      return {
+        sortable,
+      }
+    },
+    render: function(createElement) {
+      return createElement('a-table', {
+        class: {
+          'ant-table-is-sorting': this.isDragging(),
+        },
+        props: {
+          ...this.$attrs,
+          'data-source': this.records,
+          customRow: (record, index) => this.customRowRender(record, index),
+        },
+        on: this.$listeners,
+        nativeOn: {
+          drop: (e) => this.dropHandler(e),
+        },
+        scopedSlots: this.$scopedSlots,
+      }, this.$slots.default, )
+    },
+    created() {
+      this.$memoSort = {};
+    },
+    methods: {
+      isDragging() {
+        const currentIndex = this.sortingElementIndex;
+        return currentIndex !== null && currentIndex !== undefined;
+      },
+      resetSortableIndex(e, index) {
+        this.sortingElementIndex = null;
+        this.newElementIndex = null;
+        this.$memoSort = {};
+      },
+      setCurrentSortableIndex(e, index) {
+        this.sortingElementIndex = index;
+      },
+      dragStartHandler(e, index) {
+        if (!this.isDragging()) {
+          e.preventDefault();
+          return;
+        }
+        const hideDragImage = this.$el.cloneNode(true);
+        hideDragImage.id = "hideDragImage-hide";
+        hideDragImage.style.opacity = 0;
+        e.dataTransfer.setDragImage(hideDragImage, 0, 0);
+      },
+      dragStopHandler(e, index) {
+        const hideDragImage = document.getElementById('hideDragImage-hide');
+        if (hideDragImage) hideDragImage.remove();
+        this.resetSortableIndex(e, index);
+      },
+      dragOverHandler(e, index) {
+        if (!this.isDragging()) {
+          return;
+        }
+        e.preventDefault();
+        const currentIndex = this.sortingElementIndex;
+        if (index === currentIndex) {
+          this.newElementIndex = null;
+          return;
+        }
+        const row = findParentRowElement(e.target);
+        if (!row) {
+          return;
+        }
+        const rect = row.getBoundingClientRect();
+        const offsetTop = e.pageY - rect.top;
+        if (offsetTop < rect.height / 2) {
+          this.newElementIndex = Math.max(index - 1, 0);
         } else {
-            return null;
+          this.newElementIndex = index;
         }
+      },
+      dropHandler(e) {
+        if (this.isDragging()) {
+          this.$emit('onsort', this.sortingElementIndex, this.newElementIndex);
+        }
+      },
+      customRowRender(record, index) {
+        const parentMethodResult = this.customRow?.(record, index) || {};
+        const newIndex = this.newElementIndex;
+        const currentIndex = this.sortingElementIndex;
+        return {
+          ...parentMethodResult,
+          attrs: {
+            ...(parentMethodResult?.attrs || {}),
+            draggable: true,
+          },
+          on: {
+            ...(parentMethodResult?.on || {}),
+            dragstart: (e) => this.dragStartHandler(e, index),
+            dragend: (e) => this.dragStopHandler(e, index),
+            dragover: (e) => this.dragOverHandler(e, index),
+          },
+          class: {
+            ...(parentMethodResult?.class || {}),
+            [DRAGGABLE_ROW_CLASS]: true,
+            ['dragging']: this.isDragging() ? (newIndex === null ? index === currentIndex : index === newIndex) : false,
+          },
+        };
+      }
+    },
+    computed: {
+      records() {
+        const newIndex = this.newElementIndex;
+        const currentIndex = this.sortingElementIndex;
+        if (!this.isDragging() || newIndex === null || currentIndex === newIndex) {
+          return this.dataSource;
+        }
+        if (this.$memoSort.newIndex === newIndex) {
+          return this.$memoSort.list;
+        }
+        let list = [...this.dataSource];
+        list.splice(newIndex, 0, list.splice(currentIndex, 1)[0]);
+        this.$memoSort = {
+          newIndex,
+          list,
+        };
+        return list;
+      }
     }
-
+  });
-    Vue.component('a-table-sortable', {
+  Vue.component('table-sort-trigger', {
-        data() {
+    template: `{{template "component/sortableTableTrigger"}}`,
-            return {
+    props: ['item-index'],
-                sortingElementIndex: null,
+    inject: ['sortable'],
-                newElementIndex: null,
+    methods: {
-            };
+      mouseDownHandler(e) {
-        },
+        if (this.sortable) {
-        props: ['data-source', 'customRow'],
+          this.sortable.setSortableIndex(e, this.itemIndex);
-        inheritAttrs: false,
-        provide() {
-            const sortable = {}
-
-            Object.defineProperty(sortable, "setSortableIndex", {
-                enumerable: true,
-                get: () => this.setCurrentSortableIndex,
-            });
-
-            Object.defineProperty(sortable, "resetSortableIndex", {
-                enumerable: true,
-                get: () => this.resetSortableIndex,
-            });
-
-            return {
-                sortable,
-            }
-        },
-        render: function (createElement) {
-            return createElement('a-table', {
-                class: {
-                    'ant-table-is-sorting': this.isDragging(),
-                },
-                props: {
-                    ...this.$attrs,
-                    'data-source': this.records,
-                    customRow: (record, index) => this.customRowRender(record, index),
-                },
-                on: this.$listeners,
-                nativeOn: {
-                    drop: (e) => this.dropHandler(e),
-                },
-                scopedSlots: this.$scopedSlots,
-            }, this.$slots.default, )
-        },
-        created() {
-            this.$memoSort = {};
-        },
-        methods: {
-            isDragging() {
-                const currentIndex = this.sortingElementIndex;
-                return currentIndex !== null && currentIndex !== undefined;
-            },
-            resetSortableIndex(e, index) {
-                this.sortingElementIndex = null;
-                this.newElementIndex = null;
-                this.$memoSort = {};
-            },
-            setCurrentSortableIndex(e, index) {
-                this.sortingElementIndex = index;
-            },
-            dragStartHandler(e, index) {
-                if (!this.isDragging()) {
-                    e.preventDefault();
-                    return;
-                }
-                const hideDragImage = this.$el.cloneNode(true);
-                hideDragImage.id = "hideDragImage-hide";
-                hideDragImage.style.opacity = 0;
-                e.dataTransfer.setDragImage(hideDragImage, 0, 0);
-            },
-            dragStopHandler(e, index) {
-                const hideDragImage = document.getElementById('hideDragImage-hide');
-                if (hideDragImage) hideDragImage.remove();
-                this.resetSortableIndex(e, index);
-            },
-            dragOverHandler(e, index) {
-                if (!this.isDragging()) {
-                    return;
-                }
-
-                e.preventDefault();
-
-                const currentIndex = this.sortingElementIndex;
-                if (index === currentIndex) {
-                    this.newElementIndex = null;
-                    return;
-                }
-
-                const row = findParentRowElement(e.target);
-                if (!row) {
-                    return;
-                }
-
-                const rect = row.getBoundingClientRect();
-                const offsetTop = e.pageY - rect.top;
-
-                if (offsetTop < rect.height / 2) {
-                    this.newElementIndex = Math.max(index - 1, 0);
-                } else {
-                    this.newElementIndex = index;
-                }
-            },
-            dropHandler(e) {
-                if (this.isDragging()) {
-                    this.$emit('onsort', this.sortingElementIndex, this.newElementIndex);
-                }
-            },
-            customRowRender(record, index) {
-                const parentMethodResult = this.customRow?.(record, index) || {};
-                const newIndex = this.newElementIndex;
-                const currentIndex = this.sortingElementIndex;
-
-                return {
-                    ...parentMethodResult,
-                    attrs: {
-                        ...(parentMethodResult?.attrs || {}),
-                        draggable: true,
-                    },
-                    on: {
-                        ...(parentMethodResult?.on || {}),
-                        dragstart: (e) => this.dragStartHandler(e, index),
-                        dragend: (e) => this.dragStopHandler(e, index),
-                        dragover: (e) => this.dragOverHandler(e, index),
-                    },
-                    class: {
-                        ...(parentMethodResult?.class || {}),
-                        [DRAGGABLE_ROW_CLASS]: true,
-                        ['dragging']: this.isDragging()
-                            ? (newIndex === null ? index === currentIndex : index === newIndex)
-                            : false,
-                    },
-                };
-            }
-        },
-        computed: {
-            records() {
-                const newIndex = this.newElementIndex;
-                const currentIndex = this.sortingElementIndex;
-
-                if (!this.isDragging() || newIndex === null || currentIndex === newIndex) {
-                    return this.dataSource;
-                }
-
-                if (this.$memoSort.newIndex === newIndex) {
-                    return this.$memoSort.list;
-                }
-
-                let list = [...this.dataSource];
-                list.splice(newIndex, 0, list.splice(currentIndex, 1)[0]);
-
-                this.$memoSort = {
-                    newIndex,
-                    list,
-                };
-
-                return list;
-            }
         }
-    });
+      },
-
+      mouseUpHandler(e) {
-    Vue.component('table-sort-trigger', {
+        if (this.sortable) {
-        template: `{{template "component/sortableTableTrigger"}}`,
+          this.sortable.resetSortableIndex(e, this.itemIndex);
-        props: ['item-index'],
-        inject: ['sortable'],
-        methods: {
-            mouseDownHandler(e) {
-                if (this.sortable) {
-                    this.sortable.setSortableIndex(e, this.itemIndex);
-                }
-            },
-            mouseUpHandler(e) {
-                if (this.sortable) {
-                    this.sortable.resetSortableIndex(e, this.itemIndex);
-                }
-            },
-            clickHandler(e) {
-                e.preventDefault();
-            },
         }
-    })
+      },
+      clickHandler(e) {
+        e.preventDefault();
+      },
+    }
+  })
 </script>
-
 <style>
-    @media only screen and (max-width: 767px) {
+  @media only screen and (max-width: 767px) {
-        .sortable-icon {
+    .sortable-icon {
-            display: none;
+      display: none;
-        }
-    }
-    .ant-table-is-sorting .draggable-row td {
-        background-color: #ffffff !important;
-    }
-    .dark .ant-table-is-sorting .draggable-row td {
-        background-color: var(--dark-color-surface-100) !important;
-    }
-    .ant-table-is-sorting .dragging td {
-        background-color: rgb(232 244 242) !important;
-        color: rgba(0, 0, 0, 0.3);
-    }
-    .dark .ant-table-is-sorting .dragging td {
-        background-color: var(--dark-color-table-hover) !important;
-        color: rgba(255, 255, 255, 0.3);
-    }
-    .ant-table-is-sorting .dragging {
-        opacity: 1;
-        box-shadow: 1px -2px 2px #008771;
-        transition: all 0.2s;
-    }
-    .ant-table-is-sorting .dragging .ant-table-row-index {
-        opacity: 0.3;
     }
+  }
+  .ant-table-is-sorting .draggable-row td {
+    background-color: #ffffff !important;
+  }
+  .dark .ant-table-is-sorting .draggable-row td {
+    background-color: var(--dark-color-surface-100) !important;
+  }
+  .ant-table-is-sorting .dragging td {
+    background-color: rgb(232 244 242) !important;
+    color: rgba(0, 0, 0, 0.3);
+  }
+  .dark .ant-table-is-sorting .dragging td {
+    background-color: var(--dark-color-table-hover) !important;
+    color: rgba(255, 255, 255, 0.3);
+  }
+  .ant-table-is-sorting .dragging {
+    opacity: 1;
+    box-shadow: 1px -2px 2px #008771;
+    transition: all 0.2s;
+  }
+  .ant-table-is-sorting .dragging .ant-table-row-index {
+    opacity: 0.3;
+  }
 </style>
 {{end}}

web/html/xui/component/themeSwitch.html

@@ -1,6 +1,23 @@
 {{define "component/themeSwitchTemplate"}}
 <template>
-  <a-menu class="change-theme" :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
+  <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
+    <a-sub-menu>
+      <span slot="title">
+        <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
+        <span>Theme</span>
+      </span>
+      <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()"> Dark <a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
+      </a-menu-item>
+      <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOffUltra()"> Ultra <a-checkbox style="margin-left: 2px;" :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
+      </a-menu-item>
+    </a-sub-menu>
+  </a-menu>
+</template>
+{{end}}
+
+{{define "component/themeSwitchTemplateLogin"}}
+<template>
+  <a-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
     <a-menu-item mode="inline" class="ant-menu-theme-switch">
       <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
       <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
@@ -23,6 +40,26 @@
     const theme = isDarkTheme ? 'dark' : 'light';
     document.querySelector('body').setAttribute('class', theme);
     return {
+      animationsOff() {
+        document.documentElement.setAttribute('data-theme-animations', 'off');
+        const themeAnimations = document.querySelector('#change-theme');
+        themeAnimations.addEventListener('mouseleave', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+        themeAnimations.addEventListener('touchend', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+      },
+      animationsOffUltra() {
+        document.documentElement.setAttribute('data-theme-animations', 'off');
+        const themeAnimationsUltra = document.querySelector('#change-theme-ultra');
+        themeAnimationsUltra.addEventListener('mouseleave', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+        themeAnimationsUltra.addEventListener('touchend', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+      },
       isDarkTheme,
       isUltra,
       get currentTheme() {
@@ -57,13 +94,19 @@
         getContainer: () => document.getElementById('message')
       });
       document.getElementById('message').className = themeSwitcher.currentTheme;
-      const themeAnimations = document.querySelector('.change-theme');
+    }
-      themeAnimations.addEventListener('mousedown', () => {
+  });
-        document.documentElement.setAttribute('data-theme-animations', 'off');
+  Vue.component('theme-switch-login', {
-      });
+    props: [],
-      themeAnimations.addEventListener('mouseleave', () => {
+    template: `{{template "component/themeSwitchTemplateLogin"}}`,
-        document.documentElement.removeAttribute('data-theme-animations');
+    data: () => ({
+      themeSwitcher
+    }),
+    mounted() {
+      this.$message.config({
+        getContainer: () => document.getElementById('message')
       });
+      document.getElementById('message').className = themeSwitcher.currentTheme;
     }
   });
 </script>

web/html/xui/dns_modal.html

@@ -1,90 +1,89 @@
 {{define "dnsModal"}}
-<a-modal id="dns-modal" v-model="dnsModal.visible" :title="dnsModal.title" @ok="dnsModal.ok"
+<a-modal id="dns-modal" v-model="dnsModal.visible" :title="dnsModal.title" @ok="dnsModal.ok" :closable="true" :mask-closable="false" :ok-text="dnsModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
-         :closable="true" :mask-closable="false"
+  <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-         :ok-text="dnsModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
+    <a-form-item label='{{ i18n "pages.xray.outbound.address" }}'>
-    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+      <a-input v-model.trim="dnsModal.dnsServer.address"></a-input>
-        <a-form-item label='{{ i18n "pages.xray.outbound.address" }}'>
+    </a-form-item>
-            <a-input v-model.trim="dnsModal.dnsServer.address"></a-input>
+    <a-form-item label='{{ i18n "pages.xray.dns.domains" }}'>
-        </a-form-item>
+      <a-button icon="plus" size="small" type="primary" @click="dnsModal.dnsServer.domains.push('')"></a-button>
-        <a-form-item label='{{ i18n "pages.xray.dns.domains" }}'>
+      <template v-for="(domain, index) in dnsModal.dnsServer.domains">
-          <a-button size="small" type="primary" @click="dnsModal.dnsServer.domains.push('')">+</a-button>
+        <a-input v-model.trim="dnsModal.dnsServer.domains[index]">
-            <template v-for="(domain, index) in dnsModal.dnsServer.domains">
+          <a-button icon="minus" size="small" slot="addonAfter" @click="dnsModal.dnsServer.domains.splice(index,1)"></a-button>
-              <a-input v-model.trim="dnsModal.dnsServer.domains[index]">
+        </a-input>
-                  <a-button size="small" slot="addonAfter" @click="dnsModal.dnsServer.domains.splice(index,1)">-</a-button>
+      </template>
-              </a-input>
+    </a-form-item>
-          </template>
+    <a-form-item label='{{ i18n "pages.xray.dns.strategy" }}' v-if="isAdvanced">
-        </a-form-item>
+      <a-select v-model="dnsModal.dnsServer.queryStrategy" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-form-item label='{{ i18n "pages.xray.dns.strategy" }}' v-if="isAdvanced">
+        <a-select-option :value="l" :label="l" v-for="l in ['UseIP', 'UseIPv4', 'UseIPv6']"> [[ l ]] </a-select-option>
-          <a-select
+      </a-select>
-            v-model="dnsModal.dnsServer.queryStrategy"
+    </a-form-item>
-            style="width: 100%"
+  </a-form>
-            :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option :value="l" :label="l" v-for="l in ['UseIP', 'UseIPv4', 'UseIPv6']">
-                [[ l ]]
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-    </a-form>
 </a-modal>
 <script>
-    const dnsModal = {
+  const dnsModal = {
-        title: '',
+    title: '',
-        visible: false,
+    visible: false,
-        okText: '{{ i18n "confirm" }}',
+    okText: '{{ i18n "confirm" }}',
-        isEdit: false,
+    isEdit: false,
-        confirm: null,
+    confirm: null,
-        dnsServer: {
+    dnsServer: {
+      address: "localhost",
+      domains: [],
+      queryStrategy: 'UseIP',
+    },
+    ok() {
+      domains = dnsModal.dnsServer.domains.filter(d => d.length > 0);
+      dnsModal.dnsServer.domains = domains;
+      newDnsServer = domains.length > 0 ? dnsModal.dnsServer : dnsModal.dnsServer.address;
+      ObjectUtil.execute(dnsModal.confirm, newDnsServer);
+    },
+    show({
+      title = '',
+      okText = '{{ i18n "confirm" }}',
+      dnsServer,
+      confirm = (dnsServer) => {},
+      isEdit = false
+    }) {
+      this.title = title;
+      this.okText = okText;
+      this.confirm = confirm;
+      this.visible = true;
+      if (isEdit) {
+        if (typeof dnsServer == 'object') {
+          this.dnsServer = dnsServer;
+        } else {
+          this.dnsServer = {
+            address: dnsServer ?? "",
+            domains: [],
+            queryStrategy: 'UseIP',
+          }
+        }
+      } else {
+        this.dnsServer = {
           address: "localhost",
           domains: [],
           queryStrategy: 'UseIP',
-        },
-        ok() {
-          domains = dnsModal.dnsServer.domains.filter(d => d.length>0);
-          dnsModal.dnsServer.domains = domains;
-          newDnsServer = domains.length > 0 ? dnsModal.dnsServer : dnsModal.dnsServer.address;
-          ObjectUtil.execute(dnsModal.confirm, newDnsServer);
-        },
-        show({ title='', okText='{{ i18n "confirm" }}', dnsServer, confirm=(dnsServer)=>{}, isEdit=false  }) {
-            this.title = title;
-            this.okText = okText;
-            this.confirm = confirm;
-            this.visible = true;
-            if(isEdit) {
-              if (typeof dnsServer == 'object'){
-                this.dnsServer = dnsServer;
-              } else {
-                this.dnsServer = {
-                  address: dnsServer ?? "",
-                  domains: [],
-                  queryStrategy: 'UseIP',
-                }
-              }
-            } else {
-              this.dnsServer = {
-                address: "localhost",
-                domains: [],
-                queryStrategy: 'UseIP',
-              }
-            }
-            this.isEdit = isEdit;
-        },
-        close() {
-            dnsModal.visible = false;
-        },
-    };
-
-    new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#dns-modal',
-        data: {
-            dnsModal: dnsModal,
-        },
-        computed: {
-          isAdvanced: {
-            get: function () { return dnsModal.dnsServer.domains.length>0 }
-          }
         }
-    });
+      }
-
+      this.isEdit = isEdit;
+    },
+    close() {
+      dnsModal.visible = false;
+    },
+  };
+  new Vue({
+    delimiters: ['[[', ']]'],
+    el: '#dns-modal',
+    data: {
+      dnsModal: dnsModal,
+    },
+    computed: {
+      isAdvanced: {
+        get: function() {
+          return dnsModal.dnsServer.domains.length > 0
+        }
+      }
+    }
+  });
 </script>
 {{end}}

web/html/xui/form/outbound.html

@@ -1,225 +1,211 @@
 {{define "form/outbound"}}
 <!-- base -->
-<a-tabs :active-key="outModal.activeKey"  style="padding: 0; background-color: transparent;" @change="(activeKey) => {outModal.toggleJson(activeKey == '2'); }">
+<a-tabs :active-key="outModal.activeKey" style="padding: 0; background-color: transparent;" @change="(activeKey) => {outModal.toggleJson(activeKey == '2'); }">
-<a-tab-pane key="1" tab="Form">
+  <a-tab-pane key="1" tab="Form">
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-        <a-form-item label='{{ i18n "protocol" }}'>
+      <a-form-item label='{{ i18n "protocol" }}'>
-            <a-select v-model="outbound.protocol" :dropdown-class-name="themeSwitcher.currentTheme">
+        <a-select v-model="outbound.protocol" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option v-for="x,y in Protocols" :value="x">[[ y ]]</a-select-option>
+          <a-select-option v-for="x,y in Protocols" :value="x">[[ y ]]</a-select-option>
-            </a-select>
+        </a-select>
-        </a-form-item>
+      </a-form-item>
-        <a-form-item label='{{ i18n "pages.xray.outbound.tag" }}' has-feedback :validate-status="outModal.duplicateTag? 'warning' : 'success'">
+      <a-form-item label='{{ i18n "pages.xray.outbound.tag" }}' has-feedback :validate-status="outModal.duplicateTag? 'warning' : 'success'">
-            <a-input v-model.trim="outbound.tag" @change="outModal.check()" placeholder='{{ i18n "pages.xray.outbound.tagDesc" }}'></a-input>
+        <a-input v-model.trim="outbound.tag" @change="outModal.check()" placeholder='{{ i18n "pages.xray.outbound.tagDesc" }}'></a-input>
-        </a-form-item>
+      </a-form-item>
-        <a-form-item label='{{ i18n "pages.xray.outbound.sendThrough" }}'>
+      <a-form-item label='{{ i18n "pages.xray.outbound.sendThrough" }}'>
-            <a-input v-model="outbound.sendThrough"></a-input>
+        <a-input v-model="outbound.sendThrough"></a-input>
-        </a-form-item>
+      </a-form-item>
 
-<!-- freedom settings-->
+      <!-- freedom settings-->
-<template v-if="outbound.protocol === Protocols.Freedom">
+      <template v-if="outbound.protocol === Protocols.Freedom">
         <a-form-item label='Strategy'>
-            <a-select
+          <a-select v-model="outbound.settings.domainStrategy" :dropdown-class-name="themeSwitcher.currentTheme">
-            v-model="outbound.settings.domainStrategy"
+            <a-select-option v-for="s in OutboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
-            :dropdown-class-name="themeSwitcher.currentTheme">
+          </a-select>
-                <a-select-option v-for="s in OutboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
-            </a-select>
         </a-form-item>
         <a-form-item label='Fragment'>
-            <a-switch
+          <a-switch :checked="Object.keys(outbound.settings.fragment).length >0" @change="checked => outbound.settings.fragment = checked ? new Outbound.FreedomSettings.Fragment() : {}"></a-switch>
-                :checked="Object.keys(outbound.settings.fragment).length >0"
-                @change="checked => outbound.settings.fragment = checked ? new Outbound.FreedomSettings.Fragment() : {}">
-            </a-switch>
         </a-form-item>
-    <template v-if="Object.keys(outbound.settings.fragment).length >0">
+        <template v-if="Object.keys(outbound.settings.fragment).length >0">
-        <a-form-item label='Packets'>
+          <a-form-item label='Packets'>
-            <a-select
+            <a-select v-model="outbound.settings.fragment.packets" :dropdown-class-name="themeSwitcher.currentTheme">
-            v-model="outbound.settings.fragment.packets"
+              <a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s ]]</a-select-option>
-            :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s ]]</a-select-option>
             </a-select>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='Length'>
+          <a-form-item label='Length'>
             <a-input v-model.trim="outbound.settings.fragment.length"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='Interval'>
+          <a-form-item label='Interval'>
             <a-input v-model.trim="outbound.settings.fragment.interval"></a-input>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
-</template>
+      </template>
 
-<!-- blackhole settings -->
+      <!-- blackhole settings -->
-<template v-if="outbound.protocol === Protocols.Blackhole">
+      <template v-if="outbound.protocol === Protocols.Blackhole">
-    <a-form-item label='Response Type'>
+        <a-form-item label='Response Type'>
-        <a-select
+          <a-select v-model="outbound.settings.type" :dropdown-class-name="themeSwitcher.currentTheme">
-        v-model="outbound.settings.type"
-        :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option v-for="s in ['', 'none','http']" :value="s">[[ s ]]</a-select-option>
-        </a-select>
+          </a-select>
-    </a-form-item>
+        </a-form-item>
-</template>
+      </template>
 
-<!-- dns settings -->
+      <!-- dns settings -->
-<template v-if="outbound.protocol === Protocols.DNS">
+      <template v-if="outbound.protocol === Protocols.DNS">
-    <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
+        <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
-        <a-select
+          <a-select v-model="outbound.settings.network" :dropdown-class-name="themeSwitcher.currentTheme">
-        v-model="outbound.settings.network"
-        :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option v-for="s in ['udp','tcp']" :value="s">[[ s ]]</a-select-option>
-        </a-select>
+          </a-select>
-    </a-form-item>
-</template>
-
-<!-- wireguard settings -->
-<template v-if="outbound.protocol === Protocols.Wireguard">
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-                </template>
-                {{ i18n "pages.xray.outbound.address" }} <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-input v-model.trim="outbound.settings.address"></a-input>
-    </a-form-item>
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "reset" }}</span>
-                </template>
-                {{ i18n "pages.xray.wireguard.secretKey" }}
-                <a-icon type="sync"
-                    @click="[outbound.settings.pubKey, outbound.settings.secretKey] = Object.values(Wireguard.generateKeypair())">
-                </a-icon>
-            </a-tooltip>
-        </template>
-        <a-input v-model.trim="outbound.settings.secretKey"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
-        <a-input disabled v-model="outbound.settings.pubKey"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.xray.wireguard.domainStrategy" }}'>
-        <a-select v-model="outbound.settings.domainStrategy" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option v-for="wds in ['', ...WireguardDomainStrategy]" :value="wds">[[ wds ]]</a-select-option>
-        </a-select>
-    </a-form-item>
-    <a-form-item label='MTU'>
-        <a-input-number v-model.number="outbound.settings.mtu"></a-input-number>
-    </a-form-item>
-    <a-form-item label='Workers'>
-        <a-input-number min="0" v-model.number="outbound.settings.workers"></a-input>
-    </a-form-item>
-    <a-form-item label='Kernel Mode'>
-        <a-switch v-model="outbound.settings.kernelMode"></a-switch>
-    </a-form-item>
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-                </template>
-                Reserved <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-input v-model="outbound.settings.reserved"></a-input>
-    </a-form-item>
-    <a-form-item label="Peers">
-        <a-button type="primary" size="small" @click="outbound.settings.addPeer()">+</a-button>
-    </a-form-item>
-    <a-form v-for="(peer, index) in outbound.settings.peers" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-        <a-divider style="margin:0;">
-            Peer [[ index + 1 ]]
-            <a-icon v-if="outbound.settings.peers.length>1" type="delete" @click="() => outbound.settings.delPeer(index)"
-                    style="color: rgb(255, 77, 79);cursor: pointer;"/>
-        </a-divider>
-
-        <a-form-item label='{{ i18n "pages.xray.wireguard.endpoint" }}'>
-            <a-input v-model.trim="peer.endpoint"></a-input>
         </a-form-item>
-        <a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
+      </template>
-            <a-input v-model.trim="peer.publicKey"></a-input>
+
-        </a-form-item>
+      <!-- wireguard settings -->
-        <a-form-item label='{{ i18n "pages.xray.wireguard.psk" }}'>
+      <template v-if="outbound.protocol === Protocols.Wireguard">
-            <a-input v-model.trim="peer.psk"></a-input>
+        <a-form-item>
+          <template slot="label">
+            <a-tooltip>
+              <template slot="title">
+                <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+              </template>
+              {{ i18n "pages.xray.outbound.address" }}
+              <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+          </template>
+          <a-input v-model.trim="outbound.settings.address"></a-input>
         </a-form-item>
         <a-form-item>
+          <template slot="label">
+            <a-tooltip>
+              <template slot="title">
+                <span>{{ i18n "reset" }}</span>
+              </template>
+              {{ i18n "pages.xray.wireguard.secretKey" }}
+              <a-icon type="sync" @click="[outbound.settings.pubKey, outbound.settings.secretKey] = Object.values(Wireguard.generateKeypair())"></a-icon>
+            </a-tooltip>
+          </template>
+          <a-input v-model.trim="outbound.settings.secretKey"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
+          <a-input disabled v-model="outbound.settings.pubKey"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.wireguard.domainStrategy" }}'>
+          <a-select v-model="outbound.settings.domainStrategy" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option v-for="wds in ['', ...WireguardDomainStrategy]" :value="wds">[[ wds ]]</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label='MTU'>
+          <a-input-number v-model.number="outbound.settings.mtu"></a-input-number>
+        </a-form-item>
+        <a-form-item label='Workers'>
+          <a-input-number min="0" v-model.number="outbound.settings.workers"></a-input-number>
+        </a-form-item>
+        <a-form-item label='Kernel Mode'>
+          <a-switch v-model="outbound.settings.kernelMode"></a-switch>
+        </a-form-item>
+        <a-form-item>
+          <template slot="label">
+            <a-tooltip>
+              <template slot="title">
+                <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+              </template> Reserved <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+          </template>
+          <a-input v-model="outbound.settings.reserved"></a-input>
+        </a-form-item>
+        <a-form-item label="Peers">
+          <a-button icon="plus" type="primary" size="small" @click="outbound.settings.addPeer()"></a-button>
+        </a-form-item>
+        <a-form v-for="(peer, index) in outbound.settings.peers" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+          <a-divider style="margin:0;"> Peer [[ index + 1 ]] <a-icon v-if="outbound.settings.peers.length>1" type="delete" @click="() => outbound.settings.delPeer(index)" style="color: rgb(255, 77, 79);cursor: pointer;"></a-icon>
+          </a-divider>
+          <a-form-item label='{{ i18n "pages.xray.wireguard.endpoint" }}'>
+            <a-input v-model.trim="peer.endpoint"></a-input>
+          </a-form-item>
+          <a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
+            <a-input v-model.trim="peer.publicKey"></a-input>
+          </a-form-item>
+          <a-form-item label='{{ i18n "pages.xray.wireguard.psk" }}'>
+            <a-input v-model.trim="peer.psk"></a-input>
+          </a-form-item>
+          <a-form-item>
             <template slot="label">
-                {{ i18n "pages.xray.wireguard.allowedIPs" }} <a-button type="primary" size="small" @click="peer.allowedIPs.push('')">+</a-button>
+              {{ i18n "pages.xray.wireguard.allowedIPs" }}
+              <a-button icon="plus" type="primary" size="small" @click="peer.allowedIPs.push('')"></a-button>
             </template>
             <template v-for="(aip, index) in peer.allowedIPs" style="margin-bottom: 10px;">
-                <a-input v-model.trim="peer.allowedIPs[index]">
+              <a-input v-model.trim="peer.allowedIPs[index]">
-                    <a-button v-if="peer.allowedIPs.length>1" slot="addonAfter" size="small" @click="peer.allowedIPs.splice(index, 1)">-</a-button>
+                <a-button icon="minus" v-if="peer.allowedIPs.length>1" slot="addonAfter" size="small" @click="peer.allowedIPs.splice(index, 1)"></a-button>
-                </a-input>
+              </a-input>
             </template>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='Keep Alive'>
+          <a-form-item label='Keep Alive'>
-            <a-input-number v-model.number="peer.keepAlive" :min="0"></a-input>
+            <a-input-number v-model.number="peer.keepAlive" :min="0"></a-input-number>
-        </a-form-item>    
+          </a-form-item>
-    </a-form>
+        </a-form>
-</template>
+      </template>
 
-<!-- Address + Port -->
+      <!-- Address + Port -->
-<template v-if="outbound.hasAddressPort()">
+      <template v-if="outbound.hasAddressPort()">
         <a-form-item label='{{ i18n "pages.inbounds.address" }}'>
-            <a-input v-model.trim="outbound.settings.address"></a-input>
+          <a-input v-model.trim="outbound.settings.address"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
-            <a-input-number v-model.number="outbound.settings.port" :min="1" :max="65532"></a-input-number>
+          <a-input-number v-model.number="outbound.settings.port" :min="1" :max="65532"></a-input-number>
         </a-form-item>
-</template>
+      </template>
 
-<!-- Vnext (vless/vmess) settings -->
+      <!-- Vnext (vless/vmess) settings -->
-<template v-if="[Protocols.VMess, Protocols.VLESS].includes(outbound.protocol)">
+      <template v-if="[Protocols.VMess, Protocols.VLESS].includes(outbound.protocol)">
         <a-form-item label='ID'>
-            <a-input v-model.trim="outbound.settings.id"></a-input>
+          <a-input v-model.trim="outbound.settings.id"></a-input>
         </a-form-item>
- <!-- vless settings -->
+
- <template v-if="outbound.canEnableTlsFlow()">
+        <!-- vless settings -->
-        <a-form-item label='Flow'>
+        <template v-if="outbound.canEnableTlsFlow()">
+          <a-form-item label='Flow'>
             <a-select v-model="outbound.settings.flow" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+              <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-                <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+              <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
             </a-select>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
-</template>
+      </template>
 
-<!-- Servers (trojan/shadowsocks/socks/http) settings -->
+      <!-- Servers (trojan/shadowsocks/socks/http) settings -->
-<template v-if="outbound.hasServers()">
+      <template v-if="outbound.hasServers()">
-    <!-- http / socks -->
+        <!-- http / socks -->
-    <template v-if="outbound.hasUsername()">
+        <template v-if="outbound.hasUsername()">
-        <a-form-item label='{{ i18n "username" }}'>
+          <a-form-item label='{{ i18n "username" }}'>
             <a-input v-model.trim="outbound.settings.user"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='{{ i18n "password" }}'>
+          <a-form-item label='{{ i18n "password" }}'>
             <a-input v-model.trim="outbound.settings.pass"></a-input>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
-<!-- trojan/shadowsocks -->
-<template v-if="[Protocols.Trojan, Protocols.Shadowsocks].includes(outbound.protocol)">
-        <a-form-item label='{{ i18n "password" }}'>
-        <a-input v-model.trim="outbound.settings.password"></a-input>
-        </a-form-item>
-    </template>
-    <!-- shadowsocks -->
-    <template v-if="outbound.protocol === Protocols.Shadowsocks">
-        <a-form-item label='{{ i18n "encryption" }}'>
-            <a-select v-model="outbound.settings.method" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option v-for="(method, method_name) in SSMethods" :value="method">[[ method_name ]]</a-select-option>
-            </a-select>
-        </a-form-item>
-        <a-form-item label='UDP over TCP'>
-            <a-switch v-model="outbound.settings.uot"></a-switch>
-        </a-form-item>
-  </template>
-</template>
 
-<!-- stream settings -->
+        <!-- trojan/shadowsocks -->
-<template v-if="outbound.canEnableStream()">
+        <template v-if="[Protocols.Trojan, Protocols.Shadowsocks].includes(outbound.protocol)">
-    <a-form-item label='{{ i18n "transmission" }}'>
+          <a-form-item label='{{ i18n "password" }}'>
-        <a-select v-model="outbound.stream.network" @change="streamNetworkChange"
+            <a-input v-model.trim="outbound.settings.password"></a-input>
-            :dropdown-class-name="themeSwitcher.currentTheme">
+          </a-form-item>
+        </template>
+
+        <!-- shadowsocks -->
+        <template v-if="outbound.protocol === Protocols.Shadowsocks">
+          <a-form-item label='{{ i18n "encryption" }}'>
+            <a-select v-model="outbound.settings.method" :dropdown-class-name="themeSwitcher.currentTheme">
+              <a-select-option v-for="(method, method_name) in SSMethods" :value="method">[[ method_name ]]</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label='UDP over TCP'>
+            <a-switch v-model="outbound.settings.uot"></a-switch>
+          </a-form-item>
+        </template>
+      </template>
+
+      <!-- stream settings -->
+      <template v-if="outbound.canEnableStream()">
+        <a-form-item label='{{ i18n "transmission" }}'>
+          <a-select v-model="outbound.stream.network" @change="streamNetworkChange" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="tcp">TCP</a-select-option>
             <a-select-option value="kcp">mKCP</a-select-option>
             <a-select-option value="ws">WebSocket</a-select-option>
@@ -227,235 +213,229 @@
             <a-select-option value="quic">QUIC</a-select-option>
             <a-select-option value="grpc">gRPC</a-select-option>
             <a-select-option value="httpupgrade">HTTPUpgrade</a-select-option>
-        </a-select>
+          </a-select>
-    </a-form-item>
-    <template v-if="outbound.stream.network === 'tcp'">
-        <a-form-item label='HTTP {{ i18n "camouflage" }}'>
-            <a-switch :checked="outbound.stream.tcp.type === 'http'"
-                @change="checked => outbound.stream.tcp.type = checked ? 'http' : 'none'">
-            </a-switch>
         </a-form-item>
-        <template v-if="outbound.stream.tcp.type == 'http'">
+        <template v-if="outbound.stream.network === 'tcp'">
+          <a-form-item label='HTTP {{ i18n "camouflage" }}'>
+            <a-switch :checked="outbound.stream.tcp.type === 'http'" @change="checked => outbound.stream.tcp.type = checked ? 'http' : 'none'"></a-switch>
+          </a-form-item>
+          <template v-if="outbound.stream.tcp.type == 'http'">
             <a-form-item label='{{ i18n "host" }}'>
-                <a-input v-model.trim="outbound.stream.tcp.host"></a-input>
+              <a-input v-model.trim="outbound.stream.tcp.host"></a-input>
             </a-form-item>
             <a-form-item label='{{ i18n "path" }}'>
-                <a-input v-model.trim="outbound.stream.tcp.path"></a-input>
+              <a-input v-model.trim="outbound.stream.tcp.path"></a-input>
             </a-form-item>
+          </template>
         </template>
-    </template>
 
-    <!-- kcp -->
+        <!-- kcp -->
-    <template v-if="outbound.stream.network === 'kcp'">
+        <template v-if="outbound.stream.network === 'kcp'">
-        <a-form-item label='{{ i18n "camouflage" }}'>
+          <a-form-item label='{{ i18n "camouflage" }}'>
             <a-select v-model="outbound.stream.kcp.type" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option value="none">None</a-select-option>
+              <a-select-option value="none">None</a-select-option>
-                <a-select-option value="srtp">SRTP</a-select-option>
+              <a-select-option value="srtp">SRTP</a-select-option>
-                <a-select-option value="utp">uTP</a-select-option>
+              <a-select-option value="utp">uTP</a-select-option>
-                <a-select-option value="wechat-video">WeChat</a-select-option>
+              <a-select-option value="wechat-video">WeChat</a-select-option>
-                <a-select-option value="dtls">DTLS 1.2</a-select-option>
+              <a-select-option value="dtls">DTLS 1.2</a-select-option>
-                <a-select-option value="wireguard">WireGuard</a-select-option>
+              <a-select-option value="wireguard">WireGuard</a-select-option>
-                <a-select-option value="dns">DNS</a-select-option>
+              <a-select-option value="dns">DNS</a-select-option>
             </a-select>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='{{ i18n "password" }}'>
+          <a-form-item label='{{ i18n "password" }}'>
             <a-input v-model="outbound.stream.kcp.seed"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='MTU'>
+          <a-form-item label='MTU'>
             <a-input-number v-model.number="outbound.stream.kcp.mtu"></a-input-number>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='TTI (ms)'>
+          <a-form-item label='TTI (ms)'>
             <a-input-number v-model.number="outbound.stream.kcp.tti"></a-input-number>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='Uplink (MB/s)'>
+          <a-form-item label='Uplink (MB/s)'>
             <a-input-number v-model.number="outbound.stream.kcp.upCap"></a-input-number>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='Downlink (MB/s)'>
+          <a-form-item label='Downlink (MB/s)'>
             <a-input-number v-model.number="outbound.stream.kcp.downCap"></a-input-number>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='Congestion'>
+          <a-form-item label='Congestion'>
             <a-switch v-model="outbound.stream.kcp.congestion"></a-switch>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='Read Buffer (MB)'>
+          <a-form-item label='Read Buffer (MB)'>
             <a-input-number v-model.number="outbound.stream.kcp.readBuffer"></a-input-number>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='Write Buffer (MB)'>
+          <a-form-item label='Write Buffer (MB)'>
             <a-input-number v-model.number="outbound.stream.kcp.writeBuffer"></a-input-number>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
 
-    <!-- ws -->
+        <!-- ws -->
-    <template v-if="outbound.stream.network === 'ws'">
+        <template v-if="outbound.stream.network === 'ws'">
-        <a-form-item label='{{ i18n "host" }}'>
+          <a-form-item label='{{ i18n "host" }}'>
             <a-input v-model="outbound.stream.ws.host"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='{{ i18n "path" }}'>
+          <a-form-item label='{{ i18n "path" }}'>
             <a-input v-model.trim="outbound.stream.ws.path"></a-input>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
 
-    <!-- http -->
+        <!-- http -->
-    <template v-if="outbound.stream.network === 'http'">
+        <template v-if="outbound.stream.network === 'http'">
-        <a-form-item label='{{ i18n "host" }}'>
+          <a-form-item label='{{ i18n "host" }}'>
             <a-input v-model.trim="outbound.stream.http.host"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='{{ i18n "path" }}'>
+          <a-form-item label='{{ i18n "path" }}'>
             <a-input v-model.trim="outbound.stream.http.path"></a-input>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
 
-    <!-- quic -->
+        <!-- quic -->
-    <template v-if="outbound.stream.network === 'quic'">
+        <template v-if="outbound.stream.network === 'quic'">
-        <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
+          <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
             <a-select v-model="outbound.stream.quic.security" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option value="none">None</a-select-option>
+              <a-select-option value="none">None</a-select-option>
-                <a-select-option value="aes-128-gcm">AES-128-GCM</a-select-option>
+              <a-select-option value="aes-128-gcm">AES-128-GCM</a-select-option>
-                <a-select-option value="chacha20-poly1305">CHACHA20-POLY1305</a-select-option>
+              <a-select-option value="chacha20-poly1305">CHACHA20-POLY1305</a-select-option>
             </a-select>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='{{ i18n "password" }}'>
+          <a-form-item label='{{ i18n "password" }}'>
             <a-input v-model.trim="outbound.stream.quic.key"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='{{ i18n "camouflage" }}'>
+          <a-form-item label='{{ i18n "camouflage" }}'>
             <a-select v-model="outbound.stream.quic.type" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option value="none">None</a-select-option>
+              <a-select-option value="none">None</a-select-option>
-                <a-select-option value="srtp">SRTP</a-select-option>
+              <a-select-option value="srtp">SRTP</a-select-option>
-                <a-select-option value="utp">uTP</a-select-option>
+              <a-select-option value="utp">uTP</a-select-option>
-                <a-select-option value="wechat-video">WeChat</a-select-option>
+              <a-select-option value="wechat-video">WeChat</a-select-option>
-                <a-select-option value="dtls">DTLS 1.2</a-select-option>
+              <a-select-option value="dtls">DTLS 1.2</a-select-option>
-                <a-select-option value="wireguard">WireGuard</a-select-option>
+              <a-select-option value="wireguard">WireGuard</a-select-option>
             </a-select>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
 
-    <!-- grpc -->
+        <!-- grpc -->
-    <template v-if="outbound.stream.network === 'grpc'">
+        <template v-if="outbound.stream.network === 'grpc'">
-        <a-form-item label='Service Name'>
+          <a-form-item label='Service Name'>
             <a-input v-model.trim="outbound.stream.grpc.serviceName"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label="Authority">
+          <a-form-item label="Authority">
             <a-input v-model.trim="outbound.stream.grpc.authority"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='Multi Mode'>
+          <a-form-item label='Multi Mode'>
             <a-switch v-model="outbound.stream.grpc.multiMode"></a-switch>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
 
-    <!-- httpupgrade -->
+        <!-- httpupgrade -->
-    <template v-if="outbound.stream.network === 'httpupgrade'">
+        <template v-if="outbound.stream.network === 'httpupgrade'">
-        <a-form-item label='{{ i18n "host" }}'>
+          <a-form-item label='{{ i18n "host" }}'>
             <a-input v-model="outbound.stream.httpupgrade.host"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label='{{ i18n "path" }}'>
+          <a-form-item label='{{ i18n "path" }}'>
             <a-input v-model.trim="outbound.stream.httpupgrade.path"></a-input>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
-</template>
+      </template>
 
-<!-- tls settings -->
+      <!-- tls settings -->
-<template v-if="outbound.canEnableTls()">
+      <template v-if="outbound.canEnableTls()">
-    <a-form-item label='{{ i18n "security" }}'>
+        <a-form-item label='{{ i18n "security" }}'>
-        <a-radio-group v-model="outbound.stream.security" button-style="solid">
+          <a-radio-group v-model="outbound.stream.security" button-style="solid">
             <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
             <a-radio-button value="tls">TLS</a-radio-button>
             <a-radio-button v-if="outbound.canEnableReality()" value="reality">Reality</a-radio-button>
-        </a-radio-group>
+          </a-radio-group>
-    </a-form-item>
+        </a-form-item>
-    <template v-if="outbound.stream.isTls">
+        <template v-if="outbound.stream.isTls">
-        <a-form-item label="SNI" placeholder="Server Name Indication">
+          <a-form-item label="SNI" placeholder="Server Name Indication">
             <a-input v-model.trim="outbound.stream.tls.serverName"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label="uTLS">
+          <a-form-item label="uTLS">
-            <a-select v-model="outbound.stream.tls.fingerprint" 
+            <a-select v-model="outbound.stream.tls.fingerprint" :dropdown-class-name="themeSwitcher.currentTheme">
-            :dropdown-class-name="themeSwitcher.currentTheme">
+              <a-select-option value=''>None</a-select-option>
-                <a-select-option value=''>None</a-select-option>
+              <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-                <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
             </a-select>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label="ALPN">
+          <a-form-item label="ALPN">
-            <a-select mode="multiple" 
+            <a-select mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme" v-model="outbound.stream.tls.alpn">
-            :dropdown-class-name="themeSwitcher.currentTheme"
+              <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
-                v-model="outbound.stream.tls.alpn">
-                <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
             </a-select>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label="Allow Insecure">
+          <a-form-item label="Allow Insecure">
             <a-switch v-model="outbound.stream.tls.allowInsecure"></a-switch>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
 
-    <!-- reality settings -->
+        <!-- reality settings -->
-    <template v-if="outbound.stream.isReality">
+        <template v-if="outbound.stream.isReality">
-        <a-form-item label="SNI">
+          <a-form-item label="SNI">
             <a-input v-model.trim="outbound.stream.reality.serverName"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label="uTLS">
+          <a-form-item label="uTLS">
-            <a-select v-model="outbound.stream.reality.fingerprint" 
+            <a-select v-model="outbound.stream.reality.fingerprint" :dropdown-class-name="themeSwitcher.currentTheme">
-            :dropdown-class-name="themeSwitcher.currentTheme">
+              <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-                <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
             </a-select>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label="Short ID">
+          <a-form-item label="Short ID">
             <a-input v-model.trim="outbound.stream.reality.shortId" style="width:250px"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label="SpiderX">
+          <a-form-item label="SpiderX">
             <a-input v-model.trim="outbound.stream.reality.spiderX" style="width:250px"></a-input>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label="Public Key">
+          <a-form-item label="Public Key">
             <a-input v-model.trim="outbound.stream.reality.publicKey"></a-input>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
-</template>
+      </template>
 
-<!-- sockopt settings -->
+      <!-- sockopt settings -->
-    <a-form-item label="Sockopts">
+      <a-form-item label="Sockopts">
         <a-switch v-model="outbound.stream.sockoptSwitch"></a-switch>
-    </a-form-item>
+      </a-form-item>
-    <template v-if="outbound.stream.sockoptSwitch">
+      <template v-if="outbound.stream.sockoptSwitch">
         <a-form-item label="Dialer Proxy">
-            <a-select v-model="outbound.stream.sockopt.dialerProxy" :dropdown-class-name="themeSwitcher.currentTheme">
+          <a-select v-model="outbound.stream.sockopt.dialerProxy" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option v-for="tag in ['', ...outModal.tags]" :value="tag">[[ tag ]]</a-select-option>
+            <a-select-option v-for="tag in ['', ...outModal.tags]" :value="tag">[[ tag ]]</a-select-option>
-            </a-select>
+          </a-select>
         </a-form-item>
         <a-form-item label="TCP Fast Open">
-            <a-switch v-model="outbound.stream.sockopt.tcpFastOpen"></a-switch>
+          <a-switch v-model="outbound.stream.sockopt.tcpFastOpen"></a-switch>
         </a-form-item>
         <a-form-item label="Keep Alive Interval">
-            <a-input-number v-model="outbound.stream.sockopt.tcpKeepAliveInterval" :min="0"></a-input-number>
+          <a-input-number v-model="outbound.stream.sockopt.tcpKeepAliveInterval" :min="0"></a-input-number>
         </a-form-item>
         <a-form-item label="TCP No-Delay">
-            <a-switch v-model="outbound.stream.sockopt.tcpNoDelay"></a-switch>
+          <a-switch v-model="outbound.stream.sockopt.tcpNoDelay"></a-switch>
         </a-form-item>
-</template>
+      </template>
 
-<!-- mux settings -->
+      <!-- mux settings -->
-<template v-if="outbound.canEnableMux()">
+      <template v-if="outbound.canEnableMux()">
-    <a-form-item label="Mux">
+        <a-form-item label="Mux">
-        <a-switch v-model="outbound.mux.enabled"></a-switch>
+          <a-switch v-model="outbound.mux.enabled"></a-switch>
-    </a-form-item>
+        </a-form-item>
-    <template v-if="outbound.mux.enabled">
+        <template v-if="outbound.mux.enabled">
-        <a-form-item label="Concurrency">
+          <a-form-item label="Concurrency">
             <a-input-number v-model="outbound.mux.concurrency" :min="-1" :max="1024"></a-input-number>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label="xudp Concurrency">
+          <a-form-item label="xudp Concurrency">
             <a-input-number v-model="outbound.mux.xudpConcurrency" :min="-1" :max="1024"></a-input-number>
-        </a-form-item>
+          </a-form-item>
-        <a-form-item label="xudp UDP 443">
+          <a-form-item label="xudp UDP 443">
             <a-select v-model="outbound.mux.xudpProxyUDP443" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option v-for="c in ['reject', 'allow', 'skip']" :value="c">[[ c ]]</a-select-option>
+              <a-select-option v-for="c in ['reject', 'allow', 'skip']" :value="c">[[ c ]]</a-select-option>
             </a-select>
-        </a-form-item>
+          </a-form-item>
-    </template>
+        </template>
-</template>
+      </template>
-
+    </a-form>
-</a-form>
+  </a-tab-pane>
-</a-tab-pane>
+  <a-tab-pane key="2" tab="JSON" force-render="true">
-<a-tab-pane key="2" tab="JSON" force-render="true">
+    <a-form-item style="margin: 10px 0"> Link: <a-input v-model.trim="outModal.link" style="width: 300px; margin-right: 5px;" placeholder="vmess:// vless:// trojan:// ss://"></a-input>
-    <a-form-item style="margin: 10px 0">
+      <a-button @click="convertLink" type="primary">
-        Link: <a-input v-model.trim="outModal.link" style="width: 300px; margin-right: 5px;" placeholder="vmess:// vless:// trojan:// ss://"></a-input>
+        <a-icon type="form"></a-icon>
-        <a-button @click="convertLink" type="primary"><a-icon type="form"></a-icon></a-button>
+      </a-button>
     </a-form-item>
-        <textarea style="position:absolute; left: -800px;" id="outboundJson"></textarea>
+    <textarea style="position:absolute; left: -800px;" id="outboundJson"></textarea>
-</a-tab-pane>
+  </a-tab-pane>
 </a-tabs>
 {{end}}

web/html/xui/form/protocol/http.html

@@ -1,21 +1,23 @@
 {{define "form/http"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-        <table style="width: 100%; text-align: center; margin: 1rem 0;">
+  <table style="width: 100%; text-align: center; margin: 1rem 0;">
-            <tr>
+    <tr>
-                <td width="45%">{{ i18n "username" }}</td>
+      <td width="45%">{{ i18n "username" }}</td>
-                <td width="45%">{{ i18n "password" }}</td>
+      <td width="45%">{{ i18n "password" }}</td>
-                <td><a-button size="small" @click="inbound.settings.addAccount(new Inbound.HttpSettings.HttpAccount())">+</a-button></td>
+      <td>
-            </tr>
+        <a-button icon="plus" size="small" @click="inbound.settings.addAccount(new Inbound.HttpSettings.HttpAccount())"></a-button>
-        </table>
+      </td>
-        <a-input-group compact v-for="(account, index) in inbound.settings.accounts" style="margin-bottom: 10px;">
+    </tr>
-            <a-input style="width: 50%" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
+  </table>
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+  <a-input-group compact v-for="(account, index) in inbound.settings.accounts" style="margin-bottom: 10px;">
-            </a-input>
+    <a-input style="width: 50%" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
-            <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
+      <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-                <template slot="addonAfter">
+    </a-input>
-                    <a-button size="small" @click="inbound.settings.delAccount(index)">-</a-button>
+    <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
-                </template>
+      <template slot="addonAfter">
-            </a-input>
+        <a-button icon="minus" size="small" @click="inbound.settings.delAccount(index)"></a-button>
-        </a-input-group>
+      </template>
+    </a-input>
+  </a-input-group>
 </a-form>
 {{end}}

web/html/xui/form/protocol/socks.html

@@ -1,33 +1,34 @@
 {{define "form/socks"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label='{{ i18n "pages.inbounds.enable" }} UDP'>
+  <a-form-item label='{{ i18n "pages.inbounds.enable" }} UDP'>
-        <a-switch v-model="inbound.settings.udp"></a-switch>
+    <a-switch v-model="inbound.settings.udp"></a-switch>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label="IP" v-if="inbound.settings.udp">
+  <a-form-item label="IP" v-if="inbound.settings.udp">
-        <a-input v-model.trim="inbound.settings.ip"></a-input>
+    <a-input v-model.trim="inbound.settings.ip"></a-input>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label='{{ i18n "password" }}'>
+  <a-form-item label='{{ i18n "password" }}'>
-        <a-switch :checked="inbound.settings.auth === 'password'"
+    <a-switch :checked="inbound.settings.auth === 'password'" @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
-        @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
+  </a-form-item>
-    </a-form-item>
+  <template v-if="inbound.settings.auth === 'password'">
-    <template v-if="inbound.settings.auth === 'password'">
+    <table style="width: 100%; text-align: center; margin: 1rem 0;">
-        <table style="width: 100%; text-align: center; margin: 1rem 0;">
+      <tr>
-            <tr>
+        <td width="45%">{{ i18n "username" }}</td>
-                <td width="45%">{{ i18n "username" }}</td>
+        <td width="45%">{{ i18n "password" }}</td>
-                <td width="45%">{{ i18n "password" }}</td>
+        <td>
-                <td><a-button size="small" @click="inbound.settings.addAccount(new Inbound.SocksSettings.SocksAccount())">+</a-button></td>
+          <a-button icon="plus" size="small" @click="inbound.settings.addAccount(new Inbound.SocksSettings.SocksAccount())"></a-button>
-            </tr>
+        </td>
-        </table>
+      </tr>
-        <a-input-group compact v-for="(account, index) in inbound.settings.accounts" style="margin-bottom: 10px;">
+    </table>
-            <a-input style="width: 50%" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
+    <a-input-group compact v-for="(account, index) in inbound.settings.accounts" style="margin-bottom: 10px;">
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+      <a-input style="width: 50%" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
-            </a-input>
+        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-            <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
+      </a-input>
-                <template slot="addonAfter">
+      <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
-                    <a-button size="small" @click="inbound.settings.delAccount(index)">-</a-button>
+        <template slot="addonAfter">
-                </template>
+          <a-button icon="minus" size="small" @click="inbound.settings.delAccount(index)"></a-button>
-            </a-input>
+        </template>
-        </a-input-group>
+      </a-input>
-    </template>
+    </a-input-group>
+  </template>
 </a-form>
 {{end}}

web/html/xui/form/protocol/trojan.html

@@ -1,54 +1,50 @@
 {{define "form/trojan"}}
 <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.trojans.slice(0,1)" v-if="!isEdit">
-    <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
+  <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-        {{template "form/client"}}
+    {{template "form/client"}}
-    </a-collapse-panel>
+  </a-collapse-panel>
 </a-collapse>
 <a-collapse v-else>
-    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.trojans.length">
+  <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.trojans.length">
-        <table width="100%">
+    <table width="100%">
-            <tr class="client-table-header">
+      <tr class="client-table-header">
-                <th>{{ i18n "pages.inbounds.email" }}</th>
+        <th>{{ i18n "pages.inbounds.email" }}</th>
-                <th>Password</th>
+        <th>Password</th>
-            </tr>
+      </tr>
-            <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+      <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                <td>[[ client.email ]]</td>
+        <td>[[ client.email ]]</td>
-                <td>[[ client.password ]]</td>
+        <td>[[ client.password ]]</td>
-            </tr>
+      </tr>
-        </table>
+    </table>
-    </a-collapse-panel>
+  </a-collapse-panel>
 </a-collapse>
 <template v-if="inbound.isTcp && !inbound.stream.isReality">
-    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-        <a-form-item label="Fallbacks">
+    <a-form-item label="Fallbacks">
-            <a-button type="primary" size="small" @click="inbound.settings.addFallback()">+</a-button>
+      <a-button icon="plus" type="primary" size="small" @click="inbound.settings.addFallback()"></a-button>
-        </a-form-item>
+    </a-form-item>
-    </a-form>
+  </a-form>
 
-    <!-- trojan fallbacks -->
+  <!-- trojan fallbacks -->
-    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:8} }"
+  <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-        :wrapper-col="{ md: {span:14} }">
+    <a-divider style="margin:0;"> Fallback [[ index + 1 ]] <a-icon type="delete" @click="() => inbound.settings.delFallback(index)" style="color: rgb(255, 77, 79);cursor: pointer;"></a-icon>
-        <a-divider style="margin:0;">
+    </a-divider>
-            Fallback [[ index + 1 ]]
+    <a-form-item label='SNI'>
-            <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
+      <a-input v-model="fallback.name"></a-input>
-                style="color: rgb(255, 77, 79);cursor: pointer;" />
+    </a-form-item>
-        </a-divider>
+    <a-form-item label='ALPN'>
-        <a-form-item label='SNI'>
+      <a-input v-model="fallback.alpn"></a-input>
-            <a-input v-model="fallback.name"></a-input>
+    </a-form-item>
-        </a-form-item>
+    <a-form-item label='Path'>
-        <a-form-item label='ALPN'>
+      <a-input v-model="fallback.path"></a-input>
-            <a-input v-model="fallback.alpn"></a-input>
+    </a-form-item>
-        </a-form-item>
+    <a-form-item label='Dest'>
-        <a-form-item label='Path'>
+      <a-input v-model="fallback.dest"></a-input>
-            <a-input v-model="fallback.path"></a-input>
+    </a-form-item>
-        </a-form-item>
+    <a-form-item label='xVer'>
-        <a-form-item label='Dest'>
+      <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
-            <a-input v-model="fallback.dest"></a-input>
+    </a-form-item>
-        </a-form-item>
+  </a-form>
-        <a-form-item label='xVer'>
+  <a-divider style="margin:5px 0;"></a-divider>
-            <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
-        </a-form-item>
-    </a-form>
-    <a-divider style="margin:5px 0;"></a-divider>
 </template>
 {{end}}

web/html/xui/form/protocol/vless.html

@@ -1,56 +1,52 @@
 {{define "form/vless"}}
 <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vlesses.slice(0,1)" v-if="!isEdit">
-    <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
+  <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-        {{template "form/client"}}
+    {{template "form/client"}}
-    </a-collapse-panel>
+  </a-collapse-panel>
 </a-collapse>
 <a-collapse v-else>
-    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vlesses.length">
+  <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vlesses.length">
-        <table width="100%">
+    <table width="100%">
-            <tr class="client-table-header">
+      <tr class="client-table-header">
-                <th>{{ i18n "pages.inbounds.email" }}</th>
+        <th>{{ i18n "pages.inbounds.email" }}</th>
-                <th>Flow</th>
+        <th>Flow</th>
-                <th>ID</th>
+        <th>ID</th>
-            </tr>
+      </tr>
-            <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+      <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                <td>[[ client.email ]]</td>
+        <td>[[ client.email ]]</td>
-                <td>[[ client.flow ]]</td>
+        <td>[[ client.flow ]]</td>
-                <td>[[ client.id ]]</td>
+        <td>[[ client.id ]]</td>
-            </tr>
+      </tr>
-        </table>
+    </table>
-    </a-collapse-panel>
+  </a-collapse-panel>
 </a-collapse>
 <template v-if="inbound.isTcp && !inbound.stream.isReality">
-    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-        <a-form-item label="Fallbacks">
+    <a-form-item label="Fallbacks">
-            <a-button type="primary" size="small" @click="inbound.settings.addFallback()">+</a-button>
+      <a-button icon="plus" type="primary" size="small" @click="inbound.settings.addFallback()"></a-button>
-        </a-form-item>
+    </a-form-item>
-    </a-form>
+  </a-form>
 
-    <!-- vless fallbacks -->
+  <!-- vless fallbacks -->
-    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:8} }"
+  <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-        :wrapper-col="{ md: {span:14} }">
+    <a-divider style="margin:0;"> Fallback [[ index + 1 ]] <a-icon type="delete" @click="() => inbound.settings.delFallback(index)" style="color: rgb(255, 77, 79);cursor: pointer;"></a-icon>
-        <a-divider style="margin:0;">
+    </a-divider>
-            Fallback [[ index + 1 ]]
+    <a-form-item label='SNI'>
-            <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
+      <a-input v-model="fallback.name"></a-input>
-                style="color: rgb(255, 77, 79);cursor: pointer;" />
+    </a-form-item>
-        </a-divider>
+    <a-form-item label='ALPN'>
-        <a-form-item label='SNI'>
+      <a-input v-model="fallback.alpn"></a-input>
-            <a-input v-model="fallback.name"></a-input>
+    </a-form-item>
-        </a-form-item>
+    <a-form-item label='Path'>
-        <a-form-item label='ALPN'>
+      <a-input v-model="fallback.path"></a-input>
-            <a-input v-model="fallback.alpn"></a-input>
+    </a-form-item>
-        </a-form-item>
+    <a-form-item label='Dest'>
-        <a-form-item label='Path'>
+      <a-input v-model="fallback.dest"></a-input>
-            <a-input v-model="fallback.path"></a-input>
+    </a-form-item>
-        </a-form-item>
+    <a-form-item label='xVer'>
-        <a-form-item label='Dest'>
+      <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
-            <a-input v-model="fallback.dest"></a-input>
+    </a-form-item>
-        </a-form-item>
+  </a-form>
-        <a-form-item label='xVer'>
+  <a-divider style="margin:5px 0;"></a-divider>
-            <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
-        </a-form-item>
-    </a-form>
-    <a-divider style="margin:5px 0;"></a-divider>
 </template>
 {{end}}

web/html/xui/form/protocol/wireguard.html

@@ -1,80 +1,76 @@
 {{define "form/wireguard"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item>
+  <a-form-item>
-        <template slot="label">
+    <template slot="label">
-            <a-tooltip>
+      <a-tooltip>
-                <template slot="title">
+        <template slot="title">
-                    <span>{{ i18n "reset" }}</span>
+          <span>{{ i18n "reset" }}</span>
-                </template>
-                {{ i18n "pages.xray.wireguard.secretKey" }}
-                <a-icon type="sync"
-                    @click="[inbound.settings.pubKey, inbound.settings.secretKey] = Object.values(Wireguard.generateKeypair())">
-                </a-icon>
-            </a-tooltip>
         </template>
-        <a-input v-model.trim="inbound.settings.secretKey"></a-input>
+        {{ i18n "pages.xray.wireguard.secretKey" }}
+        <a-icon type="sync" @click="[inbound.settings.pubKey, inbound.settings.secretKey] = Object.values(Wireguard.generateKeypair())"></a-icon>
+      </a-tooltip>
+    </template>
+    <a-input v-model.trim="inbound.settings.secretKey"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
+    <a-input disabled v-model="inbound.settings.pubKey"></a-input>
+  </a-form-item>
+  <a-form-item label='MTU'>
+    <a-input-number v-model.number="inbound.settings.mtu"></a-input-number>
+  </a-form-item>
+  <a-form-item label='Kernel Mode'>
+    <a-switch v-model="inbound.settings.kernelMode"></a-switch>
+  </a-form-item>
+  <a-form-item label="Peers">
+    <a-button icon="plus" type="primary" size="small" @click="inbound.settings.addPeer()"></a-button>
+  </a-form-item>
+  <a-form v-for="(peer, index) in inbound.settings.peers" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-divider style="margin:0;"> Peer [[ index + 1 ]] <a-icon v-if="inbound.settings.peers.length>1" type="delete" @click="() => inbound.settings.delPeer(index)" style="color: rgb(255, 77, 79);cursor: pointer;"></a-icon>
+    </a-divider>
+    <a-form-item>
+      <template slot="label">
+        <a-tooltip>
+          <template slot="title">
+            <span>{{ i18n "reset" }}</span>
+          </template>
+          {{ i18n "pages.xray.wireguard.secretKey" }}
+          <a-icon @click="[peer.publicKey, peer.privateKey] = Object.values(Wireguard.generateKeypair())" type="sync"></a-icon>
+        </a-tooltip>
+      </template>
+      <a-input v-model.trim="peer.privateKey"></a-input>
     </a-form-item>
-    <a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
+    <a-form-item>
-        <a-input disabled v-model="inbound.settings.pubKey"></a-input>
+      <template slot="label">
+        {{ i18n "pages.xray.wireguard.publicKey" }}
+      </template>
+      <a-input v-model.trim="peer.publicKey"></a-input>
     </a-form-item>
-    <a-form-item label='MTU'>
+    <a-form-item>
-        <a-input-number v-model.number="inbound.settings.mtu"></a-input-number>
+      <template slot="label">
+        <a-tooltip>
+          <template slot="title">
+            <span>{{ i18n "reset" }}</span>
+          </template>
+          {{ i18n "pages.xray.wireguard.psk" }}
+          <a-icon @click="peer.psk = Wireguard.keyToBase64(Wireguard.generatePresharedKey())" type="sync"></a-icon>
+        </a-tooltip>
+      </template>
+      <a-input v-model.trim="peer.psk"></a-input>
     </a-form-item>
-    <a-form-item label='Kernel Mode'>
+    <a-form-item>
-        <a-switch v-model="inbound.settings.kernelMode"></a-switch>
+      <template slot="label">
+        {{ i18n "pages.xray.wireguard.allowedIPs" }}
+        <a-button icon="plus" type="primary" size="small" @click="peer.allowedIPs.push('')"></a-button>
+      </template>
+      <template v-for="(aip, index) in peer.allowedIPs" style="margin-bottom: 10px;">
+        <a-input v-model.trim="peer.allowedIPs[index]">
+          <a-button icon="minus" v-if="peer.allowedIPs.length>1" slot="addonAfter" size="small" @click="peer.allowedIPs.splice(index, 1)"></a-button>
+        </a-input>
+      </template>
     </a-form-item>
-    <a-form-item label="Peers">
+    <a-form-item label='Keep Alive'>
-        <a-button type="primary" size="small" @click="inbound.settings.addPeer()">+</a-button>
+      <a-input-number v-model.number="peer.keepAlive" :min="0"></a-input-number>
     </a-form-item>
-    <a-form v-for="(peer, index) in inbound.settings.peers" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  </a-form>
-        <a-divider style="margin:0;">
-            Peer [[ index + 1 ]]
-            <a-icon v-if="inbound.settings.peers.length>1" type="delete" @click="() => inbound.settings.delPeer(index)"
-                    style="color: rgb(255, 77, 79);cursor: pointer;"/>
-        </a-divider>
-        <a-form-item>
-            <template slot="label">
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "reset" }}</span>
-                    </template>
-                    {{ i18n "pages.xray.wireguard.secretKey" }}
-                    <a-icon @click="[peer.publicKey, peer.privateKey] = Object.values(Wireguard.generateKeypair())"type="sync"> </a-icon>
-                </a-tooltip>
-            </template>
-            <a-input v-model.trim="peer.privateKey"></a-input>
-        </a-form-item>
-        <a-form-item>
-            <template slot="label">
-                {{ i18n "pages.xray.wireguard.publicKey" }}
-            </template>
-            <a-input v-model.trim="peer.publicKey"></a-input>
-        </a-form-item>
-        <a-form-item>
-            <template slot="label">
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "reset" }}</span>
-                    </template>
-                    {{ i18n "pages.xray.wireguard.psk" }}
-                    <a-icon @click="peer.psk = Wireguard.keyToBase64(Wireguard.generatePresharedKey())"type="sync"> </a-icon>
-                </a-tooltip>
-            </template>
-            <a-input v-model.trim="peer.psk"></a-input>
-        </a-form-item>
-        <a-form-item>
-            <template slot="label">
-                {{ i18n "pages.xray.wireguard.allowedIPs" }} <a-button type="primary" size="small" @click="peer.allowedIPs.push('')">+</a-button>
-            </template>
-            <template v-for="(aip, index) in peer.allowedIPs" style="margin-bottom: 10px;">
-                <a-input v-model.trim="peer.allowedIPs[index]">
-                    <a-button v-if="peer.allowedIPs.length>1" slot="addonAfter" size="small" @click="peer.allowedIPs.splice(index, 1)">-</a-button>
-                </a-input>
-            </template>
-        </a-form-item>
-        <a-form-item label='Keep Alive'>
-            <a-input-number v-model.number="peer.keepAlive" :min="0"></a-input>
-        </a-form-item>    
-    </a-form>
 </a-form>
 {{end}}

web/html/xui/form/stream/external_proxy.html

@@ -1,26 +1,29 @@
 {{define "form/externalProxy"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-divider style="margin:5px 0 0;"></a-divider>
+  <a-divider style="margin:5px 0 0;"></a-divider>
-    <a-form-item label="External Proxy">
+  <a-form-item label="External Proxy">
-        <a-switch v-model="externalProxy"></a-switch>
+    <a-switch v-model="externalProxy"></a-switch>
-        <a-button v-if="externalProxy" type="primary" style="margin-left: 10px" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})">+</a-button>
+    <a-button icon="plus" v-if="externalProxy" type="primary" style="margin-left: 10px" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})"></a-button>
-    </a-form-item>
+  </a-form-item>
-    <a-input-group style="margin: 8px 0;" compact v-for="(row, index) in inbound.stream.externalProxy">
+  <a-input-group style="margin: 8px 0;" compact v-for="(row, index) in inbound.stream.externalProxy">
-        <template>
+    <template>
-            <a-tooltip title="Force TLS">
+      <a-tooltip title="Force TLS">
-                <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">
+        <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
+          <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
-                    <a-select-option value="none">{{ i18n "none" }}</a-select-option>
+          <a-select-option value="none">{{ i18n "none" }}</a-select-option>
-                    <a-select-option value="tls">TLS</a-select-option>
+          <a-select-option value="tls">TLS</a-select-option>
-                </a-select>
+        </a-select>
-            </a-tooltip>
+      </a-tooltip>
-        </template>
+    </template>
-        <a-input style="width: 35%" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
+    <a-input style="width: 35%" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
-        <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
+    <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
-            <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
+      <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
-        </a-tooltip>
+    </a-tooltip>
-        <a-input style="width: 20%" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'></a-input>
+    <a-input style="width: 30%; top: 0;" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'>
-        <a-button style="width: 10%; margin: 0px; border-radius: 0 1rem 1rem 0;" @click="inbound.stream.externalProxy.splice(index, 1)">-</a-button>
+      <template slot="addonAfter">
-    </a-input-group>
+        <a-button icon="minus" size="small" @click="inbound.stream.externalProxy.splice(index, 1)"></a-button>
+      </template>
+    </a-input>
+  </a-input-group>
 </a-form>
 {{end}}

web/html/xui/form/stream/stream_http.html

@@ -1,19 +1,17 @@
 {{define "form/streamHTTP"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label='{{ i18n "path" }}'>
+  <a-form-item label='{{ i18n "path" }}'>
-        <a-input v-model.trim="inbound.stream.http.path"></a-input>
+    <a-input v-model.trim="inbound.stream.http.path"></a-input>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item>
+  <a-form-item>
-        <template slot="label">{{ i18n "host" }}
+    <template slot="label">{{ i18n "host" }}
-            <a-button size="small" @click="inbound.stream.http.addHost()">+</a-button>
+      <a-button icon="plus" size="small" @click="inbound.stream.http.addHost()"></a-button>
-        </template>
+    </template>
-        <template v-for="(host, index) in inbound.stream.http.host">
+    <template v-for="(host, index) in inbound.stream.http.host">
-            <a-input v-model.trim="inbound.stream.http.host[index]">
+      <a-input v-model.trim="inbound.stream.http.host[index]">
-                <a-button size="small" slot="addonAfter"
+        <a-button icon="minus" size="small" slot="addonAfter" @click="inbound.stream.http.removeHost(index)" v-if="inbound.stream.http.host.length>1"></a-button>
-                @click="inbound.stream.http.removeHost(index)"
+      </a-input>
-                v-if="inbound.stream.http.host.length>1">-</a-button>
+    </template>
-            </a-input>
+  </a-form-item>
-        </template>
-    </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/stream/stream_httpupgrade.html

@@ -1,26 +1,26 @@
 {{define "form/streamHTTPUpgrade"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="PROXY Protocol">
+  <a-form-item label="PROXY Protocol">
-        <a-switch v-model="inbound.stream.httpupgrade.acceptProxyProtocol"></a-switch>
+    <a-switch v-model="inbound.stream.httpupgrade.acceptProxyProtocol"></a-switch>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label='{{ i18n "host" }}'>
+  <a-form-item label='{{ i18n "host" }}'>
-        <a-input v-model.trim="inbound.stream.httpupgrade.host"></a-input>
+    <a-input v-model.trim="inbound.stream.httpupgrade.host"></a-input>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label='{{ i18n "path" }}'>
+  <a-form-item label='{{ i18n "path" }}'>
-        <a-input v-model.trim="inbound.stream.httpupgrade.path"></a-input>
+    <a-input v-model.trim="inbound.stream.httpupgrade.path"></a-input>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-        <a-button size="small" @click="inbound.stream.httpupgrade.addHeader('host', '')">+</a-button>
+    <a-button icon="plus" size="small" @click="inbound.stream.httpupgrade.addHeader('host', '')"></a-button>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item :wrapper-col="{span:24}">
+  <a-form-item :wrapper-col="{span:24}">
-        <a-input-group compact v-for="(header, index) in inbound.stream.httpupgrade.headers">
+    <a-input-group compact v-for="(header, index) in inbound.stream.httpupgrade.headers">
-            <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
+      <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-            </a-input>
+      </a-input>
-            <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+      <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <a-button slot="addonAfter" size="small" @click="inbound.stream.httpupgrade.removeHeader(index)">-</a-button>
+        <a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.httpupgrade.removeHeader(index)"></a-button>
-            </a-input>
+      </a-input>
-        </a-input-group>
+    </a-input-group>
-    </a-form-item>
+  </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/stream/stream_tcp.html

@@ -1,82 +1,72 @@
 {{define "form/streamTCP"}}
 <!-- tcp type -->
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="PROXY Protocol" v-if="inbound.canEnableTls()">
+  <a-form-item label="PROXY Protocol" v-if="inbound.canEnableTls()">
-        <a-switch v-model="inbound.stream.tcp.acceptProxyProtocol"></a-switch>
+    <a-switch v-model="inbound.stream.tcp.acceptProxyProtocol"></a-switch>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label='HTTP {{ i18n "camouflage" }}'>
+  <a-form-item label='HTTP {{ i18n "camouflage" }}'>
-        <a-switch :checked="inbound.stream.tcp.type === 'http'"
+    <a-switch :checked="inbound.stream.tcp.type === 'http'" @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'"></a-switch>
-            @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'">
+  </a-form-item>
-        </a-switch>
-    </a-form-item>
 </a-form>
 
-<a-form v-if="inbound.stream.tcp.type === 'http'" :colon="false" :label-col="{ md: {span:8} }"
+<a-form v-if="inbound.stream.tcp.type === 'http'" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    :wrapper-col="{ md: {span:14} }">
+  <!-- tcp request -->
-    <!-- tcp request -->
+  <a-divider style="margin:0;">{{ i18n "pages.inbounds.stream.general.request" }}</a-divider>
-    <a-divider style="margin:0;">{{ i18n "pages.inbounds.stream.general.request" }}</a-divider>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
-        <a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
+  </a-form-item>
-    </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.method" }}'>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.method" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.request.method"></a-input>
-        <a-input v-model.trim="inbound.stream.tcp.request.method"></a-input>
+  </a-form-item>
-    </a-form-item>
+  <a-form-item>
-    <a-form-item>
+    <template slot="label">{{ i18n "pages.inbounds.stream.tcp.path" }}
-        <template slot="label">{{ i18n "pages.inbounds.stream.tcp.path" }}
+      <a-button icon="plus" size="small" @click="inbound.stream.tcp.request.addPath('/')"></a-button>
-            <a-button size="small" @click="inbound.stream.tcp.request.addPath('/')">+</a-button>
+    </template>
-        </template>
+    <template v-for="(path, index) in inbound.stream.tcp.request.path">
-        <template v-for="(path, index) in inbound.stream.tcp.request.path">
+      <a-input v-model.trim="inbound.stream.tcp.request.path[index]">
-            <a-input v-model.trim="inbound.stream.tcp.request.path[index]">
+        <a-button icon="minus" size="small" slot="addonAfter" @click="inbound.stream.tcp.request.removePath(index)" v-if="inbound.stream.tcp.request.path.length>1"></a-button>
-                <a-button size="small" slot="addonAfter" @click="inbound.stream.tcp.request.removePath(index)"
+      </a-input>
-                    v-if="inbound.stream.tcp.request.path.length>1">-</a-button>
+    </template>
-            </a-input>
+  </a-form-item>
-        </template>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-    </a-form-item>
+    <a-button icon="plus" size="small" @click="inbound.stream.tcp.request.addHeader('Host', '')"></a-button>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+  </a-form-item>
-        <a-button size="small" @click="inbound.stream.tcp.request.addHeader('Host', '')">+</a-button>
+  <a-form-item :wrapper-col="{span:24}">
-    </a-form-item>
+    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.headers">
-    <a-form-item :wrapper-col="{span:24}">
+      <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
-        <a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.headers">
+        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-            <a-input style="width: 50%" v-model.trim="header.name"
+      </a-input>
-                placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
+      <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+        <a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.tcp.request.removeHeader(index)"></a-button>
-            </a-input>
+      </a-input>
-            <a-input style="width: 50%" v-model.trim="header.value"
+    </a-input-group>
-                placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+  </a-form-item>
-                <a-button slot="addonAfter" size="small"
-                    @click="inbound.stream.tcp.request.removeHeader(index)">-</a-button>
-            </a-input>
-        </a-input-group>
-    </a-form-item>
 
-    <!-- tcp response -->
+  <!-- tcp response -->
-    <a-divider style="margin:0;">{{ i18n "pages.inbounds.stream.general.response" }}</a-divider>
+  <a-divider style="margin:0;">{{ i18n "pages.inbounds.stream.general.response" }}</a-divider>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
+    <a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.status" }}'>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.status" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.response.status"></a-input>
+    <a-input v-model.trim="inbound.stream.tcp.response.status"></a-input>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.statusDescription" }}'>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.statusDescription" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.response.reason"></a-input>
+    <a-input v-model.trim="inbound.stream.tcp.response.reason"></a-input>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
-        <a-button size="small"
+    <a-button icon="plus" size="small" @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')"></a-button>
-            @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">+</a-button>
+  </a-form-item>
-    </a-form-item>
+  <a-form-item :wrapper-col="{span:24}">
-    <a-form-item :wrapper-col="{span:24}">
+    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.response.headers">
-        <a-input-group compact v-for="(header, index) in inbound.stream.tcp.response.headers">
+      <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
-            <a-input style="width: 50%" v-model.trim="header.name"
+        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-                placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
+      </a-input>
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+      <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-            </a-input>
+        <template slot="addonAfter">
-            <a-input style="width: 50%" v-model.trim="header.value"
+          <a-button icon="minus" size="small" @click="inbound.stream.tcp.response.removeHeader(index)"></a-button>
-                placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+        </template>
-                <template slot="addonAfter">
+      </a-input>
-                    <a-button size="small" @click="inbound.stream.tcp.response.removeHeader(index)">-</a-button>
+    </a-input-group>
-                </template>
+  </a-form-item>
-            </a-input>
-        </a-input-group>
-    </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/stream/stream_ws.html

@@ -1,26 +1,26 @@
 {{define "form/streamWS"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="PROXY Protocol">
+  <a-form-item label="PROXY Protocol">
-        <a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
+    <a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label='{{ i18n "host" }}'>
+  <a-form-item label='{{ i18n "host" }}'>
-        <a-input v-model.trim="inbound.stream.ws.host"></a-input>
+    <a-input v-model.trim="inbound.stream.ws.host"></a-input>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label='{{ i18n "path" }}'>
+  <a-form-item label='{{ i18n "path" }}'>
-        <a-input v-model.trim="inbound.stream.ws.path"></a-input>
+    <a-input v-model.trim="inbound.stream.ws.path"></a-input>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-        <a-button size="small" @click="inbound.stream.ws.addHeader('host', '')">+</a-button>
+    <a-button icon="plus" size="small" @click="inbound.stream.ws.addHeader('host', '')"></a-button>
-    </a-form-item>
+  </a-form-item>
-    <a-form-item :wrapper-col="{span:24}">
+  <a-form-item :wrapper-col="{span:24}">
-        <a-input-group compact v-for="(header, index) in inbound.stream.ws.headers">
+    <a-input-group compact v-for="(header, index) in inbound.stream.ws.headers">
-            <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
+      <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-            </a-input>
+      </a-input>
-            <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+      <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <a-button slot="addonAfter" size="small" @click="inbound.stream.ws.removeHeader(index)">-</a-button>
+        <a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.ws.removeHeader(index)"></a-button>
-            </a-input>
+      </a-input>
-        </a-input-group>
+    </a-input-group>
-    </a-form-item>
+  </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/tls_settings.html

@@ -1,194 +1,183 @@
 {{define "form/tlsSettings"}}
 <!-- tls enable -->
 <a-form v-if="inbound.canEnableTls()" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-divider style="margin:3px 0;"></a-divider>
+  <a-divider style="margin:3px 0;"></a-divider>
-    <a-form-item label='{{ i18n "security" }}'>
+  <a-form-item label='{{ i18n "security" }}'>
-        <a-radio-group v-model="inbound.stream.security" button-style="solid">
+    <a-radio-group v-model="inbound.stream.security" button-style="solid">
-            <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
+      <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
-            <a-tooltip>
+      <a-tooltip>
-                <template slot="title">
+        <template slot="title">
-                    <span>{{ i18n "pages.inbounds.xtlsDesc" }}</span>
+          <span>{{ i18n "pages.inbounds.xtlsDesc" }}</span>
-                </template>
+        </template>
-                <a-radio-button v-if="inbound.canEnableXtls()" value="xtls">XTLS</a-radio-button>
+        <a-radio-button v-if="inbound.canEnableXtls()" value="xtls">XTLS</a-radio-button>
-            </a-tooltip>
+      </a-tooltip>
-            <a-tooltip>
+      <a-tooltip>
-                <template slot="title">
+        <template slot="title">
-                    <span>{{ i18n "pages.inbounds.realityDesc" }}</span>
+          <span>{{ i18n "pages.inbounds.realityDesc" }}</span>
-                </template>
+        </template>
-                <a-radio-button v-if="inbound.canEnableReality()" value="reality">REALITY</a-radio-button>
+        <a-radio-button v-if="inbound.canEnableReality()" value="reality">REALITY</a-radio-button>
-            </a-tooltip>
+      </a-tooltip>
-            <a-radio-button value="tls">TLS</a-radio-button>
+      <a-radio-button value="tls">TLS</a-radio-button>
-        </a-radio-group>
+    </a-radio-group>
+  </a-form-item>
+
+  <!-- tls settings -->
+  <template v-if="inbound.stream.isTls">
+    <a-form-item label="SNI" placeholder="Server Name Indication">
+      <a-input v-model.trim="inbound.stream.tls.sni"></a-input>
     </a-form-item>
-
+    <a-form-item label="Cipher Suites">
-    <!-- tls settings -->
+      <a-select v-model="inbound.stream.tls.cipherSuites" :dropdown-class-name="themeSwitcher.currentTheme">
-    <template v-if="inbound.stream.isTls">
+        <a-select-option value="">Auto</a-select-option>
-        <a-form-item label="SNI" placeholder="Server Name Indication">
+        <a-select-option v-for="key,value in TLS_CIPHER_OPTION" :value="key">[[ value ]]</a-select-option>
-            <a-input v-model.trim="inbound.stream.tls.sni"></a-input>
+      </a-select>
-        </a-form-item>
+    </a-form-item>
-        <a-form-item label="Cipher Suites">
+    <a-form-item label="Min/Max Version">
-            <a-select v-model="inbound.stream.tls.cipherSuites" :dropdown-class-name="themeSwitcher.currentTheme">
+      <a-input-group compact>
-                <a-select-option value="">Auto</a-select-option>
+        <a-select v-model="inbound.stream.tls.minVersion" style="width: 50%" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option v-for="key,value in TLS_CIPHER_OPTION" :value="key">[[ value ]]</a-select-option>
+          <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
-            </a-select>
+        </a-select>
-        </a-form-item>
+        <a-select v-model="inbound.stream.tls.maxVersion" style="width: 50%" :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-form-item label="Min/Max Version">
+          <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
-            <a-input-group compact>
+        </a-select>
-                <a-select v-model="inbound.stream.tls.minVersion" style="width: 50%" :dropdown-class-name="themeSwitcher.currentTheme">
+      </a-input-group>
-                    <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+    </a-form-item>
-                </a-select>
+    <a-form-item label="uTLS">
-                <a-select v-model="inbound.stream.tls.maxVersion" style="width: 50%" :dropdown-class-name="themeSwitcher.currentTheme">
+      <a-select v-model="inbound.stream.tls.settings.fingerprint" style="width: 50%" :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+        <a-select-option value=''>None</a-select-option>
-                </a-select>
+        <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-            </a-input-group>
+      </a-select>
-        </a-form-item>
+    </a-form-item>
-        <a-form-item label="uTLS">
+    <a-form-item label="ALPN">
-            <a-select v-model="inbound.stream.tls.settings.fingerprint" style="width: 50%"
+      <a-select mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme" v-model="inbound.stream.tls.alpn">
-                :dropdown-class-name="themeSwitcher.currentTheme">
+        <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
-                <a-select-option value=''>None</a-select-option>
+      </a-select>
-                <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+    </a-form-item>
-            </a-select>
+    <a-form-item label="Allow Insecure">
-        </a-form-item>
+      <a-switch v-model="inbound.stream.tls.settings.allowInsecure"></a-switch>
-        <a-form-item label="ALPN">
+    </a-form-item>
-            <a-select mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme"
+    <a-form-item label="Reject Unknown SNI">
-                v-model="inbound.stream.tls.alpn">
+      <a-switch v-model="inbound.stream.tls.rejectUnknownSni"></a-switch>
-                <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
+    </a-form-item>
-            </a-select>
+    <template v-for="cert,index in inbound.stream.tls.certs">
-        </a-form-item>
+      <a-form-item label='{{ i18n "certificate" }}'>
-        <a-form-item label="Allow Insecure">
+        <a-radio-group v-model="cert.useFile" button-style="solid">
-            <a-switch v-model="inbound.stream.tls.settings.allowInsecure"></a-switch>
+          <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
-        </a-form-item>
+          <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
-        <a-form-item label="Reject Unknown SNI">
+        </a-radio-group>
-            <a-switch v-model="inbound.stream.tls.rejectUnknownSni"></a-switch>
+        <a-button icon="plus" v-if="index === 0" type="primary" size="small" @click="inbound.stream.tls.addCert()" style="margin-left: 10px"></a-button>
-        </a-form-item>
+        <a-button icon="minus" v-if="inbound.stream.tls.certs.length>1" type="primary" size="small" @click="inbound.stream.tls.removeCert(index)" style="margin-left: 10px"></a-button>
-        <template v-for="cert,index in inbound.stream.tls.certs">
+      </a-form-item>
-            <a-form-item label='{{ i18n "certificate" }}'>
+      <template v-if="cert.useFile">
-                <a-radio-group v-model="cert.useFile" button-style="solid">
+        <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
-                    <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
+          <a-input v-model.trim="cert.certFile"></a-input>
-                    <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
-                </a-radio-group>
-                <a-button v-if="index === 0" type="primary" size="small" @click="inbound.stream.tls.addCert()"
-                    style="margin-left: 10px">+</a-button>
-                <a-button v-if="inbound.stream.tls.certs.length>1" type="primary" size="small"
-                    @click="inbound.stream.tls.removeCert(index)" style="margin-left: 10px">-</a-button>
-            </a-form-item>
-            <template v-if="cert.useFile">
-                <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
-                    <a-input v-model.trim="cert.certFile"></a-input>
-                </a-form-item>
-                <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
-                    <a-input v-model.trim="cert.keyFile"></a-input>
-                </a-form-item>
-                <a-form-item label=" ">
-                    <a-button type="primary" icon="import" @click="setDefaultCertData(index)">{{ i18n
-                        "pages.inbounds.setDefaultCert" }}</a-button>
-                </a-form-item>
-            </template>
-            <template v-else>
-                <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
-                    <a-input type="textarea" :rows="3" v-model="cert.cert"></a-input>
-                </a-form-item>
-                <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
-                    <a-input type="textarea" :rows="3" v-model="cert.key"></a-input>
-                </a-form-item>
-            </template>
-            <a-form-item label='OCSP stapling'>
-                <a-input-number v-model.number="cert.ocspStapling" :min="0"></a-input-number>
-            </a-form-item>
-        </template>
-    </template>
-
-    <!-- xtls settings -->
-    <template v-else-if="inbound.xtls">
-        <a-form-item label="SNI" placeholder="Server Name Indication">
-            <a-input v-model.trim="inbound.stream.xtls.sni"></a-input>
-        </a-form-item>
-        <a-form-item label="ALPN">
-            <a-select mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme"
-                v-model="inbound.stream.xtls.alpn">
-                <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
-            </a-select>
-        </a-form-item>
-        <a-form-item label="Allow Insecure">
-            <a-switch v-model="inbound.stream.xtls.settings.allowInsecure"></a-switch>
-        </a-form-item>
-        <template v-for="cert,index in inbound.stream.xtls.certs">
-            <a-form-item label='{{ i18n "certificate" }}'>
-                <a-radio-group v-model="cert.useFile" button-style="solid">
-                    <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
-                    <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
-                </a-radio-group>
-                <a-button v-if="index === 0" type="primary" size="small" @click="inbound.stream.xtls.addCert()"
-                    style="margin-left: 10px">+</a-button>
-                <a-button v-if="inbound.stream.xtls.certs.length>1" type="primary" size="small"
-                    @click="inbound.stream.xtls.removeCert(index)" style="margin-left: 10px">-</a-button>
-            </a-form-item>
-            <template v-if="cert.useFile">
-                <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
-                    <a-input v-model.trim="cert.certFile"></a-input>
-                </a-form-item>
-                <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
-                    <a-input v-model.trim="cert.keyFile"></a-input>
-                </a-form-item>
-                <a-form-item label=" ">
-                    <a-button type="primary" icon="import" @click="setDefaultCertXtls(index)">{{ i18n
-                        "pages.inbounds.setDefaultCert" }}</a-button>
-                </a-form-item>
-            </template>
-            <template v-else>
-                <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
-                    <a-input type="textarea" :rows="3" v-model="cert.cert"></a-input>
-                </a-form-item>
-                <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'> 
-                    <a-input type="textarea" :rows="3" v-model="cert.key"></a-input>
-                </a-form-item>
-            </template>
-        </template>
-    </template>
-    <!-- reality settings -->
-    <template v-if="inbound.stream.isReality">
-        <a-form-item label='Show'>
-            <a-switch v-model="inbound.stream.reality.show"></a-switch>
-        </a-form-item>
-        <a-form-item label='Xver'>
-            <a-input-number v-model.number="inbound.stream.reality.xver" :min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item label='uTLS'>
-            <a-select v-model="inbound.stream.reality.settings.fingerprint" style="width: 50%"
-                :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-            </a-select>
-        </a-form-item>
-        <a-form-item label='Dest'>
-            <a-input v-model.trim="inbound.stream.reality.dest"></a-input>
-        </a-form-item>
-        <a-form-item label='SNI'>
-            <a-input v-model.trim="inbound.stream.reality.serverNames"></a-input>
-        </a-form-item>
-        <a-form-item>
-            <template slot="label">
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "reset" }}</span>
-                    </template>
-                    Short ID
-                    <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortId()" type="sync"> </a-icon>
-                    </a-icon>
-            </template>
-            <a-input v-model.trim="inbound.stream.reality.shortIds"></a-input>
-        </a-form-item>
-        <a-form-item label='SpiderX'>
-            <a-input v-model.trim="inbound.stream.reality.settings.spiderX"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
-            <a-input v-model.trim="inbound.stream.reality.privateKey"></a-input>
+          <a-input v-model.trim="cert.keyFile"></a-input>
-        </a-form-item>
-        <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
-            <a-input v-model.trim="inbound.stream.reality.settings.publicKey"></a-input>
         </a-form-item>
         <a-form-item label=" ">
-            <a-button type="primary" icon="import" @click="getNewX25519Cert">Get New Cert</a-button>
+          <a-button type="primary" icon="import" @click="setDefaultCertData(index)">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
         </a-form-item>
+      </template>
+      <template v-else>
+        <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
+          <a-input type="textarea" :rows="3" v-model="cert.cert"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
+          <a-input type="textarea" :rows="3" v-model="cert.key"></a-input>
+        </a-form-item>
+      </template>
+      <a-form-item label='OCSP stapling'>
+        <a-input-number v-model.number="cert.ocspStapling" :min="0"></a-input-number>
+      </a-form-item>
     </template>
+  </template>
+
+  <!-- xtls settings -->
+  <template v-else-if="inbound.xtls">
+    <a-form-item label="SNI" placeholder="Server Name Indication">
+      <a-input v-model.trim="inbound.stream.xtls.sni"></a-input>
+    </a-form-item>
+    <a-form-item label="ALPN">
+      <a-select mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme" v-model="inbound.stream.xtls.alpn">
+        <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item label="Allow Insecure">
+      <a-switch v-model="inbound.stream.xtls.settings.allowInsecure"></a-switch>
+    </a-form-item>
+    <template v-for="cert,index in inbound.stream.xtls.certs">
+      <a-form-item label='{{ i18n "certificate" }}'>
+        <a-radio-group v-model="cert.useFile" button-style="solid">
+          <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
+          <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
+        </a-radio-group>
+        <a-button icon="plus" v-if="index === 0" type="primary" size="small" @click="inbound.stream.xtls.addCert()" style="margin-left: 10px"></a-button>
+        <a-button icon="minus" v-if="inbound.stream.xtls.certs.length>1" type="primary" size="small" @click="inbound.stream.xtls.removeCert(index)" style="margin-left: 10px"></a-button>
+      </a-form-item>
+      <template v-if="cert.useFile">
+        <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
+          <a-input v-model.trim="cert.certFile"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
+          <a-input v-model.trim="cert.keyFile"></a-input>
+        </a-form-item>
+        <a-form-item label=" ">
+          <a-button type="primary" icon="import" @click="setDefaultCertXtls(index)">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
+        </a-form-item>
+      </template>
+      <template v-else>
+        <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
+          <a-input type="textarea" :rows="3" v-model="cert.cert"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
+          <a-input type="textarea" :rows="3" v-model="cert.key"></a-input>
+        </a-form-item>
+      </template>
+    </template>
+  </template>
+
+  <!-- reality settings -->
+  <template v-if="inbound.stream.isReality">
+    <a-form-item label='Show'>
+      <a-switch v-model="inbound.stream.reality.show"></a-switch>
+    </a-form-item>
+    <a-form-item label='Xver'>
+      <a-input-number v-model.number="inbound.stream.reality.xver" :min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item label='uTLS'>
+      <a-select v-model="inbound.stream.reality.settings.fingerprint" style="width: 50%" :dropdown-class-name="themeSwitcher.currentTheme">
+        <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item label='Dest'>
+      <a-input v-model.trim="inbound.stream.reality.dest"></a-input>
+    </a-form-item>
+    <a-form-item label='SNI'>
+      <a-input v-model.trim="inbound.stream.reality.serverNames"></a-input>
+    </a-form-item>
+    <a-form-item>
+      <template slot="label">
+        <a-tooltip>
+          <template slot="title">
+            <span>{{ i18n "reset" }}</span>
+          </template> Short ID <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortId()" type="sync"></a-icon>
+        </a-tooltip>
+      </template>
+      <a-input v-model.trim="inbound.stream.reality.shortIds"></a-input>
+    </a-form-item>
+    <a-form-item label='SpiderX'>
+      <a-input v-model.trim="inbound.stream.reality.settings.spiderX"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
+      <a-input v-model.trim="inbound.stream.reality.privateKey"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
+      <a-input v-model.trim="inbound.stream.reality.settings.publicKey"></a-input>
+    </a-form-item>
+    <a-form-item label=" ">
+      <a-button type="primary" icon="import" @click="getNewX25519Cert">Get New Cert</a-button>
+    </a-form-item>
+  </template>
 </a-form>
 {{end}}

web/html/xui/inbound_client_table.html

@@ -1,266 +1,239 @@
 {{define "client_table"}}
 <template slot="actions" slot-scope="text, client, index">
-    <a-tooltip>
+  <a-tooltip>
-        <template slot="title">{{ i18n "qrCode" }}</template>
+    <template slot="title">{{ i18n "qrCode" }}</template>
-        <a-icon style="font-size: 24px;" class="normal-icon" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record.id,client);"></a-icon>
+    <a-icon style="font-size: 24px;" class="normal-icon" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record.id,client);"></a-icon>
-    </a-tooltip>
+  </a-tooltip>
-    <a-tooltip>
+  <a-tooltip>
-        <template slot="title">{{ i18n "pages.client.edit" }}</template>
+    <template slot="title">{{ i18n "pages.client.edit" }}</template>
-        <a-icon style="font-size: 24px;" class="normal-icon" type="edit" @click="openEditClient(record.id,client);"></a-icon>
+    <a-icon style="font-size: 24px;" class="normal-icon" type="edit" @click="openEditClient(record.id,client);"></a-icon>
-    </a-tooltip>
+  </a-tooltip>
-    <a-tooltip>
+  <a-tooltip>
-        <template slot="title">{{ i18n "info" }}</template>
+    <template slot="title">{{ i18n "info" }}</template>
-        <a-icon style="font-size: 24px;" class="normal-icon" type="info-circle" @click="showInfo(record.id,client);"></a-icon>
+    <a-icon style="font-size: 24px;" class="normal-icon" type="info-circle" @click="showInfo(record.id,client);"></a-icon>
-    </a-tooltip>
+  </a-tooltip>
-    <a-tooltip>
+  <a-tooltip>
-        <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
+    <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
-        <a-popconfirm @confirm="resetClientTraffic(client,record.id,false)"
+    <a-popconfirm @confirm="resetClientTraffic(client,record.id,false)" title='{{ i18n "pages.inbounds.resetTrafficContent"}}' :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "reset"}}' cancel-text='{{ i18n "cancel"}}'>
-            title='{{ i18n "pages.inbounds.resetTrafficContent"}}'
+      <a-icon slot="icon" type="question-circle-o" :style="themeSwitcher.isDarkTheme ? 'color: var(--color-primary-100)' : 'color: var(--color-primary-100)'"></a-icon>
-            :overlay-class-name="themeSwitcher.currentTheme"
+      <a-icon style="font-size: 24px; cursor: pointer;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
-            ok-text='{{ i18n "reset"}}'
+    </a-popconfirm>
-            cancel-text='{{ i18n "cancel"}}'>
+  </a-tooltip>
-            <a-icon slot="icon" type="question-circle-o" :style="themeSwitcher.isDarkTheme ? 'color: var(--color-primary-100)' : 'color: var(--color-primary-100)'"></a-icon>
+  <a-tooltip>
-            <a-icon style="font-size: 24px; cursor: pointer;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
+    <template slot="title">
-        </a-popconfirm>
+      <span style="color: #FF4D4F"> {{ i18n "delete"}}</span>
-    </a-tooltip>
+    </template>
-    <a-tooltip>
+    <a-popconfirm @confirm="delClient(record.id,client,false)" title='{{ i18n "pages.inbounds.deleteClientContent"}}' :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "delete"}}' ok-type="danger" cancel-text='{{ i18n "cancel"}}'>
-        <template slot="title"><span style="color: #FF4D4F"> {{ i18n "delete"}}</span></template>
+      <a-icon slot="icon" type="question-circle-o" style="color: #e04141"></a-icon>
-        <a-popconfirm @confirm="delClient(record.id,client,false)"
+      <a-icon style="font-size: 24px; cursor: pointer;" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
-            title='{{ i18n "pages.inbounds.deleteClientContent"}}'
+    </a-popconfirm>
-            :overlay-class-name="themeSwitcher.currentTheme"
+  </a-tooltip>
-            ok-text='{{ i18n "delete"}}'
-            ok-type="danger"
-            cancel-text='{{ i18n "cancel"}}'>
-            <a-icon slot="icon" type="question-circle-o" style="color: #e04141"></a-icon>
-            <a-icon style="font-size: 24px; cursor: pointer;" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
-        </a-popconfirm>
-    </a-tooltip>
 </template>
 <template slot="enable" slot-scope="text, client, index">
-    <a-switch v-model="client.enable" @change="switchEnableClient(record.id,client)"></a-switch>
+  <a-switch v-model="client.enable" @change="switchEnableClient(record.id,client)"></a-switch>
 </template>
 <template slot="online" slot-scope="text, client, index">
-    <template v-if="client.enable && isClientOnline(client.email)">
+  <template v-if="client.enable && isClientOnline(client.email)">
-        <a-tag color="green">{{ i18n "online" }}</a-tag>
+    <a-tag color="green">{{ i18n "online" }}</a-tag>
-    </template>
+  </template>
-    <template v-else>
+  <template v-else>
-        <a-tag>{{ i18n "offline" }}</a-tag>
+    <a-tag>{{ i18n "offline" }}</a-tag>
-    </template>
+  </template>
 </template>
 <template slot="client" slot-scope="text, client">
-    <a-tooltip>
+  <a-tooltip>
-        <template slot="title">
+    <template slot="title">
-            <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
+      <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
-            <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
+      <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
-            <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
+      <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
-        </template>
+    </template>
-    <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'">
+    <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
-    </a-badge>
+  </a-tooltip> [[ client.email ]]
-    </a-tooltip>
-    [[ client.email ]]
 </template>
 <template slot="traffic" slot-scope="text, client">
-    <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+  <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-        <template slot="content" v-if="client.email">
+    <template slot="content" v-if="client.email">
-            <table cellpadding="2" width="100%">
+      <table cellpadding="2" width="100%">
-                <tr>
+        <tr>
-                    <td>↑[[ sizeFormat(getUpStats(record, client.email)) ]]</td>
+          <td>↑[[ sizeFormat(getUpStats(record, client.email)) ]]</td>
-                    <td>↓[[ sizeFormat(getDownStats(record, client.email)) ]]</td>
+          <td>↓[[ sizeFormat(getDownStats(record, client.email)) ]]</td>
-                </tr>
+        </tr>
-                <tr v-if="client.totalGB > 0">
+        <tr v-if="client.totalGB > 0">
-                    <td>{{ i18n "remained" }}</td>
+          <td>{{ i18n "remained" }}</td>
-                    <td>[[ sizeFormat(getRemStats(record, client.email)) ]]</td>
+          <td>[[ sizeFormat(getRemStats(record, client.email)) ]]</td>
-                </tr>
+        </tr>
-            </table>
+      </table>
-        </template>
+    </template>
-        <table>
+    <table>
-            <tr>
+      <tr class="tr-table-box">
-                <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
+        <td class="tr-table-rt"> [[ sizeFormat(getSumStats(record, client.email)) ]] </td>
-                    [[ sizeFormat(getSumStats(record, client.email)) ]]
+        <td class="tr-table-bar" v-if="!client.enable">
-                </td>
+          <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false" :percent="statsProgress(record, client.email)" />
-                <td width="120px" v-if="!client.enable">
+        </td>
-                    <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'"
+        <td class="tr-table-bar" v-else-if="client.totalGB > 0">
-                                :show-info="false"
+          <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
-                                :percent="statsProgress(record, client.email)"/>
+        </td>
-                </td>
+        <td v-else class="infinite-bar tr-table-bar">
-                <td width="120px" v-else-if="client.totalGB > 0">
+          <a-progress :show-info="false" :percent="100"></a-progress>
-                    <a-progress :stroke-color="clientStatsColor(record, client.email)"
+        </td>
-                                :show-info="false"
+        <td class="tr-table-lt">
-                                :status="isClientEnabled(record, client.email)? 'exception' : ''"
+          <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
-                                :percent="statsProgress(record, client.email)"/>
+          <span v-else class="tr-infinity-ch">&infin;</span>
-                </td>
+        </td>
-                <td width="120px" v-else class="infinite-bar">
+      </tr>
-                    <a-progress
+    </table>
-                    :show-info="false"
+  </a-popover>
-                    :percent="100"></a-progress>
-                </td>
-                <td width="60px">
-                    <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
-                    <span v-else style="font-weight: 100;font-size: 14pt;">&infin;</span>
-                </td>
-            </tr>
-        </table>
-    </a-popover>
 </template>
 <template slot="expiryTime" slot-scope="text, client, index">
-    <template v-if="client.expiryTime !=0 && client.reset >0">
+  <template v-if="client.expiryTime !=0 && client.reset >0">
-        <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+    <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-            <template slot="content">
+      <template slot="content">
-                <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
+        <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
-                <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
+        </span>
-            </template>
+        <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
-            <table>
+      </template>
-                <tr>
+      <table>
-                    <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
+        <tr class="tr-table-box">
-                        [[ remainedDays(client.expiryTime) ]]
+          <td class="tr-table-rt"> [[ remainedDays(client.expiryTime) ]] </td>
-                    </td>
+          <td class="infinite-bar tr-table-bar">
-                    <td width="120px" class="infinite-bar">
+            <a-progress :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
-                        <a-progress :show-info="false"
+          </td>
-                        :status="isClientEnabled(record, client.email)? 'exception' : ''"
+          <td class="tr-table-lt">[[ client.reset + "d" ]]</td>
-                        :percent="expireProgress(client.expiryTime, client.reset)"/>
+        </tr>
-                    </td>
+      </table>
-                    <td width="60px">[[ client.reset + "d" ]]</td>
+    </a-popover>
-                </tr>
+  </template>
-            </table>
+  <template v-else>
-        </a-popover>
+    <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
-    </template>
+      <template slot="content">
-    <template v-else>
+        <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
-        <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
+        </span>
-            <template slot="content">
+        <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
-                <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
+      </template>
-                <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
+      <a-tag style="min-width: 50px; border: none;" :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
-            </template>
+    </a-popover>
-        <a-tag style="min-width: 50px; border: none;" :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)">
+    <a-tag v-else :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" style="border: none;" class="infinite-tag">
-            [[ remainedDays(client.expiryTime) ]]
+      <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-        </a-tag>
+        <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
-        </a-popover>
+      </svg>
-        <a-tag v-else :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" style="border: none;" class="infinite-tag">&infin;</a-tag>
+    </a-tag>
-    </template>
+  </template>
 </template>
 <template slot="actionMenu" slot-scope="text, client, index">
-    <a-dropdown :trigger="['click']">
+  <a-dropdown :trigger="['click']">
-        <a-icon @click="e => e.preventDefault()" type="ellipsis" style="font-size: 20px;"></a-icon>
+    <a-icon @click="e => e.preventDefault()" type="ellipsis" style="font-size: 20px;"></a-icon>
-        <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
+    <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
-            <a-menu-item v-if="record.hasLink()" @click="showQrcode(record.id,client);">
+      <a-menu-item v-if="record.hasLink()" @click="showQrcode(record.id,client);">
-                <a-icon style="font-size: 14px;" type="qrcode"></a-icon>
+        <a-icon style="font-size: 14px;" type="qrcode"></a-icon>
-                {{ i18n "qrCode" }}
+        {{ i18n "qrCode" }}
-            </a-menu-item>
+      </a-menu-item>
-            <a-menu-item @click="openEditClient(record.id,client);">
+      <a-menu-item @click="openEditClient(record.id,client);">
-                <a-icon style="font-size: 14px;" type="edit"></a-icon>
+        <a-icon style="font-size: 14px;" type="edit"></a-icon>
-                {{ i18n "pages.client.edit" }}
+        {{ i18n "pages.client.edit" }}
-            </a-menu-item>
+      </a-menu-item>
-            <a-menu-item @click="showInfo(record.id,client);">
+      <a-menu-item @click="showInfo(record.id,client);">
-                <a-icon style="font-size: 14px;" type="info-circle"></a-icon>
+        <a-icon style="font-size: 14px;" type="info-circle"></a-icon>
-                {{ i18n "info" }}
+        {{ i18n "info" }}
-            </a-menu-item>
+      </a-menu-item>
-            <a-menu-item @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0">
+      <a-menu-item @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0">
-                <a-icon style="font-size: 14px;" type="retweet"></a-icon>
+        <a-icon style="font-size: 14px;" type="retweet"></a-icon>
-                {{ i18n "pages.inbounds.resetTraffic" }}
+        {{ i18n "pages.inbounds.resetTraffic" }}
-            </a-menu-item>
+      </a-menu-item>
-            <a-menu-item v-if="isRemovable(record.id)" @click="delClient(record.id,client)">
+      <a-menu-item v-if="isRemovable(record.id)" @click="delClient(record.id,client)">
-                <a-icon style="font-size: 14px;" type="delete"></a-icon>
+        <a-icon style="font-size: 14px;" type="delete"></a-icon>
-                <span style="color: #FF4D4F"> {{ i18n "delete"}}</span>
+        <span style="color: #FF4D4F"> {{ i18n "delete"}}</span>
-            </a-menu-item>
+      </a-menu-item>
-            <a-menu-item>
+      <a-menu-item>
-                <a-switch v-model="client.enable" size="small" @change="switchEnableClient(record.id,client)">
+        <a-switch v-model="client.enable" size="small" @change="switchEnableClient(record.id,client)"></a-switch>
-                </a-switch>
+        {{ i18n "enable"}}
-                    {{ i18n "enable"}}
+      </a-menu-item>
-            </a-menu-item>
+    </a-menu>
-        </a-menu>
+  </a-dropdown>
-    </a-dropdown>
 </template>
 <template slot="info" slot-scope="text, client, index">
-    <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
+  <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
-        <template slot="content">
+    <template slot="content">
-            <table>
+      <table>
-                <tr>
+        <tr>
-                    <td colspan="3" style="text-align: center;">{{ i18n "pages.inbounds.traffic" }}</td>
+          <td colspan="3" style="text-align: center;">{{ i18n "pages.inbounds.traffic" }}</td>
-                </tr>
+        </tr>
-                <tr>
+        <tr>
-                    <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
+          <td width="80px" style="margin:0; text-align: right;font-size: 1em;"> [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] </td>
-                        [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]]
+          <td width="120px" v-if="!client.enable">
-                    </td>
+            <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false" :percent="statsProgress(record, client.email)" />
-                    <td width="120px" v-if="!client.enable">
+          </td>
-                        <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'"
+          <td width="120px" v-else-if="client.totalGB > 0">
-                                    :show-info="false"
+            <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-                                    :percent="statsProgress(record, client.email)"/>
+              <template slot="content" v-if="client.email">
-                    </td>
+                <table cellpadding="2" width="100%">
-                    <td width="120px" v-else-if="client.totalGB > 0">
+                  <tr>
-                        <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+                    <td>↑[[ sizeFormat(getUpStats(record, client.email)) ]]</td>
-                            <template slot="content" v-if="client.email">
+                    <td>↓[[ sizeFormat(getDownStats(record, client.email)) ]]</td>
-                                <table cellpadding="2" width="100%">
+                  </tr>
-                                    <tr>
+                  <tr>
-                                        <td>↑[[ sizeFormat(getUpStats(record, client.email)) ]]</td>
+                    <td>{{ i18n "remained" }}</td>
-                                        <td>↓[[ sizeFormat(getDownStats(record, client.email)) ]]</td>
+                    <td>[[ sizeFormat(getRemStats(record, client.email)) ]]</td>
-                                    </tr>
+                  </tr>
-                                    <tr>
+                </table>
-                                        <td>{{ i18n "remained" }}</td>
+              </template>
-                                        <td>[[ sizeFormat(getRemStats(record, client.email)) ]]</td>
+              <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
-                                    </tr>
+            </a-popover>
-                                </table>
+          </td>
-                            </template>
+          <td width="120px" v-else class="infinite-bar">
-                            <a-progress :stroke-color="clientStatsColor(record, client.email)"
+            <a-progress :stroke-color="themeSwitcher.isDarkTheme ? '#2c1e32':'#F2EAF1'" :show-info="false" :percent="100"></a-progress>
-                                        :show-info="false"
+          </td>
-                                        :status="isClientEnabled(record, client.email)? 'exception' : ''"
+          <td width="80px">
-                                        :percent="statsProgress(record, client.email)"/>
+            <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
-                        </a-popover>
+            <span v-else class="tr-infinity-ch">&infin;</span>
-                    </td>
+          </td>
-                    <td width="120px" v-else class="infinite-bar">
+        </tr>
-                        <a-progress :stroke-color="themeSwitcher.isDarkTheme ? '#2c1e32':'#F2EAF1'"
+        <tr>
-                        :show-info="false"
+          <td colspan="3" style="text-align: center;">
-                        :percent="100"></a-progress>
+            <a-divider style="margin: 0; border-collapse: separate;"></a-divider>
-                    </td>
+            {{ i18n "pages.inbounds.expireDate" }}
-                    <td width="80px">
+          </td>
-                        <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
+        </tr>
-                        <span v-else style="font-weight: 100;font-size: 14pt;">&infin;</span>
+        <tr>
-                    </td>
+          <template v-if="client.expiryTime !=0 && client.reset >0">
-                </tr>
+            <td width="80px" style="margin:0; text-align: right;font-size: 1em;"> [[ remainedDays(client.expiryTime) ]] </td>
-                <tr>
+            <td width="120px" class="infinite-bar">
-                    <td colspan="3" style="text-align: center;">
+              <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-                        <a-divider style="margin: 0; border-collapse: separate;"></a-divider>
+                <template slot="content">
-                        {{ i18n "pages.inbounds.expireDate" }}
+                  <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
-                    </td>
+                  </span>
-                </tr>
+                  <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
-                <tr>
-                <template v-if="client.expiryTime !=0 && client.reset >0">
-                    <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
-                        [[ remainedDays(client.expiryTime) ]]
-                    </td>
-                    <td width="120px" class="infinite-bar">
-                        <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-                            <template slot="content">
-                                <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
-                                <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
-                            </template>
-                            <a-progress :show-info="false"
-                            :status="isClientEnabled(record, client.email)? 'exception' : ''"
-                            :percent="expireProgress(client.expiryTime, client.reset)"/>
-                        </a-popover>
-                    </td>
-                    <td width="60px">[[ client.reset + "d" ]]</td>
                 </template>
-                <template v-else>
+                <a-progress :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
-                    <td colspan="3" style="text-align: center;">
+              </a-popover>
-                            <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
+            </td>
-                                <template slot="content">
+            <td width="60px">[[ client.reset + "d" ]]</td>
-                                    <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
+          </template>
-                                    <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
+          <template v-else>
-                                </template>
+            <td colspan="3" style="text-align: center;">
-                                <a-tag style="min-width: 50px; border: none;" 
+              <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
-                                    :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)">
+                <template slot="content">
-                                    [[ remainedDays(client.expiryTime) ]]
+                  <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
-                                </a-tag>
+                  </span>
-                            </a-popover>
+                  <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
-                            <a-tag v-else :color="client.enable ? 'purple' : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'" class="infinite-tag">&infin;</a-tag>
+                </template>
-                        </template>
+                <a-tag style="min-width: 50px; border: none;" :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
-                    </td>
+              </a-popover>
-                </tr>
+              <a-tag v-else :color="client.enable ? 'purple' : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'" class="infinite-tag">
-            </table>
+                <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-        </template>
+                  <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
-        <a-badge>
+                </svg>
-            <a-icon v-if="!client.enable" slot="count" type="pause-circle" theme="filled" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon>
+              </a-tag>
-            <a-button shape="round" size="small" style="font-size: 14px; padding: 0 10px;"><a-icon type="solution"></a-icon></a-button>
+          </template>
-        </a-badge>
+          </td>
-    </a-popover>
+        </tr>
+      </table>
+    </template>
+    <a-badge>
+      <a-icon v-if="!client.enable" slot="count" type="pause-circle" theme="filled" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon>
+      <a-button shape="round" size="small" style="font-size: 14px; padding: 0 10px;">
+        <a-icon type="solution"></a-icon>
+      </a-button>
+    </a-badge>
+  </a-popover>
 </template>
 {{end}}

web/html/xui/inbound_info_modal.html

@@ -1,436 +1,516 @@
 {{define "inboundInfoModal"}}
-<a-modal id="inbound-info-modal"
+<a-modal id="inbound-info-modal" v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}' :closable="true" :mask-closable="true" :footer="null" width="600px" :class="themeSwitcher.currentTheme">
-    v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}'
+  <a-row>
-    :closable="true"
+    <a-col :xs="24" :md="12">
-    :mask-closable="true"
+      <table>
-    :footer="null"
-    width="600px"
-    :class="themeSwitcher.currentTheme"
-    >
-    <a-row>
-        <a-col :xs="24" :md="12">
-            <table>
-                <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="purple">[[ dbInbound.protocol ]]</a-tag></td></tr>
-                <tr><td>{{ i18n "pages.inbounds.address" }}</td><td>
-                    <a-tooltip :title="[[ dbInbound.address ]]">
-                        <a-tag class="info-large-tag">[[ dbInbound.address ]]</a-tag>
-                    </a-tooltip>
-                </td></tr>
-                <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag>[[ dbInbound.port ]]</a-tag></td></tr>
-            </table>
-        </a-col>
-        <a-col :xs="24" :md="12">
-        <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-            <table>
-                <tr>
-                    <td>{{ i18n "transmission" }}</td><td><a-tag color="green">[[ inbound.network ]]</a-tag></td>
-                </tr>
-            <template v-if="inbound.isTcp || inbound.isWs || inbound.isH2 || inbound.isHttpupgrade ">
-                <tr>
-                    <td>{{ i18n "host" }}</td>
-                    <td v-if="inbound.host">
-                        <a-tooltip :title="[[ inbound.host ]]">
-                            <a-tag class="info-large-tag">[[ inbound.host ]]</a-tag>
-                        </a-tooltip>
-                    </td>
-                    <td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
-                </tr>
-                <tr>
-                    <td>{{ i18n "path" }}</td>
-                    <td v-if="inbound.path">
-                        <a-tooltip :title="[[ inbound.path ]]">
-                            <a-tag class="info-large-tag">[[ inbound.path ]]</a-tag>
-                        </a-tooltip>
-                    <td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td>
-                </tr>
-            </template>
-            
-            <template v-if="inbound.isQuic">
-                <tr><td>quic {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.quicSecurity ]]</a-tag></td></tr>
-                <tr><td>quic {{ i18n "password" }}</td><td><a-tag>[[ inbound.quicKey ]]</a-tag></td></tr>
-                <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag>[[ inbound.quicType ]]</a-tag></td></tr>
-            </template>
-            
-            <template v-if="inbound.isKcp">
-                <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.kcpType ]]</a-tag></td></tr>
-                <tr><td>kcp {{ i18n "password" }}</td><td><a-tag>[[ inbound.kcpSeed ]]</a-tag></td></tr>
-            </template>
-            
-            <template v-if="inbound.isGrpc">
-                <tr><td>grpc serviceName</td><td>
-                    <a-tooltip :title="[[ inbound.serviceName ]]">
-                        <a-tag class="info-large-tag">[[ inbound.serviceName ]]</a-tag>
-                    </a-tooltip>
-                <tr><td>grpc multiMode</td><td><a-tag>[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr>
-            </template>
-            </table>
-        </template>
-        </a-col>
-        <template v-if="dbInbound.hasLink()">
-            {{ i18n "security" }}
-            <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">[[ inbound.stream.security ]]</a-tag>
-            <br />
-            <template v-if="inbound.stream.security != 'none'">
-            {{ i18n "domainName" }}
-            <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-            </template>
-        </template>
-    <table v-if="dbInbound.isSS" style="margin-bottom: 10px; width: 100%;">
         <tr>
-            <td>{{ i18n "encryption" }}</td>
+          <td>{{ i18n "protocol" }}</td>
-            <td><a-tag color="green">[[ inbound.settings.method ]]</a-tag></td>
+          <td>
-        </tr><tr v-if="inbound.isSS2022">
+            <a-tag color="purple">[[ dbInbound.protocol ]]</a-tag>
-            <td>{{ i18n "password" }}</td>
+          </td>
-            <td>
-                <a-tooltip :title="[[ inbound.settings.password  ]]">
-                    <a-tag class="info-large-tag">[[ inbound.settings.password  ]]</a-tag>
-                </a-tooltip>
-            </td>
-        </tr><tr>
-            <td>{{ i18n "pages.inbounds.network" }}</td>
-            <td><a-tag color="green">[[ inbound.settings.network ]]</a-tag></td>
         </tr>
+        <tr>
+          <td>{{ i18n "pages.inbounds.address" }}</td>
+          <td>
+            <a-tooltip :title="[[ dbInbound.address ]]">
+              <a-tag class="info-large-tag">[[ dbInbound.address ]]</a-tag>
+            </a-tooltip>
+          </td>
+        </tr>
+        <tr>
+          <td>{{ i18n "pages.inbounds.port" }}</td>
+          <td>
+            <a-tag>[[ dbInbound.port ]]</a-tag>
+          </td>
+        </tr>
+      </table>
+    </a-col>
+    <a-col :xs="24" :md="12">
+      <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
+        <table>
+          <tr>
+            <td>{{ i18n "transmission" }}</td>
+            <td>
+              <a-tag color="green">[[ inbound.network ]]</a-tag>
+            </td>
+          </tr>
+          <template v-if="inbound.isTcp || inbound.isWs || inbound.isH2 || inbound.isHttpupgrade ">
+            <tr>
+              <td>{{ i18n "host" }}</td>
+              <td v-if="inbound.host">
+                <a-tooltip :title="[[ inbound.host ]]">
+                  <a-tag class="info-large-tag">[[ inbound.host ]]</a-tag>
+                </a-tooltip>
+              </td>
+              <td v-else>
+                <a-tag color="orange">{{ i18n "none" }}</a-tag>
+              </td>
+            </tr>
+            </tr>
+            <tr>
+              <td>{{ i18n "path" }}</td>
+              <td v-if="inbound.path">
+                <a-tooltip :title="[[ inbound.path ]]">
+                  <a-tag class="info-large-tag">[[ inbound.path ]]</a-tag>
+                </a-tooltip>
+              <td v-else>
+                <a-tag color="orange">{{ i18n "none" }}</a-tag>
+              </td>
+            </tr>
+          </template>
+          <template v-if="inbound.isQuic">
+            <tr>
+              <td>quic {{ i18n "encryption" }}</td>
+              <td>
+                <a-tag>[[ inbound.quicSecurity ]]</a-tag>
+              </td>
+            </tr>
+            <tr>
+              <td>quic {{ i18n "password" }}</td>
+              <td>
+                <a-tag>[[ inbound.quicKey ]]</a-tag>
+              </td>
+            </tr>
+            <tr>
+              <td>quic {{ i18n "camouflage" }}</td>
+              <td>
+                <a-tag>[[ inbound.quicType ]]</a-tag>
+              </td>
+            </tr>
+          </template>
+          <template v-if="inbound.isKcp">
+            <tr>
+              <td>kcp {{ i18n "encryption" }}</td>
+              <td>
+                <a-tag>[[ inbound.kcpType ]]</a-tag>
+              </td>
+            </tr>
+            <tr>
+              <td>kcp {{ i18n "password" }}</td>
+              <td>
+                <a-tag>[[ inbound.kcpSeed ]]</a-tag>
+              </td>
+            </tr>
+          </template>
+          <template v-if="inbound.isGrpc">
+            <tr>
+              <td>grpc serviceName</td>
+              <td>
+                <a-tooltip :title="[[ inbound.serviceName ]]">
+                  <a-tag class="info-large-tag">[[ inbound.serviceName ]]</a-tag>
+                </a-tooltip>
+            <tr>
+              <td>grpc multiMode</td>
+              <td>
+                <a-tag>[[ inbound.stream.grpc.multiMode ]]</a-tag>
+              </td>
+            </tr>
+          </template>
+        </table>
+      </template>
+    </a-col>
+    <template v-if="dbInbound.hasLink()">
+      {{ i18n "security" }}
+      <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">[[ inbound.stream.security ]]</a-tag>
+      <br />
+      <template v-if="inbound.stream.security != 'none'">
+        {{ i18n "domainName" }}
+        <a-tag v-if="inbound.serverName" :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+        <a-tag v-else color="orange">{{ i18n "none" }}</a-tag>
+      </template>
+    </template>
+    <table v-if="dbInbound.isSS" style="margin-bottom: 10px; width: 100%;">
+      <tr>
+        <td>{{ i18n "encryption" }}</td>
+        <td>
+          <a-tag color="green">[[ inbound.settings.method ]]</a-tag>
+        </td>
+      </tr>
+      <tr v-if="inbound.isSS2022">
+        <td>{{ i18n "password" }}</td>
+        <td>
+          <a-tooltip :title="[[ inbound.settings.password  ]]">
+            <a-tag class="info-large-tag">[[ inbound.settings.password ]]</a-tag>
+          </a-tooltip>
+        </td>
+      </tr>
+      <tr>
+        <td>{{ i18n "pages.inbounds.network" }}</td>
+        <td>
+          <a-tag color="green">[[ inbound.settings.network ]]</a-tag>
+        </td>
+      </tr>
     </table>
     <template v-if="infoModal.clientSettings">
-        <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
+      <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
-        <table style="margin-bottom: 10px;">
+      <table style="margin-bottom: 10px;">
-            <tr>
+        <tr>
-                <td>{{ i18n "pages.inbounds.email" }}</td>
+          <td>{{ i18n "pages.inbounds.email" }}</td>
-                <td><a-tag color="green">[[ infoModal.clientSettings.email ]]</a-tag></td>
+          <td v-if="infoModal.clientSettings.email">
-            </tr>
+            <a-tag color="green">[[ infoModal.clientSettings.email ]]</a-tag>
-            <tr v-if="infoModal.clientSettings.id">
+          </td>
-                <td>ID</td>
+          <td v-else>
-                <td><a-tag>[[ infoModal.clientSettings.id ]]</a-tag></td>
+            <a-tag color="red">{{ i18n "none" }}</a-tag>
-            </tr>
+          </td>
-            <tr v-if="infoModal.inbound.canEnableTlsFlow()">
+        </tr>
-                <td>Flow</td>
+        <tr v-if="infoModal.clientSettings.id">
-                <td><a-tag>[[ infoModal.clientSettings.flow ]]</a-tag></td>
+          <td>ID</td>
-            </tr>
+          <td>
-            <tr v-if="infoModal.inbound.xtls">
+            <a-tag>[[ infoModal.clientSettings.id ]]</a-tag>
-                <td>Flow</td>
+          </td>
-                <td><a-tag>[[ infoModal.clientSettings.flow ]]</a-tag></td>
+        </tr>
-            </tr>
+        <tr v-if="infoModal.inbound.canEnableTlsFlow()">
-            <tr v-if="infoModal.clientSettings.password">
+          <td>Flow</td>
-                <td>{{ i18n "password" }}</td>
+          <td v-if="infoModal.clientSettings.flow">
-                <td>
+            <a-tag>[[ infoModal.clientSettings.flow ]]</a-tag>
-                    <a-tooltip :title="[[ infoModal.clientSettings.password  ]]">
+          </td>
-                        <a-tag class="info-large-tag">[[ infoModal.clientSettings.password  ]]</a-tag>
+          <td v-else>
-                    </a-tooltip>
+            <a-tag color="orange">{{ i18n "none" }}</a-tag>
-                </td>
+          </td>
-            </tr>
+        </tr>
-            <tr>
+        <tr v-if="infoModal.inbound.xtls">
-                <td>{{ i18n "status" }}</td>
+          <td>Flow</td>
-                <td>
+          <td v-if="infoModal.clientSettings.flow">
-                    <a-tag v-if="isEnable" color="green">{{ i18n "enabled" }}</a-tag>
+            <a-tag>[[ infoModal.clientSettings.flow ]]</a-tag>
-                    <a-tag v-else>{{ i18n "disabled" }}</a-tag>
+          </td>
-                    <a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag>
+          <td v-else>
-                </td>
+            <a-tag color="orange">{{ i18n "none" }}</a-tag>
-            </tr>
+          </td>
-            <tr v-if="infoModal.clientStats">
+        </tr>
-                <td>{{ i18n "usage" }}</td>
+        <tr v-if="infoModal.clientSettings.password">
-                <td>
+          <td>{{ i18n "password" }}</td>
-                    <a-tag color="green">[[ sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</a-tag>
+          <td>
-                    <a-tag>↑ [[ sizeFormat(infoModal.clientStats.up) ]] / [[ sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag>
+            <a-tooltip :title="[[ infoModal.clientSettings.password  ]]">
-                </td>
+              <a-tag class="info-large-tag">[[ infoModal.clientSettings.password ]]</a-tag>
-            </tr>
+            </a-tooltip>
-        </table>
+          </td>
-        <table style="margin-bottom: 10px; width: 100%; text-align: center;">
+        </tr>
-            <tr>
+        <tr>
-                <th>{{ i18n "remained" }}</th>
+          <td>{{ i18n "status" }}</td>
-                <th>{{ i18n "pages.inbounds.totalFlow" }}</th>
+          <td>
-                <th>{{ i18n "pages.inbounds.expireDate" }}</th>
+            <a-tag v-if="isEnable" color="green">{{ i18n "enabled" }}</a-tag>
-            </tr>
+            <a-tag v-else>{{ i18n "disabled" }}</a-tag>
-            <tr>
+            <a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag>
-                <td>
+          </td>
-                    <a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
+        </tr>
-                        [[ getRemStats() ]]
+        <tr v-if="infoModal.clientStats">
-                    </a-tag>
+          <td>{{ i18n "usage" }}</td>
-                </td>
+          <td>
-                <td>
+            <a-tag color="green">[[ sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</a-tag>
-                    <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
+            <a-tag>↑ [[ sizeFormat(infoModal.clientStats.up) ]] / [[ sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag>
-                        [[ sizeFormat(infoModal.clientSettings.totalGB) ]]
+          </td>
-                    </a-tag>
+        </tr>
-                    <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
+      </table>
-                </td>
+      <table style="display: inline-table; margin-block: 10px; width: 100%; text-align: center;">
-                <td>
+        <tr>
-                    <template v-if="infoModal.clientSettings.expiryTime > 0">
+          <th>{{ i18n "remained" }}</th>
-                        <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)">
+          <th>{{ i18n "pages.inbounds.totalFlow" }}</th>
-                            [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
+          <th>{{ i18n "pages.inbounds.expireDate" }}</th>
-                        </a-tag>
+        </tr>
-                    </template>
+        <tr>
-                    <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="green">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag>
+          <td>
-                    <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
+            <a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)"> [[ getRemStats() ]] </a-tag>
-                </td>
+          </td>
-            </tr>
+          <td>
-        </table>
+            <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)"> [[ sizeFormat(infoModal.clientSettings.totalGB) ]] </a-tag>
-        <template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
+            <a-tag v-else color="purple" class="infinite-tag">
-            <a-divider>Subscription URL</a-divider>
+              <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-            <a-row>
+                <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
-                <a-col :sx="24" :md="22">SUB: <a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a></a-col>
+              </svg>
-                <a-col :sx="24" :md="2" style="text-align: right;">
+            </a-tag>
-                    <a-tooltip title='{{ i18n "copy" }}'>
+          </td>
-                        <button class="ant-btn ant-btn-primary" id="copy-sub-link" @click="copyToClipboard('copy-sub-link', infoModal.subLink)">
+          <td>
-                            <a-icon type="snippets"></a-icon>
+            <template v-if="infoModal.clientSettings.expiryTime > 0">
-                        </button>
+              <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)"> [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]] </a-tag>
-                    </a-tooltip>
+            </template>
-                </a-col>
+            <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="green">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}
-            </a-row>
+            </a-tag>
-            <a-row>
+            <a-tag v-else color="purple" class="infinite-tag">
-                <a-col :sx="24" :md="22">JSON: <a :href="[[ infoModal.subJsonLink ]]" target="_blank">[[ infoModal.subJsonLink ]]</a></a-col>
+              <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                <a-col :sx="24" :md="2" style="text-align: right; margin-top: 5px;">
+                <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
-                    <a-tooltip title='{{ i18n "copy" }}'>
+              </svg>
-                        <button class="ant-btn ant-btn-primary" id="copy-subJson-link" @click="copyToClipboard('copy-subJson-link', infoModal.subJsonLink)">
+            </a-tag>
-                            <a-icon type="snippets"></a-icon>
+          </td>
-                        </button>
+        </tr>
-                    </a-tooltip>
+      </table>
-                </a-col>
+      <template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
-            </a-row>
+        <a-divider>Subscription URL</a-divider>
-        </template>
+        <tr-info-row class="tr-info-row">
-        <template v-if="app.tgBotEnable && infoModal.clientSettings.tgId">
+          <tr-info-title class="tr-info-title">
-            <a-divider>Telegram ID</a-divider>
+            <a-tag color="purple">Subscription Link</a-tag>
-            <a-row>
+            <a-tooltip title='{{ i18n "copy" }}'>
-                <a-col :sx="24" :md="22">[[ infoModal.clientSettings.tgId ]]</a-col>
+              <a-button size="small" icon="snippets" id="copy-sub-link" @click="copyToClipboard('copy-sub-link', infoModal.subLink)"></a-button>
-                <a-col :sx="24" :md="2" style="text-align: right;">
+            </a-tooltip>
-                    <a-tooltip title='{{ i18n "copy" }}'>
+          </tr-info-title>
-                        <button class="ant-btn ant-btn-primary" id="copy-tg-link" @click="copyToClipboard('copy-tg-link', infoModal.clientSettings.tgId)">
+          <a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a>
-                            <a-icon type="snippets"></a-icon>
+        </tr-info-row>
-                        </button>
+        <tr-info-row class="tr-info-row">
-                    </a-tooltip>
+          <tr-info-title class="tr-info-title">
-                </a-col>
+            <a-tag color="purple">Json Link</a-tag>
-            </a-row>
+            <a-tooltip title='{{ i18n "copy" }}'>
-        </template>
+              <a-button size="small" icon="snippets" id="copy-subJson-link" @click="copyToClipboard('copy-subJson-link', infoModal.subJsonLink)"></a-button>
-        <template v-if="dbInbound.hasLink()">
+            </a-tooltip>
-            <a-divider>URL</a-divider>
+          </tr-info-title>
-            <a-row v-for="(link,index) in infoModal.links">
+          <a :href="[[ infoModal.subJsonLink ]]" target="_blank">[[ infoModal.subJsonLink ]]</a>
-                <a-col :sx="24" :md="22"><a-tag color="green">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
+        </tr-info-row>
-                <a-col :sx="24" :md="2" style="text-align: right;">
+      </template>
-                    <a-tooltip title='{{ i18n "copy" }}'>
+      <template v-if="app.tgBotEnable && infoModal.clientSettings.tgId">
-                        <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
+        <a-divider>Telegram ID</a-divider>
-                            <a-icon type="snippets"></a-icon>
+        <tr-info-row class="tr-info-row">
-                        </button>
+          <tr-info-title class="tr-info-title">
-                    </a-tooltip>
+            <a-tag color="blue">[[ infoModal.clientSettings.tgId ]]</a-tag>
-                </a-col>
+            <a-tooltip title='{{ i18n "copy" }}'>
-            </a-row>
+              <a-button size="small" icon="snippets" id="copy-tg-link" @click="copyToClipboard('copy-tg-link', infoModal.clientSettings.tgId)"></a-button>
-        </template>
+            </a-tooltip>
+          </tr-info-title>
+        </tr-info-row>
+      </template>
+      <template v-if="dbInbound.hasLink()">
+        <a-divider>URL</a-divider>
+        <tr-info-row v-for="(link,index) in infoModal.links" class="tr-info-row">
+          <tr-info-title class="tr-info-title">
+            <a-tag class="tr-info-tag" color="green">[[ link.remark ]]</a-tag>
+            <a-tooltip title='{{ i18n "copy" }}'>
+              <a-button style="min-width: 24px;" size="small" icon="snippets" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)"></a-button>
+            </a-tooltip>
+          </tr-info-title>
+          <code>[[ link.link ]]</code>
+        </tr-info-row>
+      </template>
     </template>
     <template v-else>
-        <template v-if="dbInbound.isSS && !inbound.isSSMultiUser">
+      <template v-if="dbInbound.isSS && !inbound.isSSMultiUser">
-            <a-divider>URL</a-divider>
+        <a-divider>URL</a-divider>
-            <a-row v-for="(link,index) in infoModal.links">
+        <tr-info-row v-for="(link,index) in infoModal.links" class="tr-info-row">
-                <a-col :span="22"><a-tag color="green">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
+          <tr-info-title class="tr-info-title">
-                <a-col :span="2" style="text-align: right;">
+            <a-tag class="tr-info-tag" color="green">[[ link.remark ]]</a-tag>
-                    <a-tooltip title='{{ i18n "copy" }}'>
+            <a-tooltip title='{{ i18n "copy" }}'>
-                        <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
+              <a-button style="min-width: 24px;" size="small" icon="snippets" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)"></a-button>
-                            <a-icon type="snippets"></a-icon>
+            </a-tooltip>
-                        </button>
+          </tr-info-title>
-                    </a-tooltip>
+          <code>[[ link.link ]]</code>
-                </a-col>
+        </tr-info-row>
-            </a-row>
+      </template>
+      <table v-if="inbound.protocol == Protocols.DOKODEMO" class="tr-info-table">
+        <tr>
+          <th>{{ i18n "pages.inbounds.targetAddress" }}</th>
+          <th>{{ i18n "pages.inbounds.destinationPort" }}</th>
+          <th>{{ i18n "pages.inbounds.network" }}</th>
+          <th>FollowRedirect</th>
+        </tr>
+        <tr>
+          <td>
+            <a-tag color="green">[[ inbound.settings.address ]]</a-tag>
+          </td>
+          <td>
+            <a-tag color="green">[[ inbound.settings.port ]]</a-tag>
+          </td>
+          <td>
+            <a-tag color="green">[[ inbound.settings.network ]]</a-tag>
+          </td>
+          <td>
+            <a-tag color="green">[[ inbound.settings.followRedirect ]]</a-tag>
+          </td>
+        </tr>
+      </table>
+      <table v-if="dbInbound.isSocks" class="tr-info-table">
+        <tr>
+          <th>{{ i18n "password" }} Auth</th>
+          <th>{{ i18n "pages.inbounds.enable" }} udp</th>
+          <th>IP</th>
+        </tr>
+        <tr>
+          <td>
+            <a-tag color="green">[[ inbound.settings.auth ]]</a-tag>
+          </td>
+          <td>
+            <a-tag color="green">[[ inbound.settings.udp]]</a-tag>
+          </td>
+          <td>
+            <a-tag color="green">[[ inbound.settings.ip ]]</a-tag>
+          </td>
+        </tr>
+        <template v-if="inbound.settings.auth == 'password'">
+          <tr>
+            <td></td>
+            <td>{{ i18n "username" }}</td>
+            <td>{{ i18n "password" }}</td>
+          </tr>
+          <tr v-for="account,index in inbound.settings.accounts">
+            <td>[[ index ]]</td>
+            <td>
+              <a-tag color="green">[[ account.user ]]</a-tag>
+            </td>
+            <td>
+              <a-tag color="green">[[ account.pass ]]</a-tag>
+            </td>
+          </tr>
         </template>
-        <table v-if="inbound.protocol == Protocols.DOKODEMO" style="margin-bottom: 10px; width: 100%;">
+      </table>
-            <tr>
+      <table v-if="dbInbound.isHTTP" class="tr-info-table">
-                <th>{{ i18n "pages.inbounds.targetAddress" }}</th>
+        <tr>
-                <th>{{ i18n "pages.inbounds.destinationPort" }}</th>
+          <th></th>
-                <th>{{ i18n "pages.inbounds.network" }}</th>
+          <th>{{ i18n "username" }}</th>
-                <th>FollowRedirect</th>
+          <th>{{ i18n "password" }}</th>
-            </tr><tr>
+        </tr>
-                <td><a-tag color="green">[[ inbound.settings.address ]]</a-tag></td>
+        <tr v-for="account,index in inbound.settings.accounts">
-                <td><a-tag color="green">[[ inbound.settings.port ]]</a-tag></td>
+          <td>[[ index ]]</td>
-                <td><a-tag color="green">[[ inbound.settings.network ]]</a-tag></td>
+          <td>
-                <td><a-tag color="green">[[ inbound.settings.followRedirect ]]</a-tag></td>
+            <a-tag color="green">[[ account.user ]]</a-tag>
-            </tr>
+          </td>
-        </table>
+          <td>
-        <table v-if="dbInbound.isSocks" style="margin-bottom: 10px; width: 100%;">
+            <a-tag color="green">[[ account.pass ]]</a-tag>
-            <tr>
+          </td>
-                <th>{{ i18n "password" }} Auth</th>
+        </tr>
-                <th>{{ i18n "pages.inbounds.enable" }} udp</th>
+      </table>
-                <th>IP</th>
+      <table v-if="dbInbound.isWireguard" class="tr-info-table">
-            </tr>
+        <tr class="client-table-odd-row">
-            <tr>
+          <td>{{ i18n "pages.xray.wireguard.secretKey" }}</td>
-                <td><a-tag color="green">[[ inbound.settings.auth ]]</a-tag></td>
+          <td>[[ inbound.settings.secretKey ]]</td>
-                <td><a-tag color="green">[[ inbound.settings.udp]]</a-tag></td>
+        </tr>
-                <td><a-tag color="green">[[ inbound.settings.ip ]]</a-tag></td>
+        <tr>
-            </tr>
+          <td>{{ i18n "pages.xray.wireguard.publicKey" }}</td>
-            <template v-if="inbound.settings.auth == 'password'">
+          <td>[[ inbound.settings.pubKey ]]</td>
-            <tr>
+        </tr>
-                <td> </td>
+        <tr class="client-table-odd-row">
-                <td>{{ i18n "username" }}</td>
+          <td>MTU</td>
-                <td>{{ i18n "password" }}</td>
+          <td>[[ inbound.settings.mtu ]]</td>
-            </tr><tr v-for="account,index in inbound.settings.accounts">
+        </tr>
-                <td>[[ index ]]</td>
+        <tr>
-                <td><a-tag color="green">[[ account.user ]]</a-tag></td>
+          <td>Kernel Mode</td>
-                <td><a-tag color="green">[[ account.pass ]]</a-tag></td>
+          <td>[[ inbound.settings.kernelMode ]]</td>
-            </tr>
+        </tr>
-            </template>
-        </table>
-        <table v-if="dbInbound.isHTTP" style="margin-bottom: 10px; width: 100%;">
-            <tr>
-                <th> </th>
-                <th>{{ i18n "username" }}</th>
-                <th>{{ i18n "password" }}</th>
-            </tr><tr v-for="account,index in inbound.settings.accounts">
-                <td>[[ index ]]</td>
-                <td><a-tag color="green">[[ account.user ]]</a-tag></td>
-                <td><a-tag color="green">[[ account.pass ]]</a-tag></td>
-            </tr>
-        </table>
-        <table v-if="dbInbound.isWireguard" style="margin-bottom: 10px; width: 100%;">
-            <tr class="client-table-odd-row">
-                <td>{{ i18n "pages.xray.wireguard.secretKey" }}</td>
-                <td>[[ inbound.settings.secretKey ]]</td>
-            </tr>
-            <tr>
-                <td>{{ i18n "pages.xray.wireguard.publicKey" }}</td>
-                <td>[[ inbound.settings.pubKey ]]</td>
-            </tr>
-            <tr class="client-table-odd-row">
-                <td>MTU</td>
-                <td>[[ inbound.settings.mtu ]]</td>
-            </tr>
-            <tr>
-                <td>Kernel Mode</td>
-                <td>[[ inbound.settings.kernelMode ]]</td>
-            </tr>
         <template v-for="(peer, index) in inbound.settings.peers">
-            <tr>
+          <tr>
-                <td colspan="2"><a-divider>Peer [[ index + 1 ]]</a-divider></td>
+            <td colspan="2">
-            </tr>
+              <a-divider>Peer [[ index + 1 ]]</a-divider>
-            <tr class="client-table-odd-row">
+            </td>
-                <td>{{ i18n "pages.xray.wireguard.secretKey" }}</td>
+          </tr>
-                <td>[[ peer.privateKey ]]</td>
+          <tr class="client-table-odd-row">
-            </tr>
+            <td>{{ i18n "pages.xray.wireguard.secretKey" }}</td>
-            <tr>
+            <td>[[ peer.privateKey ]]</td>
-                <td>{{ i18n "pages.xray.wireguard.publicKey" }}</td>
+          </tr>
-                <td>[[ peer.publicKey ]]</td>
+          <tr>
-            </tr>
+            <td>{{ i18n "pages.xray.wireguard.publicKey" }}</td>
-            <tr class="client-table-odd-row">
+            <td>[[ peer.publicKey ]]</td>
-                <td>{{ i18n "pages.xray.wireguard.psk" }}</td>
+          </tr>
-                <td>[[ peer.psk ]]</td>
+          <tr class="client-table-odd-row">
-            </tr>
+            <td>{{ i18n "pages.xray.wireguard.psk" }}</td>
-            <tr>
+            <td>[[ peer.psk ]]</td>
-                <td>{{ i18n "pages.xray.wireguard.allowedIPs" }}</td>
+          </tr>
-                <td>[[ peer.allowedIPs.join(",") ]]</td>
+          <tr>
-            </tr>
+            <td>{{ i18n "pages.xray.wireguard.allowedIPs" }}</td>
-            <tr class="client-table-odd-row">
+            <td>[[ peer.allowedIPs.join(",") ]]</td>
-                <td>Keep Alive</td>
+          </tr>
-                <td>[[ peer.keepAlive ]]</td>
+          <tr class="client-table-odd-row">
-            </tr>
+            <td>Keep Alive</td>
-            <tr>
+            <td>[[ peer.keepAlive ]]</td>
-                <td colspan="2">
+          </tr>
-                    <a-row>
+          <tr>
-                        <a-col :span="22" style="overflow-wrap: anywhere;">
+            <td colspan="2">
-                            <a-tag color="blue">Config</a-tag>
+              <tr-info-row v-for="(link,index) in infoModal.links" class="tr-info-row">
-                            <div 
+                <tr-info-title class="tr-info-title">
-                            v-html="infoModal.links[index].replaceAll(`\n`,`<br />`)"
+                  <a-tag color="blue">Config</a-tag>
-                            style="border-radius: 1rem; padding: 0.5rem;"
+                  <a-tooltip title='{{ i18n "copy" }}'>
-                            class="client-table-odd-row"></div>
+                    <a-button style="min-width: 24px;" size="small" icon="snippets" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, infoModal.links[index])"></a-button>
-                        </a-col>
+                  </a-tooltip>
-                        <a-col :span="2" style="text-align: right;">
+                </tr-info-title>
-                            <a-tooltip title='{{ i18n "copy" }}'>
+                <div v-html="infoModal.links[index].replaceAll(`\n`,`<br />`)" style="border-radius: 1rem; padding: 0.5rem;" class="client-table-odd-row">
-                                <button class="ant-btn ant-btn-primary"
+                </div>
-                                    :id="'copy-url-link-'+index"
+              </tr-info-row>
-                                    @click="copyToClipboard('copy-url-link-'+index, infoModal.links[index])">
+            </td>
-                                    <a-icon type="snippets"></a-icon>
+          </tr>
-                                </button>
+      </table>
-                            </a-tooltip>
+    </template>
-                        </a-col>
-                    </a-row>
-                </td>
-            </tr>
-        </table>
-        </template>
     </template>
 </a-modal>
 <script>
-    const infoModal = {
+  const infoModal = {
-        visible: false,
+    visible: false,
-        inbound: new Inbound(),
+    inbound: new Inbound(),
-        dbInbound: new DBInbound(),
+    dbInbound: new DBInbound(),
-        clientSettings: null,
+    clientSettings: null,
-        clientStats: [],
+    clientStats: [],
-        upStats: 0,
+    upStats: 0,
-        downStats: 0,
+    downStats: 0,
-        clipboard: null,
+    clipboard: null,
-        links: [],
+    links: [],
-        index: null,
+    index: null,
-        isExpired: false,
+    isExpired: false,
-        subLink: '',
+    subLink: '',
-        subJsonLink: '',
+    subJsonLink: '',
-        show(dbInbound, index) {
+    show(dbInbound, index) {
-            this.index = index;
+      this.index = index;
-            this.inbound = dbInbound.toInbound();
+      this.inbound = dbInbound.toInbound();
-            this.dbInbound = new DBInbound(dbInbound);
+      this.dbInbound = new DBInbound(dbInbound);
-            this.clientSettings = this.inbound.clients ? this.inbound.clients[index] : null;
+      this.clientSettings = this.inbound.clients ? this.inbound.clients[index] : null;
-            this.isExpired = this.inbound.clients ? this.inbound.isExpiry(index): this.dbInbound.isExpiry;
+      this.isExpired = this.inbound.clients ? this.inbound.isExpiry(index) : this.dbInbound.isExpiry;
-            this.clientStats = this.inbound.clients ? this.dbInbound.clientStats.find(row => row.email === this.clientSettings.email) : [];
+      this.clientStats = this.inbound.clients ? this.dbInbound.clientStats.find(row => row.email === this.clientSettings.email) : [];
-            if (this.inbound.protocol == Protocols.WIREGUARD){
+      if (this.inbound.protocol == Protocols.WIREGUARD) {
-                this.links = this.inbound.genInboundLinks(dbInbound.remark).split('\r\n')
+        this.links = this.inbound.genInboundLinks(dbInbound.remark).split('\r\n')
-            } else {
+      } else {
-                this.links = this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, this.clientSettings);
+        this.links = this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, this.clientSettings);
-            }
+      }
-            if (this.clientSettings) {
+      if (this.clientSettings) {
-                if (this.clientSettings.subId) {
+        if (this.clientSettings.subId) {
-                    this.subLink = this.genSubLink(this.clientSettings.subId);
+          this.subLink = this.genSubLink(this.clientSettings.subId);
-                    this.subJsonLink = this.genSubJsonLink(this.clientSettings.subId);
+          this.subJsonLink = this.genSubJsonLink(this.clientSettings.subId);
-                }
-            }
-            this.visible = true;
-        },
-        close() {
-            infoModal.visible = false;
-        },
-        genSubLink(subID) {
-            return app.subSettings.subURI+subID;
-        },
-        genSubJsonLink(subID) {
-            return app.subSettings.subJsonURI+subID;
         }
-    };
+      }
-
+      this.visible = true;
-    const infoModalApp = new Vue({
+    },
-        delimiters: ['[[', ']]'],
+    close() {
-        el: '#inbound-info-modal',
+      infoModal.visible = false;
-        data: {
+    },
-            infoModal,
+    genSubLink(subID) {
-            get dbInbound() {
+      return app.subSettings.subURI + subID;
-                return this.infoModal.dbInbound;
+    },
-            },
+    genSubJsonLink(subID) {
-            get inbound() {
+      return app.subSettings.subJsonURI + subID;
-                return this.infoModal.inbound;
+    }
-            },
+  };
-            get isActive() {
+  const infoModalApp = new Vue({
-                if(infoModal.clientStats){
+    delimiters: ['[[', ']]'],
-                    return infoModal.clientStats.enable;
+    el: '#inbound-info-modal',
-                }
+    data: {
-                return true;
+      infoModal,
-            },
+      get dbInbound() {
-            get isEnable() {
+        return this.infoModal.dbInbound;
-                if(infoModal.clientSettings){
+      },
-                    return infoModal.clientSettings.enable;
+      get inbound() {
-                }
+        return this.infoModal.inbound;
-                return infoModal.dbInbound.isEnable;
+      },
-            },
+      get isActive() {
-        },
+        if (infoModal.clientStats) {
-        methods: {
+          return infoModal.clientStats.enable;
-            copyToClipboard(elmentId,content) {
+        }
-                this.infoModal.clipboard = new ClipboardJS('#' + elmentId, {
+        return true;
-                        text: () => content,
+      },
-                    });
+      get isEnable() {
-                this.infoModal.clipboard.on('success', () => { 
+        if (infoModal.clientSettings) {
-                    app.$message.success('{{ i18n "copied" }}')
+          return infoModal.clientSettings.enable;
-                    this.infoModal.clipboard.destroy();
+        }
-                });
+        return infoModal.dbInbound.isEnable;
-            },
+      },
-            statsColor(stats) {
+    },
-                return usageColor(stats.up + stats.down, app.trafficDiff, stats.total);
+    methods: {
-            },
+      copyToClipboard(elmentId, content) {
-            getRemStats() {
+        this.infoModal.clipboard = new ClipboardJS('#' + elmentId, {
-                remained = this.infoModal.clientStats.total - this.infoModal.clientStats.up - this.infoModal.clientStats.down;
+          text: () => content,
-                return remained>0 ? sizeFormat(remained) : '-';
+        });
-            },
+        this.infoModal.clipboard.on('success', () => {
-        },
+          app.$message.success('{{ i18n "copied" }}')
-        
+          this.infoModal.clipboard.destroy();
-    });
+        });
-
+      },
+      statsColor(stats) {
+        return usageColor(stats.up + stats.down, app.trafficDiff, stats.total);
+      },
+      getRemStats() {
+        remained = this.infoModal.clientStats.total - this.infoModal.clientStats.up - this.infoModal.clientStats.down;
+        return remained > 0 ? sizeFormat(remained) : '-';
+      },
+    },
+  });
 </script>
 {{end}}

web/html/xui/inbounds.html

@@ -2,6 +2,34 @@
 <html lang="en">
 {{template "head" .}}
 <style>
+  .ant-table:not(.ant-table-expanded-row .ant-table) {
+    outline: 1px solid #f0f0f0;
+    outline-offset: -1px;
+    border-radius: 1rem;
+    overflow-x: hidden;
+  }
+  .dark .ant-table:not(.ant-table-expanded-row .ant-table) {
+    outline-color: var(--dark-color-table-ring);
+  }
+  .ant-table .ant-table-content .ant-table-scroll .ant-table-body {
+    overflow-y: hidden;
+  }
+  .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper {
+	  margin:-10px 22px -10px !important;
+  }
+  .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper .ant-table {
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+  .ant-table .ant-table-content .ant-table-tbody tr:last-child tr:last-child td {
+	  border-bottom-color: transparent;
+  }
+  .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:first-child {
+    border-bottom-left-radius: 6px;
+  }
+  .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:last-child {
+    border-bottom-right-radius: 6px;
+  }
   @media (min-width: 769px) {
     .ant-layout-content {
       margin: 24px 16px;
@@ -11,6 +39,9 @@
     .ant-card-body {
       padding: .5rem;
     }
+    .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper {
+	    margin:-10px 2px -10px !important;
+    }
   }
   .ant-col-sm-24 {
     margin: 0.5rem -2rem 0.5rem 2rem;
@@ -22,13 +53,14 @@
     padding: 0 5px;
     border-radius: 2rem;
     min-width: 50px;
+    min-height: 22px;
   }
   .infinite-bar .ant-progress-inner .ant-progress-bg {
     background-color: #F2EAF1;
     border: #D5BED2 solid 1px;
   }
   .dark .infinite-bar .ant-progress-inner .ant-progress-bg {
-    background-color: #7a316f;
+    background-color: #7a316f !important;
     border: #7a316f solid 1px;
   }
   .ant-collapse {
@@ -53,6 +85,41 @@
       opacity: .2;
     }
   }
+  .tr-table-box {
+    display: flex;
+    gap: 4px;
+    justify-content: center;
+    align-items: center;
+  }
+  .tr-table-rt {
+    flex-basis: 70px;
+    min-width: 70px;
+    text-align: end;
+  }
+  .tr-table-lt {
+    flex-basis: 70px;
+    min-width: 70px;
+    text-align: start;
+  }
+  .tr-table-bar {
+    flex-basis: 160px;
+    min-width: 60px;
+  }
+  .tr-infinity-ch {
+    font-size: 14pt;
+    max-height: 24px;
+    display: inline-flex;
+    align-items: center;
+  }
+  .ant-table-expanded-row .ant-table .ant-table-body {
+    overflow-x: hidden;
+  }
+  .ant-table-expanded-row .ant-table-tbody>tr>td {
+    padding: 10px 2px;
+  }
+  .ant-table-expanded-row .ant-table-thead>tr>th {
+    padding: 12px 2px;
+  }
 </style>
 
 <body>
@@ -324,8 +391,8 @@
                         [[ sizeFormat(dbInbound.total) ]]
                     </template>
                     <template v-else>
-                      <svg style="fill: currentColor; height: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+                      <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                        <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" />
+                        <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
                       </svg>
                     </template>
                   </a-tag>
@@ -343,7 +410,11 @@
                     [[ remainedDays(dbInbound._expiryTime) ]]
                   </a-tag>
                 </a-popover>
-                <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
+                <a-tag v-else color="purple" class="infinite-tag">
+                  <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
+                    <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                  </svg>
+                </a-tag>
               </template>
               <template slot="info" slot-scope="text, dbInbound">
                 <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
@@ -415,7 +486,11 @@
                                 <template v-if="dbInbound.total > 0">
                                     [[ sizeFormat(dbInbound.total) ]]
                                 </template>
-                              <template v-else>&infin;</template>
+                              <template v-else>
+                                <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
+                                  <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                                </svg>
+                              </template>
                             </a-tag>
                           </a-popover>
                         </td>
@@ -426,7 +501,11 @@
                           <a-tag style="min-width: 50px; text-align: center;" v-if="dbInbound.expiryTime > 0" :color="dbInbound.isExpiry? 'red': 'blue'">
                             [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
                           </a-tag>
-                          <a-tag v-else style="text-align: center;" color="purple" class="infinite-tag">&infin;</a-tag>
+                          <a-tag v-else style="text-align: center;" color="purple" class="infinite-tag">
+                            <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
+                              <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                            </svg>
+                          </a-tag>
                         </td>
                       </tr>
                     </table>
@@ -445,7 +524,7 @@
                   :columns="isMobile ? innerMobileColumns : innerColumns"
                   :data-source="getInboundClients(record)"
                   :pagination=pagination(getInboundClients(record))
-                  :style="isMobile ? 'margin: -12px 2px -13px;' : 'margin: -12px 22px -13px;'">
+                  :style="isMobile ? 'margin: -10px 2px -11px;' : 'margin: -10px 22px -11px;'">
                   {{template "client_table"}}
                 </a-table>
               </template>
@@ -543,7 +622,7 @@
         { title: '{{ i18n "online" }}', width: 30, scopedSlots: { customRender: 'online' } },
         { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
         { title: '{{ i18n "pages.inbounds.traffic" }}', width: 80, align: 'center', scopedSlots: { customRender: 'traffic' } },
-        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 100, align: 'center', scopedSlots: { customRender: 'expiryTime' } },
+        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 80, align: 'center', scopedSlots: { customRender: 'expiryTime' } },
     ];
 
     const innerMobileColumns = [

web/html/xui/index.html

@@ -2,20 +2,23 @@
 <html lang="en">
 {{template "head" .}}
 <style>
-    @media (min-width: 769px) {
+  @media (min-width: 769px) {
-        .ant-layout-content {
+    .ant-layout-content {
-            margin: 24px 16px;
+      margin: 24px 16px;
-        }
-        .ant-card-hoverable {
-            margin-inline: 0.3rem;
-        }
     }
-    .ant-col-sm-24 {
+    .ant-card-hoverable {
-        margin-top: 10px;
+      margin-inline: 0.3rem;
     }
-    .ant-card-dark h2 {
+    .ant-alert-error {
-        color: var(--dark-color-text-primary);
+      margin-inline: 0.3rem;
     }
+  }
+  .ant-col-sm-24 {
+    margin-top: 10px;
+  }
+  .ant-card-dark h2 {
+    color: var(--dark-color-text-primary);
+  }
 </style>
 
 <body>

web/html/xui/xray.html

@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 {{template "head" .}}
-<link rel="stylesheet" href="{{ .base_path }}assets/codemirror/codemirror.css?{{ .cur_ver }}">
+<link rel="stylesheet" href="{{ .base_path }}assets/codemirror/codemirror.min.css?{{ .cur_ver }}">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/fold/foldgutter.css">
-<link rel="stylesheet" href="{{ .base_path }}assets/codemirror/xq.css?{{ .cur_ver }}">
+<link rel="stylesheet" href="{{ .base_path }}assets/codemirror/xq.min.css?{{ .cur_ver }}">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/lint/lint.css">
 
 <script src="{{ .base_path }}assets/base64/base64.min.js"></script>
 <script src="{{ .base_path }}assets/js/model/outbound.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/codemirror/codemirror.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/codemirror/codemirror.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/codemirror/javascript.js"></script>
 <script src="{{ .base_path }}assets/codemirror/jshint.js"></script>
 <script src="{{ .base_path }}assets/codemirror/jsonlint.js"></script>
@@ -19,44 +19,44 @@
 <script src="{{ .base_path }}assets/codemirror/fold/foldgutter.js"></script>
 <script src="{{ .base_path }}assets/codemirror/fold/brace-fold.js"></script>
 <style>
-    @media (min-width: 769px) {
+  @media (min-width: 769px) {
-        .ant-layout-content {
+    .ant-layout-content {
-            margin: 24px 16px;
+      margin: 24px 16px;
-        }
     }
-    @media (max-width: 768px) {
+  }
-        .ant-tabs-nav .ant-tabs-tab {
+  @media (max-width: 768px) {
-            margin: 0;
+    .ant-tabs-nav .ant-tabs-tab {
-            padding: 12px .5rem;
+      margin: 0;
-        }
+      padding: 12px .5rem;
-        .ant-table-thead > tr > th,
-        .ant-table-tbody > tr > td {
-            padding: 10px 0px;
-        }
     }
-    .ant-tabs-bar {
+    .ant-table-thead>tr>th,
-        margin: 0;
+    .ant-table-tbody>tr>td {
-    }
+      padding: 10px 0px;
-    .ant-list-item {
-        display: block;
-    }
-    .collapse-title {
-        color: inherit;
-        font-weight: bold;
-        font-size: 18px;
-        padding: 10px 20px;
-        border-bottom: 2px solid;
-    }
-    .collapse-title > i {
-        color: inherit;
-        font-size: 24px;
-    }
-    .ant-collapse-content-box > li {
-        padding: 12px 0 0 0 !important;
-    }
-    .ant-list-item > li {
-        padding: 10px 20px !important;
     }
+  }
+  .ant-tabs-bar {
+    margin: 0;
+  }
+  .ant-list-item {
+    display: block;
+  }
+  .collapse-title {
+    color: inherit;
+    font-weight: bold;
+    font-size: 18px;
+    padding: 10px 20px;
+    border-bottom: 2px solid;
+  }
+  .collapse-title>i {
+    color: inherit;
+    font-size: 24px;
+  }
+  .ant-collapse-content-box>li {
+    padding: 12px 0 0 0 !important;
+  }
+  .ant-list-item>li {
+    padding: 10px 20px !important;
+  }
 </style>
 <body>
   <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
@@ -443,7 +443,7 @@
                 <a-table :columns="outboundColumns" bordered
                     :row-key="r => r.key"
                     :data-source="outboundData"
-                    :scroll="isMobile ? {} : { x: 200 }"
+                    :scroll="isMobile ? {} : { x: 800 }"
                     :pagination="false"
                     :indent-size="0"
                     :style="isMobile ? 'padding: 5px 5px' : 'margin-right: 1px;'">

web/html/xui/xray_rule_modal.html

@@ -1,261 +1,246 @@
 {{define "ruleModal"}}
-<a-modal id="rule-modal" v-model="ruleModal.visible" :title="ruleModal.title" @ok="ruleModal.ok"
+<a-modal id="rule-modal" v-model="ruleModal.visible" :title="ruleModal.title" @ok="ruleModal.ok" :confirm-loading="ruleModal.confirmLoading" :closable="true" :mask-closable="false" :ok-text="ruleModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
-         :confirm-loading="ruleModal.confirmLoading" :closable="true" :mask-closable="false"
+  <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-         :ok-text="ruleModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
+    <a-form-item label='Domain Matcher'>
-    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+      <a-select v-model="ruleModal.rule.domainMatcher" :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-form-item label='Domain Matcher'>
+        <a-select-option v-for="dm in ['','hybrid','linear']" :value="dm">[[ dm ]]</a-select-option>
-                    <a-select v-model="ruleModal.rule.domainMatcher" :dropdown-class-name="themeSwitcher.currentTheme">
+      </a-select>
-                        <a-select-option v-for="dm in ['','hybrid','linear']" :value="dm">[[ dm ]]</a-select-option>
+    </a-form-item>
-                    </a-select>
+    <a-form-item>
-        </a-form-item>
+      <template slot="label">
-        <a-form-item>
+        <a-tooltip>
-            <template slot="label">
+          <template slot="title">
-                <a-tooltip>
+            <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-                    <template slot="title">
+          </template> Source IPs <a-icon type="question-circle"></a-icon>
-                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+        </a-tooltip>
-                    </template>
+      </template>
-                    Source IPs <a-icon type="question-circle"></a-icon>
+      <a-input v-model.trim="ruleModal.rule.source"></a-input>
-                </a-tooltip>
+    </a-form-item>
-            </template>
+    <a-form-item>
-            <a-input v-model.trim="ruleModal.rule.source"></a-input>
+      <template slot="label">
-        </a-form-item>
+        <a-tooltip>
-        <a-form-item>
+          <template slot="title">
-            <template slot="label">
+            <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-                <a-tooltip>
+          </template> Source Port <a-icon type="question-circle"></a-icon>
-                    <template slot="title">
+        </a-tooltip>
-                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+      </template>
-                    </template>
+      <a-input v-model.trim="ruleModal.rule.sourcePort"></a-input>
-                    Source Port <a-icon type="question-circle"></a-icon>
+    </a-form-item>
-                </a-tooltip>
+    <a-form-item label='Network'>
-            </template>
+      <a-select v-model="ruleModal.rule.network" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-input v-model.trim="ruleModal.rule.sourcePort"></a-input>
+        <a-select-option v-for="x in ['','TCP','UDP','TCP,UDP']" :value="x">[[ x ]]</a-select-option>
-        </a-form-item>
+      </a-select>
-        <a-form-item label='Network'>
+    </a-form-item>
-            <a-select v-model="ruleModal.rule.network" :dropdown-class-name="themeSwitcher.currentTheme">
+    <a-form-item label='Protocol'>
-                <a-select-option v-for="x in ['','TCP','UDP','TCP,UDP']" :value="x">[[ x ]]</a-select-option>
+      <a-select v-model="ruleModal.rule.protocol" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
-            </a-select>
+        <a-select-option v-for="x in ['http','tls','bittorrent']" :value="x">[[ x ]]</a-select-option>
-        </a-form-item>
+      </a-select>
-        <a-form-item label='Protocol'>
+    </a-form-item>
-            <a-select v-model="ruleModal.rule.protocol" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
+    <a-form-item label='Attributes'>
-                <a-select-option v-for="x in ['http','tls','bittorrent']" :value="x">[[ x ]]</a-select-option>
+      <a-button icon="plus" size="small" style="margin-left: 10px" @click="ruleModal.rule.attrs.push(['', ''])"></a-button>
-            </a-select>
+    </a-form-item>
-        </a-form-item>
+    <a-form-item :wrapper-col="{span: 24}">
-        <a-form-item label='Attributes'>
+      <a-input-group compact v-for="(attr,index) in ruleModal.rule.attrs">
-            <a-button size="small" style="margin-left: 10px" @click="ruleModal.rule.attrs.push(['', ''])">+</a-button>
+        <a-input style="width: 50%" v-model="attr[0]" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
-        </a-form-item>
+          <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-        <a-form-item :wrapper-col="{span: 24}">
+        </a-input>
-            <a-input-group compact v-for="(attr,index) in ruleModal.rule.attrs">
+        <a-input style="width: 50%" v-model="attr[1]" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <a-input style="width: 50%" v-model="attr[0]" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
+          <a-button icon="minus" slot="addonAfter" size="small" @click="ruleModal.rule.attrs.splice(index,1)"></a-button>
-                    <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+        </a-input>
-                </a-input>
+      </a-input-group>
-                <a-input style="width: 50%" v-model="attr[1]" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+    </a-form-item>
-                    <a-button slot="addonAfter" size="small" @click="ruleModal.rule.attrs.splice(index,1)">-</a-button>
+    <a-form-item>
-                </a-input>
+      <template slot="label">
-            </a-input-group>
+        <a-tooltip>
-        </a-form-item>
+          <template slot="title">
-        <a-form-item>
+            <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-            <template slot="label">
+          </template> IP <a-icon type="question-circle"></a-icon>
-                <a-tooltip>
+        </a-tooltip>
-                    <template slot="title">
+      </template>
-                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+      <a-input v-model.trim="ruleModal.rule.ip"></a-input>
-                    </template>
+    </a-form-item>
-                    IP <a-icon type="question-circle"></a-icon>
+    <a-form-item>
-                </a-tooltip>
+      <template slot="label">
-            </template>
+        <a-tooltip>
-            <a-input v-model.trim="ruleModal.rule.ip"></a-input>
+          <template slot="title">
-        </a-form-item>
+            <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-        <a-form-item>
+          </template> Domain <a-icon type="question-circle"></a-icon>
-            <template slot="label">
+        </a-tooltip>
-                <a-tooltip>
+      </template>
-                    <template slot="title">
+      <a-input v-model.trim="ruleModal.rule.domain"></a-input>
-                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+    </a-form-item>
-                    </template>
+    <a-form-item>
-                    Domain <a-icon type="question-circle"></a-icon>
+      <template slot="label">
-                </a-tooltip>
+        <a-tooltip>
-            </template>
+          <template slot="title">
-            <a-input v-model.trim="ruleModal.rule.domain"></a-input>
+            <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-        </a-form-item>
+          </template> User <a-icon type="question-circle"></a-icon>
-        <a-form-item>
+        </a-tooltip>
-            <template slot="label">
+      </template>
-                <a-tooltip>
+      <a-input v-model.trim="ruleModal.rule.user"></a-input>
-                    <template slot="title">
+    </a-form-item>
-                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+    <a-form-item>
-                    </template>
+      <template slot="label">
-                    User <a-icon type="question-circle"></a-icon>
+        <a-tooltip>
-                </a-tooltip>
+          <template slot="title">
-            </template>
+            <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-            <a-input v-model.trim="ruleModal.rule.user"></a-input>
+          </template> Port <a-icon type="question-circle"></a-icon>
-        </a-form-item>
+        </a-tooltip>
-        <a-form-item>
+      </template>
-            <template slot="label">
+      <a-input v-model.trim="ruleModal.rule.port"></a-input>
-                <a-tooltip>
+    </a-form-item>
-                    <template slot="title">
+    <a-form-item label='Inbound Tags'>
-                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+      <a-select v-model="ruleModal.rule.inboundTag" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
-                    </template>
+        <a-select-option v-for="tag in ruleModal.inboundTags" :value="tag">[[ tag ]]</a-select-option>
-                    Port <a-icon type="question-circle"></a-icon>
+      </a-select>
-                </a-tooltip>
+    </a-form-item>
-            </template>
+    <a-form-item label='Outbound Tag'>
-            <a-input v-model.trim="ruleModal.rule.port"></a-input>
+      <a-select v-model="ruleModal.rule.outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
-        </a-form-item>
+        <a-select-option v-for="tag in ruleModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
-        <a-form-item label='Inbound Tags'>
+      </a-select>
-            <a-select v-model="ruleModal.rule.inboundTag" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
+    </a-form-item>
-                <a-select-option v-for="tag in ruleModal.inboundTags" :value="tag">[[ tag ]]</a-select-option>
+    <a-form-item>
-            </a-select>
+      <template slot="label">
-        </a-form-item>
+        <a-tooltip>
-        <a-form-item label='Outbound Tag'>
+          <template slot="title">
-            <a-select v-model="ruleModal.rule.outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
+            <span>{{ i18n "pages.xray.balancer.balancerDesc" }}</span>
-                <a-select-option v-for="tag in ruleModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
+          </template> Balancer Tag <a-icon type="question-circle"></a-icon>
-            </a-select>
+        </a-tooltip>
-        </a-form-item>
+      </template>
-        <a-form-item>
+      <a-select v-model="ruleModal.rule.balancerTag" :dropdown-class-name="themeSwitcher.currentTheme">
-            <template slot="label">
+        <a-select-option v-for="tag in ruleModal.balancerTags" :value="tag">[[ tag ]]</a-select-option>
-                <a-tooltip>
+      </a-select>
-                    <template slot="title">
+    </a-form-item>
-                        <span>{{ i18n "pages.xray.balancer.balancerDesc" }}</span>
+  </a-form>
-                    </template>
-                    Balancer Tag <a-icon type="question-circle"></a-icon>
-                </a-tooltip>
-            </template>
-            <a-select v-model="ruleModal.rule.balancerTag" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option v-for="tag in ruleModal.balancerTags" :value="tag">[[ tag ]]</a-select-option>
-            </a-select>
-        </a-form-item>
-    </table>
-    </a-form>
 </a-modal>
 <script>
-
+  const ruleModal = {
-    const ruleModal = {
+    title: '',
-        title: '',
+    visible: false,
-        visible: false,
+    confirmLoading: false,
-        confirmLoading: false,
+    okText: '{{ i18n "sure" }}',
-        okText: '{{ i18n "sure" }}',
+    isEdit: false,
-        isEdit: false,
+    confirm: null,
-        confirm: null,
+    rule: {
-        rule: {
+      type: "field",
-            type: "field",
+      domainMatcher: "",
-            domainMatcher: "",
+      domain: "",
-            domain: "",
+      ip: "",
-            ip: "",
+      port: "",
-            port: "",
+      sourcePort: "",
-            sourcePort: "",
+      network: "",
-            network: "",
+      source: "",
-            source: "",
+      user: "",
-            user: "",
+      inboundTag: [],
-            inboundTag: [],
+      protocol: [],
-            protocol: [],
+      attrs: [],
-            attrs: [],
+      outboundTag: "",
-            outboundTag: "",
+      balancerTag: "",
-            balancerTag: "",
+    },
-        },
+    inboundTags: [],
-        inboundTags: [],
+    outboundTags: [],
-        outboundTags: [],
+    users: [],
-        users: [],
+    balancerTags: [],
-        balancerTags: [],
+    ok() {
-        ok() {
+      newRule = ruleModal.getResult();
-            newRule = ruleModal.getResult();
+      ObjectUtil.execute(ruleModal.confirm, newRule);
-            ObjectUtil.execute(ruleModal.confirm, newRule);
+    },
-        },
+    show({
-        show({ title='', okText='{{ i18n "sure" }}', rule, confirm=(rule)=>{}, isEdit=false  }) {
+      title = '',
-            this.title = title;
+      okText = '{{ i18n "sure" }}',
-            this.okText = okText;
+      rule,
-            this.confirm = confirm;
+      confirm = (rule) => {},
-            this.visible = true;
+      isEdit = false
-            if(isEdit) {
+    }) {
-                this.rule.domainMatcher = rule.domainMatcher;
+      this.title = title;
-                this.rule.domain = rule.domain ? rule.domain.join(',') : [];
+      this.okText = okText;
-                this.rule.ip = rule.ip ? rule.ip.join(',') : [];
+      this.confirm = confirm;
-                this.rule.port = rule.port;
+      this.visible = true;
-                this.rule.sourcePort = rule.sourcePort;
+      if (isEdit) {
-                this.rule.network = rule.network;
+        this.rule.domainMatcher = rule.domainMatcher;
-                this.rule.source = rule.source ? rule.source.join(',') : [];
+        this.rule.domain = rule.domain ? rule.domain.join(',') : [];
-                this.rule.user = rule.user ? rule.user.join(',') : [];
+        this.rule.ip = rule.ip ? rule.ip.join(',') : [];
-                this.rule.inboundTag = rule.inboundTag;
+        this.rule.port = rule.port;
-                this.rule.protocol = rule.protocol;
+        this.rule.sourcePort = rule.sourcePort;
-                this.rule.attrs = rule.attrs ? Object.entries(rule.attrs) : [];
+        this.rule.network = rule.network;
-                this.rule.outboundTag = rule.outboundTag;
+        this.rule.source = rule.source ? rule.source.join(',') : [];
-                this.rule.balancerTag = rule.balancerTag ? rule.balancerTag : "";
+        this.rule.user = rule.user ? rule.user.join(',') : [];
-            } else {
+        this.rule.inboundTag = rule.inboundTag;
-                this.rule = {
+        this.rule.protocol = rule.protocol;
-                    domainMatcher: "",
+        this.rule.attrs = rule.attrs ? Object.entries(rule.attrs) : [];
-                    domain: "",
+        this.rule.outboundTag = rule.outboundTag;
-                    ip: "",
+        this.rule.balancerTag = rule.balancerTag ? rule.balancerTag : "";
-                    port: "",
+      } else {
-                    sourcePort: "",
+        this.rule = {
-                    network: "",
+          domainMatcher: "",
-                    source: "",
+          domain: "",
-                    user: "",
+          ip: "",
-                    inboundTag: [],
+          port: "",
-                    protocol: [],
+          sourcePort: "",
-                    attrs: [],
+          network: "",
-                    outboundTag: "",
+          source: "",
-                    balancerTag: "",
+          user: "",
-                }
+          inboundTag: [],
-            }
+          protocol: [],
-            this.isEdit = isEdit;
+          attrs: [],
-            this.inboundTags = app.templateSettings.inbounds.filter((i) => !ObjectUtil.isEmpty(i.tag)).map(obj => obj.tag);
+          outboundTag: "",
-            this.inboundTags.push(...app.inboundTags);
+          balancerTag: "",
-            if (app.enableDNS && !ObjectUtil.isEmpty(app.dnsTag)) this.inboundTags.push(app.dnsTag)
-            this.outboundTags = ["", ...app.templateSettings.outbounds.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag)];
-            if(app.templateSettings.reverse){
-                if(app.templateSettings.reverse.bridges) {
-                    this.inboundTags.push(...app.templateSettings.reverse.bridges.map(b => b.tag));
-                }
-                if(app.templateSettings.reverse.portals) this.outboundTags.push(...app.templateSettings.reverse.portals.map(b => b.tag));
-            }
-
-            if (app.templateSettings.routing && app.templateSettings.routing.balancers) {
-                this.balancerTags = [ "", ...app.templateSettings.routing.balancers.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag)];
-            }
-        },
-        close() {
-            ruleModal.visible = false;
-            ruleModal.loading(false);
-        },
-        loading(loading=true) {
-            ruleModal.confirmLoading = loading;
-        },
-        getResult() {
-            value = ruleModal.rule;
-            rule = {};
-            newRule = {};
-            rule.type = "field";
-            rule.domainMatcher = value.domainMatcher;
-            rule.domain = value.domain.length>0 ? value.domain.split(',') : [];
-            rule.ip = value.ip.length>0 ? value.ip.split(',') : [];
-            rule.port = value.port;
-            rule.sourcePort = value.sourcePort;
-            rule.network = value.network;
-            rule.source = value.source.length>0 ? value.source.split(',') : [];
-            rule.user = value.user.length>0 ? value.user.split(',') : [];
-            rule.inboundTag = value.inboundTag;
-            rule.protocol = value.protocol;
-            rule.attrs = Object.fromEntries(value.attrs);
-            rule.outboundTag = value.outboundTag == "" ? undefined : value.outboundTag;
-            rule.balancerTag = value.balancerTag == "" ? undefined : value.balancerTag;
-
-            for (const [key, value] of Object.entries(rule)) {
-                if (
-                value !== null &&
-                value !== undefined &&
-                !(Array.isArray(value) && value.length === 0) &&
-                !(typeof value === 'object' && Object.keys(value).length === 0) &&
-                value !== ''
-                ) {
-                    newRule[key] = value;
-                }
-            }
-            return newRule;
         }
-    };
+      }
-
+      this.isEdit = isEdit;
-    new Vue({
+      this.inboundTags = app.templateSettings.inbounds.filter((i) => !ObjectUtil.isEmpty(i.tag)).map(obj => obj.tag);
-        delimiters: ['[[', ']]'],
+      this.inboundTags.push(...app.inboundTags);
-        el: '#rule-modal',
+      if (app.enableDNS && !ObjectUtil.isEmpty(app.dnsTag)) this.inboundTags.push(app.dnsTag)
-        data: {
+      this.outboundTags = ["", ...app.templateSettings.outbounds.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag)];
-            ruleModal: ruleModal,
+      if (app.templateSettings.reverse) {
+        if (app.templateSettings.reverse.bridges) {
+          this.inboundTags.push(...app.templateSettings.reverse.bridges.map(b => b.tag));
         }
-    });
+        if (app.templateSettings.reverse.portals) this.outboundTags.push(...app.templateSettings.reverse.portals.map(b => b.tag));
-
+      }
+      if (app.templateSettings.routing && app.templateSettings.routing.balancers) {
+        this.balancerTags = ["", ...app.templateSettings.routing.balancers.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag)];
+      }
+    },
+    close() {
+      ruleModal.visible = false;
+      ruleModal.loading(false);
+    },
+    loading(loading = true) {
+      ruleModal.confirmLoading = loading;
+    },
+    getResult() {
+      value = ruleModal.rule;
+      rule = {};
+      newRule = {};
+      rule.type = "field";
+      rule.domainMatcher = value.domainMatcher;
+      rule.domain = value.domain.length > 0 ? value.domain.split(',') : [];
+      rule.ip = value.ip.length > 0 ? value.ip.split(',') : [];
+      rule.port = value.port;
+      rule.sourcePort = value.sourcePort;
+      rule.network = value.network;
+      rule.source = value.source.length > 0 ? value.source.split(',') : [];
+      rule.user = value.user.length > 0 ? value.user.split(',') : [];
+      rule.inboundTag = value.inboundTag;
+      rule.protocol = value.protocol;
+      rule.attrs = Object.fromEntries(value.attrs);
+      rule.outboundTag = value.outboundTag == "" ? undefined : value.outboundTag;
+      rule.balancerTag = value.balancerTag == "" ? undefined : value.balancerTag;
+      for (const [key, value] of Object.entries(rule)) {
+        if (value !== null && value !== undefined && !(Array.isArray(value) && value.length === 0) && !(typeof value === 'object' && Object.keys(value).length === 0) && value !== '') {
+          newRule[key] = value;
+        }
+      }
+      return newRule;
+    }
+  };
+  new Vue({
+    delimiters: ['[[', ']]'],
+    el: '#rule-modal',
+    data: {
+      ruleModal: ruleModal,
+    }
+  });
 </script>
 {{end}}

web/translation/translate.en_US.toml

@@ -36,7 +36,7 @@
 "status" = "Status"
 "enabled" = "Enabled"
 "disabled" = "Disabled"
-"depleted" = "Depleted"
+"depleted" = "Ended"
 "depletingSoon" = "Depleting"
 "offline" = "Offline"
 "online" = "Online"