Files
yuanhe-checkin-electron/src/App.tsx
2025-11-20 17:06:56 +08:00

82 lines
2.4 KiB
TypeScript

import { Routes, Route } from "react-router-dom";
import { useEffect, useState } from "react";
// import { listen } from "@tauri-apps/api/event";
import "./App.css";
import icon from "./assets/icon.png";
import U1 from "./pages/U1/u1";
import U2 from "./pages/U2/u2";
import U3 from "./pages/U3/u3";
import U4 from "./pages/U4/u4";
import UI6 from "./pages/UI6/UI6";
import UI7 from "./pages/UI7/UI7";
import UI8 from "./pages/UI8/UI8";
import UI9 from "./pages/UI9/UI9";
function App() {
const [time, setTime] = useState<string>(() => formatDate(new Date()));
useEffect(() => {
const id = setInterval(() => setTime(formatDate(new Date())), 1000);
// let unlisten: (() => void) | null = null;
// (async () => {
// try {
// const off = await listen("idcard-error", (e) => {
// console.error("[idcard-error]", e.payload);
// });
// unlisten = off;
// } catch (err) {
// console.error("failed to set idcard-error listener", err);
// }
// })();
return () => {
clearInterval(id);
// if (unlisten) unlisten();
};
}, []);
return (
<div className="app-container">
{/* 全局背景层 */}
<div className="global-background">
{/* 顶部固定区域 - 始终显示 */}
<div className="global-header">
<img className="header-logo" alt="logo" src={icon} />
<span className="header-title"></span>
</div>
<span className="header-time">{time}</span>
</div>
{/* 路由内容区域 */}
<div className="content-area">
<Routes>
<Route path="/" element={<U1 />} />
<Route path="/u2" element={<U2 />} />
<Route path="/u3" element={<U3 />} />
<Route path="/u4" element={<U4 />} />
<Route path="/UI6" element={<UI6 />} />
<Route path="/UI7" element={<UI7 />} />
<Route path="/UI8" element={<UI8 />} />
<Route path="/UI9" element={<UI9 />} />
</Routes>
</div>
</div>
);
}
export default App;
function pad(num: number) {
return String(num).padStart(2, "0");
}
function formatDate(d: Date) {
const Y = d.getFullYear();
const M = pad(d.getMonth() + 1);
const D = pad(d.getDate());
const hh = pad(d.getHours());
const mm = pad(d.getMinutes());
const ss = pad(d.getSeconds());
return `${Y}-${M}-${D} ${hh}:${mm}:${ss}`;
}