iframe-tab-sdk 1.0.0 → 1.0.2

package/README.md

@@ -1,44 +1,51 @@
-## iframe-tab-sdk
-
-iframe微前端集成, 顶部tab页操作
-
-## API
-|方法名|说明|参数|类型
-|:----|:----|:----|:----
-|closeTabAsIframe|关闭操作; 参数为要关闭tab的路径|routePath|string
-|closeAndOpenTabAsIframe|关闭当前tab并新开tab|{openRoute(参数如下),closeTabName:'/xx/xx',message:''}|object
-|openTabAsIframe|新开tab|openRoute|object
-
-### openRoute Attributes
-|参数|类型|必填|说明
-|:----|:----|:----|:----
-|urlPath|string|是|tab页对应的路由(需加上子应用前缀)
-|title|string|是|tab页标题
-|params|object|否|params路由参数
-|query|object|否|query路由参数
-
-## 示例(vue+elementui)
-``` vue
-<template>
-  <el-button type="primary" @click="closeAndOpenTabAsIframe({openRoute,closeTabName: '/console/user/add',message:'用户添加成功!' })">关闭当前tab并打开新的tab页</el-button>
-</template>
-<script>
-import {closeAndOpenTabAsIframe} from 'iframe-tab-sdk'
-export default {
-  data() {
-    return {
-      openRoute: {
-        urlPath: '/console/user/list',
-        title: '新tab',
-        params: {}, // 非必填
-        query: {}, // 非必填
-      }
-    }
-  },
-  methods: {
-    closeAndOpenTabAsIframe
-  }
-}
-</script>
-
-```
+## iframe-tab-sdk
+
+iframe微前端集成, 顶部tab页操作;支持独立运行
+
+## API
+|方法名|说明|参数|类型
+|:----|:----|:----|:----
+|openTab|打开tab页|urlPath,openRoute|string,object
+|refreshTab|刷新tab页|urlPath,openRoute|string,object
+|closeTab|关闭tab页|urlPath|string
+|logout|退出登录|无|无
+|reload|刷新主应用网页|无|无
+|closeAndOpenTab|关闭当前tab并新开tab|urlPath,{ {...openRoute}, closeTabName }|string,object
+|fullscreen|全屏/退出全屏|isFullScreen|boolean
+
+### openRoute Attributes
+|参数|类型|必填|说明
+|:----|:----|:----|:----
+|urlPath|string|是|tab页对应的路由(需加上子应用前缀)
+|title|string|是|tab页标题
+|params|object|否|params路由参数
+|query|object|否|query路由参数
+|refreshClearQuery|boolean|否|是否清空路由参数
+|key|string|否|资源id
+|meta|object|否|tab页元数据
+
+## 示例(vue+elementui)
+``` vue
+<template>
+  <el-button type="primary" @click="closeAndOpenTab(urlPath,{...openRoute,closeTabName: '/console/user/add',message:'用户添加成功!' })">关闭当前tab并打开新的tab页</el-button>
+</template>
+<script>
+import {closeAndOpenTabAsIframe} from 'iframe-tab-sdk'
+export default {
+  data() {
+    return {
+      openRoute: {
+        urlPath: '/console/user/list',
+        title: '新tab',
+        params: {}, // 非必填
+        query: {}, // 非必填
+      }
+    }
+  },
+  methods: {
+    closeAndOpenTab
+  }
+}
+</script>
+
+```

package/index.js

