chore: ajust table option interface

packages/vstory-core/src/character/table/runtime/col-style.ts

@@ -11,27 +11,29 @@ export class ColStyleRuntime implements ITableCharacterRuntime {
 
     if (options.colStyle && Object.keys(options.colStyle).length > 0) {
       Object.keys(options.colStyle).forEach(key => {
-        const colStyle = options.colStyle[key as unknown as number];
+        const col = parseInt(key, 10);
+        const styleKey = `colStyle-${col}`;
+        const colStyle = options.colStyle[col];
         if (!colStyle) {
           return;
         }
         // 声明样式
-        vTable.registerCustomCellStyle(key, colStyle.style);
+        vTable.registerCustomCellStyle(styleKey, colStyle);
         // 匹配样式
         vTable.arrangeCustomCellStyle(
           {
             range: {
               start: {
-                col: colStyle.col + rowHeaderCount,
+                col: col + rowHeaderCount,
                 row: 0
               },
               end: {
-                col: colStyle.col + rowHeaderCount,
+                col: col + rowHeaderCount,
                 row: rowCount - 1
               }
             }
           },
-          key
+          styleKey
         );
       });
     }

packages/vstory-core/src/character/table/runtime/content-col-style.ts

@@ -12,27 +12,29 @@ export class ContentColStyleRuntime implements ITableCharacterRuntime {
 
     if (options.contentColStyle && Object.keys(options.contentColStyle).length > 0) {
       Object.keys(options.contentColStyle).forEach(key => {
-        const colStyle = options.contentColStyle[key as unknown as number];
+        const col = parseInt(key, 10);
+        const styleKey = `contentColStyle-${col}`;
+        const colStyle = options.contentColStyle[col];
         if (!colStyle) {
           return;
         }
         // 声明样式
-        vTable.registerCustomCellStyle(key, colStyle.style);
+        vTable.registerCustomCellStyle(styleKey, colStyle);
         // 匹配样式
         vTable.arrangeCustomCellStyle(
           {
             range: {
               start: {
-                col: colStyle.col + rowHeaderCount,
+                col: col + rowHeaderCount,
                 row: colHeaderCount
               },
               end: {
-                col: colStyle.col + rowHeaderCount,
+                col: col + rowHeaderCount,
                 row: rowCount - 1
               }
             }
           },
-          key
+          styleKey
         );
       });
     }

packages/vstory-core/src/character/table/runtime/content-row-style.ts

@@ -12,27 +12,29 @@ export class ContentRowStyleRuntime implements ITableCharacterRuntime {
 
     if (options.contentRowStyle && Object.keys(options.contentRowStyle).length > 0) {
       Object.keys(options.contentRowStyle).forEach(key => {
-        const rowStyle = options.contentRowStyle[key as unknown as number];
+        const row = parseInt(key, 10);
+        const styleKey = `contentRowStyle-${row}`;
+        const rowStyle = options.contentRowStyle[row];
         if (!rowStyle) {
           return;
         }
         // 声明样式
-        vTable.registerCustomCellStyle(key, rowStyle.style);
+        vTable.registerCustomCellStyle(styleKey, rowStyle);
         // 匹配样式
         vTable.arrangeCustomCellStyle(
           {
             range: {
               start: {
-                row: rowStyle.row + colHeaderCount,
+                row: row + colHeaderCount,
                 col: rowHeaderCount
               },
               end: {
-                row: rowStyle.row + colHeaderCount,
+                row: row + colHeaderCount,
                 col: colCount - 1
               }
             }
           },
-          key
+          styleKey
         );
       });
     }

packages/vstory-core/src/character/table/runtime/row-style.ts

@@ -11,27 +11,29 @@ export class RowStyleRuntime implements ITableCharacterRuntime {
 
     if (options.rowStyle && Object.keys(options.rowStyle).length > 0) {
       Object.keys(options.rowStyle).forEach(key => {
-        const rowStyle = options.rowStyle[key as unknown as number];
+        const row = parseInt(key, 10);
+        const styleKey = `rowStyle-${row}`;
+        const rowStyle = options.rowStyle[row];
         if (!rowStyle) {
           return;
         }
         // 声明样式
-        vTable.registerCustomCellStyle(key, rowStyle.style);
+        vTable.registerCustomCellStyle(styleKey, rowStyle);
         // 匹配样式
         vTable.arrangeCustomCellStyle(
           {
             range: {
               start: {
-                row: rowStyle.row + colHeaderCount,
+                row: row + colHeaderCount,
                 col: 0
               },
               end: {
-                row: rowStyle.row + colHeaderCount,
+                row: row + colHeaderCount,
                 col: colCount - 1
               }
             }
           },
-          key
+          styleKey
         );
       });
     }

packages/vstory-core/src/interface/dsl/table.ts

@@ -37,17 +37,11 @@ interface ITableCharacterConfigOptionsType {
   };
   // 列样式（包括列头）
   colStyle?: {
-    [key: number]: {
-      col: number;
-      style: any;
-    };
+    [key: number]: any;
   };
   // 行样式（包括行头）
   rowStyle?: {
-    [key: number]: {
-      row: number;
-      style: any;
-    };
+    [key: number]: any;
   };
   // 列隐藏
   colVisible?: {
@@ -59,21 +53,11 @@ interface ITableCharacterConfigOptionsType {
   };
   // 内容列样式
   contentColStyle?: {
-    [key: number]: {
-      col: number;
-      rowStart: number;
-      rowEnd: number;
-      style: any;
-    };
+    [key: number]: any;
   };
   // 内容行样式
   contentRowStyle?: {
-    [key: number]: {
-      row: number;
-      colStart: number;
-      colEnd: number;
-      style: any;
-    };
+    [key: number]: any;
   };
 }
 

packages/vstory/demo/src/App.tsx

@@ -63,6 +63,10 @@ import { RuntimeTotalLabel } from './demos/chart/runtime/total-label';
 import { RectComponent } from './demos/component/rect';
 import { TableInfographic } from './demos/infographic/infographic-table';
 import { ComponentsEdit } from './demos/edit/components';
+import { ShowHeader } from './demos/table/runtime/show-header';
+import { TableTheme } from './demos/table/runtime/theme';
+import { TableStyle } from './demos/table/runtime/style';
+import { TableVisible } from './demos/table/runtime/visible';
 
 type MenusType = (
   | {
@@ -365,6 +369,22 @@ const App = () => {
         {
           name: 'Pivot Chart Base',
           component: PivotChartBase
+        },
+        {
+          name: 'Show Header',
+          component: ShowHeader
+        },
+        {
+          name: 'Theme',
+          component: TableTheme
+        },
+        {
+          name: 'Style',
+          component: TableStyle
+        },
+        {
+          name: 'Visible',
+          component: TableVisible
         }
       ]
     }

packages/vstory/demo/src/demos/table/runtime/show-header.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect } from 'react';
+import {
+  Player,
+  Story,
+  initVR,
+  registerGraphics,
+  registerCharacters,
+  IStoryDSL
+} from '../../../../../../vstory-core/src';
+import {
+  registerVComponentAction,
+  registerVChartAction,
+  registerVTableAction
+} from '../../../../../../vstory-player/src';
+import { listTableOption } from '../option-list-table';
+import { cloneDeep } from '@visactor/vutils';
+
+registerGraphics();
+registerCharacters();
+registerVChartAction();
+registerVComponentAction();
+registerVTableAction();
+initVR();
+
+function loadDSL() {
+  const dsl: IStoryDSL = {
+    characters: [
+      {
+        type: 'VTable',
+        id: 'table0',
+        zIndex: 10,
+        position: {
+          top: 20,
+          left: 20,
+          width: 500,
+          height: 300
+        },
+        options: {
+          spec: cloneDeep(listTableOption),
+          initOption: {
+            interactive: true,
+            animation: false,
+            disableTriggerEvent: true,
+            disableDirtyBounds: true
+          },
+          showHeader: false
+        }
+      }
+    ],
+    acts: []
+  };
+  dsl.acts = [
+    {
+      id: 'defaultAct',
+      scenes: [
+        {
+          id: 'defaultScene',
+          actions: [
+            {
+              characterId: dsl.characters.map(i => i.id),
+              characterActions: [
+                {
+                  action: 'bounce',
+                  payload: {
+                    animation: {
+                      duration: 2000,
+                      easing: 'quadOut'
+                    },
+                    type: 'bounce4',
+                    flipY: true
+                    // dy: 30,
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ];
+  return dsl;
+}
+
+export const ShowHeader = () => {
+  const id = 'show-header';
+
+  useEffect(() => {
+    const container = document.getElementById(id);
+    const canvas = document.createElement('canvas');
+    container?.appendChild(canvas);
+
+    const story = new Story(null, { canvas, width: 700, height: 500, background: 'gray' });
+    const player = new Player(story);
+    story.init(player);
+    // @ts-ignore
+    window.story = story;
+    // @ts-ignore
+    window.player = player;
+    const dsl = loadDSL();
+    story.load(dsl);
+    player.play(-1);
+
+    return () => {
+      story.release();
+    };
+  }, []);
+
+  return <div style={{ width: '100%', height: '100%' }} id={id}></div>;
+};