qlfy-postmate 1.1.7 → 1.2.0

package/README.md

@@ -1,184 +1,58 @@
-### 子系统认证通信插件使用文档
+### 子系统认证通信插件使用文档1.2.0
 
-#### 1、安装
+### 【1.2.0优化升级说明】
 
-```
-npm i qlfy-postmate@1.1.3
-```
-
-#### 2、导入
-
-```js
-import { ChildPostmate } from 'qlfy-postmate'
-```
+```txt
+1、优化了同IP链接切换时的系统资源重复加载问题
+	增加了系统间的通信处理方式
+	新版本中在new ChildPostmate时需传入第二个参数【vue-router的实例对象】router；
+	通过通信支持 + ChildPostmate内部对router的操作，实现主系统操控集成系统页面跳转的功能；
 
-#### 3、使用
+2、老版本的兼容性支持
+	如已完成集成的系统仍使用旧版本插件，集成效果不变，仅性能和切换效果差于新版
 
+3、建议
+	已完成集成系统也建议使用最新版本，使用变化极小
+	仅需以下两步操作：
+	（1）下载新版本插件：npm i qlfy-postmate@1.2.0
+	（2）使用处添加新参数：router
+		new ChildPostmate({...保持不变}, router)
 ```
-const childrenComm = new ChildPostmate({
-  error: (err: any) => {
-    console.log('-----------------链接失败-----------------', err)
-  },
-  success: (success: any) => {
-    console.log('-----------------链接成功-----------------', success)
-  },
-  receive: (dataInfo: any) => {
-    console.log('-----------------接收数据-----------------', dataInfo)
-  },
-})
-```
-
-#### 4、参数对象说明
-
-| 回调函数名称 | 解释                                                         | 回调参数                                                     | 返回值 |
-| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------ |
-| error        | 链接失败、未链接时执行                                       | null                                                         | void   |
-| success      | 链接成功时执行                                               | chldPostmate                                                 | void   |
-| receive      | 父页面推送数据时执行，初次链接成功会触发一次<br />可将本回调函数看做为websoket服务，后续父页面可能会不定时向子系统推送数据 | {<br />isHideHeader:boolean,<br />token:string,<br />loginInfo:object,<br />......<br />} | void   |
-
-#### 5、方法
-
-| 名称    | 解释                                                         | 使用                      |
-| ------- | ------------------------------------------------------------ | ------------------------- |
-| getData | 链接成功后<br />可通过ChildPostmate实例对象，主动向父页面获取数据 | getData((dataInfo)=>void) |
-
-#### 注意：
-
-1、ChildPostmate 链接的创建是异步过程，需等待error或success函数执行后才可进行登陆状态的判断
-
-2、getData方法，仅能在链接创建完成后再调用
-
-3、error、success函数仅作为链接状态的标注函数，不传递数据
-
-
-
-### 接入步骤
-
-1. 对系统登录状态进行改造，系统加载时先将登陆状态判断屏蔽
-
-2. 系统公共部分（app.vue）对该插件进行导入和 new，创建实例，并传入相应回调
-
-3. 等待回调被执行，并做出以下操作：
-
-   ------- 如果error回调执行：解除对登录状态的屏蔽，走系统本身登陆逻辑；
-
-   ------- 如果success回调执行：
-
-   ​	1、保持对登录状态的屏蔽，并等待receive回调执行；
-
-   ​	2、receive回调执行：
-
-   ​		（1）使用接收数据中的token、loginInfo数据，将本地的登陆状态设置为已登录，后续接口请求时携带本回调传入的token；
-
-   ​		（2）使用接收数据中的isHideHeader字段，对系统页头的显隐进行控制
 
-   ```vue
-   <my-header v-if="!isHideHeader" />
-   ```
 
-   ​		（3）解除对登陆状态判断的屏蔽（因已使用接收的数据配置了登录状态，不会触发本系统的登陆）；
 
-接入步骤（动态路由）
-
-### 样例一（app.vue）：
-
-App.vue
-
-```vue
-<template>
-  <div class="system-content" v-loading="loading">
-    <!-- 系统登录状态的判断，需等待postmate链接的响应后再执行 -->
-
-    <!-- 页头 -->
-    <my-header v-if="!isHideHeader"></my-header>
+#### 1、安装
 
-    <!-- 侧面导航 -->
-    <my-aside v-if="!isHideHeader"></my-aside>
+```
+npm i qlfy-postmate
+```
 
-    <!-- 内容区 -->
-    <RouterView v-if="!loading" />
-  </div>
-</template>
+#### 2、导入
 
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useSystemStore } from '@/store/modules/system'
+```js
 import { ChildPostmate } from 'qlfy-postmate'
-
-// 系统loading
-const loading = ref(false)
-// 页头是否展示
-const isHideHeader = ref(false)
-// pinia系统数据管理对象
-const systemStore = useSystemStore()
-
-initPostMate()
-
-// 方法 -- 初始化postmate链接
-function initPostMate() {
-  loading.value = true
-  const childrenComm = new ChildPostmate({
-    error: (err: any) => {
-      console.log('-----------------链接失败-----------------')
-      console.log(err)
-      loading.value = false
-    },
-
-    success: (success: any) => {
-      console.log('-----------------链接成功-----------------')
-      console.log(success)
-      loading.value = false
-    },
-
-    receive: (dataInfo: any) => {
-      console.log('-----------------接收数据-----------------')
-      console.log(dataInfo)
-      if (dataInfo.status !== 200) return
-      /**
-       * 接收到推送数据后做如下操作
-       * 1、根据isHideHeader控制页头显隐
-       * 2、将登录装填变更为已登录，并将token保存在正常登录所在位置进行取用
-       */
-
-      // 控制导航、页头的展示
-      isHideHeader.value = dataInfo.data.isHideHeader
-      // 保存登陆信息
-      systemStore.setLoginInfo(dataInfo.data.loginInfo)
-      // 保存token
-      systemStore.setTooken(dataInfo.data.token)
-    },
-  })
-}
-</script>
-
-<style scoped></style>
-
 ```
 
