From 024db4358b4d5aab701301005396c4efd7466c67 Mon Sep 17 00:00:00 2001
From: GyDi <zzzgydi@gmail.com>
Date: Wed, 14 Dec 2022 15:07:51 +0800
Subject: [PATCH] feat: auto proxy layout column

---
 src/components/proxy/proxy-groups.tsx       |  1 +
 src/components/proxy/proxy-item-mini.tsx    | 70 ++++++++++-----------
 src/components/proxy/proxy-render.tsx       |  3 +-
 src/components/proxy/use-render-list.ts     | 16 ++++-
 src/components/proxy/use-window-width.ts    | 16 +++++
 src/components/setting/mods/misc-viewer.tsx |  3 +
 6 files changed, 69 insertions(+), 40 deletions(-)
 create mode 100644 src/components/proxy/use-window-width.ts

diff --git a/src/components/proxy/proxy-groups.tsx b/src/components/proxy/proxy-groups.tsx
index e852391..8386b53 100644
--- a/src/components/proxy/proxy-groups.tsx
+++ b/src/components/proxy/proxy-groups.tsx
@@ -118,6 +118,7 @@ export const ProxyGroups = (props: Props) => {
       ref={virtuosoRef}
       style={{ height: "100%" }}
       totalCount={renderList.length}
+      increaseViewportBy={256}
       itemContent={(index) => (
         <ProxyRender
           key={renderList[index].key}
diff --git a/src/components/proxy/proxy-item-mini.tsx b/src/components/proxy/proxy-item-mini.tsx
index 3e82c9e..68fcb61 100644
--- a/src/components/proxy/proxy-item-mini.tsx
+++ b/src/components/proxy/proxy-item-mini.tsx
@@ -1,14 +1,7 @@
 import { useEffect, useState } from "react";
 import { useLockFn } from "ahooks";
 import { CheckCircleOutlineRounded } from "@mui/icons-material";
-import {
-  alpha,
-  Box,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  styled,
-} from "@mui/material";
+import { alpha, Box, ListItemButton, styled, Typography } from "@mui/material";
 import { BaseLoading } from "@/components/base";
 import delayManager from "@/services/delay";
 
@@ -52,7 +45,7 @@ export const ProxyItemMini = (props: Props) => {
       selected={selected}
       onClick={() => onClick?.(proxy.name)}
       sx={[
-        { borderRadius: 1, pl: 1.5, pr: 1 },
+        { height: 56, borderRadius: 1, pl: 1.5, pr: 1 },
         ({ palette: { mode, primary } }) => {
           const bgcolor =
             mode === "light"
@@ -61,45 +54,48 @@ export const ProxyItemMini = (props: Props) => {
           const color = mode === "light" ? primary.main : primary.light;
           const showDelay = delay > 0;
 
+          const shadowColor =
+            mode === "light" ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.08)";
+
           return {
             "&:hover .the-check": { display: !showDelay ? "block" : "none" },
             "&:hover .the-delay": { display: showDelay ? "block" : "none" },
             "&:hover .the-icon": { display: "none" },
-            "&.Mui-selected": { bgcolor },
+            "&.Mui-selected": { bgcolor, boxShadow: `0 0 0 1px ${bgcolor}` },
             "&.Mui-selected .MuiListItemText-secondary": { color },
+            boxShadow: `0 0 0 1px ${shadowColor}`,
           };
         },
       ]}
     >
-      <ListItemText
-        title={proxy.name}
-        secondary={
-          <div>
-            <div
-              style={{
-                textOverflow: "ellipsis",
-                wordBreak: "break-all",
-                overflow: "hidden",
-                whiteSpace: showType ? "nowrap" : "inherit",
-              }}
-            >
-              {proxy.name}
-            </div>
+      <Box title={proxy.name} sx={{ overflow: "hidden" }}>
+        <Typography
+          variant="body2"
+          component="div"
+          color="text.secondary"
+          sx={{
+            display: "block",
+            textOverflow: "ellipsis",
+            wordBreak: "break-all",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {proxy.name}
+        </Typography>
 
-            {showType && (
-              <>
-                {!!proxy.provider && (
-                  <TypeBox component="span">{proxy.provider}</TypeBox>
-                )}
-                <TypeBox component="span">{proxy.type}</TypeBox>
-                {proxy.udp && <TypeBox component="span">UDP</TypeBox>}
-              </>
+        {showType && (
+          <Box sx={{ display: "flex", flexWrap: "nowrap", flex: "none" }}>
+            {!!proxy.provider && (
+              <TypeBox component="span">{proxy.provider}</TypeBox>
             )}
-          </div>
-        }
-      />
+            <TypeBox component="span">{proxy.type}</TypeBox>
+            {proxy.udp && <TypeBox component="span">UDP</TypeBox>}
+          </Box>
+        )}
+      </Box>
 
-      <ListItemIcon sx={{ justifyContent: "flex-end", color: "primary.main" }}>
+      <Box sx={{ ml: 0.5, justifyContent: "flex-end", color: "primary.main" }}>
         {delay === -2 && (
           <Widget>
             <BaseLoading />
@@ -158,7 +154,7 @@ export const ProxyItemMini = (props: Props) => {
             sx={{ fontSize: 16 }}
           />
         )}
-      </ListItemIcon>
+      </Box>
     </ListItemButton>
   );
 };
diff --git a/src/components/proxy/proxy-render.tsx b/src/components/proxy/proxy-render.tsx
index b5f50d0..f0d197f 100644
--- a/src/components/proxy/proxy-render.tsx
+++ b/src/components/proxy/proxy-render.tsx
@@ -110,6 +110,7 @@ export const ProxyRender = (props: RenderProps) => {
     return (
       <Box
         sx={{
+          height: 56,
           display: "grid",
           gap: 1,
           pl: indent ? 4 : 2,
@@ -123,7 +124,7 @@ export const ProxyRender = (props: RenderProps) => {
             key={item.key + proxy.name}
             groupName={group.name}
             proxy={proxy!}
-            selected={group.now === proxy?.name}
+            selected={group.now === proxy.name}
             showType={headState?.showType}
             onClick={() => onChangeProxy(group, proxy!)}
           />
diff --git a/src/components/proxy/use-render-list.ts b/src/components/proxy/use-render-list.ts
index 22fc96d..1753b01 100644
--- a/src/components/proxy/use-render-list.ts
+++ b/src/components/proxy/use-render-list.ts
@@ -3,6 +3,7 @@ import { useEffect, useMemo } from "react";
 import { getProxies } from "@/services/api";
 import { useVerge } from "@/hooks/use-verge";
 import { filterSort } from "./use-filter-sort";
+import { useWindowWidth } from "./use-window-width";
 import {
   useHeadStateNew,
   DEFAULT_STATE,
@@ -28,7 +29,18 @@ export const useRenderList = (mode: string) => {
   );
 
   const { verge } = useVerge();
-  const col = verge?.proxy_layout_column || 1;
+  const { width } = useWindowWidth();
+
+  let col = verge?.proxy_layout_column || 1;
+
+  // 自适应
+  if (col === 6) {
+    if (width > 1450) col = 5;
+    else if (width > 1024) col = 4;
+    else if (width > 900) col = 3;
+    else if (width >= 600) col = 2;
+    else col = 1;
+  }
 
   const [headStates, setHeadState] = useHeadStateNew();
 
@@ -80,7 +92,7 @@ export const useRenderList = (mode: string) => {
           return ret.concat(
             groupList(proxies, col).map((proxyCol) => ({
               type: 4,
-              key: `col-${group.name}`,
+              key: `col-${group.name}-${proxyCol[0].name}`,
               group,
               headState,
               col,
diff --git a/src/components/proxy/use-window-width.ts b/src/components/proxy/use-window-width.ts
new file mode 100644
index 0000000..d1de3c3
--- /dev/null
+++ b/src/components/proxy/use-window-width.ts
@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export const useWindowWidth = () => {
+  const [width, setWidth] = useState(() => document.body.clientWidth);
+
+  useEffect(() => {
+    const handleResize = () => setWidth(document.body.clientWidth);
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return { width };
+};
diff --git a/src/components/setting/mods/misc-viewer.tsx b/src/components/setting/mods/misc-viewer.tsx
index 02a0692..d438537 100644
--- a/src/components/setting/mods/misc-viewer.tsx
+++ b/src/components/setting/mods/misc-viewer.tsx
@@ -99,6 +99,9 @@ export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
               }));
             }}
           >
+            <MenuItem value={6} key={6}>
+              Auto
+            </MenuItem>
             {[1, 2, 3, 4, 5].map((i) => (
               <MenuItem value={i} key={i}>
                 {i}