release revsuit vBeta0.1.0 (#15)

Co-authored-by: E99p1ant <[email protected]>

frontend/src/App.vue

@@ -45,6 +45,12 @@
             <router-link to="/rules/ftp">FTP Rules</router-link>
           </a-menu-item>
         </a-sub-menu>
+        <a-menu-item key="/settings">
+          <router-link to="/settings">
+            <a-icon type="setting"/>
+            Settings
+          </router-link>
+        </a-menu-item>
       </a-menu>
     </a-layout-sider>
     <a-layout>
@@ -54,8 +60,7 @@
             :type="collapsed ? 'menu-unfold' : 'menu-fold'"
             @click="() => (collapsed = !collapsed)"
         />
-        <!--        <transition name="list1">-->
-        <div v-if="isLogMode" style="float: right; width:45% ;padding: 12px 0;line-height: 24px;">
+        <div v-if="isLogMode" style="float: right; min-width:50% ;padding: 12px 0;line-height: 24px;">
           <a-row :gutter="24" type="flex">
             <a-col :span="21">
               <a-form-model v-show="showSettings" ref="settings" layout="inline">
@@ -84,7 +89,6 @@
             </a-col>
           </a-row>
         </div>
-        <!--        </transition>-->
       </a-layout-header>
       <a-layout-content
           :style="{ margin: '24px 16px', padding: '24px', borderRadius: '20px',background: '#fff', minHeight: 'initial' }"
@@ -93,6 +97,12 @@
           <router-view ref='content'/>
         </transition>
       </a-layout-content>
+      <div class="copyright">
+        <p class="">
+          RevSuit Current Version: {{ this.version }} &copy;2021 <a href="https://github.com/Li4n0">Li4n0</a>. <a
+            href="https://github.com/Li4n0/revsuit">GitHub</a>
+        </p>
+      </div>
     </a-layout>
     <Auth></Auth>
   </a-layout>
@@ -100,15 +110,21 @@
 <script>
 import Auth from '@/components/Auth'
 import RuleIcon from "@/components/Icon";
+import {getVersion} from "@/api/auth";
+import {store} from "@/main";
+
 
 export default {
   data() {
     return {
+      store,
       autoRefresh: localStorage.getItem("autoRefresh") === "true",
-      refreshInterval: localStorage.getItem("refreshInterval"),
+      refreshInterval: localStorage.getItem("refreshInterval") ? localStorage.getItem("refreshInterval") : 5,
+      pageSize: store.pageSize,
       collapsed: false,
       showSettings: false,
-      openKeys: ['logs', "rules"],
+      openKeys: ['logs'],
+      version: "",
     };
   },
   computed: {
@@ -124,12 +140,18 @@ export default {
       this.timer = setInterval(() => {
         this.$refs.content.fetch()
       }, this.refreshInterval * 1000)
+    },
+    GetVersion() {
+      getVersion().then(res => {
+        this.version = res.data.result
+      })
     }
   },
   mounted() {
     if (this.autoRefresh && this.isLogMode) {
       this.timing()
     }
+    this.GetVersion()
   },
   destroyed() {
     clearInterval(this.timer)
@@ -155,6 +177,21 @@ export default {
       clearInterval(this.timer)
       this.timing()
       localStorage.setItem('refreshInterval', val)
+    },
+    pageSize(val) {
+      if (val <= 0 || val > 100) {
+        val = 10
+      }
+      store.pageSize = val
+      localStorage.setItem('pageSize', val)
+    },
+    'store.authed'() {
+      this.$refs.content.fetch()
+    },
+    'store.pageSize'() {
+      this.$refs.content.pagination.pageSize = store.pageSize
+      localStorage.setItem("pageSize", store.pageSize.toString())
+      this.$refs.content.fetch()
     }
   },
   components: {
@@ -169,17 +206,6 @@ html, body {
   margin: 0;
 }
 
-.fade-enter.fade-enter-active,
-.fade-appear.fade-appear-active {
-  -webkit-animation-name: none;
-  animation-name: none;
-}
-
-.fade-leave.fade-leave-active {
-  -webkit-animation-name: none;
-  animation-name: none;
-}
-
 /* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-enter-active {
@@ -236,4 +262,10 @@ html, body {
   padding-bottom: 5px;
   border-bottom: 2px solid #b6befa;
 }
+
+.copyright {
+  color: #888;
+  text-align: right;
+  margin-right: 1rem;
+}
 </style>

frontend/src/api/auth.js

@@ -9,4 +9,14 @@ export function auth(token) {
             return status >= 200 && status < 300
         }
     })
+}
+
+export function getVersion() {
+    return request({
+        url: '/version',
+        method: 'get',
+        validateStatus: function (status) {
+            return status >= 200 && status < 300
+        }
+    })
 }

frontend/src/api/index.js

@@ -2,7 +2,10 @@ import axios from 'axios'
 
 const service = axios.create({
     baseURL: '/revsuit/api/', // api的base_url
-    timeout: 5000 // request timeout
+    timeout: 5000, // request timeout
+    validateStatus: function (status) {
+        return status >= 200 && status < 300 // 默认的
+    }
 })
 
 export default service

frontend/src/api/record.js

@@ -5,9 +5,7 @@ export function getHttpRecord(params) {
         url: '/record/http',
         params: params,
         method: 'get',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+
     })
 }
 
@@ -15,10 +13,7 @@ export function getDnsRecord(params) {
     return request({
         url: '/record/dns',
         params: params,
-        method: 'get',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'get'
     })
 }
 
@@ -26,10 +21,7 @@ export function getMysqlRecord(params) {
     return request({
         url: '/record/mysql',
         params: params,
-        method: 'get',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'get'
     })
 }
 
@@ -37,10 +29,7 @@ export function getRmiRecord(params) {
     return request({
         url: '/record/rmi',
         params: params,
-        method: 'get',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'get'
     })
 }
 
@@ -48,9 +37,6 @@ export function getFtpRecord(params) {
     return request({
         url: '/record/ftp',
         params: params,
-        method: 'get',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'get'
     })
 }

frontend/src/api/rule.js

@@ -4,10 +4,7 @@ export function getHttpRule(params) {
     return request({
         url: '/rule/http',
         params: params,
-        method: 'get',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'get'
     })
 }
 
@@ -15,10 +12,7 @@ export function upsertHttpRule(data) {
     return request({
         url: '/rule/http',
         data: data,
-        method: 'post',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'post'
     })
 }
 
@@ -27,10 +21,7 @@ export function deleteHttpRule(data) {
     return request({
         url: '/rule/http',
         data: data,
-        method: 'delete',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'delete'
     })
 }
 
@@ -38,10 +29,7 @@ export function getDnsRule(params) {
     return request({
         url: '/rule/dns',
         params: params,
-        method: 'get',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'get'
     })
 }
 
@@ -49,10 +37,7 @@ export function upsertDnsRule(data) {
     return request({
         url: '/rule/dns',
         data: data,
-        method: 'post',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'post'
     })
 }
 
@@ -60,10 +45,7 @@ export function deleteDnsRule(data) {
     return request({
         url: '/rule/dns',
         data: data,
-        method: 'delete',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'delete'
     })
 }
 
@@ -71,10 +53,7 @@ export function getMysqlRule(params) {
     return request({
         url: '/rule/mysql',
         params: params,
-        method: 'get',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'get'
     })
 }
 
@@ -82,10 +61,7 @@ export function upsertMysqlRule(data) {
     return request({
         url: '/rule/mysql',
         data: data,
-        method: 'post',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'post'
     })
 }
 
@@ -93,10 +69,7 @@ export function deleteMysqlRule(data) {
     return request({
         url: '/rule/mysql',
         data: data,
-        method: 'delete',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'delete'
     })
 }
 
@@ -104,10 +77,7 @@ export function getRmiRule(params) {
     return request({
         url: '/rule/rmi',
         params: params,
-        method: 'get',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'get'
     })
 }
 
@@ -115,10 +85,7 @@ export function upsertRmiRule(data) {
     return request({
         url: '/rule/rmi',
         data: data,
-        method: 'post',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'post'
     })
 }
 
@@ -126,10 +93,7 @@ export function deleteRmiRule(data) {
     return request({
         url: '/rule/rmi',
         data: data,
-        method: 'delete',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'delete'
     })
 }
 
@@ -137,10 +101,7 @@ export function getFtpRule(params) {
     return request({
         url: '/rule/ftp',
         params: params,
-        method: 'get',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'get'
     })
 }
 
@@ -148,10 +109,7 @@ export function upsertFtpRule(data) {
     return request({
         url: '/rule/ftp',
         data: data,
-        method: 'post',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'post'
     })
 }
 
@@ -159,9 +117,6 @@ export function deleteFtpRule(data) {
     return request({
         url: '/rule/ftp',
         data: data,
-        method: 'delete',
-        validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
-        }
+        method: 'delete'
     })
 }

frontend/src/api/settings.js

@@ -0,0 +1,85 @@
+import request from './index'
+
+export function getHttpConfig() {
+    return request({
+        url: '/setting/getHttpConfig',
+    })
+}
+
+export function updateHttpConfig(data) {
+    return request({
+        url: '/setting/updateHttpConfig',
+        method: "post",
+        data: data
+    })
+}
+
+export function getDnsConfig() {
+    return request({
+        url: '/setting/getDnsConfig',
+    })
+}
+
+export function updateDnsConfig(data) {
+    return request({
+        url: '/setting/updateDnsConfig',
+        method: "post",
+        data: data,
+    })
+}
+
+export function getRmiConfig() {
+    return request({
+        url: '/setting/getRmiConfig',
+    })
+}
+
+export function updateRmiConfig(data) {
+    return request({
+        url: '/setting/updateRmiConfig',
+        method: "post",
+        data: data,
+    })
+}
+
+export function getMySQLConfig() {
+    return request({
+        url: '/setting/getMySQLConfig',
+    })
+}
+
+export function updateMySQLConfig(data) {
+    return request({
+        url: '/setting/updateMySQLConfig',
+        method: "post",
+        data: data,
+    })
+}
+
+export function getFtpConfig() {
+    return request({
+        url: '/setting/getFtpConfig',
+    })
+}
+
+export function updateFtpConfig(data) {
+    return request({
+        url: '/setting/updateFtpConfig',
+        method: "post",
+        data: data,
+    })
+}
+
+export function getNoticeConfig() {
+    return request({
+        url: '/setting/getNoticeConfig',
+    })
+}
+
+export function updateNoticeConfig(data) {
+    return request({
+        url: '/setting/updateNoticeConfig',
+        method: "post",
+        data: data,
+    })
+}

frontend/src/components/SettingForm.vue

@@ -0,0 +1,54 @@
+<template>
+  <a-spin :spinning="spinning">
+    <a-form-model :model="form" ref="form" layout="vertical">
+      <a-row :gutter="24" v-for="(value,key) in form" :key="key">
+        <a-col :span="24">
+          <a-form-model-item :label="key+':'" :prop="key">
+            <a-switch v-if="key==='Enable'" v-model="form[key]" size="large">
+              <a-icon slot="checkedChildren" type="check"/>
+              <a-icon slot="unCheckedChildren" type="close"/>
+            </a-switch>
+            <a-select v-else-if="key==='LogLevel'"
+                      v-model="form[key]"
+            >
+              <a-select-option value='debug'>DEBUG</a-select-option>
+              <a-select-option value='info'>INFO</a-select-option>
+              <a-select-option value='warning'>WARNING</a-select-option>
+              <a-select-option value='error'>ERROR</a-select-option>
+              <a-select-option value='fatal'>FATAL</a-select-option>
+            </a-select>
+            <a-input :disabled="key ==='Addr' && parent==='Http'" v-else v-model="form[key]"/>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+      <a-space size="middle" v-if="Object.keys(form).length">
+        <a-button @click="this.$parent.getConfig">Cancel</a-button>
+        <a-popconfirm
+            title="Are you sure update the config?
+            It will stop running for at least two seconds, and may fail to restart."
+            ok-text="Yes"
+            cancel-text="No"
+            @confirm="this.$parent.updateConfig"
+        >
+          <a-button type="danger">Update</a-button>
+        </a-popconfirm>
+      </a-space>
+    </a-form-model>
+  </a-spin>
+</template>
+
+<script>
+export default {
+  name: "SettingForm",
+  data() {
+    return {
+      parent: this.$parent.$options.name
+    }
+  },
+  props: ['form', 'spinning'],
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/main.js

@@ -10,6 +10,7 @@ Vue.config.productionTip = false;
 Vue.use(Antd);
 export const store = Vue.observable({
     authed: true,
+    pageSize: localStorage.getItem("pageSize") ? parseInt(localStorage.getItem("pageSize")) : 10
 })
 /* eslint-disable no-new */
 new Vue({

frontend/src/router/index.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
@@ -8,8 +7,9 @@ const routes = [
     {
         path: '/',
         name: 'Home',
-        component: Home
+        redirect: '/logs/http'
     },
+    // logs router
     {
         path: '/logs/http',
         name: 'HttpLogs',
@@ -35,6 +35,7 @@ const routes = [
         name: 'FtpLogs',
         component: () => import( '../views/logs/Ftp')
     },
+    // rules router
     {
         path: '/rules/http',
         name: 'HttpRules',
@@ -59,6 +60,12 @@ const routes = [
         path: '/rules/ftp',
         name: 'FtpRules',
         component: () => import( '../views/rules/Ftp')
+    },
+    //Settings router
+    {
+        path: '/settings',
+        name: 'Settings',
+        component: () => import( '../views/settings/Settings')
     }
 ]
 

frontend/src/views/logs/Dns.vue

@@ -103,7 +103,12 @@ export default {
     return {
       store,
       data: [],
-      pagination: {current: 1},
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },
       filters: {},
       order: "desc",
       loading: false,
@@ -122,6 +127,7 @@ export default {
       let params = {
         ...this.filters,
         page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
         order: this.order
       }
       this.loading = true;
@@ -129,7 +135,6 @@ export default {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -146,13 +151,8 @@ export default {
   mounted() {
     this.fetch();
   },
-  watch: {
-    'store.authed'() {
-      this.fetch()
-    }
-  },
   components: {
     FilterDropdown
-  }
+  },
 }
 </script>

frontend/src/views/logs/Ftp.vue

@@ -44,7 +44,7 @@
     </span>
     <span slot="file" slot-scope="file">
      <a-tag
-         v-if="file.id"
+         v-if="file"
          color="#f5222d"
      ><a target="_blank" :href="'/revsuit/api/file/ftp/'+file.id">TRUE</a> </a-tag>
      <a-tag v-else color="#722ed1">
@@ -190,7 +190,12 @@ export default {
     return {
       store,
       data: [],
-      pagination: {current: 1},
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },
       filters: {},
       order: "desc",
       loading: false,
@@ -199,9 +204,6 @@ export default {
     };
   },
   methods: {
-    aa(file) {
-      console.log(file)
-    },
     handleTableChange(pagination, filters, sorter) {
       const pager = {...this.pagination};
       pager.current = pagination.current;
@@ -213,6 +215,7 @@ export default {
       let params = {
         ...this.filters,
         page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
         order: this.order
       }
       this.loading = true;
@@ -237,11 +240,6 @@ export default {
   mounted() {
     this.fetch();
   },
-  watch: {
-    'store.authed'() {
-      this.fetch()
-    }
-  },
   components: {
     FilterDropdown
   }

frontend/src/views/logs/Http.vue

@@ -135,7 +135,12 @@ export default {
     return {
       store,
       data: [],
-      pagination: {current: 1},
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },
       filters: {},
       order: "desc",
       loading: false,
@@ -155,6 +160,7 @@ export default {
       let params = {
         ...this.filters,
         page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
         order: this.order
       }
       this.loading = true;
@@ -179,11 +185,6 @@ export default {
   mounted() {
     this.fetch();
   },
-  watch: {
-    'store.authed'() {
-      this.fetch()
-    }
-  },
   components: {
     FilterDropdown
   }

frontend/src/views/logs/Mysql.vue

@@ -178,7 +178,12 @@ export default {
     return {
       store,
       data: [],
-      pagination: {current: 1},
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },
       filters: {},
       order: "desc",
       loading: false,
@@ -198,6 +203,7 @@ export default {
       let params = {
         ...this.filters,
         page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
         order: this.order
       }
       this.loading = true;
@@ -222,11 +228,6 @@ export default {
   mounted() {
     this.fetch();
   },
-  watch: {
-    'store.authed'() {
-      this.fetch()
-    }
-  },
   components: {
     FilterDropdown
   }

frontend/src/views/logs/Rmi.vue

@@ -104,8 +104,12 @@ export default {
     return {
       store,
       data: [],
-      pagination: {current: 1},
-      filters: {},
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },      filters: {},
       order: "desc",
       loading: false,
       columns,
@@ -123,6 +127,7 @@ export default {
       let params = {
         ...this.filters,
         page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
         order: this.order
       }
       this.loading = true;
@@ -147,11 +152,6 @@ export default {
   mounted() {
     this.fetch();
   },
-  watch: {
-    'store.authed'() {
-      this.fetch()
-    }
-  },
   components: {
     FilterDropdown
   }

frontend/src/views/rules/Dns.vue

@@ -291,8 +291,12 @@ export default {
       store,
       data: [],
       formVisible: false,
-      pagination: {current: 1},
-      filters: {},
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },      filters: {},
       loading: false,
       columns,
       colors,
@@ -315,6 +319,7 @@ export default {
       let params = {
         ...this.filters,
         page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
         order: this.order
       }
       this.loading = true;
@@ -430,11 +435,6 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
-  watch: {
-    'store.authed'() {
-      this.fetch()
-    }
-  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Ftp.vue

@@ -229,8 +229,12 @@ export default {
       store,
       data: [],
       formVisible: false,
-      pagination: {current: 1},
-      filters: {},
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },      filters: {},
       loading: false,
       columns,
       form: {},
@@ -250,6 +254,7 @@ export default {
       let params = {
         ...this.filters,
         page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
         order: this.order
       }
       this.loading = true;
@@ -365,11 +370,6 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
-  watch: {
-    'store.authed'() {
-      this.fetch()
-    }
-  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Http.vue

@@ -288,8 +288,12 @@ export default {
       store,
       data: [],
       formVisible: false,
-      pagination: {current: 1},
-      filters: {},
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },      filters: {},
       loading: false,
       columns,
       form: {},
@@ -357,6 +361,7 @@ export default {
       let params = {
         ...this.filters,
         page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
         order: this.order
       }
       this.loading = true;
@@ -512,11 +517,6 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
-  watch: {
-    'store.authed'() {
-      this.fetch()
-    }
-  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Mysql.vue

@@ -251,8 +251,12 @@ export default {
       store,
       data: [],
       formVisible: false,
-      pagination: {current: 1},
-      filters: {},
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },      filters: {},
       loading: false,
       columns,
       form: {},
@@ -274,6 +278,7 @@ export default {
       let params = {
         ...this.filters,
         page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
         order: this.order
       }
       this.loading = true;
@@ -420,11 +425,6 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
-  watch: {
-    'store.authed'() {
-      this.fetch()
-    }
-  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Rmi.vue

@@ -188,8 +188,12 @@ export default {
       store,
       data: [],
       formVisible: false,
-      pagination: {current: 1},
-      filters: {},
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },      filters: {},
       loading: false,
       columns,
       form: {},
@@ -209,6 +213,7 @@ export default {
       let params = {
         ...this.filters,
         page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
         order: this.order
       }
       this.loading = true;
@@ -323,11 +328,6 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
-  watch: {
-    'store.authed'() {
-      this.fetch()
-    }
-  },
   components: {
     BasicRule,
   }

frontend/src/views/settings/Dns.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <SettingForm :form="form" :spinning="spinning"></SettingForm>
+    <a-result v-if="status"
+              :status="status"
+              :title="title"
+              :sub-title="subTitle"
+    >
+      <template #extra>
+        <a-row>
+          <a-col :span="12" :offset="7">
+            <div style="text-align: left">
+              <li v-for="err in errors" :key="err">{{ err }}</li>
+            </div>
+          </a-col>
+        </a-row>
+      </template>
+    </a-result>
+  </div>
+</template>
+
+<script>
+import {getDnsConfig, updateDnsConfig} from "@/api/settings"
+import SettingForm from "@/components/SettingForm";
+
+export default {
+  name: "Dns",
+  data() {
+    return {
+      form: {},
+      spinning: false,
+      status: "",
+      title: "",
+      subTitle: "",
+      errors: []
+    }
+  },
+  methods: {
+    getConfig() {
+      getDnsConfig().then(res => {
+        this.form = res.data
+      }).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    },
+    updateConfig() {
+      this.spinning = true
+      let targetConfig = JSON.stringify(this.form)
+      updateDnsConfig(this.form).then(
+          () => {
+            setTimeout(() => {
+              getDnsConfig().then((res) => {
+                    this.spinning = false
+                    let nowConfig = JSON.stringify(res.data)
+                    if (nowConfig !== targetConfig) {
+                      this.status = "warning"
+                      this.title = "Updating the configuration seems to have failed"
+                      this.subTitle = "Please check your config options carefully."
+                    }
+                    this.form = res.data
+                    this.status = ""
+                    this.title = ""
+                    this.subTitle = ""
+                  }
+              )
+            }, 3000)
+          }
+      ).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    }
+  },
+  mounted() {
+    this.getConfig()
+  },
+  components: {
+    SettingForm
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/settings/Ftp.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <SettingForm :form="form" :spinning="spinning"></SettingForm>
+    <a-result v-if="status"
+              :status="status"
+              :title="title"
+              :sub-title="subTitle"
+    >
+      <template #extra>
+        <a-row>
+          <a-col :span="12" :offset="7">
+            <div style="text-align: left">
+              <li v-for="err in errors" :key="err">{{ err }}</li>
+            </div>
+          </a-col>
+        </a-row>
+      </template>
+    </a-result>
+  </div>
+</template>
+
+<script>
+import {getFtpConfig, updateFtpConfig} from "@/api/settings"
+import SettingForm from "@/components/SettingForm";
+
+export default {
+  name: "Ftp",
+  data() {
+    return {
+      form: {},
+      spinning: false,
+      status: "",
+      title: "",
+      subTitle: "",
+      errors: []
+    }
+  },
+  methods: {
+    getConfig() {
+      getFtpConfig().then(res => {
+        this.form = res.data
+      }).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    },
+    updateConfig() {
+      this.spinning = true
+      let targetConfig = JSON.stringify(this.form)
+      updateFtpConfig(this.form).then(
+          () => {
+            setTimeout(() => {
+              getFtpConfig().then((res) => {
+                    this.spinning = false
+                    let nowConfig = JSON.stringify(res.data)
+                    if (nowConfig !== targetConfig) {
+                      this.status = "warning"
+                      this.title = "Updating the configuration seems to have failed"
+                      this.subTitle = "Please check your config options carefully."
+                    }
+                    this.status = ""
+                    this.title = ""
+                    this.subTitle = ""
+                    this.form = res.data
+                  }
+              )
+            }, 3000)
+          }
+      ).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    }
+  },
+  mounted() {
+    this.getConfig()
+  },
+  components: {
+    SettingForm
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/settings/Http.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <SettingForm :form="form" :spinning="spinning"></SettingForm>
+    <a-result v-if="status"
+              :status="status"
+              :title="title"
+              :sub-title="subTitle"
+    >
+      <template #extra>
+        <a-row>
+          <a-col :span="12" :offset="7">
+            <div style="text-align: left">
+              <li v-for="err in errors" :key="err">{{ err }}</li>
+            </div>
+          </a-col>
+        </a-row>
+      </template>
+    </a-result>
+  </div>
+</template>
+
+<script>
+import {getHttpConfig, updateHttpConfig} from "@/api/settings"
+import SettingForm from "@/components/SettingForm";
+
+export default {
+  name: "Http",
+  data() {
+    return {
+      form: {},
+      spinning: false,
+      status: "",
+      title: "",
+      subTitle: "",
+      errors: []
+    }
+  },
+  methods: {
+    getConfig() {
+      getHttpConfig().then(res => {
+        this.form = res.data
+      }).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    },
+    updateConfig() {
+      this.spinning = true
+      let targetConfig = JSON.stringify(this.form)
+      updateHttpConfig(this.form).then(
+          () => {
+            setTimeout(() => {
+              getHttpConfig().then((res) => {
+                    this.spinning = false
+                    let nowConfig = JSON.stringify(res.data)
+                    if (nowConfig !== targetConfig) {
+                      this.status = "warning"
+                      this.title = "Updating the configuration seems to have failed"
+                      this.subTitle = "Please check your config options."
+                    }
+                    this.form = res.data
+                    this.status = ""
+                    this.title = ""
+                    this.subTitle = ""
+                  }
+              ).catch(() => {
+                this.status = "error"
+                this.title = "Updating the configuration seems to have failed, and may cause the platform to exit abnormally, please restart manually."
+                this.subTitle = "Please check your config options carefully."
+              })
+            }, 3000)
+          }
+      ).catch(() => {
+        this.status = "error"
+        this.title = "Updating the configuration seems to have failed, and may cause the platform to exit abnormally, please restart manually."
+        this.subTitle = "Please check your config options carefully."
+      })
+    }
+  },
+  mounted() {
+    this.getConfig()
+  },
+  components: {
+    SettingForm
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/settings/Mysql.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <SettingForm :form="form" :spinning="spinning"></SettingForm>
+    <a-result v-if="status"
+              :status="status"
+              :title="title"
+              :sub-title="subTitle"
+    >
+      <template #extra>
+        <a-row>
+          <a-col :span="12" :offset="7">
+            <div style="text-align: left">
+              <li v-for="err in errors" :key="err">{{ err }}</li>
+            </div>
+          </a-col>
+        </a-row>
+      </template>
+    </a-result>
+  </div>
+</template>
+
+<script>
+import {getMySQLConfig, updateMySQLConfig} from "@/api/settings"
+import SettingForm from "@/components/SettingForm";
+
+export default {
+  name: "Mysql",
+  data() {
+    return {
+      form: {},
+      spinning: false,
+      status: "",
+      title: "",
+      subTitle: "",
+      errors: []
+    }
+  },
+  methods: {
+    getConfig() {
+      getMySQLConfig().then(res => {
+        this.form = res.data
+      }).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    },
+    updateConfig() {
+      this.spinning = true
+      let targetConfig = JSON.stringify(this.form)
+      updateMySQLConfig(this.form).then(
+          () => {
+            setTimeout(() => {
+              getMySQLConfig().then((res) => {
+                    this.spinning = false
+                    let nowConfig = JSON.stringify(res.data)
+                    if (nowConfig !== targetConfig) {
+                      this.status = "warning"
+                      this.title = "Updating the configuration seems to have failed"
+                      this.subTitle = "Please check your config options carefully."
+                    }
+                    this.form = res.data
+                    this.status = ""
+                    this.title = ""
+                    this.subTitle = ""
+                  }
+              )
+            }, 3000)
+          }
+      ).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    }
+  },
+  mounted() {
+    this.getConfig()
+  },
+  components: {
+    SettingForm
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/settings/Notice.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <SettingForm :form="form" :spinning="spinning"></SettingForm>
+    <a-result v-if="status"
+              :status="status"
+              :title="title"
+              :sub-title="subTitle"
+    >
+      <template #extra>
+        <a-row>
+          <a-col :span="12" :offset="7">
+            <div style="text-align: left">
+              <li v-for="err in errors" :key="err">{{ err }}</li>
+            </div>
+          </a-col>
+        </a-row>
+      </template>
+    </a-result>
+  </div>
+</template>
+
+<script>
+import {getNoticeConfig, updateNoticeConfig} from "@/api/settings"
+import SettingForm from "@/components/SettingForm";
+
+export default {
+  name: "Notice",
+  data() {
+    return {
+      form: {},
+      spinning: false,
+      status: "",
+      title: "",
+      subTitle: "",
+      errors: []
+    }
+  },
+  methods: {
+    getConfig() {
+      getNoticeConfig().then(res => {
+        this.form = res.data
+      }).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    },
+    updateConfig() {
+      this.spinning = true
+      let targetConfig = JSON.stringify(this.form)
+      updateNoticeConfig(this.form).then(
+          () => {
+            setTimeout(() => {
+              getNoticeConfig().then((res) => {
+                    this.spinning = false
+                    let nowConfig = JSON.stringify(res.data)
+                    if (nowConfig !== targetConfig) {
+                      this.status = "warning"
+                      this.title = "Updating the configuration seems to have failed"
+                      this.subTitle = "Please check your config options carefully."
+                    }
+                    this.form = res.data
+                    this.status = ""
+                    this.title = ""
+                    this.subTitle = ""
+                  }
+              )
+            }, 3000)
+          }
+      ).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    }
+  },
+  mounted() {
+    this.getConfig()
+  },
+  components: {
+    SettingForm
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/settings/Rmi.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <SettingForm :form="form" :spinning="spinning"></SettingForm>
+    <a-result v-if="status"
+              :status="status"
+              :title="title"
+              :sub-title="subTitle"
+    >
+      <template #extra>
+        <a-row>
+          <a-col :span="12" :offset="7">
+            <div style="text-align: left">
+              <li v-for="err in errors" :key="err">{{ err }}</li>
+            </div>
+          </a-col>
+        </a-row>
+      </template>
+    </a-result>
+  </div>
+</template>
+
+<script>
+import {getRmiConfig, updateRmiConfig} from "@/api/settings"
+import SettingForm from "@/components/SettingForm";
+
+export default {
+  name: "Rmi",
+  data() {
+    return {
+      form: {},
+      spinning: false,
+      status: "",
+      title: "",
+      subTitle: "",
+      errors: []
+    }
+  },
+  methods: {
+    getConfig() {
+      getRmiConfig().then(res => {
+        this.form = res.data
+      }).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    },
+    updateConfig() {
+      this.spinning = true
+      let targetConfig = JSON.stringify(this.form)
+      updateRmiConfig(this.form).then(
+          () => {
+            setTimeout(() => {
+              getRmiConfig().then((res) => {
+                    this.spinning = false
+                    let nowConfig = JSON.stringify(res.data)
+                    if (nowConfig !== targetConfig) {
+                      this.status = "warning"
+                      this.title = "Updating the configuration seems to have failed"
+                      this.subTitle = "Please check your config options carefully."
+                    }
+                    this.form = res.data
+                    this.status = ""
+                    this.title = ""
+                    this.subTitle = ""
+                  }
+              )
+            }, 3000)
+          }
+      ).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    }
+  },
+  mounted() {
+    this.getConfig()
+  },
+  components: {
+    SettingForm
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/settings/Rules.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <a-space size="middle">
+      <a-upload
+          name="rules"
+          action="/revsuit/api/setting/importRules"
+          @change="handleChange"
+          :showUploadList="false"
+      >
+        <a-button type="primary" icon="upload">Import</a-button>
+      </a-upload>
+      <a-button type="primary" icon="download" onclick="window.open('/revsuit/api/setting/exportRules')">Export
+      </a-button>
+    </a-space>
+    <a-result v-if="status"
+              :status="status"
+              :title="title"
+    >
+      <template #extra>
+        <a-row>
+          <a-col :span="12" :offset="7">
+            <div style="text-align: left">
+              <li v-for="err in errors" :key="err">{{ err }}</li>
+            </div>
+          </a-col>
+        </a-row>
+      </template>
+    </a-result>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Rules",
+  data() {
+    return {
+      status: "",
+      title: "",
+      errors: []
+    }
+  },
+  methods: {
+    handleChange(info) {
+      let resp = info.file.response
+      if (info.file.status === 'done' || info.file.status === 'error') {
+        if (resp.error) {
+          this.status = "warning"
+        } else {
+          this.status = "success"
+        }
+        this.title = resp.result
+        this.errors = resp.error
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/settings/Settings.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <a-card
+        :tab-list="tabList"
+        :active-tab-key="tabKey"
+        @tabChange="key => this.tabKey = key"
+        style="width: 100%;">
+      <http v-if="tabKey==='HTTP'"></http>
+      <dns v-else-if="tabKey==='DNS'"></dns>
+      <rmi v-else-if="tabKey==='RMI'"></rmi>
+      <mysql v-else-if="tabKey==='MYSQL'"></mysql>
+      <ftp v-else-if="tabKey==='FTP'"></ftp>
+      <notice v-else-if="tabKey==='NOTICE'"></notice>
+      <rules v-else-if="tabKey==='RULES'"></rules>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import Http from "./Http"
+import Dns from "./Dns"
+import Rmi from "./Rmi"
+import Mysql from "./Mysql"
+import Ftp from "./Ftp"
+import Notice from "./Notice"
+import Rules from "./Rules"
+
+export default {
+  name: "Settings",
+  data() {
+    return {
+      tabList: [
+        {key: "HTTP", tab: "PLATFORM|HTTP"},
+        {key: "DNS", tab: "DNS"},
+        {key: "RMI", tab: "RMI"},
+        {key: "MYSQL", tab: "MYSQL"},
+        {key: "FTP", tab: "FTP"},
+        {key: "NOTICE", tab: "NOTICE"},
+        {key: "RULES", tab: "RULES"}
+      ],
+      tabKey: "HTTP",
+    }
+  }
+  ,
+  methods: {},
+  components: {
+    Http,
+    Dns,
+    Rmi,
+    Mysql,
+    Ftp,
+    Notice,
+    Rules,
+  }
+}
+</script>
+
+<style scoped>
+
+</style>