实现关键词排序UI

web/package.json

@@ -21,17 +21,17 @@
     "vue-echarts": "^5.0.0-beta.0",
     "vue-qrcode-component": "^2.1.1",
     "vue-router": "^3.4.3",
-    "vuetify": "^2.2.11",
+    "vuetify": "^2.3.10",
     "vuex": "^3.5.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-babel": "^4.5.6",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.6",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-service": "^4.5.6",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.19.0",
+    "sass": "^1.26.11",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-vuetify": "~2.0.7",
     "vue-template-compiler": "^2.6.12",

web/src/components/FlagOperator.vue

@@ -51,7 +51,7 @@ export default {
   data: function () {
     return {
       idx: this.$vnode.key,
-      mode: "DEFAULT"
+      mode: "ADD"
     }
   },
   created() {

web/src/components/KeywordSortOperator.vue

@@ -4,7 +4,13 @@
       <v-icon left color="primary">sort</v-icon>
       关键词排序
       <v-spacer></v-spacer>
-      <v-btn icon>
+      <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>
@@ -28,14 +34,12 @@
       <v-chip-group column
       >
         <v-chip
-            draggable
             close
             close-icon="mdi-delete"
             v-for="(keyword, idx) in keywords"
             :key="idx"
+            @click="edit(idx)"
             @click:close="remove(idx)"
-            @dragstart="dragStart"
-            @dragend="dragEnd"
         >
           {{ keyword }}
         </v-chip>
@@ -54,8 +58,10 @@
 
 <script>
 export default {
+  props: ['args'],
   data: function () {
     return {
+      idx: this.$vnode.key,
       selection: null,
       currentTag: null,
       form: {
@@ -64,6 +70,16 @@ export default {
       keywords: []
     }
   },
+  created() {
+    if (this.args) {
+      this.keywords = this.args || [];
+    }
+  },
+  watch: {
+    keywords() {
+      this.save();
+    },
+  },
   methods: {
     add(keyword) {
       if (keyword) {
@@ -73,21 +89,19 @@ 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);
     },
-    dragStart() {
+    save() {
-      if (this.keywords[this.selection]) this.currentTag = this.tags[this.selection].name;
+      this.$emit("dataChanged", {
-      else this.currentTag = null;
+        idx: this.idx,
+        args: this.keywords
+      });
     },
-    dragEnd() {
-      const self = this;
-      if (this.currentTag) {
-        this.keywords.forEach((x, i) => {
-          if (x.name === self.currentTag) self.selection = i;
-        });
-      }
-    }
   }
 }
 </script>

web/src/views/Dashboard.vue

@@ -1,29 +1,30 @@
 <template>
-  <v-card
+<!--  <v-card-->
-      class="ml-4 mt-4 mb-4 mr-4"
+<!--      class="ml-4 mt-4 mb-4 mr-4"-->
-  >
+<!--  >-->
-    <v-card-title>Nexitally</v-card-title>
+<!--    <v-card-title>Nexitally</v-card-title>-->
-    <v-carousel
+<!--    <v-carousel-->
-        cycle
+<!--        cycle-->
-        height="250"
+<!--        height="250"-->
-        :show-arrows="false"
+<!--        :show-arrows="false"-->
-    >
+<!--    >-->
-      <v-carousel-item>
+<!--      <v-carousel-item>-->
-        <v-chart
+<!--        <v-chart-->
-            :options="pie"
+<!--            :options="pie"-->
-            class="remains !important"
+<!--            class="remains !important"-->
-            autoresize
+<!--            autoresize-->
-        />
+<!--        />-->
-      </v-carousel-item>
+<!--      </v-carousel-item>-->
-      <v-carousel-item>
+<!--      <v-carousel-item>-->
-        <v-chart
+<!--        <v-chart-->
-            :options="pie"
+<!--            :options="pie"-->
-            class="remains !important"
+<!--            class="remains !important"-->
-            autoresize
+<!--            autoresize-->
-        />
+<!--        />-->
-      </v-carousel-item>
+<!--      </v-carousel-item>-->
-    </v-carousel>
+<!--    </v-carousel>-->
-  </v-card>
+<!--  </v-card>-->
+  <v-container></v-container>
 </template>
 
 <script>
@@ -33,6 +34,7 @@ import 'echarts/lib/chart/pie';
 export default {
   name: "Dashboard",
   components: {
+    // eslint-disable-next-line vue/no-unused-components
     "v-chart": ECharts
   },
   computed: {

web/src/views/SubEditor.vue

@@ -167,6 +167,7 @@ import RegexDeleteOperator from "@/components/RegexDeleteOperator";
 import FlagOperator from "@/components/FlagOperator";
 import ScriptFilter from "@/components/ScriptFilter";
 import ScriptOperator from "@/components/ScriptOperator";
+import KeywordSortOperator from "@/components/KeywordSortOperator";
 
 const AVAILABLE_PROCESSORS = {
   "Flag Operator": {
@@ -193,6 +194,10 @@ const AVAILABLE_PROCESSORS = {
     component: "SortOperator",
     name: "节点排序"
   },
+  "Keyword Sort Operator": {
+    component: "KeywordSortOperator",
+    name: "关键词排序"
+  },
   "Keyword Rename Operator": {
     component: "KeywordRenameOperator",
     name: "关键词重命名"
@@ -228,6 +233,7 @@ export default {
     TypeFilter,
     SortOperator,
     KeywordRenameOperator,
+    KeywordSortOperator,
     RegexRenameOperator,
     KeywordDeleteOperator,
     RegexDeleteOperator,