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

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>