fix: fix theme update in vtable-gantt

src/views/plugin/gantt/vtable/index.vue

@@ -1,10 +1,12 @@
 <script setup lang="tsx">
-import { onMounted, shallowRef } from 'vue';
+import { onMounted, onUnmounted, shallowRef, watch } from 'vue';
 import * as VTableGantt from '@visactor/vtable-gantt';
 import * as VTable_editors from '@visactor/vtable-editors';
-// import { useThemeStore } from '@/store/modules/theme';
+import { useThemeStore } from '@/store/modules/theme';
 import { basicGanttRecords, customGanttRecords, linkGanttRecords } from './data';
 
+const theme = useThemeStore();
+
 const input_editor = new VTable_editors.InputEditor();
 const date_input_editor = new VTable_editors.DateInputEditor();
 VTableGantt.VTable.register.editor('input', input_editor);
@@ -14,6 +16,10 @@ const basicGanttDomRef = shallowRef<HTMLElement>();
 const linkGanttDomRef = shallowRef<HTMLElement>();
 const customGanttDomRef = shallowRef<HTMLElement>();
 
+const basicGanttInstance = shallowRef<VTableGantt.Gantt>();
+const linkGanttInstance = shallowRef<VTableGantt.Gantt>();
+const customGanttInstance = shallowRef<VTableGantt.Gantt>();
+
 const basicGanttColumns = [
   {
     field: 'title',
@@ -59,31 +65,14 @@ const basicGanttColumns = [
     editor: 'input'
   }
 ];
-const basicGanttOption = {
+const basicGanttOption: VTableGantt.GanttConstructorOptions = {
   overscrollBehavior: 'none',
   records: basicGanttRecords,
   taskListTable: {
     columns: basicGanttColumns,
     tableWidth: 250,
     minTableWidth: 100,
-    maxTableWidth: 600,
+    maxTableWidth: 600
-    theme: {
-      headerStyle: {
-        borderColor: '#e1e4e8',
-        borderLineWidth: 1,
-        fontSize: 18,
-        fontWeight: 'bold',
-        color: 'red',
-        bgColor: '#EEF1F5'
-      },
-      bodyStyle: {
-        borderColor: '#e1e4e8',
-        borderLineWidth: [1, 0, 1, 0],
-        fontSize: 16,
-        color: '#4D4D4D',
-        bgColor: '#FFF'
-      }
-    }
     // rightFrozenColCount: 1
   },
   frame: {
@@ -143,11 +132,7 @@ const basicGanttOption = {
       /** 已完成部分任务条的颜色 */
       completedBarColor: '#91e8e0',
       /** 任务条的圆角 */
-      cornerRadius: 8,
+      cornerRadius: 8
-      /** 任务条的边框 */
-      borderWidth: 1,
-      /** 边框颜色 */
-      borderColor: 'black'
     }
   },
   timelineHeader: {
@@ -176,7 +161,6 @@ const basicGanttOption = {
           strokeColor: 'black',
           textAlign: 'right',
           textBaseline: 'bottom',
-          backgroundColor: '#EEF1F5',
           textStick: true
           // padding: [0, 30, 0, 20]
         }
@@ -193,8 +177,7 @@ const basicGanttOption = {
           color: 'white',
           strokeColor: 'black',
           textAlign: 'right',
-          textBaseline: 'bottom',
+          textBaseline: 'bottom'
-          backgroundColor: '#EEF1F5'
         }
       }
     ]
@@ -219,14 +202,7 @@ const basicGanttOption = {
   ],
   rowSeriesNumber: {
     title: '行号',
-    dragOrder: true,
+    dragOrder: true
-    headerStyle: {
-      bgColor: '#EEF1F5',
-      borderColor: '#e1e4e8'
-    },
-    style: {
-      borderColor: '#e1e4e8'
-    }
   },
   scrollStyle: {
     scrollRailColor: 'RGBA(246,246,246,0.5)',
@@ -276,7 +252,7 @@ const linkGanttColumns = [
     editor: 'input'
   }
 ];
-const linkGanttOption = {
+const linkGanttOption: VTableGantt.GanttConstructorOptions = {
   records: linkGanttRecords,
   taskListTable: {
     columns: linkGanttColumns,
@@ -417,15 +393,7 @@ const linkGanttOption = {
 
   rowSeriesNumber: {
     title: '行号',
-    dragOrder: true,
+    dragOrder: true
-    headerStyle: {
-      bgColor: '#EEF1F5',
-      borderColor: '#e1e4e8'
-    },
-    style: {
-      color: '#000',
-      fontSize: 14
-    }
   },
   scrollStyle: {
     visible: 'scrolling'
@@ -435,7 +403,7 @@ const linkGanttOption = {
 
 const barColors0 = ['#aecde6', '#c6a49a', '#ffb582', '#eec1de', '#b3d9b3', '#cccccc', '#e59a9c', '#d9d1a5', '#c9bede'];
 const barColors = ['#1f77b4', '#8c564b', '#ff7f0e', '#e377c2', '#2ca02c', '#7f7f7f', '#d62728', '#bcbd22', '#9467bd'];
-const customGanttColumns = [
+const customGanttColumns: VTableGantt.ColumnsDefine = [
   {
     field: 'title',
     title: 'TASK',
@@ -443,12 +411,12 @@ const customGanttColumns = [
     headerStyle: {
       textAlign: 'center',
       fontSize: 20,
-      fontWeight: 'bold',
+      fontWeight: 'bold'
-      color: 'black',
+      // color: 'black',
-      bgColor: '#f0f0fb'
+      // bgColor: '#f0f0fb'
     },
     style: {
-      bgColor: '#f0f0fb'
+      // bgColor: '#f0f0fb'
     },
     customLayout: (args: any) => {
       const { table, row, col, rect } = args;
@@ -459,7 +427,7 @@ const customGanttColumns = [
         x: 20,
         height: height - 20,
         width: width - 40,
-        fill: 'white',
+        fill: '#ddd',
         display: 'flex',
         flexDirection: 'column',
         cornerRadius: 30
@@ -498,33 +466,16 @@ const customGanttColumns = [
     }
   }
 ];
-const customGanttOption = {
+const customGanttOption: VTableGantt.GanttConstructorOptions = {
   records: customGanttRecords,
   taskListTable: {
     columns: customGanttColumns,
-    tableWidth: 'auto',
+    tableWidth: 'auto'
-    theme: {
-      headerStyle: {
-        borderColor: '#e1e4e8',
-        borderLineWidth: 0,
-        fontSize: 18,
-        fontWeight: 'bold',
-        color: 'red'
-        // bgColor: '#EEF1F5'
-      },
-      bodyStyle: {
-        borderColor: '#e1e4e8',
-        borderLineWidth: 0,
-        fontSize: 16,
-        color: '#4D4D4D',
-        bgColor: '#FFF'
-      }
-    }
   },
   frame: {
     outerFrameStyle: {
-      borderLineWidth: 0,
+      borderLineWidth: 2,
-      borderColor: 'red',
+      borderColor: '#E1E4E8',
       cornerRadius: 8
     }
     // verticalSplitLineHighlight: {
@@ -533,7 +484,7 @@ const customGanttOption = {
     // }
   },
   grid: {
-    backgroundColor: '#f0f0fb',
+    // backgroundColor: '#f0f0fb',
     // vertical: {
     //   lineWidth: 1,
     //   lineColor: '#e1e4e8'
@@ -690,7 +641,7 @@ const customGanttOption = {
           const container = new VTableGantt.VRender.Group({
             width,
             height,
-            fill: '#f0f0fb',
+            // fill: '#f0f0fb',
             display: 'flex',
             flexDirection: 'row',
             flexWrap: 'nowrap'
@@ -727,7 +678,7 @@ const customGanttOption = {
             fontSize: 20,
             fontWeight: 'bold',
             fontFamily: 'sans-serif',
-            fill: 'black',
+            fill: '#777',
             textAlign: 'right',
             maxLineWidth: width - 30,
             boundsPadding: [15, 0, 0, 0]
@@ -738,7 +689,7 @@ const customGanttOption = {
             text: VTableGantt.tools.getWeekday(startDate, 'short').toLocaleUpperCase(),
             fontSize: 12,
             fontFamily: 'sans-serif',
-            fill: 'black',
+            fill: '#777',
             boundsPadding: [0, 0, 0, 0]
           });
           containerCenter.add(weekDay);
@@ -780,32 +731,60 @@ const customGanttOption = {
 };
 
 function initVTableGantt() {
-  const basicGanttInstance = new VTableGantt.Gantt(basicGanttDomRef.value as HTMLElement, basicGanttOption as any);
+  basicGanttInstance.value = new VTableGantt.Gantt(basicGanttDomRef.value as HTMLElement, getOption(basicGanttOption));
-  console.log(basicGanttInstance);
+  linkGanttInstance.value = new VTableGantt.Gantt(linkGanttDomRef.value as HTMLElement, getOption(linkGanttOption));
-
+  customGanttInstance.value = new VTableGantt.Gantt(
-  const linkGanttInstance = new VTableGantt.Gantt(linkGanttDomRef.value as HTMLElement, linkGanttOption as any);
+    customGanttDomRef.value as HTMLElement,
-  console.log(linkGanttInstance);
+    getOption(customGanttOption)
-
+  );
-  const customGanttInstance = new VTableGantt.Gantt(customGanttDomRef.value as HTMLElement, customGanttOption as any);
-  console.log(customGanttInstance);
 }
 
+function getOption(option: VTableGantt.GanttConstructorOptions) {
+  const isDark = theme.darkMode;
+  if (isDark) {
+    option.taskListTable!.theme = VTableGantt.VTable.themes.DARK;
+    option.timelineHeader.backgroundColor = '#212121';
+    option.underlayBackgroundColor = '#000';
+  } else {
+    option.taskListTable!.theme = VTableGantt.VTable.themes.DEFAULT;
+    option.timelineHeader.backgroundColor = '#f0f0fb';
+    option.underlayBackgroundColor = '#fff';
+  }
+
+  return option;
+}
+
+const stopHandle = watch(
+  () => theme.darkMode,
+  _newValue => {
+    basicGanttInstance.value?.release();
+    linkGanttInstance.value?.release();
+    customGanttInstance.value?.release();
+
+    initVTableGantt();
+  }
+);
+
 onMounted(() => {
   initVTableGantt();
 });
+
+onUnmounted(() => {
+  stopHandle();
+});
 </script>
 
 <template>
   <div class="h-full">
     <NSpace vertical :size="16">
       <NCard :bordered="false" class="h-full w-2/3 card-wrapper">
-        <div ref="basicGanttDomRef" :style="{ height: 500 + 'px' }"></div>
+        <div ref="basicGanttDomRef" class="relative h-400px"></div>
       </NCard>
       <NCard :bordered="false" class="h-full w-2/3 card-wrapper">
-        <div ref="linkGanttDomRef" :style="{ height: 500 + 'px' }"></div>
+        <div ref="linkGanttDomRef" class="relative h-400px"></div>
       </NCard>
       <NCard :bordered="false" class="h-full w-2/3 card-wrapper">
-        <div ref="customGanttDomRef" :style="{ height: 500 + 'px' }"></div>
+        <div ref="customGanttDomRef" class="relative h-400px"></div>
       </NCard>
       <NCard :bordered="false" class="h-full w-2/3 card-wrapper">
         <WebSiteLink label="More VTableGantt Demos: " link="https://www.visactor.com/vtable/example" />