Add TUN protocol for inbound

Introduces TUN protocol to inbound.js, including a new TunSettings class. Updates inbound form to support TUN protocol and adds a dedicated form template for TUN settings. Translation files are updated with TUN-related strings for all supported languages.

web/html/form/inbound.html

@@ -1,6 +1,7 @@
 {{define "form/inbound"}}
 <!-- base -->
-<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 "enable" }}'>
         <a-switch v-model="dbInbound.enable"></a-switch>
     </a-form-item>
@@ -9,8 +10,10 @@
     </a-form-item>
 
     <a-form-item label='{{ i18n "protocol" }}'>
-        <a-select v-model="inbound.protocol" :disabled="isEdit" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
+        <a-select v-model="inbound.protocol" :disabled="isEdit"
+            :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p
+                ]]</a-select-option>
         </a-select>
     </a-form-item>
 
@@ -28,7 +31,8 @@
     </a-form-item>
 
     <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
-        <a-input-number v-model.number="inbound.port" :min="1" :max="65535"></a-input-number>
+        <a-input-number v-model.number="inbound.port" :min="1"
+            :max="65535"></a-input-number>
     </a-form-item>
 
     <a-form-item>
@@ -41,29 +45,42 @@
                 <a-icon type="question-circle"></a-icon>
             </a-tooltip>
         </template>
-        <a-input-number v-model.number="dbInbound.totalGB" :min="0"></a-input-number>
+        <a-input-number v-model.number="dbInbound.totalGB"
+            :min="0"></a-input-number>
     </a-form-item>
 
     <a-form-item>
         <template slot="label">
             <a-tooltip>
                 <template slot="title">
-                    <span>{{ i18n "pages.inbounds.periodicTrafficResetDesc" }}</span>
-                    <br v-if="dbInbound.lastTrafficResetTime && dbInbound.lastTrafficResetTime > 0">
-                    <span v-if="dbInbound.lastTrafficResetTime && dbInbound.lastTrafficResetTime > 0">
+                    <span>{{ i18n "pages.inbounds.periodicTrafficResetDesc"
+                        }}</span>
+                    <br
+                        v-if="dbInbound.lastTrafficResetTime && dbInbound.lastTrafficResetTime > 0">
+                    <span
+                        v-if="dbInbound.lastTrafficResetTime && dbInbound.lastTrafficResetTime > 0">
                         <strong>{{ i18n "pages.inbounds.lastReset" }}:</strong>
-                        <span>[[ IntlUtil.formatDate(dbInbound.lastTrafficResetTime) ]]</span>
+                        <span>[[
+                            IntlUtil.formatDate(dbInbound.lastTrafficResetTime)
+                            ]]</span>
                     </span>
                 </template>
                 {{ i18n "pages.inbounds.periodicTrafficResetTitle" }}
                 <a-icon type="question-circle"></a-icon>
             </a-tooltip>
         </template>
-        <a-select v-model="dbInbound.trafficReset" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option value="never">{{ i18n "pages.inbounds.periodicTrafficReset.never" }}</a-select-option>
-            <a-select-option value="daily">{{ i18n "pages.inbounds.periodicTrafficReset.daily" }}</a-select-option>
-            <a-select-option value="weekly">{{ i18n "pages.inbounds.periodicTrafficReset.weekly" }}</a-select-option>
-            <a-select-option value="monthly">{{ i18n "pages.inbounds.periodicTrafficReset.monthly" }}</a-select-option>
+        <a-select v-model="dbInbound.trafficReset"
+            :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="never">{{ i18n
+                "pages.inbounds.periodicTrafficReset.never" }}</a-select-option>
+            <a-select-option value="daily">{{ i18n
+                "pages.inbounds.periodicTrafficReset.daily" }}</a-select-option>
+            <a-select-option value="weekly">{{ i18n
+                "pages.inbounds.periodicTrafficReset.weekly"
+                }}</a-select-option>
+            <a-select-option value="monthly">{{ i18n
+                "pages.inbounds.periodicTrafficReset.monthly"
+                }}</a-select-option>
         </a-select>
     </a-form-item>
 
@@ -71,16 +88,20 @@
         <template slot="label">
             <a-tooltip>
                 <template slot="title">
-                    <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                    <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire"
+                        }}</span>
                 </template>
                 {{ i18n "pages.inbounds.expireDate" }}
                 <a-icon type="question-circle"></a-icon>
             </a-tooltip>
         </template>
-        <a-date-picker :style="{ width: '100%' }" v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
-            format="YYYY-MM-DD HH:mm:ss" :dropdown-class-name="themeSwitcher.currentTheme"
+        <a-date-picker :style="{ width: '100%' }"
+            v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
+            format="YYYY-MM-DD HH:mm:ss"
+            :dropdown-class-name="themeSwitcher.currentTheme"
             v-model="dbInbound._expiryTime"></a-date-picker>
-        <a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
+        <a-persian-datepicker v-else
+            placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
             value="dbInbound._expiryTime" v-model="dbInbound._expiryTime">
         </a-persian-datepicker>
     </a-form-item>
@@ -126,6 +147,11 @@
     {{template "form/wireguard"}}
 </template>
 
+<!-- tun -->
+<template v-if="inbound.protocol === Protocols.TUN">
+    {{template "form/tun"}}
+</template>
+
 <!-- stream settings -->
 <template v-if="inbound.canEnableStream()">
     {{template "form/streamSettings"}}

web/html/form/protocol/tun.html

@@ -0,0 +1,44 @@
+{{define "form/tun"}}
+<a-form :colon="false" :label-col="{ md: {span:8} }"
+    :wrapper-col="{ md: {span:14} }">
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.xray.tun.nameDesc" }}</span>
+                </template>
+                Interface Name
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="inbound.settings.name"
+            placeholder="xray0"></a-input>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.xray.tun.mtuDesc" }}</span>
+                </template>
+                MTU
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number v-model.number="inbound.settings.mtu" :min="1"
+            :max="9000" placeholder="1500"></a-input-number>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.xray.tun.userLevelDesc" }}</span>
+                </template>
+                {{ i18n "pages.xray.tun.userLevel" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number v-model.number="inbound.settings.userLevel" :min="0"
+            placeholder="0"></a-input-number>
+    </a-form-item>
+</a-form>
+{{end}}