-### 样例二（main.js）【推荐】：
-
-```
+#### 3、使用（main.js）
 
+```js
 import { createApp } from "vue";
 import App from "./App.vue";
-import { ChildPostmate } from 'qlfy-postmate'
 import router from "./router";
-
 import { createPinia } from "pinia";
+import { ChildPostmate } from 'qlfy-postmate'
 const store = createPinia(); //pinia实例
-export const app = createApp(App);
+const app = createApp(App);
 
 // pinia
 app.use(store);
-// 路由拦截器
-import '@/permission.js'
 
 // 标识，是否为首次加载项目
 let flag = true
 // pinia模块
 import useCounterStore from "@/store/index.js";
 const $store = useCounterStore();
-// 创建链接
+// 创建链接，传入router实例以支持路由更新功能
 new ChildPostmate({
 	error: (err) => {
 		console.log('-----------------链接失败-----------------')
@@ -198,10 +72,10 @@ new ChildPostmate({
 		
 		// 数据更新 -- 是否隐藏页头
 		$store.setIsHideHeader(dataInfo.data.isHideHeader);
+		// 数据更新 -- token
+		$store.setIsHideHeader(dataInfo.data.token);
 		// 数据更新 -- 登陆信息
 		$store.setLoginInfo(dataInfo.data.loginInfo);
-		localStorage.setItem('info', JSON.stringify(dataInfo.data.loginInfo));
-		
 		// 项目挂载，仅首次加载项目时执行，后续receive触发不执行
 		if (flag) {
 			app.use(router)
@@ -209,10 +83,45 @@ new ChildPostmate({
 		}
 		flag = false
 	},
-})
+}, router) // 传入router实例，支持路由更新功能
 ```
 
+#### 4、参数说明
+
+| 参数名   | 说明                                                         | 类型                                                         |
+| -------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| eventObj | 事件对象集，对外暴露链接状态<br />详细说明见下方eventObj说明 | {<br />error:()=>void<br />success:(childPostmate)=>viod<br />receive:(res:any)=>void<br />} |
+| router   | 当前系统的vue-router实例                                     | Router                                                       |
+
+#### eventObj说明
+
+| 属性（支持的事件回调） | 说明                                                         | 类型                                                         |
+| ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| error                  | 链接失败、未链接时执行                                       | ()=>void                                                     |
+| success                | 链接成功时执行                                               | (chldPostmate)=>void                                         |
+| receive                | 父页面推送数据时执行，初次链接成功会触发一次<br />可将本回调函数看做为websoket服务，<br />后续父页面可能会不定时向子系统推送数据 | (<br />    {<br />        isHideHeader:boolean,<br />        token:string,<br />        loginInfo:object,<br />        ......<br />     }<br />)=>void |
+
+
+
+#### 5、方法
+
+| 名称             | 说明                                                         | 使用                                     |
+| ---------------- | ------------------------------------------------------------ | ---------------------------------------- |
+| getData          | 链接成功后<br />可通过ChildPostmate实例对象，主动向父页面获取数据 | getData((dataInfo)=>void)                |
+| setRouter        | 设置Vue Router实例和自定义路由更新回调函数<br />用于在实例创建后设置或更新路由实例 | setRouter(router, [routeUpdateCallback]) |
+| sendOtherRequest | 向父页面发送自定义请求                                       | sendOtherRequest(params)                 |
+
+#### 注意：
+
+1、ChildPostmate 链接的创建是异步过程，需等待error或success函数执行后才可进行登陆状态的判断
+
+2、getData方法，仅能在链接创建完成后再调用
+
+3、路由更新功能需要传入Vue Router实例才能使用
+
+5、如果需要自定义路由更新逻辑，可以传入routeUpdateCallback回调函数
 
+6、error、success函数仅作为链接状态的标注函数，不传递数据
 
 ### 集成调试
 

package/lib/index.mjs

@@ -1,9 +1,6 @@
-var p = Object.defineProperty;
-var g = (r, t, e) => t in r ? p(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var l = (r, t, e) => g(r, typeof t != "symbol" ? t + "" : t, e);
-const h = "application/x-postmate-v1+json";
-let y = 0;
-const w = {
+const c = "application/x-postmate-v1+json";
+let m = 0;
+const f = {
   handshake: 1,
   "handshake-reply": 1,
   call: 1,
@@ -11,26 +8,26 @@ const w = {
   reply: 1,
   request: 1
 };
-function f(r, t) {
-  return (typeof t != "string" || r.origin === t) && !!r.data && (typeof r.data != "object" || "postmate" in r.data) && r.data.type === h && !!w[r.data.postmate];
+function u(n, t) {
+  return (typeof t != "string" || n.origin === t) && !!n.data && (typeof n.data != "object" || "postmate" in n.data) && n.data.type === c && !!f[n.data.postmate];
 }
-class P {
+class g {
   constructor(t) {
     this.parent = t.parent, this.frame = t.frame, this.child = t.child, this.childOrigin = t.childOrigin, this.events = {}, this.listener = (e) => {
-      if (!f(e, this.childOrigin)) return;
-      const { value: s = {} } = e.data, { name: i, data: a } = s;
-      e.data.postmate === "emit" && i in this.events && this.events[i].call(this, a);
+      if (!u(e, this.childOrigin)) return;
+      const { value: s = {} } = e.data, { name: a, data: r } = s;
+      e.data.postmate === "emit" && a in this.events && this.events[a].call(this, r);
     }, this.parent.addEventListener("message", this.listener, !1);
   }
   get(t) {
     return new o.Promise((e) => {
-      const s = ++y, i = (a) => {
-        a.data.uid === s && a.data.postmate === "reply" && (this.parent.removeEventListener("message", i, !1), e(a.data.value));
+      const s = ++m, a = (r) => {
+        r.data.uid === s && r.data.postmate === "reply" && (this.parent.removeEventListener("message", a, !1), e(r.data.value));
       };
-      this.parent.addEventListener("message", i, !1), this.child.postMessage(
+      this.parent.addEventListener("message", a, !1), this.child.postMessage(
         {
           postmate: "request",
-          type: h,
+          type: c,
           property: t,
           uid: s
         },
@@ -42,7 +39,7 @@ class P {
     this.child.postMessage(
       {
         postmate: "call",
-        type: h,
+        type: c,
         property: t,
         data: e
       },
@@ -56,33 +53,33 @@ class P {
     window.removeEventListener("message", this.listener, !1), this.frame.parentNode.removeChild(this.frame);
   }
 }
-class E {
+class w {
   constructor(t) {
     this.model = t.model, this.parent = t.parent, this.parentOrigin = t.parentOrigin, this.child = t.child, this.child.addEventListener("message", (e) => {
-      if (!f(e, this.parentOrigin)) return;
-      const { postmate: s, property: i, uid: a, data: d } = e.data, n = this.model[i];
+      if (!u(e, this.parentOrigin)) return;
+      const { postmate: s, property: a, uid: r, data: h } = e.data, i = this.model[a];
       if (s !== "call") {
-        const c = typeof n == "function" ? n() : n;
-        o.Promise.resolve(c).then((m) => {
+        const l = typeof i == "function" ? i() : i;
+        o.Promise.resolve(l).then((d) => {
           e.source.postMessage(
             {
-              property: i,
+              property: a,
               postmate: "reply",
-              type: h,
-              uid: a,
-              value: m
+              type: c,
+              uid: r,
+              value: d
             },
             e.origin
           );
         });
-      } else i in this.model && typeof n == "function" && n(d);
+      } else a in this.model && typeof i == "function" && i(h);
     });
   }
   emit(t, e) {
     this.parent.postMessage(
       {
         postmate: "emit",
-        type: h,
+        type: c,
         value: { name: t, data: e }
       },
       this.parentOrigin
@@ -90,40 +87,40 @@ class E {
   }
 }
 class o {
-  constructor({ container: t = document.body, model: e, url: s, name: i, classListArray: a = [] }) {
-    return this.parent = window, this.frame = document.createElement("iframe"), this.frame.name = i || "", this.frame.classList.add(...a), t.appendChild(this.frame), this.child = this.frame.contentWindow, this.model = e || {}, this.sendHandshake(s);
+  constructor({ container: t = document.body, model: e, url: s, name: a, classListArray: r = [] }) {
+    return this.parent = window, this.frame = document.createElement("iframe"), this.frame.name = a || "", this.frame.classList.add(...r), t.appendChild(this.frame), this.child = this.frame.contentWindow, this.model = e || {}, this.sendHandshake(s);
   }
   sendHandshake(t) {
     const e = (() => {
-      const a = document.createElement("a");
-      a.href = t;
-      const d = a.protocol.length > 4 ? a.protocol : window.location.protocol, n = a.host.length ? a.port === "80" || a.port === "443" ? a.hostname : a.host : window.location.host;
-      return a.origin || `${d}//${n}`;
+      const r = document.createElement("a");
+      r.href = t;
+      const h = r.protocol.length > 4 ? r.protocol : window.location.protocol, i = r.host.length ? r.port === "80" || r.port === "443" ? r.hostname : r.host : window.location.host;
+      return r.origin || `${h}//${i}`;
     })();
