feat: use i18n

src/locales/lang/en.ts

@@ -17,6 +17,7 @@
 const msg = {
   generalService: "General Service",
   services: "Services",
+  service: "Service",
   traces: "Traces",
   metrics: "Metrics",
   serviceMesh: "Service Mesh",
@@ -43,8 +44,14 @@ const msg = {
   eventList: "Event List",
   databasePanel: "Database Panel",
   meshServicePanel: "Service Panel",
-  newDashboard: "New a dashboard",
+  newDashboard: "Create a new dashboard",
   dashboardEdit: "Edit the dashboard",
+  edit: "Edit",
+  delete: "Delete",
+  layer: "Layer",
+  endpoint: "Endpoint",
+  instance: "Instance",
+  create: "Create",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
@@ -71,9 +78,6 @@ const msg = {
   reload: "Reload",
   usermode: "User Mode",
   editmode: "Edit Mode",
-  currentService: "Current Service",
-  currentEndpoint: "Current Endpoint",
-  currentInstance: "Current Instance",
   currentVersion: "Current Version",
   currentPage: "Current Page",
   version: "Version",
@@ -109,8 +113,6 @@ const msg = {
   all: "All",
   success: "Success",
   error: "Error",
-  service: "Service",
-  instance: "Instance",
   endpoints: "Endpoints",
   cache: "Cache",
   global: "Global",
@@ -190,7 +192,6 @@ const msg = {
   noneParentService: "No Parent Service",
   serviceGroup: "Service Group",
   endpointFilter: "Endpoint Filter",
-  editConfig: "Edit Config",
   databaseView: "Database",
   browserView: "Browser",
   metricsView: "NOC - Network Operation Center",
@@ -257,6 +258,7 @@ const msg = {
   scope: "Scope",
   destService: "Destination Service",
   destServiceInstance: "Destination Service Instance",
+  destEndpoint: "Destination Endpoint",
   eventSource: "Event Source",
   modalTitle: "Inspection",
   selectRedirectPage: "Do you want to inspect Traces or Logs of %s service?",

src/locales/lang/zh.ts

@@ -45,6 +45,11 @@ const msg = {
   meshServicePanel: "服务面板",
   newDashboard: "新增仪表盘",
   dashboardEdit: "编辑仪表盘",
+  edit: "编辑",
+  delete: "删除",
+  layer: "层",
+  endpoint: "端点",
+  create: "新建",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
@@ -70,9 +75,6 @@ const msg = {
   reload: "刷新",
   usermode: "用户模式",
   editmode: "编辑模式",
-  currentService: "当前服务",
-  currentEndpoint: "当前端点",
-  currentInstance: "当前实例",
   currentVersion: "当前版本",
   currentPage: "当前页面",
   version: "版本",
@@ -190,7 +192,6 @@ const msg = {
   noneParentService: "不设置父服务",
   serviceGroup: "服务组",
   endpointFilter: "端点过滤器",
-  editConfig: "编辑",
   databaseView: "数据库视图",
   browserView: "浏览器视图",
   metricsView: "大屏视图",
@@ -255,6 +256,7 @@ const msg = {
   scope: "范围",
   destService: "终点服务",
   destServiceInstance: "终点实例",
+  destEndpoint: "终点端点",
   eventSource: "事件资源",
   modalTitle: "查看",
   selectRedirectPage: "查看 %s 服务的追踪或日志？",

src/views/dashboard/List.vue

@@ -40,17 +40,17 @@ limitations under the License. -->
       <el-table-column label="Operations">
         <template #default="scope">
           <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
-            View
+            {{ t("view") }}
           </el-button>
           <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
-            Edit
+            {{ t("edit") }}
           </el-button>
           <el-button
             size="mini"
             type="danger"
             @click="handleDelete(scope.$index, scope.row)"
           >
-            Delete
+            {{ t("delete") }}
           </el-button>
         </template>
       </el-table-column>

src/views/dashboard/New.vue

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="new-dashboard">
-    <h4>Create a new dashboard</h4>
+    <h4>{{ t("newDashboard") }}</h4>
     <div class="item">
-      <div class="label">Name</div>
+      <div class="label">{{ t("name") }}</div>
       <el-input
         size="small"
         v-model="state.name"
@@ -24,7 +24,7 @@ limitations under the License. -->
       />
     </div>
     <div class="item">
-      <div class="label">Layer</div>
+      <div class="label">{{ t("layer") }}</div>
       <el-select
         size="small"
         v-model="state.layer"
@@ -41,7 +41,7 @@ limitations under the License. -->
       </el-select>
     </div>
     <div class="item">
-      <div class="label">Entity</div>
+      <div class="label">{{ t("entityType") }}</div>
       <el-select
         size="small"
         v-model="state.entity"
@@ -58,7 +58,7 @@ limitations under the License. -->
       </el-select>
     </div>
     <div class="item" v-show="state.entity === EntityType[0].value">
-      <div class="label">Service</div>
+      <div class="label">{{ t("service") }}</div>
       <el-select
         size="small"
         v-model="state.service"
@@ -75,7 +75,7 @@ limitations under the License. -->
       </el-select>
     </div>
     <div class="item" v-show="state.entity === EntityType[2].value">
-      <div class="label">Service / Endpoint</div>
+      <div class="label">{{ t("service") }} / {{ t("endpoint") }}</div>
       <el-cascader
         v-model="state.serviceEndpoint"
         :options="SelectOpt"
@@ -86,7 +86,7 @@ limitations under the License. -->
       ></el-cascader>
     </div>
     <div class="item" v-show="state.entity === EntityType[3].value">
-      <div class="label">Service / Instance</div>
+      <div class="label">{{ t("service") }} / {{ t("instance") }}</div>
       <el-cascader
         v-model="state.serviceInstance"
         :options="SelectOpt"
@@ -97,7 +97,7 @@ limitations under the License. -->
       ></el-cascader>
     </div>
     <div class="item" v-show="state.entity === EntityType[4].value">
-      <div class="label">Destination Service</div>
+      <div class="label">{{ t("destService") }}</div>
       <el-select
         size="small"
         v-model="state.destService"
@@ -114,7 +114,9 @@ limitations under the License. -->
       </el-select>
     </div>
     <div class="item" v-show="state.entity === EntityType[5].value">
-      <span class="label">Destination Service / Endpoint</span>
+      <span class="label"
+        >{{ t("destService") }} / {{ t("destServiceInstance") }}</span
+      >
       <el-cascader
         v-model="state.destServiceEndpoint"
         :options="SelectOpt"
@@ -124,7 +126,9 @@ limitations under the License. -->
       ></el-cascader>
     </div>
     <div class="item" v-show="state.entity === EntityType[6].value">
-      <span class="label">Destination Service / Instance</span>
+      <span class="label">
+        {{ t("destService") }} / {{ t("destEndpoint") }}
+      </span>
       <el-cascader
         v-model="state.destServiceInstance"
         :options="SelectOpt"
@@ -135,13 +139,14 @@ limitations under the License. -->
     </div>
     <div class="btn">
       <el-button class="create" size="small" type="primary" @click="onCreate">
-        Create
+        {{ t("create") }}
       </el-button>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { reactive } from "vue";
+import { useI18n } from "vue-i18n";
 import router from "@/router";
 import {
   ElSelect,
@@ -153,6 +158,7 @@ import {
 import { useSelectorStore } from "@/store/modules/selectors";
 import { EntityType, SelectOpt, Options } from "./data";
 
+const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const props = {
   expandTrigger: "hover",