Merge pull request #332 from hamid-gh98/main

[Update] sub remark + settings UI

25 files changed, 514 insertions, 486 deletions

diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index a452dceb..f1b208eb 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -180,7 +180,7 @@
 
 .ant-card-dark:hover {
     border-color: #e8e8e8;
-    box-shadow: 0 2px 8px rgba(255,255,255,.15);
+    /* box-shadow: 0 2px 8px rgba(255,255,255,.15); */
 }
 
 .ant-card-dark .ant-table-thead th {
@@ -236,6 +236,10 @@
     background-color: #1a212a; 
 }
 
+.ant-input-number {
+    min-width: 100px;
+}
+
 .ant-card-dark .ant-input,
 .ant-card-dark .ant-input-number,
 .ant-card-dark .ant-input-number-handler-wrap,
diff --git a/web/controller/inbound.go b/web/controller/inbound.go
index 4559f2a2..8360cf62 100644
--- a/web/controller/inbound.go
+++ b/web/controller/inbound.go
@@ -93,7 +93,7 @@ func (a *InboundController) addInbound(c *gin.Context) {
 	inbound := &model.Inbound{}
 	err := c.ShouldBind(inbound)
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.addTo"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.create"), err)
 		return
 	}
 	user := session.GetLoginUser(c)
