use tags in outbounds

frontend/src/components/protocols/Selector.vue

@@ -2,10 +2,24 @@
   <v-card subtitle="Selector">
     <v-row>
       <v-col cols="12" sm="6">
-        <v-text-field v-model="outbounds" label="Outbounds(comma separated)" hide-details></v-text-field>
+        <v-combobox
+          v-model="data.outbounds"
+          :items="tags"
+          :label="$t('pages.outbounds')"
+          multiple
+          @update:model-value="updateDefault"
+          chips
+          hide-details
+        ></v-combobox>
       </v-col>
       <v-col cols="12" sm="6" md="4">
-        <v-text-field v-model="data.default" label="Default" hide-details></v-text-field>
+        <v-combobox
+          v-model="data.default"
+          :items="data.outbounds"
+          label="Default"
+          clearable
+          hide-details
+        ></v-combobox>
       </v-col>
       <v-col cols="12" sm="6">
         <v-switch v-model="data.interrupt_exist_connections" color="primary" label="Interrupt exist connections" hide-details></v-switch>
@@ -17,15 +31,16 @@
 <script lang="ts">
 
 export default {
-  props: ['data'],
+  props: ['data','tags'],
   data() {
     return {}
   },
-  computed: {
-    outbounds: {
-      get() { return this.$props.data.outbounds ? this.$props.data.outbounds.join(',') : '' },
-      set(v:string) { this.$props.data.outbounds = v.length > 0 ? v.split(',') : undefined }
-    },
+  methods: {
+    updateDefault() {
+      if (!this.$props.data.outbounds?.includes(this.$props.data.default)) {
+        delete this.$props.data.default
+      }
+    }
   },
 }
 </script>

frontend/src/components/protocols/UrlTest.vue

@@ -2,12 +2,19 @@
   <v-card subtitle="URL Test">
     <v-row>
       <v-col cols="12" sm="6">
-        <v-text-field v-model="outbounds" label="Outbounds(comma separated)" hide-details></v-text-field>
+        <v-combobox
+          v-model="data.outbounds"
+          :items="tags"
+          :label="$t('pages.outbounds')"
+          multiple
+          chips
+          hide-details
+        ></v-combobox>
       </v-col>
     </v-row>
     <v-row>
       <v-col cols="12" sm="6" v-if="optionUrl">
-        <v-text-field v-model="data.url" label="URL" hide-details></v-text-field>
+        <v-select v-model="data.url" label="URL" hide-details></v-select>
       </v-col>
     </v-row>
     <v-row>
@@ -74,7 +81,7 @@
 <script lang="ts">
 
 export default {
-  props: ['data'],
+  props: ['data', 'tags'],
   data() {
     return {
       menu: false,
@@ -108,11 +115,7 @@ export default {
     idle_timeout: {
       get() { return this.$props.data.idle_timeout ? parseInt(this.$props.data.idle_timeout.replace('m','')) : 30 },
       set(v:number) { this.$props.data.idle_timeout = v > 0 ? v + 'm' : '0m' }
-    },
-    outbounds: {
-      get() { return this.$props.data.outbounds ? this.$props.data.outbounds.join(',') : '' },
-      set(v:string) { this.$props.data.outbounds = v.length > 0 ? v.split(',') : undefined }
-    },
+    }
   },
 }
 </script>

frontend/src/layouts/modals/Outbound.vue

@@ -53,15 +53,14 @@
         <Hysteria2 v-if="outbound.type == outTypes.Hysteria2" direction="out" :data="outbound" />
         <Tor v-if="outbound.type == outTypes.Tor" :data="outbound" />
         <Ssh v-if="outbound.type == outTypes.SSH" :data="outbound" />
-        <Selector v-if="outbound.type == outTypes.Selector" :data="outbound" />
-        <UrlTest v-if="outbound.type == outTypes.URLTest" :data="outbound" />
+        <Selector v-if="outbound.type == outTypes.Selector" :data="outbound" :tags="tags" />
+        <UrlTest v-if="outbound.type == outTypes.URLTest" :data="outbound" :tags="tags" />
 
         <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" />
         <v-switch v-model="outboundStats" color="primary" :label="$t('stats.enable')" hide-details></v-switch>
-        <pre>{{ outbound }}</pre>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
@@ -109,7 +108,7 @@ import Ssh from '@/components/protocols/Ssh.vue'
 import Selector from '@/components/protocols/Selector.vue'
 import UrlTest from '@/components/protocols/UrlTest.vue'
 export default {
-  props: ['visible', 'data', 'id', 'stats'],
+  props: ['visible', 'data', 'id', 'stats', 'tags'],
   emits: ['close', 'save'],
   data() {
     return {

frontend/src/views/Outbounds.vue

@@ -5,6 +5,7 @@
     :id="modal.id"
     :stats="modal.stats"
     :data="modal.data"
+    :tags="outboundTags"
     @close="closeModal"
     @save="saveModal"
   />
@@ -30,9 +31,30 @@
         </v-card-subtitle>
         <v-card-text>
           <v-row>
-            <v-col>Server</v-col>
+            <v-col>{{ $t('in.addr') }}</v-col>
             <v-col dir="ltr">
-              {{ (item.server ?? '') + ' ' + (item.server_port ?? '') }}
+              {{ item.server?? '-' }}
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>{{ $t('in.port') }}</v-col>
+            <v-col dir="ltr">
+              {{ item.server_port?? '-' }}
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>{{ $t('in.tls') }}</v-col>
+            <v-col dir="ltr">
+              {{ Object.hasOwn(item,'tls') ? $t(item.tls?.enabled ? 'enable' : 'disable') : '-'  }}
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>{{ $t('online') }}</v-col>
+            <v-col dir="ltr">
+              <template v-if="onlines[index]">
+                <v-chip density="comfortable" size="small" color="success" variant="flat">{{ $t('online') }}</v-chip>
+              </template>
+              <template v-else>-</template>
             </v-col>
           </v-row>
         </v-card-text>
@@ -83,6 +105,14 @@ const outbounds = computed((): Outbound[] => {
   return <Outbound[]> appConfig.value.outbounds
 })
 
+const outboundTags = computed((): string[] => {
+  return outbounds.value.map((o:Outbound) => o.tag)
+})
+
+const onlines = computed(() => {
+  return Data().onlines.outbound ? outbounds.value.map(i => Data().onlines.outbound.includes(i.tag)) : []
+})
+
 const v2rayStats = computed((): V2rayApiStats => {
   return <V2rayApiStats> appConfig.value.experimental.v2ray_api.stats
 })