Outbound modal

frontend/src/layouts/modals/Inbound.vue

@@ -22,18 +22,18 @@
           </v-col>
         </v-row>
         <Listen :inbound="inbound" />
-        <Direct v-if="inbound.type == inTypes.Direct" :inbound="inbound" />
-        <Shadowsocks v-if="inbound.type == inTypes.Shadowsocks" :inbound="inbound" />
-        <Hysteria v-if="inbound.type == inTypes.Hysteria" :inbound="inbound" />
-        <Hysteria2 v-if="inbound.type == inTypes.Hysteria2" :inbound="inbound" />
+        <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" :inbound="inbound" />
-        <Tuic v-if="inbound.type == inTypes.TUIC" :inbound="inbound" />
+        <ShadowTls v-if="inbound.type == inTypes.ShadowTLS" direction="in" :data="inbound" />
+        <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')" :inbound="inbound" />
+        <Transport v-if="Object.hasOwn(inbound,'transport')" :data="inbound" />
         <Users v-if="HasOptionalUser.includes(inbound.type)" :inbound="inbound" :id="id" />
         <InTls v-if="Object.hasOwn(inbound,'tls')"  :inbound="inbound" />
-        <InMulitiplex v-if="Object.hasOwn(inbound,'multiplex')"  :inbound="inbound" />
+        <Multiplex v-if="Object.hasOwn(inbound,'multiplex')" direction="in" :data="inbound" />
         <v-switch v-model="inboundStats" color="primary" :label="$t('stats.enable')" hide-details></v-switch>
       </v-card-text>
       <v-card-actions>
@@ -73,56 +73,56 @@ import Tuic from '@/components/protocols/Tuic.vue'
 import InTls from '@/components/InTLS.vue'
 import TProxy from '@/components/protocols/TProxy.vue'
 import RandomUtil from '@/plugins/randomUtil'
-import InMulitiplex from '@/components/InMulitiplex.vue'
+import Multiplex from '@/components/Multiplex.vue'
 import Transport from '@/components/Transport.vue'
 export default {
-    props: ['visible', 'data', 'id', 'stats'],
-    emits: ['close', 'save'],
-    data() {
-        return {
-            inbound: createInbound("direct",{ "tag": "" }),
-            title: "add",
-            loading: false,
-            inTypes: InTypes,
-            inboundStats: false,
-            HasOptionalUser: [InTypes.Mixed,InTypes.SOCKS,InTypes.HTTP,InTypes.Shadowsocks],
-        }
+  props: ['visible', 'data', 'id', 'stats'],
+  emits: ['close', 'save'],
+  data() {
+    return {
+      inbound: createInbound("direct",{ "tag": "" }),
+      title: "add",
+      loading: false,
+      inTypes: InTypes,
+      inboundStats: false,
+      HasOptionalUser: [InTypes.Mixed,InTypes.SOCKS,InTypes.HTTP,InTypes.Shadowsocks],
+    }
+  },
+  methods: {
+    updateData() {
+      if (this.$props.id != -1) {
+        const newData = JSON.parse(this.$props.data)
+        this.inbound = createInbound(newData.type, newData)
+        this.title = "edit"
+      }
+      else {
+        const port = RandomUtil.randomIntRange(10000, 60000)
+        this.inbound = createInbound("mixed",{ tag: "in-"+port ,listen: "::", listen_port: port })
+        this.title = "add"
+      }
+      this.inboundStats = this.$props.stats
     },
-    methods: {
-      updateData() {
-        if (this.$props.id != -1) {
-            const newData = JSON.parse(this.$props.data)
-            this.inbound = createInbound(newData.type, newData)
-            this.title = "edit"
-        }
-        else {
-            const port = RandomUtil.randomIntRange(10000, 60000)
-            this.inbound = createInbound("mixed",{ tag: "in-"+port ,listen: "::", listen_port: port })
-            this.title = "add"
-        }
-        this.inboundStats = this.$props.stats
-      },
-      changeType() {
-        const prevConfig = { tag: this.inbound.tag ,listen: this.inbound.listen, listen_port: this.inbound.listen_port }
-        this.inbound = createInbound(this.inbound.type, prevConfig)
-      },
-      closeModal() {
-        this.updateData() // reset
-        this.$emit('close')
-      },
-      saveChanges() {
-        this.loading = true
-        this.$emit('save', this.inbound, this.inboundStats)
-        this.loading = false
-      },
+    changeType() {
+      const prevConfig = { tag: this.inbound.tag ,listen: this.inbound.listen, listen_port: this.inbound.listen_port }
+      this.inbound = createInbound(this.inbound.type, prevConfig)
     },
-    watch: {
-      visible(newValue) {
-        if (newValue) {
-            this.updateData()
-        }
-      },
+    closeModal() {
+      this.updateData() // reset
+      this.$emit('close')
     },
-    components: { Listen, InTls, Hysteria2, Naive, Direct, Shadowsocks, Users, Hysteria, ShadowTls, TProxy, InMulitiplex, Tuic, Transport }
+    saveChanges() {
+      this.loading = true
+      this.$emit('save', this.inbound, this.inboundStats)
+      this.loading = false
+    },
+  },
+  watch: {
+    visible(newValue) {
+      if (newValue) {
+        this.updateData()
+      }
+    },
+  },
+  components: { Listen, InTls, Hysteria2, Naive, Direct, Shadowsocks, Users, Hysteria, ShadowTls, TProxy, Multiplex, Tuic, Transport }
 }
 </script>