From 23ffa480ecd29fdb8e1e5662ba473da0ae380acd Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Mon, 25 Nov 2024 10:15:05 +0800
Subject: [PATCH] feat: cfg for two cols

---
 src/components/ProxyGroup.vue          |  9 +++++++--
 src/components/sidebar/ProxiesCtrl.vue | 22 +++++++++++++++-------
 src/i18n/en.ts                         |  1 +
 src/i18n/zh.ts                         |  1 +
 src/store/config.ts                    |  1 +
 src/views/ProxiesPage.vue              |  7 ++++---
 6 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/ProxyGroup.vue b/src/components/ProxyGroup.vue
index fc5cd1cf..440e3ff7 100644
--- a/src/components/ProxyGroup.vue
+++ b/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'
diff --git a/src/components/sidebar/ProxiesCtrl.vue b/src/components/sidebar/ProxiesCtrl.vue
index 49aa8846..a053ca31 100644
--- a/src/components/sidebar/ProxiesCtrl.vue
+++ b/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(() => {
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index bf60efa8..17c37876 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -28,4 +28,5 @@ export default {
   activeConnections: 'Active Connections',
   closedConnections: 'Closed Connections',
   logLevel: 'Log Level',
+  twoColumns: 'Two Columns',
 }
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
index 7834b17e..028dae25 100644
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -28,4 +28,5 @@ export default {
   activeConnections: '活跃连接',
   closedConnections: '已关闭连接',
   logLevel: '日志等级',
+  twoColumns: '双列显示',
 }
diff --git a/src/store/config.ts b/src/store/config.ts
index 1e08fb58..56ea287f 100644
--- a/src/store/config.ts
+++ b/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 () => {
diff --git a/src/views/ProxiesPage.vue b/src/views/ProxiesPage.vue
index 1bccc5a6..3287a4e9 100644
--- a/src/views/ProxiesPage.vue
+++ b/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) => {