show traffic stats chart in web/gui (#1410)

easytier-gui/package.json

@@ -13,18 +13,17 @@
     "lint:fix": "eslint . --ignore-pattern src-tauri --fix"
   },
   "dependencies": {
-    "@primevue/themes": "4.3.3",
+    "@primeuix/themes": "^1.2.3",
     "@tauri-apps/plugin-autostart": "2.0.0",
     "@tauri-apps/plugin-clipboard-manager": "2.3.0",
     "@tauri-apps/plugin-os": "2.3.0",
     "@tauri-apps/plugin-process": "2.3.0",
     "@tauri-apps/plugin-shell": "2.3.0",
     "@vueuse/core": "^11.2.0",
-    "aura": "link:@primevue\\themes\\aura",
     "easytier-frontend-lib": "workspace:*",
     "ip-num": "1.5.1",
     "pinia": "^2.2.4",
-    "primevue": "4.3.3",
+    "primevue": "^4.3.9",
     "tauri-plugin-vpnservice-api": "workspace:*",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
@@ -32,7 +31,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^3.7.3",
     "@intlify/unplugin-vue-i18n": "^5.2.0",
-    "@primevue/auto-import-resolver": "4.3.3",
+    "@primevue/auto-import-resolver": "4.3.9",
     "@tauri-apps/api": "2.7.0",
     "@tauri-apps/cli": "2.7.1",
     "@types/default-gateway": "^7.2.2",

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

@@ -9,7 +9,6 @@ declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const MenuItemExit: typeof import('./composables/tray')['MenuItemExit']
   const MenuItemShow: typeof import('./composables/tray')['MenuItemShow']
-  const ReinitTray: typeof import('./composables/tray')['ReinitTray']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const collectNetworkInfos: typeof import('./composables/network')['collectNetworkInfos']
   const computed: typeof import('vue')['computed']
@@ -18,10 +17,8 @@ declare global {
   const customRef: typeof import('vue')['customRef']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
-  const definePage: typeof import('unplugin-vue-router/runtime')['definePage']
   const defineStore: typeof import('pinia')['defineStore']
   const effectScope: typeof import('vue')['effectScope']
-  const event2human: typeof import('./composables/utils')['event2human']
   const generateMenuItem: typeof import('./composables/tray')['generateMenuItem']
   const generateNetworkConfig: typeof import('./composables/network')['generateNetworkConfig']
   const getActivePinia: typeof import('pinia')['getActivePinia']
@@ -30,7 +27,6 @@ declare global {
   const getEasytierVersion: typeof import('./composables/network')['getEasytierVersion']
   const getOsHostname: typeof import('./composables/network')['getOsHostname']
   const h: typeof import('vue')['h']
-  const initMobileService: typeof import('./composables/mobile_vpn')['initMobileService']
   const initMobileVpnService: typeof import('./composables/mobile_vpn')['initMobileVpnService']
   const inject: typeof import('vue')['inject']
   const isAutostart: typeof import('./composables/network')['isAutostart']
@@ -38,7 +34,6 @@ declare global {
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
-  const loadRunningInstanceIdsFromLocalStorage: typeof import('./stores/network')['loadRunningInstanceIdsFromLocalStorage']
   const mapActions: typeof import('pinia')['mapActions']
   const mapGetters: typeof import('pinia')['mapGetters']
   const mapState: typeof import('pinia')['mapState']
@@ -46,8 +41,6 @@ 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']
@@ -74,7 +67,6 @@ declare global {
   const retainNetworkInstance: typeof import('./composables/network')['retainNetworkInstance']
   const runNetworkInstance: typeof import('./composables/network')['runNetworkInstance']
   const setActivePinia: typeof import('pinia')['setActivePinia']
-  const setAutoLaunchStatus: typeof import('./composables/network')['setAutoLaunchStatus']
   const setLoggingLevel: typeof import('./composables/network')['setLoggingLevel']
   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const setTrayMenu: typeof import('./composables/tray')['setTrayMenu']
@@ -85,7 +77,6 @@ declare global {
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
   const storeToRefs: typeof import('pinia')['storeToRefs']
-  const timeAgoCn: typeof import('./composables/utils')['timeAgoCn']
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
@@ -116,6 +107,7 @@ declare global {
   export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
+
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
@@ -216,4 +208,4 @@ declare module 'vue' {
     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
     readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
   }
-}
+}

easytier-gui/src/composables/mobile_vpn.ts

@@ -93,7 +93,7 @@ async function registerVpnServiceListener() {
   )
 }
 
-function getRoutesForVpn(routes: Route[]): string[] {
+function getRoutesForVpn(routes: Route[], node_config: NetworkTypes.NetworkConfig): string[] {
   if (!routes) {
     return []
   }
@@ -108,6 +108,10 @@ function getRoutesForVpn(routes: Route[]): string[] {
     }
   }
 
+  node_config.routes.forEach(r => {
+    ret.push(r)
+  })
+
   // sort and dedup
   return Array.from(new Set(ret)).sort()
 }
@@ -142,7 +146,7 @@ async function onNetworkInstanceChange() {
     network_length = 24
   }
 
-  const routes = getRoutesForVpn(curNetworkInfo?.routes)
+  const routes = getRoutesForVpn(curNetworkInfo?.routes, networkStore.curNetwork)
 
   const ipChanged = virtual_ip !== curVpnStatus.ipv4Addr
   const routesChanged = JSON.stringify(routes) !== JSON.stringify(curVpnStatus.routes)

easytier-gui/src/main.ts

@@ -1,4 +1,4 @@
-import Aura from '@primevue/themes/aura'
+import Aura from '@primeuix/themes/aura';
 import PrimeVue from 'primevue/config'
 import ToastService from 'primevue/toastservice'
 

easytier-gui/src/pages/index.vue

@@ -292,61 +292,63 @@ async function saveTomlConfig(tomlConfig: string) {
       <About />
     </Dialog>
 
-    <div>
-      <Toolbar>
-        <template #start>
-          <div class="flex items-center">
-            <Button icon="pi pi-plus" severity="primary" :label="t('add_new_network')" @click="addNewNetwork" />
-          </div>
-        </template>
+    <div class="w-full">
+      <div class="flex items-center gap-4 p-4 h-20">
+        <!-- 网络按钮 -->
+        <div class="flex shrink-0 items-center">
+          <Button icon="pi pi-plus" severity="primary" :label="t('add_new_network')" class="hidden md:inline-flex"
+            @click="addNewNetwork" />
+          <Button icon="pi pi-plus" severity="primary" class="md:hidden px-6" @click="addNewNetwork" />
+        </div>
 
-        <template #center>
-          <div class="min-w-40">
-            <Select v-model="networkStore.curNetwork" :options="networkStore.networkList" :highlight-on-select="false"
-              :placeholder="t('select_network')" class="w-full">
-              <template #value="slotProps">
-                <div class="flex items-start content-center">
-                  <div class="mr-4 flex-col">
-                    <span>{{ slotProps.value.network_name }}</span>
-                  </div>
-                  <Tag class="my-auto leading-3" :severity="isRunning(slotProps.value.instance_id) ? 'success' : 'info'"
-                    :value="t(isRunning(slotProps.value.instance_id) ? 'network_running' : 'network_stopped')" />
+        <!-- 网络选择 - 占据中间剩余空间 -->
+        <Select v-model="networkStore.curNetwork" :options="networkStore.networkList" :highlight-on-select="false"
+          :placeholder="t('select_network')" class="flex-1 h-full min-w-0">
+          <template #value="slotProps">
+            <div class="flex items-center content-center min-w-0">
+              <div class="mr-4 flex-col min-w-0 flex-1">
+                <span class="truncate block"> &nbsp; {{ slotProps.value.network_name }}</span>
+              </div>
+              <Tag class="my-auto leading-3 shrink-0"
+                :severity="isRunning(slotProps.value.instance_id) ? 'success' : 'info'"
+                :value="t(isRunning(slotProps.value.instance_id) ? 'network_running' : 'network_stopped')" />
+            </div>
+          </template>
+          <template #option="slotProps">
+            <div class="flex flex-col items-start content-center max-w-full">
+              <div class="flex items-center min-w-0 w-full">
+                <div class="mr-4 min-w-0 flex-1">
+                  <span class="truncate block">{{ t('network_name') }}: {{ slotProps.option.network_name }}</span>
                 </div>
-              </template>
-              <template #option="slotProps">
-                <div class="flex flex-col items-start content-center max-w-full">
-                  <div class="flex">
-                    <div class="mr-4">
-                      {{ t('network_name') }}: {{ slotProps.option.network_name }}
-                    </div>
-                    <Tag class="my-auto leading-3"
-                      :severity="isRunning(slotProps.option.instance_id) ? 'success' : 'info'"
-                      :value="t(isRunning(slotProps.option.instance_id) ? 'network_running' : 'network_stopped')" />
-                  </div>
-                  <div v-if="slotProps.option.networking_method !== NetworkTypes.NetworkingMethod.Standalone"
-                    class="max-w-full overflow-hidden text-ellipsis">
-                    {{ slotProps.option.networking_method === NetworkTypes.NetworkingMethod.Manual
-                      ? slotProps.option.peer_urls.join(', ')
-                      : slotProps.option.public_server_url }}
-                  </div>
-                  <div
-                    v-if="isRunning(slotProps.option.instance_id) && networkStore.instances[slotProps.option.instance_id].detail && (!!networkStore.instances[slotProps.option.instance_id].detail?.my_node_info.virtual_ipv4)">
-                    {{
-                      Utils.ipv4InetToString(networkStore.instances[slotProps.option.instance_id].detail?.my_node_info.virtual_ipv4)
-                    }}
-                  </div>
-                </div>
-              </template>
-            </Select>
-          </div>
-        </template>
+                <Tag class="my-auto leading-3 shrink-0"
+                  :severity="isRunning(slotProps.option.instance_id) ? 'success' : 'info'"
+                  :value="t(isRunning(slotProps.option.instance_id) ? 'network_running' : 'network_stopped')" />
+              </div>
+              <div v-if="slotProps.option.networking_method !== NetworkTypes.NetworkingMethod.Standalone"
+                class="max-w-full overflow-hidden text-ellipsis">
+                {{ slotProps.option.networking_method === NetworkTypes.NetworkingMethod.Manual
+                  ? slotProps.option.peer_urls.join(', ')
+                  : slotProps.option.public_server_url }}
+              </div>
+              <div
+                v-if="isRunning(slotProps.option.instance_id) && networkStore.instances[slotProps.option.instance_id].detail && (!!networkStore.instances[slotProps.option.instance_id].detail?.my_node_info.virtual_ipv4)">
+                {{
+                  Utils.ipv4InetToString(networkStore.instances[slotProps.option.instance_id].detail?.my_node_info.virtual_ipv4)
+                }}
+              </div>
+            </div>
+          </template>
+        </Select>
 
-        <template #end>
+        <!-- 设置按钮 -->
+        <div class="flex items-center shrink-0">
           <Button icon="pi pi-cog" severity="secondary" aria-haspopup="true" :label="t('settings')"
+            class="hidden md:inline-flex" aria-controls="overlay_setting_menu" @click="toggle_setting_menu" />
+          <Button icon="pi pi-cog" severity="secondary" aria-haspopup="true" class="md:hidden px-6"
             aria-controls="overlay_setting_menu" @click="toggle_setting_menu" />
           <TieredMenu id="overlay_setting_menu" ref="setting_menu" :model="setting_menu_items" :popup="true" />
-        </template>
-      </Toolbar>
+        </div>
+      </div>
     </div>
 
     <Panel class="h-full overflow-y-auto">