feat: 拓扑编辑页面多语言翻译

src/views/monitor/topologyBuild/index.vue

@@ -3,11 +3,7 @@ import { reactive, onMounted, ref, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import useI18n from '@/hooks/useI18n';
 import GraphEditModal from './components/GraphEditModal.vue';
-import useGraph, {
-  graphG6,
-  graphMode,
-  graphModeOptions,
-} from './/hooks/useGraph';
+import useGraph, { graphG6 } from './/hooks/useGraph';
 import {
   delGraphData,
   getGraphData,
@@ -17,7 +13,8 @@ import {
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { Form, Modal, message } from 'ant-design-vue/lib';
 const { t } = useI18n();
-const { handleRanderGraph, handleChangeMode } = useGraph();
+const { graphMode, graphModeOptions, handleRanderGraph, handleChangeMode } =
+  useGraph();
 
 /**图DOM节点实例对象 */
 const graphG6Dom = ref<HTMLElement | undefined>(undefined);
@@ -67,7 +64,7 @@ function fnGraphDataGroups(reload: boolean = false) {
       if (!graphState.group) {
         handleRanderGraph(graphG6Dom.value, graphState.data);
         message.warning({
-          content: '暂无图组数据，可使用【图模式-编辑】进行新增图组',
+          content: t('views.monitor.topologyBuild.noData'),
           duration: 5,
         });
       }
@@ -127,7 +124,7 @@ const modalStateFrom = Form.useForm(
     group: [
       {
         required: true,
-        message: '图组不能为空',
+        message: t('views.monitor.topologyBuild.groupPlease'),
       },
     ],
   })
@@ -149,14 +146,18 @@ function fnModalOk() {
         .then((res: any) => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success({
-              content: `保存图组【${from.group}】成功`,
+              content: t('views.monitor.topologyBuild.saveOk', {
+                group: from.group,
+              }),
               duration: 3,
             });
             fnGraphDataGroups(true);
             graphState.group = from.group;
           } else {
             message.error({
-              content: `保存图组【${from.group}】失败`,
+              content: t('views.monitor.topologyBuild.saveFail', {
+                group: from.group,
+              }),
               duration: 3,
             });
           }
@@ -186,8 +187,8 @@ function fnModalCancel() {
 function fnGraphDataSave() {
   modalState.form.group = graphState.group;
   modalState.type = 'save';
-  modalState.title = '图组信息保存';
-  modalState.visible = true;
+  (modalState.title = t('views.monitor.topologyBuild.saveTtite')),
+    (modalState.visible = true);
 }
 
 /**图组数据删除 */
@@ -195,13 +196,15 @@ function fnGraphDataDelete() {
   if (!graphState.group) {
     handleRanderGraph(graphG6Dom.value, graphState.data);
     message.warning({
-      content: '暂无图组数据，可使用【图模式-编辑】进行新增图组',
+      content: t('views.monitor.topologyBuild.noData'),
       duration: 5,
     });
   }
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: `确认要删除图组名为【${graphState.group}】的数据吗？`,
+    content: t('views.monitor.topologyBuild.delTip', {
+      group: graphState.group,
+    }),
     onOk() {
       const hide = message.loading({ content: t('common.loading') });
       delGraphData(graphState.group)
@@ -248,7 +251,10 @@ onMounted(() => {
       <a-form :model="graphState" name="graphState" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="4" :md="12" :xs="24">
-            <a-form-item label="图模式" name="graphMode">
+            <a-form-item
+              :label="t('views.monitor.topologyBuild.graphMode')"
+              name="graphMode"
+            >
               <a-select
                 :value="graphMode"
                 :options="graphModeOptions"
@@ -258,7 +264,10 @@ onMounted(() => {
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="图组" name="group ">
+            <a-form-item
+              :label="t('views.monitor.topologyBuild.graphGroup')"
+              name="group "
+            >
               <a-select
                 v-model:value="graphState.group"
                 :options="graphState.groupOptions"
@@ -275,7 +284,10 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <div class="button-container" style="margin-bottom: -12px">
-          <span>图组名：{{ graphState.group }}</span>
+          <span>
+            {{ t('views.monitor.topologyBuild.graphGroup') }}：
+            {{ graphState.group }}
+          </span>
         </div>
       </template>
 
@@ -287,7 +299,7 @@ onMounted(() => {
               <template #icon>
                 <SaveOutlined />
               </template>
-              保存
+              {{ t('views.monitor.topologyBuild.graphSave') }}
             </a-button>
 
             <a-button
@@ -299,7 +311,7 @@ onMounted(() => {
               <template #icon>
                 <DeleteOutlined />
               </template>
-              删除
+              {{ t('views.monitor.topologyBuild.graphDelete') }}
             </a-button>
           </template>
         </div>
@@ -331,16 +343,16 @@ onMounted(() => {
         <a-row :gutter="16">
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
-              label="图组名"
+              :label="t('views.monitor.topologyBuild.graphGroup')"
               name="group"
               v-bind="modalStateFrom.validateInfos.group"
-              help="已存在图组名会更新图数据，不存在则新增图组"
+              :help="t('views.monitor.topologyBuild.graphGroupTip')"
             >
               <a-auto-complete
                 v-model:value="modalState.form.group"
                 :options="graphState.groupOptions"
                 allow-clear
-                placeholder="图组名"
+                :placeholder="t('views.monitor.topologyBuild.graphGroup')"
               />
             </a-form-item>
           </a-col>
@@ -353,7 +365,7 @@ onMounted(() => {
 <style lang="less" scoped>
 .chart {
   width: 100%;
-  height: calc(100vh - 300px);
+  height: calc(100vh - 380px);
   background-color: rgb(43, 47, 51);
 }
 </style>