perf: [BPM 工作流] Simple 模型节点名称修改优化

apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue

@@ -144,8 +144,8 @@ function clickIcon() {
   showInput.value = true;
 }
 
-// 输入框失去焦点
+// 修改节点名称
-function blurEvent() {
+function changeNodeName() {
   showInput.value = false;
   currentNode.value.name =
     currentNode.value.name ||
@@ -166,7 +166,8 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
           v-if="showInput"
           type="text"
           class="mr-2 w-48"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="currentNode.name"
           :placeholder="currentNode.name"
         />

apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue

@@ -75,9 +75,8 @@ const [Drawer, drawerApi] = useVbenDrawer({
 const currentNode = useWatchNode(props);
 
 // 节点名称
-const { nodeName, showInput, clickIcon, blurEvent, inputRef } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.COPY_TASK_NODE,
+  useNodeName(BpmNodeTypeEnum.COPY_TASK_NODE);
-);
 
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
@@ -216,7 +215,8 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
           ref="inputRef"
           type="text"
           class="config-editable-input"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue

@@ -45,9 +45,8 @@ const props = defineProps({
 // 当前节点
 const currentNode = useWatchNode(props);
 // 节点名称
-const { nodeName, showInput, clickIcon, blurEvent, inputRef } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.DELAY_TIMER_NODE,
+  useNodeName(BpmNodeTypeEnum.DELAY_TIMER_NODE);
-);
 // 抄送人表单配置
 const formRef = ref(); // 表单 Ref
 
@@ -161,7 +160,8 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
           ref="inputRef"
           type="text"
           class="mr-2 w-48"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue

@@ -41,9 +41,8 @@ const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
 /** 当前节点 */
 const currentNode = useWatchNode(props);
 /** 节点名称 */
-const { nodeName, showInput, clickIcon, blurEvent, inputRef } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
+  useNodeName(BpmNodeTypeEnum.ROUTER_BRANCH_NODE);
-);
 const routerGroups = ref<RouterSetting[]>([]);
 const nodeOptions = ref<any[]>([]);
 const conditionRef = ref<any[]>([]);
@@ -209,7 +208,8 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
           v-if="showInput"
           type="text"
           class="mr-2 w-48"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue

@@ -52,9 +52,8 @@ const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList');
 // 当前节点
 const currentNode = useWatchNode(props);
 // 节点名称
-const { nodeName, showInput, clickIcon, blurEvent, inputRef } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.START_USER_NODE,
+  useNodeName(BpmNodeTypeEnum.START_USER_NODE);
-);
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
 
@@ -150,7 +149,8 @@ defineExpose({ showStartUserNodeConfig });
           v-if="showInput"
           type="text"
           class="config-editable-input"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue

@@ -72,9 +72,8 @@ const [Drawer, drawerApi] = useVbenDrawer({
 // 当前节点
 const currentNode = useWatchNode(props);
 // 节点名称
-const { nodeName, showInput, clickIcon, blurEvent, inputRef } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.TRIGGER_NODE,
+  useNodeName(BpmNodeTypeEnum.TRIGGER_NODE);
-);
 // 触发器表单配置
 const formRef = ref(); // 表单 Ref
 
@@ -392,7 +391,8 @@ onMounted(() => {
           v-if="showInput"
           type="text"
           class="config-editable-input"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue

@@ -114,9 +114,8 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 
 // 节点名称配置
-const { nodeName, showInput, clickIcon, blurEvent, inputRef } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.USER_TASK_NODE,
+  useNodeName(BpmNodeTypeEnum.USER_TASK_NODE);
-);
 
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
@@ -589,7 +588,8 @@ onMounted(() => {
           ref="inputRef"
           type="text"
           class="config-editable-input"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue

@@ -32,7 +32,7 @@ const readonly = inject<Boolean>('readonly');
 // 监控节点的变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle, inputRef } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.COPY_TASK_NODE,
 );
@@ -71,7 +71,8 @@ function deleteNode() {
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
+            @press-enter="changeNodeName()"
             v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />

apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue

@@ -30,7 +30,7 @@ const readonly = inject<Boolean>('readonly');
 // 监控节点的变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle, inputRef } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.DELAY_TIMER_NODE,
 );
@@ -68,7 +68,8 @@ function deleteNode() {
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
+            @press-enter="changeNodeName()"
             v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />

apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue

@@ -73,8 +73,8 @@ watch(
   { deep: true },
 );
 
-// 失去焦点
+// 修改节点名称
-function blurEvent(index: number) {
+function changeNodeName(index: number) {
   showInputs.value[index] = false;
   const conditionNode = currentNode.value.conditionNodes?.at(
     index,
@@ -214,7 +214,8 @@ function recursiveFindParentNode(
                     "
                     type="text"
                     class="editable-title-input"
-                    @blur="blurEvent(index)"
+                    @blur="changeNodeName(index)"
+                    @press-enter="changeNodeName(index)"
                     v-model:value="item.name"
                   />
                 </div>

apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue

@@ -77,8 +77,8 @@ watch(
   },
   { deep: true },
 );
-// 失去焦点
+// 修改节点名称
-function blurEvent(index: number) {
+function changeNodeName(index: number) {
   showInputs.value[index] = false;
   const conditionNode = currentNode.value.conditionNodes?.at(
     index,
@@ -217,7 +217,8 @@ function recursiveFindParentNode(
                     "
                     type="text"
                     class="editable-title-input"
-                    @blur="blurEvent(index)"
+                    @blur="changeNodeName(index)"
+                    @press-enter="changeNodeName(index)"
                     v-model:value="item.name"
                   />
                 </div>

apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue

@@ -66,8 +66,8 @@ watch(
   },
   { deep: true },
 );
-// 失去焦点
+// 修改节点名称
-function blurEvent(index: number) {
+function changeNodeName(index: number) {
   showInputs.value[index] = false;
   const conditionNode = currentNode.value.conditionNodes?.at(
     index,
@@ -175,7 +175,8 @@ function recursiveFindParentNode(
                     "
                     type="text"
                     class="input-max-width editable-title-input"
-                    @blur="blurEvent(index)"
+                    @blur="changeNodeName(index)"
+                    @press-enter="changeNodeName(index)"
                     v-model:value="item.name"
                   />
                 </div>

apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue

@@ -33,7 +33,7 @@ const readonly = inject<Boolean>('readonly');
 // 监控节点的变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle, inputRef } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
 );
@@ -71,7 +71,8 @@ function deleteNode() {
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
+            @press-enter="changeNodeName()"
             v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />

apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue

@@ -37,7 +37,7 @@ const tasks = inject<Ref<any[]>>('tasks', ref([]));
 // 监控节点变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle, inputRef } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.START_USER_NODE,
 );
@@ -85,7 +85,8 @@ function nodeClick() {
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
+            @press-enter="changeNodeName()"
             v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />

apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue

@@ -35,7 +35,7 @@ const readonly = inject<Boolean>('readonly');
 // 监控节点的变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle, inputRef } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.TRIGGER_NODE,
 );
@@ -73,7 +73,8 @@ function deleteNode() {
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
+            @press-enter="changeNodeName()"
             v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />

apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue

@@ -36,7 +36,7 @@ const tasks = inject<Ref<any[]>>('tasks', ref([]));
 // 监控节点变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle, inputRef } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.USER_TASK_NODE,
 );
@@ -91,7 +91,8 @@ function findReturnTaskNodes(
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
+            @press-enter="changeNodeName()"
             v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />

apps/web-antd/src/components/simple-process-design/helpers.ts

@@ -628,8 +628,8 @@ export function useNodeName(nodeType: BpmNodeTypeEnum) {
   function clickIcon() {
     showInput.value = true;
   }
-  // 节点名称输入框失去焦点
+  // 修改节点名称
-  function blurEvent() {
+  function changeNodeName() {
     showInput.value = false;
     nodeName.value =
       nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string);
@@ -648,7 +648,7 @@ export function useNodeName(nodeType: BpmNodeTypeEnum) {
     showInput,
     inputRef,
     clickIcon,
-    blurEvent,
+    changeNodeName,
   };
 }
 
@@ -670,8 +670,8 @@ export function useNodeName2(
     }
   });
 
-  // 节点名称输入框失去焦点
+  // 修改节点名称
-  function blurEvent() {
+  function changeNodeName() {
     showInput.value = false;
     node.value.name =
       node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string);
@@ -685,7 +685,7 @@ export function useNodeName2(
     showInput,
     inputRef,
     clickTitle,
-    blurEvent,
+    changeNodeName,
   };
 }