stk-table-vue 0.11.0 → 0.11.1

package/lib/index-t5SJ6KNv.js

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.0-beta.4
+ * version: v0.11.1
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

package/lib/src/StkTable/features/useAreaSelection.d.ts

@@ -3,8 +3,9 @@ import { CellKeyGen, ColKeyGen, StkTableColumn, UniqKey } from '../types';
 import { VirtualScrollStore, VirtualScrollXStore } from '../useVirtualScroll';
 
 /**
- * 单元格拖拽选区
- * en: Cell drag selection
+ * 单元格区域选择功能
+ * 支持鼠标拖拽选择、键盘导航、复制粘贴等功能
+ * en: Cell area selection feature with mouse drag, keyboard navigation, copy-paste, etc.
  */
 export declare function useAreaSelection<DT extends Record<string, any>>(props: any, emits: any, tableContainerRef: Ref<HTMLDivElement | undefined>, dataSourceCopy: ShallowRef<DT[]>, tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>, colKeyGen: ColKeyGen, cellKeyGen: CellKeyGen, scrollTo: (top: number | null, left: number | null) => void, virtualScroll: Ref<VirtualScrollStore>, virtualScrollX: Ref<VirtualScrollXStore>): {
     isSelecting: Ref<boolean, boolean>;

package/lib/stk-table-vue.js

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.0-beta.4
+ * version: v0.11.1
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -338,6 +338,19 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
   const EDGE_ZONE = 40;
   const SCROLL_SPEED_MAX = 15;
   const POINT_EDGE_OFFSET = 2;
+  const KEY_ARROW_UP = "ArrowUp";
+  const KEY_ARROW_DOWN = "ArrowDown";
+  const KEY_ARROW_LEFT = "ArrowLeft";
+  const KEY_ARROW_RIGHT = "ArrowRight";
+  const KEY_TAB = "Tab";
+  const KEY_ESCAPE = "Escape";
+  const KEY_ESC = "Esc";
+  const KEY_C = "c";
+  const CELL_RANGE_SELECTED = "cell-range-selected";
+  const CELL_RANGE_TOP = "cell-range-t";
+  const CELL_RANGE_BOTTOM = "cell-range-b";
+  const CELL_RANGE_LEFT = "cell-range-l";
+  const CELL_RANGE_RIGHT = "cell-range-r";
   const selectionRange = ref(null);
   const isSelecting = ref(false);
   let anchorCell = null;
@@ -411,6 +424,78 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     if (!colKey) return -1;
     return colKeyToIndexMap.value.get(colKey) ?? -1;
   }
