react-window

package-lock.json

@@ -15,7 +15,8 @@
         "better-sqlite3": "^7.5.0",
         "next": "12.1.2",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-window": "^1.8.7"
       },
       "devDependencies": {
         "eslint": "8.12.0",
@@ -2996,6 +2997,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
@@ -3561,6 +3567,22 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-window": {
+      "version": "1.8.7",
+      "resolved": "https://registry.npmmirror.com/react-window/-/react-window-1.8.7.tgz",
+      "integrity": "sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -6445,6 +6467,11 @@
         "yallist": "^4.0.0"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
@@ -6878,6 +6905,15 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-window": {
+      "version": "1.8.7",
+      "resolved": "https://registry.npmmirror.com/react-window/-/react-window-1.8.7.tgz",
+      "integrity": "sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      }
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.7.tgz",

package.json

@@ -16,7 +16,8 @@
     "better-sqlite3": "^7.5.0",
     "next": "12.1.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-window": "^1.8.7"
   },
   "devDependencies": {
     "eslint": "8.12.0",

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>
+    <Box sx={{
-          <TableHead>
+      height: "100%",
-            <TableRow>
+    }}>
-              <TableCell>名称</TableCell>
+      <FixedSizeList
-              <TableCell>时间段</TableCell>
+        height={500}
-              <TableCell>操作</TableCell>
+        width={"100%"}
-            </TableRow>
+        itemSize={50}
-          </TableHead>
+        itemData={ranges}
-          <TableBody>
+        itemCount={ranges.length}
-            {ranges.map((range) => (
+        innerElementType={List}
-              <TableRow key={range.id}>
+        style={{
-                <TableCell>{range.name}</TableCell>
+          maxWidth: "29rem",
-                <TableCell>{range.range}</TableCell>
+        }}
-                <TableCell>
+      >
-                  <Button
+        {({ index, style, data }) => {
-                    sx={{
+          const range = data[index];
-                      userSelect: "none",
+          return (
-                    }}
+            <ListItem style={style} key={index}>
-                    disabled={range.username !== ""}
+              <Button
-                    variant="contained"
+                sx={{
-                    color="primary"
+                  userSelect: "none",
-                    onClick={() => updateUsername(range.id, props.username)}
+                    mx: "1rem",
-                  >
+                }}
-                    {range.username ? range.username : "抢！"}
+                disabled={range.username !== ""}
-                  </Button>
+                variant="contained"
-                  {isAdmin() && (
+                color="primary"
-                    <>
+                onClick={() => updateUsername(range.id, props.username)}
-                      <Button
+              >
-                        variant="contained"
+                {range.username ? range.username : "抢！"}
-                        color="secondary"
+              </Button>
-                        onClick={() => setModifyTime(range)}
+              <ListItemText>
-                      >
+                {range.name} {range.range}
-                        修改
+              </ListItemText>
-                      </Button>
+            </ListItem>
-                      <Button
+          );
-                        variant="contained"
+        }}
-                        color="secondary"
+      </FixedSizeList>
-                        onClick={() => deleteRange(range.id)}
+    </Box>
-                      >
+
-                        删除
-                      </Button>
-                    </>
-                  )}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
       <Snackbar
         open={snackbarError}
         autoHideDuration={1000}