purgatory/clash-verge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adjust profiles page ui

Browse Source
This commit is contained in:
GyDi 2022-11-20 22:37:34 +08:00
parent 8bb4803ff9
commit 7338838b0e
No known key found for this signature in database
GPG Key ID: 9C3AD40F1F99880A
10 changed files with 120 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/profile/file-editor.tsx → src/components/profile/editor-viewer.tsx
View File

@ -26,7 +26,7 @@ interface Props {
onChange?: () => void;
}
export const FileEditor = (props: Props) => {
export const EditorViewer = (props: Props) => {
const { uid, open, mode, onClose, onChange } = props;
const { t } = useTranslation();

76
src/components/profile/enhanced.tsx
View File

@ -1,44 +1,29 @@
import useSWR from "swr";
import { useLockFn } from "ahooks";
import { useTranslation } from "react-i18next";
import { Box, Grid, IconButton, Stack } from "@mui/material";
import { RestartAltRounded } from "@mui/icons-material";
import { Grid } from "@mui/material";
import {
getProfiles,
deleteProfile,
enhanceProfiles,
patchProfilesConfig,
getRuntimeLogs,
} from "@/services/cmds";
import { Notice } from "@/components/base";
import ProfileMore from "./profile-more";
import { ProfileMore } from "./profile-more";
interface Props {
items: IProfileItem[];
chain: string[];
}
const EnhancedMode = (props: Props) => {
export const EnhancedMode = (props: Props) => {
const { items, chain } = props;
const { t } = useTranslation();
const { mutate: mutateProfiles } = useSWR("getProfiles", getProfiles);
const { data: chainLogs = {}, mutate: mutateLogs } = useSWR(
"getRuntimeLogs",
getRuntimeLogs
);
// handler
const onEnhance = useLockFn(async () => {
try {
await enhanceProfiles();
mutateLogs();
// Notice.success("Refresh clash config", 1000);
} catch (err: any) {
Notice.error(err.message || err.toString());
}
});
const onEnhanceEnable = useLockFn(async (uid: string) => {
if (chain.includes(uid)) return;
@ -87,43 +72,22 @@ const EnhancedMode = (props: Props) => {
});
return (
<Box sx={{ mt: 2 }}>
<Stack
spacing={1}
direction="row"
alignItems="center"
justifyContent="flex-end"
sx={{ mb: 0.5 }}
>
<IconButton
size="small"
color="inherit"
title={t("Refresh profiles")}
onClick={onEnhance}
>
<RestartAltRounded />
</IconButton>
</Stack>
<Grid container spacing={2}>
{items.map((item) => (
<Grid item xs={12} sm={6} key={item.file}>
<ProfileMore
selected={!!chain.includes(item.uid)}
itemData={item}
enableNum={chain.length}
logInfo={chainLogs[item.uid]}
onEnable={() => onEnhanceEnable(item.uid)}
onDisable={() => onEnhanceDisable(item.uid)}
onDelete={() => onEnhanceDelete(item.uid)}
onMoveTop={() => onMoveTop(item.uid)}
onMoveEnd={() => onMoveEnd(item.uid)}
/>
</Grid>
))}
</Grid>
</Box>
<Grid container spacing={{ xs: 2, lg: 3 }}>
{items.map((item) => (
<Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
<ProfileMore
selected={!!chain.includes(item.uid)}
itemData={item}
enableNum={chain.length}
logInfo={chainLogs[item.uid]}
onEnable={() => onEnhanceEnable(item.uid)}
onDisable={() => onEnhanceDisable(item.uid)}
onDelete={() => onEnhanceDelete(item.uid)}
onMoveTop={() => onMoveTop(item.uid)}
onMoveEnd={() => onMoveEnd(item.uid)}
/>
</Grid>
))}
</Grid>
);
};
export default EnhancedMode;

4
src/components/profile/file-input.tsx
View File

@ -7,7 +7,7 @@ interface Props {
onChange: (value: string) => void;
}
const FileInput = (props: Props) => {
export const FileInput = (props: Props) => {
const { onChange } = props;
const { t } = useTranslation();
@ -59,5 +59,3 @@ const FileInput = (props: Props) => {
</Box>
);
};
export default FileInput;

4
src/components/profile/info-editor.tsx → src/components/profile/info-viewer.tsx
View File

@ -27,7 +27,7 @@ interface Props {
// edit the profile item
// remote / local file / merge / script
const InfoEditor = (props: Props) => {
export const InfoViewer = (props: Props) => {
const { open, itemData, onClose } = props;
const { t } = useTranslation();
@ -209,5 +209,3 @@ const InfoEditor = (props: Props) => {
</Dialog>
);
};
export default InfoEditor;

4
src/components/profile/log-viewer.tsx
View File

@ -18,7 +18,7 @@ interface Props {
onClose: () => void;
}
const LogViewer = (props: Props) => {
export const LogViewer = (props: Props) => {
const { open, logInfo, onClose } = props;
const { t } = useTranslation();
@ -67,5 +67,3 @@ const LogViewer = (props: Props) => {
</Dialog>
);
};
export default LogViewer;

74
src/components/profile/profile-box.tsx
View File

@ -1,43 +1,43 @@
import { alpha, Box, styled } from "@mui/material";
const ProfileBox = styled(Box)(({ theme, "aria-selected": selected }) => {
const { mode, primary, text, grey, background } = theme.palette;
const key = `${mode}-${!!selected}`;
export const ProfileBox = styled(Box)(
({ theme, "aria-selected": selected }) => {
const { mode, primary, text, grey, background } = theme.palette;
const key = `${mode}-${!!selected}`;
const backgroundColor = {
"light-true": alpha(primary.main, 0.2),
"light-false": alpha(background.paper, 0.75),
"dark-true": alpha(primary.main, 0.45),
"dark-false": alpha(grey[700], 0.45),
}[key]!;
const backgroundColor = {
"light-true": alpha(primary.main, 0.2),
"light-false": alpha(background.paper, 0.75),
"dark-true": alpha(primary.main, 0.45),
"dark-false": alpha(grey[700], 0.45),
}[key]!;
const color = {
"light-true": text.secondary,
"light-false": text.secondary,
"dark-true": alpha(text.secondary, 0.85),
"dark-false": alpha(text.secondary, 0.65),
}[key]!;
const color = {
"light-true": text.secondary,
"light-false": text.secondary,
"dark-true": alpha(text.secondary, 0.85),
"dark-false": alpha(text.secondary, 0.65),
}[key]!;
const h2color = {
"light-true": primary.main,
"light-false": text.primary,
"dark-true": primary.light,
"dark-false": text.primary,
}[key]!;
const h2color = {
"light-true": primary.main,
"light-false": text.primary,
"dark-true": primary.light,
"dark-false": text.primary,
}[key]!;
return {
width: "100%",
display: "block",
cursor: "pointer",
textAlign: "left",
borderRadius: theme.shape.borderRadius,
boxShadow: theme.shadows[2],
padding: "8px 16px",
boxSizing: "border-box",
backgroundColor,
color,
"& h2": { color: h2color },
};
});
export default ProfileBox;
return {
width: "100%",
display: "block",
cursor: "pointer",
textAlign: "left",
borderRadius: theme.shape.borderRadius,
boxShadow: theme.shadows[2],
padding: "8px 16px",
boxSizing: "border-box",
backgroundColor,
color,
"& h2": { color: h2color },
};
}
);

14
src/components/profile/profile-item.tsx
View File

@ -17,10 +17,10 @@ import { RefreshRounded } from "@mui/icons-material";
import { atomLoadingCache } from "@/services/states";
import { updateProfile, deleteProfile, viewProfile } from "@/services/cmds";
import { Notice } from "@/components/base";
import { InfoViewer } from "./info-viewer";
import { EditorViewer } from "./editor-viewer";
import { ProfileBox } from "./profile-box";
import parseTraffic from "@/utils/parse-traffic";
import ProfileBox from "./profile-box";
import InfoEditor from "./info-editor";
import { FileEditor } from "./file-editor";
const round = keyframes`
from { transform: rotate(0deg); }
@ -33,7 +33,7 @@ interface Props {
onSelect: (force: boolean) => void;
}
const ProfileItem = (props: Props) => {
export const ProfileItem = (props: Props) => {
const { selected, itemData, onSelect } = props;
const { t } = useTranslation();
@ -298,13 +298,13 @@ const ProfileItem = (props: Props) => {
))}
</Menu>
<InfoEditor
<InfoViewer
open={editOpen}
itemData={itemData}
onClose={() => setEditOpen(false)}
/>
<FileEditor
<EditorViewer
uid={uid}
open={fileOpen}
mode="yaml"
@ -325,5 +325,3 @@ function parseExpire(expire?: number) {
if (!expire) return "-";
return dayjs(expire * 1000).format("YYYY-MM-DD");
}
export default ProfileItem;

16
src/components/profile/profile-more.tsx
View File

@ -14,10 +14,10 @@ import {
import { FeaturedPlayListRounded } from "@mui/icons-material";
import { viewProfile } from "@/services/cmds";
import { Notice } from "@/components/base";
import InfoEditor from "./info-editor";
import { FileEditor } from "./file-editor";
import ProfileBox from "./profile-box";
import LogViewer from "./log-viewer";
import { InfoViewer } from "./info-viewer";
import { EditorViewer } from "./editor-viewer";
import { ProfileBox } from "./profile-box";
import { LogViewer } from "./log-viewer";
interface Props {
selected: boolean;
@ -32,7 +32,7 @@ interface Props {
}
// profile enhanced item
const ProfileMore = (props: Props) => {
export const ProfileMore = (props: Props) => {
const {
selected,
itemData,
@ -219,13 +219,13 @@ const ProfileMore = (props: Props) => {
))}
</Menu>
<InfoEditor
<InfoViewer
open={editOpen}
itemData={itemData}
onClose={() => setEditOpen(false)}
/>
<FileEditor
<EditorViewer
uid={uid}
open={fileOpen}
mode={type === "merge" ? "yaml" : "javascript"}
@ -247,5 +247,3 @@ function parseExpire(expire?: number) {
if (!expire) return "-";
return dayjs(expire * 1000).format("YYYY-MM-DD");
}
export default ProfileMore;

6
src/components/profile/profile-new.tsx
View File

@ -21,7 +21,7 @@ import {
import { Settings } from "@mui/icons-material";
import { createProfile } from "@/services/cmds";
import { Notice } from "@/components/base";
import FileInput from "./file-input";
import { FileInput } from "./file-input";
interface Props {
open: boolean;
@ -30,7 +30,7 @@ interface Props {
// create a new profile
// remote / local file / merge / script
const ProfileNew = (props: Props) => {
export const ProfileNew = (props: Props) => {
const { open, onClose } = props;
const { t } = useTranslation();
@ -210,5 +210,3 @@ const ProfileNew = (props: Props) => {
</Dialog>
);
};
export default ProfileNew;

60
src/pages/profiles.tsx
View File

@ -2,20 +2,22 @@ import useSWR, { mutate } from "swr";
import { useLockFn } from "ahooks";
import { useEffect, useMemo, useState } from "react";
import { useSetRecoilState } from "recoil";
import { Button, Grid, Stack, TextField } from "@mui/material";
import { Box, Button, Grid, IconButton, Stack, TextField } from "@mui/material";
import { CachedRounded } from "@mui/icons-material";
import { useTranslation } from "react-i18next";
import {
getProfiles,
patchProfile,
patchProfilesConfig,
importProfile,
enhanceProfiles,
} from "@/services/cmds";
import { getProxies, updateProxy } from "@/services/api";
import { atomCurrentProfile } from "@/services/states";
import { BasePage, Notice } from "@/components/base";
import ProfileNew from "@/components/profile/profile-new";
import ProfileItem from "@/components/profile/profile-item";
import EnhancedMode from "@/components/profile/enhanced";
import { ProfileNew } from "@/components/profile/profile-new";
import { ProfileItem } from "@/components/profile/profile-item";
import { EnhancedMode } from "@/components/profile/enhanced";
const ProfilePage = () => {
const { t } = useTranslation();
@ -138,8 +140,32 @@ const ProfilePage = () => {
}
});
const onEnhance = useLockFn(async () => {
try {
await enhanceProfiles();
mutate("getRuntimeLogs");
// Notice.success("Refresh clash config", 1000);
} catch (err: any) {
Notice.error(err.message || err.toString(), 3000);
}
});
return (
<BasePage title={t("Profiles")}>
<BasePage
title={t("Profiles")}
header={
<Box sx={{ mt: 1, display: "flex", alignItems: "center" }}>
<IconButton
size="small"
color="inherit"
title={t("Refresh profiles")}
onClick={onEnhance}
>
<CachedRounded />
</IconButton>
</Box>
}
>
<Stack direction="row" spacing={1} sx={{ mb: 2 }}>
<TextField
hiddenLabel
@ -170,17 +196,19 @@ const ProfilePage = () => {
</Button>
</Stack>
<Grid container spacing={2}>
{regularItems.map((item) => (
<Grid item xs={12} sm={6} key={item.file}>
<ProfileItem
selected={profiles.current === item.uid}
itemData={item}
onSelect={(f) => onSelect(item.uid, f)}
/>
</Grid>
))}
</Grid>
<Box sx={{ mb: 4.5 }}>
<Grid container spacing={{ xs: 2, lg: 3 }}>
{regularItems.map((item) => (
<Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
<ProfileItem
selected={profiles.current === item.uid}
itemData={item}
onSelect={(f) => onSelect(item.uid, f)}
/>
</Grid>
))}
</Grid>
</Box>
{enhanceItems.length > 0 && (
<EnhancedMode items={enhanceItems} chain={profiles.chain || []} />