refactor(dashboard): upgrade code to suit with vue 3

package.json

@@ -19,7 +19,7 @@
     "moment": "^2.29.1",
     "mqtt": "^4.2.8",
     "nprogress": "^0.2.0",
-    "vue": "^3.0.0",
+    "vue": "^3.2.13",
     "vue-i18n": "^9.2.0-beta.9",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
@@ -35,7 +35,6 @@
     "@vue/cli-plugin-unit-jest": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^2.0.0-0",

src/components/KeyAndValueEditor.vue

@@ -12,18 +12,22 @@
         ></el-input>
       </template>
     </el-table-column>
-    <el-table-column prop="value" :label="keyValueLabel.value" min-width="150px">
+    <el-table-column
+      prop="value"
+      :label="keyValueLabel.value"
+      min-width="150px"
+    >
       <template slot-scope="{ row }">
         <el-input v-model="row.value" @input="atInputChange"></el-input>
       </template>
     </el-table-column>
     <el-table-column width="60px">
       <a href="javascript:;" slot="header" class="btn" @click="addColumn">
-        {{ $t('Base.add') }}
+        {{ $t("Base.add") }}
       </a>
       <template slot-scope="{ row }">
         <a href="javascript:;" class="btn" @click="deleteItem(row)">
-          {{ $t('Base.delete') }}
+          {{ $t("Base.delete") }}
         </a>
       </template>
     </el-table-column>
@@ -32,17 +36,10 @@
 
 <script>
 export default {
-  name: 'KeyAndValueEditor',
-
-  components: {},
-
-  model: {
-    prop: 'value',
-    event: 'update',
-  },
+  name: "KeyAndValueEditor",
 
   props: {
-    value: {
+    modelValue: {
       type: Object,
       required: true,
     },
@@ -59,57 +56,57 @@ export default {
   data() {
     return {
       row: {
-        key: '',
-        value: '',
+        key: "",
+        value: "",
         state: 0, // 0 ok 1 error
       },
       tableData: [],
-    }
+    };
   },
 
   computed: {
     keyValueLabel() {
       if (this.customLabel === null) {
         return {
-          key: this.$t('components.key'),
-          value: this.$t('components.value'),
-        }
+          key: this.$t("components.key"),
+          value: this.$t("components.value"),
+        };
       }
-      return this.customLabel
+      return this.customLabel;
     },
   },
 
   created() {
-    const list = []
-    const d = this.value
+    const list = [];
+    const d = this.modelValue;
     Object.entries(d).forEach(([key, value]) => {
-      list.push({ key, value, state: 0 })
-    })
-    this.tableData = list
+      list.push({ key, value, state: 0 });
+    });
+    this.tableData = list;
   },
 
   methods: {
     atInputChange() {
-      const data = {}
+      const data = {};
       this.tableData.forEach((item) => {
-        const { key, value } = item
-        data[key] = value
-      })
-      this.$emit('update', data)
+        const { key, value } = item;
+        data[key] = value;
+      });
+      this.$emit("update:modelValue", data);
     },
     deleteItem(row) {
-      this.tableData = this.tableData.filter(($) => $.key !== row.key)
-      this.atInputChange()
+      this.tableData = this.tableData.filter(($) => $.key !== row.key);
+      this.atInputChange();
     },
     addColumn() {
       this.tableData.push({
-        key: '',
-        value: '',
+        key: "",
+        value: "",
         state: 0,
-      })
+      });
     },
   },
-}
+};
 </script>
 
 <style lang="scss">

src/hooks/Auth/useDatabaseConfig.js

@@ -1,16 +1,18 @@
 import { watch, reactive, ref, computed } from "vue";
+import { useRoute } from "vue-router";
 
 export default function useDatabaseConfig(
-  { database, value, authType },
+  { database, modelValue, authType },
   { emit }
 ) {
+  const route = useRoute();
   const defaultContent = ref("");
-  const databaseConfig = reactive(value);
+  const databaseConfig = reactive(modelValue);
   watch(databaseConfig, (value) => {
-    emit("update", value);
+    emit("update:modelValue", value);
   });
   const id = computed(function () {
-    const { id, type } = this.$route.params;
+    const { id, type } = route.params;
     return id || type;
   });
   const helpContent = ref("");

src/i18n/Auth.js

@@ -64,8 +64,8 @@ export default {
     en: "Database",
   },
   jwtDataSourceDesc: {
-    zh: "JWT 认证无需选择数据源，请继续下一步配置参数",
-    en: "JWT authentication does not need to select a backend, please continue to the next step to configure the parameters",
+    zh: "JWT 认证无需选择数据源，请继续下一步配置",
+    en: "JWT authentication does not need to select a backend, please continue to the next step of the configuration",
   },
   connect: {
     zh: "连接",
@@ -83,10 +83,14 @@ export default {
     zh: "自动重连",
     en: "Reconnect",
   },
-  authConfig: {
+  authnConfig: {
     zh: "认证配置",
     en: "Authentication configuration",
   },
+  authzConfig: {
+    zh: "权限配置",
+    en: "Authorization configuration",
+  },
   dataConfig: {
     zh: "数据管理",
     en: "Data Management",
@@ -259,4 +263,32 @@ export default {
     zh: "JWKS 刷新间隔（毫秒）",
     en: "JWKS Refresh Interval (ms)",
   },
+  builtInDatabaseDesc: {
+    zh: "Built-in database 权限无需配置参数，请点击创建按钮完成操作",
+    en: "Built-in database authorization does not require configuration parameters, please click the Create button to complete the operation",
+  },
+  permissionCount: {
+    zh: "权限条数",
+    en: "Number of permissions",
+  },
+  pleaseEnterClientID: {
+    zh: "请输入 Client ID",
+    en: "Please enter Client ID",
+  },
+  pleaseEnterUsername: {
+    zh: "请输入 Username",
+    en: "Please enter Username",
+  },
+  pleaseSelectPermission: {
+    zh: "请选择 permission",
+    en: "Please select permission",
+  },
+  pleaseSelectAction: {
+    zh: "请选择 Action",
+    en: "Please select action",
+  },
+  pleaseEnterTopic: {
+    zh: "请输入 Topic",
+    en: "Please enter topic",
+  },
 };

src/i18n/Base.js

@@ -247,4 +247,16 @@ export default {
     zh: '小时',
     en: 'Hour',
   },
+  up: {
+    zh: '上移',
+    en: 'Up',
+  },
+  down: {
+    zh: '下移',
+    en: 'Down',
+  },
+  setting: {
+    zh: '设置',
+    en: 'Setting',
+  },
 }