feat: add dashboard page

packages/business/chart-ui/package.json

@@ -41,7 +41,8 @@
   },
   "dependencies": {
     "@vben-core/preferences": "workspace:*",
-    "echarts": "^5.5.0",
-    "vue": "^3.4.30"
+    "@vueuse/core": "^10.11.0",
+    "echarts": "^5.5.1",
+    "vue": "^3.4.31"
   }
 }

packages/business/chart-ui/src/chart.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { echartsInstance, ECOption } from './index';
-import { onMounted, ref, unref, warn } from 'vue';
-import { usePreferences } from '@vben-core/preferences';
-const { isDark } = usePreferences();
-interface Props {
-  height?: string;
-  width?: string;
-}
-withDefaults(defineProps<Props>(), {
-  height: '500px',
-  width: '100%',
-});
-
-const instance = ref();
-const instanceRef = ref(HTMLElement);
-onMounted(() => {
-  instance.value = echartsInstance.init(
-    instanceRef.value,
-    isDark.value ? 'dark' : '',
-  );
-});
-const setChart = (option: ECOption, clear: boolean = true) => {
-  const c = unref(instance);
-  if (!c) {
-    warn('instance is null');
-    return;
-  }
-  if (clear) c.clear();
-  c.setOption(option);
-};
-defineExpose({ setChart });
-</script>
-
-<template>
-  <div ref="instanceRef" :style="{ height, width }"></div>
-</template>

packages/business/chart-ui/src/echarts/echarts-ui.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  height?: string;
+  width?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  height: '300px',
+  width: '100%',
+});
+</script>
+
+<template>
+  <div v-bind="$attrs" :style="{ height, width }"></div>
+</template>

packages/business/chart-ui/src/echarts/echarts.ts

@@ -0,0 +1,59 @@
+import type {
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineSeriesOption,
+} from 'echarts/charts';
+import type {
+  DatasetComponentOption,
+  GridComponentOption,
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  TooltipComponentOption,
+} from 'echarts/components';
+import type { ComposeOption } from 'echarts/core';
+
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import {
+  // 数据集组件
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+export type ECOption = ComposeOption<
+  | BarSeriesOption
+  | DatasetComponentOption
+  | GridComponentOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+>;
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  PieChart,
+  RadarChart,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  LegendComponent,
+  ToolboxComponent,
+]);
+
+export { echarts };

packages/business/chart-ui/src/echarts/index.ts

@@ -0,0 +1,3 @@
+export * from './echarts';
+export { default as EchartsUI } from './echarts-ui.vue';
+export * from './use-echarts';

packages/business/chart-ui/src/echarts/use-echarts.ts

@@ -0,0 +1,108 @@
+import type { EChartsOption } from 'echarts';
+
+import type EchartsUI from './echarts-ui.vue';
+
+import type { Ref } from 'vue';
+import { computed, nextTick, watch } from 'vue';
+
+import { usePreferences } from '@vben-core/preferences';
+
+import {
+  tryOnUnmounted,
+  useDebounceFn,
+  useTimeoutFn,
+  useWindowSize,
+} from '@vueuse/core';
+
+import { echarts } from './echarts';
+
+type EchartsUIType = typeof EchartsUI | undefined;
+
+type EchartsThemeType = 'dark' | 'light' | null;
+
+function useEcharts(chartRef: Ref<EchartsUIType>) {
+  let chartInstance: echarts.ECharts | null = null;
+  let cacheOptions: EChartsOption = {};
+
+  const { isDark } = usePreferences();
+  const { height, width } = useWindowSize();
+  const resizeHandler: () => void = useDebounceFn(resize, 200);
+
+  const getOptions = computed((): EChartsOption => {
+    if (!isDark.value) {
+      return cacheOptions;
+    }
+
+    return {
+      backgroundColor: 'transparent',
+      ...cacheOptions,
+    };
+  });
+
+  const initCharts = (t?: EchartsThemeType) => {
+    const el = chartRef?.value?.$el;
+    if (!el) {
+      return;
+    }
+    chartInstance = echarts.init(el, t || isDark.value ? 'dark' : null);
+
+    return chartInstance;
+  };
+
+  const renderEcharts = (options: EChartsOption, clear = true) => {
+    cacheOptions = options;
+    return new Promise((resolve) => {
+      if (chartRef.value?.offsetHeight === 0) {
+        useTimeoutFn(() => {
+          renderEcharts(getOptions.value);
+          resolve(null);
+        }, 30);
+        return;
+      }
+      nextTick(() => {
+        useTimeoutFn(() => {
+          if (!chartInstance) {
+            const instance = initCharts();
+            if (!instance) return;
+          }
+          clear && chartInstance?.clear();
+          chartInstance?.setOption(getOptions.value);
+          resolve(null);
+        }, 30);
+      });
+    });
+  };
+
+  function resize() {
+    chartInstance?.resize({
+      animation: {
+        duration: 300,
+        easing: 'quadraticIn',
+      },
+    });
+  }
+
+  watch([width, height], () => {
+    resizeHandler?.();
+  });
+
+  watch(isDark, () => {
+    if (chartInstance) {
+      chartInstance.dispose();
+      initCharts();
+      renderEcharts(cacheOptions);
+    }
+  });
+
+  tryOnUnmounted(() => {
+    // 销毁实例，释放资源
+    chartInstance?.dispose();
+  });
+  return {
+    renderEcharts,
+  };
+}
+
+export { useEcharts };
+
+export type { EchartsUIType };

packages/business/chart-ui/src/index.ts

@@ -1,59 +1 @@
-import * as echarts from 'echarts/core';
-import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
-import {
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-
-  // 数据集组件
-  DatasetComponent,
-  // 内置数据转换器组件 (filter, sort)
-  TransformComponent,
-  LegendComponent,
-  ToolboxComponent,
-} from 'echarts/components';
-import { LabelLayout, UniversalTransition } from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
-import type {
-  // 系列类型的定义后缀都为 SeriesOption
-  BarSeriesOption,
-  LineSeriesOption,
-} from 'echarts/charts';
-import type {
-  // 组件类型的定义后缀都为 ComponentOption
-  TitleComponentOption,
-  TooltipComponentOption,
-  GridComponentOption,
-  DatasetComponentOption,
-} from 'echarts/components';
-import type { ComposeOption } from 'echarts/core';
-
-// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
-export type ECOption = ComposeOption<
-  | BarSeriesOption
-  | LineSeriesOption
-  | TitleComponentOption
-  | TooltipComponentOption
-  | GridComponentOption
-  | DatasetComponentOption
->;
-
-// 注册必须的组件
-echarts.use([
-  TitleComponent,
-  PieChart,
-  RadarChart,
-  TooltipComponent,
-  GridComponent,
-  DatasetComponent,
-  TransformComponent,
-  BarChart,
-  LineChart,
-  LabelLayout,
-  UniversalTransition,
-  CanvasRenderer,
-  LegendComponent,
-  ToolboxComponent,
-]);
-export const echartsInstance = echarts;
-export { default as chart } from './chart.vue';
+export * from './echarts';