react-window

pages/time.js

@@ -9,15 +9,13 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
+  List,
+  ListItem,
+  ListItemText,
   Typography,
   TextField,
-  TableContainer,
-  Table,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableBody,
 } from "@mui/material";
+import { FixedSizeList } from "react-window";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import config from "../next.config";
@@ -330,56 +328,46 @@ export default function Time(props) {
           服务器负载 (QPS): {stats.apiqps}
         </Typography>
       </Box>
-      <TableContainer>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>名称</TableCell>
-              <TableCell>时间段</TableCell>
-              <TableCell>操作</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {ranges.map((range) => (
-              <TableRow key={range.id}>
-                <TableCell>{range.name}</TableCell>
-                <TableCell>{range.range}</TableCell>
-                <TableCell>
-                  <Button
-                    sx={{
-                      userSelect: "none",
-                    }}
-                    disabled={range.username !== ""}
-                    variant="contained"
-                    color="primary"
-                    onClick={() => updateUsername(range.id, props.username)}
-                  >
-                    {range.username ? range.username : "抢！"}
-                  </Button>
-                  {isAdmin() && (
-                    <>
-                      <Button
-                        variant="contained"
-                        color="secondary"
-                        onClick={() => setModifyTime(range)}
-                      >
-                        修改
-                      </Button>
-                      <Button
-                        variant="contained"
-                        color="secondary"
-                        onClick={() => deleteRange(range.id)}
-                      >
-                        删除
-                      </Button>
-                    </>
-                  )}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
+
+    <Box sx={{
+      height: "100%",
+    }}>
+      <FixedSizeList
+        height={500}
+        width={"100%"}
+        itemSize={50}
+        itemData={ranges}
+        itemCount={ranges.length}
+        innerElementType={List}
+        style={{
+          maxWidth: "29rem",
+        }}
+      >
+        {({ index, style, data }) => {
+          const range = data[index];
+          return (
+            <ListItem style={style} key={index}>
+              <Button
+                sx={{
+                  userSelect: "none",
+                    mx: "1rem",
+                }}
+                disabled={range.username !== ""}
+                variant="contained"
+                color="primary"
+                onClick={() => updateUsername(range.id, props.username)}
+              >
+                {range.username ? range.username : "抢！"}
+              </Button>
+              <ListItemText>
+                {range.name} {range.range}
+              </ListItemText>
+            </ListItem>
+          );
+        }}
+      </FixedSizeList>
+    </Box>
+
       <Snackbar
         open={snackbarError}
         autoHideDuration={1000}