Initial commit

src/pages/U1/u1.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect, useRef } from "react";
+import "./u1.css";
+import { useNavigate } from "react-router-dom";
+// import { invoke } from "@tauri-apps/api/core";
+// import { listen } from "@tauri-apps/api/event";
+import idcard from "../../assets/idcard.png";
+import semicircle from "../../assets/semicircle.png";
+import LongButton from "../../components/LongButton";
+import LongButtonLoading from "../../components/LongButtonLoading";
+import DecorLine from "../../components/DecorLine";
+
+const U1: React.FC = () => {
+  const navigate = useNavigate();
+
+  const [reading, setReading] = useState(false);
+  const timerRef = useRef<number | null>(null);
+
+  const handleStart = () => {
+    if (reading) return; // 避免重复点击
+    setReading(true);
+    // 启动后端监听
+    // invoke("start_idcard_listen").catch((e) => {
+    //   console.error("start_idcard_listen failed", e);
+    // });
+    // 6 秒超时恢复
+    timerRef.current = window.setTimeout(() => {
+      if (reading) {
+        console.warn("未在 6 秒内读取到身份证信息，恢复初始状态");
+        setReading(false);
+        // invoke("stop_idcard_listen").catch(() => {});
+      }
+    }, 6000);
+  };
+
+  useEffect(() => {
+    if (!reading) return;
+    // let unlisten: (() => void) | null = null;
+    // (async () => {
+    //   try {
+    //     const off = await listen("idcard-data", (e) => {
+    //       const payload: any = e.payload;
+    //       console.log("[idcard-data]", payload);
+    //       // 成功：清理定时器，停止监听，跳转并传递身份证号
+    //       if (timerRef.current) {
+    //         clearTimeout(timerRef.current);
+    //         timerRef.current = null;
+    //       }
+    //       invoke("stop_idcard_listen").catch(() => {});
+    //       setReading(false);
+    //       navigate("/u2", {
+    //         state: { idCardNo: payload?.id_card_no, cardData: payload },
+    //       });
+    //     });
+    //     unlisten = off;
+    //   } catch (err) {
+    //     console.error("listen idcard-data failed", err);
+    //   }
+    // })();
+    return () => {
+      // if (unlisten) unlisten();
+    };
+  }, [reading, navigate]);
+
+  useEffect(() => {
+    return () => {
+      // 页面卸载时清理
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = null;
+      // if (reading) invoke("stop_idcard_listen").catch(() => {});
+    };
+  }, [reading]);
+
+  return (
+    <div className="u1-root">
+      <span className="u1-title">
+        欢迎使用圆和医疗
+        <br />
+        自助签到系统
+      </span>
+      <DecorLine />
+      <img alt="card reader" src={idcard} />
+      <span className="u1-instruction">请放置身份证在读卡区域</span>
+      <img className="u1-semicircle" alt="start button" src={semicircle} />
+      {!reading && <LongButton text="开始签到" onClick={handleStart} />}
+      {reading && <LongButtonLoading text="身份信息读取中..." />}
+    </div>
+  );
+};
+
+export default U1;