perf: Optimizing the display of SubNet in node

src/views/node/index.vue

@@ -76,16 +76,20 @@ const columns = computed((): DataTableColumns<NodeData> => [
     title: t('app.name'),
     key: 'name',
     render(rowData) {
+      let routes = []
+      if (rowData.routes && rowData.routes.length > 0) {
+        routes = rowData.routes.filter(route => route.isPrimary)
+      }
       return h(
         'div',
         { style: { whiteSpace: 'pre-line' } },
         [
           h('span', rowData.givenName),
           h('br'),
           h('span', { style: { color: 'var(--test-color-fringe)' } }, rowData.name),
-          rowData.routes && rowData.routes.length > 0
+          routes.length > 0
             ? h(NodeSubNetDetails, {
-              nodeData: rowData,
+              routes: rowData.routes,
             })
             : '',
         ],

src/views/node/nodeSubNetDetails.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { NodeData } from '@/service/api/node'
 import RouteTable from '@/views/route/routeTable.vue'
+import type { RouteData } from '@/service'
 
 const props = defineProps(
   {
-    nodeData: {
-      type: Object as PropType<NodeData>,
+    routes: {
+      type: Array as () => Array<RouteData>,
       required: true,
     },
   },
 )
 
-const routeCount = props.nodeData.routes?.length
-const enableCount = props.nodeData.routes?.filter(route => route?.enabled)?.length
+const routeCount = props.routes?.length
+const enableCount = props.routes?.filter(route => route?.enabled)?.length
 
 const { t } = useI18n()
 </script>
@@ -24,7 +24,7 @@ const { t } = useI18n()
         {{ `${t('app.subnets')} ${enableCount}/${routeCount}` }}
       </n-tag>
     </template>
-    <RouteTable :routes="nodeData.routes" hide-node-name />
+    <RouteTable :routes="routes" hide-node-name />
   </n-popover>
 </template>