From 4201abc80491a490e7e2c9c04b5bb3945e78eb85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Sat, 29 Nov 2025 14:20:45 +0800
Subject: [PATCH] =?UTF-8?q?fix(KLPTable):=20=E8=B0=83=E6=95=B4=E6=B5=AE?=
 =?UTF-8?q?=E5=8A=A8=E5=B1=82=E4=BD=8D=E7=BD=AE=E9=98=B2=E6=AD=A2=E8=B6=85?=
 =?UTF-8?q?=E5=87=BA=E5=B1=8F=E5=B9=95=E8=BE=B9=E7=95=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加 adjustedTooltipStyle 计算属性，当浮动层超出屏幕底部或右侧时自动调整位置
---
 .../KLPUI/KLPTable/FloatLayer/index.vue       | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/klp-ui/src/components/KLPUI/KLPTable/FloatLayer/index.vue b/klp-ui/src/components/KLPUI/KLPTable/FloatLayer/index.vue
index 6d48ec18..75e2318a 100644
--- a/klp-ui/src/components/KLPUI/KLPTable/FloatLayer/index.vue
+++ b/klp-ui/src/components/KLPUI/KLPTable/FloatLayer/index.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="el-fade-in-linear">
-    <div v-if="tooltipVisible && data" class="row-tooltip" :style="tooltipStyle" ref="rowTooltip">
+    <div v-if="tooltipVisible && data" class="row-tooltip" :style="adjustedTooltipStyle" ref="rowTooltip">
       <slot>
         <div class="tooltip-list">
           <div class="tooltip-item" v-for="field in visibleColumns" :key="field.prop">
@@ -38,6 +38,22 @@ export default {
     // 一个列要同时有用 label 和 prop 才显示在浮层中, 并且prop有值时才显示
     visibleColumns() {
       return this.columns.filter(field => field.label && field.prop && this.data[field.prop])
+    },
+    // 修正后的tooltipStyle / 其实tooltipStyle只包含两个属性：top, left， 当在屏幕中无法完全展示时，需要根据实际情况调整位置
+    adjustedTooltipStyle() {
+      const { top, left } = this.tooltipStyle;
+      const tooltipRect = this.$refs.rowTooltip?.getBoundingClientRect();
+      if (!tooltipRect) return this.tooltipStyle;
+
+      // 检查是否超出底部边界
+      if (parseInt(top) + tooltipRect.height > window.innerHeight) {
+        return { ...this.tooltipStyle, top: `${window.innerHeight - tooltipRect.height - 12}px` };
+      }
+      // 检查是否超出右侧边界
+      if (parseInt(left) + tooltipRect.width > window.innerWidth) {
+        return { ...this.tooltipStyle, left: `${window.innerWidth - tooltipRect.width - 16}px` };
+      }
+      return this.tooltipStyle;
     }
   },
   methods: {
@@ -83,7 +99,7 @@ export default {
   padding: 12px 14px;
   pointer-events: none;
   z-index: 5;
-  max-height: 70%;
+  /* max-height: 70%; */
   overflow: auto;
 }
 </style>
\ No newline at end of file