fix: 修复当菜单折叠或展开时首页 `echarts` 图表未自适应容器

src/views/welcome/components/Bar.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, type Ref } from "vue";
-import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
+import { ref, computed, watch, type Ref } from "vue";
+import { useAppStoreHook } from "@/store/modules/app";
+import {
+  delay,
+  useDark,
+  useECharts,
+  type EchartOptions
+} from "@pureadmin/utils";
 
 const { isDark } = useDark();
 
@@ -9,7 +15,7 @@ const theme: EchartOptions["theme"] = computed(() => {
 });
 
 const barChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions } = useECharts(barChartRef as Ref<HTMLDivElement>, {
+const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
   theme
 });
 
@@ -65,6 +71,13 @@ setOptions(
     }
   }
 );
+
+watch(
+  () => useAppStoreHook().getSidebarStatus,
+  () => {
+    delay(360).then(() => resize());
+  }
+);
 </script>
 
 <template>

src/views/welcome/components/Line.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, type Ref } from "vue";
-import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
+import { ref, computed, watch, type Ref } from "vue";
+import { useAppStoreHook } from "@/store/modules/app";
+import {
+  delay,
+  useDark,
+  useECharts,
+  type EchartOptions
+} from "@pureadmin/utils";
 
 const { isDark } = useDark();
 
@@ -9,7 +15,7 @@ const theme: EchartOptions["theme"] = computed(() => {
 });
 
 const lineChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
+const { setOptions, resize } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
   theme
 });
 
@@ -53,6 +59,13 @@ setOptions(
     }
   }
 );
+
+watch(
+  () => useAppStoreHook().getSidebarStatus,
+  () => {
+    delay(360).then(() => resize());
+  }
+);
 </script>
 
 <template>

src/views/welcome/components/Pie.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, type Ref } from "vue";
-import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
+import { ref, computed, watch, type Ref } from "vue";
+import { useAppStoreHook } from "@/store/modules/app";
+import {
+  delay,
+  useDark,
+  useECharts,
+  type EchartOptions
+} from "@pureadmin/utils";
 
 const { isDark } = useDark();
 
@@ -9,7 +15,7 @@ const theme: EchartOptions["theme"] = computed(() => {
 });
 
 const pieChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
+const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
   theme
 });
 
@@ -61,6 +67,13 @@ setOptions(
     }
   }
 );
+
+watch(
+  () => useAppStoreHook().getSidebarStatus,
+  () => {
+    delay(360).then(() => resize());
+  }
+);
 </script>
 
 <template>