From c09c5b85aa61e8870abcaa861057897cf913ab8e Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Mon, 6 Jan 2025 18:23:37 +0800
Subject: [PATCH] fix: replace ->

---
 src/components/connections/ConnectionCard.tsx | 34 +++++++++++--------
 .../connections/ConnectionTable.vue           | 30 ++++++++++++++--
 src/components/proxies/ProxyGroup.vue         |  2 +-
 src/components/rules/RuleCard.vue             |  7 +++-
 src/components/settings/SourceIPLabels.vue    |  4 +--
 5 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/src/components/connections/ConnectionCard.tsx b/src/components/connections/ConnectionCard.tsx
index 4aae90bf..1a122535 100644
--- a/src/components/connections/ConnectionCard.tsx
+++ b/src/components/connections/ConnectionCard.tsx
@@ -13,6 +13,7 @@ import type { Connection } from '@/types'
 import {
   ArrowDownCircleIcon,
   ArrowDownIcon,
+  ArrowRightCircleIcon,
   ArrowUpCircleIcon,
   ArrowUpIcon,
   InformationCircleIcon,
@@ -55,45 +56,50 @@ export default defineComponent<{
         ),
         [CONNECTIONS_TABLE_ACCESSOR_KEY.Rule]: (
           <span class="w-80 grow break-all">
-            {!props.conn.rulePayload
-              ? props.conn.rule
-              : `${props.conn.rule} -> ${props.conn.rulePayload}`}
+            {props.conn.rule}
+            {props.conn.rulePayload && <>: {props.conn.rulePayload}</>}
           </span>
         ),
         [CONNECTIONS_TABLE_ACCESSOR_KEY.Process]: (
           <span class="w-80 grow break-all">{getProcessFromConnection(props.conn)}</span>
         ),
         [CONNECTIONS_TABLE_ACCESSOR_KEY.Chains]: (
-          <span class="w-80 grow break-all">
-            {last(props.conn.chains)}=&gt;{first(props.conn.chains)}
+          <span class="flex w-80 grow items-center gap-1 break-all">
+            {last(props.conn.chains)}
+            {last(props.conn.chains) !== first(props.conn.chains) && (
+              <>
+                <ArrowRightCircleIcon class="h-4 w-4" />
+                {first(props.conn.chains)}
+              </>
+            )}
           </span>
         ),
         [CONNECTIONS_TABLE_ACCESSOR_KEY.Download]: (
-          <div class="whitespace-nowrap text-right">
+          <div class="flex items-center gap-1 whitespace-nowrap">
             {prettyBytesHelper(props.conn.download)}
-            <ArrowDownIcon class="-mt-1 ml-1 inline-block h-4 w-4" />
+            <ArrowDownIcon class="h-4 w-4" />
           </div>
         ),
         [CONNECTIONS_TABLE_ACCESSOR_KEY.Upload]: (
-          <div class="whitespace-nowrap text-right">
+          <div class="flex items-center gap-1 whitespace-nowrap">
             {prettyBytesHelper(props.conn.upload)}
-            <ArrowUpIcon class="-mt-1 ml-1 inline-block h-4 w-4" />
+            <ArrowUpIcon class="h-4 w-4" />
           </div>
         ),
         [CONNECTIONS_TABLE_ACCESSOR_KEY.DlSpeed]: (
-          <div class="whitespace-nowrap text-right">
+          <div class="flex items-center gap-1 whitespace-nowrap">
             {prettyBytesHelper(props.conn.downloadSpeed)}/s
-            <ArrowDownCircleIcon class="-mt-1 ml-1 inline-block h-4 w-4" />
+            <ArrowDownCircleIcon class="h-4 w-4" />
           </div>
         ),
         [CONNECTIONS_TABLE_ACCESSOR_KEY.UlSpeed]: (
-          <div class="whitespace-nowrap text-right">
+          <div class="flex items-center gap-1 whitespace-nowrap">
             {prettyBytesHelper(props.conn.uploadSpeed)}/s
-            <ArrowUpCircleIcon class="-mt-1 ml-1 inline-block h-4 w-4" />
+            <ArrowUpCircleIcon class="h-4 w-4" />
           </div>
         ),
         [CONNECTIONS_TABLE_ACCESSOR_KEY.ConnectTime]: (
-          <div class="whitespace-nowrap text-right">{fromNow(props.conn.start)}</div>
+          <div class="gap-1 whitespace-nowrap">{fromNow(props.conn.start)}</div>
         ),
         [CONNECTIONS_TABLE_ACCESSOR_KEY.Details]: (
           <button
diff --git a/src/components/connections/ConnectionTable.vue b/src/components/connections/ConnectionTable.vue
index 1663a5bd..8281bd05 100644
--- a/src/components/connections/ConnectionTable.vue
+++ b/src/components/connections/ConnectionTable.vue
@@ -133,6 +133,7 @@ import { connectionTableColumns, tableSize } from '@/store/settings'
 import type { Connection } from '@/types'
 import {
   ArrowDownCircleIcon,
+  ArrowRightCircleIcon,
   ArrowUpCircleIcon,
   InformationCircleIcon,
   MagnifyingGlassMinusIcon,
@@ -156,7 +157,7 @@ import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { twMerge } from 'tailwind-merge'
-import { computed, h, ref } from 'vue'
+import { computed, h, ref, type VNode } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { handlerInfo } = useConnections()
@@ -230,12 +231,35 @@ const columns: ColumnDef<Connection>[] = [
     header: () => t('rule'),
     id: CONNECTIONS_TABLE_ACCESSOR_KEY.Rule,
     accessorFn: (original) =>
-      !original.rulePayload ? original.rule : `${original.rule} -> ${original.rulePayload}`,
+      !original.rulePayload ? original.rule : `${original.rule}: ${original.rulePayload}`,
   },
   {
     header: () => t('chains'),
     id: CONNECTIONS_TABLE_ACCESSOR_KEY.Chains,
-    accessorFn: (original) => original.chains.slice().reverse().join(' -> '),
+    accessorFn: (original) => original.chains.join(','),
+    cell: ({ row }) => {
+      const chains: VNode[] = []
+
+      row.original.chains.forEach((chain, index) => {
+        chains.push(h('span', chain))
+
+        if (index < row.original.chains.length - 1) {
+          chains.push(
+            h(ArrowRightCircleIcon, {
+              class: 'h-4 w-4',
+            }),
+          )
+        }
+      })
+
+      return h(
+        'div',
+        {
+          class: 'inline-flex items-center gap-1',
+        },
+        chains,
+      )
+    },
   },
   {
     header: () => t('connectTime'),
diff --git a/src/components/proxies/ProxyGroup.vue b/src/components/proxies/ProxyGroup.vue
index 41bdb16b..030ff737 100644
--- a/src/components/proxies/ProxyGroup.vue
+++ b/src/components/proxies/ProxyGroup.vue
@@ -22,7 +22,7 @@
           @click.stop="handlerLatencyTest"
         />
       </div>
-      <div class="flex items-center gap-2">
+      <div class="mt-[2px] flex items-center gap-2">
         <div class="flex flex-1 items-center gap-1">
           <template v-if="proxyGroup.now">
             <ArrowRightCircleIcon class="h-4 w-4" />
diff --git a/src/components/rules/RuleCard.vue b/src/components/rules/RuleCard.vue
index bf70929d..6823e312 100644
--- a/src/components/rules/RuleCard.vue
+++ b/src/components/rules/RuleCard.vue
@@ -22,12 +22,17 @@
         <ArrowRightCircleIcon class="h-4 w-4" />
         <ProxyName :name="proxyNode.now" />
       </template>
-      <span :class="latencyColor">{{ latency }}ms</span>
+      <span
+        v-if="latency !== NOT_CONNECTED"
+        :class="latencyColor"
+        >{{ latency }}ms</span
+      >
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { NOT_CONNECTED } from '@/config'
 import { getColorForLatency } from '@/helper'
 import { getLatencyByName, proxyMap } from '@/store/proxies'
 import type { Rule } from '@/types'
diff --git a/src/components/settings/SourceIPLabels.vue b/src/components/settings/SourceIPLabels.vue
index 38bfbd31..3114e9ba 100644
--- a/src/components/settings/SourceIPLabels.vue
+++ b/src/components/settings/SourceIPLabels.vue
@@ -6,7 +6,7 @@
       :key="ip"
       class="flex items-center gap-2"
     >
-      {{ ip }} ->
+      {{ ip }} <ArrowRightCircleIcon class="h-4 w-4" />
       <input
         type="text"
         class="input input-sm input-bordered w-24"
@@ -43,7 +43,7 @@
 
 <script setup lang="ts">
 import { sourceIPLabelMap } from '@/store/settings'
-import { MinusCircleIcon, PlusIcon } from '@heroicons/vue/24/outline'
+import { ArrowRightCircleIcon, MinusCircleIcon, PlusIcon } from '@heroicons/vue/24/outline'
 import { computed, reactive } from 'vue'
 
 const sourceIPs = computed(() => {