Merge branch 'EasyTier:main' into perf/ts-type

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

@@ -20,6 +20,7 @@ declare global {
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getOsHostname: typeof import('./composables/network')['getOsHostname']
   const h: typeof import('vue')['h']
   const inject: typeof import('vue')['inject']
   const isProxy: typeof import('vue')['isProxy']
@@ -108,6 +109,7 @@ declare module 'vue' {
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly getOsHostname: UnwrapRef<typeof import('./composables/network')['getOsHostname']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
@@ -189,6 +191,7 @@ declare module '@vue/runtime-core' {
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly getOsHostname: UnwrapRef<typeof import('./composables/network')['getOsHostname']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>

easytier-gui/src/components/Config.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
+import { getOsHostname } from '~/composables/network'
 import { i18n } from '~/modules/i18n'
 import { NetworkingMethod } from '~/types/network'
 
@@ -32,6 +33,24 @@ const curNetwork = computed(() => {
 const presetPublicServers = [
   'tcp://easytier.public.kkrainbow.top:11010',
 ]
+
+function validateHostname() {
+  if (curNetwork.value.hostname) {
+    // eslint no-useless-escape
+    let name = curNetwork.value.hostname!.replaceAll(/[^\u4E00-\u9FA5a-zA-Z0-9\-]*/g, '')
+    if (name.length > 32)
+      name = name.substring(0, 32)
+
+    if (curNetwork.value.hostname !== name)
+      curNetwork.value.hostname = name
+  }
+}
+
+const osHostname = ref<string>('')
+
+onMounted(async () => {
+  osHostname.value = await getOsHostname()
+})
 </script>
 
 <template>
@@ -151,6 +170,15 @@ const presetPublicServers = [
                 />
               </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="hostname">{{ $t('hostname') }}</label>
+                <InputText
+                  id="hostname" v-model="curNetwork.hostname" aria-describedby="hostname-help" :format="true"
+                  :placeholder="$t('hostname_placeholder', [osHostname])" @blur="validateHostname"
+                />
+              </div>
+            </div>
           </div>
         </Panel>
 

easytier-gui/src/components/Status.vue

@@ -350,14 +350,14 @@ function showEventLogs() {
         {{ $t('peer_info') }}
       </template>
       <template #content>
-        <DataTable :value="peerRouteInfos" table-style="min-width: 50rem">
-          <Column field="route.ipv4_addr" :header="$t('virtual_ipv4')" />
-          <Column field="route.hostname" :header="$t('hostname')" />
-          <Column :field="routeCost" :header="$t('route_cost')" />
-          <Column :field="latencyMs" :header="$t('latency')" />
-          <Column :field="txBytes" :header="$t('upload_bytes')" />
-          <Column :field="rxBytes" :header="$t('download_bytes')" />
-          <Column :field="lossRate" :header="$t('loss_rate')" />
+        <DataTable :value="peerRouteInfos" column-resize-mode="fit" table-style="width: 100%">
+          <Column field="route.ipv4_addr" style="width: 100px;" :header="$t('virtual_ipv4')" />
+          <Column field="route.hostname" style="max-width: 250px;" :header="$t('hostname')" />
+          <Column :field="routeCost" style="width: 60px;" :header="$t('route_cost')" />
+          <Column :field="latencyMs" style="width: 80px;" :header="$t('latency')" />
+          <Column :field="txBytes" style="width: 80px;" :header="$t('upload_bytes')" />
+          <Column :field="rxBytes" style="width: 80px;" :header="$t('download_bytes')" />
+          <Column :field="lossRate" style="width: 60px;" :header="$t('loss_rate')" />
         </DataTable>
       </template>
     </Card>

easytier-gui/src/composables/network.ts

@@ -16,3 +16,7 @@ export async function retainNetworkInstance(instanceIds: string[]): Promise<stri
 export async function collectNetworkInfos(): Promise<Record<string, NetworkInstanceRunningInfo>> {
   return JSON.parse(await invoke<string>('collect_network_infos'))
 }
+
+export async function getOsHostname(): Promise<string> {
+  return await invoke('get_os_hostname')
+}

easytier-gui/src/types/network.ts

@@ -10,6 +10,7 @@ export interface NetworkConfig {
   instance_id: string
 
   virtual_ipv4: string
+  hostname?: string
   network_name: string
   network_secret: string