Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into antdv-next

packages/effects/plugins/src/echarts/use-echarts.ts

@@ -6,7 +6,17 @@ import type { Nullable } from '@vben/types';
 
 import type EchartsUI from './echarts-ui.vue';
 
-import { computed, nextTick, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  onMounted,
+  ref,
+  unref,
+  watch,
+} from 'vue';
 
 import { usePreferences } from '@vben/preferences';
 
@@ -27,6 +37,8 @@ type EchartsThemeType = 'dark' | 'light' | null;
 function useEcharts(chartRef: Ref<EchartsUIType>) {
   let chartInstance: echarts.ECharts | null = null;
   let cacheOptions: EChartsOption = {};
+  // echart是否处于激活状态
+  const isActiveRef = ref(false);
 
   const { isDark } = usePreferences();
   const { height, width } = useWindowSize();
@@ -42,6 +54,11 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
     return maybeComponent.$el ?? null;
   };
 
+  onMounted(() => (isActiveRef.value = true));
+  onActivated(() => (isActiveRef.value = true));
+  onDeactivated(() => (isActiveRef.value = false));
+  onBeforeUnmount(() => (isActiveRef.value = false));
+
   const isElHidden = (el: HTMLElement | null): boolean => {
     if (!el) return true;
     return el.offsetHeight === 0 || el.offsetWidth === 0;
@@ -71,6 +88,9 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
     options: EChartsOption,
     clear = true,
   ): Promise<Nullable<echarts.ECharts>> => {
+    if (!unref(isActiveRef)) {
+      return Promise.resolve(null);
+    }
     cacheOptions = options;
     const currentOptions = {
       ...options,
@@ -105,7 +125,7 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
     });
   };
 
-  const updateDate = (
+  const updateData = (
     option: EChartsOption,
     notMerge = false, // false = 合并（保留动画），true = 完全替换
     lazyUpdate = false, // true 时不立即重绘，适合短时间内多次调用
@@ -156,8 +176,8 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
 
   useResizeObserver(chartRef as never, resizeHandler);
 
-  watch(isDark, () => {
-    if (chartInstance) {
+  watch([isDark, isActiveRef], () => {
+    if (chartInstance && unref(isActiveRef)) {
       chartInstance.dispose();
       initCharts();
       renderEcharts(cacheOptions);
@@ -170,9 +190,10 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
     chartInstance?.dispose();
   });
   return {
+    isActive: isActiveRef,
     renderEcharts,
     resize,
-    updateDate,
+    updateData,
     getChartInstance: () => chartInstance,
   };
 }

packages/effects/plugins/src/vxe-table/use-vxe-grid.vue

@@ -384,9 +384,11 @@ onUnmounted(() => {
       <!-- 左侧操作区域或者title -->
       <template v-if="showToolbar" #toolbar-actions="slotProps">
         <slot v-if="showTableTitle" name="table-title">
-          <div class="mr-1 pl-1 text-[1rem]">
+          <div
+            class="flex items-center justify-center gap-1 text-[1rem] font-bold"
+          >
             {{ tableTitle }}
-            <VbenHelpTooltip v-if="tableTitleHelp" trigger-class="pb-1">
+            <VbenHelpTooltip v-if="tableTitleHelp">
               {{ tableTitleHelp }}
             </VbenHelpTooltip>
           </div>