-    let s = 0, i;
-    return new o.Promise((a, d) => {
-      const n = (u) => {
-        if (!f(u, e)) return !1;
-        u.data.postmate === "handshake-reply" ? (clearInterval(i), this.parent.removeEventListener("message", n, !1), this.childOrigin = u.origin, a(new P(this))) : d("Failed handshake");
+    let s = 0, a;
+    return new o.Promise((r, h) => {
+      const i = (p) => {
+        if (!u(p, e)) return !1;
+        p.data.postmate === "handshake-reply" ? (clearInterval(a), this.parent.removeEventListener("message", i, !1), this.childOrigin = p.origin, r(new g(this))) : h("Failed handshake");
       };
-      this.parent.addEventListener("message", n, !1);
-      const c = () => {
+      this.parent.addEventListener("message", i, !1);
+      const l = () => {
         s++, this.child.postMessage(
           {
             postmate: "handshake",
-            type: h,
+            type: c,
             model: this.model
           },
           e
-        ), s === 5 && clearInterval(i);
-      }, m = () => {
-        c(), i = setInterval(c, 500);
+        ), s === 5 && clearInterval(a);
+      }, d = () => {
+        l(), a = setInterval(l, 500);
       };
-      this.frame.onload = m, this.frame.attachEvent && this.frame.attachEvent("onload", m), this.frame.src = t;
+      this.frame.onload = d, this.frame.attachEvent && this.frame.attachEvent("onload", d), this.frame.src = t;
     });
   }
 }
-class I {
+class P {
   constructor(t) {
     return this.child = window, this.model = t, this.parent = window.parent, this.sendHandshakeReply();
   }
@@ -135,14 +132,14 @@ class I {
           this.child.removeEventListener("message", this, !1), s.source.postMessage(
             {
               postmate: "handshake-reply",
-              type: h
+              type: c
             },
             s.origin
           ), this.parentOrigin = s.origin;
-          const i = s.data.model;
-          i && Object.keys(i).forEach((a) => {
-            this.model[a] = i[a];
-          }), t(new E(this));
+          const a = s.data.model;
+          a && Object.keys(a).forEach((r) => {
+            this.model[r] = a[r];
+          }), t(new w(this));
         }
       }, !1);
     });
@@ -156,10 +153,10 @@ o.Promise = (() => {
     return Promise;
   }
 })();
