stk-table-vue 1.0.0 → 1.0.2

package/src/StkTable/custom-cells/NumberCell/createNumberCell.ts

@@ -0,0 +1,43 @@
+import type { CustomCellProps } from '../../types';
+import { defineComponent, h, markRaw } from 'vue';
+import { formatNumber, type FormatNumberOptions } from '../utils/formatNumber';
+
+/** createNumberCell 配置选项（等同于格式化选项） */
+export interface CreateNumberCellOptions extends FormatNumberOptions {}
+
+/**
+ * 数字格式化单元格工厂函数
+ *
+ * 纯展示型单元格：将 `cellValue` 经 {@link formatNumber} 格式化为文本。
+ * 数字对齐请在列配置上设置 `align: 'right'`。
+ *
+ * @param options 格式化选项
+ * @returns `NumberCell` 组件构造函数，使用时需调用一次：`customCell: NumberCell()`
+ *
+ * @example
+ * ```ts
+ * const { NumberCell } = createNumberCell({ decimals: 2 });
+ * const NumberCellComp = NumberCell();
+ * const columns = [
+ *   { title: '现价', dataIndex: 'price', align: 'right', customCell: NumberCellComp },
+ * ];
+ * ```
+ */
+export function createNumberCell(options?: CreateNumberCellOptions) {
+    /** 单元格组件 - 用于 customCell */
+    function NumberCell() {
+        return markRaw(
+            defineComponent({
+                // eslint-disable-next-line vue/require-prop-types
+                props: ['row', 'col', 'cellValue', 'rowIndex', 'colIndex', 'expanded', 'treeExpanded'],
+                setup(props: CustomCellProps<any>) {
+                    return () => h('span', { class: 'stk-number-cell' }, formatNumber(props.cellValue, options));
+                },
+            }),
+        );
+    }
+
+    return {
+        NumberCell,
+    };
+}

package/src/StkTable/custom-cells/NumberCell/index.ts

@@ -0,0 +1,2 @@
+export { createNumberCell } from './createNumberCell';
+export type { CreateNumberCellOptions } from './createNumberCell';

package/src/StkTable/custom-cells/utils/formatNumber.ts