+  function getColPosition(colIndex) {
+    let l = 0;
+    let w = 0;
+    const cols = tableHeaderLast.value;
+    for (let i = 0; i < cols.length; i++) {
+      const colWidth = getCalculatedColWidth(cols[i]);
+      if (i < colIndex) {
+        l += colWidth;
+      } else if (i === colIndex) {
+        w = colWidth;
+        break;
+      }
+    }
+    return { l, w };
+  }
+  function getMovementDelta(key, shiftKey) {
+    let rowDelta = 0;
+    let colDelta = 0;
+    switch (key) {
+      case KEY_ARROW_UP:
+        rowDelta = -1;
+        break;
+      case KEY_ARROW_DOWN:
+        rowDelta = 1;
+        break;
+      case KEY_ARROW_LEFT:
+        colDelta = -1;
+        break;
+      case KEY_ARROW_RIGHT:
+        colDelta = 1;
+        break;
+      case KEY_TAB:
+        colDelta = shiftKey ? -1 : 1;
+        break;
+    }
+    return [rowDelta, colDelta];
+  }
+  function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+  }
+  function handleTabWrap(row, col, rawCol, rowCount, colCount) {
+    let newRow = row;
+    let newCol = col;
+    if (rawCol >= colCount) {
+      newCol = 0;
+      newRow = Math.min(row + 1, rowCount - 1);
+    } else if (rawCol < 0) {
+      newCol = colCount - 1;
+      newRow = Math.max(row - 1, 0);
+    }
+    return [newRow, newCol];
+  }
+  function calculateAutoScrollDelta(mouseX, mouseY, rect) {
+    const { top, bottom, left, right } = rect;
+    let deltaX = 0;
+    let deltaY = 0;
+    if (mouseY < top + EDGE_ZONE) {
+      const dist = Math.max(0, top + EDGE_ZONE - mouseY);
+      deltaY = -Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
+    } else if (mouseY > bottom - EDGE_ZONE) {
+      const dist = Math.max(0, mouseY - (bottom - EDGE_ZONE));
+      deltaY = Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
+    }
+    if (mouseX < left + EDGE_ZONE) {
+      const dist = Math.max(0, left + EDGE_ZONE - mouseX);
+      deltaX = -Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
+    } else if (mouseX > right - EDGE_ZONE) {
+      const dist = Math.max(0, mouseX - (right - EDGE_ZONE));
+      deltaX = Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
+    }
+    return { deltaX, deltaY };
+  }
   function onSelectionMouseDown(e) {
     if (!props.areaSelection || e.button !== 0) return;
     const rowIndex = getClosestTrIndex(e.target);
@@ -484,23 +569,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
       return;
     }
     const rect = container.getBoundingClientRect();
