pack1

15 files changed, 317 insertions, 341 deletions

diff --git a/web/html/common/prompt_modal.html b/web/html/common/prompt_modal.html
index 91c26615..3ef764c5 100644
--- a/web/html/common/prompt_modal.html
+++ b/web/html/common/prompt_modal.html
@@ -1,6 +1,7 @@
 {{define "promptModal"}}
 <a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
          :closable="true" @ok="promptModal.ok" :mask-closable="false"
+		 :class="siderDrawer.isDarkTheme ? darkClass : ''"
          :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}'>
     <a-input id="prompt-modal-input" :type="promptModal.type"
              v-model="promptModal.value"
diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html
index 84291829..e6a6d476 100644
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -1,6 +1,7 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
          :closable="true" width="300px" :ok-text="qrModal.okText"
+		 :class="siderDrawer.isDarkTheme ? darkClass : ''"
          cancel-text='{{ i18n "close" }}' :ok-button-props="{attrs:{id:'qr-modal-ok-btn'}}">
 		<canvas id="qrCode" style="width: 100%; height: 100%;"></canvas>
 </a-modal>
diff --git a/web/html/common/text_modal.html b/web/html/common/text_modal.html
index 0ae04a88..a0352c88 100644
--- a/web/html/common/text_modal.html
+++ b/web/html/common/text_modal.html
@@ -1,9 +1,10 @@
 {{define "textModal"}}
 <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
          :closable="true" ok-text='{{ i18n "copy" }}' cancel-text='{{ i18n "close" }}'
+		 :class="siderDrawer.isDarkTheme ? darkClass : ''"
          :ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}">
     <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" type="primary" style="margin-bottom: 10px;"
-              @click="downloader.download(txtModal.fileName, txtModal.content)">
+              :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)" :download="txtModal.fileName">
         {{ i18n "download" }} [[ txtModal.fileName ]]
     </a-button>
     <a-input type="textarea" v-model="txtModal.content"
@@ -31,15 +32,7 @@
                     });
                     this.clipboard.on('success', () => app.$message.success('{{ i18n "copied" }}'));
                 }
