migrate to tauri2 (#159)

migrate gui to tauri2

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

@@ -6,6 +6,9 @@
 export {}
 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']
@@ -17,6 +20,7 @@ declare global {
   const definePage: typeof import('unplugin-vue-router/runtime')['definePage']
   const defineStore: typeof import('pinia')['defineStore']
   const effectScope: typeof import('vue')['effectScope']
+  const generateMenuItem: typeof import('./composables/tray')['generateMenuItem']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
@@ -62,6 +66,9 @@ declare global {
   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']
+  const setTrayRunState: typeof import('./composables/tray')['setTrayRunState']
+  const setTrayTooltip: typeof import('./composables/tray')['setTrayTooltip']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
@@ -81,6 +88,7 @@ declare global {
   const useRoute: typeof import('vue-router/auto')['useRoute']
   const useRouter: typeof import('vue-router/auto')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
+  const useTray: typeof import('./composables/tray')['useTray']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
@@ -98,6 +106,8 @@ declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly MenuItemExit: UnwrapRef<typeof import('./composables/tray')['MenuItemExit']>
+    readonly MenuItemShow: UnwrapRef<typeof import('./composables/tray')['MenuItemShow']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly collectNetworkInfos: UnwrapRef<typeof import('./composables/network')['collectNetworkInfos']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
@@ -109,6 +119,7 @@ declare module 'vue' {
     readonly definePage: UnwrapRef<typeof import('unplugin-vue-router/runtime')['definePage']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly generateMenuItem: UnwrapRef<typeof import('./composables/tray')['generateMenuItem']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
@@ -154,6 +165,9 @@ declare module 'vue' {
     readonly setAutoLaunchStatus: UnwrapRef<typeof import('./composables/network')['setAutoLaunchStatus']>
     readonly setLoggingLevel: UnwrapRef<typeof import('./composables/network')['setLoggingLevel']>
     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
+    readonly setTrayMenu: UnwrapRef<typeof import('./composables/tray')['setTrayMenu']>
+    readonly setTrayRunState: UnwrapRef<typeof import('./composables/tray')['setTrayRunState']>
+    readonly setTrayTooltip: UnwrapRef<typeof import('./composables/tray')['setTrayTooltip']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
@@ -173,6 +187,7 @@ declare module 'vue' {
     readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router/auto')['useRouter']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useTray: UnwrapRef<typeof import('./composables/tray')['useTray']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
@@ -183,6 +198,8 @@ declare module '@vue/runtime-core' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly MenuItemExit: UnwrapRef<typeof import('./composables/tray')['MenuItemExit']>
+    readonly MenuItemShow: UnwrapRef<typeof import('./composables/tray')['MenuItemShow']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly collectNetworkInfos: UnwrapRef<typeof import('./composables/network')['collectNetworkInfos']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
@@ -194,6 +211,7 @@ declare module '@vue/runtime-core' {
     readonly definePage: UnwrapRef<typeof import('unplugin-vue-router/runtime')['definePage']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly generateMenuItem: UnwrapRef<typeof import('./composables/tray')['generateMenuItem']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
@@ -239,6 +257,9 @@ declare module '@vue/runtime-core' {
     readonly setAutoLaunchStatus: UnwrapRef<typeof import('./composables/network')['setAutoLaunchStatus']>
     readonly setLoggingLevel: UnwrapRef<typeof import('./composables/network')['setLoggingLevel']>
     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
+    readonly setTrayMenu: UnwrapRef<typeof import('./composables/tray')['setTrayMenu']>
+    readonly setTrayRunState: UnwrapRef<typeof import('./composables/tray')['setTrayRunState']>
+    readonly setTrayTooltip: UnwrapRef<typeof import('./composables/tray')['setTrayTooltip']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
@@ -258,6 +279,7 @@ declare module '@vue/runtime-core' {
     readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router/auto')['useRouter']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useTray: UnwrapRef<typeof import('./composables/tray')['useTray']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>

easytier-gui/src/components/Config.vue

@@ -56,12 +56,12 @@ onMounted(async () => {
 <template>
   <div class="flex flex-column h-full">
     <div class="flex flex-column">
-      <div class="w-7/12 self-center ">
+      <div class="w-10/12 self-center ">
         <Message severity="warn">
           {{ t('dhcp_experimental_warning') }}
         </Message>
       </div>
-      <div class="w-7/12 self-center ">
+      <div class="w-10/12 self-center ">
         <Panel :header="t('basic_settings')">
           <div class="flex flex-column gap-y-2">
             <div class="flex flex-row gap-x-9 flex-wrap">

easytier-gui/src/composables/network.ts

@@ -1,4 +1,5 @@
-import { invoke } from '@tauri-apps/api/tauri'
+import { invoke } from "@tauri-apps/api/core"
+
 import type { NetworkConfig, NetworkInstanceRunningInfo } from '~/types/network'
 
 export async function parseNetworkConfig(cfg: NetworkConfig) {

easytier-gui/src/composables/tray.ts

@@ -0,0 +1,91 @@
+import { getCurrent } from '@tauri-apps/api/window'
+import { Menu, MenuItem, PredefinedMenuItem } from '@tauri-apps/api/menu'
+import { TrayIcon } from '@tauri-apps/api/tray'
+import pkg from '~/../package.json'
+
+const DEFAULT_TRAY_NAME = 'main'
+
+async function toggleVisibility() {
+  if (await getCurrent().isVisible()) {
+    await getCurrent().hide()
+  } else {
+    await getCurrent().show()
+    await getCurrent().setFocus()
+  }
+}
+
+export async function useTray(init: boolean = false) {
+  let tray = await TrayIcon.getById(DEFAULT_TRAY_NAME)
+  if (!tray) {
+    tray = await TrayIcon.new({
+      tooltip: `EasyTier\n${pkg.version}`,
+      title: `EasyTier\n${pkg.version}`,
+      id: DEFAULT_TRAY_NAME,
+      menu: await Menu.new({
+        id: 'main',
+        items: await generateMenuItem(),
+      }),
+      action: async () => {
+        toggleVisibility()
+      }
+    })
+  }
+
+  if (init) {
+    tray.setTooltip(`EasyTier\n${pkg.version}`)
+    tray.setMenuOnLeftClick(false);
+    tray.setMenu(await Menu.new({
+      id: 'main',
+      items: await generateMenuItem(),
+    }))
+  }
+
+  return tray
+}
+
+export async function generateMenuItem() {
+  return [
+    await MenuItemExit('Exit'),
+    await PredefinedMenuItem.new({ item: 'Separator' }),
+    await MenuItemShow('Show / Hide'),
+  ] || []
+}
+
+export async function MenuItemExit(text: string) {
+  return await PredefinedMenuItem.new({
+    text: text,
+    item: 'Quit',
+  })
+}
+
+export async function MenuItemShow(text: string) {
+  return await MenuItem.new({
+    id: 'show',
+    text,
+    action: async () => {
+        await toggleVisibility();
+    },
+  })
+}
+
+export async function setTrayMenu(items: (MenuItem | PredefinedMenuItem)[] | undefined = undefined) {
+  const tray = await useTray()
+  const menu = await Menu.new({
+    id: 'main',
+    items: items || await generateMenuItem(),
+  })
+  tray.setMenu(menu)
+}
+
+export async function setTrayRunState(isRunning: boolean = false) {
+  const tray = await useTray()
+  tray.setIcon(isRunning ? 'icons/icon-inactive.ico' : 'icons/icon.ico')
+}
+
+export async function setTrayTooltip(tooltip: string) {
+  if (tooltip) {
+    const tray = await useTray()
+    tray.setTooltip(`EasyTier\n${pkg.version}\n${tooltip}`)
+    tray.setTitle(`EasyTier\n${pkg.version}\n${tooltip}`)
+  }
+}

easytier-gui/src/main.ts

@@ -6,7 +6,7 @@ import ToastService from 'primevue/toastservice'
 import App from '~/App.vue'
 
 import '~/styles.css'
-import 'primevue/resources/themes/aura-light-green/theme.css'
+import Aura from '@primevue/themes/aura'
 import 'primeicons/primeicons.css'
 import 'primeflex/primeflex.css'
 import { i18n, loadLanguageAsync } from '~/modules/i18n'
@@ -41,7 +41,15 @@ async function main() {
   app.use(router)
   app.use(createPinia())
   app.use(i18n, { useScope: 'global' })
-  app.use(PrimeVue)
+  app.use(PrimeVue, {
+    theme: {
+      preset: Aura,
+      options: {
+          prefix: 'p',
+          darkModeSelector: 'system',
+          cssLayer: false
+      }
+  }})
   app.use(ToastService)
   app.mount('#app')
 }

easytier-gui/src/pages/index.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import Stepper from 'primevue/stepper'
-import StepperPanel from 'primevue/stepperpanel'
-
 import { useToast } from 'primevue/usetoast'
 
-import { exit } from '@tauri-apps/api/process'
+import { exit } from '@tauri-apps/plugin-process';
 import Config from '~/components/Config.vue'
 import Status from '~/components/Status.vue'
 
@@ -14,14 +11,17 @@ import { getAutoLaunchStatusAsync as getAutoLaunchStatus, loadAutoLaunchStatusAs
 import { loadRunningInstanceIdsFromLocalStorage } from '~/stores/network'
 import { setLoggingLevel } from '~/composables/network'
 import TieredMenu from 'primevue/tieredmenu'
-import { open } from '@tauri-apps/api/shell'
+import { open } from '@tauri-apps/plugin-shell';
 import { appLogDir } from '@tauri-apps/api/path'
-import { writeText } from '@tauri-apps/api/clipboard'
+import { writeText } from '@tauri-apps/plugin-clipboard-manager';
+import { useTray } from '~/composables/tray';
 
 const { t, locale } = useI18n()
 const visible = ref(false)
 const tomlConfig = ref('')
 
+useTray(true)
+
 const items = ref([
   {
     label: () => t('show_config'),
@@ -81,8 +81,8 @@ networkStore.$subscribe(async () => {
   }
 })
 
-async function runNetworkCb(cfg: NetworkConfig, cb: (e: MouseEvent) => void) {
-  cb({} as MouseEvent)
+async function runNetworkCb(cfg: NetworkConfig, cb: () => void) {
+  cb()
   networkStore.removeNetworkInstance(cfg.instance_id)
   await retainNetworkInstance(networkStore.networkInstanceIds)
   networkStore.addNetworkInstance(cfg.instance_id)
@@ -96,9 +96,9 @@ async function runNetworkCb(cfg: NetworkConfig, cb: (e: MouseEvent) => void) {
   }
 }
 
-async function stopNetworkCb(cfg: NetworkConfig, cb: (e: MouseEvent) => void) {
+async function stopNetworkCb(cfg: NetworkConfig, cb: () => void) {
   // console.log('stopNetworkCb', cfg, cb)
-  cb({} as MouseEvent)
+  cb()
   networkStore.removeNetworkInstance(cfg.instance_id)
   await retainNetworkInstance(networkStore.networkInstanceIds)
 }
@@ -108,15 +108,19 @@ async function updateNetworkInfos() {
 }
 
 let intervalId = 0
-onMounted(() => {
+onMounted(async () => {
   intervalId = window.setInterval(async () => {
     await updateNetworkInfos()
   }, 500)
+  await setTrayMenu([ 
+    await MenuItemExit(t('tray.exit')), 
+    await MenuItemShow(t('tray.show')) 
+  ])
 })
 onUnmounted(() => clearInterval(intervalId))
 
 const activeStep = computed(() => {
-  return networkStore.networkInstanceIds.includes(networkStore.curNetworkId) ? 1 : 0
+  return networkStore.networkInstanceIds.includes(networkStore.curNetworkId) ? '2' : '1'
 })
 
 let current_log_level = 'off'
@@ -128,6 +132,10 @@ const setting_menu_items = ref([
     icon: 'pi pi-language',
     command: async () => {
       await loadLanguageAsync((locale.value === 'en' ? 'cn' : 'en'))
+      await setTrayMenu([ 
+        await MenuItemExit(t('tray.exit')), 
+        await MenuItemShow(t('tray.show')) 
+      ])
     },
   },
   {
@@ -274,25 +282,29 @@ function isRunning(id: string) {
       </Toolbar>
     </div>
 
-    <Stepper class="h-full overflow-y-auto" :active-step="activeStep">
-      <StepperPanel :header="t('config_network')">
-        <template #content="{ nextCallback }">
-          <Config :instance-id="networkStore.curNetworkId" :config-invalid="messageBarSeverity !== Severity.None"
-            @run-network="runNetworkCb($event, nextCallback)" />
-        </template>
-      </StepperPanel>
-      <StepperPanel :header="t('running')">
-        <template #content="{ prevCallback }">
-          <div class="flex flex-column">
-            <Status :instance-id="networkStore.curNetworkId" />
-          </div>
-          <div class="flex pt-4 justify-content-center">
-            <Button :label="t('stop_network')" severity="danger" icon="pi pi-arrow-left"
-              @click="stopNetworkCb(networkStore.curNetwork, prevCallback)" />
-          </div>
-        </template>
-      </StepperPanel>
-    </Stepper>
+    <Panel class="h-full overflow-y-auto" >
+      <Stepper :value="activeStep">
+        <StepList value="1">
+          <Step value="1">{{ t('config_network') }}</Step>
+          <Step value="2">{{ t('running') }}</Step>
+        </StepList>
+        <StepPanels value="1">
+          <StepPanel v-slot="{ activateCallback = (s: string) => {} } = {}" value="1">
+              <Config :instance-id="networkStore.curNetworkId" :config-invalid="messageBarSeverity !== Severity.None"
+                @run-network="runNetworkCb($event, () => activateCallback('2'))" />
+          </StepPanel>
+          <StepPanel v-slot="{ activateCallback = (s: string) => {} } = {}" value="2">
+              <div class="flex flex-column">
+                <Status :instance-id="networkStore.curNetworkId" />
+              </div>
+              <div class="flex pt-4 justify-content-center">
+                <Button :label="t('stop_network')" severity="danger" icon="pi pi-arrow-left"
+                  @click="stopNetworkCb(networkStore.curNetwork, () => activateCallback('1'))" />
+              </div>
+          </StepPanel>
+        </StepPanels>
+      </Stepper>
+    </Panel>
 
     <div>
       <Menubar :model="items" breakpoint="300px" />

easytier-gui/src/types/network.ts

@@ -37,7 +37,7 @@ export function DEFAULT_NETWORK_CONFIG(): NetworkConfig {
   return {
     instance_id: uuidv4(),
 
-    dhcp: false,
+    dhcp: true,
     virtual_ipv4: '',
     network_name: 'easytier',
     network_secret: '',