流程设计器接入国际化配置

src/components/gFlow/config.ts

@@ -1,9 +1,9 @@
 import LogicFlow from "@logicflow/core";
 import {DndPanel, SelectionSelect} from "@logicflow/extension";
-const setPatternItems = (lf:LogicFlow)=>{
+const setPatternItems = (lf:LogicFlow,t: (string)=> string)=>{
     (lf.extension.dndPanel as DndPanel).setPatternItems([
         {
-            label: '选区',
+            label: t('message.flowComponent.selectionArea'),
             icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
             callback: () => {
                 (lf.extension.selectionSelect as SelectionSelect).openSelectionSelect();
@@ -14,15 +14,15 @@ const setPatternItems = (lf:LogicFlow)=>{
         },
         {
             type: "start",
-            text: "开始",
-            label: "开始",
+            text: t('message.flowComponent.start'),
+            label: t('message.flowComponent.start'),
             icon:
                 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg=="
         },
         {
             type: "userTask",
-            label: "任务",
-            text: "任务",
+            label: t('message.flowComponent.task'),
+            text: t('message.flowComponent.task'),
             icon:
                 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==",
             className: "important-node",
@@ -32,35 +32,35 @@ const setPatternItems = (lf:LogicFlow)=>{
         },
 				{
 					type: "webHook",
-					label: "WebHook",
-					text: "WebHook",
+					label: t('message.flowComponent.webHook'),
+					text: t('message.flowComponent.webHook'),
 					icon:
 						"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAQFJREFUOE+tlAEOgjAMRcvJ1JOpJ1NPpj6yR7oxQAlLjA7bt9/+jiEOXsPBvPgFeI4IPq7bmogtIMnXL/BZIIIv6VnF3wK+I+KekgE/CgHobK0BVUcMYBZADgDazV0DUh6JKFEVQPYcsBuIItapfO9WSL5l2y8Va9JfPcxAy+MAlHYNIaHtg4p0FkX8zrOnQaqr/s/AXB4lCWkHmX2eS+Z0gmagM6cBuLw0BZYOCOAU2wLpjQG2hLLz1ctGzOayByTZ6+bM5dsC0Ll0pIgfWRmokuxgVU4BvUp/VV0Z1/aoLc+Ssgmqs3Rvz7jvNV1XCVwa4Ox0FbP1tum9UFafHQ78AN6aQxU2Y9bBAAAAAElFTkSuQmCC",
 					className: "web_hook"
 				},
         {
             type: "concurrent",
-            label: "并行网关",
+            label: t('message.flowComponent.parallelGateway'),
             icon:
                 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAADAElEQVRIidWWvYtdVRTFf2uf995EY4RggjxCEEkaiYjYJMiks0mho4hEbOIHYrAKBLFIY6Ex4F+QIpNqIE1MZyManIyQwgQbPyKx0SKiOI7Gj5l33znL4t43c2fee6ZK4YED955z9l57rX32vle2uZsj7qp3oAOwr78bobFNCWwYDDPdTkIg8AXQHPAPULb4+g1YA4rxu9/f+mWhc4cAnrJ5yPY5YUA7Qc8BN4CPgJ3NuRngG+AQMAcg9CSwDrAXeIJasgoQsGzzosRrnRQPAqeBv4EusACc2aDazMLlVnBr6xLJOor4YBqNTor3DEuYxVbEje/6kticc4mDwEsKzwP3rgOA50FXge3AoFn/wXBccALzJvIi6J7Gb+tyCOxDzvFqb/va8Wq194WLtimcWwAsA0sjEwPJIPtSSboC+rAJdFPOioUNKfS+oqzmSmclHm/DT0+yQGYx50LE5NscMrm4j3WYlM7nSkjsQBu1tWHpWk9hon4hp9QfDvPe0gBuwhf0UjDTjVnjVGCBpLFzUwvNNnY+2ut2rwr2bK54Y4KBOgwVBySIXL7ShK4wkuhlxGmjGeAvIAG3wfcr1Me+CcwC19b1c8HDCvAuoRXQHzANwNxG3AQysNoIMgDts923+dHWz+OpKCD1KPxJKUNiXKIRg4vN3DpeEbzgujorYEd7U0U46QFUfhc5m8RWhOk5KODCAmJOopp4kULIfkzWdxEdpPF+VpuNrxOCBANMxQRDDEYPA/uFP9cE/f+TQdNfnja8NWm3dBIKHQNTwp+UmJTijRw8ChwBetRNKgy/luCIzPPY+8FvgNaa8ytIuOSTYS1G0Zdl1PAmAkiHqbtjm1HVKsjXQWeB6wCGr1UNnxG+rxSdihHjaQyM54U+BbZRN7sAfpI4WQpvGz+bpOuum+GyzDvAAYITEkt5s88yBtDIcmMcXxfBH9u+TAhMDzDiYBP0HtfMd9XEWAEeaYyjDTBtXBs9NGqtgD8DzQK3bB2j/jaMSEQzvzW+AqD//V/FvxL3LMIFg3D4AAAAAElFTkSuQmCC",
             className: "import_icon"
         },
         {
             type: "push",
-            label: "互斥网关",
+            label: t('message.flowComponent.exclusiveGateway'),
             icon:
-                "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAACYklEQVRIie2VT4iOURTGf899v4+RlIWUjRpGDaLURNmQhdjZWE1JWbGWZGdtZ2ErMVPKwkpJKcoQlkP+ZEooVsP8MYz33sfivu837zczUcxYOXXq7Zxzz3POc+65r2yznBKWNfu/AGgB9Pb2NkwmppVACzsdA44AknzT0hUn4VhgQ6sF7TaAiDFSxthV8vu3LzKAcBcAsCGZO4LtHat1BHwWtB/0qR6dlDMIVgM7gYfNDgJAcqhUJAds3QNvBz8HzoDPCcYx/YIHUlxRFCUQKcusyT4vaUTo8gKKYmo3TDoK2hJgzGgXeDZ3wDWkUfBmhfIoxCG7oCwLwChoY0XAcUkzxqc6HYjQUB2oiLqBNQvKJFrvgKe5iGIbrAAVSKDM01SD5ZNClzoAdkPhRxUVwNTjUTB0fEQWSj3euzVI09iU+nBrEV9tS4v4ciHotAiD81GXTGxvAw8DfXMAWlKMVdXz82YOoKuEvwZIzTwdAEl5XaC9yKE/llCBXQW/RlqL9GQpAVoAQe5LVp9II6CXv4gv5j7FPD69MKYCKAKHYqn7kneCt87PKtVMupUH6KlMtWjckOkqugu1XrQvwG7gWcO3qj4cy6+kOE2Ks4/yw6b+TnKJEEAwkJsoR6Eka/MWme8WexFjuWomQhASzMxMMzU1ycy3rxclYXQCwuF83Ng+brEHwqtE+3GiRap2cv62ThgGJA4K3S5kHMSaNeuIMSLpnZ0GgSHgFvgD0DZaj9NHu2cfqSc1F717DzJ744LrwGdn+kgpYifsBDAs2AFcI2eaBF8Q3oT5mJO4k0z/f/q/k590kAk0S7XKDgAAAABJRU5ErkJggg=="
+                "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAACYklEQVRIie2VT4iOURTGf999v4+RlIWUjRpGDaLURNmQhdjZWE1JWbGWZGdtZ2ErMVPKwkpJKcoQlkP+ZEooVsP8MYz33sfivu837zczUcxYOXXq7Zxzz3POc+65r2yznBKWNfu/AGgB9Pb2NkwmppVACzsdA44AknzT0hUn4VhgQ6sF7TaAiDFSxthV8vu3LzKAcBcAsCGZO4LtHat1BHwWtB/0qR6dlDMIVgM7gYfNDgJAcqhUJAds3QNvBz8HzoDPCcYx/YIHUlxRFCUQKcusyT4vaUTo8gKKYmo3TDoK2hJgzGgXeDZ3wDWkUfBmhfIoxCG7oCwLwChoY0XAcUkzxqc6HYjQUB2oiLqBNQvKJFrvgKe5iGIbrAAVSKDM01SD5ZNClzoAdkPhRxUVwNTjUTB0fEQWSj3euzVI09iU+nBrEV9tS4v4ciHotAiD81GXTGxvAw8DfXMAWlKMVdXz82YOoKuEvwZIzTwdAEl5XaC9yKE/llCBXQW/RlqL9GQpAVoAQe5LVp9II6CXv4gv5j7FPD69MKYCKAKHYqn7kneCt87PKtVMupUH6KlMtWjckOkqugu1XrQvwG7gWcO3qj4cy6+kOE2Ks4/yw6b+TnKJEEAwkJsoR6Eka/MWme8WexFjuWomQhASzMxMMzU1ycy3rxclYXQCwuF83Ng+brEHwqtE+3GiRap2cv62ThgGJA4K3S5kHMSaNeuIMSLpnZ0GgSHgFvgD0DZaj9NHu2cfqSc1F717DzJ744LrwGdn+kgpYifsBDAs2AFcI2eaBF8Q3oT5mJO4k0z/f/q/k590kAk0S7XKDgAAAABJRU5ErkJggg=="
         },
         {
             type: "condition",
-            label: "条件网关",
+            label: t('message.flowComponent.conditionGateway'),
             icon:
                 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAABlUlEQVRIibXWv2oUURQG8N9KCATRFEFNEf9AEixSBDVBsLDIC6QTUqSxSSXYCSGpQh7AykIfIFZ2CnaJYCOIWNgohJAUFoLNSohkvRZ7huwOs7MzYffAcOac+93vmzvnnjvTSCkZpl0YKjuklFRYxRR+InVcDyrxVhT4FKR3cANHaOLioAQSXnfEK5G7NyiBH2jhFq7iSwhcGpTAorN3fxJ+uWxCXQHx9H+CfLEf+DwC8Bl/qwAz3rp9MIpGnQl1BU5r4o0U5MawoV3E8dzYVPjDXP4Ye3iq3R+lAqtYj/uj3NgH7RrczuWnMYsDbPUTmAw/h28F470sYT6fLKpBtkuOa5Bn1qoi8Ct8s2Csn/2uIpCdkvdrEF8Pf1d+G+ca7b3u42CzAvmjwP4L/x2Xizp5OwCruIZ3EU+XkI8F5jBW8TDiN0UCJ7qLNBLgtRKB2cCsdOT20SoSeBngJUzgRcRzJQLjgfmIK5iJeLfXYfdV92fxeQl5Zk9yc5q42UtgEq+0i/2sAnlmj/EWO1jgjLcx7N+W/0Nx+IW0B+PQAAAAAElFTkSuQmCC"
         },
         {
             type: "end",
-            text: "结束",
-            label: "结束",
+            text: t('message.flowComponent.end'),
+            label: t('message.flowComponent.end'),
             icon:
                 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC"
         }

src/i18n/pages/flow/component/en.ts

@@ -128,5 +128,15 @@ export default {
 
 	// showDesign.vue
 	setNodeProps: 'Set Node Properties',
+
+	// config.ts
+	selectionArea: 'Selection Area',
+	start: 'Start',
+	task: 'Task',
+	webHook: 'WebHook',
+	parallelGateway: 'Parallel Gateway',
+	exclusiveGateway: 'Exclusive Gateway',
+	conditionGateway: 'Condition Gateway',
+	end: 'End',
 }
 

src/i18n/pages/flow/component/zh-cn.ts

@@ -128,4 +128,14 @@ export default {
 
 	// showDesign.vue
 	setNodeProps: '设置节点属性',
+
+	// config.ts
+	selectionArea: '选区',
+	start: '开始',
+	task: '任务',
+	webHook: 'WebHook',
+	parallelGateway: '并行网关',
+	exclusiveGateway: '互斥网关',
+	conditionGateway: '条件网关',
+	end: '结束',
 }

src/i18n/pages/flow/component/zh-tw.ts

@@ -128,4 +128,14 @@ export default {
 
 		// showDesign.vue
 		setNodeProps: '設置節點屬性',
+
+		// config.ts
+		selectionArea: '選區',
+		start: '開始',
+		task: '任務',
+		webHook: 'WebHook',
+		parallelGateway: '並行網關',
+		exclusiveGateway: '互斥網關',
+		conditionGateway: '條件網關',
+		end: '結束',
 }

src/views/flow/flowModel/list/component/design.vue

@@ -20,7 +20,7 @@ import LogicFlow from '@logicflow/core'
 import { DndPanel, Menu, MiniMap, SelectionSelect, Snapshot } from '@logicflow/extension'
 import '@logicflow/core/lib/style/index.css'
 import '@logicflow/extension/lib/style/index.css'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import Control from '/@/components/gFlow/Control.vue'
 import { setPatternItems, setTheme } from '/@/components/gFlow/config'
 
@@ -49,7 +49,7 @@ import {
 import GraphConfigData = LogicFlow.GraphConfigData
 
 const route = useRoute()
-const { t } = useI18n()
+const { t,locale } = useI18n()
 const modelId = ref(0)
 const logicFlowContainerRef = ref()
 const lf = ref<LogicFlow>({} as LogicFlow)
@@ -100,11 +100,15 @@ const registerNode = () => {
 
 const initLF = () => {
 	const logicFlow = lf.value as LogicFlow
-	setPatternItems(logicFlow)
+	setPatternItems(logicFlow,t)
 	setTheme(logicFlow)
 	$_render()
 	$_LfEvent()
 }
+
+watch(locale,()=> {
+	setPatternItems(lf.value as LogicFlow,t)
+})
 const $_render = () => {
 	//获取节点数据
 	getNodeData(modelId.value).then((res: any) => {