chore: update deps & replace deprecated elements

This commit is contained in:
wonfen
2025-05-05 00:26:04 +08:00
parent eda8fc125f
commit dc798fe2dd
19 changed files with 370 additions and 494 deletions

View File

@@ -118,44 +118,46 @@ export const BaseSearchBox = (props: SearchProps) => {
placeholder={props.placeholder ?? t("Filter conditions")}
sx={{ input: { py: 0.65, px: 1.25 } }}
onChange={onChange}
InputProps={{
sx: { pr: 1 },
endAdornment: (
<Box display="flex">
<Tooltip title={t("Match Case")}>
<div>
<SvgIcon
component={matchCaseIcon}
{...iconStyle}
aria-label={matchCase ? "active" : "inactive"}
onClick={() => setMatchCase(!matchCase)}
/>
</div>
</Tooltip>
<Tooltip title={t("Match Whole Word")}>
<div>
<SvgIcon
component={matchWholeWordIcon}
{...iconStyle}
aria-label={matchWholeWord ? "active" : "inactive"}
onClick={() => setMatchWholeWord(!matchWholeWord)}
/>
</div>
</Tooltip>
<Tooltip title={t("Use Regular Expression")}>
<div>
<SvgIcon
component={useRegularExpressionIcon}
aria-label={useRegularExpression ? "active" : "inactive"}
{...iconStyle}
onClick={() =>
setUseRegularExpression(!useRegularExpression)
}
/>{" "}
</div>
</Tooltip>
</Box>
),
slotProps={{
input: {
sx: { pr: 1 },
endAdornment: (
<Box display="flex">
<Tooltip title={t("Match Case")}>
<div>
<SvgIcon
component={matchCaseIcon}
{...iconStyle}
aria-label={matchCase ? "active" : "inactive"}
onClick={() => setMatchCase(!matchCase)}
/>
</div>
</Tooltip>
<Tooltip title={t("Match Whole Word")}>
<div>
<SvgIcon
component={matchWholeWordIcon}
{...iconStyle}
aria-label={matchWholeWord ? "active" : "inactive"}
onClick={() => setMatchWholeWord(!matchWholeWord)}
/>
</div>
</Tooltip>
<Tooltip title={t("Use Regular Expression")}>
<div>
<SvgIcon
component={useRegularExpressionIcon}
aria-label={useRegularExpression ? "active" : "inactive"}
{...iconStyle}
onClick={() =>
setUseRegularExpression(!useRegularExpression)
}
/>{" "}
</div>
</Tooltip>
</Box>
),
}
}}
/>
</Tooltip>

View File

@@ -6,8 +6,8 @@ import {
alpha,
useTheme,
PaletteColor,
Grid,
} from "@mui/material";
import Grid from "@mui/material/Grid2";
import {
ArrowUpwardRounded,
ArrowDownwardRounded,

View File

@@ -1,7 +1,6 @@
import { useEffect, useRef, useMemo, useCallback } from "react";
import { useVerge } from "@/hooks/use-verge";
import { Box, IconButton, Tooltip, alpha, styled } from "@mui/material";
import Grid from "@mui/material/Grid2";
import { Box, IconButton, Tooltip, alpha, styled, Grid } from "@mui/material";
import {
DndContext,
closestCenter,

View File

@@ -484,12 +484,14 @@ export const GroupsEditorViewer = (props: Props) => {
onChange={(e) => {
field.onChange(parseInt(e.target.value));
}}
InputProps={{
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">
{t("seconds")}
</InputAdornment>
),
}
}}
/>
</Item>
@@ -510,12 +512,14 @@ export const GroupsEditorViewer = (props: Props) => {
onChange={(e) => {
field.onChange(parseInt(e.target.value));
}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{t("millis")}
</InputAdornment>
),
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">
{t("millis")}
</InputAdornment>
),
}
}}
/>
</Item>

View File

@@ -282,10 +282,12 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
type="number"
placeholder="60"
label={t("HTTP Request Timeout")}
InputProps={{
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">{t("seconds")}</InputAdornment>
),
}
}}
/>
)}
@@ -303,10 +305,12 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
{...field}
type="number"
label={t("Update Interval")}
InputProps={{
endAdornment: (
<InputAdornment position="end">{t("mins")}</InputAdornment>
),
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">{t("mins")}</InputAdornment>
),
}
}}
/>
)}

View File