-                if (this.qrcode === null) {
-                    this.qrcode = new QRious({
-                        element: document.querySelector('#qrCode'),
-                        size: 260,
-                        value: content,
-                    });
-                } else {
-                    this.qrcode.value = content;
-                }
+               
             });
         },
         close: function () {
@@ -48,6 +41,7 @@
     };
 
     const textModalApp = new Vue({
+    	delimiters: ['[[', ']]'],
         el: '#text-modal',
         data: {
             txtModal: txtModal,
diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index 38a55265..9de00175 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -24,7 +24,7 @@
         <a-icon type="github"></a-icon>
         <span>Github</span>
     </a-menu-item>
-    <a-menu-item key="https://t.me/xxxuiforever">
+    <a-menu-item key="https://t.me/panel3xui">
         <a-icon type="usergroup-add"></a-icon>
         <span>Telegram</span>
     </a-menu-item>
@@ -37,27 +37,51 @@
 
 
 {{define "commonSider"}}
-<a-layout-sider id="sider" collapsible breakpoint="md" collapsed-width="0">
-    <a-menu theme="dark" mode="inline" :selected-keys="['{{ .request_uri }}']"
+<a-layout-sider :theme="siderDrawer.theme" id="sider" collapsible breakpoint="md" collapsed-width="0">
+    <a-menu :theme="siderDrawer.theme" mode="inline" selected-keys="">
+        <a-menu-item mode="inline">
+            <a-icon type="bg-colors"></a-icon>
+            <a-switch :default-checked="siderDrawer.isDarkTheme"
+            checked-children="☀"
+            un-checked-children="🌙"
+            @change="siderDrawer.changeTheme()"></a-switch>
+        </a-menu-item>
+    </a-menu>
+    <a-menu :theme="siderDrawer.theme" mode="inline" :selected-keys="['{{ .request_uri }}']"
             @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
         {{template "menuItems" .}}
     </a-menu>
 </a-layout-sider>
 <a-drawer id="sider-drawer" placement="left" :closable="false"
           @close="siderDrawer.close()"
-          :visible="siderDrawer.visible" :wrap-style="{ padding: 0 }">
+          :visible="siderDrawer.visible"
+          :wrap-style="{ padding: 0 }">
     <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
         <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
     </div>
-    <a-menu theme="light" mode="inline" :selected-keys="['{{ .request_uri }}']"
+    <a-menu mode="inline" selected-keys="">
+        <a-menu-item mode="inline">
+            <a-icon type="bg-colors"></a-icon>
+            <a-switch :default-checked="siderDrawer.isDarkTheme"
+            checked-children="☀"
+            un-checked-children="🌙"
+            @change="siderDrawer.changeTheme()"></a-switch>
+        </a-menu-item>
+    </a-menu>
+    <a-menu 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 darkClass = "ant-card-dark";
+    const bgDarkStyle = "background-color: #242c3a";
     const siderDrawer = {
         visible: false,
+		collapsed: false,
+        isDarkTheme: localStorage.getItem("dark-mode") === 'true' ? true : false,
         show() {
             this.visible = true;
         },
@@ -66,6 +90,16 @@
         },
         change() {
             this.visible = !this.visible;
+		 },
+        toggleCollapsed() {
+            this.collapsed = !this.collapsed;
+        },
+        changeTheme() {
+            this.isDarkTheme = ! this.isDarkTheme;
+            localStorage.setItem("dark-mode", this.isDarkTheme);
+        },
+        get theme() {
+            return this.isDarkTheme ? 'dark' : 'light';
         }
     };
 
diff --git a/web/html/xui/component/inbound_info.html b/web/html/xui/component/inbound_info.html
deleted file mode 100644
index 0618f02e..00000000
--- a/web/html/xui/component/inbound_info.html
+++ /dev/null
@@ -1,94 +0,0 @@
-{{define "inboundInfoStream"}}
-<p>{{ i18n "transmission" }}: <a-tag color="green">[[ inbound.network ]]</a-tag></p>
-
-<template v-if="inbound.isTcp || inbound.isWs || inbound.isH2">
-    <p v-if="inbound.host">host: <a-tag color="green">[[ inbound.host ]]</a-tag></p>
-    <p v-else>{{ i18n "host" }}: <a-tag color="orange">{{ i18n "none" }}</a-tag></p>
-
-    <p v-if="inbound.path">path: <a-tag color="green">[[ inbound.path ]]</a-tag></p>
-    <p v-else>{{ i18n "path" }}: <a-tag color="orange">{{ i18n "none" }}</a-tag></p>
-</template>
-
-<template v-if="inbound.isQuic">
-    <p>quic {{ i18n "encryption" }}: <a-tag color="green">[[ inbound.quicSecurity ]]</a-tag></p>
-    <p>quic {{ i18n "password" }}: <a-tag color="green">[[ inbound.quicKey ]]</a-tag></p>
-    <p>quic {{ i18n "camouflage" }}: <a-tag color="green">[[ inbound.quicType ]]</a-tag></p>
-</template>
-
-<template v-if="inbound.isKcp">
-    <p>kcp {{ i18n "encryption" }}: <a-tag color="green">[[ inbound.kcpType ]]</a-tag></p>
-    <p>kcp {{ i18n "password" }}: <a-tag color="green">[[ inbound.kcpSeed ]]</a-tag></p>
-</template>
-
-<template v-if="inbound.isGrpc">
-    <p>grpc serviceName: <a-tag color="green">[[ inbound.serviceName ]]</a-tag></p>
-</template>
-
-<template v-if="inbound.tls || inbound.xtls">
-    <p v-if="inbound.tls">tls: <a-tag color="green">{{ i18n "enabled" }}</a-tag></p>
-    <p v-if="inbound.xtls">xtls: <a-tag color="green">{{ i18n "enabled" }}</a-tag></p>
-</template>
-<template v-else>
-    <p>tls: <a-tag color="red">{{ i18n "disabled" }}</a-tag></p>
-</template>
-<p v-if="inbound.tls">
-    tls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-</p>
-<p v-if="inbound.xtls">
-    xtls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-</p>
-{{end}}
-
-
-{{define "component/inboundInfoComponent"}}
-<div>
-    <p>{{ i18n "protocol"}}: <a-tag color="green">[[ dbInbound.protocol ]]</a-tag></p>
-    <p>{{ i18n "pages.inbounds.address"}}: <a-tag color="blue">[[ dbInbound.address ]]</a-tag></p>
-    <p>{{ i18n "pages.inbounds.port"}}: <a-tag color="green">[[ dbInbound.port ]]</a-tag></p>
-
-    <template v-if="dbInbound.isVMess" v-for="(vmess, index) in inbound.settings.vmesses">
-        <p>uuid: <a-tag color="green">[[ vmess.id ]]</a-tag></p>
-        <p>alterId: <a-tag color="green">[[ vmess.alterId ]]</a-tag></p>
-        <a-divider style="height: 2px; background-color: #7e7e7e" />
-    </template>
-
-    <template v-if="dbInbound.isVLess" v-for="(vless, index) in inbound.settings.vlesses">
-        <p>uuid: <a-tag color="green">[[ vless.id ]]</a-tag></p>
-        <p v-if="inbound.isXTls">flow: <a-tag color="green">[[ vless.flow ]]</a-tag></p>
-        <a-divider style="height: 2px; background-color: #7e7e7e" />
-    </template>
-
-    <template v-if="dbInbound.isTrojan">
-        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
-    </template>
-
-    <template v-if="dbInbound.isSS">
-        <p>{{ i18n "encryption"}}: <a-tag color="green">[[ inbound.method ]]</a-tag></p>
-        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
-    </template>
-
-    <template v-if="dbInbound.isSocks">
-        <p>{{ i18n "username"}}: <a-tag color="green">[[ inbound.username ]]</a-tag></p>
-        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
-    </template>
-
-    <template v-if="dbInbound.isHTTP">
-        <p>{{ i18n "username"}}: <a-tag color="green">[[ inbound.username ]]</a-tag></p>
-        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
-    </template>
-
-    <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-        {{template "inboundInfoStream"}}
-    </template>
-</div>
-{{end}}
-
-{{define "component/inboundInfo"}}
-<script>
-    Vue.component('inbound-info', {
-        delimiters: ['[[', ']]'],
-        props: ["dbInbound", "inbound"],
-        template: `{{template "component/inboundInfoComponent"}}`,
-    });
-</script>
-{{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index 4bf57d7a..3127e4c5 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -1,6 +1,6 @@
 {{define "form/trojan"}}
 <a-form layout="inline">
-<label>{{ i18n "clients"}} </label>
+<label style="color: green;">{{ i18n "clients"}}</label>
 <a-collapse activeKey="0"  v-for="(trojan, index) in inbound.settings.trojans"
 :key="`trojan-${index}`">
 
@@ -20,8 +20,11 @@
                             xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="anticon anticon-question-circle" viewBox="0 0 16 16"> <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/> <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/> </svg>
                     </a-tooltip>
                 </span>
-                <a-input v-model.trim="trojan.email"></a-input>
+                <a-input v-model.trim="trojan.email" style="width: 150px;"></a-input>
             </a-form-item>
+			<a-form-item label="Password" >
+				<a-input v-model.trim="trojan.password" style="width: 150px;"></a-input>
+			</a-form-item>
 			<a-form-item>
                 <span slot="label">
                     IP Count Limit
@@ -32,7 +35,7 @@
                         <a-icon type="question-circle" theme="filled"></a-icon>
                     </a-tooltip>
                 </span>
-                <a-input type="number" v-model.number="trojan.limitIp" min="0" ></a-input>
+                <a-input type="number" v-model.number="trojan.limitIp" min="0" style="width: 70px;"></a-input>
             </a-form-item>
             <a-form-item v-if="trojan.email && trojan.limitIp > 0 && isEdit">
                 <span slot="label">
@@ -53,15 +56,12 @@
                     </a-tooltip>
                 </span>
                 <a-form layout="block">
-                    <a-textarea readonly @click="getDBClientIps(trojan.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 0.5, maxRows: 10 }">
+                    <a-textarea readonly @click="getDBClientIps(trojan.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 2, maxRows: 10 }">
                     </a-textarea>
                 </a-form>
             </a-form-item>
         </a-form>
-        <a-form-item label="Password">
-            <a-input v-model.trim="trojan.password"></a-input>
-        </a-form-item>
-        <a-form-item v-if="inbound.xtls" label="Flow">
+        <a-form-item v-if="inbound.XTLS" label="Flow">
             <a-select v-model="trojan.flow" style="width: 150px">
                 <a-select-option value="">{{ i18n "none" }}</a-select-option>
                 <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
@@ -90,7 +90,7 @@
                 </a-tooltip>
             </span>
             <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                           v-model="trojan._expiryTime" style="width: 300px;"></a-date-picker>
+                           v-model="trojan._expiryTime" style="width: 170px;"></a-date-picker>
         </a-form-item>
         <a-form layout="inline">
             <a-tooltip v-if="trojan._totalGB > 0">
@@ -123,39 +123,41 @@
     </svg>
 </a-tag>
 
-<a-form layout="inline">
-    <a-form-item label="Fallbacks">
-        <a-row>
-            <a-button type="primary" size="small"
-                      @click="inbound.settings.addTrojanFallback()">
-                +
-            </a-button>
-        </a-row>
-    </a-form-item>
-</a-form>
+<template v-if="inbound.isTcp && inbound.tls">
+    <a-form layout="inline">
+        <a-form-item label="Fallbacks">
+            <a-row>
+                <a-button type="primary" size="small"
+                        @click="inbound.settings.addTrojanFallback()">
+                    +
+                </a-button>
+            </a-row>
+        </a-form-item>
+    </a-form>
 
-<!-- trojan fallbacks -->
-<a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
-    <a-divider>
-        fallback[[ index + 1 ]]
-        <a-icon type="delete" @click="() => inbound.settings.delTrojanFallback(index)"
-                style="color: rgb(255, 77, 79);cursor: pointer;"/>
-    </a-divider>
-    <a-form-item label="Name">
-        <a-input v-model="fallback.name"></a-input>
-    </a-form-item>
-    <a-form-item label="Alpn">
-        <a-input v-model="fallback.alpn"></a-input>
-    </a-form-item>
-    <a-form-item label="Path">
-        <a-input v-model="fallback.path"></a-input>
-    </a-form-item>
-    <a-form-item label="Dest">
-        <a-input v-model="fallback.dest"></a-input>
-    </a-form-item>
-    <a-form-item label="xVer">
-        <a-input type="number" v-model.number="fallback.xver"></a-input>
-    </a-form-item>
-    <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
-</a-form>
+ <!-- trojan fallbacks -->
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
+        <a-divider>
+            fallback[[ index + 1 ]]
+            <a-icon type="delete" @click="() => inbound.settings.delTrojanFallback(index)"
+                    style="color: rgb(255, 77, 79);cursor: pointer;"/>
+        </a-divider>
+        <a-form-item label="name">
+            <a-input v-model="fallback.name"></a-input>
+        </a-form-item>
+        <a-form-item label="alpn">
+            <a-input v-model="fallback.alpn"></a-input>
+        </a-form-item>
+        <a-form-item label="path">
+            <a-input v-model="fallback.path"></a-input>
+        </a-form-item>
+        <a-form-item label="dest">
+            <a-input v-model="fallback.dest"></a-input>
+        </a-form-item>
+        <a-form-item label="xver">
+            <a-input type="number" v-model.number="fallback.xver"></a-input>
+        </a-form-item>
+        <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
+    </a-form>
+</template>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 6d895f19..67337aba 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -1,6 +1,6 @@
 {{define "form/vless"}}
 <a-form layout="inline">
-<label>{{ i18n "clients"}}</label>
+<label style="color: green;">{{ i18n "clients"}}</label>
 <a-collapse activeKey="0"  v-for="(vless, index) in inbound.settings.vlesses"
 :key="`vless-${index}`">
 
@@ -21,8 +21,11 @@
                             xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="anticon anticon-question-circle" viewBox="0 0 16 16"> <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/> <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/> </svg>
                     </a-tooltip>
                 </span>
-                <a-input v-model.trim="vless.email"></a-input>
+                <a-input v-model.trim="vless.email" style="width: 150px;"></a-input>
             </a-form-item>
+			<a-form-item label="ID">
+				<a-input v-model.trim="vless.id" style="width: 300px;" ></a-input>
+			</a-form-item>
 			<a-form-item>
                 <span slot="label">
                     IP Count Limit
@@ -33,7 +36,7 @@
                         <a-icon type="question-circle" theme="filled"></a-icon>
                     </a-tooltip>
                 </span>
-                <a-input type="number" v-model.number="vless.limitIp" min="0" ></a-input>
+                <a-input type="number" v-model.number="vless.limitIp" min="0" style="width: 70px;"></a-input>
             </a-form-item>
             <a-form-item v-if="vless.email && vless.limitIp > 0 && isEdit">
                 <span slot="label">
@@ -55,15 +58,12 @@
                 </span>
                 <a-form layout="block">
 
-                    <a-textarea readonly @click="getDBClientIps(vless.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 0.5, maxRows: 10 }">
+                    <a-textarea readonly @click="getDBClientIps(vless.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 2, maxRows: 10 }">
                     </a-textarea>
                 </a-form>
             </a-form-item>
         </a-form>
-        <a-form-item label="ID">
-            <a-input v-model.trim="vless.id"></a-input>
-        </a-form-item>
-		<a-form-item v-if="inbound.xtls" label="Flow">
+		<a-form-item v-if="inbound.XTLS" label="Flow">
             <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 150px">
                 <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
                 <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
@@ -75,11 +75,6 @@
                 <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
             </a-select>
         </a-form-item>
-        <a-form-item v-if="inbound.tls" label="uTLS" layout="inline">
-                <a-select v-model="inbound.settings.vlesses[index].fingerprint" label="uTLS" style="width: 150px">
-                    <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-                </a-select>
-        </a-form-item>
         <a-form-item>
             <span slot="label">
                 <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
@@ -137,39 +132,41 @@
     </svg>
 </a-tag>
 
-<a-form layout="inline">
-    <a-form-item label="Fallbacks">
-        <a-row>
-            <a-button type="primary" size="small"
-                      @click="inbound.settings.addFallback()">
-                +
-            </a-button>
-        </a-row>
-    </a-form-item>
-</a-form>
+<template v-if="inbound.isTcp && inbound.tls">
+    <a-form layout="inline">
+        <a-form-item label="Fallbacks">
+            <a-row>
+                <a-button type="primary" size="small"
+                        @click="inbound.settings.addFallback()">
+                    +
+                </a-button>
+            </a-row>
+        </a-form-item>
+    </a-form>
 
 <!-- vless fallbacks -->
-<a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
-    <a-divider>
-        fallback[[ index + 1 ]]
-        <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
-                style="color: rgb(255, 77, 79);cursor: pointer;"/>
-    </a-divider>
-    <a-form-item label="Name">
-        <a-input v-model="fallback.name"></a-input>
-    </a-form-item>
-    <a-form-item label="Alpn">
-        <a-input v-model="fallback.alpn"></a-input>
-    </a-form-item>
-    <a-form-item label="Path">
-        <a-input v-model="fallback.path"></a-input>
-    </a-form-item>
-    <a-form-item label="Dest">
-        <a-input v-model="fallback.dest"></a-input>
-    </a-form-item>
-    <a-form-item label="xVer">
-        <a-input type="number" v-model.number="fallback.xver"></a-input>
-    </a-form-item>
-    <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
-</a-form>
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
+        <a-divider>
+            fallback[[ index + 1 ]]
+            <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
+                    style="color: rgb(255, 77, 79);cursor: pointer;"/>
+        </a-divider>
+        <a-form-item label="name">
+            <a-input v-model="fallback.name"></a-input>
+        </a-form-item>
+        <a-form-item label="alpn">
+            <a-input v-model="fallback.alpn"></a-input>
+        </a-form-item>
+        <a-form-item label="path">
+            <a-input v-model="fallback.path"></a-input>
+        </a-form-item>
+        <a-form-item label="dest">
+            <a-input v-model="fallback.dest"></a-input>
+        </a-form-item>
+        <a-form-item label="xver">
+            <a-input type="number" v-model.number="fallback.xver"></a-input>
+        </a-form-item>
+        <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
+    </a-form>
+</template>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index bab0cb8b..d7561633 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -1,6 +1,6 @@
 {{define "form/vmess"}}
 <a-form layout="inline">
-<label>{{ i18n "clients"}}</label>
+<label style="color: green;">{{ i18n "clients"}}</label>
 <a-collapse activeKey="0"  v-for="(vmess, index) in inbound.settings.vmesses"
 :key="`vmess-${index}`">
     <a-collapse-panel :class="getHeaderStyle(vmess.email)" :header="getHeaderText(vmess.email)">
@@ -20,8 +20,14 @@
                             xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="anticon anticon-question-circle" viewBox="0 0 16 16"> <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/> <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/> </svg>
                     </a-tooltip>
                 </span>
-                <a-input v-model.trim="vmess.email"></a-input>
+                <a-input v-model.trim="vmess.email" style="width: 150px;"></a-input>
             </a-form-item>
+			<a-form-item label="ID">
+				<a-input v-model.trim="vmess.id" style="width: 300px;" ></a-input>
+			</a-form-item>
+			<a-form-item label='{{ i18n "additional" }} ID'>
+				<a-input type="number" v-model.number="vmess.alterId"></a-input>
+			</a-form-item>
 			<a-form-item>
                 <span slot="label">
                     IP Count Limit
@@ -32,7 +38,7 @@
                         <a-icon type="question-circle" theme="filled"></a-icon>
                     </a-tooltip>
                 </span>
-              <a-input type="number" v-model.number="vmess.limitIp" min="0" ></a-input>
+              <a-input type="number" v-model.number="vmess.limitIp" min="0" style="width: 70px;" ></a-input>
             </a-form-item>
             <a-form-item v-if="vmess.email && vmess.limitIp > 0 && isEdit">
                 <span slot="label">
@@ -52,16 +58,10 @@
                         </span>
                     </a-tooltip>
                 </span>
-                <a-textarea readonly @click="getDBClientIps(vmess.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 0.5, maxRows: 10 }">
+                <a-textarea readonly @click="getDBClientIps(vmess.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 2, maxRows: 10 }">
                 </a-textarea>
             </a-form-item>
         </a-form>
-        <a-form-item label="ID">
-            <a-input v-model.trim="vmess.id"></a-input>
-        </a-form-item>
-        <a-form-item label='{{ i18n "additional" }} ID'>
-            <a-input type="number" v-model.number="vmess.alterId"></a-input>
-        </a-form-item>
         <a-form-item>
             <span slot="label">
                 <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
diff --git a/web/html/xui/form/stream/stream_settings.html b/web/html/xui/form/stream/stream_settings.html
index e3b8308a..d5c7e425 100644
--- a/web/html/xui/form/stream/stream_settings.html
+++ b/web/html/xui/form/stream/stream_settings.html
@@ -8,7 +8,7 @@
             <a-select-option value="ws">WS</a-select-option>
             <a-select-option value="http">HTTP</a-select-option>
             <a-select-option value="quic">QUIC</a-select-option>
-            <a-select-option value="grpc">GRPC</a-select-option>
+            <a-select-option value="grpc">gRPC</a-select-option>
         </a-select>
     </a-form-item>
 </a-form>
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index ea3216e7..532850c7 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -5,13 +5,22 @@
         <a-switch v-model="inbound.tls">
         </a-switch>
     </a-form-item>
-    <a-form-item v-if="inbound.canEnableXTls()" label="XTLS">
-        <a-switch v-model="inbound.xtls"></a-switch>
+    <a-form-item v-if="inbound.canEnableXTLS()" label="XTLS">
+        <a-switch v-model="inbound.XTLS"></a-switch>
     </a-form-item>
 </a-form>
 
 <!-- tls settings -->
-<a-form v-if="inbound.tls || inbound.xtls"layout="inline">
+<a-form v-if="inbound.tls || inbound.XTLS"layout="inline">
+    <a-form-item label="SNI" placeholder="Server Name Indication" v-if="inbound.tls">
+        <a-input v-model.trim="inbound.stream.tls.settings[0].serverName"></a-input>
+    </a-form-item>
+    <a-form-item label="CipherSuites">
+        <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 300px">
+            <a-select-option value="">auto</a-select-option>
+            <a-select-option v-for="key in TLS_CIPHER_OPTION" :value="key">[[ key ]]</a-select-option>
+        </a-select>
+    </a-form-item>
     <a-form-item label="MinVersion">
         <a-select v-model="inbound.stream.tls.minVersion" style="width: 60px">
             <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
@@ -22,17 +31,20 @@
             <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
-    <a-form-item label="CipherSuites">
-        <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 300px">
-            <a-select-option value="">auto</a-select-option>
-            <a-select-option v-for="key in TLS_CIPHER_OPTION" :value="key">[[ key ]]</a-select-option>
-        </a-select>
-    </a-form-item>
+        <a-form-item label="uTLS" v-if="inbound.tls" >
+            <a-select v-model="inbound.stream.tls.settings[0].fingerprint" style="width: 135px">
+                <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>
+        </a-form-item>
     <a-form-item label='{{ i18n "domainName" }}'>
         <a-input v-model.trim="inbound.stream.tls.server"></a-input>
     </a-form-item>
-    <a-form-item label="Alpn">
-        <a-input v-model.trim="inbound.stream.tls.alpn"></a-input>
+    <a-form-item label="Alpn" placeholder="http/1.1,h2" v-if="inbound.tls">
+        <a-select v-model="inbound.stream.tls.alpn[0]" style="width:200px">
+            <a-select-option value=''>auto</a-select-option>
+            <a-select-option v-for="key in ALPN_OPTION" :value="key">[[ key ]]</a-select-option>
+        </a-select>
     </a-form-item>
     <a-form-item label='{{ i18n "certificate" }}'>
         <a-radio-group v-model="inbound.stream.tls.certs[0].useFile" button-style="solid">
@@ -42,18 +54,18 @@
     </a-form-item>
     <template v-if="inbound.stream.tls.certs[0].useFile">
         <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
-            <a-input v-model.trim="inbound.stream.tls.certs[0].certFile"></a-input>
+            <a-input v-model.trim="inbound.stream.tls.certs[0].certFile" style="width:300px;"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
-            <a-input v-model.trim="inbound.stream.tls.certs[0].keyFile"></a-input>
+            <a-input v-model.trim="inbound.stream.tls.certs[0].keyFile" style="width:300px;"></a-input>
         </a-form-item>
     </template>
     <template v-else>
         <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
-            <a-input type="textarea" :rows="2" v-model="inbound.stream.tls.certs[0].cert"></a-input>
+            <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.tls.certs[0].cert"></a-input>
         </a-form-item>
         &l            
                
                    
                        contacts: admin@thfree.ru
                    
                
                
                    
                        mirrors for living