perf: workflow search style

Author: wangdan-fit2cloud

ui/src/workflow/common/NodeContainer.vue

@@ -21,7 +21,10 @@
               :size="24"
               :item="nodeModel?.properties.node_data"
             />
-            <h4 class="ellipsis-1 break-all">{{ nodeModel.properties.stepName }}</h4>
+            <h4
+              class="ellipsis-1 break-all"
+              v-html="highlightedStepName(nodeModel.properties.stepName)"
+            ></h4>
           </div>
 
           <div @mousemove.stop @mousedown.stop @keydown.stop @click.stop>
@@ -288,7 +291,7 @@ const mousedown = (event?: any) => {
   set(props.nodeModel, 'isHovered', !props.nodeModel.isSelected)
   props.nodeModel.graphModel.toFront(props.nodeModel.id)
 }
-const showicon = ref<number | null>(null)
+const showicon = ref<number | string | null>(null)
 const copyNode = () => {
   props.nodeModel.graphModel.clearSelectElements()
   const cloneNode = props.nodeModel.graphModel.cloneNode(props.nodeModel.id)
@@ -436,23 +439,51 @@ const closeNodeMenu = () => {
  * 检索选中时候触发
  * @param kw
  */
+
+const keyWord = ref('')
+const currentKeyWord = ref(false)
 const selectOn = (kw: string) => {
   props.nodeModel.setSelected(true)
+  keyWord.value = kw
+  currentKeyWord.value = false
   console.log('selectOn', kw)
 }
 /**
  * 定位时触发
  * @param kw
  */
 const focusOn = (kw: string) => {
+  currentKeyWord.value = true
   console.log('focusOn', kw)
 }
 /**
  * 清除时触发
  */
 const clearSelectOn = () => {
+  keyWord.value = ''
+  currentKeyWord.value = false
   console.log('onClearSearchSelect')
 }
+
+// 高亮选中关键字
+
+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++) {
+      if (keyWord.value.includes(wordsArray[i])) {
+        wordsArray[i] = currentKeyWord.value
+          ? `<span style='background: #FF8800;'>${wordsArray[i]}</span>`
+          : `<span style='background: #FFC60A;'>${wordsArray[i]}</span>`
+      }
+    }
+    res = wordsArray.join('')
+    return res
+  }
+}
 onMounted(() => {
   set(props.nodeModel, 'openNodeMenu', (anchorData: any) => {
     showAnchor.value ? closeNodeMenu() : openNodeMenu(anchorData)

ui/src/workflow/common/NodeSearch.vue

@@ -23,7 +23,7 @@
             <span class="lighter" v-if="selectedCount && selectedCount > 0">
               {{ currentIndex + 1 }}/{{ selectedCount }}
             </span>
-            <span class="lighter" v-else-if="searchText.length > 0"> 无结果 </span>
+            <span class="lighter color-secondary" style="width: 42px;" v-else-if="searchText.length > 0"> 无结果 </span>
             <el-divider direction="vertical" />
 
             <el-button text>
@@ -48,7 +48,6 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
-import { MsgSuccess, MsgWarning } from '@/utils/message'
 // Props定义
 interface Props {
   lf?: any
@@ -75,7 +74,6 @@ const handleKeyDown = (e: KeyboardEvent) => {
 }
 
 const focusOn = (node: any) => {
-  console.log(node)
   props.lf?.graphModel.transformModel.focusOn(
     node.x,
     node.y,

ui/src/workflow/index.vue

@@ -3,7 +3,7 @@
   <!-- 辅助工具栏 -->
   <Control class="workflow-control" v-if="lf" :lf="lf"></Control>
   <TeleportContainer :flow-id="flowId" />
-  <NodeSearch class="workflow-search" :lf="lf"></NodeSearch>
+  <NodeSearch :lf="lf"></NodeSearch>
 </template>
 <script setup lang="ts">
 import LogicFlow from '@logicflow/core'