@@ -0,0 +1,137 @@
+/**
+ * 数字格式化选项
+ *
+ * NumberCell / ChangeCell 共享的格式化配置。
+ */
+export interface FormatNumberOptions {
+    /** 小数位数（四舍五入）。不传则不强制处理小数位 */
+    decimals?: number;
+    /** 是否使用千分位分隔符，默认 true */
+    thousands?: boolean;
+    /** 前缀，如 '¥'、'$' */
+    prefix?: string;
+    /** 后缀，如 '元'、'股' */
+    suffix?: string;
+    /** 正数是否强制显示 '+' 号，默认 false（负数始终带 '-'） */
+    showSign?: boolean;
+    /** 百分比模式：值 ×100 并追加 '%'，默认 false。与 abbr 互斥 */
+    percent?: boolean;
+    /** 单位缩放：'cn' = 万/亿，'en' = K/M/B。不传则不缩放。与 percent 互斥 */
+    abbr?: 'cn' | 'en';
+    /** 缩放后保留的小数位，默认 2 */
+    abbrDecimals?: number;
+    /** 空值(null/undefined/'')或非数字时的占位符，默认 '--' */
+    placeholder?: string;
+}
+
+/** 缩放单位阈值表（从大到小匹配） */
+const ABBR_UNITS: Record<'cn' | 'en', Array<[number, string]>> = {
+    cn: [
+        [1e8, '亿'],
+        [1e4, '万'],
+    ],
+    en: [
+        [1e9, 'B'],
+        [1e6, 'M'],
+        [1e3, 'K'],
+    ],
+};
+
+/**
+ * 给数字字符串的整数部分添加千分位分隔符。
+ * @param numStr 不含符号的正数字符串（可含小数部分）
+ *
+ * 用手动分组代替先读正则 `\B(?=(\d{3})+(?!\d))`：
+ * 后者在长数字上开销随位数非线性增长，且 split('.') 会额外分配数组。
+ */
+function addThousandsSeparator(numStr: string): string {
+    // 用 indexOf/slice 分离整数与小数部分，避免 split 分配数组
+    const dotIndex = numStr.indexOf('.');
+    const intPart = dotIndex === -1 ? numStr : numStr.slice(0, dotIndex);
+    const len = intPart.length;
+
+    // 三位以内无需分隔，直接返回原串
+    if (len <= 3) return numStr;
+
+    // 首组长度：不足三位的高位余数
+    const firstGroupLen = len % 3 || 3;
+    let withSep = intPart.slice(0, firstGroupLen);
+    for (let i = firstGroupLen; i < len; i += 3) {
+        withSep += ',' + intPart.slice(i, i + 3);
+    }
+
+    return dotIndex === -1 ? withSep : withSep + numStr.slice(dotIndex);
+}
+
+/**
+ * 数字格式化纯函数（NumberCell / ChangeCell 共享内核）。
+ *
+ * 处理管线：空值判断 → 取符号 → 百分比 → 单位缩放 → 小数位 → 千分位 → 拼装。
+ *
+ * @param value 原始值（数字或可转为数字的字符串）
+ * @param options 格式化选项
+ * @returns 格式化后的字符串；空值或非数字返回 placeholder
+ */
+export function formatNumber(value: unknown, options: FormatNumberOptions = {}): string {
+    const {
+        decimals,
+        thousands = true,
+        prefix = '',
+        suffix = '',
+        showSign = false,
+        percent = false,
+        abbr,
+        abbrDecimals,
+        placeholder = '--',
+    } = options;
+
+    // 空值判断（注意：Number('') === 0，必须先拦掉空字符串）
+    if (value === null || value === undefined || value === '') {
+        return placeholder;
+    }
+    const num = typeof value === 'number' ? value : Number(value);
+    if (Number.isNaN(num)) {
+        return placeholder;
+    }
+
+    // 符号基于原始值正负；0 不带符号
+    const sign = num < 0 ? '-' : showSign && num > 0 ? '+' : '';
+    let work = Math.abs(num);
+
+    // 百分比
+    if (percent) {
+        work = work * 100;
+    }
+
+    // 单位缩放（与百分比互斥）
+    let unit = '';
+    if (abbr && !percent) {
+        // 用索引 for 遍历阈值表，避免 for...of 的迭代器与数组解构开销
+        const units = ABBR_UNITS[abbr];
+        for (let i = 0; i < units.length; i++) {
+            const threshold = units[i][0];
+            if (work >= threshold) {
+                work = work / threshold;
+                unit = units[i][1];
+                break;
+            }
+        }
+    }
+
+    // 小数位：缩放后优先 abbrDecimals，否则回落到 decimals，最终默认 2；未缩放时不强制
+    let fractionDigits: number | null;
+    if (unit) {
+        fractionDigits = abbrDecimals ?? decimals ?? 2;
+    } else {
+        fractionDigits = decimals ?? null;
+    }
+    let numStr = fractionDigits == null ? String(work) : work.toFixed(fractionDigits);
+
+    // 千分位
+    if (thousands) {
+        numStr = addThousandsSeparator(numStr);
+    }
+
+    const percentSuffix = percent ? '%' : '';
+    return `${prefix}${sign}${numStr}${unit}${percentSuffix}${suffix}`;
+}

package/src/StkTable/features/useAreaSelection.ts

