From 847bf8928f42a7d4d2ec3134130889a63464b5cf Mon Sep 17 00:00:00 2001
From: sijinhui <sijinhui@qq.com>
Date: Wed, 3 Apr 2024 14:22:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9C=B0=E5=9B=BE=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E4=B8=80=E7=82=B9=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app/(admin)/admin/ana/user-by-map.tsx | 27 ++++++++-----
 app/app/(admin)/admin/layout.tsx          | 46 ++++++++++++++---------
 package.json                              |  2 +-
 3 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/app/app/(admin)/admin/ana/user-by-map.tsx b/app/app/(admin)/admin/ana/user-by-map.tsx
index 8f4edc634..870eaa9e0 100644
--- a/app/app/(admin)/admin/ana/user-by-map.tsx
+++ b/app/app/(admin)/admin/ana/user-by-map.tsx
@@ -1,13 +1,6 @@
 "use client";
 
-import React, {
-  useEffect,
-  useState,
-  useCallback,
-  Dispatch,
-  SetStateAction,
-  useRef,
-} from "react";
+import React, { useEffect, useRef } from "react";
 import Script from "next/script";
 
 import * as echarts from "echarts";
@@ -20,7 +13,10 @@ interface DataItem {
 
 export default function UserByMap() {
   const userByMapChart = useRef(null);
-
+  // const loadBaiduMap = useRef(<Script
+  //   src="https://api.map.baidu.com/api?v=3.0&ak=19e9FKQC49u5uQe4CBqan9ER2mYhQ3ip&callback=initMap"
+  //   strategy="beforeInteractive"
+  // />);
   useEffect(() => {
     if (!userByMapChart.current) return;
     const data: DataItem[] = [
@@ -619,6 +615,7 @@ export default function UserByMap() {
         useDirtyRect: false,
       });
       option && myChart?.setOption(option);
+      setTimeout(() => myChart.resize(), 200);
     };
     try {
       loadEcharts();
@@ -627,6 +624,17 @@ export default function UserByMap() {
     }
   }, []);
 
+  useEffect(() => {
+    const initMap = () => {
+      if (window.BMap && userByMapChart.current) {
+        var map = new window.BMap.Map(userByMapChart.current); // 创建Map实例
+        // var point = new window.BMap.Point(116.404, 39.915); // 创建点坐标
+        // map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
+      }
+    };
+    window.initMap = initMap;
+  }, []);
+
   useEffect(() => {
     const handleResize = () => {
       let chartDom = document.getElementById("userByMapChart");
@@ -668,6 +676,7 @@ export default function UserByMap() {
       <Script
         src="https://api.map.baidu.com/api?v=3.0&ak=19e9FKQC49u5uQe4CBqan9ER2mYhQ3ip&callback=initMap"
         strategy="beforeInteractive"
+        onLoad={() => window.initMap()}
       />
     </div>
   );
diff --git a/app/app/(admin)/admin/layout.tsx b/app/app/(admin)/admin/layout.tsx
index 7ec40f4fa..0ceca648e 100644
--- a/app/app/(admin)/admin/layout.tsx
+++ b/app/app/(admin)/admin/layout.tsx
@@ -1,8 +1,5 @@
 "use client";
 
-import { useSession } from "next-auth/react";
-import { redirect } from "next/navigation";
-import { ADMIN_LIST } from "@/lib/auth_list";
 import React, { ReactNode, useEffect, useState } from "react";
 import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
 import { Layout, Menu, Button, theme, ConfigProvider, ThemeConfig } from "antd";
@@ -11,24 +8,32 @@ import SideBar from "../components/sidebar";
 const { Header, Sider, Content } = Layout;
 
 function MainLayout({ children }: { children: ReactNode }) {
-  // const [theme, setTheme] = useState<ThemeConfig>('dark');
-  const { data, status } = useSession();
-  const name = data?.user?.email || data?.user?.name;
-  // console.log('name', name, data, status)
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(
+    typeof window !== "undefined" && window.innerWidth < 768,
+  );
   const {
     token: { colorBgContainer, borderRadiusLG, colorBgLayout },
   } = theme.useToken();
-
-  // 客户端才执行
+  // 处理布局
   useEffect(() => {
-    // 用户已登录，且没设置密码
-    // if (status === "loading") return;
-    if (status === "authenticated" && !(name && ADMIN_LIST.includes(name))) {
-      redirect("/");
-    }
-    // 状态变化时，重新判断
-  }, [name, status]);
+    const handleResize = () => {
+      // 更新折叠状态以匹配屏幕宽度
+      setCollapsed(typeof window !== "undefined" && window.innerWidth < 768);
+    };
+    // 监听窗口大小变化
+    window.addEventListener("resize", handleResize);
+    // 组件卸载时移除监听器
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  // 客户端才执行
+  // useEffect(() => {
+  //   // 用户已登录，且没设置密码
+  //   // if (status === "loading") return;
+  //   if (status === "authenticated" && !(name && ADMIN_LIST.includes(name))) {
+  //     redirect("/");
+  //   }
+  //   // 状态变化时，重新判断
+  // }, [name, status]);
   return (
     <ConfigProvider
       theme={{
@@ -40,7 +45,12 @@ function MainLayout({ children }: { children: ReactNode }) {
       }}
     >
       <Layout style={{ height: "100%" }}>
-        <Sider>
+        <Sider
+          breakpoint={"md"}
+          collapsedWidth="0"
+          collapsed={collapsed}
+          trigger={null}
+        >
           <div className="demo-logo-vertical" />*
           <SideBar />
         </Sider>
diff --git a/package.json b/package.json
index d2db34318..5a276a669 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "private": false,
   "license": "mit",
   "scripts": {
-    "dev": "npx prisma generate && npx prisma db push && next dev",
+    "dev": "npx prisma generate && npx prisma db push && next dev --hostname 0.0.0.0",
     "build": "npx next telemetry disable && npx prisma generate && cross-env BUILD_MODE=standalone next build",
     "start": "next start",
     "lint": "next lint",