@@ -101,7 +101,7 @@ func (a *InboundController) addInbound(c *gin.Context) {
 	inbound.Enable = true
 	inbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
 	inbound, err = a.inboundService.AddInbound(inbound)
-	jsonMsgObj(c, I18n(c, "pages.inbounds.addTo"), inbound, err)
+	jsonMsgObj(c, I18n(c, "pages.inbounds.create"), inbound, err)
 	if err == nil {
 		a.xrayService.SetToNeedRestart()
 	}
@@ -123,7 +123,7 @@ func (a *InboundController) delInbound(c *gin.Context) {
 func (a *InboundController) updateInbound(c *gin.Context) {
 	id, err := strconv.Atoi(c.Param("id"))
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.revise"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
 		return
 	}
 	inbound := &model.Inbound{
@@ -131,11 +131,11 @@ func (a *InboundController) updateInbound(c *gin.Context) {
 	}
 	err = c.ShouldBind(inbound)
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.revise"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
 		return
 	}
 	inbound, err = a.inboundService.UpdateInbound(inbound)
-	jsonMsgObj(c, I18n(c, "pages.inbounds.revise"), inbound, err)
+	jsonMsgObj(c, I18n(c, "pages.inbounds.update"), inbound, err)
 	if err == nil {
 		a.xrayService.SetToNeedRestart()
 	}
@@ -156,7 +156,7 @@ func (a *InboundController) clearClientIps(c *gin.Context) {
 
 	err := a.inboundService.ClearClientIps(email)
 	if err != nil {
-		jsonMsg(c, "Revise", err)
+		jsonMsg(c, "Update", err)
 		return
 	}
 	jsonMsg(c, "Log Cleared", nil)
@@ -165,7 +165,7 @@ func (a *InboundController) addInboundClient(c *gin.Context) {
 	data := &model.Inbound{}
 	err := c.ShouldBind(data)
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.revise"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
 		return
 	}
 
@@ -183,7 +183,7 @@ func (a *InboundController) addInboundClient(c *gin.Context) {
 func (a *InboundController) delInboundClient(c *gin.Context) {
 	id, err := strconv.Atoi(c.Param("id"))
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.revise"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
 		return
 	}
 	clientId := c.Param("clientId")
@@ -205,7 +205,7 @@ func (a *InboundController) updateInboundClient(c *gin.Context) {
 	inbound := &model.Inbound{}
 	err := c.ShouldBind(inbound)
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.revise"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
 		return
 	}
 
@@ -223,7 +223,7 @@ func (a *InboundController) updateInboundClient(c *gin.Context) {
 func (a *InboundController) resetClientTraffic(c *gin.Context) {
 	id, err := strconv.Atoi(c.Param("id"))
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.revise"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
 		return
 	}
 	email := c.Param("email")
@@ -251,7 +251,7 @@ func (a *InboundController) resetAllTraffics(c *gin.Context) {
 func (a *InboundController) resetAllClientTraffics(c *gin.Context) {
 	id, err := strconv.Atoi(c.Param("id"))
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.revise"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
 		return
 	}
 
@@ -266,7 +266,7 @@ func (a *InboundController) resetAllClientTraffics(c *gin.Context) {
 func (a *InboundController) delDepletedClients(c *gin.Context) {
 	id, err := strconv.Atoi(c.Param("id"))
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.revise"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
 		return
 	}
 	err = a.inboundService.DelDepletedClients(id)
diff --git a/web/controller/setting.go b/web/controller/setting.go
index 2726c228..bd9c2a5f 100644
--- a/web/controller/setting.go
+++ b/web/controller/setting.go
@@ -49,7 +49,7 @@ func (a *SettingController) initRouter(g *gin.RouterGroup) {
 func (a *SettingController) getAllSetting(c *gin.Context) {
 	allSetting, err := a.settingService.GetAllSetting()
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.getSetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
 		return
 	}
 	jsonObj(c, allSetting, nil)
@@ -58,7 +58,7 @@ func (a *SettingController) getAllSetting(c *gin.Context) {
 func (a *SettingController) getDefaultJsonConfig(c *gin.Context) {
 	defaultJsonConfig, err := a.settingService.GetDefaultJsonConfig()
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.getSetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
 		return
 	}
 	jsonObj(c, defaultJsonConfig, nil)
@@ -67,22 +67,22 @@ func (a *SettingController) getDefaultJsonConfig(c *gin.Context) {
 func (a *SettingController) getDefaultSettings(c *gin.Context) {
 	expireDiff, err := a.settingService.GetExpireDiff()
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.getSetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
 		return
 	}
 	trafficDiff, err := a.settingService.GetTrafficDiff()
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.getSetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
 		return
 	}
 	defaultCert, err := a.settingService.GetCertFile()
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.getSetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
 		return
 	}
 	defaultKey, err := a.settingService.GetKeyFile()
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.getSetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
 		return
 	}
 	result := map[string]interface{}{
@@ -98,27 +98,27 @@ func (a *SettingController) updateSetting(c *gin.Context) {
 	allSetting := &entity.AllSetting{}
 	err := c.ShouldBind(allSetting)
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.modifySetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.modifySettings"), err)
 		return
 	}
 	err = a.settingService.UpdateAllSetting(allSetting)
-	jsonMsg(c, I18n(c, "pages.setting.toasts.modifySetting"), err)
+	jsonMsg(c, I18n(c, "pages.settings.toasts.modifySettings"), err)
 }
 
 func (a *SettingController) updateUser(c *gin.Context) {
 	form := &updateUserForm{}
 	err := c.ShouldBind(form)
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.modifySetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.modifySettings"), err)
 		return
 	}
 	user := session.GetLoginUser(c)
 	if user.Username != form.OldUsername || user.Password != form.OldPassword {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.modifyUser"), errors.New(I18n(c, "pages.setting.toasts.originalUserPassIncorrect")))
+		jsonMsg(c, I18n(c, "pages.settings.toasts.modifyUser"), errors.New(I18n(c, "pages.settings.toasts.originalUserPassIncorrect")))
 		return
 	}
 	if form.NewUsername == "" || form.NewPassword == "" {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.modifyUser"), errors.New(I18n(c, "pages.setting.toasts.userPassMustBeNotEmpty")))
+		jsonMsg(c, I18n(c, "pages.settings.toasts.modifyUser"), errors.New(I18n(c, "pages.settings.toasts.userPassMustBeNotEmpty")))
 		return
 	}
 	err = a.userService.UpdateUser(user.Id, form.NewUsername, form.NewPassword)
@@ -127,19 +127,19 @@ func (a *SettingController) updateUser(c *gin.Context) {
 		user.Password = form.NewPassword
 		session.SetLoginUser(c, user)
 	}
-	jsonMsg(c, I18n(c, "pages.setting.toasts.modifyUser"), err)
+	jsonMsg(c, I18n(c, "pages.settings.toasts.modifyUser"), err)
 }
 
 func (a *SettingController) restartPanel(c *gin.Context) {
 	err := a.panelService.RestartPanel(time.Second * 3)
-	jsonMsg(c, I18n(c, "pages.setting.restartPanel"), err)
+	jsonMsg(c, I18n(c, "pages.settings.restartPanel"), err)
 }
 
 func (a *SettingController) updateSecret(c *gin.Context) {
 	form := &updateSecretForm{}
 	err := c.ShouldBind(form)
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.modifySetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.modifySettings"), err)
 	}
 	user := session.GetLoginUser(c)
 	err = a.userService.UpdateUserSecret(user.Id, form.LoginSecret)
@@ -147,7 +147,7 @@ func (a *SettingController) updateSecret(c *gin.Context) {
 		user.LoginSecret = form.LoginSecret
 		session.SetLoginUser(c, user)
 	}
-	jsonMsg(c, I18n(c, "pages.setting.toasts.modifyUser"), err)
+	jsonMsg(c, I18n(c, "pages.settings.toasts.modifyUser"), err)
 }
 func (a *SettingController) getUserSecret(c *gin.Context) {
 	loginUser := session.GetLoginUser(c)
diff --git a/web/controller/xui.go b/web/controller/xui.go
index 5832be84..1844181d 100644
--- a/web/controller/xui.go
+++ b/web/controller/xui.go
@@ -23,7 +23,7 @@ func (a *XUIController) initRouter(g *gin.RouterGroup) {
 
 	g.GET("/", a.index)
 	g.GET("/inbounds", a.inbounds)
-	g.GET("/setting", a.setting)
+	g.GET("/settings", a.settings)
 
 	a.inboundController = NewInboundController(g)
 	a.settingController = NewSettingController(g)
@@ -37,6 +37,6 @@ func (a *XUIController) inbounds(c *gin.Context) {
 	html(c, "inbounds.html", "pages.inbounds.title", nil)
 }
 
-func (a *XUIController) setting(c *gin.Context) {
-	html(c, "setting.html", "pages.setting.title", nil)
+func (a *XUIController) settings(c *gin.Context) {
+	html(c, "settings.html", "pages.settings.title", nil)
 }
diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index 00e385b1..274f8588 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -43,7 +43,7 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-input type="number" v-model.number="clientsBulkModal.limitIp" min="0" style="width: 70px;" ></a-input>
+            <a-input-number v-model="clientsBulkModal.limitIp" min="0"></a-input-number>
         </a-form-item>
         <a-form-item v-if="clientsBulkModal.inbound.xtls" label="Flow">
             <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
@@ -65,7 +65,7 @@
         </a-form-item>
         <a-form-item>
             <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                 <a-tooltip>
                     <template slot="title">
                         0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -79,7 +79,7 @@
             <a-switch v-model="clientsBulkModal.delayedStart" @click="clientsBulkModal.expiryTime=0"></a-switch>
         </a-form-item>
         <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientsBulkModal.delayedStart">
-            <a-input type="number" v-model.number="delayedExpireDays" :min="0"></a-input>
+            <a-input-number v-model="delayedExpireDays" :min="0"></a-input-number>
         </a-form-item>
         <a-form-item v-else>
             <span slot="label">
diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index 278dc4e5..d059e920 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -7,9 +7,9 @@
     <a-icon type="user"></a-icon>
     <span>{{ i18n "menu.inbounds"}}</span>
 </a-menu-item>
-<a-menu-item key="{{ .base_path }}xui/setting">
+<a-menu-item key="{{ .base_path }}xui/settings">
     <a-icon type="setting"></a-icon>
-    <span>{{ i18n "menu.setting"}}</span>
+    <span>{{ i18n "menu.settings"}}</span>
 </a-menu-item>
 <!--<a-menu-item key="{{ .base_path }}xui/clients">-->
 <!--    <a-icon type="laptop"></a-icon>-->
diff --git a/web/html/xui/component/setting.html b/web/html/xui/component/setting.html
index 00eeb259..efd61684 100644
--- a/web/html/xui/component/setting.html
+++ b/web/html/xui/component/setting.html
@@ -9,7 +9,7 @@
                 <a-input :value="value" @input="$emit('input', $event.target.value)"></a-input>
             </template>
             <template v-else-if="type === 'number'">
-                <a-input type="number" :value="value" @input="$emit('input', $event.target.value)" :min="min"></a-input>
+                <a-input-number :value="value" @change="value => $emit('input', value)" :min="min" style="width: 100%;"></a-input-number>
             </template>
             <template v-else-if="type === 'textarea'">
                 <a-textarea :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10, maxRows: 10 }"></a-textarea>
diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index 38402ec7..501861db 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -22,7 +22,7 @@
         <a-input v-model.trim="client.password" style="width: 150px;" ></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "additional" }} ID' v-if="inbound.protocol === Protocols.VMESS">
-        <a-input type="number" v-model.number="client.alterId" style="width: 70px;"></a-input>
+        <a-input-number v-model="client.alterId" style="width: 70px;"></a-input-number>
     </a-form-item>
     <a-form-item label="ID" v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
         <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
@@ -43,7 +43,7 @@
 				<a-icon type="question-circle" theme="filled"></a-icon>
 			</a-tooltip>
 		</span>
-		<a-input type="number" v-model.number="client.limitIp" min="0" style="width: 70px;" ></a-input>
+		<a-input-number v-model="client.limitIp" min="0" style="width: 70px;"></a-input-number>
 	</a-form-item>
 	<a-form-item v-if="client.email && client.limitIp > 0 && isEdit">
 		<span slot="label">
@@ -82,7 +82,7 @@
     </a-form-item>
     <a-form-item>
         <span slot="label">
-            <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+            <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
             <a-tooltip>
                 <template slot="title">
                     0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -108,7 +108,7 @@
         <a-switch v-model="clientModal.delayedStart" @click="client._expiryTime=0"></a-switch>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientModal.delayedStart">
-        <a-input type="number" v-model.number="delayedExpireDays" :min="0"></a-input>
+        <a-input-number v-model="delayedExpireDays" :min="0"></a-input-number>
     </a-form-item>
     <a-form-item v-else>
         <span slot="label">
diff --git a/web/html/xui/form/inbound.html b/web/html/xui/form/inbound.html
index 09e7099d..603ca46a 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -25,11 +25,11 @@
         <a-input v-model.trim="inbound.listen"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
-        <a-input type="number" v-model.number="inbound.port"></a-input>
+        <a-input-number v-model="inbound.port"></a-input-number>
     </a-form-item>
     <a-form-item>
         <span slot="label">
-            <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+            <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
             <a-tooltip>
                 <template slot="title">
                     0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
diff --git a/web/html/xui/form/protocol/dokodemo.html b/web/html/xui/form/protocol/dokodemo.html
index 53c82c3c..f9204b8c 100644
--- a/web/html/xui/form/protocol/dokodemo.html
+++ b/web/html/xui/form/protocol/dokodemo.html
@@ -4,7 +4,7 @@
         <a-input v-model.trim="inbound.settings.address"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.destinationPort"}}'>
-        <a-input type="number" v-model.number="inbound.settings.port"></a-input>
+        <a-input-number v-model="inbound.settings.port"></a-input-number>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
         <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
diff --git a/web/html/xui/form/protocol/socks.html b/web/html/xui/form/protocol/socks.html
index 2662f1d6..89cde72c 100644
--- a/web/html/xui/form/protocol/socks.html
+++ b/web/html/xui/form/protocol/socks.html
@@ -1,6 +1,5 @@
 {{define "form/socks"}}
 <a-form layout="inline">
-    <!--    <a-form-item label="Password authentication">-->
     <a-form-item label='{{ i18n "password" }}'>
         <a-switch :checked="inbound.settings.auth === 'password'"
                   @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index b52c4dd9..e63943e6 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -33,7 +33,7 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-input type="number" v-model.number="client.limitIp" min="0"  style="width: 70px;" ></a-input>
+            <a-input-number v-model="client.limitIp" min="0"  style="width: 70px;"></a-input-number>
         </a-form-item>
         <a-form-item v-if="inbound.xtls" label="Flow">
             <a-select v-model="client.flow" style="width: 150px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
@@ -43,7 +43,7 @@
         </a-form-item>
         <a-form-item>
             <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                 <a-tooltip>
                     <template slot="title">
                         0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -113,7 +113,7 @@
             <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-input-number v-model="fallback.xver"></a-input-number>
         </a-form-item>
         <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
     </a-form>
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 1d733d02..33e0c170 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -33,7 +33,7 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-input type="number" v-model.number="client.limitIp" min="0"  style="width: 70px;" ></a-input>
+            <a-input-number v-model="client.limitIp" min="0"  style="width: 70px;"></a-input-number>
         </a-form-item>
         <a-form-item v-if="inbound.xtls" label="Flow">
             <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
@@ -49,7 +49,7 @@
         </a-form-item>
         <a-form-item>
             <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                 <a-tooltip>
                     <template slot="title">
                         0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -119,7 +119,7 @@
             <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-input-number v-model="fallback.xver"></a-input-number>
         </a-form-item>
         <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
     </a-form>
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index 9cd48544..6471e20d 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -15,7 +15,7 @@
             <a-input v-model.trim="client.email" style="width: 150px;"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "additional" }} ID'>
-            <a-input type="number" v-model.number="client.alterId" style="width: 70px;"></a-input>
+            <a-input-number v-model="client.alterId" style="width: 70px;"></a-input-number>
         </a-form-item>
         <a-form-item label="ID">
             <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
@@ -36,11 +36,11 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-input type="number" v-model.number="client.limitIp" min="0" style="width: 70px;"></a-input>
+            <a-input-number v-model="client.limitIp" min="0" style="width: 70px;"></a-input-number>
         </a-form-item>
         <a-form-item>
             <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                 <a-tooltip>
                     <template slot="title">
                         0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -67,7 +67,7 @@
     </a-collapse-panel>     
 </a-collapse>
 <a-collapse v-else>
-    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vmesses.length">
+    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount" }}: ' + inbound.settings.vmesses.length">
         <table width="100%">
                 <tr class="client-table-header">
                 <th v-for="col in Object.keys(inbound.settings.vmesses[0]).slice(0, 3)">[[ col ]]</th>
diff --git a/web/html/xui/form/stream/stream_kcp.html b/web/html/xui/form/stream/stream_kcp.html
index fd31b1ee..52a930f9 100644
--- a/web/html/xui/form/stream/stream_kcp.html
+++ b/web/html/xui/form/stream/stream_kcp.html
@@ -2,37 +2,37 @@
 <a-form layout="inline">
     <a-form-item label='{{ i18n "camouflage" }}'>
         <a-select v-model="inbound.stream.kcp.type" style="width: 280px;">
-            <a-select-option value="none">None（Not Camouflage）</a-select-option>
-            <a-select-option value="srtp">SRTP（Camouflage Video Call）</a-select-option>
-            <a-select-option value="utp">UTP（Camouflage BT Download）</a-select-option>
-            <a-select-option value="wechat-video">Wechat-Video（Camouflage WeChat Video）</a-select-option>
-            <a-select-option value="dtls">DTLS（Camouflage DTLS 1.2 Packages）</a-select-option>
-            <a-select-option value="wireguard">Wireguard（Camouflage Wireguard Packages）</a-select-option>
+            <a-select-option value="none">None (Not Camouflage)</a-select-option>
+            <a-select-option value="srtp">SRTP (Camouflage Video Call)</a-select-option>
+            <a-select-option value="utp">UTP (Camouflage BT Download)</a-select-option>
+            <a-select-option value="wechat-video">Wechat-Video (Camouflage WeChat Video)</a-select-option>
+            <a-select-option value="dtls">DTLS (Camouflage DTLS 1.2 Packages)</a-select-option>
+            <a-select-option value="wireguard">Wireguard (Camouflage Wireguard Packages)</a-select-option>
         </a-select>
     </a-form-item>
     <a-form-item label='{{ i18n "password" }}'>
-        <a-input v-model.number="inbound.stream.kcp.seed"></a-input>
-    </a-form-item>
+        <a-input v-model="inbound.stream.kcp.seed"></a-input>
+    </a-form-item><br />
     <a-form-item label="MTU">
-        <a-input type="number" v-model.number="inbound.stream.kcp.mtu"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.mtu"></a-input-number>
     </a-form-item>
     <a-form-item label="TTI (ms)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.tti"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.tti"></a-input-number>
     </a-form-item>
     <a-form-item label="Uplink Capacity (MB/S)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.upCap"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.upCap"></a-input-number>
     </a-form-item>
     <a-form-item label="Downlink Capacity (MB/S)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.downCap"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.downCap"></a-input-number>
     </a-form-item>
     <a-form-item label="Congestion">
         <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
     </a-form-item>
     <a-form-item label="Read Buffer Size (MB)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.readBuffer"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.readBuffer"></a-input-number>
     </a-form-item>
     <a-form-item label="Write Buffer Size (MB)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.writeBuffer"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.writeBuffer"></a-input-number>
     </a-form-item>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/stream/stream_quic.html b/web/html/xui/form/stream/stream_quic.html
index 2a48af84..4d04587a 100644
--- a/web/html/xui/form/stream/stream_quic.html
+++ b/web/html/xui/form/stream/stream_quic.html
@@ -12,12 +12,12 @@
     </a-form-item>
     <a-form-item label='{{ i18n "camouflage" }}'>
         <a-select v-model="inbound.stream.quic.type" style="width: 280px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
-            <a-select-option value="none">none（not camouflage）</a-select-option>
-            <a-select-option value="srtp">srtp（camouflage video call）</a-select-option>
-            <a-select-option value="utp">utp（camouflage BT download）</a-select-option>
-            <a-select-option value="wechat-video">wechat-video（camouflage WeChat video）</a-select-option>
-            <a-select-option value="dtls">dtls（camouflage DTLS 1.2 packages）</a-select-option>
-            <a-select-option value="wireguard">wireguard（camouflage wireguard packages）</a-select-option>
+            <a-select-option value="none">none (not camouflage)</a-select-option>
+            <a-select-option value="srtp">srtp (camouflage video call)</a-select-option>
+            <a-select-option value="utp">utp (camouflage BT download)</a-select-option>
+            <a-select-option value="wechat-video">wechat-video (camouflage WeChat video)</a-select-option>
+            <a-select-option value="dtls">dtls (camouflage DTLS 1.2 packages)</a-select-option>
+            <a-select-option value="wireguard">wireguard (camouflage wireguard packages)</a-select-option>
         </a-select>
     </a-form-item>
 </a-form>
diff --git a/web/html/xui/form/stream/stream_tcp.html b/web/html/xui/form/stream/stream_tcp.html
index 958f8f25..993fb0d0 100644
--- a/web/html/xui/form/stream/stream_tcp.html
+++ b/web/html/xui/form/stream/stream_tcp.html
@@ -4,7 +4,7 @@
     <a-form-item label="AcceptProxyProtocol">
         <a-switch v-model="inbound.stream.tcp.acceptProxyProtocol"></a-switch>
     </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'"
                 @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'">
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index e4be34cf..7962acf3 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/