UI Improvements

web/src/components/FlagOperator.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-card class="ml-1 mr-1 mb-1 mt-1">
+    <v-card-title>
+      <v-icon left color="primary">flag</v-icon>
+      国旗
+      <v-spacer></v-spacer>
+      <v-btn icon @click="$emit('up', idx)">
+        <v-icon>keyboard_arrow_up</v-icon>
+      </v-btn>
+      <v-btn icon @click="$emit('down', idx)">
+        <v-icon>keyboard_arrow_down</v-icon>
+      </v-btn>
+      <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-radio-group v-model="mode">
+        <v-row>
+          <v-col>
+            <v-radio label="添加" value="ADD"/>
+          </v-col>
+          <v-col>
+            <v-radio label="删除" value="REMOVE"/>
+          </v-col>
+        </v-row>
+      </v-radio-group>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: ["args"],
+  data: function () {
+    return {
+      idx: this.$vnode.key,
+      mode: "DEFAULT"
+    }
+  },
+  created() {
+    if (typeof this.args !== 'undefined')
+      this.mode = this.args === true ? "ADD" : "REMOVE";
+  },
+  watch: {
+    mode() {
+      this.$emit("dataChanged", {
+        idx: this.idx,
+        args: this.mode === "ADD"
+      })
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

web/src/components/KeywordDeleteOperator.vue

@@ -38,6 +38,7 @@
             v-for="(keyword, idx) in keywords"
             :key="idx"
             @click:close="remove(idx)"
+            @click="edit(idx)"
         >
           {{ keyword }}
         </v-chip>
@@ -76,6 +77,10 @@ export default {
         this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空！");
       }
     },
+    edit(idx) {
+      this.form.keyword = this.keywords[idx];
+      this.remove(idx);
+    },
     remove(idx) {
       this.keywords.splice(idx, 1);
     },

web/src/components/KeywordFilter.vue

@@ -49,6 +49,7 @@
             v-for="(keyword, idx) in keywords"
             :key="idx"
             @click:close="remove(idx)"
+            @click="edit(idx)"
         >
           {{ keyword }}
         </v-chip>
@@ -87,6 +88,10 @@ export default {
         this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空！");
       }
     },
+    edit(idx) {
+      this.form.keyword = this.keywords[idx];
+      this.remove(idx);
+    },
     remove(idx) {
       this.keywords.splice(idx, 1);
     },

web/src/components/KeywordRenameOperator.vue

@@ -38,6 +38,7 @@
             v-for="(chip, idx) in chips"
             :key="idx"
             @click:close="remove(idx)"
+            @click="edit(idx)"
         >
           {{ chip }}
         </v-chip>
