stk-table-vue 1.0.0 → 1.0.1

package/README.md

@@ -23,6 +23,7 @@ Support Vue3 and Vue2.7
 
 ## Documentation
 ### [Stk Table Vue Official](https://ja-plus.github.io/stk-table-vue/)
+### [Stk Table React Official](https://ja-plus.github.io/stk-table-react/)
 
 
 ## Repo: 

package/lib/{Dropdown-Clc70S1z.js → Dropdown-wEI6qpCx.js}

@@ -6,7 +6,7 @@
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
-import { t as StkTable_default } from "./StkTable-QUd4TJCF.js";
+import { t as StkTable_default } from "./StkTable-BK4VNsvG.js";
 import { createElementBlock, createElementVNode, createVNode, defineComponent, h, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, withModifiers } from "vue";
 //#region src/StkTable/custom-cells/FilterCell/Dropdown/index.vue?vue&type=script&setup=true&lang.ts
 var DROPDOWN_DEFAULT_WIDTH = 300;

package/lib/{StkTable-QUd4TJCF.js → StkTable-BK4VNsvG.js}

@@ -347,12 +347,12 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 	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 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([]);
 	const isSelecting = ref(false);
 	/** start cell */
@@ -478,10 +478,17 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 		if (!container) return;
 		const cellHighlight = highlightCellEnabled.value;
 		const rowHighlight = highlightRowEnabled.value;
-		const oldSelectedCells = container.querySelectorAll(`.${CELL_RANGE_SELECTED}`);
-		for (let i = 0; i < oldSelectedCells.length; i++) oldSelectedCells[i].classList.remove(CELL_RANGE_SELECTED, CELL_RANGE_TOP, CELL_RANGE_BOTTOM, CELL_RANGE_LEFT, CELL_RANGE_RIGHT);
-		const oldSelectedRows = container.querySelectorAll(`.${ROW_RANGE_SELECTED}`);
-		for (let i = 0; i < oldSelectedRows.length; i++) oldSelectedRows[i].classList.remove(ROW_RANGE_SELECTED);
+		const oldSelectedCells = container.querySelectorAll(`[${ATTR_CELL_SELECTED}]`);
+		for (let i = 0; i < oldSelectedCells.length; i++) {
+			const el = oldSelectedCells[i];
+			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(`[${ATTR_ROW_SELECTED}]`);
+		for (let i = 0; i < oldSelectedRows.length; i++) oldSelectedRows[i].removeAttribute(ATTR_ROW_SELECTED);
 		recomputeSelectedCellKeys();
 		const ranges = selectionRanges.value;
 		if (!ranges.length) return;
@@ -491,7 +498,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 			const { minRow, maxRow } = normalizeRange(range);
 			for (let r = minRow; r <= maxRow; r++) {
 				const tr = tbody.querySelector(`tr[data-row-i="${r}"]`);
-				if (tr) tr.classList.add(ROW_RANGE_SELECTED);
+				if (tr) tr.setAttribute(ATTR_ROW_SELECTED, "");
 			}
 		}
 		if (cellHighlight) {
@@ -521,12 +528,14 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 					if (!row || !cols[colIndex]) continue;
 					const ck = cellKeyGen(row, cols[colIndex]);
 					if (!selectedCellKeys.has(ck)) continue;
-					td.classList.add(CELL_RANGE_SELECTED);
+					td.setAttribute(ATTR_CELL_SELECTED, "");
 					if (rowIndex >= lrMinRow && rowIndex <= lrMaxRow && colIndex >= lrMinCol && colIndex <= lrMaxCol) {
-						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, "");
 					}
 				}
 			}
@@ -642,6 +651,92 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 		if (!colKey) return -1;
 		return colKeyToIndexMap.value.get(colKey) ?? -1;
 	}
