From a9769742901ffed44e47d9807808f2ebcd2bebae Mon Sep 17 00:00:00 2001
From: Kerry <yueming.sheng@emqx.io>
Date: Fri, 5 Nov 2021 10:17:04 +0800
Subject: [PATCH] refactor(multi-pages): adjust styling for el-puls

---
 package.json                                  |   2 +-
 src/common/http.js                            |  12 +-
 src/components/EmqSelect.vue                  |  84 ++++---
 src/main.ts                                   |  15 +-
 src/style/common.scss                         |   2 +-
 src/style/normalize.scss                      | 205 +++++++++++++++++-
 src/views/About.vue                           |   5 -
 src/views/Advanced/components/postpone.vue    |  20 +-
 src/views/Advanced/components/retainer.vue    |   2 +-
 src/views/Advanced/components/rewrite.vue     |  10 +-
 src/views/Advanced/components/subscribe.vue   |   2 +-
 src/views/Alarm/Alarm.vue                     |   1 -
 src/views/Auth/AuthnDetails.vue               |   4 +-
 src/views/Auth/AuthzDetails.vue               |   4 +-
 src/views/Auth/components/BuiltInManager.vue  |   2 +-
 src/views/Auth/components/DataManager.vue     |   2 +-
 src/views/Base/Layout.vue                     |   1 +
 src/views/Base/NavHeader.vue                  |   2 +-
 src/views/Clients/ClientDetails.vue           |  12 +-
 src/views/Clients/Clients.vue                 |   7 +-
 .../Clients/components/CreateSubscribe.vue    |   2 +-
 src/views/Dashboard/Metrics.vue               |   2 +-
 src/views/Gateway/GatewayCreate.vue           |  15 +-
 src/views/Gateway/GatewayDetail.vue           |   5 +-
 src/views/Gateway/components/clients.vue      |   2 +-
 src/views/Gateway/components/coapBasic.vue    |   2 +-
 src/views/Gateway/components/exprotoBasic.vue |   2 +-
 src/views/Gateway/components/listeners.vue    |  12 +-
 src/views/Gateway/components/lwm2mBasic.vue   |   2 +-
 src/views/Gateway/components/mqttsnBasic.vue  |   2 +-
 src/views/Gateway/components/stompBasic.vue   |   2 +-
 src/views/General/Application.vue             | 194 ++++++++++-------
 src/views/General/Backup.vue                  | 155 +++++++------
 src/views/General/Blacklist.vue               |  32 ++-
 src/views/General/LogTrace.vue                | 170 +++++++++------
 src/views/General/Users.vue                   |  16 +-
 src/views/Home.vue                            |  18 --
 src/views/Tools/TopicMetrics.vue              |   4 +-
 src/views/Tools/WebSocket.vue                 |  22 +-
 src/views/Tools/components/WebSocketItem.vue  |   2 -
 src/views/Topics/Topics.vue                   |  18 +-
 41 files changed, 664 insertions(+), 409 deletions(-)
 delete mode 100644 src/views/About.vue
 delete mode 100644 src/views/Home.vue

diff --git a/package.json b/package.json
index bdaba34b3..05d1b2dae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "emqx-dashboard-web-new",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/common/http.js b/src/common/http.js
index b26706407..85d880bad 100644
--- a/src/common/http.js
+++ b/src/common/http.js
@@ -1,5 +1,5 @@
 import axios from "axios";
-// import { Message } from "element-ui";
+import { ElMessage as M } from "element-plus";
 import NProgress from "nprogress";
 import "nprogress/nprogress.css";
 import { toLogin } from "@/router";
@@ -25,7 +25,6 @@ axios.interceptors.request.use(
     return config;
   },
   (error) => {
-    // console.log(Object.keys(error))
     Promise.reject(error);
   }
 );
