From 0ea5653742ccac0bf5138e465d38970d80deb726 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 3 Nov 2026 15:35:31 +0800
Subject: [PATCH] fix: style bug

---
 .../workspace-relation-tags/index.vue         | 34 +++++++++++++++++--
 ui/src/workflow-canvas/index.vue              |  2 +-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/business/workspace-relation-tags/index.vue b/ui/src/components/business/workspace-relation-tags/index.vue
index bc6cb9cfcf2..b2124f32de6 100644
--- a/ui/src/components/business/workspace-relation-tags/index.vue
+++ b/ui/src/components/business/workspace-relation-tags/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { h, ref } from 'vue'
+import { ElScrollbar, type TableTooltipData } from 'element-plus'
 import { TOOLTIP_SHOW_DELAY } from '@/components/global/mk-tooltip/constants'
 defineOptions({ name: 'WorkspaceRelationTags' })
 
@@ -13,10 +15,26 @@ defineProps<{
   columns: RelationColumn[]
 }>()
 
+// 将内层提示挂载在关联浮层内，移入提示时保持外层浮层打开。
+const relationContentRef = ref<HTMLDivElement>()
+
 function formatCellValue(value: unknown): string {
   if (Array.isArray(value)) return value.length ? value.join('、') : '-'
   return value === null || value === undefined || value === '' ? '-' : String(value)
 }
+
+function formatOverflowTooltip({ cellValue }: TableTooltipData<Record<string, unknown>>) {
+  return h(
+    ElScrollbar,
+    {
+      maxHeight: 'min(300px, calc(100vh - 48px))',
+      viewClass: 'px-3 py-2',
+      // 滚动容器需要明确宽度，避免提示框按内容测量时收缩为空。
+      style: { width: '312px', maxWidth: 'calc(100vw - 48px)', overflowWrap: 'anywhere' },
+    },
+    () => formatCellValue(cellValue),
+  )
+}
 </script>
 
 <template>
@@ -24,10 +42,22 @@ function formatCellValue(value: unknown): string {
     <template #reference>
       <MkTagGroup :tags="tags" popover-disabled :class="{ 'cursor-pointer': data.length }" />
     </template>
-    <div class="p-6">
+    <div ref="relationContentRef" class="p-6">
       <MkTable :data="data" max-height="300" size="small">
         <template v-for="column in columns" :key="column.prop">
-          <el-table-column :label="column.label" :prop="column.prop" :show-overflow-tooltip="{ appendTo: 'body' }">
+          <el-table-column
+            :label="column.label"
+            :prop="column.prop"
+            :show-overflow-tooltip="{
+              appendTo: relationContentRef,
+              placement: 'bottom',
+              popperOptions: { strategy: 'absolute' },
+              popperStyle: { padding: '0' },
+              enterable: true,
+              hideAfter: 200,
+            }"
+            :tooltip-formatter="formatOverflowTooltip"
+          >
             <template #default="{ row }">
               {{ formatCellValue(row[column.prop]) }}
             </template>
diff --git a/ui/src/workflow-canvas/index.vue b/ui/src/workflow-canvas/index.vue
index 404e0c27261..d9760ed5506 100644
--- a/ui/src/workflow-canvas/index.vue
+++ b/ui/src/workflow-canvas/index.vue
@@ -198,7 +198,7 @@ defineExpose({ onmousedown, validate, getGraphData, addNode, clearGraphData, ren
     <NodeControl v-if="lf" :logic-flow="lf" />
     <div class="absolute left-4 top-4 z-10">
       <el-card shadow="always" style="--el-card-padding: 8px">
-        <NodeAdd v-if="lf" :workflow-mode="workflowMode" @dragstart="onmousedown" @select="addNode" class="mb-1" />
+        <NodeAdd v-if="lf" :workflow-mode="workflowMode" @dragstart="onmousedown" @select="addNode" class="mb-2" />
         <NodeSearch v-if="lf" :logic-flow="lf" />
       </el-card>
     </div>