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

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

frontend/src/views/logs/Http.vue

@@ -7,41 +7,16 @@
       @change="handleTableChange"
       :rowClassName="(record, index) => index % 2 === 0 ? '' : 'gray-table-row'"
   >
-    <div
+    <filter-dropdown
         slot="filterDropdown"
         slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
-        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>
+        :set-selected-keys="setSelectedKeys"
+        :selected-keys="selectedKeys"
+        :clear-filters="clearFilters"
+        :column="column"
+        :filters="filters"
+        :fetch="fetch"
+    />
     <a-icon
         slot="filterIcon"
         slot-scope="filtered"
@@ -75,6 +50,7 @@
 
 import {getHttpRecord} from '@/api/record'
 import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
 
 const colors = {
   "GET": "#52c41a",
@@ -157,6 +133,7 @@ export default {
   name: 'HttpLogs',
   data() {
     return {
+      store,
       data: [],
       pagination: {current: 1},
       filters: {},
@@ -175,18 +152,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getHttpRecord(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
+
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -198,10 +174,18 @@ export default {
           console.error(e)
         }
       })
-    }
+    },
   },
   mounted() {
-    this.fetch({page: "1"});
+    this.fetch();
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
+  components: {
+    FilterDropdown
+  }
 }
 </script>