From 0b90f84a6b2b93c3f5242d381070905fe52d0116 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 6 Nov 2026 17:53:57 +0800
Subject: [PATCH] fix: workflow search keyword

---
 ui/src/styles/element-plus.scss               |  2 +-
 .../workflow-canvas/component/NodeControl.vue |  6 ++--
 .../workflow-canvas/component/NodeSearch.vue  | 20 +++++++++++--
 .../core/node-container/index.vue             | 29 ++++++++-----------
 4 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index e78492e1131..742b8927fc6 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -823,7 +823,7 @@
 /* progress */
 .el-progress {
   .el-progress-bar__inner {
-    background: linear-gradient(90deg, rgb(var(--mk-primary-rgb) / 20%) 0%, var(--el-color-primary) 100%);
+    background: linear-gradient(90deg, rgb(51 112 255 / 20%) 0%, #3370ff 100%);
   }
   &.is-warning {
     .el-progress-bar__inner {
diff --git a/ui/src/workflow-canvas/component/NodeControl.vue b/ui/src/workflow-canvas/component/NodeControl.vue
index 8ba007add7f..31ad0b8974a 100644
--- a/ui/src/workflow-canvas/component/NodeControl.vue
+++ b/ui/src/workflow-canvas/component/NodeControl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
+import { nextTick, reactive, ref, watch } from 'vue'
 import type LogicFlow from '@logicflow/core'
 import type { BaseNodeModel } from '@logicflow/core'
 import type { SelectionSelect } from '@logicflow/extension'
@@ -73,10 +73,10 @@ function fitView() {
   props.logicFlow.fitView(40, 40)
 }
 
-// 批量展开收起不替换节点数据，保留表单内容。
+// 与节点视图共用 Vue 响应式代理，批量切换时同步内容显示并保留表单数据。
 function setNodesExpanded(expanded: boolean) {
   props.logicFlow.graphModel.nodes.forEach((node) => {
-    node.properties.showNode = expanded
+    reactive(node).properties.showNode = expanded
   })
 }
 
diff --git a/ui/src/workflow-canvas/component/NodeSearch.vue b/ui/src/workflow-canvas/component/NodeSearch.vue
index eaeb8eb7097..222e504b279 100644
--- a/ui/src/workflow-canvas/component/NodeSearch.vue
+++ b/ui/src/workflow-canvas/component/NodeSearch.vue
@@ -24,7 +24,20 @@ const matchedNodes = computed(() => {
 function focusCurrentNode() {
   const node = matchedNodes.value[currentIndex.value]
   props.logicFlow.clearSelectElements()
+  const keyword = searchKeyword.value.trim()
+  props.logicFlow.graphModel.nodes.forEach((nodeModel) => {
+    nodeModel.clearSelectOn?.()
+    if (
+      keyword &&
+      String(nodeModel.properties.stepName ?? '')
+        .toLocaleLowerCase()
+        .includes(keyword.toLocaleLowerCase())
+    ) {
+      nodeModel.selectOn?.(keyword)
+    }
+  })
   if (!node) return
+  props.logicFlow.getNodeModelById(node.id)?.focusOn?.()
   props.logicFlow.selectElementById(node.id)
   props.logicFlow.focusOn(node.id)
 }
@@ -44,7 +57,7 @@ function closeSearch() {
   searchVisible.value = false
   searchKeyword.value = ''
   currentIndex.value = 0
-  props.logicFlow.clearSelectElements()
+  focusCurrentNode()
 }
 
 function handleShortcut(event: KeyboardEvent) {
@@ -61,7 +74,10 @@ watch(searchKeyword, () => {
 })
 
 onMounted(() => window.addEventListener('keydown', handleShortcut))
-onBeforeUnmount(() => window.removeEventListener('keydown', handleShortcut))
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleShortcut)
+  props.logicFlow.graphModel.nodes.forEach((node) => node.clearSelectOn?.())
+})
 </script>
 
 <template>
diff --git a/ui/src/workflow-canvas/core/node-container/index.vue b/ui/src/workflow-canvas/core/node-container/index.vue
index ac4557fd344..3623ba3b2e3 100644
--- a/ui/src/workflow-canvas/core/node-container/index.vue
+++ b/ui/src/workflow-canvas/core/node-container/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reaction, type BaseNodeModel, type Model } from '@logicflow/core'
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { cloneDeep } from 'lodash'
+import { cloneDeep, escape, escapeRegExp } from 'lodash'
 import { iconComponent } from '@/workflow-canvas/icons/utils'
 import { copyText } from '@/utils/clipboard'
 import { WorkflowMode, WorkflowNodeType, type WorkflowNodeField } from '@/workflow-canvas/types'
@@ -218,23 +218,18 @@ const clearSelectOn = () => {
 // 高亮选中关键字
 
 const highlightedStepName = (contentText: string) => {
-  let res = contentText
-  if (keyWord.value === '') {
-    return res
-  } else {
-    const wordsArray = contentText.split('')
-    for (let i = 0; i < wordsArray.length; i++) {
-      const word = wordsArray[i]
-      if (word && keyWord.value.includes(word)) {
-        wordsArray[i] = currentKeyWord.value
-          ? `<span style='background: #FF8800;'>${word}</span>`
-          : `<span style='background: #FFC60A;'>${word}</span>`
-      }
-    }
-    res = wordsArray.join('')
-    return res
-  }
+  if (!keyWord.value) return escape(contentText)
+  const keywordPattern = new RegExp(`(${escapeRegExp(keyWord.value)})`, 'gi')
+  return contentText
+    .split(keywordPattern)
+    .map((part, index) => {
+      const text = escape(part)
+      if (index % 2 === 0) return text
+      return currentKeyWord.value ? `<span style='background: var(--mk-warning);'>${text}</span>` : `<span style='background: #FFC60A'>${text}</span>`
+    })
+    .join('')
 }
+
 onMounted(() => {
   model.openNodeMenu = (anchor: Model.AnchorConfig) => {
     showAnchor.value && anchorData.value?.id === anchor.id ? closeNodeMenu() : openNodeMenu(anchor)