support start on reboot (#132)

* move launcher to eastier lib
* support auto start after reboot

easytier-gui/locales/cn.yml

@@ -32,6 +32,8 @@ retain_network_instance: 保留网络实例
 collect_network_infos: 收集网络信息
 settings: 设置
 exchange_language: Switch to English
+disable_auto_launch: 关闭开机自启
+enable_auto_launch: 开启开机自启
 exit: 退出
 chips_placeholder: 例如： {0}, 按回车添加
 hostname_placeholder: '留空默认为主机名: {0}'

easytier-gui/locales/en.yml

@@ -32,6 +32,8 @@ retain_network_instance: Retain Network Instance
 collect_network_infos: Collect Network Infos
 settings: Settings
 exchange_language: 切换中文
+disable_auto_launch: Disable Launch on Reboot
+enable_auto_launch: Enable Launch on Reboot
 exit: Exit
 
 chips_placeholder: 'e.g: {0}, press Enter to add'

easytier-gui/src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "easytier-gui"
 version = "0.0.0"
-description = "A Tauri App"
+description = "EasyTier GUI"
 authors = ["you"]
 edition = "2021"
 
@@ -29,6 +29,10 @@ dashmap = "5.5.3"
 
 privilege = "0.3"
 gethostname = "0.4.3"
+
+auto-launch = "0.5.0"
+dunce = "1.0.4"
+
 [features]
 # This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!!
 custom-protocol = ["tauri/custom-protocol"]

easytier-gui/src-tauri/src/launcher.rs

@@ -1,214 +0,0 @@
-use std::{
-    collections::VecDeque,
-    sync::{atomic::AtomicBool, Arc, RwLock},
-};
-
-use chrono::{DateTime, Local};
-use easytier::{
-    common::{
-        config::{ConfigLoader, TomlConfigLoader},
-        global_ctx::GlobalCtxEvent,
-        stun::StunInfoCollectorTrait,
-    },
-    instance::instance::Instance,
-    peers::rpc_service::PeerManagerRpcService,
-    rpc::{
-        cli::{PeerInfo, Route, StunInfo},
-        peer::GetIpListResponse,
-    },
-};
-use serde::{Deserialize, Serialize};
-
-#[derive(Default, Clone, Debug, Serialize, Deserialize)]
-pub struct MyNodeInfo {
-    pub virtual_ipv4: String,
-    pub ips: GetIpListResponse,
-    pub stun_info: StunInfo,
-    pub listeners: Vec<String>,
-    pub vpn_portal_cfg: Option<String>,
-}
-
-#[derive(Default, Clone)]
-struct EasyTierData {
-    events: Arc<RwLock<VecDeque<(DateTime<Local>, GlobalCtxEvent)>>>,
-    node_info: Arc<RwLock<MyNodeInfo>>,
-    routes: Arc<RwLock<Vec<Route>>>,
-    peers: Arc<RwLock<Vec<PeerInfo>>>,
-}
-
-pub struct EasyTierLauncher {
-    instance_alive: Arc<AtomicBool>,
-    stop_flag: Arc<AtomicBool>,
-    thread_handle: Option<std::thread::JoinHandle<()>>,
-    running_cfg: String,
-
-    error_msg: Arc<RwLock<Option<String>>>,
-    data: EasyTierData,
-}
-
-impl EasyTierLauncher {
-    pub fn new() -> Self {
-        let instance_alive = Arc::new(AtomicBool::new(false));
-        Self {
-            instance_alive,
-            thread_handle: None,
-            error_msg: Arc::new(RwLock::new(None)),
-            running_cfg: String::new(),
-
-            stop_flag: Arc::new(AtomicBool::new(false)),
-            data: EasyTierData::default(),
-        }
-    }
-
-    async fn handle_easytier_event(event: GlobalCtxEvent, data: EasyTierData) {
-        let mut events = data.events.write().unwrap();
-        events.push_back((chrono::Local::now(), event));
-        if events.len() > 100 {
-            events.pop_front();
-        }
-    }
-
-    async fn easytier_routine(
-        cfg: TomlConfigLoader,
-        stop_signal: Arc<tokio::sync::Notify>,
-        data: EasyTierData,
-    ) -> Result<(), anyhow::Error> {
-        let mut instance = Instance::new(cfg);
-        let peer_mgr = instance.get_peer_manager();
-
-        // Subscribe to global context events
-        let global_ctx = instance.get_global_ctx();
-        let data_c = data.clone();
-        tokio::spawn(async move {
-            let mut receiver = global_ctx.subscribe();
-            while let Ok(event) = receiver.recv().await {
-                Self::handle_easytier_event(event, data_c.clone()).await;
-            }
-        });
-
-        // update my node info
-        let data_c = data.clone();
-        let global_ctx_c = instance.get_global_ctx();
-        let peer_mgr_c = peer_mgr.clone();
-        let vpn_portal = instance.get_vpn_portal_inst();
-        tokio::spawn(async move {
-            loop {
-                let node_info = MyNodeInfo {
-                    virtual_ipv4: global_ctx_c
-                        .get_ipv4()
-                        .map(|x| x.to_string())
-                        .unwrap_or_default(),
-                    ips: global_ctx_c.get_ip_collector().collect_ip_addrs().await,
-                    stun_info: global_ctx_c.get_stun_info_collector().get_stun_info(),
-                    listeners: global_ctx_c
-                        .get_running_listeners()
-                        .iter()
-                        .map(|x| x.to_string())
-                        .collect(),
-                    vpn_portal_cfg: Some(
-                        vpn_portal
-                            .lock()
-                            .await
-                            .dump_client_config(peer_mgr_c.clone())
-                            .await,
-                    ),
-                };
-                *data_c.node_info.write().unwrap() = node_info.clone();
-                *data_c.routes.write().unwrap() = peer_mgr_c.list_routes().await;
-                *data_c.peers.write().unwrap() = PeerManagerRpcService::new(peer_mgr_c.clone())
-                    .list_peers()
-                    .await;
-                tokio::time::sleep(std::time::Duration::from_secs(1)).await;
-            }
-        });
-
-        instance.run().await?;
-        stop_signal.notified().await;
-        Ok(())
-    }
-
-    pub fn start<F>(&mut self, cfg_generator: F)
-    where
-        F: FnOnce() -> Result<TomlConfigLoader, anyhow::Error> + Send + Sync,
-    {
-        let error_msg = self.error_msg.clone();
-        let cfg = cfg_generator();
-        if let Err(e) = cfg {
-            error_msg.write().unwrap().replace(e.to_string());
-            return;
-        }
-
-        self.running_cfg = cfg.as_ref().unwrap().dump();
-
-        let stop_flag = self.stop_flag.clone();
-
-        let instance_alive = self.instance_alive.clone();
-        instance_alive.store(true, std::sync::atomic::Ordering::Relaxed);
-
-        let data = self.data.clone();
-
-        self.thread_handle = Some(std::thread::spawn(move || {
-            let rt = tokio::runtime::Builder::new_multi_thread()
-                .enable_all()
-                .build()
-                .unwrap();
-            let stop_notifier = Arc::new(tokio::sync::Notify::new());
-
-            let stop_notifier_clone = stop_notifier.clone();
-            rt.spawn(async move {
-                while !stop_flag.load(std::sync::atomic::Ordering::Relaxed) {
-                    tokio::time::sleep(std::time::Duration::from_millis(100)).await;
-                }
-                stop_notifier_clone.notify_one();
-            });
-
-            let ret = rt.block_on(Self::easytier_routine(
-                cfg.unwrap(),
-                stop_notifier.clone(),
-                data,
-            ));
-            if let Err(e) = ret {
-                error_msg.write().unwrap().replace(e.to_string());
-            }
-            instance_alive.store(false, std::sync::atomic::Ordering::Relaxed);
-        }));
-    }
-
-    pub fn error_msg(&self) -> Option<String> {
-        self.error_msg.read().unwrap().clone()
-    }
-
-    pub fn running(&self) -> bool {
-        self.instance_alive
-            .load(std::sync::atomic::Ordering::Relaxed)
-    }
-
-    pub fn get_events(&self) -> Vec<(DateTime<Local>, GlobalCtxEvent)> {
-        let events = self.data.events.read().unwrap();
-        events.iter().cloned().collect()
-    }
-
-    pub fn get_node_info(&self) -> MyNodeInfo {
-        self.data.node_info.read().unwrap().clone()
-    }
-
-    pub fn get_routes(&self) -> Vec<Route> {
-        self.data.routes.read().unwrap().clone()
-    }
-
-    pub fn get_peers(&self) -> Vec<PeerInfo> {
-        self.data.peers.read().unwrap().clone()
-    }
-}
-
-impl Drop for EasyTierLauncher {
-    fn drop(&mut self) {
-        self.stop_flag
-            .store(true, std::sync::atomic::Ordering::Relaxed);
-        if let Some(handle) = self.thread_handle.take() {
-            if let Err(e) = handle.join() {
-                println!("Error when joining thread: {:?}", e);
-            }
-        }
-    }
-}

easytier-gui/src-tauri/src/main.rs

@@ -1,22 +1,17 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
-mod launcher;
-
 use std::{collections::BTreeMap, env::current_exe, process};
 
 use anyhow::Context;
-use chrono::{DateTime, Local};
+use auto_launch::AutoLaunchBuilder;
 use dashmap::DashMap;
 use easytier::{
-    common::{
-        config::{ConfigLoader, NetworkIdentity, PeerConfig, TomlConfigLoader, VpnPortalConfig},
-        global_ctx::GlobalCtxEvent,
+    common::config::{
+        ConfigLoader, NetworkIdentity, PeerConfig, TomlConfigLoader, VpnPortalConfig,
     },
-    rpc::{PeerInfo, Route},
-    utils::{list_peer_route_pair, PeerRoutePair},
+    launcher::{NetworkInstance, NetworkInstanceRunningInfo},
 };
-use launcher::{EasyTierLauncher, MyNodeInfo};
 use serde::{Deserialize, Serialize};
 
 use tauri::{
@@ -167,71 +162,6 @@ impl NetworkConfig {
     }
 }
 
-#[derive(Deserialize, Serialize, Debug)]
-struct NetworkInstanceRunningInfo {
-    my_node_info: MyNodeInfo,
-    events: Vec<(DateTime<Local>, GlobalCtxEvent)>,
-    node_info: MyNodeInfo,
-    routes: Vec<Route>,
-    peers: Vec<PeerInfo>,
-    peer_route_pairs: Vec<PeerRoutePair>,
-    running: bool,
-    error_msg: Option<String>,
-}
-
-struct NetworkInstance {
-    config: TomlConfigLoader,
-    launcher: Option<EasyTierLauncher>,
-}
-
-impl NetworkInstance {
-    fn new(cfg: NetworkConfig) -> Result<Self, anyhow::Error> {
-        Ok(Self {
-            config: cfg.gen_config()?,
-            launcher: None,
-        })
-    }
-
-    fn is_easytier_running(&self) -> bool {
-        self.launcher.is_some() && self.launcher.as_ref().unwrap().running()
-    }
-
-    fn get_running_info(&self) -> Option<NetworkInstanceRunningInfo> {
-        if self.launcher.is_none() {
-            return None;
-        }
-
-        let launcher = self.launcher.as_ref().unwrap();
-
-        let peers = launcher.get_peers();
-        let routes = launcher.get_routes();
-        let peer_route_pairs = list_peer_route_pair(peers.clone(), routes.clone());
-
-        Some(NetworkInstanceRunningInfo {
-            my_node_info: launcher.get_node_info(),
-            events: launcher.get_events(),
-            node_info: launcher.get_node_info(),
-            routes,
-            peers,
-            peer_route_pairs,
-            running: launcher.running(),
-            error_msg: launcher.error_msg(),
-        })
-    }
-
-    fn start(&mut self) -> Result<(), anyhow::Error> {
-        if self.is_easytier_running() {
-            return Ok(());
-        }
-
-        let mut launcher = EasyTierLauncher::new();
-        launcher.start(|| Ok(self.config.clone()));
-
-        self.launcher = Some(launcher);
-        Ok(())
-    }
-}
-
 static INSTANCE_MAP: once_cell::sync::Lazy<DashMap<String, NetworkInstance>> =
     once_cell::sync::Lazy::new(DashMap::new);
 
@@ -249,7 +179,8 @@ fn run_network_instance(cfg: NetworkConfig) -> Result<(), String> {
     }
     let instance_id = cfg.instance_id.clone();
 
-    let mut instance = NetworkInstance::new(cfg).map_err(|e| e.to_string())?;
+    let cfg = cfg.gen_config().map_err(|e| e.to_string())?;
+    let mut instance = NetworkInstance::new(cfg);
     instance.start().map_err(|e| e.to_string())?;
 
     println!("instance {} started", instance_id);
@@ -286,6 +217,11 @@ fn get_os_hostname() -> Result<String, String> {
     Ok(gethostname::gethostname().to_string_lossy().to_string())
 }
 
+#[tauri::command]
+fn set_auto_launch_status(app_handle: tauri::AppHandle, enable: bool) -> Result<bool, String> {
+    Ok(init_launch(&app_handle, enable).map_err(|e| e.to_string())?)
+}
+
 fn toggle_window_visibility(window: &Window) {
     if window.is_visible().unwrap() {
         window.hide().unwrap();
@@ -307,6 +243,65 @@ fn check_sudo() -> bool {
     is_elevated
 }
 
+/// init the auto launch
+pub fn init_launch(_app_handle: &tauri::AppHandle, enable: bool) -> Result<bool, anyhow::Error> {
+    let app_exe = current_exe()?;
+    let app_exe = dunce::canonicalize(app_exe)?;
+    let app_name = app_exe
+        .file_stem()
+        .and_then(|f| f.to_str())
+        .ok_or(anyhow::anyhow!("failed to get file stem"))?;
+
+    let app_path = app_exe
+        .as_os_str()
+        .to_str()
+        .ok_or(anyhow::anyhow!("failed to get app_path"))?
+        .to_string();
+
+    #[cfg(target_os = "windows")]
+    let app_path = format!("\"{app_path}\"");
+
+    // use the /Applications/easytier-gui.app
+    #[cfg(target_os = "macos")]
+    let app_path = (|| -> Option<String> {
+        let path = std::path::PathBuf::from(&app_path);
+        let path = path.parent()?.parent()?.parent()?;
+        let extension = path.extension()?.to_str()?;
+        match extension == "app" {
+            true => Some(path.as_os_str().to_str()?.to_string()),
+            false => None,
+        }
+    })()
+    .unwrap_or(app_path);
+
+    #[cfg(target_os = "linux")]
+    let app_path = {
+        let appimage = _app_handle.env().appimage;
+        appimage
+            .and_then(|p| p.to_str().map(|s| s.to_string()))
+            .unwrap_or(app_path)
+    };
+
+    let auto = AutoLaunchBuilder::new()
+        .set_app_name(app_name)
+        .set_app_path(&app_path)
+        .build()
+        .with_context(|| "failed to build auto launch")?;
+
+    if enable && !auto.is_enabled().unwrap_or(false) {
+        // 避免重复设置登录项
+        let _ = auto.disable();
+        auto.enable()
+            .with_context(|| "failed to enable auto launch")?
+    } else if !enable {
+        let _ = auto.disable();
+    }
+
+    let enabled = auto.is_enabled()?;
+
+    Ok(enabled)
+}
+
 fn main() {
     if !check_sudo() {
         process::exit(0);
@@ -324,7 +319,8 @@ fn main() {
             run_network_instance,
             retain_network_instance,
             collect_network_infos,
-            get_os_hostname
+            get_os_hostname,
+            set_auto_launch_status
         ])
         .system_tray(SystemTray::new().with_menu(tray_menu))
         .on_system_tray_event(|app, event| match event {

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

@@ -27,6 +27,7 @@ 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']
@@ -58,6 +59,7 @@ 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 setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
@@ -116,6 +118,7 @@ declare module 'vue' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly loadRunningInstanceIdsFromLocalStorage: UnwrapRef<typeof import('./stores/network')['loadRunningInstanceIdsFromLocalStorage']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
     readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
@@ -147,6 +150,7 @@ declare module 'vue' {
     readonly retainNetworkInstance: UnwrapRef<typeof import('./composables/network')['retainNetworkInstance']>
     readonly runNetworkInstance: UnwrapRef<typeof import('./composables/network')['runNetworkInstance']>
     readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
+    readonly setAutoLaunchStatus: UnwrapRef<typeof import('./composables/network')['setAutoLaunchStatus']>
     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
@@ -198,6 +202,7 @@ declare module '@vue/runtime-core' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly loadRunningInstanceIdsFromLocalStorage: UnwrapRef<typeof import('./stores/network')['loadRunningInstanceIdsFromLocalStorage']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
     readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
@@ -229,6 +234,7 @@ declare module '@vue/runtime-core' {
     readonly retainNetworkInstance: UnwrapRef<typeof import('./composables/network')['retainNetworkInstance']>
     readonly runNetworkInstance: UnwrapRef<typeof import('./composables/network')['runNetworkInstance']>
     readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
+    readonly setAutoLaunchStatus: UnwrapRef<typeof import('./composables/network')['setAutoLaunchStatus']>
     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>

easytier-gui/src/composables/network.ts

@@ -20,3 +20,7 @@ export async function collectNetworkInfos() {
 export async function getOsHostname() {
   return await invoke<string>('get_os_hostname')
 }
+
+export async function setAutoLaunchStatus(enable: boolean) {
+  return await invoke<boolean>('set_auto_launch_status', { enable })
+}

easytier-gui/src/main.ts

@@ -10,6 +10,7 @@ import 'primevue/resources/themes/aura-light-green/theme.css'
 import 'primeicons/primeicons.css'
 import 'primeflex/primeflex.css'
 import { i18n, loadLanguageAsync } from '~/modules/i18n'
+import { loadAutoLaunchStatusAsync, getAutoLaunchStatusAsync } from './modules/auto_launch'
 
 if (import.meta.env.PROD) {
   document.addEventListener('keydown', (event) => {
@@ -28,6 +29,7 @@ if (import.meta.env.PROD) {
 
 async function main() {
   await loadLanguageAsync(localStorage.getItem('lang') || 'en')
+  await loadAutoLaunchStatusAsync(getAutoLaunchStatusAsync())
 
   const app = createApp(App)
 

easytier-gui/src/modules/auto_launch.ts

@@ -0,0 +1,16 @@
+import { setAutoLaunchStatus } from "~/composables/network"
+
+export async function loadAutoLaunchStatusAsync(enable: boolean): Promise<boolean> {
+    try {
+        const ret = await setAutoLaunchStatus(enable)
+        localStorage.setItem('auto_launch', JSON.stringify(ret))
+        return ret
+    } catch (e) {
+        console.error(e)
+        return false
+    }
+}
+
+export function getAutoLaunchStatusAsync(): boolean {
+    return localStorage.getItem('auto_launch') === 'true'
+}

easytier-gui/src/pages/index.vue

@@ -10,6 +10,8 @@ import Status from '~/components/Status.vue'
 
 import type { NetworkConfig } from '~/types/network'
 import { loadLanguageAsync } from '~/modules/i18n'
+import { getAutoLaunchStatusAsync as getAutoLaunchStatus, loadAutoLaunchStatusAsync } from '~/modules/auto_launch'
+import { loadRunningInstanceIdsFromLocalStorage } from '~/stores/network'
 
 const { t, locale } = useI18n()
 const visible = ref(false)
@@ -63,6 +65,7 @@ function addNewNetwork() {
 
 networkStore.$subscribe(async () => {
   networkStore.saveToLocalStorage()
+  networkStore.saveRunningInstanceIdsToLocalStorage()
   try {
     await parseNetworkConfig(networkStore.curNetwork)
     messageBarSeverity.value = Severity.None
@@ -123,9 +126,16 @@ const setting_menu_items = ref([
           await loadLanguageAsync((locale.value === 'en' ? 'cn' : 'en'))
         },
       },
+      {
+        label: () => getAutoLaunchStatus() ? t('disable_auto_launch') : t('enable_auto_launch'),
+        icon: 'pi pi-desktop',
+        command: async () => {
+          await loadAutoLaunchStatusAsync(!getAutoLaunchStatus())
+        },
+      },
       {
         label: () => t('exit'),
-        icon: 'pi pi-times',
+        icon: 'pi pi-power-off',
         command: async () => {
           await exit(1)
         },
@@ -140,6 +150,16 @@ function toggle_setting_menu(event: any) {
 
 onMounted(async () => {
   networkStore.loadFromLocalStorage()
+  if (getAutoLaunchStatus()) {
+    let prev_running_ids = loadRunningInstanceIdsFromLocalStorage()
+    for (let id of prev_running_ids) {
+      let cfg = networkStore.networkList.find((item) => item.instance_id === id)
+      if (cfg) {
+        networkStore.addNetworkInstance(cfg.instance_id)
+        await runNetworkInstance(cfg)
+      }
+    }
+  }
 })
 
 function isRunning(id: string) {
@@ -168,35 +188,28 @@ function isRunning(id: string) {
       <Toolbar>
         <template #start>
           <div class="flex align-items-center gap-2">
-            <Button
-              icon="pi pi-plus" class="mr-2" severity="primary" :label="t('add_new_network')"
-              @click="addNewNetwork"
-            />
+            <Button icon="pi pi-plus" class="mr-2" severity="primary" :label="t('add_new_network')"
+              @click="addNewNetwork" />
           </div>
         </template>
 
         <template #center>
           <div class="min-w-80 mr-20">
-            <Dropdown
-              v-model="networkStore.curNetwork" :options="networkStore.networkList" :highlight-on-select="false"
-              :placeholder="t('select_network')" class="w-full"
-            >
+            <Dropdown 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-3">
                     <span>{{ slotProps.value.network_name }}</span>
                     <span
                       v-if="isRunning(slotProps.value.instance_id) && networkStore.instances[slotProps.value.instance_id].detail && (networkStore.instances[slotProps.value.instance_id].detail?.my_node_info.virtual_ipv4 !== '')"
-                      class="ml-3"
-                    >
+                      class="ml-3">
                       {{ networkStore.instances[slotProps.value.instance_id].detail
                         ? networkStore.instances[slotProps.value.instance_id].detail?.my_node_info.virtual_ipv4 : '' }}
                     </span>
                   </div>
-                  <Tag
-                    class="my-auto" :severity="isRunning(slotProps.value.instance_id) ? 'success' : 'info'"
-                    :value="t(isRunning(slotProps.value.instance_id) ? 'network_running' : 'network_stopped')"
-                  />
+                  <Tag class="my-auto" :severity="isRunning(slotProps.value.instance_id) ? 'success' : 'info'"
+                    :value="t(isRunning(slotProps.value.instance_id) ? 'network_running' : 'network_stopped')" />
                 </div>
               </template>
               <template #option="slotProps">
@@ -205,10 +218,8 @@ function isRunning(id: string) {
                     <div class="mr-3">
                       {{ t('network_name') }}: {{ slotProps.option.network_name }}
                     </div>
-                    <Tag
-                      class="my-auto" :severity="isRunning(slotProps.option.instance_id) ? 'success' : 'info'"
-                      :value="t(isRunning(slotProps.option.instance_id) ? 'network_running' : 'network_stopped')"
-                    />
+                    <Tag class="my-auto" :severity="isRunning(slotProps.option.instance_id) ? 'success' : 'info'"
+                      :value="t(isRunning(slotProps.option.instance_id) ? 'network_running' : 'network_stopped')" />
                   </div>
                   <div>{{ slotProps.option.public_server_url }}</div>
                 </div>
@@ -218,10 +229,8 @@ function isRunning(id: string) {
         </template>
 
         <template #end>
-          <Button
-            icon="pi pi-cog" class="mr-2" severity="secondary" aria-haspopup="true" :label="t('settings')"
-            aria-controls="overlay_setting_menu" @click="toggle_setting_menu"
-          />
+          <Button icon="pi pi-cog" class="mr-2" severity="secondary" aria-haspopup="true" :label="t('settings')"
+            aria-controls="overlay_setting_menu" @click="toggle_setting_menu" />
           <Menu id="overlay_setting_menu" ref="setting_menu" :model="setting_menu_items" :popup="true" />
         </template>
       </Toolbar>
@@ -230,10 +239,8 @@ function isRunning(id: string) {
     <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)"
-          />
+          <Config :instance-id="networkStore.curNetworkId" :config-invalid="messageBarSeverity !== Severity.None"
+            @run-network="runNetworkCb($event, nextCallback)" />
         </template>
       </StepperPanel>
       <StepperPanel :header="t('running')">
@@ -242,10 +249,8 @@ function isRunning(id: string) {
             <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)"
-            />
+            <Button :label="t('stop_network')" severity="danger" icon="pi pi-arrow-left"
+              @click="stopNetworkCb(networkStore.curNetwork, prevCallback)" />
           </div>
         </template>
       </StepperPanel>

easytier-gui/src/stores/network.ts

@@ -70,6 +70,7 @@ export const useNetworkStore = defineStore('networkStore', {
         this.instances[instanceId].error_msg = info.error_msg || ''
         this.instances[instanceId].detail = info
       }
+      this.saveRunningInstanceIdsToLocalStorage()
     },
 
     loadFromLocalStorage() {
@@ -92,8 +93,22 @@ export const useNetworkStore = defineStore('networkStore', {
     saveToLocalStorage() {
       localStorage.setItem('networkList', JSON.stringify(this.networkList))
     },
+
+    saveRunningInstanceIdsToLocalStorage() {
+      let instance_ids = Object.keys(this.instances).filter((instanceId) => this.instances[instanceId].running)
+      localStorage.setItem('runningInstanceIds', JSON.stringify(instance_ids))
+    }
   },
 })
 
 if (import.meta.hot)
   import.meta.hot.accept(acceptHMRUpdate(useNetworkStore as any, import.meta.hot))
+
+export function loadRunningInstanceIdsFromLocalStorage(): string[] {
+  try {
+    return JSON.parse(localStorage.getItem('runningInstanceIds') || '[]')
+  } catch (e) {
+    console.error(e)
+    return []
+  }
+}