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

src/views/monitor/topologyBuild/hooks/useEdge.ts

@@ -3,61 +3,61 @@ import { reactive, watch } from 'vue';
 import useI18n from '@/hooks/useI18n';
 import { graphG6 } from './useGraph';
 
-/**图边内置边类型 */
-export const edgeTypeOptions = [
-  {
-    value: 'line',
-    label: '直线，连接两个节点的直线',
-  },
-  {
-    value: 'polyline',
-    label: '折线，多段线段构成的折线，连接两个端点',
-  },
-  {
-    value: 'arc',
-    label: '圆弧线，连接两个节点的一段圆弧',
-  },
-  {
-    value: 'quadratic',
-    label: '二阶贝塞尔曲线，只有一个控制点的曲线',
-  },
-  {
-    value: 'cubic',
-    label: '三阶贝塞尔曲线，有两个控制点的曲线',
-  },
-  {
-    value: 'cubic-vertical',
-    label: '垂直方向的三阶贝塞尔曲线',
-  },
-  {
-    value: 'cubic-horizontal',
-    label: '水平方向的三阶贝塞尔曲线',
-  },
-  {
-    value: 'loop',
-    label: '自环',
-  },
-];
-
-/**图边标签文本位置 */
-export const edgePositionOptions = [
-  {
-    value: 'start',
-    label: '开头',
-  },
-  {
-    value: 'middle',
-    label: '中间',
-  },
-  {
-    value: 'end',
-    label: '末尾',
-  },
-];
-
 export default function useEdge() {
   const { t } = useI18n();
 
+  /**图边内置边类型 */
+  const edgeTypeOptions = [
+    {
+      value: 'line',
+      label: t('views.monitor.topologyBuild.edgeTypeLine'),
+    },
+    {
+      value: 'polyline',
+      label: t('views.monitor.topologyBuild.edgeTypePolyline'),
+    },
+    {
+      value: 'arc',
+      label: t('views.monitor.topologyBuild.edgeTypeArc'),
+    },
+    {
+      value: 'quadratic',
+      label: t('views.monitor.topologyBuild.edgeTypeQuadratic'),
+    },
+    {
+      value: 'cubic',
+      label: t('views.monitor.topologyBuild.edgeTypeCubic'),
+    },
+    {
+      value: 'cubic-vertical',
+      label: t('views.monitor.topologyBuild.edgeTypeCubicV'),
+    },
+    {
+      value: 'cubic-horizontal',
+      label: t('views.monitor.topologyBuild.edgeTypeCubicH'),
+    },
+    {
+      value: 'loop',
+      label: t('views.monitor.topologyBuild.edgeTypeLoop'),
+    },
+  ];
+
+  /**图边标签文本位置 */
+  const edgeLabelPositionOptions = [
+    {
+      value: 'start',
+      label: t('views.monitor.topologyBuild.edgeLabelPositionStart'),
+    },
+    {
+      value: 'middle',
+      label: t('views.monitor.topologyBuild.edgeLabelPositionMiddle'),
+    },
+    {
+      value: 'end',
+      label: t('views.monitor.topologyBuild.edgeLabelPositionEnd'),
+    },
+  ];
+
   /**图边信息状态类型 */
   type EdgeStateType = {
     /**图边原始数据 */
@@ -71,8 +71,8 @@ export default function useEdge() {
     origin: {},
     form: {
       id: '',
-      source: '',
-      target: '',
+      source: undefined,
+      target: undefined,
       type: 'polyline',
       style: {
         offset: 20,
@@ -100,10 +100,30 @@ export default function useEdge() {
   const edgeStateForm = Form.useForm(
     edgeState.form,
     reactive({
-      id: [{ required: true, message: '边唯一 ID' }],
-      source: [{ required: true, message: '起始点 id' }],
-      target: [{ required: true, message: '结束点 id' }],
-      type: [{ required: true, message: 'line' }],
+      id: [
+        {
+          required: true,
+          message: t('views.monitor.topologyBuild.edgeFormIdPlease'),
+        },
+      ],
+      source: [
+        {
+          required: true,
+          message: t('views.monitor.topologyBuild.edgeFormSourcePlease'),
+        },
+      ],
+      target: [
+        {
+          required: true,
+          message: t('views.monitor.topologyBuild.edgeFormTargetPlease'),
+        },
+      ],
+      type: [
+        {
+          required: true,
+          message: t('views.monitor.topologyBuild.edgeFormTypePlease'),
+        },
+      ],
     })
   );
 
@@ -113,6 +133,10 @@ export default function useEdge() {
     // 新增id是#不监听变化
     const edgeId = info.id;
     if (edgeId && edgeId !== '#') {
+      // 开始结束一样就自环
+      if (info.source === info.target) {
+        info.type = 'loop';
+      }
       graphG6.value.clearItemStates(edgeId, 'selected');
       graphG6.value.updateItem(edgeId, info);
     }
@@ -126,12 +150,16 @@ export default function useEdge() {
         const edge = JSON.parse(JSON.stringify(edgeState.form));
         if (!edge.id) {
           message.warn({
-            content: `边元素ID错误`,
-            duration: 2,
+            content: t('views.monitor.topologyBuild.edgeFormIdNot'),
+            duration: 3,
           });
           return false;
         }
 
+        // 开始结束一样就自环
+        if (edge.source === edge.target) {
+          edge.type = 'loop';
+        }
         // 存在更新，新增id是#不监听变化
         const item = graphG6.value.findById(edge.id);
         if (item) {
@@ -165,5 +193,12 @@ export default function useEdge() {
     edgeState.origin = {};
   }
 
-  return { edgeState, edgeStateForm, handleOkEdge, handleCancelEdge };
+  return {
+    edgeTypeOptions,
+    edgeLabelPositionOptions,
+    edgeState,
+    edgeStateForm,
+    handleOkEdge,
+    handleCancelEdge,
+  };
 }