From 96de66b2fedc668a41a89d6ecf850a920d22bb4f Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Sun, 15 Dec 2024 12:00:40 +0800
Subject: [PATCH] fix: lazy new countup

---
 src/components/proxies/LatencyTag.vue | 36 +++++++++++++--------------
 src/components/proxies/ProxyGroup.vue |  4 +--
 src/i18n/en.ts                        |  1 -
 src/i18n/zh.ts                        |  1 -
 src/store/settings.ts                 |  1 -
 src/views/SettingsPage.vue            | 10 +-------
 6 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/src/components/proxies/LatencyTag.vue b/src/components/proxies/LatencyTag.vue
index 454323cc..770f6d50 100644
--- a/src/components/proxies/LatencyTag.vue
+++ b/src/components/proxies/LatencyTag.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import { getLatencyByName } from '@/store/proxies'
-import { latencyRollingEffect, lowLatency, mediumLatency } from '@/store/settings'
+import { lowLatency, mediumLatency } from '@/store/settings'
 import { BoltIcon } from '@heroicons/vue/24/outline'
 import { CountUp } from 'countup.js'
 import { twMerge } from 'tailwind-merge'
@@ -28,28 +28,26 @@ const props = defineProps<{
 const latencyRef = ref()
 const latency = computed(() => getLatencyByName(props.name))
 
-if (latencyRollingEffect.value) {
-  let countUp: CountUp | null = null
+let countUp: CountUp | null = null
 
-  onMounted(() => {
-    watch(latency, (value, OldValue) => {
-      if (!countUp) {
-        countUp = new CountUp(latencyRef.value, latency.value, {
-          duration: 1,
-          separator: '',
-          enableScrollSpy: false,
-          startVal: OldValue,
-        })
-      }
+onMounted(() => {
+  watch(latency, (value, OldValue) => {
+    if (!countUp) {
+      countUp = new CountUp(latencyRef.value, latency.value, {
+        duration: 1,
+        separator: '',
+        enableScrollSpy: false,
+        startVal: OldValue,
+      })
+    }
 
-      countUp?.update(value)
-    })
+    countUp?.update(value)
   })
+})
 
-  onUnmounted(() => {
-    countUp = null
-  })
-}
+onUnmounted(() => {
+  countUp = null
+})
 
 const color = computed(() => {
   if (latency.value < lowLatency.value) {
diff --git a/src/components/proxies/ProxyGroup.vue b/src/components/proxies/ProxyGroup.vue
index 1a7c87ed..a0f54ad6 100644
--- a/src/components/proxies/ProxyGroup.vue
+++ b/src/components/proxies/ProxyGroup.vue
@@ -8,8 +8,8 @@
             :icon="proxyGroup.icon"
           />
           <span class="text-lg font-medium sm:text-xl">{{ proxyGroup.name }}</span>
-          <span class="text-xs sm:text-sm">({{ proxyGroup.all?.length }})</span>
-          <span class="text-xs text-slate-500 sm:text-sm"> : {{ proxyGroup.type }}</span>
+          <span class="text-xs">({{ proxyGroup.all?.length }})</span>
+          <span class="text-xs text-slate-500">: {{ proxyGroup.type }}</span>
           <span
             class="text-sm max-sm:hidden"
             v-if="proxyGroup.now"
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index a21db46e..b869372d 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -99,5 +99,4 @@ export default {
   secondaryPathTip: 'If present, start with a "/", otherwise leave it empty.',
   logRetentionLimit: 'Log Retention Limit',
   DNSQuery: 'DNS Query',
-  latencyRollingEffect: 'Latency Rolling Effect',
 }
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
index b28d317b..9228e190 100644
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -98,5 +98,4 @@ export default {
   secondaryPathTip: '如果有的话以/开头，没有则留空不填',
   logRetentionLimit: '日志保留条数',
   DNSQuery: 'DNS 查询',
-  latencyRollingEffect: '延迟滚动效果',
 }
diff --git a/src/store/settings.ts b/src/store/settings.ts
index 4051dd75..1e1cf88a 100644
--- a/src/store/settings.ts
+++ b/src/store/settings.ts
@@ -39,7 +39,6 @@ export const proxyPreviewType = useStorage('config/proxy-preview-type', PROXY_PR
 export const hideUnavailableProxies = useStorage('config/hide-unavailable-proxies', false)
 export const lowLatency = useStorage('config/low-latency', 300)
 export const mediumLatency = useStorage('config/medium-latency', 800)
-export const latencyRollingEffect = useStorage('config/latency-rolling-effect', false)
 
 // connections
 export const useConnectionCard = useStorage('config/use-connecticon-card', false)
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index b85e607f..bd43130a 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -245,14 +245,6 @@
             v-model="mediumLatency"
           />
         </div>
-        <div class="flex items-center gap-2">
-          <span class="shrink-0"> {{ $t('latencyRollingEffect') }}: </span>
-          <input
-            class="toggle"
-            type="checkbox"
-            v-model="latencyRollingEffect"
-          />
-        </div>
         <div
           v-if="isSingBox"
           class="flex items-center gap-2"
@@ -295,6 +287,7 @@
           />
         </div>
         <TableSettings v-else />
+        <div class="divider"></div>
         <SourceIPLabels />
       </div>
     </div>
@@ -346,7 +339,6 @@ import {
   autoUpgrade,
   compactConnectionCard,
   font,
-  latencyRollingEffect,
   logRetentionLimit,
   lowLatency,
   mediumLatency,