From edb842679d3c99e3d19b1091bac296e9ade4aab0 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 30 Dec 2024 18:57:31 +0800
Subject: [PATCH] perf: style

---
 .../component/DropdownMenu.vue                   | 16 ++++++++--------
 ui/src/workflow/common/NodeControl.vue           | 12 +++++++++---
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/ui/src/views/application-workflow/component/DropdownMenu.vue b/ui/src/views/application-workflow/component/DropdownMenu.vue
index 46ac0ea6e..43acc7244 100644
--- a/ui/src/views/application-workflow/component/DropdownMenu.vue
+++ b/ui/src/views/application-workflow/component/DropdownMenu.vue
@@ -41,24 +41,24 @@
             <component :is="iconComponent(`function-lib-node-icon`)" class="mr-8 mt-4" :size="32" />
             <div class="pre-wrap">
               <div class="lighter">{{ functionNode.label }}</div>
-              <el-text type="info" size="small">{{ functionNode.text }}</el-text>
+              <el-text type="info" size="small" >{{ functionNode.text }}</el-text>
             </div>
           </div>
 
           <template v-for="(item, index) in filter_function_lib_list" :key="index">
             <div
-              class="workflow-dropdown-item cursor flex p-8-12"
+              class="workflow-dropdown-item cursor flex p-8-12 align-center"
               @click.stop="clickNodes(functionLibNode, item, 'function')"
               @mousedown.stop="onmousedown(functionLibNode, item, 'function')"
             >
               <component
                 :is="iconComponent(`function-lib-node-icon`)"
-                class="mr-8 mt-4"
+                class="mr-8"
                 :size="32"
               />
               <div class="pre-wrap">
                 <div class="lighter">{{ item.name }}</div>
-                <el-text type="info" size="small">{{ item.desc }}</el-text>
+                <el-text type="info" size="small" v-if="item.desc">{{ item.desc }}</el-text>
               </div>
             </div>
           </template>
@@ -69,13 +69,13 @@
           <div v-if="filter_application_list.length > 0">
             <template v-for="(item, index) in filter_application_list" :key="index">
               <div
-                class="workflow-dropdown-item cursor flex p-8-12"
+                class="workflow-dropdown-item cursor flex align-center p-8-12"
                 @click.stop="clickNodes(applicationNode, item, 'application')"
                 @mousedown.stop="onmousedown(applicationNode, item, 'application')"
               >
                 <component
                   :is="iconComponent(`application-node-icon`)"
-                  class="mr-8 mt-4"
+                  class="mr-8"
                   :size="32"
                   :item="item"
                 />
@@ -83,7 +83,7 @@
                   <div class="lighter ellipsis" :title="item.name">
                     {{ item.name }}
                   </div>
-                  <el-text type="info" size="small" style="width: 80%">{{ item.desc }}</el-text>
+                  <el-text type="info" size="small" style="width: 80%" v-if="item.desc">{{ item.desc }}</el-text>
                 </div>
                 <div class="status-tag" style="margin-left: auto">
                   <el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px"
@@ -257,7 +257,7 @@ onMounted(() => {
   user-select: none; /* CSS3属性 */
   position: absolute;
   top: 49px;
-  right: 90px;
+  right: 122px;
   z-index: 99;
   width: 268px;
   box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
diff --git a/ui/src/workflow/common/NodeControl.vue b/ui/src/workflow/common/NodeControl.vue
index 291964c5c..1190724bf 100644
--- a/ui/src/workflow/common/NodeControl.vue
+++ b/ui/src/workflow/common/NodeControl.vue
@@ -1,13 +1,19 @@
 <template>
   <el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px">
     <el-button link @click="zoomOut">
-      <el-icon :size="16" title="缩小"><ZoomOut /></el-icon>
+      <el-tooltip class="box-item" effect="dark" content="缩小" placement="top">
+        <el-icon :size="16" title="缩小"><ZoomOut /></el-icon>
+      </el-tooltip>
     </el-button>
     <el-button link @click="zoomIn">
-      <el-icon :size="16" title="放大"><ZoomIn /></el-icon>
+      <el-tooltip class="box-item" effect="dark" content="放大" placement="top">
+        <el-icon :size="16" title="放大"><ZoomIn /></el-icon>
+      </el-tooltip>
     </el-button>
     <el-button link @click="fitView">
-      <AppIcon iconName="app-fitview" title="适应"></AppIcon>
+      <el-tooltip class="box-item" effect="dark" content="适应" placement="top">
+        <AppIcon iconName="app-fitview" title="适应"></AppIcon>
+      </el-tooltip>
     </el-button>
     <el-divider direction="vertical" />
     <el-button link @click="retract">