feat: config for proxy preview type

Zephyruso · Dec 2, 2024 · ffec0c5 · ffec0c5
1 parent 53471c9
commit ffec0c5
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 3 deletions.
diff --git a/src/components/proxies/ProxyPreview.vue b/src/components/proxies/ProxyPreview.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="flex flex-wrap gap-1 pt-2"
-    v-if="nodes.length < 20"
+    v-if="showDots"
   >
     <div
       v-for="node in nodesLatency"
@@ -49,14 +49,23 @@
 </template>
 
 <script setup lang="ts">
-import { LATENCY_STATUS } from '@/config'
+import { LATENCY_STATUS, PROXY_PREVIEW_TYPE } from '@/config'
 import { getLatencyByName } from '@/store/proxies'
+import { proxyPreviewType } from '@/store/settings'
 import { computed } from 'vue'
 
 const props = defineProps<{
   nodes: string[]
   now?: string
 }>()
+
+const showDots = computed(() => {
+  return (
+    proxyPreviewType.value === PROXY_PREVIEW_TYPE.DOTS ||
+    (proxyPreviewType.value === PROXY_PREVIEW_TYPE.AUTO && props.nodes.length < 20)
+  )
+})
+
 const nodesLatency = computed(() =>
   props.nodes.map((name) => {
     return {

diff --git a/src/config/index.ts b/src/config/index.ts
@@ -35,6 +35,12 @@ export enum PROXY_SORT_TYPE {
   LATENCY_DESC = 'latencydesc',
 }
 
+export enum PROXY_PREVIEW_TYPE {
+  AUTO = 'auto',
+  DOTS = 'dots',
+  BAR = 'bar',
+}
+
 export enum RULE_TAB_TYPE {
   RULES = 'rules',
   PROVIDER = 'ruleProvider',

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -77,6 +77,10 @@ export default {
   upgradeCore: 'Upgrade Core',
   truncateProxyName: 'Truncate Proxy Name',
   sourceIPLabels: 'Source IP Labels',
+  proxyPreviewType: 'Proxy Preview Type',
+  auto: 'Auto',
+  dots: 'Dots',
+  bar: 'Bar',
   [LANG.EN_US]: 'English',
   [LANG.ZH_CN]: '中文',
 }
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -77,6 +77,10 @@ export default {
   tunMode: 'Tun 模式',
   truncateProxyName: '截断代理名称',
   sourceIPLabels: '源IP标签',
+  proxyPreviewType: '代理预览类型',
+  auto: '自动',
+  dots: '点',
+  bar: '条',
   [LANG.EN_US]: 'English',
   [LANG.ZH_CN]: '中文',
 }
diff --git a/src/store/settings.ts b/src/store/settings.ts
@@ -1,6 +1,7 @@
 import {
   CONNECTIONS_TABLE_ACCESSOR_KEY,
   LANG,
+  PROXY_PREVIEW_TYPE,
   PROXY_SORT_TYPE,
   PROXY_TAB_TYPE,
   RULE_TAB_TYPE,
@@ -36,6 +37,7 @@ export const twoColumnsInProxyGroupForMobile = useStorage(
   false,
 )
 export const truncateProxyName = useStorage('config/truncate-proxy-name', true)
+export const proxyPreviewType = useStorage('config/proxy-preview-type', PROXY_PREVIEW_TYPE.AUTO)
 
 // connections
 export const useConnectionCard = useStorage('config/use-connecticon-card', false)

diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
@@ -95,6 +95,21 @@
         {{ $t('proxies') }}
       </div>
       <div class="card-body">
+        <div class="flex items-center gap-2">
+          {{ $t('proxyPreviewType') }}:
+          <select
+            class="select select-bordered select-xs"
+            v-model="proxyPreviewType"
+          >
+            <option
+              v-for="opt in Object.values(PROXY_PREVIEW_TYPE)"
+              :key="opt"
+              :value="opt"
+            >
+              {{ $t(opt) }}
+            </option>
+          </select>
+        </div>
         <div class="flex items-center gap-2">
           {{ $t('truncateProxyName') }}:
           <input
@@ -204,13 +219,14 @@ import {
 import TableSettings from '@/components/connections/TableSettings.vue'
 import BackendSwitch from '@/components/settings/BackendSwitch.vue'
 import SourceIPLabels from '@/components/settings/SourceIPLabels.vue'
-import { LANG } from '@/config'
+import { LANG, PROXY_PREVIEW_TYPE } from '@/config'
 import { i18n } from '@/i18n'
 import { configs, updateConfigs } from '@/store/config'
 import {
   automaticDisconnection,
   compactConnectionCard,
   language,
+  proxyPreviewType,
   showGlobalProxy,
   speedtestTimeout,
   speedtestUrl,