feat(KLPTable): 增强浮层组件功能并优化表格显示

- 为浮层组件添加列数配置和排除列功能
- 优化浮层位置计算逻辑，防止超出视窗边界
- 调整表格列显示，移除不必要列并添加净重列
- 更新浮层样式，支持网格布局和响应式显示
- 扩展浮层配置项，支持更多自定义选项

klp-ui/src/components/KLPUI/KLPTable/FloatLayer/index.vue

@@ -2,7 +2,7 @@
   <transition name="el-fade-in-linear">
     <div v-if="tooltipVisible && data" class="row-tooltip" :style="adjustedTooltipStyle" ref="rowTooltip">
       <slot>
-        <div class="tooltip-list">
+        <div class="tooltip-list" :style="{ gridTemplateColumns: `repeat(${columnCount}, 1fr)` }">
           <div class="tooltip-item" v-for="field in visibleColumns" :key="field.prop">
             <span class="label">{{ field.label }}：</span>
             <span class="value">{{ formatTooltipValue(data, field) }}</span>
@@ -21,6 +21,10 @@ export default {
       type: Array,
       default: () => []
     },
+    columnCount: {
+      type: Number,
+      default: 2
+    },
     data: {
       type: Object,
       default: () => ({})
@@ -45,15 +49,34 @@ export default {
       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` };
+      let adjustedTop = parseInt(top);
+      let adjustedLeft = parseInt(left);
+      const offset = 16;
+
+      // 检查是否超出底部边界 - 如果超出，将浮层显示在鼠标上方
+      if (adjustedTop + tooltipRect.height > window.innerHeight) {
+        adjustedTop = adjustedTop - tooltipRect.height - offset;
       }
-      // 检查是否超出右侧边界
-      if (parseInt(left) + tooltipRect.width > window.innerWidth) {
-        return { ...this.tooltipStyle, left: `${window.innerWidth - tooltipRect.width - 16}px` };
+
+      // 检查是否超出右侧边界 - 如果超出，将浮层显示在鼠标左侧
+      if (adjustedLeft + tooltipRect.width > window.innerWidth) {
+        adjustedLeft = adjustedLeft - tooltipRect.width - offset;
       }
-      return this.tooltipStyle;
+
+      // 检查是否超出顶部边界
+      if (adjustedTop < 0) {
+        adjustedTop = offset;
+      }
+
+      // 检查是否超出左侧边界
+      if (adjustedLeft < 0) {
+        adjustedLeft = offset;
+      }
+
+      return {
+        top: `${adjustedTop}px`,
+        left: `${adjustedLeft}px`
+      };
     }
   },
   methods: {
@@ -98,9 +121,28 @@ export default {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   padding: 12px 14px;
   pointer-events: none;
-  z-index: 5;
-  /* max-height: 70%; */
+  z-index: 9999;
   overflow: auto;
   transition: all 0.3s ease-in-out;
 }
+
+.tooltip-list {
+  display: grid;
+  gap: 8px;
+}
+
+.tooltip-item {
+  display: flex;
+  align-items: flex-start;
+}
+
+.tooltip-item .label {
+  flex-shrink: 0;
+  color: #666;
+}
+
+.tooltip-item .value {
+  color: #333;
+  word-break: break-word;
+}
 </style>

klp-ui/src/components/KLPUI/KLPTable/index.vue

@@ -18,7 +18,7 @@
           <slot name="append" v-bind="scope"></slot>
         </template>
 
-        <!-- 3. 透传“自定义列”插槽（直接接收<el-table-column> 嵌套的情况） -->
+        <!-- 3. 透传"自定义列"插槽（直接接收<el-table-column> 嵌套的情况） -->
         <slot v-bind:tableRef="tableRef"></slot>
 
         <el-table-column v-if="selectionColumn" type="selection" width="55" align="center"></el-table-column>
@@ -27,7 +27,7 @@
       </el-table>
       <!-- 浮层组件 -->
       <KLPTableFloatLayer v-if="floatLayer" :columns="floatLayerColumns" :data="hoveredRow" :tooltipVisible="tooltipVisible"
-        :tooltipStyle="tooltipStyle" />
+        :tooltipStyle="tooltipStyle" :columnCount="floatLayerColumnCount" />
     </div>
     <!-- 扩展层：可后续统一添加分页（如与 MyPagination 组件联动） -->
     <slot name="pagination"></slot>
@@ -78,7 +78,9 @@ export default {
       type: Object,
       default: () => ({
         columns: [],
-        title: '详细信息'
+        title: '详细信息',
+        columnCount: 2,
+        excludeColumns: ['action']
       })
     },
     height: {
@@ -101,11 +103,16 @@ export default {
   },
   computed: {
     floatLayerColumns() {
-      console.log(this.floatLayerConfig?.columns?.length > 1)
       if (this.floatLayerConfig?.columns?.length > 1) {
         return this.floatLayerConfig.columns
       }
       return this.columns;
+    },
+    floatLayerColumnCount() {
+      return this.floatLayerConfig?.columnCount || 2;
+    },
+    excludeColumns() {
+      return this.floatLayerConfig?.excludeColumns || ['action'];
     }
   },
   methods: {
@@ -157,6 +164,15 @@ export default {
     // 浮层相关
     handleCellEnter(row, column, cell, event) {
       if (!row || !event) return
+      
+      // 检查是否是排除的列（操作列等）
+      const excludeColumns = this.excludeColumns
+      if (excludeColumns.includes(column.property)) {
+        this.tooltipVisible = false
+        this.hoveredRow = null
+        return
+      }
+      
       this.hoveredRow = row
       this.tooltipVisible = true
       this.updateTooltipPosition(event)