@hhfenpm/micro-app 1.0.0

package/README.md

@@ -0,0 +1,211 @@
+# @hhfenpm/micro-app
+
+微前端通信桥接和状态同步工具，支持父子应用之间的通信、状态同步和生命周期管理。
+
+## 安装
+
+```bash
+npm install @hhfenpm/micro-app
+# 或
+yarn add @hhfenpm/micro-app
+```
+
+## 功能特性
+
+- 🔗 **通信桥接**：支持父子应用之间的方法调用和通信
+- 🔄 **状态同步**：自动同步 Vuex store 状态
+- 🎯 **生命周期管理**：支持微前端生命周期（mount、update、unmount）
+- 🛣️ **路由同步**：自动同步子应用路由到父应用
+- ⚙️ **可配置**：支持自定义处理器、状态映射等
+
+## 使用方式
+
+### 1. 初始化通信桥接
+
+#### 父应用
+
+```javascript
+import { initBridge } from '@hhfenpm/micro-app'
+import Vue from 'vue'
+
+const vm = new Vue({ /* ... */ })
+
+// 创建处理器（项目特定）
+const handlers = {
+  elementUI: {
+    $message: (...args) => vm.$message(...args),
+    // ... 其他 Element UI 方法
+  },
+  electron: {
+    // ... Electron 方法
+  },
+}
+
+// 初始化桥接
+initBridge({
+  isParent: true,
+  vm,
+  handlers,
+  iframeSelector: '#microApp', // 可选，默认 '#microApp'
+})
+```
+
+#### 子应用
+
+```javascript
+import { initBridge } from '@hhfenpm/micro-app'
+import Vue from 'vue'
+
+const vm = new Vue({ /* ... */ })
+
+// 初始化桥接
+initBridge({
+  isParent: false,
+  vm,
+})
+
+// 使用 $base 调用父应用方法
+vm.$base.elementUI.$message('Hello from child app')
+vm.$base.electron.show()
+```
+
+### 2. 使用核心功能
+
+```javascript
+import { createMicroAppCore } from '@hhfenpm/micro-app'
+
+// 定义模块路由映射
+const ModelMap = () => ({
+  'module1': ['/module1', '/m1'],
+  'module2': ['/module2'],
+})
+
+// 创建核心功能实例
+const core = createMicroAppCore({
+  modelMap: ModelMap,
+  enabledModules: () => window.GLOBAL_CONFIG?.microApp || null,
+})
+
+// 使用
+const module = core.microAppModule('/module1')
+const src = core.microAppSrc('/module1')
+const deployed = await core.microAppDeployed('module1')
+```
+
+### 3. 使用状态同步插件
+
+```javascript
+import Vuex from 'vuex'
+import { baseSyncPlugin } from '@hhfenpm/micro-app'
+
+// 创建 Vuex Store
+const store = new Vuex.Store({
+  modules: {
+    base: {
+      namespaced: true,
+      state: {
+        patient_id: null,
+      },
+      mutations: {
+        SYNC_STATE(state, payload) {
+          Object.assign(state, payload)
+        },
+      },
+    },
+  },
+  plugins: [
+    baseSyncPlugin({
+      isParent: false, // 子应用设为 false
+      iframeSelector: '#microApp',
+    }),
+  ],
+})
+
+// 子应用附加路由同步
+import router from './router'
+store.attachRouterSync(router)
+```
+
+### 4. 生命周期管理
+
+#### 子应用
+
+```javascript
+// 注册生命周期钩子
+window.__MICRO_APP_LIFECYCLE__ = {
+  mount(payload) {
+    console.log('微前端已挂载', payload)
+  },
+  update(payload) {
+    console.log('微前端已更新', payload)
+  },
+  unmount(payload) {
+    console.log('微前端已卸载', payload)
+  },
+}
+```
+
+#### 父应用
+
+```javascript
+// 调用生命周期
+store.callMicroAppLifeCycle('mount', { /* payload */ })
+store.callMicroAppLifeCycle('update', { /* payload */ })
+store.callMicroAppLifeCycle('unmount', { /* payload */ })
+```
+
+## API 文档
+
+### Bridge
+
+#### `initBridge(options)`
+
+初始化通信桥接。
+
+**参数：**
+- `options.isParent` (boolean): 是否为父应用
+- `options.vm` (Object): Vue 实例
+- `options.iframeSelector` (string): iframe 选择器，默认 `'#microApp'`
+- `options.handlers` (Object): 处理器对象（父应用需要）
+
+### Core
+
+#### `createMicroAppCore(options)`
+
+创建微前端核心功能实例。
+
+**参数：**
+- `options.modelMap` (Function): 模块路由映射函数，返回 `{ [moduleName]: string[] }`
+- `options.enabledModules` (Array|Function): 启用的模块列表或获取模块列表的函数
+
+**返回：**
+- `microAppModule(path)`: 根据路径获取模块名
+- `microAppSrc(path)`: 生成完整 URL
+- `microAppDeployed(module)`: 检测模块是否已部署
+
+### Store
+
+#### `baseSyncPlugin(options)`
+
+创建状态同步插件。
+
+**参数：**
+- `options.isParent` (boolean): 是否为父应用
+- `options.iframeSelector` (string): iframe 选择器
+
+## 浏览器兼容性
+
+- 现代浏览器（Chrome, Firefox, Safari, Edge）
+- 需要支持 `postMessage` API
+- 需要支持 `Proxy` API（IE 11 不支持）
+
+## 注意事项
+
+1. **安全性**：消息通信会检查 `origin`，确保只在同源窗口间通信
+2. **状态同步**：状态同步使用深拷贝，避免引用污染
+3. **生命周期**：子应用需要注册 `window.__MICRO_APP_LIFECYCLE__` 对象
+4. **路由同步**：子应用需要调用 `store.attachRouterSync(router)` 附加路由同步
+
+## 许可证
+
+MIT

