流程设计器和组件 国际化

src/components/gFlow/Control.vue

@@ -1,18 +1,18 @@
 <template>
   <div>
      <el-button-group>
-      <el-button  size="small" @click="$_zoomIn">放大</el-button>
-      <el-button  size="small" @click="$_zoomOut">缩小</el-button>
-      <el-button  size="small" @click="$_zoomReset">大小适应</el-button>
-      <el-button  size="small" @click="$_translateRest">定位还原</el-button>
-      <el-button  size="small" @click="$_reset">还原(大小&定位)</el-button>
-      <el-button  size="small" @click="$_undo" :disabled="undoDisable">上一步(ctrl+z)</el-button>
-      <el-button  size="small" @click="$_redo" :disabled="redoDisable">下一步(ctrl+y)</el-button>
-      <el-button  size="small" @click="$_download">下载图片</el-button>
-      <el-button  size="small" @click="$_catData">查看数据</el-button>
-      <el-button v-if="catTurboData"  size="small" @click="$_catTurboData">查看turbo数据</el-button>
-      <el-button  size="small" @click="$_showMiniMap">查看缩略图</el-button>
-      <el-button  size="small" @click="$_saveModel" type="success">保存模型</el-button>
+      <el-button  size="small" @click="$_zoomIn">{{ t('message.flowComponent.zoomIn') }}</el-button>
+      <el-button  size="small" @click="$_zoomOut">{{ t('message.flowComponent.zoomOut') }}</el-button>
+      <el-button  size="small" @click="$_zoomReset">{{ t('message.flowComponent.fitView') }}</el-button>
+      <el-button  size="small" @click="$_translateRest">{{ t('message.flowComponent.resetPosition') }}</el-button>
+      <el-button  size="small" @click="$_reset">{{ t('message.flowComponent.resetAll') }}</el-button>
+      <el-button  size="small" @click="$_undo" :disabled="undoDisable">{{ t('message.flowComponent.undo') }}</el-button>
+      <el-button  size="small" @click="$_redo" :disabled="redoDisable">{{ t('message.flowComponent.redo') }}</el-button>
+      <el-button  size="small" @click="$_download">{{ t('message.flowComponent.downloadImage') }}</el-button>
+      <el-button  size="small" @click="$_catData">{{ t('message.flowComponent.viewData') }}</el-button>
+      <el-button v-if="catTurboData"  size="small" @click="$_catTurboData">{{ t('message.flowComponent.viewTurboData') }}</el-button>
+      <el-button  size="small" @click="$_showMiniMap">{{ t('message.flowComponent.viewMiniMap') }}</el-button>
+      <el-button  size="small" @click="$_saveModel" type="success">{{ t('message.flowComponent.saveModel') }}</el-button>
     </el-button-group>
   </div>
 </template>
@@ -20,6 +20,7 @@
 import LogicFlow from "@logicflow/core";
 import {onMounted, ref} from "vue";
 import {MiniMap} from "@logicflow/extension";
