stk-table-vue 1.0.0 → 1.0.2

package/lib/stk-table-vue.js

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0
+ * version: v1.0.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * 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-Deyo4iqb.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-iW-rY3I6.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

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0
+ * version: v1.0.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -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,
@@ -265,6 +291,13 @@
 .stk-table.bordered thead tr:first-child th{
   background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
+.stk-table.bordered th.fixed-cell--border-left,
+.stk-table.bordered td.fixed-cell--border-left{
+  background-image:var(--bg-border-left), var(--bg-border-right), var(--bg-border-bottom);
+}
+.stk-table.bordered 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);
+}
 .stk-table.bordered-h{
   border-left:none;
   --bg-border-right:linear-gradient(transparent, transparent);
@@ -279,6 +312,7 @@
 }
 .stk-table.bordered-body-h tbody{
   --bg-border-right:linear-gradient(transparent, transparent);
+  --bg-border-left:linear-gradient(transparent, transparent);
 }
 .stk-table.stripe:not(.vt-on) .stk-tbody-main tr:nth-child(even){
   background-color:var(--stripe-bgc);
@@ -286,7 +320,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 +335,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 +529,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{

package/package.json

@@ -1,89 +1,89 @@
-{
-  "name": "stk-table-vue",
-  "version": "1.0.0",
-  "description": "High performance realtime virtual table for vue3 and vue2.7",
-  "main": "./lib/stk-table-vue.js",
-  "types": "./lib/src/StkTable/index.d.ts",
-  "homepage": "https://ja-plus.github.io/stk-table-vue/",
-  "author": "japlus",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ja-plus/stk-table-vue"
-  },
-  "bugs": {
-    "url": "https://github.com/ja-plus/stk-table-vue/issues"
-  },
-  "packageManager": "pnpm@10.7.0",
-  "directories": {
-    "test": "test"
-  },
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "test": "vitest",
-    "docs:dev": "vitepress dev docs-src",
-    "docs:build": "vitepress build docs-src",
-    "docs:preview": "vitepress preview docs-src",
-    "docs:update": "cp -rf ./docs-src/.vitepress/dist/* ./docs"
-  },
-  "keywords": [
-    "vue",
-    "table",
-    "vue-table",
-    "virtual table",
-    "virtual-scroll",
-    "data-table",
-    "vue-component",
-    "grid",
-    "vue2",
-    "vue3",
-    "highlight",
-    "sticky",
-    "virtual",
-    "list"
-  ],
-  "files": [
-    "lib",
-    "src"
-  ],
-  "devDependencies": {
-    "@arco-design/web-vue": "^2.58.0",
-    "@chenglou/pretext": "^0.0.8",
-    "@types/mockjs": "^1.0.10",
-    "@types/node": "^22.18.10",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/test-utils": "^2.4.6",
-    "ant-design-vue": "4",
-    "element-plus": "^2.14.3",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-html": "^8.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.25.0",
-    "happy-dom": "^18.0.1",
-    "ja-contextmenu": "^1.11.0",
-    "less": "^4.2.0",
-    "mitt": "^3.0.1",
-    "mockjs": "^1.1.0",
-    "naive-ui": "2",
-    "postcss": "^8.4.47",
-    "postcss-discard-comments": "^6.0.2",
-    "postcss-preset-env": "^9.5.11",
-    "prettier": "^3.2.5",
-    "stk-table-vue": "^0.11.15",
-    "typescript": "^5.8.3",
-    "vite": "^8.1.2",
-    "vite-plugin-banner": "^0.8.1",
-    "vite-plugin-dts": "3.9.1",
-    "vitepress": "^1.6.4",
-    "vitepress-demo-plugin": "^1.5.1",
-    "vitepress-plugin-llms": "^1.13.2",
-    "vitest": "^4.1.9",
-    "vue": "^3.5.39",
-    "vue-eslint-parser": "^9.4.2"
-  }
-}
+{
+  "name": "stk-table-vue",
+  "version": "1.0.2",
+  "description": "High performance realtime virtual table for vue3 and vue2.7",
+  "main": "./lib/stk-table-vue.js",
+  "types": "./lib/src/StkTable/index.d.ts",
+  "homepage": "https://ja-plus.github.io/stk-table-vue/",
+  "author": "japlus",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ja-plus/stk-table-vue"
+  },
+  "bugs": {
+    "url": "https://github.com/ja-plus/stk-table-vue/issues"
+  },
+  "packageManager": "pnpm@10.7.0",
+  "directories": {
+    "test": "test"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vitest",
+    "docs:dev": "vitepress dev docs-src",
+    "docs:build": "vitepress build docs-src",
+    "docs:preview": "vitepress preview docs-src",
+    "docs:update": "cp -rf ./docs-src/.vitepress/dist/* ./docs"
+  },
+  "keywords": [
+    "vue",
+    "table",
+    "vue-table",
+    "virtual table",
+    "virtual-scroll",
+    "data-table",
+    "vue-component",
+    "grid",
+    "vue2",
+    "vue3",
+    "highlight",
+    "sticky",
+    "virtual",
+    "list"
+  ],
+  "files": [
+    "lib",
+    "src"
+  ],
+  "devDependencies": {
+    "@arco-design/web-vue": "^2.58.0",
+    "@chenglou/pretext": "^0.0.8",
+    "@types/mockjs": "^1.0.10",
+    "@types/node": "^22.18.10",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/test-utils": "^2.4.6",
+    "ant-design-vue": "4",
+    "element-plus": "^2.14.3",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-html": "^8.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.25.0",
+    "happy-dom": "^18.0.1",
+    "ja-contextmenu": "^1.11.0",
+    "less": "^4.2.0",
+    "mitt": "^3.0.1",
+    "mockjs": "^1.1.0",
+    "naive-ui": "2",
+    "postcss": "^8.4.47",
+    "postcss-discard-comments": "^6.0.2",
+    "postcss-preset-env": "^9.5.11",
+    "prettier": "^3.2.5",
+    "stk-table-vue": "^0.11.15",
+    "typescript": "^5.8.3",
+    "vite": "^8.1.2",
+    "vite-plugin-banner": "^0.8.1",
+    "vite-plugin-dts": "3.9.1",
+    "vitepress": "^1.6.4",
+    "vitepress-demo-plugin": "^1.5.1",
+    "vitepress-plugin-llms": "^1.13.2",
+    "vitest": "^4.1.9",
+    "vue": "^3.5.39",
+    "vue-eslint-parser": "^9.4.2"
+  }
+}

