From 1a51062aa13e581debd8d86d487a05c01149e482 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Wed, 22 Dec 2021 02:08:44 +0800
Subject: [PATCH] feat: supprt log ui

---
 src/components/log-item.tsx | 21 ++++++++++++++
 src/pages/log.tsx           | 58 +++++++++++++++++++++++++++++++++----
 2 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 src/components/log-item.tsx

diff --git a/src/components/log-item.tsx b/src/components/log-item.tsx
new file mode 100644
index 0000000..89e6629
--- /dev/null
+++ b/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;
diff --git a/src/pages/log.tsx b/src/pages/log.tsx
index cf4cd6a..cf26566 100644
--- a/src/pages/log.tsx
+++ b/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>
   );
 };