feat: customizable min card width

src/components/proxies/ProxyNodeGrid.vue

@@ -1,13 +1,12 @@
 <template>
   <div
     class="grid max-h-96 gap-2 overflow-y-auto overflow-x-hidden"
-    :style="`grid-template-columns: repeat(auto-fill, minmax(${proxyCardSize === PROXY_CARD_SIZE.LARGE ? 145 : 130}px, 1fr));`"
+    :style="`grid-template-columns: repeat(auto-fill, minmax(${minProxyCardWidth}px, 1fr));`"
   >
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { PROXY_CARD_SIZE } from '@/constant'
-import { proxyCardSize } from '@/store/settings'
+import { minProxyCardWidth } from '@/store/settings'
 </script>

src/components/settings/ProxiesSettings.vue

@@ -99,6 +99,7 @@
           <select
             class="select select-bordered select-sm min-w-24"
             v-model="proxyCardSize"
+            @change="handlerProxyCardSizeChange"
           >
             <option
               v-for="opt in Object.values(PROXY_CARD_SIZE)"
@@ -135,6 +136,7 @@
 <script setup lang="ts">
 import { PROXY_CARD_SIZE, PROXY_PREVIEW_TYPE } from '@/constant'
 import { useTooltip } from '@/helper/tooltip'
+import { getMinCardWidth } from '@/helper/utils'
 import { proxyMap } from '@/store/proxies'
 import {
   iconMarginRight,
@@ -143,6 +145,7 @@ import {
   IPv6test,
   lowLatency,
   mediumLatency,
+  minProxyCardWidth,
   proxyCardSize,
   proxyPreviewType,
   speedtestTimeout,
@@ -164,4 +167,8 @@ const independentLatencyTestTip = (e: Event) => {
 const hasIcon = computed(() => {
   return Object.values(proxyMap.value).some((proxy) => !!proxy.icon)
 })
+
+const handlerProxyCardSizeChange = () => {
+  minProxyCardWidth.value = getMinCardWidth(proxyCardSize.value)
+}
 </script>

src/components/sidebar/ProxiesCtrl.tsx

@@ -2,14 +2,16 @@ import { updateProxyProviderAPI } from '@/api'
 import { collapsedBus } from '@/composables/bus'
 import { proxiesFilter, useProxies } from '@/composables/proxies'
 import { PROXY_SORT_TYPE, PROXY_TAB_TYPE } from '@/constant'
-import { isMiddleScreen } from '@/helper/utils'
+import { getMinCardWidth, isMiddleScreen } from '@/helper/utils'
 import { configs, updateConfigs } from '@/store/config'
 import { allProxiesLatencyTest, fetchProxies, proxyProviederList } from '@/store/proxies'
 import {
   automaticDisconnection,
   collapseGroupMap,
   hideUnavailableProxies,
   manageHiddenGroup,
+  minProxyCardWidth,
+  proxyCardSize,
   proxySortType,
 } from '@/store/settings'
 import {
@@ -90,6 +92,10 @@ export default defineComponent({
       })
     }
 
+    const handlerResetProxyCardWidth = () => {
+      minProxyCardWidth.value = getMinCardWidth(proxyCardSize.value)
+    }
+
     return () => {
       const tabs = (
         <div
@@ -234,6 +240,21 @@ export default defineComponent({
                   v-model={automaticDisconnection.value}
                 />
               </div>
+              <div class="flex items-center gap-2">
+                {t('minProxyCardWidth')}
+                <input
+                  class="input input-sm input-bordered w-20"
+                  type="number"
+                  v-model={minProxyCardWidth.value}
+                />
+                px
+                <button
+                  class="btn btn-sm"
+                  onClick={handlerResetProxyCardWidth}
+                >
+                  {t('reset')}
+                </button>
+              </div>
             </div>
           </DialogWrapper>
         </>

src/constant/index.ts

@@ -131,6 +131,11 @@ export enum PROXY_CARD_SIZE {
   LARGE = 'large',
 }
 
+export enum MIN_PROXY_CARD_WIDTH {
+  SMALL = 130,
+  LARGE = 145,
+}
+
 export enum PROXY_CHAIN_DIRECTION {
   NORMAL = 'normal',
   REVERSE = 'reverse',

src/helper/utils.ts

@@ -1,3 +1,4 @@
+import { MIN_PROXY_CARD_WIDTH, PROXY_CARD_SIZE } from '@/constant'
 import { useMediaQuery } from '@vueuse/core'
 
 export const twoColumn = useMediaQuery('(min-width: 810px)')
@@ -7,6 +8,10 @@ export const isPWA = (() => {
   return window.matchMedia('(display-mode: standalone)').matches || navigator.standalone
 })()
 
+export const getMinCardWidth = (size: PROXY_CARD_SIZE) => {
+  return size === PROXY_CARD_SIZE.LARGE ? MIN_PROXY_CARD_WIDTH.LARGE : MIN_PROXY_CARD_WIDTH.SMALL
+}
+
 const BACKGROUND_IMAGE = 'background-image'
 export const LOCAL_IMAGE = 'local-image'
 

src/i18n/en.ts

@@ -154,6 +154,8 @@ const en = {
   simpleCardPreset: 'Simple Preset',
   detailedCardPreset: 'Detailed Preset',
   refresh: 'Refresh',
+  reset: 'Reset',
+  minProxyCardWidth: 'Min Proxy Card Width',
 }
 
 export type LANG_MESSAGE = typeof en

src/i18n/ru.ts

@@ -157,6 +157,8 @@ const ru: LANG_MESSAGE = {
   simpleCardPreset: 'Простой карточки',
   detailedCardPreset: 'Подробный карточки',
   refresh: 'Обновить',
+  reset: 'Сбросить',
+  minProxyCardWidth: 'Минимальная ширина карточки прокси',
 }
 
 export default ru

src/i18n/zh.ts

@@ -155,6 +155,8 @@ const zh: LANG_MESSAGE = {
   simpleCardPreset: '简洁预设',
   detailedCardPreset: '详细预设',
   refresh: '刷新',
+  reset: '重置',
+  minProxyCardWidth: '最小节点卡片宽度',
 }
 
 export default zh

src/store/settings.ts

@@ -10,7 +10,7 @@ import {
   TABLE_SIZE,
   TABLE_WIDTH_MODE,
 } from '@/constant'
-import { isMiddleScreen } from '@/helper/utils'
+import { getMinCardWidth, isMiddleScreen } from '@/helper/utils'
 import type { SourceIPLabel } from '@/types'
 import { useStorage } from '@vueuse/core'
 import { isEmpty } from 'lodash'
@@ -79,6 +79,10 @@ export const proxyCardSize = useStorage<PROXY_CARD_SIZE>(
   'config/proxy-card-size',
   PROXY_CARD_SIZE.LARGE,
 )
+export const minProxyCardWidth = useStorage<number>(
+  'config/min-proxy-card-width',
+  getMinCardWidth(proxyCardSize.value),
+)
 export const manageHiddenGroup = ref(false)
 export const iconSize = useStorage('config/icon-size', 14)
 export const iconMarginRight = useStorage('config/icon-margin-right', 6)