+	/** 获取指定单元格的合并信息 [rowspan, colspan]，无合并返回 [1, 1] */
+	function getMergeSpan(rowIndex, colIndex) {
+		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) {
+		const { minRow, maxRow, minCol, maxCol } = normalizeRange(range);
+		const data = dataSourceCopy.value;
+		const cols = tableHeaderLast.value;
+		const rowCount = data.length;
+		const colCount = cols.length;
+		const mergeColIndices = [];
+		for (let c = 0; c < colCount; c++) {
+			var _cols$c;
+			if ((_cols$c = cols[c]) === null || _cols$c === void 0 ? void 0 : _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;
+			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;
+				}
+			}
+			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;
+				}
+			}
+			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;
+					if (r + rs - 1 >= eMinRow) {
+						if (r < eMinRow) {
+							eMinRow = r;
+							changed = true;
+						}
+					} else break;
+				}
+			}
+			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;
+				if (c + cs - 1 >= eMinCol) {
+					if (c < eMinCol) {
+						eMinCol = c;
+						changed = true;
+					}
+				} else break;
+			}
+		}
+		if (eMinRow === minRow && eMaxRow === maxRow && eMinCol === minCol && eMaxCol === maxCol) return range;
+		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;
+		return makeRange(newBeginRow, begin.col <= end.col ? eMinCol : eMaxCol, newEndRow, begin.col <= end.col ? eMaxCol : eMinCol);
+	}
 	/** 获取列的左边距和宽度
 	* @param colIndex 列的绝对索引
 	* @returns [left, width]
@@ -720,10 +815,10 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 		const colIndex = getColIndexByKey(getClosestColKey(e.target));
 		if (rowIndex < 0 || colIndex < 0) return;
 		const ctrlKey = e.ctrlKey || e.metaKey;
-		const range = makeRange(rowIndex, colIndex, rowIndex, colIndex);
+		const range = expandRangeToCoverMergedCells(makeRange(rowIndex, colIndex, rowIndex, colIndex));
 		if (e.shiftKey && anchorCell && shiftEnabled.value) {
 			const ranges = selectionRanges.value.slice();
-			const shiftRange = makeRange(anchorCell.rowIndex, anchorCell.colIndex, rowIndex, colIndex);
+			const shiftRange = expandRangeToCoverMergedCells(makeRange(anchorCell.rowIndex, anchorCell.colIndex, rowIndex, colIndex));
 			if (ranges.length) ranges[ranges.length - 1] = shiftRange;
 			else ranges.push(shiftRange);
 			selectionRanges.value = ranges;
@@ -762,7 +857,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 	/** 更新最后一个选区的终点（拖拽过程中） */
 	function updateSelectionEnd(endRowIndex, endColIndex) {
 		if (!anchorCell) return;
-		const newRange = makeRange(anchorCell.rowIndex, anchorCell.colIndex, endRowIndex, endColIndex);
+		const newRange = expandRangeToCoverMergedCells(makeRange(anchorCell.rowIndex, anchorCell.colIndex, endRowIndex, endColIndex));
 		const ranges = [...selectionRanges.value];
 		if (ranges.length > 0) ranges[ranges.length - 1] = newRange;
 		else ranges.push(newRange);
@@ -825,6 +920,15 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 		stopAutoScroll();
 		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();
 	}
 	function emitSelectionChange() {

package/lib/src/StkTable/custom-cells/ChangeCell/createChangeCell.d.ts

@@ -0,0 +1,55 @@
+import { FormatNumberOptions } from '../utils/formatNumber';
+
+/** createChangeCell 配置选项 */
+export interface CreateChangeCellOptions extends FormatNumberOptions {
+    /** 涨跌颜色是否反转：false=A股(涨红跌绿，默认)，true=国际(涨绿跌红) */
+    colorReverse?: boolean;
+    /** 是否显示涨跌箭头 ▲/▼，默认 false */
+    arrow?: boolean;
+    /** 自定义上涨颜色（覆盖默认配色，传入后不受 colorReverse 影响） */
+    riseColor?: string;
+    /** 自定义下跌颜色 */
+    fallColor?: string;
+    /** 自定义平盘颜色 */
+    flatColor?: string;
+}
+/**
+ * 涨跌单元格工厂函数
+ *
+ * 在 {@link formatNumber} 的基础上叠加涨跌染色与箭头。染色按 `cellValue` 正负判断，
+ * 颜色方向可通过 `colorReverse` 切换（A股 / 国际），也可用 `riseColor` 等自定义。
+ * 数字对齐请在列配置上设置 `align: 'right'`。
+ *
+ * @param options 格式化 + 染色/箭头选项
+ * @returns `ChangeCell` 组件构造函数，使用时需调用一次：`customCell: ChangeCell()`
+ *
+ * @example
+ * ```ts
+ * const { ChangeCell } = createChangeCell({ decimals: 2, showSign: true, arrow: true });
+ * const ChangeCellComp = ChangeCell();
+ * const columns = [
+ *   { title: '涨跌额', dataIndex: 'change', align: 'right', customCell: ChangeCellComp },
+ * ];
+ * ```
+ */
+export declare function createChangeCell(options?: CreateChangeCellOptions): {
+    ChangeCell: () => import('vue').Raw<import('vue').DefineComponent<{
+        row: any;
+        col: import('../..').StkTableColumn<any>;
+        cellValue: any;
+        rowIndex: number;
+        colIndex: number;
+        expanded?: import('../..').StkTableColumn<any> | undefined;
+        treeExpanded?: boolean | undefined;
+    }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+        row: any;
+        col: import('../..').StkTableColumn<any>;
+        cellValue: any;
+        rowIndex: number;
+        colIndex: number;
+        expanded?: import('../..').StkTableColumn<any> | undefined;
+        treeExpanded?: boolean | undefined;
+    }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>>;
+};