@@ -54,13 +54,25 @@ export function useAreaSelection<DT extends Record<string, any>>(
     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 ROW_RANGE_SELECTED = 'row-range-selected';
+    // 选区样式通过 data-* 属性（而非 classList）应用。
+    // 原因：合并单元格的 td 存在响应式 class 绑定（cell-hover/cell-active），
+    // hover 时 Vue 的 patchClass 会用 `el.className = value` 整体覆盖 className，
+    // 从而抹掉命令式添加的选区 class，导致选区高亮/边框在鼠标经过合并单元格时消失。
+    // data-* 属性不在 vnode props 中，Vue 不会清除它们，可稳定保留选区样式。
+    // en: Apply selection styles via data-* attributes instead of classList, so Vue's
+    // reactive class patching on merged cells (cell-hover/cell-active) won't wipe them.
+    //  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 ROW_RANGE_SELECTED = 'row-range-selected';
+    const ATTR_CELL_SELECTED = 'data-cs-s';
+    const ATTR_CELL_TOP = 'data-cs-t';
+    const ATTR_CELL_BOTTOM = 'data-cs-b';
+    const ATTR_CELL_LEFT = 'data-cs-l';
+    const ATTR_CELL_RIGHT = 'data-cs-r';
+    const ATTR_ROW_SELECTED = 'data-rs-s';
 
     const selectionRanges = ref<AreaSelectionRange[]>([]);
     const isSelecting = ref(false);
@@ -199,15 +211,19 @@ export function useAreaSelection<DT extends Record<string, any>>(
         const cellHighlight = highlightCellEnabled.value;
         const rowHighlight = highlightRowEnabled.value;
 
-        // 1. 清除所有旧的选区 class
-        const oldSelectedCells = container.querySelectorAll(`.${CELL_RANGE_SELECTED}`);
+        // 1. 清除所有旧的选区属性
+        const oldSelectedCells = container.querySelectorAll(`[${ATTR_CELL_SELECTED}]`);
         for (let i = 0; i < oldSelectedCells.length; i++) {
             const el = oldSelectedCells[i] as HTMLElement;
-            el.classList.remove(CELL_RANGE_SELECTED, CELL_RANGE_TOP, CELL_RANGE_BOTTOM, CELL_RANGE_LEFT, CELL_RANGE_RIGHT);
+            el.removeAttribute(ATTR_CELL_SELECTED);
+            el.removeAttribute(ATTR_CELL_TOP);
+            el.removeAttribute(ATTR_CELL_BOTTOM);
+            el.removeAttribute(ATTR_CELL_LEFT);
+            el.removeAttribute(ATTR_CELL_RIGHT);
         }
-        const oldSelectedRows = container.querySelectorAll(`.${ROW_RANGE_SELECTED}`);
+        const oldSelectedRows = container.querySelectorAll(`[${ATTR_ROW_SELECTED}]`);
         for (let i = 0; i < oldSelectedRows.length; i++) {
-            (oldSelectedRows[i] as HTMLElement).classList.remove(ROW_RANGE_SELECTED);
+            (oldSelectedRows[i] as HTMLElement).removeAttribute(ATTR_ROW_SELECTED);
         }
 
         // 2. 重算 selectedCellKeys
@@ -225,7 +241,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
                 const { minRow, maxRow } = normalizeRange(range);
                 for (let r = minRow; r <= maxRow; r++) {
                     const tr = tbody.querySelector(`tr[data-row-i="${r}"]`) as HTMLElement | null;
-                    if (tr) tr.classList.add(ROW_RANGE_SELECTED);
+                    if (tr) tr.setAttribute(ATTR_ROW_SELECTED, '');
                 }
             }
         }
@@ -268,15 +284,18 @@ export function useAreaSelection<DT extends Record<string, any>>(
                     const ck = cellKeyGen(row, cols[colIndex]);
                     if (!selectedCellKeys.has(ck)) continue;
 
-                    td.classList.add(CELL_RANGE_SELECTED);
+                    td.setAttribute(ATTR_CELL_SELECTED, '');
 
-                    // 判断是否在最后一个区域的边界
+                    // 判断是否在最后一个区域的边界（考虑合并单元格的 rowspan/colspan）
                     const isInLastRange = rowIndex >= lrMinRow && rowIndex <= lrMaxRow && colIndex >= lrMinCol && colIndex <= lrMaxCol;
                     if (isInLastRange) {
-                        if (rowIndex === lrMinRow) td.classList.add(CELL_RANGE_TOP);
-                        if (rowIndex === lrMaxRow) td.classList.add(CELL_RANGE_BOTTOM);
-                        if (colIndex === lrMinCol) td.classList.add(CELL_RANGE_LEFT);
-                        if (colIndex === lrMaxCol) td.classList.add(CELL_RANGE_RIGHT);
+                        // 合并单元格的实际结束行/列
+                        const effEndRow = rowIndex + (parseInt(td.getAttribute('rowspan') || '1', 10) || 1) - 1;
+                        const effEndCol = colIndex + (parseInt(td.getAttribute('colspan') || '1', 10) || 1) - 1;
+                        if (rowIndex === lrMinRow) td.setAttribute(ATTR_CELL_TOP, '');
+                        if (effEndRow === lrMaxRow) td.setAttribute(ATTR_CELL_BOTTOM, '');
+                        if (colIndex === lrMinCol) td.setAttribute(ATTR_CELL_LEFT, '');
+                        if (effEndCol === lrMaxCol) td.setAttribute(ATTR_CELL_RIGHT, '');
                     }
                 }
             }
@@ -413,6 +432,115 @@ export function useAreaSelection<DT extends Record<string, any>>(
         return colKeyToIndexMap.value.get(colKey) ?? -1;
     }
 
