Compare commits

1 Commits

Author SHA1 Message Date
f23b725c81 react-window 2022-05-22 17:06:40 +08:00
3 changed files with 83 additions and 58 deletions

38
package-lock.json generated
View File

@@ -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",

View File

@@ -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",

View File

@@ -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}