✨ feat: custom hostname

easytier-gui/src/components/Config.vue

@@ -32,6 +32,18 @@ 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
+  }
+}
 </script>
 
 <template>
@@ -151,6 +163,14 @@ 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" @blur="validateHostname"
+                />
+              </div>
+            </div>
           </div>
         </Panel>