refactor: update profile menu
This commit is contained in:
parent
ae8c30fe57
commit
cb8e162f4e
@ -1,6 +1,7 @@
|
|||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import { useLockFn } from "ahooks";
|
import { useLockFn } from "ahooks";
|
||||||
import { Box, Grid } from "@mui/material";
|
import { Box, Grid, IconButton, Stack } from "@mui/material";
|
||||||
|
import { RestartAltRounded } from "@mui/icons-material";
|
||||||
import {
|
import {
|
||||||
getProfiles,
|
getProfiles,
|
||||||
deleteProfile,
|
deleteProfile,
|
||||||
@ -22,7 +23,14 @@ const EnhancedMode = (props: Props) => {
|
|||||||
const { mutate } = useSWR("getProfiles", getProfiles);
|
const { mutate } = useSWR("getProfiles", getProfiles);
|
||||||
|
|
||||||
// handler
|
// handler
|
||||||
const onEnhance = useLockFn(enhanceProfiles);
|
const onEnhance = useLockFn(async () => {
|
||||||
|
try {
|
||||||
|
await enhanceProfiles();
|
||||||
|
Notice.success("Refresh clash config", 2000);
|
||||||
|
} catch (err: any) {
|
||||||
|
Notice.error(err.message || err.toString());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const onEnhanceEnable = useLockFn(async (uid: string) => {
|
const onEnhanceEnable = useLockFn(async (uid: string) => {
|
||||||
if (chain.includes(uid)) return;
|
if (chain.includes(uid)) return;
|
||||||
@ -68,18 +76,39 @@ const EnhancedMode = (props: Props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Box sx={{ mt: 4 }}>
|
<Box sx={{ mt: 4 }}>
|
||||||
|
<Stack
|
||||||
|
spacing={1}
|
||||||
|
direction="row"
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="flex-end"
|
||||||
|
sx={{ mb: 0.5 }}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
size="small"
|
||||||
|
color="inherit"
|
||||||
|
title="refresh enhanced profiles"
|
||||||
|
onClick={onEnhance}
|
||||||
|
>
|
||||||
|
<RestartAltRounded />
|
||||||
|
</IconButton>
|
||||||
|
|
||||||
|
{/* <IconButton size="small" color="inherit">
|
||||||
|
<MenuRounded />
|
||||||
|
</IconButton> */}
|
||||||
|
</Stack>
|
||||||
|
|
||||||
<Grid container spacing={2}>
|
<Grid container spacing={2}>
|
||||||
{items.map((item) => (
|
{items.map((item) => (
|
||||||
<Grid item xs={12} sm={6} key={item.file}>
|
<Grid item xs={12} sm={6} key={item.file}>
|
||||||
<ProfileMore
|
<ProfileMore
|
||||||
selected={!!chain.includes(item.uid)}
|
selected={!!chain.includes(item.uid)}
|
||||||
itemData={item}
|
itemData={item}
|
||||||
|
enableNum={chain.length}
|
||||||
onEnable={() => onEnhanceEnable(item.uid)}
|
onEnable={() => onEnhanceEnable(item.uid)}
|
||||||
onDisable={() => onEnhanceDisable(item.uid)}
|
onDisable={() => onEnhanceDisable(item.uid)}
|
||||||
onDelete={() => onEnhanceDelete(item.uid)}
|
onDelete={() => onEnhanceDelete(item.uid)}
|
||||||
onMoveTop={() => onMoveTop(item.uid)}
|
onMoveTop={() => onMoveTop(item.uid)}
|
||||||
onMoveEnd={() => onMoveEnd(item.uid)}
|
onMoveEnd={() => onMoveEnd(item.uid)}
|
||||||
onEnhance={onEnhance}
|
|
||||||
/>
|
/>
|
||||||
</Grid>
|
</Grid>
|
||||||
))}
|
))}
|
||||||
|
@ -35,12 +35,12 @@ const OS = getSystem();
|
|||||||
interface Props {
|
interface Props {
|
||||||
selected: boolean;
|
selected: boolean;
|
||||||
itemData: CmdType.ProfileItem;
|
itemData: CmdType.ProfileItem;
|
||||||
|
enableNum: number;
|
||||||
onEnable: () => void;
|
onEnable: () => void;
|
||||||
onDisable: () => void;
|
onDisable: () => void;
|
||||||
onMoveTop: () => void;
|
onMoveTop: () => void;
|
||||||
onMoveEnd: () => void;
|
onMoveEnd: () => void;
|
||||||
onDelete: () => void;
|
onDelete: () => void;
|
||||||
onEnhance: () => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// profile enhanced item
|
// profile enhanced item
|
||||||
@ -48,12 +48,12 @@ const ProfileMore = (props: Props) => {
|
|||||||
const {
|
const {
|
||||||
selected,
|
selected,
|
||||||
itemData,
|
itemData,
|
||||||
|
enableNum,
|
||||||
onEnable,
|
onEnable,
|
||||||
onDisable,
|
onDisable,
|
||||||
onMoveTop,
|
onMoveTop,
|
||||||
onMoveEnd,
|
onMoveEnd,
|
||||||
onDelete,
|
onDelete,
|
||||||
onEnhance,
|
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const { uid, type } = itemData;
|
const { uid, type } = itemData;
|
||||||
@ -95,14 +95,15 @@ const ProfileMore = (props: Props) => {
|
|||||||
return fn();
|
return fn();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const showMove = enableNum > 1 && !hasError;
|
||||||
|
|
||||||
const enableMenu = [
|
const enableMenu = [
|
||||||
{ label: "Disable", handler: fnWrapper(onDisable) },
|
{ label: "Disable", handler: fnWrapper(onDisable) },
|
||||||
{ label: "Refresh", handler: fnWrapper(onEnhance) },
|
|
||||||
{ label: "Edit Info", handler: onEditInfo },
|
{ label: "Edit Info", handler: onEditInfo },
|
||||||
{ label: "Edit File", handler: onEditFile },
|
{ label: "Edit File", handler: onEditFile },
|
||||||
{ label: "Open File", handler: onOpenFile },
|
{ label: "Open File", handler: onOpenFile },
|
||||||
{ label: "To Top", show: !hasError, handler: fnWrapper(onMoveTop) },
|
{ label: "To Top", show: showMove, handler: fnWrapper(onMoveTop) },
|
||||||
{ label: "To End", show: !hasError, handler: fnWrapper(onMoveEnd) },
|
{ label: "To End", show: showMove, handler: fnWrapper(onMoveEnd) },
|
||||||
{ label: "Delete", handler: fnWrapper(onDelete) },
|
{ label: "Delete", handler: fnWrapper(onDelete) },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user