release revsuit vBeta0.1.0 (#15)

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

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>