@xingtukeji/micro 1.1.27 → 1.2.1

package/README.md

@@ -1,55 +1,197 @@
-主应用初始化：
+# @xingtukeji/micro
+
+基于 Vue 3 和 iframe 的微前端容器，支持应用注册、空闲预加载、保活切换、主子应用路由同步和生命周期通知。
+
+## 安装
+
+```bash
+pnpm add @xingtukeji/micro
+```
+
+## 主应用接入
+
+插件必须在 Pinia 等 token 依赖初始化完成后安装，并在 Host 挂载前注册所有子应用：
+
+```ts
+// menu: [
+//   {
+//     title: "预加载子应用",
+//     type: "micro",
+//     microOptions: {
+//       url: "http://127.0.0.1:12001",
+//       name: "childapp",
+//       preload: true,
+//       keepAlive: true,
+//     },
+//   },
+// ]
 
-```javascript
-//主微应用加载插件，注意一定要在 pinia 初始化之后
 import xtMicro, { setupApp } from "@xingtukeji/micro";
+
 app.use(xtMicro);
-// 遍历菜单函数
-function traverseMenu(menu) {
-  // 遍历菜单项
+
+function traverseMenu(menu: any[]) {
   menu.forEach((item) => {
-    // 对微应用的菜单做处理
     if (item.type === "micro") {
-      // 设置应用
       setupApp({
         ...item.microOptions,
         token: () => useUserStore().token,
-        params: item.microOptions?.params || {},
+        params: item.microOptions?.params ?? {},
       });
     }
-    // 如果当前菜单项有子菜单，则递归遍历子菜单
-    if (item.children) {
-      traverseMenu(item.children);
-    }
+    if (item.children) traverseMenu(item.children);
   });
 }
+
 traverseMenu(window.$config.menus);
 ```
 
-子应用初始化：
+`setupApp` 配置：
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `name` | `string` | 必填 | 应用唯一名称 |
+| `url` | `string` | 必填 | 子应用入口地址，支持相对地址 |
+| `preload` | `boolean` | `false` | 浏览器空闲时预加载 |
+| `keepAlive` | `boolean` | `false` | 切换离开后保留 iframe 和子应用内存状态 |
+| `sync` | `boolean` | `true` | 将子应用路由同步到主应用 URL |
+| `token` | `string \| () => string` | - | 注入子应用 URL 的 token |
+| `params` | `Record<string, any>` | `{}` | 注入子应用 URL 的查询参数 |
+| `onLoad` / `onUnload` / `onError` | `(event, app) => void` | - | iframe 生命周期回调 |
+
+### 挂载 Host
+
+推荐把 `XTMicroHost` 放在不会被路由销毁的布局中：
+
+```vue
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { XTMicroHost } from "@xingtukeji/micro";
+
+const route = useRoute();
+const activeMicroApp = computed(() =>
+  route.name === "micro" ? String(route.params.appId) : undefined
+);
+</script>
+
+<template>
+  <div class="content">
+    <XTMicroHost :active-app="activeMicroApp" />
+    <router-view v-show="!activeMicroApp" />
+  </div>
+</template>
+
+<style>
+.content {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+}
+</style>
+```
+
+`preload` 与 `keepAlive` 相互独立：`preload: true` 只表示浏览器空闲时提前加载（单个应用最多等待 15 秒）；`keepAlive: true` 才会在切换离开后保留 iframe，并向子应用发送激活/失活通知。
 
-```javascript
-//子应用初始化
+```ts
+setupApp({
+  name: "kept-app",
+  url: "http://127.0.0.1:12001",
+  preload: true,
+  keepAlive: true,
+});
+
+setupApp({
+  name: "fresh-app",
+  url: "http://127.0.0.1:12002",
+  keepAlive: false,
+});
+```
+
+保活会占用对应 iframe 的内存。刷新页面、调用 `reloadApp()` 或卸载 `XTMicroHost` 仍会重建 iframe，内存状态不会保留；需要跨刷新保存的数据应由子应用自行持久化。
+
+`XTMicroView` 仅用于兼容旧接入方式：
+
+```vue
+<XTMicroView :app-id="appId" />
+```
+
+它会在组件卸载时销毁 iframe，不提供预加载和保活能力。
+
+## 子应用接入
+
+在创建 Vue 应用时调用 `microInit`。该方法在普通独立访问时也可安全调用：
+
+```ts
 import { microInit } from "@xingtukeji/micro";
-microInit({
-  // 处理 token，该方法建议同步执行完成，如果有异步处理（比如 http 请求）请后续页面初始化时，判断 token 是否准备完毕。
-  authHandler: (token: string) => {
-    window.localStorage.setItem("token", token);
-    //or pinia store set token
+
+await microInit({
+  authHandler(token) {
+    if (token) localStorage.setItem("token", token);
+  },
+  hideHeaderCssSelector: ["#app .app-header"],
+  onActivated() {
+    // 恢复轮询，并重新计算图表、地图等尺寸
+  },
+  onDeactivated() {
+    // 暂停轮询、动画等后台任务
   },
-  //简易处理微应用环境下，隐藏 header
-  hideHeaderCssSelector: "#app ._hedaui-header",
 });
 ```
 
-当需要新标签打开子项目时，还想保留父项目加载的方式（不直接访问子项目），可以在父项目的 url 中添加参数 `__XT_MICRO_${子项目名称}=${子项目 url}`
-但要注意，子项目的 url 需要用 encodeURIComponent 编码，否则会导致参数解析错误
+| 参数 | 说明 |
+| --- | --- |
+| `authHandler` | 接收主应用传入的 token，支持异步函数 |
+| `hideHeaderCssSelector` | 微应用模式下隐藏的 CSS 选择器，可传字符串或数组 |
+| `onActivated` | iframe 被激活时调用，支持异步函数 |
+| `onDeactivated` | iframe 被隐藏时调用，支持异步函数 |
 
-```javascript
-http://192.168.100.127:8000/console/?__XT_MICRO_microtest2=http://localhost:5173/?test=123#/page2#/micro/microtest2
+## 常用 API
+
+```ts
+import {
+  createAppUrl,
+  getApp,
+  getApps,
+  isMicro,
+  isParent,
+  reloadApp,
+  startApp,
+  stopApp,
+} from "@xingtukeji/micro";
+```
+
+| API | 说明 |
+| --- | --- |
+| `getApp(name)` / `getApps()` | 获取已注册应用 |
+| `startApp(name, options?)` | 挂载并激活应用 |
+| `stopApp(name)` | 销毁应用 iframe |
+| `reloadApp(name, isGoHome?)` | 刷新应用；`isGoHome` 为 `true` 时回到配置的入口地址 |
+| `createAppUrl(targetUrl, appName?)` | 生成由主应用加载指定子应用页面的 URL |
+| `isMicro()` / `isParent()` | 判断当前运行环境 |
+
+## 路由同步与新标签页
+
+`sync` 开启时，子应用路由会写入主应用查询参数 `__XT_MICRO_<应用名>`。需要在新标签页中仍由主应用加载子页面时，可使用：
+
+```ts
+const url = createAppUrl("/orders/123?tab=detail#section", "order-app");
+window.open(url, "_blank");
 ```
 
-```javascript
-window.__XT_MICRO_VERSION; //获取微前端框架版本
-window.__XT_MICRO_APP; //获取微应用信息，包括主应用的 location 信息
+手工拼接时，子应用地址必须经过 `encodeURIComponent`：
+
+```ts
+const childUrl = encodeURIComponent("http://localhost:5173/page?tab=1#/detail");
+const url = `${location.origin}/console/?__XT_MICRO_order-app=${childUrl}#/micro/order-app`;
+```
+
+## 调试与运行时信息
+
+```ts
+window.micro_api.debug(true); // 开启调试日志
+window.micro_api.debug(false); // 关闭调试日志
+
+window.__XT_MICRO_VERSION; // 当前框架版本
+window.__XT_MICRO_APP; // 当前微应用信息及主应用 location
 ```

package/dist/index.js

@@ -1,11 +1,11 @@
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.xt-micro{background-color:transparent;width:100%;height:100%;overflow:hidden}.micro-iframe{border:none;width:100%;height:100%;margin:0;padding:0}`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();import { createElementBlock, defineComponent, mergeProps, onMounted, onUnmounted, openBlock, ref, watch } from "vue";
-var __defProp = Object.defineProperty, __export = (g) => {
-	let B = {};
-	for (var V in g) __defProp(B, V, {
-		get: g[V],
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.xt-micro{background-color:transparent;width:100%;height:100%;overflow:hidden}.micro-iframe{border:none;width:100%;height:100%;margin:0;padding:0}.xt-micro-host,.xt-micro-panel{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.xt-micro-panel{visibility:hidden;pointer-events:none}.xt-micro-panel.is-active{visibility:visible;pointer-events:auto}`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();import { Fragment, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, watch } from "vue";
+var __defProp = Object.defineProperty, __export = (s) => {
+	let I = {};
+	for (var L in s) __defProp(I, L, {
+		get: s[L],
 		enumerable: !0
 	});
-	return B;
+	return I;
 };
 const CONSTANT = {
 	KEY: "$xtm",
@@ -17,7 +17,7 @@ const CONSTANT = {
 	DOM_ID_PREFIX: "xt-micro-ifr-",
 	URL_PARAM_PREFIX: "__XT_MICRO_",
 	MICRO_VERSION: "__XT_MICRO_VERSION"
-}, version = "1.1.27";
+}, version = "1.2.1";
 var utils_exports = /* @__PURE__ */ __export({
 	ConsoleUtil: () => ConsoleUtil,
 	addOrReplaceUrlParam: () => addOrReplaceUrlParam,
@@ -28,247 +28,279 @@ var utils_exports = /* @__PURE__ */ __export({
 	getQueryParameter: () => getQueryParameter,
 	ipcSyncAppInfo: () => ipcSyncAppInfo
 });
-function getQueryParameter(g, B = window.location.href) {
-	g = g.replace(/[\[\]]/g, "\\$&");
-	var V = (/* @__PURE__ */ RegExp("[?&]" + g + "(=([^&#]*)|&|#|$)")).exec(B);
-	return V ? V[2] ? decodeURIComponent(V[2].replace(/\+/g, " ")).trim() : "" : null;
+function getQueryParameter(s, I = window.location.href) {
+	s = s.replace(/[\[\]]/g, "\\$&");
+	var L = (/* @__PURE__ */ RegExp("[?&]" + s + "(=([^&#]*)|&|#|$)")).exec(I);
+	return L ? L[2] ? decodeURIComponent(L[2].replace(/\+/g, " ")).trim() : "" : null;
 }
-function getAbsolutePath(g, B, V) {
+function getAbsolutePath(s, I, L) {
 	try {
-		return g && (V && g.startsWith("#") ? g : new URL(g, B).href);
+		return s && (L && s.startsWith("#") ? s : new URL(s, I).href);
 	} catch {
-		return g;
+		return s;
 	}
 }
-function anchorElementGenerator(g) {
-	let B = window.document.createElement("a");
-	return B.href = g, B.href = B.href, B;
+function anchorElementGenerator(s) {
+	let I = window.document.createElement("a");
+	return I.href = s, I.href = I.href, I;
 }
-function getAnchorElementQueryMap(g) {
-	let B = g.search || "";
-	return [...new URLSearchParams(B).entries()].reduce((g, B) => (g[B[0]] = B[1], g), {});
+function getAnchorElementQueryMap(s) {
+	let I = s.search || "";
+	return [...new URLSearchParams(I).entries()].reduce((s, I) => (s[I[0]] = I[1], s), {});
 }
-function debounce(g, B) {
-	let V = null;
-	return function(...H) {
-		let U = this;
-		V && clearTimeout(V), V = setTimeout(() => {
-			g.apply(U, H);
-		}, B);
+function debounce(s, I) {
+	let L = null;
+	return function(...R) {
+		let z = this;
+		L && clearTimeout(L), L = setTimeout(() => {
+			s.apply(z, R);
+		}, I);
 	};
 }
-function addOrReplaceUrlParam(g, B, V) {
-	let [H, U] = g.split("#"), W = new URL(H), G = W.searchParams;
-	return B = CONSTANT.URL_PARAM_PREFIX + B, G.has(B) ? G.set(B, V) : G.append(B, V), U && (W.hash = U), W.search = G.toString(), ConsoleUtil.trace("urlObj", W), W.origin + W.pathname + W.search + W.hash;
+function addOrReplaceUrlParam(s, I, L) {
+	let [R, z] = s.split("#"), B = new URL(R), V = B.searchParams;
+	return I = CONSTANT.URL_PARAM_PREFIX + I, V.has(I) ? V.set(I, L) : V.append(I, L), z && (B.hash = z), B.search = V.toString(), ConsoleUtil.trace("urlObj", B), B.origin + B.pathname + B.search + B.hash;
 }
-const ipcSyncAppInfo = async (g) => new Promise((B) => {
-	window.addEventListener("message", (V) => {
-		ConsoleUtil.trace("child ipcSyncAppInfo receive message", V.data), V.data.cmd === "$xt/micro/info" && (V.data.data.mainMicroVersion !== "1.1.27" && ConsoleUtil.warn(`子应用版本与主应用版本不一致，${g}子应用版本：${version}，主应用版本：${V.data.data.mainMicroVersion}`), B(V.data.data));
-	}), ConsoleUtil.trace("child ipcSyncAppInfo send message", g), window.parent.postMessage({
+const ipcSyncAppInfo = async (s) => new Promise((I, L) => {
+	let R = window.setTimeout(() => {
+		window.removeEventListener("message", z), L(/* @__PURE__ */ Error(`micro app info timeout: ${s}`));
+	}, 1e4), z = (L) => {
+		ConsoleUtil.trace("child ipcSyncAppInfo receive message", L.data), L.source === window.parent && L.data?.cmd === "$xt/micro/info" && L.data?.data?.name === s && L.data?.data?.mainLocation?.origin === L.origin && (window.clearTimeout(R), window.removeEventListener("message", z), L.data.data.mainMicroVersion !== "1.2.1" && ConsoleUtil.warn(`子应用版本与主应用版本不一致，${s}子应用版本：${version}，主应用版本：${L.data.data.mainMicroVersion}`), I(L.data.data));
+	};
+	window.addEventListener("message", z), ConsoleUtil.trace("child ipcSyncAppInfo send message", s), window.parent.postMessage({
 		cmd: "$xt/micro/info",
-		data: g
+		data: s
 	}, "*");
 });
-var ConsoleUtil = class g {
+var ConsoleUtil = class s {
 	static STORAGE_KEY = "@xt/micro/console/enable";
 	static get enable() {
-		return localStorage.getItem(g.STORAGE_KEY) === "true";
+		return localStorage.getItem(s.STORAGE_KEY) === "true";
 	}
-	static setEnable(B) {
-		localStorage.setItem(g.STORAGE_KEY, B.toString());
+	static setEnable(I) {
+		localStorage.setItem(s.STORAGE_KEY, I.toString());
 	}
 	static getEnable() {
-		return g.enable;
+		return s.enable;
 	}
 	static getCallerInfo() {
 		try {
-			let g = /* @__PURE__ */ ((/* @__PURE__ */ Error()).stack || "").split("\n").slice(4);
-			if (g.length === 0) return "unknown location";
-			let B = g[0].trim(), V = B.match(/(?:http[s]?:\/\/.*?\/|)([^:]+):(\d+):(\d+)/);
-			if (V) {
-				let [, g, B] = V;
-				return `[${g.split("/").slice(-2).join("/")}:${B}]`;
+			let s = /* @__PURE__ */ ((/* @__PURE__ */ Error()).stack || "").split("\n").slice(4);
+			if (s.length === 0) return "unknown location";
+			let I = s[0].trim(), L = I.match(/(?:http[s]?:\/\/.*?\/|)([^:]+):(\d+):(\d+)/);
+			if (L) {
+				let [, s, I] = L;
+				return `[${s.split("/").slice(-2).join("/")}:${I}]`;
 			}
-			return `[${B}]`;
+			return `[${I}]`;
 		} catch {
 			return "[unknown location]";
 		}
 	}
-	static _log(B, ...V) {
-		if (g.enable && typeof console[B] == "function") {
-			let g = this.getCallerInfo();
-			console[B](g, ...V);
+	static _log(I, ...L) {
+		if (s.enable && typeof console[I] == "function") {
+			let s = this.getCallerInfo();
+			console[I](s, ...L);
 		}
 	}
-	static log(...g) {
-		this._log("log", ...g);
+	static log(...s) {
+		this._log("log", ...s);
 	}
-	static info(...g) {
-		this._log("info", ...g);
+	static info(...s) {
+		this._log("info", ...s);
 	}
-	static warn(...g) {
-		this._log("warn", ...g);
+	static warn(...s) {
+		this._log("warn", ...s);
 	}
-	static error(...g) {
-		this._log("error", ...g);
+	static error(...s) {
+		this._log("error", ...s);
 	}
-	static debug(...g) {
-		this._log("debug", ...g);
+	static debug(...s) {
+		this._log("debug", ...s);
 	}
-	static trace(...g) {
-		this._log("trace", ...g);
+	static trace(...s) {
+		this._log("trace", ...s);
 	}
-	static table(g, B) {
-		this.enable && console.table(g, B);
+	static table(s, I) {
+		this.enable && console.table(s, I);
 	}
-	static time(g) {
-		this.enable && console.time(g);
+	static time(s) {
+		this.enable && console.time(s);
 	}
-	static timeEnd(g) {
-		this.enable && console.timeEnd(g);
+	static timeEnd(s) {
+		this.enable && console.timeEnd(s);
 	}
 }, _isMicro = ref(!1), descriptor = Object.getOwnPropertyDescriptor(window, CONSTANT.IS_MICRO);
 descriptor ? descriptor.configurable ? Object.defineProperty(window, "__XT_MICRO", {
 	get: () => _isMicro.value,
-	set: (g) => {
-		_isMicro.value = g;
+	set: (s) => {
+		_isMicro.value = s;
 	},
 	configurable: !0,
 	enumerable: !0
 }) : console.warn("__XT_MICRO 不可配置，无法重定义，已跳过") : Object.defineProperty(window, "__XT_MICRO", {
 	get: () => _isMicro.value,
-	set: (g) => {
-		_isMicro.value = g;
+	set: (s) => {
+		_isMicro.value = s;
 	},
 	configurable: !0,
 	enumerable: !0
 });
-var generateId = (g) => `${CONSTANT.DOM_ID_PREFIX}${g}`, generateURL = (g, B = !1) => {
-	function V(g) {
-		return typeof g == "object" && !!g && !Array.isArray(g);
-	}
-	let H = typeof g.params == "function" ? g.params() : V(g.params) ? g.params : {}, U = typeof g.token == "function" ? g.token() : V(g.token) ? g.token : "", W = new URL(g.url.indexOf("http") > -1 ? g.url : window.location.origin + g.url), G = getQueryParameter(CONSTANT.URL_PARAM_PREFIX + g.name);
-	if (!B && G) {
-		let B = getAbsolutePath(G, W.origin, !0);
-		if (B) {
-			ConsoleUtil.log("获取绝对路径", B, g), console.log("123123123================>");
-			let V = new URL(B, W.origin);
-			V.searchParams.forEach((g, B) => {
-				W.searchParams.set(B, g);
-			}), W.hash = V.hash;
+var generateId = (s) => `${CONSTANT.DOM_ID_PREFIX}${s}`, generateURL = (s, I = !1) => {
+	function L(s) {
+		return typeof s == "object" && !!s && !Array.isArray(s);
+	}
+	let R = typeof s.params == "function" ? s.params() : L(s.params) ? s.params : {}, z = typeof s.token == "function" ? s.token() : s.token || "", B = new URL(s.url, window.location.origin), V = getQueryParameter(CONSTANT.URL_PARAM_PREFIX + s.name);
+	if (!I && V) {
+		let I = getAbsolutePath(V, B.origin, !0);
+		if (I) {
+			ConsoleUtil.log("获取绝对路径", I, s);
+			let L = new URL(I, B.origin);
+			L.searchParams.forEach((s, I) => {
+				B.searchParams.set(I, s);
+			}), B.hash = L.hash;
 		}
-		clearParentUrl(g.name);
-	}
-	if (W.searchParams.set(CONSTANT.IS_MICRO, "true"), W.searchParams.set(CONSTANT.MICRO_NAME, g.name), U && W.searchParams.set(CONSTANT.MICRO_TOKEN, U), H) for (let g of Object.keys(H)) W.searchParams.set(g, H[g]);
-	return clearParentUrl(g.name), W.href;
-}, generateLoading = (g) => {
-	ConsoleUtil.log("generateLoading", g);
-	let B = document.createElement("div");
-	return B.id = generateId(g) + "-loading", B.innerHTML = "应用加载中...", B.style.textAlign = "center", B.style.lineHeight = "100px", B.style.fontSize = "20px", B.style.color = "#999", B.style.position = "absolute", B.style.top = "0", B.style.left = "0", B.style.right = "0", B.style.bottom = "0", B.style.zIndex = "999", B.style.background = "transparent", B.style["mix-blend-mode"] = "difference", B;
-}, removeLoading = (g) => {
-	g.style.opacity = "0", setTimeout(() => {
-		document.querySelectorAll("#" + g.id).forEach((g) => {
-			g.remove();
+	}
+	if (B.searchParams.set(CONSTANT.IS_MICRO, "true"), B.searchParams.set(CONSTANT.MICRO_NAME, s.name), z && B.searchParams.set(CONSTANT.MICRO_TOKEN, z), R) for (let s of Object.keys(R)) B.searchParams.set(s, R[s]);
+	return B.href;
+}, generateLoading = (s) => {
+	ConsoleUtil.log("generateLoading", s);
+	let I = document.createElement("div");
+	return I.id = generateId(s) + "-loading", I.innerHTML = "应用加载中...", I.style.textAlign = "center", I.style.lineHeight = "100px", I.style.fontSize = "20px", I.style.color = "#999", I.style.position = "absolute", I.style.top = "0", I.style.left = "0", I.style.right = "0", I.style.bottom = "0", I.style.zIndex = "999", I.style.background = "transparent", I.style["mix-blend-mode"] = "difference", I;
+}, removeLoading = (s) => {
+	s.style.opacity = "0", setTimeout(() => {
+		document.querySelectorAll("#" + s.id).forEach((s) => {
+			s.remove();
 		});
 	}, 500);
-}, generateIframe = (g) => {
-	let B = document.createElement("iframe");
-	B.id = generateId(g.app.name), B.src = generateURL(g.app), B.style.width = "100%", B.style.height = "100%", B.style.border = "none", B.style.margin = "0", B.style.padding = "0", B.style.backgroundColor = "transparent", B.style["color-scheme"] = "unset", B.style.visibility = "hidden", B.addEventListener("load", (V) => (B.style.visibility = "visible", g.onLoad.call(g, V))), B.addEventListener("error", (B) => g.onError.call(g, B)), B.addEventListener("unload", (B) => g.onUnload.call(g, B));
-	let V = new MutationObserver((H) => {
-		ConsoleUtil.trace("监听 body 中子节点的变化2", g.panel), H.forEach((H) => {
-			Array.from(H.removedNodes).includes(B) && (g.onUnload(new Event("unload")), V.disconnect());
-		});
-	});
-	return V.observe(g.panel.parentNode, {
-		childList: !0,
-		subtree: !1
-	}), B;
+}, activeMicroApp;
+const getActiveMicroApp = () => activeMicroApp, setActiveMicroApp = (s) => {
+	activeMicroApp = s;
+};
+var generateIframe = (s) => {
+	let I = document.createElement("iframe");
+	return I.id = generateId(s.app.name), I.src = generateURL(s.app), I.style.width = "100%", I.style.height = "100%", I.style.border = "none", I.style.margin = "0", I.style.padding = "0", I.style.backgroundColor = "transparent", I.style["color-scheme"] = "unset", I.style.visibility = "hidden", I.addEventListener("load", (I) => s.onLoad.call(s, I)), I.addEventListener("error", (I) => s.onError.call(s, I)), I.addEventListener("unload", (I) => s.onUnload.call(s, I)), I;
 }, MicroApp = class {
 	app;
 	dom;
 	panel;
 	loading;
 	loadingTimer;
-	constructor(g) {
-		return this.app = g, this.dom = void 0, this.panel = void 0, this;
-	}
-	mount(g, B = !1) {
-		let V;
-		if (g ? (V = typeof g == "string" ? document.querySelector(g) : g, V.innerHTML = "") : V = document.body, V) {
-			this.panel = V;
-			let g = !0, H = document.getElementById(generateId(this.app.name));
-			if (H || (g = !1, H = generateIframe(this), this.dom = H), B ? H.style.display = "none" : H.style.removeProperty("display"), !B) {
-				let g = generateLoading(this.app.name);
-				this.loading = g, V.appendChild(g);
-			}
-			ConsoleUtil.trace("micro app", this.app.name, g ? "已加载迁移 dom" : "首次加载"), V.appendChild(H);
-		} else throw Error("没有找到转载子元素的父容器");
+	state = "idle";
+	active = !1;
+	loadPromise;
+	resolveLoad;
+	observer;
+	destroying = !1;
+	constructor(s) {
+		return this.app = s, this.dom = void 0, this.panel = void 0, this;
+	}
+	getPanel(s) {
+		let I;
+		if (s) {
+			if (I = typeof s == "string" ? document.querySelector(s) : s, !I) throw Error(`没有找到微应用容器: ${s}`);
+		} else I = document.body;
+		return I;
+	}
+	ensureLoaded(s) {
+		let I = this.getPanel(s);
+		if (this.dom) {
+			if (this.panel !== I) throw Error(`微应用 ${this.app.name} 已挂载到其他容器`);
+			return this.loadPromise || Promise.resolve();
+		}
+		this.panel = I, this.state = "loading", this.loadPromise = new Promise((s) => this.resolveLoad = s);
+		let L = generateIframe(this);
+		return this.dom = L, this.observer = new MutationObserver((s) => {
+			!this.destroying && s.some((s) => Array.from(s.removedNodes).includes(L)) && (this.reset(), this.onUnload(new Event("unload")));
+		}), this.observer.observe(I, { childList: !0 }), I.appendChild(L), this.loadPromise;
+	}
+	showLoading() {
+		!this.panel || this.loading || (this.loading = generateLoading(this.app.name), this.panel.appendChild(this.loading));
+	}
+	mount(s) {
+		return this.activate(s);
+	}
+	preload(s) {
+		return ConsoleUtil.trace("preload started", this.app.name), this.active = !1, this.ensureLoaded(s);
+	}
+	activate(s) {
+		this.state === "error" && this.destroy(), this.active = !0, setActiveMicroApp(this.app.name);
+		let I = this.ensureLoaded(s);
+		return this.state === "loading" && this.showLoading(), this.dom && (this.dom.style.visibility = "visible"), (this.state === "loaded" || this.state === "active") && (this.state = "active", this.postLifecycle("activated")), ConsoleUtil.trace("app activated", this.app.name), I;
+	}
+	deactivate() {
+		!this.dom || !this.active || (this.active = !1, this.dom && (this.dom.style.visibility = "hidden"), this.state === "active" && (this.state = "loaded"), this.postLifecycle("deactivated"), ConsoleUtil.trace("app deactivated", this.app.name));
 	}
 	unmount() {
-		ConsoleUtil.trace("micro unmount app", this.app.name);
-		let g = document.getElementById(generateId(this.app.name));
-		if (g) this.app.preload ? (g.style.display = "none", document.body.appendChild(g)) : this.panel?.removeChild(g);
-		else throw Error("app dom not found");
+		this.destroy();
 	}
-	preloadRender(g) {
-		this.mount(g);
+	preloadRender(s) {
+		return this.activate(s);
 	}
-	preload() {
-		this.mount(void 0, !0);
+	destroy() {
+		this.dom && (ConsoleUtil.trace("app destroyed", this.app.name), this.destroying = !0, this.observer?.disconnect(), this.dom.remove(), this.onUnload(new Event("unload")), this.reset(), getActiveMicroApp() === this.app.name && setActiveMicroApp(), this.destroying = !1);
 	}
-	reload(g = !1) {
-		let B = this.dom.src;
-		g && (B = generateURL(this.app, !0), ConsoleUtil.trace("go home", B)), ConsoleUtil.trace("reload app", this.app, B);
-		let V = new URL(B);
-		V.searchParams.set("__t", Date.now().toString()), this.dom.style.visibility = "hidden", this.dom.src = V.toString();
+	reload(s = !1) {
+		if (!this.dom) throw Error(`app dom not found: ${this.app.name}`);
+		let I = this.dom.src;
+		s && (I = generateURL(this.app, !0), ConsoleUtil.trace("go home", I)), ConsoleUtil.trace("reload app", this.app, I);
+		let L = new URL(I);
+		L.searchParams.set("__t", Date.now().toString()), this.dom.style.visibility = "hidden", this.state = "loading", this.loadPromise = new Promise((s) => this.resolveLoad = s), this.active && this.showLoading(), this.dom.src = L.toString();
 	}
-	changeOptions(g) {
-		ConsoleUtil.trace("changeOptions", this.app, g), this.app = {
+	changeOptions(s) {
+		ConsoleUtil.trace("changeOptions", this.app, s), this.app = {
 			...this.app,
-			...g
+			...s
 		};
 	}
-	onLoad(g) {
-		ConsoleUtil.trace("app onLoad", this.app.name, this.loadingTimer, this.loading), this.loadingTimer && clearTimeout(this.loadingTimer), this.loading && removeLoading(this.loading), _postMicro(this), ConsoleUtil.trace("this.app.onLoad", this.app.onLoad), this.app.onLoad && this.app.onLoad(g, this);
+	onLoad(s) {
+		ConsoleUtil.trace("app onLoad", this.app.name, this.loadingTimer, this.loading), this.loadingTimer && clearTimeout(this.loadingTimer), this.loading && removeLoading(this.loading), this.loading = void 0, this.state = this.active ? "active" : "loaded", this.dom && (this.dom.style.visibility = this.active ? "visible" : "hidden"), _postMicro(this), this.active && this.postLifecycle("activated"), this.resolveLoad?.(), this.resolveLoad = void 0, ConsoleUtil.trace("preload loaded", this.app.name), ConsoleUtil.trace("this.app.onLoad", this.app.onLoad), this.app.onLoad && this.app.onLoad(s, this);
+	}
+	onUnload(s) {
+		ConsoleUtil.trace("app onUnload", this.app.name), getActiveMicroApp() === this.app.name && clearParentUrl(this.app.name), this.app.onUnload && this.app.onUnload(s, this);
 	}
-	onUnload(g) {
-		ConsoleUtil.trace("app onUnload", this.app.name), clearParentUrl(this.app.name), this.app.onUnload && this.app.onUnload(g, this);
+	onError(s) {
+		this.state = "error", this.resolveLoad?.(), this.resolveLoad = void 0, ConsoleUtil.error("app onError", this.app.name), this.app.onError && this.app.onError(s, this);
 	}
-	onError(g) {
-		ConsoleUtil.error("app onError", this.app.name), this.app.onError && this.app.onError(g, this);
+	postLifecycle(s) {
+		this.dom?.contentWindow?.postMessage({ cmd: `$xt/micro/${this.app.name}/${s}` }, new URL(this.app.url, window.location.origin).origin);
 	}
-}, _postMicro = (g) => {
-	g.dom?.contentWindow?.postMessage({
-		cmd: `$xt/micro/${g.app.name}`,
+	reset() {
+		this.observer?.disconnect(), this.observer = void 0, this.dom = void 0, this.panel = void 0, this.loading = void 0, this.loadPromise = void 0, this.resolveLoad = void 0, this.state = "idle", this.active = !1;
+	}
+}, _postMicro = (s) => {
+	s.dom?.contentWindow?.postMessage({
+		cmd: `$xt/micro/${s.app.name}`,
 		data: {
-			name: g.app.name,
-			url: g.app.url,
-			preload: g.app.preload,
-			sync: g.app.sync || !0
+			name: s.app.name,
+			url: s.app.url,
+			preload: s.app.preload,
+			sync: s.app.sync ?? !0
 		}
-	}, "*");
-};
+	}, new URL(s.app.url, window.location.origin).origin);
+}, initialized = !1;
 const mainMicroInit = () => {
-	window[CONSTANT.MICRO_TYPE] = "parent", window.addEventListener("message", (g) => {
-		if (g.data.cmd === "$xt/micro/sync") {
-			ConsoleUtil.trace("父页面接受子应用同步路由信息", g.data);
-			let B = [
+	initialized || (initialized = !0, window[CONSTANT.MICRO_TYPE] = "parent", window.addEventListener("message", (s) => {
+		if (s.data?.cmd === "$xt/micro/sync") {
+			let I = getApp(s.data?.data?.name);
+			if (!isAppMessage(s, I) || getActiveMicroApp() !== I.name) return;
+			ConsoleUtil.trace("父页面接受子应用同步路由信息", s.data);
+			let L = [
 				CONSTANT.IS_MICRO,
 				CONSTANT.MICRO_NAME,
 				CONSTANT.MICRO_TOKEN
-			], V = new URL(window.decodeURIComponent(g.data.data.url), g.origin);
-			for (let g of B) V.searchParams.delete(g);
-			ConsoleUtil.trace("tempUrl", V);
-			let H = clearParentUrl(g.data.data.name), U = new URL(H);
-			U.searchParams.forEach((g, B) => {
-				B.startsWith(CONSTANT.URL_PARAM_PREFIX) && U.searchParams.delete(B);
-			}), ConsoleUtil.trace("mainURL.href", U.href);
-			let W = addOrReplaceUrlParam(U.href, g.data.data.name, V.href);
-			ConsoleUtil.trace("curUrl", W), window.history.replaceState(null, "", W);
-		} else if (g.data.cmd === "$xt/micro/info") {
-			ConsoleUtil.trace("parent 「$xt/micro/info」 receive message", g.data);
-			let B = getApp(g.data.data);
-			g.source.postMessage({
+			], R = new URL(window.decodeURIComponent(s.data.data.url), s.origin);
+			for (let s of L) R.searchParams.delete(s);
+			ConsoleUtil.trace("tempUrl", R);
+			let z = clearParentUrl(s.data.data.name), B = new URL(z);
+			ConsoleUtil.trace("mainURL.href", B.href);
+			let V = addOrReplaceUrlParam(B.href, s.data.data.name, R.href);
+			ConsoleUtil.trace("curUrl", V), window.history.replaceState(window.history.state, "", V);
+		} else if (s.data?.cmd === "$xt/micro/info") {
+			ConsoleUtil.trace("parent 「$xt/micro/info」 receive message", s.data);
+			let I = getApp(s.data.data);
+			if (!isAppMessage(s, I)) return;
+			s.source.postMessage({
 				cmd: "$xt/micro/info",
 				data: {
 					mainLocation: {
@@ -283,147 +315,198 @@ const mainMicroInit = () => {
 						protocol: window.location.protocol
 					},
 					mainMicroVersion: version,
-					name: B.name,
-					url: B.url,
-					params: B.params,
-					sync: B.sync,
-					preload: B.preload
+					name: I.name,
+					url: I.url,
+					params: I.params,
+					sync: I.sync,
+					preload: I.preload
 				}
-			}, { targetOrigin: g.origin });
+			}, { targetOrigin: s.origin });
 		}
-	});
-}, microInit = async (g = {}) => {
+	}));
+};
+var isAppMessage = (s, I) => {
+	if (!I?.instance.dom?.contentWindow) return !1;
+	let L = new URL(I.url, window.location.origin).origin;
+	return s.source === I.instance.dom.contentWindow && s.origin === L;
+};
+const microInit = async (s = {}) => {
 	window[CONSTANT.MICRO_TYPE] = "child";
-	let B = getQueryParameter(CONSTANT.IS_MICRO), V = getQueryParameter(CONSTANT.MICRO_NAME), H = getQueryParameter(CONSTANT.MICRO_TOKEN);
-	if (g.authHandler && await g.authHandler(H), ConsoleUtil.trace("child microInit", B, V), B && (window[CONSTANT.IS_MICRO] = B === "true", V && await syncAppInfo(V)), window[CONSTANT.IS_MICRO]) {
-		function B(g) {
-			var B = document.styleSheets[0];
-			if (!B) {
-				var V = document.createElement("style");
-				document.head.appendChild(V), B = V.sheet;
+	let I = getQueryParameter(CONSTANT.IS_MICRO), L = getQueryParameter(CONSTANT.MICRO_NAME), R = getQueryParameter(CONSTANT.MICRO_TOKEN);
+	if (s.authHandler && await s.authHandler(R), ConsoleUtil.trace("child microInit", I, L), I && (window[CONSTANT.IS_MICRO] = I === "true", L && await syncAppInfo(L)), window[CONSTANT.IS_MICRO]) {
+		function I(s) {
+			var I = document.styleSheets[0];
+			if (!I) {
+				var L = document.createElement("style");
+				document.head.appendChild(L), I = L.sheet;
 			}
-			B.insertRule(g, B.cssRules.length);
+			I.insertRule(s, I.cssRules.length);
 		}
-		window[CONSTANT.IS_MICRO] && g.hideHeaderCssSelector && (Array.isArray(g.hideHeaderCssSelector) ? g.hideHeaderCssSelector.forEach((g) => {
-			B(`${g} { display: none !important; }`);
-		}) : B(`${g.hideHeaderCssSelector} { display: none !important; }`)), await patchIframeHistory(V, window), window.addEventListener("message", async (g) => {
-			g.data.cmd === `$xt/micro/${V}` && syncUrlToWindow(V);
-		});
+		window[CONSTANT.IS_MICRO] && s.hideHeaderCssSelector && (Array.isArray(s.hideHeaderCssSelector) ? s.hideHeaderCssSelector.forEach((s) => {
+			I(`${s} { display: none !important; }`);
+		}) : I(`${s.hideHeaderCssSelector} { display: none !important; }`)), await patchIframeHistory(L, window), window.addEventListener("message", async (I) => {
+			I.source === window.parent && I.origin === window[CONSTANT.MICRO_APP]?.mainLocation.origin && I.data?.cmd === `$xt/micro/${L}` ? syncUrlToWindow(L) : I.source === window.parent && I.origin === window[CONSTANT.MICRO_APP]?.mainLocation.origin && I.data?.cmd === `$xt/micro/${L}/activated` ? (await syncUrlToWindow(L), await s.onActivated?.()) : I.source === window.parent && I.origin === window[CONSTANT.MICRO_APP]?.mainLocation.origin && I.data?.cmd === `$xt/micro/${L}/deactivated` && await s.onDeactivated?.();
+		}), L && await syncUrlToWindow(L);
 	} else ConsoleUtil.warn("当前环境非微应用环境");
 };
-function patchIframeHistory(g, B) {
-	let V = B.history, H = V.pushState, U = V.replaceState;
-	V.pushState = function(B, U, W) {
-		let G = {
-			...V.state || {},
-			...B,
+function patchIframeHistory(s, I) {
+	let L = I.history, R = L.pushState, z = L.replaceState;
+	L.pushState = function(I, z, B) {
+		let V = {
+			...L.state || {},
+			...I,
 			_patchedByParent: !0
 		};
-		H.call(V, G, U, W), syncUrlToWindow(g);
-	}, V.replaceState = function(g, B, H) {
-		let W = {
-			...V.state || {},
-			...g,
+		R.call(L, V, z, B), syncUrlToWindow(s);
+	}, L.replaceState = function(s, I, R) {
+		let B = {
+			...L.state || {},
+			...s,
 			_patchedByParent: !0
 		};
-		U.call(V, W, B, H);
+		z.call(L, B, I, R);
 	};
 }
-var syncAppInfo = async (g) => await ipcSyncAppInfo(g).then((g) => {
+var syncAppInfo = async (s) => await ipcSyncAppInfo(s).then((s) => {
 	window[CONSTANT.MICRO_APP] = {
 		microVersion: version,
-		...g
+		...s
 	};
 });
-async function syncUrlToWindow(g) {
-	console.log("syncUrlToWindow", g, window[CONSTANT.MICRO_APP], window.location.href.match(/__XT_MICRO_([^=]+)=/), getQueryParameter(CONSTANT.MICRO_NAME)), ConsoleUtil.trace("syncUrlToWindow", g, window[CONSTANT.MICRO_APP]), window[CONSTANT.MICRO_APP] || await syncAppInfo(g);
-	let { name: B, sync: V, mainLocation: H } = window[CONSTANT.MICRO_APP], U = window.location.pathname + window.location.search + window.location.hash;
-	ConsoleUtil.trace("curUrl", U), ConsoleUtil.trace("child", "「$xt/micro/sync」", "send", B, U), window.parent.postMessage({
+async function syncUrlToWindow(s) {
+	ConsoleUtil.trace("syncUrlToWindow", s, window[CONSTANT.MICRO_APP]), window[CONSTANT.MICRO_APP] || await syncAppInfo(s);
+	let { name: I, sync: L, mainLocation: R } = window[CONSTANT.MICRO_APP];
+	if (!L) return;
+	let z = window.location.pathname + window.location.search + window.location.hash;
+	ConsoleUtil.trace("curUrl", z), ConsoleUtil.trace("child", "「$xt/micro/sync」", "send", I, z), window.parent.postMessage({
 		cmd: "$xt/micro/sync",
 		data: {
-			name: B,
-			url: window.encodeURIComponent(U)
+			name: I,
+			url: window.encodeURIComponent(z)
 		}
-	}, H.origin);
+	}, R.origin);
 }
 var _apps = {}, defaultAppOption = {
 	url: "",
 	name: "",
 	sync: !0,
-	preload: !1
+	preload: !1,
+	keepAlive: !1
 };
-const setupApp = (g) => {
-	if (!g.url || g.url === "" || g.url === "undefined") {
-		ConsoleUtil.error("app url is required", g);
+const setupApp = (s) => {
+	if (!s.url || s.url === "" || s.url === "undefined") {
+		ConsoleUtil.error("app url is required", s);
 		return;
 	}
-	let B = Object.assign({}, defaultAppOption, g), V = _apps[g.name];
-	return V ? _apps[g.name] = {
-		...V,
-		...B
-	} : _apps[g.name] = {
-		...B,
-		instance: new MicroApp(g)
-	}, _apps[g.name];
-}, getApp = (g) => _apps[g];
-var setApp = (g, B) => _apps[g.name] = {
-	...g,
-	...B
+	let I = Object.assign({}, defaultAppOption, s), L = _apps[s.name];
+	return L ? (L.instance.changeOptions(I), _apps[s.name] = {
+		...L,
+		...I
+	}) : _apps[s.name] = {
+		...I,
+		instance: new MicroApp(s)
+	}, _apps[s.name];
+}, getApp = (s) => _apps[s], getApps = () => Object.values(_apps);
+var setApp = (s, I) => _apps[s.name] = {
+	...s,
+	...I
 };
-const startApp = (g, B) => new Promise((V, H) => {
-	let U = getApp(g);
-	U ? (B && (U.instance.changeOptions(B), U = setApp(U, B)), U.preload ? U.instance.preloadRender(U.el) : U.instance.mount(U.el), V(U)) : H("app not found, please setup app first");
-}), stopApp = (g) => {
-	let B = getApp(g);
-	B && B.instance.unmount();
-}, reloadApp = (g, B = !1) => {
-	let V = getApp(g);
-	V && V.instance.reload(B);
-}, clearParentUrl = (g) => {
-	ConsoleUtil.trace("clearParentUrl", g, CONSTANT.URL_PARAM_PREFIX + g);
-	let B = window.location.href.split("#");
-	ConsoleUtil.trace("url", B);
-	let V = new URL(B[0]);
-	V.searchParams.delete(CONSTANT.URL_PARAM_PREFIX + g);
-	let H = B.length > 1 ? V.href + "#" + B[1] : V.href;
-	return window.history.replaceState({}, "", H), H;
-}, isMicro = () => window[CONSTANT.IS_MICRO] === !0, isParent = () => window[CONSTANT.MICRO_TYPE] === "parent", createAppUrl = (g, B = window.__XT_MICRO_APP?.name) => {
-	let V = window.location;
-	if (isMicro()) V = window.__XT_MICRO_APP.mainLocation;
-	else if (!B) {
+const startApp = (s, I) => new Promise((L, R) => {
+	let z = getApp(s);
+	z ? (I && (z.instance.changeOptions(I), z = setApp(z, I)), z.instance.activate(z.el), L(z)) : R("app not found, please setup app first");
+}), stopApp = (s) => {
+	let I = getApp(s);
+	I && I.instance.destroy();
+}, reloadApp = (s, I = !1) => {
+	let L = getApp(s);
+	L && L.instance.reload(I);
+}, clearParentUrl = (s) => {
+	ConsoleUtil.trace("clearParentUrl", s, CONSTANT.URL_PARAM_PREFIX + s);
+	let I = window.location.href.split("#");
+	ConsoleUtil.trace("url", I);
+	let L = new URL(I[0]);
+	L.searchParams.delete(CONSTANT.URL_PARAM_PREFIX + s);
+	let R = I.length > 1 ? L.href + "#" + I[1] : L.href;
+	return window.history.replaceState(window.history.state, "", R), R;
+}, isMicro = () => window[CONSTANT.IS_MICRO] === !0, isParent = () => window[CONSTANT.MICRO_TYPE] === "parent", createAppUrl = (s, I = window.__XT_MICRO_APP?.name) => {
+	let L = window.location;
+	if (isMicro()) L = window.__XT_MICRO_APP.mainLocation;
+	else if (!I) {
 		ConsoleUtil.error("在主应用中需要传入应用名称");
 		return;
 	}
-	return `${V.origin}${V.pathname}?__XT_MICRO_${B}=${encodeURIComponent(g)}${V.hash}`;
+	let R = new URL(L.href);
+	return R.searchParams.set(CONSTANT.URL_PARAM_PREFIX + I, s), R.href;
 };
 var XTMicroView_default = /* @__PURE__ */ defineComponent({
 	__name: "XTMicroView",
 	props: { appId: String },
-	setup(B) {
-		let K = B, q = ref(), J = () => {
-			K.appId && startApp(K.appId, {
-				el: q.value,
-				onUnload(g, B) {
-					ConsoleUtil.trace("on unload", B.app.name);
+	setup(s) {
+		let L = s, z = ref(), B = () => {
+			L.appId && getApp(L.appId)?.preload && ConsoleUtil.warn(`微应用 ${L.appId} 的 preload 需要使用 XTMicroHost，当前按即时加载处理`), L.appId && startApp(L.appId, {
+				el: z.value,
+				onUnload(s, I) {
+					ConsoleUtil.trace("on unload", I.app.name);
 				}
-			}).then((g) => {
-				ConsoleUtil.trace("app mounted", K.appId);
+			}).then((s) => {
+				ConsoleUtil.trace("app mounted", L.appId);
 			});
 		};
-		return watch(() => K.appId, (g, B) => {
-			g !== B && B && stopApp(B), J();
+		return watch(() => L.appId, (s, I) => {
+			s !== I && I && stopApp(I), B();
 		}), onMounted(() => {
-			J();
-		}), onUnmounted(() => {
-			ConsoleUtil.trace("「micro」", "app unmount", K.appId), clearParentUrl(K.appId);
-		}), (B, H) => (openBlock(), createElementBlock("div", mergeProps({
+			B();
+		}), onBeforeUnmount(() => {
+			ConsoleUtil.trace("「micro」", "app unmount", L.appId), L.appId && stopApp(L.appId), L.appId && clearParentUrl(L.appId);
+		}), (s, L) => (openBlock(), createElementBlock("div", mergeProps({
 			ref_key: "refPanel",
-			ref: q
-		}, B.$attrs, { class: "xt-micro" }), null, 16));
+			ref: z
+		}, s.$attrs, { class: "xt-micro" }), null, 16));
+	}
+}), _hoisted_1 = { class: "xt-micro-host" }, XTMicroHost_default = /* @__PURE__ */ defineComponent({
+	__name: "XTMicroHost",
+	props: { activeApp: {} },
+	setup(L) {
+		let R = L, H = getApps(), U = {}, W = /* @__PURE__ */ new Set(), G = !1, K, q, J, Y = (s, I) => {
+			I instanceof HTMLElement && (U[s] = I);
+		}, X = async (s) => {
+			for (let I of H) if (I.name !== s) {
+				let s = I.instance.active;
+				I.instance.deactivate(), s && !I.keepAlive && I.instance.destroy();
+			}
+			if (setActiveMicroApp(s), !s) return;
+			let I = H.find((I) => I.name === s), L = U[s];
+			!I || !L || (W.add(s), await I.instance.activate(L));
+		}, Z = (s) => new Promise((I) => {
+			J = window.setTimeout(I, s);
+		}), Q = (s) => {
+			typeof window.requestIdleCallback == "function" ? K = window.requestIdleCallback(s) : q = setTimeout(s, 200);
+		}, $ = async (s) => {
+			let I = s.shift();
+			if (!I || G) return;
+			let L = U[I.name];
+			if (!L || I.instance.state !== "idle") {
+				Q(() => $(s));
+				return;
+			}
+			W.add(I.name), await Promise.race([I.instance.preload(L), Z(15e3)]), J !== void 0 && clearTimeout(J), G || Q(() => $(s));
+		};
+		return onMounted(async () => {
+			await nextTick(), await X(R.activeApp);
+			let s = H.filter((s) => s.preload && s.name !== R.activeApp);
+			s.forEach((s) => ConsoleUtil.trace("preload queued", s.name)), Q(() => $(s));
+		}), watch(() => R.activeApp, X), onBeforeUnmount(() => {
+			G = !0, K !== void 0 && window.cancelIdleCallback(K), q !== void 0 && clearTimeout(q), J !== void 0 && window.clearTimeout(J), W.forEach((s) => H.find((I) => I.name === s)?.instance.destroy()), setActiveMicroApp();
+		}), (R, z) => (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(!0), createElementBlock(Fragment, null, renderList(unref(H), (s) => (openBlock(), createElementBlock("div", {
+			key: s.name,
+			ref_for: !0,
+			ref: (I) => Y(s.name, I),
+			class: normalizeClass(["xt-micro-panel", { "is-active": s.name === L.activeApp }])
+		}, null, 2))), 128))]));
 	}
 });
 window[CONSTANT.MICRO_VERSION] = version, window.micro_api = { debug: ConsoleUtil.setEnable };
-var src_default = { install: (g, B = {}) => {
-	g.component("xt-micro-view", XTMicroView_default), mainMicroInit();
+var src_default = { install: (s, I = {}) => {
+	s.component("xt-micro-view", XTMicroView_default), s.component("xt-micro-host", XTMicroHost_default), mainMicroInit();
 } };
-export { XTMicroView_default as XTMicroView, clearParentUrl, createAppUrl, src_default as default, getApp, isMicro, isParent, microInit, reloadApp, setupApp, startApp, stopApp, utils_exports as utils };
+export { XTMicroHost_default as XTMicroHost, XTMicroView_default as XTMicroView, clearParentUrl, createAppUrl, src_default as default, getApp, getApps, isMicro, isParent, microInit, reloadApp, setupApp, startApp, stopApp, utils_exports as utils };

package/dist/types/api.d.ts

@@ -6,6 +6,7 @@ import { microInit } from './child';
  */
 export declare const setupApp: (AppOption: AppOption) => App | undefined;
 export declare const getApp: (name: string) => App;
+export declare const getApps: () => App[];
 /**
  * 启动微应用
  * @param name 应用名称

package/dist/types/components/XTMicroHost.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    activeApp?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/types/index.d.ts

@@ -1,8 +1,9 @@
 import { App } from 'vue';
 import { default as XTMicroView } from './components/XTMicroView.vue';
+import { default as XTMicroHost } from './components/XTMicroHost.vue';
 export * from './api';
 import * as utils from "./utils";
-export { XTMicroView, utils };
+export { XTMicroHost, XTMicroView, utils };
 declare const _default: {
     install: (app: App, _options?: any) => void;
 };

package/dist/types/parent.d.ts

@@ -1,32 +1,44 @@
-import { AppOption, App } from './types';
+import { AppOption, App, MicroAppState } from './types';
 export declare const isMicro: import('vue').Ref<boolean, boolean>;
+export declare const getActiveMicroApp: () => string;
+export declare const setActiveMicroApp: (name?: string) => void;
 export declare class MicroApp {
     app: App | AppOption;
     dom: HTMLIFrameElement | undefined;
     panel: HTMLElement | undefined;
     loading: HTMLElement | undefined;
     loadingTimer: NodeJS.Timeout | undefined;
+    state: MicroAppState;
+    active: boolean;
+    private loadPromise?;
+    private resolveLoad?;
+    private observer?;
+    private destroying;
     constructor(app: AppOption);
-    mount(el: HTMLElement | string | undefined, isHide?: boolean): void;
+    private getPanel;
+    private ensureLoaded;
+    private showLoading;
+    mount(el: HTMLElement | string | undefined): Promise<void>;
+    preload(el: HTMLElement | string | undefined): Promise<void>;
+    activate(el: HTMLElement | string | undefined): Promise<void>;
+    deactivate(): void;
     unmount(): void;
     /**
      * 预加载渲染
      * TODO 还差用户切走之后，如何将ifr还原回去，等待下次载入
      * @param el 挂载dom对象
      */
-    preloadRender(el: HTMLElement | string | undefined): void;
+    preloadRender(el: HTMLElement | string | undefined): Promise<void>;
     /**
      * 预加载app，先放到body，待启动时，挪过来
      */
-    preload(): void;
+    destroy(): void;
     reload(isGoHome?: boolean): void;
     changeOptions(options: Partial<AppOption>): void;
     onLoad(_event: Event): void;
     onUnload(_event: Event): void;
     onError(_event: Event): void;
+    private postLifecycle;
+    private reset;
 }
-/**
- * 初始化主应用微前端
- * 包括：监听子应用消息，同步子应用路由到主应用上
- */
 export declare const mainMicroInit: () => void;

package/dist/types/types.d.ts

@@ -5,7 +5,8 @@ export interface AppOption {
     url: string;
     el?: HTMLElement | string;
     preload?: boolean;
-    token?: () => string | string;
+    keepAlive?: boolean;
+    token?: string | (() => string);
     params?: {
         [key: string]: any;
     };
@@ -19,8 +20,11 @@ export interface App extends AppOption {
 }
 export interface MicroInitOptions {
     hideHeaderCssSelector?: string | string[];
-    authHandler?: (token: string) => void;
+    authHandler?: (token: string | null) => void | Promise<void>;
+    onActivated?: () => void | Promise<void>;
+    onDeactivated?: () => void | Promise<void>;
 }
+export type MicroAppState = "idle" | "loading" | "loaded" | "error" | "active";
 declare global {
     interface Window {
         [key: string]: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xingtukeji/micro",
-  "version": "1.1.27",
+  "version": "1.2.1",
   "private": false,
   "description": "",
   "main": "dist/index.js",