feat: adjust profiles page ui

src/components/profile/editor-viewer.tsx

@@ -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();

src/components/profile/enhanced.tsx

@@ -1,44 +1,29 @@
 import useSWR from "swr";
 import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
+import { Grid } from "@mui/material";
-import { Box, Grid, IconButton, Stack } from "@mui/material";
-import { RestartAltRounded } from "@mui/icons-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,27 +72,9 @@ const EnhancedMode = (props: Props) => {
   });
 
   return (
-    <Box sx={{ mt: 2 }}>
+    <Grid container spacing={{ xs: 2, lg: 3 }}>
-      <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}>
+        <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
           <ProfileMore
             selected={!!chain.includes(item.uid)}
             itemData={item}
@@ -122,8 +89,5 @@ const EnhancedMode = (props: Props) => {
         </Grid>
       ))}
     </Grid>
-    </Box>
   );
 };
-
-export default EnhancedMode;

src/components/profile/file-input.tsx

@@ -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;

src/components/profile/info-viewer.tsx

@@ -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;

src/components/profile/log-viewer.tsx

@@ -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;

src/components/profile/profile-box.tsx

@@ -1,6 +1,7 @@
 import { alpha, Box, styled } from "@mui/material";
 
-const ProfileBox = styled(Box)(({ theme, "aria-selected": selected }) => {
+export const ProfileBox = styled(Box)(
+  ({ theme, "aria-selected": selected }) => {
     const { mode, primary, text, grey, background } = theme.palette;
     const key = `${mode}-${!!selected}`;
 
@@ -38,6 +39,5 @@ const ProfileBox = styled(Box)(({ theme, "aria-selected": selected }) => {
       color,
       "& h2": { color: h2color },
     };
-});
+  }
-
+);
-export default ProfileBox;

src/components/profile/profile-item.tsx

@@ -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;

src/components/profile/profile-more.tsx

@@ -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 { InfoViewer } from "./info-viewer";
-import { FileEditor } from "./file-editor";
+import { EditorViewer } from "./editor-viewer";
-import ProfileBox from "./profile-box";
+import { ProfileBox } from "./profile-box";
-import LogViewer from "./log-viewer";
+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;

src/components/profile/profile-new.tsx

@@ -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;

src/pages/profiles.tsx

@@ -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 { ProfileNew } from "@/components/profile/profile-new";
-import ProfileItem from "@/components/profile/profile-item";
+import { ProfileItem } from "@/components/profile/profile-item";
-import EnhancedMode from "@/components/profile/enhanced";
+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,9 +196,10 @@ const ProfilePage = () => {
         </Button>
       </Stack>
 
-      <Grid container spacing={2}>
+      <Box sx={{ mb: 4.5 }}>
+        <Grid container spacing={{ xs: 2, lg: 3 }}>
           {regularItems.map((item) => (
-          <Grid item xs={12} sm={6} key={item.file}>
+            <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
               <ProfileItem
                 selected={profiles.current === item.uid}
                 itemData={item}
@@ -181,6 +208,7 @@ const ProfilePage = () => {
             </Grid>
           ))}
         </Grid>
+      </Box>
 
       {enhanceItems.length > 0 && (
         <EnhancedMode items={enhanceItems} chain={profiles.chain || []} />