shkong/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev synced 2025-05-05 04:43:44 +08:00
Code Packages Projects Releases Activity

feat: Add animation for provider update

Browse Source
This commit is contained in:
MystiPanda 2024-03-02 13:52:48 +08:00
parent 17b9dbe9d7
commit 772cbd6ffd
3 changed files with 85 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/proxy/provider-button.tsx
View File

@ -13,14 +13,19 @@ import {
Typography, Typography,
Divider, Divider,
LinearProgress, LinearProgress,
keyframes,
} from "@mui/material"; } from "@mui/material";
import { RefreshRounded } from "@mui/icons-material"; import { RefreshRounded } from "@mui/icons-material";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useLockFn } from "ahooks";
import { getProxyProviders, proxyProviderUpdate } from "@/services/api"; import { getProxyProviders, proxyProviderUpdate } from "@/services/api";
import { BaseDialog } from "../base"; import { BaseDialog } from "../base";
import parseTraffic from "@/utils/parse-traffic"; import parseTraffic from "@/utils/parse-traffic";
const round = keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`;
export const ProviderButton = () => { export const ProviderButton = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { data } = useSWR("getProxyProviders", getProxyProviders); const { data } = useSWR("getProxyProviders", getProxyProviders);
@ -28,12 +33,31 @@ export const ProviderButton = () => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const hasProvider = Object.keys(data || {}).length > 0; const hasProvider = Object.keys(data || {}).length > 0;
const [updating, setUpdating] = useState(
Object.keys(data || {}).map(() => false)
);
const handleUpdate = useLockFn(async (key: string) => { const setUpdatingAt = (status: boolean, index: number) => {
await proxyProviderUpdate(key); setUpdating((prev) => {
await mutate("getProxies"); const next = [...prev];
await mutate("getProxyProviders"); next[index] = status;
}); return next;
});
};
const handleUpdate = async (key: string, index: number) => {
setUpdatingAt(true, index);
proxyProviderUpdate(key)
.then(async () => {
setUpdatingAt(false, index);
await mutate("getProxies");
await mutate("getProxyProviders");
})
.catch(async () => {
setUpdatingAt(false, index);
await mutate("getProxies");
await mutate("getProxyProviders");
});
};
if (!hasProvider) return null; if (!hasProvider) return null;
@ -57,11 +81,11 @@ export const ProviderButton = () => {
variant="contained" variant="contained"
size="small" size="small"
onClick={async () => { onClick={async () => {
Object.entries(data || {}).forEach(async ([key, item]) => { Object.entries(data || {}).forEach(
await proxyProviderUpdate(key); async ([key, item], index) => {
await mutate("getProxies"); await handleUpdate(key, index);
await mutate("getProxyProviders"); }
}); );
}} }}
> >
{t("Update All")} {t("Update All")}
@ -75,7 +99,7 @@ export const ProviderButton = () => {
onCancel={() => setOpen(false)} onCancel={() => setOpen(false)}
> >
<List sx={{ py: 0, minHeight: 250 }}> <List sx={{ py: 0, minHeight: 250 }}>
{Object.entries(data || {}).map(([key, item]) => { {Object.entries(data || {}).map(([key, item], index) => {
const time = dayjs(item.updatedAt); const time = dayjs(item.updatedAt);
const sub = item.subscriptionInfo; const sub = item.subscriptionInfo;
const hasSubInfo = !!sub; const hasSubInfo = !!sub;
@ -149,7 +173,12 @@ export const ProviderButton = () => {
size="small" size="small"
color="inherit" color="inherit"
title="Update Provider" title="Update Provider"
onClick={() => handleUpdate(key)} onClick={() => handleUpdate(key, index)}
sx={{
animation: updating[index]
? `1s linear infinite ${round}`
: "none",
}}
> >
<RefreshRounded /> <RefreshRounded />
</IconButton> </IconButton>

55
src/components/rule/provider-button.tsx
View File

@ -12,13 +12,18 @@ import {
Box, Box,
alpha, alpha,
Divider, Divider,
keyframes,
} from "@mui/material"; } from "@mui/material";
import { RefreshRounded } from "@mui/icons-material"; import { RefreshRounded } from "@mui/icons-material";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useLockFn } from "ahooks";
import { getRuleProviders, ruleProviderUpdate } from "@/services/api"; import { getRuleProviders, ruleProviderUpdate } from "@/services/api";
import { BaseDialog } from "../base"; import { BaseDialog } from "../base";
const round = keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`;
export const ProviderButton = () => { export const ProviderButton = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { data } = useSWR("getRuleProviders", getRuleProviders); const { data } = useSWR("getRuleProviders", getRuleProviders);
@ -26,12 +31,31 @@ export const ProviderButton = () => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const hasProvider = Object.keys(data || {}).length > 0; const hasProvider = Object.keys(data || {}).length > 0;
const [updating, setUpdating] = useState(
Object.keys(data || {}).map(() => false)
);
const handleUpdate = useLockFn(async (key: string) => { const setUpdatingAt = (status: boolean, index: number) => {
await ruleProviderUpdate(key); setUpdating((prev) => {
await mutate("getRules"); const next = [...prev];
await mutate("getRuleProviders"); next[index] = status;
}); return next;
});
};
const handleUpdate = async (key: string, index: number) => {
setUpdatingAt(true, index);
ruleProviderUpdate(key)
.then(async () => {
setUpdatingAt(false, index);
await mutate("getRules");
await mutate("getRuleProviders");
})
.catch(async () => {
setUpdatingAt(false, index);
await mutate("getRules");
await mutate("getRuleProviders");
});
};
if (!hasProvider) return null; if (!hasProvider) return null;
@ -55,11 +79,11 @@ export const ProviderButton = () => {
variant="contained" variant="contained"
size="small" size="small"
onClick={async () => { onClick={async () => {
Object.entries(data || {}).forEach(async ([key, item]) => { Object.entries(data || {}).forEach(
await ruleProviderUpdate(key); async ([key, item], index) => {
await mutate("getRules"); await handleUpdate(key, index);
await mutate("getRuleProviders"); }
}); );
}} }}
> >
{t("Update All")} {t("Update All")}
@ -73,7 +97,7 @@ export const ProviderButton = () => {
onCancel={() => setOpen(false)} onCancel={() => setOpen(false)}
> >
<List sx={{ py: 0, minHeight: 250 }}> <List sx={{ py: 0, minHeight: 250 }}>
{Object.entries(data || {}).map(([key, item]) => { {Object.entries(data || {}).map(([key, item], index) => {
const time = dayjs(item.updatedAt); const time = dayjs(item.updatedAt);
return ( return (
<> <>
@ -122,7 +146,12 @@ export const ProviderButton = () => {
size="small" size="small"
color="inherit" color="inherit"
title="Update Provider" title="Update Provider"
onClick={() => handleUpdate(key)} onClick={() => handleUpdate(key, index)}
sx={{
animation: updating[index]
? `1s linear infinite ${round}`
: "none",
}}
> >
<RefreshRounded /> <RefreshRounded />
</IconButton> </IconButton>

2
src/components/setting/mods/controller-viewer.tsx
View File

@ -36,7 +36,7 @@ export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
return ( return (
<BaseDialog <BaseDialog
open={open} open={open}
title={t("Clash Port")} title={t("External Controller")}
contentSx={{ width: 400 }} contentSx={{ width: 400 }}
okBtn={t("Save")} okBtn={t("Save")}
cancelBtn={t("Cancel")} cancelBtn={t("Cancel")}