-    const { top, bottom, left, right } = rect;
-    let deltaX = 0;
-    let deltaY = 0;
-    if (lastMouseClientY < top + EDGE_ZONE) {
-      const dist = Math.max(0, top + EDGE_ZONE - lastMouseClientY);
-      deltaY = -Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
-    } else if (lastMouseClientY > bottom - EDGE_ZONE) {
-      const dist = Math.max(0, lastMouseClientY - (bottom - EDGE_ZONE));
-      deltaY = Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
-    }
-    if (lastMouseClientX < left + EDGE_ZONE) {
-      const dist = Math.max(0, left + EDGE_ZONE - lastMouseClientX);
-      deltaX = -Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
-    } else if (lastMouseClientX > right - EDGE_ZONE) {
-      const dist = Math.max(0, lastMouseClientX - (right - EDGE_ZONE));
-      deltaX = Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
-    }
+    const { deltaX, deltaY } = calculateAutoScrollDelta(lastMouseClientX, lastMouseClientY, rect);
     if (deltaX !== 0 || deltaY !== 0) {
       container.scrollTop += deltaY;
       container.scrollLeft += deltaX;
@@ -597,7 +666,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
   function onKeydown(e) {
     if (!props.areaSelection) return;
     const key = e.key;
-    if (key === "Escape" || key === "Esc") {
+    if (key === KEY_ESCAPE || key === KEY_ESC) {
       if (selectionRange.value) {
         clearSelectedArea();
         emitSelectionChange();
@@ -605,14 +674,14 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
       }
       return;
     }
-    if ((e.ctrlKey || e.metaKey) && key === "c" && selectionRange.value) {
+    if ((e.ctrlKey || e.metaKey) && key === KEY_C && selectionRange.value) {
       copySelectedArea();
       e.preventDefault();
       return;
     }
     if (!keyboardEnabled.value) return;
-    const isArrowKey = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key);
-    const isTabKey = key === "Tab";
+    const isArrowKey = [KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_ARROW_LEFT, KEY_ARROW_RIGHT].includes(key);
+    const isTabKey = key === KEY_TAB;
     const isNavigationKey = isArrowKey || isTabKey;
     if (!isNavigationKey) return;
     e.preventDefault();
@@ -631,25 +700,13 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
       scrollToCell(0, 0);
       return;
     }
-    let rowDelta = 0;
-    let colDelta = 0;
-    if (key === "ArrowUp") {
-      rowDelta = -1;
-    } else if (key === "ArrowDown") {
-      rowDelta = 1;
-    } else if (key === "ArrowLeft") {
-      colDelta = -1;
-    } else if (key === "ArrowRight") {
-      colDelta = 1;
-    } else if (key === "Tab") {
-      colDelta = e.shiftKey ? -1 : 1;
-    }
+    const [rowDelta, colDelta] = getMovementDelta(key, e.shiftKey);
     if (e.shiftKey && isArrowKey) {
       const range = selectionRange.value;
       let newEndRow = range.endRowIndex + rowDelta;
       let newEndCol = range.endColIndex + colDelta;
-      newEndRow = Math.max(0, Math.min(newEndRow, rowCount - 1));
-      newEndCol = Math.max(0, Math.min(newEndCol, colCount - 1));
+      newEndRow = clamp(newEndRow, 0, rowCount - 1);
+      newEndCol = clamp(newEndCol, 0, colCount - 1);
       selectionRange.value = {
         ...range,
         endRowIndex: newEndRow,
@@ -661,17 +718,13 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
       const { minRow, minCol } = normalizeRange(range);
       let newRow = minRow + rowDelta;
       let newCol = minCol + colDelta;
-      newRow = Math.max(0, Math.min(newRow, rowCount - 1));
-      newCol = Math.max(0, Math.min(newCol, colCount - 1));
+      newRow = clamp(newRow, 0, rowCount - 1);
+      newCol = clamp(newCol, 0, colCount - 1);
       if (isTabKey) {
         const rawCol = minCol + colDelta;
-        if (rawCol >= colCount) {
-          newCol = 0;
-          newRow = Math.min(minRow + 1, rowCount - 1);
-        } else if (rawCol < 0) {
-          newCol = colCount - 1;
-          newRow = Math.max(minRow - 1, 0);
-        }
+        const [tabRow, tabCol] = handleTabWrap(minRow, newCol, rawCol, rowCount, colCount);
+        newRow = tabRow;
+        newCol = tabCol;
       }
       anchorCell = { rowIndex: newRow, colIndex: newCol };
       selectionRange.value = {
@@ -692,31 +745,22 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     if (!row || !col) return;
     const thead = container.querySelector("thead");
     const headerHeight = thead ? thead.offsetHeight : 0;
+    const tfoot = container.querySelector("tfoot");
+    const footerHeight = tfoot ? tfoot.offsetHeight : 0;
     const vs = virtualScroll.value;
     const vsx = virtualScrollX.value;
     const rowHeight = vs.rowHeight;
     const targetRowTop = rowIndex * rowHeight;
     const targetRowBottom = targetRowTop + rowHeight;
     const visibleTop = container.scrollTop;
-    const visibleBottom = visibleTop + vs.containerHeight - headerHeight;
+    const visibleBottom = visibleTop + vs.containerHeight - headerHeight - footerHeight;
     let newScrollTop = null;
     if (targetRowTop < visibleTop) {
       newScrollTop = targetRowTop;
     } else if (targetRowBottom > visibleBottom) {
-      newScrollTop = targetRowBottom - (vs.containerHeight - headerHeight);
-    }
-    let targetColLeft = 0;
-    let targetColWidth = 0;
-    const cols = tableHeaderLast.value;
-    for (let i = 0; i < cols.length; i++) {
-      const colWidth = getCalculatedColWidth(cols[i]) || 100;
-      if (i < colIndex) {
-        targetColLeft += colWidth;
-      } else if (i === colIndex) {
-        targetColWidth = colWidth;
-        break;
-      }
+      newScrollTop = targetRowBottom - (vs.containerHeight - headerHeight - footerHeight);
     }
+    const { l: targetColLeft, w: targetColWidth } = getColPosition(colIndex);
     const targetColRight = targetColLeft + targetColWidth;
     const visibleLeft = container.scrollLeft;
     const visibleRight = visibleLeft + vsx.containerWidth;
@@ -735,11 +779,11 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     if (!nr || !selectedCellKeys.value.has(cellKey)) return [];
     const colIndex = colKeyToIndexMap.value.get(colKey);
     if (colIndex === void 0 || colIndex < 0) return [];
-    const classes = ["cell-range-selected"];
-    if (absoluteRowIndex === nr.minRow) classes.push("cell-range-t");
-    if (absoluteRowIndex === nr.maxRow) classes.push("cell-range-b");
-    if (colIndex === nr.minCol) classes.push("cell-range-l");
-    if (colIndex === nr.maxCol) classes.push("cell-range-r");
+    const classes = [CELL_RANGE_SELECTED];
+    if (absoluteRowIndex === nr.minRow) classes.push(CELL_RANGE_TOP);
+    if (absoluteRowIndex === nr.maxRow) classes.push(CELL_RANGE_BOTTOM);
+    if (colIndex === nr.minCol) classes.push(CELL_RANGE_LEFT);
+    if (colIndex === nr.maxCol) classes.push(CELL_RANGE_RIGHT);
     return classes;
   }
   function getSelectedArea() {

package/lib/style.css

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.0-beta.4
+ * version: v0.11.1
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "High performance realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/features/useAreaSelection.ts

@@ -5,8 +5,9 @@ import { getClosestColKey, getClosestTrIndex } from '../utils';
 import { getCalculatedColWidth } from '../utils/constRefUtils';
 
 /**
- * 单元格拖拽选区
- * en: Cell drag selection
+ * 单元格区域选择功能
+ * 支持鼠标拖拽选择、键盘导航、复制粘贴等功能
+ * en: Cell area selection feature with mouse drag, keyboard navigation, copy-paste, etc.
  */
 export function useAreaSelection<DT extends Record<string, any>>(
     props: any,
@@ -30,9 +31,24 @@ export function useAreaSelection<DT extends Record<string, any>>(
      * en: Maximum scroll pixels per frame
      */
     const SCROLL_SPEED_MAX = 15;
-
     const POINT_EDGE_OFFSET = 2;
 
+    const KEY_ARROW_UP = 'ArrowUp';
+    const KEY_ARROW_DOWN = 'ArrowDown';
+    const KEY_ARROW_LEFT = 'ArrowLeft';
+    const KEY_ARROW_RIGHT = 'ArrowRight';
+    const KEY_TAB = 'Tab';
+    const KEY_ESCAPE = 'Escape';
+    const KEY_ESC = 'Esc';
+    const KEY_C = 'c';
+
+    // CSS
+    const CELL_RANGE_SELECTED = 'cell-range-selected';
+    const CELL_RANGE_TOP = 'cell-range-t';
+    const CELL_RANGE_BOTTOM = 'cell-range-b';
+    const CELL_RANGE_LEFT = 'cell-range-l';
+    const CELL_RANGE_RIGHT = 'cell-range-r';
+
     /** 当前选区范围 */
     const selectionRange = ref<AreaSelectionRange | null>(null) as Ref<AreaSelectionRange | null>;
     /** 是否正在拖选 */
@@ -128,6 +144,98 @@ export function useAreaSelection<DT extends Record<string, any>>(
         return colKeyToIndexMap.value.get(colKey) ?? -1;
     }
 
+    /** 获取列的左边距和宽度 */
+    function getColPosition(colIndex: number): { l: number; w: number } {
+        let l = 0;
+        let w = 0;
+        const cols = tableHeaderLast.value;
+        for (let i = 0; i < cols.length; i++) {
+            const colWidth = getCalculatedColWidth(cols[i]);
+            if (i < colIndex) {
+                l += colWidth;
+            } else if (i === colIndex) {
+                w = colWidth;
+                break;
+            }
+        }
+        return { l, w };
+    }
+
+    /** 根据按键计算移动方向 */
+    function getMovementDelta(key: string, shiftKey: boolean): [number, number] {
+        let rowDelta = 0;
+        let colDelta = 0;
+
+        switch (key) {
+            case KEY_ARROW_UP:
+                rowDelta = -1;
+                break;
+            case KEY_ARROW_DOWN:
+                rowDelta = 1;
+                break;
+            case KEY_ARROW_LEFT:
+                colDelta = -1;
+                break;
+            case KEY_ARROW_RIGHT:
+                colDelta = 1;
+                break;
+            case KEY_TAB:
+                // Tab: 向右移动；Shift+Tab: 向左移动
+                colDelta = shiftKey ? -1 : 1;
+                break;
+        }
+
+        return [rowDelta, colDelta];
+    }
+
+    /** 钳制值到指定范围内 */
+    function clamp(value: number, min: number, max: number): number {
+        return Math.max(min, Math.min(value, max));
+    }
+
+    /** 处理Tab键的换行逻辑 */
+    function handleTabWrap(row: number, col: number, rawCol: number, rowCount: number, colCount: number): [number, number] {
+        let newRow = row;
+        let newCol = col;
+
+        if (rawCol >= colCount) {
+            newCol = 0;
+            newRow = Math.min(row + 1, rowCount - 1);
+        } else if (rawCol < 0) {
+            newCol = colCount - 1;
+            newRow = Math.max(row - 1, 0);
+        }
+
+        return [newRow, newCol];
+    }
+
+    /** 计算自动滚动的增量 */
+    function calculateAutoScrollDelta(mouseX: number, mouseY: number, rect: DOMRect): { deltaX: number; deltaY: number } {
+        const { top, bottom, left, right } = rect;
+        let deltaX = 0;
+        let deltaY = 0;
+
+        // Y方向
+        if (mouseY < top + EDGE_ZONE) {
+            const dist = Math.max(0, top + EDGE_ZONE - mouseY);
+            deltaY = -Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
+        } else if (mouseY > bottom - EDGE_ZONE) {
+            const dist = Math.max(0, mouseY - (bottom - EDGE_ZONE));
+            deltaY = Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
+        }
+
+        // X方向
+        if (mouseX < left + EDGE_ZONE) {
+            const dist = Math.max(0, left + EDGE_ZONE - mouseX);
+            deltaX = -Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
+        } else if (mouseX > right - EDGE_ZONE) {
+            const dist = Math.max(0, mouseX - (right - EDGE_ZONE));
+            deltaX = Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
+        }
+
+        return { deltaX, deltaY };
+    }
+
     /** mousedown 处理：设置锚点，开始拖选 */
     function onSelectionMouseDown(e: MouseEvent) {
         if (!props.areaSelection || e.button !== 0) return;
@@ -238,27 +346,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
         }
 
         const rect = container.getBoundingClientRect();
-        const { top, bottom, left, right } = rect;
-        let deltaX = 0;
-        let deltaY = 0;
-
-        // Y方向
-        if (lastMouseClientY < top + EDGE_ZONE) {
-            const dist = Math.max(0, top + EDGE_ZONE - lastMouseClientY);
-            deltaY = -Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
-        } else if (lastMouseClientY > bottom - EDGE_ZONE) {
-            const dist = Math.max(0, lastMouseClientY - (bottom - EDGE_ZONE));
-            deltaY = Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
-        }
-
-        // X方向
-        if (lastMouseClientX < left + EDGE_ZONE) {
-            const dist = Math.max(0, left + EDGE_ZONE - lastMouseClientX);
-            deltaX = -Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
-        } else if (lastMouseClientX > right - EDGE_ZONE) {
-            const dist = Math.max(0, lastMouseClientX - (right - EDGE_ZONE));
-            deltaX = Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
-        }
+        const { deltaX, deltaY } = calculateAutoScrollDelta(lastMouseClientX, lastMouseClientY, rect);
 
         if (deltaX !== 0 || deltaY !== 0) {
             container.scrollTop += deltaY;
@@ -401,7 +489,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
         const key = e.key;
 
         // Esc 键：取消当前选区
-        if (key === 'Escape' || key === 'Esc') {
+        if (key === KEY_ESCAPE || key === KEY_ESC) {
             if (selectionRange.value) {
                 clearSelectedArea();
                 emitSelectionChange();
@@ -411,7 +499,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
         }
 
         // Ctrl/Cmd+C 复制选区
-        if ((e.ctrlKey || e.metaKey) && key === 'c' && selectionRange.value) {
+        if ((e.ctrlKey || e.metaKey) && key === KEY_C && selectionRange.value) {
             copySelectedArea();
             e.preventDefault();
             return;
@@ -420,8 +508,8 @@ export function useAreaSelection<DT extends Record<string, any>>(
         // 键盘导航（需要启用 keyboard 选项）
         if (!keyboardEnabled.value) return;
 
-        const isArrowKey = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key);
-        const isTabKey = key === 'Tab';
+        const isArrowKey = [KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_ARROW_LEFT, KEY_ARROW_RIGHT].includes(key);
+        const isTabKey = key === KEY_TAB;
         const isNavigationKey = isArrowKey || isTabKey;
 
         if (!isNavigationKey) return;
@@ -447,21 +535,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
         }
 
         // 计算移动方向
-        let rowDelta = 0;
-        let colDelta = 0;
-
-        if (key === 'ArrowUp') {
-            rowDelta = -1;
-        } else if (key === 'ArrowDown') {
-            rowDelta = 1;
-        } else if (key === 'ArrowLeft') {
-            colDelta = -1;
-        } else if (key === 'ArrowRight') {
-            colDelta = 1;
-        } else if (key === 'Tab') {
-            // Tab: 向右移动；Shift+Tab: 向左移动
-            colDelta = e.shiftKey ? -1 : 1;
-        }
+        const [rowDelta, colDelta] = getMovementDelta(key, e.shiftKey);
 
         // Shift 扩展选区，否则移动单格选区
         if (e.shiftKey && isArrowKey) {
@@ -471,8 +545,8 @@ export function useAreaSelection<DT extends Record<string, any>>(
             let newEndCol = range.endColIndex + colDelta;
 
             // 边界检查
-            newEndRow = Math.max(0, Math.min(newEndRow, rowCount - 1));
-            newEndCol = Math.max(0, Math.min(newEndCol, colCount - 1));
+            newEndRow = clamp(newEndRow, 0, rowCount - 1);
+            newEndCol = clamp(newEndCol, 0, colCount - 1);
 
             selectionRange.value = {
                 ...range,
@@ -490,20 +564,16 @@ export function useAreaSelection<DT extends Record<string, any>>(
             let newCol = minCol + colDelta;
 
             // 边界检查（先检查，避免越界）
-            newRow = Math.max(0, Math.min(newRow, rowCount - 1));
-            newCol = Math.max(0, Math.min(newCol, colCount - 1));
+            newRow = clamp(newRow, 0, rowCount - 1);
+            newCol = clamp(newCol, 0, colCount - 1);
 
             // Tab 换行逻辑：如果到达行尾/行首，换行
             if (isTabKey) {
                 // 计算原始未 clamp 的值
                 const rawCol = minCol + colDelta;
-                if (rawCol >= colCount) {
-                    newCol = 0;
-                    newRow = Math.min(minRow + 1, rowCount - 1);
-                } else if (rawCol < 0) {
-                    newCol = colCount - 1;
-                    newRow = Math.max(minRow - 1, 0);
-                }
+                const [tabRow, tabCol] = handleTabWrap(minRow, newCol, rawCol, rowCount, colCount);
+                newRow = tabRow;
+                newCol = tabCol;
             }
 
             // 更新锚点和选区
@@ -523,6 +593,8 @@ export function useAreaSelection<DT extends Record<string, any>>(
 
     /**
      * 滚动到指定单元格，确保其在可视区域内
+     * @param rowIndex 行索引
+     * @param colIndex 列索引
      */
     function scrollToCell(rowIndex: number, colIndex: number) {
         const container = tableContainerRef.value;
@@ -532,9 +604,10 @@ export function useAreaSelection<DT extends Record<string, any>>(
         const col = tableHeaderLast.value[colIndex];
         if (!row || !col) return;
 
-        // 获取表头高度
         const thead = container.querySelector('thead');
         const headerHeight = thead ? thead.offsetHeight : 0;
+        const tfoot = container.querySelector('tfoot');
+        const footerHeight = tfoot ? tfoot.offsetHeight : 0;
 
         const vs = virtualScroll.value;
         const vsx = virtualScrollX.value;
@@ -546,7 +619,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
 
         // 计算可视区域
         const visibleTop = container.scrollTop;
-        const visibleBottom = visibleTop + vs.containerHeight - headerHeight;
+        const visibleBottom = visibleTop + vs.containerHeight - headerHeight - footerHeight;
 
         // 计算需要的垂直滚动位置
         let newScrollTop: number | null = null;
@@ -555,22 +628,11 @@ export function useAreaSelection<DT extends Record<string, any>>(
             newScrollTop = targetRowTop;
         } else if (targetRowBottom > visibleBottom) {
             // 目标行在可视区域下方，滚动到使目标行位于底部
-            newScrollTop = targetRowBottom - (vs.containerHeight - headerHeight);
+            newScrollTop = targetRowBottom - (vs.containerHeight - headerHeight - footerHeight);
         }
 
         // 计算目标列的位置
-        let targetColLeft = 0;
-        let targetColWidth = 0;
-        const cols = tableHeaderLast.value;
-        for (let i = 0; i < cols.length; i++) {
-            const colWidth = getCalculatedColWidth(cols[i]) || 100; // 默认100px
-            if (i < colIndex) {
-                targetColLeft += colWidth;
-            } else if (i === colIndex) {
-                targetColWidth = colWidth;
-                break;
-            }
-        }
+        const { l: targetColLeft, w: targetColWidth } = getColPosition(colIndex);
         const targetColRight = targetColLeft + targetColWidth;
 
         // 计算可视区域（水平）
@@ -594,10 +656,11 @@ export function useAreaSelection<DT extends Record<string, any>>(
     }
 
     /**
-     * 判断一个单元格的选区 class
+     * 判断一个单元格的选区样式类名
      * @param cellKey 单元格唯一键
      * @param absoluteRowIndex 行在 dataSourceCopy 中的绝对索引
      * @param colKey 列唯一键
+     * @returns 样式类名数组
      */
     function getAreaSelectionClasses(cellKey: string, absoluteRowIndex: number, colKey: UniqKey): string[] {
         const nr = normalizedRange.value;
@@ -606,11 +669,11 @@ export function useAreaSelection<DT extends Record<string, any>>(
         const colIndex = colKeyToIndexMap.value.get(colKey);
         if (colIndex === void 0 || colIndex < 0) return [];
 
-        const classes: string[] = ['cell-range-selected'];
-        if (absoluteRowIndex === nr.minRow) classes.push('cell-range-t');
-        if (absoluteRowIndex === nr.maxRow) classes.push('cell-range-b');
-        if (colIndex === nr.minCol) classes.push('cell-range-l');
-        if (colIndex === nr.maxCol) classes.push('cell-range-r');
+        const classes: string[] = [CELL_RANGE_SELECTED];
+        if (absoluteRowIndex === nr.minRow) classes.push(CELL_RANGE_TOP);
+        if (absoluteRowIndex === nr.maxRow) classes.push(CELL_RANGE_BOTTOM);
+        if (colIndex === nr.minCol) classes.push(CELL_RANGE_LEFT);
+        if (colIndex === nr.maxCol) classes.push(CELL_RANGE_RIGHT);
         return classes;
     }