diff --git a/internal/vite-config/src/index.ts b/internal/vite-config/src/index.ts
index 352a3235..c9c2b20d 100644
--- a/internal/vite-config/src/index.ts
+++ b/internal/vite-config/src/index.ts
@@ -1,4 +1,5 @@
export * from './config';
export * from './options';
export * from './plugins';
+export type * from './typing';
export { loadAndConvertEnv } from './utils/env';
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
index 53c731e7..cc610d59 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -381,10 +381,10 @@ onUnmounted(() => {
-
-
-
+
+
+
diff --git a/packages/effects/plugins/src/echarts/use-echarts.ts b/packages/effects/plugins/src/echarts/use-echarts.ts
index dc74fd46..4f1989ce 100644
--- a/packages/effects/plugins/src/echarts/use-echarts.ts
+++ b/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) {
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) {
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) {
options: EChartsOption,
clear = true,
): Promise> => {
+ if (!unref(isActiveRef)) {
+ return Promise.resolve(null);
+ }
cacheOptions = options;
const currentOptions = {
...options,
@@ -154,8 +174,8 @@ function useEcharts(chartRef: Ref) {
useResizeObserver(chartRef as never, resizeHandler);
- watch(isDark, () => {
- if (chartInstance) {
+ watch([isDark, isActiveRef], () => {
+ if (chartInstance && unref(isActiveRef)) {
chartInstance.dispose();
initCharts();
renderEcharts(cacheOptions);
@@ -168,6 +188,7 @@ function useEcharts(chartRef: Ref) {
chartInstance?.dispose();
});
return {
+ isActive: isActiveRef,
renderEcharts,
resize,
updateData,
diff --git a/playground/src/router/routes/modules/dashboard.ts b/playground/src/router/routes/modules/dashboard.ts
index 5254dc65..7ef3cfb6 100644
--- a/playground/src/router/routes/modules/dashboard.ts
+++ b/playground/src/router/routes/modules/dashboard.ts
@@ -20,6 +20,7 @@ const routes: RouteRecordRaw[] = [
affixTab: true,
icon: 'lucide:area-chart',
title: $t('page.dashboard.analytics'),
+ keepAlive: true,
},
},
{
diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue
index 52d04319..05be1f3a 100644
--- a/playground/src/views/examples/form/basic.vue
+++ b/playground/src/views/examples/form/basic.vue
@@ -67,6 +67,13 @@ const [BaseForm, baseFormApi] = useVbenForm({
label: '字符串',
rules: 'required',
},
+ {
+ component: 'Input',
+ fieldName: 'desc',
+ // 界面显示的description
+ description: '这是表单描述',
+ label: '字符串(带描述)',
+ },
{
// 组件需要在 #/adapter.ts内注册,并加上类型
component: 'ApiSelect',