@@ -7,8 +7,7 @@ import { useLockFn } from "ahooks";
import {
TextField,
Button,
Grid2,
Box,
Grid,
Stack,
IconButton,
InputAdornment,
@@ -138,10 +137,10 @@ export const BackupConfigViewer = memo(
return (
<form onSubmit={(e) => e.preventDefault()}>
<Grid2 container spacing={2}>
<Grid2 size={{ xs: 12, sm: 9 }}>
<Grid2 container spacing={2}>
<Grid2 size={{ xs: 12 }}>
<Grid container spacing={2}>
<Grid size={{ xs: 12, sm: 9 }}>
<Grid container spacing={2}>
<Grid size={{ xs: 12 }}>
<TextField
fullWidth
label={t("WebDAV Server URL")}
@@ -153,8 +152,8 @@ export const BackupConfigViewer = memo(
spellCheck="false"
inputRef={urlRef}
/>
</Grid2>
<Grid2 size={{ xs: 6 }}>
</Grid>
<Grid size={{ xs: 6 }}>
<TextField
label={t("Username")}
variant="outlined"
@@ -165,8 +164,8 @@ export const BackupConfigViewer = memo(
spellCheck="false"
inputRef={usernameRef}
/>
</Grid2>
<Grid2 size={{ xs: 6 }}>
</Grid>
<Grid size={{ xs: 6 }}>
<TextField
label={t("Password")}
type={showPassword ? "text" : "password"}
@@ -192,10 +191,10 @@ export const BackupConfigViewer = memo(
},
}}
/>
</Grid2>
</Grid2>
</Grid2>
<Grid2 size={{ xs: 12, sm: 3 }}>
</Grid>
</Grid>
</Grid>
<Grid size={{ xs: 12, sm: 3 }}>
<Stack
direction="column"
justifyContent="space-between"
@@ -237,8 +236,8 @@ export const BackupConfigViewer = memo(
</>
)}
</Stack>
</Grid2>
</Grid2>
</Grid>
</Grid>
</form>
);
},

View File

