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',