-o.Model = I;
-class k {
-  constructor(t) {
-    this.childPostmate = null, this.parentPostmate = null, this.isGetData = !1, this.getDataCllBack = null, window.top !== window.self ? this.init(t) : t.error({ status: 500, data: null, message: "未在一体化平台中运行" });
+o.Model = P;
+class y {
+  constructor(t, e, s) {
+    this.childPostmate = null, this.parentPostmate = null, this.isGetData = !1, this.getDataCllBack = null, this.router = null, this.routeUpdateCallback = null, this.router = e, this.routeUpdateCallback = s, window.top !== window.self ? this.init(t) : t.error({ status: 500, data: null, message: "未在一体化平台中运行" });
   }
   init(t) {
     const e = this;
@@ -175,6 +172,23 @@ class k {
           message: "success",
           data: s
         }), e.isGetData = !1;
+      },
+      // 处理路由更新
+      routeUpdate(s) {
+        try {
+          window.parent.postMessage(JSON.stringify({
+            type: "route_update_support",
+            supported: !0
+          }), "*");
+          const a = JSON.parse(s);
+          if (e.routeUpdateCallback) {
+            e.routeUpdateCallback(a);
+            return;
+          }
+          e.router ? e.router.replace(a.fullPath) : console.warn("未提供router实例，无法进行路由更新");
+        } catch (a) {
+          console.error("路由更新失败:", a);
+        }
       }
     }).then((s) => {
       e.parentPostmate = s, e.getData(), t.success({
@@ -200,25 +214,63 @@ class k {
     }
     t ? (this.isGetData = !0, this.getDataCllBack = t) : (this.isGetData = !1, this.getDataCllBack = null), this.parentPostmate.emit("requestBaseData");
   }
+  /**
+   * 设置路由实例和路由更新回调
+   * @param router Vue Router实例
+   * @param routeUpdateCallback 自定义路由更新回调函数
+   */
+  setRouter(t, e) {
+    this.router = t, e && (this.routeUpdateCallback = e);
+  }
+  /**
+   * 向父页面发送其他请求
+   * @param params 请求参数
+   */
+  sendOtherRequest(t) {
+    this.parentPostmate && this.parentPostmate.emit("otherRequest", t);
+  }
 }
-class v {
-  constructor(t, e = null, s = "") {
-    /** 连接到的子 postmate 实例 */
-    l(this, "postmateParent", null);
-    /** 通讯数据 */
-    l(this, "dataInfo", {
-      loginInfo: null,
+class U {
+  constructor(t, e, s = "", a) {
+    this.postmateParent = null, this.dataInfo = {
+      loginInfo: {},
       token: "",
       isHideHeader: !0
-    });
-    /** iframe Dom 容器 */
-    l(this, "iframeEle", null);
-    /** 当前 iframe url */
-    l(this, "currentUrl", "");
-    /** 存储当前的 iframe 元素 */
-    l(this, "currentIframe", null);
-    l(this, "loadFunction", null);
-    this.dataInfo = t || this.dataInfo, this.setIframeEle(e), this.setIframeUrl(s);
+    }, this.iframeEle = null, this.currentUrl = "", this.currentIframe = null, this.loadFunction = null, this.handleOtherRequest = null, this.parsedCurrentUrl = null, this.childSupportsRouteUpdate = !0, this.dataInfo = t || this.dataInfo, this.iframeEle = e, this.setIframeUrl(s), a && (this.handleOtherRequest = a);
+  }
+  /** 解析URL */
+  parseUrl(t) {
+    const e = document.createElement("a");
+    e.href = t;
+    const s = e.protocol.length > 4 ? e.protocol : window.location.protocol, a = e.hostname, r = e.port || (s === "https:" ? "443" : s === "http:" ? "80" : ""), h = e.pathname.startsWith("/") ? e.pathname : `/${e.pathname}`, i = e.search, l = e.hash, d = e.origin || `${s}//${a}${r ? `:${r}` : ""}`, p = `${h}${i}${l}`;
+    return {
+      protocol: s,
+      host: a,
+      port: r,
+      pathname: h,
+      search: i,
+      hash: l,
+      origin: d,
+      fullPath: p
+    };
+  }
+  /** 比较两个URL是否相同（协议、主机、端口） */
+  compareUrlBase(t, e) {
+    if (!t || !e) return !1;
+    const s = this.parseUrl(t), a = this.parseUrl(e);
+    return s.protocol === a.protocol && s.host === a.host && s.port === a.port;
+  }
+  /** 比较两个URL的路径是否相同（不包含查询参数和哈希） */
+  compareUrlPath(t, e) {
+    if (!t || !e) return !1;
+    const s = this.parseUrl(t), a = this.parseUrl(e);
+    return s.pathname === a.pathname;
+  }
+  /** 比较两个URL是否完全相同（包括查询参数和哈希） */
+  compareUrlFull(t, e) {
+    if (!t || !e) return !1;
+    const s = this.parseUrl(t), a = this.parseUrl(e);
+    return s.fullPath === a.fullPath;
   }
   /** 清除当前的 iframe 和 postmate 实例 */
   clear() {
@@ -226,7 +278,7 @@ class v {
   }
   /** 初始化 */
   async init(t = null) {
-    if (this.clear(), !this.iframeEle || !this.currentUrl) {
+    if (this.clear(), this.childSupportsRouteUpdate = !0, !this.iframeEle || !this.currentUrl) {
       console.warn("iframeEle 和 currentUrl 是必需的");
       return;
     }
@@ -237,29 +289,78 @@ class v {
     }
     const s = new o({
       container: e,
-      url: this.currentUrl
+      url: this.currentUrl,
+      name: "",
+      model: ""
     });
     this.currentIframe = e.querySelector("iframe"), this.currentIframe.setAttribute("frameborder", "0"), this.currentIframe.setAttribute("allow", "fullscreen"), this.currentIframe.addEventListener("load", () => {
-      this.loadFunction();
-    }), s.then((i) => {
-      this.postmateParent = i, i.on("requestBaseData", (a) => {
+      this.loadFunction && this.loadFunction();
+    }), s.then((a) => {
+      this.postmateParent = a, a.on("requestBaseData", () => {
         this.sendData();
+      }), a.on("otherRequest", (r) => {
+        this.handleOtherRequest && this.handleOtherRequest(r);
       }), typeof t == "function" && t();
-    }).catch((i) => {
-      console.error("Postmate 连接失败:", i);
+    }).catch((a) => {
+      console.error("Postmate 连接失败:", a);
     });
   }
   /** 设置load执行事件 */
   setLoadFunction(t) {
     this.loadFunction = t;
   }
-  /** 设置 iframe Dom */
-  setIframeEle(t) {
-    this.iframeEle !== t && (this.iframeEle = t, this.iframeEle && this.currentUrl && this.init());
-  }
   /** 设置 iframe url */
   setIframeUrl(t) {
-    this.currentUrl !== t && (this.currentUrl = t, this.iframeEle && this.currentUrl && this.init());
+    if (this.currentUrl === t) return;
+    if (!this.currentUrl) {
+      this.currentUrl = t, this.parsedCurrentUrl = this.parseUrl(t), this.iframeEle && this.init();
+      return;
+    }
+    const e = this.parseUrl(t);
+    if (this.postmateParent && this.compareUrlBase(this.currentUrl, t) && this.childSupportsRouteUpdate)
+      if (this.compareUrlPath(this.currentUrl, t)) {
+        if (this.compareUrlFull(this.currentUrl, t))
+          return;
+        this.currentUrl = t, this.parsedCurrentUrl = e, this.sendRouteUpdate(e);
+        return;
+      } else {
+        this.currentUrl = t, this.parsedCurrentUrl = e, this.sendRouteUpdate(e);
+        return;
+      }
+    this.currentUrl = t, this.parsedCurrentUrl = e, this.iframeEle && this.init();
+  }
+  /** 向子页面发送路由更新消息 */
+  sendRouteUpdate(t) {
+    if (this.postmateParent) {
+      if (!this.childSupportsRouteUpdate) {
+        console.warn("子页面不支持路由更新，直接重新初始化iframe"), this.init();
+        return;
+      }
+      try {
+        this.postmateParent.call(
+          "routeUpdate",
+          JSON.stringify({
+            fullPath: t.fullPath,
+            pathname: t.pathname,
+            search: t.search,
+            hash: t.hash
+          })
+        );
+        let e = !1;
+        const s = (a) => {
+          try {
+            const r = JSON.parse(a.data);
+            r && r.type === "route_update_support" && r.supported === !0 && (e = !0, window.removeEventListener("message", s));
+          } catch {
+          }
+        };
+        window.addEventListener("message", s), setTimeout(() => {
+          window.removeEventListener("message", s), e || (console.warn("子页面不支持路由更新，将在下次更新时重新初始化iframe"), this.childSupportsRouteUpdate = !1, this.init());
+        }, 1e3);
+      } catch (e) {
+        console.warn("发送路由更新消息失败，将重新初始化iframe:", e), this.childSupportsRouteUpdate = !1, this.init();
+      }
+    }
   }
   /** 向子页面发送消息 */
   sendData() {
@@ -271,6 +372,6 @@ class v {
   }
 }
 export {
-  k as ChildPostmate,
-  v as ParentPostmate
+  y as ChildPostmate,
+  U as ParentPostmate
 };

package/lib/index.umd.js

@@ -1 +1 @@
-(function(n,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(n=typeof globalThis<"u"?globalThis:n||self,r(n["qlfy-postmate"]={}))})(this,function(n){"use strict";var k=Object.defineProperty;var v=(n,r,c)=>r in n?k(n,r,{enumerable:!0,configurable:!0,writable:!0,value:c}):n[r]=c;var d=(n,r,c)=>v(n,typeof r!="symbol"?r+"":r,c);const r="application/x-postmate-v1+json";let c=0;const y={handshake:1,"handshake-reply":1,call:1,emit:1,reply:1,request:1};function p(o,t){return(typeof t!="string"||o.origin===t)&&!!o.data&&(typeof o.data!="object"||"postmate"in o.data)&&o.data.type===r&&!!y[o.data.postmate]}class P{constructor(t){this.parent=t.parent,this.frame=t.frame,this.child=t.child,this.childOrigin=t.childOrigin,this.events={},this.listener=e=>{if(!p(e,this.childOrigin))return;const{value:s={}}=e.data,{name:i,data:a}=s;e.data.postmate==="emit"&&i in this.events&&this.events[i].call(this,a)},this.parent.addEventListener("message",this.listener,!1)}get(t){return new l.Promise(e=>{const s=++c,i=a=>{a.data.uid===s&&a.data.postmate==="reply"&&(this.parent.removeEventListener("message",i,!1),e(a.data.value))};this.parent.addEventListener("message",i,!1),this.child.postMessage({postmate:"request",type:r,property:t,uid:s},this.childOrigin)})}call(t,e){this.child.postMessage({postmate:"call",type:r,property:t,data:e},this.childOrigin)}on(t,e){this.events[t]=e}destroy(){window.removeEventListener("message",this.listener,!1),this.frame.parentNode.removeChild(this.frame)}}class w{constructor(t){this.model=t.model,this.parent=t.parent,this.parentOrigin=t.parentOrigin,this.child=t.child,this.child.addEventListener("message",e=>{if(!p(e,this.parentOrigin))return;const{postmate:s,property:i,uid:a,data:m}=e.data,h=this.model[i];if(s!=="call"){const u=typeof h=="function"?h():h;l.Promise.resolve(u).then(f=>{e.source.postMessage({property:i,postmate:"reply",type:r,uid:a,value:f},e.origin)})}else i in this.model&&typeof h=="function"&&h(m)})}emit(t,e){this.parent.postMessage({postmate:"emit",type:r,value:{name:t,data:e}},this.parentOrigin)}}class l{constructor({container:t=document.body,model:e,url:s,name:i,classListArray:a=[]}){return this.parent=window,this.frame=document.createElement("iframe"),this.frame.name=i||"",this.frame.classList.add(...a),t.appendChild(this.frame),this.child=this.frame.contentWindow,this.model=e||{},this.sendHandshake(s)}sendHandshake(t){const e=(()=>{const a=document.createElement("a");a.href=t;const m=a.protocol.length>4?a.protocol:window.location.protocol,h=a.host.length?a.port==="80"||a.port==="443"?a.hostname:a.host:window.location.host;return a.origin||`${m}//${h}`})();let s=0,i;return new l.Promise((a,m)=>{const h=g=>{if(!p(g,e))return!1;g.data.postmate==="handshake-reply"?(clearInterval(i),this.parent.removeEventListener("message",h,!1),this.childOrigin=g.origin,a(new P(this))):m("Failed handshake")};this.parent.addEventListener("message",h,!1);const u=()=>{s++,this.child.postMessage({postmate:"handshake",type:r,model:this.model},e),s===5&&clearInterval(i)},f=()=>{u(),i=setInterval(u,500)};this.frame.onload=f,this.frame.attachEvent&&this.frame.attachEvent("onload",f),this.frame.src=t})}}class E{constructor(t){return this.child=window,this.model=t,this.parent=window.parent,this.sendHandshakeReply()}sendHandshakeReply(){return new l.Promise((t,e)=>{this.child.addEventListener("message",s=>{if(s.data.postmate){if(s.data.postmate!=="handshake")return e("Handshake Reply Failed");this.child.removeEventListener("message",this,!1),s.source.postMessage({postmate:"handshake-reply",type:r},s.origin),this.parentOrigin=s.origin;const i=s.data.model;i&&Object.keys(i).forEach(a=>{this.model[a]=i[a]}),t(new w(this))}},!1)})}}l.debug=!1,l.Promise=(()=>{try{return typeof window<"u"?window.Promise:Promise}catch{return Promise}})(),l.Model=E;class I{constructor(t){this.childPostmate=null,this.parentPostmate=null,this.isGetData=!1,this.getDataCllBack=null,window.top!==window.self?this.init(t):t.error({status:500,data:null,message:"未在一体化平台中运行"})}init(t){const e=this;this.childPostmate=new l.Model({baseData(s){s=JSON.parse(s),e.isGetData?e.getDataCllBack&&e.getDataCllBack({status:200,message:"success",data:s}):t.receive({status:200,message:"success",data:s}),e.isGetData=!1}}).then(s=>{e.parentPostmate=s,e.getData(),t.success({status:200,message:"success",data:{ChildPostmate:s}})}).catch(s=>{t.error({status:500,data:null,message:s})})}getData(t){if(!this.parentPostmate){t({status:500,message:"父页面未连接",data:null});return}t?(this.isGetData=!0,this.getDataCllBack=t):(this.isGetData=!1,this.getDataCllBack=null),this.parentPostmate.emit("requestBaseData")}}class D{constructor(t,e=null,s=""){d(this,"postmateParent",null);d(this,"dataInfo",{loginInfo:null,token:"",isHideHeader:!0});d(this,"iframeEle",null);d(this,"currentUrl","");d(this,"currentIframe",null);d(this,"loadFunction",null);this.dataInfo=t||this.dataInfo,this.setIframeEle(e),this.setIframeUrl(s)}clear(){this.postmateParent&&(this.postmateParent.destroy(),this.postmateParent=null),this.currentIframe&&this.currentIframe.parentNode&&this.currentIframe.parentNode.removeChild(this.currentIframe),this.currentIframe=null}async init(t=null){if(this.clear(),!this.iframeEle||!this.currentUrl){console.warn("iframeEle 和 currentUrl 是必需的");return}const e=typeof this.iframeEle=="function"?this.iframeEle():this.iframeEle;if(!e){console.warn("无法获取 iframe 容器");return}const s=new l({container:e,url:this.currentUrl});this.currentIframe=e.querySelector("iframe"),this.currentIframe.setAttribute("frameborder","0"),this.currentIframe.setAttribute("allow","fullscreen"),this.currentIframe.addEventListener("load",()=>{this.loadFunction()}),s.then(i=>{this.postmateParent=i,i.on("requestBaseData",a=>{this.sendData()}),typeof t=="function"&&t()}).catch(i=>{console.error("Postmate 连接失败:",i)})}setLoadFunction(t){this.loadFunction=t}setIframeEle(t){this.iframeEle!==t&&(this.iframeEle=t,this.iframeEle&&this.currentUrl&&this.init())}setIframeUrl(t){this.currentUrl!==t&&(this.currentUrl=t,this.iframeEle&&this.currentUrl&&this.init())}sendData(){this.postmateParent&&this.postmateParent.call("baseData",JSON.stringify(this.dataInfo))}destroy(){this.clear()}}n.ChildPostmate=I,n.ParentPostmate=D,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+(function(d,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(d=typeof globalThis<"u"?globalThis:d||self,n(d["qlfy-postmate"]={}))})(this,function(d){"use strict";const n="application/x-postmate-v1+json";let f=0;const g={handshake:1,"handshake-reply":1,call:1,emit:1,reply:1,request:1};function m(o,t){return(typeof t!="string"||o.origin===t)&&!!o.data&&(typeof o.data!="object"||"postmate"in o.data)&&o.data.type===n&&!!g[o.data.postmate]}class P{constructor(t){this.parent=t.parent,this.frame=t.frame,this.child=t.child,this.childOrigin=t.childOrigin,this.events={},this.listener=e=>{if(!m(e,this.childOrigin))return;const{value:s={}}=e.data,{name:a,data:r}=s;e.data.postmate==="emit"&&a in this.events&&this.events[a].call(this,r)},this.parent.addEventListener("message",this.listener,!1)}get(t){return new h.Promise(e=>{const s=++f,a=r=>{r.data.uid===s&&r.data.postmate==="reply"&&(this.parent.removeEventListener("message",a,!1),e(r.data.value))};this.parent.addEventListener("message",a,!1),this.child.postMessage({postmate:"request",type:n,property:t,uid:s},this.childOrigin)})}call(t,e){this.child.postMessage({postmate:"call",type:n,property:t,data:e},this.childOrigin)}on(t,e){this.events[t]=e}destroy(){window.removeEventListener("message",this.listener,!1),this.frame.parentNode.removeChild(this.frame)}}class w{constructor(t){this.model=t.model,this.parent=t.parent,this.parentOrigin=t.parentOrigin,this.child=t.child,this.child.addEventListener("message",e=>{if(!m(e,this.parentOrigin))return;const{postmate:s,property:a,uid:r,data:l}=e.data,i=this.model[a];if(s!=="call"){const c=typeof i=="function"?i():i;h.Promise.resolve(c).then(u=>{e.source.postMessage({property:a,postmate:"reply",type:n,uid:r,value:u},e.origin)})}else a in this.model&&typeof i=="function"&&i(l)})}emit(t,e){this.parent.postMessage({postmate:"emit",type:n,value:{name:t,data:e}},this.parentOrigin)}}class h{constructor({container:t=document.body,model:e,url:s,name:a,classListArray:r=[]}){return this.parent=window,this.frame=document.createElement("iframe"),this.frame.name=a||"",this.frame.classList.add(...r),t.appendChild(this.frame),this.child=this.frame.contentWindow,this.model=e||{},this.sendHandshake(s)}sendHandshake(t){const e=(()=>{const r=document.createElement("a");r.href=t;const l=r.protocol.length>4?r.protocol:window.location.protocol,i=r.host.length?r.port==="80"||r.port==="443"?r.hostname:r.host:window.location.host;return r.origin||`${l}//${i}`})();let s=0,a;return new h.Promise((r,l)=>{const i=p=>{if(!m(p,e))return!1;p.data.postmate==="handshake-reply"?(clearInterval(a),this.parent.removeEventListener("message",i,!1),this.childOrigin=p.origin,r(new P(this))):l("Failed handshake")};this.parent.addEventListener("message",i,!1);const c=()=>{s++,this.child.postMessage({postmate:"handshake",type:n,model:this.model},e),s===5&&clearInterval(a)},u=()=>{c(),a=setInterval(c,500)};this.frame.onload=u,this.frame.attachEvent&&this.frame.attachEvent("onload",u),this.frame.src=t})}}class y{constructor(t){return this.child=window,this.model=t,this.parent=window.parent,this.sendHandshakeReply()}sendHandshakeReply(){return new h.Promise((t,e)=>{this.child.addEventListener("message",s=>{if(s.data.postmate){if(s.data.postmate!=="handshake")return e("Handshake Reply Failed");this.child.removeEventListener("message",this,!1),s.source.postMessage({postmate:"handshake-reply",type:n},s.origin),this.parentOrigin=s.origin;const a=s.data.model;a&&Object.keys(a).forEach(r=>{this.model[r]=a[r]}),t(new w(this))}},!1)})}}h.debug=!1,h.Promise=(()=>{try{return typeof window<"u"?window.Promise:Promise}catch{return Promise}})(),h.Model=y;class U{constructor(t,e,s){this.childPostmate=null,this.parentPostmate=null,this.isGetData=!1,this.getDataCllBack=null,this.router=null,this.routeUpdateCallback=null,this.router=e,this.routeUpdateCallback=s,window.top!==window.self?this.init(t):t.error({status:500,data:null,message:"未在一体化平台中运行"})}init(t){const e=this;this.childPostmate=new h.Model({baseData(s){s=JSON.parse(s),e.isGetData?e.getDataCllBack&&e.getDataCllBack({status:200,message:"success",data:s}):t.receive({status:200,message:"success",data:s}),e.isGetData=!1},routeUpdate(s){try{window.parent.postMessage(JSON.stringify({type:"route_update_support",supported:!0}),"*");const a=JSON.parse(s);if(e.routeUpdateCallback){e.routeUpdateCallback(a);return}e.router?e.router.replace(a.fullPath):console.warn("未提供router实例，无法进行路由更新")}catch(a){console.error("路由更新失败:",a)}}}).then(s=>{e.parentPostmate=s,e.getData(),t.success({status:200,message:"success",data:{ChildPostmate:s}})}).catch(s=>{t.error({status:500,data:null,message:s})})}getData(t){if(!this.parentPostmate){t({status:500,message:"父页面未连接",data:null});return}t?(this.isGetData=!0,this.getDataCllBack=t):(this.isGetData=!1,this.getDataCllBack=null),this.parentPostmate.emit("requestBaseData")}setRouter(t,e){this.router=t,e&&(this.routeUpdateCallback=e)}sendOtherRequest(t){this.parentPostmate&&this.parentPostmate.emit("otherRequest",t)}}class E{constructor(t,e,s="",a){this.postmateParent=null,this.dataInfo={loginInfo:{},token:"",isHideHeader:!0},this.iframeEle=null,this.currentUrl="",this.currentIframe=null,this.loadFunction=null,this.handleOtherRequest=null,this.parsedCurrentUrl=null,this.childSupportsRouteUpdate=!0,this.dataInfo=t||this.dataInfo,this.iframeEle=e,this.setIframeUrl(s),a&&(this.handleOtherRequest=a)}parseUrl(t){const e=document.createElement("a");e.href=t;const s=e.protocol.length>4?e.protocol:window.location.protocol,a=e.hostname,r=e.port||(s==="https:"?"443":s==="http:"?"80":""),l=e.pathname.startsWith("/")?e.pathname:`/${e.pathname}`,i=e.search,c=e.hash,u=e.origin||`${s}//${a}${r?`:${r}`:""}`,p=`${l}${i}${c}`;return{protocol:s,host:a,port:r,pathname:l,search:i,hash:c,origin:u,fullPath:p}}compareUrlBase(t,e){if(!t||!e)return!1;const s=this.parseUrl(t),a=this.parseUrl(e);return s.protocol===a.protocol&&s.host===a.host&&s.port===a.port}compareUrlPath(t,e){if(!t||!e)return!1;const s=this.parseUrl(t),a=this.parseUrl(e);return s.pathname===a.pathname}compareUrlFull(t,e){if(!t||!e)return!1;const s=this.parseUrl(t),a=this.parseUrl(e);return s.fullPath===a.fullPath}clear(){this.postmateParent&&(this.postmateParent.destroy(),this.postmateParent=null),this.currentIframe&&this.currentIframe.parentNode&&this.currentIframe.parentNode.removeChild(this.currentIframe),this.currentIframe=null}async init(t=null){if(this.clear(),this.childSupportsRouteUpdate=!0,!this.iframeEle||!this.currentUrl){console.warn("iframeEle 和 currentUrl 是必需的");return}const e=typeof this.iframeEle=="function"?this.iframeEle():this.iframeEle;if(!e){console.warn("无法获取 iframe 容器");return}const s=new h({container:e,url:this.currentUrl,name:"",model:""});this.currentIframe=e.querySelector("iframe"),this.currentIframe.setAttribute("frameborder","0"),this.currentIframe.setAttribute("allow","fullscreen"),this.currentIframe.addEventListener("load",()=>{this.loadFunction&&this.loadFunction()}),s.then(a=>{this.postmateParent=a,a.on("requestBaseData",()=>{this.sendData()}),a.on("otherRequest",r=>{this.handleOtherRequest&&this.handleOtherRequest(r)}),typeof t=="function"&&t()}).catch(a=>{console.error("Postmate 连接失败:",a)})}setLoadFunction(t){this.loadFunction=t}setIframeUrl(t){if(this.currentUrl===t)return;if(!this.currentUrl){this.currentUrl=t,this.parsedCurrentUrl=this.parseUrl(t),this.iframeEle&&this.init();return}const e=this.parseUrl(t);if(this.postmateParent&&this.compareUrlBase(this.currentUrl,t)&&this.childSupportsRouteUpdate)if(this.compareUrlPath(this.currentUrl,t)){if(this.compareUrlFull(this.currentUrl,t))return;this.currentUrl=t,this.parsedCurrentUrl=e,this.sendRouteUpdate(e);return}else{this.currentUrl=t,this.parsedCurrentUrl=e,this.sendRouteUpdate(e);return}this.currentUrl=t,this.parsedCurrentUrl=e,this.iframeEle&&this.init()}sendRouteUpdate(t){if(this.postmateParent){if(!this.childSupportsRouteUpdate){console.warn("子页面不支持路由更新，直接重新初始化iframe"),this.init();return}try{this.postmateParent.call("routeUpdate",JSON.stringify({fullPath:t.fullPath,pathname:t.pathname,search:t.search,hash:t.hash}));let e=!1;const s=a=>{try{const r=JSON.parse(a.data);r&&r.type==="route_update_support"&&r.supported===!0&&(e=!0,window.removeEventListener("message",s))}catch{}};window.addEventListener("message",s),setTimeout(()=>{window.removeEventListener("message",s),e||(console.warn("子页面不支持路由更新，将在下次更新时重新初始化iframe"),this.childSupportsRouteUpdate=!1,this.init())},1e3)}catch(e){console.warn("发送路由更新消息失败，将重新初始化iframe:",e),this.childSupportsRouteUpdate=!1,this.init()}}}sendData(){this.postmateParent&&this.postmateParent.call("baseData",JSON.stringify(this.dataInfo))}destroy(){this.clear()}}d.ChildPostmate=U,d.ParentPostmate=E,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/lib/postMeta/ChildPostmate.d.ts

@@ -3,13 +3,32 @@ interface EventObj {
     success: (success: any) => void;
     receive: (receive: any) => void;
 }
+interface RouteUpdateInfo {
+    fullPath: string;
+    pathname: string;
+    search: string;
+    hash: string;
+}
 export default class ChildPostmate {
     childPostmate: any;
     parentPostmate: any;
     isGetData: boolean;
     getDataCllBack: Function | null;
-    constructor(eventObj: EventObj);
+    router: any;
+    routeUpdateCallback: ((routeInfo: RouteUpdateInfo) => void) | null;
+    constructor(eventObj: EventObj, router: any, routeUpdateCallback?: (routeInfo: RouteUpdateInfo) => void);
     init(eventObj: EventObj): void;
     getData(callback?: any): void;
+    /**
+     * 设置路由实例和路由更新回调
+     * @param router Vue Router实例
+     * @param routeUpdateCallback 自定义路由更新回调函数
+     */
+    setRouter(router: any, routeUpdateCallback?: (routeInfo: RouteUpdateInfo) => void): void;
+    /**
+     * 向父页面发送其他请求
+     * @param params 请求参数
+     */
+    sendOtherRequest(params: any): void;
 }
 export {};

package/lib/postMeta/ParentPostmate.d.ts

@@ -0,0 +1,61 @@
+interface DataInfo {
+    loginInfo: {
+        [x: string]: any;
+    };
+    token: string;
+    isHideHeader: boolean;
+}
+interface ParsedUrl {
+    protocol: string;
+    host: string;
+    port: string;
+    pathname: string;
+    search: string;
+    hash: string;
+    origin: string;
+    fullPath: string;
+}
+export default class ParentPostmate {
+    /** 连接到的子 postmate 实例 */
+    postmateParent: any;
+    /** 通讯数据 */
+    dataInfo: DataInfo;
+    /** iframe Dom 容器 */
+    iframeEle: any;
+    /** 当前 iframe url */
+    currentUrl: string;
+    /** 存储当前的 iframe 元素 */
+    currentIframe: any;
+    /** iframe 加载完成执行函数 */
+    loadFunction: (() => void) | null;
+    /** 处理子类的其他请求方法 */
+    handleOtherRequest: ((params: any) => void) | null;
+    /** 当前URL解析结果 */
+    parsedCurrentUrl: ParsedUrl | null;
+    /** 子页面是否支持路由更新 */
+    childSupportsRouteUpdate: boolean;
+    constructor(dataInfo: DataInfo, iframeEle: HTMLElement | (() => HTMLElement), iframeUrl?: string, handleOtherRequest?: (params: any) => void);
+    /** 解析URL */
+    parseUrl(url: string): ParsedUrl;
+    /** 比较两个URL是否相同（协议、主机、端口） */
+    compareUrlBase(url1: string, url2: string): boolean;
+    /** 比较两个URL的路径是否相同（不包含查询参数和哈希） */
+    compareUrlPath(url1: string, url2: string): boolean;
+    /** 比较两个URL是否完全相同（包括查询参数和哈希） */
+    compareUrlFull(url1: string, url2: string): boolean;
+    /** 清除当前的 iframe 和 postmate 实例 */
+    clear(): void;
+    /** 初始化 */
+    init(callback?: any): Promise<void>;
+    /** 设置load执行事件 */
+    setLoadFunction(loadFunction: any): void;
+    /** 设置 iframe url */
+    setIframeUrl(iframeUrl: string): void;
+    /** 向子页面发送路由更新消息 */
+    sendRouteUpdate(parsedUrl: ParsedUrl): void;
+    /** 向子页面发送消息 */
+    sendData(): void;
+    /** 销毁实例 */
+    destroy(): void;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "qlfy-postmate",
-	"version": "1.1.7",
+	"version": "1.2.0",
 	"description": "",
 	"types": "lib/index.d.ts",
 	"module": "lib/index.umd.js",