feat: translate keys

src/locales/lang/en.ts

@@ -65,6 +65,13 @@ const msg = {
   divide: "Divide",
   convertToMilliseconds: "Convert Unix Timestamp(milliseconds)",
   convertToSeconds: "Convert Unix Timestamp(seconds)",
+  smooth: "Smooth",
+  showSymbol: "Show Symbol",
+  step: "Step",
+  showValues: "Show Values",
+  fontSize: "Font Size",
+  showBackground: "Show Background",
+  areaOpacity: "Area Opacity",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
@@ -260,8 +267,6 @@ const msg = {
   eventsParameters: "Event Parameters",
   eventDetail: "Event Detail",
   value: "Value",
-  tableHeader: "Header Names",
-  tableValues: "Table Values",
   show: "Show",
   hide: "Hide",
   statistics: "Statistics",

src/locales/lang/zh.ts

@@ -63,6 +63,13 @@ const msg = {
   divide: "除法",
   convertToMilliseconds: "转换Unix时间戳（毫秒）",
   convertToSeconds: "转换Unix时间戳（秒）",
+  smooth: "光滑的",
+  showSymbol: "显示符号",
+  step: "台阶",
+  showValues: "显示值",
+  fontSize: "字体大小",
+  showBackground: "显示背景",
+  areaOpacity: "透明度",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/views/dashboard/configuration/graph-styles/Area.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">Area Opacity</span>
+    <span class="label">{{ t("areaOpacity") }}</span>
     <el-slider
       class="bar-width"
       v-model="opacity"
@@ -31,6 +31,9 @@ limitations under the License. -->
 import { defineProps, ref, defineEmits } from "vue";
 import type { PropType } from "vue";
 import { AreaConfig } from "@/types/dashboard";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const props = defineProps({
   config: {

src/views/dashboard/configuration/graph-styles/Bar.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">Show Background</span>
+    <span class="label">{{ t("showBackground") }}</span>
     <el-switch
       v-model="showBackground"
       active-text="Yes"
@@ -27,6 +27,9 @@ limitations under the License. -->
 import { defineProps, ref, defineEmits } from "vue";
 import type { PropType } from "vue";
 import { BarConfig } from "@/types/dashboard";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const props = defineProps({
   config: {

src/views/dashboard/configuration/graph-styles/Card.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">Font Size</span>
+    <span class="label">{{ t("fontSize") }}</span>
     <el-slider
       class="slider"
       v-model="fontSize"
@@ -31,6 +31,9 @@ limitations under the License. -->
 import { defineProps, ref, defineEmits } from "vue";
 import type { PropType } from "vue";
 import { CardConfig } from "@/types/dashboard";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const props = defineProps({
   config: {

src/views/dashboard/configuration/graph-styles/Line.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">Smooth</span>
+    <span class="label">{{ t("smooth") }}</span>
     <el-switch
       v-model="smooth"
       active-text="Yes"
@@ -23,7 +23,7 @@ limitations under the License. -->
     />
   </div>
   <div>
-    <span class="label">Show Symbol</span>
+    <span class="label">{{ t("showSymbol") }}</span>
     <el-switch
       v-model="showSymbol"
       active-text="Yes"
@@ -32,7 +32,7 @@ limitations under the License. -->
     />
   </div>
   <div>
-    <span class="label">Step</span>
+    <span class="label">{{ t("step") }}</span>
     <el-switch
       v-model="step"
       active-text="Yes"
@@ -45,7 +45,9 @@ limitations under the License. -->
 import { defineProps, ref, defineEmits } from "vue";
 import type { PropType } from "vue";
 import { LineConfig } from "@/types/dashboard";
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
 const props = defineProps({
   config: {
     type: Object as PropType<LineConfig>,

src/views/dashboard/configuration/graph-styles/Table.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">Show Values</span>
+    <span class="label">{{ t("showValues") }}</span>
     <el-switch
       v-model="showTableValues"
       active-text="Yes"

src/views/dashboard/configuration/graph-styles/TopList.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">{{ $t("maxItemNum") }}</span>
+    <span class="label">{{ t("maxItemNum") }}</span>
     <el-input
       class="input"
       v-model="topN"