Fix/UI detail (#414)

easytier-gui/.vscode/settings.json

@@ -1,5 +1,86 @@
 {
-  "i18n-ally.localesPaths": [
-    "locales"
+  "cSpell.words": [
+    "easytier",
+    "Vite",
+    "vueuse",
+    "pinia",
+    "demi",
+    "antfu",
+    "iconify",
+    "intlify",
+    "vitejs",
+    "unplugin",
+    "pnpm"
+  ],
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.localesPaths": "locales",
+  "i18n-ally.sortKeys": true,
+  // Disable the default formatter
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    {
+      "rule": "style/*",
+      "severity": "off"
+    },
+    {
+      "rule": "format/*",
+      "severity": "off"
+    },
+    {
+      "rule": "*-indent",
+      "severity": "off"
+    },
+    {
+      "rule": "*-spacing",
+      "severity": "off"
+    },
+    {
+      "rule": "*-spaces",
+      "severity": "off"
+    },
+    {
+      "rule": "*-order",
+      "severity": "off"
+    },
+    {
+      "rule": "*-dangle",
+      "severity": "off"
+    },
+    {
+      "rule": "*-newline",
+      "severity": "off"
+    },
+    {
+      "rule": "*quotes",
+      "severity": "off"
+    },
+    {
+      "rule": "*semi",
+      "severity": "off"
+    }
+  ],
+  // The following is optional.
+  // It's better to put under project setting `.vscode/settings.json`
+  // to avoid conflicts with working with different eslint configs
+  // that does not support all formats.
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
   ]
 }

easytier-gui/package.json

@@ -18,6 +18,7 @@
     "@tauri-apps/plugin-os": "2.0.0-rc.1",
     "@tauri-apps/plugin-process": "2.0.0-rc.1",
     "@tauri-apps/plugin-shell": "2.0.0-rc.1",
+    "@vueuse/core": "^11.1.0",
     "aura": "link:@primevue\\themes\\aura",
     "ip-num": "1.5.1",
     "pinia": "^2.2.4",
@@ -38,7 +39,7 @@
     "@types/node": "^22.7.4",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^5.1.4",
-    "@vue-macros/volar": "^0.29.1",
+    "@vue-macros/volar": "0.30.3",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.12.0",
     "eslint-plugin-format": "^0.1.2",
@@ -57,5 +58,6 @@
     "vite-plugin-vue-layouts": "^0.11.0",
     "vue-i18n": "^10.0.0",
     "vue-tsc": "^2.1.6"
-  }
+  },
+  "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
 }

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

