fix: add popper-class to el-tooltip components for improved styling in index.vue

Author: wxg0103

ui/src/workflow/index.vue

@@ -2,29 +2,30 @@
   <div className="workflow-app" id="container"></div>
   <!-- 辅助工具栏 -->
   <Control class="workflow-control" v-if="lf" :lf="lf"></Control>
-  <TeleportContainer :flow-id="flowId" />
+  <TeleportContainer :flow-id="flowId"/>
   <NodeSearch :lf="lf" ref="nodeSearchRef"></NodeSearch>
 </template>
 <script setup lang="ts">
 import LogicFlow from '@logicflow/core'
-import { ref, onMounted, onUnmounted, inject, nextTick } from 'vue'
+import {ref, onMounted, onUnmounted, inject, nextTick} from 'vue'
 import AppEdge from './common/edge'
 import loopEdge from './common/loopEdge'
 import Control from './common/NodeControl.vue'
-import { SelectionSelect } from '@logicflow/extension'
+import {SelectionSelect} from '@logicflow/extension'
 import '@logicflow/extension/lib/style/index.css'
 import '@logicflow/core/dist/style/index.css'
-import { initDefaultShortcut } from '@/workflow/common/shortcut'
+import {initDefaultShortcut} from '@/workflow/common/shortcut'
 import Dagre from '@/workflow/plugins/dagre'
-import { disconnectAll, getTeleport } from '@/workflow/common/teleport'
-import { WorkflowMode } from '@/enums/application'
+import {disconnectAll, getTeleport} from '@/workflow/common/teleport'
+import {WorkflowMode} from '@/enums/application'
 
 import NodeSearch from '@/workflow/common/NodeSearch.vue'
-const nodes: any = import.meta.glob('./nodes/**/index.ts', { eager: true })
+
+const nodes: any = import.meta.glob('./nodes/**/index.ts', {eager: true})
 const workflow_mode = inject('workflowMode') || WorkflowMode.Application
 const loop_workflow_mode = inject('loopWorkflowMode') || WorkflowMode.ApplicationLoop
 const nodeSearchRef = ref<InstanceType<typeof NodeSearch>>()
-defineOptions({ name: 'WorkFlow' })
+defineOptions({name: 'WorkFlow'})
 const TeleportContainer = getTeleport()
 const flowId = ref('')
 type ShapeItem = {
@@ -149,7 +150,7 @@ const onmousedown = (shapeItem: ShapeItem) => {
   if (shapeItem.type) {
     lf.value.dnd.startDrag({
       type: shapeItem.type,
-      properties: { ...shapeItem.properties },
+      properties: {...shapeItem.properties},
     })
   }
 
@@ -159,7 +160,7 @@ const onmousedown = (shapeItem: ShapeItem) => {
 }
 const addNode = (shapeItem: ShapeItem) => {
   lf.value.clearSelectElements()
-  const { virtualRectCenterPositionX, virtualRectCenterPositionY } =
+  const {virtualRectCenterPositionX, virtualRectCenterPositionY} =
     lf.value.graphModel.getVirtualRectSize()
   const newNode = lf.value.graphModel.addNode({
     type: shapeItem.type,
@@ -198,13 +199,31 @@ defineExpose({
   height: 100%;
   position: relative;
 }
+
 .workflow-control {
   position: absolute;
   bottom: 24px;
   left: 24px;
   z-index: 2;
 }
+
 .lf-drag-able {
   cursor: pointer;
 }
+
+/* 全局样式，用于覆盖 teleport 到 body 的 tooltip 弹层背景 */
+.white-tooltip,
+.white-tooltip .el-popper,
+.white-tooltip .el-tooltip__popper {
+  background: #ffffff !important;
+  color: #222 !important;
+  border: 1px solid #e6e6e6 !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
+  padding: 8px 12px !important;
+}
+
+.white-tooltip .el-popper__arrow::before {
+  background: #ffffff !important;
+  border: 1px solid #e6e6e6 !important;
+}
 </style>

ui/src/workflow/nodes/image-to-video/index.vue

@@ -159,7 +159,7 @@
                   }}<span class="color-danger">*</span></span
                 >
             </div>
-            <el-tooltip effect="dark" placement="right">
+            <el-tooltip effect="dark" placement="right" popper-class="white-tooltip">
               <template #content>
                 <div style="white-space: pre-wrap; font-family: monospace;">{{
                     fileTooltip
@@ -194,7 +194,7 @@
                   }}<span class="color-danger">*</span></span
                 >
             </div>
-            <el-tooltip effect="dark" placement="right">
+            <el-tooltip effect="dark" placement="right" popper-class="white-tooltip">
               <template #content>
                 <div style="white-space: pre-wrap; font-family: monospace;">{{
                     fileTooltip

ui/src/workflow/nodes/image-understand/index.vue

@@ -189,7 +189,7 @@
                   }}<span class="color-danger">*</span></span
                 >
             </div>
-            <el-tooltip effect="dark" placement="right">
+            <el-tooltip effect="dark" placement="right" popper-class="white-tooltip">
               <template #content>
                 <div style="white-space: pre-wrap; font-family: monospace;">{{
                     fileTooltip

ui/src/workflow/nodes/search-document-node/index.vue

@@ -78,7 +78,7 @@
                     {{ $t('workflow.nodes.searchDocumentNode.select_variable') }}
                     <span class="color-danger">*</span>
                   </span>
-                    <el-tooltip effect="dark" placement="right">
+                    <el-tooltip effect="dark" placement="right" popper-class="white-tooltip">
                       <template #content>
                         <div style="white-space: pre-wrap; font-family: monospace;">{{
                             ['019d8ac3-e2c6-7ff2-8956-c9c98f0e11f4', '019d8ac3-e2c6-7ff2-8956-c9c98f0e11f3']

ui/src/workflow/nodes/search-knowledge-node/index.vue

@@ -77,7 +77,7 @@
                     {{ $t('workflow.nodes.searchDocumentNode.select_variable') }}
                     <span class="color-danger">*</span>
                   </span>
-                    <el-tooltip effect="dark" placement="right">
+                    <el-tooltip effect="dark" placement="right" popper-class="white-tooltip">
                       <template #content>
                         <div style="white-space: pre-wrap; font-family: monospace;">{{
                             ['019d8ac3-e2c6-7ff2-8956-c9c98f0e11f4', '019d8ac3-e2c6-7ff2-8956-c9c98f0e11f3']

ui/src/workflow/nodes/speech-to-text-node/index.vue

@@ -92,7 +92,7 @@
                   }}<span class="color-danger">*</span></span
                 >
               </div>
-              <el-tooltip effect="dark" placement="right">
+              <el-tooltip effect="dark" placement="right" popper-class="white-tooltip">
                 <template #content>
                   <div style="white-space: pre-wrap; font-family: monospace;">{{
                       fileTooltip

ui/src/workflow/nodes/video-understand/index.vue

@@ -190,7 +190,7 @@
                   }}<span class="color-danger">*</span></span
                 >
             </div>
-            <el-tooltip effect="dark" placement="right">
+            <el-tooltip effect="dark" placement="right" popper-class="white-tooltip">
               <template #content>
                 <div style="white-space: pre-wrap; font-family: monospace;">{{
                     fileTooltip