refactor(multi-pages): adjust styling for el-puls

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",

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,18 +53,17 @@ 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();
         }
       }
     } else {
       if (!respSet.has(0)) {
-        // Message.error("Some error occurred");
+        M.error("Some error occurred");
         respSet.add(0);
       }
     }

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,89 +53,91 @@ 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);
       },
     },
   },
 
   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">

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");

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;