From b1c71f62d3ed5b720e820a5fbcb138129b9fdb24 Mon Sep 17 00:00:00 2001
From: sijinhui <sijinhui@qq.com>
Date: Mon, 22 Apr 2024 08:56:11 +0800
Subject: [PATCH] fix chart resize

---
 .../admin/ana/usage-by-model-chart.tsx        | 34 +++++++++++++++++--
 app/app/(admin)/admin/layout.tsx              |  1 +
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/app/app/(admin)/admin/ana/usage-by-model-chart.tsx b/app/app/(admin)/admin/ana/usage-by-model-chart.tsx
index dbe591814..31c5ba05e 100644
--- a/app/app/(admin)/admin/ana/usage-by-model-chart.tsx
+++ b/app/app/(admin)/admin/ana/usage-by-model-chart.tsx
@@ -141,6 +141,21 @@ function EchartsComponent({ currentDate, setCurrentDate }: ComponentProps) {
     };
   }, [currentDate, searchDate]); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
 
+  // useEffect(() => {
+  //   const handleResize = () => {
+  //     console.log("窗口大小变化");
+  //     let chartDom = document.getElementById("usage-by-model-chart");
+  //     if (!chartDom) return;
+  //     const myChart = echarts.getInstanceByDom(chartDom);
+  //     myChart?.resize();
+  //   };
+  //   window.addEventListener("resize", handleResize);
+  //   return () => {
+  //     window.removeEventListener("resize", handleResize);
+  //   };
+  // }, []);
+
+  // #admin-page-content
   useEffect(() => {
     const handleResize = () => {
       console.log("窗口大小变化");
@@ -149,9 +164,24 @@ function EchartsComponent({ currentDate, setCurrentDate }: ComponentProps) {
       const myChart = echarts.getInstanceByDom(chartDom);
       myChart?.resize();
     };
-    window.addEventListener("resize", handleResize);
+    const targetNode = document.getElementById("admin-page-content");
+    // 创建一个观察器实例并传入回调函数，该函数在观察到变化时执行
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const { width, height } = entry.contentRect;
+        // console.log(`Element's size: ${width}px x ${height}px`);
+        handleResize();
+      }
+    });
+
+    // const config = { attributes: true, childList: true, subtree: true };
+    targetNode && resizeObserver.observe(targetNode);
+
+    // window.addEventListener("resize", handleResize);
     return () => {
-      window.removeEventListener("resize", handleResize);
+      resizeObserver.disconnect();
+
+      // window.removeEventListener("resize", handleResize);
     };
   }, []);
 
diff --git a/app/app/(admin)/admin/layout.tsx b/app/app/(admin)/admin/layout.tsx
index 0ceca648e..9e737eaa0 100644
--- a/app/app/(admin)/admin/layout.tsx
+++ b/app/app/(admin)/admin/layout.tsx
@@ -69,6 +69,7 @@ function MainLayout({ children }: { children: ReactNode }) {
             />
           </Header>
           <Content
+            id="admin-page-content"
             style={{
               // margin: "24px 16px",
               padding: 24,