🎨 修正一些语义元素的使用

package.json

@@ -1,7 +1,7 @@
 {
  "name": "verkfi",
  "version": "1.6.1",
- "devVersion": "752",
+ "devVersion": "760",
  "dev": true,
  "description": "Platform for Neila's something useless tools.",
  "private": true,

src/app/components/center/Center.tsx

@@ -1,11 +1,14 @@
+import {
+ Box
+} from "@mui/material";
 import style from "./Center.module.scss";
 /**
  * 居中
  * @returns {JSX.Element} 
  */
 export const Center = props => (
- <div className={style["center"]}>
+ <Box className={style["center"]}>
  {props.children}
- </div>
+ </Box>
 );
 export default Center;

src/app/setting/about/About.module.scss

@@ -4,4 +4,8 @@
  justify: {
  content: center;
  }
+
+ align: {
+ items: center;
+ }
 }

src/app/setting/about/page.tsx

@@ -5,6 +5,7 @@ import {
 import {
  Box,
  Grid,
+ Stack,
  SvgIconTypeMap,
  Typography
 } from "@mui/material";
@@ -84,16 +85,18 @@ export default function About() {
  storage: {
  icon: StorageIcon,
  name: get("infos.存储信息"),
- context: <Typography>
- {get("storage.缓存空间已使用容量")}：{cacheUsed.toFixed(5)}MB
- <br />
- {get("storage.缓存空间剩余容量")}：{(cacheAll - cacheUsed).toFixed(5)}MB
- <br />
- <br />
- {get("storage.设置空间已使用容量")}：{getSettingsUsed()}KB
- <br />
- {get("storage.设置空间剩余容量")}：{getSettingsSur()}KB
- </Typography>
+ context: <Stack spacing={2}>
+ <Typography>
+ {get("storage.缓存空间已使用容量")}：{cacheUsed.toFixed(5)}MB
+ <br />
+ {get("storage.缓存空间剩余容量")}：{(cacheAll - cacheUsed).toFixed(5)}MB
+ </Typography>
+ <Typography>
+ {get("storage.设置空间已使用容量")}：{getSettingsUsed()}KB
+ <br />
+ {get("storage.设置空间剩余容量")}：{getSettingsSur()}KB
+ </Typography>
+ </Stack>
  },
  statusInfo: {
  icon: ArticleIcon,
@@ -173,7 +176,9 @@ export default function About() {
  setDialogTitle("");
  setDialogOpen(false);
  }}>
- {dialogContext}
+ <Box component="section">
+ {dialogContext}
+ </Box>
  </PureDialog>
  </ErrorBoundary>
  );

src/app/setting/extendeds/page.tsx

@@ -116,14 +116,20 @@ export default function ExtendedManager() {
  <Typography>
  {single.name}
  </Typography>
- <Typography>
- <strong>{get("ID")}</strong> {single.to}
- </Typography>
+ <Box display="flex" alignItems="center" justifyContent="space-between">
+ <Typography variant="h6" fontWeight="700"> {/* <strong>的fontWeight是700 */}
+ {get("ID")}
+ </Typography>
+ <Typography>
+ {single.to}
+ </Typography>
+ </Box>
  </Box>
  </Stack>
  <Box>
- <strong>{get('描述')}</strong>
- <br />
+ <Typography variant="h6" fontWeight="700">
+ {get('描述')}
+ </Typography>
  {single.desc}
  </Box>
  </Stack>

src/app/tools/countletter/page.tsx

@@ -27,7 +27,7 @@ function CountLetter(): JSX.Element {
  [numberType, setNumberType] = useState<numberType>(10);
  return (
  <>
- <Box>
+ <Box mb={2} component="section">
  <Button onClick={() => {
  logger.log("已弹出输入框。");
  setEnterDialogOpen(true);
@@ -45,8 +45,7 @@ function CountLetter(): JSX.Element {
  setAlertDialogOpen(false);
  }} /> {/* 输出对话框容器 */}
  </Box>
- <br />
- <FormControl>
+ <FormControl component="section">
  <FormLabel id="radio-buttons-group-label">数字进制</FormLabel>
  <RadioGroup
  aria-labelledby="radio-buttons-group-label"

src/app/tools/filter/page.tsx

@@ -32,7 +32,8 @@ import {
  FormGroup,
  ImageList,
  ImageListItem,
- Box
+ Box,
+ ImageListItemBar
 } from "@mui/material";
 import {
  styled
@@ -75,7 +76,6 @@ export default function Filter(): JSX.Element {
  registerPlugin(FilePondPluginFileRename, FilePondPluginImagePreview, FilePondPluginImageResize, FilePondPluginImageEdit, FilePondPluginImageCrop); // Register the plugin
  return (
  <>
- <br />
  <FilePond
  files={imageArray as unknown as FilePondServerConfigProps["files"]}
  onupdatefiles={images => {
@@ -174,7 +174,7 @@ export default function Filter(): JSX.Element {
  </Typography>
  </Box> : <ImageList>
  {imageTypes.map((type) => (
- <ImageListItem key={type}>
+ <ImageListItem key={type} component="figure">
  <img title={type} key={type} className={`${style[type]} ${style["image"]}`} src={imageBase64} id={type} alt={type} style={{
  transform: `scale(${(Number(scale) / 100).toString()})`
  }} onClick={event => {
@@ -183,6 +183,9 @@ export default function Filter(): JSX.Element {
  saveAs(blob, `${imageFileName}.${type}.png`)
  })
  }} />
+ <Box component="figcaption">
+ <ImageListItemBar title={type} subtitle={imageFileName} />
+ </Box>
  </ImageListItem>
  ))}
  </ImageList>}

src/app/tools/mathgen/page.tsx

@@ -12,7 +12,8 @@ import {
  FormLabel,
  Paper,
  Box,
- ButtonGroup
+ ButtonGroup,
+ List
 } from "@mui/material";
 import {
  useEffect,
@@ -49,95 +50,90 @@ function MathGen(): JSX.Element {
  ]);
  return (
  <>
- <Box sx={{
- p: 1
+ <FormGroup sx={{
+ mb: 2
  }}>
- <FormGroup>
- <TextField label={get('上限')} type="number" InputLabelProps={{
- shrink: true,
- }} onChange={event => {
- setMax(Number(event.currentTarget.value));
- }} defaultValue={max} />
- <br />
- <TextField label={get('下限')} type="number" InputLabelProps={{
- shrink: true,
- }} onChange={event => {
- setMin(Number(event.currentTarget.value));
- }} defaultValue={min} />
- <br />
- <TextField label={get('个数')} type="number" InputLabelProps={{
- shrink: true,
- }} onChange={event => {
- setItemCount(Number(event.currentTarget.value));
- }} defaultValue={itemCount} />
- <FormControlLabel label={get('mathgen.减数检查')} control={
- <Checkbox checked={subtractionCheck} onChange={event => {
- setSubtractionCheck(event.currentTarget.checked);
- }} />
- } />
- <FormControlLabel label={get('mathgen.除数检查')} control={
- <Checkbox checked={divisionCheck} onChange={event => {
- setDivisionCheck(event.currentTarget.checked);
- }} />
- } />
- <Paper sx={{
- "> *": {
- p: 1
- }
- }}>
- <FormGroup>
- <FormLabel component="legend">{get('mathgen.选择计算方法')}</FormLabel>
- <FormControlLabel label={get('全选')} control={
- <Checkbox checked={calcs == defaultCalcs} onChange={event => {
- switch (event.target.checked) {
- case false:
- setCalcs([]);
- break;
- case true:
- setCalcs(defaultCalcs);
- break;
- }
- }} />
- } />
- {defaultCalcs.map(calc => <FormControlLabel label={calc == "%" ? "%（求余）" : calc} key={calc} control={
- <Checkbox checked={calcs.includes(calc)} onChange={event => {
- switch (event.currentTarget.checked) {
- case false:
- setCalcs(destroyer(calcs, calc));
- break;
- case true:
- setCalcs([...calcs, calc]);
- break;
- }
- }} />
- } />)}
- </FormGroup>
- </Paper>
- <br />
- <ButtonGroup fullWidth>
- <Button variant="contained" onClick={packagedCalcMath}>
- {get('计算')}
- </Button>
- <Button variant="outlined" onClick={event => {
- showOut ? setShowOut(false) : setShowOut(true);
- }}>
- {showOut ? "隐藏" : "显示"}{get('答案')}
- </Button>
- </ButtonGroup>
- <br />
- </FormGroup>
- {maths.toString() === "" ? <Box sx={{
- color: theme => theme.palette.text.disabled,
- textAlign: "center"
- }}>
- <SyncProblemIcon sx={{
- fontSize: "500%"
+ <TextField margin="normal" label={get('上限')} type="number" InputLabelProps={{
+ shrink: true,
+ }} onChange={event => {
+ setMax(Number(event.currentTarget.value));
+ }} defaultValue={max} />
+ <TextField margin="normal" label={get('下限')} type="number" InputLabelProps={{
+ shrink: true,
+ }} onChange={event => {
+ setMin(Number(event.currentTarget.value));
+ }} defaultValue={min} />
+ <TextField margin="normal" label={get('个数')} type="number" InputLabelProps={{
+ shrink: true,
+ }} onChange={event => {
+ setItemCount(Number(event.currentTarget.value));
+ }} defaultValue={itemCount} />
+ <FormControlLabel label={get('mathgen.减数检查')} control={
+ <Checkbox checked={subtractionCheck} onChange={event => {
+ setSubtractionCheck(event.currentTarget.checked);
+ }} />
+ } />
+ <FormControlLabel label={get('mathgen.除数检查')} control={
+ <Checkbox checked={divisionCheck} onChange={event => {
+ setDivisionCheck(event.currentTarget.checked);
  }} />
- <Typography>
- {get("mathgen.没有任何已生成的算式")}
- </Typography>
- </Box> : maths.map(math => <SingleMath math={math} showOut={showOut} key={math} />)}
- </Box>
+ } />
+ <Paper sx={{
+ mb: 2,
+ "> *": {
+ p: 1
+ }
+ }}>
+ <FormGroup>
+ <FormLabel component="legend">{get('mathgen.选择计算方法')}</FormLabel>
+ <FormControlLabel label={get('全选')} control={
+ <Checkbox checked={calcs == defaultCalcs} onChange={event => {
+ switch (event.target.checked) {
+ case false:
+ setCalcs([]);
+ break;
+ case true:
+ setCalcs(defaultCalcs);
+ break;
+ }
+ }} />
+ } />
+ {defaultCalcs.map(calc => <FormControlLabel label={calc == "%" ? "%（求余）" : calc} key={calc} control={
+ <Checkbox checked={calcs.includes(calc)} onChange={event => {
+ switch (event.currentTarget.checked) {
+ case false:
+ setCalcs(destroyer(calcs, calc));
+ break;
+ case true:
+ setCalcs([...calcs, calc]);
+ break;
+ }
+ }} />
+ } />)}
+ </FormGroup>
+ </Paper>
+ <ButtonGroup fullWidth>
+ <Button variant="contained" onClick={packagedCalcMath}>
+ {get('计算')}
+ </Button>
+ <Button variant="outlined" onClick={event => {
+ showOut ? setShowOut(false) : setShowOut(true);
+ }}>
+ {showOut ? "隐藏" : "显示"}{get('答案')}
+ </Button>
+ </ButtonGroup>
+ </FormGroup>
+ {maths.toString() === "" ? <Box sx={{
+ color: theme => theme.palette.text.disabled,
+ textAlign: "center"
+ }}>
+ <SyncProblemIcon sx={{
+ fontSize: "500%"
+ }} />
+ <Typography>
+ {get("mathgen.没有任何已生成的算式")}
+ </Typography>
+ </Box> : <List>{maths.map(math => <SingleMath math={math} showOut={showOut} key={math} />)}</List>}
  </>
  );
 }

src/app/tools/mathgen/singleMath.tsx

@@ -8,7 +8,8 @@ import {
 import {
  Typography,
  TextField,
- Box
+ Box,
+ ListItem
 } from "@mui/material";
 import style from "./SingleMath.module.scss";
 export default function SingleMath(props: {
@@ -21,7 +22,7 @@ export default function SingleMath(props: {
  showOut
  } = props;
  return (
- <Box className={style["single"]}>
+ <ListItem className={style["single"]}>
  <Typography>{math.replace(/=.*/g, "")}</Typography>
  <Box className={style["out"]}>
  <TextField label={get('结果')} type="number" InputLabelProps={{
@@ -31,6 +32,6 @@ export default function SingleMath(props: {
  }} />
  {showOut == true ? <Typography>{get('答案：')}{math.replace(/.*=/g, "")}</Typography> : <Fragment />}
  </Box>
- </Box>
+ </ListItem>
  );
 }