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

chore: unified style

Browse Source
This commit is contained in:
MystiPanda 2024-07-04 18:50:21 +08:00
parent 70f8c28ca6
commit 890bfbe02d
2 changed files with 78 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/profile/group-item.tsx
View File

@ -9,7 +9,6 @@ import {
import { DeleteForeverRounded, UndoRounded } from "@mui/icons-material"; import { DeleteForeverRounded, UndoRounded } from "@mui/icons-material";
import { useSortable } from "@dnd-kit/sortable"; import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities"; import { CSS } from "@dnd-kit/utilities";
import { useThemeMode } from "@/services/states";
interface Props { interface Props {
type: "prepend" | "original" | "delete" | "append"; type: "prepend" | "original" | "delete" | "append";
group: IProxyGroupConfig; group: IProxyGroupConfig;
@ -18,8 +17,6 @@ interface Props {
export const GroupItem = (props: Props) => { export const GroupItem = (props: Props) => {
let { type, group, onDelete } = props; let { type, group, onDelete } = props;
const themeMode = useThemeMode();
const itembackgroundcolor = themeMode === "dark" ? "#282A36" : "#ffffff";
const sortable = type === "prepend" || type === "append"; const sortable = type === "prepend" || type === "append";
const { attributes, listeners, setNodeRef, transform, transition } = sortable const { attributes, listeners, setNodeRef, transform, transition } = sortable
@ -37,11 +34,12 @@ export const GroupItem = (props: Props) => {
sx={({ palette }) => ({ sx={({ palette }) => ({
background: background:
type === "original" type === "original"
? itembackgroundcolor ? palette.mode === "dark"
? alpha(palette.background.paper, 0.3)
: alpha(palette.grey[400], 0.3)
: type === "delete" : type === "delete"
? alpha(palette.error.main, 0.3) ? alpha(palette.error.main, 0.3)
: alpha(palette.success.main, 0.3), : alpha(palette.success.main, 0.3),
height: "100%", height: "100%",
margin: "8px 0", margin: "8px 0",
borderRadius: "8px", borderRadius: "8px",
@ -79,6 +77,7 @@ export const GroupItem = (props: Props) => {
{...attributes} {...attributes}
{...listeners} {...listeners}
ref={setNodeRef} ref={setNodeRef}
sx={{ cursor: sortable ? "move" : "" }}
primary={ primary={
<StyledPrimary <StyledPrimary
sx={{ textDecoration: type === "delete" ? "line-through" : "" }} sx={{ textDecoration: type === "delete" ? "line-through" : "" }}

105
src/components/profile/rule-item.tsx
View File

@ -1,11 +1,10 @@
import { import {
Box, Box,
Divider,
IconButton, IconButton,
ListItem, ListItem,
ListItemText, ListItemText,
Typography,
alpha, alpha,
styled,
} from "@mui/material"; } from "@mui/material";
import { DeleteForeverRounded, UndoRounded } from "@mui/icons-material"; import { DeleteForeverRounded, UndoRounded } from "@mui/icons-material";
import { useSortable } from "@dnd-kit/sortable"; import { useSortable } from "@dnd-kit/sortable";
@ -31,17 +30,19 @@ export const RuleItem = (props: Props) => {
}; };
return ( return (
<ListItem <ListItem
dense
sx={({ palette }) => ({ sx={({ palette }) => ({
p: 0, background:
borderRadius: "10px",
border: "solid 2px",
borderColor:
type === "original" type === "original"
? "var(--divider-color)" ? palette.mode === "dark"
? alpha(palette.background.paper, 0.3)
: alpha(palette.grey[400], 0.3)
: type === "delete" : type === "delete"
? alpha(palette.error.main, 0.5) ? alpha(palette.error.main, 0.3)
: alpha(palette.success.main, 0.5), : alpha(palette.success.main, 0.3),
mb: 1, height: "100%",
margin: "8px 0",
borderRadius: "8px",
transform: CSS.Transform.toString(transform), transform: CSS.Transform.toString(transform),
transition, transition,
})} })}
@ -50,34 +51,76 @@ export const RuleItem = (props: Props) => {
{...attributes} {...attributes}
{...listeners} {...listeners}
ref={setNodeRef} ref={setNodeRef}
sx={{ px: 1 }} sx={{ cursor: sortable ? "move" : "" }}
primary={ primary={
<> <StyledPrimary
<Typography sx={{ textDecoration: type === "delete" ? "line-through" : "" }}
sx={{ >
textDecoration: type === "delete" ? "line-through" : "", {rule.length === 3 ? rule[1] : "-"}
overflow: "hidden", </StyledPrimary>
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
variant="h6"
title={rule.length === 3 ? rule[1] : "-"}
>
{rule.length === 3 ? rule[1] : "-"}
</Typography>
</>
} }
secondary={ secondary={
<Box sx={{ display: "flex", justifyContent: "space-between" }}> <ListItemTextChild
<Box>{rule[0]}</Box> sx={{
<Box>{rule.length === 3 ? rule[2] : rule[1]}</Box> width: "62%",
</Box> overflow: "hidden",
display: "flex",
justifyContent: "space-between",
pt: "2px",
}}
>
<Box sx={{ marginTop: "2px" }}>
<StyledTypeBox>{rule[0]}</StyledTypeBox>
</Box>
<StyledSubtitle sx={{ color: "text.secondary" }}>
{rule.length === 3 ? rule[2] : rule[1]}
</StyledSubtitle>
</ListItemTextChild>
} }
secondaryTypographyProps={{
sx: {
display: "flex",
alignItems: "center",
color: "#ccc",
},
}}
/> />
<Divider orientation="vertical" flexItem /> <IconButton onClick={onDelete}>
<IconButton size="small" color="inherit" onClick={onDelete}>
{type === "delete" ? <UndoRounded /> : <DeleteForeverRounded />} {type === "delete" ? <UndoRounded /> : <DeleteForeverRounded />}
</IconButton> </IconButton>
</ListItem> </ListItem>
); );
}; };
const StyledPrimary = styled("span")`
font-size: 15px;
font-weight: 700;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledSubtitle = styled("span")`
font-size: 13px;
overflow: hidden;
color: text.secondary;
text-overflow: ellipsis;
white-space: nowrap;
`;
const ListItemTextChild = styled("span")`
display: block;
`;
const StyledTypeBox = styled(ListItemTextChild)(({ theme }) => ({
display: "inline-block",
border: "1px solid #ccc",
borderColor: alpha(theme.palette.primary.main, 0.5),
color: alpha(theme.palette.primary.main, 0.8),
borderRadius: 4,
fontSize: 10,
padding: "0 4px",
lineHeight: 1.5,
marginRight: "8px",
}));