feat: make proxy preview auto-switch threshold configurable (#1817)

Add a configurable threshold for switching between list and dot preview
modes in auto mode, replacing the hardcoded value of 10.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: kunish

components/ProxyNodePreview.vue

@@ -16,7 +16,9 @@ const isOff = computed(
   () => configStore.proxiesPreviewType === PROXIES_PREVIEW_TYPE.OFF,
 )
 
-const isSmallGroup = computed(() => props.proxyNameList.length <= 10)
+const isSmallGroup = computed(
+  () => props.proxyNameList.length <= configStore.proxiesPreviewAutoThreshold,
+)
 
 const isShowBar = computed(() => {
   const type = configStore.proxiesPreviewType

i18n/locales/en.json

@@ -56,6 +56,7 @@
   "auto": "Auto",
   "off": "Off",
   "proxiesPreviewType": "Proxies Preview Type",
+  "proxiesPreviewAutoThreshold": "Auto Switch Threshold",
   "proxiesDisplayMode": "Display Mode",
   "cardMode": "Card",
   "listMode": "List",

i18n/locales/ru.json

@@ -56,6 +56,7 @@
   "auto": "Авто",
   "off": "Выкл",
   "proxiesPreviewType": "Тип предпросмотра прокси",
+  "proxiesPreviewAutoThreshold": "Порог автопереключения",
   "proxiesDisplayMode": "Режим отображения",
   "cardMode": "Карточки",
   "listMode": "Список",

i18n/locales/zh.json

@@ -56,6 +56,7 @@
   "auto": "自适应",
   "off": "关闭",
   "proxiesPreviewType": "节点组预览样式",
+  "proxiesPreviewAutoThreshold": "自适应切换阈值",
   "proxiesDisplayMode": "节点显示模式",
   "cardMode": "卡片",
   "listMode": "列表",

pages/proxies.vue

@@ -866,6 +866,20 @@ const ProviderProxyNodes = defineComponent({
               {{ t('off') }}
             </option>
           </select>
+
+          <template
+            v-if="configStore.proxiesPreviewType === PROXIES_PREVIEW_TYPE.Auto"
+          >
+            <ConfigTitle with-divider>
+              {{ t('proxiesPreviewAutoThreshold') }}
+            </ConfigTitle>
+            <input
+              v-model.number="configStore.proxiesPreviewAutoThreshold"
+              class="input-bordered input w-full"
+              type="number"
+              min="1"
+            />
+          </template>
         </div>
 
         <div>

stores/config.ts

@@ -35,6 +35,10 @@ export const useConfigStore = defineStore('config', () => {
     'proxiesPreviewType',
     PROXIES_PREVIEW_TYPE.Auto,
   )
+  const proxiesPreviewAutoThreshold = useLocalStorage<number>(
+    'proxiesPreviewAutoThreshold',
+    10,
+  )
   const proxiesOrderingType = useLocalStorage<PROXIES_ORDERING_TYPE>(
     'proxiesOrderingType',
     PROXIES_ORDERING_TYPE.NATURAL,
@@ -166,6 +170,7 @@ export const useConfigStore = defineStore('config', () => {
     favNightTheme,
     // Proxies
     proxiesPreviewType,
+    proxiesPreviewAutoThreshold,
     proxiesOrderingType,
     proxiesDisplayMode,
     renderProxiesInTwoColumns,