feat: translate keys

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"