@@ -84,16 +85,16 @@ export default {
     chips() {
       return this.keywords.map(k => {
         const {old, now} = k;
-        return `${old} ⇒ ${now}`;
+        return `${old} ⇒ ${now.length === 0 ? "∅" : now}`;
       });
     }
   },
   methods: {
     add() {
-      if (this.form.keyword && this.form.replace) {
+      if (this.form.keyword) {
         this.keywords.push({
           old: this.form.keyword,
-          now: this.form.replace
+          now: this.form.replace || ""
         });
         this.form.keyword = "";
         this.form.replace = "";
@@ -101,6 +102,11 @@ export default {
         this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空！");
       }
     },
+    edit(idx) {
+      this.form.keyword = this.keywords[idx].old;
+      this.form.replace = this.keywords[idx].now;
+      this.remove(idx);
+    },
     remove(idx) {
       this.keywords.splice(idx, 1);
     },

web/src/components/RegexDeleteOperator.vue

@@ -41,6 +41,7 @@
             v-for="(regex, idx) in regexps"
             :key="idx"
             @click:close="remove(idx)"
+            @click="edit(idx)"
         >
           {{ regex }}
         </v-chip>
@@ -79,6 +80,10 @@ export default {
         this.$store.commit("SET_ERROR_MESSAGE", "正则表达式不能为空！");
       }
     },
+    edit(idx) {
+      this.form.regex = this.regexps[idx];
+      this.remove(idx);
+    },
     remove(idx) {
       this.regexps.splice(idx, 1);
     },

web/src/components/RegexFilter.vue

@@ -53,6 +53,7 @@
             v-for="(regex, idx) in regexps"
             :key="idx"
             @click:close="remove(idx)"
+            @click="edit(idx)"
         >
           {{ regex }}
         </v-chip>
@@ -91,6 +92,10 @@ export default {
         this.$store.commit("SET_ERROR_MESSAGE", "正则表达式不能为空！");
       }
     },
+    edit(idx) {
+      this.form.regex = this.regexps[idx];
+      this.remove(idx);
+    },
     remove(idx) {
       this.regexps.splice(idx, 1);
     },

web/src/components/RegexRenameOperator.vue

@@ -38,6 +38,7 @@
             v-for="(chip, idx) in chips"
             :key="idx"
             @click:close="remove(idx)"
+            @click="edit(idx)"
         >
           {{ chip }}
         </v-chip>
@@ -45,7 +46,7 @@
       <v-row>
         <v-col>
           <v-text-field
-              placeholder="关键词"
+              placeholder="正则表达式"
               solo
               v-model="form.regex"
           />
@@ -84,23 +85,28 @@ export default {
     chips() {
       return this.regexps.map(k => {
         const {expr, now} = k;
-        return `${expr} ⇒ ${now}`;
+        return `${expr} ⇒ ${now.length === 0 ? "∅" : now}`;
       });
     }
   },
   methods: {
     add() {
-      if (this.form.regex && this.form.replace) {
+      if (this.form.regex) {
         this.regexps.push({
           expr: this.form.regex,
-          now: this.form.replace
+          now: this.form.replace || ""
         });
         this.form.regex = "";
         this.form.replace = "";
       } else {
-        this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空！");
+        this.$store.commit("SET_ERROR_MESSAGE", "正则表达式不能为空！");
       }
     },
+    edit(idx) {
+      this.form.regex = this.regexps[idx].expr;
+      this.form.replace = this.regexps[idx].now;
+      this.remove(idx);
+    },
     remove(idx) {
       this.regexps.splice(idx, 1);
     },

web/src/config.js

@@ -1,3 +1,2 @@
-// const DEBUG = process.env.NODE_ENV === "development";
-const DEBUG = false;
+const DEBUG = process.env.NODE_ENV === "development";
 export const BACKEND_BASE = DEBUG ? `http://192.168.1.134:3000` : `https://sub.store`;

web/src/views/SubEditor.vue

@@ -51,24 +51,6 @@
               <v-col></v-col>
             </v-row>
           </v-radio-group>
-          <v-radio-group
-              v-model="options.flag"
-              dense
-              class="mt-0 mb-0"
-          >
-            国旗
-            <v-row>
-              <v-col>
-                <v-radio label="默认" value="DEFAULT"/>
-              </v-col>
-              <v-col>
-                <v-radio label="添加国旗" value="ADD"/>
-              </v-col>
-              <v-col>
-                <v-radio label="删除国旗" value="REMOVE"/>
-              </v-col>
-            </v-row>
-          </v-radio-group>
 
           <v-radio-group
               v-model="options.udp"
@@ -182,8 +164,13 @@ import KeywordRenameOperator from "@/components/KeywordRenameOperator";
 import RegexRenameOperator from "@/components/RegexRenameOperator";
 import KeywordDeleteOperator from "@/components/KeywordDeleteOperator";
 import RegexDeleteOperator from "@/components/RegexDeleteOperator";
+import FlagOperator from "@/components/FlagOperator";
 
 const AVAILABLE_PROCESSORS = {
+  "Flag Operator": {
+    component: "FlagOperator",
+    name: "国旗"
+  },
   "Type Filter": {
     component: "TypeFilter",
     name: "类型过滤器"
@@ -224,6 +211,7 @@ const AVAILABLE_PROCESSORS = {
 
 export default {
   components: {
+    FlagOperator,
     KeywordFilter,
     RegexFilter,
     RegionFilter,
@@ -256,7 +244,6 @@ export default {
         url: "",
         useless: "KEEP",
         udp: "DEFAULT",
-        flag: "DEFAULT",
         scert: "DEFAULT",
         tfo: "DEFAULT",
         process: [],
@@ -350,11 +337,8 @@ function loadSubscription(options, sub) {
       case 'Useless Filter':
         options.useless = "REMOVE";
         break
-      case 'Flag Operator':
-        options.flag = p.args[0] ? "ADD" : "REMOVE";
-        break
       case 'Set Property Operator':
-        options[p.args[0]] = p.args[1] ? "FORCE_OPEN" : "FORCE_CLOSE";
+        options[p.args.key] = p.args.value ? "FORCE_OPEN" : "FORCE_CLOSE";
         break
       default:
         options.process.push(p);
@@ -375,13 +359,6 @@ function buildSubscription(options) {
       type: "Useless Filter"
     });
   }
-  // flag
-  if (options.flag !== 'DEFAULT') {
-    sub.process.push({
-      type: "Flag Operator",
-      args: options.flag === 'ADD'
-    });
-  }
   // udp, tfo, scert
   for (const opt of ['udp', 'tfo', 'scert']) {
     if (options[opt] !== 'DEFAULT') {