fix: refresh functional icons after theme updates

common/changes/@visactor/vtable/fix-issue-4816-functional-icon-theme_2026-07-27-15-36.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: refresh functional icons after theme updates",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "biukam.w@gmail.com"
+}

packages/vtable/__tests__/functional-icons-theme.test.ts

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import * as VTable from '../src';
+import { createDiv, removeDom } from './dom';
+
+global.__VERSION__ = 'none';
+
+describe('functional icon theme updates', () => {
+  let container: HTMLElement;
+  let table: VTable.ListTable;
+
+  const columns = [{ field: 'name', title: 'Name', sort: true, tree: true }];
+  const records = [{ name: 'Parent', children: [{ name: 'Child' }] }];
+
+  const createTable = () => {
+    container = createDiv();
+    container.style.width = '600px';
+    container.style.height = '400px';
+    table = new VTable.ListTable(container, {
+      columns,
+      records,
+      rowSeriesNumber: { dragOrder: true },
+      theme: {
+        functionalIconsStyle: {
+          sort_color: '#111111',
+          collapse_color: '#222222',
+          dragReorder_color: '#333333'
+        }
+      }
+    });
+  };
+
+  afterEach(() => {
+    table?.release();
+    removeDom(container);
+  });
+
+  test('refreshes functional icons after updateOption', () => {
+    createTable();
+
+    table.updateOption({
+      columns,
+      records,
+      rowSeriesNumber: { dragOrder: true },
+      theme: {
+        functionalIconsStyle: {
+          sort_color: '#123456',
+          collapse_color: '#234567',
+          dragReorder_color: '#345678'
+        }
+      }
+    });
+
+    expect(table.internalProps.headerHelper.normalIcon.svg).toContain('#123456');
+    expect(table.internalProps.bodyHelper.collapseIcon.svg).toContain('#234567');
+    expect(table.internalProps.rowSeriesNumberHelper.dragReorderIconName.svg).toContain('#345678');
+  });
+
+  test('refreshes functional icons after updateTheme', () => {
+    createTable();
+
+    table.updateTheme({
+      functionalIconsStyle: {
+        sort_color: '#456789',
+        collapse_color: '#56789a',
+        dragReorder_color: '#6789ab'
+      }
+    });
+
+    expect(table.internalProps.headerHelper.normalIcon.svg).toContain('#456789');
+    expect(table.internalProps.bodyHelper.collapseIcon.svg).toContain('#56789a');
+    expect(table.internalProps.rowSeriesNumberHelper.dragReorderIconName.svg).toContain('#6789ab');
+  });
+
+  test('refreshes functional icons after setting theme', () => {
+    createTable();
+
+    table.theme = {
+      functionalIconsStyle: {
+        sort_color: '#789abc',
+        collapse_color: '#89abcd',
+        dragReorder_color: '#9abcde'
+      }
+    };
+
+    expect(table.internalProps.headerHelper.normalIcon.svg).toContain('#789abc');
+    expect(table.internalProps.bodyHelper.collapseIcon.svg).toContain('#89abcd');
+    expect(table.internalProps.rowSeriesNumberHelper.dragReorderIconName.svg).toContain('#9abcde');
+  });
+});

packages/vtable/src/body-helper/body-helper.ts

@@ -19,6 +19,10 @@ export class BodyHelper {
   _table: BaseTableAPI;
   constructor(_table: BaseTableAPI) {
     this._table = _table;
+    this.updateIcons();
+  }
+
+  updateIcons() {
     const regedIcons = registerIcons.get();
     //展开折叠按钮
     this.expandIcon = regedIcons[InternalIconName.expandIconName] as SvgIcon;

packages/vtable/src/core/BaseTable.ts

@@ -503,7 +503,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     internalProps.focusedTable = false;
     internalProps.theme = themes.of(options.theme ?? themes.DEFAULT); //原来在listTable文件中
     internalProps.theme.isPivot = this.isPivotTable();
-    setIconColor(internalProps.theme.functionalIconsStyle);
+    this._updateFunctionalIcons();
     if (container) {
       // 先清空
       if (clearDOM) {
@@ -2938,7 +2938,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
 
     internalProps.theme = themes.of(options.theme ?? themes.DEFAULT);
     internalProps.theme.isPivot = this.isPivotTable();
-    setIconColor(internalProps.theme.functionalIconsStyle);
+    this._updateFunctionalIcons();
     this.scenegraph.updateStageBackground();
     // this._updateSize();
     //设置是否自动撑开的配置
@@ -3783,14 +3783,20 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
   /**
    * 获取当前使用的主题
    */
+  private _updateFunctionalIcons() {
+    setIconColor(this.internalProps.theme.functionalIconsStyle);
+    this.internalProps.headerHelper?.updateIcons();
+    this.internalProps.bodyHelper?.updateIcons();
+    this.internalProps.rowSeriesNumberHelper?.updateIcons();
+  }
   get theme(): TableTheme {
     return this.internalProps.theme;
   }
   set theme(theme: TableTheme) {
     this.internalProps.theme = themes.of(theme ?? themes.DEFAULT);
     this.internalProps.theme.isPivot = this.isPivotTable();
     this.options.theme = theme;
-    setIconColor(this.internalProps.theme.functionalIconsStyle);
+    this._updateFunctionalIcons();
   }
   /**
    * 设置主题
@@ -3799,7 +3805,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
     this.internalProps.theme = themes.of(theme ?? themes.DEFAULT);
     this.internalProps.theme.isPivot = this.isPivotTable();
-    setIconColor(this.internalProps.theme.functionalIconsStyle);
+    this._updateFunctionalIcons();
     this.options.theme = theme;
     this.scenegraph.updateComponent();
     this.scenegraph.updateStageBackground();

packages/vtable/src/core/row-series-number-helper.ts

@@ -17,6 +17,10 @@ export class RowSeriesNumberHelper {
   _table: BaseTableAPI;
   constructor(_table: BaseTableAPI) {
     this._table = _table;
+    this.updateIcons();
+  }
+
+  updateIcons() {
     const regedIcons = registerIcons.get();
 
     this.dragReorderIconName = regedIcons[InternalIconName.dragReorderIconName] as SvgIcon;

packages/vtable/src/header-helper/header-helper.ts

@@ -38,6 +38,10 @@ export class HeaderHelper {
   _table: BaseTableAPI;
   constructor(_table: BaseTableAPI) {
     this._table = _table;
+    this.updateIcons();
+  }
+
+  updateIcons() {
     const regedIcons = registerIcons.get();
     //pin默认值
     this.freezeIcon = regedIcons[InternalIconName.freezeIconName] as SvgIcon;