From 0c32364fa263cfc9beeb7ad17f0f36cba8f0c599 Mon Sep 17 00:00:00 2001
From: Rick <1450685+LinuxSuRen@users.noreply.github.com>
Date: Mon, 28 Aug 2023 10:12:07 +0800
Subject: [PATCH] feat: add more i18n for the UI elements (#188)

---
 console/atest-ui/src/App.vue                |  6 ++--
 console/atest-ui/src/locales/en.json        | 16 +++++++++-
 console/atest-ui/src/locales/zh.json        | 16 +++++++++-
 console/atest-ui/src/views/StoreManager.vue | 33 +++++++++++----------
 console/atest-ui/src/views/TestSuite.vue    |  4 +--
 5 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/console/atest-ui/src/App.vue b/console/atest-ui/src/App.vue
index a918b9da..a5f5aed6 100644
--- a/console/atest-ui/src/App.vue
+++ b/console/atest-ui/src/App.vue
@@ -306,7 +306,7 @@ const viewName = ref('')
     </el-container>
   </div>
 
-  <el-dialog v-model="dialogVisible" title="Create Test Suite" width="30%" draggable>
+  <el-dialog v-model="dialogVisible" :title="t('title.createTestSuite')" width="30%" draggable>
     <template #footer>
       <span class="dialog-footer">
         <el-form
@@ -314,7 +314,7 @@ const viewName = ref('')
           :model="testSuiteForm"
           ref="suiteFormRef"
           status-icon label-width="120px">
-          <el-form-item label="Location" prop="store">
+          <el-form-item :label="t('field.storageLocation')" prop="store">
             <el-select v-model="testSuiteForm.store" class="m-2"
               test-id="suite-form-store"
               filterable=true
@@ -328,7 +328,7 @@ const viewName = ref('')
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="Name" prop="name">
+          <el-form-item :label="t('field.name')" prop="name">
             <el-input v-model="testSuiteForm.name" test-id="suite-form-name" />
           </el-form-item>
           <el-form-item label="API" prop="api">
diff --git a/console/atest-ui/src/locales/en.json b/console/atest-ui/src/locales/en.json
index 34a19e48..6c831731 100644
--- a/console/atest-ui/src/locales/en.json
+++ b/console/atest-ui/src/locales/en.json
@@ -4,16 +4,30 @@
         "export": "Export",
         "new": "New",
         "submit": "Submit",
+        "edit": "Edit",
         "save": "Save",
         "delete": "Delete",
         "send": "Send",
         "toolbox": "Tool Box",
+        "refresh": "Refresh",
         "newtestcase": "New TestCase"
     },
+    "title": {
+        "createTestSuite": "Create Test Suite",
+        "createTestCase": "Create Test Case",
+        "createStore": "Create Store"
+    },
     "tip": {
         "filter": "Filter Keyword"
     },
     "field": {
-        "name": "Name"
+        "name": "Name",
+        "username": "Username",
+        "password": "Password",
+        "properties": "Properties",
+        "plugin": "Plugin",
+        "status": "Status",
+        "operations": "Operations",
+        "storageLocation": "Storage Location"
     }
 }
\ No newline at end of file
diff --git a/console/atest-ui/src/locales/zh.json b/console/atest-ui/src/locales/zh.json
index ba51c473..4ce08499 100644
--- a/console/atest-ui/src/locales/zh.json
+++ b/console/atest-ui/src/locales/zh.json
@@ -4,16 +4,30 @@
         "export": "导出",
         "new": "新建",
         "submit": "提交",
+        "edit": "编辑",
         "save": "保存",
         "delete": "删除",
         "send": "发送",
         "toolbox": "工具箱",
+        "refresh": "刷新",
         "newtestcase": "新建测试用例"
     },
+    "title": {
+        "createTestSuite": "创建测试用例集",
+        "createTestCase": "创建测试用例",
+        "createStore": "创建存储"
+    },
     "tip": {
         "filter": "过滤"
     },
     "field": {
-        "name": "名称"
+        "name": "名称",
+        "username": "用户名",
+        "password": "密码",
+        "properties": "属性",
+        "plugin": "插件",
+        "status": "状态",
+        "operations": "操作",
+        "storageLocation": "保存位置"
     }
 }
