feat: auto proxy layout column

This commit is contained in:
GyDi
2022-12-14 15:07:51 +08:00
parent ffe2557e84
commit 90c9b87f8d
6 changed files with 69 additions and 40 deletions

View File

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