fix: reduce dom for proxy group

Zephyruso · Dec 12, 2024 · 86cf36c · 86cf36c
1 parent b19128d
commit 86cf36c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 67 deletions.
diff --git a/src/components/proxies/ProxyGroup.vue b/src/components/proxies/ProxyGroup.vue
@@ -40,13 +40,17 @@
       type="checkbox"
       v-model="showCollapse"
     />
-    <div class="collapse-content flex flex-col gap-2 max-sm:px-2">
-      <ProxyNodeGrid v-if="showContent">
+    <div
+      class="collapse-content flex flex-col gap-2 max-sm:px-2"
+      @transitionstart="showContent = showCollapse"
+    >
+      <ProxyNodeGrid>
         <ProxyNodeCard
           v-for="node in sortedProxies"
           :key="node"
           :name="node"
           :active="node === proxyGroup.now"
+          :show-content="showContent"
           @click="selectProxy(proxyGroup.name, node)"
         />
       </ProxyNodeGrid>
@@ -60,7 +64,7 @@ import { activeConnections } from '@/store/connections'
 import { proxyGroupLatencyTest, proxyMap, selectProxy } from '@/store/proxies'
 import { collapseGroupMap } from '@/store/settings'
 import { twMerge } from 'tailwind-merge'
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import LatencyTag from './LatencyTag.vue'
 import ProxyIcon from './ProxyIcon.vue'
 import ProxyNodeCard from './ProxyNodeCard.vue'
@@ -80,19 +84,6 @@ const showCollapse = computed({
   },
 })
 const showContent = ref(showCollapse.value)
-
-watch(showCollapse, (value) => {
-  if (value) {
-    showContent.value = value
-  } else {
-    setTimeout(() => {
-      if (value === showCollapse.value) {
-        showContent.value = value
-      }
-    }, 1000)
-  }
-})
-
 const proxyGroup = computed(() => proxyMap.value[props.name])
 const sortedProxies = computed(() => {
   return sortAndFilterProxyNodes(proxyGroup.value.all ?? [])

diff --git a/src/components/proxies/ProxyNodeCard.vue b/src/components/proxies/ProxyNodeCard.vue
@@ -2,49 +2,53 @@
   <div
     :class="
       twMerge(
-        'flex cursor-pointer flex-wrap items-center justify-end gap-1 rounded-md bg-base-200 p-2',
+        'flex h-9 cursor-pointer flex-wrap items-center justify-end gap-1 rounded-md bg-base-200 p-2',
         active ? 'bg-primary text-primary-content' : 'shadow sm:hover:bg-base-300',
         truncateProxyName && isTruncated && 'tooltip text-left',
       )
     "
     :data-tip="node.name"
   >
-    <ProxyIcon
-      v-if="node.icon"
-      :icon="node.icon"
-      :fill="active ? 'fill-primary-content' : 'fill-base-content'"
-    />
-    <div
-      :class="
-        twMerge('flex-1 whitespace-nowrap text-xs md:text-sm', truncateProxyName && 'truncate')
-      "
-      ref="nameRef"
-    >
-      {{ node.name }}
-    </div>
-    <div
-      :class="
-        twMerge(
-          'flex items-center text-xs sm:gap-2',
-          twoColumnNodeForMobile ? 'gap-[2px]' : 'gap-1',
-        )
-      "
-    >
-      <div class="flex-1">
-        <span>{{ typeFormatter(node.type) }}</span>
-        <template v-if="node.udp">
-          <span :class="twMerge('hidden sm:hidden', twoColumnNodeForMobile && 'inline')">:udp</span>
-          <span :class="twMerge('hidden sm:inline', !twoColumnNodeForMobile && 'inline')">
-            | udp
-          </span>
-        </template>
-      </div>
-      <LatencyTag
-        :class="isLatencyTesting ? 'animate-pulse' : ''"
-        :name="node.name"
-        @click.stop="handlerLatencyTest"
+    <template v-if="showContent">
+      <ProxyIcon
+        v-if="node.icon"
+        :icon="node.icon"
+        :fill="active ? 'fill-primary-content' : 'fill-base-content'"
       />
-    </div>
+      <div
+        :class="
+          twMerge('flex-1 whitespace-nowrap text-xs md:text-sm', truncateProxyName && 'truncate')
+        "
+        ref="nameRef"
+      >
+        {{ node.name }}
+      </div>
+      <div
+        :class="
+          twMerge(
+            'flex items-center text-xs sm:gap-2',
+            twoColumnNodeForMobile ? 'gap-[2px]' : 'gap-1',
+          )
+        "
+      >
+        <div class="flex-1">
+          <span>{{ typeFormatter(node.type) }}</span>
+          <template v-if="node.udp">
+            <span :class="twMerge('hidden sm:hidden', twoColumnNodeForMobile && 'inline')"
+              >:udp</span
+            >
+            <span :class="twMerge('hidden sm:inline', !twoColumnNodeForMobile && 'inline')">
+              | udp
+            </span>
+          </template>
+        </div>
+        <LatencyTag
+          :class="isLatencyTesting ? 'animate-pulse' : ''"
+          :name="node.name"
+          @click.stop="handlerLatencyTest"
+        />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -59,6 +63,7 @@ import ProxyIcon from './ProxyIcon.vue'
 const props = defineProps<{
   name: string
   active?: boolean
+  showContent: boolean
 }>()
 const nameRef = ref()
 const isTruncated = ref(false)

diff --git a/src/components/proxies/ProxyProvider.vue b/src/components/proxies/ProxyProvider.vue
@@ -50,12 +50,16 @@
       type="checkbox"
       v-model="showCollapse"
     />
-    <div class="collapse-content flex flex-col gap-2">
-      <ProxyNodeGrid v-if="showContent">
+    <div
+      class="collapse-content flex flex-col gap-2"
+      @transitionstart="showContent = showCollapse"
+    >
+      <ProxyNodeGrid>
         <ProxyNodeCard
           v-for="node in sortedProxies"
           :key="node"
           :name="node"
+          :show-content="showContent"
         />
       </ProxyNodeGrid>
     </div>
@@ -72,7 +76,7 @@ import { ArrowPathIcon, BoltIcon } from '@heroicons/vue/24/outline'
 import dayjs from 'dayjs'
 import { toFinite } from 'lodash'
 import { twMerge } from 'tailwind-merge'
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ProxyNodeCard from './ProxyNodeCard.vue'
 import ProxyNodeGrid from './ProxyNodeGrid.vue'
@@ -91,18 +95,6 @@ const showCollapse = computed({
 })
 const showContent = ref(showCollapse.value)
 
-watch(showCollapse, (value) => {
-  if (value) {
-    showContent.value = value
-  } else {
-    setTimeout(() => {
-      if (value === showCollapse.value) {
-        showContent.value = value
-      }
-    }, 1000)
-  }
-})
-
 const getSubscriptionsInfo = (subscriptionInfo: SubscriptionInfo) => {
   const { Download = 0, Upload = 0, Total = 0, Expire = 0 } = subscriptionInfo