load detour tags

frontend/src/components/Dial.vue

@@ -2,10 +2,12 @@
   <v-card subtitle="Dial" style="background-color: inherit;">
     <v-row>
       <v-col cols="12" sm="6" md="4" v-if="optionDetour">
-        <v-text-field
-        label="Forward to Outbound tag"
-        hide-details
-        v-model="dial.detour"></v-text-field>
+        <v-select
+          hide-details
+          label="Forward to Outbound tag"
+          :items="outTags"
+          v-model="dial.detour">
+        </v-select>
       </v-col>
       <v-col cols="12" sm="6" md="4" v-if="optionBind">
         <v-text-field
@@ -133,7 +135,7 @@
 
 <script lang="ts">
 export default {
-  props: ['dial'],
+  props: ['dial', 'outTags'],
   data() {
     return {
       menu: false
@@ -154,7 +156,7 @@ export default {
     },
     optionDetour: {
       get(): boolean { return this.$props.dial.detour != undefined },
-      set(v:boolean) { v ? this.$props.dial.detour = '' : delete this.$props.dial.detour }
+      set(v:boolean) { v ? this.$props.dial.detour = this.outTags[0]?? '' : delete this.$props.dial.detour }
     },
     optionBind: {
       get(): boolean { return this.$props.dial.bind_interface != undefined },

frontend/src/components/Listen.vue

@@ -20,10 +20,12 @@
     </v-row>
     <v-row>
       <v-col cols="12" sm="6" md="4" v-if="optionDetour">
-        <v-text-field
-        label="Forward to Inbound tag"
+        <v-select
+        label="Detour"
         hide-details
-        v-model="inbound.detour"></v-text-field>
+        :items="inTags"
+        v-model="inbound.detour">
+        </v-select>
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-switch v-model="inbound.sniff" color="primary" :label="$t('in.sniffing')" hide-details></v-switch>
@@ -106,7 +108,7 @@
 
 <script lang="ts">
 export default {
-  props: ['inbound'],
+  props: ['inbound', 'inTags'],
   data() {
     return {
       menu: false
@@ -143,7 +145,7 @@ export default {
     },
     optionDetour: {
       get(): boolean { return this.$props.inbound.detour != undefined },
-      set(v:boolean) { this.$props.inbound.detour = v ? '' : undefined }
+      set(v:boolean) { this.$props.inbound.detour = v ? this.inTags[0]?? '' : undefined }
     },
     optionDS: {
       get(): boolean { return this.$props.inbound.domain_strategy != undefined },

frontend/src/components/protocols/ShadowTls.vue

@@ -9,11 +9,11 @@
           v-model="version">
         </v-select>
       </v-col>
-      <v-col cols="12" sm="6" md="4" v-if="inbound.password != undefined">
+      <v-col cols="12" sm="6" md="4" v-if="data.password != undefined">
         <v-text-field
         label="Password"
         hide-details
-        v-model="inbound.password">
+        v-model="data.password">
         </v-text-field>
       </v-col>
     </v-row>
@@ -35,7 +35,7 @@
         </v-text-field>
       </v-col>
     </v-row>
-    <Dial :dial="Inbound.handshake" />
+    <Dial :dial="Inbound.handshake" :outTags="outTags" />
     <v-row v-if="Inbound.handshake_for_server_name != undefined">
       <v-col cols="12" sm="6" md="4">
         <v-text-field
@@ -82,7 +82,7 @@
           </v-text-field>
         </v-col>
       </v-row>
-      <Dial :dial="value" />
+      <Dial :dial="value" :outTags="outTags" />
     </v-card>
   </v-card>
 </template>
@@ -92,15 +92,15 @@ import { ShadowTLS } from '@/types/inbounds'
 import Dial from '../Dial.vue'
 
 export default {
-  props: ['inbound'],
+  props: ['data', 'outTags'],
   data() {
     return {
       handshake_server: ''
     }
   },
   methods: {
     addHandshakeServer() {
-      this.inbound.handshake_for_server_name[this.handshake_server] = {}
+      this.data.handshake_for_server_name[this.handshake_server] = {}
       // Clear the input field after adding the server
       this.handshake_server = ''
     }
@@ -141,7 +141,7 @@ export default {
       }
     },
     Inbound(): ShadowTLS {
-      return <ShadowTLS>this.$props.inbound;
+      return <ShadowTLS>this.$props.data;
     },
     server_port: {
       get() { return this.Inbound.handshake.server_port ? this.Inbound.handshake.server_port : 443; },

frontend/src/layouts/modals/Inbound.vue

@@ -21,13 +21,13 @@
             <v-text-field v-model="inbound.tag" :label="$t('in.tag')" hide-details></v-text-field>
           </v-col>
         </v-row>
-        <Listen :inbound="inbound" />
+        <Listen :inbound="inbound" :inTags="inTags" />
         <Direct v-if="inbound.type == inTypes.Direct" direction="in" :data="inbound" />
         <Shadowsocks v-if="inbound.type == inTypes.Shadowsocks" direction="in" :data="inbound" />
         <Hysteria v-if="inbound.type == inTypes.Hysteria" direction="in" :data="inbound" />
         <Hysteria2 v-if="inbound.type == inTypes.Hysteria2" direction="in" :data="inbound" />
         <Naive v-if="inbound.type == inTypes.Naive" :inbound="inbound" />
-        <ShadowTls v-if="inbound.type == inTypes.ShadowTLS" direction="in" :data="inbound" />
+        <ShadowTls v-if="inbound.type == inTypes.ShadowTLS" direction="in" :data="inbound" :outTags="outTags" />
         <Tuic v-if="inbound.type == inTypes.TUIC" direction="in" :data="inbound" />
         <TProxy v-if="inbound.type == inTypes.TProxy" :inbound="inbound" />
         <Transport v-if="Object.hasOwn(inbound,'transport')" :data="inbound" />
@@ -76,7 +76,7 @@ import RandomUtil from '@/plugins/randomUtil'
 import Multiplex from '@/components/Multiplex.vue'
 import Transport from '@/components/Transport.vue'
 export default {
-  props: ['visible', 'data', 'id', 'stats'],
+  props: ['visible', 'data', 'id', 'stats', 'inTags', 'outTags'],
   emits: ['close', 'save'],
   data() {
     return {

frontend/src/layouts/modals/Outbound.vue

@@ -59,7 +59,7 @@
         <Transport v-if="Object.hasOwn(outbound,'transport')" :data="outbound" />
         <OutTLS v-if="Object.hasOwn(outbound,'tls')" :outbound="outbound" />
         <Multiplex v-if="Object.hasOwn(outbound,'multiplex')" direction="out" :data="outbound" />
-        <Dial v-if="!NoDial.includes(outbound.type)" :dial="outbound" />
+        <Dial v-if="!NoDial.includes(outbound.type)" :dial="outbound" :outTags="tags" />
         <v-switch v-model="outboundStats" color="primary" :label="$t('stats.enable')" hide-details></v-switch>
       </v-card-text>
       <v-card-actions>

frontend/src/views/Basics.vue

@@ -132,7 +132,7 @@
             ></v-text-field>
           </v-col>
         </v-row>
-        <Dial :dial="appConfig.ntp" v-if="appConfig.ntp?.enabled" />
+        <Dial :dial="appConfig.ntp" :outTags="outboundTags" v-if="appConfig.ntp?.enabled" />
       </v-expansion-panel-text>
     </v-expansion-panel>
     <v-expansion-panel title="Routing">
@@ -349,13 +349,7 @@ const addDnsServer = () => {
 
 const routeMark = computed({
   get() { return appConfig.value.route.default_mark?? 0 },
-  set(v:number) {
-    if (v) {
-      appConfig.value.route.default_mark = v
-    } else {
-      delete appConfig.value.route.default_mark
-    }
-  }
+  set(v:number) { v>0 ? appConfig.value.route.default_mark = v : delete appConfig.value.route.default_mark }
 })
 
 const enableNtp = computed({
@@ -383,10 +377,6 @@ const enableCacheFile = computed({
 
 const enableClashApi = computed({
   get() { return appConfig.value.experimental.clash_api != undefined },
-  set(v:boolean) { 
-    if (v){
-      appConfig.value.experimental.clash_api = {}
-    } else { delete appConfig.value.experimental.clash_api  }
-  }
+  set(v:boolean) { v ? appConfig.value.experimental.clash_api = {} : delete appConfig.value.experimental.clash_api }
 })
 </script>

frontend/src/views/Inbounds.vue

@@ -5,6 +5,8 @@
     :id="modal.id"
     :stats="modal.stats"
     :data="modal.data"
+    :inTags="inTags"
+    :outTags="outTags"
     @close="closeModal"
     @save="saveModal"
   />
@@ -115,6 +117,14 @@ const inbounds = computed((): Inbound[] => {
   return <Inbound[]> appConfig.value.inbounds
 })
 
+const inTags = computed((): string[] => {
+  return appConfig.value.inbounds.map(i => i.tag)
+})
+
+const outTags = computed((): string[] => {
+  return appConfig.value.outbounds.map(i => i.tag)
+})
+
 const clients = computed((): Client[] => {
   return <Client[]> Data().clients
 })