+    // ---- 合并单元格支持 ----
+
+    /** 获取指定单元格的合并信息 [rowspan, colspan]，无合并返回 [1, 1] */
+    function getMergeSpan(rowIndex: number, colIndex: number): [number, number] {
+        const data = dataSourceCopy.value;
+        const cols = tableHeaderLast.value;
+        const row = data[rowIndex];
+        const col = cols[colIndex];
+        if (!row || !col || !col.mergeCells) return [1, 1];
+        const { rowspan = 1, colspan = 1 } = col.mergeCells({ row, col, rowIndex, colIndex }) || {};
+        return [rowspan || 1, colspan || 1];
+    }
+
+    /**
+     * 扩展选区范围，使其完整覆盖边界上部分选中的合并单元格
+     * en: Expand selection range to fully cover merged cells that are partially selected at boundaries
+     */
+    function expandRangeToCoverMergedCells(range: AreaSelectionRange): AreaSelectionRange {
+        const { minRow, maxRow, minCol, maxCol } = normalizeRange(range);
+        const data = dataSourceCopy.value;
+        const cols = tableHeaderLast.value;
+        const rowCount = data.length;
+        const colCount = cols.length;
+
+        // 预计算含 mergeCells 的列索引
+        const mergeColIndices: number[] = [];
+        for (let c = 0; c < colCount; c++) {
+            if (cols[c]?.mergeCells) mergeColIndices.push(c);
+        }
+        if (!mergeColIndices.length) return range;
+
+        let [eMinRow, eMaxRow, eMinCol, eMaxCol] = [minRow, maxRow, minCol, maxCol];
+
+        // 迭代扩展直到稳定（级联合并需要多轮）
+        let changed = true;
+        let guard = 0;
+        while (changed && guard++ < 100) {
+            changed = false;
+
+            // 下边界：最后一行中的单元格 rowspan 是否超出边界
+            for (const c of mergeColIndices) {
+                if (c < eMinCol || c > eMaxCol) continue;
+                const [rs] = getMergeSpan(eMaxRow, c);
+                if (rs > 1 && eMaxRow + rs - 1 < rowCount && eMaxRow + rs - 1 > eMaxRow) {
+                    eMaxRow = eMaxRow + rs - 1;
+                    changed = true;
+                }
+            }
+
+            // 右边界：最后一列中的单元格 colspan 是否超出边界
+            for (let r = eMinRow; r <= eMaxRow; r++) {
+                const [, cs] = getMergeSpan(r, eMaxCol);
+                if (cs > 1 && eMaxCol + cs - 1 < colCount && eMaxCol + cs - 1 > eMaxCol) {
+                    eMaxCol = eMaxCol + cs - 1;
+                    changed = true;
+                }
+            }
+
+            // 上边界：检查 minRow 上方的单元格是否延伸进选区
+            for (const c of mergeColIndices) {
+                if (c < eMinCol || c > eMaxCol) continue;
+                for (let r = eMinRow - 1; r >= 0 && r > eMinRow - 500; r--) {
+                    const [rs] = getMergeSpan(r, c);
+                    if (rs <= 1) continue;
+                    const endRow = r + rs - 1;
+                    if (endRow >= eMinRow) {
+                        // 合并单元格延伸进选区，扩展上边界
+                        if (r < eMinRow) {
+                            eMinRow = r;
+                            changed = true;
+                        }
+                    } else {
+                        // 该合并单元格未到达当前边界，更上方的也不会到达，停止扫描此列
+                        break;
+                    }
+                }
+            }
+
+            // 左边界：检查 minCol 左侧的单元格是否延伸进选区
+            for (let r = eMinRow; r <= eMaxRow; r++) {
+                for (let c = eMinCol - 1; c >= 0 && c > eMinCol - 500; c--) {
+                    const [, cs] = getMergeSpan(r, c);
+                    if (cs <= 1) continue;
+                    const endCol = c + cs - 1;
+                    if (endCol >= eMinCol) {
+                        if (c < eMinCol) {
+                            eMinCol = c;
+                            changed = true;
+                        }
+                    } else {
+                        break;
+                    }
+                }
+            }
+        }
+
+        if (eMinRow === minRow && eMaxRow === maxRow && eMinCol === minCol && eMaxCol === maxCol) {
+            return range;
+        }
+
+        // 保持 begin/end 的原始方向
+        const { begin, end } = range.index;
+        const newBeginRow = begin.row < end.row || begin.row === end.row ? eMinRow : eMaxRow;
+        const newEndRow = begin.row < end.row || begin.row === end.row ? eMaxRow : eMinRow;
+        const newBeginCol = begin.col <= end.col ? eMinCol : eMaxCol;
+        const newEndCol = begin.col <= end.col ? eMaxCol : eMinCol;
+        return makeRange(newBeginRow, newBeginCol, newEndRow, newEndCol);
+    }
+
     /** 获取列的左边距和宽度
      * @param colIndex 列的绝对索引
      * @returns [left, width]
@@ -506,11 +634,14 @@ export function useAreaSelection<DT extends Record<string, any>>(
 
         const ctrlKey = e.ctrlKey || e.metaKey;
 
-        const range: AreaSelectionRange = makeRange(rowIndex, colIndex, rowIndex, colIndex);
+        // 立即扩展以完整覆盖合并单元格（修复 mousedown 合并单元格时边框显示不全）
+        const range: AreaSelectionRange = expandRangeToCoverMergedCells(makeRange(rowIndex, colIndex, rowIndex, colIndex));
         // Shift 扩选：从锚点扩展到当前位置，更新最后一个区域
         if (e.shiftKey && anchorCell && shiftEnabled.value) {
             const ranges = selectionRanges.value.slice();
-            const shiftRange: AreaSelectionRange = makeRange(anchorCell.rowIndex, anchorCell.colIndex, rowIndex, colIndex);
+            const shiftRange: AreaSelectionRange = expandRangeToCoverMergedCells(
+                makeRange(anchorCell.rowIndex, anchorCell.colIndex, rowIndex, colIndex),
+            );
             if (ranges.length) {
                 ranges[ranges.length - 1] = shiftRange;
             } else {
@@ -570,7 +701,10 @@ export function useAreaSelection<DT extends Record<string, any>>(
     /** 更新最后一个选区的终点（拖拽过程中） */
     function updateSelectionEnd(endRowIndex: number, endColIndex: number) {
         if (!anchorCell) return;
-        const newRange: AreaSelectionRange = makeRange(anchorCell.rowIndex, anchorCell.colIndex, endRowIndex, endColIndex);
+        // 拖拽过程中即扩展，使选区实时覆盖合并单元格的完整边界
+        const newRange: AreaSelectionRange = expandRangeToCoverMergedCells(
+            makeRange(anchorCell.rowIndex, anchorCell.colIndex, endRowIndex, endColIndex),
+        );
         const ranges = [...selectionRanges.value];
         if (ranges.length > 0) {
             ranges[ranges.length - 1] = newRange;
@@ -674,6 +808,17 @@ export function useAreaSelection<DT extends Record<string, any>>(
         document.removeEventListener('mousemove', onDocumentMouseMove);
         document.removeEventListener('mouseup', onDocumentMouseUp);
 
+        // 扩展最后一个选区，使其完整覆盖合并单元格
+        const ranges = selectionRanges.value;
+        if (ranges.length) {
+            const expanded = expandRangeToCoverMergedCells(ranges[ranges.length - 1]);
+            if (expanded !== ranges[ranges.length - 1]) {
+                const newRanges = [...ranges];
+                newRanges[newRanges.length - 1] = expanded;
+                selectionRanges.value = newRanges;
+            }
+        }
+
         // 发出事件
         emitSelectionChange();
     }

package/src/StkTable/index.ts

@@ -1,7 +1,7 @@
 export { useAreaSelection } from './features/index';
 export { registerFeature } from './registerFeature';
 export { default as StkTable } from './StkTable.vue';
-export type { Order, SortConfig, SortOption, SortState, StkTableColumn } from './types/index';
+export type { AreaSelectionRange, Order, SortConfig, SortOption, SortState, StkTableColumn } from './types/index';
 export { binarySearch, insertToOrderedArray, strCompare, tableSort } from './utils';
 // export custom cells
 export { createFilterCell } from './custom-cells/FilterCell/index';
@@ -10,5 +10,11 @@ export { createEditableCell } from './custom-cells/EditableCell/index';
 export type { CreateEditableCellOptions } from './custom-cells/EditableCell/index';
 export { createCheckboxCell } from './custom-cells/CheckboxCell/index';
 export type { createCheckboxCellOptions } from './custom-cells/CheckboxCell/index';
+export { createNumberCell } from './custom-cells/NumberCell/index';
+export type { CreateNumberCellOptions } from './custom-cells/NumberCell/index';
+export { createChangeCell } from './custom-cells/ChangeCell/index';
+export type { CreateChangeCellOptions } from './custom-cells/ChangeCell/index';
+export { formatNumber } from './custom-cells/utils/formatNumber';
+export type { FormatNumberOptions } from './custom-cells/utils/formatNumber';
 
 import './style.less';

package/src/StkTable/style.less

@@ -117,7 +117,7 @@
         /* ⭐这里加background-color会导致表格出滚动白屏*/
         color: #d1d1e0;
 
-        .cell-range-selected {
+        td[data-cs-s] {
             background-blend-mode: normal;
         }
     }
@@ -172,7 +172,7 @@
         * - 绝对定位元素。需要根据滚动条位置动态计算。不合适。
         * - sticky 定位方案需要占用位置。高度为0。
         */
-        border-left: 1px solid var(--border-color);
+        border-left: var(--border-width) solid var(--border-color);
         /* 下面border用于表格内容不满高度时，绘制表格边界线 */
         background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 
@@ -184,6 +184,19 @@
         thead tr:first-child th {
             background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
         }
+
+        /**
+        * 单元格的左边框由左侧相邻单元格的 border-right 提供。
+        * 右固定列吸附遮挡内容后，与左侧单元格不再相邻，因此需要自行绘制 border-left。
+        */
+        th.fixed-cell--border-left,
+        td.fixed-cell--border-left {
+            background-image: var(--bg-border-left), var(--bg-border-right), var(--bg-border-bottom);
+        }
+
+        thead tr:first-child th.fixed-cell--border-left {
+            background-image: var(--bg-border-left), var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+        }
     }
 
     &.bordered-h {
@@ -206,19 +219,20 @@
     &.bordered-body-h {
         tbody {
             --bg-border-right: linear-gradient(transparent, transparent);
+            --bg-border-left: linear-gradient(transparent, transparent);
         }
     }
 
     &.stripe {
         &:not(.vt-on) .stk-tbody-main tr:nth-child(even) {
             background-color: var(--stripe-bgc);
-        }
+    }
 
         &.vt-on .stk-tbody-main tr:nth-child(odd) {
             background-color: var(--stripe-bgc);
         }
 
-        &.area-selection .stk-tbody-main tr.row-range-selected {
+        &.area-selection .stk-tbody-main tr[data-rs-s] {
             background-color: var(--rs-bgc);
         }
         
@@ -240,7 +254,7 @@
         background-color: var(--tr-active-bgc);
     }
 
-    .stk-tbody-main tr.row-range-selected {
+    .stk-tbody-main tr[data-rs-s] {
         background-color: var(--rs-bgc);
     }
 
@@ -504,7 +518,8 @@
     }
 
     /* 单元格选区 - 使用 inset box-shadow 实现边框，不占用内部空间 */
-    .cell-range-selected {
+    /* 通过 data-* 属性（而非 class）应用，避免 Vue 对合并单元格 className 的重新 patch 抹掉选区样式 */
+    td[data-cs-s] {
         background-blend-mode: multiply;
         background-color: var(--cs-bgc);
         box-shadow:
@@ -514,19 +529,27 @@
             inset var(--cs-r, 0) 0 0 0 var(--cs-bc);
     }
 
-    .cell-range-t {
+    td[data-cs-t] {
         --cs-t: 2px;
     }
 
-    .cell-range-b {
+    /* 选中的合并单元格在 hover/active 时，选区背景优先于 hover/active 背景 */
+    /* 合并单元格的 td 会被动态添加 cell-hover/cell-active class，与 td[data-cs-s] 同详细度， */
+    /* 会因源码顺序覆盖选区背景；此处提高详细度确保选区背景不被覆盖 */
+    td[data-cs-s].cell-hover,
+    td[data-cs-s].cell-active {
+        background-color: var(--cs-bgc);
+    }
+
+    td[data-cs-b] {
         --cs-b: -2px;
     }
 
-    .cell-range-l {
+    td[data-cs-l] {
         --cs-l: 2px;
     }
 
-    .cell-range-r {
+    td[data-cs-r] {
         --cs-r: -2px;
     }
 

package/src/StkTable/useAutoResize.ts

@@ -3,11 +3,11 @@ import { Ref, onBeforeUnmount, onMounted, watch } from 'vue';
 /**
  * 窗口变化自动重置虚拟滚动
  * @param tableContainerRef
- * @param initVirtualScroll
+ * @param onResize 容器尺寸变化后的重算逻辑（虚拟滚动、固定列等）
  * @param props
  * @param debounceMs
  */
-export function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, initVirtualScroll: () => void, props: any, debounceMs: number) {
+export function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, onResize: () => void, props: any, debounceMs: number) {
     let resizeObserver: ResizeObserver | null = null;
     let isObserved = false;
     watch(
@@ -76,7 +76,7 @@ export function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, i
         }
         debounceTime = window.setTimeout(() => {
             if (props.autoResize) {
-                initVirtualScroll();
+                onResize();
                 if (typeof props.autoResize === 'function') {
                     props.autoResize();
                 }

package/src/StkTable/useFixedCol.ts

@@ -21,11 +21,18 @@ export function useFixedCol<DT extends Record<string, any>>(
     /** 正在被固定的列 */
     const fixedCols = shallowRef<StkTableColumn<DT>[]>([]);
 
+    /**
+     * 需要自行绘制左边框的右固定列。
+     * 单元格的左边框由左侧相邻单元格的 border-right 提供，右固定列吸附遮挡内容后两者不再相邻，因此需要自行绘制。
+     */
+    const fixedBorderLeftCols = shallowRef<StkTableColumn<DT>[]>([]);
+
     /** 固定列的class */
     const fixedColClassMap = computed(() => {
         const colMap = new Map();
         const fixedShadowColsValue = fixedShadowCols.value;
         const fixedColsValue = fixedCols.value;
+        const fixedBorderLeftColsValue = fixedBorderLeftCols.value;
         const colKeyFn = colKeyGen.value;
         const fixedColShadow = props.fixedColShadow;
         const headers = tableHeaders.value;
@@ -49,6 +56,9 @@ export function useFixedCol<DT extends Record<string, any>>(
                 if (showShadow) {
                     classList.push('fixed-cell--shadow');
                 }
+                if (fixed === 'right' && fixedBorderLeftColsValue.includes(col)) {
+                    classList.push('fixed-cell--border-left');
+                }
                 colMap.set(colKeyFn(col), classList);
             }
         }
@@ -104,6 +114,15 @@ export function useFixedCol<DT extends Record<string, any>>(
         const len = tableHeadersForCalc.value.length;
         for (let level = 0; level < len; level++) {
             const row = tableHeadersForCalc.value[level];
+            /**
+             * 最右侧连续 fixed:right 列的起始下标。
+             * 这些列的固定偏移只由其右侧固定列宽度决定，不依赖中间列的声明宽度，
+             * 且 sticky/relative 在无横向溢出时偏移为0无副作用，因此无需判断滚动位置，始终固定。
+             */
+            let rightSuffixStart = row.length;
+            while (rightSuffixStart > 0 && row[rightSuffixStart - 1].fixed === 'right') {
+                rightSuffixStart--;
+            }
             /**
              * 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
              */
@@ -121,10 +140,14 @@ export function useFixedCol<DT extends Record<string, any>>(
 
                 left += getCalculatedColWidth(col);
 
-                if (isFixedRight && scrollLeft + clientWidth - left < position) {
-                    fixedColsTemp.push(col);
-                    // 右固定列阴影，只要第一列
-                    if (!rightShadowCol[level]) {
+                if (isFixedRight) {
+                    /** 是否需要固定。依赖列声明宽度累加，声明宽度与实际渲染宽度不一致时会失真 */
+                    const needFix = scrollLeft + clientWidth - left < position;
+                    if (i >= rightSuffixStart || needFix) {
+                        fixedColsTemp.push(col);
+                    }
+                    // 右固定列阴影，只要第一列。阴影仍按滚动位置判断，避免未遮挡时也显示阴影
+                    if (needFix && !rightShadowCol[level]) {
                         rightShadowCol[level] = col;
                     }
                 }
@@ -135,6 +158,9 @@ export function useFixedCol<DT extends Record<string, any>>(
             fixedShadowCols.value = leftShadowCol.concat(rightShadowCol).filter(Boolean) as StkTableColumn<DT>[];
         }
 
+        // rightShadowCol 是每层最靠左的、已遮挡内容的右固定列，正是需要绘制左边框的列
+        fixedBorderLeftCols.value = rightShadowCol.filter(Boolean) as StkTableColumn<DT>[];
+
         fixedCols.value = fixedColsTemp;
     }