feat: supprt log ui

src/components/log-item.tsx

@@ -0,0 +1,21 @@
+import { styled, Box } from "@mui/material";
+
+const LogItem = styled(Box)(({ theme }) => ({
+  padding: "8px 0",
+  margin: "0 12px",
+  lineHeight: 1.35,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  "& .time": {},
+  "& .type": {
+    display: "inline-block",
+    width: 50,
+    margin: "0 4px",
+    textAlign: "center",
+    borderRadius: 2,
+    textTransform: "uppercase",
+    fontWeight: "600",
+  },
+  "& .data": {},
+}));
+
+export default LogItem;

src/pages/log.tsx

@@ -1,21 +1,69 @@
-import { useEffect } from "react";
-import { Box, Typography } from "@mui/material";
+import dayjs from "dayjs";
+import { useEffect, useRef, useState } from "react";
+import { Box, Button, Paper, Typography } from "@mui/material";
+import { Virtuoso } from "react-virtuoso";
+import LogItem from "../components/log-item";
 import services from "../services";
 
+let logCache: any[] = [];
+
 const LogPage = () => {
+  const [logData, setLogData] = useState<any[]>(logCache);
+
   useEffect(() => {
-    const sourcePromise = services.getLogs(console.log);
+    const sourcePromise = services.getLogs((t) => {
+      const time = dayjs().format("MM-DD HH:mm:ss");
+      const item = { ...t, time };
+      setLogData((l) => (logCache = [...l, item]));
+    });
 
     return () => {
-      sourcePromise.then((src) => src.cancel());
+      sourcePromise.then((src) => src.cancel("cancel"));
     };
   }, []);
 
   return (
-    <Box sx={{ width: 0.9, maxWidth: "850px", mx: "auto", mb: 2 }}>
+    <Box
+      sx={{
+        position: "relative",
+        width: 0.9,
+        maxWidth: "850px",
+        height: "100%",
+        mx: "auto",
+      }}
+    >
       <Typography variant="h4" component="h1" sx={{ py: 2 }}>
         Logs
       </Typography>
+
+      <Button
+        size="small"
+        variant="contained"
+        sx={{ position: "absolute", top: 22, right: 0 }}
+        onClick={() => {
+          setLogData([]);
+          logCache = [];
+        }}
+      >
+        Clear
+      </Button>
+
+      <Paper sx={{ boxShadow: 2, height: "calc(100% - 100px)" }}>
+        <Virtuoso
+          initialTopMostItemIndex={999}
+          data={logData}
+          itemContent={(index, logItem) => {
+            return (
+              <LogItem>
+                <span className="time">{logItem.time}</span>
+                <span className="type">{logItem.type}</span>
+                <span className="data">{logItem.payload}</span>
+              </LogItem>
+            );
+          }}
+          followOutput={"smooth"}
+        />
+      </Paper>
     </Box>
   );
 };