UI添加两个过滤器: 区域过滤器和类型过滤器

web/src/components/RegionFilter.vue

@@ -4,7 +4,7 @@
       <v-icon left color="primary">flag</v-icon>
       区域过滤
       <v-spacer></v-spacer>
-      <v-btn icon>
+      <v-btn icon @click="$emit('deleteProcess', idx)">
         <v-icon color="error">mdi-delete</v-icon>
       </v-btn>
       <v-dialog>
@@ -18,7 +18,7 @@
             区域过滤器
           </v-card-title>
           <v-card-text>
-            根据区域过滤节点，不选则默认保留所有节点。
+            根据区域过滤节点，至少需要保留一个区域！
           </v-card-text>
         </v-card>
       </v-dialog>
@@ -67,11 +67,25 @@ const regions = [
   }
 ];
 export default {
+  props: ["args"],
   data: function () {
     return {
+      idx: this.$vnode.key,
       regions,
       selection: []
     }
+  },
+  created() {
+    this.selection = this.args || [];
+  },
+  watch: {
+    selection() {
+      this.$emit("dataChanged", {
+        idx: this.idx,
+        type: "Region Filter",
+        args: this.selection
+      })
+    }
   }
 }
 </script>

web/src/components/TypeFilter.vue

@@ -0,0 +1,91 @@
+<template>
+  <v-card class="ml-1 mr-1 mb-1 mt-1">
+    <v-card-title>
+      <v-icon left color="primary">cloud_circle</v-icon>
+      节点类型过滤
+      <v-spacer></v-spacer>
+      <v-btn icon @click="$emit('deleteProcess', idx)">
+        <v-icon color="error">mdi-delete</v-icon>
+      </v-btn>
+      <v-dialog>
+        <template #activator="{on}">
+          <v-btn icon v-on="on">
+            <v-icon>help</v-icon>
+          </v-btn>
+        </template>
+        <v-card>
+          <v-card-title class="headline">
+            节点类型过滤器
+          </v-card-title>
+          <v-card-text>
+            根据节点类型过滤节点，至少需要保留一种类型！
+          </v-card-text>
+        </v-card>
+      </v-dialog>
+    </v-card-title>
+    <v-card-text>
+      <v-chip-group multiple active-class="primary accent-4" v-model="selection" column>
+        <v-chip
+            class="ma-2"
+            v-for="type in types"
+            label
+            :key="type.name"
+            :value="type.value"
+        >
+          {{ type.name }}
+        </v-chip>
+      </v-chip-group>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+const types = [
+  {
+    name: "Shadowsocks",
+    value: "ss"
+  },
+  {
+    name: "Shadowsocks R",
+    value: "ssr"
+  },
+  {
+    name: "V2Ray",
+    value: "vmess"
+  },
+  {
+    name: "Trojan",
+    value: "trojan"
+  },
+  {
+    name: "HTTP",
+    value: "http"
+  }
+];
+export default {
+  props: ['args'],
+  data: function () {
+    return {
+      idx: this.$vnode.key,
+      types,
+      selection: []
+    }
+  },
+  created() {
+    this.selection = this.args || [];
+  },
+  watch: {
+    selection() {
+      this.$emit("dataChanged", {
+        idx: this.idx,
+        type: "Type Filter",
+        args: this.selection
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>