fix: connections count

src/components/rules/RuleCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="twMerge('card gap-1 p-2 text-sm', !rule.payload && 'gap-0')">
+  <div :class="twMerge('card gap-2 p-2 text-sm', !rule.payload && 'gap-0')">
     <div>
       <span class="mr-2 inline-block min-w-4 text-center">{{ index }}.</span>
       <span class="mr-2 text-base-content/60">{{ rule.type }}:</span>

src/components/sidebar/ConnectionTabs.vue

@@ -1,28 +1,28 @@
 <template>
   <div class="tabs-boxed tabs tabs-sm">
     <a
+      v-for="tab in Object.values(CONNECTION_TAB_TYPE)"
+      :key="tab"
       role="tab"
-      :class="twMerge('tab', connectionTabShow === CONNECTION_TAB_TYPE.ACTIVE && 'tab-active')"
-      @click="() => (connectionTabShow = CONNECTION_TAB_TYPE.ACTIVE)"
-      >{{ $t('activeConnections') }}
-      <template v-if="connectionTabShow === CONNECTION_TAB_TYPE.ACTIVE">
-        ({{ renderConnections.length }})
-      </template>
-    </a>
-    <a
-      role="tab"
-      :class="twMerge('tab', connectionTabShow === CONNECTION_TAB_TYPE.CLOSED && 'tab-active')"
-      @click="() => (connectionTabShow = CONNECTION_TAB_TYPE.CLOSED)"
-      >{{ $t('closedConnections') }}
-      <template v-if="connectionTabShow === CONNECTION_TAB_TYPE.CLOSED">
-        ({{ renderConnections.length }})
-      </template>
+      :class="twMerge('tab', connectionTabShow === tab && 'tab-active')"
+      @click="() => (connectionTabShow = tab)"
+      >{{ $t(tab) }}
+      <template v-if="connectionTabShow === tab"> ({{ connectionsCount }}) </template>
     </a>
   </div>
 </template>
 
 <script setup lang="ts">
 import { CONNECTION_TAB_TYPE } from '@/config'
-import { connectionTabShow, renderConnections } from '@/store/connections'
+import { connections, connectionTabShow, renderConnections } from '@/store/connections'
 import { twMerge } from 'tailwind-merge'
+import { computed } from 'vue'
+
+const connectionsCount = computed(() => {
+  if (renderConnections.value.length !== connections.value.length) {
+    return `${renderConnections.value.length} / ${connections.value.length}`
+  }
+
+  return connections.value.length
+})
 </script>

src/config/index.ts

@@ -90,8 +90,8 @@ export enum SORT_DIRECTION {
 }
 
 export enum CONNECTION_TAB_TYPE {
-  ACTIVE = 'active',
-  CLOSED = 'closed',
+  ACTIVE = 'activeConnections',
+  CLOSED = 'closedConnections',
 }
 
 export enum LOG_LEVEL {

src/i18n/zh.ts

@@ -25,8 +25,8 @@ const zh: LANG_MESSAGE = {
   sortBy: '排序方式',
   rule: '规则',
   sourceIP: '源IP',
-  activeConnections: '活跃连接',
-  closedConnections: '已关闭连接',
+  activeConnections: '活跃',
+  closedConnections: '已关闭',
   logLevel: '日志等级',
   twoColumnProxyGroup: '双列显示代理组',
   type: '类型',