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>
);
};
--
GitLab