修复地图加载报错问题，优化一点布局

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>
   );

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>

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