From d4698583ba50c24ad721f13c645a6f2f4e816961 Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Sun, 25 Aug 2024 19:06:36 +0800
Subject: [PATCH] support multi column

---
 changelog.md                                  |  1 +
 src/main/index.ts                             |  3 -
 .../src/components/base/base-editor.tsx       |  7 +-
 .../src/components/settings/mihomo-config.tsx | 21 ++++-
 src/renderer/src/pages/proxies.tsx            | 94 ++++++++++++++-----
 src/shared/types.d.ts                         |  1 +
 6 files changed, 94 insertions(+), 33 deletions(-)

diff --git a/changelog.md b/changelog.md
index a88a7a8..4f1c043 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,6 +1,7 @@
 ### New Features
 
 - Linux支持手动授权内核
+- 代理节点支持多列展示
 
 ### Bug Fixes
 
diff --git a/src/main/index.ts b/src/main/index.ts
index 31044b8..0e51234 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -157,9 +157,6 @@ export function createWindow(show = false): void {
   mainWindow.webContents.on('did-fail-load', () => {
     mainWindow?.webContents.reload()
   })
-  mainWindow.on('resize', () => {
-    mainWindow?.webContents.send('resize')
-  })
 
   mainWindow.on('show', () => {
     startMihomoMemory()
diff --git a/src/renderer/src/components/base/base-editor.tsx b/src/renderer/src/components/base/base-editor.tsx
index d45d2da..6339108 100644
--- a/src/renderer/src/components/base/base-editor.tsx
+++ b/src/renderer/src/components/base/base-editor.tsx
@@ -58,12 +58,11 @@ export const BaseEditor: React.FC<Props> = (props) => {
   }
 
   useEffect(() => {
-    window.electron.ipcRenderer.on('resize', () => {
+    window.onresize = (): void => {
       editorRef.current?.layout()
-    })
-
+    }
     return (): void => {
-      window.electron.ipcRenderer.removeAllListeners('resize')
+      window.onresize = null
       editorRef.current?.dispose()
       editorRef.current = undefined
     }
diff --git a/src/renderer/src/components/settings/mihomo-config.tsx b/src/renderer/src/components/settings/mihomo-config.tsx
index f368d7c..117690a 100644
--- a/src/renderer/src/components/settings/mihomo-config.tsx
+++ b/src/renderer/src/components/settings/mihomo-config.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
-import { Input, Switch } from '@nextui-org/react'
+import { Input, Select, SelectItem, Switch } from '@nextui-org/react'
 import { useAppConfig } from '@renderer/hooks/use-app-config'
 import debounce from '@renderer/utils/debounce'
 import { patchControledMihomoConfig } from '@renderer/utils/ipc'
@@ -14,7 +14,8 @@ const MihomoConfig: React.FC = () => {
     delayTestTimeout,
     autoCloseConnection = true,
     delayTestUrl,
-    userAgent
+    userAgent,
+    proxyCols = 'auto'
   } = appConfig || {}
   const [url, setUrl] = useState(delayTestUrl)
   const setUrlDebounce = debounce((v: string) => {
@@ -62,6 +63,22 @@ const MihomoConfig: React.FC = () => {
           }}
         />
       </SettingItem>
+      <SettingItem title="代理节点展示列数" divider>
+        <Select
+          className="w-[150px]"
+          size="sm"
+          selectedKeys={new Set([proxyCols])}
+          onSelectionChange={async (v) => {
+            await patchAppConfig({ proxyCols: v.currentKey as 'auto' | '1' | '2' | '3' | '4' })
+          }}
+        >
+          <SelectItem key="auto">自动</SelectItem>
+          <SelectItem key="1">一列</SelectItem>
+          <SelectItem key="2">两列</SelectItem>
+          <SelectItem key="3">三列</SelectItem>
+          <SelectItem key="4">四列</SelectItem>
+        </Select>
+      </SettingItem>
       <SettingItem title="接管DNS设置" divider>
         <Switch
           size="sm"
diff --git a/src/renderer/src/pages/proxies.tsx b/src/renderer/src/pages/proxies.tsx
index 7977b3d..46a9602 100644
--- a/src/renderer/src/pages/proxies.tsx
+++ b/src/renderer/src/pages/proxies.tsx
@@ -13,7 +13,7 @@ import { FaBoltLightning } from 'react-icons/fa6'
 import { TbCircleLetterD } from 'react-icons/tb'
 import { FaLocationCrosshairs } from 'react-icons/fa6'
 import { RxLetterCaseCapitalize } from 'react-icons/rx'
-import { useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import useSWR from 'swr'
 import { GroupedVirtuoso, GroupedVirtuosoHandle } from 'react-virtuoso'
 import ProxyItem from '@renderer/components/proxies/proxy-item'
@@ -26,15 +26,19 @@ const Proxies: React.FC = () => {
   const {
     proxyDisplayMode = 'simple',
     proxyDisplayOrder = 'default',
-    autoCloseConnection = true
+    autoCloseConnection = true,
+    proxyCols = 'auto'
   } = appConfig || {}
+  const [cols, setCols] = useState(1)
   const [isOpen, setIsOpen] = useState(Array(groups.length).fill(false))
   const virtuosoRef = useRef<GroupedVirtuosoHandle>(null)
   const { groupCounts, allProxies } = useMemo(() => {
     const groupCounts = groups.map((group, index) => {
-      return isOpen[index] ? group.all.length : 0
+      if (!isOpen[index]) return 0
+      const count = Math.floor(group.all.length / cols)
+      return group.all.length % cols === 0 ? count : count + 1
     })
-    const allProxies: (IMihomoProxy | IMihomoGroup)[] = []
+    const allProxies: (IMihomoProxy | IMihomoGroup)[][] = []
     groups.forEach((group, index) => {
       if (isOpen[index]) {
         let groupProxies = [...group.all]
@@ -50,7 +54,9 @@ const Proxies: React.FC = () => {
         if (proxyDisplayOrder === 'name') {
           groupProxies = groupProxies.sort((a, b) => a.name.localeCompare(b.name))
         }
-        allProxies.push(...groupProxies)
+        allProxies.push(groupProxies)
+      } else {
+        allProxies.push([])
       }
     })
 
@@ -74,6 +80,33 @@ const Proxies: React.FC = () => {
     await mihomoGroupDelay(group, url)
   }
 
+  const calcCols = (): void => {
+    if (window.innerWidth >= 1280) {
+      setCols(4)
+      return
+    }
+    if (window.innerWidth >= 1024) {
+      setCols(3)
+      return
+    }
+    if (window.innerWidth >= 768) {
+      setCols(2)
+      return
+    }
+  }
+
+  useEffect(() => {
+    if (proxyCols !== 'auto') {
+      setCols(parseInt(proxyCols))
+      return
+    }
+    calcCols()
+    window.onresize = calcCols
+    return (): void => {
+      window.onresize = null
+    }
+  }, [])
+
   return (
     <BasePage
       title="代理组"
@@ -155,7 +188,6 @@ const Proxies: React.FC = () => {
                         <div className="inline flag-emoji h-[32px] text-md leading-[32px]">
                           {groups[index].name}
                         </div>
-
                         {proxyDisplayMode === 'full' && (
                           <div className="inline ml-2 text-sm text-default-500">
                             {groups[index].type}
@@ -185,13 +217,15 @@ const Proxies: React.FC = () => {
                           for (let j = 0; j < index; j++) {
                             i += groupCounts[j]
                           }
-                          for (let j = 0; j < groupCounts[index]; j++) {
-                            if (allProxies[i + j].name === groups[index].now) {
-                              i += j
-                              break
-                            }
-                          }
-                          virtuosoRef.current?.scrollToIndex({ index: i, align: 'start' })
+                          i += Math.floor(
+                            allProxies[index].findIndex(
+                              (proxy) => proxy.name === groups[index].now
+                            ) / cols
+                          )
+                          virtuosoRef.current?.scrollToIndex({
+                            index: Math.floor(i),
+                            align: 'start'
+                          })
                         }}
                       >
                         <FaLocationCrosshairs className="text-lg text-default-500" />
@@ -220,17 +254,29 @@ const Proxies: React.FC = () => {
           )
         }}
         itemContent={(index, groupIndex) => {
-          return allProxies[index] ? (
-            <div className="pt-2 mx-2">
-              <ProxyItem
-                mutateProxies={mutate}
-                onProxyDelay={onProxyDelay}
-                onSelect={onChangeProxy}
-                proxy={allProxies[index]}
-                group={groups[groupIndex]}
-                proxyDisplayMode={proxyDisplayMode}
-                selected={allProxies[index]?.name === groups[groupIndex].now}
-              />
+          let innerIndex = index
+          groupCounts.slice(0, groupIndex).forEach((count) => {
+            innerIndex -= count
+          })
+          return allProxies[groupIndex] ? (
+            <div className={`grid grid-cols-${cols} gap-2 pt-2 mx-2`}>
+              {Array.from({ length: cols }).map((_, i) => {
+                if (!allProxies[groupIndex][innerIndex * cols + i]) return null
+                return (
+                  <ProxyItem
+                    key={allProxies[groupIndex][innerIndex * cols + i].name}
+                    mutateProxies={mutate}
+                    onProxyDelay={onProxyDelay}
+                    onSelect={onChangeProxy}
+                    proxy={allProxies[groupIndex][innerIndex * cols + i]}
+                    group={groups[groupIndex]}
+                    proxyDisplayMode={proxyDisplayMode}
+                    selected={
+                      allProxies[groupIndex][innerIndex * cols + i]?.name === groups[groupIndex].now
+                    }
+                  />
+                )
+              })}
             </div>
           ) : (
             <div>Never See This</div>
diff --git a/src/shared/types.d.ts b/src/shared/types.d.ts
index 9071cdf..6ecd403 100644
--- a/src/shared/types.d.ts
+++ b/src/shared/types.d.ts
@@ -215,6 +215,7 @@ interface IAppConfig {
   proxyDisplayMode: 'simple' | 'full'
   proxyDisplayOrder: 'default' | 'delay' | 'name'
   envType?: 'bash' | 'cmd' | 'powershell'
+  proxyCols: 'auto' | '1' | '2' | '3' | '4'
   proxyInTray: boolean
   siderOrder: string[]
   appTheme: AppTheme