💄 将部分div改为Box

package.json

@@ -1,7 +1,7 @@
 {
  "name": "neila-tools",
  "version": "1.5.3",
- "devVersion": "702",
+ "devVersion": "704",
  "dev": true,
  "description": "Platform for Neila's something useless tools.",
  "private": true,

src/app/components/Popover.tsx

@@ -5,6 +5,7 @@ import {
  CSSProperties
 } from 'react';
 import {
+ Box,
  Popover,
  Typography
 } from '@mui/material';
@@ -35,7 +36,7 @@ export default function MouseOverPopover(props: {
  };
  const open = Boolean(anchorEl);
  return (
- <div style={props.sx ? props.sx : {}}>
+ <Box sx={props.sx ? props.sx : {}}>
  <div
  aria-haspopup="true"
  onMouseEnter={handlePopoverOpen}
@@ -64,6 +65,6 @@ export default function MouseOverPopover(props: {
  >
  <Typography sx={{ p: 1 }}>{props.text}</Typography>
  </Popover>
- </div>
+ </Box>
  );
 }

src/app/index/Buttons.tsx

@@ -3,7 +3,8 @@ import {
  Divider,
  ButtonGroup,
  Button,
- IconButton
+ IconButton,
+ Box
 } from "@mui/material";
 import {
  setState
@@ -54,7 +55,7 @@ export default function Buttons(props: {
  [dialogTools, setDialogTools] = useState<string[]>([]),
  [dialogListName, setDialogListName] = useState<string>("");
  return (
- <div style={{
+ <Box sx={{
  position: "absolute",
  bottom: "0px",
  width: "100%"
@@ -90,6 +91,6 @@ export default function Buttons(props: {
  setList={props.setList}
  left={[]}
  />
- </div>
+ </Box>
  );
 }

src/app/index/SingleSelect.tsx

@@ -1,5 +1,6 @@
 "use client";
 import {
+ Box,
  Button, Paper
 } from "@mui/material";
 import {
@@ -34,12 +35,12 @@ export default function SingleSelect(props: {
  </>
  )
  return props.isSidebar ? (
- <div style={{
+ <Box sx={{
  width: "100%",
  whiteSpace: "nowrap"
  }}>
  <Inner />
- </div>
+ </Box>
  ) : (
  <Inner />
  );

src/app/index/SingleTool.tsx

@@ -5,6 +5,7 @@ import React, {
  useState
 } from 'react';
 import {
+ Box,
  Card,
  CardContent,
  Typography
@@ -129,11 +130,11 @@ export default function SingleTool(props: {
  }]);
  }
  }}>
- {viewMode == "grid" ? <div>
+ {viewMode == "grid" ? <Box>
  <div className={Style["singleGridIcon"]}>
  <ToolIcon />
  </div>
- <div>
+ <Box>
  <ToolTypography variant="h5">
  <DownButton {...buttonOptions} />
  {(tool.isGoto && !tool.to.startsWith("/extendedTools")) ? <ExitToAppIcon /> : <></>}
@@ -143,26 +144,26 @@ export default function SingleTool(props: {
  <ToolTypography {...subStyle} variant="body2">
  {tool.desc}
  </ToolTypography>
- </div>
- </div> : <>
+ </Box>
+ </Box> : <>
  <div className={Style["singleListText"]}>
  <div className={Style["singleListIcon"]}>
  <ToolIcon />
  </div>
- <div>
+ <Box>
  <ToolTypography variant="h5">
  {(tool.isGoto && !tool.to.startsWith("/extendedTools")) ? <ExitToAppIcon /> : <></>}
  {tool.name}
  </ToolTypography>
  <ToolTypography {...subStyle} variant="body2">
  {tool.desc}
  </ToolTypography>
- </div>
+ </Box>
  </div>
- <div>
+ <Box>
  <DownButton {...buttonOptions} />
  <UpButton {...buttonOptions} />
- </div>
+ </Box>
  </>}
  </div>
  {props.isFirst && <iframe style={{

src/app/page.tsx

@@ -176,9 +176,13 @@ export default function Index(props: {
  width: "100%"
  }}>
  <Center>
- <HandymanIcon sx={{
- fontSize: "1000%"
- }} />
+ <Box sx={{
+ cursor: "pointer"
+ }}>
+ <HandymanIcon sx={{
+ fontSize: "1000%"
+ }} />
+ </Box>
  </Center>
  </Box>
  <Box>

src/app/setting/about/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import I18N from 'react-intl-universal';
 import {
+ Box,
  Grid,
  SvgIconTypeMap,
  Typography
@@ -141,7 +142,7 @@ export default function About() {
  <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
  {Object.values(abouts).map((item, index) => (
  <Grid item xs={2} sm={4} md={4} key={Object.keys(abouts).filter(single => abouts[single] === item)[0]}>
- <div style={{
+ <Box style={{
  cursor: "pointer"
  }} onClick={event => {
  setDialogContext(item.context);
@@ -153,7 +154,7 @@ export default function About() {
  <br />
  {item.name}
  </Typography>
- </div>
+ </Box>
  </Grid>
  ))}
  </Grid>

src/app/setting/extendeds/page.tsx

@@ -7,7 +7,8 @@ import {
  Divider,
  TextField,
  IconButton,
- ButtonGroup
+ ButtonGroup,
+ Box
 } from "@mui/material";
 import {
  useState
@@ -105,29 +106,29 @@ export default function ExtendedManager() {
  {extendedTools?.map(single => <Paper sx={{
  padding: 2
  }} key={single.to}>
- <div style={{
+ <Box sx={{
  display: "flex",
  justifyContent: "space-between"
  }}>
  <Stack direction="row" divider={<Divider orientation="vertical" flexItem />} spacing={2}>
  <Stack direction="row" spacing={1}>
- <div>
+ <Box>
  <Image src={single.icon} alt={single.name} height={24} width={24} />
- </div>
- <div>
+ </Box>
+ <Box>
  <Typography>
  {single.name}
  </Typography>
  <Typography>
  <strong>{I18N.get("ID")}</strong> {single.to}
  </Typography>
- </div>
+ </Box>
  </Stack>
- <div>
+ <Box>
  <strong>{I18N.get('描述')}</strong>
  <br />
  {single.desc}
- </div>
+ </Box>
  </Stack>
  <IconButton onClick={event => {
  setFile(single.file);
@@ -138,7 +139,7 @@ export default function ExtendedManager() {
  }}>
  <EditIcon />
  </IconButton>
- </div>
+ </Box>
  </Paper>)}
  </Stack>
  <br />

src/app/tools/countletter/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import I18N from 'react-intl-universal';
 import {
+ Box,
  Button, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup
 } from "@mui/material";
 import LpLogger from "lp-logger";
@@ -25,7 +26,7 @@ function CountLetter(): JSX.Element {
  [numberType, setNumberType] = useState<numberType>(10);
  return (
  <>
- <div>
+ <Box>
  <Button onClick={() => {
  logger.log("已弹出输入框。");
  setEnterDialogOpen(true);
@@ -42,7 +43,7 @@ function CountLetter(): JSX.Element {
  <AlertDialog open={alertDialogOpen} title={I18N.get('输出')} description={out} onDone={() => {
  setAlertDialogOpen(false);
  }} /> {/* 输出对话框容器 */}
- </div>
+ </Box>
  <br />
  <FormControl>
  <FormLabel id="radio-buttons-group-label">数字进制</FormLabel>