Add TUN device name setting support to easytier-gui

easytier-gui/src/components/Config.vue

@@ -174,7 +174,7 @@ onMounted(async () => {
                 <label for="network_secret">{{ t('network_secret') }}</label>
                 <InputText
                   id="network_secret" v-model="curNetwork.network_secret"
-                  aria-describedby=" network_secret-help"
+                  aria-describedby="network_secret-help"
                 />
               </div>
             </div>
@@ -278,11 +278,21 @@ onMounted(async () => {
               <div class="flex flex-column gap-2 basis-5/12 grow">
                 <label for="rpc_port">{{ t('rpc_port') }}</label>
                 <InputNumber
-                  id="rpc_port" v-model="curNetwork.rpc_port" aria-describedby="username-help"
+                  id="rpc_port" v-model="curNetwork.rpc_port" aria-describedby="rpc_port-help"
                   :format="false" :min="0" :max="65535"
                 />
               </div>
             </div>
+
+            <div class="flex flex-row gap-x-9 flex-wrap">
+              <div class="flex flex-column gap-2 basis-5/12 grow">
+                <label for="dev_name">{{ t('dev_name') }}</label>
+                <InputText
+                  id="dev_name" v-model="curNetwork.dev_name" aria-describedby="dev_name-help" :format="true"
+                  :placeholder="t('dev_name_placeholder')"
+                />
+              </div>
+            </div>
           </div>
         </Panel>
 

easytier-gui/src/components/Status.vue

@@ -131,8 +131,16 @@ const myNodeInfoChips = computed(() => {
   if (!my_node_info)
     return chips
 
-  // virtual ipv4
+  // TUN Device Name
+  const dev_name = curNetworkInst.value.detail?.dev_name
+  if (dev_name) {
+    chips.push({
+      label: `TUN Device Name: ${dev_name}`,
+      icon: '',
+    } as Chip)
+  }
 
+  // virtual ipv4
   chips.push({
     label: `Virtual IPv4: ${my_node_info.virtual_ipv4}`,
     icon: '',

easytier-gui/src/types/network.ts

@@ -32,6 +32,8 @@ export interface NetworkConfig {
   listener_urls: string[]
   rpc_port: number
   latency_first: boolean
+
+  dev_name: string
 }
 
 export function DEFAULT_NETWORK_CONFIG(): NetworkConfig {
@@ -64,6 +66,7 @@ export function DEFAULT_NETWORK_CONFIG(): NetworkConfig {
     ],
     rpc_port: 0,
     latency_first: true,
+    dev_name: '',
   }
 }
 
@@ -77,6 +80,7 @@ export interface NetworkInstance {
 }
 
 export interface NetworkInstanceRunningInfo {
+  dev_name: string
   my_node_info: NodeInfo
   events: Record<string, any>
   node_info: NodeInfo