package/dist/index.esm.js

@@ -0,0 +1,416 @@
+/**
+ * 微前端通信桥接
+ * 支持父子应用之间的方法调用和通信
+ */
+
+const BRIDGE$1 = {
+  INVOKE: 'bridge-invoke',
+  CALLBACK: 'bridge-callback',
+};
+
+const post = (target, message) =>
+  target?.postMessage(message, window.location.origin);
+
+const getIframeWindow = selector =>
+  document.querySelector(selector)?.contentWindow;
+
+const genId = () => `${Date.now()}_${Math.random().toString(16).slice(2)}`;
+
+const safeClone = value => {
+  try {
+    return JSON.parse(JSON.stringify(value))
+  } catch {
+    return String(value)
+  }
+};
+
+/**
+ * 初始化通信桥接
+ * @param {Object} options - 配置选项
+ * @param {boolean} options.isParent - 是否为父应用，默认 false
+ * @param {Object} options.vm - Vue 实例（可选）
+ * @param {string} options.iframeSelector - iframe 选择器，默认 '#microApp'
+ * @param {Object} options.handlers - 处理器对象（父应用需要提供）
+ * @returns {void}
+ */
+const initBridge = ({
+  isParent = false,
+  vm,
+  iframeSelector = '#microApp',
+  handlers = {},
+} = {}) => {
+  // 父应用使用传入的 handlers，子应用为空对象
+  const finalHandlers = isParent ? handlers : Object.create(null);
+
+  const pending = Object.create(null);
+
+  // 子应用：创建 $base 代理对象，用于调用父应用方法
+  if (!isParent && vm) {
+    vm.$base = new Proxy(
+      {},
+      {
+        get(_, namespace) {
+          return new Proxy(
+            {},
+            {
+              get(_, method) {
+                return params =>
+                  new Promise(resolve => {
+                    const callbackId = genId();
+                    pending[callbackId] = resolve;
+
+                    post(window.parent, {
+                      type: BRIDGE$1.INVOKE,
+                      action: `${namespace}.${method}`,
+                      params,
+                      callbackId,
+                    });
+                  })
+              },
+            }
+          )
+        },
+      }
+    );
+
+    vm.$baseReady = true;
+  }
+
+  // 处理来自子应用的调用请求（父应用）
+  const handleInvoke = e => {
+    const { action, params, callbackId } = e.data || {};
+    if (!action || !callbackId) return
+
+    const [namespace, method] = action.split('.');
+    const fn = finalHandlers?.[namespace]?.[method];
+    if (typeof fn !== 'function') return
+
+    const iframeWindow = getIframeWindow(iframeSelector);
+    if (!iframeWindow) return
+
+    try {
+      const result = fn(params);
+      const done = payload =>
+        post(iframeWindow, {
+          type: BRIDGE$1.CALLBACK,
+          callbackId,
+          result: safeClone(payload),
+        });
+
+      result?.then ? result.then(done).catch(done) : done(result);
+    } catch (err) {
+      post(iframeWindow, {
+        type: BRIDGE$1.CALLBACK,
+        callbackId,
+        result: safeClone(err?.message || err),
+      });
+    }
+  };
+
+  // 处理来自父应用的响应（子应用）
+  const handleCallback = e => {
+    const { callbackId, result } = e.data || {};
+    if (!callbackId || !pending[callbackId]) return
+
+    pending[callbackId](result);
+    delete pending[callbackId];
+  };
+
+  // 监听消息
+  window.addEventListener('message', e => {
+    if (e.origin !== window.location.origin) return
+
+    const { type } = e.data || {};
+    if (isParent && type === BRIDGE$1.INVOKE) handleInvoke(e);
+    if (!isParent && type === BRIDGE$1.CALLBACK) handleCallback(e);
+  });
+};
+
+/**
+ * 微前端核心功能
+ * 提供模块路由映射、URL 生成、部署检测等功能
+ */
+
+/**
+ * 创建微前端核心功能
+ * @param {Object} options - 配置选项
+ * @param {Function} options.modelMap - 模块路由映射函数，返回 { [moduleName]: string[] }
+ * @param {Array<string>|Function} options.enabledModules - 启用的模块列表或获取模块列表的函数
+ * @returns {Object} 核心功能对象
+ */
+function createMicroAppCore({
+  modelMap,
+  enabledModules,
+} = {}) {
+  if (!modelMap || typeof modelMap !== 'function') {
+    throw new Error('modelMap function is required')
+  }
+
+  const MAP = modelMap();
+
+  /**
+   * 获取启用的模块列表
+   * @returns {Array<string>|null}
+   */
+  const getEnabledModules = () => {
+    if (Array.isArray(enabledModules)) {
+      return enabledModules
+    }
+    if (typeof enabledModules === 'function') {
+      return enabledModules()
+    }
+    // 默认从 window.GLOBAL_CONFIG.microApp 获取
+    if (typeof window !== 'undefined' && window.GLOBAL_CONFIG) {
+      return window.GLOBAL_CONFIG.microApp || null
+    }
+    return null
+  };
+
+  /**
+   * 根据路径获取对应的微前端模块名
+   * @param {string} path - 路由路径
+   * @returns {string|null} 模块名，如果不在任何模块中则返回 null
+   */
+  const microAppModule = path => {
+    const value = path.split('?')[0];
+    const key = Object.keys(MAP).find(key => MAP[key].includes(value));
+    const DATA = getEnabledModules();
+    return DATA?.includes(key) ? key : null
+  };
+
+  /**
+   * 生成微前端应用的完整 URL
+   * @param {string} path - 路由路径
+   * @returns {string} 完整的 URL
+   */
+  const microAppSrc = path => {
+    const module = microAppModule(path);
+    const base = window.location.href.split('#')[0];
+    return `${base}${module ? `${module}/` : ''}#${path}`
+  };
+
+  /**
+   * 检测微前端模块是否已部署
+   * @param {string} module - 模块名
+   * @returns {Promise<boolean>} 是否已部署
+   */
+  const microAppDeployed = async module => {
+    try {
+      const result = await fetch(`/${module}`, {
+        method: 'GET',
+        cache: 'no-store',
+      });
+      return result.ok
+    } catch (error) {
+      return false
+    }
+  };
+
+  return {
+    microAppModule,
+    microAppSrc,
+    microAppDeployed,
+  }
+}
+
+/**
+ * 创建默认的微前端核心功能实例
+ * 使用 window.GLOBAL_CONFIG.microApp 作为配置源
+ * @param {Function} modelMap - 模块路由映射函数
+ * @returns {Object} 核心功能对象
+ */
+function createDefaultMicroAppCore(modelMap) {
+  return createMicroAppCore({
+    modelMap,
+  })
+}
+
+/**
+ * Vuex 状态同步插件
+ * 用于在父子应用之间同步 Vuex store 状态
+ */
+
+const MESSAGE = {
+  SYNC_FROM_CHILD: 'sync-base-from-child',
+  SYNC_FROM_PARENT: 'sync-base-from-parent',
+  REQUEST_FROM_CHILD: 'request-base-from-child',
+  CHILD_ROUTE_CHANGE: 'child-route-change',
+};
+
+const LIFE_CYCLE = {
+  MOUNT: 'mount',
+  UPDATE: 'update',
+  UNMOUNT: 'unmount',
+};
+
+const BRIDGE = { INVOKE: 'bridge-invoke', CALLBACK: 'bridge-callback' };
+
+const LIFE_CYCLE_TYPES = Object.values(LIFE_CYCLE);
+const BRIDGE_TYPES = Object.values(BRIDGE);
+
+const getIframe = selector => document.querySelector(selector);
+
+const postToChild = (iframeSelector, message) => {
+  const iframe = getIframe(iframeSelector);
+  iframe?.contentWindow?.postMessage(message, window.location.origin);
+};
+
+const postToParent = message => {
+  window.parent?.postMessage(message, window.location.origin);
+};
+
+const isLifeCycleMessage = type => LIFE_CYCLE_TYPES.includes(type);
+
+const isBridgeMessage = type => BRIDGE_TYPES.includes(type);
+
+const isInternalMessage = type =>
+  [
+    MESSAGE.SYNC_FROM_CHILD,
+    MESSAGE.REQUEST_FROM_CHILD,
+    MESSAGE.CHILD_ROUTE_CHANGE,
+  ].includes(type);
+
+const syncRouteFromChild = fullPath => {
+  if (typeof fullPath !== 'string') return
+  const { origin, pathname } = window.location;
+  const base =
+    pathname === '/' || pathname === ''
+      ? origin
+      : (origin + pathname).replace(/\/$/, '');
+  const target = `${base}/#${fullPath}`;
+  if (window.location.href !== target) {
+    window.location.href = target;
+  }
+};
+
+/**
+ * 创建状态同步插件
+ * @param {Object} options - 配置选项
+ * @param {boolean} options.isParent - 是否为父应用，默认 false
+ * @param {string} options.iframeSelector - iframe 选择器，默认 '#microApp'
+ * @returns {Function} Vuex 插件函数
+ */
+function baseSyncPlugin({
+  isParent = false,
+  iframeSelector = '#microApp',
+} = {}) {
+  return store => {
+    let latestBaseState = store.state.base;
+
+    // 监听 base 状态变化，自动同步
+    store.watch(
+      state => state.base,
+      newBase => {
+        latestBaseState = newBase;
+        if (isParent) {
+          postToChild(iframeSelector, {
+            type: MESSAGE.SYNC_FROM_PARENT,
+            payload: latestBaseState,
+          });
+        } else {
+          postToParent({
+            type: MESSAGE.SYNC_FROM_CHILD,
+            payload: latestBaseState,
+          });
+        }
+      },
+      { deep: true }
+    );
+
+    // 附加路由同步功能（子应用使用）
+    store.attachRouterSync = router => {
+      if (!router || isParent) return
+      router.afterEach(to => {
+        const parentHref = window.parent?.location?.href || '';
+        const parentFullPath = parentHref.includes('#')
+          ? parentHref.split('#')[1]
+          : '';
+        const childFullPath = to.fullPath.startsWith('/')
+          ? to.fullPath
+          : '/' + to.fullPath;
+        if (parentFullPath !== childFullPath) {
+          postToParent({
+            type: MESSAGE.CHILD_ROUTE_CHANGE,
+            fullPath: to.fullPath,
+          });
+        }
+      });
+    };
+
+    // 调用微前端生命周期（父应用使用）
+    store.callMicroAppLifeCycle = (type, payload) => {
+      if (!isParent) return
+      if (!isLifeCycleMessage(type)) return
+
+      postToChild(iframeSelector, {
+        type,
+        payload,
+      });
+    };
+
+    // 处理消息
+    const handleMessage = event => {
+      if (event.origin !== window.location.origin) return
+      const { type, payload, fullPath } = event.data || {};
+
+      // 子应用处理生命周期消息
+      if (!isParent && isLifeCycleMessage(type)) {
+        window.__MICRO_APP_LIFECYCLE__?.[type]?.(payload);
+        return
+      }
+
+      // 父应用处理来自子应用的状态同步
+      if (isParent && type === MESSAGE.SYNC_FROM_CHILD) {
+        store.commit('base/SYNC_STATE', payload);
+        return
+      }
+
+      // 子应用处理来自父应用的状态同步
+      if (!isParent && type === MESSAGE.SYNC_FROM_PARENT) {
+        store.commit('base/SYNC_STATE', payload);
+        return
+      }
+
+      // 父应用响应子应用的状态请求
+      if (isParent && type === MESSAGE.REQUEST_FROM_CHILD) {
+        postToChild(iframeSelector, {
+          type: MESSAGE.SYNC_FROM_PARENT,
+          payload: latestBaseState,
+        });
+        return
+      }
+
+      // 父应用处理子应用的路由变化
+      if (isParent && type === MESSAGE.CHILD_ROUTE_CHANGE) {
+        syncRouteFromChild(fullPath);
+        return
+      }
+
+      // 父应用转发其他消息到父窗口
+      if (isParent && !isInternalMessage(type) && !isBridgeMessage(type)) {
+        window.parent?.postMessage(event.data || {}, '*');
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    // 子应用初始化时请求父应用状态
+    if (!isParent && window.parent) {
+      postToParent({ type: MESSAGE.REQUEST_FROM_CHILD });
+    }
+  }
+}
+
+/**
+ * @hhfenpm/micro-app
+ * 微前端通信桥接和状态同步工具
+ */
+
+
+var index = {
+  initBridge,
+  createDefaultMicroAppCore,
+  baseSyncPlugin,
+};
+
+export { baseSyncPlugin, createDefaultMicroAppCore, createMicroAppCore, index as default, initBridge };

package/dist/index.js

@@ -0,0 +1,424 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 微前端通信桥接
+ * 支持父子应用之间的方法调用和通信
+ */
+
+const BRIDGE$1 = {
+  INVOKE: 'bridge-invoke',
+  CALLBACK: 'bridge-callback',
+};
+
+const post = (target, message) =>
+  target?.postMessage(message, window.location.origin);
+
+const getIframeWindow = selector =>
+  document.querySelector(selector)?.contentWindow;
+
+const genId = () => `${Date.now()}_${Math.random().toString(16).slice(2)}`;
+
+const safeClone = value => {
+  try {
+    return JSON.parse(JSON.stringify(value))
+  } catch {
+    return String(value)
+  }
+};
+
+/**
+ * 初始化通信桥接
+ * @param {Object} options - 配置选项
+ * @param {boolean} options.isParent - 是否为父应用，默认 false
+ * @param {Object} options.vm - Vue 实例（可选）
+ * @param {string} options.iframeSelector - iframe 选择器，默认 '#microApp'
+ * @param {Object} options.handlers - 处理器对象（父应用需要提供）
+ * @returns {void}
+ */
+const initBridge = ({
+  isParent = false,
+  vm,
+  iframeSelector = '#microApp',
+  handlers = {},
+} = {}) => {
+  // 父应用使用传入的 handlers，子应用为空对象
+  const finalHandlers = isParent ? handlers : Object.create(null);
+
+  const pending = Object.create(null);
+
+  // 子应用：创建 $base 代理对象，用于调用父应用方法
+  if (!isParent && vm) {
+    vm.$base = new Proxy(
+      {},
+      {
+        get(_, namespace) {
+          return new Proxy(
+            {},
+            {
+              get(_, method) {
+                return params =>
+                  new Promise(resolve => {
+                    const callbackId = genId();
+                    pending[callbackId] = resolve;
+
+                    post(window.parent, {
+                      type: BRIDGE$1.INVOKE,
+                      action: `${namespace}.${method}`,
+                      params,
+                      callbackId,
+                    });
+                  })
+              },
+            }
+          )
+        },
+      }
+    );
+
+    vm.$baseReady = true;
+  }
+
+  // 处理来自子应用的调用请求（父应用）
+  const handleInvoke = e => {
+    const { action, params, callbackId } = e.data || {};
+    if (!action || !callbackId) return
+
+    const [namespace, method] = action.split('.');
+    const fn = finalHandlers?.[namespace]?.[method];
+    if (typeof fn !== 'function') return
+
+    const iframeWindow = getIframeWindow(iframeSelector);
+    if (!iframeWindow) return
+
+    try {
+      const result = fn(params);
+      const done = payload =>
+        post(iframeWindow, {
+          type: BRIDGE$1.CALLBACK,
+          callbackId,
+          result: safeClone(payload),
+        });
+
+      result?.then ? result.then(done).catch(done) : done(result);
+    } catch (err) {
+      post(iframeWindow, {
+        type: BRIDGE$1.CALLBACK,
+        callbackId,
+        result: safeClone(err?.message || err),
+      });
+    }
+  };
+
+  // 处理来自父应用的响应（子应用）
+  const handleCallback = e => {
+    const { callbackId, result } = e.data || {};
+    if (!callbackId || !pending[callbackId]) return
+
+    pending[callbackId](result);
+    delete pending[callbackId];
+  };
+
+  // 监听消息
+  window.addEventListener('message', e => {
+    if (e.origin !== window.location.origin) return
+
+    const { type } = e.data || {};
+    if (isParent && type === BRIDGE$1.INVOKE) handleInvoke(e);
+    if (!isParent && type === BRIDGE$1.CALLBACK) handleCallback(e);
+  });
+};
+
+/**
+ * 微前端核心功能
+ * 提供模块路由映射、URL 生成、部署检测等功能
+ */
+
+/**
+ * 创建微前端核心功能
+ * @param {Object} options - 配置选项
+ * @param {Function} options.modelMap - 模块路由映射函数，返回 { [moduleName]: string[] }
+ * @param {Array<string>|Function} options.enabledModules - 启用的模块列表或获取模块列表的函数
+ * @returns {Object} 核心功能对象
+ */
+function createMicroAppCore({
+  modelMap,
+  enabledModules,
+} = {}) {
+  if (!modelMap || typeof modelMap !== 'function') {
+    throw new Error('modelMap function is required')
+  }
+
+  const MAP = modelMap();
+
+  /**
+   * 获取启用的模块列表
+   * @returns {Array<string>|null}
+   */
+  const getEnabledModules = () => {
+    if (Array.isArray(enabledModules)) {
+      return enabledModules
+    }
+    if (typeof enabledModules === 'function') {
+      return enabledModules()
+    }
+    // 默认从 window.GLOBAL_CONFIG.microApp 获取
+    if (typeof window !== 'undefined' && window.GLOBAL_CONFIG) {
+      return window.GLOBAL_CONFIG.microApp || null
+    }
+    return null
+  };
+
+  /**
+   * 根据路径获取对应的微前端模块名
+   * @param {string} path - 路由路径
+   * @returns {string|null} 模块名，如果不在任何模块中则返回 null
+   */
+  const microAppModule = path => {
+    const value = path.split('?')[0];
+    const key = Object.keys(MAP).find(key => MAP[key].includes(value));
+    const DATA = getEnabledModules();
+    return DATA?.includes(key) ? key : null
+  };
+
+  /**
+   * 生成微前端应用的完整 URL
+   * @param {string} path - 路由路径
+   * @returns {string} 完整的 URL
+   */
+  const microAppSrc = path => {
+    const module = microAppModule(path);
+    const base = window.location.href.split('#')[0];
+    return `${base}${module ? `${module}/` : ''}#${path}`
+  };
+
+  /**
+   * 检测微前端模块是否已部署
+   * @param {string} module - 模块名
+   * @returns {Promise<boolean>} 是否已部署
+   */
+  const microAppDeployed = async module => {
+    try {
+      const result = await fetch(`/${module}`, {
+        method: 'GET',
+        cache: 'no-store',
+      });
+      return result.ok
+    } catch (error) {
+      return false
+    }
+  };
+
+  return {
+    microAppModule,
+    microAppSrc,
+    microAppDeployed,
+  }
+}
+
+/**
+ * 创建默认的微前端核心功能实例
+ * 使用 window.GLOBAL_CONFIG.microApp 作为配置源
+ * @param {Function} modelMap - 模块路由映射函数
+ * @returns {Object} 核心功能对象
+ */
+function createDefaultMicroAppCore(modelMap) {
+  return createMicroAppCore({
+    modelMap,
+  })
+}
+
+/**
+ * Vuex 状态同步插件
+ * 用于在父子应用之间同步 Vuex store 状态
+ */
+
+const MESSAGE = {
+  SYNC_FROM_CHILD: 'sync-base-from-child',
+  SYNC_FROM_PARENT: 'sync-base-from-parent',
+  REQUEST_FROM_CHILD: 'request-base-from-child',
+  CHILD_ROUTE_CHANGE: 'child-route-change',
+};
+
+const LIFE_CYCLE = {
+  MOUNT: 'mount',
+  UPDATE: 'update',
+  UNMOUNT: 'unmount',
+};
+
+const BRIDGE = { INVOKE: 'bridge-invoke', CALLBACK: 'bridge-callback' };
+
+const LIFE_CYCLE_TYPES = Object.values(LIFE_CYCLE);
+const BRIDGE_TYPES = Object.values(BRIDGE);
+
+const getIframe = selector => document.querySelector(selector);
+
+const postToChild = (iframeSelector, message) => {
+  const iframe = getIframe(iframeSelector);
+  iframe?.contentWindow?.postMessage(message, window.location.origin);
+};
+
+const postToParent = message => {
+  window.parent?.postMessage(message, window.location.origin);
+};
+
+const isLifeCycleMessage = type => LIFE_CYCLE_TYPES.includes(type);
+
+const isBridgeMessage = type => BRIDGE_TYPES.includes(type);
+
+const isInternalMessage = type =>
+  [
+    MESSAGE.SYNC_FROM_CHILD,
+    MESSAGE.REQUEST_FROM_CHILD,
+    MESSAGE.CHILD_ROUTE_CHANGE,
+  ].includes(type);
+
+const syncRouteFromChild = fullPath => {
+  if (typeof fullPath !== 'string') return
+  const { origin, pathname } = window.location;
+  const base =
+    pathname === '/' || pathname === ''
+      ? origin
+      : (origin + pathname).replace(/\/$/, '');
+  const target = `${base}/#${fullPath}`;
+  if (window.location.href !== target) {
+    window.location.href = target;
+  }
+};
+
+/**
+ * 创建状态同步插件
+ * @param {Object} options - 配置选项
+ * @param {boolean} options.isParent - 是否为父应用，默认 false
+ * @param {string} options.iframeSelector - iframe 选择器，默认 '#microApp'
+ * @returns {Function} Vuex 插件函数
+ */
+function baseSyncPlugin({
+  isParent = false,
+  iframeSelector = '#microApp',
+} = {}) {
+  return store => {
+    let latestBaseState = store.state.base;
+
+    // 监听 base 状态变化，自动同步
+    store.watch(
+      state => state.base,
+      newBase => {
+        latestBaseState = newBase;
+        if (isParent) {
+          postToChild(iframeSelector, {
+            type: MESSAGE.SYNC_FROM_PARENT,
+            payload: latestBaseState,
+          });
+        } else {
+          postToParent({
+            type: MESSAGE.SYNC_FROM_CHILD,
+            payload: latestBaseState,
+          });
+        }
+      },
+      { deep: true }
+    );
+
+    // 附加路由同步功能（子应用使用）
+    store.attachRouterSync = router => {
+      if (!router || isParent) return
+      router.afterEach(to => {
+        const parentHref = window.parent?.location?.href || '';
+        const parentFullPath = parentHref.includes('#')
+          ? parentHref.split('#')[1]
+          : '';
+        const childFullPath = to.fullPath.startsWith('/')
+          ? to.fullPath
+          : '/' + to.fullPath;
+        if (parentFullPath !== childFullPath) {
+          postToParent({
+            type: MESSAGE.CHILD_ROUTE_CHANGE,
+            fullPath: to.fullPath,
+          });
+        }
+      });
+    };
+
+    // 调用微前端生命周期（父应用使用）
+    store.callMicroAppLifeCycle = (type, payload) => {
+      if (!isParent) return
+      if (!isLifeCycleMessage(type)) return
+
+      postToChild(iframeSelector, {
+        type,
+        payload,
+      });
+    };
+
+    // 处理消息
+    const handleMessage = event => {
+      if (event.origin !== window.location.origin) return
+      const { type, payload, fullPath } = event.data || {};
+
+      // 子应用处理生命周期消息
+      if (!isParent && isLifeCycleMessage(type)) {
+        window.__MICRO_APP_LIFECYCLE__?.[type]?.(payload);
+        return
+      }
+
+      // 父应用处理来自子应用的状态同步
+      if (isParent && type === MESSAGE.SYNC_FROM_CHILD) {
+        store.commit('base/SYNC_STATE', payload);
+        return
+      }
+
+      // 子应用处理来自父应用的状态同步
+      if (!isParent && type === MESSAGE.SYNC_FROM_PARENT) {
+        store.commit('base/SYNC_STATE', payload);
+        return
+      }
+
+      // 父应用响应子应用的状态请求
+      if (isParent && type === MESSAGE.REQUEST_FROM_CHILD) {
+        postToChild(iframeSelector, {
+          type: MESSAGE.SYNC_FROM_PARENT,
+          payload: latestBaseState,
+        });
+        return
+      }
+
+      // 父应用处理子应用的路由变化
+      if (isParent && type === MESSAGE.CHILD_ROUTE_CHANGE) {
+        syncRouteFromChild(fullPath);
+        return
+      }
+
+      // 父应用转发其他消息到父窗口
+      if (isParent && !isInternalMessage(type) && !isBridgeMessage(type)) {
+        window.parent?.postMessage(event.data || {}, '*');
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    // 子应用初始化时请求父应用状态
+    if (!isParent && window.parent) {
+      postToParent({ type: MESSAGE.REQUEST_FROM_CHILD });
+    }
+  }
+}
+
+/**
+ * @hhfenpm/micro-app
+ * 微前端通信桥接和状态同步工具
+ */
+
+
+var index = {
+  initBridge,
+  createDefaultMicroAppCore,
+  baseSyncPlugin,
+};
+
+exports.baseSyncPlugin = baseSyncPlugin;
+exports.createDefaultMicroAppCore = createDefaultMicroAppCore;
+exports.createMicroAppCore = createMicroAppCore;
+exports.default = index;
+exports.initBridge = initBridge;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@hhfenpm/micro-app",
+  "version": "1.0.0",
+  "description": "微前端通信桥接和状态同步工具，支持父子应用通信、状态同步、生命周期管理",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "micro-frontend",
+    "micro-app",
+    "bridge",
+    "iframe",
+    "communication",
+    "vuex",
+    "state-sync"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^2.6.0 || ^3.0.0",
+    "vuex": "^3.0.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "rollup": "^3.29.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bugs": {
+    "url": ""
+  },
+  "homepage": ""
+}