feat(frontend): optimize frontend interaction (#8)

Support auto refresh. Change authentication method. Streamline the frontend code.

frontend/src/components/Auth.vue

@@ -13,13 +13,13 @@
 </template>
 <script>
 import {store} from "@/main";
-import {ping} from "@/api/ping"
+import {auth} from "@/api/auth"
 
 export default {
   data() {
     return {
       confirmLoading: false,
-      token: localStorage.getItem("token")
+      token: ""
     };
   },
   computed: {
@@ -27,17 +27,13 @@ export default {
       return !store.authed
     },
   },
-  watch: {
-    token: function (val) {
-      localStorage.setItem("token", val)
-    }
-  },
   methods: {
     auth() {
       this.confirmLoading = true;
-      ping().then(() => {
+      auth(this.token).then(() => {
         store.authed = true;
         this.confirmLoading = false;
+        this.token = ""
       }).catch(e => {
         if (e.response.status === 403) {
           this.$notification.error({

frontend/src/components/FilterDropdown.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+      slot="filterDropdown"
+      style="padding: 8px"
+  >
+    <a-input
+        :placeholder="`Search ${column.dataIndex}`"
+        :value="selectedKeys[0]"
+        style="width: 188px; margin-bottom: 8px; display: block;"
+        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+        @pressEnter="() => {
+            filters[column.dataIndex] = selectedKeys[0];
+            fetch()
+          }"
+    />
+    <a-button
+        type="primary"
+        icon="search"
+        size="small"
+        style="width: 90px; margin-right: 8px"
+        @click="() => {
+            filters[column.dataIndex] = selectedKeys[0];
+            fetch()
+          }"
+    >
+      Search
+    </a-button>
+    <a-button size="small" style="width: 90px" @click="() =>{
+        clearFilters();
+        delete filters[column.dataIndex];
+        fetch()
+      }">
+      Reset
+    </a-button>
+  </div>
+</template>
+
+<script>
+export default {
+name: "FilterDropdown",
+  props:["setSelectedKeys","selectedKeys","clearFilters","column","filters","fetch"],
+
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/Icon.vue

@@ -0,0 +1,23 @@
+<template>
+  <a-icon :component="RuleSvg"/>
+</template>
+<script>
+const RuleSvg = {
+  template: `
+  <svg t="1619355924145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" width="1rem" height="1rem"><path d="M922.666667 163.413333H598.826667a37.333333 37.333333 0 0 1 0-74.666666h323.84a37.333333 37.333333 0 0 1 0 74.666666zM922.666667 437.12H598.826667a37.333333 37.333333 0 0 1 0-74.666667h323.84a37.333333 37.333333 0 0 1 0 74.666667zM922.666667 661.333333H598.826667a37.333333 37.333333 0 0 1 0-74.666666h323.84a37.333333 37.333333 0 0 1 0 74.666666zM922.666667 934.826667H598.826667a37.333333 37.333333 0 0 1 0-74.666667h323.84a37.333333 37.333333 0 0 1 0 74.666667zM424.96 462.08H101.333333A37.333333 37.333333 0 0 1 64 424.746667V101.12A37.333333 37.333333 0 0 1 101.333333 64h323.626667a37.333333 37.333333 0 0 1 37.333333 37.333333v323.413334a37.546667 37.546667 0 0 1-37.333333 37.333333zM138.666667 387.413333h248.96V138.453333H138.666667zM424.96 960H101.333333A37.333333 37.333333 0 0 1 64 922.453333V598.826667a37.333333 37.333333 0 0 1 37.333333-37.333334h323.626667a37.546667 37.546667 0 0 1 37.333333 37.333334v323.626666A37.333333 37.333333 0 0 1 424.96 960zM138.666667 885.12h248.96V636.16H138.666667z" p-id="2094"></path></svg>
+`
+};
+export default {
+  name: "RuleIcon",
+  data() {
+    return {
+      RuleSvg
+    }
+  }
+};
+</script>
+<style scoped>
+.custom-icons-list >>> .anticon {
+  margin-right: 6px;
+}
+</style>