stk-table-vue 0.11.10 → 0.11.11

package/README.md

@@ -44,18 +44,18 @@ const stkTableRef = ref<InstanceType<typeof StkTable>>();
 const stkTableRef = useTemplateRef('stkTableRef');
 
 // highlight row
-stkTableRef.value.setHighlightDimRow([rowKey]，{
-  method: 'css'|'animation',// default animation。
-  className: 'custom-class-name', // method css。
-  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}],//same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
-  duration: 2000,。
+stkTableRef.value.setHighlightDimRow([rowKey], {
+  method: 'css' | 'animation', // default animation
+  className: 'custom-class-name', // for method 'css'
+  keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
+  duration: 2000,
 });
- // highlight cell
+// highlight cell
 stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
-  method: 'css'|'animation',
-  className:'custom-class-name', // method css。
-  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}], // method animation。
-  duration: 2000,。
+  method: 'css' | 'animation',
+  className: 'custom-class-name', // for method 'css'
+  keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // for method 'animation'
+  duration: 2000,
 });
 
 const columns = [

package/lib/index-C40Rz-HL.js

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.10
+ * version: v0.11.11
  * 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/types/index.d.ts

@@ -320,8 +320,20 @@ export type RowActiveOption<DT> = {
 /** 单元格选区范围 */
 export type AreaSelectionRange = {
     index: {
+        /** column index range @deprecated */
         x: [number, number];
+        /** row index range @deprecated */
         y: [number, number];
+        /** start point index*/
+        begin: {
+            row: number;
+            col: number;
+        };
+        /** end point index */
+        end: {
+            row: number;
+            col: number;
+        };
     };
 };
 /** 单元格选区配置 */

package/lib/stk-table-vue.js

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.10
+ * version: v0.11.11
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -458,6 +458,44 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
   onBeforeUnmount(() => {
     removeListener();
   });
+  watch([() => dataSourceCopy.value.length, () => tableHeaderLast.value.length], ([rowCount, colCount]) => {
+    if (!config.value.enabled) return;
+    if (anchorCell) {
+      if (rowCount === 0 || colCount === 0) {
+        anchorCell = null;
+      } else {
+        anchorCell.rowIndex = clamp(anchorCell.rowIndex, 0, rowCount - 1);
+        anchorCell.colIndex = clamp(anchorCell.colIndex, 0, colCount - 1);
+      }
+    }
+    if (!selectionRanges.value.length) return;
+    if (rowCount === 0 || colCount === 0) {
+      clearSelectedArea();
+      emitSelectionChange();
+      return;
+    }
+    const maxRow = rowCount - 1;
+    const maxCol = colCount - 1;
+    let changed = false;
+    const newRanges = [];
+    for (const range of selectionRanges.value) {
+      const { begin, end } = range.index;
+      const nbRow = clamp(begin.row, 0, maxRow);
+      const nbCol = clamp(begin.col, 0, maxCol);
+      const neRow = clamp(end.row, 0, maxRow);
+      const neCol = clamp(end.col, 0, maxCol);
+      if (nbRow !== begin.row || nbCol !== begin.col || neRow !== end.row || neCol !== end.col) {
+        changed = true;
+        newRanges.push(makeRange(nbRow, nbCol, neRow, neCol));
+      } else {
+        newRanges.push(range);
+      }
+    }
+    if (changed) {
+      selectionRanges.value = newRanges;
+      emitSelectionChange();
+    }
+  });
   function addListener() {
     removeListener();
     const el = tableContainerRef.value;
@@ -475,14 +513,22 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     stopAutoScroll();
   }
   function normalizeRange(range) {
-    const { index } = range;
-    const [x1, x2] = index.x;
-    const [y1, y2] = index.y;
+    const { begin, end } = range.index;
+    return {
+      minRow: Math.min(begin.row, end.row),
+      maxRow: Math.max(begin.row, end.row),
+      minCol: Math.min(begin.col, end.col),
+      maxCol: Math.max(begin.col, end.col)
+    };
+  }
+  function makeRange(beginRow, beginCol, endRow, endCol) {
     return {
-      minRow: Math.min(y1, y2),
-      maxRow: Math.max(y1, y2),
-      minCol: Math.min(x1, x2),
-      maxCol: Math.max(x1, x2)
+      index: {
+        x: [beginCol, endCol],
+        y: [beginRow, endRow],
+        begin: { row: beginRow, col: beginCol },
+        end: { row: endRow, col: endCol }
+      }
     };
   }
   function getColIndexByKey(colKey) {
@@ -568,20 +614,10 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     const colIndex = getColIndexByKey(colKey);
     if (rowIndex < 0 || colIndex < 0) return;
     const ctrlKey = e.ctrlKey || e.metaKey;
-    const range = {
-      index: {
-        x: [colIndex, colIndex],
-        y: [rowIndex, rowIndex]
-      }
-    };
+    const range = makeRange(rowIndex, colIndex, rowIndex, colIndex);
     if (e.shiftKey && anchorCell && shiftEnabled.value) {
       const ranges = selectionRanges.value.slice();
-      const shiftRange = {
-        index: {
-          x: [anchorCell.colIndex, colIndex],
-          y: [anchorCell.rowIndex, rowIndex]
-        }
-      };
+      const shiftRange = makeRange(anchorCell.rowIndex, anchorCell.colIndex, rowIndex, colIndex);
       if (ranges.length) {
         ranges[ranges.length - 1] = shiftRange;
       } else {
@@ -621,12 +657,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
   }
   function updateSelectionEnd(endRowIndex, endColIndex) {
     if (!anchorCell) return;
-    const newRange = {
-      index: {
-        x: [anchorCell.colIndex, endColIndex],
-        y: [anchorCell.rowIndex, endRowIndex]
-      }
-    };
+    const newRange = makeRange(anchorCell.rowIndex, anchorCell.colIndex, endRowIndex, endColIndex);
     const ranges = [...selectionRanges.value];
     if (ranges.length > 0) {
       ranges[ranges.length - 1] = newRange;
@@ -762,14 +793,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     if (rowCount === 0 || colCount === 0) return;
     if (!selectionRanges.value.length) {
       anchorCell = { rowIndex: 0, colIndex: 0 };
-      selectionRanges.value = [
-        {
-          index: {
-            x: [0, 0],
-            y: [0, 0]
-          }
-        }
-      ];
+      selectionRanges.value = [makeRange(0, 0, 0, 0)];
       emitSelectionChange();
       scrollToCell(0, 0);
       return;
@@ -779,17 +803,12 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
       const ranges = [...selectionRanges.value];
       const range = ranges.length > 0 ? ranges[ranges.length - 1] : null;
       if (!range) return;
-      const { index } = range;
-      let newEndRow = index.y[1] + rowDelta;
-      let newEndCol = index.x[1] + colDelta;
+      const { begin, end } = range.index;
+      let newEndRow = end.row + rowDelta;
+      let newEndCol = end.col + colDelta;
       newEndRow = clamp(newEndRow, 0, rowCount - 1);
       newEndCol = clamp(newEndCol, 0, colCount - 1);
-      ranges[ranges.length - 1] = {
-        index: {
-          x: [index.x[0], newEndCol],
-          y: [index.y[0], newEndRow]
-        }
-      };
+      ranges[ranges.length - 1] = makeRange(begin.row, begin.col, newEndRow, newEndCol);
       selectionRanges.value = ranges;
       scrollToCell(newEndRow, newEndCol);
     } else {
@@ -808,14 +827,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
         newCol = tabCol;
       }
       anchorCell = { rowIndex: newRow, colIndex: newCol };
-      selectionRanges.value = [
-        {
-          index: {
-            x: [newCol, newCol],
-            y: [newRow, newRow]
-          }
-        }
-      ];
+      selectionRanges.value = [makeRange(newRow, newCol, newRow, newCol)];
       scrollToCell(newRow, newCol);
     }
     emitSelectionChange();
@@ -928,8 +940,10 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 const useAreaSelectionName = "useAreaSelection";
 useAreaSelection[MY_FN_NAME] = useAreaSelectionName;
 const ON_DEMAND_FEATURE = {
-  [useAreaSelectionName]: () => {
-    console.warn("useAreaSelection is not registered");
+  [useAreaSelectionName]: (props) => {
+    if ("useAreaSelection" in props) {
+      console.warn("useAreaSelection is not registered");
+    }
     return {
       config: computed(() => ({ enabled: false })),
       isSelecting: ref(false),
@@ -947,7 +961,7 @@ const ON_DEMAND_FEATURE = {
 function registerFeature(feature) {
   const features = Array.isArray(feature) ? feature : [feature];
   features.forEach((f) => {
-    const fnName = f.stkName;
+    const fnName = f[MY_FN_NAME];
     if (!fnName) {
       console.warn("invalid feature");
       return;
@@ -1209,9 +1223,12 @@ function useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableH
     }
     const leftShadowCol = [];
     const rightShadowCol = [];
-    tableHeadersForCalc.value.forEach((row, level) => {
+    const len = tableHeadersForCalc.value.length;
+    for (let level = 0; level < len; level++) {
+      const row = tableHeadersForCalc.value[level];
       let left = 0;
-      row.forEach((col) => {
+      for (let i = 0, rowLen = row.length; i < rowLen; i++) {
+        const col = row[i];
         const position = getFixedColPositionValue(col);
         const isFixedLeft = col.fixed === "left";
         const isFixedRight = col.fixed === "right";
@@ -1226,8 +1243,8 @@ function useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableH
             rightShadowCol[level] = col;
           }
         }
-      });
-    });
+      }
+    }
     if (props.fixedColShadow) {
       fixedShadowCols.value = leftShadowCol.concat(rightShadowCol).filter(Boolean);
     }
@@ -1382,7 +1399,7 @@ function useHighlight(props, stkTableId, tableContainerRef) {
     if (method === "animation") {
       cellEl.animate(keyframe, duration);
     } else {
-      highlightCellsInCssKeyFrame(cellEl, rowKeyValue, className, duration);
+      highlightCellsInCssKeyFrame(cellEl, rowKeyValue, colKeyValue, className, duration);
     }
   }
   function setHighlightDimRow(rowKeyValues, option = {}) {
@@ -1442,18 +1459,22 @@ function useHighlight(props, stkTableId, tableContainerRef) {
     }
     rowElTemp.forEach((el) => el.classList.add(className));
   }
-  function highlightCellsInCssKeyFrame(cellEl, rowKeyValue, className, duration) {
+  function highlightCellsInCssKeyFrame(cellEl, rowKeyValue, colKeyValue, className, duration) {
     if (cellEl.classList.contains(className)) {
       cellEl.classList.remove(className);
       void cellEl.offsetHeight;
     }
     cellEl.classList.add(className);
-    window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
+    const cellKey = `${rowKeyValue}-${colKeyValue}`;
+    window.clearTimeout(highlightDimCellsTimeout.get(cellKey));
+    if (!duration) {
+      return;
+    }
     highlightDimCellsTimeout.set(
-      rowKeyValue,
+      cellKey,
       window.setTimeout(() => {
         cellEl.classList.remove(className);
-        highlightDimCellsTimeout.delete(rowKeyValue);
+        highlightDimCellsTimeout.delete(cellKey);
       }, duration)
     );
   }
@@ -2819,11 +2840,15 @@ const _hoisted_14 = {
   class: "vt-x-left"
 };
 const _hoisted_15 = ["colspan"];
-const _hoisted_16 = { class: "table-cell-wrapper" };
+const _hoisted_16 = {
+  class: "table-cell-wrapper",
+  tabindex: "-1"
+};
 const _hoisted_17 = ["title"];
 const _hoisted_18 = {
   key: 2,
-  class: "table-cell-wrapper"
+  class: "table-cell-wrapper",
+  tabindex: "-1"
 };
 const _hoisted_19 = ["title"];
 const _hoisted_20 = { key: 2 };
@@ -3495,9 +3520,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         dom.scrollLeft += distance;
       }
     }
+    let scrollRAFScheduled = false;
     function onTableScroll(e) {
-      if (!(e == null ? void 0 : e.target)) return;
+      if (!(e == null ? void 0 : e.target) || scrollRAFScheduled) return;
+      scrollRAFScheduled = true;
       requestAnimationFrame(() => {
+        scrollRAFScheduled = false;
         const { scrollTop, scrollLeft } = e.target;
         const { scrollTop: vScrollTop } = virtualScroll.value;
         const { scrollLeft: vScrollLeft } = virtualScrollX.value;
@@ -3928,6 +3956,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         col.customFooterCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customFooterCell), {
                           key: 0,
                           class: "table-cell-wrapper",
+                          tabindex: "-1",
                           col,
                           row: footRow,
                           rowIndex: footRowIndex,
@@ -3936,6 +3965,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : createCommentVNode("", true),
                         createElementVNode("div", {
                           class: "table-cell-wrapper",
+                          tabindex: "-1",
                           title: footRow[col.dataIndex] || ""
                         }, [
                           footRow[col.dataIndex] != null ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(footRow[col.dataIndex]), 1)) : createCommentVNode("", true)
@@ -4002,6 +4032,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
                           key: 0,
                           class: "table-cell-wrapper",
+                          tabindex: "-1",
                           col,
                           row,
                           rowIndex: getRowIndex(rowIndex),
@@ -4024,16 +4055,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : !col.type ? (openBlock(), createElementBlock("div", {
                           key: 1,
                           class: "table-cell-wrapper",
+                          tabindex: "-1",
                           title: row[col.dataIndex] || ""
                         }, toDisplayString((row && row[col.dataIndex]) !== void 0 ? row && row[col.dataIndex] : getEmptyCellText.value(col, row)), 9, _hoisted_17)) : col.type === "seq" ? (openBlock(), createElementBlock("div", _hoisted_18, toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)) : col.type === "tree-node" ? (openBlock(), createBlock(_sfc_main$2, {
                           key: 3,
                           class: "table-cell-wrapper",
+                          tabindex: "-1",
                           col,
                           row,
                           onClick: ($event) => triangleClick($event, row, col)
                         }, null, 8, ["col", "row", "onClick"])) : (openBlock(), createElementBlock("div", {
                           key: 4,
                           class: "table-cell-wrapper",
+                          tabindex: "-1",
                           title: row[col.dataIndex] || ""
                         }, [
                           col.type === "dragRow" ? (openBlock(), createBlock(DragHandle, {

package/lib/style.css

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.10
+ * version: v0.11.11
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -395,7 +395,7 @@
 .stk-table .stk-footer{
   position:sticky;
   bottom:0;
-  z-index:1;
+  z-index:2;
 }
 .stk-table .stk-footer tr{
   background-color:var(--tf-bgc);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.11.10",
+  "version": "0.11.11",
   "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/StkTable.vue

@@ -116,13 +116,14 @@
                                 :is="col.customFooterCell"
                                 v-if="col.customFooterCell"
                                 class="table-cell-wrapper"
+                                tabindex="-1"
                                 :col="col"
                                 :row="footRow"
                                 :rowIndex="footRowIndex"
                                 :colIndex="colIndex"
                                 :cellValue="footRow[col.dataIndex]"
                             />
-                            <div class="table-cell-wrapper" :title="footRow[col.dataIndex] || ''">
+                            <div class="table-cell-wrapper" tabindex="-1" :title="footRow[col.dataIndex] || ''">
                                 <span v-if="footRow[col.dataIndex] != null">{{ footRow[col.dataIndex] }}</span>
                             </div>
                         </td>
@@ -153,7 +154,7 @@
                     >
                         <td v-if="virtualX_on" class="vt-x-left"></td>
                         <td v-if="row && row.__EXP_R__" :colspan="virtualX_columnPart.length">
-                            <div class="table-cell-wrapper">
+                            <div class="table-cell-wrapper" tabindex="-1">
                                 <slot name="expand" :row="row.__EXP_R__" :col="row.__EXP_C__">
                                     {{ (row.__EXP_R__ && row.__EXP_C__ && row.__EXP_R__[row.__EXP_C__.dataIndex]) || '' }}
                                 </slot>
@@ -172,6 +173,7 @@
                                         :is="col.customCell"
                                         v-if="col.customCell"
                                         class="table-cell-wrapper"
+                                        tabindex="-1"
                                         :col="col"
                                         :row="row"
                                         :rowIndex="getRowIndex(rowIndex)"
@@ -187,20 +189,21 @@
                                             <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
                                         </template>
                                     </component>
-                                    <div v-else-if="!col.type" class="table-cell-wrapper" :title="row[col.dataIndex] || ''">
+                                    <div v-else-if="!col.type" class="table-cell-wrapper" tabindex="-1" :title="row[col.dataIndex] || ''">
                                         {{ (row && row[col.dataIndex]) !== void 0 ? row && row[col.dataIndex] : getEmptyCellText(col, row) }}
                                     </div>
-                                    <div v-else-if="col.type === 'seq'" class="table-cell-wrapper">
+                                    <div v-else-if="col.type === 'seq'" class="table-cell-wrapper" tabindex="-1">
                                         {{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
                                     </div>
                                     <TreeNodeCell
                                         v-else-if="col.type === 'tree-node'"
                                         class="table-cell-wrapper"
+                                        tabindex="-1"
                                         :col="col"
                                         :row="row"
                                         @click="triangleClick($event, row, col)"
                                     ></TreeNodeCell>
-                                    <div v-else class="table-cell-wrapper" :title="row[col.dataIndex] || ''">
+                                    <div v-else class="table-cell-wrapper" tabindex="-1" :title="row[col.dataIndex] || ''">
                                         <DragHandle v-if="col.type === 'dragRow'" @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
                                         <TriangleIcon v-else-if="col.type === 'expand'" @click="triangleClick($event, row, col)" />
                                         <span v-if="row[col.dataIndex] != null">{{ row[col.dataIndex] }}</span>
@@ -1450,13 +1453,17 @@ function onTableWheel(e: WheelEvent) {
     }
 }
 
+/** Prevent re-entrant requestAnimationFrame in onTableScroll */
+let scrollRAFScheduled = false;
+
 /**
  * @param e scrollEvent
  */
 function onTableScroll(e: Event) {
-    if (!e?.target) return;
-    // const target = e.target;
+    if (!e?.target || scrollRAFScheduled) return;
+    scrollRAFScheduled = true;
     requestAnimationFrame(() => {
+        scrollRAFScheduled = false;
         const { scrollTop, scrollLeft } = e.target as HTMLElement;
         const { scrollTop: vScrollTop } = virtualScroll.value;
         const { scrollLeft: vScrollLeft } = virtualScrollX.value;

package/src/StkTable/features/useAreaSelection.ts

@@ -1,4 +1,4 @@
-import { Ref, ShallowRef, computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { Ref, ShallowRef, computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { AreaSelectionConfig, AreaSelectionRange, CellKeyGen, ColKeyGen, StkTableColumn, UniqKey } from '../types';
 import { VirtualScrollStore, VirtualScrollXStore } from '../useVirtualScroll';
 import { getClosestColKey, getClosestTrIndex } from '../utils';
@@ -193,6 +193,56 @@ export function useAreaSelection<DT extends Record<string, any>>(
         removeListener();
     });
 
+    /**
+     * 监听数据行数/列数变化，当行列变少时钳制选区与锚点，避免越界
+     * en: Watch row/col count changes, clamp selection ranges and anchor to avoid out-of-bounds
+     */
+    watch([() => dataSourceCopy.value.length, () => tableHeaderLast.value.length], ([rowCount, colCount]) => {
+        if (!config.value.enabled) return;
+
+        // 钳制锚点
+        if (anchorCell) {
+            if (rowCount === 0 || colCount === 0) {
+                anchorCell = null;
+            } else {
+                anchorCell.rowIndex = clamp(anchorCell.rowIndex, 0, rowCount - 1);
+                anchorCell.colIndex = clamp(anchorCell.colIndex, 0, colCount - 1);
+            }
+        }
+
+        if (!selectionRanges.value.length) return;
+
+        // 行或列为 0 时清空选区
+        if (rowCount === 0 || colCount === 0) {
+            clearSelectedArea();
+            emitSelectionChange();
+            return;
+        }
+
+        const maxRow = rowCount - 1;
+        const maxCol = colCount - 1;
+        let changed = false;
+        const newRanges: AreaSelectionRange[] = [];
+        for (const range of selectionRanges.value) {
+            const { begin, end } = range.index;
+            const nbRow = clamp(begin.row, 0, maxRow);
+            const nbCol = clamp(begin.col, 0, maxCol);
+            const neRow = clamp(end.row, 0, maxRow);
+            const neCol = clamp(end.col, 0, maxCol);
+            if (nbRow !== begin.row || nbCol !== begin.col || neRow !== end.row || neCol !== end.col) {
+                changed = true;
+                newRanges.push(makeRange(nbRow, nbCol, neRow, neCol));
+            } else {
+                newRanges.push(range);
+            }
+        }
+
+        if (changed) {
+            selectionRanges.value = newRanges;
+            emitSelectionChange();
+        }
+    });
+
     function addListener() {
         removeListener();
         const el = tableContainerRef.value;
@@ -213,14 +263,27 @@ export function useAreaSelection<DT extends Record<string, any>>(
 
     /** 获取归一化（min/max）后的选区范围 */
     function normalizeRange(range: AreaSelectionRange) {
-        const { index } = range;
-        const [x1, x2] = index.x;
-        const [y1, y2] = index.y;
+        const { begin, end } = range.index;
         return {
-            minRow: Math.min(y1, y2),
-            maxRow: Math.max(y1, y2),
-            minCol: Math.min(x1, x2),
-            maxCol: Math.max(x1, x2),
+            minRow: Math.min(begin.row, end.row),
+            maxRow: Math.max(begin.row, end.row),
+            minCol: Math.min(begin.col, end.col),
+            maxCol: Math.max(begin.col, end.col),
+        };
+    }
+
+    /**
+     * 构造选区范围。begin = 拖拽起点，end = 拖拽终点。
+     * 同时填充已废弃的 x/y 字段以保证向后兼容。
+     */
+    function makeRange(beginRow: number, beginCol: number, endRow: number, endCol: number): AreaSelectionRange {
+        return {
+            index: {
+                x: [beginCol, endCol],
+                y: [beginRow, endRow],
+                begin: { row: beginRow, col: beginCol },
+                end: { row: endRow, col: endCol },
+            },
         };
     }
 
@@ -334,21 +397,11 @@ export function useAreaSelection<DT extends Record<string, any>>(
 
         const ctrlKey = e.ctrlKey || e.metaKey;
 
-        const range: AreaSelectionRange = {
-            index: {
-                x: [colIndex, colIndex],
-                y: [rowIndex, rowIndex],
-            },
-        };
+        const range: AreaSelectionRange = makeRange(rowIndex, colIndex, rowIndex, colIndex);
         // Shift 扩选：从锚点扩展到当前位置，更新最后一个区域
         if (e.shiftKey && anchorCell && shiftEnabled.value) {
             const ranges = selectionRanges.value.slice();
-            const shiftRange: AreaSelectionRange = {
-                index: {
-                    x: [anchorCell.colIndex, colIndex],
-                    y: [anchorCell.rowIndex, rowIndex],
-                },
-            };
+            const shiftRange: AreaSelectionRange = makeRange(anchorCell.rowIndex, anchorCell.colIndex, rowIndex, colIndex);
             if (ranges.length) {
                 ranges[ranges.length - 1] = shiftRange;
             } else {
@@ -408,12 +461,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
     /** 更新最后一个选区的终点（拖拽过程中） */
     function updateSelectionEnd(endRowIndex: number, endColIndex: number) {
         if (!anchorCell) return;
-        const newRange: AreaSelectionRange = {
-            index: {
-                x: [anchorCell.colIndex, endColIndex],
-                y: [anchorCell.rowIndex, endRowIndex],
-            },
-        };
+        const newRange: AreaSelectionRange = makeRange(anchorCell.rowIndex, anchorCell.colIndex, endRowIndex, endColIndex);
         const ranges = [...selectionRanges.value];
         if (ranges.length > 0) {
             ranges[ranges.length - 1] = newRange;
@@ -617,14 +665,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
         // en: If no selection, start from the first cell
         if (!selectionRanges.value.length) {
             anchorCell = { rowIndex: 0, colIndex: 0 };
-            selectionRanges.value = [
-                {
-                    index: {
-                        x: [0, 0],
-                        y: [0, 0],
-                    },
-                },
-            ];
+            selectionRanges.value = [makeRange(0, 0, 0, 0)];
             emitSelectionChange();
             scrollToCell(0, 0);
             return;
@@ -635,24 +676,19 @@ export function useAreaSelection<DT extends Record<string, any>>(
 
         // Shift 扩展选区，否则移动单格选区
         if (e.shiftKey && isArrowKey && shiftEnabled.value) {
-            // 扩展选区：更新最后一个区域的 endRow/endCol
+            // 扩展选区：保留 begin，更新最后一个区域的 end
             const ranges = [...selectionRanges.value];
             const range = ranges.length > 0 ? ranges[ranges.length - 1] : null;
             if (!range) return;
-            const { index } = range;
-            let newEndRow = index.y[1] + rowDelta;
-            let newEndCol = index.x[1] + colDelta;
+            const { begin, end } = range.index;
+            let newEndRow = end.row + rowDelta;
+            let newEndCol = end.col + colDelta;
 
             // 边界检查
             newEndRow = clamp(newEndRow, 0, rowCount - 1);
             newEndCol = clamp(newEndCol, 0, colCount - 1);
 
-            ranges[ranges.length - 1] = {
-                index: {
-                    x: [index.x[0], newEndCol],
-                    y: [index.y[0], newEndRow],
-                },
-            };
+            ranges[ranges.length - 1] = makeRange(begin.row, begin.col, newEndRow, newEndCol);
             selectionRanges.value = ranges;
 
             scrollToCell(newEndRow, newEndCol);
@@ -681,14 +717,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
 
             // 更新锚点和选区（移动单格时清空其他区域，仅保留新位置）
             anchorCell = { rowIndex: newRow, colIndex: newCol };
-            selectionRanges.value = [
-                {
-                    index: {
-                        x: [newCol, newCol],
-                        y: [newRow, newRow],
-                    },
-                },
-            ];
+            selectionRanges.value = [makeRange(newRow, newCol, newRow, newCol)];
 
             scrollToCell(newRow, newCol);
         }

package/src/StkTable/registerFeature.ts

@@ -1,13 +1,16 @@
 import { computed, ref } from 'vue';
 import { useAreaSelection, useAreaSelectionName } from './features';
+import { MY_FN_NAME } from './features/const';
 
 type OnDemandFeature = {
     [useAreaSelectionName]: typeof useAreaSelection<any>;
 };
 
 export const ON_DEMAND_FEATURE: OnDemandFeature = {
-    [useAreaSelectionName]: (() => {
-        console.warn('useAreaSelection is not registered');
+    [useAreaSelectionName]: (props => {
+        if ('useAreaSelection' in props) {
+            console.warn('useAreaSelection is not registered');
+        }
         return {
             config: computed(() => ({ enabled: false })),
             isSelecting: ref(false),
@@ -26,7 +29,7 @@ type Feature = OnDemandFeature[keyof OnDemandFeature];
 export function registerFeature(feature: Feature | Feature[]) {
     const features = Array.isArray(feature) ? feature : [feature];
     features.forEach(f => {
-        const fnName = (f as any).stkName;
+        const fnName = (f as any)[MY_FN_NAME];
         if (!fnName) {
             console.warn('invalid feature');
             return;

package/src/StkTable/style.less

@@ -427,7 +427,7 @@
     .stk-footer {
         position: sticky;
         bottom: 0;
-        z-index: 1;
+        z-index: 2;
         tr {
             background-color: var(--tf-bgc);
             height: var(--footer-row-height);

package/src/StkTable/types/index.ts

@@ -349,8 +349,14 @@ export type RowActiveOption<DT> = {
 /** 单元格选区范围 */
 export type AreaSelectionRange = {
     index: {
+        /** column index range @deprecated */
         x: [number, number];
+        /** row index range @deprecated */
         y: [number, number];
+        /** start point index*/
+        begin: { row: number; col: number };
+        /** end point index */
+        end: { row: number; col: number };
     };
 };
 

package/src/StkTable/useFixedCol.ts

@@ -101,12 +101,15 @@ export function useFixedCol<DT extends Record<string, any>>(
         const leftShadowCol: StkTableColumn<DT>[] = [];
         /** 右侧展示阴影的列 */
         const rightShadowCol: StkTableColumn<DT>[] = [];
-        tableHeadersForCalc.value.forEach((row, level) => {
+        const len = tableHeadersForCalc.value.length;
+        for (let level = 0; level < len; level++) {
+            const row = tableHeadersForCalc.value[level];
             /**
              * 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
              */
             let left = 0;
-            row.forEach(col => {
+            for (let i = 0, rowLen = row.length; i < rowLen; i++) {
+                const col = row[i];
                 const position = getFixedColPositionValue(col);
                 const isFixedLeft = col.fixed === 'left';
                 const isFixedRight = col.fixed === 'right';
@@ -125,8 +128,8 @@ export function useFixedCol<DT extends Record<string, any>>(
                         rightShadowCol[level] = col;
                     }
                 }
-            });
-        });
+            }
+        }
 
         if (props.fixedColShadow) {
             fixedShadowCols.value = leftShadowCol.concat(rightShadowCol).filter(Boolean) as StkTableColumn<DT>[];

package/src/StkTable/useHighlight.ts

@@ -114,7 +114,7 @@ export function useHighlight(props: any, stkTableId: string, tableContainerRef:
         if (method === 'animation') {
             cellEl.animate(keyframe, duration);
         } else {
-            highlightCellsInCssKeyFrame(cellEl, rowKeyValue, className, duration);
+            highlightCellsInCssKeyFrame(cellEl, rowKeyValue, colKeyValue, className, duration);
         }
     }
 
@@ -198,18 +198,22 @@ export function useHighlight(props: any, stkTableId: string, tableContainerRef:
      * 使用css @keyframes动画，实现高亮单元格动画
      * 此方案作为兼容方式。v0.3.4 将使用Element.animate 接口实现动画。
      */
-    function highlightCellsInCssKeyFrame(cellEl: HTMLElement, rowKeyValue: UniqKey, className: string, duration: number) {
+    function highlightCellsInCssKeyFrame(cellEl: HTMLElement, rowKeyValue: UniqKey, colKeyValue: string, className: string, duration: number) {
         if (cellEl.classList.contains(className)) {
             cellEl.classList.remove(className);
             void cellEl.offsetHeight; // 通知浏览器重绘
         }
         cellEl.classList.add(className);
-        window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
+        const cellKey = `${rowKeyValue}-${colKeyValue}`;
+        window.clearTimeout(highlightDimCellsTimeout.get(cellKey));
+        if (!duration) {
+            return;
+        }
         highlightDimCellsTimeout.set(
-            rowKeyValue,
+            cellKey,
             window.setTimeout(() => {
                 cellEl.classList.remove(className);
-                highlightDimCellsTimeout.delete(rowKeyValue);
+                highlightDimCellsTimeout.delete(cellKey);
             }, duration),
         );
     }