perf: workflow search style

Author: wangdan-fit2cloud

ui/src/locales/lang/en-US/workflow.ts

@@ -40,6 +40,7 @@ export default {
     copyError: 'Node already copied',
     paramErrorMessage: 'Parameter already exists: ',
     saveMessage: 'Current changes have not been saved. Save before exiting?',
+    searchPlaceholder: 'Please enter node name',
   },
   delete: {
     confirmTitle: 'Confirm to delete this node?',

ui/src/locales/lang/zh-CN/workflow.ts

@@ -39,6 +39,7 @@ export default {
     copyError: '已复制节点',
     paramErrorMessage: '参数已存在: ',
     saveMessage: '当前的更改尚未保存，是否保存后退出?',
+    searchPlaceholder: '请输入节点名称'
   },
   delete: {
     confirmTitle: '确定删除该节点？',

ui/src/locales/lang/zh-Hant/workflow.ts

@@ -39,6 +39,7 @@ export default {
     copyError: '已複製節點',
     paramErrorMessage: '參數已存在: ',
     saveMessage: '當前修改未保存，是否保存後退出？',
+    searchPlaceholder: '請輸入節點名稱',
   },
   delete: {
     confirmTitle: '確定刪除該節點？',
@@ -523,5 +524,5 @@ export default {
   SystemPromptPlaceholder: '系統提示詞，可以引用系統中的變量：如',
   UserPromptPlaceholder: '用戶提示詞，可以引用系統中的變量：如',
   initiator: '發起人',
-   abnormalInformation: '異常信息'
+  abnormalInformation: '異常信息',
 }

ui/src/workflow/common/NodeSearch.vue

@@ -2,48 +2,61 @@
   <div>
     <!-- 搜索 -->
     <el-card
+      class="workflow-search"
       v-if="showSearch"
       shadow="always"
       style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px"
     >
-      <div class="workflow-search-container">
+      <div class="workflow-search-container flex-between">
         <el-input
           ref="searchInputRef"
           v-model="searchText"
-          placeholder="搜索..."
-          :prefix-icon="Search"
+          :placeholder="$t('workflow.tip.searchPlaceholder')"
           clearable
           @keyup.enter="handleSearch"
           @keyup.esc="closeSearch"
         >
-          <template #append>
-            <el-button @click="closeSearch">取消</el-button>
-          </template>
         </el-input>
+        <span>
+          <el-space :size="4">
+            <span class="lighter"> 2/3 </span>
+            <el-divider direction="vertical" />
+
+            <el-button text>
+              <el-icon><ArrowUp /></el-icon>
+            </el-button>
+            <el-button text>
+              <el-icon><ArrowDown /></el-icon>
+            </el-button>
+            <el-button text @click="closeSearch()">
+              <el-icon><Close /></el-icon>
+            </el-button>
+          </el-space>
+        </span>
       </div>
     </el-card>
+    <!-- 开启搜索按钮 -->
+    <!-- <el-button v-else @click="openSearch()" circle class="workflow-search-button" size="large">
+      <el-icon :size="20"><Search /></el-icon>
+    </el-button> -->
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
-import { Search } from '@element-plus/icons-vue'
 
 // Props定义
 interface Props {
   onSearch?: (keyword: string) => void // 搜索回调
 }
-
 const props = withDefaults(defineProps<Props>(), {
-  useElementPlus: false,
   onSearch: undefined,
 })
 
 // 状态
 const showSearch = ref(false)
 const searchText = ref('')
 const searchInputRef = ref<any>(null)
-const nativeInputRef = ref<HTMLInputElement | null>(null)
 
 // 快捷键处理
 const handleKeyDown = (e: KeyboardEvent) => {
@@ -93,7 +106,24 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+.workflow-search-button {
+  position: absolute;
+  top: 72px;
+  left: 24px;
+  z-index: 2;
+}
+.workflow-search {
+  position: absolute;
+  top: 72px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+}
 .workflow-search-container {
   width: 360px;
+  :deep(.el-input__wrapper) {
+    box-shadow: none;
+    padding: 0 8px 0 1px!important;
+  }
 }
 </style>

ui/src/workflow/index.vue

@@ -232,13 +232,6 @@ defineExpose({
   left: 24px;
   z-index: 2;
 }
-.workflow-search {
-  position: absolute;
-  top: 72px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 2;
-}
 .lf-drag-able {
   cursor: pointer;
 }