feat: add i18n items for UI (#338)

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

Author: LinuxSuRen

console/atest-ui/src/App.vue

@@ -12,6 +12,9 @@ import TestingPanel from './views/TestingPanel.vue'
 import StoreManager from './views/StoreManager.vue'
 import SecretManager from './views/SecretManager.vue'
 import WelcomePage from './views/WelcomePage.vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 import setAsDarkTheme from './theme'
 
@@ -70,19 +73,19 @@ const handleSelect = (key: string) => {
       >
         <el-menu-item index="welcome">
           <el-icon><share /></el-icon>
-          <template #title>Welcome</template>
+          <template #title>{{ t('title.welcome') }}</template>
         </el-menu-item>
         <el-menu-item index="testing" test-id="testing-menu">
           <el-icon><icon-menu /></el-icon>
-          <template #title>Testing</template>
+          <template #title>{{ t('title.testing' )}}</template>
         </el-menu-item>
         <el-menu-item index="secret">
           <el-icon><document /></el-icon>
-          <template #title>Secrets</template>
+          <template #title>{{ t('title.secrets') }}</template>
         </el-menu-item>
         <el-menu-item index="store">
           <el-icon><location /></el-icon>
-          <template #title>Stores</template>
+          <template #title>{{ t('title.stores') }}</template>
         </el-menu-item>
       </el-menu>
     </el-aside>

console/atest-ui/src/locales/en.json

@@ -25,11 +25,20 @@
         "protoContent": "Proto Content",
         "protoFile": "Proto File",
         "protoImport": "Proto Import",
-        "param": "Parameter",
-        "refelction": "Refelction"
+        "parameter": "Parameter",
+        "refelction": "Refelction",
+        "apiRequestParameter": "API Request Parameter",
+        "codeGenerator": "Code Generator",
+        "testing": "Testing",
+        "welcome": "Welcome",
+        "secrets": "Secrets",
+        "stores": "Stores",
+        "templateQuery": "Template Functions Query",
+        "output": "Output"
     },
     "tip": {
-        "filter": "Filter Keyword"
+        "filter": "Filter Keyword",
+        "noParameter": "No Parameter"
     },
     "field": {
         "name": "Name",
@@ -43,7 +52,9 @@
         "status": "Status",
         "operations": "Operations",
         "storageLocation": "Storage Location",
-        "suiteKind": "Suite Kind"
+        "suiteKind": "Suite Kind",
+        "key": "Key",
+        "value": "Value"
     },
     "//see http spec": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/403",
     "httpCode": {

console/atest-ui/src/locales/zh.json

@@ -8,20 +8,33 @@
         "save": "保存",
         "delete": "删除",
         "send": "发送",
+        "copy": "拷贝",
         "toolbox": "工具箱",
         "refresh": "刷新",
         "newtestcase": "新建测试用例",
-        "verify": "检查"
+        "verify": "检查",
+        "generateCode": "生成代码",
+        "sendWithParam": "参数化"
     },
     "title": {
         "createTestSuite": "创建测试用例集",
         "createTestCase": "创建测试用例",
         "createStore": "创建存储",
         "createSecret": "创建凭据",
-        "secretManager": "凭据管理"
+        "secretManager": "凭据管理",
+        "apiRequestParameter": "API 请求参数",
+        "codeGenerator": "代码生成",
+        "testing": "测试",
+        "welcome": "欢迎",
+        "secrets": "凭据",
+        "stores": "存储",
+        "parameter": "参数",
+        "templateQuery": "模板函数查询",
+        "output": "输出"
     },
     "tip": {
-        "filter": "过滤"
+        "filter": "过滤",
+        "noParameter": "无参数"
     },
     "field": {
         "name": "名称",
@@ -33,6 +46,9 @@
         "pluginURL": "插件地址",
         "status": "状态",
         "operations": "操作",
-        "storageLocation": "保存位置"
+        "storageLocation": "保存位置",
+        "suiteKind": "类型",
+        "key": "键",
+        "value": "值"
     }
 }

