mirror of
https://github.com/clash-verge-rev/clash-verge-rev.git
synced 2024-11-15 19:22:26 +08:00
update profile ui (#594)
This commit is contained in:
parent
462fb05ea8
commit
4256590735
|
@ -243,6 +243,7 @@ export const ProfileItem = (props: Props) => {
|
||||||
|
|
||||||
<Typography
|
<Typography
|
||||||
width="calc(100% - 36px)"
|
width="calc(100% - 36px)"
|
||||||
|
sx={{ fontSize: "18px", fontWeight: "600", lineHeight: "26px" }}
|
||||||
variant="h6"
|
variant="h6"
|
||||||
component="h2"
|
component="h2"
|
||||||
noWrap
|
noWrap
|
||||||
|
@ -279,7 +280,11 @@ export const ProfileItem = (props: Props) => {
|
||||||
{
|
{
|
||||||
<>
|
<>
|
||||||
{description ? (
|
{description ? (
|
||||||
<Typography noWrap title={description}>
|
<Typography
|
||||||
|
noWrap
|
||||||
|
title={description}
|
||||||
|
sx={{ fontSize: "14px" }}
|
||||||
|
>
|
||||||
{description}
|
{description}
|
||||||
</Typography>
|
</Typography>
|
||||||
) : (
|
) : (
|
||||||
|
@ -312,7 +317,7 @@ export const ProfileItem = (props: Props) => {
|
||||||
<span title="Expire Time">{expire}</span>
|
<span title="Expire Time">{expire}</span>
|
||||||
</Box>
|
</Box>
|
||||||
) : (
|
) : (
|
||||||
<Box sx={{ ...boxStyle, fontSize: 14, justifyContent: "flex-end" }}>
|
<Box sx={{ ...boxStyle, fontSize: 12, justifyContent: "flex-end" }}>
|
||||||
<span title="Updated Time">{parseExpire(updated)}</span>
|
<span title="Updated Time">{parseExpire(updated)}</span>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -2,7 +2,15 @@ import useSWR, { mutate } from "swr";
|
||||||
import { useMemo, useRef, useState } from "react";
|
import { useMemo, useRef, useState } from "react";
|
||||||
import { useLockFn } from "ahooks";
|
import { useLockFn } from "ahooks";
|
||||||
import { useSetRecoilState } from "recoil";
|
import { useSetRecoilState } from "recoil";
|
||||||
import { Box, Button, Grid, IconButton, Stack, TextField } from "@mui/material";
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Grid,
|
||||||
|
IconButton,
|
||||||
|
Stack,
|
||||||
|
TextField,
|
||||||
|
Divider,
|
||||||
|
} from "@mui/material";
|
||||||
import {
|
import {
|
||||||
DndContext,
|
DndContext,
|
||||||
closestCenter,
|
closestCenter,
|
||||||
|
@ -46,6 +54,8 @@ import { ProfileMore } from "@/components/profile/profile-more";
|
||||||
import { useProfiles } from "@/hooks/use-profiles";
|
import { useProfiles } from "@/hooks/use-profiles";
|
||||||
import { ConfigViewer } from "@/components/setting/mods/config-viewer";
|
import { ConfigViewer } from "@/components/setting/mods/config-viewer";
|
||||||
import { throttle } from "lodash-es";
|
import { throttle } from "lodash-es";
|
||||||
|
import { useRecoilState } from "recoil";
|
||||||
|
import { atomThemeMode } from "@/services/states";
|
||||||
|
|
||||||
const ProfilePage = () => {
|
const ProfilePage = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
@ -235,6 +245,11 @@ const ProfilePage = () => {
|
||||||
const text = await navigator.clipboard.readText();
|
const text = await navigator.clipboard.readText();
|
||||||
if (text) setUrl(text);
|
if (text) setUrl(text);
|
||||||
};
|
};
|
||||||
|
const [mode] = useRecoilState(atomThemeMode);
|
||||||
|
const islight = mode === "light" ? true : false;
|
||||||
|
const dividercolor = islight
|
||||||
|
? "rgba(0, 0, 0, 0.06)"
|
||||||
|
: "rgba(255, 255, 255, 0.06)";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BasePage
|
<BasePage
|
||||||
|
@ -323,6 +338,7 @@ const ProfilePage = () => {
|
||||||
loading={loading}
|
loading={loading}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
size="small"
|
size="small"
|
||||||
|
sx={{ borderRadius: "6px" }}
|
||||||
onClick={onImport}
|
onClick={onImport}
|
||||||
>
|
>
|
||||||
{t("Import")}
|
{t("Import")}
|
||||||
|
@ -330,6 +346,7 @@ const ProfilePage = () => {
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
size="small"
|
size="small"
|
||||||
|
sx={{ borderRadius: "6px" }}
|
||||||
onClick={() => viewerRef.current?.create()}
|
onClick={() => viewerRef.current?.create()}
|
||||||
>
|
>
|
||||||
{t("New")}
|
{t("New")}
|
||||||
|
@ -350,7 +367,7 @@ const ProfilePage = () => {
|
||||||
collisionDetection={closestCenter}
|
collisionDetection={closestCenter}
|
||||||
onDragEnd={onDragEnd}
|
onDragEnd={onDragEnd}
|
||||||
>
|
>
|
||||||
<Box sx={{ mb: 4.5 }}>
|
<Box sx={{ mb: 1.5 }}>
|
||||||
<Grid container spacing={{ xs: 1, lg: 1 }}>
|
<Grid container spacing={{ xs: 1, lg: 1 }}>
|
||||||
<SortableContext
|
<SortableContext
|
||||||
items={regularItems.map((x) => {
|
items={regularItems.map((x) => {
|
||||||
|
@ -375,24 +392,34 @@ const ProfilePage = () => {
|
||||||
</DndContext>
|
</DndContext>
|
||||||
|
|
||||||
{enhanceItems.length > 0 && (
|
{enhanceItems.length > 0 && (
|
||||||
<Grid container spacing={{ xs: 2, lg: 2 }}>
|
<Divider
|
||||||
{enhanceItems.map((item) => (
|
variant="middle"
|
||||||
<Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
|
flexItem
|
||||||
<ProfileMore
|
sx={{ width: `calc(100% - 32px)`, borderColor: dividercolor }}
|
||||||
selected={!!chain.includes(item.uid)}
|
></Divider>
|
||||||
itemData={item}
|
)}
|
||||||
enableNum={chain.length || 0}
|
|
||||||
logInfo={chainLogs[item.uid]}
|
{enhanceItems.length > 0 && (
|
||||||
onEnable={() => onEnable(item.uid)}
|
<Box sx={{ mt: 1.5 }}>
|
||||||
onDisable={() => onDisable(item.uid)}
|
<Grid container spacing={{ xs: 1, lg: 1 }}>
|
||||||
onDelete={() => onDelete(item.uid)}
|
{enhanceItems.map((item) => (
|
||||||
onMoveTop={() => onMoveTop(item.uid)}
|
<Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
|
||||||
onMoveEnd={() => onMoveEnd(item.uid)}
|
<ProfileMore
|
||||||
onEdit={() => viewerRef.current?.edit(item)}
|
selected={!!chain.includes(item.uid)}
|
||||||
/>
|
itemData={item}
|
||||||
</Grid>
|
enableNum={chain.length || 0}
|
||||||
))}
|
logInfo={chainLogs[item.uid]}
|
||||||
</Grid>
|
onEnable={() => onEnable(item.uid)}
|
||||||
|
onDisable={() => onDisable(item.uid)}
|
||||||
|
onDelete={() => onDelete(item.uid)}
|
||||||
|
onMoveTop={() => onMoveTop(item.uid)}
|
||||||
|
onMoveEnd={() => onMoveEnd(item.uid)}
|
||||||
|
onEdit={() => viewerRef.current?.edit(item)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
<ProfileViewer ref={viewerRef} onChange={() => mutateProfiles()} />
|
<ProfileViewer ref={viewerRef} onChange={() => mutateProfiles()} />
|
||||||
|
|
Loading…
Reference in New Issue
Block a user