feat(ui): Display network names and optimize list loading (#1503)

easytier-gui/src/auto-imports.d.ts

@@ -27,6 +27,7 @@ declare global {
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const getEasytierVersion: typeof import('./composables/backend')['getEasytierVersion']
+  const getNetworkMetas: typeof import('./composables/backend')['getNetworkMetas']
   const h: typeof import('vue')['h']
   const initMobileVpnService: typeof import('./composables/mobile_vpn')['initMobileVpnService']
   const inject: typeof import('vue')['inject']
@@ -139,6 +140,7 @@ declare module 'vue' {
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getEasytierVersion: UnwrapRef<typeof import('./composables/backend')['getEasytierVersion']>
+    readonly getNetworkMetas: UnwrapRef<typeof import('./composables/backend')['getNetworkMetas']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly initMobileVpnService: UnwrapRef<typeof import('./composables/mobile_vpn')['initMobileVpnService']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>

easytier-gui/src/composables/backend.ts

@@ -1,5 +1,6 @@
 import { invoke } from '@tauri-apps/api/core'
 import { Api, type NetworkTypes } from 'easytier-frontend-lib'
+import { GetNetworkMetasResponse } from 'node_modules/easytier-frontend-lib/dist/modules/api'
 import { getAutoLaunchStatusAsync } from '~/modules/auto_launch'
 
 type NetworkConfig = NetworkTypes.NetworkConfig
@@ -63,3 +64,7 @@ export async function sendConfigs() {
   let autoStartInstIds = getAutoLaunchStatusAsync() ? JSON.parse(localStorage.getItem('autoStartInstIds') || '[]') : []
   return await invoke('load_configs', { configs: networkList, enabledNetworks: autoStartInstIds })
 }
+
+export async function getNetworkMetas(instanceIds: string[]) {
+  return await invoke<GetNetworkMetasResponse>('get_network_metas', { instanceIds })
+}

easytier-gui/src/modules/api.ts

@@ -40,5 +40,8 @@ export class GUIRemoteClient implements Api.RemoteClient {
             return { error: e + "" };
         }
     }
+    async get_network_metas(instance_ids: string[]): Promise<Api.GetNetworkMetasResponse> {
+        return await backend.getNetworkMetas(instance_ids);
+    }
 
 }