package/lib/src/StkTable/custom-cells/ChangeCell/index.d.ts

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

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

@@ -0,0 +1,44 @@
+import { 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 declare function createNumberCell(options?: CreateNumberCellOptions): {
+    NumberCell: () => import('vue').Raw<import('vue').DefineComponent<{
+        row: any;
+        col: import('../..').StkTableColumn<any>;
+        cellValue: any;
+        rowIndex: number;
+        colIndex: number;
+        expanded?: import('../..').StkTableColumn<any> | undefined;
+        treeExpanded?: boolean | undefined;
+    }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+        row: any;
+        col: import('../..').StkTableColumn<any>;
+        cellValue: any;
+        rowIndex: number;
+        colIndex: number;
+        expanded?: import('../..').StkTableColumn<any> | undefined;
+        treeExpanded?: boolean | undefined;
+    }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>>;
+};

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

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

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

@@ -0,0 +1,35 @@
+/**
+ * 数字格式化选项
+ *
+ * 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;
+}
+/**
+ * 数字格式化纯函数（NumberCell / ChangeCell 共享内核）。
+ *
+ * 处理管线：空值判断 → 取符号 → 百分比 → 单位缩放 → 小数位 → 千分位 → 拼装。
+ *
+ * @param value 原始值（数字或可转为数字的字符串）
+ * @param options 格式化选项
+ * @returns 格式化后的字符串；空值或非数字返回 placeholder
+ */
+export declare function formatNumber(value: unknown, options?: FormatNumberOptions): string;

package/lib/src/StkTable/index.d.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 { createFilterCell } from './custom-cells/FilterCell/index';
 export type { CreateFilterCellOption, FilterStatus } from './custom-cells/FilterCell/index';
@@ -9,3 +9,9 @@ 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';

package/lib/stk-table-vue.js

@@ -6,7 +6,7 @@
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
-import { a as insertToOrderedArray, i as binarySearch, n as registerFeature, o as strCompare, r as useAreaSelection, s as tableSort, t as StkTable_default } from "./StkTable-QUd4TJCF.js";
+import { a as insertToOrderedArray, i as binarySearch, n as registerFeature, o as strCompare, r as useAreaSelection, s as tableSort, t as StkTable_default } from "./StkTable-BK4VNsvG.js";
 import { Fragment, computed, createApp, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, h, markRaw, nextTick, normalizeClass, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, watch, withModifiers } from "vue";
 //#region src/StkTable/custom-cells/FilterCell/Dropdown/index.ts
 var DropdownIns = null;
@@ -15,7 +15,7 @@ async function getDropdownIns() {
 		const div = document.createElement("div");
 		div.classList.add("stk-filter-dropdown-wrapper");
 		document.body.appendChild(div);
-		DropdownIns = createApp(await import("./Dropdown-Clc70S1z.js").then((module) => module.default)).mount(div);
+		DropdownIns = createApp(await import("./Dropdown-wEI6qpCx.js").then((module) => module.default)).mount(div);
 	}
 	return DropdownIns;
 }
@@ -478,4 +478,168 @@ function createCheckboxCell(options) {
 	};
 }
 //#endregion
