Perf/front page (#316)

* 🐳 chore: dependencies

* 🐞 fix: minor style issues

fixed background white patches in dark mode
fixed the line height of the status label, which resulted in a bloated appearance

* 🌈 style: lint

* ✨ feat: about

easytier-gui/src/components/Config.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
-import { getOsHostname } from '~/composables/network'
-import { NetworkingMethod } from '~/types/network'
-const { t } = useI18n()
-
 import { ping } from 'tauri-plugin-vpnservice-api'
+import { getOsHostname } from '~/composables/network'
+
+import { NetworkingMethod } from '~/types/network'
 
 const props = defineProps<{
   configInvalid?: boolean
@@ -14,6 +13,8 @@ const props = defineProps<{
 
 defineEmits(['runNetwork'])
 
+const { t } = useI18n()
+
 const networking_methods = ref([
   { value: NetworkingMethod.PublicServer, label: () => t('public_server') },
   { value: NetworkingMethod.Manual, label: () => t('manual') },
@@ -32,24 +33,26 @@ const curNetwork = computed(() => {
   return networkStore.curNetwork
 })
 
-const protos:{ [proto: string] : number; } = {'tcp': 11010, 'udp': 11010, 'wg':11011, 'ws': 11011, 'wss': 11012}
+const protos: { [proto: string]: number } = { tcp: 11010, udp: 11010, wg: 11011, ws: 11011, wss: 11012 }
 
 function searchUrlSuggestions(e: { query: string }): string[] {
   const query = e.query
-  let ret = []
+  const ret = []
   // if query match "^\w+:.*", then no proto prefix
   if (query.match(/^\w+:.*/)) {
     // if query is a valid url, then add to suggestions
     try {
       new URL(query)
       ret.push(query)
-    } catch (e) {}
-  } else {
-    for (let proto in protos) {
-      let item = proto + '://' + query
+    }
+    catch (e) {}
+  }
+  else {
+    for (const proto in protos) {
+      let item = `${proto}://${query}`
       // if query match ":\d+$", then no port suffix
       if (!query.match(/:\d+$/)) {
-        item += ':' + protos[proto]
+        item += `:${protos[proto]}`
       }
       ret.push(item)
     }
@@ -58,45 +61,45 @@ function searchUrlSuggestions(e: { query: string }): string[] {
   return ret
 }
 
-
 const publicServerSuggestions = ref([''])
 
-const searchPresetPublicServers = (e: { query: string }) => {
-    const presetPublicServers = [
-      'tcp://easytier.public.kkrainbow.top:11010',
-    ]
+function searchPresetPublicServers(e: { query: string }) {
+  const presetPublicServers = [
+    'tcp://easytier.public.kkrainbow.top:11010',
+  ]
 
-    let query = e.query
-    // if query is sub string of presetPublicServers, add to suggestions
-    let ret = presetPublicServers.filter((item) => item.includes(query))
-    // add additional suggestions
-    if (query.length > 0) {
-      ret = ret.concat(searchUrlSuggestions(e))
-    }
+  const query = e.query
+  // if query is sub string of presetPublicServers, add to suggestions
+  let ret = presetPublicServers.filter(item => item.includes(query))
+  // add additional suggestions
+  if (query.length > 0) {
+    ret = ret.concat(searchUrlSuggestions(e))
+  }
 
-    publicServerSuggestions.value = ret
+  publicServerSuggestions.value = ret
 }
 
 const peerSuggestions = ref([''])
 
-const searchPeerSuggestions = (e: { query: string }) => {
+function searchPeerSuggestions(e: { query: string }) {
   peerSuggestions.value = searchUrlSuggestions(e)
 }
 
 const listenerSuggestions = ref([''])
 
-const searchListenerSuggestiong = (e: { query: string }) => {
-  let ret = []
+function searchListenerSuggestiong(e: { query: string }) {
+  const ret = []
 
-  for (let proto in protos) {
-    let item = proto + '://0.0.0.0:';
+  for (const proto in protos) {
+    let item = `${proto}://0.0.0.0:`
     // if query is a number, use it as port
     if (e.query.match(/^\d+$/)) {
       item += e.query
-    } else {
+    }
+    else {
       item += protos[proto]
     }
-    
+
     if (item.includes(e.query)) {
       ret.push(item)
     }
@@ -112,7 +115,7 @@ const searchListenerSuggestiong = (e: { query: string }) => {
 function validateHostname() {
   if (curNetwork.value.hostname) {
     // eslint no-useless-escape
-    let name = curNetwork.value.hostname!.replaceAll(/[^\u4E00-\u9FA5a-zA-Z0-9\-]*/g, '')
+    let name = curNetwork.value.hostname!.replaceAll(/[^\u4E00-\u9FA5a-z0-9\-]*/gi, '')
     if (name.length > 32)
       name = name.substring(0, 32)
 
@@ -132,7 +135,7 @@ onMounted(async () => {
 <template>
   <div class="flex flex-column h-full">
     <div class="flex flex-column">
-      <div class="w-10/12 self-center ">
+      <div class="w-10/12 self-center mb-3">
         <Message severity="warn">
           {{ t('dhcp_experimental_warning') }}
         </Message>
@@ -151,8 +154,10 @@ onMounted(async () => {
                   </label>
                 </div>
                 <InputGroup>
-                  <InputText id="virtual_ip" v-model="curNetwork.virtual_ipv4" :disabled="curNetwork.dhcp"
-                    aria-describedby="virtual_ipv4-help" />
+                  <InputText
+                    id="virtual_ip" v-model="curNetwork.virtual_ipv4" :disabled="curNetwork.dhcp"
+                    aria-describedby="virtual_ipv4-help"
+                  />
                   <InputGroupAddon>
                     <span>/24</span>
                   </InputGroupAddon>
@@ -167,23 +172,29 @@ onMounted(async () => {
               </div>
               <div class="flex flex-column gap-2 basis-5/12 grow">
                 <label for="network_secret">{{ t('network_secret') }}</label>
-                <InputText id="network_secret" v-model="curNetwork.network_secret"
-                  aria-describedby=" network_secret-help" />
+                <InputText
+                  id="network_secret" v-model="curNetwork.network_secret"
+                  aria-describedby=" network_secret-help"
+                />
               </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="nm">{{ t('networking_method') }}</label>
-                <SelectButton v-model="curNetwork.networking_method" :options="networking_methods" :option-label="(v) => v.label()" option-value="value"></SelectButton>
+                <SelectButton v-model="curNetwork.networking_method" :options="networking_methods" :option-label="(v) => v.label()" option-value="value" />
                 <div class="items-center flex flex-row p-fluid gap-x-1">
-                  <AutoComplete v-if="curNetwork.networking_method === NetworkingMethod.Manual" id="chips"
+                  <AutoComplete
+                    v-if="curNetwork.networking_method === NetworkingMethod.Manual" id="chips"
                     v-model="curNetwork.peer_urls" :placeholder="t('chips_placeholder', ['tcp://8.8.8.8:11010'])"
-                    class="grow" multiple fluid :suggestions="peerSuggestions" @complete="searchPeerSuggestions"/>
+                    class="grow" multiple fluid :suggestions="peerSuggestions" @complete="searchPeerSuggestions"
+                  />
 
-                  <AutoComplete v-if="curNetwork.networking_method === NetworkingMethod.PublicServer" :suggestions="publicServerSuggestions"
-                    :virtualScrollerOptions="{ itemSize: 38 }" class="grow" dropdown @complete="searchPresetPublicServers" :completeOnFocus="true"
-                    v-model="curNetwork.public_server_url"/>
+                  <AutoComplete
+                    v-if="curNetwork.networking_method === NetworkingMethod.PublicServer" v-model="curNetwork.public_server_url"
+                    :suggestions="publicServerSuggestions" :virtual-scroller-options="{ itemSize: 38 }" class="grow" dropdown :complete-on-focus="true"
+                    @complete="searchPresetPublicServers"
+                  />
                 </div>
               </div>
             </div>
@@ -197,64 +208,80 @@ onMounted(async () => {
             <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" />
+                <InputText
+                  id="hostname" v-model="curNetwork.hostname" aria-describedby="hostname-help" :format="true"
+                  :placeholder="t('hostname_placeholder', [osHostname])" @blur="validateHostname"
+                />
               </div>
             </div>
 
             <div class="flex flex-row gap-x-9 flex-wrap w-full">
               <div class="flex flex-column gap-2 grow p-fluid">
                 <label for="username">{{ t('proxy_cidrs') }}</label>
-                <Chips id="chips" v-model="curNetwork.proxy_cidrs"
-                  :placeholder="t('chips_placeholder', ['10.0.0.0/24'])" separator=" " class="w-full" />
+                <Chips
+                  id="chips" v-model="curNetwork.proxy_cidrs"
+                  :placeholder="t('chips_placeholder', ['10.0.0.0/24'])" separator=" " class="w-full"
+                />
               </div>
             </div>
 
             <div class="flex flex-row gap-x-9 flex-wrap ">
               <div class="flex flex-column gap-2 grow">
                 <label for="username">VPN Portal</label>
-                  <ToggleButton v-model="curNetwork.enable_vpn_portal" on-icon="pi pi-check" off-icon="pi pi-times"
-                    :on-label="t('off_text')" :off-label="t('on_text')" class="w-48"/>
-                  <div class="items-center flex flex-row gap-x-4" v-if="curNetwork.enable_vpn_portal">
-                    <div class="min-w-64">
-                      <InputGroup>
-                        <InputText v-model="curNetwork.vpn_portal_client_network_addr"
-                          :placeholder="t('vpn_portal_client_network')" />
-                        <InputGroupAddon>
-                          <span>/{{ curNetwork.vpn_portal_client_network_len }}</span>
-                        </InputGroupAddon>
-                      </InputGroup>
+                <ToggleButton
+                  v-model="curNetwork.enable_vpn_portal" on-icon="pi pi-check" off-icon="pi pi-times"
+                  :on-label="t('off_text')" :off-label="t('on_text')" class="w-48"
+                />
+                <div v-if="curNetwork.enable_vpn_portal" class="items-center flex flex-row gap-x-4">
+                  <div class="min-w-64">
+                    <InputGroup>
+                      <InputText
+                        v-model="curNetwork.vpn_portal_client_network_addr"
+                        :placeholder="t('vpn_portal_client_network')"
+                      />
+                      <InputGroupAddon>
+                        <span>/{{ curNetwork.vpn_portal_client_network_len }}</span>
+                      </InputGroupAddon>
+                    </InputGroup>
 
-                      <InputNumber v-model="curNetwork.vpn_portal_listen_port" :allow-empty="false"
-                        :format="false" :min="0" :max="65535" class="w-8" fluid/>
-                    </div>
+                    <InputNumber
+                      v-model="curNetwork.vpn_portal_listen_port" :allow-empty="false"
+                      :format="false" :min="0" :max="65535" class="w-8" fluid
+                    />
                   </div>
+                </div>
               </div>
             </div>
 
             <div class="flex flex-row gap-x-9 flex-wrap">
               <div class="flex flex-column gap-2 grow p-fluid">
                 <label for="listener_urls">{{ t('listener_urls') }}</label>
-                <AutoComplete id="listener_urls" :suggestions="listenerSuggestions"
-                  class="w-full" dropdown @complete="searchListenerSuggestiong" :completeOnFocus="true"
-                  :placeholder="t('chips_placeholder', ['tcp://1.1.1.1:11010'])" 
-                  v-model="curNetwork.listener_urls" multiple/>
+                <AutoComplete
+                  id="listener_urls" v-model="curNetwork.listener_urls"
+                  :suggestions="listenerSuggestions" class="w-full" dropdown :complete-on-focus="true"
+                  :placeholder="t('chips_placeholder', ['tcp://1.1.1.1:11010'])"
+                  multiple @complete="searchListenerSuggestiong"
+                />
               </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="rpc_port">{{ t('rpc_port') }}</label>
-                <InputNumber id="rpc_port" v-model="curNetwork.rpc_port" aria-describedby="username-help"
-                  :format="false" :min="0" :max="65535" />
+                <InputNumber
+                  id="rpc_port" v-model="curNetwork.rpc_port" aria-describedby="username-help"
+                  :format="false" :min="0" :max="65535"
+                />
               </div>
             </div>
           </div>
         </Panel>
 
         <div class="flex pt-4 justify-content-center">
-          <Button :label="t('run_network')" icon="pi pi-arrow-right" icon-pos="right" :disabled="configInvalid"
-            @click="$emit('runNetwork', curNetwork)" />
+          <Button
+            :label="t('run_network')" icon="pi pi-arrow-right" icon-pos="right" :disabled="configInvalid"
+            @click="$emit('runNetwork', curNetwork)"
+          />
         </div>
       </div>
     </div>