等待图片

src/App.tsx

@@ -1,55 +1,68 @@
 import "./App.css";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
+import altImg from "./assets/altImg.png"
 
-interface Qrcode {
+interface SignInType {
-  qrcode?: string;
+    qrcode?: string;
-  title?: string;
+    title?: string;
-  start_time?: string;
+    start_time?: string;
-  end_time?: string;
+    end_time?: string;
 }
 
 function App() {
-  const [qrcode, setQrcode] = useState<Qrcode>();
+    const [signIn, setSignIn] = useState<SignInType>();
-  useEffect(() => {
+    useEffect(() => {
-    fetch("http://101.35.127.74:3000/qrcode")
+        fetch("http://101.35.127.74:3000/qrcode")
-      .then((res) => res.json())
+            .then((res) => res.json())
-      .then((data) => {
+            .then((data) => {
-        setQrcode(() => data);
+                setSignIn(() => data);
-      });
+            });
-    const source = new EventSource("http://101.35.127.74:3000/qrcode-sse", {
+        const source = new EventSource("http://101.35.127.74:3000/qrcode-sse", {
-      // withCredentials: true,
+            // withCredentials: true,
-    });
+        });
-    source.addEventListener("message", (ev: MessageEvent<string>) => {
+        source.addEventListener("message", (ev: MessageEvent<string>) => {
-      const data = JSON.parse(ev.data) as Qrcode;
+            const data = JSON.parse(ev.data) as SignInType;
-      setQrcode(() => data);
+            setSignIn(() => data);
-    });
+        });
-  }, []);
+    }, []);
-  return (
+    return (
-    <div className={"flex flex-col items-center pt-8"}>
+        <div className={"flex flex-col items-center pt-8"}>
-      <h2 className={"font-bold text-3xl text-center"}>{qrcode?.title}</h2>
+            {signIn ? (
-      {qrcode ? (
+                signIn.qrcode && !signIn.qrcode.startsWith("http") ? (
-        <img
+                    <>
-          alt={"没有正在进行的会议"}
+                        <h2 className={"font-bold text-3xl text-center"}>{signIn?.title}</h2>
-          className={"w-[90vw] md:w-[30vw] aspect-square"}
+                        <img
-          src={qrcode?.qrcode}
+                            alt={""}
-        />
+                            className={"w-[90vw] md:w-[30vw] aspect-square"}
-      ) : (
+                            src={signIn.qrcode}
-        <div
+                        />
-          className={
+                        <p className={"text-lg"}>开始时间 {signIn?.start_time}</p>
-            "w-64 justify-center flex items-center text-xl font-bold aspect-square"
+                        <p className={"text-lg"}>过期时间 {signIn?.end_time}</p>
-          }
+                    </>
-        >
+                ) : (
-          loading
+                    <div
+                        className={
+                            "w-[90vw] md:w-[30vw] aspect-square flex justify-center items-center text-lg"
+                        }
+                    >
+                        <img
+                            alt={""}
+                            className={"w-[90vw] md:w-[30vw] aspect-square"}
+                            src={altImg}
+                        />
+                    </div>
+                )
+            ) : (
+                <div
+                    className={
+                        "w-64 justify-center flex items-center text-xl font-bold aspect-square"
+                    }
+                >
+                    加载中
+                </div>
+            )}
         </div>
-      )}
+    );
-      {qrcode?.qrcode && (
-        <>
-          <p className={"text-lg"}>开始时间 {qrcode?.start_time}</p>
-          <p className={"text-lg"}>节省时间 {qrcode?.end_time}</p>
-        </>
-      )}
-    </div>
-  );
 }
 
 export default App;