-export { StkTable_default as StkTable, binarySearch, createCheckboxCell, createEditableCell, createFilterCell, insertToOrderedArray, registerFeature, strCompare, tableSort, useAreaSelection };
+//#region src/StkTable/custom-cells/utils/formatNumber.ts
+/** 缩放单位阈值表（从大到小匹配） */
+var ABBR_UNITS = {
+	cn: [[1e8, "亿"], [1e4, "万"]],
+	en: [
+		[1e9, "B"],
+		[1e6, "M"],
+		[1e3, "K"]
+	]
+};
+/**
+* 给数字字符串的整数部分添加千分位分隔符。
+* @param numStr 不含符号的正数字符串（可含小数部分）
+*
+* 用手动分组代替先读正则 `\B(?=(\d{3})+(?!\d))`：
+* 后者在长数字上开销随位数非线性增长，且 split('.') 会额外分配数组。
+*/
+function addThousandsSeparator(numStr) {
+	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
+*/
+function formatNumber(value, options = {}) {
+	const { decimals, thousands = true, prefix = "", suffix = "", showSign = false, percent = false, abbr, abbrDecimals, placeholder = "--" } = options;
+	if (value === null || value === void 0 || value === "") return placeholder;
+	const num = typeof value === "number" ? value : Number(value);
+	if (Number.isNaN(num)) return placeholder;
+	const sign = num < 0 ? "-" : showSign && num > 0 ? "+" : "";
+	let work = Math.abs(num);
+	if (percent) work = work * 100;
+	let unit = "";
+	if (abbr && !percent) {
+		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;
+			}
+		}
+	}
+	let fractionDigits;
+	if (unit) fractionDigits = abbrDecimals ?? decimals ?? 2;
+	else fractionDigits = decimals ?? null;
+	let numStr = fractionDigits == null ? String(work) : work.toFixed(fractionDigits);
+	if (thousands) numStr = addThousandsSeparator(numStr);
+	return `${prefix}${sign}${numStr}${unit}${percent ? "%" : ""}${suffix}`;
+}
+//#endregion
+//#region src/StkTable/custom-cells/NumberCell/createNumberCell.ts
+/**
+* 数字格式化单元格工厂函数
+*
+* 纯展示型单元格：将 `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 },
+* ];
+* ```
+*/
+function createNumberCell(options) {
+	/** 单元格组件 - 用于 customCell */
+	function NumberCell() {
+		return markRaw(defineComponent({
+			props: [
+				"row",
+				"col",
+				"cellValue",
+				"rowIndex",
+				"colIndex",
+				"expanded",
+				"treeExpanded"
+			],
+			setup(props) {
+				return () => h("span", { class: "stk-number-cell" }, formatNumber(props.cellValue, options));
+			}
+		}));
+	}
+	return { NumberCell };
+}
+//#endregion
+//#region src/StkTable/custom-cells/ChangeCell/createChangeCell.ts
+/** 根据原始值判断涨跌方向 */
+function resolveDir(rawValue) {
+	const num = rawValue === "" || rawValue == null ? NaN : Number(rawValue);
+	if (Number.isNaN(num) || num === 0) return "flat";
+	return num > 0 ? "rise" : "fall";
+}
+/**
+* 涨跌单元格工厂函数
+*
+* 在 {@link formatNumber} 的基础上叠加涨跌染色与箭头。染色按 `cellValue` 正负判断，
+* 颜色方向可通过 `colorReverse` 切换（A股 / 国际），也可用 `riseColor` 等自定义。
+* 数字对齐请在列配置上设置 `align: 'right'`。
+*
+* @param options 格式化 + 染色/箭头选项
+* @returns `ChangeCell` 组件构造函数，使用时需调用一次：`customCell: ChangeCell()`
+*
+* @example
+* ```ts
+* const { ChangeCell } = createChangeCell({ decimals: 2, showSign: true, arrow: true });
+* const ChangeCellComp = ChangeCell();
+* const columns = [
+*   { title: '涨跌额', dataIndex: 'change', align: 'right', customCell: ChangeCellComp },
+* ];
+* ```
+*/
+function createChangeCell(options = {}) {
+	const { colorReverse = false, arrow = false, riseColor, fallColor, flatColor } = options;
+	/** 单元格组件 - 用于 customCell */
+	function ChangeCell() {
+		return markRaw(defineComponent({
+			props: [
+				"row",
+				"col",
+				"cellValue",
+				"rowIndex",
+				"colIndex",
+				"expanded",
+				"treeExpanded"
+			],
+			setup(props) {
+				return () => {
+					const raw = props.cellValue;
+					const dir = resolveDir(raw);
+					let colorClass = "stk-change-cell--flat";
+					if (dir === "rise") colorClass = colorReverse ? "stk-change-cell--green" : "stk-change-cell--red";
+					else if (dir === "fall") colorClass = colorReverse ? "stk-change-cell--red" : "stk-change-cell--green";
+					const customColor = dir === "rise" ? riseColor : dir === "fall" ? fallColor : flatColor;
+					const arrowChar = arrow && dir !== "flat" ? dir === "rise" ? "▲" : "▼" : "";
+					return h("span", {
+						class: ["stk-change-cell", colorClass],
+						style: customColor ? { color: customColor } : void 0
+					}, [arrowChar ? h("span", { class: "stk-change-cell__arrow" }, arrowChar) : null, formatNumber(raw, options)]);
+				};
+			}
+		}));
+	}
+	return { ChangeCell };
+}
+//#endregion
+export { StkTable_default as StkTable, binarySearch, createChangeCell, createCheckboxCell, createEditableCell, createFilterCell, createNumberCell, formatNumber, insertToOrderedArray, registerFeature, strCompare, tableSort, useAreaSelection };

