From 86ea65191f628bd04000fbe8f13118e3026e1651 Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Fri, 13 Dec 2024 11:39:41 +0800
Subject: [PATCH] fix: latency countup performance

---
 src/components/proxies/LatencyTag.vue    | 64 ++++++++++--------------
 src/components/proxies/ProxyProvider.vue |  1 +
 src/components/rules/RuleCard.vue        |  4 +-
 src/i18n/en.ts                           |  1 -
 src/i18n/zh.ts                           |  1 -
 src/store/settings.ts                    |  1 -
 src/views/SettingsPage.vue               |  9 ----
 7 files changed, 29 insertions(+), 52 deletions(-)

diff --git a/src/components/proxies/LatencyTag.vue b/src/components/proxies/LatencyTag.vue
index bfc9268c..19654858 100644
--- a/src/components/proxies/LatencyTag.vue
+++ b/src/components/proxies/LatencyTag.vue
@@ -1,38 +1,24 @@
 <template>
   <div class="badge flex w-8 items-center justify-center shadow-sm">
-    <template v-if="latencyRollingEffect">
-      <div
-        :class="twMerge('text-xs', color)"
-        ref="latencyRef"
-        v-show="latency > 0"
-      />
-      <BoltIcon
-        v-show="latency === 0"
-        class="h-4 w-4"
-      />
-    </template>
-    <template v-else>
-      <div
-        :class="twMerge('text-xs', color)"
-        v-if="latency > 0"
-      >
-        {{ latency }}
-      </div>
-      <BoltIcon
-        v-else
-        class="h-4 w-4"
-      />
-    </template>
+    <div
+      :class="twMerge('text-xs', color)"
+      ref="latencyRef"
+      v-show="latency > 0"
+    />
+    <BoltIcon
+      v-show="latency === 0"
+      class="h-4 w-4"
+    />
   </div>
 </template>
 
 <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'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps<{
   name: string
@@ -40,22 +26,24 @@ 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(() => {
-    countUp = new CountUp(latencyRef.value, latency.value, {
-      duration: 1,
-      separator: '',
-      enableScrollSpy: true,
-    })
-    countUp.start()
+onMounted(() => {
+  countUp = new CountUp(latencyRef.value, latency.value, {
+    duration: 1,
+    separator: '',
+    enableScrollSpy: false,
+    startVal: latency.value,
+  })
 
-    watch(latency, () => {
-      countUp?.update(latency.value)
-    })
+  watch(latency, () => {
+    countUp?.update(latency.value)
   })
-}
+})
+
+onUnmounted(() => {
+  countUp = null
+})
 
 const color = computed(() => {
   if (latency.value < lowLatency.value) {
diff --git a/src/components/proxies/ProxyProvider.vue b/src/components/proxies/ProxyProvider.vue
index 7d44a8eb..c90db385 100644
--- a/src/components/proxies/ProxyProvider.vue
+++ b/src/components/proxies/ProxyProvider.vue
@@ -4,6 +4,7 @@
       <div class="flex items-center gap-2">
         <div class="text-lg font-medium sm:text-xl">
           {{ proxyProvider.name }}
+          <span class="text-sm"> ({{ proxyProvider.proxies.length }}) </span>
         </div>
         <div class="flex-1" />
         <div class="flex gap-2">
diff --git a/src/components/rules/RuleCard.vue b/src/components/rules/RuleCard.vue
index 4898fe74..6202699f 100644
--- a/src/components/rules/RuleCard.vue
+++ b/src/components/rules/RuleCard.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="card mb-1 block w-full gap-2 p-2 text-sm">
     <span>{{ rule.type }}</span>
-    <span class="mx-2">{{ rule.payload }}</span>
-    <span class="min-w-32 text-primary">-> {{ rule.proxy }}</span>
+    <span class="mx-2">{{ rule.payload }} -></span>
+    <span class="min-w-32 text-primary">{{ rule.proxy }}</span>
   </div>
 </template>
 
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 7a1d8222..1bb6e58c 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 5f0587ed..36dd8376 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -256,14 +256,6 @@
             v-model="mediumLatency"
           />
         </div>
-        <div class="flex items-center gap-2">
-          <span class="shrink-0"> {{ $t('latencyRollingEffect') }}: </span>
-          <input
-            type="checkbox"
-            class="toggle"
-            v-model="latencyRollingEffect"
-          />
-        </div>
       </div>
     </div>
 
@@ -346,7 +338,6 @@ import {
   autoUpgrade,
   compactConnectionCard,
   font,
-  latencyRollingEffect,
   logRetentionLimit,
   lowLatency,
   mediumLatency,