package/src/StkTable/StkTable.vue

@@ -911,10 +911,6 @@ const getFixedStyle = useFixedStyle<DT>(props, isRelativeMode, getFixedColPositi
 
 const [highlightSteps, setHighlightDimRow, setHighlightDimCell] = useHighlight(props, stkTableId, tableContainerRef);
 
-if (props.autoResize) {
-    useAutoResize(tableContainerRef, initVirtualScroll, props, 200);
-}
-
 function getRowIndex(row: DT): number {
     const targetKey = rowKeyGen(row);
     return dataSourceCopy.value.findIndex(item => rowKeyGen(item) === targetKey);
@@ -963,6 +959,19 @@ const [fixedCols, fixedColClassMap, updateFixedShadow] = useFixedCol(
     tableContainerRef,
 );
 
+if (props.autoResize) {
+    useAutoResize(
+        tableContainerRef,
+        () => {
+            initVirtualScroll();
+            // 容器宽度变化后，需重新计算固定列状态
+            updateFixedShadow();
+        },
+        props,
+        200,
+    );
+}
+
 const [colResizeOn, isColResizing, onThResizeMouseDown] = useColResize(
     props,
     emits,

package/src/StkTable/custom-cells/ChangeCell/ChangeCell.less

@@ -0,0 +1,34 @@
+.stk-change-cell {
+    // 默认（浅色）配色：涨红跌绿为 A 股习惯，颜色方向由组件按 colorReverse 决定
+    --stk-change-red: #e02020;
+    --stk-change-green: #00a870;
+    --stk-change-flat: #666;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+
+    &--red {
+        color: var(--stk-change-red);
+    }
+
+    &--green {
+        color: var(--stk-change-green);
+    }
+
+    &--flat {
+        color: var(--stk-change-flat);
+    }
+
+    &__arrow {
+        font-size: 0.85em;
+        line-height: 1;
+    }
+}
+
+// 暗色主题下适当提亮，跟随表格根节点 .stk-table.dark
+.stk-table.dark .stk-change-cell {
+    --stk-change-red: #ff5c5c;
+    --stk-change-green: #26c281;
+    --stk-change-flat: #aaa;
+}

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

@@ -0,0 +1,90 @@
+import type { CustomCellProps } from '../../types';
+import { defineComponent, h, markRaw } from 'vue';
+import { formatNumber, type 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;
+}
+
+/** 涨跌方向：涨 / 跌 / 平（含空值） */
+type ChangeDir = 'rise' | 'fall' | 'flat';
+
+/** 根据原始值判断涨跌方向 */
+function resolveDir(rawValue: any): ChangeDir {
+    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 },
+ * ];
+ * ```
+ */
+export function createChangeCell(options: CreateChangeCellOptions = {}) {
+    const { colorReverse = false, arrow = false, riseColor, fallColor, flatColor } = options;
+
+    /** 单元格组件 - 用于 customCell */
+    function ChangeCell() {
+        return markRaw(
+            defineComponent({
+                // eslint-disable-next-line vue/require-prop-types
+                props: ['row', 'col', 'cellValue', 'rowIndex', 'colIndex', 'expanded', 'treeExpanded'],
+                setup(props: CustomCellProps<any>) {
+                    return () => {
+                        const raw = props.cellValue;
+                        const dir = resolveDir(raw);
+
+                        // 颜色 class：涨=红/跌=绿（colorReverse 时互换），平=中性
+                        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' ? '▲' : '▼') : ''; // TODO: 支持自定义箭头
+
+                        return h(
+                            'span',
+                            {
+                                class: ['stk-change-cell', colorClass],
+                                style: customColor ? { color: customColor } : undefined,
+                            },
+                            [arrowChar ? h('span', { class: 'stk-change-cell__arrow' }, arrowChar) : null, formatNumber(raw, options)],
+                        );
+                    };
+                },
+            }),
+        );
+    }
+
+    return {
+        ChangeCell,
+    };
+}

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

@@ -0,0 +1,4 @@
+export { createChangeCell } from './createChangeCell';
+export type { CreateChangeCellOptions } from './createChangeCell';
+
+import './ChangeCell.less';