package/lib/style.css

@@ -139,6 +139,32 @@
   cursor:pointer;
   vertical-align:middle;
 }
+.stk-change-cell{
+  --stk-change-red:#e02020;
+  --stk-change-green:#00a870;
+  --stk-change-flat:#666;
+  display:inline-flex;
+  align-items:center;
+  gap:2px;
+}
+.stk-change-cell--red{
+  color:var(--stk-change-red);
+}
+.stk-change-cell--green{
+  color:var(--stk-change-green);
+}
+.stk-change-cell--flat{
+  color:var(--stk-change-flat);
+}
+.stk-change-cell__arrow{
+  font-size:0.85em;
+  line-height:1;
+}
+.stk-table.dark .stk-change-cell{
+  --stk-change-red:#ff5c5c;
+  --stk-change-green:#26c281;
+  --stk-change-flat:#aaa;
+}
 @keyframes stk-table-dim{
   from{
     background-color:var(--highlight-color);
@@ -226,7 +252,7 @@
   --rs-bc:#4b8ef0;
   color:#d1d1e0;
 }
-.stk-table.dark .cell-range-selected{
+.stk-table.dark td[data-cs-s]{
   background-blend-mode:normal;
 }
 .stk-table.scrollbar-on{
@@ -255,7 +281,7 @@
   pointer-events:none;
 }
 .stk-table.bordered{
-  border-left:1px solid var(--border-color);
+  border-left:var(--border-width) solid var(--border-color);
   background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
 .stk-table.bordered th,
@@ -286,7 +312,7 @@
 .stk-table.stripe.vt-on .stk-tbody-main tr:nth-child(odd){
   background-color:var(--stripe-bgc);
 }
-.stk-table.stripe.area-selection .stk-tbody-main tr.row-range-selected{
+.stk-table.stripe.area-selection .stk-tbody-main tr[data-rs-s]{
   background-color:var(--rs-bgc);
 }
 .stk-table.stripe.row-hover .stk-tbody-main tr:hover{
@@ -301,7 +327,7 @@
 .stk-table.row-active .stk-tbody-main tr.active{
   background-color:var(--tr-active-bgc);
 }
-.stk-table .stk-tbody-main tr.row-range-selected{
+.stk-table .stk-tbody-main tr[data-rs-s]{
   background-color:var(--rs-bgc);
 }
 .stk-table .stk-tbody-main tr.row-range-start td{
@@ -495,22 +521,26 @@
 .stk-table .fixed-cell{
   background-color:inherit;
 }
-.stk-table .cell-range-selected{
+.stk-table td[data-cs-s]{
   background-blend-mode:multiply;
   background-color:var(--cs-bgc);
   box-shadow:inset 0 0 0 0 var(--cs-bc), inset 0 0 0 0 var(--cs-bc), inset 0 0 0 0 var(--cs-bc), inset 0 0 0 0 var(--cs-bc);
   box-shadow:inset 0 var(--cs-t, 0) 0 0 var(--cs-bc), inset 0 var(--cs-b, 0) 0 0 var(--cs-bc), inset var(--cs-l, 0) 0 0 0 var(--cs-bc), inset var(--cs-r, 0) 0 0 0 var(--cs-bc);
 }
-.stk-table .cell-range-t{
+.stk-table td[data-cs-t]{
   --cs-t:2px;
 }
-.stk-table .cell-range-b{
+.stk-table td[data-cs-s].cell-hover,
+.stk-table td[data-cs-s].cell-active{
+  background-color:var(--cs-bgc);
+}
+.stk-table td[data-cs-b]{
   --cs-b:-2px;
 }
-.stk-table .cell-range-l{
+.stk-table td[data-cs-l]{
   --cs-l:2px;
 }
-.stk-table .cell-range-r{
+.stk-table td[data-cs-r]{
   --cs-r:-2px;
 }
 .stk-table .highlight-cell{