+import { useI18n } from 'vue-i18n'
 
 
 const props = defineProps({
@@ -34,6 +35,7 @@ const undoDisable = ref(true)
 const redoDisable = ref(true)
 const graphData = ref()
 const dataVisible = ref(false)
+const { t } = useI18n()
 
 onMounted(()=>{
   props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {

src/components/gFlow/DataDialog.vue

@@ -6,6 +6,7 @@
 <script setup lang="ts">
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
+import { useI18n } from 'vue-i18n'
 
 defineProps({
   graphData:{
@@ -15,6 +16,7 @@ defineProps({
     }
   }
 })
+useI18n()
 </script>
 <style scoped>
 </style>

src/components/gFlow/checkFlow.vue

@@ -1,62 +1,62 @@
 <template>
 	<div class="check-flow-container">
 		<!--发起工作流-->
-		<el-dialog title="发起审批" v-model="startWfOpen" width="500px" append-to-body :close-on-click-modal="false" destroy-on-close>
+		<el-dialog :title="t('message.flowComponent.startApproval')" v-model="startWfOpen" width="500px" append-to-body :close-on-click-modal="false" destroy-on-close>
 			<el-form ref="wfStartFormRef" :model="wfStartForm" :rules="wfStartRules" label-width="120px">
-				<el-form-item label="项目名称" prop="title">
+				<el-form-item :label="t('message.flowComponent.projectName')" prop="title">
 					<el-input v-model="startWfTitle" disabled />
 				</el-form-item>
-				<el-form-item label="选择工作流" prop="wfId">
+				<el-form-item :label="t('message.flowComponent.selectWorkflow')" prop="wfId">
 					<el-select v-model="wfStartForm.wfId" @change="setSelectedFlow" clearable>
 						<el-option v-for="item in wfOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
 					</el-select>
 				</el-form-item>
-				<el-form-item label="流程图" v-if="wfStartForm.wfId && wfStartForm.wfId !== '0'">
+				<el-form-item :label="t('message.flowComponent.flowChart')" v-if="wfStartForm.wfId && wfStartForm.wfId !== '0'">
 					<el-link type="primary" :underline="false" @click="showFlowDesign(wfStartForm.wfId, 0, 'start')"
-						>点击查看 {{ selectedFlow }} 的流程图</el-link
+						>{{ t('message.flowComponent.clickToViewFlowChart', { name: selectedFlow }) }}</el-link
 					>
 				</el-form-item>
-				<el-form-item label="紧急程度" prop="newType">
+				<el-form-item :label="t('message.flowComponent.urgency')" prop="newType">
 					<el-select v-model="wfStartForm.newType">
 						<el-option v-for="item in flow_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
 					</el-select>
 				</el-form-item>
-				<el-form-item label="审核意见" prop="checkCon">
+				<el-form-item :label="t('message.flowComponent.reviewOpinion')" prop="checkCon">
 					<el-input v-model="wfStartForm.checkCon" />
 				</el-form-item>
 			</el-form>
 			<div slot="footer" class="dialog-footer">
-				<el-button type="primary" @click="submitWfStart">确 定</el-button>
-				<el-button @click="cancelWfStart">取 消</el-button>
+				<el-button type="primary" @click="submitWfStart">{{ t('message.flowComponent.confirm') }}</el-button>
+				<el-button @click="cancelWfStart">{{ t('message.flowComponent.cancel') }}</el-button>
 			</div>
-			<el-dialog title="流程图" v-model="isShowFlowDesignStart" @opened="showFlowDesignOpen" width="90%" append-to-body destroy-on-close>
+			<el-dialog :title="t('message.flowComponent.flowChart')" v-model="isShowFlowDesignStart" @opened="showFlowDesignOpen" width="90%" append-to-body destroy-on-close>
 				<ShowFlowDesign ref="showFlowDesignRef" />
 			</el-dialog>
 		</el-dialog>
 		<!--流程审批-->
-		<el-dialog title="流程审批" v-model="checkWfOpen" width="900px" append-to-body :close-on-click-modal="false" destroy-on-close>
+		<el-dialog :title="t('message.flowComponent.processApproval')" v-model="checkWfOpen" width="900px" append-to-body :close-on-click-modal="false" destroy-on-close>
 			<el-form ref="wfCheckFormRef" :model="wfCheckForm" :rules="wfCheckRules" label-width="120px">
-				<el-form-item label="项目名称" prop="title">
+				<el-form-item :label="t('message.flowComponent.projectName')" prop="title">
 					<el-input v-model="checkWfTitle" disabled />
 				</el-form-item>
-				<el-form-item label="审批意见" prop="checkCon">
+				<el-form-item :label="t('message.flowComponent.approvalOpinion')" prop="checkCon">
 					<el-input v-model="wfCheckForm.checkCon" type="textarea" :rows="3" />
 				</el-form-item>
-				<el-form-item label="流程图">
-					<el-button @click="showFlowDesign(flowId, processId, 'check')" type="success" plain>点击查看流程图</el-button>
+				<el-form-item :label="t('message.flowComponent.flowChart')">
+					<el-button @click="showFlowDesign(flowId, processId, 'check')" type="success" plain>{{ t('message.flowComponent.clickToViewFlowChartBtn') }}</el-button>
 				</el-form-item>
-				<el-form-item label="下一步骤" prop="nextStep" v-show="nextProcess && !backProcess">
+				<el-form-item :label="t('message.flowComponent.nextStep')" prop="nextStep" v-show="nextProcess && !backProcess">
 					<template v-if="checkFlowInfo.nodeInfo && checkFlowInfo.nodeInfo.nextNode.length > 0">
 						<el-tag v-for="(item, index) in checkFlowInfo.nodeInfo.nextNode" :key="'nextStep_' + index"
 							>{{ item.nodeText.value }}【{{ item.todo.join('，') }}】</el-tag
 						>
 					</template>
 					<template v-else>
-						<el-tag>审批完成</el-tag>
+						<el-tag>{{ t('message.flowComponent.approvalCompleted') }}</el-tag>
 					</template>
 				</el-form-item>
-				<el-form-item label="回退步骤" v-if="backProcess" prop="wfBackFlow">
-					<el-select placeholder="请选择回退步骤" v-model="wfCheckForm.wfBackFlow">
+				<el-form-item :label="t('message.flowComponent.rollbackStep')" v-if="backProcess" prop="wfBackFlow">
+					<el-select :placeholder="t('message.flowComponent.selectRollbackStep')" v-model="wfCheckForm.wfBackFlow">
 						<template v-if="checkFlowInfo">
 							<el-option
 								v-for="item of checkFlowInfo.preprocess"
@@ -67,20 +67,20 @@
 						</template>
 					</el-select>
 				</el-form-item>
-				<el-form-item label="附件">
+				<el-form-item :label="t('message.flowComponent.attachment')">
 					<upload-file :action="baseURL + 'api/v1/system/upload/singleFile'" v-model="upFileInfo" @upFileData="upFile" :limit="1"></upload-file>
 				</el-form-item>
 			</el-form>
 			<div slot="footer" class="dialog-footer">
-				<el-button v-show="doCheck && !doBack" type="primary" @click="submitWfCheck('ok')">提交审批</el-button>
-				<el-button type="danger" v-if="checkFlowInfo?.nodeInfo?.rollback === 1" @click="submitWfCheck('back')">回 退</el-button>
-				<el-button type="info" @click="checkLogs">审批记录</el-button>
+				<el-button v-show="doCheck && !doBack" type="primary" @click="submitWfCheck('ok')">{{ t('message.flowComponent.submitApproval') }}</el-button>
+				<el-button type="danger" v-if="checkFlowInfo?.nodeInfo?.rollback === 1" @click="submitWfCheck('back')">{{ t('message.flowComponent.rollback') }}</el-button>
+				<el-button type="info" @click="checkLogs">{{ t('message.flowComponent.approvalRecords') }}</el-button>
 			</div>
-			<el-dialog title="流程图" v-model="isShowFlowDesignCheck" @opened="showFlowCheckingOpen" width="90%" append-to-body destroy-on-close>
+			<el-dialog :title="t('message.flowComponent.flowChart')" v-model="isShowFlowDesignCheck" @opened="showFlowCheckingOpen" width="90%" append-to-body destroy-on-close>
 				<ShowFlowDesign ref="showFlowCheckRef" />
 			</el-dialog>
 		</el-dialog>
-		<el-drawer v-model="showLog" title="审批记录" direction="rtl" @opened="showLogs" destroy-on-close>
+		<el-drawer v-model="showLog" :title="t('message.flowComponent.approvalRecords')" direction="rtl" @opened="showLogs" destroy-on-close>
 			<FlowLog ref="flowLogRef" :form-id="runInfo?.formId" :form-table="runInfo?.formTable" />
 		</el-drawer>
 	</div>
@@ -94,6 +94,7 @@ import { getCheckData, saveCheckWf, saveStartWf, wfStart } from '/@/api/flow/flo
 import ShowFlowDesign from '/@/components/gFlow/showDesign.vue'
 import UploadFile from '/@/components/upload/uploadFile.vue'
 import FlowLog from '/@/components/gFlow/flowLog.vue'
+import { useI18n } from 'vue-i18n'
 const props = defineProps({
 	saveCheckWfAttr: {
 		type: Function,
@@ -107,9 +108,10 @@ const startWfTitle = ref('')
 const wfStartForm = ref<wfStartFormData>({} as wfStartFormData)
 const showFlowDesignRef = ref()
 const showFlowCheckRef = ref()
+const { t } = useI18n()
 const wfStartRules = ref({
-	wfId: [{ required: true, message: '请选择工作流', trigger: 'change' }],
-	newType: [{ required: true, message: '请选择紧急程度', trigger: 'change' }],
+	wfId: [{ required: true, message: t('message.flowComponent.plsSelectWorkflow'), trigger: 'change' }],
+	newType: [{ required: true, message: t('message.flowComponent.plsSelectUrgency'), trigger: 'change' }],
 })
 const wfStartFormRef = ref<FormInstance>()
 const wfOptions = ref<Array<WfOptionsData>>([])
@@ -118,8 +120,8 @@ const isShowFlowDesignCheck = ref(false)
 const wfCheckForm = ref<WfCheckFormData>({} as WfCheckFormData)
 const checkWfOpen = ref(false)
 const wfCheckRules = ref({
-	checkCon: [{ required: true, message: '请填写审批意见', trigger: 'input' }],
-	wfBackFlow: [{ required: true, message: '请选择回退步骤', trigger: 'change' }],
+	checkCon: [{ required: true, message: t('message.flowComponent.plsFillApprovalOpinion'), trigger: 'input' }],
+	wfBackFlow: [{ required: true, message: t('message.flowComponent.selectRollbackStep'), trigger: 'change' }],
 })
 const wfCheckFormRef = ref()
 const designInfo = ref({})
@@ -167,7 +169,7 @@ const submitWfStart = () => {
 		if (valid) {
 			console.log(wfStartForm.value)
 			saveStartWf(wfStartForm.value).then((res: any) => {
-				ElMessage.success('发起成功')
+				ElMessage.success(t('message.flowComponent.startSuccess'))
 				startWfOpen.value = false
 				emit('getList')
 			})
@@ -180,7 +182,7 @@ const cancelWfStart = () => {
 const handleStartFlow = (row: FlowDemoTableColumns | null) => {
 	const btn = row?.actionBtn
 	if (btn.title.indexOf('无审批权限') > -1) {
-		ElMessage.error('您没有审批权限')
+		ElMessage.error(t('message.flowComponent.noPermission'))
 		return
 	}
 	switch (btn.type) {
@@ -286,7 +288,7 @@ const submitWfCheck = (type: string) => {
 	switch (type) {
 		case 'ok':
 			props.saveCheckWfAttr(wfCheckForm.value).then((response: any) => {
-				ElMessage.success('审批成功')
+				ElMessage.success(t('message.flowComponent.approvalSuccess'))
 				checkWfOpen.value = false
 				emit('getList')
 			})
@@ -295,11 +297,11 @@ const submitWfCheck = (type: string) => {
 			doBack.value = true
 			backProcess.value = true
 			if (!wfCheckForm.value.wfBackFlow) {
-				ElMessage.error('请选择回退步骤')
+				ElMessage.error(t('message.flowComponent.selectRollbackStep'))
 				return
 			}
 			props.saveCheckWfAttr(wfCheckForm.value).then((response: any) => {
-				ElMessage.success('回退成功')
+				ElMessage.success(t('message.flowComponent.rollbackSuccess'))
 				checkWfOpen.value = false
 				emit('getList')
 			})

src/components/gFlow/flowLog.vue

@@ -4,7 +4,7 @@
       <el-timeline-item
           v-for="(activity, index) in activities"
           :key="index"
-          :type="activity.btn=='流程回退'||activity.btn=='退回修改'?'danger':'success'"
+          :type="activity.btn==t('message.flowComponent.flowRollback')||activity.btn==t('message.flowComponent.returnForModification')?'danger':'success'"
           size="large"
           hide-timestamp
       >
@@ -12,19 +12,19 @@
           <h4>{{activity.nodeName}}：{{activity.createdAt}}</h4>
           <div style="margin-top: 5px;">
             <div>
-              <span style="color: #999;">审批意见：</span>
+              <span style="color: #999;">{{ t('message.flowComponent.approvalOpinion') }}：</span>
               <span>{{activity.content}}</span>
             </div>
             <div>
-              <span style="color: #999;">审批人：</span>
+              <span style="color: #999;">{{ t('message.flowComponent.approver') }}：</span>
               <span>{{activity.approvalUser?.userNickname}}</span>
             </div>
             <div>
-              <span style="color: #999;">审批操作：</span>
+              <span style="color: #999;">{{ t('message.flowComponent.approvalAction') }}：</span>
               <span>{{activity.btn}}</span>
             </div>
             <div v-if="activity.art && activity.art.length>0">
-              <span style="color: #999;">附件：</span>
+              <span style="color: #999;">{{ t('message.flowComponent.attachment') }}：</span>
               <el-link v-for="(file,fi) in activity.art" :key="fi" :href="proxy.getUpFileUrl(file.url)" target="_blank" type="primary">{{file.name}}</el-link>
             </div>
           </div>
@@ -41,7 +41,7 @@
     />
   </template>
   <template v-else>
-    <el-empty description="没有数据" />
+    <el-empty :description="t('message.flowComponent.noData')" />
   </template>
 </template>
 
@@ -49,6 +49,7 @@
   import {FlowLogData} from "/@/components/gFlow/model";
   import {checkLog} from "/@/api/flow/flowModel";
   import {getCurrentInstance, ref} from "vue";
+  import { useI18n } from 'vue-i18n'
 
   const {proxy} = <any>getCurrentInstance();
   const props = defineProps({
@@ -71,6 +72,7 @@
     }
   })
   const activities = ref<FlowLogData[]>()
+  const { t } = useI18n()
 
   const getLogList = ()=>{
     checkLog(tableData.value.param).then((response:any)=>{

src/components/gFlow/propertySetting/CommonProperty.vue

@@ -1,37 +1,37 @@
 <template>
 	<div>
 		<el-form label-width="130px" :model="formData">
-			<el-form-item label="节点名称">
+			<el-form-item :label="t('message.flowComponent.nodeName')">
 				<el-input v-model="formData.text" :disabled="readonly"></el-input>
 			</el-form-item>
 			<template v-if="nodeType !== NodeTypeWebHook">
-				<el-form-item label="审核方式" v-if="nodeType === NodeTypeStart">
-					<el-select v-model="formData.actionRule" placeholder="请选择审核方式" clearable :disabled="readonly">
+				<el-form-item :label="t('message.flowComponent.reviewMethod')" v-if="nodeType === NodeTypeStart">
+					<el-select v-model="formData.actionRule" :placeholder="t('message.flowComponent.pleaseSelectReviewMethod')" clearable :disabled="readonly">
 						<el-option v-for="item in actionRuleOption" :key="item.value" :label="item.label" :value="item.value" />
 					</el-select>
 				</el-form-item>
-				<el-form-item label="接收方式" v-else>
-					<el-select v-model="formData.actionRule" placeholder="请选择接收方式" clearable :disabled="readonly">
+				<el-form-item :label="t('message.flowComponent.receiveMethod')" v-else>
+					<el-select v-model="formData.actionRule" :placeholder="t('message.flowComponent.pleaseSelectReceiveMethod')" clearable :disabled="readonly">
 						<el-option v-for="item in actionRuleOption" :key="item.value" :label="item.label" :value="item.value" />
 					</el-select>
 				</el-form-item>
-				<el-form-item label="指定指派表达式" v-show="formData.actionRule == FlowCheckDynamicJudge">
+				<el-form-item :label="t('message.flowComponent.dynamicAssignExpr')" v-show="formData.actionRule == FlowCheckDynamicJudge">
 					<dynamic-judge-input v-model="formData.dynamicJudge" :readonly="readonly" />
 				</el-form-item>
 				<el-form-item
-					label="指定上级部门"
+					:label="t('message.flowComponent.assignUpperDept')"
 					v-show="formData.actionRule === FlowCheckRuleFormCreatorDeptPrev || formData.actionRule === FlowCheckRuleFormCreatorDeptLeaderPrev"
 				>
-					<el-input-number v-model="formData.deptProv" style="width: 200px" placeholder="Please input">
-						<template #prefix><span>上</span></template>
-						<template #suffix><span>级部门</span></template>
+					<el-input-number v-model="formData.deptProv" style="width: 200px" :placeholder="t('message.flowComponent.pleaseInput')">
+						<template #prefix><span>{{ t('message.flowComponent.upper') }}</span></template>
+						<template #suffix><span>{{ t('message.flowComponent.department') }}</span></template>
 					</el-input-number>
 				</el-form-item>
-				<el-form-item label="指定角色" v-show="formData.actionRule === FlowCheckRuleRole">
+				<el-form-item :label="t('message.flowComponent.assignRole')" v-show="formData.actionRule === FlowCheckRuleRole">
 					<el-cascader
 						:options="roleList"
 						:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name', multiple: true }"
-						placeholder="请选择角色"
+						:placeholder="t('message.flowComponent.pleaseSelectRole')"
 						clearable
 						class="w100"
 						v-model="formData.roleIds"
@@ -44,14 +44,14 @@
 					</el-cascader>
 				</el-form-item>
 				<el-form-item
-					label="指定部门"
+					:label="t('message.flowComponent.assignDept')"
 					prop="deptId"
 					v-show="formData.actionRule === FlowCheckRuleDept || formData.actionRule === FlowCheckRuleDeptLeader"
 				>
 					<el-cascader
 						:options="deptData"
 						:props="{ checkStrictly: true, emitPath: false, value: 'deptId', label: 'deptName', multiple: true }"
-						placeholder="请选择部门"
+						:placeholder="t('message.flowComponent.pleaseSelectDept')"
 						clearable
 						class="w100"
 						v-model="formData.deptIds"
@@ -63,57 +63,57 @@
 						</template>
 					</el-cascader>
 				</el-form-item>
-				<el-form-item label="指定岗位" prop="postIds" v-show="formData.actionRule === FlowCheckRulePost">
-					<el-select v-model="formData.postIds" placeholder="请选择" clearable class="w100" multiple :disabled="readonly">
+				<el-form-item :label="t('message.flowComponent.assignPost')" prop="postIds" v-show="formData.actionRule === FlowCheckRulePost">
+					<el-select v-model="formData.postIds" :placeholder="t('message.flowComponent.pleaseSelect')" clearable class="w100" multiple :disabled="readonly">
 						<el-option v-for="post in postList" :key="'post-' + post.postId" :label="post.postName" :value="post.postId"> </el-option>
 					</el-select>
 				</el-form-item>
-				<el-form-item label="指定人员" v-show="formData.actionRule === FlowCheckRuleUser">
+				<el-form-item :label="t('message.flowComponent.assignUser')" v-show="formData.actionRule === FlowCheckRuleUser">
 					<select-user v-model="formData.userIds"></select-user>
 				</el-form-item>
-				<el-form-item label="多人审批处理规则">
-					<el-select v-model="formData.approveRule" placeholder="请选择多人审批处理规则" style="width: 100%" :disabled="readonly">
+				<el-form-item :label="t('message.flowComponent.multiApproveRule')">
+					<el-select v-model="formData.approveRule" :placeholder="t('message.flowComponent.pleaseSelectMultiApproveRule')" style="width: 100%" :disabled="readonly">
 						<el-option v-for="item in approveRuleOption" :key="item.value" :label="item.label" :value="item.value" />
 					</el-select>
 				</el-form-item>
 				<el-form-item
-					label="网关审批处理规则"
+					:label="t('message.flowComponent.gatewayApproveRule')"
 					v-show="nodeType === NodeTypeConcurrent || nodeType === NodeTypePush || nodeType === NodeTypeCondition"
 				>
-					<el-select v-model="nodeType" placeholder="请选择多人审批处理规则" :disabled="true" style="width: 100%">
+					<el-select v-model="nodeType" :placeholder="t('message.flowComponent.pleaseSelectMultiApproveRule')" :disabled="true" style="width: 100%">
 						<el-option v-for="item in conditionRuleOption" :key="item.value" :label="item.label" :value="item.value" />
 					</el-select>
 				</el-form-item>
-				<el-form-item label="发送通知">
+				<el-form-item :label="t('message.flowComponent.sendNotice')">
 					<el-checkbox-group v-model="formData.notice" :disabled="readonly">
-						<el-checkbox label="sms">短信</el-checkbox>
-						<el-checkbox label="email">邮件</el-checkbox>
-						<el-checkbox label="innerNotice">站内通知</el-checkbox>
+						<el-checkbox label="sms">{{ t('message.flowComponent.sms') }}</el-checkbox>
+						<el-checkbox label="email">{{ t('message.flowComponent.email') }}</el-checkbox>
+						<el-checkbox label="innerNotice">{{ t('message.flowComponent.innerNotice') }}</el-checkbox>
 					</el-checkbox-group>
 				</el-form-item>
-				<el-form-item label="允许退回" v-show="nodeType !== NodeTypeStart">
+				<el-form-item :label="t('message.flowComponent.allowRollback')" v-show="nodeType !== NodeTypeStart">
 					<el-radio-group v-model="formData.rollback" :disabled="readonly">
-						<el-radio :label="1">是</el-radio>
-						<el-radio :label="0">否</el-radio>
+						<el-radio :label="1">{{ t('message.flowComponent.yes') }}</el-radio>
+						<el-radio :label="0">{{ t('message.flowComponent.no') }}</el-radio>
 					</el-radio-group>
 				</el-form-item>
-				<el-form-item label="分支条件" v-show="nodeType === NodeTypeCondition">
+				<el-form-item :label="t('message.flowComponent.branchCondition')" v-show="nodeType === NodeTypeCondition">
 					<Branch ref="branchRef" :modelValue="formData.nodeExt" @setNodeExt="setNodeExt"></Branch>
 				</el-form-item>
 			</template>
 			<!-- WebHook 特定配置 -->
 			<template v-else>
-				<el-form-item label="请求地址" required>
-					<el-input v-model="formData.webhook.url" placeholder="请输入WebHook URL" :disabled="readonly"></el-input>
+				<el-form-item :label="t('message.flowComponent.requestUrl')" required>
+					<el-input v-model="formData.webhook.url" :placeholder="t('message.flowComponent.pleaseInputWebhookUrl')" :disabled="readonly"></el-input>
 				</el-form-item>
-				<el-form-item label="请求方法">
-					<el-select v-model="formData.webhook.method" placeholder="请选择请求方法" :disabled="readonly">
+				<el-form-item :label="t('message.flowComponent.requestMethod')">
+					<el-select v-model="formData.webhook.method" :placeholder="t('message.flowComponent.pleaseSelectRequestMethod')" :disabled="readonly">
 						<el-option v-for="item in httpMethodOptions" :key="item.value" :label="item.label" :value="item.value" />
 					</el-select>
 				</el-form-item>
 				<!-- 请求头 - 所有方法都显示 -->
-				<el-form-item label="请求头">
-					<webhook-params v-model="formData.webhook.headers" title="请求头参数" />
+				<el-form-item :label="t('message.flowComponent.requestHeaders')">
+					<webhook-params v-model="formData.webhook.headers" :title="t('message.flowComponent.requestHeaderParams')" />
 				</el-form-item>
 				<!---->
 				<!--				&lt;!&ndash; 请求参数 - 所有方法都显示 &ndash;&gt;-->
@@ -122,21 +122,21 @@
 				<!--				</el-form-item>-->
 
 				<!-- 请求体类型 - 仅 POST/PUT 显示 -->
-				<el-form-item label="请求体类型" v-show="formData.webhook.method === 'POST' || formData.webhook.method === 'PUT'">
+				<el-form-item :label="t('message.flowComponent.requestBodyType')" v-show="formData.webhook.method === 'POST' || formData.webhook.method === 'PUT'">
 					<el-select v-model="formData.webhook.bodyType" :disabled="readonly">
-						<el-option label="JSON" value="json"></el-option>
+						<el-option :label="t('message.flowComponent.json')" value="json"></el-option>
 					</el-select>
 				</el-form-item>
 
 				<!-- 请求体 - 仅 POST/PUT 显示 -->
-				<el-form-item label="请求体" v-show="formData.webhook.method === 'POST' || formData.webhook.method === 'PUT'">
+				<el-form-item :label="t('message.flowComponent.requestBody')" v-show="formData.webhook.method === 'POST' || formData.webhook.method === 'PUT'">
 					<!--					<el-input :disabled="readonly" type="textarea" v-model="formData.webhook.body" :autosize="{ minRows: 10, maxRows: 10 }" />-->
-					<webhook-params v-model="formData.webhook.body" title="请求体参数" />
+					<webhook-params v-model="formData.webhook.body" :title="t('message.flowComponent.requestBodyParams')" />
 				</el-form-item>
 			</template>
 
 			<el-form-item>
-				<el-button type="primary" @click="onSubmit" v-if="!readonly">保存</el-button>
+				<el-button type="primary" @click="onSubmit" v-if="!readonly">{{ t('message.flowComponent.save') }}</el-button>
 			</el-form-item>
 		</el-form>
 	</div>
@@ -169,6 +169,7 @@ import {
 import systemApi from '/@/api/system'
 import WebhookParams from '/@/components/gFlow/propertySetting/webhookParams.vue'
 import DynamicJudgeInput from '/@/components/gFlow/propertySetting/DynamicJudgeInput.vue'
+import { useI18n } from 'vue-i18n'
 
 interface PostInfo {
 	postId: number
@@ -181,6 +182,8 @@ interface DeptInfo {
 	children?: DeptInfo[]
 }
 
+const {t} = useI18n()
+
 const getDeptTree = () => systemApi.dept.getList({ status: -1 })
 const getParams = () => systemApi.user.params()
 

src/components/gFlow/propertySetting/DynamicJudgeInput.vue

@@ -4,7 +4,7 @@
 			<el-input
 				ref="inputRef"
 				v-model="expression"
-				placeholder="请输入动态指派表达式，如：\{\{.userId\}\}"
+				:placeholder="t('message.flowComponent.dynamicExprPlaceholder',{example: '{{.userId}}'})"
 				:disabled="readonly"
 				type="textarea"
 				:autosize="{ minRows: 3, maxRows: 6 }"
@@ -13,13 +13,13 @@
 			/>
 			<FieldSelector @select="insertField">
 				<template #trigger>
-					<el-button type="primary" size="small" :disabled="readonly" class="template-btn"> 插入字段 </el-button>
+					<el-button type="primary" size="small" :disabled="readonly" class="template-btn"> {{ t('message.flowComponent.insertField') }} </el-button>
 				</template>
 			</FieldSelector>
 		</div>
 
 		<div class="help-text">
-			<el-text type="info" size="small"> 表达式的值应为用户id </el-text>
+			<el-text type="info" size="small"> {{ t('message.flowComponent.exprShouldBeUserId') }} </el-text>
 		</div>
 	</div>
 </template>
@@ -27,6 +27,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import FieldSelector from './FieldSelector.vue'
+import { useI18n } from 'vue-i18n'
 
 // 定义组件的 Props
 interface Props {
@@ -44,6 +45,7 @@ const emit = defineEmits(['update:modelValue'])
 const inputRef = ref()
 // 光标位置
 const cursorPosition = ref(0)
+const { t } = useI18n()
 
 const expression = computed<string>({
 	get() {

src/components/gFlow/propertySetting/FieldSelector.vue

@@ -7,7 +7,7 @@
 			<div class="two-column-layout">
 				<!-- 第一列：表单类别 -->
 				<div class="left-column">
-					<div class="column-title">表单类别</div>
+					<div class="column-title">{{ t('message.flowComponent.formCategory') }}</div>
 					<div class="category-list">
 						<div
 							v-for="item in flowForms"
@@ -23,7 +23,7 @@
 
 				<!-- 第二列：字段列表 -->
 				<div class="right-column">
-					<div class="column-title">字段列表</div>
+					<div class="column-title">{{ t('message.flowComponent.fieldList') }}</div>
 					<div class="field-list">
 						<div v-for="field in currentListSelectCate" :key="field.key" class="field-item" @click="handleFieldSelect(field.key)">
 							<div class="field-name">{{ field.key }}</div>
@@ -41,6 +41,7 @@
 import { getCurrentInstance, Ref, ref, watch } from 'vue'
 import { asyncComputed, useAsyncState } from '@vueuse/core'
 import { getFlowFields, getFlowForm, listFlowForm } from '/@/api/flow/flowForm'
+import { useI18n } from 'vue-i18n'
 
 const { proxy } = getCurrentInstance() as any
 const {
@@ -128,6 +129,7 @@ const handlePopoverHide = () => {
 	currentSelectCate.value = ''
 	currentListSelectCate.value = []
 }
+const { t } = useI18n()
 </script>
 
 <style scoped lang="scss">

src/components/gFlow/propertySetting/branch.vue

@@ -1,16 +1,16 @@
 <template>
   <el-container>
     <el-main style="padding: 0 20px 20px 20px">
-      <div class="top-tips">满足以下条件时进入当前分支</div>
+      <div class="top-tips">{{ t('message.flowComponent.branchTips') }}</div>
       <template v-for="(conditionGroup, conditionGroupIdx) in conditionList">
         <div
             class="or-branch-link-tip"
             v-if="conditionGroupIdx != 0">
-          或满足
+          {{ t('message.flowComponent.orSatisfied') }}
         </div>
         <div class="condition-group-editor">
           <div class="header">
-            <span>条件组 {{ conditionGroupIdx + 1 }}</span>
+            <span>{{ t('message.flowComponent.conditionGroup') }} {{ conditionGroupIdx + 1 }}</span>
             <div @click="deleteConditionGroup(conditionGroupIdx)">
               <el-icon class="branch-delete-icon"><ele-Delete /></el-icon>
             </div>
@@ -19,16 +19,16 @@
           <div class="main-content">
             <!-- 单个条件 -->
             <div class="condition-content-box cell-box">
-              <div>描述</div>
-              <div>条件字段</div>
-              <div>运算符</div>
-              <div>值</div>
+              <div>{{ t('message.flowComponent.desc') }}</div>
+              <div>{{ t('message.flowComponent.conditionField') }}</div>
+              <div>{{ t('message.flowComponent.operator') }}</div>
+              <div>{{ t('message.flowComponent.value') }}</div>
             </div>
             <div
                 class="condition-content"
                 v-for="(condition, idx) in conditionGroup">
               <div class="condition-relation">
-                <span>{{ idx == 0 ? '当' : '且' }}</span>
+                <span>{{ idx == 0 ? t('message.flowComponent.when') : t('message.flowComponent.and') }}</span>
                 <div @click="deleteConditionList(conditionGroup, idx)">
                   <el-icon class="branch-delete-icon"><ele-Delete /></el-icon>
                 </div>
@@ -37,45 +37,45 @@
                 <div class="condition-content-box">
                   <el-input
                       v-model="condition.label"
-                      placeholder="描述" />
+                      :placeholder="t('message.flowComponent.desc')" />
                   <FieldSelector @select="(fieldKey) => selectField(fieldKey, condition)">
                     <template #trigger>
                       <el-input
                           v-model="condition.field"
-                          placeholder="条件字段" />
+                          :placeholder="t('message.flowComponent.conditionField')" />
                     </template>
                   </FieldSelector>
                   <el-select
                       v-model="condition.operator"
-                      placeholder="请选择">
+                      :placeholder="t('message.flowComponent.pleaseSelect')">
                     <el-option
-                        label="等于"
+                        :label="t('message.flowComponent.eq')"
                         value="=="></el-option>
                     <el-option
-                        label="不等于"
+                        :label="t('message.flowComponent.neq')"
                         value="!="></el-option>
                     <el-option
-                        label="大于"
+                        :label="t('message.flowComponent.gt')"
                         value=">"></el-option>
                     <el-option
-                        label="大于等于"
+                        :label="t('message.flowComponent.gte')"
                         value=">="></el-option>
                     <el-option
-                        label="小于"
+                        :label="t('message.flowComponent.lt')"
                         value="<"></el-option>
                     <el-option
-                        label="小于等于"
+                        :label="t('message.flowComponent.lte')"
                         value="<="></el-option>
                     <el-option
-                        label="包含"
+                        :label="t('message.flowComponent.include')"
                         value="include"></el-option>
                     <el-option
-                        label="不包含"
+                        :label="t('message.flowComponent.notInclude')"
                         value="notInclude"></el-option>
                   </el-select>
                   <el-input
                       v-model="condition.value"
-                      placeholder="值" />
+                      :placeholder="t('message.flowComponent.value')" />
                 </div>
               </div>
             </div>
@@ -86,7 +86,7 @@
                 type="primary"
                 @click="addConditionList(conditionGroup)">
               <el-icon><ele-Plus /></el-icon>
-              添加条件
+              {{ t('message.flowComponent.addCondition') }}
             </el-button>
           </div>
         </div>
@@ -98,7 +98,7 @@
           bg
           @click="addConditionGroup">
         <el-icon><ele-Plus /></el-icon>
-        添加条件组
+        {{ t('message.flowComponent.addConditionGroup') }}
       </el-button>
     </el-main>
   </el-container>
@@ -107,9 +107,11 @@
 import {NodeConditionData} from "/@/components/gFlow/propertySetting/model";
 import {onMounted, ref, watch} from "vue";
 import FieldSelector from './FieldSelector.vue';
+import { useI18n } from 'vue-i18n'
 
 const emit = defineEmits(['setNodeExt'])
 const conditionList = ref<Array<NodeConditionData[]>>([])
+const { t } = useI18n()
 const initNodeData = (data:Array<NodeConditionData[]>)=>{
   conditionList.value = data
 }

src/components/gFlow/propertySetting/webhookParams.vue

@@ -2,20 +2,20 @@
 	<div class="webhook-params">
 		<div class="params-header">
 			<h3>{{ title }}</h3>
-			<el-button type="primary" size="small" @click="addKeyValue" :disabled="readonly"> 添加参数 </el-button>
+			<el-button type="primary" size="small" @click="addKeyValue" :disabled="readonly"> {{ t('message.flowComponent.addParam') }} </el-button>
 		</div>
 
 		<div class="params-content">
 			<div class="params-list">
 				<div v-for="(key, index) in keys" :key="key" class="param-item">
 					<div class="param-key">
-						<el-input v-model="editingKeys[index]" placeholder="参数名" :disabled="readonly" @blur="updateKey(index, key)" />
+						<el-input v-model="editingKeys[index]" :placeholder="t('message.flowComponent.paramName')" :disabled="readonly" @blur="updateKey(index, key)" />
 					</div>
 
 					<div class="param-value">
 						<FieldSelector @select="(fieldKey) => selectField(fieldKey, key)">
 							<template #trigger>
-								<el-input v-model="origin[key]" placeholder="参数值" :disabled="readonly" @input="updateOrigin" />
+								<el-input v-model="origin[key]" :placeholder="t('message.flowComponent.paramValue')" :disabled="readonly" @input="updateOrigin" />
 							</template>
 						</FieldSelector>
 					</div>
@@ -34,6 +34,7 @@ import { computed, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
 import FieldSelector from './FieldSelector.vue'
+import { useI18n } from 'vue-i18n'
 
 // 定义组件的 Props
 interface Props {
@@ -100,7 +101,7 @@ const updateKey = (index: number, oldKey: string) => {
 	// 检查键名是否重复
 	if (newKey !== oldKey && keys.value.includes(newKey)) {
 		editingKeys.value[index] = oldKey
-		ElMessage.warning('参数名已存在')
+		ElMessage.warning(t('message.flowComponent.paramNameExist'))
 		return
 	}
 
@@ -125,6 +126,7 @@ const selectField = (fieldKey: string, paramKey: string) => {
 	origin.value[paramKey] = `{{.${fieldKey}}}`
 	updateOrigin()
 }
+const { t } = useI18n()
 </script>
 
 <style scoped lang="scss">

src/components/gFlow/showDesign.vue

@@ -3,7 +3,7 @@
 		<!-- 画布 -->
 		<div class="app-content" ref="logicFlowContainerRef"></div>
 		<!-- 属性面板 -->
-		<el-drawer title="设置节点属性" v-model="dialogVisible" direction="rtl" size="900px" :before-close="closeDialog">
+		<el-drawer :title="t('message.flowComponent.setNodeProps')" v-model="dialogVisible" direction="rtl" size="900px" :before-close="closeDialog">
 			<PropertyDialog
 				v-if="dialogVisible"
 				:nodeData="clickNode"
@@ -21,6 +21,7 @@ import '@logicflow/core/lib/style/index.css'
 import '@logicflow/extension/lib/style/index.css'
 import { ref } from 'vue'
 import { setTheme } from '/@/components/gFlow/config'
+import { useI18n } from 'vue-i18n'
 
 import {
 	registerConcurrent,
@@ -56,6 +57,7 @@ const addClickNode = ref<any>()
 const clickNode = ref({})
 const dialogVisible = ref(false)
 const moveData = ref({})
+const { t } = useI18n()
 
 const showDesign = (params: any) => {
 	modelId.value = params.flowId

src/i18n/index.ts

@@ -54,6 +54,10 @@ import pagesFlowModelZhcn from './pages/flow/flowModel/zh-cn'
 import pagesFlowModelEn from './pages/flow/flowModel/en'
 import pagesFlowModelZhtw from './pages/flow/flowModel/zh-tw'
 
+import componentFlowModelZhcn from './pages/flow/component/zh-cn'
+import componentFlowModelEn from './pages/flow/component/en'
+import componentFlowModelZhtw from './pages/flow/component/zh-tw'
+
 // 定义语言国际化内容
 /**
  * 说明：
@@ -74,7 +78,8 @@ const messages = {
 			property: pagesPropertyZhcn,
 			dateCenter: pagesDateCenterZhcn,
 			flowForm: pagesFlowFormZhcn,
-			flowModel: pagesFlowModelZhcn
+			flowModel: pagesFlowModelZhcn,
+			flowComponent: componentFlowModelZhcn
 		}
 	},
 	[enLocale.name]: {
@@ -90,7 +95,8 @@ const messages = {
 			property: pagesPropertyEn,
 			dateCenter: pagesDateCenterEn,
 			flowForm: pagesFlowFormEn,
-			flowModel: pagesFlowModelEn
+			flowModel: pagesFlowModelEn,
+			flowComponent: componentFlowModelEn
 		},
 	},
 	[zhtwLocale.name]: {
@@ -106,7 +112,8 @@ const messages = {
 			property: pagesPropertyZhtw,
 			dateCenter: pagesDateCenterZhtw,
 			flowForm: pagesFlowFormZhtw,
-			flowModel: pagesFlowModelZhtw
+			flowModel: pagesFlowModelZhtw,
+			flowComponent: componentFlowModelZhtw
 		},
 	},
 };