console/atest-ui/src/views/TemplateFunctions.vue

@@ -23,7 +23,7 @@ function queryFuncs() {
             data-intro="You can search your desired template functions.">{{ t('button.toolbox') }}</el-button>
     </el-affix>
 
-    <el-dialog v-model="dialogVisible" title="Template Functions Query" width="40%" draggable destroy-on-close>
+    <el-dialog v-model="dialogVisible" :title="t('title.templateQuery')" width="40%" draggable destroy-on-close>
         <template #footer>
             <el-input v-model="query" placeholder="Query after enter" v-on:keyup.enter="queryFuncs" />
             <span class="dialog-footer">
@@ -44,4 +44,4 @@ function queryFuncs() {
             </span>
         </template>
     </el-dialog>
-</template>
+</template>

console/atest-ui/src/views/TestCase.vue

@@ -692,7 +692,7 @@ const queryHeaderValues = (queryString: string, cb: (arg: any) => void) => {
 
       <el-drawer v-model="codeDialogOpened" size="50%">
         <template #header>
-          <h4>Code Generator</h4>
+          <h4>{{ t('title.codeGenerator') }}</h4>
         </template>
         <template #default>
           <div style="padding-bottom: 10px;">
@@ -718,16 +718,17 @@ const queryHeaderValues = (queryString: string, cb: (arg: any) => void) => {
 
       <el-drawer v-model="parameterDialogOpened">
         <template #header>
-          <h4>API Request Parameters</h4>
+          <h4>{{ t('title.apiRequestParameter') }}</h4>
         </template>
         <template #default>
-          <el-table :data="parameters" style="width: 100%">
-            <el-table-column label="Key" width="180">
+          <el-table :data="parameters" style="width: 100%"
+            :empty-text="t('tip.noParameter')">
+            <el-table-column :label="t('field.key')" width="180">
               <template #default="scope">
                 <el-input v-model="scope.row.key" placeholder="Key" @change="paramChange"/>
               </template>
             </el-table-column>
-            <el-table-column label="Value">
+            <el-table-column :label="t('field.value')">
               <template #default="scope">
                 <div style="display: flex; align-items: center">
                   <el-input v-model="scope.row.value" placeholder="Value" />
@@ -743,7 +744,7 @@ const queryHeaderValues = (queryString: string, cb: (arg: any) => void) => {
 
     <el-footer style="height: auto;">
       <el-tabs v-model="testResultActiveTab">
-        <el-tab-pane label="Output" name="output">
+        <el-tab-pane :label="t('title.output')" name="output">
           <el-tag class="ml-2" type="success" v-if="testResult.statusCode && testResult.error === ''">{{ t('httpCode.' + testResult.statusCode) }}</el-tag>
           <el-tag class="ml-2" type="danger" v-if="testResult.statusCode && testResult.error !== ''">{{ t('httpCode.' + testResult.statusCode) }}</el-tag>
 

console/atest-ui/src/views/TestSuite.vue

@@ -210,7 +210,7 @@ function paramChange() {
     <el-input class="mx-1" v-model="suite.spec.url" placeholder="API Spec URL"></el-input>
 
     <div>
-      <span>{{ t('title.param') }}</span>
+      <span>{{ t('title.parameter') }}</span>
       <el-table :data="suite.param" style="width: 100%">
         <el-table-column label="Key" width="180">
           <template #default="scope">

console/atest-ui/src/views/TestingPanel.vue

@@ -312,7 +312,7 @@ const suiteKinds = [{
               data-intro="Click here to import from Postman"
               test-id="open-import-suite-dialog">{{ t('button.import') }}</el-button>
             <el-button type="primary" @click="loadStores" :icon="Refresh">{{ t('button.refresh') }}</el-button>
-            <el-input v-model="filterText" placeholder="Filter keyword" test-id="search" style="padding: 5px;" />
+            <el-input v-model="filterText" :placeholder="t('tip.filter')" test-id="search" style="padding: 5px;" />
 
             <el-tree
               v-loading="storesLoading"