@@ -1,12 +1,187 @@
-// 作为子应用运行时, 关闭tab
-export const closeTabAsIframe = (tabName) => {
-  window.parent.postMessage({type: 'closeTab',params: tabName},'*')
-}
-// 作为子应用运行时, 关闭当前tab并新开tab
-export const closeAndOpenTabAsIframe = (params) => {
-  window.parent.postMessage({type: 'closeAndOpenTab',params},'*')
-}
-// 作为子应用运行时, 打开tab
-export const openTabAsIframe = (params) => {
-  window.parent.postMessage({type: 'openTab',params},'*')
+const origin =
+  process.env.NODE_ENV === "development" ? "*" : window.location.origin;
+window.isIframeRun = window.self !== window.top; // 是否在iframe中运行
+
+// 获取Vue Router实例的辅助函数
+function getRouter() {
+  // 尝试获取Vue应用实例和路由
+  if (window.VueApp && window.VueApp.config && window.VueApp.config.globalProperties) {
+    // Vue 3
+    return window.VueApp.config.globalProperties.$router;
+  } else if (window.VueApp && window.VueApp._router) {
+    // Vue 2
+    return window.VueApp._router;
+  } else if (window.$nuxt && window.$nuxt.$router) {
+    // Nuxt.js
+    return window.$nuxt.$router;
+  } else if (window.router) {
+    // 直接访问全局router对象
+    return window.router;
+  }
+  return null;
+}
+
+// 非iframe环境下执行路由跳转
+function navigateTo(urlPath, query = {}) {
+  const router = getRouter();
+  if (!router) {
+    console.error('Vue Router instance not found. Please make sure to set window.VueApp to your Vue instance.');
+    // 尝试使用window.location进行跳转作为备选方案
+    const queryString = new URLSearchParams(query).toString();
+    const targetUrl = queryString ? `${urlPath}?${queryString}` : urlPath;
+    window.location.href = targetUrl;
+    return;
+  }
+
+  // 根据Vue Router版本适配不同API
+  if (typeof router.push === 'function') {
+    // 尝试获取路由对象或字符串路径
+    try {
+      // 如果是Vue Router 3.1+，支持对象路由
+      router.push({
+        path: urlPath,
+        query: query
+      }).catch(err => {
+        // 忽略导航到相同路由时的错误
+        if (err.name !== 'NavigationDuplicated' && !err.message.includes('redundant navigation')) {
+          console.error('Router navigation error:', err);
+        }
+      });
+    } catch (error) {
+      // 如果对象形式失败，尝试字符串形式
+      const queryString = new URLSearchParams(query).toString();
+      const targetUrl = queryString ? `${urlPath}?${queryString}` : urlPath;
+      router.push(targetUrl).catch(err => {
+        if (err.name !== 'NavigationDuplicated' && !err.message.includes('redundant navigation')) {
+          console.error('Router navigation error:', err);
+        }
+      });
+    }
+  } else {
+    console.error('Vue Router push method not available.');
+  }
+}
+
+/**
+ * 新开或跳转 tab 标签页
+ * @param {Object} params 相关参数
+ * @param {String} params[urlPath] 页面地址
+ * @param {String} params[name] 页面名称
+ * @param {String} params[title] 页面标题
+ * @param {Object} params[query] query 参数
+ * @param {Boolean} params[refreshClearQuery] 是否清空路由参数
+ *
+ */
+export function openTab(params) {
+  if (window.isIframeRun) {
+    window.parent.postMessage(
+      {
+        type: "openTab",
+        params
+      },
+      origin
+    );
+  } else {
+    const { urlPath, query = {} } = params;
+    // 非iframe环境，执行路由跳转
+    navigateTo(urlPath, query);
+  }
+}
+
+/**
+ * 刷新指定 tab 标签页
+ * @param {Object} params 相关参数
+ * @param {String} params[urlPath] 指定 tab 标签页 URL
+ * @param {String} params[name] 页面名称
+ * @param {String} params[title] 页面标题
+ * @param {Object} params[query] query 参数
+ */
+export function refreshTab(params) {
+  const urlPath = params.urlPath;
+  if (window.isIframeRun) {
+    if (params) {
+      return openTab(params);
+    }
+    
+    window.parent.postMessage({ type: "refreshTab", params: urlPath }, origin);
+  } else {
+    // 非iframe环境下，重新导航到指定路径
+    if (params) {
+      return openTab(params);
+    }
+    navigateTo(urlPath, {});
+  }
+}
+
+/**
+ * 关闭指定 tab 标签页
+ * @param {String} urlPath 指定 tab 标签页 URL
+ */
+export function closeTab(urlPath) {
+  if (window.isIframeRun) {
+    window.parent.postMessage({ type: "closeTab", params: urlPath }, origin);
+  } else {
+    // 非iframe环境，通常在主应用中没有实际的tab需要关闭，可以返回上一页或跳转到首页
+    if (window.history.length > 1) {
+      window.history.back();
+    } else {
+      window.location.href = '/';
+    }
+  }
+}
+
+/**
+ * 调用主应用退出登录
+ */
+export function logout() {
+  if (window.isIframeRun) {
+    window.parent.postMessage({ type: "logout" }, origin);
+  } else {
+    // 非iframe环境，直接执行登出逻辑
+    window.location.href = '/';
+  }
+}
+
+/**
+ * 刷新主应用网页
+ */
+export function reload() {
+  if (window.isIframeRun) {
+    window.parent.postMessage({ type: "reload" }, origin);
+  } else {
+    // 非iframe环境，直接刷新页面
+    window.location.reload();
+  }
+}
+
+/**
+ * 关闭某个tab打开新的tab（常用于关闭自身tab并打开新tab）
+ */
+export function closeAndOpenTab(params) {
+  if (window.isIframeRun) {
+    window.parent.postMessage(
+      {
+        type: "closeAndOpenTab",
+        params
+      },
+      origin
+    );
+  } else {
+    const {urlPath,query} = params;
+    // 非iframe环境，直接跳转到新页面
+    navigateTo(urlPath, query);
+  }
+}
+
+/**
+ * 全屏/退出全屏
+ * @param {Boolean} isFullScreen 是否全屏
+ */
+export function fullscreen(isFullScreen) {
+  if (window.isIframeRun) {
+    window.parent.postMessage({ type: "fullscreen", params: isFullScreen }, origin);
+  } else {
+    // 非iframe环境，不执行任何操作或可以实现本地全屏功能
+    console.log('Fullscreen operation is only available in iframe mode.');
+  }
 }

package/package.json

@@ -1,14 +1,14 @@
-{
-  "name": "iframe-tab-sdk",
-  "version": "1.0.0",
-  "description": "门户iframe集成子应用顶部tab页管理",
-  "main": "index.js",
-  "private": false,
-  "homepage": "https://gitee.com/weixiaoyun/iframe-tab-sdk/blob/master/README.md",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": ["iframe", "tab", "集成", "微前端"],
-  "author": "wy",
-  "license": "ISC"
-}
+{
+  "name": "iframe-tab-sdk",
+  "version": "1.0.2",
+  "description": "门户iframe集成子应用顶部tab页管理",
+  "main": "index.js",
+  "private": false,
+  "homepage": "https://gitee.com/weixiaoyun/iframe-tab-sdk/blob/master/README.md",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": ["iframe", "tab", "集成", "微前端"],
+  "author": "wy",
+  "license": "ISC"
+}