refactor: update profile menu

This commit is contained in:
GyDi 2022-04-06 01:13:06 +08:00
parent ae8c30fe57
commit cb8e162f4e
No known key found for this signature in database
GPG Key ID: 1C95E0D3467B3084
2 changed files with 38 additions and 8 deletions

View File

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

View File

@ -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) },
]; ];