sdfrt

.umirc.ts

 export default {
   npmClient: 'yarn',
+  proxy:{
+    "/sfx/": {
+      // 要代理的地址
+      target: "http://192.168.40.111:8040", //39:28040    18/sfx/  
+      changeOrigin: true,
+      pathRewrite: {
+        "^/sfx": "",
+      },
+    },
+  }
 };

package.json

@@ -18,7 +18,8 @@
     "echarts-for-react": "^3.0.2",
     "react-three-fiber": "^6.0.13",
     "three": "^0.144.0",
-    "umi": "^4.0.20"
+    "umi": "^4.0.20",
+    "umi-request": "^1.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

src/pages/index.jsx

@@ -8,6 +8,7 @@ import { Button } from "antd";
 import "echarts/lib/component/graphic";
 import { ScrollBoard } from "@jiaminghi/data-view-react";
 import Threedire from "./threedire";
+import { doFetch } from "@/utils/doFetch";
 
 const IconFont = createFromIconfontCN({
   scriptUrl: "//at.alicdn.com/t/c/font_3649650_01jk3haanj83.js",
@@ -30,12 +31,28 @@ const Item = ({ title, children }) => {
 };
 
 export default function HomePage() {
+  const leftone = useRequest(
+    async () => {
+      //format result
+      let res = await doFetch({
+          url: "/ngic-statistics/deviceStatus/queryEquipmentStatusChart",
+          params: {},
+        }),
+        result = res?.data?.dataList ?? [];
+      return result;
+    },
+    {
+      refreshDeps: [],
+    }
+  );
+
+
   return (
     <div className={styles?.container}>
       <div className={styles?.left}>
         <Item title={"设备状态"}>
           <ReactECharts
-            style={{ width: "100%", height: "100%", marginTop: -28 }}
+            style={{ width: "100%", height: "100%", marginTop: 0 }}
             option={{
               legend: {
                 orient: "vertical", //垂直显示
@@ -51,29 +68,20 @@ export default function HomePage() {
               tooltip: {
                 trigger: "item",
               },
+              color:["#6AE49B","#4887E0","#8D8D8D","#F31A1A"],
               series: [
                 {
-                  name: "Nightingale Chart",
+                  name: "设备状态",
                   type: "pie",
                   radius: [8, 100],
                   center: ["34%", "50%"],
-                  roseType: "area",
                   itemStyle: {
                     borderRadius: 8,
                   },
                   label: {
                     show: false,
                   },
-                  data: [
-                    { value: 40, name: "rose 1" },
-                    { value: 38, name: "rose 2" },
-                    { value: 32, name: "rose 3" },
-                    { value: 30, name: "rose 4" },
-                    { value: 28, name: "rose 5" },
-                    { value: 26, name: "rose 6" },
-                    { value: 22, name: "rose 7" },
-                    { value: 18, name: "rose 8" },
-                  ],
+                  data: leftone.data,
                 },
               ],
             }}

src/pages/models/gltf.jsx

@@ -5,9 +5,7 @@ import React, { useMemo, Suspense } from "react";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { useGLTF } from "@react-three/drei";
 
-const statusbar = {
-  1: "lightblue",
-};
+const statusbar = [" ","#6AE49B","#4887E0","#8D8D8D","#F31A1A"];
 
 const Mesh = (props) => {
   let { name, path, position, status, scale } = props;
@@ -20,10 +18,10 @@ const Mesh = (props) => {
           <mesh
             geometry={nodes[it].geometry}
             scale={scale??0.002}
+            key={it}
           >
             <meshPhysicalMaterial
               color={statusbar[status]}
-              envMap={"lightblue"}
               //transparent={true} //是否支持透明度
               // opacity={0.5} //透明度
               //visible={true}//是否可见

src/pages/models/index.jsx

 import * as THREE from "three";
 import { Canvas } from "@react-three/fiber";
-import { useLoader } from "@react-three/fiber";
-import { Environment, OrbitControls } from "@react-three/drei";
-import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
-import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
+import { useLoader,useFrame } from "@react-three/fiber";
 import React, { useMemo, Suspense } from "react";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { useGLTF } from "@react-three/drei";
 
-const statusbar = {
-  1: "lightblue",
-};
+const Mesh = (props) => {
+  const model = useGLTF(props.path);
 
-const Mesh = ({ name,path, position, status, rotation }) => {
-  const obj = useLoader(OBJLoader, path);
-  // const geometry = useMemo(() => {
-  //   let g;
-  //   obj.traverse((c) => {
-  //     g = c.geometry;
-  //   });
-  //   return g;
-  // }, [obj]);
+  let mixer = new THREE.AnimationMixer(model.scene);
+  model.animations.forEach((clip)=>{
+    const action = mixer.clipAction(clip);
+    action.play();
+  })
+
+  useFrame((scene,delta)=>{
+    mixer?.update(delta)
+  })
 
   return (
-    <primitive
-      key={name}
-      object={obj}
-      position={position}
-      rotation={rotation ?? [0, 0, 0]}
-      scale={0.002}
-      castShadow
-      receiveShadow
-    />
-  );
-  return (
-    <mesh
-      position={position}
-      geometry={geometry}
-      scale={0.002}
-      castShadow
-      receiveShadow
-      rotation={rotation ?? [0, 0, 0]}
-    >
-      <meshPhysicalMaterial
-        color={statusbar[status]}
-        //transparent={true} //是否支持透明度
-        // opacity={0.5} //透明度
-        //visible={true}//是否可见
-        wireframe={false} //线框化
-        //metalness={1} //金属性贴图
-        roughness={0} //粗糙程度 越精细镜面效果越强
-        clearcoat={1} // 透明漆 罩光漆
-        transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
-        // reflectivity={1} //光的 反射率
-      />
-    </mesh>
+    <primitive object={model.scene} scale={2}/>
   );
 };
 
 export default function Model(props) {
   return (
     <Suspense fallback={null}>
-      <Mesh {...props} path={require(`@/assets/obj/${props?.modelname}.obj`)} />
+      <Mesh
+        {...props}
+        path={require(`@/assets/gltf/animated_robot_sdc.glb`)}
+      />
     </Suspense>
   );
 }
+
+
+useGLTF.preload(require(`@/assets/gltf/animated_robot_sdc.glb`));

src/pages/models/jiqiebi.jsx

+import * as THREE from "three";
+import { Canvas } from "@react-three/fiber";
+import { useLoader,useFrame } from "@react-three/fiber";
+import React, { useMemo, Suspense } from "react";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { useGLTF } from "@react-three/drei";
+
+const Mesh = (props) => {
+  const model = useGLTF(props.path);
+
+  let mixer = new THREE.AnimationMixer(model.scene);
+  model.animations.forEach((clip)=>{
+    const action = mixer.clipAction(clip);
+    action.play();
+  })
+
+  useFrame((scene,delta)=>{
+    mixer?.update(delta)
+  })
+
+  return (
+    <primitive object={model.scene} scale={0.007} position={[20,0.35,-8]}/>
+  );
+};
+
+export default function Jixiebi(props) {
+  return (
+    <Suspense fallback={null}>
+      <Mesh
+        {...props}
+        path={require(`@/assets/gltf/basic_robot_arm.glb`)}
+      />
+    </Suspense>
+  );
+}
+
+useGLTF.preload(require(`@/assets/gltf/basic_robot_arm.glb`));

src/pages/threedire.js

@@ -23,119 +23,199 @@ import {
   PerspectiveCamera,
 } from "@react-three/drei";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
-import { useWebSocket, useFullscreen, useThrottle } from "ahooks";
+import { useWebSocket, useFullscreen, useThrottle, useRequest } from "ahooks";
 import { ShrinkOutlined, ArrowsAltOutlined } from "@ant-design/icons";
 import { Tooltip, notification } from "antd";
 import qs from "query-string";
 import Model from "./models/gltf";
-
-
+import Robot from "./models";
+import Jixiebi from "./models/jiqiebi";
+import { doFetch } from "../utils/doFetch";
 
 const modelconfig = [
   {
-    name:"7",
-    position:[-18, 0, -22],
-    status:1,
-    modelname:"M8",
-    rotation:[0,1.6,0]
-  },
-  {
-    name:"8",
-    position:[-6, 0, -22],
-    status:1,
-    modelname:"M8",
-    rotation:[0,1.6,0]
-  },
-  {
-    name:"9",
-    position:[3, 0, -22],
-    status:1,
-    modelname:"M8",
-    rotation:[0,1.6,0]
-  }, {
-    name:"10",
-    position:[12, 0, -22],
-    status:1,
-    modelname:"M8",
-    rotation:[0,1.6,0]
-  }, {
-    name:"11",
-    position:[21, 0, -22],
-    status:1,
-    modelname:"M8",
-    rotation:[0,1.6,0]
-  }, {
-    name:"12",
-    position:[18, 0, -12.5],
-    status:1,
-    modelname:"T360",
-    scale:0.2,
-    rotation:[0,1.6,0]
-
-  }, {
-    name:"13",
-    position:[14, 0, -7],
-    status:1,
-    modelname:"T360",
-    scale:0.2,
-    
-  }, {
-    name:"14",
-    position:[19.8, 0, 6],
-    status:1,
-    modelname:"M850",
-    scale:0.052,
-    rotation:[0,1.58,0]
-
-  }, {
-    name:"15",
-    position:[18, 0, 15],
-    status:1,
-    modelname:"M8",
-  }, {
-    name:"16",
-    position:[18, 0, 23],
-    status:1,
-    modelname:"M8",
-  }, {
-    name:"17",
-    position:[9, 0, 24],
-    status:1,
-    modelname:"M1.4",
-  }, {
-    name:"18",
-    position:[9, 0, 16],
-    status:1,
-    modelname:"T360",
-    scale:0.2
-  }, {
-    name:"19",
-    position:[9, 0, 6],
-    status:1,
-    modelname:"M850",
-    scale:0.052,
-    rotation:[0,-1.58,0]
-
-  }, {
-    name:"20",
-    position:[3, 0, 12],
-    status:1,
-    modelname:"T3.4",
-
-  }
-
-
-
-]
-
-
-
+    name: "0",
+    position: [-24, 0, 24],
+    status: 1,
+    modelname: "cqg",
+    scale: 0.035,
+  },
+  {
+    name: "1",
+    position: [-21.5, 0, 24],
+    status: 1,
+    modelname: "kyj",
+  },
+  {
+    name: "2",
+    position: [-21.5, 0, 25.5],
+    status: 1,
+    modelname: "lgj",
+    scale: 0.06,
+  },
+  {
+    name: "3",
+    position: [-19, 0, 15],
+    status: 1,
+    modelname: "ptwymc",
+    rotation: [0, 1.6, 0],
+  },
+  {
+    name: "4",
+    position: [-21, 0, 6.5],
+    status: 1,
+    modelname: "pmmc",
+    scale: 0.06,
+  },
+  {
+    name: "5",
+    position: [-21, 0, -12],
+    status: 1,
+    modelname: "M1.4",
+  },
+  {
+    name: "6",
+    position: [-21, 0, -4],
+    status: 1,
+    modelname: "M1.4",
+  },
+  {
+    name: "7",
+    position: [-21, 0, -22],
+    status: 1,
+    modelname: "M8",
+    rotation: [0, 1.6, 0],
+  },
+  {
+    name: "8",
+    position: [-6, 0, -22],
+    status: 1,
+    modelname: "M8",
+    rotation: [0, 1.6, 0],
+  },
+  {
+    name: "9",
+    position: [3, 0, -22],
+    status: 1,
+    modelname: "M8",
+    rotation: [0, 1.6, 0],
+  },
+  {
+    name: "10",
+    position: [12, 0, -22],
+    status: 1,
+    modelname: "M8",
+    rotation: [0, 1.6, 0],
+  },
+  {
+    name: "11",
+    position: [21, 0, -22],
+    status: 1,
+    modelname: "M8",
+    rotation: [0, 1.6, 0],
+  },
+  {
+    name: "12",
+    position: [18, 0, -20.5],
+    status: 1,
+    modelname: "T360",
+    scale: 0.75,
+  },
+  {
+    name: "13",
+    position: [5.7, 0, -7],
+    status: 1,
+    modelname: "T360",
+    scale: 0.75,
+    rotation: [0, 1.6, 0],
+  },
+  {
+    name: "14",
+    position: [19.8, 0, 8],
+    status: 1,
+    modelname: "M850",
+    scale: 0.052,
+    rotation: [0, 1.58, 0],
+  },
+  {
+    name: "15",
+    position: [18, 0, 17],
+    status: 1,
+    modelname: "M8",
+  },
+  {
+    name: "16",
+    position: [18, 0, 25],
+    status: 1,
+    modelname: "M8",
+  },
+  {
+    name: "17",
+    position: [11, 0, 26],
+    status: 1,
+    modelname: "M1.4",
+  },
+  {
+    name: "18",
+    position: [16.5, 0, 18.5],
+    status: 1,
+    modelname: "T360",
+    scale: 0.75,
+    rotation: [0, -1.58, 0],
+  },
+  {
+    name: "19",
+    position: [11, 0, 8],
+    status: 1,
+    modelname: "M850",
+    scale: 0.052,
+    rotation: [0, -1.58, 0],
+  },
+  {
+    name: "20",
+    position: [-2, 0, 9.2],
+    status: 1,
+    modelname: "T3.4",
+    scale: 0.23,
+    rotation: [0, 1.58, 0],
+  },
+  {
+    name: "21",
+    position: [-0.5, 0, 26],
+    status: 1,
+    modelname: "M1.4",
+  },
+  {
+    name: "22",
+    position: [-9, 0, 24.5],
+    status: 1,
+    modelname: "CAK5085",
+    rotation: [0, -1.58, 0],
+    scale: 0.04,
+  },
+  {
+    name: "23",
+    position: [-9, 0, 16.6],
+    status: 1,
+    modelname: "wyjmmc",
+    rotation: [0, -1.58, 0],
+    scale: 0.055,
+  },
+  {
+    name: "24",
+    position: [-8.79, 0, 8],
+    status: 1,
+    modelname: "nymc",
+    rotation: [0, -1.58, 0],
+    scale: 0.055,
+  },
+];
 
 const Floor = (props) => {
   return (
     <>
       <mesh position={props.position} receiveShadow>
-        <boxBufferGeometry args={[52, 0.1, 60]} />
+        <boxBufferGeometry args={[60, 0.1, 60]} />
         <meshPhysicalMaterial color={"#12284A"} />
       </mesh>
     </>
@@ -154,6 +234,37 @@ const Bulb = (props) => {
 };
 
 function Threedire() {
+  const texture = useLoader(THREE.TextureLoader, require("@/assets/floor.png"));
+
+  const [config, setconfig] = useState(modelconfig);
+  const { data } = useRequest(
+    async () => {
+      //format result
+      let res = await doFetch({
+          url: "/ngic-statistics/deviceStatus/queryEquipmentStatus",
+          params: {},
+        }),
+        result = res?.data?.data ?? {};
+      return result;
+    },
+    {
+      refreshDeps: [],
+    }
+  );
+
+  useEffect(() => {
+    if (data) {
+      setconfig((s) => {
+        let news = JSON.parse(JSON.stringify(s ?? {}));
+        news = news.map((it) => {
+          it.status = it.name == "0" ? 1 : data[it.name];
+          return it;
+        });
+        return news;
+      });
+    }
+  }, [data]);
+
   return (
     <Canvas
       shadows
@@ -161,16 +272,63 @@ function Threedire() {
         position: [0, 30, 20],
       }}
     >
-      {
-        modelconfig?.map((it,i)=>{
-          return <Model key={it.name} {...it}/>
-        })
-      }
-      <Floor position={[0, -0.06, 0]} positionback={[0, 5, -12.45]} />
-      <gridHelper args={[60, 15, "#20293A", "#20293A"]} />
+      {config?.map((it, i) => {
+        return <Model key={it.name} {...it} />;
+      })}
+      <Robot />
+      <Jixiebi />
+
+      <Floor position={[2, -0.06, 0]} />
+      <gridHelper args={[60, 15, "#20293A", "#20293A"]} position={[2, 0, 0]} />
       <Bulb position={[0, 6, 0]} />
-      <axesHelper />
       <OrbitControls />
+      <>
+        <mesh position={[7.5, 0, 1.4]} receiveShadow>
+          <boxBufferGeometry args={[45, 0.1, 4]} />
+          <meshPhysicalMaterial
+            color={"green"}
+            roughness={0.5}
+            transmission={0.5}
+          />
+        </mesh>
+        <mesh position={[6, 0, 15]} receiveShadow>
+          <boxBufferGeometry args={[4, 0.1, 30]} />
+          <meshPhysicalMaterial
+            color={"green"}
+            roughness={0.5}
+            transmission={0.5}
+          />
+        </mesh>
+        <mesh position={[-15, 0, 0]} receiveShadow>
+          <boxBufferGeometry args={[4, 0.1, 60]} />
+          <meshPhysicalMaterial
+            color={"green"}
+            roughness={0.5}
+            transmission={0.5}
+          />
+        </mesh>
+        <mesh position={[28, 0, 0]} receiveShadow>
+          <boxBufferGeometry args={[4, 0.1, 60]} />
+          <meshPhysicalMaterial
+            color={"green"}
+            roughness={0.5}
+            transmission={0.5}
+          />
+        </mesh>
+
+        <mesh position={[-7, 0, -6]} receiveShadow>
+          <boxBufferGeometry args={[8, 0.1, 8]} />
+          <meshPhysicalMaterial color={"grey"} map={texture} roughness={1} />
+        </mesh>
+        <mesh position={[-7, 0, -15.6]} receiveShadow>
+          <boxBufferGeometry args={[8, 0.1, 8]} />
+          <meshPhysicalMaterial color={"grey"} map={texture} roughness={1} />
+        </mesh>
+        <mesh position={[3, 0, -10.75]} receiveShadow>
+          <boxBufferGeometry args={[9, 0.1, 17.75]} />
+          <meshPhysicalMaterial color={"grey"} map={texture} roughness={1} />
+        </mesh>
+      </>
     </Canvas>
   );
 }

src/utils/doFetch.js

+import request from "./request";
+
+export async function postFetch({ url, params }) {
+  return request(url, {
+    method: "POST",
+    data: params,
+  });
+}
+export async function doFetch({ url, params }) {
+  if(!url){
+    return
+  }
+  return request("/sfx" + url, {
+    method: "POST",
+    data: params,
+  });
+}
+export async function getFetch({ url, params }) {
+  return request(url,{
+    params
+  });
+}
+
+export async function formFetch({ url, params }) {
+  return request(url, {
+    method: "POST",
+    data: params,
+    type: "form",
+  });
+}

src/utils/request.js

+/**
+ * request 网络请求工具
+ * 更详细的 api 文档: https://github.com/umijs/umi-request
+ */
+import { extend } from "umi-request";
+import { message, notification, Modal } from "antd";
+import { history } from "umi";
+
+const codeMessage = {
+  200: "服务器成功返回请求的数据。",
+  201: "新建或修改数据成功。",
+  202: "一个请求已经进入后台排队（异步任务）。",
+  204: "删除数据成功。",
+  400: "发出的请求有错误，服务器没有进行新建或修改数据的操作。",
+  401: "用户没有权限（令牌、用户名、密码错误）。",
+  403: "用户得到授权，但是访问是被禁止的。",
+  404: "发出的请求针对的是不存在的记录，服务器没有进行操作。",
+  406: "请求的格式不可得。",
+  410: "请求的资源被永久删除，且不会再得到的。",
+  422: "当创建一个对象时，发生一个验证错误。",
+  500: "服务器发生错误，请检查服务器。",
+  502: "网关错误。",
+  503: "服务不可用，服务器暂时过载或维护。",
+  504: "网关超时。",
+};
+/**
+ * 异常处理程序
+ */
+
+const errorHandler = (error) => {
+  const { response } = error;
+  if (response && response.status) {
+    const errorText = codeMessage[response.status] || response.statusText;
+    const { status, url } = response;
+    if (response?.url.indexOf("api/user_token") == -1) {
+      notification.error({
+        message: `请求错误 ${status}: ${url}`,
+        description: errorText,
+      });
+    }
+  } else if (!response) {
+    if (response?.url.indexOf("api/user_token") == -1) {
+      notification.error({
+        description: "您的网络发生异常，无法连接服务器",
+        message: "网络异常",
+      });
+    }
+  }
+
+  return response ? response : {};
+};
+/**
+ * 配置request请求时的默认参数
+ */
+
+const request = extend({
+  errorHandler,
+  // 默认错误处理
+  credentials: "include", // 默认请求是否带上cookie
+});
+
+// request拦截器, 改变url 或 options.
+request.interceptors.request.use(async (url, options) => {
+  let token =
+    localStorage.getItem("TOKEN_MES") ?? "9410b3f7de5d63f2be42d80ec8241d2d";
+  if (token) {
+    const headers =
+      options.type == "form"
+        ? {
+            token: token,
+          }
+        : {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            token: token,
+          };
+    return {
+      url: url,
+      options: { ...options, headers: headers },
+    };
+  }
+});
+
+// response拦截器, 处理response
+request.interceptors.response.use(async (response, options) => {
+  if (options.responseType == "blob") {
+    const data = await response.clone().blob();
+    let blobUrl = window.URL.createObjectURL(data);
+    const a = document.createElement("a");
+    a.style.display = "none";
+    let temp =
+      response.headers.get("Content-Disposition").split(";")[1].split("=")[1] ||
+      "";
+    let fileDefaultName = decodeURI(temp);
+    let pathname = localStorage.getItem("curinf")
+      ? JSON.parse(localStorage.getItem("curinf"))
+      : {};
+    a.download = fileDefaultName || pathname.cname + ".xls";
+    a.href = blobUrl;
+    a.click();
+    a.remove();
+  } else {
+    const data = await response.clone().json();
+    // 详情返回的response处理
+    if (data?.code != "0000") {
+      message.destroy();
+      message.warn(data?.msg);
+      if (data?.code == "0001" && window.location.href.indexOf("login") == -1) {
+        localStorage.clear();
+        history.replace("/user/login");
+      }
+    }
+  }
+
+  return response;
+});
+
+export default request;

src/utils/tempfields.js

+import { doFetch } from "./doFetch";
+
+function formatFieds(data) {
+    let obj = {};
+    for (let i = 0; i < data.length; i++) {
+        let item = data[i],
+            fieldsKey = "field" + i;
+        if (item.fieldChar == 1) {
+            obj[fieldsKey] = {
+                value: item?.fieldRealValue ?? "",
+                title: item.fieldName,
+                name: [fieldsKey],
+                required: false,
+                type: "input",
+            };
+        } else {
+            obj[fieldsKey] = {
+                value:
+                    item?.fieldRealValue == 0 || item?.fieldRealValue
+                        ? item?.fieldRealValue
+                        : item.fieldChar == 4
+                            ? []
+                            : "",
+                title: item.fieldName,
+                name: [fieldsKey],
+                required: false,
+                type: item.fieldChar == 3 ? "radio" : "select",
+                options: item.valueList,
+                multiple: item.fieldChar == 4 ? true : false,
+            };
+        }
+    }
+    return obj
+}
+
+async function tempfields(url, params) {
+    let datas = await doFetch({ url, params })
+    let list = datas?.data?.dataList;
+    return {
+        fields: formatFieds(list),
+        data: list
+    }
+}
+
+
+export default tempfields
\ No newline at end of file

src/utils/utils.less

+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: " ";
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}

src/utils/utils.test.js

+import { isUrl } from "./utils";
+
+describe("isUrl tests", () => {
+  it("should return false for invalid and corner case inputs", () => {
+    expect(isUrl([])).toBeFalsy();
+    expect(isUrl({})).toBeFalsy();
+    expect(isUrl(false)).toBeFalsy();
+    expect(isUrl(true)).toBeFalsy();
+    expect(isUrl(NaN)).toBeFalsy();
+    expect(isUrl(null)).toBeFalsy();
+    expect(isUrl(undefined)).toBeFalsy();
+    expect(isUrl("")).toBeFalsy();
+  });
+  it("should return false for invalid URLs", () => {
+    expect(isUrl("foo")).toBeFalsy();
+    expect(isUrl("bar")).toBeFalsy();
+    expect(isUrl("bar/test")).toBeFalsy();
+    expect(isUrl("http:/example.com/")).toBeFalsy();
+    expect(isUrl("ttp://example.com/")).toBeFalsy();
+  });
+  it("should return true for valid URLs", () => {
+    expect(isUrl("http://example.com/")).toBeTruthy();
+    expect(isUrl("https://example.com/")).toBeTruthy();
+    expect(isUrl("http://example.com/test/123")).toBeTruthy();
+    expect(isUrl("https://example.com/test/123")).toBeTruthy();
+    expect(isUrl("http://example.com/test/123?foo=bar")).toBeTruthy();
+    expect(isUrl("https://example.com/test/123?foo=bar")).toBeTruthy();
+    expect(isUrl("http://www.example.com/")).toBeTruthy();
+    expect(isUrl("https://www.example.com/")).toBeTruthy();
+    expect(isUrl("http://www.example.com/test/123")).toBeTruthy();
+    expect(isUrl("https://www.example.com/test/123")).toBeTruthy();
+    expect(isUrl("http://www.example.com/test/123?foo=bar")).toBeTruthy();
+    expect(isUrl("https://www.example.com/test/123?foo=bar")).toBeTruthy();
+  });
+});

src/utils/windowsize.js

+import { useState, useEffect } from 'react';
+
+export const useWindowSize = () => {
+  // 第一步：声明能够体现视口大小变化的状态
+  const [windowSize, setWindowSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  // 第二步：通过生命周期 Hook 声明回调的绑定和解绑逻辑
+  useEffect(() => {
+    const updateSize = () => setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+    window?.addEventListener('resize', updateSize);
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+
+  return windowSize;
+}
\ No newline at end of file

yarn.lock

@@ -2669,6 +2669,13 @@ emojis-list@^3.0.0:
   resolved "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
+encoding@^0.1.11:
+  version "0.1.13"
+  resolved "https://registry.npmmirror.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.npmmirror.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -3676,6 +3683,13 @@ https-browserify@^1.0.0:
   resolved "https://registry.npmmirror.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==
 
+iconv-lite@^0.6.2:
+  version "0.6.3"
+  resolved "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
@@ -3926,6 +3940,11 @@ is-shared-array-buffer@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
+
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmmirror.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
@@ -3993,6 +4012,14 @@ isarray@^2.0.5:
   resolved "https://registry.npmmirror.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
   integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
 
+isomorphic-fetch@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmmirror.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isomorphic-unfetch@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmmirror.com/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz#87341d5f4f7b63843d468438128cb087b7c3e98f"
@@ -4323,6 +4350,14 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.npmmirror.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-fetch@^2.6.1:
   version "2.6.7"
   resolved "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
@@ -5040,6 +5075,13 @@ punycode@^2.1.0:
   resolved "https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+qs@^6.9.1:
+  version "6.11.0"
+  resolved "https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
+  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+  dependencies:
+    side-channel "^1.0.4"
+
 query-string@^6.13.6:
   version "6.14.1"
   resolved "https://registry.npmmirror.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
@@ -5723,7 +5765,7 @@ safe-stable-stringify@^2.1.0:
   resolved "https://registry.npmmirror.com/safe-stable-stringify/-/safe-stable-stringify-2.3.1.tgz#ab67cbe1fe7d40603ca641c5e765cb942d04fc73"
   integrity sha512-kYBSfT+troD9cDA85VDnHZ1rpHC50O0g1e6WlGHVCz/g+JS+9WKLj+XwFYyR8UbrZN8ll9HUpDAAddY58MGisg==
 
-safer-buffer@^2.1.0:
+"safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.1.0:
   version "2.1.2"
   resolved "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -6254,6 +6296,14 @@ typescript@^4.1.2:
   resolved "https://registry.npmmirror.com/typescript/-/typescript-4.8.3.tgz#d59344522c4bc464a65a730ac695007fdb66dd88"
   integrity sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==
 
+umi-request@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/umi-request/-/umi-request-1.4.0.tgz#ed0e54e47f043d2be06e691477f0890383f9dd8a"
+  integrity sha512-OknwtQZddZHi0Ggi+Vr/olJ7HNMx4AzlywyK0W3NZBT7B0stjeZ9lcztA85dBgdAj3KVk8uPJPZSnGaDjELhrA==
+  dependencies:
+    isomorphic-fetch "^2.2.1"
+    qs "^6.9.1"
+
 umi@^4.0.20:
   version "4.0.20"
   resolved "https://registry.npmmirror.com/umi/-/umi-4.0.20.tgz#a71eb479708adea59090cc85e075282cc6841f39"
@@ -6388,6 +6438,11 @@ webidl-conversions@^3.0.0:
   resolved "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
   integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
 
+whatwg-fetch@>=0.10.0:
+  version "3.6.2"
+  resolved "https://registry.npmmirror.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"