feat: 拓扑编辑多语言函数处理

src/views/monitor/topology-build/hooks/useCombo.ts

@@ -1,7 +1,7 @@
 import { message, Form } from 'ant-design-vue/lib';
 import { reactive, watch } from 'vue';
 import { graphG6 } from './useGraph';
-import { number } from 'echarts';
+import useI18n from '@/hooks/useI18n';
 
 /**图分组内置类型 */
 export const comboTypeOptions = [
@@ -39,6 +39,9 @@ export const comboPositionOptions = [
   },
 ];
 
+export default function useCombo() {
+  const { t } = useI18n();
+
   /**图分组信息状态类型 */
   type ComboStateType = {
     /**图分组原始数据 */
@@ -48,7 +51,7 @@ type ComboStateType = {
   };
 
   /**图分组信息状态 */
-export let comboState: ComboStateType = reactive({
+  let comboState: ComboStateType = reactive({
     origin: {},
     form: {
       id: '',
@@ -76,7 +79,7 @@ export let comboState: ComboStateType = reactive({
   });
 
   /**图分组对话分组内表单属性和校验规则 */
-export const comboStateForm = Form.useForm(
+  const comboStateForm = Form.useForm(
     comboState.form,
     reactive({
       id: [{ required: true, message: '分组唯一标识 ID' }],
@@ -102,7 +105,7 @@ watch(comboState.form, combo => {
   });
 
   /**图分组类型输入限制 */
-export function handleComboTypeChange(type: any) {
+  function handleComboTypeChange(type: any) {
     // 类型尺寸和边距
     if (type === 'circle') {
       comboState.form.size = 30;
@@ -115,7 +118,7 @@ export function handleComboTypeChange(type: any) {
   }
 
   /**图分组新增或更新 */
-export function handleOkcombo() {
+  function handleOkcombo() {
     const combo = JSON.parse(JSON.stringify(comboState.form));
     if (!combo.id) {
       message.warn({
@@ -143,7 +146,7 @@ export function handleOkcombo() {
   }
 
   /**图分组取消还原 */
-export function handleCancelcombo() {
+  function handleCancelcombo() {
     const origin = JSON.parse(JSON.stringify(comboState.origin));
     if (origin.id) {
       const data = graphG6.value.save();
@@ -154,3 +157,12 @@ export function handleCancelcombo() {
       comboState.origin = {};
     }
   }
+
+  return {
+    comboState,
+    comboStateForm,
+    handleComboTypeChange,
+    handleOkcombo,
+    handleCancelcombo,
+  };
+}

src/views/monitor/topology-build/hooks/useEdge.ts

@@ -1,5 +1,6 @@
 import { message, Form } from 'ant-design-vue/lib';
 import { reactive, watch } from 'vue';
+import useI18n from '@/hooks/useI18n';
 import { graphG6 } from './useGraph';
 
 /**图边内置边类型 */
@@ -54,6 +55,9 @@ export const edgePositionOptions = [
   },
 ];
 
+export default function useEdge() {
+  const { t } = useI18n();
+
   /**图边信息状态类型 */
   type EdgeStateType = {
     /**图边原始数据 */
@@ -63,7 +67,7 @@ type EdgeStateType = {
   };
 
   /**图边信息状态 */
-export let edgeState: EdgeStateType = reactive({
+  let edgeState: EdgeStateType = reactive({
     origin: {},
     form: {
       id: '',
@@ -93,7 +97,7 @@ export let edgeState: EdgeStateType = reactive({
   });
 
   /**图边对话框内表单属性和校验规则 */
-export const edgeStateForm = Form.useForm(
+  const edgeStateForm = Form.useForm(
     edgeState.form,
     reactive({
       id: [{ required: true, message: '边唯一 ID' }],
@@ -107,14 +111,17 @@ export const edgeStateForm = Form.useForm(
   watch(edgeState.form, edge => {
     const info = JSON.parse(JSON.stringify(edge));
     const edgeId = info.id;
-  if (edgeId) {
+    if (edgeId && edgeId !== '#') {
       graphG6.value.clearItemStates(edgeId, 'selected');
       graphG6.value.updateItem(edgeId, info);
     }
   });
 
   /**图边新增或更新 */
-export function handleOkEdge() {
+  function handleOkEdge() {
+    return edgeStateForm
+      .validate()
+      .then(e => {
         const edge = JSON.parse(JSON.stringify(edgeState.form));
         if (!edge.id) {
           message.warn({
@@ -123,6 +130,8 @@ export function handleOkEdge() {
           });
           return false;
         }
+
+        debugger;
         // graphG6.value.removeItem(edge.id);
         // edge.id = `${edge.source}~${Date.now()}~${edge.target}`;
         // graphG6.value.addItem('edge', edge);
@@ -136,10 +145,18 @@ export function handleOkEdge() {
         edgeStateForm.resetFields();
         edgeState.origin = {};
         return true;
+      })
+      .catch(e => {
+        message.error(
+          t('common.errorFields', { num: e.errorFields.length }),
+          3
+        );
+        return false;
+      });
   }
 
   /**图边取消还原 */
-export function handleCancelEdge() {
+  function handleCancelEdge() {
     const origin = JSON.parse(JSON.stringify(edgeState.origin));
     if (origin.id) {
       graphG6.value.updateItem(origin.id, origin);
@@ -149,3 +166,6 @@ export function handleCancelEdge() {
       edgeState.origin = {};
     }
   }
+
+  return { edgeState, edgeStateForm, handleOkEdge, handleCancelEdge };
+}

src/views/monitor/topology-build/hooks/useGraph.ts

@@ -1,3 +1,4 @@
+import useI18n from '@/hooks/useI18n';
 import {
   Graph,
   GraphData,
@@ -9,6 +10,18 @@ import {
 } from '@antv/g6';
 import { ref } from 'vue';
 
+/**图模式选择项 */
+export const graphModeOptions = [
+  {
+    value: 'default',
+    label: '默认',
+  },
+  {
+    value: 'edit',
+    label: '编辑',
+  },
+];
+
 /**图实例对象 */
 export const graphG6 = ref<any>(null);
 
@@ -19,6 +32,13 @@ export const graphEvent = ref<{
   item: Item | null;
 }>();
 
+/**图模式选择项 */
+export const graphMode = ref<string>('default');
+
+export default function useGraph() {
+  //实例化i18n
+  const { t } = useI18n();
+
   /**图画布右击菜单 */
   const graphCanvasMenu = new Menu({
     offsetX: 6,
@@ -36,12 +56,26 @@ const graphCanvasMenu = new Menu({
         <div id="show" style="cursor: pointer; margin-bottom: 2px">
           1. 显示所有隐藏项
         </div>
+        <div id="create-node" style="cursor: pointer; margin-bottom: 2px">
+          2. 新增节点
+        </div>
+        <div id="create-edge" style="cursor: pointer; margin-bottom: 2px">
+          3. 新增边
+        </div>
+        <div id="create-combo" style="cursor: pointer; margin-bottom: 2px">
+          4. 新增分组
+        </div>
       </div>`;
     },
     handleMenuClick(target, item) {
       console.log(target, item);
       const targetId = target.id;
       switch (targetId) {
+        case 'create-node':
+        case 'create-edge':
+        case 'create-combo':
+          graphEvent.value = { type: `canvas-${targetId}`, target, item };
+          break;
         case 'show':
           // 显示节点
           graphG6.value.getNodes().forEach((node: any) => {
@@ -57,7 +91,7 @@ const graphCanvasMenu = new Menu({
               graphG6.value.refreshItem(edge);
             }
           });
-        // 显示框
+          // 显示分组
           graphG6.value.getCombos().forEach((combo: any) => {
             if (!combo.isVisible()) {
               graphG6.value.showItem(combo);
@@ -279,10 +313,10 @@ function fnGraphEvent(graph: Graph) {
   }
 
   /**图元素选择开始结束点 */
-export const selectSourceTargetOptions = ref<Record<string, any>[]>([]);
+  const selectSourceTargetOptions = ref<Record<string, any>[]>([]);
 
-/**图元素选择嵌入框 */
+  /**图元素选择嵌入分组 */
-export const selectComboOptions = ref<Record<string, any>[]>([]);
+  const selectComboOptions = ref<Record<string, any>[]>([]);
 
   /**
    * 图元素选择开始结束点数据获取
@@ -298,7 +332,7 @@ function fnSelectSourceTargetOptionsData() {
         info,
       });
     });
-  // 框
+    // 分组
     selectComboOptions.value = [
       {
         value: '',
@@ -318,7 +352,7 @@ function fnSelectSourceTargetOptionsData() {
   }
 
   /**图数据渲染 */
-export function handleRanderGraph(container: HTMLElement, data: GraphData) {
+  function handleRanderGraph(container: HTMLElement, data: GraphData) {
     if (!container) return;
     const { clientHeight, clientWidth } = container;
 
@@ -418,7 +452,7 @@ export function handleRanderGraph(container: HTMLElement, data: GraphData) {
           },
         },
       },
-    // 全局框节点
+      // 全局分组节点
       defaultCombo: {
         type: 'rect', // Combo 类型
         size: [40, 40],
@@ -465,24 +499,17 @@ export function handleRanderGraph(container: HTMLElement, data: GraphData) {
     return graph;
   }
 
-/**图模式选择项 */
-export const graphModeOptions = [
-  {
-    value: 'default',
-    label: '默认',
-  },
-  {
-    value: 'edit',
-    label: '编辑',
-  },
-];
-
-/**图模式选择项 */
-export const graphMode = ref<string>('default');
-
   /**图模式改变 default | edit */
-export function handleChangeMode(value: any) {
+  function handleChangeMode(value: any) {
     console.log(value, JSON.parse(JSON.stringify(graphG6.value.save())));
     graphG6.value.setMode(value);
     graphMode.value = graphG6.value.getCurrentMode();
   }
+
+  return {
+    selectSourceTargetOptions,
+    selectComboOptions,
+    handleRanderGraph,
+    handleChangeMode,
+  };
+}

src/views/monitor/topology-build/hooks/useNode.ts

@@ -1,6 +1,7 @@
 import { message, Form } from 'ant-design-vue/lib';
 import { reactive, watch } from 'vue';
 import { graphG6 } from './useGraph';
+import useI18n from '@/hooks/useI18n';
 
 /**图节点内置边类型 */
 export const nodeTypeOptions = [
@@ -85,6 +86,9 @@ export const nodeImageOptions = [
   { value: '/svg/service_db.svg', label: '数据服务器' },
 ];
 
+export default function useNode() {
+  const { t } = useI18n();
+
   /**图节点信息状态类型 */
   type NodeStateType = {
     /**图节点原始数据 */
@@ -94,7 +98,7 @@ type NodeStateType = {
   };
 
   /**图节点信息状态 */
-export let nodeState: NodeStateType = reactive({
+  let nodeState: NodeStateType = reactive({
     origin: {},
     form: {
       id: '',
@@ -123,7 +127,7 @@ export let nodeState: NodeStateType = reactive({
   });
 
   /**图节点对话框内表单属性和校验规则 */
-export const nodeStateForm = Form.useForm(
+  const nodeStateForm = Form.useForm(
     nodeState.form,
     reactive({
       id: [{ required: true, message: '节点唯一 ID' }],
@@ -155,7 +159,7 @@ watch(nodeState.form, node => {
   });
 
   /**图节点类型输入限制 */
-export function handleNodeTypeChange(type: any) {
+  function handleNodeTypeChange(type: any) {
     // 设置图标属性
     if (['circle', 'ellipse', 'diamond', 'star', 'donut'].includes(type)) {
       const origin = nodeState.origin;
@@ -239,7 +243,7 @@ export function handleNodeTypeChange(type: any) {
   }
 
   /**图节点新增或更新 */
-export function handleOkNode() {
+  function handleOkNode() {
     const node = JSON.parse(JSON.stringify(nodeState.form));
     if (!node.id) {
       message.warn({
@@ -270,7 +274,7 @@ export function handleOkNode() {
   }
 
   /**图节点取消还原 */
-export function handleCancelNode() {
+  function handleCancelNode() {
     const origin = JSON.parse(JSON.stringify(nodeState.origin));
     if (origin.id) {
       graphG6.value.updateItem(origin.id, origin);
@@ -286,3 +290,12 @@ export function handleCancelNode() {
       nodeState.origin = {};
     }
   }
+
+  return {
+    nodeState,
+    nodeStateForm,
+    handleNodeTypeChange,
+    handleOkNode,
+    handleCancelNode,
+  };
+}