@@ -44,6 +44,8 @@ declare global {
   const mapWritableState: typeof import('pinia')['mapWritableState']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
+  const num2ipv4: typeof import('./composables/utils')['num2ipv4']
+  const num2ipv6: typeof import('./composables/utils')['num2ipv6']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
   const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
@@ -150,6 +152,8 @@ declare module 'vue' {
     readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly num2ipv4: UnwrapRef<typeof import('./composables/utils')['num2ipv4']>
+    readonly num2ipv6: UnwrapRef<typeof import('./composables/utils')['num2ipv6']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
     readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>

easytier-gui/src/components/Config.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
-import { ping } from 'tauri-plugin-vpnservice-api'
 import { getOsHostname } from '~/composables/network'
 
 import { NetworkingMethod } from '~/types/network'
@@ -42,10 +41,11 @@ function searchUrlSuggestions(e: { query: string }): string[] {
   if (query.match(/^\w+:.*/)) {
     // if query is a valid url, then add to suggestions
     try {
+      // eslint-disable-next-line no-new
       new URL(query)
       ret.push(query)
     }
-    catch (e) {}
+    catch {}
   }
   else {
     for (const proto in protos) {
@@ -128,18 +128,12 @@ const osHostname = ref<string>('')
 
 onMounted(async () => {
   osHostname.value = await getOsHostname()
-  osHostname.value = await ping('ffdklsajflkdsjl') || ''
 })
 </script>
 
 <template>
   <div class="flex flex-column h-full">
     <div class="flex flex-column">
-      <div class="w-10/12 self-center mb-3">
-        <Message severity="warn">
-          {{ t('dhcp_experimental_warning') }}
-        </Message>
-      </div>
       <div class="w-10/12 self-center ">
         <Panel :header="t('basic_settings')">
           <div class="flex flex-column gap-y-2">

easytier-gui/src/components/Status.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useTimeAgo } from '@vueuse/core'
 import { IPv4, IPv6 } from 'ip-num/IPNumber'
 import type { NodeInfo, PeerRoutePair } from '~/types/network'
 
@@ -111,6 +112,13 @@ function version(info: PeerRoutePair) {
   return info.route.version === '' ? 'unknown' : info.route.version
 }
 
+function ipFormat(info: PeerRoutePair) {
+  const ip = info.route.ipv4_addr
+  if (typeof ip === 'string')
+    return ip
+  return ip ? `${num2ipv4(ip.address)}/${ip.network_length}` : ''
+}
+
 const myNodeInfo = computed(() => {
   if (!curNetworkInst.value)
     return {} as NodeInfo
@@ -151,7 +159,7 @@ const myNodeInfoChips = computed(() => {
   const local_ipv4s = my_node_info.ips?.interface_ipv4s
   for (const [idx, ip] of local_ipv4s?.entries()) {
     chips.push({
-      label: `Local IPv4 ${idx}: ${IPv4.fromNumber(ip.addr)}`,
+      label: `Local IPv4 ${idx}: ${num2ipv4(ip)}`,
       icon: '',
     } as Chip)
   }
@@ -160,11 +168,7 @@ const myNodeInfoChips = computed(() => {
   const local_ipv6s = my_node_info.ips?.interface_ipv6s
   for (const [idx, ip] of local_ipv6s?.entries()) {
     chips.push({
-      label: `Local IPv6 ${idx}: ${IPv6.fromBigInt((BigInt(ip.part1) << BigInt(96))
-        + (BigInt(ip.part2) << BigInt(64))
-        + (BigInt(ip.part3) << BigInt(32))
-        + BigInt(ip.part4),
-      )}`,
+      label: `Local IPv6 ${idx}: ${num2ipv6(ip)}`,
       icon: '',
     } as Chip)
   }
@@ -312,16 +316,18 @@ function showEventLogs() {
 
 <template>
   <div>
-    <Dialog v-model:visible="dialogVisible" modal :header="t(dialogHeader)" :style="{ width: '70%' }">
-      <Panel>
-        <ScrollPanel style="width: 100%; height: 400px">
+    <Dialog v-model:visible="dialogVisible" modal :header="t(dialogHeader)" class="w-2/3 h-auto">
+      <ScrollPanel v-if="dialogHeader === 'vpn_portal_config'">
         <pre>{{ dialogContent }}</pre>
       </ScrollPanel>
-      </Panel>
-      <Divider />
-      <div class="flex justify-content-end gap-2">
-        <Button type="button" :label="t('close')" @click="dialogVisible = false" />
-      </div>
+      <Timeline v-else :value="dialogContent">
+        <template #opposite="slotProps">
+          <small class="text-surface-500 dark:text-surface-400">{{ useTimeAgo(Date.parse(slotProps.item[0])) }}</small>
+        </template>
+        <template #content="slotProps">
+          {{ slotProps.item[1] }}
+        </template>
+      </Timeline>
     </Dialog>
 
     <Card v-if="curNetworkInst?.error_msg">
@@ -405,14 +411,22 @@ function showEventLogs() {
         </template>
         <template #content>
           <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="ipFormat" style="width: 100px;" :header="t('virtual_ipv4')" />
+            <Column style="max-width: 250px;" :header="t('hostname')">
+              <template #body="slotProps">
+                <span v-tooltip="slotProps.data.route.hostname">{{ slotProps.data.route.hostname }}</span>
+              </template>
+            </Column>
             <Column :field="routeCost" style="width: 100px;" :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: 100px;" :header="t('loss_rate')" />
-            <Column :field="version" style="width: 100px;" :header="t('status.version')" />
+            <Column style="width: 100px;" :header="t('status.version')">
+              <template #body="slotProps">
+                <span>{{ version(slotProps.data) }}</span>
+              </template>
+            </Column>
           </DataTable>
         </template>
       </Card>

easytier-gui/src/composables/utils.ts

@@ -0,0 +1,15 @@
+import { IPv4, IPv6 } from 'ip-num/IPNumber'
+import type { Ipv4Addr, Ipv6Addr } from '~/types/network'
+
+export function num2ipv4(ip: Ipv4Addr) {
+  return IPv4.fromNumber(ip.addr)
+}
+
+export function num2ipv6(ip: Ipv6Addr) {
+  return IPv6.fromBigInt(
+    (BigInt(ip.part1) << BigInt(96))
+    + (BigInt(ip.part2) << BigInt(64))
+    + (BigInt(ip.part3) << BigInt(32))
+    + BigInt(ip.part4),
+  )
+}

easytier-gui/src/modules/auto_launch.ts

@@ -2,7 +2,16 @@ import { disable, enable, isEnabled } from '@tauri-apps/plugin-autostart'
 
 export async function loadAutoLaunchStatusAsync(target_enable: boolean): Promise<boolean> {
   try {
-    target_enable ? await enable() : await disable()
+    if (target_enable) {
+      await enable()
+    }
+    else {
+      // 消除没有配置自启动时进行关闭操作报错
+      try {
+        await disable()
+      }
+      catch { }
+    }
     localStorage.setItem('auto_launch', JSON.stringify(await isEnabled()))
     return isEnabled()
   }

easytier-gui/src/pages/index.vue

@@ -181,7 +181,7 @@ const setting_menu_items = ref([
         label: () => t('logging_open_dir'),
         icon: 'pi pi-folder-open',
         command: async () => {
-          console.log('open log dir', await appLogDir())
+          // console.log('open log dir', await appLogDir())
           await open(await appLogDir())
         },
       })

easytier-gui/src/types/network.ts

@@ -137,7 +137,10 @@ export interface StunInfo {
 
 export interface Route {
   peer_id: number
-  ipv4_addr: string
+  ipv4_addr: {
+    address: Ipv4Addr
+    network_length: number
+  } | string | null
   next_hop_peer_id: number
   cost: number
   proxy_cidrs: string[]