@@ -186,16 +186,18 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
onChange={(e) =>
setSocksPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
}
InputProps={{
sx: { pr: 1 },
endAdornment: (
<Switch
checked={socksEnabled}
onChange={(_, c) => {
setSocksEnabled(c);
}}
/>
),
slotProps={{
input: {
sx: { pr: 1 },
endAdornment: (
<Switch
checked={socksEnabled}
onChange={(_, c) => {
setSocksEnabled(c);
}}
/>
),
}
}}
/>
</ListItem>
@@ -209,16 +211,18 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
onChange={(e) =>
setPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
}
InputProps={{
sx: { pr: 1 },
endAdornment: (
<Switch
checked={httpEnabled}
onChange={(_, c) => {
setHttpEnabled(c);
}}
/>
),
slotProps={{
input: {
sx: { pr: 1 },
endAdornment: (
<Switch
checked={httpEnabled}
onChange={(_, c) => {
setHttpEnabled(c);
}}
/>
),
}
}}
/>
</ListItem>
@@ -233,16 +237,18 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
onChange={(e) =>
setRedirPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
}
InputProps={{
sx: { pr: 1 },
endAdornment: (
<Switch
checked={redirEnabled}
onChange={(_, c) => {
setRedirEnabled(c);
}}
/>
),
slotProps={{
input: {
sx: { pr: 1 },
endAdornment: (
<Switch
checked={redirEnabled}
onChange={(_, c) => {
setRedirEnabled(c);
}}
/>
),
}
}}
/>
</ListItem>
@@ -258,16 +264,18 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
onChange={(e) =>
setTproxyPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
}
InputProps={{
sx: { pr: 1 },
endAdornment: (
<Switch
checked={tproxyEnabled}
onChange={(_, c) => {
setTproxyEnabled(c);
}}
/>
),
slotProps={{
input: {
sx: { pr: 1 },
endAdornment: (
<Switch
checked={tproxyEnabled}
onChange={(_, c) => {
setTproxyEnabled(c);
}}
/>
),
}
}}
/>
</ListItem>

View File

@@ -240,10 +240,12 @@ export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
defaultLatencyTimeout: parseInt(e.target.value),
}))
}
InputProps={{
endAdornment: (
<InputAdornment position="end">{t("millis")}</InputAdornment>
),
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">{t("millis")}</InputAdornment>
),
}
}}
/>
</ListItem>

View File

@@ -412,8 +412,10 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
size="small"
value={value.duration}
sx={{ width: 100 }}
InputProps={{
endAdornment: <InputAdornment position="end">s</InputAdornment>,
slotProps={{
input: {
endAdornment: <InputAdornment position="end">s</InputAdornment>,
}
}}
onChange={(e) => {
setValue((v) => ({

View File

@@ -13,8 +13,8 @@ import {
FormControlLabel,
Checkbox,
Tooltip,
Grid,
} from "@mui/material";
import Grid from "@mui/material/Grid2";
import { useVerge } from "@/hooks/use-verge";
import { useProfiles } from "@/hooks/use-profiles";
import {

View File

@@ -1,7 +1,7 @@
import useSWR from "swr";
import { useEffect, useMemo, useRef, useState } from "react";
import { useLockFn } from "ahooks";
import { Box, Button, IconButton, Stack, Divider, Grid2 } from "@mui/material";
import { Box, Button, IconButton, Stack, Divider, Grid } from "@mui/material";
import {
DndContext,
closestCenter,
@@ -365,27 +365,29 @@ const ProfilePage = () => {
variant="outlined"
onChange={(e) => setUrl(e.target.value)}
placeholder={t("Profile URL")}
InputProps={{
sx: { pr: 1 },
endAdornment: !url ? (
<IconButton
size="small"
sx={{ p: 0.5 }}
title={t("Paste")}
onClick={onCopyLink}
>
<ContentPasteRounded fontSize="inherit" />
</IconButton>
) : (
<IconButton
size="small"
sx={{ p: 0.5 }}
title={t("Clear")}
onClick={() => setUrl("")}
>
<ClearRounded fontSize="inherit" />
</IconButton>
),
slotProps={{
input: {
sx: { pr: 1 },
endAdornment: !url ? (
<IconButton
size="small"
sx={{ p: 0.5 }}
title={t("Paste")}
onClick={onCopyLink}
>
<ContentPasteRounded fontSize="inherit" />
</IconButton>
) : (
<IconButton
size="small"
sx={{ p: 0.5 }}
title={t("Clear")}
onClick={() => setUrl("")}
>
<ClearRounded fontSize="inherit" />
</IconButton>
),
}
}}
/>
<LoadingButton
@@ -422,14 +424,14 @@ const ProfilePage = () => {
}}
>
<Box sx={{ mb: 1.5 }}>
<Grid2 container spacing={{ xs: 1, lg: 1 }}>
<Grid container spacing={{ xs: 1, lg: 1 }}>
<SortableContext
items={profileItems.map((x) => {
return x.uid;
})}
>
{profileItems.map((item) => (
<Grid2 size={{ xs: 12, sm: 6, md: 4, lg: 3 }} key={item.file}>
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }} key={item.file}>
<ProfileItem
id={item.uid}
selected={profiles.current === item.uid}
@@ -446,10 +448,10 @@ const ProfilePage = () => {
}}
onDelete={() => onDelete(item.uid)}
/>
</Grid2>
</Grid>
))}
</SortableContext>
</Grid2>
</Grid>
</Box>
<Divider
variant="middle"
@@ -457,8 +459,8 @@ const ProfilePage = () => {
sx={{ width: `calc(100% - 32px)`, borderColor: dividercolor }}
></Divider>
<Box sx={{ mt: 1.5, mb: "10px" }}>
<Grid2 container spacing={{ xs: 1, lg: 1 }}>
<Grid2 size={{ xs: 12, sm: 6, md: 6, lg: 6 }}>
<Grid container spacing={{ xs: 1, lg: 1 }}>
<Grid size={{ xs: 12, sm: 6, md: 6, lg: 6 }}>
<ProfileMore
id="Merge"
onSave={async (prev, curr) => {
@@ -467,8 +469,8 @@ const ProfilePage = () => {
}
}}
/>
</Grid2>
<Grid2 size={{ xs: 12, sm: 6, md: 6, lg: 6 }}>
</Grid>
<Grid size={{ xs: 12, sm: 6, md: 6, lg: 6 }}>
<ProfileMore
id="Script"
logInfo={chainLogs["Script"]}
@@ -478,8 +480,8 @@ const ProfilePage = () => {
}
}}
/>
</Grid2>
</Grid2>
</Grid>
</Grid>
</Box>
</Box>
</DndContext>

View File

@@ -1,5 +1,4 @@
import { Box, ButtonGroup, IconButton, Select, MenuItem } from "@mui/material";
import Grid from "@mui/material/Grid2";
import { Box, ButtonGroup, IconButton, Grid } from "@mui/material";
import { useLockFn } from "ahooks";
import { useTranslation } from "react-i18next";
import { BasePage } from "@/components/base";

View File

@@ -1,7 +1,6 @@
import { useEffect, useRef, useState } from "react";
import { useVerge } from "@/hooks/use-verge";
import { Box, Button } from "@mui/material";
import Grid2 from "@mui/material/Grid2";
import { Box, Button, Grid } from "@mui/material";
import {
DndContext,
closestCenter,
@@ -177,14 +176,14 @@ const TestPage = () => {
onDragEnd={onDragEnd}
>
<Box sx={{ mb: 4.5 }}>
<Grid2 container spacing={{ xs: 1, lg: 1 }}>
<Grid container spacing={{ xs: 1, lg: 1 }}>
<SortableContext
items={testList.map((x) => {
return x.uid;
})}
>
{testList.map((item) => (
<Grid2
<Grid
component={"div"}
size={{ xs: 6, lg: 2, sm: 4, md: 3 }}
key={item.uid}
@@ -195,10 +194,10 @@ const TestPage = () => {
onEdit={() => viewerRef.current?.edit(item)}
onDelete={onDeleteTestListItem}
/>
</Grid2>
</Grid>
))}
</SortableContext>
</Grid2>
</Grid>
</Box>
</DndContext>

View File

@@ -10,8 +10,8 @@ import {
CircularProgress,
alpha,
useTheme,
Grid,
} from "@mui/material";
import Grid from "@mui/material/Grid2";
import { useTranslation } from "react-i18next";
import { invoke } from "@tauri-apps/api/core";
import { BasePage, BaseEmpty } from "@/components/base";