@@ -54,10 +53,9 @@ axios.interceptors.response.use(
 
       if (!respSet.has(status)) {
         respSet.add(status);
-        // if (data?.code || data?.message)
-        //   Message.error(status + " " + data?.code + ":" + data?.message);
-        // else
-        // Message.error(status + " Network error");
+        if (data?.code || data?.message)
+          M.error(status + " " + data?.code + ":" + data?.message);
+        else M.error(status + " Network error");
 
         if (status === 401) {
           toLogin();
@@ -65,7 +63,7 @@ axios.interceptors.response.use(
       }
     } else {
       if (!respSet.has(0)) {
-        // Message.error("Some error occurred");
+        M.error("Some error occurred");
         respSet.add(0);
       }
     }
diff --git a/src/components/EmqSelect.vue b/src/components/EmqSelect.vue
index 56b000425..3f92ba4d7 100644
--- a/src/components/EmqSelect.vue
+++ b/src/components/EmqSelect.vue
@@ -1,9 +1,8 @@
 <template>
   <el-select
-    :value="rawValue"
+    v-model="rawValue"
     v-bind="$attrs"
     class="emq-select"
-    v-on="$listeners"
     @change="selectChange"
   >
     <slot>
@@ -21,15 +20,12 @@
 </template>
 
 <script>
-import http from '@/common/http'
+import http from "@/common/http";
 
 export default {
-  name: 'EmqSelect',
-
-  components: {},
+  name: "EmqSelect",
 
   props: {
-    // eslint-disable-next-line
     value: {
       required: true,
     },
@@ -40,8 +36,8 @@ export default {
     fieldName: {
       type: Object,
       default: () => ({
-        label: 'label',
-        value: 'value',
+        label: "label",
+        value: "value",
       }),
     },
     disabledItem: {
@@ -57,22 +53,24 @@ export default {
     return {
       options: [],
       parserField: {},
-    }
+    };
   },
 
   computed: {
     rawValue: {
       get() {
-        return typeof this.value === 'boolean' ? this.value.toString() : this.value
+        return typeof this.value === "boolean"
+          ? this.value.toString()
+          : this.value;
       },
       set(val) {
-        let value = null
-        const valueKey = this.fieldName.value
-        const item = this.options.find(($) => $[valueKey] === val)
+        let value = null;
+        const valueKey = this.fieldName.value;
+        const item = this.options.find(($) => $[valueKey] === val);
         if (item && this.parserField[valueKey]) {
-          value = val === 'true'
+          value = val === "true";
         }
-        this.$emit('update:value', value)
+        this.$emit("update:value", value);
       },
     },
   },
@@ -80,66 +78,66 @@ export default {
   watch: {
     refresh(val) {
       if (val) {
-        this.loadData()
+        this.loadData();
       }
     },
     field: {
       handler() {
-        this.loadData()
+        this.loadData();
       },
       deep: true,
     },
   },
 
   created() {
-    this.loadData()
+    this.loadData();
   },
 
   methods: {
     selectChange(val) {
-      this.$emit('selectChange', val)
+      this.$emit("selectChange", val);
     },
     async loadData() {
-      const options = await this.getOptions()
-      this.parserField = {}
+      const options = await this.getOptions();
+      this.parserField = {};
 
-      const valueKey = this.fieldName.value
-      const labelKey = this.fieldName.label
+      const valueKey = this.fieldName.value;
+      const labelKey = this.fieldName.label;
 
       this.options = options.map((option) => {
-        const value = option[valueKey]
-        const label = option[labelKey]
-        if (typeof value === 'boolean') {
-          this.parserField[valueKey] = 'boolean'
-          option[valueKey] = value.toString()
+        const value = option[valueKey];
+        const label = option[labelKey];
+        if (typeof value === "boolean") {
+          this.parserField[valueKey] = "boolean";
+          option[valueKey] = value.toString();
 
-          if (typeof label === 'boolean') {
-            option[labelKey] = label.toString()
+          if (typeof label === "boolean") {
+            option[labelKey] = label.toString();
           }
         }
-        return option
-      })
-      this.$emit('update:refresh', false)
+        return option;
+      });
+      this.$emit("update:refresh", false);
     },
     isDisabled(item) {
-      return this.disabledItem.includes(item[this.fieldName.value])
+      return this.disabledItem.includes(item[this.fieldName.value]);
     },
     async getOptions() {
-      const { api, url, options, list } = this.field
-      let value = []
+      const { api, url, options, list } = this.field;
+      let value = [];
       if (options) {
-        value = options
+        value = options;
       } else if (list) {
-        value = list.map(($) => ({ label: $, value: $ }))
+        value = list.map(($) => ({ label: $, value: $ }));
       } else if (api) {
-        value = await api()
+        value = await api();
       } else if (url) {
-        value = await http.get(url)
+        value = await http.get(url);
       }
-      return value
+      return value;
     },
   },
-}
+};
 </script>
 
 <style lang="scss">
diff --git a/src/main.ts b/src/main.ts
index 50dca3947..4809198d8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp } from "vue";
+import { createApp, App as Application } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
@@ -7,5 +7,16 @@ import ElementPlus from "element-plus";
 import i18n from "./i18n";
 // import "@/style/element-reset.scss";
 // import directive from "@/common/directive";
+import EMQSelect from "@/components/EmqSelect.vue";
 
-createApp(App).use(store).use(router).use(ElementPlus).use(i18n).mount("#app");
+function globalComponents(app: Application) {
+  app.component(EMQSelect.name, EMQSelect);
+}
+
+createApp(App)
+  .use(store)
+  .use(router)
+  .use(ElementPlus)
+  .use(i18n)
+  .use(globalComponents)
+  .mount("#app");
diff --git a/src/style/common.scss b/src/style/common.scss
index 9e8018c97..1ede39a84 100644
--- a/src/style/common.scss
+++ b/src/style/common.scss
@@ -49,7 +49,7 @@ body {
 }
 
 a {
-  // color: $--color-primary;
+  color: var(--el-color-primary);
   text-decoration: none;
   background-color: transparent;
   outline: none;
diff --git a/src/style/normalize.scss b/src/style/normalize.scss
index 3dd8af3d4..e8a28f2a1 100644
--- a/src/style/normalize.scss
+++ b/src/style/normalize.scss
@@ -4,9 +4,7 @@
     'background-color':#282e38ff,
     'hover-background-color':#00b29915,
   ),
-  $button:(
 
-  ),
   $table:(
       'header-font-color':var(--el-text-color-regular)
   )
@@ -67,3 +65,206 @@
       }
 }
 
+.el-tabs--card {
+    & > .el-tabs__header {
+      border-bottom: 0px;
+      margin-bottom: 0px;
+  
+      .el-tabs__nav {
+        border: none;
+      }
+  
+      .el-tabs__item,
+      .is-focus {
+        outline: none;
+        border-left: none;
+        border-bottom: 1px solid #f0f0f8;
+        border-top: 2px solid #ffffff;
+        transition: border-top 0.3s, color 0.3s, padding 0.3s;
+  
+        &.is-active,
+        .is-focus {
+          outline: none;
+          border-top: 2px solid #00b299ff;
+          border-left: 1px solid #f0f0f8;
+          border-right: 1px solid #f0f0f8;
+        }
+      }
+    }
+  }
+
+  .el-button{
+    &.el-button--default {
+        color: #1d1d1dff;
+        background-color: #ffffff;
+        border-color: #1d1d1d;
+    
+        &:hover ,&:active{
+          color: #00b299ff;
+          border-color: #00b299ff;
+        }
+
+        &.is-disabled {
+          &,&:hover,&:focus,&:active {
+            border-color: #c8c8c8;
+            color: #c8c8c8;
+            background-color: #ffffff;
+          }
+        }
+      }
+
+      &--danger{
+          --el-button-font-color:#e34242ff;
+          --el-button-background-color:#ffffffff;
+          --el-button-border-color:#e34242ff;
+        //   --el-button-hover-color:#f00000ff;
+        //   --el-button-active-font-color:#e34242ff;
+        //   --el-button-active-background-color:#ffffffff;
+        //   --el-button-active-border-color:#e34242ff;
+          &:hover ,&:active{
+            color: #ff7c7cff;
+            border-color: #ff7c7cff;
+            background-color: #ffffffff;
+
+          }
+          &.is-disabled{
+            &,&:hover,&:focus,&:active{
+                color: #f8b2b2ff;
+            border-color: #f8b2b2ff;
+            background-color: #ffffffff;
+            }
+          }
+      }
+
+    //   &--default{
+    //     --el-button-font-color:#1d1d1dff;
+    //     --el-button-background-color:#ffffffff;
+    //     --el-button-border-color:#1d1d1dff;
+    //     --el-button-hover-color:#00b299ff;
+    //     --el-button-active-font-color:#1d1d1dff;
+    //     --el-button-active-background-color:#ffffffff;
+    //     --el-button-active-border-color:#1d1d1dff;
+    //     &.is-disabled{
+    //         &,&:hover,&:focus,&:active{
+    //             border-color: #c8c8c8;
+    //         color: #c8c8c8;
+    //         background-color: #ffffff;
+    //         }
+    //       }
+    //   }
+
+      // &--primary{
+      //   --el-button-font-color:#ffffffff;
+      //   --el-button-background-color:#00b299ff;
+      //   --el-button-border-color:#00b299ff;
+      //   --el-button-hover-color:#25d0b8ff;
+      //   --el-button-active-font-color:#ffffffff;
+      //   --el-button-active-background-color:#00b299ff;
+      //   --el-button-active-border-color:#00b299ff;
+      //   &.is-disabled{
+      //       &,&:hover,&:focus,&:active{
+      //           background-color: #9edcd3ff;
+      //       border-color: #9edcd3ff;
+      //       color:#ffffffff;
+      //       }
+      //     }
+      // }
+
+
+  &.el-button--primary {
+    background-color: #00b299ff;
+    border-color: #00b299ff;
+    color: #ffffffff;
+
+    &:hover {
+      background-color: #25d0b8ff;
+      border-color: #25d0b8ff;
+      color: #ffffffff;
+    }
+
+    &.is-disabled {
+      &,
+      &:hover,&:focus,&:active{
+        background-color: #9edcd3ff;
+        border-color: #9edcd3ff;
+        color:#ffffffff;
+      }
+    }
+  }
+
+      &--mini{
+          min-height: 22px;
+          padding:4px 9px;
+      }
+
+      & + .el-dropdown {
+        margin-left: 10px;
+      }
+  }
+
+  .el-dropdown{
+
+      &-menu__item {
+        &.active {
+          background-color: #e3f7f4;
+          color: #4d4d4dff;
+        }
+        &:not(.is-disabled):hover {
+          background-color: #f1f3f7;
+          color: #4d4d4dff;
+        }
+      }
+  }
+
+.el-input,
+.el-textarea,
+.el-select {
+  transition: all 0.3s;
+  width: 100%;
+
+}
+
+.el-date-editor {
+    --el-date-editor-width:100%;
+}
+
+.el-tabs.el-tabs--top:not(.el-tabs--card) {
+    .el-tabs__item {
+      &.is-top {
+        padding: 0 0 0 20px;
+      }
+    }
+  
+    & .is-top .el-tabs__nav-wrap::after {
+      height: 1px;
+    }
+  }
+  
+  .el-tabs.el-tabs--left:not(.el-tabs--card) {
+    & .is-left .el-tabs__nav-wrap::after {
+      width: 1px;
+    }
+  }
+
+  .el-steps {
+    &.el-steps--horizontal {
+      .el-step__title {
+        color: inherit;
+      }
+  
+      .el-step__line-inner {
+        border-color: #e2edeb;
+      }
+      .el-step__line {
+        background-color: #e2edeb;
+      }
+  
+      .is-success {
+        .el-step__icon {
+          background-color: #00b299ff;
+          color: #ffffff;
+          border: none;
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa28070d..000000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/Advanced/components/postpone.vue b/src/views/Advanced/components/postpone.vue
index 5bd28c158..d871db3f1 100644
--- a/src/views/Advanced/components/postpone.vue
+++ b/src/views/Advanced/components/postpone.vue
@@ -2,13 +2,14 @@
   <div>
     <el-tabs>
       <el-tab-pane :label="tl('setting')" v-loading="configPending">
-        <el-row>
-          <el-form
-            ref="delayedForm"
-            :rules="delayedRules"
-            :model="delayedConfig"
-            :disabled="!configEnable"
-          >
+        <el-form
+          ref="delayedForm"
+          :rules="delayedRules"
+          :model="delayedConfig"
+          :disabled="!configEnable"
+          label-position="top"
+        >
+          <el-row>
             <el-col :span="10">
               <el-form-item
                 :label="tl('maxDelayedMsg')"
@@ -33,8 +34,8 @@
                 </el-input>
               </el-form-item>
             </el-col>
-          </el-form>
-        </el-row>
+          </el-row>
+        </el-form>
         <el-row>
           <el-button
             size="small"
@@ -96,7 +97,6 @@
               <el-button
                 size="mini"
                 type="danger"
-                plain
                 @click="deleteDelayedInfo(row)"
                 >{{ $t("Base.delete") }}</el-button
               >
diff --git a/src/views/Advanced/components/retainer.vue b/src/views/Advanced/components/retainer.vue
index 2ee560c3a..6ec104b30 100644
--- a/src/views/Advanced/components/retainer.vue
+++ b/src/views/Advanced/components/retainer.vue
@@ -8,6 +8,7 @@
           ref="retainerForm"
           :rules="retainerRules"
           :model="retainerConfig"
+          label-position="top"
         >
           <el-row :gutter="30">
             <el-col :span="16">
@@ -232,7 +233,6 @@
               <el-button
                 size="mini"
                 type="danger"
-                plain
                 @click="deleteRetainerTopic(row)"
                 >{{ $t("Base.delete") }}</el-button
               >
diff --git a/src/views/Advanced/components/rewrite.vue b/src/views/Advanced/components/rewrite.vue
index 1adde6799..9d0351855 100644
--- a/src/views/Advanced/components/rewrite.vue
+++ b/src/views/Advanced/components/rewrite.vue
@@ -29,13 +29,9 @@
           <el-button size="mini" @click="openOpDialog(true, row)">{{
             $t("Base.edit")
           }}</el-button>
-          <el-button
-            size="mini"
-            type="danger"
-            plain
-            @click="deleteRewrite(row)"
-            >{{ $t("Base.delete") }}</el-button
-          >
+          <el-button size="mini" type="danger" @click="deleteRewrite(row)">{{
+            $t("Base.delete")
+          }}</el-button>
         </template>
       </el-table-column>
     </el-table>
diff --git a/src/views/Advanced/components/subscribe.vue b/src/views/Advanced/components/subscribe.vue
index fe3b3e4c0..1f729b259 100644
--- a/src/views/Advanced/components/subscribe.vue
+++ b/src/views/Advanced/components/subscribe.vue
@@ -20,7 +20,7 @@
           <el-button size="mini" @click="openOpDialog(true, row)">{{
             $t("Base.edit")
           }}</el-button>
-          <el-button size="mini" type="danger" plain @click="deleteSubs(row)">{{
+          <el-button size="mini" type="danger" @click="deleteSubs(row)">{{
             $t("Base.delete")
           }}</el-button>
         </template>
diff --git a/src/views/Alarm/Alarm.vue b/src/views/Alarm/Alarm.vue
index 5d5372aad..fbcdb7733 100644
--- a/src/views/Alarm/Alarm.vue
+++ b/src/views/Alarm/Alarm.vue
@@ -75,7 +75,6 @@
         <el-button
           type="danger"
           size="small"
-          plain
           @click="clearHistoryAlarm"
           :disabled="!historyAlarmData.length"
         >
diff --git a/src/views/Auth/AuthnDetails.vue b/src/views/Auth/AuthnDetails.vue
index 88ff336f9..c9053e6b2 100644
--- a/src/views/Auth/AuthnDetails.vue
+++ b/src/views/Auth/AuthnDetails.vue
@@ -22,10 +22,10 @@
         </div>
       </div>
       <div>
-        <el-button type="danger" plain size="small" @click="handleDelete">
+        <el-button type="danger" size="small" @click="handleDelete">
           {{ $t("Base.delete") }}
         </el-button>
-        <el-button size="small" plain @click="handleUpdate(configData)">
+        <el-button size="small" @click="handleUpdate(configData)">
           {{ configData.enable ? $t("Auth.disable") : $t("Auth.enable") }}
         </el-button>
       </div>
diff --git a/src/views/Auth/AuthzDetails.vue b/src/views/Auth/AuthzDetails.vue
index 3ae3db16b..409b604ce 100644
--- a/src/views/Auth/AuthzDetails.vue
+++ b/src/views/Auth/AuthzDetails.vue
@@ -13,10 +13,10 @@
         </div>
       </div>
       <div>
-        <el-button type="danger" plain size="small" @click="handleDelete">
+        <el-button type="danger" size="small" @click="handleDelete">
           {{ $t("Base.delete") }}
         </el-button>
-        <el-button size="small" plain @click="handleUpdate(configData)">
+        <el-button size="small" @click="handleUpdate(configData)">
           {{ configData.enable ? $t("Auth.disable") : $t("Auth.enable") }}
         </el-button>
       </div>
diff --git a/src/views/Auth/components/BuiltInManager.vue b/src/views/Auth/components/BuiltInManager.vue
index e99643870..4ae172b86 100644
--- a/src/views/Auth/components/BuiltInManager.vue
+++ b/src/views/Auth/components/BuiltInManager.vue
@@ -201,7 +201,7 @@
       </el-form>
       <template #footer>
         <div class="dialog-align-footer">
-          <el-button plain size="small" @click="dialogVisible = false">
+          <el-button size="small" @click="dialogVisible = false">
             {{ $t("Base.cancel") }}
           </el-button>
           <el-button type="primary" size="small" @click="handleSubmit">
diff --git a/src/views/Auth/components/DataManager.vue b/src/views/Auth/components/DataManager.vue
index 4bfeb1699..c1d2701bc 100644
--- a/src/views/Auth/components/DataManager.vue
+++ b/src/views/Auth/components/DataManager.vue
@@ -98,7 +98,7 @@
       </el-form>
       <template #footer>
         <div class="dialog-align-footer">
-          <el-button plain size="small" @click="dialogVisible = false">
+          <el-button size="small" @click="dialogVisible = false">
             {{ $t("Base.cancel") }}
           </el-button>
 
diff --git a/src/views/Base/Layout.vue b/src/views/Base/Layout.vue
index 8c08912e2..337d9563d 100644
--- a/src/views/Base/Layout.vue
+++ b/src/views/Base/Layout.vue
@@ -30,6 +30,7 @@
             <el-menu
               v-if="hasSubMenu"
               :default-active="defaultSubMenu"
+              :key="defaultSubMenu"
               mode="horizontal"
               router
               class="top-submenu"
diff --git a/src/views/Base/NavHeader.vue b/src/views/Base/NavHeader.vue
index d1aa17e95..8e24d8c5f 100644
--- a/src/views/Base/NavHeader.vue
+++ b/src/views/Base/NavHeader.vue
@@ -226,7 +226,7 @@ export default {
   }
 }
 
-.go-link {
+.el-button.go-link {
   background-color: #282e38ff;
   color: #fff;
   border: 1px solid #282e38ff;
diff --git a/src/views/Clients/ClientDetails.vue b/src/views/Clients/ClientDetails.vue
index 46f65825e..edecc319a 100644
--- a/src/views/Clients/ClientDetails.vue
+++ b/src/views/Clients/ClientDetails.vue
@@ -26,19 +26,12 @@
         <el-button
           v-if="record.connected"
           type="danger"
-          plain
           size="small"
           @click="handleDisconnect"
         >
           {{ $t("Clients.kickOut") }}
         </el-button>
-        <el-button
-          v-else
-          type="danger"
-          size="small"
-          plain
-          @click="handleDisconnect"
-        >
+        <el-button v-else type="danger" size="small" @click="handleDisconnect">
           {{ $t("Clients.cleanSession") }}
         </el-button>
       </div>
@@ -172,7 +165,7 @@
         {{ $t("Clients.currentSubscription") }}
       </div>
       <div>
-        <!-- <el-button plain size="mini" icon="el-icon-refresh" @click="loadData">
+        <!-- <el-button  size="mini" icon="el-icon-refresh" @click="loadData">
           {{ $t('Clients.refresh') }}
         </el-button> -->
         <el-button
@@ -201,7 +194,6 @@
       <el-table-column prop="clientid" :label="$t('Base.operation')">
         <template #default="{ row }">
           <el-button
-            plain
             type="danger"
             size="mini"
             @click="handleUnSubscription(row)"
diff --git a/src/views/Clients/Clients.vue b/src/views/Clients/Clients.vue
index 5f5e95f31..05bc61c8f 100644
--- a/src/views/Clients/Clients.vue
+++ b/src/views/Clients/Clients.vue
@@ -188,12 +188,7 @@
       </el-table-column>
       <el-table-column prop="oper" :label="$t('Base.operation')">
         <template #default="{ row }">
-          <el-button
-            size="mini"
-            type="danger"
-            plain
-            @click="handleDisconnect(row)"
-          >
+          <el-button size="mini" type="danger" @click="handleDisconnect(row)">
             {{
               row.connected ? $t("Clients.kickOut") : $t("Clients.cleanSession")
             }}
diff --git a/src/views/Clients/components/CreateSubscribe.vue b/src/views/Clients/components/CreateSubscribe.vue
index 20e9879c9..72e006a71 100644
--- a/src/views/Clients/components/CreateSubscribe.vue
+++ b/src/views/Clients/components/CreateSubscribe.vue
@@ -36,7 +36,7 @@
     </el-form>
     <template #footer>
       <div class="dialog-align-footer">
-        <el-button plain size="small" @click="close">{{
+        <el-button size="small" @click="close">{{
           $t("Base.cancel")
         }}</el-button>
         <el-button type="primary" size="small" @click="handleAdd">{{
diff --git a/src/views/Dashboard/Metrics.vue b/src/views/Dashboard/Metrics.vue
index 7b629b0d3..5cedf8d34 100644
--- a/src/views/Dashboard/Metrics.vue
+++ b/src/views/Dashboard/Metrics.vue
@@ -127,7 +127,7 @@
       </div>
       <div class="section-addition">
         <emq-select
-          v-model="currentNode"
+          v-model:value="currentNode"
           :field="{ options: metrics }"
           :field-name="{ label: 'node', value: 'node' }"
           @change="changeNode"
diff --git a/src/views/Gateway/GatewayCreate.vue b/src/views/Gateway/GatewayCreate.vue
index d47eade70..b0ab00ba4 100644
--- a/src/views/Gateway/GatewayCreate.vue
+++ b/src/views/Gateway/GatewayCreate.vue
@@ -13,7 +13,7 @@
       </el-col>
     </el-row>
     <el-row class="config-main">
-      <div v-if="stepActive === 0" class="config-basic">
+      <el-col :span="18" v-if="stepActive === 0" class="config-basic">
         <template v-if="name === 'STOMP'">
           <stomp-basic v-model:value="basicData" />
         </template>
@@ -29,23 +29,23 @@
         <template v-else-if="name === 'EXPROTO'">
           <exproto-basic v-model:value="basicData"></exproto-basic>
         </template>
-      </div>
+      </el-col>
 
-      <div v-else-if="stepActive === 1">
+      <el-col :span="24" v-else-if="stepActive === 1">
         <listeners
           :integration="true"
           :gateway-name="name"
           v-model:list="listenerList"
         ></listeners>
-      </div>
-      <div v-else-if="stepActive === 2">
+      </el-col>
+      <el-col :span="24" v-else-if="stepActive === 2">
         <div class="part-header">
           {{ tl("clientAuth") }}
         </div>
         <div class="config-auth">
           {{ tl("clientAuthDesc") }}
         </div>
-      </div>
+      </el-col>
     </el-row>
     <el-row class="config-op">
       <el-button
@@ -242,9 +242,6 @@ export default defineComponent({
 .config-main {
   margin-top: 30px;
 }
-.config-basic {
-  width: 70%;
-}
 .config-op {
   margin-top: 30px;
 }
diff --git a/src/views/Gateway/GatewayDetail.vue b/src/views/Gateway/GatewayDetail.vue
index 8d8be6159..71d733257 100644
--- a/src/views/Gateway/GatewayDetail.vue
+++ b/src/views/Gateway/GatewayDetail.vue
@@ -19,11 +19,10 @@
         </span>
       </div>
       <div>
-        <!-- <el-button type="danger" plain size="small">{{ $t('Base.delete') }}</el-button> -->
+        <!-- <el-button type="danger"  size="small">{{ $t('Base.delete') }}</el-button> -->
         <el-button
           size="small"
           type="danger"
-          plain
           :disabled="gInfo.status !== 'running'"
           @click="gatewayStop()"
         >
@@ -64,7 +63,7 @@ export default defineComponent({
       );
     },
   },
-  setup(p) {
+  setup() {
     let gInfo = ref({});
     let vm = getCurrentInstance();
     const tl = function (key, collection = "Gateway") {
diff --git a/src/views/Gateway/components/clients.vue b/src/views/Gateway/components/clients.vue
index df87e79cb..381c61916 100644
--- a/src/views/Gateway/components/clients.vue
+++ b/src/views/Gateway/components/clients.vue
@@ -128,7 +128,7 @@
           <el-button @click="openClientDetail(row)">{{
             $t("Base.view")
           }}</el-button>
-          <el-button type="danger" plain @click="disconnectClient(row)">{{
+          <el-button type="danger" @click="disconnectClient(row)">{{
             $t("Clients.kickOut")
           }}</el-button>
         </template>
diff --git a/src/views/Gateway/components/coapBasic.vue b/src/views/Gateway/components/coapBasic.vue
index acbc623af..d6073a9a9 100644
--- a/src/views/Gateway/components/coapBasic.vue
+++ b/src/views/Gateway/components/coapBasic.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form>
+    <el-form label-position="top">
       <div class="part-header">
         {{ tl("basic") }}
       </div>
diff --git a/src/views/Gateway/components/exprotoBasic.vue b/src/views/Gateway/components/exprotoBasic.vue
index ba4c93a7c..459b043cc 100644
--- a/src/views/Gateway/components/exprotoBasic.vue
+++ b/src/views/Gateway/components/exprotoBasic.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form>
+    <el-form label-position="top">
       <div class="part-header">
         {{ tl("basic") }}
       </div>
diff --git a/src/views/Gateway/components/listeners.vue b/src/views/Gateway/components/listeners.vue
index 75082317f..1a1f4eeda 100644
--- a/src/views/Gateway/components/listeners.vue
+++ b/src/views/Gateway/components/listeners.vue
@@ -38,13 +38,9 @@
           <el-button size="mini" @click="openDialog(true, row, $index)">{{
             $t("Base.edit")
           }}</el-button>
-          <el-button
-            size="mini"
-            type="danger"
-            plain
-            @click="delListener(row)"
-            >{{ $t("Base.delete") }}</el-button
-          >
+          <el-button size="mini" type="danger" @click="delListener(row)">{{
+            $t("Base.delete")
+          }}</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -61,7 +57,7 @@
 
     <el-dialog :title="tl('addListener')" v-model="opListener">
       <div class="part-header">{{ tl("basic") }}</div>
-      <el-form>
+      <el-form label-position="top">
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item :label="tl('name')">
diff --git a/src/views/Gateway/components/lwm2mBasic.vue b/src/views/Gateway/components/lwm2mBasic.vue
index 99fbbea50..154bb726a 100644
--- a/src/views/Gateway/components/lwm2mBasic.vue
+++ b/src/views/Gateway/components/lwm2mBasic.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form>
+    <el-form label-position="top">
       <div class="part-header">
         {{ tl("basic") }}
       </div>
diff --git a/src/views/Gateway/components/mqttsnBasic.vue b/src/views/Gateway/components/mqttsnBasic.vue
index b4325c247..3df57c38b 100644
--- a/src/views/Gateway/components/mqttsnBasic.vue
+++ b/src/views/Gateway/components/mqttsnBasic.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form>
+    <el-form label-position="top">
       <div class="part-header">
         {{ tl("basic") }}
       </div>
diff --git a/src/views/Gateway/components/stompBasic.vue b/src/views/Gateway/components/stompBasic.vue
index a66a1bb69..2a2d55fcd 100644
--- a/src/views/Gateway/components/stompBasic.vue
+++ b/src/views/Gateway/components/stompBasic.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form>
+    <el-form label-position="top">
       <div class="part-header">
         {{ tl("basic") }}
       </div>
diff --git a/src/views/General/Application.vue b/src/views/General/Application.vue
index e63804bde..7bde1e9de 100644
--- a/src/views/General/Application.vue
+++ b/src/views/General/Application.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="application app-wrapper">
-    <el-button type="primary" size="small" icon="el-icon-plus" @click="showDialog('create')">
-      {{ $t('Base.create') }}
+    <el-button
+      type="primary"
+      size="small"
+      icon="el-icon-plus"
+      @click="showDialog('create')"
+    >
+      {{ $t("Base.create") }}
     </el-button>
 
     <el-table :data="tableData" class="data-list">
@@ -12,25 +17,33 @@
           </a>
         </template>
       </el-table-column>
-      <el-table-column prop="name" :label="$t('General.appName')" sortable></el-table-column>
+      <el-table-column
+        prop="name"
+        :label="$t('General.appName')"
+        sortable
+      ></el-table-column>
       <el-table-column
         prop="expired"
         :formatter="formatterExpired"
         :label="$t('General.expireAt')"
       ></el-table-column>
-      <el-table-column prop="desc" :label="$t('General.remark')"></el-table-column>
+      <el-table-column
+        prop="desc"
+        :label="$t('General.remark')"
+      ></el-table-column>
       <el-table-column :label="$t('General.isEnabled')">
         <template slot-scope="{ row }">
-          <el-switch v-model="row.status" @change="updateApplication(row)"> </el-switch>
+          <el-switch v-model="row.status" @change="updateApplication(row)">
+          </el-switch>
         </template>
       </el-table-column>
       <el-table-column :label="$t('Base.operation')">
         <template slot-scope="{ row }">
-          <el-button plain size="mini" @click="showDialog('edit', row)">
-            {{ $t('Base.edit') }}
+          <el-button size="mini" @click="showDialog('edit', row)">
+            {{ $t("Base.edit") }}
           </el-button>
-          <el-button type="danger" size="mini" plain @click="deleteConfirm(row)">
-            {{ $t('Base.delete') }}
+          <el-button type="danger" size="mini" @click="deleteConfirm(row)">
+            {{ $t("Base.delete") }}
           </el-button>
         </template>
       </el-table-column>
@@ -38,7 +51,9 @@
 
     <el-dialog
       width="600px"
-      :title="accessType === 'edit' ? $t('General.editApp') : $t('General.createApp')"
+      :title="
+        accessType === 'edit' ? $t('General.editApp') : $t('General.createApp')
+      "
       :visible.sync="dialogVisible"
       @close="clearInput"
     >
@@ -103,154 +118,175 @@
           </el-col>
           <el-col :span="12">
             <el-form-item prop="desc" :label="$t('General.remark')">
-              <el-input v-model="record.desc" :readonly="accessType === 'view'"></el-input>
+              <el-input
+                v-model="record.desc"
+                :readonly="accessType === 'view'"
+              ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
 
-      <div v-if="accessType !== 'view'" slot="footer" class="dialog-align-footer">
-        <el-button plain size="small" @click="dialogVisible = false">{{
-          $t('Base.cancel')
+      <div
+        v-if="accessType !== 'view'"
+        slot="footer"
+        class="dialog-align-footer"
+      >
+        <el-button size="small" @click="dialogVisible = false">{{
+          $t("Base.cancel")
+        }}</el-button>
+        <el-button type="primary" size="small" @click="save">{{
+          $t("Base.confirm")
         }}</el-button>
-        <el-button type="primary" size="small" @click="save">{{ $t('Base.confirm') }}</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import moment from 'moment'
+import moment from "moment";
 
-import { loadApp, createApp, showApp, updateApp, destroyAPP } from '@/api/function'
+import {
+  loadApp,
+  createApp,
+  showApp,
+  updateApp,
+  destroyAPP,
+} from "@/api/function";
 
 export default {
-  name: 'Application',
+  name: "Application",
 
   data() {
     return {
       dialogVisible: false,
       tableData: [],
-      accessType: '',
+      accessType: "",
       enableOption: [
-        { label: this.$t('General.enabled'), value: true },
-        { label: this.$t('General.disabled'), value: false },
+        { label: this.$t("General.enabled"), value: true },
+        { label: this.$t("General.disabled"), value: false },
       ],
       record: {
         status: true, // 是否启用
-        desc: '',
+        desc: "",
       },
       rules: {
-        name: [{ required: true, message: this.$t('General.pleaseEnterAppName') }],
-        app_id: [{ required: true, message: this.$t('General.pleaseEnterTheAppId') }],
-        status: [{ required: true, message: this.$t('General.pleaseChoose') }],
+        name: [
+          { required: true, message: this.$t("General.pleaseEnterAppName") },
+        ],
+        app_id: [
+          { required: true, message: this.$t("General.pleaseEnterTheAppId") },
+        ],
+        status: [{ required: true, message: this.$t("General.pleaseChoose") }],
       },
-    }
+    };
   },
 
   created() {
-    this.loadData()
+    this.loadData();
   },
 
   methods: {
     formatterExpired({ expired }) {
-      if (!expired || typeof expired !== 'number') {
-        return this.$t('General.neverExpire')
+      if (!expired || typeof expired !== "number") {
+        return this.$t("General.neverExpire");
       }
-      return moment(expired * 1000).format('YYYY-MM-DD')
+      return moment(expired * 1000).format("YYYY-MM-DD");
     },
     clearInput() {
       if (this.$refs.recordForm) {
-        this.$refs.recordForm.resetFields()
+        this.$refs.recordForm.resetFields();
       }
     },
     async loadData() {
-      this.tableData = await loadApp()
+      this.tableData = await loadApp();
     },
     // 请求一组数据
     async loadAppData(id) {
-      const record = await showApp(id)
-      if (record.expired && typeof record.expired === 'number') {
-        record.expired = moment(record.expired * 1000).format('YYYY-MM-DD')
+      const record = await showApp(id);
+      if (record.expired && typeof record.expired === "number") {
+        record.expired = moment(record.expired * 1000).format("YYYY-MM-DD");
       }
-      this.record = record
+      this.record = record;
     },
     showDialog(type, item) {
-      this.accessType = type
-      if (type === 'edit') {
-        const record = { ...item }
-        if (record.expired && typeof record.expired === 'number') {
-          record.expired = moment(record.expired * 1000).format('YYYY-MM-DD')
+      this.accessType = type;
+      if (type === "edit") {
+        const record = { ...item };
+        if (record.expired && typeof record.expired === "number") {
+          record.expired = moment(record.expired * 1000).format("YYYY-MM-DD");
         } else {
-          record.expired = undefined
+          record.expired = undefined;
         }
-        this.record = record
-      } else if (type === 'view') {
-        this.loadAppData(item.app_id)
+        this.record = record;
+      } else if (type === "view") {
+        this.loadAppData(item.app_id);
       } else {
         this.record = {
           app_id: Math.random().toString(16).slice(3),
           status: true,
-          desc: '',
-        }
+          desc: "",
+        };
       }
-      this.dialogVisible = true
+      this.dialogVisible = true;
     },
     updateApplication(item) {
       updateApp(item.app_id, item).then(() => {
-        this.$message.success(this.$t('Base.editSuccess'))
-      })
+        this.$message.success(this.$t("Base.editSuccess"));
+      });
     },
     save() {
-      const vue = this
+      const vue = this;
       this.$refs.recordForm.validate((valid) => {
         if (!valid) {
-          return
+          return;
         }
-        const record = { ...this.record }
-        if (record.expired && typeof record.expired === 'string') {
+        const record = { ...this.record };
+        if (record.expired && typeof record.expired === "string") {
           try {
-            record.expired = Math.floor(new Date(record.expired).getTime() / 1000)
+            record.expired = Math.floor(
+              new Date(record.expired).getTime() / 1000
+            );
           } catch (e) {
-            record.expired = null
+            record.expired = null;
           }
         }
-        if (vue.accessType === 'edit') {
-          const { app_id } = vue.record
+        if (vue.accessType === "edit") {
+          const { app_id } = vue.record;
           updateApp(app_id, record).then(() => {
-            vue.$message.success(this.$t('Base.editSuccess'))
-            vue.dialogVisible = false
-            vue.accessType = ''
-            vue.loadData()
-          })
+            vue.$message.success(this.$t("Base.editSuccess"));
+            vue.dialogVisible = false;
+            vue.accessType = "";
+            vue.loadData();
+          });
         } else {
           createApp(record).then(() => {
-            vue.$message.success(this.$t('General.successfulAppCreation'))
-            vue.dialogVisible = false
-            vue.accessType = ''
-            vue.loadData()
-          })
+            vue.$message.success(this.$t("General.successfulAppCreation"));
+            vue.dialogVisible = false;
+            vue.accessType = "";
+            vue.loadData();
+          });
         }
-      })
+      });
     },
     deleteConfirm(item) {
-      const vue = this
+      const vue = this;
       this.$msgbox
-        .confirm(this.$t('General.confirmDelete'), {
-          confirmButtonText: this.$t('Base.confirm'),
-          cancelButtonText: this.$t('Base.cancel'),
-          type: 'warning',
+        .confirm(this.$t("General.confirmDelete"), {
+          confirmButtonText: this.$t("Base.confirm"),
+          cancelButtonText: this.$t("Base.cancel"),
+          type: "warning",
         })
         .then(async () => {
           destroyAPP(item.app_id).then(() => {
-            vue.$message.success(this.$t('Base.deleteSuccess'))
-            vue.loadData()
-          })
+            vue.$message.success(this.$t("Base.deleteSuccess"));
+            vue.loadData();
+          });
         })
-        .catch(() => {})
+        .catch(() => {});
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/General/Backup.vue b/src/views/General/Backup.vue
index 03a7d89fe..b1b937901 100644
--- a/src/views/General/Backup.vue
+++ b/src/views/General/Backup.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="backup app-wrapper">
-    <el-button type="primary" size="small" icon="el-icon-plus" @click="handleExport">
-      {{ $t('Backup.createBackup') }}
+    <el-button
+      type="primary"
+      size="small"
+      icon="el-icon-plus"
+      @click="handleExport"
+    >
+      {{ $t("Backup.createBackup") }}
     </el-button>
     <el-upload
       ref="upload"
@@ -15,29 +20,41 @@
       :on-error="handleError"
     >
       <el-button slot="trigger" size="small" icon="el-icon-upload2">
-        {{ $t('Backup.uploadServer') }}
+        {{ $t("Backup.uploadServer") }}
       </el-button>
     </el-upload>
 
     <el-table :data="tableData">
-      <el-table-column prop="node" :label="$t('RuleEngine.node')" sortable></el-table-column>
-      <el-table-column prop="filename" :label="$t('Backup.filename')" sortable></el-table-column>
+      <el-table-column
+        prop="node"
+        :label="$t('RuleEngine.node')"
+        sortable
+      ></el-table-column>
+      <el-table-column
+        prop="filename"
+        :label="$t('Backup.filename')"
+        sortable
+      ></el-table-column>
       <el-table-column prop="size" :label="$t('Backup.size')" sortable>
         <template slot-scope="{ row }">
           {{ row.size | renderSize }}
         </template>
       </el-table-column>
-      <el-table-column prop="created_at" :label="$t('Backup.createAt')" sortable></el-table-column>
+      <el-table-column
+        prop="created_at"
+        :label="$t('Backup.createAt')"
+        sortable
+      ></el-table-column>
       <el-table-column :label="$t('Base.operation')">
         <template slot-scope="{ row }">
           <el-button size="mini" @click="handleDownload(row)"
-            >{{ $t('Backup.download') }}
+            >{{ $t("Backup.download") }}
           </el-button>
-          <el-button plain size="mini" @click="handleRestore(row)"
-            >{{ $t('Backup.restore') }}
+          <el-button size="mini" @click="handleRestore(row)"
+            >{{ $t("Backup.restore") }}
           </el-button>
-          <el-button type="danger" plain size="mini" @click="deleteConfirm(row)"
-            >{{ $t('Base.delete') }}
+          <el-button type="danger" size="mini" @click="deleteConfirm(row)"
+            >{{ $t("Base.delete") }}
           </el-button>
         </template>
       </el-table-column>
@@ -53,119 +70,119 @@ import {
   downloadFile,
   importBackup,
   uploadBackupFile,
-} from '@/api/backup'
+} from "@/api/backup";
 
 export default {
-  name: 'Backup',
+  name: "Backup",
   filters: {
     renderSize(val) {
-      if (val === null || val === '') {
-        return '0 Bytes'
+      if (val === null || val === "") {
+        return "0 Bytes";
       }
-      const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-      let index = 0
-      const srcsize = parseFloat(val)
-      index = Math.floor(Math.log(srcsize) / Math.log(1024))
-      let size = srcsize / 1024 ** index
-      size = size.toFixed(1)
-      return `${size} ${unitArr[index]}`
+      const unitArr = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+      let index = 0;
+      const srcsize = parseFloat(val);
+      index = Math.floor(Math.log(srcsize) / Math.log(1024));
+      let size = srcsize / 1024 ** index;
+      size = size.toFixed(1);
+      return `${size} ${unitArr[index]}`;
     },
   },
   data() {
     return {
       fileList: [],
       tableData: [],
-    }
+    };
   },
 
   created() {
-    this.loadData()
+    this.loadData();
   },
 
   methods: {
     async loadData() {
-      this.tableData = await loadBackup()
+      this.tableData = await loadBackup();
     },
     async handleExport() {
-      let res
+      let res;
       try {
-        res = await exportBackup()
+        res = await exportBackup();
       } catch (e) {
-        return
+        return;
       }
       if (res) {
-        this.$message.success(this.$t('Base.createSuccess'))
-        this.loadData()
+        this.$message.success(this.$t("Base.createSuccess"));
+        this.loadData();
       }
     },
     async handleDownload(row) {
-      const res = await downloadFile(row.filename)
+      const res = await downloadFile(row.filename);
       if (res) {
-        const aTag = document.createElement('a')
-        const blob = new Blob([res.file])
-        aTag.download = row.filename
-        aTag.href = URL.createObjectURL(blob)
-        aTag.setAttribute('type', 'hidden')
-        document.body.appendChild(aTag)
-        aTag.click()
-        aTag.remove()
-        URL.revokeObjectURL(blob)
+        const aTag = document.createElement("a");
+        const blob = new Blob([res.file]);
+        aTag.download = row.filename;
+        aTag.href = URL.createObjectURL(blob);
+        aTag.setAttribute("type", "hidden");
+        document.body.appendChild(aTag);
+        aTag.click();
+        aTag.remove();
+        URL.revokeObjectURL(blob);
       }
     },
     async handleRestore(row) {
-      const { filename, node } = row
-      const res = await importBackup({ filename, node })
+      const { filename, node } = row;
+      const res = await importBackup({ filename, node });
       if (res) {
-        this.$message.success(this.$t('Backup.restoreSuccess'))
+        this.$message.success(this.$t("Backup.restoreSuccess"));
       }
     },
     deleteConfirm(row) {
-      const vue = this
+      const vue = this;
       this.$msgbox
-        .confirm(this.$t('Backup.confirmDelete'), {
-          confirmButtonText: this.$t('Base.confirm'),
-          cancelButtonText: this.$t('Base.cancel'),
-          type: 'warning',
+        .confirm(this.$t("Backup.confirmDelete"), {
+          confirmButtonText: this.$t("Base.confirm"),
+          cancelButtonText: this.$t("Base.cancel"),
+          type: "warning",
         })
         .then(async () => {
           deleteBackup(row.filename).then(() => {
-            vue.$message.success(this.$t('Base.deleteSuccess'))
-            vue.loadData()
-          })
+            vue.$message.success(this.$t("Base.deleteSuccess"));
+            vue.loadData();
+          });
         })
-        .catch(() => {})
+        .catch(() => {});
     },
     handleChange(file) {
       if (file.size >= 5242880) {
-        this.$message.warning(this.$t('Backup.fileTooBig'))
-        this.$refs.upload.clearFiles()
-        return
+        this.$message.warning(this.$t("Backup.fileTooBig"));
+        this.$refs.upload.clearFiles();
+        return;
       }
-      const reader = new FileReader()
-      reader.readAsText(file.raw)
+      const reader = new FileReader();
+      reader.readAsText(file.raw);
       reader.onload = async (event) => {
-        const content = event.currentTarget.result
+        const content = event.currentTarget.result;
         const uploadData = {
           file: content,
           filename: file.name,
-        }
-        const res = await uploadBackupFile(uploadData)
-        const { node } = res.data
+        };
+        const res = await uploadBackupFile(uploadData);
+        const { node } = res.data;
         if (res) {
-          this.handleRestore({ filename: file.name, node })
-          this.loadData()
-          this.$refs.upload.clearFiles()
+          this.handleRestore({ filename: file.name, node });
+          this.loadData();
+          this.$refs.upload.clearFiles();
         }
-      }
+      };
       reader.onerror = () => {
-        this.$message.error(this.$t('Backup.uploadFailed'))
-      }
+        this.$message.error(this.$t("Backup.uploadFailed"));
+      };
     },
     handleError(error) {
-      this.$message.error(error.toString())
+      this.$message.error(error.toString());
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/General/Blacklist.vue b/src/views/General/Blacklist.vue
index a614324a0..ee1ce2a16 100644
--- a/src/views/General/Blacklist.vue
+++ b/src/views/General/Blacklist.vue
@@ -32,7 +32,7 @@
       </el-table-column>
       <el-table-column prop="oper" :label="$t('Base.operation')">
         <template #default="{ row }">
-          <el-button plain type="danger" size="mini" @click="deleteConfirm(row)"
+          <el-button type="danger" size="mini" @click="deleteConfirm(row)"
             >{{ $t("Base.delete") }}
           </el-button>
         </template>
@@ -47,7 +47,13 @@
     </div>
 
     <el-dialog :title="$t('General.createBlacklist')" v-model="dialogVisible">
-      <el-form ref="recordForm" size="small" :model="record" :rules="rules">
+      <el-form
+        ref="recordForm"
+        size="small"
+        :model="record"
+        :rules="rules"
+        label-position="top"
+      >
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item :label="$t('General.banObject')" prop="who">
@@ -76,20 +82,22 @@
           </el-col>
         </el-row>
         <el-row>
-          <el-form-item prop="reason" :label="$t('General.reason')">
-            <el-input
-              v-model="record.reason"
-              type="textarea"
-              :rows="3"
-              :placeholder="$t('General.reason')"
-              resize="none"
-            ></el-input>
-          </el-form-item>
+          <el-col :span="24">
+            <el-form-item prop="reason" :label="$t('General.reason')">
+              <el-input
+                v-model="record.reason"
+                type="textarea"
+                :rows="3"
+                :placeholder="$t('General.reason')"
+                resize="none"
+              ></el-input>
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-form>
       <template #footer>
         <div class="dialog-align-footer">
-          <el-button plain size="small" @click="closeDialog">{{
+          <el-button size="small" @click="closeDialog">{{
             $t("Base.cancel")
           }}</el-button>
           <el-button
diff --git a/src/views/General/LogTrace.vue b/src/views/General/LogTrace.vue
index f7c14fdaa..86a097244 100644
--- a/src/views/General/LogTrace.vue
+++ b/src/views/General/LogTrace.vue
@@ -3,7 +3,7 @@
     <page-header>
       <div class="page-header-content-view">
         <div class="content">
-          {{ $t('LogTrace.logTraceDescription') }}
+          {{ $t("LogTrace.logTraceDescription") }}
         </div>
       </div>
     </page-header>
@@ -17,21 +17,33 @@
             icon="el-icon-plus"
             @click="handleDialogOpen('create')"
           >
-            {{ $t('LogTrace.createTrace') }}
+            {{ $t("LogTrace.createTrace") }}
           </el-button>
         </div>
 
         <el-table :data="tableData" class="data-list">
-          <el-table-column prop="name" :label="$t('LogTrace.filter')"></el-table-column>
-          <el-table-column prop="type" :label="$t('LogTrace.type')"></el-table-column>
-          <el-table-column prop="level" :label="$t('LogTrace.level')"></el-table-column>
+          <el-table-column
+            prop="name"
+            :label="$t('LogTrace.filter')"
+          ></el-table-column>
+          <el-table-column
+            prop="type"
+            :label="$t('LogTrace.type')"
+          ></el-table-column>
+          <el-table-column
+            prop="level"
+            :label="$t('LogTrace.level')"
+          ></el-table-column>
           <el-table-column width="250px">
             <template slot-scope="{ row }">
-              <el-button type="dashed" size="mini" @click="handleDialogOpen('view', row)"
-                >{{ $t('Overview.view') }}
+              <el-button
+                type="dashed"
+                size="mini"
+                @click="handleDialogOpen('view', row)"
+                >{{ $t("Overview.view") }}
               </el-button>
               <el-button type="dashed" size="mini" @click="handleDownload(row)">
-                {{ $t('Backup.download') }}
+                {{ $t("Backup.download") }}
               </el-button>
               <el-button
                 type="dashed danger"
@@ -39,7 +51,7 @@
                 size="mini"
                 @click="deleteConfirm(row)"
               >
-                {{ $t('Base.delete') }}
+                {{ $t("Base.delete") }}
               </el-button>
             </template>
           </el-table-column>
@@ -49,7 +61,11 @@
 
     <el-dialog
       width="520px"
-      :title="accessType === 'view' ? $t('LogTrace.viewTrace') : $t('LogTrace.createTrace')"
+      :title="
+        accessType === 'view'
+          ? $t('LogTrace.viewTrace')
+          : $t('LogTrace.createTrace')
+      "
       :visible.sync="dialogVisible"
       @close="clearInput"
     >
@@ -82,20 +98,32 @@
           </el-col>
           <el-col :span="24">
             <el-form-item prop="name" :label="$t('LogTrace.filter')">
-              <el-input v-model="record.name" :readonly="accessType !== 'create'"> </el-input>
+              <el-input
+                v-model="record.name"
+                :readonly="accessType !== 'create'"
+              >
+              </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item prop="file" :label="$t('LogTrace.logPath')">
-              <el-input v-model="record.file" :readonly="accessType !== 'create'"> </el-input>
+              <el-input
+                v-model="record.file"
+                :readonly="accessType !== 'create'"
+              >
+              </el-input>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
 
-      <div v-if="accessType === 'create'" slot="footer" class="dialog-align-footer">
-        <el-button plain size="small" @click="dialogVisible = false">{{
-          $t('Base.cancel')
+      <div
+        v-if="accessType === 'create'"
+        slot="footer"
+        class="dialog-align-footer"
+      >
+        <el-button size="small" @click="dialogVisible = false">{{
+          $t("Base.cancel")
         }}</el-button>
         <el-button
           :loading="btnLoading === 'createBtn'"
@@ -103,7 +131,7 @@
           size="small"
           @click="handleCreateTrace"
         >
-          {{ $t('Base.confirm') }}
+          {{ $t("Base.confirm") }}
         </el-button>
       </div>
     </el-dialog>
@@ -111,117 +139,117 @@
 </template>
 
 <script>
-import { getTraceList, addTrace, deleteTrace } from '@/api/logTrace'
+import { getTraceList, addTrace, deleteTrace } from "@/api/logTrace";
 
 export default {
-  name: 'LogTrace',
+  name: "LogTrace",
 
   data() {
     return {
       tableData: [],
       dialogVisible: false,
-      accessType: '',
+      accessType: "",
       record: {},
       rules: {
-        type: [{ required: true, message: this.$t('General.pleaseChoose') }],
-        name: [{ required: true, message: this.$t('General.pleaseEnter') }],
-        level: [{ required: true, message: this.$t('General.pleaseChoose') }],
+        type: [{ required: true, message: this.$t("General.pleaseChoose") }],
+        name: [{ required: true, message: this.$t("General.pleaseEnter") }],
+        level: [{ required: true, message: this.$t("General.pleaseChoose") }],
       },
       typeOptions: [
-        { label: this.$t('Clients.clientId'), value: 'clientid' },
-        { label: this.$t('Subs.topic'), value: 'topic' },
+        { label: this.$t("Clients.clientId"), value: "clientid" },
+        { label: this.$t("Subs.topic"), value: "topic" },
       ],
       levelOptions: [
-        'debug',
-        'info',
-        'notice',
-        'warning',
-        'error',
-        'critical',
-        'alert',
-        'emergency',
+        "debug",
+        "info",
+        "notice",
+        "warning",
+        "error",
+        "critical",
+        "alert",
+        "emergency",
       ],
       btnLoading: undefined,
-    }
+    };
   },
 
   methods: {
     async loadList() {
-      this.tableData = await getTraceList()
+      this.tableData = await getTraceList();
     },
 
     handleDialogOpen(oper, row) {
-      this.accessType = oper
-      this.dialogVisible = true
+      this.accessType = oper;
+      this.dialogVisible = true;
 
-      if (oper === 'view') {
-        this.record = { ...row }
+      if (oper === "view") {
+        this.record = { ...row };
       }
     },
 
     clearInput() {
       if (this.$refs.recordForm) {
-        this.$refs.recordForm.resetFields()
+        this.$refs.recordForm.resetFields();
       }
     },
 
     handleSuccess() {
-      this.btnLoading = undefined
-      this.loadList()
+      this.btnLoading = undefined;
+      this.loadList();
     },
 
     handleCreateTrace() {
       this.$refs.recordForm.validate((valid) => {
         if (!valid) {
-          return
+          return;
         }
-        this.btnLoading = 'createBtn'
-        const { ...data } = this.record
+        this.btnLoading = "createBtn";
+        const { ...data } = this.record;
         addTrace(data)
           .then(() => {
-            this.$message.success(this.$t('Base.createSuccess'))
-            this.dialogVisible = false
-            this.handleSuccess()
+            this.$message.success(this.$t("Base.createSuccess"));
+            this.dialogVisible = false;
+            this.handleSuccess();
           })
           .catch(() => {
-            this.btnLoading = undefined
-          })
-      })
+            this.btnLoading = undefined;
+          });
+      });
     },
 
     deleteConfirm(row) {
-      this.$confirm(this.$t('Modules.confirmDelete'), this.$t('Base.warning'), {
-        type: 'warning',
-        cancelButtonText: this.$t('Base.cancel'),
-        confirmButtonText: this.$t('Base.confirm'),
+      this.$confirm(this.$t("Modules.confirmDelete"), this.$t("Base.warning"), {
+        type: "warning",
+        cancelButtonText: this.$t("Base.cancel"),
+        confirmButtonText: this.$t("Base.confirm"),
       })
         .then(() => {
-          this.btnLoading = 'deleteBtn'
-          const { type, name } = row
+          this.btnLoading = "deleteBtn";
+          const { type, name } = row;
           deleteTrace(type, name).then(() => {
-            this.$message.success(this.$t('Base.deleteSuccess'))
-            this.handleSuccess()
-          })
+            this.$message.success(this.$t("Base.deleteSuccess"));
+            this.handleSuccess();
+          });
         })
         .catch(() => {
-          this.btnLoading = undefined
-        })
+          this.btnLoading = undefined;
+        });
     },
 
     handleDownload(row) {
-      const { type, name } = row
-      const aTag = document.createElement('a')
-      aTag.download = `${type}/${name}`
-      aTag.href = `/api/v4/log/trace/download/${type}/${name}`
-      aTag.setAttribute('type', 'hidden')
-      document.body.appendChild(aTag)
-      aTag.click()
-      aTag.remove()
+      const { type, name } = row;
+      const aTag = document.createElement("a");
+      aTag.download = `${type}/${name}`;
+      aTag.href = `/api/v4/log/trace/download/${type}/${name}`;
+      aTag.setAttribute("type", "hidden");
+      document.body.appendChild(aTag);
+      aTag.click();
+      aTag.remove();
     },
   },
 
   created() {
-    this.loadList()
+    this.loadList();
   },
-}
+};
 </script>
diff --git a/src/views/General/Users.vue b/src/views/General/Users.vue
index 9eb4df050..34559e0cf 100644
--- a/src/views/General/Users.vue
+++ b/src/views/General/Users.vue
@@ -25,14 +25,14 @@
       ></el-table-column>
       <el-table-column :label="$t('Base.operation')">
         <template #default="{ row }">
-          <el-button plain size="mini" @click="showDialog('edit', row)"
+          <el-button size="mini" @click="showDialog('edit', row)"
             >{{ $t("Base.edit") }}
           </el-button>
-          <el-button plain size="mini" @click="showDialog('chPass', row)">{{
+          <el-button size="mini" @click="showDialog('chPass', row)">{{
             $t("General.changePassword")
           }}</el-button>
 
-          <el-button type="danger" size="mini" plain @click="deleteConfirm(row)"
+          <el-button type="danger" size="mini" @click="deleteConfirm(row)"
             >{{ $t("Base.delete") }}
           </el-button>
         </template>
@@ -49,7 +49,13 @@
       "
       v-model="dialogVisible"
     >
-      <el-form ref="recordForm" size="small" :model="record" :rules="rules">
+      <el-form
+        ref="recordForm"
+        size="small"
+        :model="record"
+        :rules="rules"
+        label-position="top"
+      >
         <el-form-item
           v-if="accessType !== 'chPass'"
           prop="username"
@@ -90,7 +96,7 @@
       </el-form>
       <template #footer>
         <div class="dialog-align-footer">
-          <el-button plain size="small" @click="closeDialog">{{
+          <el-button size="small" @click="closeDialog">{{
             $t("Base.cancel")
           }}</el-button>
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index 60d05c014..000000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
-
-export default defineComponent({
-  name: "Home",
-  components: {
-    HelloWorld,
-  },
-});
-</script>
diff --git a/src/views/Tools/TopicMetrics.vue b/src/views/Tools/TopicMetrics.vue
index 7b96a660b..e8e7468b8 100644
--- a/src/views/Tools/TopicMetrics.vue
+++ b/src/views/Tools/TopicMetrics.vue
@@ -132,7 +132,7 @@
           <el-button size="mini" @click="resetTopic(row)">{{
             $t("Base.reset")
           }}</el-button>
-          <el-button size="mini" type="danger" plain @click="deleteTopic(row)">
+          <el-button size="mini" type="danger" @click="deleteTopic(row)">
             {{ $t("Base.delete") }}
           </el-button>
         </template>
@@ -153,7 +153,7 @@
       </el-form>
       <template #footer>
         <div class="dialog-align-footer">
-          <el-button plain size="small" @click="addVisible = false">{{
+          <el-button size="small" @click="addVisible = false">{{
             $t("Base.cancel")
           }}</el-button>
           <el-button type="primary" size="small" @click="addTopic()">{{
diff --git a/src/views/Tools/WebSocket.vue b/src/views/Tools/WebSocket.vue
index 4a82354f1..9c4e97b08 100644
--- a/src/views/Tools/WebSocket.vue
+++ b/src/views/Tools/WebSocket.vue
@@ -113,21 +113,21 @@ export default {
         });
         this.activeTab = name;
       } else {
-        const ins = this.$refs[targetName] && this.$refs[targetName][0];
+        const ins = this.$refs[targetName];
         if (!ins) {
           return;
         }
-        if (ins.client && ins.client.connected) {
-          ins.client.end();
-        }
-        this.tabs.forEach((tab, index) => {
-          if (tab.name === targetName) {
-            const nextTab = this.tabs[index + 1] || this.tabs[index - 1];
-            if (nextTab) {
-              this.activeTab = nextTab.name;
+
+        if (this.activeTab === targetName) {
+          this.tabs.forEach((tab, index) => {
+            if (tab.name === targetName) {
+              const nextTab = this.tabs[index + 1] || this.tabs[index - 1];
+              if (nextTab) {
+                this.activeTab = nextTab.name;
+              }
             }
-          }
-        });
+          });
+        }
         this.tabs = this.tabs.filter(($) => $.name !== targetName);
       }
     },
diff --git a/src/views/Tools/components/WebSocketItem.vue b/src/views/Tools/components/WebSocketItem.vue
index fc3e2638c..92e4eb19a 100644
--- a/src/views/Tools/components/WebSocketItem.vue
+++ b/src/views/Tools/components/WebSocketItem.vue
@@ -98,7 +98,6 @@
         <el-button
           type="danger"
           size="small"
-          plain
           @click="destroyConnection"
           :disabled="
             compareConnStatus('MDISCONNECTING') ||
@@ -166,7 +165,6 @@
           <el-button
             size="mini"
             type="danger"
-            plain
             @click="unSubscribe(row)"
             :disabled="!compareConnStatus('MCONNECTED')"
           >
diff --git a/src/views/Topics/Topics.vue b/src/views/Topics/Topics.vue
index af7ce386a..cc3ba95a5 100644
--- a/src/views/Topics/Topics.vue
+++ b/src/views/Topics/Topics.vue
@@ -9,14 +9,16 @@
             :placeholder="$t('Topics.topic')"
           ></el-input>
         </el-col>
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          size="small"
-          @click="handleSearch"
-        >
-          {{ $t("Clients.search") }}
-        </el-button>
+        <el-col :span="8">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="small"
+            @click="handleSearch"
+          >
+            {{ $t("Clients.search") }}
+          </el-button>
+        </el-col>
       </el-row>
     </el-form>