feat: support visual edit for proxy group

2024-07-04 13:54:20 +08:00
parent e4855d0143
commit bcd8eb2a09
9 changed files with 1053 additions and 15 deletions
--- a/src/components/profile/group-item.tsx
+++ b/src/components/profile/group-item.tsx
@@ -0,0 +1,141 @@
+import {
+  Box,
+  IconButton,
+  ListItem,
+  ListItemText,
+  alpha,
+  styled,
+} from "@mui/material";
+import { DeleteForeverRounded, UndoRounded } from "@mui/icons-material";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useThemeMode } from "@/services/states";
+interface Props {
+  type: "prepend" | "original" | "delete" | "append";
+  group: IProxyGroupConfig;
+  onDelete: () => void;
+}
+
+export const GroupItem = (props: Props) => {
+  let { type, group, onDelete } = props;
+  const themeMode = useThemeMode();
+  const itembackgroundcolor = themeMode === "dark" ? "#282A36" : "#ffffff";
+  const sortable = type === "prepend" || type === "append";
+
+  const { attributes, listeners, setNodeRef, transform, transition } = sortable
+    ? useSortable({ id: group.name })
+    : {
+        attributes: {},
+        listeners: {},
+        setNodeRef: null,
+        transform: null,
+        transition: null,
+      };
+  return (
+    <ListItem
+      dense
+      sx={({ palette }) => ({
+        background:
+          type === "original"
+            ? itembackgroundcolor
+            : type === "delete"
+            ? alpha(palette.error.main, 0.3)
+            : alpha(palette.success.main, 0.3),
+
+        height: "100%",
+        margin: "8px 0",
+        borderRadius: "8px",
+        transform: CSS.Transform.toString(transform),
+        transition,
+      })}
+    >
+      {group.icon && group.icon?.trim().startsWith("http") && (
+        <img
+          src={group.icon}
+          width="32px"
+          style={{
+            marginRight: "12px",
+            borderRadius: "6px",
+          }}
+        />
+      )}
+      {group.icon && group.icon?.trim().startsWith("data") && (
+        <img
+          src={group.icon}
+          width="32px"
+          style={{
+            marginRight: "12px",
+            borderRadius: "6px",
+          }}
+        />
+      )}
+      {group.icon && group.icon?.trim().startsWith("<svg") && (
+        <img
+          src={`data:image/svg+xml;base64,${btoa(group.icon ?? "")}`}
+          width="32px"
+        />
+      )}
+      <ListItemText
+        {...attributes}
+        {...listeners}
+        ref={setNodeRef}
+        primary={
+          <StyledPrimary
+            sx={{ textDecoration: type === "delete" ? "line-through" : "" }}
+          >
+            {group.name}
+          </StyledPrimary>
+        }
+        secondary={
+          <ListItemTextChild
+            sx={{
+              overflow: "hidden",
+              display: "flex",
+              alignItems: "center",
+              pt: "2px",
+            }}
+          >
+            <Box sx={{ marginTop: "2px" }}>
+              <StyledTypeBox>{group.type}</StyledTypeBox>
+            </Box>
+          </ListItemTextChild>
+        }
+        secondaryTypographyProps={{
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            color: "#ccc",
+          },
+        }}
+      />
+      <IconButton onClick={onDelete}>
+        {type === "delete" ? <UndoRounded /> : <DeleteForeverRounded />}
+      </IconButton>
+    </ListItem>
+  );
+};
+
+const StyledPrimary = styled("span")`
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.5;
+  overflow: hidden;
+  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",
+}));