feat: cfg for two cols

src/components/ProxyGroup.vue

@@ -39,7 +39,12 @@
     />
     <div class="collapse-content flex flex-col gap-2">
       <div
-        class="grid grid-cols-1 gap-2 md:grid-cols-2"
+        :class="
+          twMerge(
+            'grid grid-cols-1 gap-2 sm:grid-cols-2',
+            !twoColumns && 'lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5',
+          )
+        "
         v-if="showContent"
       >
         <ProxyNodeCard
@@ -57,7 +62,7 @@
 <script setup lang="ts">
 import LatencyTag from '@/components/LatencyTag.vue'
 import ProxyNodeCard from '@/components/ProxyNodeCard.vue'
-import { collapseGroupMap } from '@/store/config'
+import { collapseGroupMap, twoColumns } from '@/store/config'
 import { activeConnections } from '@/store/connections'
 import { getLatencyByName, proxyGroupLatencyTest, proxyMap, selectProxy } from '@/store/proxies'
 import prettyBytes from 'pretty-bytes'

src/components/sidebar/ProxiesCtrl.vue

@@ -3,12 +3,14 @@
     class="flex flex-col gap-2 p-2"
     v-if="configs"
   >
-    <button
-      class="btn btn-sm w-full"
-      @click="flushFakeIPAPI"
-    >
-      {{ $t('flushFakeIP') }}
-    </button>
+    <div class="flex items-center gap-2">
+      {{ $t('twoColumns') }}:
+      <input
+        class="toggle"
+        type="checkbox"
+        v-model="twoColumns"
+      />
+    </div>
     <select
       class="select select-bordered select-sm w-full"
       :value="configs.mode"
@@ -26,12 +28,18 @@
       class="input input-sm input-bordered w-full"
       v-model="speedtestUrl"
     />
+    <button
+      class="btn btn-sm w-full"
+      @click="flushFakeIPAPI"
+    >
+      {{ $t('flushFakeIP') }}
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { flushFakeIPAPI } from '@/api'
-import { configs, speedtestUrl, updateConfigs } from '@/store/config'
+import { configs, speedtestUrl, twoColumns, updateConfigs } from '@/store/config'
 import { computed } from 'vue'
 
 const modeList = computed(() => {

src/i18n/en.ts

@@ -28,4 +28,5 @@ export default {
   activeConnections: 'Active Connections',
   closedConnections: 'Closed Connections',
   logLevel: 'Log Level',
+  twoColumns: 'Two Columns',
 }

src/i18n/zh.ts

@@ -28,4 +28,5 @@ export default {
   activeConnections: '活跃连接',
   closedConnections: '已关闭连接',
   logLevel: '日志等级',
+  twoColumns: '双列显示',
 }

src/store/config.ts

@@ -18,6 +18,7 @@ export const speedtestTimeout = useStorage<number>('config/speedtest-timeout', 5
 export const compactConnectionCard = useStorage<boolean>('config/compact-connection-card', true)
 export const hostLabelMap = useStorage<Record<string, string>>('config/host-label-map', {})
 export const collapseGroupMap = useStorage<Record<string, boolean>>('config/collapse-group-map', {})
+export const twoColumns = useStorage('config/twoColumns', true)
 
 export const configs = ref<Config>()
 export const fetchConfigs = async () => {

src/views/ProxiesPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-full overflow-y-auto overflow-x-hidden p-2">
-    <template v-if="isLargeScreen">
-      <div class="flex flex-1 gap-1">
+    <template v-if="isLargeScreen && twoColumns">
+      <div class="grid grid-cols-2 gap-1">
         <div
           v-for="idx in [0, 1]"
           :key="idx"
@@ -16,7 +16,7 @@
       </div>
     </template>
     <div
-      class="flex flex-1 flex-col gap-1"
+      class="grid grid-cols-1 gap-1"
       v-else
     >
       <ProxyGroup
@@ -31,6 +31,7 @@
 <script setup lang="ts">
 import ProxyGroup from '@/components/ProxyGroup.vue'
 import { isLargeScreen } from '@/helper'
+import { twoColumns } from '@/store/config'
 import { proxyGroups } from '@/store/proxies'
 
 const filterContent: <T>(all: T[], target: number) => T[] = (all, target) => {