\ No newline at end of file
diff --git a/console/atest-ui/src/views/StoreManager.vue b/console/atest-ui/src/views/StoreManager.vue
index b63ce8f1..8b0fca62 100644
--- a/console/atest-ui/src/views/StoreManager.vue
+++ b/console/atest-ui/src/views/StoreManager.vue
@@ -4,6 +4,9 @@ import { reactive, ref } from 'vue'
 import { Edit, Delete } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { Pair } from './types'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const emptyStore = {
     kind: {},
@@ -135,11 +138,11 @@ function updateKeys() {
 <template>
     <div>Store Manager</div>
     <div>
-        <el-button type="primary" @click="addStore" :icon="Edit">New</el-button>
-        <el-button type="primary" @click="loadStores">Refresh</el-button>
+        <el-button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</el-button>
+        <el-button type="primary" @click="loadStores">{{t('button.refresh')}}</el-button>
     </div>
     <el-table :data="stores" style="width: 100%">
-      <el-table-column label="Name" width="180">
+      <el-table-column :label="t('field.name')" width="180">
         <template #default="scope">
           <el-input v-model="scope.row.name" placeholder="Name"/>
         </template>
@@ -151,14 +154,14 @@ function updateKeys() {
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="Plugin">
+      <el-table-column :label="t('field.plugin')">
         <template #default="scope">
           <div style="display: flex; align-items: center">
             <el-input v-model="scope.row.kind.url" placeholder="Plugin" />
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="Status" width="100">
+      <el-table-column :label="t('field.status')" width="100">
         <template #default="scope">
           <div style="display: flex; align-items: center">
             <el-text class="mx-1"
@@ -172,17 +175,17 @@ function updateKeys() {
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="Operations" width="220">
+      <el-table-column :label="t('field.operations')" width="220">
         <template #default="scope">
           <div style="display: flex; align-items: center" v-if="scope.row.name !== 'local'">
-            <el-button type="primary" @click="deleteStore(scope.row.name)" :icon="Delete">Delete</el-button>
-            <el-button type="primary" @click="editStore(scope.row.name)" :icon="Edit">Edit</el-button>
+            <el-button type="primary" @click="deleteStore(scope.row.name)" :icon="Delete">{{t('button.delete')}}</el-button>
+            <el-button type="primary" @click="editStore(scope.row.name)" :icon="Edit">{{t('button.edit')}}</el-button>
           </div>
         </template>
       </el-table-column>
     </el-table>
 
-    <el-dialog v-model="dialogVisible" title="Create Store" width="30%" draggable>
+    <el-dialog v-model="dialogVisible" :title="t('title.createStore')" width="30%" draggable>
       <template #footer>
       <span class="dialog-footer">
         <el-form
@@ -190,22 +193,22 @@ function updateKeys() {
           :model="storeForm"
           ref="storeFormRef"
           status-icon label-width="120px">
-          <el-form-item label="Name" prop="name">
+          <el-form-item :label="t('field.name')" prop="name">
             <el-input v-model="storeForm.name" test-id="store-form-name" />
           </el-form-item>
           <el-form-item label="URL" prop="url">
             <el-input v-model="storeForm.url" placeholder="http://foo" test-id="store-form-url" />
           </el-form-item>
-          <el-form-item label="Username" prop="username">
+          <el-form-item :label="t('field.username')" prop="username">
             <el-input v-model="storeForm.username" test-id="store-form-username" />
           </el-form-item>
-          <el-form-item label="Password" prop="password">
+          <el-form-item :label="t('field.password')" prop="password">
             <el-input v-model="storeForm.password" type="password" test-id="store-form-password" />
           </el-form-item>
-          <el-form-item label="Plugin" prop="plugin">
+          <el-form-item :label="t('field.plugin')" prop="plugin">
             <el-input v-model="storeForm.kind.url" test-id="store-form-plugin" />
           </el-form-item>
-          <el-form-item label="Properties" prop="properties">
+          <el-form-item :label="t('field.properties')" prop="properties">
             <el-table :data="storeForm.properties" style="width: 100%">
                 <el-table-column label="Key" width="180">
                     <template #default="scope">
@@ -227,7 +230,7 @@ function updateKeys() {
               @click="submitForm(storeFormRef)"
               :loading="creatingLoading"
               test-id="store-form-submit"
-              >Submit</el-button
+              >{{t('button.submit')}}</el-button
             >
           </el-form-item>
         </el-form>
diff --git a/console/atest-ui/src/views/TestSuite.vue b/console/atest-ui/src/views/TestSuite.vue
index 0bdd2316..f1d52528 100644
--- a/console/atest-ui/src/views/TestSuite.vue
+++ b/console/atest-ui/src/views/TestSuite.vue
@@ -260,7 +260,7 @@ function paramChange() {
     <el-button type="primary" @click="convert" test-id="convert">{{ t('button.export') }}</el-button>
   </div>
 
-  <el-dialog v-model="dialogVisible" title="Create Test Case" width="40%" draggable>
+  <el-dialog v-model="dialogVisible" :title="t('title.createTestCase')" width="40%" draggable>
     <template #footer>
       <span class="dialog-footer">
         <el-form
@@ -270,7 +270,7 @@ function paramChange() {
           status-icon
           label-width="60px"
         >
-          <el-form-item label="Name" prop="name">
+          <el-form-item :label="t('field.name')" prop="name">
             <el-input v-model="testCaseForm.name" test-id="case-form-name"/>
           </el-form-item>
           <el-form-item label="Method" prop="method">